@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&family=Roboto:wght@100;300;400;500;700;900&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css");

            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
            body.h-100 {
                position: relative;
                height: 100%;
                background: url('../images/background.jpg') no-repeat right center fixed;
                background-size: 130%;
                background-position: right center;
                background-repeat: no-repeat;
                background-attachment: fixed;
                min-height: 100vh;
                overflow-y: auto;
            }
            body.h-100::before {
                content: "";
                position: fixed;
                top: 0; left: 0;
                width: 100%;
                height: 100vh;
                background: linear-gradient(to left, rgba(17, 47, 45, 0.85), rgba(17, 47, 45, 0.75));
                z-index: 0;
                pointer-events: none;
            }
            .authentication {
                position: relative;
                z-index: 1;
                min-height: 100vh;
                padding: 20px 0;
            }
            
            .password-meter {
                display: flex;
                height: 5px;
                margin-top: 10px;
            }
            .meter-section {
                flex: 1;
                background-color: #ddd;
                transition: background-color 0.3s ease;
            }
            .weak {
                background-color: #ff4d4d;
            }
            .medium {
                background-color: #ffd633;
            }
            .strong {
                background-color: #00b300;
            }
            .very-strong {
                background-color: #009900;
            }
            
            .block {
                position: absolute;
                left: 0;
                top: 0;
            }
            
            .slidercaptcha {
                margin: 0 auto;
                width: 100%;
                height: 300px;
                border-radius: 4px;
                margin-top: 0;
            }
            
            .slidercaptcha canvas:first-child {
                border-radius: 5px;
                border: 1px solid #e6e8eb;
            }
            
            .sliderContainer {
                position: relative;
                text-align: center;
                line-height: 40px;
                background: #f7f9fa;
                color: #45494c;
                border-radius: 2px;
            }
            
            .sliderbg {
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                background-color: #f7f9fa;
                height: 40px;
                border-radius: 2px;
                border: 1px solid #e6e8eb;
            }
            
            .sliderContainer_active .slider {
                top: -1px;
                border: 1px solid #a38458;
            }
            
            .sliderContainer_active .sliderMask {
                border-width: 1px 0 1px 1px;
            }
            
            .sliderContainer_success .slider {
                top: -1px;
                border: 1px solid #02c076;
                background-color: #02c076 !important;
                color: #fff;
            }
            
            .sliderContainer_success .sliderMask {
                border: 1px solid #52CCBA;
                border-width: 1px 0 1px 1px;
                background-color: #D2F4EF;
            }
            
            .sliderContainer_success .sliderIcon:before {
                content: "\f00c";
            }
            
            .sliderContainer_fail .slider {
                top: -1px;
                border: 1px solid #f35c59;
                background-color: #f35c59;
                color: #fff;
            }
            
            .sliderContainer_fail .sliderMask {
                border: 1px solid #f35c59;
                background-color: #f7dcdd;
                border-width: 1px 0 1px 1px;
            }
            
            .sliderContainer_fail .sliderIcon:before {
                content: "\f00d";
            }
            
            .sliderContainer_active .sliderText, .sliderContainer_success .sliderText, .sliderContainer_fail .sliderText {
                display: none;
            }
            
            .sliderMask {
                position: absolute;
                left: 0;
                top: 0;
                height: 40px;
                border: 0 solid #e5e3cf;
                background: #e5e3cf;    
                border-radius: 2px;
            }
            
            .slider {
                position: absolute;
                top: 0;
                left: 0;
                width: 40px;
                height: 40px;
                background: #fff;
                box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
                cursor: pointer;
                transition: background .2s linear;
                border-radius: 2px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            
            .slider:hover {
                background: #a38458;
                color: #fff;
                border-color: #a38458;
            }
            
            .slider:hover .sliderIcon {
                background-position: 0 -13px;
            }
            
            .sliderText {
                position: relative;
            }
            
            .refreshIcon {
                position: absolute;
                right: 5px;
                top: 5px;
                cursor: pointer;
                padding: 6px;
                color: #fff;
                background-color: #ff4c4c;
                font-size: 14px;
                border-radius: 50px;
                cursor: pointer;
            }
            
            .refreshIcon:hover {
                color: #fff;
            }
            
            #captchaOverlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                background-color: rgba(0,0,0,0.5);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 9999;
            }
            
            #captchaModal {
                background: #fff;
                padding: 30px;
                border-radius: 8px;
                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
                width: 100%;
                max-width: 400px;
            }
            
            @media (max-width: 768px) {
                body.h-100 {
                    background-size: cover;
                    background-position: center center;
                }
            }