html{
  width: 100%;
  min-height: 100%;
}

body{
    text-align: center;
    width: 100%;
    min-height: 100%;
    background-image: url('../pictures/fon-1-1_1.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
    font-family: 'Jost';
}

/* Фон на весь визуальный экран в ЛК (index.php). 100vh при viewport=980 на iPhone
   короче вёрстки — cover на body обрезается, внизу остаётся белое поле.
   z-index: -1 обязателен: при 0 слой рисуется поверх in-flow main (карточки, thead,
   ячейки), а нативные input/button в Chrome/Windows пробиваются сквозь него —
   отсюда «дыры» в таблицах и обрезанные формы. */
.msll-page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url('../pictures/fon-1-1_1.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#msll_main_app {
  /* stacking context, чтобы z-index:-1 у фона не ушёл за canvas body */
  position: relative;
  z-index: 1;
  min-height: 100%;
}

:root {
  --msll-ios-header-bleed: calc(env(safe-area-inset-top, 0px) + 72px);
  --msll-ios-footer-bleed: calc(env(safe-area-inset-bottom, 0px) + 120px);
  /* Рамка панелей — ровный стальной. Лесенка кнопок задаётся --msll-button-edge-* ниже. */
  --msll-control-border-color: #8594ae;
  /* Светлая кромка лесенки: сам #8594ae, без выбеливания native outset */
  --msll-button-edge-light: #8594ae;
  /* Тёмная кромка лесенки: тот же стальной, глубже */
  --msll-button-edge-dark: #5c6a82;
  /* Ширина свёрнутого основного меню; 0, пока меню не показано */
  --main-nav-sidenav-strip-width: 10px;
  --main-nav-sidenav-badge-width: 26px;
  --main-nav-sidenav-panel-width: 320px;
  --main-nav-sidenav-collapsed-offset: 0px;
  /* Сдвиг шильдика «Меню» вниз от верхнего края нити */
  --main-nav-menu-badge-offset: 10px;
  /* Сдвиг шильдика «Шаблоны» вниз по общей нити под «Меню» */
  --main-nav-badge-stack-offset: 0px;
  /* Панель шаблонов документов (для общей нити шильдиков) */
  --documents-sidenav-strip-width: 10px;
  --documents-sidenav-badge-width: 26px;
  --documents-sidenav-panel-width: 400px;
  /* Панель действий на странице пользователей (та же нить, что у «Меню» и «Шаблоны») */
  --uc-sidenav-strip-width: 10px;
  --uc-sidenav-badge-width: 26px;
  --uc-sidenav-panel-width: 400px;
  /* Панель фильтра на странице продаж (та же нить) */
  --sales-sidenav-strip-width: 10px;
  --sales-sidenav-badge-width: 26px;
  --sales-sidenav-panel-width: 400px;
  /* Панель курсов на странице обучения (та же нить) */
  --courses-sidenav-strip-width: 10px;
  --courses-sidenav-badge-width: 26px;
  --courses-sidenav-panel-width: 400px;
  /* Текущая ширина выдвинутой (или свёрнутой полоски) левой панели — оба шильдика едут по ней */
  --left-sidenav-rail-width: var(--main-nav-sidenav-strip-width);
  /* Верх нити: совпадает с высотой .my_header, чтобы панель не наезжала на шапку */
  --left-sidenav-top: 50px;
}

div.container_inline_center2 {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

div.margin-left-200 {
  margin-left: 420px;
}


.inline_item{
  border-style: groove;
  margin: 0;
}

.menu {
	ddisplay: table;
  display: flex;
  margin-left: auto;
  margin-right: auto;

}

div.container_inline_center2{
  display: flex;
  flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;  

} 

.menu_button {
  padding: 15px;
  background: #bd162b;
  transform: skew(45deg);
  border-radius: 5px;
  border-color: var(--msll-control-border-color, #8594ae);
  border-width: 5px;
  border-style: outset;
  width: 220px;
  margin: 5px;
}
.menu_button_active {
  padding: 15px;
  background: #dddae0;
  transform: skew(45deg);
  border-radius: 5px;
  border-color: var(--msll-control-border-color, #8594ae);
  border-width: 5px;
  border-style: outset;
  width: 220px;
  margin: 5px;
  color: #000;
}

.menu_button:hover{
    background:#8594ae;
}

.menu_button:active{
    border-style: groove;
}

.menu_button_text {
  display: inline-block;
  transform: skew(-45deg);
  color: #fff;
}

.menu_button_text_active {
  display: inline-block;
  transform: skew(-45deg);
}

.menu_button_text_active:hover {
  color: #000;
}


.item_of_menu_permited {
	display: flex;
}

.item_of_menu {
	display: none;
}

/* === Основное навигационное меню: выезжающая панель (как documents_sidenav) === */
.main_nav_sidenav_wrap {
  position: fixed;
  left: 0;
  top: var(--left-sidenav-top, 50px);
  /* Верхний слой: выдвинутая панель поверх рабочей области без ресайза контента */
  z-index: 40;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  /* Обёртка не перехватывает клики — иначе перекрывает шильдик «Шаблоны» ниже по нити */
  pointer-events: none;
}

.main_nav_sidenav {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  align-items: stretch;
  height: calc(100vh - var(--left-sidenav-top, 50px));
  overflow: hidden;
  transition: width 180ms ease;
  will-change: width;
}

.main_nav_sidenav_border {
  flex: 0 0 var(--main-nav-sidenav-strip-width);
  width: var(--main-nav-sidenav-strip-width);
  background: #bd162b;
  transition: opacity 120ms ease, width 180ms ease, flex-basis 180ms ease;
}

.main_nav_sidenav.main_nav_sidenav--open .main_nav_sidenav_border {
  flex: 0 0 0;
  width: 0;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}

.main_nav_sidenav.main_nav_sidenav--open .main_nav_sidenav_content {
  flex: 0 0 var(--main-nav-sidenav-panel-width);
  width: var(--main-nav-sidenav-panel-width);
}

.main_nav_sidenav_content {
  flex: 0 0 calc(var(--main-nav-sidenav-panel-width) - var(--main-nav-sidenav-strip-width));
  width: calc(var(--main-nav-sidenav-panel-width) - var(--main-nav-sidenav-strip-width));
  height: 100%;
  padding: 10px 10px 0 0;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  background-image: url("../pictures/1975.png");
  background-repeat: no-repeat;
  background-size: cover;
  border-right: 10px solid #bd162b;
}

.main_nav_sidenav.main_nav_sidenav--collapsed {
  /* Свёрнутая панель растягивается до ширины активной нити — шильдик едет с чужой панелью */
  width: var(--left-sidenav-rail-width, var(--main-nav-sidenav-strip-width));
  box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 10px;
  pointer-events: none;
  transition: width 180ms ease;
}

.main_nav_sidenav.main_nav_sidenav--open {
  width: var(--main-nav-sidenav-panel-width);
  box-shadow: rgba(0, 0, 0, 0.08) 0px 1.2px 18px, rgba(0, 0, 0, 0.12) 0px 6.4px 28px;
  pointer-events: auto;
}

/* Когда открыта страница («Шаблоны» / «Действия» / «Фильтр» / «Курсы»), свёрнутое «Меню» — только прозрачный спейсер под общую нить */
html.left-sidenav-documents-open .main_nav_sidenav.main_nav_sidenav--collapsed,
html.left-sidenav-uc-open .main_nav_sidenav.main_nav_sidenav--collapsed,
html.left-sidenav-sales-open .main_nav_sidenav.main_nav_sidenav--collapsed,
html.left-sidenav-courses-open .main_nav_sidenav.main_nav_sidenav--collapsed {
  box-shadow: none;
}

html.left-sidenav-documents-open .main_nav_sidenav.main_nav_sidenav--collapsed .main_nav_sidenav_border,
html.left-sidenav-uc-open .main_nav_sidenav.main_nav_sidenav--collapsed .main_nav_sidenav_border,
html.left-sidenav-sales-open .main_nav_sidenav.main_nav_sidenav--collapsed .main_nav_sidenav_border,
html.left-sidenav-courses-open .main_nav_sidenav.main_nav_sidenav--collapsed .main_nav_sidenav_border {
  flex: 0 0 0;
  width: 0;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}

.main_nav_sidenav_badge {
  flex-shrink: 0;
  width: var(--main-nav-sidenav-badge-width);
  min-height: 92px;
  /* Шильдик «Меню» чуть ниже верхнего края панели */
  margin-top: var(--main-nav-menu-badge-offset, 0px);
  padding: 10px 2px;
  background: #bd162b;
  color: #ffffff;
  border-radius: 0 8px 8px 0;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  z-index: 41;
  cursor: pointer;
  user-select: none;
  transition: box-shadow 180ms ease;
  pointer-events: auto;
}

.main_nav_sidenav_badge:hover {
  box-shadow: rgba(0, 0, 0, 0.28) 0px 6px 18px;
}

.main_nav_sidenav_badge_text {
  font-family: 'Jost';
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.4px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  line-height: 1.1;
  text-align: center;
}

.main_nav_sidenav.main_nav_sidenav--collapsed .main_nav_sidenav_content {
  visibility: hidden;
}

.main_nav_panel {
  margin: 15px 10px 40px 10px;
  padding: 16px;
  border: 4px solid var(--msll-control-border-color, #8594ae);
  border-radius: 8px;
  background: rgba(221, 218, 224, 0.92);
  text-align: left;
}

.main_nav_panel_title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #bd162b;
  margin-bottom: 14px;
}

.main_nav_menu_list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Вертикальные пункты без «скоса» горизонтального меню */
.main_nav_sidenav .item_of_menu_permited {
  display: block;
  width: 100%;
}

.main_nav_sidenav .menu_button,
.main_nav_sidenav .menu_button_active {
  transform: none;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 12px 14px;
  border-radius: 6px;
  cursor: pointer;
}

.main_nav_sidenav .menu_button_text,
.main_nav_sidenav .menu_button_text_active {
  transform: none;
  display: block;
  text-align: left;
  font-weight: 600;
}

/* Мобильный режим: панель на всю ширину и высоту под шапкой, без полоски/шильдика */
.main_nav_sidenav_wrap--mobile {
  top: 50px;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: 4;
}

.main_nav_sidenav_wrap--mobile .main_nav_sidenav {
  width: 100% !important;
  height: 100%;
}

.main_nav_sidenav_wrap--mobile .main_nav_sidenav_border {
  display: none;
}

.main_nav_sidenav_wrap--mobile .main_nav_sidenav_content {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100%;
  border-right: none;
}

@media (max-width: 991px) {
  .main_nav_sidenav_wrap--mobile {
    top: 150px;
  }

  .main_nav_sidenav_wrap--mobile .main_nav_sidenav {
    height: 100%;
  }
}

/*
 * Телефон (html.msll-device-mobile, viewport ≈ 980): меню как модалка над рабочей областью.
 * Высота через top/bottom, не 100vh (на iPhone vh ≈ половина визуального окна).
 * Небольшой зазор до краёв — padding обёртки; пункты ≈ ×3 к десктопной панели.
 */
html.msll-device-mobile .main_nav_sidenav_wrap--mobile {
  top: 150px;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  z-index: 35;
  padding: 28px;
  box-sizing: border-box;
  align-items: stretch;
  justify-content: stretch;
  /* Затемнение, чтобы карточка читалась как слой над контентом */
  background: rgba(45, 49, 58, 0.42);
}

html.msll-device-mobile .main_nav_sidenav_wrap--mobile.main_nav_sidenav_wrap--open {
  pointer-events: auto;
}

html.msll-device-mobile .main_nav_sidenav_wrap--mobile .main_nav_sidenav,
html.msll-device-mobile .main_nav_sidenav_wrap--mobile .main_nav_sidenav.main_nav_sidenav--open {
  width: 100% !important;
  height: 100%;
  max-height: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 8px 24px rgba(15, 23, 42, 0.18),
    0 28px 56px rgba(15, 23, 42, 0.2);
}

html.msll-device-mobile .main_nav_sidenav_wrap--mobile .main_nav_sidenav.main_nav_sidenav--open .main_nav_sidenav_content,
html.msll-device-mobile .main_nav_sidenav_wrap--mobile .main_nav_sidenav_content {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: none;
  height: 100%;
  padding: 0;
  border-right: none;
  border: 8px solid var(--msll-control-border-color, #8594ae);
  border-radius: 20px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
}

html.msll-device-mobile .main_nav_sidenav_wrap--mobile .main_nav_panel {
  /* Карточка и есть модалка: без второго «окна» внутри и без огромных внешних полей */
  margin: 0;
  min-height: 100%;
  padding: 36px 32px 40px;
  border: none;
  border-radius: 0;
  background: rgba(221, 218, 224, 0.92);
  box-sizing: border-box;
}

html.msll-device-mobile .main_nav_sidenav_wrap--mobile .main_nav_panel_title {
  margin-bottom: 32px;
  font-size: 4.2rem;
}

html.msll-device-mobile .main_nav_sidenav_wrap--mobile .main_nav_menu_list {
  gap: 24px;
}

html.msll-device-mobile .main_nav_sidenav_wrap--mobile .menu_button,
html.msll-device-mobile .main_nav_sidenav_wrap--mobile .menu_button_active {
  min-height: 108px;
  padding: 28px 32px;
  border-width: 8px;
  border-radius: 16px;
}

html.msll-device-mobile .main_nav_sidenav_wrap--mobile .menu_button_text,
html.msll-device-mobile .main_nav_sidenav_wrap--mobile .menu_button_text_active {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.25;
}

.msll_button{
  display: inline-block;
  padding: 15px;
  background: #bd162b;
  border-radius: 5px;
  border-color: var(--msll-control-border-color, #8594ae);
  border-width: 5px;
  border-style: outset;
  width: 300px;
  margin: 5px; 
  color: #fff;
  font-weight: bold;
  -webkit-appearance: none;
  appearance: none;
}

.msll_button:hover{
    background:#8594ae;
}

.msll_button:active{
    border-style: groove;
}

/* Пока прокси готовит файл: кнопка не кликается, текст «Подготовка загрузки…» */
@keyframes msll_button_busy_pulse {
  0%, 100% { opacity: 0.78; }
  50% { opacity: 1; }
}

.msll_button.msll_button--busy,
.msll_button.msll_button--busy:hover,
.msll_button.msll_button--busy:active {
  pointer-events: none;
  cursor: wait;
  background: #8594ae;
  border-style: groove;
  animation: msll_button_busy_pulse 1.1s ease-in-out infinite;
}

.msll_button_in_table{

  position: absolute;
  top: 0; 
  bottom: 0;
  left: 0;
  width: 100%;
  background: #e0e4e9;
  border-color: #e0e4e9;
  border-style: solid;
  border-width: 0;

 /* 
  height: 100%;
  width: 100%;
  background: #e0e4e9; /*-------------------------------------* /
  border-color: #e0e4e9;
  
  border-width: 0;
  border-style: solid;
  
  display: block;
  /*box-sizing: border-box;* /
  
  margin: 0;
  padding: 0;
  */
}

.msll_button_in_table:hover{
  background: #d2d6db;
}

.msll_button_in_table:active{
  border-style: groove;
  border-width: 5px;
}

.td_no_padding{
  padding: 0px;
  margin: 0px; 
}

.msll_small_button{
  display: inline-block;
  padding: 0;
  background: #bd162b;
  border-radius: 5px;
  border-color: var(--msll-control-border-color, #8594ae);
  border-width: 5px;
  border-style: outset;
  -webkit-appearance: none;
  appearance: none;
  width: 100px;
  margin: 0; 
  color: #fff;
  font-weight: bold;
}
.msll_small_button:hover{
    background:#8594ae;
}

.msll_small_button:active{
    border-style: groove;
}

.msll_middle_button{
  display: inline-block;
  padding: 0;
  background: #bd162b;
  border-radius: 5px;
  border-color: var(--msll-control-border-color, #8594ae);
  border-width: 5px;
  border-style: outset;
  width: 200px;
  height: 50px;
  margin: 5px; 
  color: #fff;
  font-weight: bold;
  -webkit-appearance: none;
  appearance: none;
}
.msll_middle_button:hover{
    background:#8594ae;
}

.msll_middle_button:active{
    border-style: groove;
}

.msll_middle_button:disabled{
    background:#8594ae;
    border-style: groove;
}


table.msll_table  {
  position: static;
  font-size: 16px;
  border-collapse: collapse;
  border-style: hidden;
  text-align: center;
  width: 96%;
  margin-left: 2%;
  margin-right: 2%;
}

table.msll_table th, table.msll_table td {
  border-style: solid;
  border-width: 0 5px 5px 0;
  border-color: white;
  padding: 5px;
}

table.msll_table2 th, table.msll_table2 td {
  border-width: 1 1 1 1;
  padding: 0;
  font-size: 16px;
  text-align: center;
}

.msll_td_nopadding {
  padding: 0;
  background: #bd162b;
  }


table.msll_table th, table.msll_table th a{
  background: #8594ae; /*#dddae0; /*#8594ae*/  
  color: #fff;
  font-weight: bold;
  
}

table.msll_table td {
  background: #e0e4e9;
}

/*
table.msll_table th:first-child, table.msll_table td:first-child {
  padding: 10px;
}
  */

.my_header{
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    background-color: #dddae0;
    position: sticky;
    top: 0px;
    z-index: 1;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 1.2px 18px, rgba(0, 0, 0, 0.12) 0px 6.4px 28px;
    height: 50px;
    min-height: 50px;
    padding: 0px 0px;
    text-align: right;
    overflow: visible;
}

.my_header::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-1 * var(--msll-ios-header-bleed));
    height: var(--msll-ios-header-bleed);
    background: #dddae0;
    pointer-events: none;
    z-index: -1;
}
.my_header2{
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    /*background-color: #dddae0;*/
    position: fixed;
    top: 0px;
    z-index: 45;
    /*box-shadow: rgba(0, 0, 0, 0.08) 0px 1.2px 18px, rgba(0, 0, 0, 0.12) 0px 6.4px 28px;*/
    height: 50px;
    min-height: 50px;
    padding: 0px 0px;
    text-align: right;
    right: 2%;
}

.mobile_header_controls {
  margin-left: auto;
  margin-right: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.mobile_header_button {
  width: 42px;
  height: 42px;
  border: 2px outset var(--msll-control-border-color, #8594ae);
  border-radius: 10px;
  background-color: #bd162b;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.2) 0 2px 8px;
  -webkit-appearance: none;
  appearance: none;
}

.mobile_header_button:active {
  border-style: inset;
}

.mobile_header_button_profile {
  background-image: url('../pictures/profile_button.png');
}

.mobile_header_button_courses {
  background-image: url('../pictures/courses_menu_button.png');
}

/* Навигация всегда на SVG; курсы/профиль — PNG, а при открытой панели PNG скрываем под крестик */
.mobile_header_button_nav,
.mobile_header_button_courses[aria-expanded="true"],
.mobile_header_button_profile[aria-expanded="true"] {
  background-image: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  /* iOS иначе рисует системную кнопку и смещает глиф */
  -webkit-appearance: none;
  appearance: none;
  color: #ffffff;
}

/* Белый глиф на красном круге — в одном весе с домиком и профилем */
.mobile_header_button_glyph {
  display: block;
  width: 54%;
  height: 54%;
  fill: #ffffff;
  pointer-events: none;
}

.mobile_header_dropdowns {
  position: fixed;
  top: 50px;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.mobile_dropdown_backdrop {
  position: fixed;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.25);
}

/* Блокировка прокрутки основной страницы при мобильных модальных слоях (меню профиля, навигации, курсов) */
html.mobile-scroll-lock,
body.mobile-scroll-lock {
  overflow: hidden;
}

/*
 * iPhone (viewport=980): overflow:hidden на html/body клипает position:fixed
 * по короткому 100vh — меню, профиль и курсы видны только сверху, снизу fon-1-1.
 * Тело фиксируем inset:0 (тот же приём, что у .msll-page-bg): область клипа = визуальный экран.
 */
html.msll-device-mobile.mobile-scroll-lock {
  overflow: visible;
}

html.msll-device-mobile.mobile-scroll-lock body {
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

/*
 * Блокировка прокрутки под модалками (.modal).
 * Класс выставляет js/msll_modal_shell.js при появлении/скрытии любой модалки ЛК.
 */
html.msll-modal-scroll-lock,
body.msll-modal-scroll-lock {
  overflow: hidden;
  overscroll-behavior: none;
}

.mobile_dropdown_panel {
  width: 100%;
  background: #dddae0;
  box-shadow: rgba(0, 0, 0, 0.2) 0 4px 12px;
}

/* Мобильная оболочка: «левитирующая» карточка профиля */
.mobile_dropdown_panel_profile {
  background: transparent;
  box-shadow: none;
  width: fit-content;
  min-width: fit-content;
  max-width: calc(100vw - 24px);
  margin: 12px 12px 0 auto;
  pointer-events: none;
}

.mobile_dropdown_panel_profile .profile-menu,
.mobile_dropdown_panel_profile .profile-menu__panel {
  pointer-events: auto;
}

.mobile_dropdown_panel_profile .profile-menu {
  animation: profile-menu-float-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile_dropdown_panel_nav {
  animation: mobile-menu-slide-down 1s cubic-bezier(0.2, 0.9, 0.2, 1);
}

@keyframes mobile-menu-slide-down {
  from {
    transform: translateY(-18px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.mobile_dropdown_panel .margin-left-200 {
  margin-left: 0;
}

.mobile_dropdown_panel .container_inline_center2 {
  justify-content: center;
  overflow-x: auto;
  padding: 8px 6px;
}

@media (max-width: 991px) {
  .my_header {
    height: 150px;
    min-height: 150px;
  }

  .mobile_header_controls {
    height: 100%;
    margin-right: 20px;
    gap: 20px;
  }

  .mobile_header_button {
    width: auto;
    height: 80%;
    aspect-ratio: 1 / 1;
    border-width: 4px;
    border-radius: 50%;
  }

  .mobile_header_dropdowns {
    top: 150px;
  }

  .mobile_dropdown_backdrop {
    top: 150px;
  }

  .my_header2 {
    position: static;
    right: auto;
    height: 0;
    min-height: 0;
    overflow: hidden;
  }
}

.my_unheader2{
	padding: 0px;
	margin: 0px;
	border: none;
}

.my_header_polygon{
    display: flex;
    align-items: center;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 60px 100%);
    border: 0px none;
    width: 40%;
    height: 100%;
    background: #bd162b;
    position: absolute;
    right: 0;
    /*text-align: right;*/
    color: #fff;
}

/* === Меню профиля (корпоративный стиль МСЛЛ) === */
.profile-menu {
  position: relative;
  display: inline-block;
  font-family: 'Jost', sans-serif;
  text-align: right;
  z-index: 12;
}

.profile-menu ul,
.profile-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Триггер в шапке — имя + chevron, как в account-menu крупных сервисов */
.profile-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: min(42vw, 300px);
  padding: 8px 6px 8px 12px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.18s ease;
}

.profile-menu__trigger:hover,
.profile-menu__trigger:focus-visible {
  outline: none;
  opacity: 0.9;
}

.profile-menu__trigger-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-menu__chevron {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  opacity: 0.85;
  transition: transform 0.2s ease;
}

.profile-menu--open .profile-menu__chevron {
  transform: rotate(180deg);
}

/* Левитирующая панель: нейтраль #dddae0 + стекло, тени бренда */
.profile-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  max-width: min(320px, calc(100vw - 24px));
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(133, 148, 174, 0.35);
  background: rgba(221, 218, 224, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 12px 28px rgba(0, 0, 0, 0.12),
    0 24px 48px rgba(0, 0, 0, 0.08);
  animation: profile-menu-float-in 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: top right;
}

@keyframes profile-menu-float-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.profile-menu__identity {
  margin: 0 0 10px;
  padding: 0 4px 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: #4a5568;
  text-align: left;
  border-bottom: 1px solid rgba(133, 148, 174, 0.28);
  word-break: break-word;
}

/* Пункты меню — достаточная зона нажатия (≥44px по рекомендациям Apple/Material) */
.profile-menu__action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  margin: 0;
  padding: 10px 12px;
  border: 2px solid transparent;
  border-radius: 10px;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  color: #1a202c;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.profile-menu__action:hover,
.profile-menu__action:focus-visible {
  outline: none;
  background: rgba(133, 148, 174, 0.18);
  color: #1a202c;
}

.profile-menu__action:active {
  background: rgba(133, 148, 174, 0.28);
}

.profile-menu__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: #8594ae;
}

.profile-menu__divider {
  height: 1px;
  margin: 6px 8px;
  background: rgba(133, 148, 174, 0.28);
}

/* «Выход» — отдельный визуальный акцент, но без агрессивного destructive-стиля */
.profile-menu__action--exit {
  color: #bd162b;
}

.profile-menu__action--exit .profile-menu__icon {
  color: #bd162b;
}

.profile-menu__action--exit:hover,
.profile-menu__action--exit:focus-visible {
  background: rgba(189, 22, 43, 0.1);
  color: #bd162b;
}

.profile-menu__close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 2px solid #8594ae;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
  color: #4a5568;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.profile-menu__close svg {
  width: 14px;
  height: 14px;
}

.profile-menu__close:hover,
.profile-menu__close:focus-visible {
  outline: none;
  background: #fff;
  color: #bd162b;
}

/* Десктоп: имя только в триггere, внутри панели — компактный список */
@media (min-width: 992px) {
  .profile-menu__identity {
    display: none;
  }

  .profile-menu__close {
    display: none !important;
  }
}

/* Мобильная версия — по макету: карточка с именем и красными кнопками */
.profile-menu--mobile .profile-menu__panel {
  position: static;
  min-width: 280px;
  max-width: min(360px, calc(100vw - 24px));
  padding: 20px 18px 16px;
  border-radius: 18px;
}

.profile-menu--mobile .profile-menu__close {
  display: inline-flex;
}

.profile-menu--mobile .profile-menu__identity {
  display: block;
  margin: 8px 36px 16px 0;
  padding: 0 0 14px;
  font-size: 20px;
  font-weight: 700;
  color: #2d3748;
  text-align: center;
  border-bottom: none;
}

.profile-menu--mobile .profile-menu__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-menu--mobile .profile-menu__divider {
  display: none;
}

/* Корпоратные кнопки действий — как msll_middle_button в макете */
.profile-menu--mobile .profile-menu__action {
  justify-content: flex-start;
  min-height: 48px;
  padding: 12px 18px;
  border-color: #8594ae;
  border-style: outset;
  border-radius: 12px;
  background: #bd162b;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}

.profile-menu--mobile .profile-menu__action .profile-menu__icon {
  color: #fff;
}

.profile-menu--mobile .profile-menu__action:hover,
.profile-menu--mobile .profile-menu__action:focus-visible {
  background: #8594ae;
  color: #fff;
}

.profile-menu--mobile .profile-menu__action:active {
  border-style: inset;
  background: #8594ae;
}

.profile-menu--mobile .profile-menu__action--exit {
  color: #fff;
}

.profile-menu--mobile .profile-menu__action--exit .profile-menu__icon {
  color: #fff;
}

/* Телефон (viewport ≈ 980): меню профиля примерно в 2 раза крупнее */
html.msll-device-mobile .mobile_dropdown_panel_profile {
  margin: 20px 20px 0 auto;
  max-width: calc(100vw - 40px);
}

html.msll-device-mobile .profile-menu--mobile .profile-menu__panel {
  min-width: 560px;
  max-width: min(720px, calc(100vw - 40px));
  padding: 40px 36px 32px;
  border-radius: 28px;
}

html.msll-device-mobile .profile-menu--mobile .profile-menu__identity {
  margin: 16px 64px 28px 0;
  padding: 0 0 24px;
  font-size: 40px;
}

html.msll-device-mobile .profile-menu--mobile .profile-menu__list {
  gap: 20px;
}

html.msll-device-mobile .profile-menu--mobile .profile-menu__action {
  min-height: 96px;
  padding: 24px 36px;
  border-width: 4px;
  border-radius: 20px;
  font-size: 34px;
  gap: 20px;
}

html.msll-device-mobile .profile-menu--mobile .profile-menu__icon {
  width: 36px;
  height: 36px;
}

html.msll-device-mobile .profile-menu--mobile .profile-menu__close {
  top: 16px;
  right: 16px;
  width: 64px;
  height: 64px;
  border-width: 3px;
}

html.msll-device-mobile .profile-menu--mobile .profile-menu__close svg {
  width: 28px;
  height: 28px;
}

@media (max-width: 991px) {
  .mobile_dropdown_panel_profile {
    margin-top: 14px;
    margin-right: 14px;
  }
}

/*начало — legacy .menu-bar (lk.php и старые PHP-страницы) */
.menu-bar {
	width: 100%;
	display: table-cell;
}
.menu-bar ul {
	display: table-cell;

}
.menu-bar li {
	display: table-cell;
	position: relative;
	/*background: #bcbdbe;*/
  z-index: 10;
  color: #000;
}
  
.menu-bar li a {
	display: block;
	padding: 15px 15px;
	color: inherit;
  
	text-align: center;
  z-index: 1;   
}

.menu-bar ul li:hover, .menu-bar a:hover {
	/*background: #8594ae; /*#666*/
  color: #fff; /*тут надо цвет текста поменять*/ 
}

.menu-bar li:hover ul  {
	display: block;
	position: absolute;
	top: 100%;
	left: 0px;
	/*background: #666;*/
	margin: 0;
	padding: 10px 0;
	width: 160px;
	/*z-index: 9999;*/
}
.menu-bar ul ul  {
	display: none;
  text-align: left;
}
.menu-bar ul ul li  {
	display: block;
	/*background: #666;*/
	padding: 5px 20px;
}
.menu-bar ul ul li a  {
	display: block;
	padding: 0;
	/*background: #666;*/
	text-align: left;
}

.menu-bar ul li ul li {
  color: black;
  background: rgba(189, 22, 43, 0);
  border-color:  rgba(189, 22, 43, 1);
  border-style: groove;

  margin-bottom: 10px;
}


/*конец*/


.menu-bar li {
  list-style: none;
  color: rgb(255, 255, 255);
  font-family: 'Jost';
  font-weight: bold;
  padding: 12px 16px;
  margin: 0 8px;
  position: relative;
  cursor: pointer;
  white-space: nowrap;  

 

  }
.menu-bar li::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  transition: 0.2s;
  border-radius: 0px;
  }

.menu-bar li:hover::before {
  /*background: linear-gradient(to bottom, #e8edec, #d2d1d3);*/
  box-shadow: 0px 3px 20px 0px black;
  transform: scale(1);
  }

  .menu-bar ul li ul li:hover {
    background: rgba(189, 22, 43, 1);;
  }


/*-------------------------*/

/* Обёртка нужна в standards mode: иначе height:100% у img не от чего считать */
.my_header_logo_wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 100%;
  max-height: 50px;
  flex-shrink: 0;
  min-width: 0;
  padding-left: 4px;
}

.logo_image {
  height: auto;
  max-height: 100%;
  width: auto;
  max-width: min(320px, 60vw);
  object-fit: contain;
  display: block;
}

@media (max-width: 991px) {
  .my_header_logo_wrap {
    max-height: 150px;
  }
}

.msll_footer {
    position: fixed;
    z-index: 1;
    height: 48px;
    min-height: 48px;
    padding: 0px 0px;
    width: 100%;
    bottom: 0;
    overflow: visible;
}

.msll_footer::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(-1 * var(--msll-ios-footer-bleed));
    height: var(--msll-ios-footer-bleed);
    background: #8594ae;
    pointer-events: none;
    z-index: -1;
}

.msll_footer_polygon_red {
    display: flex;
    clip-path: polygon(0 0, 96% 0, 100% 100%, 0px 100%);
    position: absolute;
    border: 0px none;
    width: 15%;
    height: 33%;
    background: #bd162b;
    left: 0;  
    bottom: 0;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 1.2px 18px, rgba(0, 0, 0, 0.12) 0px 6.4px 28px;
}

.msll_footer_polygon_light_gray {
    display: flex;
    clip-path: polygon(0 0, 96% 0, 100% 100%, 4% 100%);
    position: absolute;
    border: 0px none;
    width: 60%;
    height: 66%;
    background: #dddae0;
    left: 10%;
    bottom: 0;
}

.msll_footer_polygon_dark_gray {
    display: flex;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 4% 100%);
    position: absolute;
    border: 0px none;
    width: 50%;
    height: 100%;
    background: #8594ae;
    right: 0;
    top: 0;
}

/* Поля textarea на форме editors */
textarea.ta_editor{
  min-height: max-content;
  min-width: 100%;
  max-width: max-content;
  width: 100%; /* На всю ширину */
  height: 100%; /* На всю высоту */
}

label {
    width: 100%;
    display: inline-block;
    text-align: center;
    font-size: 1.5rem;
    font-family: 'Jost';
}


input[type='text'].login_form, input[type='email'].login_form, select.login_form {
    width: 500px;
    border: 2px solid #ccc;
    font-size: 1.5rem;
    font-weight: 100;
    padding: 10px;
}

form.change_users {
    margin: 25px auto;
    padding: 20px;
    border: 5px solid #8594ae;
    width: 800px;
    background: #dddae0;
    border-style: solid;
    border-width:20px;
    display: block;
}

div.no_display {
    display: none;
}

div.display {
    display: block;
}

form.change_users div.form-element {
    margin: 20px 0;
}

p.error {
    background: red;
    color: #000;
} 

.error {
    color: red;
    font-weight: bold;
    /*animation: pulse 0.6s infinite;*/
    animation: pulse 1.5s 3;
} 
@keyframes pulse {
from { opacity: 1; /* Непрозрачный текст */ }
to { opacity: 0; /* Прозрачный текст */ }
}

/* Меню боковой панели */
.sidenav {
  height: 100%; /* Полная высота: удалите это, если вы хотите "авто" высота */
  width: 400px; /* Установите ширину боковой панели */
  position: fixed; /* Фиксированная боковая панель (оставайтесь на месте при прокрутке) */
  z-index: 0; /* Оставайтесь с верху */
  top: 0; /* Оставайтесь на вершине */
  /* Отступ под свёрнутое основное меню («Меню» + красная полоса), как в documents/reports */
  left: var(--main-nav-sidenav-collapsed-offset, 0px);
  /*background-color: #dddae0; /*#dddae0* #8594ae*/
  background-image: url("../pictures/1975.png");
  background-repeat: no-repeat;
  background-size: cover;
  overflow-x: hidden; /* Отключить горизонтальную прокрутку */
  box-shadow: rgba(0, 0, 0, 0.08) 0px 1.2px 18px, rgba(0, 0, 0, 0.12) 0px 6.4px 28px;
  margin-top: 48px;
  padding: 10px;
  padding-top: 20px;
  box-sizing: border-box;
}

/*
 * Мобильный список курсов — та же схема, что у .main_nav_sidenav_wrap--mobile:
 * оболочка на весь экран под шапкой (top/bottom, без 100vh и без overflow:hidden).
 * Список крутится внутри .courses_mobile_sidenav.
 */
.courses_mobile_sidenav_wrap {
  display: none;
}

html.msll-device-mobile .courses_mobile_sidenav_wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  position: fixed;
  top: 150px;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  z-index: 35;
  box-sizing: border-box;
  overflow: visible;
  background-image: url("../pictures/1975.png");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 10px;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);
  font-size: 300%;
}

html.msll-device-mobile .courses_mobile_sidenav {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

html.msll-device-mobile .courses_mobile_sidenav .accordion {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}
/* Тело сайта, при наличии бокового меню (+ постоянный отступ только под свёрнутое «Меню») */
.msll_body{
  margin-left: calc(420px + var(--main-nav-sidenav-collapsed-offset, 0px));
}

.msll_filter{
  width: 100%;
  padding: 10px;
}

.msll_filter_date_compact{
  width: 180px;
  margin-left: auto;
  margin-right: 8px;
}

.tree-child-block{
  margin-left: 0;
  margin-bottom: 10px;
  width: 100%;
}

.msll_permissions_table{
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
  background: #ffffff;
  border: 2px solid #8594ae;
  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 8px;
}

.msll_permissions_table thead th{
  background: #8594ae;
  color: #ffffff;
  font-family: 'Jost';
  font-weight: 600;
  letter-spacing: 0.2px;
  border-color: #7a89a2;
}

.msll_permissions_table th,
.msll_permissions_table td{
  border: 1px solid #d2d9e5;
  padding: 8px 10px;
  text-align: left;
  vertical-align: middle;
}

.msll_permissions_table tbody tr:nth-child(even){
  background: #f6f8fc;
}

.msll_permissions_table tbody tr:hover{
  background: #e9eef7;
}

.msll_permissions_date_cell{
  width: 1%;
  white-space: nowrap;
}

.msll_permissions_action_cell{
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.msll_heading_with_tooltip{
  position: relative;
  display: inline-block;
  cursor: help;
}

.msll_heading_tooltip{
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 6px;
  z-index: 20;
  width: max-content;
  max-width: 380px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #2f3b52;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.25;
  text-align: left;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 12px;
}

.msll_heading_with_tooltip:hover .msll_heading_tooltip{
  visibility: visible;
  opacity: 1;
}

/* === Корпоративные модалки (msll-modal-card) === */
#id_FormEditProfile.modal,
#id_FormCreateNewUser.modal,
#id_FormUpdateUser.modal,
#form_Create_New_Client.modal,
#Form_Editor_LastName_Of_Client.modal,
#Form_Editor_FirstName_Of_Client.modal,
#Form_Editor_Patronymic_Of_Client.modal,
#Form_Editor_Job_Of_Client.modal,
#Form_Editor_Comment_Of_Client.modal,
#Form_Editor_Emails_Of_Client.modal,
#Form_Editor_Phones_Of_Client.modal,
#Form_Editor_Telegrams_Of_Client.modal,
#Form_Editor_Products_Of_Client.modal,
#id_FormModalMessage.modal,
#form_Detail_Info_Of_Client.modal {
  z-index: 2000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  /* Равные отступы: карточка max-height: 100vh-96px помещается без скролла оверлея */
  padding: 48px 16px;
  box-sizing: border-box;
  background-color: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  /* Скролл только внутри .msll-modal-card__body, не подложка вместе с карточкой */
  overflow: hidden;
  overscroll-behavior: none;
}

#id_FormEditProfile.modal[style*="block"],
#id_FormCreateNewUser.modal[style*="block"],
#id_FormUpdateUser.modal[style*="block"],
#form_Create_New_Client.modal[style*="block"],
#Form_Editor_LastName_Of_Client.modal[style*="block"],
#Form_Editor_FirstName_Of_Client.modal[style*="block"],
#Form_Editor_Patronymic_Of_Client.modal[style*="block"],
#Form_Editor_Job_Of_Client.modal[style*="block"],
#Form_Editor_Comment_Of_Client.modal[style*="block"],
#Form_Editor_Emails_Of_Client.modal[style*="block"],
#Form_Editor_Phones_Of_Client.modal[style*="block"],
#Form_Editor_Telegrams_Of_Client.modal[style*="block"],
#Form_Editor_Products_Of_Client.modal[style*="block"],
#id_FormModalMessage.modal[style*="block"],
#form_Detail_Info_Of_Client.modal[style*="block"] {
  display: flex !important;
}

.msll-modal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(520px, 96vw);
  max-height: calc(100vh - 96px);
  margin: 0 auto;
  padding: 0;
  border: 1px solid rgba(133, 148, 174, 0.35);
  border-radius: 16px;
  /* Корпоративные цвета модалки */
  --msll-modal-surface: #dddae0;
  --msll-modal-title: #454954;
  background: var(--msll-modal-surface);
  box-shadow:
    0 4px 6px rgba(15, 23, 42, 0.04),
    0 16px 36px rgba(15, 23, 42, 0.14),
    0 32px 64px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  animation: msll-modal-card-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  box-sizing: border-box;
}

.msll-modal-card.modal-content-40 {
  width: min(560px, 96vw);
}

.msll-modal-card.modal-content-50,
.msll-modal-card--wide {
  width: min(680px, 96vw);
}

.msll-modal-card--tall {
  width: min(640px, 96vw);
}

/* Широкая модалка (продукты клиента) */
.msll-modal-card.modal-content-80,
.msll-modal-card--xwide {
  width: min(920px, 96vw);
}

/* Детальная информация о клиенте — сетка строк вместо таблицы */
.msll-modal-card--detail {
  width: min(760px, 96vw);
}

.msll-client-detail {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(133, 148, 174, 0.45);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.35);
}

.msll-client-detail__row {
  display: grid;
  grid-template-columns: minmax(130px, 26%) minmax(0, 1fr) auto;
  align-items: stretch;
  border-bottom: 1px solid rgba(133, 148, 174, 0.35);
  box-sizing: border-box;
}

.msll-client-detail__row:last-child {
  border-bottom: none;
}

/* Чередование фона строк — в тон поверхности модалки */
.msll-client-detail__row:nth-child(odd) .msll-client-detail__label,
.msll-client-detail__row:nth-child(odd) .msll-client-detail__value,
.msll-client-detail__row:nth-child(odd) .msll-client-detail__action {
  background: rgba(133, 148, 174, 0.12);
}

.msll-client-detail__row:nth-child(even) .msll-client-detail__label,
.msll-client-detail__row:nth-child(even) .msll-client-detail__value,
.msll-client-detail__row:nth-child(even) .msll-client-detail__action {
  background: rgba(133, 148, 174, 0.06);
}

.msll-client-detail__label,
.msll-client-detail__value,
.msll-client-detail__action {
  padding: 10px 12px;
  box-sizing: border-box;
  border-right: 1px solid rgba(133, 148, 174, 0.35);
}

.msll-client-detail__action {
  border-right: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 108px;
}

.msll-client-detail__label {
  font-family: 'Jost', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--msll-modal-title, #454954);
  text-align: left;
}

.msll-client-detail__value {
  font-size: 0.92rem;
  line-height: 1.45;
  color: #2d3748;
  text-align: left;
  word-break: break-word;
  min-width: 0;
}

/* Компактная кнопка «Изменить» — без выпирания за границы */
.msll-client-detail__btn {
  width: auto;
  min-width: 88px;
  max-width: 100%;
  height: 34px;
  padding: 0 10px;
  margin: 0;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(133, 148, 174, 0.65);
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  box-sizing: border-box;
  cursor: pointer;
}

.msll-client-detail__btn:hover {
  border-color: #bd162b;
}

/* Вложенная таблица продуктов */
.msll-client-detail__nested-table-wrap {
  max-height: 200px;
  overflow: auto;
  border: 1px solid rgba(133, 148, 174, 0.35);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
}

.msll-client-detail__products-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.82rem;
}

.msll-client-detail__products-table th,
.msll-client-detail__products-table td {
  padding: 7px 8px;
  border: 1px solid rgba(133, 148, 174, 0.35);
  text-align: left;
  vertical-align: top;
  word-break: break-word;
}

.msll-client-detail__products-table th {
  background: #8594ae;
  color: #fff;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
}

.msll-client-detail__products-table td {
  background: rgba(221, 218, 224, 0.55);
  color: #2d3748;
}

.msll-client-detail__products-table tbody tr:nth-child(even) td {
  background: rgba(133, 148, 174, 0.14);
}

.msll-client-detail__row--block {
  align-items: start;
}

.msll-client-detail__row--block .msll-client-detail__action {
  align-self: stretch;
  padding-top: 10px;
}

@media (max-width: 520px) {
  .msll-client-detail__row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label action"
      "value value";
  }

  .msll-client-detail__label {
    grid-area: label;
    border-right: none;
    border-bottom: 1px solid rgba(133, 148, 174, 0.25);
  }

  .msll-client-detail__value {
    grid-area: value;
    border-right: none;
  }

  .msll-client-detail__action {
    grid-area: action;
    border-right: none;
    border-bottom: 1px solid rgba(133, 148, 174, 0.25);
    min-width: 96px;
  }
}

.msll-modal-detail-links {
  margin: 0 0 4px;
  line-height: 1.4;
}

.msll-modal-detail-links a {
  color: #bd162b;
  text-decoration: none;
  word-break: break-all;
}

.msll-modal-detail-links a:hover {
  text-decoration: underline;
}

/* Вложенные редакторы внутри карточки деталей — поверх основного контента */
.msll-modal-card--detail > .modal {
  z-index: 2100;
}

@keyframes msll-modal-card-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Акцентная полоска бренда сверху карточки */
.msll-modal-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #bd162b 0%, #8594ae 100%);
  z-index: 1;
}

.msll-modal-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  flex-shrink: 0;
  height: auto !important;
  min-height: 72px;
  /* Отступ сверху — под градиентную полоску и длинное название формы */
  padding: 22px 52px 18px 20px;
  background: var(--msll-modal-surface, #dddae0) !important;
  color: var(--msll-modal-title, #454954) !important;
  border-bottom: 1px solid rgba(133, 148, 174, 0.32);
  text-align: left;
  box-sizing: border-box;
}

.msll-modal-card__title {
  margin: 0;
  padding: 0;
  padding-right: 8px;
  font-family: 'Jost', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--msll-modal-title, #454954);
  word-break: break-word;
}

.msll-modal-card__close {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(133, 148, 174, 0.55);
  border-radius: 50%;
  background: #fff;
  color: #8594ae;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.msll-modal-card__close svg {
  width: 14px;
  height: 14px;
}

.msll-modal-card__close:hover,
.msll-modal-card__close:focus-visible {
  outline: none;
  border-color: #bd162b;
  color: #bd162b;
  background: rgba(189, 22, 43, 0.06);
}

.msll-modal-card__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 18px 20px 12px !important;
  background: var(--msll-modal-surface, #dddae0) !important;
  background-image: none !important;
  overflow-x: hidden;
  overflow-y: auto;
  text-align: left;
  -webkit-overflow-scrolling: touch;
}

/* Футер не сжимается — кнопки всегда полностью видны */
.msll-modal-card__footer,
.msll-modal-card .modal-footer.msll-modal-card__footer {
  flex-shrink: 0;
  height: auto !important;
  min-height: 76px;
  padding: 14px 20px 18px !important;
  background: var(--msll-modal-surface, #dddae0) !important;
  color: inherit !important;
  border-top: 1px solid rgba(133, 148, 174, 0.32);
  box-sizing: border-box;
  overflow: visible;
}

.msll-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

.msll-modal-actions .msll_middle_button {
  box-sizing: border-box;
  flex: 1 1 140px;
  width: auto;
  min-width: 0;
  max-width: 100%;
  min-height: 46px;
  height: auto;
  margin: 0;
  padding: 10px 14px;
  line-height: 1.2;
  white-space: nowrap;
}

.msll-modal-actions__secondary {
  background: #fff !important;
  color: #4a5568 !important;
}

.msll-modal-actions__secondary:hover {
  background: rgba(133, 148, 174, 0.14) !important;
  color: #1a202c !important;
}

/* На широком экране кнопки компактные; на узком — делят строку поровну */
@media (min-width: 992px) {
  .msll-modal-actions .msll_middle_button {
    flex: 0 1 auto;
    width: auto;
    min-width: 140px;
    max-width: 220px;
  }
}

/* Поля формы внутри модалки */
.msll-modal-field {
  margin: 0 0 14px;
  text-align: left;
}

.msll-modal-field__label {
  display: block;
  margin: 0 0 6px;
  font-family: 'Jost', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--msll-modal-title, #454954);
  text-align: left;
}

.msll-modal-field__label--inline {
  margin: 0;
}

.msll-modal-field__control {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 10px !important;
  border: 1px solid rgba(133, 148, 174, 0.55) !important;
  background: #fff !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.msll-modal-field__control:focus {
  outline: none;
  border-color: #8594ae !important;
  box-shadow: 0 0 0 3px rgba(133, 148, 174, 0.22);
}

.msll-modal-field__control:disabled {
  background: #eceaf0 !important;
  color: #718096;
}

.msll-modal-field--checkbox {
  margin-bottom: 10px;
}

.msll-modal-checkbox-row {
  margin: 0 !important;
  align-items: center;
  gap: 10px;
}

.msll-modal-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}

.msll-modal-form-grid .msll-modal-field {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .msll-modal-form-grid {
    grid-template-columns: 1fr;
  }
}

.msll-modal-section {
  margin-top: 18px;
}

.msll-modal-section__title {
  margin: 0 0 10px;
  font-family: 'Jost', sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--msll-modal-title, #454954);
}

.msll-modal-subsection {
  margin-top: 14px;
  padding-top: 8px;
  border-top: 1px dashed rgba(133, 148, 174, 0.35);
}

.msll-modal-hint {
  margin: 6px 0 10px;
  font-size: 0.9rem;
  color: #718096;
}

.msll-modal-alerts {
  margin-top: 12px;
}

.msll-modal-alert {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(189, 22, 43, 0.25);
  background: rgba(189, 22, 43, 0.08);
  color: #9b1c2e;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
}

.msll-modal-table-wrap {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(133, 148, 174, 0.25);
}

.msll-modal-card .msll-modal-table,
.msll-modal-card .msll_permissions_table.msll-modal-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}

.msll-modal-card .msll-modal-table th,
.msll-modal-card .msll_permissions_table.msll-modal-table th {
  background: #8594ae !important;
  color: #fff !important;
  font-size: 0.85rem;
  padding: 8px 10px;
}

.msll-modal-card .msll-modal-table td,
.msll-modal-card .msll_permissions_table.msll-modal-table td {
  background: #fff;
  font-size: 0.9rem;
  padding: 8px 10px;
  vertical-align: top;
}

.msll-modal-card .msll_password_wrap .msll-modal-field__control {
  padding-right: 44px;
}

/* Строки списка (email, телефон, telegram) в модалках клиента */
.msll-modal-card .container_inline {
  gap: 8px;
  margin-bottom: 10px;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.msll-modal-card .container_inline .msll_filter {
  flex: 1 1 auto;
  min-width: 0;
}

.msll-modal-card .container_inline input[type="button"] {
  flex: 0 0 auto;
  min-width: 36px;
  min-height: 36px;
  border: 1px solid rgba(133, 148, 174, 0.55);
  border-radius: 8px;
  background: #fff;
  color: #bd162b;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.msll-modal-actions--center {
  justify-content: center;
}

.msll-modal-message {
  margin: 0 0 10px;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--msll-modal-title, #454954);
  text-align: left;
}

.msll-modal-message p {
  margin: 0 0 8px;
}

/* Сообщения системы — поверх остальных модалок */
#id_FormModalMessage.modal {
  z-index: 3000;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
}
#id_FormModalMessage.modal[style*="block"] {
  display: flex !important;
}
#id_FormModalMessage.modal .msll-modal-card {
  margin: 0 !important;
}

/* The Modal (background) */
/* Форма профиля на мобильной уровне выше выпадающих панелей (z-index 3) */
#id_FormEditProfile.modal {
  z-index: 2010;
}

/* Модалка профиля: поля не вылезают за границы формы (desktop + mobile) */
#id_FormEditProfile .msll-modal-card,
#id_FormEditProfile .modal-body,
#id_FormEditProfile .my_unheader2,
#id_FormEditProfile .form-element {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}

#id_FormEditProfile .form-element .msll_filter,
#id_FormEditProfile .form-element .msll_password_wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#id_FormEditProfile .form-element .msll_password_wrap .msll_filter {
  padding-right: 44px;
}

/* Форма редактирования профиля: мобильный режим (узкое окно на десктопе).
 * На телефоне (html.msll-device-mobile) формы на весь экран — см. правило выше. */
@media (max-width: 991px) {
  #id_FormModalMessage.modal {
    padding-top: 150px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .msll-modal-card {
    width: min(680px, 96vw) !important;
    max-height: calc(100vh - 170px);
    border-radius: 14px;
  }

  .msll-modal-card__header {
    min-height: 80px;
    padding: 24px 56px 20px 18px;
  }

  .msll-modal-card__title {
    font-size: 1.35rem;
    line-height: 1.35;
  }

  .msll-modal-field__label,
  .msll-modal-field__control,
  .msll-modal-alert,
  .msll-modal-hint {
    font-size: 1rem;
  }

  .msll-modal-actions {
    justify-content: stretch;
    gap: 12px;
  }

  .msll-modal-actions .msll_middle_button {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    max-width: none;
    min-height: 48px;
    padding: 12px 10px;
  }

  .msll-modal-card__footer,
  .msll-modal-card .modal-footer.msll-modal-card__footer {
    min-height: 84px;
    padding: 16px 18px 20px !important;
  }
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal2 {
  all: unset;
  /*display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}


/* Modal Content */
.modal-content-40 {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 40%;
  /*height: 40%;*/
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
}

/* Modal Content */
.modal-content-50 {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 50%;
  /*height: 70%;*/
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
  margin-bottom: 200px;
}

.modal-content-60 {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 60%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
  margin-top: 5%;
  margin-bottom: 200px;
}


.modal-content-80 {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  /*height: 40%;*/
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
  margin-top: 5%;
  margin-bottom: 200px;
}



.modal-body {
  padding: 2px 16px;
  background-image: url("../pictures/1975.png");
  background-repeat: no-repeat;
  background-size: cover;
}

#id_FormUpdateUser .modal-content-40:not(.msll-modal-card) {
  margin-bottom: 160px;
  overflow-x: hidden;
  max-width: 96vw;
  box-sizing: border-box;
}

#id_FormCreateNewUser .msll-modal-card,
#id_FormUpdateUser .msll-modal-card,
#form_Create_New_Client .msll-modal-card,
#id_FormEditProfile .msll-modal-card,
#Form_Editor_LastName_Of_Client .msll-modal-card,
#Form_Editor_FirstName_Of_Client .msll-modal-card,
#Form_Editor_Patronymic_Of_Client .msll-modal-card,
#Form_Editor_Job_Of_Client .msll-modal-card,
#Form_Editor_Comment_Of_Client .msll-modal-card,
#Form_Editor_Emails_Of_Client .msll-modal-card,
#Form_Editor_Phones_Of_Client .msll-modal-card,
#Form_Editor_Telegrams_Of_Client .msll-modal-card,
#Form_Editor_Products_Of_Client .msll-modal-card,
#id_FormModalMessage .msll-modal-card {
  margin-bottom: 24px;
  -webkit-animation-name: msll-modal-card-in;
  animation-name: msll-modal-card-in;
}

/* Модалка «Создание нового клиента»: поля не вылезают за ячейки таблицы */
#form_Create_New_Client .modal-content-50,
#form_Create_New_Client .modal-body {
  box-sizing: border-box;
  max-width: 100%;
}

#form_Create_New_Client table.msll_table {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  table-layout: fixed;
  box-sizing: border-box;
}

#form_Create_New_Client table.msll_table td {
  overflow: hidden;
}

#form_Create_New_Client .msll_filter {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Модалки «Новый пользователь» и «Редактирование данных пользователя»: поля не вылезают за форму */
#id_FormCreateNewUser .modal-content-40,
#id_FormCreateNewUser .modal-body,
#id_FormCreateNewUser .form-element,
#id_FormUpdateUser .modal-content-40,
#id_FormUpdateUser .modal-body,
#id_FormUpdateUser .form-element {
  box-sizing: border-box;
  max-width: 100%;
}

#id_FormCreateNewUser .form-element .msll_filter:not(.msll_filter_date_compact),
#id_FormUpdateUser .form-element .msll_filter:not(.msll_filter_date_compact) {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#id_FormCreateNewUser .msll_permissions_table,
#id_FormUpdateUser .msll_permissions_table {
  max-width: 100%;
  box-sizing: border-box;
}

#id_FormCreateNewUser .msll_filter_date_compact,
#id_FormUpdateUser .msll_filter_date_compact {
  box-sizing: border-box;
}

#id_FormCreateNewUser .container_inline,
#id_FormUpdateUser .container_inline {
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

#id_FormCreateNewUser .container_inline .msll_filter,
#id_FormUpdateUser .container_inline .msll_filter {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
}

#id_FormCreateNewUser .container_inline .msll_small_button,
#id_FormUpdateUser .container_inline .msll_small_button {
  flex: 0 0 auto;
}


/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header, .modal-footer {
  padding: 2px 16px;
  background-color: #8594ae;
  color: white;
  height: 48px;
}

/* Legacy .modal-footer не ограничивает высоту корпоративных модалок */
.msll-modal-card .modal-footer {
  height: auto;
}



.container_inline {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    border: 0;
    padding: 0;
    margin: 0;
}


div.width95{
  width: 95%;
  margin-left: 2%;

  /*border: #000;*/
  /*border-style: dotted;*/
}

div.container_inline2 {
    margin: 20px 0;
    display: flex;
    flex-direction: row;
    justify-content: left;
    /*float: left;*/
    /*width: 100%;*/
    /*border: #000;*/
    /*border-style: dotted;*/
}

div.container_inline_center{
  margin: 20px 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
} 

div.container_left{
  margin: 0;
  justify-content: left;
  text-align: left;

}

input.checkbox-height25{
  width: 25px;
  margin-right: 15px;
}
label.label-align-left {
    width: 100%;
    display: inline-block;
    text-align: left;
    font-size: 1.5rem;
    font-family: 'Jost';
}

.form_login {
    margin: 150px auto;
    padding: 20px;
    width: 600px;
    border-color: var(--msll-control-border-color, #8594ae);
    border-style: solid;
    border-width: 10px;
    background-image: url("../pictures/1975.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.form_login_desktop {
    margin: 150px auto;
    padding: 20px;
    width: 600px;
    border-color: var(--msll-control-border-color, #8594ae);
    border-style: solid;
    border-width: 10px;
    background-image: url("../pictures/1975.png");
    background-repeat: no-repeat;
    background-size: cover;
}

/* Форма входа / сброса пароля внутри index.php (без отдельной страницы).
   Поля всегда width:100% + box-sizing:border-box — иначе padding раздувает логин
   шире пароля (у пароля уже была обёртка с border-box).
   position:fixed + inset:0: на iPhone при viewport=980 100vh короче визуального
   экрана, cover на форме обрывался и снизу просвечивал тёмный фон body. */
.msll-auth-form {
    position: fixed;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 100%;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    padding: 32px 20px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #5c6a82;
    background-image: url("../pictures/fon-1-1_1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* Пока открыт вход: html/body той же тёмной градиентной текстурой, чтобы под формой не было «половины» светлого 1975 */
html.msll-auth-screen,
html.msll-auth-screen body,
html.msll-auth-screen #msll_main_app {
    min-height: 100%;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    background-color: #5c6a82;
    background-image: url("../pictures/fon-1-1_1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* Тот же фон отдельным слоем: cover привязан к визуальному экрану, не к 100vh */
.msll-auth-form::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: #5c6a82;
    background-image: url("../pictures/fon-1-1_1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

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

.msll-auth-card {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding: 36px 32px 32px;
    text-align: left;
    /* Двойная рамка: внутренний кант #8594ae и внешнее паспарту #dddae0 */
    border: 2px solid #8594ae;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 0 0 8px rgba(221, 218, 224, 0.78),
        0 22px 48px rgba(45, 55, 72, 0.16);
}

.msll-auth-logo {
    display: block;
    width: auto;
    max-width: 260px;
    height: auto;
    margin: 0 auto 20px;
}

.msll-auth-title {
    margin: 0 0 24px;
    color: #2d3748;
    font-family: 'Jost', sans-serif;
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.01em;
    text-align: center;
}

.msll-auth-field {
    width: 100%;
    margin: 0 0 16px;
    box-sizing: border-box;
}

.msll-auth-label {
    display: block;
    margin: 0 0 8px;
    color: #4a5568;
    font-family: 'Jost', sans-serif;
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.msll-auth-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 12px 14px;
    color: #1a202c;
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    line-height: 1.35;
    background: #ffffff;
    border: 1px solid #8594ae;
    border-radius: 12px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.msll-auth-input:hover {
    border-color: #6f7e98;
}

.msll-auth-input:focus {
    border-color: #bd162b;
    box-shadow: 0 0 0 3px rgba(189, 22, 43, 0.16);
}

.msll-auth-form .msll_password_wrap {
    width: 100%;
    margin: 0;
}

.msll-auth-form .msll_password_wrap .msll-auth-input {
    padding-right: 48px;
}

.msll-auth-form .msll_password_toggle {
    width: 40px;
    height: 40px;
    right: 6px;
}

.msll-auth-forgot {
    margin: -4px 0 18px;
    text-align: right;
}

.msll-auth-aux {
    margin: 16px 0 0;
    text-align: center;
}

.msll-auth-link {
    color: #8594ae;
    font-family: 'Jost', sans-serif;
    font-size: 0.92rem;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.msll-auth-link:hover,
.msll-auth-link:focus {
    color: #bd162b;
    border-bottom-color: #bd162b;
    outline: none;
}

.msll-auth-submit {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 4px 0 0;
    padding: 13px 16px;
    color: #ffffff;
    font-family: 'Jost', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: #bd162b;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(189, 22, 43, 0.22);
    transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.msll-auth-submit:hover:not(:disabled) {
    background: #a11224;
    box-shadow: 0 10px 22px rgba(189, 22, 43, 0.28);
}

.msll-auth-submit:active:not(:disabled) {
    transform: translateY(1px);
}

.msll-auth-submit:disabled {
    opacity: 0.65;
    cursor: wait;
    box-shadow: none;
}

.msll-auth-alert {
    margin: 0 0 16px;
    padding: 10px 12px;
    border-radius: 10px;
    font-family: 'Jost', sans-serif;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
}

.msll-auth-alert--error {
    color: #7a1020;
    background: #fdecee;
    border: 1px solid rgba(189, 22, 43, 0.28);
}

.msll-auth-alert--success {
    color: #1b5e20;
    background: #edf7ee;
    border: 1px solid rgba(27, 94, 32, 0.22);
}

/* Мобильный DeviceType: viewport ~980px, крупные зоны нажатия; карточка по центру экрана */
.msll-auth-form--mobile {
    align-items: center;
    justify-content: center;
    padding: 40px 28px;
}

.msll-auth-form--mobile .msll-auth-shell {
    max-width: 820px;
    margin-top: 0;
}

.msll-auth-form--mobile .msll-auth-card {
    padding: 48px 40px 44px;
    border-width: 3px;
    border-radius: 28px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 0 0 10px rgba(221, 218, 224, 0.78),
        0 24px 52px rgba(45, 55, 72, 0.16);
}

.msll-auth-form--mobile .msll-auth-logo {
    max-width: 72%;
    margin-bottom: 28px;
}

.msll-auth-form--mobile .msll-auth-title {
    margin-bottom: 32px;
    font-size: 2.4rem;
}

.msll-auth-form--mobile .msll-auth-field {
    margin-bottom: 22px;
}

.msll-auth-form--mobile .msll-auth-label {
    margin-bottom: 12px;
    font-size: 1.7rem;
}

.msll-auth-form--mobile .msll-auth-input {
    min-height: 88px;
    padding: 18px 20px;
    font-size: 1.85rem;
    border-width: 2px;
    border-radius: 18px;
}

.msll-auth-form--mobile .msll_password_wrap .msll-auth-input {
    padding-right: 88px;
}

.msll-auth-form--mobile .msll_password_toggle {
    width: 72px;
    height: 72px;
    right: 10px;
}

.msll-auth-form--mobile .msll_password_toggle svg,
.msll-auth-form--mobile .msll_password_toggle_icon {
    width: 40px;
    height: 40px;
}

.msll-auth-form--mobile .msll-auth-forgot {
    margin: 0 0 24px;
}

.msll-auth-form--mobile .msll-auth-link {
    font-size: 1.6rem;
}

.msll-auth-form--mobile .msll-auth-submit {
    min-height: 88px;
    margin-top: 8px;
    font-size: 1.9rem;
    border-radius: 18px;
}

.msll-auth-form--mobile .msll-auth-aux {
    margin-top: 24px;
}

.msll-auth-form--mobile .msll-auth-alert {
    margin-bottom: 22px;
    padding: 16px 18px;
    font-size: 1.5rem;
    border-radius: 14px;
}

.form_login_mobile {
    position: fixed;
    inset: 0;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #5c6a82;
    background-image: url("../pictures/fon-1-1_1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.msll_center {
  text-align: center;
  vertical-align: middle;
  height: 100%;
  padding-top: 7;
  padding-bottom: 7;
}

.spinner {
  display: none; /* Hidden by default */
  border: 1px solid #000;
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 25%; /* Location of the box */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

p.p-text-aligan-justify{
  text-align: justify;
}
div.no-copy{
  -ms-user-select: none; 
  -moz-user-select: none; 
  -webkit-user-select: none; 
  user-select: none;   
}
.msll_courses_images{
  width: 90%;
}
.msll_courses_doc_pdf{
  width: 90%; 
  height: 1000px;
}
.msll_text_align_left{
  text-align: left;
}
.msll_margin_lef_right_20{
  margin-left: 20px;
  margin-right: 20px;
}
.msll_margin_top_bottom_20{
  margin-top: 20px;
  margin-bottom: 20px;
}

.msll_margin_bottom_100{
  margin-bottom: 1000px;
}


.msll_body2{
  margin-left: 420px;
  border: #bd162b;
  border-style: dashed;


  display: flex;
  flex-flow: wrap;
  width: 100%;

}
  /*
.msll_left{
  position: relative;
  border: #000;
  left: 0;
  border-style: dashed;
  margin-left:auto;
}

.msll_dislpay_block{
  position: relative;
  margin-left:0;
  border: #bd162b;
  border-style: dashed;
  margin-left:auto;
}

.box {
  display: flex;
  /*flex-wrap: wrap;* /
  width: 100%;
  justify-content: center;
}
.push {
  margin-left: auto;
}

.center_position {
  justify-content: center;
}


.w100 {
  width: 100%;
}
*/

/**/
/*
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      color: #212529;
      text-align: left;
      background-color: #fff;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }
*/
    .accordion__item {
      margin-bottom: 0.5rem;
      border-radius: 0.25rem;
      box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 15%);
    }

    .accordion__header {
      /*display: flex;*/
      display: block;
      justify-content: space-between;
      align-items: center;
      text-align: left;
      padding: 0.75rem 1rem;
      color: #fff;
      font-weight: 600;
      background-color: #8594ae;
      border-top-left-radius: 0.25rem;
      border-top-right-radius: 0.25rem;
      cursor: pointer;
      transition: background-color 0.2s ease-out;
    }
    .black_text {
      color: #000;
    }

    .accordion__header:hover {
      background-color: #bd162b;
    }

    .accordion__header_selected {
      /*display: flex;*/
      display:block;
      justify-content: space-between;
      align-items: center;
      text-align: left;
      padding: 0.75rem 1rem;
      color: #fff;
      font-weight: 600;
      background-color: #bd162b;
      border-top-left-radius: 0.25rem;
      border-top-right-radius: 0.25rem;
      cursor: pointer;
      transition: background-color 0.2s ease-out;
    }


    .accordion__header::after {
      flex-shrink: 0;
      width: 1.25rem;
      height: 1.25rem;
      margin-left: auto;
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-size: 1.25rem;
      content: "";
      transition: transform 0.2s ease-out;
    }

    .accordion__header_selected::after {
      flex-shrink: 0;
      width: 1.25rem;
      height: 1.25rem;
      margin-left: auto;
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-size: 1.25rem;
      content: "";
      transition: transform 0.2s ease-out;
      transform: rotate(-180deg);
    }

    .accordion__item_show .accordion__header::after,
    .accordion__item_slidedown .accordion__header::after {
      transform: rotate(-180deg);
    }


    .accordion__item:not(.accordion__item_show) .accordion__header {
      border-bottom-right-radius: 0.25rem;
      border-bottom-left-radius: 0.25rem;
    }

    .accordion__content {
      display: flex;
      flex-direction: column;
      background: #fff;
      border-bottom-right-radius: 0.25rem;
      border-bottom-left-radius: 0.25rem;
    }

    .accordion_content_item {
      position: relative;
      display: block;
      padding: 0.5rem 1rem;
      color: #212529;
      text-decoration: none;
      background-color: #dddae0;
      border: 1px solid rgb(0 0 0 / 12.5%);
      border: 1px solid #bd162b;
      text-align: left;
    }

    .accordion_content_item:hover {
      background-color: #f8f9fa;
      border: 1px solid #8594ae;
      color:#bd162b;
    }    

    .accordion_content_item_selected {
      position: relative;
      display: block;
      padding: 0.5rem 1rem;
      color: #212529;
      text-decoration: none;
      background-color: #f8f9fa;
      text-align: left;   
      border: 1px solid #8594ae;
      color:#bd162b;
    }

    .accordion__content a:last-child {
      border-bottom-right-radius: inherit;
      border-bottom-left-radius: inherit;
    }

    .accordion__content a:hover {
      background-color: #f8f9fa;
    }

    .accordion__item:not(.accordion__item_show) .accordion__body {
      /*display: none;*/
    }
/**/
.msll_atricle_container{
  background-color: rgba(255, 249, 249, 0.555);
  border-radius: 30px;
  padding: 30px;
  font-size: 16px;
}
.msll_atricle_content{
  width: 50%;
}
/* Блок TEXT-WIDE: текст занимает всю доступную ширину контейнера */
.msll_atricle_content.msll_atricle_content--wide {
  width: 100%;
}

/* Заголовки контента курса: Semibold (Jost 600), и desktop, и mobile */
.msll_courses_body h1,
.msll_courses_body h2,
.msll_courses_body h3,
.msll_courses_body h4,
.msll_courses_body h5,
.msll_courses_body h6,
.course-content-preview-canvas h1,
.course-content-preview-canvas h2,
.course-content-preview-canvas h3,
.course-content-preview-canvas h4,
.course-content-preview-canvas h5,
.course-content-preview-canvas h6 {
  font-weight: 600;
}
.msll_course_feedback_title,
.msll_course_test_question,
.msll_course_calendar_title {
  font-weight: 600;
}

/* Desktop: контент курса (включая HTML из v-html) берёт кегль у .msll_courses_body */
@media (min-width: 992px) {
  .msll_courses_body .msll_atricle_container,
  .msll_courses_body .msll_atricle_content,
  .msll_courses_body .msll_course_content_mobile_font,
  .msll_courses_body .msll_course_content_mobile_font * {
    font-size: inherit !important;
  }
}

@media (max-width: 991px) {
  .msll_atricle_content {
    width: 100%;
  }

  .msll_course_content_mobile_font {
    /* На ~2 пункта больше предыдущих 2.4rem */
    font-size: 2.55rem;
    line-height: 1.35;
  }

  .msll_course_content_mobile_font * {
    font-size: inherit;
  }
}

.item_of_list_N1{
  font-size: 20px;
  margin-left: 20px;
  margin-right: 5px;
}

.item_of_list_N2{
  font-size: 16px;
  margin-left: 40px;
  margin-right: 5px;
}

.login_logo_desktop{
  display: none;
}

.login_logo_mobile{
  width: 60%;
}

.form_login_label_desktop{

}

.form_login_label_mobile{
  display: flex;
  justify-content: flex-start;
  margin-left: 5%;
  margin-top: 5%;
  /*margin-bottom: 10%;*/
  /*padding-left: 20px;*/
  font-size: 60px;
}

/* Выдвижная панель «Шаблоны документов» (клик по шильдику) */
.documents_sidenav_wrap {
  /* Локальные переменные наследуют :root; оставлены для совместимости */
  position: fixed;
  /* Та же левая «нить», что у основного «Меню» */
  left: 0;
  top: var(--left-sidenav-top, 50px);
  /* Верхний слой-оверлей: не сдвигает рабочую область */
  z-index: 39;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  /* Клики только у шильдика и открытой панели — не блокируем «Меню» */
  pointer-events: none;
}

/* Выдвижение: бордюр и контент — соседние flex-элементы внутри одного анимируемого блока */
.documents_sidenav {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  align-items: stretch;
  height: calc(100vh - var(--left-sidenav-top, 50px));
  overflow: hidden;
  transition: width 180ms ease;
  will-change: width;
}

/* Бордовый бордюр слева — только в свёрнутом состоянии (в открытом — border-right у content) */
.documents_sidenav_border {
  flex: 0 0 var(--documents-sidenav-strip-width);
  width: var(--documents-sidenav-strip-width);
  background: #bd162b;
  transition: opacity 120ms ease, width 180ms ease, flex-basis 180ms ease;
}

.documents_sidenav.documents_sidenav--open .documents_sidenav_border {
  flex: 0 0 0;
  width: 0;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}

.documents_sidenav.documents_sidenav--open .documents_sidenav_content {
  flex: 0 0 var(--documents-sidenav-panel-width);
  width: var(--documents-sidenav-panel-width);
}

.documents_sidenav_content {
  flex: 0 0 calc(var(--documents-sidenav-panel-width) - var(--documents-sidenav-strip-width));
  width: calc(var(--documents-sidenav-panel-width) - var(--documents-sidenav-strip-width));
  height: 100%;
  padding: 10px 10px 0 0;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  background-image: url("../pictures/1975.png");
  background-repeat: no-repeat;
  background-size: cover;
  border-right: 10px solid #bd162b;
}

.documents_sidenav.documents_sidenav--collapsed {
  /* Свёрнутая панель растягивается до ширины активной нити — шильдик едет с «Меню» */
  width: var(--left-sidenav-rail-width, var(--documents-sidenav-strip-width));
  box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 10px;
  pointer-events: none;
  transition: width 180ms ease;
}

.documents_sidenav.documents_sidenav--open {
  width: var(--documents-sidenav-panel-width);
  box-shadow: rgba(0, 0, 0, 0.08) 0px 1.2px 18px, rgba(0, 0, 0, 0.12) 0px 6.4px 28px;
  pointer-events: auto;
}

/* Когда открыто «Меню», свёрнутые «Шаблоны» — прозрачный спейсер под общую нить */
html.left-sidenav-main-open .documents_sidenav.documents_sidenav--collapsed {
  box-shadow: none;
}

html.left-sidenav-main-open .documents_sidenav.documents_sidenav--collapsed .documents_sidenav_border {
  flex: 0 0 0;
  width: 0;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}

/* Шильдик — на одной вертикали с «Меню», ниже него на общей нити */
.documents_sidenav_badge {
  flex-shrink: 0;
  width: var(--documents-sidenav-badge-width);
  min-height: 92px;
  margin-top: var(--main-nav-badge-stack-offset, 0px);
  padding: 10px 2px;
  background: #bd162b;
  color: #ffffff;
  border-radius: 0 8px 8px 0;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  z-index: 42;
  cursor: pointer;
  user-select: none;
  transition: box-shadow 180ms ease, margin-top 180ms ease;
  pointer-events: auto;
}

.documents_sidenav_badge:hover {
  box-shadow: rgba(0, 0, 0, 0.28) 0px 6px 18px;
}

.documents_sidenav_badge_text {
  font-family: 'Jost';
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.4px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  line-height: 1.1;
  text-align: center;
}

.documents_sidenav.documents_sidenav--collapsed .documents_sidenav_content {
  visibility: hidden;
}

/* Выдвижная панель действий на странице пользователей (как documents_sidenav) */
.uc_sidenav_wrap {
  position: fixed;
  left: 0;
  top: var(--left-sidenav-top, 50px);
  z-index: 39;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  pointer-events: none;
}

.uc_sidenav {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  align-items: stretch;
  height: calc(100vh - var(--left-sidenav-top, 50px));
  overflow: hidden;
  transition: width 180ms ease;
  will-change: width;
}

.uc_sidenav_border {
  flex: 0 0 var(--uc-sidenav-strip-width);
  width: var(--uc-sidenav-strip-width);
  background: #bd162b;
  transition: opacity 120ms ease, width 180ms ease, flex-basis 180ms ease;
}

.uc_sidenav.uc_sidenav--open .uc_sidenav_border {
  flex: 0 0 0;
  width: 0;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}

.uc_sidenav.uc_sidenav--open .uc_sidenav_content {
  flex: 0 0 var(--uc-sidenav-panel-width);
  width: var(--uc-sidenav-panel-width);
}

.uc_sidenav_content {
  flex: 0 0 calc(var(--uc-sidenav-panel-width) - var(--uc-sidenav-strip-width));
  width: calc(var(--uc-sidenav-panel-width) - var(--uc-sidenav-strip-width));
  height: 100%;
  padding: 10px 10px 0 0;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  background-image: url("../pictures/1975.png");
  background-repeat: no-repeat;
  background-size: cover;
  border-right: 10px solid #bd162b;
}

.uc_sidenav.uc_sidenav--collapsed {
  width: var(--left-sidenav-rail-width, var(--uc-sidenav-strip-width));
  box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 10px;
  pointer-events: none;
  transition: width 180ms ease;
}

.uc_sidenav.uc_sidenav--open {
  width: var(--uc-sidenav-panel-width);
  box-shadow: rgba(0, 0, 0, 0.08) 0px 1.2px 18px, rgba(0, 0, 0, 0.12) 0px 6.4px 28px;
  pointer-events: auto;
}

/* Когда открыто «Меню», свёрнутые «Действия» — прозрачный спейсер под общую нить */
html.left-sidenav-main-open .uc_sidenav.uc_sidenav--collapsed {
  box-shadow: none;
}

html.left-sidenav-main-open .uc_sidenav.uc_sidenav--collapsed .uc_sidenav_border {
  flex: 0 0 0;
  width: 0;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}

.uc_sidenav_badge {
  flex-shrink: 0;
  width: var(--uc-sidenav-badge-width);
  min-height: 92px;
  margin-top: var(--main-nav-badge-stack-offset, 0px);
  padding: 10px 2px;
  background: #bd162b;
  color: #ffffff;
  border-radius: 0 8px 8px 0;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  z-index: 42;
  cursor: pointer;
  user-select: none;
  transition: box-shadow 180ms ease, margin-top 180ms ease;
  pointer-events: auto;
}

.uc_sidenav_badge:hover {
  box-shadow: rgba(0, 0, 0, 0.28) 0px 6px 18px;
}

.uc_sidenav_badge_text {
  font-family: 'Jost';
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.4px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  line-height: 1.1;
  text-align: center;
}

.uc_sidenav.uc_sidenav--collapsed .uc_sidenav_content {
  visibility: hidden;
}

.uc_sidenav .uc_panel {
  margin: 15px 10px 90pt 10px;
  padding: 20px;
  border: 4px solid #8594ae;
  border-radius: 8px;
  background: rgba(221, 218, 224, 0.92);
  text-align: left;
}

.uc_panel_title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #bd162b;
  margin-bottom: 15px;
}

.uc_sidenav .msll_button {
  width: 100%;
  box-sizing: border-box;
}

/* Таблица пользователей: отступ только под свёрнутую нить; открытая панель — оверлей */
.msll_body.uc_body {
  margin-left: max(
    var(--main-nav-sidenav-collapsed-offset, 0px),
    calc(var(--uc-sidenav-strip-width, 10px) + var(--uc-sidenav-badge-width, 26px) + 10px)
  );
  width: calc(100% - max(
    var(--main-nav-sidenav-collapsed-offset, 0px),
    calc(var(--uc-sidenav-strip-width, 10px) + var(--uc-sidenav-badge-width, 26px) + 10px)
  ));
  box-sizing: border-box;
  padding: 15px 10px 40px 10px;
}

.uc_mobile_actions {
  margin: 0 0 16px 0;
  text-align: left;
}

.uc_body .reports_pagination,
.sales_body .reports_pagination {
  margin-top: 12px;
}

@media (max-width: 991px) {
  .msll_body.uc_body {
    margin-left: 0;
    width: 100%;
    padding: 15px 8px 40px 8px;
  }
}

/* Выдвижная панель фильтра на странице продаж (как uc_sidenav / documents_sidenav) */
.sales_sidenav_wrap {
  position: fixed;
  left: 0;
  top: var(--left-sidenav-top, 50px);
  z-index: 39;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  pointer-events: none;
}

.sales_sidenav {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  align-items: stretch;
  height: calc(100vh - var(--left-sidenav-top, 50px));
  overflow: hidden;
  transition: width 180ms ease;
  will-change: width;
}

.sales_sidenav_border {
  flex: 0 0 var(--sales-sidenav-strip-width);
  width: var(--sales-sidenav-strip-width);
  background: #bd162b;
  transition: opacity 120ms ease, width 180ms ease, flex-basis 180ms ease;
}

.sales_sidenav.sales_sidenav--open .sales_sidenav_border {
  flex: 0 0 0;
  width: 0;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}

.sales_sidenav.sales_sidenav--open .sales_sidenav_content {
  flex: 0 0 var(--sales-sidenav-panel-width);
  width: var(--sales-sidenav-panel-width);
}

.sales_sidenav_content {
  flex: 0 0 calc(var(--sales-sidenav-panel-width) - var(--sales-sidenav-strip-width));
  width: calc(var(--sales-sidenav-panel-width) - var(--sales-sidenav-strip-width));
  height: 100%;
  padding: 10px 10px 0 0;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  background-image: url("../pictures/1975.png");
  background-repeat: no-repeat;
  background-size: cover;
  border-right: 10px solid #bd162b;
}

.sales_sidenav.sales_sidenav--collapsed {
  width: var(--left-sidenav-rail-width, var(--sales-sidenav-strip-width));
  box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 10px;
  pointer-events: none;
  transition: width 180ms ease;
}

.sales_sidenav.sales_sidenav--open {
  width: var(--sales-sidenav-panel-width);
  box-shadow: rgba(0, 0, 0, 0.08) 0px 1.2px 18px, rgba(0, 0, 0, 0.12) 0px 6.4px 28px;
  pointer-events: auto;
}

/* Когда открыто «Меню», свёрнутый «Фильтр» — прозрачный спейсер под общую нить */
html.left-sidenav-main-open .sales_sidenav.sales_sidenav--collapsed {
  box-shadow: none;
}

html.left-sidenav-main-open .sales_sidenav.sales_sidenav--collapsed .sales_sidenav_border {
  flex: 0 0 0;
  width: 0;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}

.sales_sidenav_badge {
  flex-shrink: 0;
  width: var(--sales-sidenav-badge-width);
  min-height: 92px;
  margin-top: var(--main-nav-badge-stack-offset, 0px);
  padding: 10px 2px;
  background: #bd162b;
  color: #ffffff;
  border-radius: 0 8px 8px 0;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  z-index: 42;
  cursor: pointer;
  user-select: none;
  transition: box-shadow 180ms ease, margin-top 180ms ease;
  pointer-events: auto;
}

.sales_sidenav_badge:hover {
  box-shadow: rgba(0, 0, 0, 0.28) 0px 6px 18px;
}

.sales_sidenav_badge_text {
  font-family: 'Jost';
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.4px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  line-height: 1.1;
  text-align: center;
}

.sales_sidenav.sales_sidenav--collapsed .sales_sidenav_content {
  visibility: hidden;
}

.sales_sidenav .sales_panel {
  margin: 15px 10px 90pt 10px;
  padding: 20px;
  border: 4px solid #8594ae;
  border-radius: 8px;
  background: rgba(221, 218, 224, 0.92);
  text-align: left;
}

.sales_panel_title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #bd162b;
  margin-bottom: 15px;
}

.sales_sidenav .msll_button,
.sales_mobile_actions .msll_button {
  width: 100%;
  box-sizing: border-box;
}

.sales_sidenav .form-element label,
.sales_mobile_actions .form-element label {
  display: block;
  margin: 12px 0 6px 0;
  font-weight: 600;
}

.sales_sidenav .form-element .msll_filter,
.sales_mobile_actions .form-element .msll_filter {
  margin-bottom: 10px;
  box-sizing: border-box;
}

.sales_sidenav .form-element .msll_button,
.sales_mobile_actions .form-element .msll_button {
  margin-bottom: 10px;
}

.sales_sidenav .form-element table.msll_table,
.sales_mobile_actions .form-element table.msll_table {
  width: 100%;
}

/* Таблица продаж: отступ только под свёрнутую нить; открытая панель — оверлей */
.msll_body.sales_body {
  margin-left: max(
    var(--main-nav-sidenav-collapsed-offset, 0px),
    calc(var(--sales-sidenav-strip-width, 10px) + var(--sales-sidenav-badge-width, 26px) + 10px)
  );
  width: calc(100% - max(
    var(--main-nav-sidenav-collapsed-offset, 0px),
    calc(var(--sales-sidenav-strip-width, 10px) + var(--sales-sidenav-badge-width, 26px) + 10px)
  ));
  box-sizing: border-box;
  padding: 15px 10px 40px 10px;
}

.sales_mobile_actions {
  margin: 0 0 16px 0;
  text-align: left;
}

@media (max-width: 991px) {
  .msll_body.sales_body {
    margin-left: 0;
    width: 100%;
    padding: 15px 8px 40px 8px;
  }
}

/* Выдвижная панель курсов на странице обучения (как sales_sidenav / uc_sidenav) */
.courses_sidenav_wrap {
  position: fixed;
  left: 0;
  top: var(--left-sidenav-top, 50px);
  z-index: 39;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  pointer-events: none;
  overflow: visible;
}

.courses_sidenav {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  align-items: stretch;
  height: calc(100vh - var(--left-sidenav-top, 50px));
  overflow: hidden;
  transition: width 180ms ease;
  will-change: width;
}

.courses_sidenav_border {
  flex: 0 0 var(--courses-sidenav-strip-width);
  width: var(--courses-sidenav-strip-width);
  background: #bd162b;
  transition: opacity 120ms ease, width 180ms ease, flex-basis 180ms ease;
}

.courses_sidenav.courses_sidenav--open .courses_sidenav_border {
  flex: 0 0 0;
  width: 0;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}

.courses_sidenav.courses_sidenav--open .courses_sidenav_content {
  flex: 0 0 var(--courses-sidenav-panel-width);
  width: var(--courses-sidenav-panel-width);
}

.courses_sidenav_content {
  flex: 0 0 calc(var(--courses-sidenav-panel-width) - var(--courses-sidenav-strip-width));
  width: calc(var(--courses-sidenav-panel-width) - var(--courses-sidenav-strip-width));
  height: 100%;
  padding: 10px 10px 0 0;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  background-image: url("../pictures/1975.png");
  background-repeat: no-repeat;
  background-size: cover;
  border-right: 10px solid #bd162b;
}

.courses_sidenav.courses_sidenav--collapsed {
  width: var(--left-sidenav-rail-width, var(--courses-sidenav-strip-width));
  box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 10px;
  pointer-events: none;
  transition: width 180ms ease;
}

.courses_sidenav.courses_sidenav--open {
  width: var(--courses-sidenav-panel-width);
  box-shadow: rgba(0, 0, 0, 0.08) 0px 1.2px 18px, rgba(0, 0, 0, 0.12) 0px 6.4px 28px;
  pointer-events: auto;
}

/* Когда открыто «Меню», свёрнутые «Курсы» — прозрачный спейсер под общую нить */
html.left-sidenav-main-open .courses_sidenav.courses_sidenav--collapsed {
  box-shadow: none;
}

html.left-sidenav-main-open .courses_sidenav.courses_sidenav--collapsed .courses_sidenav_border {
  flex: 0 0 0;
  width: 0;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}

.courses_sidenav_badge {
  position: relative;
  flex-shrink: 0;
  width: var(--courses-sidenav-badge-width);
  min-height: 92px;
  margin-top: var(--main-nav-badge-stack-offset, 0px);
  padding: 10px 2px;
  background: #bd162b;
  color: #ffffff;
  border-radius: 0 8px 8px 0;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  z-index: 42;
  cursor: pointer;
  user-select: none;
  transition: box-shadow 180ms ease, margin-top 180ms ease;
  pointer-events: auto;
}

.courses_sidenav_badge:hover {
  box-shadow: rgba(0, 0, 0, 0.28) 0px 6px 18px;
}

/* Стартовая подсказка: пульс шильдика «Курсы» и стрелка-указатель */
html.courses-intro-hint .courses_sidenav_badge {
  animation: courses-badge-glow 1.4s ease-in-out infinite;
}

html.courses-intro-hint .courses_sidenav_badge::before,
html.courses-intro-hint .courses_sidenav_badge::after {
  position: absolute;
  pointer-events: none;
}

html.courses-intro-hint .courses_sidenav_badge::before {
  content: "";
  left: calc(100% + 12px);
  top: 50%;
  width: 38px;
  height: 28px;
  margin-top: -14px;
  background: #bd162b;
  clip-path: polygon(40% 0, 0 50%, 40% 100%, 40% 68%, 100% 68%, 100% 32%, 40% 32%);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.28));
  animation: courses-hint-nudge-left 1s ease-in-out infinite;
}

html.courses-intro-hint .courses_sidenav_badge::after {
  content: "Нажмите сюда";
  left: calc(100% + 56px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: 'Jost';
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #bd162b;
  background: rgba(255, 249, 249, 0.94);
  border: 1px solid #bd162b;
  border-radius: 8px;
  padding: 4px 8px;
  box-shadow: rgba(0, 0, 0, 0.12) 0 2px 8px;
}

.courses_sidenav_badge_text {
  font-family: 'Jost';
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.4px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  line-height: 1.1;
  text-align: center;
}

.courses_sidenav.courses_sidenav--collapsed .courses_sidenav_content {
  visibility: hidden;
}

.courses_sidenav .courses_panel {
  margin: 15px 10px 20px 10px;
  padding: 20px;
  border: 4px solid #8594ae;
  border-radius: 8px;
  background: rgba(221, 218, 224, 0.92);
  text-align: left;
  box-sizing: border-box;
}

.courses_panel_title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #bd162b;
  margin-bottom: 15px;
}

.courses_sidenav .accordion,
.courses_mobile_actions .accordion {
  max-width: 100%;
  margin: 0;
}

/* Контент курсов: отступ только под свёрнутую нить; открытая панель — оверлей */
.msll_body.msll_courses_body.courses_body {
  margin-left: max(
    var(--main-nav-sidenav-collapsed-offset, 0px),
    calc(var(--courses-sidenav-strip-width, 10px) + var(--courses-sidenav-badge-width, 26px) + 10px)
  );
  width: calc(100% - max(
    var(--main-nav-sidenav-collapsed-offset, 0px),
    calc(var(--courses-sidenav-strip-width, 10px) + var(--courses-sidenav-badge-width, 26px) + 10px)
  ));
  box-sizing: border-box;
}

.courses_mobile_actions {
  margin: 0 0 16px 0;
  text-align: left;
}

/* Карточка инструкции, пока раздел курса не выбран */
.courses_intro {
  display: flex;
  justify-content: flex-start;
  padding: 28px 20px 20px 20px;
  box-sizing: border-box;
  /* Тот же ход, что у ширины .courses_sidenav */
  transition: margin-left 180ms ease, padding-left 180ms ease;
}

.courses_intro--hint {
  /* Место под стрелку и подпись «Нажмите сюда» у шильдика */
  padding-left: 168px;
}

/* Панель курсов выехала — инструкция уезжает вправо вместе с ней, а не остаётся под оверлеем */
html.left-sidenav-courses-open .courses_intro {
  margin-left: calc(var(--courses-sidenav-panel-width) - var(--courses-sidenav-strip-width));
  padding-left: 0;
}

.courses_intro_card {
  max-width: 560px;
  text-align: left;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(133, 148, 174, 0.45);
  border-left: 6px solid #bd162b;
  border-radius: 16px;
  padding: 26px 28px 24px 24px;
  box-shadow: 0 12px 32px rgba(69, 73, 84, 0.12);
  /* Не наследовать мобильный 340% с .courses_body */
  font-size: 16px;
}

.courses_intro_title {
  font-size: 1.45rem;
  font-weight: 700;
  color: #bd162b;
  margin: 0 0 10px 0;
}

.courses_intro_text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
  color: #333333;
}

/* Рабочая область курса: современные карточки в корпоративной палитре */
.msll_body.msll_courses_body.courses_body {
  background-color: rgba(255, 255, 255, 0.22);
}

.courses_workspace {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 24px;
  box-sizing: border-box;
  width: 100%;
  /* Без потолка 1180px: иначе в ряд влазит только два видео 400px */
  max-width: 100%;
  margin: 0 auto;
  padding: 28px 28px 56px;
}

/* Одна строка: либо несколько видео, либо несколько документов, либо один «особый» блок */
.courses_workspace_row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 24px 28px;
  box-sizing: border-box;
  width: 100%;
}

/* В ряду столько видео 400px, сколько входит в ширину экрана (не только два) */
.courses_workspace_row--video {
  display: grid;
  grid-template-columns: repeat(auto-fit, 400px);
  justify-content: center;
  justify-items: center;
  align-items: start;
}

/* Документы — группой от центра по горизонтали (auto-fit, без пустых колонок слева) */
.courses_workspace_row--doc {
  display: grid;
  grid-template-columns: repeat(auto-fit, 300px);
  justify-content: center;
  justify-items: center;
  align-items: start;
}

.courses_workspace_item {
  box-sizing: border-box;
  min-width: 0;
}

.courses_workspace_item--video {
  width: 400px;
  max-width: 100%;
}

.courses_workspace_item--picture {
  flex: 1 1 280px;
  max-width: 360px;
}

.courses_workspace_item--doc {
  width: 300px;
  max-width: 100%;
}

.courses_workspace_item--link {
  flex: 1 1 240px;
  max-width: 300px;
}

.courses_workspace_item--text {
  flex: 1 1 100%;
  max-width: 820px;
}

.courses_workspace_item--text-wide {
  max-width: 1100px;
}

.courses_workspace_item--calendar {
  max-width: 1100px;
}

.courses_media_card,
.courses_doc_card,
.courses_link_card,
.courses_calendar_card,
.courses_body .courses_text_card.msll_atricle_container {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(133, 148, 174, 0.4);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(69, 73, 84, 0.1);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.courses_media_card:hover,
.courses_doc_card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(189, 22, 43, 0.14);
}

/*
 * Видео-карточка: без overflow/transform на предке iframe —
 * в Chromium из‑за них плеер Yandex иногда остаётся серым до F5.
 */
.courses_media_card--video {
  overflow: visible;
  transition: box-shadow 0.2s ease;
}
.courses_media_card--video:hover {
  transform: none;
}

.courses_media_card_caption,
.courses_doc_card_caption {
  padding: 14px 16px 12px;
  text-align: left;
  color: #454954;
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
}

.courses_media_card_caption p,
.courses_media_card_caption h1,
.courses_media_card_caption h2,
.courses_media_card_caption h3,
.courses_doc_card_caption p,
.courses_doc_card_caption h1,
.courses_doc_card_caption h2,
.courses_doc_card_caption h3 {
  margin: 0;
  font-size: inherit;
  font-weight: 600;
  color: inherit;
  line-height: inherit;
}

.courses_media_card_frame {
  position: relative;
  width: auto;
  background: #dddae0;
  /* Не overflow:hidden — иначе Chromium иногда не рисует Yandex iframe */
  border-radius: 0 0 15px 15px;
}
.courses_media_card_frame_host {
  position: relative;
  display: block;
  max-width: 100%;
  background: #dddae0;
  border-radius: inherit;
}
.courses_media_card_iframe {
  display: block;
  border: 0;
  max-width: 100%;
}
.courses_video_fallback {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  box-sizing: border-box;
  background: rgba(221, 218, 224, 0.96);
  text-align: center;
}
.courses_video_fallback_text {
  margin: 0;
  color: #454954;
  font-family: 'Jost', sans-serif;
  font-size: 0.95rem;
  line-height: 1.35;
  max-width: 22rem;
}
.courses_video_fallback_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* Сцена видео + личные заметки (обычный режим и Element Fullscreen) */
.courses_video_stage {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #fff;
  border-radius: 0 0 15px 15px;
}
.courses_video_stage_frame {
  border-radius: 0;
  flex: 0 0 auto;
}
.courses_video_stage--fs {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 12px;
  gap: 12px;
  background: #1a1c22;
  border-radius: 0;
  flex-direction: row;
  align-items: stretch;
}
/* Свёрнутые заметки — полоска снизу, видео на весь экран */
.courses_video_stage--fs:has(.msll_course_video_notes--collapsed) {
  flex-direction: column;
}
.courses_video_stage--fs .courses_video_stage_frame {
  flex: 1 1 62%;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: stretch;
  background: #000;
  border-radius: 8px;
}
.courses_video_stage--fs:has(.msll_course_video_notes--collapsed) .courses_video_stage_frame {
  flex: 1 1 auto;
}
.courses_video_stage--fs .courses_media_card_frame_host,
.courses_video_stage--fs .courses_media_card_iframe {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
}
.courses_video_stage--fs .msll_course_video_notes {
  flex: 1 1 38%;
  min-width: 260px;
  max-width: 480px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
}

.msll_course_video_notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(133, 148, 174, 0.35);
  background: rgba(243, 243, 243, 0.85);
  box-sizing: border-box;
}
.msll_course_video_notes--collapsed {
  padding-top: 8px;
  padding-bottom: 8px;
  gap: 0;
}
/* В fullscreen свёрнутые заметки не отнимают половину экрана */
.courses_video_stage--fs .msll_course_video_notes--collapsed {
  flex: 0 0 auto;
  max-width: none;
  min-width: 0;
  align-self: stretch;
}
.msll_course_video_notes_toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.msll_course_video_notes_toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 4px 2px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}
.msll_course_video_notes_toggle:hover .msll_course_video_notes_title {
  color: #bd162b;
}
.msll_course_video_notes_toggle_chevron {
  display: inline-block;
  width: 0.9em;
  color: #8594ae;
  font-size: 0.9rem;
  line-height: 1;
}
.msll_course_video_notes_title {
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: #454954;
}
.msll_course_video_notes_badge {
  font-family: 'Jost', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  color: #8594ae;
  border: 1px solid rgba(133, 148, 174, 0.55);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}
/* Кнопки в одну строку и по центру блока */
.msll_course_video_notes_actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}
.msll_course_video_notes_btn {
  font-size: 0.85rem;
  padding: 6px 12px;
}
.msll_course_video_notes_btn--fs {
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.2;
  padding: 4px 10px;
  min-height: 0;
}
.msll_course_video_notes_btn--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  min-width: 2rem;
  box-sizing: border-box;
}
.msll_course_video_notes_icon {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
}
.msll_course_video_notes_btn--icon:disabled .msll_course_video_notes_icon {
  opacity: 0.45;
}
.msll_course_video_notes_textarea {
  width: 100%;
  min-height: 110px;
  box-sizing: border-box;
  resize: vertical;
  padding: 10px 12px;
  border: 1px solid #8594ae;
  border-radius: 8px;
  font-family: 'Jost', sans-serif;
  font-size: 0.95rem;
  line-height: 1.4;
  color: #454954;
  background: #fff;
}
.msll_course_video_notes--fs.msll_course_video_notes--expanded .msll_course_video_notes_textarea {
  flex: 1 1 auto;
  min-height: 180px;
  resize: none;
}
.msll_course_video_notes_textarea:focus {
  outline: 2px solid rgba(189, 22, 43, 0.35);
  border-color: #bd162b;
}
.msll_course_video_notes_status {
  min-height: 1.2em;
  font-family: 'Jost', sans-serif;
  font-size: 0.8rem;
  color: #8594ae;
}
.msll_course_video_notes_status--ok {
  color: #5a6a4a;
}
.msll_course_video_notes_status--error {
  color: #bd162b;
}

@media (max-width: 900px) {
  .courses_video_stage--fs {
    flex-direction: column;
  }
  .courses_video_stage--fs .courses_video_stage_frame {
    flex: 1 1 55%;
  }
  .courses_video_stage--fs .msll_course_video_notes {
    flex: 1 1 45%;
    max-width: none;
    min-width: 0;
  }
}

.courses_media_card_image_wrap {
  padding: 0 12px 12px;
}

.courses_media_card_image_wrap .msll_courses_images {
  display: block;
  width: 100%;
  border-radius: 10px;
}

.courses_doc_card,
.courses_link_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 180px;
  padding: 8px 16px 20px;
  text-align: center;
  box-sizing: border-box;
}

.courses_doc_card .msll_button {
  width: auto;
  min-width: 180px;
  max-width: 100%;
  margin: 8px 0 0;
}

.courses_link_card {
  padding: 22px 18px;
  text-align: left;
}

.courses_link_card a {
  color: #bd162b;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(189, 22, 43, 0.35);
}

.courses_link_card a:hover {
  color: #8594ae;
  border-bottom-color: #8594ae;
}

.courses_body .courses_text_card.msll_atricle_container {
  padding: 24px 28px;
  border-radius: 16px;
}

.courses_body .courses_text_card .msll_atricle_content {
  width: 100%;
  color: #454954;
  line-height: 1.55;
}

@media (max-width: 991px) {
  .courses_workspace {
    padding: 16px 12px 40px;
    gap: 18px;
  }

  .courses_workspace_row {
    gap: 18px;
  }

  .courses_workspace_item--picture,
  .courses_workspace_item--link,
  .courses_workspace_item--text,
  .courses_workspace_item--calendar {
    flex: 1 1 100%;
    max-width: 100%;
  }
  }
}

.courses_intro_badge_sample {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  width: 26px;
  min-height: 72px;
  padding: 8px 2px;
  background: #bd162b;
  color: #ffffff;
  border-radius: 0 8px 8px 0;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 14px;
}

.courses_intro_badge_sample_text {
  font-family: 'Jost';
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.4px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  line-height: 1.1;
}

@keyframes courses-badge-glow {
  0%, 100% {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 14px, 0 0 0 0 rgba(189, 22, 43, 0.45);
  }
  50% {
    box-shadow: rgba(0, 0, 0, 0.28) 0px 6px 18px, 0 0 0 10px rgba(189, 22, 43, 0.12);
  }
}

@keyframes courses-hint-nudge-left {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-10px); }
}

@keyframes courses-hint-nudge-up {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Мобильная кнопка курсов в шапке: указатель стрелкой вверх */
html.courses-intro-hint .mobile_header_button_courses {
  position: relative;
  overflow: visible;
  z-index: 6;
  animation: courses-badge-glow 1.4s ease-in-out infinite;
}

html.courses-intro-hint .mobile_header_controls {
  overflow: visible;
  z-index: 6;
}

html.courses-intro-hint .mobile_header_button_courses::before,
html.courses-intro-hint .mobile_header_button_courses::after {
  position: absolute;
  pointer-events: none;
}

html.courses-intro-hint .mobile_header_button_courses::before {
  content: "";
  top: calc(100% + 10px);
  left: 50%;
  width: 28px;
  height: 36px;
  margin-left: -14px;
  background: #bd162b;
  /* Стрелка вверх — к кнопке курсов в шапке */
  clip-path: polygon(32% 100%, 68% 100%, 68% 42%, 100% 42%, 50% 0, 0 42%, 32% 42%);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.28));
  animation: courses-hint-nudge-up 1s ease-in-out infinite;
}

html.courses-intro-hint .mobile_header_button_courses::after {
  content: "Нажмите сюда";
  top: calc(100% + 52px);
  left: 50%;
  transform: translateX(-80%);
  white-space: nowrap;
  font-family: 'Jost';
  font-size: 1.1rem;
  font-weight: 700;
  color: #bd162b;
  background: rgba(255, 249, 249, 0.94);
  border: 1px solid #bd162b;
  border-radius: 8px;
  padding: 6px 10px;
  box-shadow: rgba(0, 0, 0, 0.12) 0 2px 8px;
}

@media (max-width: 991px) {
  .msll_body.msll_courses_body.courses_body {
    margin-left: 0;
    width: 100%;
  }

  .courses_intro {
    justify-content: center;
    padding: 88px 16px 24px 16px;
  }

  .courses_intro--hint {
    padding-left: 16px;
  }

  html.left-sidenav-courses-open .courses_intro {
    margin-left: 0;
    padding-left: 16px;
  }

  .courses_intro_card {
    max-width: 100%;
    padding: 28px 24px;
  }

  .courses_intro_title {
    font-size: 2.2rem;
  }

  .courses_intro_text {
    font-size: 2.2rem;
    line-height: 1.35;
  }
}

.documents_sidenav .documents_panel {
  margin: 15px 10px 90pt 10px;
  padding: 20px;
  border: 4px solid #8594ae;
  border-radius: 8px;
  background: rgba(221, 218, 224, 0.92);
  text-align: left;
}

.documents_panel_title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #bd162b;
  margin-bottom: 15px;
}

.documents_label {
  font-size: 1rem;
  margin-bottom: 6px;
}

.documents_filter_input,
.documents_field_input,
.documents_textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #8594ae;
  border-radius: 6px;
  background: #ffffff;
  color: #000000;
  font-family: 'Jost';
  font-size: 1rem;
}

.documents_filter_input {
  margin-bottom: 12px;
}

.documents_textarea {
  min-height: 90px;
  resize: vertical;
}

.documents_field_input--invalid,
.documents_textarea--invalid {
  border-color: #bd162b;
  box-shadow: 0 0 0 2px rgba(189, 22, 43, 0.18);
}

.documents_cache_manual_input {
  margin-top: 8px;
}

/* п. 27: жёлтый фон только у выпадающего списка вариантов из кэша */
.documents_field_input--cache-multiple {
  background-color: #fff3cd;
}

.documents_template_list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.documents_template_card {
  border: 3px solid #8594ae;
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.documents_template_card:hover {
  background: #f2f4f7;
}

.documents_template_card--active {
  background: #bd162b;
  border-color: #dddae0;
  color: #ffffff;
}

.documents_template_name {
  font-size: 1rem;
  font-weight: 700;
}

.documents_template_category {
  margin-top: 4px;
  font-size: 0.9rem;
  color: #8594ae;
}

.documents_template_card--active .documents_template_category {
  color: #ffffff;
}

.documents_template_description {
  margin-top: 6px;
  font-size: 0.92rem;
}

.documents_body {
  padding: 15px 10px 40px 10px;
  box-sizing: border-box;
  width: calc(100% - 420px);
  max-width: 100%;
  overflow: visible;
}

/* п. 13: реестр оформленных договоров на всё рабочее пространство без боковой панели шаблонов */
.documents_body.documents_body--registry-only {
  margin-left: var(--main-nav-sidenav-collapsed-offset, 36px);
  width: calc(100% - var(--main-nav-sidenav-collapsed-offset, 36px));
  max-width: 100%;
}

/* Режим шаблонов: отступ только под свёрнутую нить; открытая панель — оверлей без ресайза */
.documents_body.documents_body--sidenav-open,
.documents_body.documents_body--sidenav-collapsed {
  margin-left: max(
    var(--main-nav-sidenav-collapsed-offset, 0px),
    calc(var(--documents-sidenav-strip-width, 10px) + var(--documents-sidenav-badge-width, 26px) + 10px)
  );
  width: calc(100% - max(
    var(--main-nav-sidenav-collapsed-offset, 0px),
    calc(var(--documents-sidenav-strip-width, 10px) + var(--documents-sidenav-badge-width, 26px) + 10px)
  ));
}

.documents_content_card {
  width: 100%;
  margin: 0 auto 30px auto;
  padding: 16px 12px 24px 12px;
  border: 4px solid #8594ae;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
  box-sizing: border-box;
}

/* Карточка с предпросмотром: высота по содержимому, прокрутка — у всей страницы */
.documents_content_card--preview {
  overflow: visible;
}

.documents_header_row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}

.documents_title {
  margin: 0 0 10px 0;
  color: #bd162b;
  font-size: 2rem;
  text-align: left;
}

.documents_subtitle {
  text-align: left;
  font-size: 1rem;
}

.documents_chip {
  padding: 8px 14px;
  border-radius: 999px;
  background: #dddae0;
  color: #000000;
  font-weight: 600;
  white-space: nowrap;
}

.documents_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.documents_form_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 18px 24px;
}

.documents_form_field {
  text-align: left;
}

.documents_field_hint {
  margin-top: 4px;
  font-size: 0.85rem;
  color: #8594ae;
}

.documents_field_error {
  margin-top: 6px;
  font-size: 0.85rem;
  color: #bd162b;
  font-weight: 600;
}

.documents_status {
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  text-align: left;
}

.documents_status--success {
  background: rgba(133, 148, 174, 0.2);
  color: #30435e;
  border: 2px solid #8594ae;
}

.documents_status--info {
  background: rgba(221, 218, 224, 0.75);
  color: #000000;
  border: 2px solid #8594ae;
}

.documents_status--error {
  background: rgba(189, 22, 43, 0.12);
  color: #7b1020;
  border: 2px solid #bd162b;
}

.documents_result_box {
  margin-top: 24px;
  padding: 18px;
  border: 2px dashed #8594ae;
  border-radius: 8px;
  background: rgba(221, 218, 224, 0.4);
  text-align: left;
}

.documents_result_title {
  font-weight: 700;
  margin-bottom: 8px;
}

.documents_result_link {
  color: #bd162b;
  font-weight: 700;
}

.documents_empty_state {
  padding: 20px 10px;
  text-align: center;
  color: #555555;
}

/* Реестр оформленных договоров (п. 10–12) */
.documents_registry_card {
  margin-bottom: 20px;
}

.documents_body--registry-only .documents_registry_card {
  margin-bottom: 0;
}

.documents_registry_header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.documents_registry_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.documents_registry_filter {
  min-width: 220px;
}

.documents_registry_table_wrap {
  overflow-x: auto;
}

.documents_registry_table th,
.documents_registry_table td {
  font-size: 0.85rem;
  vertical-align: top;
}

.documents_registry_cell {
  width: 100%;
  min-width: 72px;
  box-sizing: border-box;
  border: 1px solid #8594ae;
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 0.85rem;
}

.documents_registry_cell--readonly {
  background: #f0f2f5;
  cursor: default;
}

.documents_registry_cell--readonly:focus {
  outline: none;
}

.documents_registry_th_actions,
.documents_registry_row_actions {
  width: 188px;
  min-width: 188px;
  max-width: 188px;
  box-sizing: border-box;
}

.documents_registry_th_actions {
  white-space: nowrap;
  vertical-align: middle;
}

.documents_registry_th_actions_label {
  display: inline-block;
  margin-right: 6px;
}

.documents_registry_btn--header {
  margin-top: 0;
}

.documents_registry_row_actions {
  white-space: nowrap;
  vertical-align: middle;
  position: static;
}

/* Фиксированный слот кнопок: «Редактировать» и пара «Сохранить»/«Отменить» одной ширины */
.documents_registry_actions_slot {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 176px;
  min-height: 28px;
}

/* Не использовать msll_button_in_table в реестре: у того position:absolute на всю ячейку */
.documents_registry_table .documents_registry_btn {
  position: static;
  display: inline-block;
  width: auto;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 4px 8px;
  vertical-align: middle;
  box-sizing: border-box;
}

.documents_registry_table .documents_registry_btn--edit {
  flex: 1 1 auto;
  width: 100%;
}

.documents_registry_table .documents_registry_btn--save,
.documents_registry_table .documents_registry_btn--cancel {
  flex: 1 1 0;
  min-width: 0;
}

.documents_form_field--full {
  grid-column: 1 / -1;
}

.documents_table_editor {
  width: 100%;
  margin-top: 4px;
}

.documents_table_field_grid {
  width: 100%;
  margin-bottom: 8px;
  table-layout: auto;
}

.documents_table_field_grid td,
.documents_table_field_grid th {
  position: static;
  vertical-align: middle;
  padding: 6px 8px;
}

.documents_table_actions_cell {
  width: 90px;
  text-align: center;
  white-space: nowrap;
}

.documents_table_row_delete {
  position: static;
  width: auto;
  min-width: 72px;
  height: auto;
}

.documents_table_add_row {
  margin-top: 4px;
}

/* UI п. 6: предпросмотр (80% ширины; без внутренней прокрутки — скролл у экранной формы) */
.documents_preview_section {
  width: 80%;
  max-width: 80%;
  margin: 0 auto 24px auto;
  overflow: visible;
  text-align: left;
  box-sizing: border-box;
}

.documents_preview_title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #bd162b;
  margin: 0 0 10px 0;
}

.documents_preview_box {
  width: 100%;
  height: auto;
  max-height: none;
  overflow: visible;
  padding: 16px 12px;
  border: 3px solid #8594ae;
  border-radius: 8px;
  background: #e9ecef;
  box-sizing: border-box;
}

/* Область рендера docx-preview: страницы как в Word, на всю ширину контейнера */
.documents_preview_box--rendered {
  text-align: left;
}

.documents_preview_docx_host {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  overflow: visible;
  text-align: left;
  --documents-preview-scale: 1.6;
  box-sizing: border-box;
}

.documents_preview_docx_host .docx-wrapper,
.documents_preview_docx_host .docx-preview-render-wrapper,
.documents_preview_docx_host [class$="-wrapper"] {
  background: transparent;
  padding: 0;
  width: calc(100% / var(--documents-preview-scale, 1.6)) !important;
  max-width: 100% !important;
  transform: scale(var(--documents-preview-scale, 1.6)) !important;
  transform-origin: top left !important;
}

.documents_preview_docx_host .docx-wrapper > section.docx,
.documents_preview_docx_host .docx-preview-render-wrapper > section.docx-preview-render,
.documents_preview_docx_host [class$="-wrapper"] > section[class*="docx"] {
  width: 100% !important;
  max-width: 100% !important;
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  margin: 0 auto 24px auto;
  padding: 40px 48px;
  box-sizing: border-box;
}

.documents_preview_docx_host .docx-wrapper > section.docx:last-child,
.documents_preview_docx_host .docx-preview-render-wrapper > section.docx-preview-render:last-child,
.documents_preview_docx_host [class$="-wrapper"] > section[class*="docx"]:last-child {
  margin-bottom: 0;
}

.documents_preview_placeholder {
  margin: 0;
  min-height: 180px;
  padding: 18px 20px;
  box-sizing: border-box;
  border: 2px dashed #8594ae;
  border-radius: 8px;
  background: rgba(221, 218, 224, 0.35);
  color: #555555;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* Предупреждение «Внимание!!!» — z-index задан выше в блоке msll-modal-card */

/* UI п. 7–8: модальная панель редактирования */
.documents_edit_modal.modal {
  display: block;
  z-index: 2000;
  padding: 24px 0;
  /* Один скролл на всю форму (шапка + поля + кнопки), не на modal-body */
  overflow-x: hidden;
  overflow-y: auto;
}

.documents_edit_modal_content.modal-content-60 {
  display: flex;
  flex-direction: column;
  height: auto;
  max-height: none;
  margin-top: 0;
  /* Снизу: padding оверлея 24px + margin 48px (удвоен относительно прежних 24px) */
  margin-bottom: 48px;
  overflow: visible;
}

.documents_edit_modal_subtitle {
  margin-top: 6px;
  font-size: 0.95rem;
  font-weight: 400;
  color: #555555;
}

.documents_edit_modal_body {
  overflow: visible;
  max-height: none;
  flex: 0 0 auto;
  padding: 16px 24px;
}

.documents_form_grid--modal {
  margin-top: 0;
}

.documents_edit_modal_footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px 24px 20px;
}

@media (max-width: 991px) {
  .documents_body {
    margin-left: 0;
    width: 100%;
    padding: 15px 8px 40px 8px;
  }

  .documents_content_card {
    width: 100%;
    padding: 18px 8px;
  }

  .documents_preview_section {
    width: 80%;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  .documents_header_row {
    flex-direction: column;
  }

  .documents_form_grid {
    grid-template-columns: 1fr;
  }

  .documents_panel {
    margin-top: 15px;
    margin-bottom: 90pt;
  }

  .documents_edit_modal.modal {
    padding: 16px 0;
  }

  .documents_edit_modal_content.modal-content-60 {
    width: 95% !important;
    max-height: none;
    margin-bottom: 32px;
  }

  .documents_edit_modal_body {
    max-height: none;
  }

}

.msll_filter_desktop{
  width: 100%;
  padding: 10px;
}


.msll_filter_mobile{
  width: 90%;
  height: 120px;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 2%;
  padding-bottom: 2%;

  margin-left: 5%;
  margin-right: 5%;
  
  border-radius: 35px;
  font-size: 50px;
  border-style: none;
}

/* Поле пароля: иконка показать/скрыть внутри правого края input */
.msll_password_wrap {
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.msll_password_wrap + .msll_password_wrap {
  margin-top: 10px;
}
.msll_password_wrap .msll_filter,
.msll_password_wrap .msll_filter_desktop {
  padding-right: 44px;
  box-sizing: border-box;
}
.msll_password_toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: #8594ae;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.msll_password_toggle:hover,
.msll_password_toggle:focus,
.msll_password_toggle[aria-pressed="true"] {
  color: #bd162b;
  outline: none;
}
.msll_password_toggle svg,
.msll_password_toggle_icon {
  width: 22px;
  height: 22px;
  display: block;
  pointer-events: none;
}
/* В Edge не показывать встроенный «глаз» — иначе две кнопки рядом */
.msll_password_wrap input::-ms-reveal,
.msll_password_wrap input::-ms-clear {
  display: none;
}

/* На экране входа мобильная вёрстка: обёртка занимает ту же ширину, что и input */
.form_login_mobile .msll_password_wrap {
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
}
.form_login_mobile .msll_password_wrap .msll_filter_mobile {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-right: 96px;
  box-sizing: border-box;
}
.form_login_mobile .msll_password_toggle {
  width: 80px;
  height: 80px;
  right: 12px;
}
.form_login_mobile .msll_password_toggle svg,
.form_login_mobile .msll_password_toggle_icon {
  width: 48px;
  height: 48px;
}

.msll_button_desktop{
  display: inline-block;
  padding: 15px;
  background: #bd162b;
  border-radius: 5px;
  border-color: var(--msll-control-border-color, #8594ae);
  border-width: 5px;
  border-style: outset;
  width: 300px;
  margin: 5px; 
  color: #fff;
  font-weight: bold;
  -webkit-appearance: none;
  appearance: none;
}
.msll_button_mobile{
  display: inline-block;
  background: #bd162b;
  border-radius: 15px;
  border-color: var(--msll-control-border-color, #8594ae);
  border-width: 5px;
  border-style: outset;
  -webkit-appearance: none;
  appearance: none;
  height: 120px;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 15%;
  color: #fff;
  font-weight: bold;
  font-size: 50px;
}

p.error_mobile {
    background: red;
    color: #000;
    
    font-size: 50px;
}

p.success {
    color: #1b5e20;
    font-weight: bold;
}

p.success_mobile {
    color: #1b5e20;
    font-weight: bold;
    font-size: clamp(4rem, 11vw, 6rem);
    line-height: 1.35;
    padding-left: 4%;
    padding-right: 4%;
    text-align: center;
}

.login_forgot_row_desktop,
.login_forgot_row_mobile {
    margin: 0.5rem 0 0.75rem;
    text-align: right;
}

.login_forgot_row_mobile {
    text-align: center;
}

a.login_forgot_link {
    color: #8594ae;
    font-size: 1rem;
    text-decoration: underline;
}

a.login_forgot_link:hover {
    color: #bd162b;
}

.login_aux_links_desktop,
.login_aux_links_mobile {
    margin: 1rem 0 0;
    text-align: center;
    font-size: 1rem;
}

.login_aux_links_desktop a,
.login_aux_links_mobile a {
    color: #8594ae;
    text-decoration: underline;
}

.login_aux_links_desktop a:hover,
.login_aux_links_mobile a:hover {
    color: #bd162b;
}

.login_forgot_row_mobile a.login_forgot_link {
    font-size: clamp(4rem, 11vw, 6rem);
    display: inline-block;
    padding: 1.7rem 1.5rem;
    min-height: 104px;
    line-height: 1.3;
    box-sizing: border-box;
}

.login_aux_links_mobile {
    font-size: clamp(4rem, 11vw, 6rem);
    line-height: 1.35;
}

.login_aux_links_mobile a {
    font-size: clamp(4rem, 11vw, 6rem);
    display: inline-block;
    padding: 1.5rem 1rem;
    min-height: 104px;
    line-height: 1.3;
    box-sizing: border-box;
}

/* Раздел «Отчетность» — на всю ширину рабочей области */
.reports_body {
    margin-left: var(--main-nav-sidenav-collapsed-offset, 0px);
    width: calc(100% - var(--main-nav-sidenav-collapsed-offset, 0px));
    max-width: 100%;
    padding: 15px 10px 40px 10px;
    box-sizing: border-box;
    overflow: visible;
}

.reports_content_card {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 30px auto;
    padding: 16px 12px 24px 12px;
    border: 4px solid #8594ae;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

.reports_header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.reports_title {
    margin: 0;
    color: #2f3542;
    font-size: 1.5rem;
    font-weight: 600;
}

.reports_selector_row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.reports_selector_label {
    color: #4a5568;
    font-size: 0.95rem;
}

.reports_selector {
    min-width: 280px;
}

.reports_selected_name {
    margin: 0 0 0.5rem;
    color: #2f3542;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.35;
}

.reports_description {
    margin: 0 0 1rem;
    color: #5a6475;
    font-size: 0.95rem;
    line-height: 1.45;
}

.reports_table_wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    box-sizing: border-box;
}

table.msll_table.reports_table {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    table-layout: fixed;
}

table.msll_table.reports_table th,
table.msll_table.reports_table td {
    padding: 3px 2px;
    border-width: 0 2px 2px 0;
}

.reports_table th,
.reports_table td {
    vertical-align: top;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.reports_th_sortable {
    cursor: pointer;
    user-select: none;
}

table.msll_table.reports_table th.reports_th_sortable:hover {
    background: #f4f6f8;
    color: #1a1a1a;
}

/* Фиксированная копия шапки таблицы: показывается поверх контента, когда исходный thead уходит под Header. */
.reports_sticky_clone {
    position: fixed;
    z-index: 25;
    overflow: hidden;
    pointer-events: auto;
}

.reports_sticky_clone table.msll_table.reports_table {
    margin-left: 0;
    margin-right: 0;
}

/* Важно: при показе/скрытии клона не должны "прыгать" цвета ячеек с полями поиска. */
.reports_sticky_clone tr.reports_filter_row > th {
    background: #fafbfc !important;
    color: #1f2937 !important;
}

.reports_sticky_clone tr:first-child > th {
    background: #8594ae !important;
    color: #ffffff !important;
}

/* Пока фиксированная копия видна, исходный thead скрываем, но сохраняем его высоту в потоке таблицы. */
table.msll_table.reports_table.reports_table--header-hidden thead {
    visibility: hidden;
}

/* Сохраняем фирменную контрастную шапку, иначе белый текст заголовков пропадает на светлом фоне. */
table.msll_table.reports_table.reports_table--sticky-header thead tr:first-child th {
    background: #8594ae;
    color: #ffffff;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.35);
}

/* Строка фильтров остаётся частью общей липкой шапки. */
table.msll_table.reports_table.reports_table--sticky-header thead tr.reports_filter_row th {
    position: static;
    background: #fafbfc;
    color: #1f2937;
}

.reports_th_label {
    margin-right: 0.25rem;
}

.reports_th_sort {
    color: #bd162b;
    font-size: 0.8rem;
}

.reports_filter_row th {
    background: #fafbfc;
    padding: 1px;
    vertical-align: middle;
    border-width: 0 1px 1px 0;
}

table.msll_table.reports_table tr.reports_filter_row > th {
    padding: 1px;
    border-width: 0 1px 1px 0;
}

table.msll_table.reports_table input.reports_filter_input.msll_filter,
table.msll_table.reports_table select.reports_filter_input.msll_filter {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 2px 3px;
    font-size: 0.75rem;
    line-height: 1.15;
    height: 26px;
    min-height: 26px;
    vertical-align: middle;
}

/* Select в строке фильтров: убрать нативную «лишнюю» высоту */
table.msll_table.reports_table select.reports_filter_input.msll_filter {
    appearance: auto;
}

/* Обёртка поля фильтра: подсказка появляется при фокусе в input */
.reports_filter_hint_wrap {
    position: relative;
    display: block;
    width: 100%;
}

.reports_filter_hint {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 4px;
    z-index: 30;
    width: max-content;
    max-width: 280px;
    padding: 6px 8px;
    border-radius: 6px;
    background: #2f3b52;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.25;
    text-align: left;
    white-space: normal;
    pointer-events: none;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 12px;
}

.reports_filter_hint_wrap:focus-within .reports_filter_hint {
    visibility: visible;
    opacity: 1;
}

.reports_empty_cell {
    text-align: center;
    color: #6b7280;
    padding: 1.25rem;
}

.reports_actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.reports_pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-top: 1rem;
    padding: 0.75rem 0.25rem 0.25rem;
    border-top: 1px solid #e2e8f0;
}

.reports_pagination_info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    color: #4a5568;
    font-size: 0.9rem;
}

.reports_pagination_summary {
    white-space: nowrap;
}

.reports_pagination_size_label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #4a5568;
    font-size: 0.9rem;
}

.reports_pagination_page_size {
    min-width: 72px;
}

.reports_pagination_controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.reports_pagination_pages {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.reports_pagination_page {
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.45rem;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    background: #fff;
    color: #2f3542;
    font-size: 0.85rem;
    cursor: pointer;
}

.reports_pagination_page:hover:not(:disabled) {
    border-color: #8594ae;
    background: #f8fafc;
}

.reports_pagination_page_active,
.reports_pagination_page:disabled.reports_pagination_page_active {
    border-color: #bd162b;
    background: #bd162b;
    color: #fff;
    cursor: default;
}

.reports_pagination_ellipsis {
    min-width: 1.25rem;
    text-align: center;
    color: #6b7280;
    font-size: 0.9rem;
}

.reports_pagination_nav:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.reports_hint {
    margin-top: 1rem;
    color: #6b7280;
    font-size: 0.95rem;
}

/* --- Отчёт «Результаты упражнений (TEST)»: процентные полосы + drill-down --- */
.test_report {
    margin-top: 0.5rem;
}

.test_report_nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: #8594ae;
}

.test_report_nav_sep {
    color: #8594ae;
}

.test_report_nav_link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: #8594ae;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.test_report_nav_link--current,
.test_report_nav_link:disabled {
    color: #1a1a1a;
    text-decoration: none;
    cursor: default;
    font-weight: 600;
}

.test_report_filters {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
    margin-bottom: 1.25rem;
}

.test_report_filter_field {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    width: auto;
    max-width: 100%;
}

.test_report_filter_label {
    flex: 0 0 4.5rem;
    font-size: 0.9rem;
    color: #4b5563;
    text-align: left;
}

.test_report_select {
    width: 320px;
    max-width: calc(100vw - 8rem);
}

.test_report_hint {
    color: #6b7280;
    font-size: 0.95rem;
    margin: 0.5rem 0 0 0;
}

.test_report_questions_title {
    margin: 0 0 0.75rem 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1a1a1a;
}

.test_report_questions {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.test_report_question_card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    width: 100%;
    text-align: left;
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px solid #8594ae;
    border-style: outset;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.test_report_question_card:hover {
    background: #f3f3f3;
}

.test_report_question_kind {
    font-size: 0.8rem;
    color: #8594ae;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.test_report_question_text {
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.35;
}

.test_report_question_meta {
    font-size: 0.85rem;
    color: #6b7280;
}

.test_report_back_btn {
    margin-bottom: 1rem;
}

.test_report_poll {
    max-width: 720px;
}

.test_report_poll_course {
    color: #bd162b;
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
}

.test_report_poll_question {
    font-weight: 700;
    font-size: 1.15rem;
    color: #1a1a1a;
    line-height: 1.35;
    margin-bottom: 0.35rem;
}

.test_report_poll_sub {
    color: #8594ae;
    font-size: 0.9rem;
    margin-bottom: 1.1rem;
}

.test_report_poll_options {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.test_report_poll_option {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 0.35rem 0.25rem;
    cursor: pointer;
    font: inherit;
    color: inherit;
    border-radius: 4px;
}

.test_report_poll_option:hover {
    background: rgba(133, 148, 174, 0.08);
}

.test_report_poll_option_row {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.test_report_poll_percent {
    font-weight: 700;
    min-width: 2.6rem;
    color: #1a1a1a;
}

.test_report_poll_option_text {
    flex: 1 1 auto;
    color: #1a1a1a;
    line-height: 1.3;
}

.test_report_poll_check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: #4a90d9;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
}

.test_report_poll_bar_track {
    margin-top: 0.35rem;
    height: 6px;
    background: transparent;
}

.test_report_poll_bar {
    height: 6px;
    background: #4a90d9;
    border-radius: 3px;
    min-width: 4px;
    transition: width 0.25s ease;
}

.test_report_poll_option_hint {
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: #8594ae;
}

.test_report_voters_head {
    margin-bottom: 1rem;
    max-width: 720px;
}

.test_report_voters_option {
    margin-top: 0.5rem;
    color: #4b5563;
    font-size: 0.95rem;
}

.test_report_voters_count {
    color: #8594ae;
    margin-left: 0.25rem;
}

.test_report_voters_table_wrap {
    overflow-x: auto;
}

.test_report_result_badge {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border-radius: 3px;
    font-size: 0.85rem;
    font-weight: 600;
}

.test_report_result_badge--ok {
    background: #e6f4ea;
    color: #137333;
}

.test_report_result_badge--fail {
    background: #fce8e6;
    color: #c5221f;
}

.test_report_result_badge--neutral {
    background: #f3f0e8;
    color: #8a6d3b;
}

@media (max-width: 991px) {
  .test_report_select {
    width: min(320px, calc(100vw - 7rem));
  }
}

.reports_permissions_block {
    margin-top: 12px;
}

.permissions_hint_text {
    color: #6b7280;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

@media (max-width: 991px) {
  .reports_body {
    padding: 15px 8px 40px 8px;
  }

  .reports_content_card {
    padding: 18px 8px;
  }

  .reports_pagination {
    flex-direction: column;
    align-items: stretch;
  }

  .reports_pagination_info,
  .reports_pagination_controls {
    width: 100%;
    justify-content: space-between;
  }
}

/* --- B2B edu invoices: публичная форма get_invoice.php --- */
.edu-get-invoice-page {
  background-size: cover;
}
/* Контент между sticky-шапкой и fixed-подвалом */
.edu-get-invoice-main {
  min-height: calc(100vh - 50px - 48px);
  box-sizing: border-box;
  padding-bottom: 64px;
}
.edu-get-invoice-wrap {
  max-width: 1100px;
  margin: 28px auto 0;
  padding: 0 16px 24px;
  text-align: left;
}
/* Логотип в шапке публичной формы (высота родителя = .my_header) */
.edu-get-invoice-logo-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 100%;
  max-height: 50px;
  flex-shrink: 1;
  min-width: 0;
}
.edu-get-invoice-logo-wrap .logo_image {
  height: auto;
  max-height: 50px;
  width: auto;
  max-width: min(300px, 55vw);
  object-fit: contain;
  display: block;
}
/* Герой заголовка формы */
.edu-get-invoice-hero {
  text-align: center;
  margin: 8px 0 28px;
  padding: 8px 12px 0;
}
.edu-get-invoice-title {
  color: #bd162b;
  margin: 0 0 8px;
  text-align: center;
  font-size: clamp(1.75rem, 3.2vw, 2.35rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.edu-get-invoice-subtitle {
  color: #3a3f4b;
  margin: 0 auto;
  max-width: 36rem;
  text-align: center;
  font-size: 1.08rem;
  line-height: 1.45;
  font-weight: 400;
}
.edu-get-invoice-hero-rule {
  width: 72px;
  height: 3px;
  margin: 18px auto 0;
  background: linear-gradient(90deg, transparent, #bd162b 20%, #bd162b 80%, transparent);
  border-radius: 2px;
}
.edu-card {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #d5d9e2;
  border-radius: 10px;
  padding: 20px 22px;
  margin-bottom: 18px;
  box-shadow: 0 8px 24px rgba(40, 44, 56, 0.06);
}
.edu-card-title {
  margin: 0 0 14px;
  color: #2a2e38;
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.edu-inline-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.edu-inline-row .documents_filter_input,
.edu-inline-row .msll_filter {
  flex: 1;
}
/* Индикатор статуса ИНН / промокода */
.edu-status-indicator {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #c5c9d3;
  background: #e8eaef;
  box-sizing: border-box;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.edu-status-indicator--idle {
  background: #e8eaef;
  border-color: #c5c9d3;
  box-shadow: none;
}
.edu-status-indicator--pending {
  background: #fff3bf;
  border-color: #f0c000;
  animation: edu-status-pulse 1s ease-in-out infinite;
}
.edu-status-indicator--ok {
  background: #2f8f46;
  border-color: #1d5c2c;
  box-shadow: 0 0 0 3px rgba(47, 143, 70, 0.28);
}
.edu-status-indicator--error {
  background: #bd162b;
  border-color: #7a0f1c;
  box-shadow: none;
}
@keyframes edu-status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
/* Таблица слушателей */
.edu-listeners-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin-bottom: 12px;
}
table.msll_table.edu-listeners-table {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  table-layout: auto;
}
table.msll_table.edu-listeners-table th,
table.msll_table.edu-listeners-table td {
  vertical-align: middle;
  padding: 4px;
}
table.msll_table.edu-listeners-table th:first-child,
table.msll_table.edu-listeners-table td:first-child {
  width: 36px;
  white-space: nowrap;
}
table.msll_table.edu-listeners-table th:last-child,
table.msll_table.edu-listeners-table td:last-child {
  width: 44px;
  white-space: nowrap;
}
.edu-table-input {
  width: 100%;
  min-width: 72px;
  box-sizing: border-box;
  margin: 0;
}
.edu-hint {
  color: #555;
  font-size: 0.95rem;
  margin: 0 0 8px;
}
.edu-total {
  font-size: 1.15rem;
  margin: 14px 0 4px;
  color: #2a2e38;
}
/* Кнопка «Создать счёт»: крупнее middle, по центру формы */
.edu-submit-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  text-align: center;
}
.edu-submit-btn {
  width: 280px;
  height: 58px;
  font-size: 1.15rem;
  margin: 0;
}
.edu-submit-error {
  width: 100%;
  max-width: none;
  margin-top: 12px;
  text-align: left;
  box-sizing: border-box;
}
/* Красная рамка у полей, не прошедших валидацию */
.edu-field--invalid,
input.edu-field--invalid,
select.edu-field--invalid {
  border-color: #bd162b !important;
  box-shadow: 0 0 0 2px rgba(189, 22, 43, 0.22);
  outline: none;
}
/* Финальный экран «Счёт готов» */
.edu-success-card {
  text-align: center;
  padding: 36px 28px 32px;
  border-color: rgba(189, 22, 43, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(252, 246, 247, 0.98) 100%);
}
.edu-success-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: #bd162b;
  color: #fff;
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 8px 20px rgba(189, 22, 43, 0.28);
}
.edu-success-title {
  color: #bd162b;
  font-size: 1.45rem;
  margin-bottom: 10px;
}
.edu-success-text {
  margin: 0 auto 22px;
  max-width: 34rem;
  color: #3a3f4b;
  font-size: 1.05rem;
  line-height: 1.5;
}
.edu-success-actions {
  display: flex;
  justify-content: center;
}
.edu-download-btn {
  width: 280px;
  height: 58px;
  font-size: 1.15rem;
  margin: 0;
}
/* Оверлей ожидания (генерация / скачивание) */
.edu-busy-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: rgba(28, 30, 36, 0.48);
  backdrop-filter: blur(2px);
}
.edu-busy-panel {
  width: min(380px, 100%);
  padding: 28px 24px 24px;
  border-radius: 12px;
  background: #fff;
  text-align: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}
.edu-busy-spinner {
  width: 44px;
  height: 44px;
  margin: 0 auto 16px;
  border-radius: 50%;
  border: 3px solid #e8eaef;
  border-top-color: #bd162b;
  animation: edu-busy-spin 0.85s linear infinite;
}
.edu-busy-title {
  margin: 0 0 6px;
  color: #2a2e38;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.4;
}
.edu-busy-hint {
  margin: 0;
  color: #7a808c;
  font-size: 0.92rem;
}
@keyframes edu-busy-spin {
  to { transform: rotate(360deg); }
}
@media (max-width: 991px) {
  .edu-get-invoice-main {
    min-height: calc(100vh - 150px - 48px);
  }
  .edu-get-invoice-logo-wrap {
    max-height: 150px;
  }
  .edu-get-invoice-logo-wrap .logo_image {
    max-height: 120px;
    max-width: min(280px, 75vw);
  }
  .edu-submit-btn,
  .edu-download-btn {
    width: min(280px, 100%);
  }
  .edu-success-card {
    padding: 28px 18px 24px;
  }
}
.edu-alert {
  padding: 12px 14px;
  border-radius: 6px;
  margin-bottom: 14px;
}
.edu-alert--error {
  background: #fde8ea;
  border: 1px solid #bd162b;
  color: #7a0f1c;
}
.edu-alert--ok {
  background: #e8f7ec;
  border: 1px solid #2f8f46;
  color: #1d5c2c;
}
.edu-download-link {
  display: inline-block;
  margin-left: 10px;
  font-weight: 600;
  color: #bd162b;
}
.edu-registry-page {
  max-width: 1200px;
  margin: 20px auto 60px;
  margin-left: max(16px, var(--main-nav-sidenav-collapsed-offset, 0px));
  padding: 0 16px;
  text-align: left;
  box-sizing: border-box;
}
/* Рабочая область реестра счетов: по центру, на всю доступную ширину */
.edu-registry-body {
  margin-left: var(--main-nav-sidenav-collapsed-offset, 0px);
  width: calc(100% - var(--main-nav-sidenav-collapsed-offset, 0px));
  max-width: 100%;
  padding: 15px 16px 40px 16px;
  box-sizing: border-box;
  overflow: visible;
}
.edu-registry-card {
  width: 100%;
  max-width: 100%;
  margin: 0 auto 30px auto;
  box-sizing: border-box;
}
.edu-registry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}
/* Единый размер кнопок на странице (как msll_middle_button) */
.edu-registry-body .msll_middle_button,
.edu-modal .msll_middle_button,
.edu-details-modal .msll_middle_button,
.edu-confirm-modal .msll_middle_button,
.edu-form-modal .msll_middle_button,
.edu-registry-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 180px;
  height: 42px;
  padding: 0 16px;
  margin: 0;
  text-align: center;
  text-decoration: none;
  line-height: 1.2;
  cursor: pointer;
  font-family: 'Jost', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
}
a.edu-registry-link-button {
  color: #fff;
  background: #bd162b;
  border-radius: 5px;
  border: 5px outset var(--msll-control-border-color, #8594ae);
}
a.edu-registry-link-button:hover {
  background: #8594ae;
}

/*
 * Лесенка только у кнопок.
 * Native outset высветляет верх и лево почти до белого — этот цвет и не нравился.
 * Здесь верх/лево = корпоративный #8594ae, низ/право = более тёмный стальной.
 */
.menu_button,
.menu_button_active,
.msll_button,
.msll_small_button,
.msll_middle_button,
.msll_button_desktop,
.msll_button_mobile,
.mobile_header_button,
.profile-menu--mobile .profile-menu__action,
a.edu-registry-link-button {
  border-style: solid;
  border-top-color: var(--msll-button-edge-light, #8594ae);
  border-left-color: var(--msll-button-edge-light, #8594ae);
  border-right-color: var(--msll-button-edge-dark, #5c6a82);
  border-bottom-color: var(--msll-button-edge-dark, #5c6a82);
}

.menu_button:active,
.msll_button:active,
.msll_small_button:active,
.msll_middle_button:active,
.msll_button_in_table:active,
.mobile_header_button:active,
.profile-menu--mobile .profile-menu__action:active {
  border-style: solid;
  border-top-color: var(--msll-button-edge-dark, #5c6a82);
  border-left-color: var(--msll-button-edge-dark, #5c6a82);
  border-right-color: var(--msll-button-edge-light, #8594ae);
  border-bottom-color: var(--msll-button-edge-light, #8594ae);
}
.edu-registry-filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  justify-content: flex-start;
}
.edu-registry-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.edu-registry-title {
  width: 100%;
  margin: 0 0 8px;
  color: #bd162b;
}
.edu-registry-table {
  width: 100%;
}
.edu-registry-row {
  cursor: pointer;
}
.edu-registry-row:hover {
  filter: brightness(0.97);
}
.edu-legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.edu-legend-item {
  padding: 4px 10px;
  border: 1px solid #bbb;
  border-radius: 4px;
  font-size: 0.85rem;
}
.edu-invoice-row--created {
  background: #ffffff;
}
.edu-invoice-row--paid {
  background: #fff3bf;
}
.edu-invoice-row--act-issued {
  background: #d3f9d8;
}
.edu-invoice-row--act-signed {
  background: #8ce99a;
}
/* Расцветка строк по статусу поверх фона ячеек .msll_table td */
table.msll_table.reports_table.edu-registry-table tr.edu-invoice-row--created > td {
  background: #ffffff;
}
table.msll_table.reports_table.edu-registry-table tr.edu-invoice-row--paid > td {
  background: #fff3bf;
}
table.msll_table.reports_table.edu-registry-table tr.edu-invoice-row--act-issued > td {
  background: #d3f9d8;
}
table.msll_table.reports_table.edu-registry-table tr.edu-invoice-row--act-signed > td {
  background: #8ce99a;
}
table.msll_table.reports_table.edu-registry-table tr.edu-registry-row:hover > td {
  filter: brightness(0.97);
}
.edu-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  z-index: 2000;
  overflow: auto;
}
.edu-modal {
  background: #fff;
  border-radius: 8px;
  padding: 18px 20px;
  width: min(640px, 100%);
  text-align: left;
}
.edu-modal--settings {
  width: min(720px, 100%);
}
.edu-modal label {
  display: block;
  margin-top: 8px;
  font-size: 0.9rem;
}
/* Строка формы: лейбл слева, поле справа */
.edu-form-row {
  display: grid;
  grid-template-columns: minmax(160px, 38%) 1fr;
  gap: 10px 14px;
  align-items: center;
  margin-top: 10px;
}
.edu-form-label {
  margin-top: 0 !important;
  font-size: 0.92rem;
  color: #333;
  text-align: left;
}
.edu-form-field {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}
.edu-form-section-title {
  margin-top: 18px;
  margin-bottom: 4px;
  font-weight: 700;
  color: #bd162b;
  font-size: 1rem;
}
/* Подписи полей edu-форм внутри корпоративной карточки */
.msll-modal-card .edu-form-label {
  color: var(--msll-modal-title, #454954);
  font-weight: 600;
}
.msll-modal-card .edu-form-row:first-child {
  margin-top: 0;
}
@media (max-width: 640px) {
  .edu-form-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}
.edu-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  margin-bottom: 6px;
  justify-content: center;
  align-items: center;
  width: 100%;
}
/* Корпоративные модалки edu (детали, формы, подтверждение) */
.edu-details-modal,
.edu-confirm-modal,
.edu-form-modal {
  display: block;
  z-index: 2000;
}
.edu-confirm-modal {
  z-index: 2500;
}
.edu-details-modal-content,
.edu-form-modal-content {
  max-width: 720px;
}
.edu-form-modal-content--settings {
  max-width: 760px;
}
.edu-form-modal .modal-body,
.edu-details-modal .modal-body {
  text-align: left;
}
.edu-details-table {
  width: 100%;
  margin-top: 4px;
  margin-bottom: 12px;
}
.edu-details-table th {
  width: 36%;
  text-align: left;
  vertical-align: top;
  font-weight: 600;
  white-space: nowrap;
}
.edu-details-table td {
  text-align: left;
  word-break: break-word;
}
.edu-details-listeners-table th {
  width: auto;
  white-space: normal;
}
.edu-promo-form {
  margin-bottom: 18px;
}
.edu-promo-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.95rem;
  color: #333;
}
.edu-promo-row--active {
  background: #ffffff;
}
.edu-promo-row--inactive {
  background: #f1f3f7;
  color: #6a7180;
}
table.msll_table.reports_table.edu-promo-table tr.edu-promo-row--active > td {
  background-color: #ffffff;
}
table.msll_table.reports_table.edu-promo-table tr.edu-promo-row--inactive > td {
  background-color: #f1f3f7;
  color: #6a7180;
}
table.msll_table.reports_table.edu-promo-table tr.edu-registry-row:hover > td {
  filter: brightness(0.97);
}
/* Таблица промокодов: без горизонтального скролла, узкая колонка действий */
table.msll_table.reports_table.edu-promo-table {
  table-layout: fixed;
  width: 100%;
}
.edu-promo-table .edu-promo-td-code {
  width: 12%;
  word-break: break-word;
}
.edu-promo-table .edu-promo-td-num {
  width: 9%;
  white-space: nowrap;
}
.edu-promo-table .edu-promo-td-date {
  width: 10%;
  white-space: nowrap;
}
.edu-promo-table .edu-promo-td-scope {
  width: 16%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.edu-promo-table .edu-promo-td-status {
  width: 10%;
  white-space: nowrap;
}
.edu-promo-table .edu-promo-td-comment {
  width: 22%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.edu-promo-th-actions,
.edu-promo-td-actions {
  width: 72px;
  min-width: 72px;
  max-width: 72px;
  padding: 4px 2px !important;
  vertical-align: middle;
  box-sizing: border-box;
}
.edu-promo-actions-slot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  width: 100%;
  box-sizing: border-box;
}
.edu-promo-action-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 2px 4px;
  box-sizing: border-box;
  border: 1px solid #8594ae;
  border-radius: 4px;
  background: #bd162b;
  color: #fff;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}
.edu-promo-action-btn:hover:not(:disabled) {
  background: #8594ae;
}
.edu-promo-action-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.edu-promo-action-btn--off {
  background: #6a7180;
}
.edu-field-block {
  margin-top: 10px;
}

/* Упражнения курса (тип TEST); подложка — как у блока TEXT (.msll_atricle_container) */
.msll_course_test {
  text-align: left;
  color: #212529;
}
.msll_course_test_question {
  font-weight: 600;
  margin-bottom: 0.75rem;
  line-height: 1.4;
  color: #212529;
}
.msll_course_test_options {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  /* Одна ширина с зоной comment — на всю ширину формы */
  width: 100%;
  box-sizing: border-box;
}
.msll_course_test_option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border: 2px solid #8594ae;
  border-radius: 12px;
  background: #fff;
  color: #212529;
  cursor: pointer;
  line-height: 1.35;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.msll_course_test_option span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #212529;
}
.msll_course_test_option input {
  margin: 0;
  flex-shrink: 0;
  /* Крупнее стандартные radio/checkbox, по центру строки */
  width: 1.35em;
  height: 1.35em;
  accent-color: #8594ae;
}
.msll_course_test_option--selected {
  border-color: #8594ae;
  background: #f3f5f8;
}
.msll_course_test_option--correct {
  border-color: #2f7d4a;
  background: #eef7f1;
}
.msll_course_test_option--wrong {
  border-color: #bd162b;
  background: #fcecee;
}
/* После ответа: курсор «запрещено» — изменение недоступно */
.msll_course_test_option--locked,
.msll_course_test_option--locked input,
.msll_course_test_option--locked span {
  cursor: not-allowed;
}
.msll_course_test_actions {
  margin-top: 0.9rem;
}

/* Телефон: «Ответить» по центру карточки */
html.msll-device-mobile .msll_course_test_actions {
  display: flex;
  justify-content: center;
  text-align: center;
}

/* Телефон: кадр 750×750; в ряд — сколько поместится (обычно одно) */
html.msll-device-mobile .courses_workspace_row--video {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 750px), 750px));
}

html.msll-device-mobile .courses_workspace_item--video {
  width: 750px;
  max-width: 750px;
}

html.msll-device-mobile .courses_media_card {
  width: 750px;
  max-width: 750px;
}

html.msll-device-mobile .courses_media_card_frame {
  width: 750px;
  height: 750px;
  margin: 0;
}
html.msll-device-mobile .msll_course_video_notes_textarea {
  min-height: 140px;
  font-size: 1.05rem;
}
html.msll-device-mobile .courses_video_stage--fs .courses_media_card_frame {
  width: 100%;
  height: auto;
  min-height: 40vh;
}
.msll_course_test_result {
  margin-top: 0.9rem;
  padding: 0.65rem 0.75rem;
  border-left: 3px solid #8594ae;
  background: #f3f5f8;
  /* Одна ширина с зоной options — на всю ширину формы */
  width: 100%;
  box-sizing: border-box;
  color: #212529;
}
.msll_course_test_result--ok {
  border-left-color: #2f7d4a;
  background: #eef7f1;
}
.msll_course_test_result--fail {
  border-left-color: #bd162b;
  background: #fcecee;
}
/* Нет эталона правильного ответа — нейтральная жёлтая полоса */
.msll_course_test_result--neutral {
  border-left-color: #c9a227;
  background: #fff8e6;
}
.msll_course_test_result_title {
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.msll_course_test_result_comment {
  line-height: 1.4;
  white-space: pre-wrap;
}
.msll_course_test_error {
  margin-top: 0.6rem;
  color: #bd162b;
}
.msll_course_test_hint {
  font-size: 0.92em;
  color: #555;
  margin: 0 0 0.55rem 0;
  line-height: 1.45;
}
/* Match: сдержанный LMS-паттерн «пункт → select» */
.msll_course_test_match {
  width: 100%;
}
.msll_course_test_match_status {
  margin: 0 0 0.85rem 0;
  font-size: 0.88em;
  color: #6a7180;
}
.msll_course_test_match_list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #d2d9e5;
}
.msll_course_test_match_pair_row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 0.75rem 1.25rem;
  align-items: center;
  padding: 0.85rem 0;
  border-bottom: 1px solid #d2d9e5;
  box-sizing: border-box;
}
.msll_course_test_match_pair_row--locked {
  cursor: default;
}
.msll_course_test_match_prompt {
  text-align: left;
  color: #212529 !important;
  -webkit-text-fill-color: #212529;
  line-height: 1.4;
  overflow-wrap: anywhere;
  font-weight: 500;
}
.msll_course_test_match_prompt *,
.msll_course_test_match_answer * {
  color: #212529 !important;
  -webkit-text-fill-color: #212529;
  opacity: 1 !important;
  visibility: visible !important;
}
.msll_course_test_match_control {
  min-width: 0;
}
.msll_course_test_match_sr_only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.msll_course_test_match_select {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 2rem 0.55rem 0.7rem;
  border: 1px solid #8594ae;
  border-radius: 4px;
  background-color: #fff;
  background-image: linear-gradient(45deg, transparent 50%, #8594ae 50%),
    linear-gradient(135deg, #8594ae 50%, transparent 50%);
  background-position: calc(100% - 14px) calc(50% - 2px), calc(100% - 9px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: #212529;
  font: inherit;
  line-height: 1.35;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
  cursor: pointer;
}
.msll_course_test_match_select:focus {
  outline: 2px solid rgba(133, 148, 174, 0.45);
  outline-offset: 1px;
  border-color: #6f7f99;
}
.msll_course_test_match_select:disabled {
  cursor: not-allowed;
  opacity: 0.7;
  background-color: #f3f5f8;
}
.msll_course_test_match_answer {
  min-height: 2.75rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid #d2d9e5;
  border-radius: 4px;
  background: #f7f8fa;
  color: #212529 !important;
  -webkit-text-fill-color: #212529;
  line-height: 1.4;
  overflow-wrap: anywhere;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
@media (max-width: 991px) {
  .msll_course_test_match_pair_row {
    grid-template-columns: 1fr;
    gap: 0.45rem;
    padding: 0.95rem 0;
  }
  .msll_course_test_match_select,
  .msll_course_test_match_answer {
    min-height: 3rem;
    font-size: inherit;
  }
}

/* ---------- FEEDBACK: оценка параметров по шкале 1–5 ---------- */
.msll_course_feedback {
  text-align: left;
  color: #212529;
  max-width: 36rem;
}
.msll_course_feedback_title {
  font-weight: 600;
  font-size: 1.05em;
  line-height: 1.4;
  margin: 0 0 1.25rem 0;
  color: #212529;
}
.msll_course_feedback_param {
  margin-bottom: 1.15rem;
}
.msll_course_feedback_param_label {
  margin: 0 0 0.45rem 0;
  line-height: 1.35;
  color: #212529;
  text-transform: lowercase;
}
.msll_course_feedback_scale {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}
.msll_course_feedback_score {
  box-sizing: border-box;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c8cdd6;
  border-radius: 0.28rem;
  background: #fff;
  color: #212529;
  font-family: inherit;
  font-size: 1em;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.msll_course_feedback_score:hover:not(:disabled) {
  border-color: #8594ae;
  background: #f3f5f8;
}
.msll_course_feedback_score--selected {
  /* Корпоративный красный акцент выбранной оценки */
  border-color: #bd162b;
  border-width: 2px;
  background: #fff;
  color: #bd162b;
  font-weight: 700;
}
.msll_course_feedback_score--disabled,
.msll_course_feedback_score:disabled {
  cursor: not-allowed;
  opacity: 0.75;
}
.msll_course_feedback_status {
  margin-top: 0.75rem;
  color: #6a7180;
  font-size: 0.92em;
}
.msll_course_feedback_error {
  margin-top: 0.6rem;
  color: #bd162b;
}
.msll_course_feedback_thanks {
  font-weight: 600;
  font-size: 1.05em;
  line-height: 1.45;
  color: #212529;
  padding: 0.85rem 0;
}

/* Мобильная версия: квадратики оценок 1–5 в два раза крупнее */
@media (max-width: 991px) {
  .msll_course_feedback_scale {
    gap: 0.9rem;
  }
  .msll_course_feedback_score {
    width: 4.7rem;
    height: 4.7rem;
    border-radius: 0.56rem;
  }
}

/* --- Редактор контента курсов --- */
.course-content-body {
  /*
   * Ширину не переопределять на 100%: у .edu-registry-body уже
   * width: calc(100% − сайднав) + margin-left. width:100% + margin = горизонтальный скролл.
   *
   * Эталон минимума карточки: Full HD 1920×1080 при масштабе ОС/браузера 150%
   * → CSS-viewport ≈ 1280×720; ниже этого — горизонтальный скролл, не сжатие вёрстки.
   */
  --course-content-ref-w: 1920px;
  --course-content-ref-h: 1080px;
  --course-content-min-zoom: 1.5;
  --course-content-min-w: calc(
    var(--course-content-ref-w) / var(--course-content-min-zoom)
    - var(--main-nav-sidenav-collapsed-offset, 0px)
    - 32px
  );
  --course-content-min-h: calc(var(--course-content-ref-h) / var(--course-content-min-zoom) - 160px);
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
}
.course-content-card {
  width: 100%;
  max-width: 100%;
  min-width: var(--course-content-min-w);
  min-height: var(--course-content-min-h);
  box-sizing: border-box;
}
.course-content-status {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: #f8f1f2;
  border: 1px solid #e0c4c8;
  color: #6a3a42;
  font-size: 0.92rem;
}
.course-content-layout {
  display: grid;
  /* minmax(0, …) — иначе min-content колонок раздувает карточку за край */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 12px;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  /* Колонки тянутся по высоте окна при смене масштаба */
  min-height: max(calc(100vh - 200px), calc(var(--course-content-min-h) - 80px));
}
.course-content-col {
  border: 1px solid #8594ae;
  background: #fff;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.course-content-col-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #dddae0;
  font-weight: 600;
  color: #333;
  flex-shrink: 0;
}
/* «+» / «Превью»: при увеличении масштаба (уже CSS-viewport) ширина уменьшается через vw */
.course-content-col-head .course-content-head-btn,
.course-content-body .course-content-head-btn.msll_middle_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 1 auto;
  height: auto !important;
  min-height: clamp(1.75rem, 3.2vw, 2.6rem);
  min-width: 0 !important;
  margin: 0;
  padding: 0.2em 0.5em;
  font-size: clamp(0.7rem, 1.15vw, 0.95rem);
  line-height: 1.2;
  white-space: nowrap;
}
.course-content-head-btn--plus {
  width: clamp(1.85rem, 4.5vw, 3.25rem) !important;
  max-width: 40%;
}
.course-content-head-btn--preview {
  width: clamp(3.25rem, 9vw, 7.5rem) !important;
  max-width: 55%;
}
.course-content-list {
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 6px;
}
.course-content-picker {
  position: relative;
  margin-bottom: 10px;
}
.course-content-picker-control {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.course-content-picker-input {
  margin-bottom: 0 !important;
}
.course-content-picker-toggle {
  min-width: 34px;
  border: 1px solid #8594ae;
  border-radius: 8px;
  background: #f3f5f8;
  color: #4f596d;
  cursor: pointer;
}
.course-content-picker-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  max-height: 300px;
  overflow: auto;
  z-index: 30;
  border: 1px solid #cfd5e0;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: rgba(0, 0, 0, 0.12) 0 10px 24px;
  padding: 6px;
  box-sizing: border-box;
}
.course-content-picker-option {
  width: 100%;
  display: block;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #ffffff;
  padding: 8px 10px;
  margin-bottom: 4px;
  cursor: pointer;
}
.course-content-picker-option:last-child {
  margin-bottom: 0;
}
.course-content-picker-option:hover {
  background: #f8f9fb;
  border-color: #d8dde8;
}
.course-content-picker-option--active {
  border-color: #bd162b;
  box-shadow: inset 3px 0 0 #bd162b;
}
.course-content-picker-option-title mark {
  background: #ffe7ec;
  color: #6f0b19;
  padding: 0 1px;
}
.course-content-picker-option-meta {
  display: block;
  margin-top: 2px;
  font-size: 0.82rem;
  color: #6a7180;
}
.course-content-item {
  border: 1px solid #cfd5e0;
  padding: 8px 10px;
  margin-bottom: 6px;
  cursor: pointer;
  background: #fff;
}
.course-content-item--active {
  border-color: #bd162b;
  box-shadow: inset 3px 0 0 #bd162b;
}
.course-content-item-title {
  font-weight: 600;
  color: #212529;
  margin-bottom: 4px;
}
.course-content-item-meta {
  font-size: 0.85rem;
  color: #6a7180;
  word-break: break-word;
}
.course-content-item-actions {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.course-content-link {
  background: none;
  border: none;
  padding: 0;
  color: #8594ae;
  cursor: pointer;
  text-decoration: underline;
  font: inherit;
}
.course-content-link--danger {
  color: #bd162b;
}
.course-content-type-badge {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border: 1px solid #8594ae;
  background: #f3f5f8;
  font-size: 0.78rem;
  font-weight: 600;
}
.course-content-empty {
  padding: 24px 12px;
  color: #6a7180;
  text-align: center;
}
.course-content-form,
.course-content-confirm {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid #8594ae;
  background: #f8f9fb;
}
.course-content-form h3 {
  margin: 0 0 12px;
  color: #333;
}
.course-content-form label {
  display: block;
  margin-bottom: 10px;
  font-size: 0.92rem;
  color: #333;
}
.course-content-form .edu-form-field,
.course-content-form textarea.msll_filter {
  display: block;
  width: 100%;
  margin-top: 4px;
  box-sizing: border-box;
}
.course-content-textarea {
  min-height: 80px;
  resize: vertical;
  font-family: inherit;
}
.course-content-textarea--mono {
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.88rem;
}
/* TinyMCE в модалке блока TEXT */
.course-html-editor-label {
  display: block;
  width: 100%;
}
.course-html-editor {
  margin-top: 6px;
  width: 100%;
}
.course-html-editor-host {
  width: 100%;
  min-height: 220px;
}
.course-html-editor-seed {
  display: none;
}
.course-html-editor .tox-tinymce {
  border-radius: 4px;
  border-color: #c8c8c8;
}
/* Меню/диалоги TinyMCE поверх модалки редактора.
   pointer-events: none на контейнере — leftover aux после смены типа не блокирует крестик/Отмена. */
.tox-tinymce-aux {
  z-index: 12000 !important;
  pointer-events: none;
}
.tox-tinymce-aux > * {
  pointer-events: auto;
}
/* Полноэкранный режим — выше модалки блока курса */
.tox.tox-fullscreen,
.tox-fullscreen .tox-tinymce {
  z-index: 13000 !important;
}
.course-html-editor-error {
  color: #a33;
  margin-bottom: 6px;
}
.course-content-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.course-content-upload-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.course-content-file-label {
  display: inline-block;
  cursor: pointer;
  text-align: center;
}
@media (max-width: 980px) {
  .course-content-body {
    --course-content-min-w: 0px;
    --course-content-min-h: 0px;
  }
  .course-content-card {
    min-width: 0;
    min-height: 0;
  }
  .course-content-layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .course-content-list {
    max-height: 240px;
  }
  .course-content-head-btn--plus,
  .course-content-head-btn--preview {
    width: auto !important;
    max-width: none;
    padding: 0.35em 0.75em;
  }
}
.course-content-col-head-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
/* Оверлей корпоративных модалок (Vue v-if и display:block).
 * Закрытие по клику мимо — запрещено глобально (js/msll_modal_shell.js).
 * Прокрутка страницы под модалкой — msll-modal-scroll-lock через тот же скрипт. */
.msll-modal-shell.modal {
  display: flex !important;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px;
  box-sizing: border-box;
  background-color: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  overflow: hidden;
  overscroll-behavior: none;
}
/* Карточка по центру экрана по вертикали и горизонтали */
.msll-modal-shell.modal.msll-modal-shell--center {
  align-items: center;
  justify-content: center;
  padding: 16px;
}
/* .modal-content-60 задаёт margin-top: 5% и margin-bottom: 200px — сбрасываем */
.msll-modal-shell--center > .msll-modal-card,
.msll-modal-shell--center > .modal-content-60 {
  margin: auto;
}

/*
 * Мобильный режим (html.msll-device-mobile по User-Agent; viewport ЛК ≈ 980px).
 * Все модалки — на весь экран. Исключение: информационные (#id_FormModalMessage).
 */
html.msll-device-mobile .modal:not(#id_FormModalMessage) {
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* Обёртка профиля (.my_unheader2) — иначе карточка не прямой потомок .modal и не растягивается */
html.msll-device-mobile .modal:not(#id_FormModalMessage) > .my_unheader2 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html.msll-device-mobile .modal:not(#id_FormModalMessage) > .msll-modal-card,
html.msll-device-mobile .modal:not(#id_FormModalMessage) > [class*="modal-content-"],
html.msll-device-mobile .modal:not(#id_FormModalMessage) > .my_unheader2 > .msll-modal-card {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

html.msll-device-mobile .modal:not(#id_FormModalMessage) > .msll-modal-card > .modal-header,
html.msll-device-mobile .modal:not(#id_FormModalMessage) > .msll-modal-card > .msll-modal-card__header,
html.msll-device-mobile .modal:not(#id_FormModalMessage) > .msll-modal-card > .modal-footer,
html.msll-device-mobile .modal:not(#id_FormModalMessage) > .msll-modal-card > .msll-modal-card__footer,
html.msll-device-mobile .modal:not(#id_FormModalMessage) > [class*="modal-content-"] > .modal-header,
html.msll-device-mobile .modal:not(#id_FormModalMessage) > [class*="modal-content-"] > .modal-footer,
html.msll-device-mobile .modal:not(#id_FormModalMessage) > .my_unheader2 > .msll-modal-card > .modal-header,
html.msll-device-mobile .modal:not(#id_FormModalMessage) > .my_unheader2 > .msll-modal-card > .msll-modal-card__header,
html.msll-device-mobile .modal:not(#id_FormModalMessage) > .my_unheader2 > .msll-modal-card > .modal-footer,
html.msll-device-mobile .modal:not(#id_FormModalMessage) > .my_unheader2 > .msll-modal-card > .msll-modal-card__footer {
  flex: 0 0 auto;
}

html.msll-device-mobile .modal:not(#id_FormModalMessage) > .msll-modal-card > .modal-body,
html.msll-device-mobile .modal:not(#id_FormModalMessage) > .msll-modal-card > .msll-modal-card__body,
html.msll-device-mobile .modal:not(#id_FormModalMessage) > [class*="modal-content-"] > .modal-body,
html.msll-device-mobile .modal:not(#id_FormModalMessage) > .my_unheader2 > .msll-modal-card > .modal-body,
html.msll-device-mobile .modal:not(#id_FormModalMessage) > .my_unheader2 > .msll-modal-card > .msll-modal-card__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Модалка «Редактирование данных пользователя»: крупные контролы на телефоне */
html.msll-device-mobile #id_FormEditProfile .msll-modal-card__header {
  min-height: 128px;
  padding: 32px 112px 28px 32px;
}

html.msll-device-mobile #id_FormEditProfile .msll-modal-card__title {
  font-size: 2.6rem;
  line-height: 1.3;
}

html.msll-device-mobile #id_FormEditProfile .msll-modal-card__close {
  width: 80px;
  height: 80px;
  right: 28px;
}

html.msll-device-mobile #id_FormEditProfile .msll-modal-card__close svg {
  width: 36px;
  height: 36px;
}

html.msll-device-mobile #id_FormEditProfile .msll-modal-card__body {
  padding: 32px 32px 20px !important;
}

html.msll-device-mobile #id_FormEditProfile .msll-modal-field {
  margin-bottom: 28px;
}

html.msll-device-mobile #id_FormEditProfile .msll-modal-field__label {
  margin-bottom: 14px;
  font-size: 2.1rem;
}

html.msll-device-mobile #id_FormEditProfile .msll-modal-field__control,
html.msll-device-mobile #id_FormEditProfile .form-element .msll_filter {
  min-height: 96px;
  padding: 18px 22px;
  font-size: 2.1rem;
  border-radius: 16px !important;
}

html.msll-device-mobile #id_FormEditProfile .form-element .msll_password_wrap .msll_filter {
  padding-right: 96px;
}

html.msll-device-mobile #id_FormEditProfile .msll_password_toggle {
  width: 72px;
  height: 72px;
  right: 10px;
}

html.msll-device-mobile #id_FormEditProfile .msll_password_toggle svg,
html.msll-device-mobile #id_FormEditProfile .msll_password_toggle_icon {
  width: 40px;
  height: 40px;
}

html.msll-device-mobile #id_FormEditProfile .checkbox-height25 {
  width: 48px;
  height: 48px;
  margin-right: 18px;
}

html.msll-device-mobile #id_FormEditProfile .msll-modal-alert {
  font-size: 1.8rem;
  padding: 16px 18px;
}

html.msll-device-mobile #id_FormEditProfile .msll-modal-card__footer,
html.msll-device-mobile #id_FormEditProfile .modal-footer.msll-modal-card__footer {
  min-height: 132px;
  padding: 24px 28px 32px !important;
}

html.msll-device-mobile #id_FormEditProfile .msll-modal-actions {
  gap: 16px;
}

html.msll-device-mobile #id_FormEditProfile .msll-modal-actions .msll_middle_button {
  flex: 1 1 calc(50% - 8px);
  min-height: 96px;
  padding: 20px 24px;
  font-size: 2rem;
  border-radius: 14px;
}

/* Информационное сообщение — карточка по центру; показывать только при display:block */
html.msll-device-mobile #id_FormModalMessage.modal[style*="block"] {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 24px 16px !important;
  overflow: hidden;
}
/* Вложенная модалка: закрытие только кнопками, не по клику на затемнение */
.course-content-overlay-modal--stacked {
  cursor: default;
}
/* Форма блока (Teleport → body) */
.course-content-block-modal.modal {
  z-index: 2100;
}
/* Вложенные модалки поверх формы блока (Teleport → body) */
.course-content-overlay-modal.modal {
  z-index: 2800;
}
.course-content-block-modal {
  overflow: auto;
  box-sizing: border-box;
}
.course-content-block-modal-content {
  /* Компактная ширина по умолчанию; почти весь экран — модификатор --fill */
  width: min(920px, 96vw);
  max-width: none;
  margin: 0 auto;
  max-height: calc(100vh - 96px);
  overflow: hidden;
  box-sizing: border-box;
}
/* Форма блока и превью раздела/блока: почти на весь экран, небольшой отступ по периметру */
.course-content-block-modal.course-content-block-modal--fill.modal {
  --course-content-block-modal-inset: 16px;
  padding: var(--course-content-block-modal-inset);
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
}
.msll-modal-card.course-content-block-modal-content.course-content-block-modal--fill {
  width: calc(100vw - 2 * var(--course-content-block-modal-inset, 16px));
  max-width: calc(100vw - 2 * var(--course-content-block-modal-inset, 16px));
  height: calc(100vh - 2 * var(--course-content-block-modal-inset, 16px));
  max-height: calc(100vh - 2 * var(--course-content-block-modal-inset, 16px));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@supports (height: 100dvh) {
  .msll-modal-card.course-content-block-modal-content.course-content-block-modal--fill {
    height: calc(100dvh - 2 * var(--course-content-block-modal-inset, 16px));
    max-height: calc(100dvh - 2 * var(--course-content-block-modal-inset, 16px));
  }
}
.course-content-block-modal-content.course-content-block-modal--fill .msll-modal-card__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.course-content-block-modal-content.course-content-block-modal--fill .msll-modal-card__footer {
  flex: 0 0 auto;
}
.course-content-block-modal-content.course-content-block-modal--fill .msll-modal-card__header {
  flex: 0 0 auto;
}
.course-content-block-modal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.course-content-block-modal-form label {
  display: block;
  margin-bottom: 10px;
  font-size: 0.92rem;
  color: #333;
}
.course-content-block-modal-preview {
  border: 1px solid #cfd5e0;
  background: #fff;
  min-height: 240px;
  padding: 8px 0 16px;
  min-width: 0;
}
.course-content-preview-caption {
  margin: 0 16px 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #8594ae;
}
.course-content-preview-canvas {
  /* Тот же холст, что у слушателя: карточки и сетка из Course_Learner_Blocks */
  text-align: left;
  overflow-x: auto;
}
.course-content-block-modal-preview .courses_workspace {
  padding: 12px 8px 20px;
}
.course-content-preview-empty,
.course-content-preview-error,
.course-content-preview-note {
  margin: 12px 20px;
  font-size: 0.92rem;
}
.course-content-preview-empty {
  color: #6a7180;
}
.course-content-preview-error {
  color: #bd162b;
}
.course-content-preview-note {
  color: #6a3a42;
  background: #f8f1f2;
  border: 1px solid #e0c4c8;
  padding: 8px 10px;
}
.course-content-media-picker-content {
  max-width: min(680px, 96vw);
  max-height: calc(100vh - 96px);
  overflow: hidden;
}
.course-content-media-picker-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  max-height: 50vh;
  overflow: auto;
  border: 1px solid #cfd5e0;
  background: #fff;
}
.course-content-media-picker-item {
  margin: 0;
  border-bottom: 1px solid #e8ebf0;
}
.course-content-media-picker-item:last-child {
  border-bottom: none;
}
.course-content-media-picker-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: #212529;
}
.course-content-media-picker-btn:hover {
  background: #f3f5f8;
}
.course-content-media-picker-label {
  word-break: break-word;
}
/* Полноэкран на телефоне: класс с User-Agent (viewport ЛК = 980px, max-width:900 не срабатывает) */
html.msll-device-mobile .course-content-block-modal.course-content-block-modal--fill.modal {
  --course-content-block-modal-inset: 0px;
  padding: var(--course-content-block-modal-inset);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
html.msll-device-mobile .course-content-block-modal-content.course-content-block-modal--fill {
  width: calc(100% - 2 * var(--course-content-block-modal-inset, 8px));
  max-width: none;
  height: calc(100% - 2 * var(--course-content-block-modal-inset, 8px));
  max-height: none;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
html.msll-device-mobile .course-content-block-modal.modal:not(.course-content-block-modal--fill) {
  padding: 0;
  padding-top: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
html.msll-device-mobile .modal-content-80.course-content-block-modal-content:not(.course-content-block-modal--fill) {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
html.msll-device-mobile .course-content-block-modal-content .modal-header,
html.msll-device-mobile .course-content-block-modal-content .msll-modal-card__header {
  flex: 0 0 auto;
}
html.msll-device-mobile .course-content-block-modal-content .modal-body,
html.msll-device-mobile .course-content-block-modal-content .msll-modal-card__body {
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}
html.msll-device-mobile .course-content-block-modal-content .msll-modal-card__footer {
  flex: 0 0 auto;
}
html.msll-device-mobile .course-content-block-modal-grid {
  grid-template-columns: 1fr;
}

@media (max-width: 991px) {
  .course-content-block-modal.course-content-block-modal--fill.modal {
    --course-content-block-modal-inset: 10px;
    padding: var(--course-content-block-modal-inset);
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }
  .course-content-block-modal-content.course-content-block-modal--fill {
    width: calc(100% - 2 * var(--course-content-block-modal-inset, 10px));
    max-width: none;
    height: calc(100% - 2 * var(--course-content-block-modal-inset, 10px));
    max-height: none;
    margin: 0 auto;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }
  .course-content-block-modal.modal:not(.course-content-block-modal--fill) {
    padding: 0;
    padding-top: 0;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }
  .modal-content-80.course-content-block-modal-content:not(.course-content-block-modal--fill) {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }
  .course-content-block-modal-content .modal-header,
  .course-content-block-modal-content .msll-modal-card__header {
    flex: 0 0 auto;
  }
  .course-content-block-modal-content .modal-body,
  .course-content-block-modal-content .msll-modal-card__body {
    flex: 1 1 auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }
  .course-content-block-modal-content .msll-modal-card__footer {
    flex: 0 0 auto;
  }
  .course-content-block-modal-grid {
    grid-template-columns: 1fr;
  }
}

/* Конструкторы TEST / FEEDBACK / CALENDAR */
.course-json-builder {
  margin: 8px 0 16px;
  padding: 10px 12px 14px;
  border: 1px solid #cfd5e0;
  background: #fff;
  box-sizing: border-box;
}
.course-json-builder-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.course-json-builder-row .edu-form-field,
.course-json-builder-row .msll_filter {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  box-sizing: border-box;
}
.course-json-builder-check {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-size: 0.85rem;
  margin: 0;
}
.course-json-builder-match {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
.course-json-builder-pair-left {
  flex: 0 1 42%;
  min-width: 0;
  text-align: left;
  word-break: break-word;
  font-size: 0.92rem;
}
.course-html-editor--compact {
  margin-bottom: 8px;
}

/* Переключатель режима поиска курса: вертикально, мелкий шрифт */
.course-content-search-mode {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 6px 0 4px;
  font-size: .56em;
}
.course-content-search-mode-label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 13px !important;
  line-height: 1.2 !important;
}
.course-content-search-mode-label input[type="radio"] {
  margin: 0 2px 0 0;
  width: 11px !important;
  height: 11px !important;
  flex: 0 0 11px;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid #8594ae;
  border-radius: 50%;
  background: #fff;
  transform: none !important;
  display: inline-block;
  vertical-align: middle;
}
.course-content-search-mode-label input[type="radio"]:checked {
  background:
    radial-gradient(circle at center, #8594ae 0 46%, transparent 49% 100%);
}
.course-content-search-mode-label input[type="radio"]:focus-visible {
  outline: 1px solid #8594ae;
  outline-offset: 1px;
}

/* Inline-связи продаж внутри колонки «Курс» */
.course-content-sale-links-inline {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #dddae0;
}
.course-content-sale-links-inline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.course-content-sale-links-inline-head .edu-form-section-title {
  font-size: .9em;
  margin: 0;
}
.course-content-sale-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0;
  font-size: .88em;
  border-bottom: 1px solid #f0eff1;
}
.course-content-sale-link-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.course-content-sale-link-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.course-content-sale-link-form {
  margin-top: 6px;
}
.course-content-sale-link-form input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}
.course-content-sale-link-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

@media (max-width: 900px) {
  .course-json-builder-match {
    grid-template-columns: 1fr;
  }
}

/* Карточка события в конструкторе CALENDAR */
.course-calendar-builder-card {
  margin: 0 0 12px;
  padding: 10px 10px 6px;
  border: 1px solid #cfd5e0;
  border-left-width: 5px;
  background: #fbfcfe;
  box-sizing: border-box;
}
/* Карточка с незаполненными обязательными полями */
.course-calendar-builder-card--invalid {
  border-color: rgba(189, 22, 43, 0.45);
  box-shadow: 0 0 0 1px rgba(189, 22, 43, 0.12);
}
.course-calendar-builder-card--lecture {
  border-left-color: #8594ae;
  background: linear-gradient(90deg, rgba(133, 148, 174, 0.16), #fff 42%);
}
.course-calendar-builder-card--homework {
  border-left-color: #bd162b;
  background: linear-gradient(90deg, rgba(189, 22, 43, 0.08), #fff 42%);
}
.course-calendar-builder-card--seminar {
  border-left-color: #9b98a1;
  background: linear-gradient(90deg, rgba(221, 218, 224, 0.7), #fff 42%);
}
.course-calendar-builder-card--other {
  border-left-color: #b0893a;
  background: linear-gradient(90deg, rgba(176, 137, 58, 0.12), #fff 42%);
}
.course-calendar-builder-time {
  max-width: 8.5em;
  flex: 0 0 auto;
}

/* Календарь курса: одинаковые окружности, цвет по типу события */
.courses_calendar_card {
  width: 100%;
  padding: 18px 18px 20px;
  box-sizing: border-box;
}
.msll_course_calendar {
  position: relative;
  /* Изоляция stacking: иначе mark с z-index/transform пробивают sticky .my_header при скролле */
  isolation: isolate;
  color: #454954;
  background:
    repeating-linear-gradient(
      -18deg,
      rgba(221, 218, 224, 0.18) 0 12px,
      transparent 12px 24px
    );
}
.msll_course_calendar_head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 0 0 14px;
}
.msll_course_calendar_title {
  margin: 0;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.msll_course_calendar_nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.msll_course_calendar_nav_btn {
  width: 2em;
  height: 2em;
  padding: 0;
  border: 1px solid rgba(133, 148, 174, 0.55);
  border-style: outset;
  border-radius: 6px;
  background: #fff;
  color: #bd162b;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.msll_course_calendar_nav_btn:hover {
  background: #f8f1f2;
}
.msll_course_calendar_month {
  position: relative;
  isolation: isolate;
  min-width: 9.5em;
  padding: 0.2em 0.9em;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.msll_course_calendar_month::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0.2em;
  right: 0.2em;
  top: 0.15em;
  bottom: 0.15em;
  background: linear-gradient(90deg, rgba(189, 22, 43, 0.12), rgba(133, 148, 174, 0.16));
  transform: skewX(-18deg);
  border-radius: 2px;
}
.msll_course_calendar_layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(220px, 0.85fr);
  gap: 18px 20px;
  align-items: start;
}
.msll_course_calendar_weekdays,
.msll_course_calendar_grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.msll_course_calendar_dow {
  text-align: center;
  font-weight: 600;
  color: #8594ae;
  letter-spacing: 0.04em;
  padding: 0.15em 0 0.4em;
}
.msll_course_calendar_cell {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 3.4em;
  padding: 0.45em 0.15em 0.7em;
  border: 1px solid rgba(133, 148, 174, 0.28);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
  color: inherit;
  font: inherit;
  cursor: pointer;
  overflow: visible;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.msll_course_calendar_cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(69, 73, 84, 0.12);
}
.msll_course_calendar_cell--outside {
  opacity: 0.42;
}
.msll_course_calendar_cell--past {
  filter: saturate(0.72);
}
.msll_course_calendar_num {
  position: relative;
  z-index: 2;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1;
}
.msll_course_calendar_today_ticks {
  position: absolute;
  inset: 4px;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(#8594ae, #8594ae) top left / 7px 2px no-repeat,
    linear-gradient(#8594ae, #8594ae) top left / 2px 7px no-repeat,
    linear-gradient(#8594ae, #8594ae) top right / 7px 2px no-repeat,
    linear-gradient(#8594ae, #8594ae) top right / 2px 7px no-repeat,
    linear-gradient(#8594ae, #8594ae) bottom left / 7px 2px no-repeat,
    linear-gradient(#8594ae, #8594ae) bottom left / 2px 7px no-repeat,
    linear-gradient(#8594ae, #8594ae) bottom right / 7px 2px no-repeat,
    linear-gradient(#8594ae, #8594ae) bottom right / 2px 7px no-repeat;
}
.msll_course_calendar_cell--today .msll_course_calendar_num {
  color: #8594ae;
}
.msll_course_calendar_cell--selected {
  border-color: #bd162b;
  box-shadow:
    0 0 0 2px rgba(189, 22, 43, 0.18),
    0 10px 18px rgba(189, 22, 43, 0.12);
  transform: translateY(-1px);
}
.msll_course_calendar_cell--selected .msll_course_calendar_num {
  background: radial-gradient(circle at 50% 45%, rgba(189, 22, 43, 0.14), transparent 68%);
  border-radius: 50%;
  padding: 0.22em 0.28em;
}

/* Одинаковая пиктограмма: двойная окружность; цвет задаёт тип */
.msll_course_calendar_cell--lecture {
  background:
    radial-gradient(circle at 50% 58%, transparent 34%, rgba(133, 148, 174, 0.28) 36%, transparent 38%),
    radial-gradient(circle at 50% 58%, transparent 48%, rgba(133, 148, 174, 0.18) 50%, transparent 52%),
    rgba(255, 255, 255, 0.92);
}
.msll_course_calendar_cell--homework {
  background:
    radial-gradient(circle at 50% 58%, transparent 34%, rgba(189, 22, 43, 0.28) 36%, transparent 38%),
    radial-gradient(circle at 50% 58%, transparent 48%, rgba(189, 22, 43, 0.16) 50%, transparent 52%),
    rgba(255, 255, 255, 0.92);
}
.msll_course_calendar_cell--seminar {
  background:
    radial-gradient(circle at 50% 58%, transparent 34%, rgba(221, 218, 224, 0.95) 36%, transparent 38%),
    radial-gradient(circle at 50% 58%, transparent 48%, rgba(155, 152, 161, 0.45) 50%, transparent 52%),
    rgba(255, 255, 255, 0.92);
}
.msll_course_calendar_cell--other {
  background:
    radial-gradient(circle at 50% 58%, transparent 34%, rgba(176, 137, 58, 0.32) 36%, transparent 38%),
    radial-gradient(circle at 50% 58%, transparent 48%, rgba(176, 137, 58, 0.2) 50%, transparent 52%),
    rgba(255, 255, 255, 0.92);
}
.msll_course_calendar_mark {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 56%;
  width: calc(2.05em + var(--mark-i, 0) * 0.38em);
  height: calc(2.05em + var(--mark-i, 0) * 0.38em);
  border: 1.5px solid currentColor;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  pointer-events: none;
  box-sizing: border-box;
}
.msll_course_calendar_mark::before {
  content: "";
  position: absolute;
  inset: 0.28em;
  border: 1.5px solid currentColor;
  opacity: 0.45;
  border-radius: 50%;
}
.msll_course_calendar_mark--lecture {
  color: #8594ae;
}
.msll_course_calendar_mark--homework {
  color: #bd162b;
}
.msll_course_calendar_mark--seminar {
  /* Корпоративный серый #DDDAE0 затемнён, чтобы кольцо читалось на белом */
  color: #9b98a1;
}
.msll_course_calendar_mark--other {
  color: #b0893a;
}
.msll_course_calendar_mark--pulse {
  animation: msll-calendar-deadline-pulse 1.35s ease-in-out infinite;
}
.msll_course_calendar_mark--seminar-pulse {
  animation: msll-calendar-seminar-pulse 1.8s ease-in-out infinite;
}
.msll_course_calendar_cell--homework .msll_course_calendar_num {
  color: #bd162b;
}
.msll_course_calendar_cell--due .msll_course_calendar_num,
.msll_course_calendar_cell--deadline .msll_course_calendar_num {
  color: #bd162b;
}
.msll_course_calendar_cell--multi {
  background:
    radial-gradient(circle at 50% 58%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.92));
}
.msll_course_calendar_pips {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0.28em;
  display: flex;
  justify-content: center;
  gap: 0.22em;
}
.msll_course_calendar_pip {
  display: block;
  width: 0.38em;
  height: 0.38em;
  border-radius: 50%;
}
.msll_course_calendar_pip--lecture {
  background: transparent;
  box-shadow: 0 0 0 1.5px #8594ae inset;
}
.msll_course_calendar_pip--homework {
  background: transparent;
  box-shadow: 0 0 0 1.5px #bd162b inset;
}
.msll_course_calendar_pip--seminar {
  background: transparent;
  box-shadow: 0 0 0 1.5px #9b98a1 inset;
}
.msll_course_calendar_pip--other {
  background: transparent;
  box-shadow: 0 0 0 1.5px #b0893a inset;
}

.msll_course_calendar_legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  color: #6a7180;
}
.msll_course_calendar_legend_item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.msll_course_calendar_mark--legend {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: 1.15em;
  height: 1.15em;
  transform: none;
  /* Не конкурировать со sticky-шапкой приложения (у mark базовый z-index: 1) */
  z-index: auto;
  flex: 0 0 auto;
}
.msll_course_calendar_mark--legend::before {
  inset: 0.22em;
}

.msll_course_calendar_side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.msll_course_calendar_dock,
.msll_course_calendar_upcoming {
  padding: 12px 12px 10px;
  border: 1px solid rgba(133, 148, 174, 0.35);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
}
.msll_course_calendar_dock_label {
  margin: 0 0 8px;
  font-weight: 600;
  color: #8594ae;
  letter-spacing: 0.04em;
}
.msll_course_calendar_empty {
  margin: 0;
  color: #6a7180;
}
.msll_course_calendar_event {
  position: relative;
  margin: 0 0 8px;
  padding: 8px 10px 8px 14px;
  border-radius: 8px;
  background: #f7f8fb;
  overflow: hidden;
}
.msll_course_calendar_event:last-child {
  margin-bottom: 0;
}
.msll_course_calendar_event::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
}
.msll_course_calendar_event--lecture::before {
  background: #8594ae;
}
.msll_course_calendar_event--homework::before {
  background: #bd162b;
}
.msll_course_calendar_event--seminar::before {
  background: #9b98a1;
}
.msll_course_calendar_event--other::before {
  background: #b0893a;
}
.msll_course_calendar_event_kind {
  font-weight: 600;
  color: #8594ae;
  letter-spacing: 0.03em;
}
.msll_course_calendar_event_title {
  font-weight: 600;
}
.msll_course_calendar_event_when,
.msll_course_calendar_event_note {
  color: #6a7180;
}
.msll_course_calendar_timeline {
  list-style: none;
  margin: 0;
  /* Зазор в em: пиктограмма (в т.ч. повёрнутый ромб лекции) не наезжает на дату */
  padding: 0 0 0 1.7em;
  border-left: 2px dashed rgba(133, 148, 174, 0.55);
}
.msll_course_calendar_timeline_item {
  position: relative;
  margin: 0 0 8px;
}
.msll_course_calendar_timeline_item::before {
  content: "";
  position: absolute;
  left: -1.45em;
  top: 0.35em;
  width: 0.55em;
  height: 0.55em;
  box-sizing: border-box;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 2px #8594ae inset;
  pointer-events: none;
}
.msll_course_calendar_timeline_item--lecture::before {
  box-shadow: 0 0 0 2px #8594ae inset;
}
.msll_course_calendar_timeline_item--homework::before {
  box-shadow: 0 0 0 2px #bd162b inset;
  animation: msll-calendar-deadline-pulse-dot 1.35s ease-in-out infinite;
}
.msll_course_calendar_timeline_item--seminar::before {
  box-shadow: 0 0 0 2px #9b98a1 inset;
}
.msll_course_calendar_timeline_item--other::before {
  box-shadow: 0 0 0 2px #b0893a inset;
}
.msll_course_calendar_timeline_btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.msll_course_calendar_timeline_btn:hover .msll_course_calendar_timeline_title {
  color: #bd162b;
}
.msll_course_calendar_timeline_date {
  color: #8594ae;
}
.msll_course_calendar_timeline_title {
  font-weight: 600;
}

@keyframes msll-calendar-deadline-pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 0 0 rgba(189, 22, 43, 0.55);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 0 0 0 0.45em rgba(189, 22, 43, 0);
  }
}

@keyframes msll-calendar-deadline-pulse-dot {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 2px #bd162b inset, 0 0 0 0 rgba(189, 22, 43, 0.5);
  }
  50% {
    transform: scale(1.12);
    box-shadow: 0 0 0 2px #bd162b inset, 0 0 0 0.35em rgba(189, 22, 43, 0);
  }
}

@keyframes msll-calendar-seminar-pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 0 0 rgba(155, 152, 161, 0.55);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 0 0 0 0.45em rgba(155, 152, 161, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .msll_course_calendar_mark--pulse,
  .msll_course_calendar_mark--seminar-pulse,
  .msll_course_calendar_timeline_item--homework::before,
  .msll_course_calendar_cell:hover,
  .msll_course_calendar_cell--selected {
    animation: none;
    transition: none;
  }
}

@media (max-width: 991px) {
  .msll_course_calendar_layout {
    grid-template-columns: 1fr;
  }
}

html.msll-device-mobile .msll_course_calendar_layout {
  grid-template-columns: 1fr;
}
html.msll-device-mobile .msll_course_calendar_cell {
  min-height: 2.8em;
  border-radius: 8px;
}
html.msll-device-mobile .courses_calendar_card {
  padding: 14px 10px 16px;
}
/* Крупный кегль курса: линия и значок масштабируются вместе, дата правее */
html.msll-device-mobile .msll_course_calendar_timeline {
  padding-left: 1.9em;
}
html.msll-device-mobile .msll_course_calendar_timeline_item::before {
  left: -1.55em;
  top: 0.4em;
}

/* Модалка HTML-инструкции редактора контента курсов */
.course-content-help-modal-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 0 !important;
}
.course-content-help-iframe {
  width: 100%;
  flex: 1 1 auto;
  min-height: min(70vh, 720px);
  border: 1px solid #cfd5e0;
  background: #fff;
  border-radius: 4px;
}