.main-body-login {
    display: flex;
    height: 100%;
}

.login-container {
    display: flex;
    width: 100%;
    height: 100%;
}

.left {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(3, 22, 47, 0.44);
    padding: var(--spacer-lg);
}

    .left .backdrop {
        height: 100%;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        background: #fff;
        padding: 2rem;
        border-radius: 8px;
        overflow: hidden;
    }

/* Company Info */
.company-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacer-lg);
    text-align: center;
}

.company-img {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    min-width: 7rem;
}

.company-info img {
    height: 45px
}


.company-name {
    font-weight: var(--fw-b);
    line-height: 1rem;
    letter-spacing: .25px;
}

    .company-name .name-top {
        display: block;
        font-size: var(--text-b2);
        margin-bottom: var(--spacer-xs);
    }

    .company-name .name-btm {
        display: block;
        font-size: var(--text-h3);
        line-height: 1.5;
    }

    .company-name .divider-thick {
        background-color: var(--primary-clr-dark);
        margin-inline: auto;
    }


/* Form */
.form-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

form {
    display: flex;
    flex-direction: column;
    gap: var(--spacer-xxl);
    width: 466px;
}

    form .b--header {
        display: flex;
        flex-direction: column;
        gap: var(--spacer-sm);
    }

.input-label-grp {
    position: relative;
}

.input-text {
    transition: border 150ms cubic-bezier(0.4,0,0.2,1);
}

input[type="password"].input-text {
    padding: 0 40px 0 15px;
}

.label, i {
    position: absolute;
    pointer-events: none;
    transition: 150ms cubic-bezier(0.4,0,0.2,1);
}

.login-container label {
    font-size: var(--text-b2);
    left: 15px;
    top: -25%;
    color: var(--black-clr-dark);
    background-color: var(--white-clr);
    padding: 0 .2em;
    width: auto !important;
    min-width: 0;
}

i {
    color: var(--black-clr-light);
    top: 30%;
    right: 15px;
    cursor: pointer !important;
    z-index: 10
}

.input-text:focus, input:valid {
    outline: none;
    border: 1.5px solid var(--primary-clr-dark);
}

    .input-text:focus ~ .label, input:valid ~ .label {
        color: var(--primary-clr-dark);
    }



form .b--header .sign-in {
    font-size: var(--text-h1);
    font-weight: var(--fw-b);
    line-height: 1;
}

form .b--header .instruction {
    font-size: var(--text-b2);
    color: var(--black-clr-semi-dark);
}

.remember-me-forgot-pwd {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-b2);
    margin-bottom: var(--spacer-xl);
}

    .remember-me-forgot-pwd span {
        display: flex;
        align-items: center;
        gap: var(--spacer-sm);
        user-select: none;
    }

    .remember-me-forgot-pwd > a {
        color: var(--primary-clr-dark) !important;
        cursor: pointer;
        user-select: none;
    }

    .remember-me-forgot-pwd a:hover, .remember-me-forgot-pwd a:focus {
        text-decoration: underline var(--primary-clr-dark) !important;
    }

/* Agreement */
.left .b--footer {
    font-size: var(--text-b3);
    color: var(--black-clr-semi-dark);
    background-color: var(--primary-clr-light);
    padding: var(--spacer-lg);
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    gap: var(--spacer-md);
}

    .left .b--footer p {
        line-height: 1.1rem;
    }



/* Image */
.right {
    padding-block: var(--spacer-xxl);
    width: 100%;
    /*width: 45%;*/
    background: linear-gradient(154deg, #004AAD 64.07%, rgba(0, 74, 173, 0.78) 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .right .b--header {
        width: 100%;
        padding: var(--spacer-md);
        background-color: var(--white-clr);
        text-align: center;
    }

        .right .b--header h2 {
            font-size: var(--text-h1);
            color: var(--primary-clr-dark);
        }

    .right .login-img {
        height: 80%;
        box-sizing: border-box;
        margin-bottom: auto;
    }

        .right .login-img .img-1 {
            background: url('/images/login_bg_01.jpg') no-repeat;
            height: 45%;
        }

        .right .login-img .img-2 {
            background: url('/images/login_bg_02.jpg') no-repeat;
            height: 60%;
        }

    .right .b--footer {
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .right .b--footer .dtls {
            width: 70%;
        }

        .right .b--footer .divider-thick {
            background-color: var(--state-clr-yellow-dark);
        }

        .right .b--footer h3 {
            text-align: center;
            color: var(--white-clr);
            font-size: var(--text-h3);
        }



/*===================*/
/*=== Breakpoints ===*/
/*===================*/

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {

    .company-name .divider-thick {
        width: 85%;
    }
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {

    .left {
        padding: 8rem 8.25rem 5rem;
    }
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {


    .left {
        position: unset;
        width: 60%;
        background-color: unset;
        padding: 0;
    }

    .company-info {
        gap: var(--spacer-md);
        text-align: center;
    }

        .company-info img {
            height: 3.75rem;
        }

    .company-name .divider-thick {
        width: 100%;
        margin-inline: unset;
    }

    .right {
        width: 40%;
    }
}

/*X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    .company-info {
        flex-direction: row;
        text-align: start;
    }

    .company-name .divider-thick {
        width: 33.5rem;
    }
}

/*XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {
}