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

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

/* Эти крошки особенно красиво смотрятся с дополнением «Шапка как баннер + Лого 2.0» */

:root {

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

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

/* Цвет-Градиент 1 в Прогрессе */
--color-progress-bar-1-bread-progress: #fffc00;

/* Цвет-Градиент 2 в Прогрессе */
--color-progress-bar-2-bread-progress: #65BF49;

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

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

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

/* Иконка в хлебной крошке - Материал */
/* "\f118" - смайл, "\f0f6" - файл (по умолчанию) */
--icon-mat-bread-progress: "\f118";

}

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

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

@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,
section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs .item .icon-folder-open-o:before {
    margin: 0;
	line-height: normal;
}

/* Корректируем Иконку у крошек - Рубрики и Материал */

section.breadcrumbs-row:not(.mkk_nav) .breadcrumbs-wrap .breadcrumbs .item .icon-folder-open-o:before,
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 .separator {
    padding: 0;
	margin: 2px 15px 0 15px;
    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: 0px 2px 0px 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;
}
}