/* ДЛЯ ОДНОЙ РУБРИКИ */

/* --------------------------------------------------- */
/* СПИСОК - НАЗВАНИЕ, ОБЛОЖКА - БЕЗ НОМЕРА - 1 КОЛОНКА */
/* --------------------------------------------------- */

/* ДИЗАЙН 1 */
/* -------- */

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

:root {

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

/* Фон карточки */
--bg-panel-8: #ffffff;

/* Толщина рамки обложки */
/* оптимально 0 или 10px */
--border-panel-8: 10px;

/* Закругление рамки обложки */
--border-radius-panel-8: 15px;

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

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

	/* Цвет заголовка материала */
	--title-color-panel-8: #000000;

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

	/* Размер заголовка */
	--title-size-panel-8: 1.9rem;
	
	/* Перенос слов в заголовке и описании */
	/* Поставьте "auto", чтобы переносить слова через дефис */
	/* Поставьте "none", чтобы убрать перенос слов  */
	--title-and-description-hyphens-panel-8: auto;

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

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

	/* Фон ОТКРЫТОЙ кнопки */
	--open-button-bg-panel-8: #65BF49;

	/* Цвет текста на ОТКРЫТОЙ кнопке */
	--open-button-text-color-panel-8: #FFFFFF;
	
	/* Прозрачность контента при наведении на ОТКРЫТЫЙ материал */
	--content-opacity-open-hover-panel-8: 0.3;

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

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

	/* Фон ЗАКРЫТОЙ кнопки */
	--close-button-bg-panel-8: #FF4B3E;

	/* Цвет текста на ЗАКРЫТОЙ кнопке */
	--close-button-text-color-panel-8: #FFFFFF;
	
	/* Прозрачность контента при наведении на ЗАКРЫТЫЙ материал */
	--content-opacity-closed-hover-panel-8: 0.3;

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

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

	/* Фон кнопки в Автотренинге */
	--auto-button-bg-panel-8: #FF4B3E;

	/* Цвет текста на кнопке в Автотренинге */
	--auto-button-text-color-panel-8: #FFFFFF;
	
	/* Прозрачность контента при наведении на ЗАКРЫТЫЙ материал АВТОТРЕНИНГА */
	--content-opacity-auto-hover-panel-8: 0.3;

/* НАСТРОЙКИ ИНДИКАТОРОВ */
/* --------------------- */
	
	/* Закругление замка доступности */
	--lock-icon-radius-panel-8: 10px;
	
	/* Фон замка доступности */
	--lock-icon-bg-panel-8: rgb(255, 255, 255, 0.9);
	
	/* Фон нового статуса НЕ НАЧАТ */
	--new-status-not-started-color-panel-8: #ffffff;
	
	/* Цвет рамки вокруг статуса НЕ НАЧАТ */
	--new-status-not-started-border-color-panel-8: #e6e6e6;
	
	/* Фон нового статуса ПРОВЕРЯЕТСЯ */
	--new-status-checking-color-panel-8: #389de5;

	/* Фон нового статуса ВЫПОЛНЕНО */
	--new-status-done-color-panel-8: #71d43a;

	/* Фон нового статуса НЕ ВЫПОЛНЕНО */
	--new-status-not-right-color-panel-8: #ff2828;

	/* Иконка статуса ПРОВЕРЯЕТСЯ */
	/* "\f253" - песочные часы */
	--new-icon-checking-panel-8: "\f253";

	/* Иконка статуса ВЫПОЛНЕНО */
	/* "\f00c" - галочка */
	/* "\f118" - смайл */
	--new-icon-done-panel-8: "\f00c";

	/* Иконка статуса НЕ ВЫПОЛНЕНО */
	/* "\f00d" - крестик */
	/* "\f119" - грустный смайлик */
	--new-icon-not-right-panel-8: "\f00d";
	
	/* Иконка статуса с ТАЙМЕРОМ */
	/* "\f017" - часы */
	--new-icon-countdown-panel-8: "\f017";

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

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

	/* Текст на плашке ОТКЛОНЁННОГО МАТЕРИАЛА */
	--holder-not-right-text-panel-8: "Пересдайте домашку. Откройте и отредактируйте ответ";
	
	/* Фон плашки «ДЗ проверяется» */
	--holder-checking-bg-panel-8: #389de5;
	
	/* Цвет текста на плашке «ДЗ проверяется» */
	--holder-checking-color-panel-8: #ffffff;
	
	/* Фон плашки «Отклонённое ДЗ» */
	--holder-not-right-bg-panel-8: #ff2828;
	
	/* Цвет текста на плашке «Отклонённое ДЗ» */
	--holder-not-right-color-panel-8: #ffffff;
	
	/* Фон плашки с таймером */
	--holder-countdown-bg-panel-8: #389de5;
	
	/* Цвет текста на плашке с таймером */
	--holder-countdown-color-panel-8: #ffffff;

}

/* Раскомментировать, чтобы УБРАТЬ ПЛАШКУ со Статусом ДЗ */

.site-content .materials-row .material-item:has([class*="status"][class*="checking"]):after,
.site-content .materials-row .material-item:has([class*="not-right"]):after {
	/* display: none!important; */
}


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

/* Корректируем сетку и порядок карточек */

.site-content .materials-row .container .row,
.site-content .materials-row.one-in-line .container .row {
    display: flex;
    flex-wrap: wrap;
}

/* Убираем влияние опции «Материалы в 1 колонку» */

.site-content .materials-row.one-in-line .container {
    max-width: none;
}

@media (min-width: 1400px) {

.site-content .materials-row .container,
.site-content .materials-row.one-in-line .container {
    width: 750px;
}
}

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

.site-content .materials-row .container,
.site-content .materials-row.one-in-line .container {
    width: 750px;
}
}

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

.site-content .materials-row .container,
.site-content .materials-row.one-in-line .container {
    width: 750px;
}
}

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

.site-content .materials-row .container,
.site-content .materials-row.one-in-line .container {
    width: 610px;
}
}

@media (min-width: 460px) and (max-width: 767px) {

.site-content .materials-row .container,
.site-content .materials-row.one-in-line .container {
	width: 100%;
    max-width: 100%;
}
}

@media (min-width: 320px) and (max-width: 459px) {

.site-content .materials-row .container,
.site-content .materials-row.one-in-line .container {
	width: 100%;
    max-width: 100%;
}
}

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

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

.site-content .materials-row .col-md-6,
.site-content .materials-row.one-in-line .col-md-12 {
    float: none;
}

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

.site-content .materials-row .col-md-6,
.site-content .materials-row.one-in-line .col-md-12 {
    width: 100%;
}

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

.site-content .materials-row .material-item {
	border-radius: var(--radius-panel-8);
	padding: var(--border-panel-8);
	background: var(--bg-panel-8);
	transition: all 0.25s ease-out!important;
	/* Убираем перекрытие карточки, чтобы видно было галочку ДЗ */
    overflow: visible;
}

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

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

.site-content .materials-row .material-opened:hover {
    background: var(--open-bg-hover-panel-8);
}

/* Кнопка открытого доступа */

.site-content .materials-row .material-item .col-content .content-overlay .doc-label.opened,
.site-content .materials-row.one-in-line .material-item .col-content .content-overlay .d  oc-label.opened {
	color: var(--open-button-text-color-panel-8)!important;
    background: var(--open-button-bg-panel-8)!important;
}

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

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

.site-content .materials-row .material-closed:hover {
    background: var(--close-bg-hover-panel-8);
}

/* Кнопка закрытого доступа */

.site-content .materials-row .material-closed .content-overlay .doc-label.locked,
.site-content .materials-row.one-in-line .material-closed .content-overlay .doc-label.locked {
	color: var(--close-button-text-color-panel-8)!important;
    background: var(--close-button-bg-panel-8)!important;
}

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

.site-content .materials-row .material-item a,
.site-content .materials-row.one-in-line .material-item a {
	flex-flow: row;
    height: auto;
}

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

.site-content .materials-row .material-item .flex-wrap .col-thumb,
.site-content .materials-row.one-in-line .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: start;
}

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

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

/* Убираем старую прозрачность блока обложки при наведении */

.site-content .materials-row .material-item:hover .col-thumb:before {
	opacity: 0;
}

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

.site-content .materials-row .material-opened:hover .thumbnail-wrap {
    opacity: var(--content-opacity-open-hover-panel-8);
}

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

.site-content .materials-row .material-closed:hover .thumbnail-wrap {
    opacity: var(--content-opacity-closed-hover-panel-8);
}

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

.site-content .materials-row .material-inaccessible:hover .thumbnail-wrap {
    opacity: var(--content-opacity-auto-hover-panel-8);
}

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

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

.site-content .materials-row .material-item:hover .content-overlay {
	display: none;
}

.site-content .materials-row .material-item .flex-wrap .col-content,
.site-content .materials-row.one-in-line .material-item .flex-wrap .col-content {
	/* width: auto; */
	width: 100%;
	height: auto;
	border: none;
	border-radius: 0;
	background: none;
	
	/* выравниваем блок описания по центру родительского блока */
	align-self: center;
}

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

.site-content .materials-row .material-item:hover .flex-wrap .col-content,
.site-content .materials-row.one-in-line .material-item:hover .flex-wrap .col-content {
	background: none;
}

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

.site-content .materials-row .material-opened:hover .content-wrap {
    opacity: var(--content-opacity-open-hover-panel-8)!important;
}

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

.site-content .materials-row .material-closed:hover .content-wrap {
    opacity: var(--content-opacity-closed-hover-panel-8)!important;
}

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

.site-content .materials-row .material-inaccessible:hover .content-wrap {
    opacity: var(--content-opacity-auto-hover-panel-8)!important;
}

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

.site-content .materials-row .material-item .flex-wrap .col-content .content-wrap,
.site-content .materials-row.one-in-line .material-item .flex-wrap .col-content .content-wrap {
    border: none;
	padding: 0px 10px 0px 20px;
}

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

.site-content .materials-row .material-item .content-wrap .title,
.site-content .materials-row.one-in-line .material-item .content-wrap .title {
	color: var(--title-color-panel-8)!important;
	font-weight: var(--title-weight-panel-8);
	font-family: tahoma, arial, helvetica, sans-serif;
	font-size: var(--title-size-panel-8);
}

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

.site-content .materials-row .material-item .flex-wrap .content-wrap .title {
	overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: var(--title-lines-panel-8);
    line-clamp: var(--title-lines-panel-8);
    -webkit-box-orient: vertical;
	/* перенос текста */
    /* hyphens: auto; */
	hyphens: var(--title-and-description-hyphens-panel-8);
}

/* Скрываем описание */

.site-content .materials-row .material-item .flex-wrap .content-wrap .description {
	display: none;
}

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

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

.site-content .materials-row .material-item.material-inaccessible:before {
	border-radius: var(--radius-panel-8);
	/* коррекция положения наложения */
	left: 0px;
    top: 0;
}

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

.site-content .materials-row .material-inaccessible:hover {
    background: var(--auto-bg-hover-panel-8);
}

/* Кнопка закрытого урока автотренинга */

.site-content .materials-row .material-inaccessible .content-overlay .doc-label.locked,
.site-content .materials-row.one-in-line .material-inaccessible .content-overlay .doc-label.locked {
	color: var(--auto-button-text-color-panel-8)!important;
    background: var(--auto-button-bg-panel-8)!important;
}

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

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

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

.site-content .materials-row .material-item .thumbnail-wrap .icons-top {
	position: unset;
	width: max-content;
	height: max-content;
}

.site-content .materials-row .material-item .thumbnail-wrap .icons-top .icons {
    margin: 0;
    display: flex;
    width: max-content;
    column-gap: 3px;
	align-items: center;
}

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

.site-content .materials-row .material-item .thumbnail-wrap .icons-top .m-icon,
.site-content .materials-row.one-in-line .material-item .thumbnail-wrap .icons-top .m-icon {
	display: none;
}

/* Скрываем ЗАМОК доступности материала */
/* Вместо него НОВЫЙ ЗАМОК доступности */

.site-content .materials-row .material-item .thumbnail-wrap .icons-top .icons .status-icon {
	display: none;
}

/* Добавляем НОВЫЕ ЗАМКИ доступности */
/* --------------------------------- */

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

.site-content .materials-row .material-opened a:after,
.site-content .materials-row .material-closed a:after,
.site-content .materials-row .material-inaccessible a:after {
	font-family: "icomoon" !important;
	font-size: 2rem;
	background: var(--lock-icon-bg-panel-8);
	display: flex;
    align-items: center;
	justify-content: center;
    padding: 20px;
	line-height: normal;
	width: 40px;
	height: 40px;
    border-radius: var(--lock-icon-radius-panel-8);
	/* смещаем замок чуть вниз, чтобы он был посередине родительского блока, когда 1 строка */
	top: 7px;
	position: relative;
	/* выравниваем замок по верхнему краю родительского блока */
	align-self: start;
}

/* НОВЫЙ ОТКРЫТЫЙ ЗАМОК */

.site-content .materials-row .material-opened a:after {
	content: "\f09c";
	color: #56bf50;
}

/* НОВЫЙ ЗАКРЫТЫЙ ЗАМОК */

.site-content .materials-row .material-closed a:after,
.site-content .materials-row .material-inaccessible a:after {
	content: "\f023";
	color: #FF4B3E;
}

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

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

.site-content .materials-row .material-item .thumbnail-wrap .icons-bottom,
.site-content .materials-row.one-in-line .material-item .thumbnail-wrap .icons-bottom {
	display: none;
}

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

.site-content .materials-row .material-item .col-thumb.done:after {
	display: none!important;
}

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

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

.site-content .materials-row .material-inaccessible a .col-thumb:after,
.site-content .materials-row .material-item:not(.material-inaccessible) a .col-thumb:before {
	display: flex;
    align-items: center;
	justify-content: center;
    font-family: "icomoon" !important;
	position: absolute;
	left: calc(-60px - var(--border-panel-8));
    top: 7px;
    font-size: 2rem;
    line-height: normal;
    opacity: 1;
    z-index: 5;
    padding: 10px;
	width: 40px;
	height: 40px;
    border-radius: 50%;
	visibility: visible;
}

/* Новая галочка на маленьких экранах */

@media (min-width: 320px) and (max-width: 767px) {
.site-content .materials-row .material-inaccessible a .col-thumb:after,
.site-content .materials-row .material-item:not(.material-inaccessible) a .col-thumb:before {
	left: 33px;
	top: 23px;
	scale: 0.6;
    z-index: 500;
}
}

/* ПУСТАЯ ГАЛОЧКА У НЕНАЧАТОГО ОБЫЧНОГО МАТЕРИАЛА */
/* ПУСТАЯ ГАЛОЧКА У НЕНАЧАТОГО МАТЕРИАЛА АВТОТРЕНИНГА */
/* ПУСТАЯ ГАЛОЧКА У НЕНАЧАТОГО МАТЕРИАЛА АВТОТРЕНИНГА, СЛЕДУЮЩЕГО ЗА ПРОВЕРЯЕМЫМ МАТЕРИАЛОМ */

.site-content .materials-row .material-inaccessible a .col-thumb:after,
.site-content .materials-row .material-item.material-opened:not(.material-done) a .col-thumb:before,
.site-content .materials-row .material-inaccessible:has([class*="mbl-material-checking-holder"]) a .col-thumb:after {
    content: "\f192";
    color: var(--new-status-not-started-color-panel-8);
    background: var(--new-status-not-started-color-panel-8);
	border: 2px solid var(--new-status-not-started-border-color-panel-8);
}

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

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

.site-content .materials-row .material-opened:has([class*="status"][class*="checking"]) a .col-thumb:before {
    content: var(--new-icon-checking-panel-8);
    color: #ffffff;
    background: var(--new-status-checking-color-panel-8);
	border: none;
}

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

.site-content .materials-row .material-done a .col-thumb:before {
    content: var(--new-icon-done-panel-8);
    color: #ffffff;
    background: var(--new-status-done-color-panel-8);
}

/* ГАЛОЧКА У ОТКЛОНЁННОГО МАТЕРИАЛА */

.site-content .materials-row .material-item:has([class*="not-right"]) a .col-thumb:before {
    content: var(--new-icon-not-right-panel-8)!important;
    color: #ffffff !important;
    background: var(--new-status-not-right-color-panel-8) !important;
	border: none!important;
}

/* УБИРАЕМ ГАЛОЧКУ У ЗАКРЫТОГО УРОВНЕМ ДОСТУПА МАТЕРИАЛА */
/* Не работает, если включен Автотренинг. У ещё недоступного материала будет пустой кружок */

.site-content .materials-row .material-item.material-closed a .col-thumb:before {
	display: none;
}

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

.site-content .materials-row .material-item.material-opened:has([class*="mbl-material-countdown-holder"]):before {
    content: var(--new-icon-countdown-panel-8);
	color: #ffffff;
    background: #389de5;
	border: none;
}

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

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

.site-content .materials-row .material-item:has([class*="status"][class*="checking"]):after,
.site-content .materials-row .material-item:has([class*="not-right"]):after {
	padding: 16px;
	margin-top: 10px;
	font-size: 1.8rem;
	font-family: tahoma, arial, helvetica, sans-serif;
	display: flex;
	justify-content: center;
	text-align: center;
	border-radius: calc(var(--radius-panel-8) - var(--border-panel-8));
}

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

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

.site-content .materials-row .material-inaccessible .mbl-material-checking-holder {
    display: none;
}

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

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

.site-content .materials-row .material-item:has([class*="status"][class*="checking"]):after {
	content: var(--holder-checking-text-panel-8);
	color: var(--holder-checking-color-panel-8);
	background: var(--holder-checking-bg-panel-8);
}

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

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

.site-content .materials-row .material-item:has([class*="not-right"]):after {
	content: var(--holder-not-right-text-panel-8);
	color: var(--holder-not-right-color-panel-8);
	background: var(--holder-not-right-bg-panel-8);
}

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

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

.site-content .materials-row .material-item:has([class*="mbl-material-countdown-holder"]) {
	display: flex;
	flex-flow: column-reverse;
	gap: 10px;
}

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

.site-content .materials-row .material-item .mbl-material-countdown-holder {
	background: var(--holder-countdown-bg-panel-8);
	color: var(--holder-countdown-color-panel-8);
	display: flex;
	flex-flow: row;
	height: auto;
	padding: 10px;
	border-radius: calc(var(--radius-panel-8) - var(--border-panel-8));
	margin: 0px 0px 0px 0px;
	width: auto;
	left: 0;
	top: 0;
	position: relative;
	align-items: center;
	justify-content: center;
	gap: 15px;
	font-family: tahoma, arial, helvetica, sans-serif;
	font-size: 1.6rem;
}

@media (min-width: 1400px) {

.site-content .materials-row .material-item .mbl-material-countdown-holder {
	top: 0;
}
}

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

@media (max-width: 767px) 
	{
.site-content .materials-row .material-item .mbl-material-countdown-holder {
	flex-flow: column;
	gap: 0px;
}

.site-content .materials-row .material-item .mbl-material-countdown-holder .mbl-material-countdown-title {
	padding: 0;
	font-size: 16px;
}

.site-content .materials-row .material-item .mbl-material-countdown-holder .mbl-material-countdown-content{
	margin: 0;
}
	}

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

.site-content .materials-row .material-item .mbl-material-countdown-holder .mbl-material-countdown-content{
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.site-content .materials-row .material-item .mbl-material-countdown-holder .fa-hourglass-half::before {
	content: var(--new-icon-countdown-panel-8);
}

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

@media (max-width: 767px) {
	
.site-content .materials-row .material-item .mbl-material-countdown-holder .fa-hourglass-half {
	display: none;
}
}