html,
body {
    height: 100%;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;

    color: #212121;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    font-family: 'Lato', sans-serif;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

/* scrollbar */
div::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 16px;

    background-color: #ffffff
}

div::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background-color: #f7f7f7;
    border-radius: 0 8px 8px 0;
}

div::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background-color: #babac0;
    border: 4px solid #ffffff;
    border-radius: 16px
}

div::-webkit-scrollbar-button,
body::-webkit-scrollbar-button {
    display: none
}

div,
body {
    scrollbar-color: #babac0 #f7f7f7;
    scrollbar-width: thin;
}

.locale-selector {
    position: fixed;
    top: 20px;
    right: 30px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: end;
    width: fit-content;
    padding: 4px;
}

.locale-selector__button {
    color: #85929f;
    text-transform: uppercase;
    font-family: inherit;
    cursor: pointer;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
}

.locale-selector__available-locales {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    padding: 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;

    border-radius: 24px;
    background: #ffffff;
    box-shadow:
        0 4px 12px 0 rgba(20, 46, 71, 0.12),
        0 18px 18px 0 rgba(20, 46, 71, 0.08),
        0 40px 24px 0 rgba(20, 46, 71, 0.04),
        0 74px 28px 0 rgba(20, 46, 71, 0.01),
        0 112px 32px 0 rgba(20, 46, 71, 0.00);
}

.locale-selector__available-locales.hidden {
    display: none;
}

.locale-selector__available-item {
    width: 100%;
    padding: 8px 12px;
    border-radius: 12px;
    color: #85929f;
    text-decoration: none;
}

.locale-selector__available-item:hover {
    background-color: #e8f5fc;
}

/* auth-page */

.auth-page {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 50px 16px;
    z-index: 1;
    position: relative;

    width: 100%;
    height: 100%;
}

.auth-page__bar {
    width: 100%;
}

.auth-page__bar--desktop {
    display: block;
    max-width: 250px;
    margin: 0 auto;
}

.auth-page__bar--mobile {
    width: 100%;
    display: block;
}

.auth-page__inner {
    position: relative;

    flex-shrink: 0;
    width: 100%;
    max-width: 500px;
    margin: 30px;

    border-radius: 15px;
    box-shadow: 0 0 0 30px #f7f7f7, 0 5px 20px 0 #0000001a;
}

.auth-page__inner:before,
.auth-page__inner:after {
    position: absolute;
    z-index: 2;

    display: block;
    width: 230px;
    height: 230px;

    background: no-repeat center / contain;

    content: '';
}

.auth-page__container {
    position: relative;
    z-index: 5;

    display: flex;
    flex-direction: column;

    background-color: #ffffff;
    border-radius: 15px;
}

.auth-page__logo {
    display: block;
    padding: 35px 35px 25px;

    text-decoration: none;
}

.auth-page__logo-svg {
    display: block;
    margin: 0 auto;
    max-height: 25px;
}


.auth-page__logo-svg--custom {
    width: 214px;
    max-height: unset;
    height: 32px;

    object-fit: contain;
}

.auth-page__content {
    padding: 0 35px 35px;
}

.auth-page__title,
.auth-page__description {
    display: block;

    font-weight: 600;
    line-height: 25px;
    text-align: center;
}

.auth-page__title {
    margin: 0 0 5px 0;

    color: #212121;
    font-size: 16px;
}

.auth-page__description {
    margin: 0 0 25px 0;

    color: #838d95;
    font-size: 14px;
}

/* auth-link */

.auth-link {
    display: block;
    background: none;
    outline: none;
    border: none;

    color: var(--color-text-link, #45ace1);
    text-decoration: none;
    cursor: pointer;
    font: inherit;
}

/* auth-form */

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* auth-form-input */

.auth-form-input,
.auth-form-select {
    display: flex;
    width: 100%;
    padding: 5px;

    border: 1px solid #ebebeb;
    border-radius: 8px;
}

.auth-form-input {
    overflow: hidden;
}

.auth-form-input:focus-within:not(.auth-form-input--error) {
    box-shadow: 0 0 10px #ebebeb;
}

.auth-form-input--error {
    border-color: #f4244e;

    outline: 2px solid rgba(244, 36, 78, 0.2);
}

.auth-form-input input,
.auth-form-select__select {
    width: 100%;
    padding: 4px;

    border-style: none;
    background-color: transparent;

    font: inherit;

    outline: none;
}

.auth-form-input input::placeholder {
    color: #838d95;
    opacity: 1;
}

.auth-form-input__require-star {
    flex-shrink: 0;
    padding: 4px 4px;

    color: #f4244e;
}

/* auth-form-select */

.auth-form-select {
    position: relative;
}

.auth-form-select img {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    pointer-events: none;
}

.auth-form-select select.hidden {
    display: none;
    visibility: hidden;
}

.auth-form-select__select {
    color: #838d95;
    user-select: none;
    cursor: pointer;
}

.auth-form-select__select.active {
    color: #212121;
}

.dropdown {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 8px;
    gap: 8px;
    background: #ffffff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 0.3s;
    opacity: 0;
}

.dropdown.opened {
    pointer-events: auto;
    opacity: 1;
}

.dropdown__item {
    padding: 8px;
    border-radius: 8px;
    background: none;
    border: none;
    outline: none;
    color: #212121;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.dropdown__item.active {
    color: #45ACE1;
    pointer-events: none;
}

.dropdown__item:hover {
    background: #F7F7F7;
}

/* auth-form-button */

.auth-form-button {
    position: relative;
    overflow: hidden;

    width: 100%;
    padding: 8px;

    background-color: var(--color-button-background, #45ace1);
    border-radius: 8px;
    border-style: none;

    color: #fff;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    text-align: center;

    cursor: pointer;
}

.auth-form-button:after {
    position: absolute;
    inset: 0;

    background-color: #ffffff;

    opacity: 0;

    content: '';
}

.auth-form-button:hover:after {
    opacity: 0.1;
}

.auth-form-button:disabled {
    pointer-events: none;
    opacity: 0.3;
}

/* auth-checkbox */

.auth-checkbox {
    position: relative;

    display: flex;
    gap: 10px;
    align-items: center;

    cursor: pointer;
}

.auth-checkbox__input {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    margin: 0;
    padding: 0;

    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

.auth-checkbox__checkmark {
    flex-shrink: 0;
    display: block;
    width: 18px;
    height: 18px;

    border-radius: 2px;

    cursor: pointer;
}

.auth-checkbox__input:not(:checked) + .auth-checkbox__checkmark {
    border: 2px solid #b4c2d1;
}

.auth-checkbox__input:not(:checked) + .auth-checkbox__checkmark:hover {
    border-color: var(--checkbox-hover);
}

.auth-checkbox__input:not(:checked) + .auth-checkbox__checkmark .auth-checkbox__svg {
    display: none;
}

/* errors */

.auth-errors {
    display: flex;
    flex-direction: column;
}

.auth-errors__message {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 16px;
    padding: 10px;

    background: #e8f3fe;
    border-radius: 8px;

    color: #212121;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
}

/* auth */

.auth__description {
    margin: 0;
    padding: 0 70px 10px;

    color: #212121;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
}

.auth__trial {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    width: fit-content;
    margin: 10px auto 18px;
    padding: 12px 17px;

    background-color: #e8f3fe;
    border-radius: 26px;
}

.auth__trial-text {
    color: #45ace1;
    font-weight: 600;

    user-select: none;
}

.auth__head {
    display: flex;
    justify-content: center;
    margin: 0 0 25px 0;

    border-bottom: 1px solid #ebebeb;
}

.auth__head-text {
    display: inline-block;
    min-width: 90px;
    padding: 10px;

    color: #838d95;
    font-weight: 600;
    text-align: center;
    text-decoration: none;

    user-select: none;
}

.auth__head-text.active {
    color: var(--color-text-accent, #45ace1);

    border-bottom: 2px solid var(--color-tab__active, #45ace1);
}

.auth__head-text a {
    color: #45ace1;
    text-decoration: none;
}

.auth__head-text:hover:not(.auth__head-text.active) {
    color: var(--color-text-accent, #45ace1);
    background-color: #f4fafe;
}

/* register */

.register-privacy-policy {
    display: flex;
    align-items: flex-start;
    margin: 5px 0 0;
}

.register-privacy-policy__text {
    color: #838d95;
    font-weight: normal;
    font-size: 14px;
    line-height: 1.7;
}

.register-privacy-policy a {
    color: var(--color-text-link);
    text-decoration: none;
}

/* forgot-password */

.forgot-password {
    text-align: center;
}

/* reset-password */

.reset-password {
    text-align: center;
}

.reset-password__title {
    margin: 0 0 16px;
}

/* success-page */

.success-page {
    text-align: center;
}

.success-page__img {
    display: block;
    margin: 10px auto;
    max-width: 150px;
}

/* verify-email */

.verify-email__button {
    margin: 0 auto;
}

/* error-page */

.error-page {
    display: flex;
    gap: 24px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    padding: 30px;
}

.error-page__title {
    position: relative;

    padding: 24px;

    background-color: #e8f3fe;
}

.error-page__title:after {
    position: absolute;
    top: 0;
    right: 0;

    width: 6px;
    height: 100%;

    background-color: #45ace1;

    content: '';
}

.error-page__title-text {
    max-height: 210px;

    color: #0e2b5d;
    font-weight: 900;
    font-size: 260px;
    line-height: 0.9;
    text-align: center;
    text-decoration: underline wavy #f4244e 3px;
    text-underline-offset: 18px;
}

.error-page__description {
    color: #212121;
    text-align: center;
}

.error-page__button {
    width: auto;
}

/* media */

@media (min-width: 600px) {
    .auth-page__bar--mobile {
        display: none;
    }
}

@media (max-width: 960px) {
    .auth-page {
        padding: 50px 10px;
    }

    .auth-page__inner {
        max-width: 360px;
        margin: 10px;

        box-shadow: 0 0 0 10px #f7f7f7, 0 5px 10px 0 #0000001a;
    }

    .auth-page__inner:before,
    .auth-page__inner:after {
        width: 180px;
        height: 180px;
    }

    .auth-page__inner:before {
        top: 41px;
        left: -120px;
    }

    .auth-page__inner:after {
        top: 214px;
        right: -136px;
    }

    .auth__description {
        font-size: 12px;
    }

    .auth__trial {
        padding: 7px;
    }

    .auth__trial-text {
        font-size: 12px;
    }

    .error-page__title-text {
        font-size: 80px;
    }
}

@media (max-width: 600px) {
    body {
        font-size: 14px;
        line-height: 1.71;
    }

    .auth-page {
        flex-direction: column;
        justify-content: center;
        padding: 0 10px;
    }

    .auth-page__bar--desktop {
        display: none;
    }

    .auth-page__inner {
        max-width: 100%;
    }

    .auth-page__inner:before,
    .auth-page__inner:after {
        display: none;
    }

    .auth-page__logo-svg {
        max-height: 15px;
    }
}

/* fonts */

@font-face {
    font-weight: 500;
    font-family: 'Lato';
    font-style: normal;
    src: url(/auth/assets/fonts/Lato/Lato-Regular.woff) format('woff'),
    url(/auth/assets/fonts/Lato/Lato-Regular.woff2) format('woff2');
}

@font-face {
    font-weight: 600;
    font-family: 'Lato';
    font-style: normal;
    src: url(/auth/assets/fonts/Lato/Lato-Semibold.woff) format('woff'),
    url(/auth/assets/fonts/Lato/Lato-Semibold.woff2) format('woff2');
}

@font-face {
    font-weight: 700;
    font-family: 'Lato';
    font-style: normal;
    src: url(/auth/assets/fonts/Lato/Lato-Bold.woff) format('woff'),
    url(/auth/assets/fonts/Lato/Latoc.woff2) format('woff2');
}


/* share css */

.theme--light.application {
    background: #fff;
    color: rgba(0,0,0,.87);
}

.application {
    display: flex;
    font-family: Lato,sans-serif;
    line-height: 1.5;
}

.application--wrap {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 100vh;
    max-width: 100%;
    position: relative;
}

.share-course {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    min-height: 100vh;
    overflow: hidden;
}

.share-course-preloader {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.share-course-preloader__decoration {
    padding: 0 32px;
}

.auth-container-bar {
    width: 100%;
}

.auth-container-bar__desktop {
    display: block;
    max-width: 250px;
    margin: 0 auto;
}

.auth-container-bar__mobile {
    width: 100%;
}

@media (min-width: 600px) {
    .auth-container-bar__mobile {
        display: none;
    }
}

.share-course__content {
    z-index: 3;
}

.share-course__content, .share-course__preloader {
    position: absolute;
    width: 100%;
}

.expired-course__wrapper {
    width: 800px;
    background-color: #fff;
}

.expired-course, .expired-course__wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.expired-course__description {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    max-width: 407px;
    margin: 0 24px 0 0;
    font-weight: 500;
}

.expired-course__pic {
    display: block;
}

.expired-course__logo {
    display: block;
    margin: 0 0 24px;
    width: fit-content;
    max-height: 16px;
}

.expired-course__title {
    margin: 0 0 8px;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.67;
    color: #212121;
}

.expired-course__text {
    margin: 0 0 24px;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.85;
    color: #757575;
}

.expired-course__button {
    width: fit-content;
}

/* create-organization */

.create-organization__container {
    text-align: center;
}

.create-organization__content {
    padding: 35px 66px 0;
}

.create-organization__form-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 14px;
    line-height: 25px;
    text-align: left;
}

#creat-organization-url {
    color: #45ACE1;
    text-decoration: underline;
    text-decoration-color: #45ACE1;
    word-break: break-all;
}

.create-organization .underlined {
    color: #838D95;
    text-decoration: underline;
}


.auth-errors__info-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px;
    font-size: 14px;
    color: #212121;
    line-height: 24px;
    background: #fff4d5;
    border-radius: 8px;
    margin-bottom: 15px;
}

.auth-errors__info-item .text{
    margin-right: 8px;
}

.auth-errors__icon {
    margin-right: 10px;
    flex-shrink: 0;
}


.auth-page__info-banner {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 2;
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 16px;
    color: #fff;
    background: #ED5271;
    box-shadow: 0 5px 50px rgba(70, 90, 108, 0.3);
    border-radius: 10px;
    padding: 12px 40px 12px 20px;
    max-width: 510px;
    margin-left: 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(150%);
    transition: opacity 0.3s ease, transform 0.5s ease;
}

.auth-page__info-banner.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: opacity 0.3s ease, transform 0.5s ease;
}

.auth-page__info-banner p {
    margin: 0;
}

.auth-page__info-banner__icon {
    margin-right: 16px;
}

.auth-page__info-banner__close {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    cursor: pointer;
}

@media (min-width: 960px) {
    .auth-page__info-banner {
        right: 33px;
        bottom: 40px;
        font-size: 24px;
        line-height: 32px;
        padding: 16px 48px 16px 25px;
        margin-left: 33px;
    }

    .auth-page__info-banner__close {
        right: 24px;
    }
}

.double-buttons {
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
}

.auth-back-link {
    display: block;
    background: none;
    outline: none;
    border: none;

    color: var(--color-text-link, #45ace1);
    text-decoration: none;
    cursor: pointer;
    font: inherit;
}