#passwordMatch{

    font-weight:600;

}

.password-weak{

    color:#dc3545;

}

.password-medium{

    color:#fd7e14;

}

.password-strong{

    color:#198754;

}



/* ===========================
   Header
=========================== */

.top-bar{

    background:#ffffff;

    border-bottom:1px solid #e5e7eb;

    padding:14px 0;

    box-shadow:0 3px 12px rgba(0,0,0,.05);

}

.brand{

    display:flex;

    align-items:center;

    gap:15px;

}

.logo{

    width:58px;

    height:58px;

    object-fit:contain;

}

.brand h4{

    margin:0;

    font-size:22px;

    font-weight:600;

    color:#0f172a;

}

.brand p{

    margin:0;

    color:#6b7280;

    font-size:14px;

}

.version{

    background:#e8f0fe;

    color:#0d6efd;

    padding:8px 18px;

    border-radius:30px;

    font-weight:600;

    font-size:13px;

}


/*==========================================
    CHANGE PASSWORD PAGE
==========================================*/

.login-wrapper{

    min-height:calc(100vh - 92px);

    display:flex;

    align-items:center;

    background:#f4f7fc;

    padding:60px 0;

}

/*==========================================
    LEFT PANEL
==========================================*/

.left-panel{

    padding-right:60px;

}

.hero-image{

    max-width:100%;

    margin-bottom:35px;

}

.left-panel h1{

    font-size:48px;

    font-weight:700;

    color:#0f172a;

    line-height:1.2;

    margin-bottom:20px;

}

.left-panel p{

    font-size:20px;

    color:#64748b;

    line-height:1.8;

    margin-bottom:35px;

}

/*==========================================
    FEATURE CARD
==========================================*/

.feature-card{

    background:#fff;

    border-radius:18px;

    padding:22px 25px;

    margin-bottom:18px;

    display:flex;

    align-items:center;

    gap:18px;

    box-shadow:0 8px 25px rgba(0,0,0,.05);

    transition:.3s;

}

.feature-card:hover{

    transform:translateY(-4px);

}

.feature-card i{

    font-size:24px;

    color:#0d6efd;

}

.feature-card span{

    font-size:20px;

    font-weight:600;

    color:#1e293b;

}

/*==========================================
    CARD
==========================================*/

.login-card{

    background:#fff;

    border-radius:28px;

    padding:55px;

    box-shadow:0 18px 45px rgba(15,23,42,.08);

}

.login-card h2{

    font-size:42px;

    font-weight:700;

    color:#0f172a;

}

.login-card p{

    color:#64748b;

    margin-top:8px;

    margin-bottom:30px;

}

/*==========================================
    PASSWORD TOGGLE
==========================================*/

.toggle-password{

    position:absolute;

    right:18px;

    top:50%;

    transform:translateY(-50%);

    cursor:pointer;

    color:#64748b;

    font-size:20px;

    z-index:5;

}

/*==========================================
    PASSWORD STRENGTH
==========================================*/

#passwordStrength{

    font-size:14px;

    font-weight:600;

    min-height:24px;

}

.password-weak{

    color:#dc3545;

}

.password-medium{

    color:#fd7e14;

}

.password-strong{

    color:#198754;

}

/*==========================================
    CAPTCHA
==========================================*/

.captcha-box{

    height:60px;

    border-radius:14px;

    border:1px dashed #0d6efd;

    background:#eef5ff;

    display:flex;

    justify-content:center;

    align-items:center;

    letter-spacing:8px;

    font-size:28px;

    font-weight:700;

    color:#0d6efd;

    user-select:none;

}

#refreshCaptcha{

    width:60px;

    height:60px;

    border-radius:14px;

    font-size:22px;

}

/*==========================================
    BUTTON
==========================================*/

.btn-primary{

    height:58px;

    border-radius:14px;

    font-size:18px;

    font-weight:600;

}

/*==========================================
    ALERT
==========================================*/

.alert{

    border-radius:14px;

    font-weight:500;

}

/*==========================================
    RESPONSIVE
==========================================*/

@media(max-width:992px){

    .login-card{

        padding:35px;

    }

    .login-card h2{

        font-size:34px;

    }

}

@media(max-width:576px){

    .login-wrapper{

        padding:25px 0;

    }

    .login-card{

        padding:25px;

        border-radius:20px;

    }

    .login-card h2{

        font-size:28px;

    }

    .left-panel{

        padding-right:0;

    }

    .feature-card span{

        font-size:16px;

    }

    .captcha-box{

        font-size:22px;

        letter-spacing:5px;

    }

}