/* ------------------------------ */
/* ------------ Login ----------- */
/* ------------------------------ */

.section > div.section__login {
    max-width: 1600px;
    margin-top: var(--spacing-5) !important;
}

.login__box {
    background-color: var(--brand-beige);
    border-radius: var(--border-radius);
}

.login__box input[type="text"], .login__box input[type="password"], .login__box input[type="checkbox"] {
    background-color: var(--brand-white);
}

.login__box input[type="password"] {
    padding-right: 60px;
}

.login__box label {
    display: block;
    margin-bottom: 4px;
    font-weight: bold;
}

.login-password {
    position: relative;
}

.login-password, .login-remember {
    margin-bottom: 0;
}

.show_password, .login-remember, .login-remember label {
    cursor: pointer;
}

.show_password {
    position: absolute;
    bottom: 0;
    right: 0;
}

.show_password .icon--eye, .show_password .icon--eye-closed {
    position: absolute;
    top: 50%;
    opacity: 0;
}

.show_password.show:not(.show_password--show) .icon--eye {
    opacity: 1;
}

.show_password.show_password--show .icon--eye-closed {
    opacity: 1;
}

.login__box form .login-password + a {
    font-size: var(--font-size-1);
    transition: opacity var(--transition-2);
}

.no-touchevents .login__box form .login-password + a:hover {
    opacity: var(--opacity-2);
}

.login-remember {
    font-size: var(--font-size-3);
    margin-top: var(--spacing-1);
}

.login-remember input {
    margin-right: 5px;
}

.login-submit {
    position: relative;
    display: inline-block;
}

.login-submit .button {
    margin-top: 0;
    z-index: 1;
}

.login-submit .icon {
    z-index: 1;
}

.login__box--password .quform-child-elements > .quform-element:first-child {
    margin-top: 0;
}

.login__box--registration h2.typography--h3 {
    margin-bottom: var(--spacing-0);
}



/* ------------------------------ */
/* -------- Media Queries ------- */
/* ------------------------------ */

@media all and (min-width: 768px) {

    .show_password {
        width: 68px;
        height: 62px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .show_password .icon--eye, .show_password .icon--eye-closed {
        transform: translateY(-50%) scale(.8);
        right: 15px;
    }

}


@media all and (min-width: 1400px) {

    .login.row {
        margin-right: calc(-1 * var(--spacing-4));
        margin-left: calc(-1 * var(--spacing-4));
    }

    .login__container {
        padding-right: var(--spacing-4);
        padding-left: var(--spacing-4);
    }

    .login__box {
        padding: var(--spacing-5);
    }

}



@media all and (max-width: 1399.98px) and (min-width: 1240px) {

    .login.row {
        margin-right: calc(-1 * var(--spacing-2));
        margin-left: calc(-1 * var(--spacing-2));
    }

    .login__container {
        padding-right: var(--spacing-2);
        padding-left: var(--spacing-2);
    }

    .login__box {
        padding: var(--spacing-5);
    }

}


@media all and (max-width: 1239.98px) and (min-width: 992px) {

    .login.row {
        margin-right: -12px;
        margin-left: -12px;
    }

    .login__container {
        padding-right: 12px;
        padding-left: 12px;
    }

}


@media all and (max-width: 1239.98px) and (min-width: 768px) {

    .login__box {
        padding: var(--spacing-4);
    }

}


@media all and (max-width: 991.98px) and (min-width: 768px) {

    .login__container + .login__container {
        margin-top: var(--spacing-5);
    }

    .section > div.section__login {
        margin-top: var(--spacing-4) !important;
    }

}


@media all and (max-width: 767.98px) {

    .section > div.section__login {
        margin-top: var(--spacing-3) !important;
    }

    .login__container + .login__container {
        margin-top: var(--spacing-5);
    }

    .login__box {
        padding: var(--spacing-2) var(--spacing-2) var(--spacing-3);
    }

    .login__box label {
        margin-bottom: 4px;
    }

    .show_password {
        width: 56px;
        height: 56px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .show_password .icon--eye, .show_password .icon--eye-closed {
        transform: translateY(-50%) scale(.75);
        right: 12px;
    }

}