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

/* ------------------------------------------ */
/* ТРАНСФОРМЕР - НАЗВАНИЕ, ОПИСАНИЕ - 4 В РЯД */
/* ------------------------------------------ */

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

:root {

/* Добавить -reverse после column, чтобы Перевернуть НЕчётные карточки */
/* Должно получиться column-reverse */
--reverse-panel-33: column;

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

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

/* Толщина рамки карточки */
/* оптимально 20px */
--border-panel-33: 20px;

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

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

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

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

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

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

	/* Цвет описания материала */
	--description-color-panel-33: #000000;
	
	/* Размер текста на Новой кнопке при наведении */
	/* НЕ МЕНЯТЬ! */
	--new-button-text-size-panel-33: 1.6rem;

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

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

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

	/* Цвет текста на ОТКРЫТОЙ кнопке */
	--open-button-text-color-panel-33: #FFFFFF;
	
	/* Текст Новой кнопки ОТКРЫТОГО Материала */
	/* ВАЖНО! Измените текст только между кавычками '' */
	--open-button-text-panel-33: 'Смотреть';
	
	/* Прозрачность контента при наведении на ОТКРЫТЫЙ материал */
	--content-opacity-open-hover-panel-33: 0.3;

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

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

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

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

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

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

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

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

/* ПЛАШКИ НА КАРТОЧКЕ */
/* ------------------ */
	
	/* Фон плашки с таймером */
	--holder-countdown-bg-panel-33: #389de5;
	
	/* Цвет текста на плашке с таймером */
	--holder-countdown-color-panel-33: #ffffff;

}

/* Раскомментировать, чтобы УБРАТЬ большую галочку пройденного материала */

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

/* 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: 1370px;
}
}

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

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

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

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

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

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

@media (max-width: 767px) {

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

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

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

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

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

@media (min-width: 1400px) {
	
.site-content .materials-row .col-md-6,
.site-content .materials-row.one-in-line .col-md-12 {
    width: calc(100%/4);
}
}

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

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

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

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

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

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

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

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

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

.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-33);
	padding: var(--border-panel-33);
    background: var(--bg-panel-33);
	transition: all 0.25s ease-out!important;
	/* Убираем перекрытие карточки, чтобы видно было галочку ДЗ */
    overflow: visible;
}

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

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

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

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

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

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

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

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

/* Чередование Чётных и Нечётных карточек */

.site-content .materials-row .col-md-6:nth-child(2n) .material-item a,
.site-content .materials-row.one-in-line .col-md-12:nth-child(2n) .material-item a {
    flex-flow: var(--reverse-panel-33);
}

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

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

/* СОЗДАЁМ НОВУЮ КНОПКУ ПРИ НАВЕДЕНИИ */
/* ---------------------------------- */

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

.site-content .materials-row .material-item:hover .flex-wrap:after {
	display: flex;
	position: absolute;
	align-self: center;
	text-align: center;
	height: auto;
	max-width: 80%;
	padding: 10px 20px;
	border-radius: 5px;
	line-height: normal;
	text-transform: lowercase;
	font-family: tahoma, arial, helvetica, sans-serif;
	font-size: var(--new-button-text-size-panel-33);
	
	/* чтобы кнопка была выше блока контента */
	z-index: 5;
}

/* Корректируем выравнивание элементов в блоке ССЫЛКА */

.site-content .materials-row .col-md-6 .material-item a,
.site-content .materials-row.one-in-line .col-md-12 .material-item a {
	justify-content: center;
}

/* НОВАЯ Кнопка ОТКРЫТОГО Материала */

.site-content .materials-row .material-opened:hover .flex-wrap:after,
.site-content .materials-row.one-in-line .material-opened:hover .flex-wrap:after {
	content: var(--open-button-text-panel-33);
	color: var(--open-button-text-color-panel-33)!important;
    background: var(--open-button-bg-panel-33)!important;
}

/* НОВАЯ Кнопка ЗАКРЫТОГО Материала */

.site-content .materials-row .material-closed:hover .flex-wrap:after,
.site-content .materials-row.one-in-line .material-closed:hover .flex-wrap:after {
	content: var(--close-button-text-panel-33);
	color: var(--close-button-text-color-panel-33)!important;
    background: var(--close-button-bg-panel-33)!important;
}

/* НОВАЯ Кнопка Материала АВТОТРЕНИНГА */

.site-content .materials-row .material-inaccessible:hover .flex-wrap:after,
.site-content .materials-row.one-in-line .inaccessible-closed:hover .flex-wrap:after {
	content: var(--auto-button-text-panel-33);
	color: var(--auto-button-text-color-panel-33)!important;
    background: var(--auto-button-bg-panel-33)!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 {
	display: none;
}

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

.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%; */
	width: auto;
	height: auto;
	border: none;
	border-radius: 0;
	background: none;
}

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

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

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

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

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

.site-content .materials-row .material-inaccessible:hover .content-wrap {
    opacity: var(--content-opacity-auto-hover-panel-33)!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 {
	padding: 0px calc(20px - var(--border-panel-33)) 0px calc(20px - var(--border-panel-33));
	border: none;
	/* border-bottom: 10px solid rgb(0 0 0 / 0%); */
}

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

.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-33)!important;
	font-weight: var(--title-weight-panel-33);
	font-family: tahoma, arial, helvetica, sans-serif;
	font-size: var(--title-size-panel-33);
}

/* Размер заголовка только на средних экранах */

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

.site-content .materials-row .material-item .content-wrap .title,
.site-content .materials-row.one-in-line .material-item .content-wrap .title {
	font-size: 1.7rem;
}
}

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

.site-content .materials-row .material-item .flex-wrap .content-wrap .title {
	overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: var(--title-lines-panel-33);
    line-clamp: var(--title-lines-panel-33);
    -webkit-box-orient: vertical;

    hyphens: auto;
}

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

.site-content .materials-row .material-item .content-wrap .description {
	color: var(--description-color-panel-33)!important;
}

/* Количество строк в описании урока */

.site-content .materials-row .material-item .flex-wrap .content-wrap .description > p {
	overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: var(--description-lines-panel-33);
    line-clamp: var(--description-lines-panel-33);
    -webkit-box-orient: vertical;
	
    hyphens: auto;
	margin: 0 0 0px;
}

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

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

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

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

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

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

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

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

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

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

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

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

.site-content .materials-row .material-item .mbl-material-countdown-holder {
	background: var(--holder-countdown-bg-panel-33);
	color: var(--holder-countdown-color-panel-33);
}

@media (min-width: 1400px) {

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