/*==================================================
    RESET
==================================================*/

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

    width:100%;
    height:100%;

    font-family:'Poppins',sans-serif;

    background:#F5F8FC;

}

/*==================================================
    WRAPPER
==================================================*/

.login-wrapper{

    width:100%;

    max-width:1180px;

    min-height:100vh;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:70px;

    padding:40px;

}

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

.login-left{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

}

.login-left img{

    width:100%;

    max-width:430px;

    object-fit:contain;

}

/*==================================================
    RIGHT
==================================================*/

.login-right{

    width:460px;

}

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

/*.login-card{*/

/*    background:#fff;*/

/*    border-radius:12px;*/

/*    padding:38px;*/

/*    box-shadow:*/
/*        0 10px 30px rgba(0,0,0,.05);*/

/*}*/
.login-card{

    background:#fff;

    border-radius:14px;

    padding:40px;

    border:1px solid #EEF1F5;

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

}

/*==================================================
    HEADER
==================================================*/

.login-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:28px;

}

.login-title{

    display:flex;

    flex-direction:column;

}

.welcome-text{

    font-size:14px;

    color:#444;

    margin-bottom:3px;

}

.login-header h2{

    font-size:22px;

    font-weight:700;

    color:#1796D3;

    line-height:1.3;

}

.login-logo{

    width:60px;

}

/*==================================================
    LABEL
==================================================*/

.login-form-group{

    margin-bottom:18px;

}

.login-form-group label{

    display:block;

    margin-bottom:8px;

    font-size:13px;

    font-weight:600;

    color:#444;

}

/*==================================================
    INPUT
==================================================*/

.login-input{

    position:relative;

}

.login-icon{

    position:absolute;

    left:16px;

    top:50%;

    transform:translateY(-50%);

    color:#888;

    font-size:15px;

    pointer-events:none;

}

.login-input input{

    width:100%;

    height:48px;

    border:none;

    outline:none;

    border-radius:8px;

    background:#EFEFEF;

    padding-left:46px;

    padding-right:50px;

    font-size:13px;

    color:#333;

    transition:.25s;

}

.login-input input:focus{

    background:#F8F8F8;

    box-shadow:
        0 0 0 2px rgba(23,150,211,.18);

}

.login-input input::placeholder{

    color:#999;

}

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

.toggle-password{

    position:absolute;

    right:15px;

    top:50%;

    transform:translateY(-50%);

    width:30px;

    height:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    background:transparent;

    cursor:pointer;

    color:#888;

    transition:.2s;

}

.toggle-password:hover{

    color:#1796D3;

}

/*==================================================
    REMEMBER
==================================================*/

.remember-row{

    margin-top:5px;

    margin-bottom:24px;

}

.remember-row label{

    display:flex;

    align-items:center;

    font-size:13px;

    color:#666;

    cursor:pointer;

}

.remember-row input{

    width:15px;

    height:15px;

    margin-right:8px;

    accent-color:#1796D3;

}

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

.login-btn{

    width:100%;

    height:50px;

    border:none;

    border-radius:8px;

    background:linear-gradient(90deg,#168ED0,#27A7E8);

    color:#fff;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

    box-shadow:

        0 8px 20px rgba(22,149,212,.20);

}

.login-btn:hover{

    transform:translateY(-2px);

    box-shadow:

        0 12px 28px rgba(22,149,212,.30);

}

/*==================================================
    VALIDATION
==================================================*/

.is-invalid{

    border:1px solid #dc3545 !important;

}

.invalid-feedback{

    display:block;

    font-size:11px;

    color:#dc3545;

    margin-top:5px;

}

/*==================================================
    LAPTOP (1200px)
==================================================*/

@media (max-width:1200px){

    .login-wrapper{

        max-width:1000px;

        gap:50px;

        padding:30px;

    }

    .login-left img{

        max-width:360px;

    }

    .login-right{

        width:430px;

    }

}

/*==================================================
    TABLET
==================================================*/

@media (max-width:992px){

    html,
    body{

        overflow:auto;

    }

    .login-wrapper{

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:30px;

        padding:40px 20px;

        min-height:100vh;

    }

    .login-left{

        width:100%;

        display:flex;

        justify-content:center;

    }

    .login-left img{

        max-width:260px;

    }

    .login-right{

        width:100%;

        max-width:460px;

    }

}

/*==================================================
    MOBILE
==================================================*/

@media (max-width:768px){

    html,
    body{

        overflow:auto;

        background:#F5F8FC;

    }

    .login-wrapper{

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:20px;

        padding:25px 18px;

    }

    .login-left{

        display:flex;

        justify-content:center;

        width:100%;

    }

    .login-left img{

        width:170px;

        max-width:170px;

    }

    .login-right{

        width:100%;

        max-width:380px;

    }

    .login-card{

        padding:26px;

        border-radius:10px;

    }

    .login-header{

        margin-bottom:22px;

    }

    .login-header h2{

        font-size:20px;

    }

    .welcome-text{

        font-size:13px;

    }

    .login-logo{

        width:46px;

    }

    .login-form-group{

        margin-bottom:15px;

    }

    .login-input input{

        height:46px;

        font-size:13px;

    }

    .login-btn{

        height:46px;

        font-size:14px;

    }

}

/*==================================================
    SMALL MOBILE
==================================================*/

@media (max-width:480px){

    .login-left img{

        width:145px;

    }

    .login-card{

        padding:22px;

    }

    .login-header h2{

        font-size:18px;

    }

    .login-logo{

        width:42px;

    }

}

/*==================================================
    LARGE MONITOR
==================================================*/

@media (min-width:1600px){

    .login-wrapper{

        max-width:1350px;

        gap:90px;

    }

    .login-left img{

        max-width:520px;

    }

    .login-right{

        width:500px;

    }

    .login-card{

        padding:42px;

    }

}