/* =================================================================
   СТИЛИ ФОРМЫ ВХОДА
Прозрачный: #FFFFFF00
Фиолетовый: #7f7ddd
Темный для текста: #3d3d3d
Оранжевый: #ff8763
   ================================================================= */

.login-wrapper {
  /* Устанавливаем фоновое изображение из первого кода */
  background-image: url('https://con.xl.ru/QiaQd2NcBk2KMSyPqNPT8Q/images/GJF-ItGu6EygzDkBnT0FzQ.svg') !important;
  /* Масштабируем фон так, чтобы он покрывал всю область */
  background-size: cover !important;
  /* Используем flexbox для центрирования содержимого */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  /* Минимальная высота - 100% высоты экрана */
  min-height: 100vh !important;
  /* Относительное позиционирование для псевдоэлементов */
  position: relative !important;
  /* Внутренние отступы со всех сторон */
  padding: 20px;
}

/* === ОСНОВНАЯ КАРТОЧКА === */
.login-wrapper > div {
  /* Убираем абсолютное позиционирование и трансформации */
  position: static !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
  /* Фон карточки из первого кода */
  background: #feffff !important;
  /* Автоматическая высота по содержимому */
  height: initial !important;
  /* Скругленные углы карточки из первого кода */
  border-radius: 5px;
  border: 2px; 
  /* Тень карточки из первого кода */
  box-shadow: 0 5px 28px 0 #7d7cdd;
  /* Включаем flexbox для размещения формы и картинки */
  display: flex !important;
  /* ИЗМЕНЕНИЕ: меняем направление на row-reverse для размещения формы справа */
  flex-direction: row-reverse !important;
  /* Ширина карточки */
  width: 900px !important;
  /* Максимальная ширина - 90% ширины экрана */
  max-width: 90vw !important;
  /* Скрываем выходящие за границы элементы */
  overflow: hidden !important;
  /* Относительное позиционирование для псевдоэлементов */
  position: relative !important;
  /* Минимальная высота карточки из первого кода */
  min-height: 650px !important;
}

/* === КОНТЕЙНЕР ФОРМЫ (ТЕПЕРЬ ПРАВАЯ ЧАСТЬ) === */
.login-wrapper ._auth_form_wrapper_p3cc9_46 {
  /* Форма занимает 55% ширины карточки */
  width: 55% !important;
  /* Внутренние отступы формы */
  padding: 40px 10px 40px 40px !important;
  /* Уровень наложения - форма поверх картинки */
  z-index: 2 !important;
  /* Относительное позиционирование */
  position: relative !important;
  /* Запрещаем сжатие контейнера формы */
  flex-shrink: 0 !important;
}

/* === ЛОГОТИП === */
._auth_form_wrapper_header_p3cc9_53 .login-logo ._custom_logo_wn4yh_1 {
/* отступы сверху 0px, справа 0px, снизу -50px, слева 0px */
    margin: 0px 0px -50px;
height: 70px !important; 
  width: auto !important;
  display: block !important;
  max-width: 100% !important;
}

/* === НАЗВАНИЕ ШКОЛЫ === */
.login-wrapper .login-school-name { 
  /* Размер шрифта для названия */
  font-size: 20px;
/* Цвет шрифта для названия из первого кода */
 color: #434342!important;
/* Скрытие элемента (если хотите оставить название полностью удалите строку display: none !important; ) */
  display: none !important;
}

/* === ПОЛЯ ВВОДА - ОСНОВНЫЕ СТИЛИ === */
/* Контейнер поля ввода */
.login-wrapper .ant-input-affix-wrapper {
  /* Фон полей ввода из первого кода */
  background-color: #ffffff !important;
  /* Рамка полей ввода из первого кода */
  border: 1px solid #6b67d3;
  /* Скругленные углы полей ввода из первого кода */
  border-radius: 5px;
  /* Высота полей ввода из первого кода */
  height: 40px;
}

/* Стили для input элементов */
section#auth_layout .login-wrapper .ant-input,
section#auth_layout .login-wrapper .ant-input-password,
section#auth_layout .login-wrapper .ant-input-affix-wrapper,
section#auth_layout .login-wrapper input#email,
section#auth_layout .login-wrapper input#password {
  /* Фон для всех полей ввода из первого кода */
  background: #ffffff !important;
  /* Убираем рамки у внутренних элементов */
  border: none !important;
  /* Убираем outline при фокусе */
  outline: none !important;
  /* Убираем тени */
  box-shadow: none !important;
}

/* === СОСТОЯНИЯ ПОЛЕЙ ВВОДА === */
/* При наведении на поле */
.login-wrapper .ant-input-affix-wrapper:hover {
  /* Фон при наведении из первого кода */
  background-color: #f0f0ff !important;
  /* Делаем рамку ярче при наведении из первого кода */
  border-color: #333332 !important;
}

/* При фокусе на поле (активное состояние) */
.login-wrapper .ant-input-affix-wrapper:focus,
.login-wrapper .ant-input-affix-wrapper:focus-within,
.login-wrapper .ant-input-affix-wrapper.ant-input-affix-wrapper-focused {
  /* Фон при фокусе из первого кода */
  background-color: #eff1ff !important;
  /* Рамка при фокусе из первого кода */
  border-color: #434342 !important;
  /* Убираем стандартную тень фокуса */
  box-shadow: none !important;
}

/* Когда в поле введен текст (заполненное состояние) */
.login-wrapper .ant-input-affix-wrapper.ant-input-affix-wrapper-has-value,
.login-wrapper .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper {
  /* Сохраняем фон когда поле содержит данные из первого кода */
  background-color: #f0f0ff !important;
}

/* Состояние когда input имеет значение */
section#auth_layout .login-wrapper input:not(:placeholder-shown),
section#auth_layout .login-wrapper .ant-input:not(:placeholder-shown) {
  /* Фон для заполненных полей из первого кода */
  background: #f0f0ff !important;
}

/* Убираем стили успешного состояния Ant Design */
.login-wrapper .ant-input-affix-wrapper.ant-input-affix-wrapper-status-success,
.login-wrapper .ant-input-affix-wrapper.ant-input-affix-wrapper-status-success:focus,
.login-wrapper .ant-input-affix-wrapper.ant-input-affix-wrapper-status-success:focus-within,
.login-wrapper .ant-input-affix-wrapper.ant-input-affix-wrapper-status-success:hover {
  /* Фон для успешного состояния из первого кода */
  background-color: #f0f0ff !important;
  /* Цвет рамки из первого кода */
  border-color: #6b67d3 !important;
  /* Убираем тень */
  box-shadow: none !important;
}

/* Дополнительные состояния для всех input */
section#auth_layout .login-wrapper .ant-input:focus,
section#auth_layout .login-wrapper .ant-input:hover,
section#auth_layout .login-wrapper .ant-input:active,
section#auth_layout .login-wrapper .ant-input-affix-wrapper:focus,
section#auth_layout .login-wrapper .ant-input-affix-wrapper:hover,
section#auth_layout .login-wrapper .ant-input-affix-wrapper:active {
  /* Фон во всех состояниях из первого кода */
  background: #f0f0ff !important;
}

/* === АВТОЗАПОЛНЕНИЕ БРАУЗЕРА === */
/* Переопределяем стили автозаполнения */
section#auth_layout .login-wrapper input:-webkit-autofill,
section#auth_layout .login-wrapper input:-webkit-autofill:hover,
section#auth_layout .login-wrapper input:-webkit-autofill:focus {
  /* Принудительно устанавливаем фон через box-shadow из первого кода */
  -webkit-box-shadow: 0 0 0 1000px #f0f0ff inset !important;
  box-shadow: 0 0 0 1000px #f0f0ff inset !important;
}

/* === КНОПКА ВХОДА === */
.login-wrapper .ant-btn { 
  /* Фон кнопки из первого кода */
  background: #6967d3;
  /* Цвет текста из первого кода */
  Color: #ffffff;
  /* Полупрозрачная рамка из первого кода */
  border: 2px solid #6967d3;
  /* Скругление углов из первого кода */
  border-radius: 5px;
  /* Кнопка на всю ширину */
  width: 100%;
  /* Высота кнопки из первого кода */
  height: 40px;
  /* Отступ сверху */
  margin-top: 20px;
}

/* При наведении на кнопку */
.login-wrapper .ant-btn:hover { 
  /* Цвет фона из первого кода */
  background: #ffffff;
  /* Цвет текста из первого кода */
  Color: #6967d3;
  /* Прозрачная рамка из первого кода */
  border: 2px solid #6967d3;
}

/* === ЗАГОЛОВОК "АВТОРИЗАЦИЯ" === */
.login-wrapper h3.ant-typography._title_1gq79_1[data-testid="title"] {
  /* Цвет заголовка из первого кода */
  color: #6967d3 !important;
  display: none;
}

/* === ЯРЛЫКИ НАД ПОЛЯМИ === */
.login-wrapper .ant-form-item-label label {
  /* Цвет для ярлыков из первого кода */
  color: #000000 !important;
}

/* === ССЫЛКИ === */
.login-wrapper a {
  /* Цвет ссылок из первого кода */
  color: #000000 !important;
}

/* При наведении на ссылки */
.login-wrapper a:hover {
  /* Цвет ссылок при наведении из первого кода */
  color: #6b67d3 !important;
}

/* === ТЕКСТ В ФУТЕРЕ === */
.login-wrapper ._auth_form_wrapper_footer_1gq79_14 {
  /* Цвет для текста из первого кода */
  color: #000000 !important;
}

/* === ИКОНКИ В ПОЛЯХ ВВОДА === */
/* Селектор для всех SVG иконок */
.login-wrapper .anticon svg {
  /* Цвет иконок из первого кода */
  fill: #000000 !important;
  color: #000000 !important;
}

/* Цвет иконок при наведении и фокусе */
.login-wrapper .ant-input-affix-wrapper:hover .anticon svg,
.login-wrapper .ant-input-affix-wrapper:focus-within .anticon svg {
  /* цвет из первого кода */
  fill: #6b67d3 !important;
  color: #6b67d3 !important;
}

/* === КАРТИНКА СЛЕВА === */
/* Добавляем картинку через псевдоэлемент слева */
.login-wrapper > div::after {
  /* Создаем пустой псевдоэлемент */
  content: '';
  /* Абсолютное позиционирование относительно карточки */
  position: absolute;
  /* Привязка к верхнему и левому краю */
  top: 0;
  left: 0;
  /* Картинка занимает 45% ширины карточки */
  width: 45%;
  /* Картинка на всю высоту карточки */
  height: 100%;
  /* Фоновое изображение из первого кода */
  background-image: url('https://con.xl.ru/QiaQd2NcBk2KMSyPqNPT8Q/images/A84m_8bYuEWDHuqchaQS9A.jpg');
  /* Картинка покрывает всю область */
  background-size: cover;
  /* Центрируем картинку */
  background-position: center;
  /* Запрещаем повторение */
  background-repeat: no-repeat;
  /* Картинка под формой */
  z-index: 1;
}

/* === СКРЫТИЕ ЭЛЕМЕНТОВ === */
/* Скрываем подвал с логотипом платформы */
._auth_form_wrapper_footer_1gq79_14 {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 20px;
}

/* Скрываем ссылку "работает на" */
a[data-testid="axl-link"] {
  display: none;
}

/* Скрываем дополнительный контент */
#auth_layout .flex.flex-col.align-center {
  display: none;
}

/* === АДАПТИВНОСТЬ === */
/* Планшеты (экраны до 1200px) */
@media (max-width: 1200px) {
  .login-wrapper > div {
    /* Уменьшаем ширину карточки */
    width: 800px !important;
  }
  
  .login-wrapper ._auth_form_wrapper_p3cc9_46 {
    /* Сколько форма занимает места */
    width: 60% !important;
    /* Уменьшаем отступы */
    padding: 30px !important;
  }
  
  .login-wrapper > div::after {
    /* Сколько картинка занимает места */
    width: 40%;
  }
  /* АДАПТАЦИЯ ЛОГОТИПА ДЛЯ ПЛАНШЕТОВ */
  ._auth_form_wrapper_header_p3cc9_53 .login-logo ._custom_logo_wn4yh_1 {
    height: 45px !important;
  }
}

/* Средние экраны (экраны до 900px) */
@media (max-width: 900px) {
  .login-wrapper > div {
    /* Вертикальное расположение элементов */
    flex-direction: column !important;
    /* Уменьшаем ширину */
    width: 500px !important;
    /* Автоматическая высота */
    height: auto !important;
    min-height: auto !important;
  }
  
  .login-wrapper ._auth_form_wrapper_p3cc9_46 {
    /* Форма на всю ширину */
    width: 100% !important;
    padding: 40px 20px 40px 40px !important;
  }
  
  .login-wrapper > div::after {
    /* Картинка под формой, а не сбоку */
    position: static !important;
    width: 100% !important;
    /* Фиксированная высота */
    height: 300px !important;
  }
  /* АДАПТАЦИЯ ЛОГОТИПА ДЛЯ СРЕДНИХ ЭКРАНОВ */
  ._auth_form_wrapper_header_p3cc9_53 .login-logo ._custom_logo_wn4yh_1 {
    height: 40px !important;
  }
}

/* Мобильные устройства (экраны до 768px) */
@media (max-width: 768px) {
  .login-wrapper > div {
    /* Карточка на всю ширину */
    width: 100% !important;
    max-width: 450px !important;
  }
  
  .login-wrapper > div::after {
    /* Полностью скрываем картинку */
    display: none !important;
  }
  
  .login-wrapper ._auth_form_wrapper_p3cc9_46 {
    /* Минимальные отступы */
    width: 100% !important;
    padding: 20px !important;
  }
   /* АДАПТАЦИЯ ЛОГОТИПА ДЛЯ МОБИЛЬНЫХ */
  ._auth_form_wrapper_header_p3cc9_53 .login-logo ._custom_logo_wn4yh_1 {
    height: 55px !important;
     margin: 0px 0px 30px !important;
  }
  /* Очень маленькие экраны (до 480px) */
@media (max-width: 480px) {
  /* ЛОГОТИП ДЛЯ ОЧЕНЬ МАЛЕНЬКИХ ЭКРАНОВ */
  ._auth_form_wrapper_header_p3cc9_53 .login-logo ._custom_logo_wn4yh_1 {
    height: 55px !important;
      margin: 0px 0px 30px !important;
  }
}