/* Задайте своё человеческое название файла между '' */
/* --human-name-css: 'Супер-меню уроков - ПК'; */

/* Укажите имя автора между '' */
/* --human-author-css: 'Игорь Лохман'; */

/* Задайте путь до аватара автора между "" */
/* --human-author-image-css: "../wp-content/plugins/super-style/assets/image/igor-main-author-ava.png"; */

/* Задайте своё человеческое описание файла между '' */
/* --human-description-css: 'Дизайн для: кнопки открытия меню, заголовка меню, прогресс-бара и блока списка уроков.'; */

/* ----------------- */
/* ПАНЕЛЬ УПРАВЛЕНИЯ */
/* ----------------- */

:root {

/* -------------------------------------- */
/* ДИЗАЙН КНОПКИ ОТКРЫТИЯ СУПЕР-МЕНЮ - ПК */
/* -------------------------------------- */

	/* Текст кнопки */
	/* Подсказка: заменяет родной текст кнопки из настроек Меню */
	--content-title-button-nav-panel: 'Меню навігації';
	
	/* Размер текста кнопки */
	--size-button-nav-panel: 1.7rem;
	
	/* Закругление кнопки "Список уроков" */
	--radius-button-nav-panel: 6px;

	/* Фон кнопки "Список уроков" */
	--bg-button-nav-panel: #83b444;

	/* Цвет текста кнопки "Список уроков" */
	--color-button-nav-panel: #ffffff;

	/* Фон кнопки "Список уроков" - при наведении */
	--bg-button-hover-nav-panel: #8BBE48;

	/* Цвет текста и иконки в кнопке "Список уроков" - при наведении */
	--color-button-hover-nav-panel: #ffffff;

	/* Фон кнопки "Список уроков" - при клике */
	--bg-button-active-nav-panel: #83b444;

	/* Цвет текста и иконки в кнопке "Список уроков" - при клике */
	--color-button-active-nav-panel: #ffffff;

/* ------------------------------- */
/* КОНТЕЙНЕР ВСЕГО СУПЕР-МЕНЮ - ПК */
/* ------------------------------- */

/* Закомментированные переменные перенёс в файлы: */
/* nav-panel-layout-separate-pc-css-premium.css и nav-panel-layout-compact-pc-css-premium.css */

	/* Фон всего контейнера меню */
	/* Важно: не меняйте это значение */
	--bg-container-nav-panel: none;
	
	/* Расстояние между блоками - заголовок меню, прогресс и список уроков */
	/* --gap-container-nav-panel: 40px; */
	
	/* Ширина всего супер-меню */
	/* Важно: допустимо минимум - "30%", максимум - "55%" (оптимально) */
	--width-container-nav-panel: 55%;

/* -------------------------------- */
/* ДИЗАЙН БЛОКА ЗАГОЛОВКА МЕНЮ - ПК */
/* -------------------------------- */

/* Закомментированные переменные перенёс в файлы: */
/* nav-panel-layout-separate-pc-css-premium.css и nav-panel-layout-compact-pc-css-premium.css */

	/* Текст заголовка меню */
	/* Подсказка: заменяет название родительской рубрики */
	--content-title-header-nav-panel: 'Кроки програми';

	/* Фон заголовка меню */
	--title-bg-header-nav-panel: #0AA0FF;

	/* Фон заголовка меню - при наведении */
	--title-bg-hover-header-nav-panel: #0A9BF6;

	/* Цвет заголовка меню */
	--title-text-color-header-nav-panel: #ffffff;

	/* Цвет заголовка меню - при наведении */
	--title-text-color-hover-header-nav-panel: #ffffff;

	/* Размер заголовка меню */
	--title-text-size-header-nav-panel: 2rem;

	/* Жирность заголовка меню */
	--title-text-weight-panel: 400;

	/* Закругление блока заголовка меню - сверху слева и справа */
	/* Подсказка: видно, если есть фон или рамка */
	/* --radius-top-block-header-nav-panel: 5px; */
	
	/* Закругление блока заголовка меню - снизу слева и справа */
	/* Подсказка: видно, если есть фон или рамка */
	/* --radius-bottom-block-header-nav-panel: 5px; */
	
	/* Толщина рамки блока заголовка меню - сверху, слева и справа */
	/* --border-width-left-right-top-block-header-nav-panel: 0px; */
	
	/* Толщина рамки блока заголовка меню - снизу */
	/* --border-width-bottom-block-header-nav-panel: 0px; */
	
	/* Цвет рамки блока заголовка меню - для всех сторон */
	/* --border-color-block-header-nav-panel: #000000; */
	
	/* Внутренний верхний и нижний отступ блока заголовка меню */
	/* --padding-top-bottom-block-header-nav-panel: 15px; */
	
	/* Левый отступ заголовка в блоке заголовка */
	/* --padding-left-title-header-nav-panel: 20px; */

	/* Перенос слов через дефис в заголовке */
	/* Подсказка: значение "auto" - включить перенос, значение "none" - выключить перенос */
	--title-text-hyphens-header-nav-panel: auto;

	/* Максимальное количество строк в заголовке */
	/* Подсказка: длинный заголовок скроется за троеточием */
	--title-text-lines-header-nav-panel: 1;

	/* Цвет иконки "Закрыть" */
	--close-icon-color-button-header-nav-panel: #ffffff;

	/* Цвет иконки "Закрыть" - при наведении */
	--close-icon-color-button-hover-header-nav-panel: #FFFD82;

	/* Цвет иконки "Закрыть" - при клике и фокусе */
	--close-icon-color-button-active-header-nav-panel: #ffffff;

	/* Размер иконки "Закрыть" */
	--close-icon-size-button-header-nav-panel: 26px;

	/* Видимость иконки "Закрыть" */
	/* Подсказка №1: значение "1" - показывать иконку, значение "0" - скрыть иконку */
	/* Подсказка №2: даже если скрыть эту иконку, меню всё равно можно закрыть, кликнув на заголовок */
	--close-icon-opacity-button-header-nav-panel: 1;

	/* Шрифт заголовка меню */
	--title-text-font-family-panel: "PT Sans", sans-serif;
	/* --title-text-font-family-panel: tahoma, arial, helvetica, sans-serif; */

/* ------------------------------- */
/* ДИЗАЙН БЛОКА ПРОГРЕСС-БАРА - ПК */
/* ------------------------------- */

/* Закомментированные переменные перенёс в файлы: */
/* nav-panel-layout-separate-pc-css-premium.css и nav-panel-layout-compact-pc-css-premium.css */

	/* ------------------- */
	/* ВЕСЬ БЛОК ПРОГРЕССА */
	/* ------------------- */

		/* Видимость блока прогресса */
		/* Подсказка: "flex" - показывать, "none" - скрыть */
		--display-progress-nav-panel: flex;

		/* Видимость блока прогресса для незалогиненных пользователей */
		/* Подсказка: "flex" - показывать, "none" - скрыть */
		--display-not-logged-in-progress-nav-panel: none;

		/* Фон всего блока прогресса */
		--background-progress-nav-panel: #ffffff;
		
		/* Закругление блока прогресса - сверху слева и справа */
		/* Подсказка: видно, если есть фон или рамка */
		/* --radius-top-block-progress-nav-panel: 5px; */
		
		/* Закругление блока прогресса - снизу слева и справа */
		/* Подсказка: видно, если есть фон или рамка */
		/* --radius-bottom-block-progress-nav-panel: 5px; */
		
		/* Толщина рамки блока прогресса - сверху */
		/* --border-width-top-block-progress-nav-panel: 0px; */
		
		/* Толщина рамки блока прогресса - снизу */
		/* --border-width-bottom-block-progress-nav-panel: 0px; */
		
		/* Толщина рамки блока прогресса - слева, справа */
		/* --border-width-left-right-block-progress-nav-panel: 0px; */
		
		/* Цвет рамки блока прогресса - для всех сторон */
		/* --border-color-block-progress-nav-panel: #000000; */
		
		/* Внутренний отступ блока списка материалов - сверху и снизу */
		/* --padding-top-bottom-block-progress-nav-panel: 15px; */
		
		/* Внутренний отступ блока списка материалов - слева и справа */
		/* --padding-left-right-block-progress-nav-panel: 20px; */
		
		/* Шрифт во всём блоке прогресса */
		--font-family-progress-nav-panel: "PT Sans", sans-serif;

	/* ---------------------------------------------- */
	/* БЛОК - ЗАГОЛОВОК И ЧИСЛОВЫЕ ЗНАЧЕНИЯ ПРОГРЕССА */
	/* ---------------------------------------------- */

		/* Видимость блока "Заголовок с числовыми значениями" */
		/* Подсказка: "flex" - показывать, "none" - скрыть */
		--display-title-wrap-progress-nav-panel: flex;

		/* Выравнимание блока "Заголовок с числовыми значениями" */
		/* Подсказка: "left" - слева, "center" - по центру, "right" - справа */
		--align-title-wrap-progress-nav-panel: left;

		/* Толщина обводки блока "Заголовок с числовыми значениями" */
		--border-width-title-wrap-progress-nav-panel: 0px;

		/* Цвет обводки блока "Заголовок с числовыми значениями" */
		--border-color-title-wrap-progress-nav-panel: #333333;

			/* БЛОК - ЗАГОЛОВОК ПРОГРЕССА */
			/* -------------------------- */
			
				/* Видимость только заголовка */
				/* Подсказка: "block" - показывать, "none" - скрыть */
				--display-title-progress-nav-panel: block;

				/* Цвет заголовка прогресса */
				--color-title-wrap-progress-nav-panel: #333333;

				/* Жирность заголовка прогресса */
				--font-weight-title-wrap-progress-nav-panel: 700;
			
				/* Текст заголовка прогресса */
				--content-title-wrap-progress-nav-panel: 'Мій прогрес:';

				/* Размер заголовка прогресса */
				--font-size-title-wrap-progress-nav-panel: 1.8rem;
			
			/* БЛОК - ЧИСЛОВЫЕ ЗНАЧЕНИЯ ПРОГРЕССА */
			/* ---------------------------------- */
			
				/* Видимость только числовых значений прогресса */
				/* Подсказка: "flex" - показывать, "none" - скрыть */
				--display-numbers-progress-nav-panel: flex;

				/* Цвет числовых значений прогресса */
				--color-text-numbers-wrap-progress-nav-panel: #0aa0ff;

				/* Размер цифры - Количество пройденных уроков */
				--font-size-completed-lessons-progress-nav-panel: 1.8rem;

				/* Размер цифры - Общее количество уроков */
				--font-size-total-lessons-progress-nav-panel: 1.8rem;

				/* Текст "ИЗ" */
				--content-status-text-1-progress-nav-panel: 'з';

				/* Размер текста "ИЗ" */
				--font-size-status-text-1-progress-nav-panel: 1.8rem;

				/* Текст "Пройдено" - Применяется от 0% до 99% прогресса */
				--content-status-text-2-progress-nav-panel: 'пройдено';

				/* Размер текста "Пройдено" - Применяется от 0% до 99% прогресса */
				--font-size-status-text-2-progress-nav-panel: 1.8rem;

				/* Текст "Курс пройден" - Применяется при 100% прогресса */
				--content-status-text-2-100-progress-nav-panel: 'шлях пройдено!';

				/* Размер текста "Курс пройден" - Применяется при 100% прогресса */
				--font-size-status-text-2-100-progress-nav-panel: 1.8rem;

	/* ------------------------------------------ */
	/* БЛОК - ИКОНКА, ПОЛОСА ПРОГРЕССА И ПРОЦЕНТЫ */
	/* ------------------------------------------ */

		/* Видимость блока "Иконка, полоса прогресса и проценты" */
		/* Подсказка: "flex" - показывать, "none" - скрыть */
		--display-progress-wrap-progress-nav-panel: flex;

		/* БЛОК - ИКОНКА */
		/* ------------- */

			/* Видимость только иконки */
			/* Подсказка: "flex" - показывать, "none" - скрыть */
			--display-progress-icon-progress-nav-panel: flex;

			/* Путь до иконки - Применяется от 1% до 99% прогресса */
			/* Подсказка 1: загрузите иконку с квадратным соотношением сторон в Медиафайлы */
			/* Подсказка 2: скопируйте полный путь иконки и вставьте ниже между '' */
			--image-progress-icon-progress-nav-panel: url('https://experimentum-life-practice.com/wp-content/uploads/2026/06/rocket-4.png');

			/* Путь до иконки - Применяется при 0% прогресса */
			/* Подсказка: загрузите иконку и вставьте полный путь */
			--image-progress-icon-0-progress-nav-panel: url('https://experimentum-life-practice.com/wp-content/uploads/2026/06/rocket-4.png');

			/* Путь до иконки - Применяется при 0% прогресса */
			/* Подсказка: загрузите иконку и вставьте полный путь */
			--image-progress-icon-100-progress-nav-panel: url('https://experimentum-life-practice.com/wp-content/uploads/2026/06/target-1.png');

			/* Размер иконки */
			--size-progress-icon-progress-nav-panel: 35px;

		/* БЛОК - ПОЛОСА ПРОГРЕССА */
		/* ----------------------- */

			/* Видимость только полосы прогресса */
			/* Подсказка: "block" - показывать, "none" - скрыть */
			--display-progress-bar-progress-nav-panel: block;

			/* Фон НЕ ПРОЙДЕННОЙ полосы прогресса */
			--bg-progress-bar-progress-nav-panel: #E6EDF5;

			/* Фон ПРОЙДЕННОЙ полосы прогресса */
			--bg-progress-bar-done-progress-nav-panel: #0aa0ff;

			/* Закругление всей полосы прогресса */
			--radius-progress-bar-progress-nav-panel: 20px;

			/* Закругление ПРОЙДЕННОЙ полосы прогресса */
			--radius-progress-bar-done-progress-nav-panel: 10px;

			/* Высота полосы прогресса */
			--height-progress-bar-done-progress-nav-panel: 10px;

			/* Внутренний отступ полосы прогресса */
			--padding-progress-bar-progress-nav-panel: 4px;

		/* БЛОК - ПРОЦЕНТЫ */
		/* --------------- */

			/* Видимость только процентов */
			/* Подсказка: "flex" - показывать, "none" - скрыть */
			--display-percentage-wrap-progress-nav-panel: flex;

			/* Цвет процентов */
			--color-percentage-progress-nav-panel: #333333;

			/* Размер процентов */
			--font-size-percentage-progress-nav-panel: 1.8rem;

/* ------------------------------------------ */
/* ДИЗАЙН БЛОКА СПИСКА МАТЕРИАЛОВ В МЕНЮ - ПК */
/* ------------------------------------------ */

/* Закомментированные переменные перенёс в файлы: */
/* nav-panel-layout-separate-pc-css-premium.css и nav-panel-layout-compact-pc-css-premium.css */

	/* Фон списка материалов */
	/* Подсказка: поставьте значение "none", чтобы убрать фон */
	/* --bg-block-materials-nav-panel: none; */
	/* --bg-block-materials-nav-panel: #fff9ce; */

	/* Закругление блока списка материалов - сверху слева и справа */
	/* Подсказка: видно, если есть фон или рамка */
	/* --radius-top-block-materials-nav-panel: 5px; */
	
	/* Закругление блока списка материалов - снизу слева и справа */
	/* Подсказка: видно, если есть фон или рамка */
	/* --radius-bottom-block-materials-nav-panel: 5px; */
	
	/* Толщина рамки блока списка материалов - сверху */
	/* --border-width-top-block-materials-nav-panel: 0px; */
	
	/* Толщина рамки блока списка материалов - слева, справа, снизу */
	/* --border-width-left-right-bottom-block-materials-nav-panel: 0px; */
	
	/* Цвет рамки блока списка материалов - для всех сторон */
	/* --border-color-block-materials-nav-panel: #000000; */
	
	/* Внутренний отступ блока списка материалов - сверху */
	/* --padding-top-block-materials-nav-panel: 0px; */
	
	/* Внутренний отступ блока списка материалов - слева, справа и снизу */
	/* --padding-left-right-bottom-block-materials-nav-panel: 0px; */
	
}

/* ------------------------- */
/* НЕ ТРОГАЙТЕ ВСЁ, ЧТО НИЖЕ */
/* ------------------------- */

/* ------------------------------------------------- */
/* КОНТЕЙНЕР ВСЕГО СУПЕР-МЕНЮ И СОДЕРЖАНИЯ МАТЕРИАЛА */
/* ------------------------------------------------- */

/* Только на средних и больших экранах */
/* Начало ограничения экранов */
@media (min-width: 992px) {

.site-content .lesson-row {
    display: flex;
    justify-self: center;
	/* выравнивание меню слева или справа */
	flex-flow: var(--align-nav-panel);
    margin: 45px auto 50px;
    /* flex-flow: row; */
    /* width: 100%; */
    /* width: 1370px; */
    /* max-width: 1370px; */
    /* margin: 45px 0 50px; */
    /* margin: 0 auto; */
}
}
/* Конец ограничения экранов */

/* Ширина контейнера - на средних и больших экранах - отдельно */

@media (min-width: 1400px) {

.site-content .lesson-row {
    width: 1370px;
	/* flex-flow: row; */
}
}

@media (min-width: 1200px) and (max-width: 1399px) {

.site-content .lesson-row {
    width: 1170px;
	/* flex-flow: row; */
}
}

@media (min-width: 992px) and (max-width: 1199px) {

.site-content .lesson-row {
    width: 970px;
	/* flex-flow: row; */
}
}

/* ---------------------------- */
/* КОНТЕЙНЕР КОНТЕНТА МАТЕРИАЛА */
/* ---------------------------- */

/* Отступы Контейнера контента материала */

body .site-content .lesson-row .menu-opened.mbli3-left-menu + .container {
	padding-right: 15px;
    padding-left: 15px;
}

/* Растягиваем ширину контента материала на 100%, когда ВИДНО супер-меню */
/* Нужно, чтобы не конфликтовать с узким вариантом ширины материала (когда = 820px в настройках МБЛ) */
/* По сути - принудительно отключаем узкий вариант, когда видн меню */

/* Только на средних и больших экранах */
/* Начало ограничения экранов */
@media (min-width: 992px) {

body .site-content .lesson-row .menu-opened.mbli3-left-menu + .container {
	max-width: 100%;
	/* убрал !important у max-width, чтобы можно было корректно скрывать меню на нужных страницах и сохранять при этом исходную ширину контента */
	/* max-width: 100% !important; */
	/* особо ничего не решает */
	width: 100%;
}
}
/* Конец ограничения экранов */

/* -------------------------- */
/* КНОПКА ОТКРЫТИЯ СУПЕР-МЕНЮ */
/* -------------------------- */

/* Видимость кнопки */

/* Выносим кнопку "Список уроков" из меню на страницу -  для ВСЕХ экранов  */
/* Заодно принудительно показываем кнопку на смартфонах, чтобы при закрытом меню кнопка всегда была видна */

body .top-nav-row a.nav-item[data-mbli3-menu-toggle] {
	display: inline-flex!important;
	position: fixed;
}

/* Скрываем кнопку, если панель ОТКРЫТА */
/* Работает и для смартфонов */

body:has([class*="menu-opened"]) .top-nav-row a.nav-item[data-mbli3-menu-toggle] {
	/* display: none!important; */
}

/* Положение и дизайн кнопки "Список уроков" - НА СРЕДНИХ И БОЛЬШИХ ЭКРАНАХ */
/* ----------------------------------------------------------------------- */

/* Только на средних и больших экранах */
/* Начало ограничения экранов */
@media (min-width: 992px) {

body .top-nav-row a.nav-item[data-mbli3-menu-toggle] {
	color: var(--color-button-nav-panel);
	top: 267px;
	/* Скрываем оригинальный текст */
	font-size: 0rem;
    background: var(--bg-button-nav-panel);
	/* left: -68px; */
	transform: rotate(-90deg) translate(var(--ver-shift-button-nav-panel), var(--gor-shift-button-nav-panel));
    text-transform: uppercase;
    border-radius: var(--radius-button-nav-panel);
	transition: all 0.2s ease-in-out;
}

/* Меняем текст кнопки на произвольный */

body .top-nav-row a.nav-item[data-mbli3-menu-toggle]:after {
	content: var(--content-title-button-nav-panel);
	/* Размер текста кнопки */
	font-size: var(--size-button-nav-panel);
	line-height: 1.8rem;
	vertical-align: middle;
}

/* Примечание: закомментированные стили положения кнопки перенесены в файл для ПК - nav-panel-left-pc-css-premium.css и nav-panel-right-pc-css-premium.css */

/* Анимация кнопки "Список уроков" - при ЗАКРЫТИИ меню */

/* body:not(:has([class*="menu-opened"])) .top-nav-row a.nav-item[data-mbli3-menu-toggle] {
	left: -55px;
	animation-name: showbutton;
	animation-duration: .5s;
} */

/* @keyframes showbutton {
    0% { left: -115px; }
    100% { left: -55px; }
} */

/* Анимация кнопки "Список уроков" - при ОТКРЫТИИ меню */

/* body:has([class*="menu-opened"]) .top-nav-row a.nav-item[data-mbli3-menu-toggle] {
	left: -115px;
	animation-name: hidebutton;
	animation-duration: .5s;
} */

/* @keyframes hidebutton {
    0% { left: -55px; }
    100% { left: -115px; }
} */

/* Кнопка "Список уроков" - при наведении и клике */

body .top-nav-row a.nav-item[data-mbli3-menu-toggle]:hover {
    /* left: -52px; */
	background: var(--bg-button-hover-nav-panel);
	color: var(--color-button-hover-nav-panel)!important;
	transition: all 0.2s ease-in-out;
}

body .top-nav-row a.nav-item[data-mbli3-menu-toggle]:active {
    background: var(--bg-button-active-nav-panel);
	color: var(--color-button-active-nav-panel)!important;
}

/* Иконка внутри кнопки "Список уроков" */

body .top-nav-row .nav-item[data-mbli3-menu-toggle] .iconmoon {
	color: var(--color-button-nav-panel)!important;
	transition: all 0.2s ease-in-out;
}

/* Примечание: закомментированные стили иконки в кнопке перенесены в файл для ПК - nav-panel-left-pc-css-premium.css и nav-panel-right-pc-css-premium.css */

/* body .top-nav-row .nav-item[data-mbli3-menu-toggle] .iconmoon:before {
	content: var(--show-icon-symbol-button-nav-panel);
} */

/* Цвет иконки в кнопке - при наведении и клике */

body .top-nav-row .nav-item[data-mbli3-menu-toggle]:hover .iconmoon {
	color: var(--color-button-hover-nav-panel)!important;
}

body .top-nav-row .nav-item[data-mbli3-menu-toggle]:active .iconmoon {
	color: var(--color-button-active-nav-panel)!important;
}
}
/* Конец ограничения экранов */


/* Название кнопки при СКРЫТОМ Меню */


/* --------------------------------------------------------- */
/* КОНТЕЙНЕР ВСЕГО СУПЕР-МЕНЮ - НА СРЕДНИХ И БОЛЬШИХ ЭКРАНАХ */
/* --------------------------------------------------------- */

/* Только на средних и больших экранах */
/* Начало ограничения экранов */
@media (min-width: 992px) {

/* Контейнер Меню */

body .site-content .menu-opened.mbli3-left-menu {
	display: flex;
    flex-flow: column;
	/* Расстояние между блоками - заголовок меню, прогресс и список уроков */
	gap: var(--gap-container-nav-panel);
    left: 0;
    padding-left: 15px;
	padding-right: 15px;
    /* margin-right: 15px; */
	/* Фон всего контейнера меню */
	background: var(--bg-container-nav-panel);
	z-index: auto;
    box-shadow: none;
    animation: none;
	/* Заголовок ПРИЛИПАЕТ в конце страницы */
	overflow: visible;

	/* Заголовок НЕ прилипает в конце страницы */
    /* overflow: hidden; */

	/* Убрал после выноса заголовка */
    /* overflow-y: auto; */
}

/* Анимация Меню - при ОТКРЫТИИ */

/* body .site-content .menu-opened.mbli3-left-menu {
	right: -104px;
	animation-name: menu_opacity;
	animation-duration: .5s;
}

@keyframes menu_opacity {
    0% { opacity: 0%; }
    100% { opacity: 100%; }
} */

/* Вертикальный отступ Контейнера Меню - Если есть вкладка с Домашним заданием или с Вложениями */

/* body .site-content .lesson-row:has([class*="lesson-content-nav"]) .menu-opened.mbli3-left-menu, */
body .site-content .lesson-row:has([class*="lesson-tabs"][class*="tabs-count-2"]) .menu-opened.mbli3-left-menu,
body .site-content .lesson-row:has([class*="lesson-tabs"][class*="tabs-count-3"]) .menu-opened.mbli3-left-menu {
	margin-top: 42px;
}
}
/* Конец ограничения экранов */

/* Позиция и ширина Контейнера Меню - на средних и больших экранах - отдельно */

@media (min-width: 1400px) {

body .site-content .menu-opened.mbli3-left-menu {
    position: sticky;
	top: 45px;
	width: var(--width-container-nav-panel);
	max-width: 500px;
	height: 100vh;
}
}

@media (min-width: 1200px) and (max-width: 1399px) {

body .site-content .menu-opened.mbli3-left-menu {
    position: sticky;
	top: 45px;
	width: var(--width-container-nav-panel);
	max-width: 500px;
	height: 100vh;
}
}

@media (min-width: 992px) and (max-width: 1199px) {

body .site-content .menu-opened.mbli3-left-menu {
    position: sticky;
	top: 45px;
	width: var(--width-container-nav-panel);
	max-width: 440px;
	height: 100vh;
}
}

/* -------------------------------------------------- */
/* БЛОК ЗАГОЛОВКА МЕНЮ - НА СРЕДНИХ И БОЛЬШИХ ЭКРАНАХ */
/* -------------------------------------------------- */

/* Только на средних и больших экранах */
/* Начало ограничения экранов */
@media (min-width: 992px) {

/* Контейнер Заголовка Меню */

body .site-content .menu-opened.mbli3-left-menu .category-title-navigation {
    display: flex;
    align-items: center;
	flex-flow: row;
    /* flex-flow: row-reverse; */
	position: sticky;
    /* position: relative; */
    top: 0;
    width: 100%;
	max-width: 100% !important;
	/* padding-right: 15px; */
	/* padding-left: 15px; */
    background: var(--title-bg-header-nav-panel);
	
	/* толщина рамки блока заголовка меню */
	border: solid var(--border-color-block-header-nav-panel);
	border-top-width: var(--border-width-left-right-top-block-header-nav-panel);
	border-right-width: var(--border-width-left-right-top-block-header-nav-panel);
	border-bottom-width: var(--border-width-bottom-block-header-nav-panel);
	border-left-width: var(--border-width-left-right-top-block-header-nav-panel);
	
	/* закругление блока заголовка меню */
	border-top-left-radius: var(--radius-top-block-header-nav-panel);
	border-top-right-radius: var(--radius-top-block-header-nav-panel);
	border-bottom-right-radius: var(--radius-bottom-block-header-nav-panel);
	border-bottom-left-radius: var(--radius-bottom-block-header-nav-panel);
	
	/* border-radius: var(--radius-title-bg-header-nav-panel); */
    z-index: 501;
	/* плавность анимации */
	transition: .2s ease;
	
	/* для кликабельного заголовка и корректного переноса строк + количество строк */
	/* Важно: горизонтальные отступы нельзя добавлять, иначе сдвинется кликабельность по ширине, */
	/* поэтому здесь только вертикальные отступы */
	padding: var(--padding-top-bottom-block-header-nav-panel) 0px var(--padding-top-bottom-block-header-nav-panel) 0px;
}

/* Фон заголовка меню - при наведении */

body .site-content .menu-opened.mbli3-left-menu .category-title-navigation:hover {
    background: var(--title-bg-hover-header-nav-panel);
}

/* Заголовок родительской рубрики */

body .site-content .menu-opened.mbli3-left-menu .category-title-navigation .mbli3-page-title {
	color: var(--title-text-color-header-nav-panel);
	margin: 0;
	/* width: 100%; */
    text-align: left;
	/* padding: 15px 15px; */
	line-height: 1.3;
	/* Скрываем оригинальный текст */
	font-size: 0rem;
	font-weight: var(--title-text-weight-panel);
	font-family: var(--title-text-font-family-panel);
	/* плавность анимации */
	transition: .2s ease;

	/* Обрезаем до ОДНОЙ строки (обрезаем длинные названия рубрик) */
	/* Убираем перенос текста */
	/* white-space: nowrap; */
	/* Обрезаем всё за пределами блока */
    /* overflow: hidden; */
	/* Добавляем многоточие */
    /* text-overflow: ellipsis; */

	/* Задаём максимальное количество строк в заголовке */
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: var(--title-text-lines-header-nav-panel);
	-webkit-box-orient: vertical;

	/* Расставляем переносы длинных слов */
	hyphens: var(--title-text-hyphens-header-nav-panel);

	/* для кликабельного заголовка и корректного переноса строк + кол-во строк */
	/* Важно: вертикальные отступы нельзя добавлять, иначе некорректно работает опция количества строк, */
	/* поэтому здесь только горизонтальные отступы */
	
	/* если иконка "Закрыть" скрыта (0), то правый отступ заголовка будет равен 20px */
	/* если иконка "Закрыть" видна (1), то правый отступ заголовка будет равен 5px */
	/* дополнительно: левый отступ заголовка в блоке заголовка */
	padding: 0px calc(20px - (15px * var(--close-icon-opacity-button-header-nav-panel))) 0px var(--padding-left-title-header-nav-panel);

	/* border: 1px solid #ffffff; */
}

/* Цвет заголовка родительской рубрики - при наведении */

body .site-content .menu-opened.mbli3-left-menu .category-title-navigation:hover .mbli3-page-title {
	color: var(--title-text-color-hover-header-nav-panel);
}

/* Меняем текст Заголовка родительской рубрики на произвольный */

body .site-content .menu-opened.mbli3-left-menu .category-title-navigation .mbli3-page-title:after {
	content: var(--content-title-header-nav-panel);
	/* Размер заголовка меню */
	font-size: var(--title-text-size-header-nav-panel);
	vertical-align: middle;
}
}
/* Конец ограничения экранов */

/* Ширина Заголовка Меню - на средних и больших экранах - отдельно */
/* Нужно для того, чтобы уместить и выровнять Заголовок с Иконкой закрытия */
/* Также нужно для того, чтобы корректно показывать или скрывать иконку закрытия */

/* Начало отдельных ограничений экранов */
@media (min-width: 1400px) {

body .site-content .menu-opened.mbli3-left-menu .category-title-navigation .mbli3-page-title {
	/* если иконка "Закрыть" скрыта (0), то ширина заголовка будет равна 100% */
	/* если иконка "Закрыть" видна (1), то ширина заголовка будет равна 86% */
	width: calc(100% - calc(14% * var(--close-icon-opacity-button-header-nav-panel)));
	/* width: 86%; */
}
}

@media (min-width: 1200px) and (max-width: 1399px) {

body .site-content .menu-opened.mbli3-left-menu .category-title-navigation .mbli3-page-title {
	/* если иконка "Закрыть" скрыта (0), то ширина заголовка будет равна 100% */
	/* если иконка "Закрыть" видна (1), то ширина заголовка будет равна 83% */
	width: calc(100% - calc(17% * var(--close-icon-opacity-button-header-nav-panel)));
	/* width: 83%; */
}
}

@media (min-width: 992px) and (max-width: 1199px) {

body .site-content .menu-opened.mbli3-left-menu .category-title-navigation .mbli3-page-title {
	/* если иконка "Закрыть" скрыта (0), то ширина заголовка будет равна 100% */
	/* если иконка "Закрыть" видна (1), то ширина заголовка будет равна 80% */
	width: calc(100% - calc(20% * var(--close-icon-opacity-button-header-nav-panel)));
	/* width: 80%; */
}
}
/* Конец отдельных ограничений экранов */

/* Только на средних и больших экранах */
/* Начало ограничения экранов */
@media (min-width: 992px) {

/* Кнопка "Закрыть" в меню */

body .site-content .menu-opened.mbli3-left-menu .mbli3-menu-close {
	display: flex;
	color: var(--close-icon-color-button-header-nav-panel);
	font-size: var(--close-icon-size-button-header-nav-panel);
	margin-top: 0;
	transition: none;
	float: none;
	
	/* для кликабельного заголовка */
	flex-flow: row-reverse;
	align-items: center;
	position: absolute;
	width: 100%;
	height: 100%;
	border: none;
	/* border: 2px solid #ffffff; */
}

/* Кнопка "Закрыть" в меню - при наведении */

body .site-content .menu-opened.mbli3-left-menu .mbli3-menu-close:hover {
	color: var(--close-icon-color-button-hover-header-nav-panel);
}

/* Кнопка "Закрыть" в меню - при клике и фокусе */

body .site-content .menu-opened.mbli3-left-menu .mbli3-menu-close:active,
body .site-content .menu-opened.mbli3-left-menu .mbli3-menu-close:focus {
	color: var(--close-icon-color-button-active-header-nav-panel);
}

/* Иконка в кнопке "Закрыть" */

body .site-content .menu-opened.mbli3-left-menu .mbli3-menu-close .icon-close {
	z-index: 502;
	transition: .2s ease;
	
	/* для показа (1) или скрытия (0) иконки */
	opacity: var(--close-icon-opacity-button-header-nav-panel);

	/* для кликабельного заголовка */
	text-align: center;
	/* border: 1px solid #ffffff; */
	/* margin: 10px; */
}

/* Примечание: закомментированные стили иконки "Закрыть" в заголовке меню перенесены в файл для ПК - nav-panel-left-pc-css-premium.css и nav-panel-right-pc-css-premium.css */

/* body .site-content .menu-opened.mbli3-left-menu .mbli3-menu-close .icon-close:before {
	content: var(--close-icon-symbol-button-header-nav-panel);
} */

}
/* Конец ограничения экранов */

/* Ширина Кнопки "Закрыть" - на средних и больших экранах - отдельно */
/* Нужно для того, чтобы уместить и выровнять Заголовок с Иконкой закрытия */

@media (min-width: 1400px) {

body .site-content .menu-opened.mbli3-left-menu .mbli3-menu-close .icon-close {
	width: 14%;
}
}

@media (min-width: 1200px) and (max-width: 1399px) {

body .site-content .menu-opened.mbli3-left-menu .mbli3-menu-close .icon-close {
	width: 17%;
}
}

@media (min-width: 992px) and (max-width: 1199px) {

body .site-content .menu-opened.mbli3-left-menu .mbli3-menu-close .icon-close {
	width: 20%;
}
}

/* --------------------- */
/* БЛОК ПРОГРЕССА В МЕНЮ */
/* --------------------- */

/* Только на средних и больших экранах */
/* Начало ограничения экранов */
@media (min-width: 992px) {

/* ГЛАВНЫЙ БЛОК ПРОГРЕССА */
/* ---------------------- */

.progress-in-side-menu {
	display: var(--display-progress-nav-panel);
	flex-flow: column;
	gap: 10px;
	position: relative;
	top: 0;
	width: 100%;
	max-width: 100%;
	background: var(--background-progress-nav-panel);
	/* Внутренние отступы блока списка материалов */
	padding-left: var(--padding-left-right-block-progress-nav-panel);
	padding-right: var(--padding-left-right-block-progress-nav-panel);
	padding-top: var(--padding-top-bottom-block-progress-nav-panel);
	padding-bottom: var(--padding-top-bottom-block-progress-nav-panel);
	/* padding: 15px 20px 15px 20px; */
	
	/* толщина рамки блока прогресса */
	border: solid var(--border-color-block-progress-nav-panel);
	border-top-width: var(--border-width-top-block-progress-nav-panel);
	border-right-width: var(--border-width-left-right-block-progress-nav-panel);
	border-bottom-width: var(--border-width-bottom-block-progress-nav-panel);
	border-left-width: var(--border-width-left-right-block-progress-nav-panel);
	
	/* закругление блока прогресса */
	border-top-left-radius: var(--radius-top-block-progress-nav-panel);
	border-top-right-radius: var(--radius-top-block-progress-nav-panel);
	border-bottom-right-radius: var(--radius-bottom-block-progress-nav-panel);
	border-bottom-left-radius: var(--radius-bottom-block-progress-nav-panel);
	
	font-family: var(--font-family-progress-nav-panel);
	z-index: 500;
}

/* Видимость блока Прогресса для незалогиненных пользователей */

body:not(.logged-in) .progress-in-side-menu {
	display: var(--display-not-logged-in-progress-nav-panel);
}

/* ОБЁРТКА ЗАГОЛОВКА И ЧИСЛОВЫХ ЗНАЧЕНИЙ ПРОГРЕССА */
/* ----------------------------------------------- */

.progress-in-side-menu .progress-title-wrap {
	display: var(--display-title-wrap-progress-nav-panel);
	flex-flow: row;
	gap: 10px;
	align-items: center;
	justify-content: var(--align-title-wrap-progress-nav-panel);
	padding: 0px;
	line-height: normal;
	border: var(--border-width-title-wrap-progress-nav-panel) solid var(--border-color-title-wrap-progress-nav-panel);
}

/* Заголовок прогресса */

.progress-in-side-menu .progress-title {
	display: var(--display-title-progress-nav-panel);
	color: var(--color-title-wrap-progress-nav-panel);
	font-weight: var(--font-weight-title-wrap-progress-nav-panel);
	/* Скрываем оригинальный текст из скрипта */
	font-size: 0rem;
}

/* Меняем текст Заголовка прогресса на произвольный */

.progress-in-side-menu .progress-title:after {
	content: var(--content-title-wrap-progress-nav-panel);
	/* Размер заголовка прогресса */
	font-size: var(--font-size-title-wrap-progress-nav-panel);
	vertical-align: middle;
}

/* Обёртка числовых значений прогресса */

.progress-in-side-menu .progress-numbers-wrap {
	display: var(--display-numbers-progress-nav-panel);
	flex-flow: row;
	gap: 5px;
	color: var(--color-text-numbers-wrap-progress-nav-panel);
}

/* Количество пройденных уроков */

.progress-in-side-menu .quantity-completed-lessons {
	font-size: var(--font-size-completed-lessons-progress-nav-panel);
}

/* Скрываем Количество пройденных уроков - Когда 100% прогресса */

.progress-in-side-menu:has(.progress-value[style="width: 100%;"]) .quantity-completed-lessons {
	display: none;
}

/* Общее количество уроков */

.progress-in-side-menu .quantity-total-lessons {
	font-size: var(--font-size-total-lessons-progress-nav-panel);
}

/* Скрываем Общее количество уроков - Когда 100% прогресса */

.progress-in-side-menu:has(.progress-value[style="width: 100%;"]) .quantity-total-lessons {
	display: none;
}

/* Текст "ИЗ" */

.progress-in-side-menu .status-text-1 {
	/* Скрываем оригинальный текст из скрипта */
	font-size: 0rem;
}

/* Меняем текст "ИЗ" на произвольный */

.progress-in-side-menu .status-text-1:after {
	content: var(--content-status-text-1-progress-nav-panel);
	/* Размер текста "ИЗ" */
	font-size: var(--font-size-status-text-1-progress-nav-panel);
	vertical-align: middle;
}

/* Скрываем текст "ИЗ" - Когда 100% прогресса */

.progress-in-side-menu:has(.progress-value[style="width: 100%;"]) .status-text-1 {
	display: none;
}

/* Текст "ПРОЙДЕНО" */

.progress-in-side-menu .status-text-2 {
	/* Скрываем оригинальный текст из скрипта */
	font-size: 0rem;
}

/* Меняем текст "Пройдено" на произвольный - Применяется от 0% до 99% прогресса */

.progress-in-side-menu .status-text-2:after {
	content: var(--content-status-text-2-progress-nav-panel);
	/* Размер заголовка прогресса */
	font-size: var(--font-size-status-text-2-progress-nav-panel);
	vertical-align: middle;
}

/* Меняем текст "Пройдено" на произвольный - Применяется при 100% прогресса */

.progress-in-side-menu:has(.progress-value[style="width: 100%;"]) .status-text-2:after {
	content: var(--content-status-text-2-100-progress-nav-panel);
	/* Размер заголовка прогресса */
	font-size: var(--font-size-status-text-2-100-progress-nav-panel);
	vertical-align: middle;
}

/* ОБЁРТКА ИКОНКИ, ВИЗУАЛЬНОЙ ПОЛОСЫ ПРОГРЕССА И ПРОЦЕНТОВ */
/* ------------------------------------------------------- */

.progress-in-side-menu .progress-wrap {
	display: var(--display-progress-wrap-progress-nav-panel);
	flex-flow: row;
	gap: 10px;
	flex-wrap: nowrap;
	align-items: center;
	width: 100%;
	padding: 0px;
	/* border: 1px solid #000000; */
}

/* Блок Иконки перед полосой прогресса */

.progress-in-side-menu .progress-icon {
	display: var(--display-progress-icon-progress-nav-panel);
	flex: none;
	width: var(--size-progress-icon-progress-nav-panel);
	height: var(--size-progress-icon-progress-nav-panel);
	background: transparent;
	/* Изображение - Применяется от 1% до 99% прогресса */
	background-image: var(--image-progress-icon-progress-nav-panel);
	background-size: cover;
	background-repeat: no-repeat; 
	background-position: center;
	/* border: 1px solid #000000; */
}

/* Изображение при 0% прогресса */

.progress-in-side-menu .progress-wrap:has(.progress-value[style="width: 0%;"]) .progress-icon {
	/* Изображение при 0% прогресса */
	background-image: var(--image-progress-icon-0-progress-nav-panel);
}

/* Изображение при 100% прогресса */

.progress-in-side-menu .progress-wrap:has(.progress-value[style="width: 100%;"]) .progress-icon {
	/* Изображение при 100% прогресса */
	background-image: var(--image-progress-icon-100-progress-nav-panel);
}

/* Обёртка визуальной полосы прогресса */

.progress-in-side-menu .progress-bar-wrap {
	display: var(--display-progress-bar-progress-nav-panel);
	width: 100%;
}

/* Контейнер полосы прогресса - вся область шкалы */

.progress-in-side-menu .progress-bar-container {
	background: var(--bg-progress-bar-progress-nav-panel);
	padding: var(--padding-progress-bar-progress-nav-panel);
	border-radius: var(--radius-progress-bar-progress-nav-panel);
	box-sizing: border-box;
}

/* Пройденная полоса прогресса (закрашенная) - выполненный процент */

.progress-in-side-menu .progress-value {
	height: var(--height-progress-bar-done-progress-nav-panel);
	max-width: 100%;
	background: var(--bg-progress-bar-done-progress-nav-panel);
	border-radius: var(--radius-progress-bar-done-progress-nav-panel);
}

/* Обёртка процентов после полосы прогресса */

.progress-in-side-menu .progress-percentage-wrap {
	display: var(--display-percentage-wrap-progress-nav-panel);
	gap: 2px;
	flex: none;
	color: var(--color-percentage-progress-nav-panel);
	background: transparent;
	font-size: var(--font-size-percentage-progress-nav-panel);
	/* border: 1px solid #000000; */
}

/* Реальный процент пройденных уроков */

.progress-in-side-menu .value-no-percentage {
	
}

/* Стилизация символа процентов (%) */

.progress-in-side-menu .percentage-symbol {
	
}
}
/* Конец ограничения экранов */

/* Конец стилей для Прогресс-бара */

/* ------------------------------------------------------------ */
/* БЛОК СПИСКА МАТЕРИАЛОВ В МЕНЮ - НА СРЕДНИХ И БОЛЬШИХ ЭКРАНАХ */
/* ------------------------------------------------------------ */

/* Принудительно убираем фиксацию списка материалов, когда активна опция "Зафиксировать фон" */

body .site-content .menu-opened.mbli3-left-menu .mbli3-left-menu-holder {
	position: relative;
}

/* Только на средних и больших экранах */
/* Начало ограничения экранов */
@media (min-width: 992px) {

/* Внешний контейнер списка Материалов */

body .site-content .menu-opened.mbli3-left-menu .mbli3-left-menu-holder {
	/* верхний отступ, кажется, не нужен, так как в Контейнере всего супер-меню есть GAP */
	/* нужно для корректного закругления карточек */
	/* padding-top: 30px; */
	
	min-height: auto;

	/* внутренние отступы контейнера списка материалов */
	padding-top: var(--padding-top-block-materials-nav-panel);
	padding-left: var(--padding-left-right-bottom-block-materials-nav-panel);
	padding-right: var(--padding-left-right-bottom-block-materials-nav-panel);
	padding-bottom: var(--padding-left-right-bottom-block-materials-nav-panel);
	
	/* фон контейнера списка материалов */
	background: var(--bg-block-materials-nav-panel);
	
	/* толщина рамки контейнера списка материалов */
	border: solid var(--border-color-block-materials-nav-panel);
	border-top-width: var(--border-width-top-block-materials-nav-panel);
	border-right-width: var(--border-width-left-right-bottom-block-materials-nav-panel);
	border-bottom-width: var(--border-width-left-right-bottom-block-materials-nav-panel);
	border-left-width: var(--border-width-left-right-bottom-block-materials-nav-panel);
	
	/* закругление контейнера списка материалов */
	border-top-left-radius: var(--radius-top-block-materials-nav-panel);
	border-top-right-radius: var(--radius-top-block-materials-nav-panel);
	border-bottom-right-radius: var(--radius-bottom-block-materials-nav-panel);
	border-bottom-left-radius: var(--radius-bottom-block-materials-nav-panel);
	
	/* отображать полосу прокрутки */
	overflow-y: auto;
	overflow-x: hidden;
	/* overflow-x: visible; */

	/* тонкая полоса прокрутки */
	scrollbar-width: thin;

	/* скрыть полосу прокрутки */
	scrollbar-width: none;
}

/* Главная Обёртка Контейнера списка Материалов */

body .site-content .menu-opened.mbli3-left-menu .mbli3-left-menu-holder .materials-block-one-column {
    margin: 0;
	background: none;
}

/* Контейнер списка Материалов */

body .site-content .menu-opened.mbli3-left-menu .materials-block-one-column .container {
	max-width: 100%!important;
	width: 100%;
	/* padding-right: 15px; */
	/* padding-left: 15px; */
	background: none;

	/* убираем отступы */
	padding: 0;
}

/* Обёртка списка Материалов */

body .site-content .menu-opened.mbli3-left-menu .materials-block-one-column .container .row {
    display: flex;
	flex-flow: column;
    /* flex-wrap: wrap; */
	background: none;
	margin: 0;

	/* отступ между материалами */
	/* нужно для корректного закругления карточек */
	/* gap: 30px; */
}
}
/* Конец ограничения экранов */





/* ПОПРОБОВАТЬ ?????? */

/* Перенести скриптом элементы .icons-top и .icons-bottom внутрь col-thumb ??? */

/* Так будет проще оперировать Обложкой и Индикаторами по отдельности */