:root {
    --auth-form-page-margin: 0 auto;
    --auth-form-page-max-width: 900px;

    --auth-form-container-width: 70%;
    --auth-form-container-margin: 100px auto;
    --auth-form-container-border: 2px solid var(--lightgray);
    --auth-form-container-br: 20px;
    --auth-form-container-padding: 15px 20px;
    --auth-form-container-box-shadow: 0 0 50px 0 #00000033, 0 0 5px 0 #00000030;
    --auth-form-container-gap: 15px;

    --auth-form-container-title-fs: 24px;
    --auth-form-container-title-fw: 400;

    --auth-form-mobile-display: none;
    --auth-form-nav-tabs-margin-bottom: 10px;
    --auth-form-nav-tabs-gap: 5px;
    --auth-form-nav-tablink-border-radius: 10px;
    --auth-form-transition: .5s;
    --auth-form-hover-main-color: rgba(255, 145,  1, 0.7);
    --auth-form-text-color: #000;
    --auth-form-light-text-color: #FFF;
    --auth-form-invalid-text-color: red;
    --auth-form-gap: 10px;
    --auth-form-text-lh: 36px;
    --auth-form-input-lh: 32px;
    --auth-form-text-fs: 18px;
    --auth-form-input-fs: 16px;
    --auth-form-text-fw: 300;

    --auth-form-link-fw: 400;
    --auth-form-link-fs: 18px;
}

.login_form__send_code__page {
    max-width: var(--auth-form-page-max-width);
    margin: var(--auth-form-page-margin);
    justify-content: center;
    flex-direction: column;
    display: flex;
}

.login_form__send_code__page > .login_form__send_code__container {
    box-shadow: var(--auth-form-container-box-shadow);
    border-radius: var(--auth-form-container-br);
    padding: var(--auth-form-container-padding);
    border: var(--auth-form-container-border);
    margin: var(--auth-form-container-margin);
    width: var(--auth-form-container-width);
    gap: var(--auth-form-container-gap);
    justify-content: center;
    flex-direction: column;
    display: flex;
}

.login_form__send_code__page > .login_form__send_code__container > .login_form__send_code_title {
    font-weight: var(--auth-form-container-title-fw);
    font-size: var(--auth-form-container-title-fs);
    padding: var(--auth-form-container-gap);
    text-align: center;
    margin: 0;
}

.login_form__send_code__page > .login_form__send_code__container > .login_form__send_code__link_div {
    justify-content: end;
    flex-direction: row;
    align-items: center;
    display: flex;
    width: 100%;
}

.login_form__send_code__page > .login_form__send_code__container > .login_form__send_code__link_div > .login_form__send_code__link {
    font-weight: var(--auth-form-link-fw);
    font-size: var(--auth-form-link-fs);
    color: var(--main-color);
    text-decoration: none;
    align-items: center;
    text-align: center;
}

.login_form__send_code__page > .login_form__send_code__container > .login_form__send_code__link_div > .login_form__send_code__link:hover {
    color: var(--main-color-hover);
    text-decoration: underline;
}

.auth_form__send_code__div > .mobile_description_label.mobile {
    padding: calc(var(--auth-form-gap) / 2) var(--auth-form-gap);
    display: var(--auth-form-mobile-display);
    line-height: var(--auth-form-text-lh);
    font-weight: var(--auth-form-text-fw);
    background-color: var(--lightgray);
    font-size: var(--auth-form-text);
}

.auth_form__send_code__div > .auth_form_nav_tabs {
    margin-bottom: var(--auth-form-nav-tabs-margin-bottom);
    gap: var(--auth-form-nav-tabs-gap);
    justify-content: start;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow: auto;
    display: flex;
}

.auth_form__send_code__div > .auth_form_nav_tabs::-webkit-scrollbar {
    width: 0;
}

.auth_form__send_code__div > .auth_form_nav_tabs > .auth_form_nav_tablink {
    padding: var(--auth-form-gap) calc(var(--auth-form-gap) * 1.5);
    border-radius: var(--auth-form-nav-tablink-border-radius);
    transition: var(--auth-form-transition);
    font-size: var(--auth-form-text-fs);
    color: var(--auth-form-text-color);
    background-color: inherit;
    box-sizing: border-box;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    border: none;
    float: left;
}

.auth_form__send_code__div > .auth_form_nav_tabs > .auth_form_nav_tablink:hover {
    background-color: var(--auth-form-hover-main-color);
    color: var(--auth-form-light-text-color);
}

.auth_form__send_code__div > .auth_form_nav_tabs > .auth_form_nav_tablink.active_tablink {
    color: var(--auth-form-light-text-color);
    background-color: var(--main-color);
    cursor: pointer;
}

@media only screen and (max-width: 680px) {
    :root {
        --auth-form-mobile-display: flex;
        --auth-form-nav-tabs-margin-bottom: 5px;
        --auth-form-nav-tablink-border-radius: 0;
        --auth-form-nav-tabs-gap: 0;

        --auth-form-container-box-shadow: none;
        --auth-form-container-br: 0;
        --auth-form-container-padding: 0;
        --auth-form-container-border: none;
        --auth-form-container-margin: 0;
        --auth-form-container-width: 100%;
        --auth-form-container-gap: 10px;
    }

    .login_form__send_code__page > .login_form__send_code__container > .login_form__send_code__link_div > .login_form__send_code__link {
        margin-inline-end: var(--auth-form-container-gap);
    }
}