html,
body{
    height:100%;
    margin:0;
    background:#f4f7fb;
}

.login-wrapper{
    display:flex;
    height:100vh;
}

/* Left */

.login-left{

    width:55%;

    position:relative;

    background:url('../images/login-bg.jpg') center center;

    background-size:cover;

    color:#fff;

}

.login-left .overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(8,54,90,.92),
        rgba(15,76,129,.88)
    );

}

.login-content{

    position:relative;

    z-index:2;

    padding:80px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    height:100%;

}

.login-content h2{

    font-size:54px;

    font-weight:700;

    line-height:1.2;

    margin-bottom:20px;

}

.login-content p{

    font-size:20px;

    max-width:520px;

    opacity:.95;

}

.feature-list{

    display:flex;

    flex-wrap:wrap;

    margin-top:50px;

}

.feature{

    width:50%;

    margin-bottom:30px;

    display:flex;

    align-items:center;

}

.feature i{

    margin-right:10px;

    color:#42A5F5;

}

/* Right */

.login-right{

    width:45%;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

}

.login-card{

    width:420px;

    padding:20px;

}

.login-logo{

    width:180px;

    display:block;

    margin:auto;

}

.login-card h4{

    text-align:center;

    color:#0F4C81;

    margin-top:20px;

}

.login-card p{

    text-align:center;

}

.login-btn{

    width:100%;

    height:48px;

    border-radius:8px;

    background:#0F4C81;

    margin-top:20px;
}

.login-btn:hover{

    background:#0B3C5D;
}

.input-field input{

    border-bottom:1px solid #cfd8dc !important;

}

.input-field input:focus{

    border-bottom:2px solid #1565C0 !important;

    box-shadow:none !important;

}
/* 
@media(max-width:992px){

.login-left{

    display:none;
    opacity: 0;
    background: transparent;

}

.login-right{

    width:90%;

}

.login-content{
    display: none;
} */


.login-left{
    width:55%;
    height:100vh;

    background-image:url("../images/login-bg.jpg");
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
}

.login-right{
    width:40%;
    min-width:480px;

    display:flex;
    justify-content:center;
    align-items:center;

    background:#ffffff;

    border-left:1px solid #E5E7EB;
}

@media(max-width:992px){

    .login-left{
        display:none;
    }

    .login-right{
        width:100%;
    }

}

.login-card{

    width:450px;

    max-width:90%;

    padding:25px;
}

.login-logo{

    width:200px;

    display:block;

    margin:0 auto 30px;
}

.login-card h4{

    margin-top:10px;

    margin-bottom:8px;

    font-size:42px;

    font-weight:600;

    color:#0F4C81;

    text-align:center;

}

.login-card p{

    margin-bottom:35px;

    color:#64748B;

    text-align:center;

}

.login-btn{

    width:100%;

    height:52px;

    border-radius:8px;

    background:#0F4C81 !important;

    font-size:16px;

    font-weight:600;

    margin-top:25px;
}


.input-field input{

    height:48px !important;

    padding-left:45px !important;

    border:1px solid #CBD5E1 !important;

    border-radius:8px;

    box-sizing:border-box;

    box-shadow:none !important;
}

.input-field input:focus{

    border:2px solid #0F4C81 !important;
}