html {
    height: -webkit-fill-available;
}

body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
    background: #f5f7fb !important;
}

/* Main Login Card */
.container-login,
.footer {
    max-width: 850px;
}

.container-login {
    min-height: 450px;
    background: #ffffff !important;
    border-radius: 24px !important;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.10) !important;
    animation: loginFade .5s ease;
}

@keyframes loginFade {
    from {
        opacity:0;
        transform:translateY(20px);
    }
    to {
        opacity:1;
        transform:translateY(0);
    }
}


/* Logo Area */
.box-logo {
    width: 42%;
    background: linear-gradient(145deg,#2563eb,#1e40af);
    border:none !important;
    padding:40px !important;
}

.logo {
    object-fit: contain;
    max-width: 320px;
    max-height: 320px;
}

.box-logo .logo {
    filter:
    drop-shadow(0 10px 20px rgba(0,0,0,.15));
}


/* Login Area */
.box-login {
    width:58%;
    padding:45px !important;
}

.box-login form {
    width:100%;
}


/* Heading */
.box-login h3 {
    color:#1f2937;
    font-size:28px;
    font-weight:700;
    margin-bottom:10px !important;
}


/* Inputs */
.box-login .form-floating,
.box-login .input-group {
    margin-top:18px;
}


.box-login input {
    height:55px;
    border-radius:12px !important;
    border:1px solid #dbe1ea;
    background:#fff;
    font-size:15px;
}


.box-login input:focus {
    border-color:#2563eb;
    box-shadow:
    0 0 0 4px rgba(37,99,235,.12);
}


/* Input Group Icons */
.input-group-text {
    background:#fff !important;
    border:1px solid #dbe1ea;
    color:#2563eb;
    padding:0 15px;
}

.input-group-text svg {
    width:18px;
}


/* Button */
.box-login button {
    height:55px;
    border-radius:12px;
    background:#2563eb;
    border:none;
    font-size:17px;
    font-weight:600;
    transition:.3s;
}

.box-login button:hover {
    background:#1d4ed8;
    transform:translateY(-2px);
}


/* Alerts */
.alert {
    border-radius:12px;
    font-size:14px;
}


/* Footer */
.footer {
    border-radius:18px !important;
    box-shadow:0 10px 30px rgba(0,0,0,.08) !important;
}


/* Mobile */
@media(max-width:767.98px){

    .container-login {
        min-height:auto;
        margin:15px !important;
        border-radius:20px !important;
    }

    .box-logo,
    .box-login {
        width:100%;
    }


    .box-logo {
        padding:30px !important;
    }


    .logo {
        max-height:140px;
    }


    .box-login {
        padding:30px 25px !important;
    }


    .box-login h3 {
        font-size:23px;
    }

}


/* Small Mobile */
@media(max-width:359.98px){

    .box-login {
        padding:20px !important;
    }

    .g-recaptcha {
        overflow-x:auto;
        min-height:86px;
    }

}


/* QHD */
@media(min-width:2560px){

    .container-login,
    .footer {
        max-width:960px;
    }

    .container-login {
        min-height:540px;
    }

}


/* 4K */
@media(min-width:3840px){

    .container-login,
    .footer {
        max-width:1140px;
    }

    .container-login {
        min-height:641px;
    }

}