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

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

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

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

:root {

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

/* Фон карточки */
--bg-panel-9: #1E1E1E;

/* Толщина внутреннего отступа */
--border-panel-9: 12px;

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


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

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

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

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

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

/* Количество строк в описании материала */
--description-lines-panel-9: 8;

/* Цвет описания материала */
--description-color-panel-9: #B7B7B7;


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

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

/* Прозрачность контента при наведении */
--content-opacity-open-hover-panel-9: 1;


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

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

/* Прозрачность контента при наведении */
--content-opacity-closed-hover-panel-9: 0.72;


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

--auto-bg-hover-panel-9: #242424;

--content-opacity-auto-hover-panel-9: 0.72;


/* НАСТРОЙКИ ИНДИКАТОРОВ */
/* --------------------- */

/* Закругление замка */
--lock-icon-radius-panel-9: 10px;

/* Фон замка */
--lock-icon-bg-panel-9: #2A2A2A;

/* НЕ НАЧАТ */
--new-status-not-started-color-panel-9: #1E1E1E;

/* Рамка НЕ НАЧАТ */
--new-status-not-started-border-color-panel-9: #555555;

/* ПРОВЕРЯЕТСЯ */
--new-status-checking-color-panel-9: #C89B3C;

/* ВЫПОЛНЕНО */
--new-status-done-color-panel-9: #58B84F;

/* НЕ ВЫПОЛНЕНО */
--new-status-not-right-color-panel-9: #C74B4B;


/* ИКОНКИ */

--new-icon-checking-panel-9: "\f253";
--new-icon-done-panel-9: "\f00c";
--new-icon-not-right-panel-9: "\f00d";
--new-icon-countdown-panel-9: "\f017";


/* ПЛАШКИ */
/* ------ */

--holder-checking-text-panel-9:
"Домашка проверяется. Это займёт меньше 1-го часа";

--holder-not-right-text-panel-9:
"Пересдайте домашку. Откройте и отредактируйте ответ";

--holder-checking-bg-panel-9: #C89B3C;
--holder-checking-color-panel-9: #111111;

--holder-not-right-bg-panel-9: #7D3030;
--holder-not-right-color-panel-9: #FFFFFF;

--holder-countdown-bg-panel-9: #C89B3C;
--holder-countdown-color-panel-9: #111111;

}


/* Раскомментировать, чтобы убрать плашки ДЗ */

.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;
}

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


@media (min-width: 992px) {

.site-content .materials-row .container,
.site-content .materials-row.one-in-line .container {
	width: 1000px;
	max-width: calc(100% - 60px);
}

}

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

.site-content .materials-row .container,
.site-content .materials-row.one-in-line .container {
	width: 700px;
	max-width: calc(100% - 40px);
}

}

@media (max-width: 767px) {

.site-content .materials-row .container,
.site-content .materials-row.one-in-line .container {
	width: 100%;
	max-width: 100%;
	padding-left: 15px;
	padding-right: 15px;
}

}



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

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


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

.site-content .materials-row .material-item {

	border-radius: var(--radius-panel-9);

	padding: var(--border-panel-9);

	background: var(--bg-panel-9);

	border: 1px solid #2E2E2E;

	box-shadow:
	0 8px 25px rgba(0,0,0,0.22);

	transition:
	background-color 0.22s ease,
	border-color 0.22s ease,
	transform 0.22s ease,
	box-shadow 0.22s ease !important;

	overflow: visible;
}


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

.site-content .materials-row .material-opened:hover {

	background: var(--open-bg-hover-panel-9);

	border-color: #4A3A18;

	transform: translateY(-2px);

	box-shadow:
	0 12px 30px rgba(0,0,0,0.32);
}


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

.site-content .materials-row .material-closed:hover {

	background: var(--close-bg-hover-panel-9);

	border-color: #403030;

}


/* АВТОТРЕНИНГ */

.site-content .materials-row .material-inaccessible:hover {

	background: var(--auto-bg-hover-panel-9);

}



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

.site-content .materials-row .material-item a,
.site-content .materials-row.one-in-line .material-item a {

	display: flex;

	align-items: center;

	flex-flow: row;

	gap: 0;

	height: auto;

	text-decoration: none !important;
}



/* 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.22s ease-out;

	align-self: center;
}


/* Обложка */

.site-content .materials-row .material-item .thumbnail-wrap {

	min-height: auto;

	height: auto;

	aspect-ratio: 1;

	width: 62px;

	border-radius: var(--border-radius-panel-9);

	overflow: hidden;

	transition: all 0.22s ease-out;

	align-items: center;

	display: flex;

	flex-direction: row;

	column-gap: 3px;

	background-color: #161616;

	border: 1px solid #343434;

	box-shadow:
	0 3px 10px rgba(0,0,0,.25);
}


/* Убираем старую прозрачность */

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


/* Hover открытый */

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


/* Hover закрытый */

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


/* Hover автотренинг */

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



/* 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: 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-9)!important;
}

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

.site-content .materials-row .material-inaccessible:hover .content-wrap {
	opacity: var(--content-opacity-auto-hover-panel-9)!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: 0 15px 0 20px;

	display: flex;

	flex-wrap: wrap;

	gap: 8px;
}



/* Заголовок */

.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-9)!important;

	font-weight: var(--title-weight-panel-9);

	font-family: tahoma, arial, helvetica, sans-serif;

	font-size: var(--title-size-panel-9);

	line-height: 1.35;

	transition: color .2s ease;
}


/* Золотой заголовок при наведении */

.site-content .materials-row .material-opened:hover .content-wrap .title {

	color: #D3A746 !important;
}



/* Количество строк */

.site-content .materials-row .material-item .flex-wrap .content-wrap .title {

	overflow: hidden;

	display: -webkit-box;

	-webkit-line-clamp: var(--title-lines-panel-9);

	line-clamp: var(--title-lines-panel-9);

	-webkit-box-orient: vertical;

	hyphens: auto;
}



/* Описание */

.site-content .materials-row .material-item .flex-wrap .content-wrap .description {

	margin: 0;

	color: var(--description-color-panel-9)!important;

	font-size: 1.35rem;

	line-height: 1.45;
}


.site-content .materials-row .material-item .flex-wrap .content-wrap .description > p {

	overflow: hidden;

	display: -webkit-box;

	-webkit-line-clamp: var(--description-lines-panel-9);

	line-clamp: var(--description-lines-panel-9);

	-webkit-box-orient: vertical;

	hyphens: auto;

	margin: 0;
}



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

.site-content .materials-row .material-item.material-inaccessible:before {

	border-radius: var(--radius-panel-9);

	left: 0;

	top: 0;
}



/* 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: 1.7rem;

	background: var(--lock-icon-bg-panel-9);

	display: flex;

	align-items: center;

	justify-content: center;

	padding: 0;

	line-height: normal;

	width: 42px;

	min-width: 42px;

	height: 42px;

	border-radius: var(--lock-icon-radius-panel-9);

	align-self: center;

	border: 1px solid #353535;

	box-sizing: border-box;
}


/* Открытый замок */

.site-content .materials-row .material-opened a:after {

	content: "\f09c";

	color: #58B84F;
}


/* Закрытый замок */

.site-content .materials-row .material-closed a:after,
.site-content .materials-row .material-inaccessible a:after {

	content: "\f023";

	color: #C74B4B;
}



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

.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(-55px - var(--border-panel-9));

	top: 50%;

	transform: translateY(-50%);

	font-size: 1.5rem;

	line-height: normal;

	opacity: 1;

	z-index: 5;

	padding: 0;

	width: 36px;

	height: 36px;

	border-radius: 50%;

	visibility: visible;

	box-sizing: border-box;
}



/* Мобильные */

@media (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: 29px;

	top: 29px;

	transform: none;

	scale: .65;

	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: "";

	color: transparent;

	background: #171717;

	border: 2px solid var(--new-status-not-started-border-color-panel-9);
}



/* ПРОВЕРЯЕТСЯ */

.site-content .materials-row .material-opened:has([class*="status"][class*="checking"]) a .col-thumb:before {

	content: var(--new-icon-checking-panel-9);

	color: #111111;

	background: var(--new-status-checking-color-panel-9);

	border: none;
}



/* ВЫПОЛНЕНО */

.site-content .materials-row .material-done a .col-thumb:before {

	content: var(--new-icon-done-panel-9);

	color: #FFFFFF;

	background: var(--new-status-done-color-panel-9);

	border: none;
}



/* ОТКЛОНЕНО */

.site-content .materials-row .material-item:has([class*="not-right"]) a .col-thumb:before {

	content: var(--new-icon-not-right-panel-9)!important;

	color: #FFFFFF!important;

	background: var(--new-status-not-right-color-panel-9)!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-9);

	color: #111111;

	background: #C89B3C;

	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: 12px 16px;

	margin-top: 10px;

	font-size: 1.45rem;

	font-family: tahoma, arial, helvetica, sans-serif;

	display: flex;

	justify-content: center;

	text-align: center;

	border-radius: 10px;
}



/* Скрываем старую плашку */

.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-9);

	color: var(--holder-checking-color-panel-9);

	background: var(--holder-checking-bg-panel-9);
}



/* Отклонено */

.site-content .materials-row .material-item:has([class*="not-right"]):after {

	content: var(--holder-not-right-text-panel-9);

	color: var(--holder-not-right-color-panel-9);

	background: var(--holder-not-right-bg-panel-9);
}



/* ТАЙМЕР */
/* ------ */

.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-9);

	color: var(--holder-countdown-color-panel-9);

	display: flex;

	flex-flow: row;

	height: auto;

	padding: 10px 14px;

	border-radius: 10px;

	margin: 0;

	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.45rem;

	font-weight: 600;
}



/* Мобильный таймер */

@media (max-width: 767px) {

.site-content .materials-row .material-item .mbl-material-countdown-holder {

	flex-flow: column;

	gap: 0;
}

.site-content .materials-row .material-item .mbl-material-countdown-holder .mbl-material-countdown-title {

	padding: 0;

	font-size: 14px;
}

.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-9);
}


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

@media (max-width: 767px) {

.site-content .materials-row .material-item .mbl-material-countdown-holder .fa-hourglass-half {

	display: none;
}

}