html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
    font-size: var(--initial-font-size);
}

.auth-layout {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: #4F4F4F;
}

.auth {
    width: 100%;
    max-width: 325px;
    margin: auto;
}

.auth__header {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 8px 20px;
    font-family: var(--font-logo);
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #FFFFFF;
}

.auth__logo {
    position: absolute;
    left: 170px;
    bottom: 0;
    width: 58px;
    height: 42px;
}

.auth__form {
    width: 100%;
    padding: 20px;
    font-family: var(--font-main);
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 155%;
    background-color: #fff;
    border-radius: 4px;
}

.auth__form-header {
    margin: 0 0 20px;
    padding: 0 0 12px;
    font-weight: 700;
    font-size: 14px;
    border-bottom: 1px solid var(--border);
}

.auth__form-row {
    margin-bottom: 20px;
}

.auth__form-row:last-of-type {
    margin-bottom: 0;
}

.auth__form-row--links {
    text-align: center;
}

.auth__form-input.no-input {
    padding-left: 48px;
    background-repeat: no-repeat;
    background-position: 12px 50%;
}

    .auth__form-input--email {
        background-image: url('/images/icons/person-grey.svg');
        background-size: 24px 24px;
    }

    .auth__form-input--password {
        background-image: url('/images/icons/lock-grey.svg');
        background-size: 24px 24px;
    }

    .auth__form-input--confirm-code {
        background-image: url('/images/icons/lock-grey.svg');
        background-size: 24px 24px;
    }

    .auth__form-input--user-name {
        background-image: url('/images/icons/person-card-grey.svg');
        background-size: 24px 24px;
    }

    /*
    .auth__form-input[type="number"]::-webkit-outer-spin-button,
    .auth__form-input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .auth__form-input[type="number"] {
        -moz-appearance: textfield;
    }*/

    .auth__form-field-tip {
        font-size: 12px;
        color: red;
    }

.auth__form-btn {
    width: 100%;
}

.auth__form-link {
    display: inline-block;
    margin-bottom: 10px;
    line-height: 17px;
    text-decoration: none;
    text-align: center;
    color: #000000;
}

    .auth__form-link:visited,
    .auth__form-link:hover,
    .auth__form-link:active,
    .auth__form-link:focus {
        text-decoration: none;
        color: #000000;
    }

.auth__form-link:last-of-type {
    margin-bottom: 0;
}

.no-input.with-error {
    border-color: #cc0000;
    background-color: #ffdddd;
    color: #cc0000;
}