:root {
    --auth-form-content-border: 2px solid var(--lightgray);
    --auth-form-content-border-hover: 2px solid var(--main-color);
    --auth-form-content-min-height: 75px;
    --auth-form-content-border-radius: 20px;
    --auth-form-content-padding: 20px;
    --auth-form-sber-id-max-width: 225px;
    --auth-form-telegram-color: #27A5E7;
    --auth-form-telegram-color-hover: #1F72EF;
    --auth-form-max-color: linear-gradient(97deg, #01c5c8 .32%, #046ef4 44.6%, #572dff 62.16%);
    --auth-form-max-color-hover: linear-gradient(to bottom right, #161f8a, #2d085f);
    --auth-form-telegram-line-height: 28px;
    --auth-form-button-border-radius: 15px;
    --auth-form-tabcontent-comment-display: flex;
    --auth-form-phone-input-width: 150px;
    --auth-form-phone-code-input-max-width: 130px;
    --auth-form-submit-button-max-width: 200px;
}

.auth_form__send_code__div > .auth_form_tabcontent {
    border-radius: var(--auth-form-content-border-radius);
    min-height: var(--auth-form-content-min-height);
    margin-bottom: calc(var(--auth-form-gap) * 2);
    padding: var(--auth-form-content-padding);
    border: var(--auth-form-content-border);
    justify-content: center;
    flex-direction: column;
    align-items: center;
    display: flex;
}

.auth_form__send_code__div > .auth_form_tabcontent.hide {
    display: none;
}

.auth_form__send_code__div > .auth_form_tabcontent > .sberid_button {
    padding: 0 calc(var(--auth-form-gap) * 2);
    max-width: var(--auth-form-sber-id-max-width);
    margin: auto;
}

.auth_form__send_code__div > .auth_form_tabcontent > .auth_form_messager_btn {
    padding: var(--auth-form-gap) calc(var(--auth-form-gap) * 2);
    border-radius: var(--auth-form-button-border-radius);
    line-height: var(--auth-form-telegram-line-height);
    min-width: var(--auth-form-sber-id-max-width);
    color: var(--auth-form-light-text-color);
    transition: var(--auth-form-transition);
    font-size: var(--auth-form-text-fs);
    gap: calc(var(--auth-form-gap) / 2);
    justify-content: center;
    box-sizing: border-box;
    text-decoration: none;
    align-items: center;
    text-align: center;
    cursor: pointer;
    display: flex;
    border: 0;
}

.auth_form__send_code__div > .auth_form_tabcontent > .auth_form_messager_btn.telegram {
    background: var(--auth-form-telegram-color);
}

.auth_form__send_code__div > .auth_form_tabcontent > .auth_form_messager_btn.telegram:hover {
    background: var(--auth-form-telegram-color-hover);
}

.auth_form__send_code__div > .auth_form_tabcontent > .auth_form_messager_btn.max {
    background: var(--auth-form-max-color);
}

.auth_form__send_code__div > .auth_form_tabcontent > .auth_form_messager_btn.max:hover {
    background: var(--auth-form-max-color-hover);
}

.auth_form__send_code__div > .auth_form_tabcontent > .auth_form_tabcontent__comment {
    display: var(--auth-form-tabcontent-comment-display);
    margin-bottom: var(--auth-form-gap);
    font-size: var(--auth-form-text-fs);
    width: 100%;
}

.auth_form__send_code__div > .auth_form_tabcontent > .auth_form_tabcontent__comment.center {
    justify-content: center;
}

.auth_form__send_code__div > .auth_form_tabcontent > .auth_form_tabcontent__input {
    border-radius: calc(var(--auth-form-button-border-radius) / 1.5);
    background-color: var(--auth-form-light-text-color);
    border: var(--auth-form-content-border);
    line-height: var(--auth-form-input-lh);
    font-size: var(--auth-form-input-fs);
    padding: 0 var(--auth-form-gap);
    box-sizing: border-box;
    outline: none;
    width: 100%;
}

.auth_form__send_code__div > .auth_form_tabcontent > .auth_form_tabcontent__input:active,
.auth_form__send_code__div > .auth_form_tabcontent > .auth_form_tabcontent__input:focus,
.auth_form__send_code__div > .auth_form_tabcontent > .auth_form_tabcontent__input:hover {
    border: var(--auth-form-content-border-hover);
}

.auth_form__send_code__div > .auth_form_tabcontent > .auth_form_tabcontent__input:invalid {
    color: var(--auth-form-invalid-text-color);
}

.input__div__input:active, .input__div__input:focus, .input__div__input:hover {
    border: solid 2px var(--main-color);
}

/* NUMBER INPUT */
.combined-input {
    justify-content: center;
    align-items: center;
    flex-direction: row;
    display: flex;
    width: 100%;
}

.combined-input input {
    padding: calc(var(--auth-form-gap) / 2) var(--auth-form-gap);
    outline: none;
}

.country_code {
    border-radius: calc(var(--auth-form-button-border-radius) / 1.5);
    max-width: var(--auth-form-phone-code-input-max-width);
    border: var(--auth-form-content-border);
    font-size: var(--auth-form-input-fs);
    text-align: center;
}

.country_code:active,
.country_code:focus,
.country_code:hover {
    border: var(--auth-form-content-border-hover);
}

.phone_number {
    border-radius: calc(var(--auth-form-button-border-radius) / 1.5);
    width: var(--auth-form-phone-input-width);
    border: var(--auth-form-content-border);
    font-size: var(--auth-form-input-fs);
}

.phone_number:active,
.phone_number:focus,
.phone_number:hover {
    border: var(--auth-form-content-border-hover);
}

.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
    background-color: inherit!important;
}
/* NUMBER INPUT */

/* SUBMIT BUTTON */
.auth_form__send_code__div > .send_code__button {
    border-radius: calc(var(--auth-form-button-border-radius) / 1.5);
    max-width: var(--auth-form-submit-button-max-width);
    color: var(--auth-form-light-text-color);
    transition: var(--auth-form-transition);
    line-height: var(--auth-form-text-lh);
    background-color: var(--main-color);
    font-size: var(--auth-form-text-fs);
    justify-content: center;
    text-align: center;
    cursor: pointer;
    margin: 0 auto;
    display: flex;
    border: none;
    width: 100%;
}

.auth_form__send_code__div > .send_code__button.hide {
    display: none;
}

.auth_form__send_code__div > .send_code__button:hover {
    background-color: var(--main-color-hover);
}
/* SUBMIT BUTTON */

@media only screen and (max-width: 680px) {
    :root {
        --auth-form-content-border: none;
        --auth-form-content-border-hover: none;
        --auth-form-content-padding: 0;
        --auth-form-content-border-radius: 0;
        --auth-form-content-min-height: 45px;
        --auth-form-tabcontent-comment-display: none;
    }
}