/* Задайте своё человеческое название файла между '' */
/* --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: 'Хлебные крошки станут похожи на меню + Адаптивный и стилизованный Прогресс обучения. Эти крошки особенно красиво смотрятся с дополнением «Шапка как баннер + Лого 2.0».'; */


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

:root {

	/* Фон хлебных крошек */
	--bg-bread-progress: #1E1E1E;

	/* Закругление фона хлебных крошек */
	--radius-bread-progress: 5px;

	/* Цвет прогресса */
	--color-progress-bar-1-bread-progress: #C89B3C;
	--color-progress-bar-2-bread-progress: #C89B3C;

	/* Выравнивание хлебных крошек - на Больших экранах */
	/* flex-start - СЛЕВА, center - ЦЕНТР, end - СПРАВА */
	--align-big-screen-bread-progress: flex-start;

	/* Корректировка отступа Крошек - на Больших экранах */
	/* "0" если выравнивание СЛЕВА */
	/* "1" если выравнивание ЦЕНТР или СПРАВА */
	--align-correction-bread-progress: 0;

	/* Выравнивание хлебных крошек - на Маленьких экранах */
	--align-small-screen-bread-progress: center;

	/* Иконка последней хлебной крошки - Материал */
	--icon-mat-bread-progress: "\f22d";

}


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


/* Хлебные крошки на мобильных */

@media (max-width: 767px) {

	.breadcrumbs-row:not(.mkk_nav) .container {
		max-width: 100%;
	}

}


/* Обёртка Хлебных крошек */

section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap {
	display: flex;
	flex-flow: row;
	flex-wrap: wrap;
	align-items: center;
	border: none;
	margin-top: 30px;
	padding: 3px 20px;
	background-color: var(--bg-bread-progress);
	border-radius: var(--radius-bread-progress);
}


/* Выравнивание Хлебных крошек и Прогресса - на Маленьких экранах */

@media (max-width: 767px) {

	section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap {
		flex-flow: column;
		align-items: var(--align-small-screen-bread-progress);
	}

	section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs {
		justify-content: var(--align-small-screen-bread-progress);
	}

}


/* Хлебные крошки */

section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs {
	display: flex;
	flex: auto;
	flex-wrap: wrap;
	align-items: center;
	padding: 10px 0 10px 0;
}


/* Выравнивание крошек - на Больших экранах */

@media (min-width: 768px) {

	section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs {
		justify-content: var(--align-big-screen-bread-progress);
	}

}


/* Крошка */

section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs .item {
	padding: 0;
	margin: 5px 0 5px 0;
	vertical-align: middle;
	max-width: 330px;
	cursor: pointer;
}


/* Крошка - на Средних экранах */

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

	section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs .item {
		max-width: 200px;
	}

}


/* Крошка - на Маленьких экранах */

@media (max-width: 767px) {

	section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs .item {
		max-width: 200px;
	}

}


/* Обёртка Иконки в крошке */

section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs .item .iconmoon {
	margin: 0;
	margin-right: 5px;
	line-height: normal;
}


/* Общая корректировка Иконок */

section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs .item .iconmoon:before,
section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs .item .icon-file-text-o:before {
	margin: 0;
	line-height: normal;
}


/* Корректируем Иконку последнего материала */

section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs .item .icon-file-text-o:before {
	margin-top: 1px;
}


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

section.breadcrumbs-row:not(.mkk_nav)
.breadcrumbs-wrap
.breadcrumbs
.item
.icon-folder-open-o {
	display: none;
}


/* Обёртка Разделителя крошек */

section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs .separator {
	padding: 0;
	margin: 2px 11px 0 11px;
	line-height: normal;
	vertical-align: middle;
}


/* Новая Иконка хлебной крошки - Материал */

section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs .item .icon-file-text-o:before {
	content: var(--icon-mat-bread-progress);
}


/* ---------------------------- */
/* ИНДИКАТОР ПРОХОЖДЕНИЯ УРОКОВ */
/* ---------------------------- */


/* Обёртка Индикатора */

section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .course-progress-wrap {
	display: flex;
	gap: 5px;
	align-items: center;
	margin: 0;
	padding: 0;
	width: 90px !important;
}


/* Отступ Крошек - на Средних и Больших экранах */
/* Чтобы Крошки были по центру страницы */
/* Только для залогиненных, когда отображается Прогресс */

@media (min-width: 768px) {

	section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap:has(.course-progress-wrap) .breadcrumbs {
		margin-left: calc(105px * var(--align-correction-bread-progress));
	}

}


/* Отступ Обёртки Индикатора - на Средних и Больших экранах */

@media (min-width: 768px) {

	section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .course-progress-wrap {
		margin-left: 15px;
	}

}


/* Обёртка Индикатора - на Маленьких экранах */

@media (max-width: 767px) {

	section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .course-progress-wrap {
		padding: 5px 0 15px 0;
		width: 150px !important;
	}

}


/* Непройденная часть Прогресса */

section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .course-progress-wrap .progress {
	width: 100%;
	height: 15px;
	margin: 0 2px 0 0;
	border-radius: 50px;
}


/* Пройденная часть Прогресса */

section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .course-progress-wrap .progress-bar {
	height: 15px;
	background-image: linear-gradient(
		to right,
		var(--color-progress-bar-1-bread-progress) 0%,
		var(--color-progress-bar-2-bread-progress) 100%
	);
}


/* ------------------------------------- */
/* КОРРЕКТИРОВКА МЕНЮ НА БОЛЬШИХ ЭКРАНАХ */
/* ------------------------------------- */
/* Чтобы левая часть меню хорошо смотрелась, когда Крошки СЛЕВА */

@media (min-width: 1199px) {

	.top-nav-row .container .row .top-nav-row--inner {
		padding-left: 21px;
	}

}