/* ==========================================================
   LOGIN PAGE
   ========================================================== */

body{

    background:#f8fafc;

}

.login-container{

    min-height:100vh;

}

.login-card{

    overflow:hidden;

    border-radius:20px;

    background:#fff;

}

/* LEFT PANEL */

.login-left{

    background:linear-gradient(135deg,#2563EB,#1D4ED8);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:60px;

    min-height:650px;

}

.login-left-content{

    text-align:center;

    max-width:420px;

}

.login-logo{

    width:400px;

    height:120px;

    object-fit:contain;

    margin-bottom:30px;


}

.login-left h2{

    font-size:32px;

    font-weight:700;

    margin-bottom:20px;

}

.login-left p{

    font-size:16px;

    line-height:1.8;

    opacity:.92;

}

/* RIGHT PANEL */

.login-form-wrapper{

    padding:70px 60px;

}

.login-form-wrapper h3{

    font-size:34px;

    font-weight:700;

    color:#0F172A;

    margin-bottom:10px;

}

.login-form-wrapper p{

    margin-bottom:35px;

}

/* INPUTS */

.input-group{

    margin-bottom:10px;

}

.input-group-text{

    background:#fff;

    border-right:none;

}

.input-group .form-control{

    border-left:none;

}

.input-group .form-control:focus{

    box-shadow:none;

}

.input-group:focus-within{

    border-radius:10px;

    box-shadow:0 0 0 .15rem rgba(37,99,235,.15);

}

.input-group:focus-within .form-control,

.input-group:focus-within .input-group-text{

    border-color:#2563EB;

}

/* PASSWORD BUTTONS */

#togglePassword,
#toggleConfirmPassword{

    border:1px solid #dee2e6;

    border-left:none;

    background:#fff;

    color:#6c757d;

    width:48px;

}

#togglePassword:hover,
#toggleConfirmPassword:hover{

    background:#f8fafc;

    color:#0d6efd;

}

#togglePassword:focus,
#toggleConfirmPassword:focus{

    box-shadow:none;

}

/* LOGIN BUTTON */

#loginBtn{

    height:50px;

    font-size:16px;

    font-weight:600;

}

#loginBtn:disabled{

    opacity:.8;

    cursor:not-allowed;

}

/* FORGOT PASSWORD */

.forgot-link{

    color:#2563EB;

    font-weight:600;

}

.forgot-link:hover{

    color:#1D4ED8;

}

/* CHECKBOX */

.form-check-input:checked{

    background-color:#2563EB;

    border-color:#2563EB;

}

/* ANIMATION */

.login-card{

    animation:fadeIn .5s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* RESPONSIVE */

@media (max-width:991px){

    .login-left{

        display:none;

    }

    .login-form-wrapper{

        padding:45px 35px;

    }

}

@media (max-width:576px){

    .login-form-wrapper{

        padding:35px 25px;

    }

    .login-form-wrapper h3{

        font-size:28px;

    }

}