/* Задайте своё человеческое название файла между '' */
/* --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 {

/* ----------------------------------------- */
/* КОНТЕЙНЕР ВСЕГО СУПЕР-МЕНЮ - НА МОБИЛЬНЫХ */
/* ----------------------------------------- */
	
	/* Ширина всего супер-меню */
	/* Важно: допустимо минимум - "60%", максимум - "80%" (оптимально для закрытия пальцем) */
	/* Примечание: можно поставить и "100%", но тогда меню можно закрыть только нажав на крестик */
	--width-container-mobile-panel-1: 80%;
	
/* ------------------------------------------------ */
/* ДИЗАЙН КНОПКИ ОТКРЫТИЯ СУПЕР-МЕНЮ - НА МОБИЛЬНЫХ */
/* ------------------------------------------------ */

	/* Текст кнопки */
	/* Подсказка: заменяет родной текст кнопки из настроек Панели навигации */
	--content-title-button-mobile-panel-1: 'Меню';
	
	/* Размер текста кнопки */
	--size-button-mobile-panel-1: 1.7rem;
	
	/* Вертикальное смещение кнопки "Выбрать урок" - на мобильных */
	--ver-shift-button-mobile-panel-1: 0px;

	/* Горизонтальное смещение кнопки "Выбрать урок" - на мобильных */
	/* Подсказка: настройте под себя, если изменили текст кнопки */
	--gor-shift-button-mobile-panel-1: -60px;
	
	/* Закругление кнопки "Выбрать урок" - на мобильных */
	--radius-button-mobile-panel-1: 5px;

	/* Фон кнопки "Выбрать урок" - на мобильных */
	--bg-button-mobile-panel-1: #83b444;

	/* Цвет текста кнопки "Выбрать урок" - на мобильных */
	--color-button-mobile-panel-1: #ffffff;

	/* Фон кнопки "Выбрать урок" - на мобильных - при наведении */
	--bg-button-hover-mobile-panel-1: #8BBE48;

	/* Цвет текста и иконки в кнопке "Выбрать урок" - на мобильных - при наведении */
	--color-button-hover-mobile-panel-1: #ffffff;

	/* Фон кнопки "Выбрать урок" - на мобильных - при клике */
	--bg-button-active-mobile-panel-1: #83b444;

	/* Цвет текста и иконки в кнопке "Выбрать урок" - на мобильных - при клике */
	--color-button-active-mobile-panel-1: #ffffff;

	/* Иконка в кнопке "Выбрать урок" (код шрифта Awesome) - на мобильных */
	/* Пример: "\f138" - вперёд, "\f13a" - вниз, "\f139" - вверх, "\f0e8" - карта */
	--show-icon-symbol-button-mobile-panel-1: "\f139";

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

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

	/* Фон заголовка панели - на мобильных */
	--title-bg-mobile-panel-1: #0AA0FF;

	/* Цвет заголовка панели - на мобильных */
	--title-text-color-mobile-panel-1: #ffffff;

	/* Размер заголовка панели - на мобильных */
	--title-text-size-mobile-panel-1: 20px;

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

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

	/* Иконка "Закрыть" (код шрифта Awesome) - на мобильных */
	/* Пример: "\f00d" - крестик, "\f137" - назад */
	--close-icon-symbol-button-mobile-panel-1: "\f00d";

	/* Цвет иконки "Закрыть" - на мобильных */
	--close-icon-color-button-mobile-panel-1: #ffffff;

	/* Цвет иконки "Закрыть" - на мобильных - при наведении */
	--close-icon-color-button-hover-mobile-panel-1: #FFFD82;

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

	/* Размер иконки "Закрыть" - на мобильных */
	--close-icon-size-button-mobile-panel-1: 26px;

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

	/* Фон списка материалов - на мобильных */
	--bg-block-materials-mobile-panel-1: #f3f3f3;
	
	/* Внутренний отступ блока списка материалов - слева и справа */
	--padding-left-right-mobile-panel-1: 10px;

/* ------------------------------------------------ */
/* ДИЗАЙН КАРТОЧЕК МАТЕРИАЛОВ В МЕНЮ - НА МОБИЛЬНЫХ */
/* ------------------------------------------------ */

	/* Закругление карточки */
	--radius-mobile-panel-1: 25px;

	/* Внутренний отступ карточки урока */
	--padding-mobile-panel-1: 15px;
	
	/* Расстояние между карточками */
	--margin-bottom-mobile-panel-1: 20px;

	/* ----------------------- */
	/* НАСТРОЙКИ ФОНА КАРТОЧКИ */
	/* ----------------------- */

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

			/* Фон ОТКРЫТОГО материала */
			--open-bg-mobile-panel-1: #ffffff;

			/* Фон ОТКРЫТОГО материала - при наведении */
			--open-bg-hover-mobile-panel-1: #DFECE0;
			
			/* Фон ОТКРЫТОГО ТЕКУЩЕГО материала */
			--open-current-bg-mobile-panel-1: #DFECE0;

		/* ЗАКРЫТЫЙ МАТЕРИАЛ */
		/* ----------------- */

			/* Фон ЗАКРЫТОГО материала */
			--close-bg-mobile-panel-1: #ffffff;

			/* Фон ЗАКРЫТОГО материала - при наведении */
			--close-bg-hover-mobile-panel-1: #EED5D5;
			
			/* Фон ЗАКРЫТОГО ТЕКУЩЕГО материала */
			--close-current-bg-mobile-panel-1: #EED5D5;

		/* ЗАКРЫТЫЙ МАТЕРИАЛ АВТОТРЕНИНГА */
		/* ------------------------------ */

			/* Фон материала Автотренинга */
			--auto-bg-mobile-panel-1: #ffffff;

			/* Фон материала Автотренинга - при наведении */
			--auto-bg-hover-mobile-panel-1: #D8D8D8;

			/* Прозрачность полосатого наложения ЗАКРЫТОГО материала Автотренинга */
			/* Подсказка: "0" - наложение скрыто, "1" - наложение видно полностью */
			--auto-overlay-opacity-mobile-panel-1: 1;
			
			/* Прозрачность полосатого наложения ЗАКРЫТОГО материала Автотренинга - при наведении */
			/* Подсказка: "0" - наложение скрыто, "1" - наложение видно полностью */
			--auto-overlay-opacity-hover-mobile-panel-1: 1;

	/* --------------------------- */
	/* НАСТРОЙКИ КОНТЕНТА КАРТОЧКИ */
	/* --------------------------- */

		/* Перенос слов в заголовке */
		/* Поставьте "auto", чтобы переносить слова через дефис */
		/* Поставьте "none", чтобы убрать перенос слов  */
		--title-and-description-hyphens-mobile-panel-1: auto;
		
		/* Прозрачность контента в ТЕКУЩЕМ материале */
		--content-opacity-current-mobile-panel-1: 0.3;
		
		/* Прозрачность контента ОТКРЫТОГО материала - при наведении */
		--content-opacity-open-hover-mobile-panel-1: 0.3;
		
		/* Прозрачность контента ЗАКРЫТОГО материала - при наведении */
		--content-opacity-closed-hover-mobile-panel-1: 0.3;
		
		/* Прозрачность контента ЗАКРЫТОГО материала Автотренинга - при наведении */
		--content-opacity-auto-hover-mobile-panel-1: 0.3;
		
		/* ЗАГОЛОВОК: */
		/* ---------- */

			/* Количество строк в заголовке материала */
			--title-lines-mobile-panel-1: 1;

			/* Размер заголовка */
			--title-size-mobile-panel-1: 2rem;

			/* Жирность заголовка материала */
			--title-weight-mobile-panel-1: 400;
			
			/* Шрифт заголовка */
			--title-font-family-mobile-panel-1: "PT Sans", sans-serif;
			/* --title-font-family-mobile-panel-1: tahoma, arial, helvetica, sans-serif; */

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

					/* Цвет заголовка - в ОТКРЫТОМ материале */
					--title-color-opened-mobile-panel-1: #000000;
					
					/* Цвет заголовка - в ОТКРЫТОМ материале - при наведении */
					--title-color-opened-hover-mobile-panel-1: #000000;
					
					/* Цвет заголовка - в ОТКРЫТОМ ТЕКУЩЕМ материале */
					--open-title-color-current-mobile-panel-1: #000000;

				/* ЗАКРЫТЫЙ МАТЕРИАЛ */
				/* ----------------- */

					/* Цвет заголовка - в ЗАКРЫТОМ материале */
					--title-color-closed-mobile-panel-1: #000000;
			
					/* Цвет заголовка - в ЗАКРЫТОМ материале - при наведении */
					--title-color-closed-hover-mobile-panel-1: #d90000;
					
					/* Цвет заголовка - в ЗАКРЫТОМ ТЕКУЩЕМ материале */
					--close-title-color-current-mobile-panel-1: #d90000;

				/* ЗАКРЫТЫЙ МАТЕРИАЛ АВТОТРЕНИНГА */
				/* ------------------------------ */

					/* Цвет заголовка - в ЗАКРЫТОМ материале Автотренинга */
					--title-color-inaccessible-mobile-panel-1: #000000;
				
					/* Цвет заголовка - в ЗАКРЫТОМ материале Автотренинга - при наведении */
					--title-color-inaccessible-hover-mobile-panel-1: #000000;

	/* ----------------------------------- */
	/* НАСТРОЙКИ ИКОНКИ - В КОНЦЕ КАРТОЧКИ */
	/* ----------------------------------- */

		/* Видимость иконки в конце карточки */
		/* Подсказка: "flex" - показывать, "none" - скрыть */
		--lock-icon-display-mobile-panel-1: none;

		/* Иконка */
		/* "\f105" - стрелка вправо */
		--lock-icon-content-mobile-panel-1: "\f105";

		/* Размер иконки */
		--lock-icon-size-mobile-panel-1: 2rem;
		
		/* Размер фона иконки */
		/* Подсказка: ширина = высота */
		--lock-icon-bg-size-mobile-panel-1: 30px;

		/* Закругление фона иконки */
		--lock-icon-radius-mobile-panel-1: 10px;
		
		/* Фон иконки - по умолчанию */
		--lock-icon-bg-mobile-panel-1: rgba(245, 245, 245, 0.9);
		
		/* Фон иконки - по умолчанию - при наведении */
		--lock-icon-bg-hover-mobile-panel-1: rgba(245, 245, 245, 0.9);

		/* Прозрачность иконки в ТЕКУЩЕМ материале */
		--lock-icon-opacity-current-mobile-panel-1: 0.3;
		
		/* Прозрачность иконки при наведении на карточку материала */
		--lock-icon-opacity-hover-mobile-panel-1: 0.3;

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

				/* Цвет иконки - в ОТКРЫТОМ материале */
				--lock-icon-color-opened-mobile-panel-1: #56bf50;
				
				/* Цвет иконки - в ОТКРЫТОМ материале - при наведении */
				--lock-icon-color-opened-hover-mobile-panel-1: #56bf50;

				/* Фон иконки - в ОТКРЫТОМ ТЕКУЩЕМ материале */
				--open-lock-icon-bg-current-mobile-panel-1: rgba(245, 245, 245, 0.9);
				
				/* Цвет иконки - в ОТКРЫТОМ ТЕКУЩЕМ материале */
				--open-lock-icon-color-current-mobile-panel-1: #56bf50;

			/* ЗАКРЫТЫЙ МАТЕРИАЛ */
			/* ----------------- */

				/* Цвет иконки - в ЗАКРЫТОМ материале */
				--lock-icon-color-closed-mobile-panel-1: #FF4B3E;

				/* Цвет иконки - в ЗАКРЫТОМ материал - при наведении */
				--lock-icon-color-closed-hover-mobile-panel-1: #FF4B3E;

				/* Фон иконки - в ЗАКРЫТОМ ТЕКУЩЕМ материале */
				--close-lock-icon-bg-current-mobile-panel-1: rgba(245, 245, 245, 0.9);

				/* Цвет иконки - в ЗАКРЫТОМ ТЕКУЩЕМ материале */
				--close-lock-icon-color-current-mobile-panel-1: #FF4B3E;

			/* ЗАКРЫТЫЙ МАТЕРИАЛ АВТОТРЕНИНГА */
			/* ------------------------------ */

				/* Цвет иконки - в ЗАКРЫТОМ материале Автотренинга */
				--lock-icon-color-inaccessible-mobile-panel-1: #212121;

				/* Цвет иконки - в ЗАКРЫТОМ материале Автотренинга - при наведении */
				--lock-icon-color-inaccessible-hover-mobile-panel-1: #212121;

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

		/* Видимость номера-статуса урока в начале карточки */
		/* Подсказка: "flex" - показывать, "none" - скрыть */
		--counter-display-mobile-panel-1: flex;

		/* Размер номера-статуса */
		--counter-font-size-mobile-panel-1: 1.7rem;

		/* Жирность номера-статуса */
		--counter-weight-mobile-panel-1: 400;

		/* Прозрачность номера-статуса в ТЕКУЩЕМ материале */
		--counter-opacity-current-mobile-panel-1: 0.3;

		/* Прозрачность номера-статуса при наведении на карточку материала */
		--counter-opacity-hover-mobile-panel-1: 0.3;
		
		/* Толщина обводки номера-статуса - для всех статусов */
		/* Подсказка: значение "0px" - убрать обводку */
		--counter-border-width-mobile-panel-1: 1px;

		/* Закругление фона номера-статуса - для всех статусов */
		/* Подсказка: значение "50%" - идеально круглый фон */
		--counter-border-radius-mobile-panel-1: 50%;
		
		/* Размер фона номера-статуса - для всех статусов */
		/* Подсказка: ширина = высота */
		--counter-bg-size-mobile-panel-1: 26px;

			/* ДИЗАЙН НОМЕРА В ЗАВИСИМОСТИ ОТ СТАТУСА ДЗ */
			/* ----------------------------------------- */

				/* СТАТУС - ПРОВЕРЯЕТСЯ (ИКОНКА ВМЕСТО НОМЕРА): */
				/* -------------------------------------------- */
					
					/* Иконка статуса ПРОВЕРЯЕТСЯ */
					/* "\f253" - песочные часы */
					--new-icon-checking-mobile-panel-1: "\f253";
					
					/* Размер иконки-статуса ПРОВЕРЯЕТСЯ */
					--new-status-checking-font-size-mobile-panel-1: 1.1rem;
					
					/* Фон иконки-статуса ПРОВЕРЯЕТСЯ */
					--new-status-checking-bg-mobile-panel-1: #389de5;
					
					/* Цвет иконки-статуса ПРОВЕРЯЕТСЯ */
					--new-status-checking-color-mobile-panel-1: #ffffff;
					
					/* Фон иконки-статуса ПРОВЕРЯЕТСЯ - при наведении */
					--new-status-checking-bg-hover-mobile-panel-1: #389de5;
					
					/* Цвет иконки-статуса ПРОВЕРЯЕТСЯ - при наведении */
					--new-status-checking-color-hover-mobile-panel-1: #ffffff;
					
					/* Цвет обводки иконки-статуса ПРОВЕРЯЕТСЯ */
					--new-status-checking-border-color-mobile-panel-1: #389de5;

				/* СТАТУС - ВЫПОЛНЕНО (ЦВЕТА НОМЕРА): */
				/* ---------------------------------- */

					/* Фон номера-статуса, когда задание ВЫПОЛНЕНО */
					--counter-done-bg-mobile-panel-1: #71d43a;

					/* Цвет номера-статуса, когда задание ВЫПОЛНЕНО */
					--counter-done-color-mobile-panel-1: #ffffff;
					
					/* Фон номера-статуса, когда задание ВЫПОЛНЕНО - при наведении */
					--counter-done-bg-hover-mobile-panel-1: #71d43a;

					/* Цвет номера-статуса, когда задание ВЫПОЛНЕНО - при наведении */
					--counter-done-color-hover-mobile-panel-1: #ffffff;
					
					/* Цвет обводки номера-статуса, когда задание ВЫПОЛНЕНО */
					--counter-done-border-color-mobile-panel-1: #71d43a;

				/* СТАТУС - ОТКЛОНЕНО (ИКОНКА ВМЕСТО НОМЕРА): */
				/* ------------------------------------------ */
				
					/* Иконка статуса ОТКЛОНЕНО */
					/* "\f00d" - крестик */
					/* "\f119" - грустный смайлик */
					--new-icon-not-right-mobile-panel-1: "\f00d";
				
					/* Размер иконки-статуса, когда задание ОТКЛОНЕНО */
					--new-status-not-right-font-size-mobile-panel-1: 1.3rem;

					/* Фон иконки-статуса, когда задание ОТКЛОНЕНО */
					--new-status-not-right-bg-mobile-panel-1: #ff2828;

					/* Цвет иконки-статуса, когда задание ОТКЛОНЕНО */
					--new-status-not-right-color-mobile-panel-1: #ffffff;
					
					/* Фон иконки-статуса, когда задание ОТКЛОНЕНО - при наведении */
					--new-status-not-right-bg-hover-mobile-panel-1: #ff2828;

					/* Цвет иконки-статуса, когда задание ОТКЛОНЕНО - при наведении */
					--new-status-not-right-color-hover-mobile-panel-1: #ffffff;
					
					/* Цвет обводки иконки-статуса, когда задание ОТКЛОНЕНО */
					--new-status-not-right-border-color-mobile-panel-1: #ff2828;
					
				/* СТАТУС - С ТАЙМЕРОМ (ИКОНКА ВМЕСТО НОМЕРА): */
				/* ------------------------------------------- */

					/* Иконка статуса с ТАЙМЕРОМ */
					/* "\f017" - часы */
					--new-icon-countdown-mobile-panel-1: "\f017";
					
					/* Размер иконки-статуса с ТАЙМЕРОМ */
					--new-status-countdown-font-size-mobile-panel-1: 1.3rem;

					/* Фон иконки-статуса с ТАЙМЕРОМ */
					--new-status-countdown-bg-mobile-panel-1: #389de5;

					/* Цвет иконки-статуса с ТАЙМЕРОМ */
					--new-status-countdown-color-mobile-panel-1: #ffffff;
					
					/* Фон иконки-статуса с ТАЙМЕРОМ - при наведении */
					--new-status-countdown-bg-hover-mobile-panel-1: #389de5;

					/* Цвет иконки-статуса с ТАЙМЕРОМ - при наведении */
					--new-status-countdown-color-hover-mobile-panel-1: #ffffff;
					
					/* Цвет обводки иконки-статуса с ТАЙМЕРОМ */
					--new-status-countdown-border-color-mobile-panel-1: #389de5;

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

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

					/* Фон номера-статуса ОТКРЫТОЙ карточки */
					--counter-open-bg-mobile-panel-1: #389de5;

					/* Цвет номера-статуса ОТКРЫТОЙ карточки */
					--counter-open-color-mobile-panel-1: #ffffff;

					/* Фон номера-статуса при наведении на ОТКРЫТУЮ карточку */
					--counter-open-bg-hover-mobile-panel-1: #389de5;

					/* Цвет номера-статуса при наведении на ОТКРЫТУЮ карточку */
					--counter-open-color-hover-mobile-panel-1: #ffffff;
					
					/* Цвет обводки номера-статуса ОТКРЫТОЙ карточки */
					--counter-not-started-border-color-mobile-panel-1: #389de5;

				/* ЗАКРЫТЫЙ МАТЕРИАЛ */
				/* ----------------- */

					/* Фон номера-статуса ЗАКРЫТОЙ карточки */
					--counter-closed-bg-mobile-panel-1: #FF4B3E;

					/* Цвет номера-статуса ЗАКРЫТОЙ карточки */
					--counter-closed-color-mobile-panel-1: #ffffff;

					/* Фон номера-статуса при наведении на ЗАКРЫТУЮ карточку */
					--counter-closed-bg-hover-mobile-panel-1: #FF4B3E;

					/* Цвет номера-статуса при наведении на ЗАКРЫТУЮ карточку */
					--counter-closed-color-hover-mobile-panel-1: #ffffff;
					
					/* Цвет обводки номера-статуса ЗАКРЫТОЙ карточки */
					--counter-closed-border-color-mobile-panel-1: #FF4B3E;

				/* ЗАКРЫТЫЙ МАТЕРИАЛ АВТОТРЕНИНГА */
				/* ------------------------------ */

					/* Фон номера-статуса ЗАКРЫТОЙ карточки АВТОТРЕНИНГА */
					--counter-auto-bg-mobile-panel-1: #959ca0;

					/* Цвет номера-статуса ЗАКРЫТОЙ карточки АВТОТРЕНИНГА */
					--counter-auto-color-mobile-panel-1: #ffffff;

					/* Фон номера-статуса при наведении на ЗАКРЫТУЮ карточку АВТОТРЕНИНГА */
					--counter-auto-bg-hover-mobile-panel-1: #959ca0;

					/* Цвет номера-статуса при наведении на ЗАКРЫТУЮ карточку АВТОТРЕНИНГА */
					--counter-auto-color-hover-mobile-panel-1: #ffffff;
					
					/* Цвет обводки номера-статуса ЗАКРЫТОЙ карточки АВТОТРЕНИНГА */
					--counter-inaccessible-border-color-mobile-panel-1: #959ca0;

				/* НА ПОДУМАТЬ */
				/* ----------- */

					/* Фон номера-статуса в ОТКРЫТОМ ТЕКУЩЕМ материале */
					/* --open-counter-bg-current-mobile-panel-1: #389de5; */

					/* Цвет номера-статуса в ОТКРЫТОМ ТЕКУЩЕМ материале */
					/* --open-counter-color-current-mobile-panel-1: #ffffff; */

					/* Фон номера-статуса в ЗАКРЫТОМ ТЕКУЩЕМ материале */
					/* --close-counter-bg-current-mobile-panel-1: #FF4B3E; */

					/* Цвет номера-статуса в ЗАКРЫТОМ ТЕКУЩЕМ материале */
					/* --close-counter-color-current-mobile-panel-1: #ffffff; */

	/* ----------------------------------------- */
	/* НАСТРОЙКИ ПЛАШКИ-СТАТУСА ДЗ - НА КАРТОЧКЕ */
	/* ----------------------------------------- */

		/* Отображение плашки со статусом ДЗ */
		/* Подсказка: "flex" - отображать, "none" - скрыть */
		--holder-homework-display-mobile-panel-1: flex;

		/* Текст на плашке «ДЗ ПРОВЕРЯЕТСЯ» */
		/* ВАЖНО! Измените текст только между кавычками '' */
		--holder-checking-text-mobile-panel-1: "Домашка проверяется";

		/* Текст на плашке ОТКЛОНЁННОГО МАТЕРИАЛА */
		--holder-not-right-text-mobile-panel-1: "Пересдайте домашку";
		
		/* Закругление плашки со статусом ДЗ */
		--holder-homework-radius-mobile-panel-1: 15px;
		
		/* Фон плашки «ДЗ проверяется» */
		--holder-checking-bg-mobile-panel-1: rgb(56 157 229 / 5%);
		
		/* Цвет текста на плашке «ДЗ проверяется» */
		--holder-checking-color-mobile-panel-1: #389de5;
		
		/* Фон плашки «Отклонённое ДЗ» */
		--holder-not-right-bg-mobile-panel-1: rgb(255 40 40 / 5%);
		
		/* Цвет текста на плашке «Отклонённое ДЗ» */
		--holder-not-right-color-mobile-panel-1: #ff2828;

		/* Фон плашки с таймером */
		--holder-countdown-bg-mobile-panel-1: rgb(255 255 255 / 70%);

		/* Цвет текста на плашке с таймером */
		--holder-countdown-color-mobile-panel-1: #4a4a4a;

		/* Размер Заголовка на плашке с таймером */
		--holder-title-size-countdown-mobile-panel-1: 18px;

		/* Размер иконки на плашке с таймером */
		--holder-icon-size-countdown-mobile-panel-1: 30px;

}

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

/* ----------------------------------------- */
/* СКРЫВАЕМ МАТЕРИАЛЫ-ЗАГОЛОВКИ НА МОБИЛЬНЫХ */
/* ----------------------------------------- */

/* Только на смартфонах */
/* Начало ограничения экранов */
@media (max-width: 991px) {
body .menu-opened.mbli3-left-menu .mbli3-left-menu-holder .materials-block-one-column-mobile .container .row .col-md-12:has(a[href*="/mat-like-title-"]) {
	display: none !important;
}
}
/* Конец ограничения экранов */

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

/* Контейнер контента материала - на смартфонах */

@media (max-width: 991px) {
body .lesson-row .container {
	padding-right: 15px;
    padding-left: 15px;
}
}

/* ----------------------------------- */
/* КНОПКА ОТОБРАЖЕНИЯ ПАНЕЛИ НАВИГАЦИИ */
/* ----------------------------------- */

/* Положение и дизайн кнопки "Выбрать урок" - НА СМАРТФОНАХ */
/* -------------------------------------------------------- */

/* Только на смартфонах */
/* Начало ограничения экранов */
@media (max-width: 991px) {

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

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

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

/* Анимация кнопки "Выбрать урок" - при ЗАКРЫТИИ меню */

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

@keyframes showbutton_mobile {
    0% { right: -150px; }
    100% { right: -91px; }
}

/* Анимация кнопки "Выбрать урок" - при ОТКРЫТИИ меню */

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

@keyframes hidebutton_mobile {
    0% { right: -91px; }
    100% { right: -150px; }
}

/* Кнопка "Выбрать урок" - при наведении и клике */

body .top-nav-row a.nav-item[data-mbli3-menu-toggle]:hover {
    right: -88px;
	background: var(--bg-button-hover-mobile-panel-1);
	color: var(--color-button-hover-mobile-panel-1)!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-mobile-panel-1);
	color: var(--color-button-active-mobile-panel-1)!important;
}

/* Иконка внутри кнопки "Выбрать урок" */

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

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

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

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

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

/* -------------------------- */
/* РАСКРЫТАЯ ПАНЕЛЬ НАВИГАЦИИ */
/* -------------------------- */

/* ------------------------------------------ */
/* КОНТЕЙНЕР ПАНЕЛИ НАВИГАЦИИ - НА СМАРТФОНАХ */
/* ------------------------------------------ */

/* Только на смартфонах */
/* Начало ограничения экранов */
@media (max-width: 991px) {

/* Контейнер Панели навигации */

body .menu-opened.mbli3-left-menu {
	/* Принудительно показываем открытую панель на смартфонах */
	display: flex!important;
	/* Корректировка ширины */
	width: fit-content;
	/* Анимация панели */
	animation-name: menu_slide, fadein;
	animation-duration: .5s, .5s;
	/* Тень - затемнение 100% ширины окна браузера */
	box-shadow: 0 0 0 100vw rgb(0 0 0 / 60%);
	/* animation: menu_slide .5s forwards; */
}

/* Анимация прозрачности панели Навигации и Затемнения фона */

@keyframes fadein {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
}
/* Конец ограничения экранов */

/* Ширина Контейнера Панели навигации - на смартфонах - отдельно */

@media (min-width: 768px) and (max-width: 991px) {

body .menu-opened.mbli3-left-menu {
	width: var(--width-container-mobile-panel-1) !important;
}
}

@media (max-width: 767px) {

body .menu-opened.mbli3-left-menu {
	width: var(--width-container-mobile-panel-1) !important;
}
}

/* -------------------------------------------------------------------------- */
/* ЗАГОЛОВОК РОДИТЕЛЬСКОЙ РУБРИКИ - НА СМАРТФОНАХ - ОДИН ДИЗАЙН БЕЗ ВАРИАНТОВ */
/* -------------------------------------------------------------------------- */

/* Ширина Обёртки Заголовка панели - на смартфонах - отдельно */

@media (min-width: 768px) and (max-width: 991px) {

body .menu-opened.mbli3-left-menu .mbli3-left-menu-holder > .container {
	max-width: none;
	width: var(--width-container-mobile-panel-1);
	/* max-width: 80%; */
	padding-right: 15px;
    padding-left: 15px;
}
}

@media (max-width: 767px) {

body .menu-opened.mbli3-left-menu .mbli3-left-menu-holder > .container {
	max-width: none;
	width: var(--width-container-mobile-panel-1);
	/* max-width: 80%; */
	padding-right: 15px;
    padding-left: 15px;
}
}

/* Только на смартфонах */
/* Начало ограничения экранов */
@media (max-width: 991px) {

/* Обёртка Заголовка панели */

body .menu-opened.mbli3-left-menu .mbli3-left-menu-holder > .container {
	display: flex;
	align-items: center;
    flex-flow: row-reverse;
    position: fixed;
    background: var(--title-bg-mobile-panel-1);
	z-index: 501;

	/* для корректного переноса строк + кол-во строк */
	/* Здесь общие отступы для контейнера с заголовком и иконкой закрытия */
	padding: 12px 15px 12px 15px;
}

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

body .menu-opened.mbli3-left-menu .mbli3-page-title {
    margin: 0;
	width: 100%;
    text-align: left;
	color: var(--title-text-color-mobile-panel-1);
	/* Скрываем оригинальный текст */
	font-size: 0rem;
	
	/* Обрезаем до ОДНОЙ строки (обрезаем длинные названия рубрик) */
	/* Убираем перенос текста */
	/* white-space: nowrap; */
	/* Обрезаем всё за пределами блока */
    /* overflow: hidden; */
	/* Добавляем многоточие */
    /* text-overflow: ellipsis; */
	
	/* Задаём максимальное количество строк в заголовке */
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: var(--title-text-lines-mobile-panel-1);
	-webkit-box-orient: vertical;

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

	/* для корректного переноса строк + кол-во строк */
	/* Важно: здесь только правый отступ, чтобы заголовок не прилипал к иконке закрытия */
	/* Все остальные отступы уже заданы в контейнере с заголовком и иконкой закрытия выше */
	padding: 0px 5px 0px 0px;
}

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

body .menu-opened.mbli3-left-menu .mbli3-page-title:after {
	content: var(--content-title-header-mobile-panel-1);
	/* Размер заголовка панели */
	font-size: var(--title-text-size-mobile-panel-1);
	vertical-align: middle;
}

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

body .menu-opened.mbli3-left-menu .mbli3-menu-close {
	color: var(--close-icon-color-button-mobile-panel-1);
	font-size: var(--close-icon-size-button-mobile-panel-1);
	margin-top: 0;
	transition: none;
	display: flex;
	float: none;
}

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

body .menu-opened.mbli3-left-menu .mbli3-menu-close:hover {
	color: var(--close-icon-color-button-hover-mobile-panel-1);
}

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

body .menu-opened.mbli3-left-menu .mbli3-menu-close:active,
body .menu-opened.mbli3-left-menu .mbli3-menu-close:focus {
	color: var(--close-icon-color-button-active-mobile-panel-1);
}

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

body .menu-opened.mbli3-left-menu .mbli3-menu-close .icon-close {
	z-index: 502;
	transition: .2s ease;
}

body .menu-opened.mbli3-left-menu .mbli3-menu-close .icon-close:before {
	content: var(--close-icon-symbol-button-mobile-panel-1);
}
}
/* Конец ограничения экранов */

/* ------------------------------------------- */
/* КОНТЕЙНЕР СПИСКА МАТЕРИАЛОВ - НА СМАРТФОНАХ */
/* ------------------------------------------- */

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

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

/* Только на смартфонах */
/* Начало ограничения экранов */
@media (max-width: 991px) {

/* Внешний контейнер Заголовка и Списка материалов */

body .menu-opened.mbli3-left-menu .mbli3-left-menu-holder {
	width: 100%;
	border: none;
	padding: 0;
	background: var(--bg-block-materials-mobile-panel-1);
}

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

body .menu-opened.mbli3-left-menu .mbli3-left-menu-holder .materials-block-one-column-mobile {
	background: none;
	margin-top: calc(70px + var(--title-text-size-mobile-panel-1));
}

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

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .container {
	width: 100%;
	max-width: none;
	padding-right: 15px;
    padding-left: 15px;
	background: none;
}
}
/* Конец ограничения экранов */

/* --------------------------------------------- */
/* ДИЗАЙН КАРТОЧЕК УРОКОВ В МЕНЮ - НА СМАРТФОНАХ */
/* --------------------------------------------- */

/* -------------------------------------------------------------- */
/* БЛОЧНЫЙ - НОМЕР-СТАТУС, ЗАГОЛОВОК, ИКОНКА (стрелка), ПЛАШКА ДЗ */
/* -------------------------------------------------------------- */

/* 1. БЛОК ВСЕХ БЛОКОВ */
/* ------------------- */



/* ---------------------- */
/* СОЗДАЁМ СЧЁТЧИК УРОКОВ */
/* ---------------------- */

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

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .container .row {
	counter-reset: material-counter 0;
	background: none;
	/* убираем внешние отступы, чтобы карточки не липли к краям панели */
    margin: 0;
	/* внутренний отступ обёртки списка материалов */
	padding: 0 var(--padding-left-right-mobile-panel-1);
}

/* Блок всей карточки */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .col-md-12 {
	counter-increment: material-counter 1;
}

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

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .col-md-12:has(a[href*="/mat-like-title-"]) {
	/* убираем счётчик */
	/* нужно, чтобы счётчик материала после заголовка начинался с "1" или логично продолжался */
	counter-increment: none;
	/* counter-increment: material-counter 0; */
}

/* Карточка урока */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item {
	display: flex;
    flex-flow: row;
    gap: 10px;
}

/* Номер на карточке урока */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item .col-content:before {
    display: var(--counter-display-mobile-panel-1);
	/* display: flex; */
	content: counter(material-counter);
	align-items: center;
	justify-content: center;
	/* align-self: normal; */
	align-self: center;
	font-size: var(--counter-font-size-mobile-panel-1);
	/* font-size: 2rem; */
	/* Ширина и высота фона номера */
	width: var(--counter-bg-size-mobile-panel-1);
	height: var(--counter-bg-size-mobile-panel-1);
	
	/* запрещаем сужать номер во flex контейнере */
	flex-shrink: 0;

	/* Толщина обводки номера-статуса - для всех статусов */
	border: var(--counter-border-width-mobile-panel-1) solid;
	/* Закругление фона номера-статуса - для всех статусов */
    border-radius: var(--counter-border-radius-mobile-panel-1);
	/* border-radius: 25px; */
	/* border-radius: var(--radius-mobile-panel-1) 0 0 var(--radius-mobile-panel-1); */
	font-weight: var(--counter-weight-mobile-panel-1);

	transition: all 0.25s ease-out !important;
}

/* Прозрачность номера-статуса при наведении на карточку материала */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item:hover .col-content:before {
    opacity: var(--counter-opacity-hover-mobile-panel-1)!important;
}

/* ОФОРМЛЕНИЕ НОМЕРА-СТАТУСА В ТЕКУЩЕМ МАТЕРИАЛЕ В МЕНЮ */
/* ---------------------------------------------------- */

/* Прозрачность номера-статуса в ТЕКУЩЕМ материале */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .current-post .material-item .col-content:before {
    opacity: var(--counter-opacity-current-mobile-panel-1)!important;
}

/* Фон и цвет номера-статуса в ОТКРЫТОМ ТЕКУЩЕМ материале */

/* body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .current-post .material-item.material-opened .col-content:before {
	background: var(--open-counter-bg-current-mobile-panel-1);
	color: var(--open-counter-color-current-mobile-panel-1);
} */

/* Фон и цвет номера-статуса в ЗАКРЫТОМ ТЕКУЩЕМ материале */

/* body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .current-post .material-item.material-closed .col-content:before {
	background: var(--close-counter-bg-current-mobile-panel-1);
	color: var(--close-counter-color-current-mobile-panel-1);
} */

/* ОФОРМЛЕНИЕ НОМЕРА-СТАТУСА В ЗАВИСИМОСТИ ОТ ДОСТУПА */
/* -------------------------------------------------- */

/* Фон и цвет номера-статуса на ОТКРЫТОЙ карточке */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item.material-opened .col-content:before {
	background: var(--counter-open-bg-mobile-panel-1);
	color: var(--counter-open-color-mobile-panel-1);
	border-color: var(--counter-not-started-border-color-mobile-panel-1);
}

/* Фон и цвет номера-статуса ПРИ НАВЕДЕНИИ на ОТКРЫТУЮ карточку */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item.material-opened:hover .col-content:before {
	background: var(--counter-open-bg-hover-mobile-panel-1);
	color: var(--counter-open-color-hover-mobile-panel-1);
}

/* Фон и цвет номера-статуса на ЗАКРЫТОЙ карточке */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item.material-closed .col-content:before {
	background: var(--counter-closed-bg-mobile-panel-1);
	color: var(--counter-closed-color-mobile-panel-1);
	border-color: var(--counter-closed-border-color-mobile-panel-1);
}

/* Фон и цвет номера-статуса ПРИ НАВЕДЕНИИ на ЗАКРЫТУЮ карточку */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item.material-closed:hover .col-content:before {
	background: var(--counter-closed-bg-hover-mobile-panel-1);
	color: var(--counter-closed-color-hover-mobile-panel-1);
}

/* Фон и цвет номера-статуса на ЗАКРЫТОЙ карточке АВТОТРЕНИНГА */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item.material-inaccessible .col-content:before {
	background: var(--counter-auto-bg-mobile-panel-1);
	color: var(--counter-auto-color-mobile-panel-1);
	border-color: var(--counter-inaccessible-border-color-mobile-panel-1);
}

/* Фон и цвет номера-статуса ПРИ НАВЕДЕНИИ на ЗАКРЫТУЮ карточку АВТОТРЕНИНГА */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item.material-inaccessible:hover .col-content:before {
	background: var(--counter-auto-bg-hover-mobile-panel-1);
	color: var(--counter-auto-color-hover-mobile-panel-1);
}

/* ОФОРМЛЕНИЕ НОМЕРА-СТАТУСА В ЗАВИСИМОСТИ ОТ СТАТУСА ЗАДАНИЯ */
/* ---------------------------------------------------------- */

/* Общие настройки */
/* Для иконок-статусов вместо номера (Проверяется, Отклонено, с Таймером) */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-opened:has([class*="status"][class*="checking"]) .col-content:before,
body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item:has([class*="not-right"]) .col-content:before,
body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item:has([class*="mbl-material-countdown-holder"]) .col-content:before {
	display: var(--counter-display-mobile-panel-1);
	/* display: flex; */
    align-items: center;
	justify-content: center;
    font-family: "icomoon" !important;
    line-height: normal;
    /* opacity: 1; */
    z-index: 5;
	/* Ширина и высота фона номера */
	width: var(--counter-bg-size-mobile-panel-1);
	height: var(--counter-bg-size-mobile-panel-1);
	/* Толщина обводки номера - для всех статусов */
	border: var(--counter-border-width-mobile-panel-1) solid;
	/* Закругление фона номера - для всех статусов */
    border-radius: var(--counter-border-radius-mobile-panel-1);
    /* border-radius: 50%; */
	visibility: visible;
	/* положение иконки */
	position: relative;
    left: 0px;
    top: 0px;
}

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

/* Добавляем иконку-статус реально проверяемому материалу автотренинга */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-opened:has([class*="status"][class*="checking"]) .col-content:before {
	/* песочные часы */
	content: var(--new-icon-checking-mobile-panel-1);
    color: var(--new-status-checking-color-mobile-panel-1);
    background: var(--new-status-checking-bg-mobile-panel-1);
	font-size: var(--new-status-checking-font-size-mobile-panel-1);
	border-color: var(--new-status-checking-border-color-mobile-panel-1);
	padding-left: 0px;
}

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-opened:has([class*="status"][class*="checking"]):hover a .col-thumb:before {
    color: var(--new-status-checking-color-hover-mobile-panel-1);
    background: var(--new-status-checking-bg-hover-mobile-panel-1);
}

/* ИКОНКА-СТАТУС У МАТЕРИАЛА АВТОТРЕНИНГА С ТАЙМЕРОМ - ВМЕСТО НОМЕРА */
/* Такая же как и на плашке с таймером */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item:has([class*="mbl-material-countdown-holder"]) .col-content:before {
	/* обычные часы */
	content: var(--new-icon-countdown-mobile-panel-1);
	color: var(--new-status-countdown-color-mobile-panel-1) !important;
    background: var(--new-status-countdown-bg-mobile-panel-1) !important;
	font-size: var(--new-status-countdown-font-size-mobile-panel-1);
	border-color: var(--new-status-countdown-border-color-mobile-panel-1);
	padding-left: 0px;
}

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item:has([class*="mbl-material-countdown-holder"]):hover a .col-thumb:before {
	color: var(--new-status-countdown-color-hover-mobile-panel-1);
    background: var(--new-status-countdown-bg-hover-mobile-panel-1);
}

/* ПОРЯДКОВЫЙ НОМЕР, КОГДА ЗАДАНИЕ ВЫПОЛНЕНО - ТОЛЬКО ЦВЕТ */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item.material-done .col-content:before {
    color: var(--counter-done-color-mobile-panel-1);
    background: var(--counter-done-bg-mobile-panel-1);
	border-color: var(--counter-done-border-color-mobile-panel-1);
}

/* при наведении */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item.material-done:hover .col-content:before {
    color: var(--counter-done-color-hover-mobile-panel-1);
    background: var(--counter-done-bg-hover-mobile-panel-1);
}

/* ИКОНКА-СТАТУС, КОГДА ЗАДАНИЕ ОТКЛОНЕНО - ВМЕСТО НОМЕРА */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item:has([class*="not-right"]) .col-content:before {
    /* крестик */
	content: var(--new-icon-not-right-mobile-panel-1) !important;
	color: var(--new-status-not-right-color-mobile-panel-1);
    background: var(--new-status-not-right-bg-mobile-panel-1);
	font-size: var(--new-status-not-right-font-size-mobile-panel-1);
	border-color: var(--new-status-not-right-border-color-mobile-panel-1)!important;
	padding-left: 0px;
	padding-bottom: 1px;
}

/* при наведении */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item:has([class*="not-right"]):hover .col-content:before {
    color: var(--new-status-not-right-color-hover-mobile-panel-1);
    background: var(--new-status-not-right-bg-hover-mobile-panel-1);
}

/* --------------------------- */
/* ОТДЕЛЬНЫЙ МАТЕРИАЛ В СПИСКЕ */
/* --------------------------- */

/* 2. БЛОК ВСЕЙ КАРТОЧКИ */
/* --------------------- */

/* Общие настройки */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .col-md-12 {
    float: none;
	/* padding-right: 15px; */
    /* padding-left: 15px; */
	
	/* убираем отступы */
	padding: 0;
	
	/* вертикальный отступ между карточками */
	margin-bottom: var(--margin-bottom-mobile-panel-1);
}

/* Нижний отступ у последней карточки материала - приоритет */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .col-md-12:last-child {
	margin-bottom: 30px;
}

/* Количество карточек в ряду на всех экранах */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .col-md-12 {
    width: 100%;
}

/* Карточка урока */
/* Рамка вокруг обложки и описания */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item {
	display: flex;
	flex-flow: column;
	gap: 15px;
	
	border-radius: var(--radius-mobile-panel-1);
	/* padding: var(--padding-mobile-panel-1); */
	transition: all 0.25s ease-out!important;
	/* Убираем перекрытие карточки, чтобы видно было иконку-статус ДЗ */
    overflow: visible;
	
	/* убираем родной отступ, так как в Обёртке списка Материалов есть GAP */
	/* нужно для корректного закругления карточек */
	margin: 0;
}

/* Меняем курсор при наведении на ЗАКРЫТЫЙ урок Автотренинга */
/* Дополнительно - Меняем курсор при наведении на Открытый урок, в котором есть плашка с таймером */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .col-md-12 .material-inaccessible:hover,
body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .col-md-12 .material-item.material-opened:has([class*="mbl-material-countdown-holder"]):hover {
	cursor: not-allowed;
}

/* ТЕКУЩИЙ МАТЕРИАЛ В МЕНЮ */
/* ----------------------- */

/* Фон текущего Открытого материала */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .current-post .material-opened {
	background: var(--open-current-bg-mobile-panel-1);
}

/* Фон текущего Закрытого материала */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .current-post .material-closed {
	background: var(--close-current-bg-mobile-panel-1);
}

/* ДОСТУП ОТКРЫТ */
/* ------------- */

/* Фон открытой карточки */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-opened {
    background: var(--open-bg-mobile-panel-1);
}

/* ДОСТУП ОТКРЫТ ПРИ НАВЕДЕНИИ */
/* --------------------------- */

/* Фон карточки при наведении */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-opened:hover {
    background: var(--open-bg-hover-mobile-panel-1);
}

/* ДОСТУП ЗАКРЫТ */
/* ------------- */

/* Фон закрытой карточки */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-closed {
    background: var(--close-bg-mobile-panel-1);
}

/* ДОСТУП ЗАКРЫТ ПРИ НАВЕДЕНИИ */
/* --------------------------- */

/* Фон карточки при наведении */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-closed:hover {
    background: var(--close-bg-hover-mobile-panel-1);
}

/* 3. БЛОК - ССЫЛКА */
/* ---------------- */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item a {
	display: flex;
	flex-flow: row;
    height: auto;
	gap: 15px;
	border-radius: var(--radius-mobile-panel-1);
    padding: var(--padding-mobile-panel-1);
}

/* Убираем кликабельность ТЕКУЩЕГО материала */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .current-post .material-item a {
	cursor: default;
    pointer-events: none;
}

/* 4. БЛОК - ОБЛОЖКА */
/* ----------------- */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item .flex-wrap .col-thumb {
/* 	width: auto;
    height: auto;
	border-radius: 0;
	background: none;
	overflow: visible;
	transition: all 0.25s ease-out; */
	
	/* выравниваем блок обложки по верхнему краю родительского блока */
	/* align-self: center; */
	
	/* стили для новых иконок-статусов ДЗ */
	/* display: flex;
    flex-flow: row;
    align-items: center;
    gap: 15px; */
	
	/* скрываем обложку */
	display: none;
}

/* Соотношение обложки */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item .thumbnail-wrap {
/*     min-height: auto;
	height: auto;
    aspect-ratio: 1;
    width: 55px;
	position: relative;
	background-size: cover;
    border-radius: var(--border-radius-mobile-panel-1);
	transition: all 0.25s ease-out; */
	
	/* выравниваем верхние и нижние индикаторы по центру блока обложки */
/* 	align-items: center;
    display: flex;
	flex-direction: row;
	column-gap: 3px; */
	/* фон обложки для прозрачных картинок */
	/* background-color: #ffef00; */
	
	/* скрываем обложку */
	/* display: none; */
}

/* Прозрачность блока обложки при наведении на ОТКРЫТУЮ карточку */

/* body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-opened:hover .thumbnail-wrap {
    opacity: var(--content-opacity-open-hover-mobile-panel-1);
} */

/* Прозрачность блока обложки при наведении на ЗАКРЫТУЮ карточку */

/* body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-closed:hover .thumbnail-wrap {
    opacity: var(--content-opacity-closed-hover-mobile-panel-1);
} */

/* Прозрачность блока обложки при наведении на ЗАКРЫТУЮ карточку АВТОТРЕНИНГА */

/* body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-inaccessible:hover .thumbnail-wrap {
    opacity: var(--content-opacity-auto-hover-mobile-panel-1);
} */

/* 5. БЛОК - ОПИСАНИЕ */
/* ------------------ */

/* Убираем кнопки при наведении на карточку */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item .content-overlay,

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item:hover .content-overlay {
	display: none;
}

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item .flex-wrap .col-content {
	/* width: auto; */
	width: 100%;
	height: auto;
	border: none;
	border-radius: 0;
	background: none;
	
	/* выравниваем блок описания по центру родительского блока */
	align-self: center;
	
	/* нужно для выравнивания номера-статуса */
	display: flex;
    flex-flow: row;
    gap: 15px;
}

/* Убираем фон описания при наведении. Вместо него общий фон карточки */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item:hover .flex-wrap .col-content {
	background: none;
}

/* Прозрачность блока с описанием в ТЕКУЩЕМ материале */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .current-post .material-item .content-wrap {
    opacity: var(--content-opacity-current-mobile-panel-1)!important;
}

/* Прозрачность блока с описанием при наведении на ОТКРЫТУЮ карточку */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-opened:hover .content-wrap {
    opacity: var(--content-opacity-open-hover-mobile-panel-1)!important;
}

/* Прозрачность блока с описанием при наведении на ЗАКРЫТУЮ карточку */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-closed:hover .content-wrap {
    opacity: var(--content-opacity-closed-hover-mobile-panel-1)!important;
}

/* Прозрачность блока с описанием при наведении на ЗАКРЫТУЮ карточку АВТОТРЕНИНГА */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-inaccessible:hover .content-wrap {
    opacity: var(--content-opacity-auto-hover-mobile-panel-1)!important;
}

/* Отступы блока описания */
/* Убираем нижнюю рамку, которая обрезает торчащие буквы в описании - потому что нет описания */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item .flex-wrap .col-content .content-wrap {
    border: none;
	padding: 0;
    margin: 0;
	/* padding: 0px 10px 0px 20px; */
	display: flex;
	/* flex-wrap: wrap; */
	gap: 10px;
	/* обновление - иначе описание липнет к короткому названию */
	flex-flow: column;
	transition: all 0.25s ease-out;
}

/* ЗАГОЛОВОК МАТЕРИАЛА */
/* ------------------- */

/* Заголовок материала */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item .content-wrap .title {
	font-weight: var(--title-weight-mobile-panel-1);
	font-family: var(--title-font-family-mobile-panel-1);
	font-size: var(--title-size-mobile-panel-1);
	line-height: normal;
	margin: 0;
}

/* Заголовок в ОТКРЫТОМ материале */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item.material-opened .content-wrap .title {
	color: var(--title-color-opened-mobile-panel-1)!important;
}

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item.material-opened:hover .content-wrap .title {
	color: var(--title-color-opened-hover-mobile-panel-1)!important;
}

/* Цвет заголовка в ОТКРЫТОМ ТЕКУЩЕМ материале */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .current-post .material-item.material-opened .content-wrap .title {
	color: var(--open-title-color-current-mobile-panel-1)!important;
}

/* Заголовок в ЗАКРЫТОМ материале */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item.material-closed .content-wrap .title {
	color: var(--title-color-closed-mobile-panel-1)!important;
}

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item.material-closed:hover .content-wrap .title {
	color: var(--title-color-closed-hover-mobile-panel-1)!important;
}

/* Цвет заголовка в ЗАКРЫТОМ ТЕКУЩЕМ материале */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .current-post .material-item.material-closed .content-wrap .title {
	color: var(--close-title-color-current-mobile-panel-1)!important;
}

/* Заголовок в ЗАКРЫТОМ материале Автотренинга */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item.material-inaccessible .content-wrap .title {
	color: var(--title-color-inaccessible-mobile-panel-1)!important;
}

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item.material-inaccessible:hover .content-wrap .title {
	color: var(--title-color-inaccessible-hover-mobile-panel-1)!important;
}

/* Количество строк в заголовке материала */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item .flex-wrap .content-wrap .title {
	overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: var(--title-lines-mobile-panel-1);
    line-clamp: var(--title-lines-mobile-panel-1);
    -webkit-box-orient: vertical;
	/* перенос текста */
    /* hyphens: auto; */
    hyphens: var(--title-and-description-hyphens-mobile-panel-1);
}

/* ОПИСАНИЕ МАТЕРИАЛА */
/* ------------------ */

/* Описание материала */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item .flex-wrap .content-wrap .description {
	display: none;
}

/* 6. НАЛОЖЕНИЕ АВТОТРЕНИНГА */
/* ------------------------- */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item.material-inaccessible:before {
	border-radius: var(--radius-mobile-panel-1);
	/* коррекция положения наложения */
	left: 0px;
    top: 0;
	/* фон наложения */
	background: repeating-linear-gradient(-45deg, rgba(193, 193, 193, 0.4), rgba(193, 193, 193, 0.4) 25px, rgba(193, 193, 193, 0.6) 25px, rgba(193, 193, 193, 0.6) 50px);
	/* наложение выше всей карточки */
	z-index: 500;
	/* прозрачность наложения автотренинга */
	opacity: var(--auto-overlay-opacity-mobile-panel-1);
	transition: all 0.25s ease-out;
}

/* Фон материала Автотренинга */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-inaccessible {
    background: var(--auto-bg-mobile-panel-1);
}

/* ДОПОЛНИТЕЛЬНО - КОРРЕКТИРОВКА ОТКРЫТОГО МАТЕРИАЛА, В КОТОРОМ ЕСТЬ ПЛАШКА С ТАЙМЕРОМ */
/* Нужно, чтобы у открытого материала с таймером был такой же полосатый фон как у Автотренинга */

/* Создаём полосатое наложение */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item.material-opened:has([class*="mbl-material-countdown-holder"]):before {
	content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
	border-radius: var(--radius-mobile-panel-1);
	/* коррекция положения наложения */
	left: 0px;
    top: 0;
	/* фон наложения */
	background: repeating-linear-gradient(-45deg, rgba(193, 193, 193, 0.4), rgba(193, 193, 193, 0.4) 25px, rgba(193, 193, 193, 0.6) 25px, rgba(193, 193, 193, 0.6) 50px);
	/* наложение выше всей карточки */
	z-index: 500;
	/* прозрачность наложения автотренинга */
	opacity: var(--auto-overlay-opacity-mobile-panel-1);
	transition: all 0.25s ease-out;
}

/* Фон Открытоо материала, в котором есть плашка с Таймером */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item.material-opened:has([class*="mbl-material-countdown-holder"]) {
    background: var(--auto-bg-mobile-panel-1);
}

/* НЕ ПРОЙДЕННЫЙ УРОК АВТОТРЕНИНГА ПРИ НАВЕДЕНИИ */
/* --------------------------------------------- */

/* Фон карточки при наведении */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-inaccessible:hover {
    background: var(--auto-bg-hover-mobile-panel-1);
}

/* Прозрачность наложения автотренинга при наведении */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item.material-inaccessible:hover:before {
	opacity: var(--auto-overlay-opacity-hover-mobile-panel-1);
}

/* КОРРЕКТИРОВКА */
/* НЕ ПРОЙДЕННЫЙ ОТКРЫТЫЙ УРОК, В КОТОРОМ ЕСТЬ ПЛАШКА С ТАЙМЕРОМ */
/* ------------------------------------------------------------- */

/* Фон Открытой карточки, в которой есть плашка с таймером - при наведении */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item.material-opened:has([class*="mbl-material-countdown-holder"]):hover {
    background: var(--auto-bg-hover-mobile-panel-1);
}

/* Прозрачность наложения карточки, в которой есть плашка с таймером - при наведении */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item.material-opened:has([class*="mbl-material-countdown-holder"]):hover:before {
	opacity: var(--auto-overlay-opacity-hover-mobile-panel-1);
}

/* 7. ИНДИКАТОРЫ МАТЕРИАЛА */
/* ----------------------- */

/* ВЕРХНИЕ ИНДИКАТОРЫ */
/* ------------------ */

/* Выравнивание верхних иконок */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item .thumbnail-wrap .icons-top {
	position: unset;
	width: max-content;
	height: max-content;
}

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item .thumbnail-wrap .icons-top .icons {
    margin: 0;
    display: flex;
    width: max-content;
    column-gap: 3px;
	align-items: center;
}

/* Скрываем порядковый номер и типы контента */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item .thumbnail-wrap .icons-top .m-icon {
	display: none;
}

/* Скрываем ЗАМОК доступности материала */
/* Вместо него ИКОНКА (БЕЗ СТАТУСА) */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item .thumbnail-wrap .icons-top .icons .status-icon {
	display: none;
}

/* СОЗДАЁМ ИКОНКИ (БЕЗ СТАТУСА) */

/* Общие настройки */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-opened a:after,
body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-closed a:after,
body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-inaccessible a:after {
	/* стрелка вместо замка */
	content: var(--lock-icon-content-mobile-panel-1);
	font-family: "icomoon" !important;
	font-size: var(--lock-icon-size-mobile-panel-1);
	background: var(--lock-icon-bg-mobile-panel-1);
	display: var(--lock-icon-display-mobile-panel-1);
	/* display: flex; */
    align-items: center;
	justify-content: center;
	/* запрещаем сужать блок иконки */
	flex-shrink: 0;
    padding: 15px;
	line-height: normal;
	width: var(--lock-icon-bg-size-mobile-panel-1);
	height: var(--lock-icon-bg-size-mobile-panel-1);
    border-radius: var(--lock-icon-radius-mobile-panel-1);
	/* align-self: start; */
	align-self: center;
	
	transition: all 0.25s ease-out;
}

/* Фон ИКОНКИ в ОТКРЫТОМ ТЕКУЩЕМ материале */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .current-post .material-opened a:after {
	background: var(--open-lock-icon-bg-current-mobile-panel-1);
}

/* Фон ИКОНКИ в ЗАКРЫТОМ ТЕКУЩЕМ материале */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .current-post .material-closed a:after {
	background: var(--close-lock-icon-bg-current-mobile-panel-1);
}

/* Прозрачность ИКОНКИ в ТЕКУЩЕМ материале (открытый и закрытый материал) */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .current-post .material-opened a:after,
body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .current-post .material-closed a:after {
	opacity: var(--lock-icon-opacity-current-mobile-panel-1);
}

/* Фон ИКОНКИ - при наведении */
/* Прозрачность иконки при наведении на карточку материала */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-opened:hover a:after,
body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-closed:hover a:after,
body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-inaccessible:hover a:after {
	background: var(--lock-icon-bg-hover-mobile-panel-1);
	opacity: var(--lock-icon-opacity-hover-mobile-panel-1);
}

/* Цвет ИКОНКИ в ОТКРЫТОМ ТЕКУЩЕМ материале */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .current-post .material-opened a:after {
	color: var(--open-lock-icon-color-current-mobile-panel-1);
}

/* Цвет ИКОНКИ в ОТКРЫТОМ материале */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-opened a:after {
	color: var(--lock-icon-color-opened-mobile-panel-1);
}

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-opened:hover a:after {
	color: var(--lock-icon-color-opened-hover-mobile-panel-1);
}

/* Цвет ИКОНКИ в ЗАКРЫТОМ ТЕКУЩЕМ материале */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .current-post .material-closed a:after {
	color: var(--close-lock-icon-color-current-mobile-panel-1);
}

/* Цвет ИКОНКИ в ЗАКРЫТОМ материале */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-closed a:after {
	color: var(--lock-icon-color-closed-mobile-panel-1);
}

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-closed:hover a:after {
	color: var(--lock-icon-color-closed-hover-mobile-panel-1);
}

/* Цвет ИКОНКИ в ЗАКРЫТОМ материале АВТОТРЕНИНГА */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-inaccessible a:after {
	color: var(--lock-icon-color-inaccessible-mobile-panel-1);
}

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-inaccessible:hover a:after {
	color: var(--lock-icon-color-inaccessible-hover-mobile-panel-1);
}

/* НИЖНИЕ ИНДИКАТОРЫ */
/* ----------------- */

/* Скрываем нижние индикаторы */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item .thumbnail-wrap .icons-bottom {
	display: none;
}

/* УБИРАЕМ галочку пройденного материала на обложке - родная галочка */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item .col-thumb.done:after {
	display: none!important;
}

/* ИКОНКИ-СТАТУСЫ ДЗ */
/* ----------------- */

/* нет */

/* ПЛАШКИ НА МАТЕРИАЛЕ */
/* ------------------- */

/* Общие настройки для новых плашек «ДЗ проверяется» и «Пересдайте ДЗ» */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item:has([class*="status"][class*="checking"]):after,
body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item:has([class*="not-right"]):after {
	padding: 5px;
	/* margin-top: 10px; */
	font-size: 1.8rem;
	font-family: tahoma, arial, helvetica, sans-serif;
	display: var(--holder-homework-display-mobile-panel-1);
	justify-content: center;
	text-align: center;
	border-radius: var(--holder-homework-radius-mobile-panel-1);
	/* border-radius: calc(var(--radius-mobile-panel-1) - var(--padding-mobile-panel-1)); */
}

/* Карточка урока */
/* Рамка вокруг обложки и описания */
/* Работает, когда есть плашка Автотренинга (проверяется, отклонено) */
/* Нужно, чтобы у плашки была рамка */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item:has([class*="status"][class*="checking"]),
body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item:has([class*="not-right"]) {
	padding: var(--padding-mobile-panel-1);
}

/* Убираем рамку блока-ссылки, когда есть плашка Автотренинга (проверяется, отклонено) */
/* Она лишняя здесь, так как уже есть рамка плашки */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item:has([class*="status"][class*="checking"]) a,
body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item:has([class*="not-right"]) a {
	padding: 0;
}

/* СТАРАЯ ПЛАШКА «ДЗ ПРОВЕРЯЕТСЯ» */
/* ------------------------------ */

/* Убираем плашку «ДЗ проверяется» у материала, следующего за реально проверяемым материалом */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-inaccessible .mbl-material-checking-holder {
    display: none;
}

/* НОВАЯ ПЛАШКА «ДЗ ПРОВЕРЯЕТСЯ» У РЕАЛЬНО ПРОВЕРЯЕМОГО МАТЕРИАЛА */
/* -------------------------------------------------------------- */

/* Добавляем плашку «ДЗ проверяется» под блоком Ссылка */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item:has([class*="status"][class*="checking"]):after {
	content: var(--holder-checking-text-mobile-panel-1);
	color: var(--holder-checking-color-mobile-panel-1);
	background: var(--holder-checking-bg-mobile-panel-1);
}

/* НОВАЯ ПЛАШКА У ОТКЛОНЁННОГО МАТЕРИАЛА */
/* ------------------------------------- */

/* Добавляем плашку «Пересдайте домашку» под блоком Ссылка при НЕправильном ответе */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item:has([class*="not-right"]):after {
	content: var(--holder-not-right-text-mobile-panel-1);
	color: var(--holder-not-right-color-mobile-panel-1);
	background: var(--holder-not-right-bg-mobile-panel-1);
}

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

/* Переориентация содержания карточки + плашки с таймером */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item:has([class*="mbl-material-countdown-holder"]) {
	display: flex;
	flex-flow: column-reverse;
	gap: 15px;
}

/* Карточка урока */
/* Рамка вокруг обложки и описания */
/* Работает, когда есть плашка Автотренинга (таймер) */
/* Нужно, чтобы у плашки была рамка */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item:has([class*="mbl-material-countdown-holder"]) {
	padding: var(--padding-mobile-panel-1);
}

/* Убираем рамку блока-ссылки, когда есть плашка Автотренинга (таймер) */
/* Она лишняя здесь, так как уже есть рамка плашки */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item:has([class*="mbl-material-countdown-holder"]) a {
	padding: 0;
}

/* Блок Заголовка и Таймера */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item .mbl-material-countdown-holder {
	background: var(--holder-countdown-bg-mobile-panel-1);
	color: var(--holder-countdown-color-mobile-panel-1);
	display: flex;
	flex-flow: column;
	/* flex-flow: row; */
	height: auto;
	padding: 10px;
	border-radius: calc(var(--radius-mobile-panel-1) - var(--padding-mobile-panel-1));
	margin: 0px 0px 0px 0px;
	width: auto;
	left: 0;
	top: 0;
	position: relative;
	align-items: center;
	justify-content: center;
	/* gap: 10px; */
	gap: 5px;
	font-family: tahoma, arial, helvetica, sans-serif;
	/* размер точек-разделителей между цифрами в таймере */
	font-size: 1.6rem;
}

@media (min-width: 1400px) {

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item .mbl-material-countdown-holder {
	top: 0;
}
}

/* Переориентация Заголовка и Таймера на маленьких экранах */

@media (max-width: 767px) 
	{
body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item .mbl-material-countdown-holder {
	flex-flow: column;
	gap: 0px;
}

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item .mbl-material-countdown-holder .mbl-material-countdown-title {
	padding: 0;
	font-size: 16px;
}

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item .mbl-material-countdown-holder .mbl-material-countdown-content{
	margin: 0;
}
	}

/* Блок только Заголовка */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item .mbl-material-countdown-holder .mbl-material-countdown-title {
    /* размер заголовка в таймере */
	font-size: var(--holder-title-size-countdown-mobile-panel-1);
}

/* Блок только Таймера */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item .mbl-material-countdown-holder .mbl-material-countdown-content{
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
}

/* Блок иконки на плашке с таймером */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item .mbl-material-countdown-holder .mbl-material-countdown-content i.fa {
    /* размер иконки в таймере */
	font-size: var(--holder-icon-size-countdown-mobile-panel-1);
    margin: 0px;
}

/* Иконка на плашке с таймером */

body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item .mbl-material-countdown-holder .fa-hourglass-half::before {
	content: var(--new-icon-countdown-mobile-panel-1);
}

/* Скрываем Иконку таймера на маленьких экранах */

@media (max-width: 767px) {
	
body .menu-opened.mbli3-left-menu .materials-block-one-column-mobile .material-item .mbl-material-countdown-holder .fa-hourglass-half {
	display: none;
}
}