.toggle-password {
    position: absolute;
    margin-right: 12px;
    cursor: pointer;
    color: #fff;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    margin-top: 3px
}

.suffix-container {
    justify-content: center;
    display: flex;
    align-items: center;
    padding: 10px;
    margin-top: 6px;

    .toggle-password {
        position: relative;
        margin-right: 0;
        cursor: pointer;
        color: #fff;
        transform: unset;
        top: unset;
        right: unset;
        margin-top: 0;
    }
}

.login-bt-container {
    display: flex;
    flex-direction: row;
    align-content: center;
    flex-wrap: wrap;

    .submit-login-bt {
        display: flex;
        width: 50%;
        align-content: end;
        justify-content: flex-end;
    }

    .forgot-bt {
        display: flex;
        width: 50%;
        align-content: start;
        justify-content: flex-start;
    }
}

.login-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    h1 {
        font-feature-settings: 'liga' off, 'clig' off;
        /* H2 24 */
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: 123.5%; /* 29.64px */
        letter-spacing: 0.25px;
    }
}

.login-subtitle {
    font-size: 14px;
    padding-top: 8px;
}

.mail-subtitle {
    padding-top: 32px;
    padding-right: 2.11vw;
    font-size: 13px;
}

.login-form-container {
    position: absolute;
    top: 12.24vh;
    left: 6.25vw;
    right: 67.27vw;
    bottom: 20.31vh;
    min-width: 339px;
}

.mail-form-container {
    position: absolute;
    top: 64px;
    left: 6.25vw;
    right: 67.27vw;
    min-width: 354px;
}

.login-svg-container {
    position: absolute;
    top: 29.25vh;
    left: 48.08vw;
    bottom: 22.74vh;
    right: 10.87vw;
}

.login-svg-container img {
    height: 100%;
    width: 100%;
}

.login-logo {
    padding-bottom: 80px;
}

.login-username-container {
    width: calc(100% - 44px);
}

.login-password-container {
    width: 100%;
}

@media (max-width: 800px) {
    .login-svg-container {
        width: 0;

        img {
            display: none !important;
        }
    }

    .login-form-container {
        width: 100vw;
        padding: 20px;
        right: 0;
        left: 0;
        min-width: 0;
    }

    .mail-form-container {
        width: 100vw;
        padding: 20px;
        min-width: 0;
        right: 0;
        left: 0;
    }

}

@media (max-width: 350px) {
    .login-bt-container {
        flex-direction: column !important;
        gap: 24px;
        justify-content: center;

        .submit-login-bt {
            width: 100%;
            align-content: center;
            justify-content: center;
        }

        .forgot-bt {
            width: 100%;
            align-content: center;
            justify-content: center;

            #login-forgot-button {
                justify-content: center;
                align-items: center;
            }
        }
    }
}

.version {
    position: absolute;
    bottom: 0;
    right: 5px;
    font-size: 10px;
}