.auth-page {
     display: flex;
     min-height: 100vh;
 }

 .auth-page__left {
     flex: 1 1 66%;
     display: none;
 }

 @media (min-width: 1024px) {
     .auth-page__left {
         display: block;
     }
 }

 .auth-page__right {
     flex: 1 1 33%;


     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     padding: 1.25em 2.5em;
 }

 .auth-container {
     width: 100%;
     max-width: 440px;
 }

 .auth-container__logo {
    margin-bottom: 24px;
    height: 2em;
    display: flex;
    justify-content: center;
 }

 /* Form */
 .auth-form__field {
     margin-bottom: 16px;
     position: relative;
 }

 .auth-form__input {
     width: 100%;
     height: 56px;
     padding: 0 16px;
     border: 1px solid var(--secondary-grey-default);
     border-radius: 8px;
     font-size: 16px;
     color: var(--primary-default);
     background: #fff;
     box-sizing: border-box;
     transition: border-color 0.3s;
     font-family: inherit;
 }

 .auth-form__input:focus {
     outline: none;
     border-color: var(--secondary-azure-default);
 }

 .auth-form__input::placeholder {
     color: #9E9E9E;
 }

 .auth-form__field_password .auth-form__input {
     padding-right: 48px;
 }

 .auth-form__visibility-toggle {
     position: absolute;
     right: 16px;
     top: 50%;
     transform: translateY(-50%);
     background: none;
     border: none;
     cursor: pointer;
     color: #BDBDBD;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0;
 }

 .auth-form__forgot-password {
     margin-top: -12px;
     margin-bottom: 24px;
     text-align: left;
 }

 .auth-form__link {
     color: #BDBDBD;
     text-decoration: none;
 }

 .auth-form__submit {
     width: 100%;
     height: 56px;
 }

 .auth-form__submit:hover {
     background-color: #1c6fd1;
 }

 /* Divider */
 .auth-divider {
     display: flex;
     align-items: center;
     margin-bottom: 24px;
 }

 .auth-divider::before,
 .auth-divider::after {
     content: "";
     flex: 1;
     height: 1px;
     background-color: var(--secondary-grey-default);
 }

 .auth-divider__text {
     padding: 0 16px;
     color: #BDBDBD;
 }

 /* Social Auth */
 .social-auth {
     display: flex;
     flex-direction: column;
     gap: 12px;
     margin-bottom: 24px;
     pointer-events: none;
     opacity: 0.5
 }

 .social-btn {
     width: 100%;
     height: 56px;
     display: flex;
     align-items: center;
     padding: 0 16px;
     border: none;
     border-radius: 8px;
     font-size: 16px;
     font-weight: 600;
     color: #fff;
     cursor: pointer;
     text-decoration: none;
     position: relative;
 }

 .social-btn__icon {
     width: 24px;
     height: 24px;
     margin-right: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .social-btn__text {
     flex: 1;
     text-align: center;
 }

 .social-btn__avatar {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     background-color: rgba(255, 255, 255, 0.2);
     background-size: cover;
     background-position: center;
 }

 .social-btn_yandex {
     background-color: var(--auth-yandex-black);
 }

 .social-btn_vk {
     background-color: var(--auth-vk-blue);
 }

 /* Footer */
 .auth-footer {
     text-align: center;
     margin-bottom: 40px;
 }

 .auth-footer__link {
     color: var(--secondary-azure-default);
     text-decoration: none;
 }

 /* Terms */
 .auth-terms {
     position: relative;
 }

 .auth-terms__checkbox {
     position: absolute;
     top: 0;
     left: -1.5em;
     width: 1em;
     height: 1em;
     font-size: inherit;
     border: 2px solid var(--secondary-azure-default);
     border-radius: 4px;
     margin: 0;
     cursor: pointer;
 }

 .auth-terms__text {
     font-size: inherit;
 }

 .auth-terms__link {
     color: var(--secondary-azure-default);
     text-decoration: none;
 }

 .header {
     background-image: url('/static/chat/images/login.png');
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
     border-right: 1px solid var(--secondary-grey-default);
     position: relative;
 }

 .header__content {
     width: 40em;
     position: absolute;
     top: 18%;
     right: 40%;
 }

 .header-content {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     row-gap: 1.5em;
 }

 .header-content__about-btn {
     align-self: flex-start;
 }

 .header-feature-list {
     display: flex;
     gap: 0.75em;
     list-style: none;
     padding: 0;
 }

 .header-feature-list__item {
     border: 1px solid;
     border-radius: 100px;
     padding: calc(13em / 18) calc(13em / 9);
     white-space: nowrap;
     background: none;
     cursor: default;
 }

 /* Error handling */
 .errorlist {
     list-style: none;
     padding: 0;
     margin: 0 0 10px 0;
     color: #FF5252;
     font-size: 14px;
 }