/* Задайте своё человеческое название файла между '' */
/* --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: 'Дизайн информационных блоков, которые вставляются в текстовом редакторе внутри материала, страницы продажи доступа и описания товара в корзине.'; */

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

:root {
	
	/* ОБЩИЕ НАСТРОЙКИ БЛОКОВ */
	
		/* Размер заголовка */
		--title-size-super-block: 19px;
		
		/* Жирность заголовка */
		--title-weight-super-block: 700;
		
		/* Размер описания */
		--text-size-super-block: 17.3px;

		/* Жирность описания */
		--text-weight-super-block: 400;
		
		/* Размер иконки */
		--icon-size-super-block: 30px;
		
		/* Закругление блока */
		--border-radius-super-block: 20px;
		
		/* Толщина рамки блока */
		--border-width-super-block: 0px;

		/* Внутренний отступ блока */
		--padding-super-block: 20px;
		
		/* Нижний внешний отступ блока */
		--margin-bottom-super-block: 10px;
		
		/* Верхний внешний отступ блока */
		--margin-top-super-block: 30px;

	/* НАСТРОЙКИ БЛОКА «ИНФОРМАЦИЯ» */
	
		/* Иконка */
		--icon-block-info: "\f129";
		
		/* Цвет иконки */
		--icon-color-block-info: #389de5;
		
		/* Фон блока */
		--bg-block-info: #def6f9;
		
		/* Цвет заголовка */
		--title-color-block-info: #389de5;
		
		/* Цвет описания */
		--text-color-block-info: #000000;
		
		/* Цвет рамки блока */
		--border-color-block-info: #389de5;
		
		/* Цвет ссылок в описании */
		--link-color-block-info: #3586FA;
		
		/* Цвет ссылок в описании при наведении */
		--link-color-hover-block-info: #FF8D11;
		
	/* НАСТРОЙКИ БЛОКА «ПОДСКАЗКА» */
	
		/* Иконка */
		--icon-block-tip: "\f0eb";
		
		/* Цвет иконки */
		--icon-color-block-tip: #34bc58;
		
		/* Фон блока */
		--bg-block-tip: #def9e5;
		
		/* Цвет заголовка */
		--title-color-block-tip: #34bc58;
		
		/* Цвет описания */
		--text-color-block-tip: #000000;
		
		/* Цвет рамки блока */
		--border-color-block-tip: #34bc58;
		
		/* Цвет ссылок в описании */
		--link-color-block-tip: #3586FA;
		
		/* Цвет ссылок в описании при наведении */
		--link-color-hover-block-tip: #FF8D11;

	/* НАСТРОЙКИ БЛОКА «ВАЖНО» */
	
		/* Иконка */
		--icon-block-important: "\f071";
		
		/* Цвет иконки */
		--icon-color-block-important: #ef8e2b;
		
		/* Фон блока */
		--bg-block-important: #f9f7de;
		
		/* Цвет заголовка */
		--title-color-block-important: #ef8e2b;
		
		/* Цвет описания */
		--text-color-block-important: #000000;
		
		/* Цвет рамки блока */
		--border-color-block-important: #ef8e2b;
		
		/* Цвет ссылок в описании */
		--link-color-block-important: #3586FA;
		
		/* Цвет ссылок в описании при наведении */
		--link-color-hover-block-important: #FF8D11;

	/* НАСТРОЙКИ БЛОКА «ВНИМАНИЕ» */
	
		/* Иконка */
		--icon-block-attention: "\f12a";
		
		/* Цвет иконки */
		--icon-color-block-attention: #f13a3a;
		
		/* Фон блока */
		--bg-block-attention: #f9e3de;
		
		/* Цвет заголовка */
		--title-color-block-attention: #f13a3a;
		
		/* Цвет описания */
		--text-color-block-attention: #000000;
		
		/* Цвет рамки блока */
		--border-color-block-attention: #f13a3a;
		
		/* Цвет ссылок в описании */
		--link-color-block-attention: #3586FA;
		
		/* Цвет ссылок в описании при наведении */
		--link-color-hover-block-attention: #FF8D11;

	/* НАСТРОЙКИ БЛОКА «ПРОСТОЙ С ТЕНЬЮ» */
	
		/* Фон блока */
		--bg-block-simple-shadow: #ffffff;
		
		/* Цвет описания */
		--text-color-block-simple-shadow: #000000;

		/* Цвет тени блока */
		--border-color-block-simple-shadow: rgba(138, 131, 185, 0.3);
		
	/* НАСТРОЙКИ БЛОКА «ПРИМЕР КОДА» */

		/* Шрифт текста в блоке */
		--text-font-code-example: "Courier New";

		/* Фон блока */
		--bg-block-code-example: #F9FCFE;

		/* Цвет текста в блоке */
		--text-block-code-example: #000000;

		/* Размер текста в блоке */
		--text-size-code-example: 17.3px;

		/* Жирность текста в блоке */
		--text-weight-code-example: 400;

		/* Толщина рамки блока */
		--border-width-block-code-example: 2px;

		/* Цвет рамки блока */
		--border-color-block-code-example: #bbbbbb;

		/* Закругление блока */
		--border-radius-code-example: 20px;

		/* Внутренний отступ блока */
		--padding-code-example: 20px;

		/* Вертикальные внешние отступы блока */
		--margin-code-example: 10px;

}

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

/* ОБЩИЕ НАСТРОЙКИ БЛОКОВ */
/* ---------------------- */

.block-info,
.block-tip,
.block-important,
.block-attention,
.block-simple-shadow {
	position: relative;
    display: flex;
	flex-flow: row;
    padding: var(--padding-super-block);
    width: 100%;
	margin: 0 auto;
	margin-top: var(--margin-top-super-block);
    margin-bottom: var(--margin-bottom-super-block);
	/* margin: var(--margin-super-block) auto; */
    border-radius: var(--border-radius-super-block);
}

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

.block-info:before,
.block-tip:before,
.block-important:before,
.block-attention:before {
	font-family: 'icomoon';
	font-size: var(--icon-size-super-block);
    margin: 0 var(--padding-super-block) 0 0;
    align-self: center;
	text-align: center;
	flex: 0 0 auto;
	width: 32px;
}

/* Общие настройки содержания блока */

.block-info .block-content,
.block-tip .block-content,
.block-important .block-content,
.block-attention .block-content {
	display: flex;
    flex-flow: column;
}

/* Общие настройки заголовков в блоке */

.block-info p.block-title,
.block-tip p.block-title,
.block-important p.block-title,
.block-attention p.block-title {
	font-weight: var(--title-weight-super-block);
	font-size: var(--title-size-super-block);
	margin: 0 0 10px;
}

/* Общие настройки описания в блоке */

.block-info p.block-text,
.block-tip p.block-text,
.block-important p.block-text,
.block-attention p.block-text,
.block-simple-shadow p.block-text {
	font-weight: var(--text-weight-super-block);
	font-size: var(--text-size-super-block);
	margin: 0 0 10px;
}

/* Убираем нижний отступ у последнего абзаца в блоке */

.block-info p.block-text:last-child,
.block-tip p.block-text:last-child,
.block-important p.block-text:last-child,
.block-attention p.block-text:last-child,
.block-simple-shadow p.block-text:last-child {
	margin: 0;
}

/* ИНДИВИДУАЛЬНЫЕ НАСТРОЙКИ БЛОКОВ */
/* ------------------------------- */

/* ----------------- */
/* БЛОК «ИНФОРМАЦИЯ» */
/* ----------------- */

/* Фон и рамка блока «Информация» */

.block-info {
	background-color: var(--bg-block-info);
	border: var(--border-width-super-block) solid var(--border-color-block-info);
}

/* Иконка в блоке «Информация» */

.block-info:before {
	content: var(--icon-block-info);
	color: var(--icon-color-block-info);
}

/* Заголовок в блоке «Информация» */

.block-info p.block-title {
	color: var(--title-color-block-info);
}

/* Описание в блоке «Информация» */

.block-info p.block-text {
	color: var(--text-color-block-info);
}

/* Цвет ссылок в блоке «Информация» */

.block-info .block-text a {
    color: var(--link-color-block-info) !important;
    text-decoration: none !important;
}

/* Цвет ссылок при наведении в блоке «Информация» */

.block-info .block-text a:hover {
    color: var(--link-color-hover-block-info) !important;
}

/* ---------------- */
/* БЛОК «ПОДСКАЗКА» */
/* ---------------- */

/* Фон и рамка блока «Подсказка» */

.block-tip {
	background-color: var(--bg-block-tip);
	border: var(--border-width-super-block) solid var(--border-color-block-tip);
}

/* Иконка в блоке «Подсказка» */

.block-tip:before {
	content: var(--icon-block-tip);
	color: var(--icon-color-block-tip);
}

/* Заголовок в блоке «Подсказка» */

.block-tip p.block-title {
	color: var(--title-color-block-tip);
}

/* Описание в блоке «Подсказка» */

.block-tip p.block-text {
	color: var(--text-color-block-tip);
}

/* Цвет ссылок в блоке «Подсказка» */

.block-tip .block-text a {
    color: var(--link-color-block-tip) !important;
    text-decoration: none !important;
}

/* Цвет ссылок при наведении в блоке «Подсказка» */

.block-tip .block-text a:hover {
    color: var(--link-color-hover-block-tip) !important;
}

/* ------------ */
/* БЛОК «ВАЖНО» */
/* ------------ */

/* Фон и рамка блока «Важно» */

.block-important {
	background-color: var(--bg-block-important);
	border: var(--border-width-super-block) solid var(--border-color-block-important);
}

/* Иконка в блоке «Важно» */

.block-important:before {
	content: var(--icon-block-important);
	color: var(--icon-color-block-important);
}

/* Заголовок в блоке «Важно» */

.block-important p.block-title {
	color: var(--title-color-block-important);
}

/* Описание в блоке «Важно» */

.block-important p.block-text {
	color: var(--text-color-block-important);
}

/* Цвет ссылок в блоке «Важно» */

.block-important .block-text a {
    color: var(--link-color-block-important) !important;
    text-decoration: none !important;
}

/* Цвет ссылок при наведении в блоке «Важно» */

.block-important .block-text a:hover {
    color: var(--link-color-hover-block-important) !important;
}

/* --------------- */
/* БЛОК «ВНИМАНИЕ» */
/* --------------- */

/* Фон и рамка блока «Внимание» */

.block-attention {
	background-color: var(--bg-block-attention);
	border: var(--border-width-super-block) solid var(--border-color-block-attention);
}

/* Иконка в блоке «Внимание» */

.block-attention:before {
	content: var(--icon-block-attention);
	color: var(--icon-color-block-attention);
}

/* Заголовок в блоке «Внимание» */

.block-attention p.block-title {
	color: var(--title-color-block-attention);
}

/* Описание в блоке «Внимание» */

.block-attention p.block-text {
	color: var(--text-color-block-attention);
}

/* Цвет ссылок в блоке «Внимание» */

.block-attention .block-text a {
    color: var(--link-color-block-attention) !important;
    text-decoration: none !important;
}

/* Цвет ссылок при наведении в блоке «Внимание» */

.block-attention .block-text a:hover {
    color: var(--link-color-hover-block-attention) !important;
}

/* ---------------------- */
/* БЛОК «ПРОСТОЙ С ТЕНЬЮ» */
/* ---------------------- */

/* Фон и тень блока «Простой с тенью» */

.block-simple-shadow {
	background-color: var(--bg-block-simple-shadow);
	box-shadow: 0px 4px 20px -5px var(--border-color-block-simple-shadow);
}

/* Описание в блоке «Простой с тенью» */

.block-simple-shadow p.block-text {
	color: var(--text-color-block-simple-shadow);
}

/* Коррекция видимости тени, иначе она скрывается рамкой контента материала */
/* По умолчанию в Мемберлюкс - hidden */

/* .lesson-tabs.white-tabs .tab-content .tab-pane .content-wrap {
    overflow: visible;
} */

/* ------------------ */
/* БЛОК «ПРИМЕР КОДА» */
/* ------------------ */

.block-code-example {
	background-color: var(--bg-block-code-example);
    color: var(--text-block-code-example);
	font-size: var(--text-size-code-example) !important;
	font-weight: var(--text-weight-code-example);
	font-family: var(--text-font-code-example);
    font-style: normal;
	line-height: 1.42857143;
	width: 100%;
	overflow-wrap: break-word;
    /* word-break: break-all; */
	padding: var(--padding-code-example);
    margin: var(--margin-code-example) auto;
	border-radius: var(--border-radius-code-example);
	border: var(--border-width-block-code-example) dashed var(--border-color-block-code-example);
}