/*
(i) Символ «*» - универсальный селектор, совпадает с именем любого типа элемента. Соответствует любому отдельному элементу в дереве док.
*Унивесальный селектор имеет нулевой приоритет (ниже только отсутствие приоритета вовсе).
*/
/* - перебить CSS свойства, которые браузеры устанавливают по умолчанию для некоторых тегов, например, тегу гиперссылки <a> синий цвет текста и подчёркивание, тегу body они задают поля (padding) и тд.и т.п. */
* {
	margin: 0; padding: 0;
	/* box-sizing: border-box; */ /* 'размеры будут учитываться браузером без padding и border */
}
body, html {
	position: absolute;
	left: 0; right: 0;
	top: 0; bottom: 0;
	background-color: transparent;
	font-family: Verdana, Tahoma, Helvetica, sans-serif;
	text-indent: 0;
	overflow: hidden hidden;
}
/* (!) Scrollbars
*для Mozilla Firefox будет работать пока только общий стиль */
*,
html * /* - если нужен общий стиль, его следует применять к тегу html, а не к body */
{
	scrollbar-width: thin;
	scrollbar-color: gray #3f3f3f;
	scroll-behavior: smooth; /* плавная прокрутка */
}
*::-webkit-scrollbar,
html *::-webkit-scrollbar {
	/* top: 0; *//* bottom: 0; *//**работать не будет-для всех браузеров высота scrollbara = высоте его элемента */
	width: 2px;
	height: 8px;
}
/**Варианты по умолчанию для элементов на странице */
/* 'вариант-1 */
/* *::-webkit-scrollbar-track,
html *::-webkit-scrollbar-track {
	background: #3f3f3f;
	border-radius: 100px;
}
*::-webkit-scrollbar-thumb,
html *::-webkit-scrollbar-thumb {
	background-color: silver;
	border: 1px solid #3f3f3f;
	border-radius: 100px;
} */
/* 'вариант-2 */
/* *::-webkit-scrollbar-track,
html *::-webkit-scrollbar-track {
	border: 1px solid #3f3f3f;
	border-radius: 100px;
}
*::-webkit-scrollbar-thumb,
html *::-webkit-scrollbar-thumb {
	border: 5px solid #3f3f3f;
	border-radius: 100px;
} */
/* 'вариант-3 */
/* *::-webkit-scrollbar-track,
html *::-webkit-scrollbar-track {
	background: #3f3f3f;
	border: 4px solid #fff;
	border-radius: 100px;
}
*::-webkit-scrollbar-thumb,
html *::-webkit-scrollbar-thumb {
	border: 4px solid #3f3f3f;
	border-radius: 100px;
} */
/* 'вариант-4 */
/* *::-webkit-scrollbar-track,
html *::-webkit-scrollbar-track {
	border: 4px solid #3f3f3f;
	border-radius: 100px;
}
*::-webkit-scrollbar-thumb,
html *::-webkit-scrollbar-thumb {
	background: #3f3f3f;
	border: 4px solid #fff;
	border-radius: 100px;
} */
/* 'Вариант-5 */
*::-webkit-scrollbar-track,
html *::-webkit-scrollbar-track {
	/* background: #737373; */
	/* border: 1px solid transparent; */
	border: 1px solid gray;
	border-radius: 10px;
}
*::-webkit-scrollbar-thumb,
html *::-webkit-scrollbar-thumb {
	background-color: gray;
	/* border: 2px solid #3f3f3f; */
	border: 4px solid maroon;
	border-radius: 10px;
}
/* Scrollbars the end */
body {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	align-content: space-between; /* не учитывается из-за nowrap */
	justify-content: space-between;
}
body {
	background-color: #2a2a2a;
	background: linear-gradient(#888888, #000000);
	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = #999999, endColorstr = #000000);
	-ms-filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = #999999, endColorstr = #000000);
	background: -webkit-linear-gradient(top, #888888, #000000);
	background: -moz-linear-gradient(top, #888888, #000000);
	background: -o-linear-gradient(top,rgb(136, 136, 136),rgb(0, 0, 0));
	background: -ms-linear-gradient(top, #888888, #000000);
	/**др.вариант, менее контрастный, см.его так же в styles.css
	background-color: #5e5e5e;
	background: linear-gradient(#666666, #222222);
	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = #ffffff, endColorstr = #222222);
	-ms-filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = #ffffff, endColorstr = #222222);
	background: -webkit-linear-gradient(top, #666666, #222222);
	background: -moz-linear-gradient(top, #666666, #222222);
	background: -o-linear-gradient(top,rgb(102, 102, 102),rgb(34, 34, 34));
	background: -ms-linear-gradient(top, #666666, #222222); */
}

a {
	color: silver;
	text-decoration: none;
}
a:focus {outline: #707070 dashed thin;}
a:active, /* 'only firefox for mobil version - работает только как короткое мигание даже при длительном клике */
a:hover {text-decoration: underline;}
/* a:visited {color: #fff;} */

p {
	/* margin-block: 0.5em; */
	cursor: default;
}

ul, li {
	list-style-type: none;
	margin-block: 0;
	margin-inline: 0;
	padding-block: 0;
	padding-inline: 0;
}
/* x i дополнительное небольшое смещение раздела/подраздела пункта оглавления */
/* ul.offset {
	// background-position: 6px 2px;
	// padding: 0 0 0 20px;
} */
/*
*отражаем противоположно самый верхний div, чтобы scrollbar был слевой стороны
(i) обуславливает то в какую сторону будет изменяться размер при применении правила reflect
'применяется непосредственно к текущему элементу, применение к псевдоэлементу работать не будет
(???) влияет на разные символы такие, как кавычки елочки.., для текстовых элементов типа textarea, label, a, p, span, поэтому данное св-во необходимо отражать обратно для возврата правильного отображения символов и направления чтения по умолчанию (с лева на право).
*/
.reflect *.reflect,
.reflect {
	direction: rtl;
}
.reflect * {
	direction: ltr;
}
.toc-footer,
.toc,
.toc-body,
.toc-subtitle,
.toc-title,
.toc-tools,
.toc-header {
	position: relative;
	left: 0; top: 0;
}
.toc-header {
	width: 100%;
	height: fit-content;
	margin: 1px;
	display: flex;
	flex: 1 1 auto;
	flex-flow: row wrap;
	align-items: center;
	align-content: space-between;
	justify-content: space-between;
	/* overflow: hidden hidden; */ /* (i) влияет на высоту потомков */
}

.toc-tools {
	order: 1;
	width: 100%;
	height: 20px;
	margin: 0 1px;
	padding: 1px;
	flex: 1 1 auto; /* i flex-basis - auto означает, что размер flex-элементов рассчитывается с использованием либо элемента width, либо элемента height (в зависимости от того, определяется ли макет на основе строк или столбцов) */
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: space-between;
	font-size: 0.7em;
	/* color: #737373; */
	border: 1px solid #3f3f3f;
	background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.6));
	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = #00000000, endColorstr = #00000099);
	-ms-filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = #00000000, endColorstr = #00000099);
	background: -webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.6));
	background: -moz-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.6));
	background: -o-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.6));
	background: -ms-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.6));
	box-shadow: inset 0 1px 1px 0 rgba(255,255,255,.2), 0 1px 2px 0 rgba(0,0,0,.5);
}
.toc-tools:active, /* 'only firefox for mobil version - работает только как короткое мигание даже при длительном клике */
.toc-tools:hover {
	background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,0));
}

[for="idTreeView"],
.tree-view {
	position: absolute;
	left: 0; top: 0;
	width: 100px;
	height: 18px;
	margin: 1px;
	display: flex;
	cursor: pointer;
}
/**Классический вариант */
/* .treeview-tooltip-popup, */ /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на label idTreeView */
[for="idTreeViewListDefault"]:hover,
[for="idTreeViewListCurrent"]:hover {color: #fff;} /**Классический вариант */
/* checkbox-переключатель, см.тут: http://shpargalkablog.ru/2013/08/checked.html
(!) checkbox - опция древовидный вид списка оглавления, режим: "По умолчанию" и/или "Текущий пункт"
*/
#idTocList,
#idTreeView {display: none;} /* - скрываем видимость "квадратика" checkbox */

[for="idTreeView"]:after,
[for="idTreeView"]:before {
	/* width: auto; */
	min-width: 46px;
	padding: 2px 2px;
}

[for="idTreeView"]:before {
	content: "Default";
	border-radius: 100px 0 0 100px;
}

[for="idTreeView"]:after {
	content: "Current";
	border-radius: 0 100px 100px 0;
}
/* (i) Селекторы атрибутов позволяют обратиться к тегам, имеющим необходимый атрибут или даже конкретное его значение */
[for="idTreeView"] {
	border-radius: 100px;
	background: rgba(0, 0, 0, .1);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .4) inset, 0 1px 1px 0 rgba(255, 255, 255, .1);
	text-shadow: 0 1px rgba(0, 0, 0, .5);
	text-align: center;
}
/* (i) (тильда ~ «Общий родственный комбинатор») между селекторами - обобщённый смежный селектор действует точно также как и обычные смежные селекторы (обозначение: + «Соседний родственный комбинатор», > «Дочерний комбинатор»), за исключением того, что свойства применяются не только к первому соседу ниже, а ко всем заданным соседям ниже. */
#idTreeView:checked~[for="idTreeView"]:after,
[for="idTreeView"]:before {
	background: rgba(0, 0, 0, .3) linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,0));
	box-shadow: 0 1px 1px rgba(0, 0, 0, .5) inset, 0 1px 0 rgba(255, 255, 255, .4);
	color: rgba(255,255,255,.42);
}

#idTreeView:checked~[for="idTreeView"]:before,
[for="idTreeView"]:after {
	background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.3));
	box-shadow: inset 0 1px 1px 0 rgba(255,255,255,.2), 0 1px 2px 0 rgba(0,0,0,.5);
	color: #737373;
}
#idTreeView:checked~.treeview-tooltip-popup:after, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на label idTreeView */
#idTreeView:checked~[for="idTreeView"]:hover:after,
.treeview-tooltip-popup:before, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на label idTreeView */
[for="idTreeView"]:hover:before {color: #fff;}
.treeview-tooltip-popup:after, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на label idTreeView */
#idTreeView:checked~[for="idTreeView"]:hover:before,
#idTreeView:checked~.treeview-tooltip-popup:before, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на label idTreeView */
[for="idTreeView"]:hover:after {color: rgba(255,255,255,.42);}

.toclist-tooltip-triangle, /* треугольник подсказки checkbox-Развернуть/свернуть все оглавление */
.treeview-tooltip-triangle, /* треугольник подсказки checkbox-Вид списка оглавления */
.treeview-tooltip {
	position: relative;
	left: 0; top: 0;
	width: 0; height: 0;
	background-color: transparent;
}
/**иконка подсказки */
#idTreeView:checked~.treeview-tooltip-popup .treeview-tooltip:before, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на label idTreeView */
#idTreeView:checked~[for="idTreeView"]:hover .treeview-tooltip:before,
.treeview-tooltip-popup .treeview-tooltip:before, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на label idTreeView */
[for="idTreeView"]:hover .treeview-tooltip:before {
	content: "";
	position: absolute;
	/* left: 200px; *//* - общая ширина, если вертикально */
	top: 0; /* - общая высота, если горизонтально */
	width: 50px;
	height: 50px;
	background: url("../icon/info.png") no-repeat;
	border-radius: 100px;
	z-index: 2;
}

.treeview-tooltip-popup .treeview-tooltip:before, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на label idTreeView */
[for="idTreeView"]:hover .treeview-tooltip:before {
	left: 100px; /* - если горизонтально */
	/* top: 110px; *//* - если вертикально */
}

#idTreeView:checked~.treeview-tooltip-popup .treeview-tooltip:before, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на label idTreeView */
#idTreeView:checked~[for="idTreeView"]:hover .treeview-tooltip:before {
	left: 150px; /* - если горизонтально */
	/* top: 130px; *//* - если вертикально */
}
/**треугольник */
.treeview-tooltip-popup .treeview-tooltip-triangle:before, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на label idTreeView */
[for="idTreeView"]:hover .treeview-tooltip-triangle:before {
	content: "";
	position: absolute;
	top: 22px;
	/* border-left: 0px solid transparent; */
	border-right: 30px solid transparent;
	/* border-top: 0px solid transparent; */
	border-bottom: 18px solid rgba(171,222,247,.6);
}

.treeview-tooltip-popup .treeview-tooltip div:before, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на label idTreeView */
[for="idTreeView"]:hover .treeview-tooltip div:before {left: -23px;}
#idTreeView:checked~.treeview-tooltip-popup .treeview-tooltip div:before, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на label idTreeView */
#idTreeView:checked~[for="idTreeView"]:hover .treeview-tooltip div:before {left: 23px;}
/**текст подсказки */
.treeview-tooltip:after {
	position: relative;
	/* left: 104px; *//* top: 0; *//* - общая ширина и высота, если вертикально */
	top: 40px; /* - если горизонтально */
	width: 160px; /* - если горизонтально */
	padding: 2px;
	display: inline-block;
	color: #fff;
	background: linear-gradient(rgba(73,73,73,.3), rgba(0,0,0,1));
	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = #4949494d, endColorstr = #00000099);
	-ms-filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = #4949494d, endColorstr = #00000099);
	background: -webkit-linear-gradient(rgba(73,73,73,.3), rgba(0,0,0,1));
	background: -moz-linear-gradient(rgba(73,73,73,.3), rgba(0,0,0,1));
	background: -o-linear-gradient(rgba(73,73,73,.3), rgba(0,0,0,1));
	background: -ms-linear-gradient(rgba(73,73,73,.3), rgba(0,0,0,1));
	border: 1px solid rgba(171,222,247,.6);
	border-radius: 10px;
	box-shadow: 10px 8px 14px 8px rgba(0,0,0,.5);
	z-index: 1;
}
/* content:
"Режим «По умолчанию»: (i) в древовидном виде списка скрытие/отображение будет применительно ко всем пунктам оглавления";
*/
.treeview-tooltip-popup .treeview-tooltip:after, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на label idTreeView */
[for="idTreeView"]:hover .treeview-tooltip:after {
	left: -50px;
	content: attr(treeview-tooltip-default);
}
/* content:
"Режим «Текущий пункт»: (i) в древовидном виде списка будет скрытие всех разделов/подразделов, кроме выбранного пункта оглавления";
*/
#idTreeView:checked~.treeview-tooltip-popup .treeview-tooltip:after, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на label idTreeView */
#idTreeView:checked~[for="idTreeView"]:hover .treeview-tooltip:after {
	left: 0;
	content: attr(treeview-tooltip-current);
}
/* *анимация подсказки
(!) с псевдоэлементами не срабатывает и работать не будет, или будет влиять не на те элементы, на кот.нужно
*/
.treeview-tooltip {
	opacity: 0;
	transform-origin: center bottom;
	-webkit-transform-origin: center bottom;
	-moz-transform-origin: center bottom;
	-o-transform-origin: center bottom;
	-ms-transform-origin: center bottom;
	transform: translateY(.7em) scale(.3);
	-webkit-transform: translateY(0.7em) scale(.3); /* Chrome, Safari, iOS */
	-moz-transform: translateY(0.7em) scale(.3); /* Firefox */
	-o-transform: translateY(0.7em) scale(.3); /* Opera */
	-ms-transform: translateY(0.7em) scale(.3); /* IE */
	transition: all .6s .9s ease;
	-webkit-transition: all .6s .9s ease;
	-moz-transition: all .6s .9s ease;
	-o-transition: all .6s .9s ease;
	z-index: 1;
}
.treeview-tooltip-popup .treeview-tooltip, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на label idTreeView */
[for="idTreeView"]:hover .treeview-tooltip {
	transform: translateY(0);
	-webkit-transform: translateY(0); /* Chrome, Safari, iOS */
	-moz-transform: translateY(0); /* Firefox */
	-o-transform: translateY(0); /* Opera */
	-ms-transform: translateY(0); /* IE */
	opacity: 1;
}
/* (!) checkbox - развернуть/свернуть все оглавление */
.btn_icon-toggle,
.btn-icon,
[for="idTocList"],
.toclist {
	position: absolute;
	right: 0; top: 0;
	width: 16px;
	height: 16px;
	margin: 1px;
	cursor: pointer;
}
.toclist-tooltip-popup, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на label idTocList */
[for="idTocList"]:hover {color: #fff;}
/**иконка подсказки */
#idTocList:checked~.toclist-tooltip-popup:before, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на label idTocList */
#idTocList:checked~[for="idTocList"]:hover:before,
.toclist-tooltip-popup:before, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на label idTocList */
[for="idTocList"]:hover:before {
	content: "";
	position: absolute;
	right: 92px; top: 6px; /* без наведения курсора на подсказку */
	width: 35px;
	height: 35px;
	background: url("../icon/info.png") no-repeat;
	background-size: 35px 35px;
	z-index: 2;
}
/**треугольник */
.toclist-tooltip-popup .toclist-tooltip-triangle:before, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на label idTocList */
[for="idTocList"]:hover .toclist-tooltip-triangle:before {
	content: "";
	position: absolute;
	right: 0; top: 22px;
	border-left: 30px solid transparent;
	/* border-right: 0px solid transparent; */
	/* border-top: 0px solid transparent; */
	border-bottom: 10px solid rgba(171,222,247,.6);
}
/**текст подсказки */
[for="idTocList"]:after {
	position: relative;
	right: 88px; top: 32px; /* без наведения курсора на подсказку */
	width: 100px;
	height: auto;
	padding: 2px;
	display: inline-block;
	text-align: center;
	background: linear-gradient(rgba(73,73,73,.3), rgba(0,0,0,1));
	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = #4949494d, endColorstr = #00000099);
	-ms-filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = #4949494d, endColorstr = #00000099);
	background: -webkit-linear-gradient(rgba(73,73,73,.3), rgba(0,0,0,1));
	background: -moz-linear-gradient(rgba(73,73,73,.3), rgba(0,0,0,1));
	background: -o-linear-gradient(rgba(73,73,73,.3), rgba(0,0,0,1));
	background: -ms-linear-gradient(rgba(73,73,73,.3), rgba(0,0,0,1));
	border: 1px solid rgba(171,222,247,.6);
	border-radius: 10px;
	box-shadow: -10px 8px 14px 8px rgba(0,0,0,.5);
	z-index: 1;
}
.toclist-tooltip-popup:after, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на label idTocList */
[for="idTocList"]:hover:after {
	content: attr(toclist-tooltip-expand);
}
#idTocList:checked~.toclist-tooltip-popup:after, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на label idTocList */
#idTocList:checked~[for="idTocList"]:hover:after {
	content: attr(toclist-tooltip-collapse);
}
#idTocList:checked~.toclist-tooltip-popup:after, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на label idTocList */
#idTocList:checked~[for="idTocList"]:after {
	background: linear-gradient(rgba(0,0,0,1), rgba(73,73,73,.3));
	background: -webkit-linear-gradient(rgba(0,0,0,1), rgba(73,73,73,.3));
	background: -moz-linear-gradient(rgba(0,0,0,1), rgba(73,73,73,.3));
	background: -o-linear-gradient(rgba(0,0,0,1), rgba(73,73,73,.3));
	background: -ms-linear-gradient(rgba(0,0,0,1), rgba(73,73,73,.3));
	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = #00000000, endColorstr = #4949494d);
	-ms-filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = #00000000, endColorstr = #4949494d);

	/* box-shadow: 0 1px 1px rgba(0, 0, 0, .5) inset, 0 1px 0 rgba(255, 255, 255, .4); */
}
/* *анимация подсказки
(!) с псевдоэлементами не срабатывает и работать не будет, или будет влиять не на те элементы, на кот.нужно
*/
/* #idTocList:checked~[for="idTocList"].toclist-tooltip-triangle,
[for="idTocList"].toclist-tooltip-triangle,
#idTocList:checked~[for="idTocList"]:hover:after,
[for="idTocList"]:hover:after,
#idTocList:checked~[for="idTocList"]:hover:before,
[for="idTocList"]:hover:before {
	opacity: 0;
	transform: translateY(.7em) scale(.3);
	transform-origin: center bottom;
}
#idTocList:checked~[for="idTocList"].toclist-tooltip-triangle,
[for="idTocList"].toclist-tooltip-triangle,
#idTocList:checked~[for="idTocList"]:hover,
[for="idTocList"]:hover {
	opacity: 1;
	transition: .6s .6s;
	transform: translateY(0);
}
*/
/* (!).btn-icon
(i) имя класса так же присутствует в стилях styles.css и topic.css, но правила разные
*/
.btn-icon {
	content: "";
	background: url(../icon/menu.png) no-repeat;
}
.btn-icon:hover {
	content: "";
	background: url(../icon/nav-pane-expand-white.png) no-repeat;
}
#idTocList:checked~[for="idTocList"] .btn-icon:hover {
	content: "";
	background: url(../icon/nav-pane-collapse-white.png) no-repeat;
}
.btn_icon-toggle {
	content: "";
	background: url(../icon/nav-pane-expand.png) no-repeat;
}
.toclist-tooltip-popup .btn_icon-toggle, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на label idTocList */
.btn_icon-toggle:hover {
	content: "";
	background: url(../icon/nav-pane-expand-white.png) no-repeat;
}

#idTocList:checked~[for="idTocList"] .btn_icon-toggle {
	content: "";
	background: url(../icon/nav-pane-collapse.png) no-repeat;
}
#idTocList:checked~.toclist-tooltip-popup .btn_icon-toggle, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на label idTocList */
#idTocList:checked~[for="idTocList"] .btn_icon-toggle:hover {
	content: "";
	background: url(../icon/nav-pane-collapse-white.png) no-repeat;
}

.toc-title,
.toc-subtitle {
	width: 100%;
	height: fit-content;
	flex: 1 1 auto;
	margin: 2px;
	padding: 2px;
	overflow: hidden auto;
	scroll-behavior: smooth; /* плавная прокрутка */
}

.toc-title::-webkit-scrollbar-thumb,
.toc-subtitle::-webkit-scrollbar-thumb {
	/* background: #737373; */
	/* background-color: gray; */
	border: 1px solid #3f3f3f;
	/* border: 1px solid transparent; */
	border-radius: 10px;
}
.toc-title {order: 2;}

.nav-title {
	/* font-size: 16px; */
	font-size: 1em;
	font-weight: bold;
	line-height: 100%;
}

.toc-subtitle {order: 3;}

.nav-subtitle {
	/* font-size: 11px; */
	font-size: 0.7em;
	font-weight: bold;
	color: silver;
	/* line-height: 100%; */
}

.no-js-title {
	/* font-size: 16px; */
	font-size: 1em;
	white-space: nowrap;
}
.no-js-title a {
	color: #fff;
	text-decoration: none;
}
.no-js-title a:visited {color: black;}
.no-js-title a:hover {text-decoration: underline;}

.toc-body {
	width: 96%;
	height: 100%;
	padding: 2px;
	border-style: solid;
	border-color: #3f3f3f;
	border-bottom-color: #4f4f4f;
	border-width: thin; /* border-width: 1px 0 1px 0; */
	overflow: hidden auto;
	/* background-image: url("../icon/spacer.gif"); */ /* (?) не понятно для чего */
}
/* (!) TOC LIST CSS */
/**General margin of the TOC (root entry) - Общее поле оглавления (корневая запись) */
.toc-body,
.toc {margin: 2px;}
.toc ul, /**для каждого потомка ul */
.toc {
	padding: 0 0 0 16px;
}
.toc ul {
	margin: 0 0 0 -16px; /* - Indentation per level (negative value) - Отступ на уровень (отрицательное значение) */
}
/* (i) от классов зависит условие в коде js */
.icon-expand {background: url(../icon/tgl-expand.gif) no-repeat;}
/* .icon-expand::before {content: "+";} *//* - если не использовать иконки +/- */
.icon-collapse {background: url(../icon/tgl-collapse.gif) no-repeat;}
/* .icon-collapse::before {content: "-";} *//* - если не использовать иконки +/- */
.icon-collapse,
.icon-expand {background-position: 2px 2px;}
/* (!) TODO: сделать иконки с +/- отдельно */
.nav-icon {
	position: absolute;
	left: 0;
	float: left;
	/* margin-top: 2px; */
}
/**Vertical spacing between TOC items - Расстояние по вертикали между пунктами оглавления */
.toc-list {
	margin: 1px 0 1px 0;
	padding: 0 0 0 20px;
}
.toc-main-icon { /* - главный значок оглавления */
	background: url(../icon/tgl-fri.png) no-repeat;
}
.icon-company {
	background: url(../icon/fri.png) no-repeat;
}
.icon-email {
	background: url(../icon/toc-email.png) no-repeat;
	background-position: 2px 0;
}
.icon-book-purple1-close {
	background: url(../icon/toc-book-purple-closed.png) no-repeat;
	background-position: 1px 1px;
}
.icon-book-purple1-open {
	background: url(../icon/toc-book-purple1-opend.png) no-repeat;
	background-position: 1px 1px;
}
.icon-book-purple2-close {
	background: url(../icon/toc-book-purple-closed.png) no-repeat;
	background-position: 1px 1px;
}
.icon-book-purple2-open {
	background: url(../icon/toc-book-purple2-opend.png) no-repeat;
	background-position: 1px 1px;
}
.icon-book-blue-close {
	background: url(../icon/toc-book-blue-closed.png) no-repeat;
	background-position: 1px 0;
}
.icon-book-blue-open {
	background: url(../icon/toc-book-blue-opend.png) no-repeat;
	background-position: 1px 0;
}
.icon-book-orange-close {
	background: url(../icon/toc-book-orange-closed.gif) no-repeat;
	background-position: 1px 0;
}
.icon-book-orange-open {
	background: url(../icon/toc-book-orange-opend.gif) no-repeat;
	background-position: 1px 0;
}
.icon-folder1-close {
	background: url(../icon/toc-folder-closed.png) no-repeat;
	background-position: 1px -1px;
}
.icon-folder1-open {
	background: url(../icon/toc-folder-opend.png) no-repeat;
	background-position: 1px -1px;
}
.icon-folder2-close {
	background: url(../icon/toc-folder-closed.gif) no-repeat;
	background-position: 1px -1px;
}
.icon-folder2-open {
	background: url(../icon/toc-folder-opend.gif) no-repeat;
	background-position: 1px -1px;
}
.icon-topic {
	background: url(../icon/toc-topic.png) no-repeat;
	background-position: 1px 0;
}
.icon-info {
	/* background: url(../icon/toc-info_0.png) no-repeat;
	background: url(../icon/toc-info_1.png) no-repeat; */
	background: url(../icon/toc-info_2.png) no-repeat;
	background-position: 1px 0;
}
.icon-question {
	/* background: url(../icon/toc-question_0.png) no-repeat;
	background: url(../icon/toc-question_1.png) no-repeat; */
	background: url(../icon/toc-question_2.png) no-repeat;
	background-position: 1px 0;
}

#idToc_li {padding-left: 16px;}
#idToc_li1,
#idToc_li2 {
	padding-left: 20px;
	font-style: italic;
}

.heading1 {
	font-family: Arial, Helvetica;
	font-weight: normal;
	font-size: 11pt;
	/* font-size: .9rem; */
	/* font-size: 1em; */
}
.heading2,
.heading3,
.heading4,
.heading5,
.heading6,
.heading7,
.heading8,
.heading9,
.heading10 {
	font-size: 10pt;
	/* font-size: .8rem */
	/* font-size: .9em */
}
/* (i) перенос текста, пробелы, дефисы, тире */
.feedback_tooltip-title span,
.heading10,
.heading9,
.heading8,
.heading7,
.heading6,
.heading5,
.heading4,
.heading3,
.heading2,
.heading1 {
	white-space: normal; /* текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически. Разбивает строки, чтобы заполнить строчные боксы */
	word-spacing: normal; /* нормальный интервал между словами, определенный текущим шрифтом и/или браузером */
	overflow-wrap: normal; /* св-во отменяет word-wrap */
	word-wrap: break-word; /* св-во отменяет overflow-wrap */
	word-break: normal; /* normal, чтобы игнорировался разного вида перенос текста */
	/* line-break: anywhere; */
	/* text-wrap-style: pretty; */
	hyphens: none; /* none, чтобы браузер не обращал внимания на мягкий дефис, вставляем, НО для Chrome, с Firefox все сложнее */
	-moz-hyphens: none; /* - все равно не работает */
	-ms-hyphens: none;
}
/**подсветка ссылки текущего топика */
.highlight {
	color: #fff;
	/* background: #dedede; */
	/* font-weight: bold; */
}

.toc-footer {
	width: 100%;
	height: fit-content;
	/* margin: auto; */
	display: flex;
	flex: 1 1 auto;
	flex-flow: row wrap;
	align-items: center;
	align-content: space-between;
	justify-content: center;
	/* overflow: hidden hidden; *//* (!) влияет на размер, а так же отображение.feedback-tooltip/.email-feedback */
}
.toc-footer span,
.toc-footer a,
.toc-footer p {
	width: 100%;
	height: auto;
	margin: 1px 2px;
	padding: 2px 0;
	font-size: 11px;
	text-align: center;
	color: #737373;
}
.footer_btn-tooltip-popup, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на иконку: SJ/email/hh */
.footer-btn span:hover,
.toc-footer .footer-btn a:hover,
.footer-btn:hover,
.feedback_tooltip-title span,
.feed-back:hover,
.toc-footer p:hover a,
.toc-footer p:hover {color: #fff;}
.footer_btn-tooltip-popup, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на иконку: SJ/email/hh */
.toc-footer a:hover {text-decoration: underline dotted;}

.footer-btn a,
.footer-btn {
	position: relative;
	left: 0; top: 0;
	width: auto;
	height: auto;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.footer-btn {
	flex: 1 1 30%;
	flex-flow: row wrap;
}
.item-0 {order: 0;}
.item-1,
.item-2 {order: 1;}
.toc-footer a.feed-back,
.footer-btn a {padding: 4px;}
/**не выделять кн.при длительном нажатии */
.toc-footer a.feed-back, /* повышаем приоритет, чтобы перебить св-ва правила.toc-footer a */
.footer-btn a {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-ms-user-select: none;
}

.footer-btn span {cursor: default;}

.footer_btn-tooltip-popup .feed-back, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на иконку: SJ/email/hh */
.feedback-tooltip,
.footer-btn a,
.feed-back:hover .feed-back,
.feed-back {
	border: 1px solid transparent;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
.footer_btn-tooltip-popup .feed-back, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на иконку: SJ/email/hh */
.feedback-tooltip,
/* .toc-footer a.feed-back:hover, */ /* для повышения приоритета */
.footer-btn a:hover {border-color: #fff;}
.footer_btn-tooltip-popup .feed-back, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на иконку: SJ/email/hh */
.feed-back:hover {
	box-shadow: 2px 2px 20px 2px rgba(255,255,255,.9),
				-2px -2px 20px 2px rgba(255,255,255,.9);
}
.super-job,
.hh-ru {font-weight: bold;}
.footer-btn a.hh-ru, /* повышаем приоритет, чтобы перебить св-ва правила.toc-footer a */
.hh-ru {
	color: #d5001c;
}
.footer_btn-tooltip-popup .hh-ru, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на иконку: SJ/email/hh */
.hh-ru:hover {
	box-shadow: 2px 2px 20px 2px rgba(213,0,28,.9),
				-2px -2px 20px 2px rgba(213,0,28,.9);
}
.footer-btn a.super-job, /* повышаем приоритет, чтобы перебить св-ва правила.toc-footer a */
.super-job {
	color: #00aa87;
}
.footer_btn-tooltip-popup .super-job, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на иконку: SJ/email/hh */
.super-job:hover {
	box-shadow: 2px 2px 20px 2px rgba(0,170,135,.9),
				-2px -2px 20px 2px rgba(0,170,135,.9);
}

.super-job:before,
.hh-ru:before {
	content: "";
	position: absolute;
	left: 0; top: 0;
	width: 23px;
	height: 100%;
	border-radius: 5px;
	z-index: -1;
	animation: eff-line-gradient 2s ease infinite;
	-webkit-animation: eff-line-gradient 10s ease infinite;
	-moz-animation: eff-line-gradient 10s ease infinite;
	-o-animation: eff-line-gradient 10s ease infinite;
}
.hh-ru:before {
	background: rgb(0,0,0);
	background: linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(136,136,136,1) 25%, rgba(136,136,136,1) 35%, rgba(0,0,0,1) 50%, rgba(136,136,136,1) 70%, rgba(0,0,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
	-ms-filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = #000000, endColorstr = #888888);
	background: -webkit-linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(136,136,136,1) 25%, rgba(136,136,136,1) 35%, rgba(0,0,0,1) 50%, rgba(136,136,136,1) 70%, rgba(0,0,0,1) 100%);
	background: -moz-linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(136,136,136,1) 25%, rgba(136,136,136,1) 35%, rgba(0,0,0,1) 50%, rgba(136,136,136,1) 70%, rgba(0,0,0,1) 100%);
	background: -o-linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(136,136,136,1) 25%, rgba(136,136,136,1) 35%, rgba(0,0,0,1) 50%, rgba(136,136,136,1) 70%, rgba(0,0,0,1) 100%);
	background-size: 1000%;
}
.super-job:before {
	background: rgb(136,136,136);
	background: linear-gradient(45deg, rgba(136,136,136,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 35%, rgba(136,136,136,1) 50%, rgba(0,0,0,1) 70%, rgba(136,136,136,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#888888",endColorstr="#888888",GradientType=1);
	-ms-filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = #888888, endColorstr = #000000);
	background: -webkit-linear-gradient(45deg, rgba(136,136,136,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 35%, rgba(136,136,136,1) 50%, rgba(0,0,0,1) 70%, rgba(136,136,136,1) 100%);
	background: -moz-linear-gradient(45deg, rgba(136,136,136,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 35%, rgba(136,136,136,1) 50%, rgba(0,0,0,1) 70%, rgba(136,136,136,1) 100%);
	background: -o-linear-gradient(45deg, rgba(136,136,136,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 35%, rgba(136,136,136,1) 50%, rgba(0,0,0,1) 70%, rgba(136,136,136,1) 100%);
	background-size: 1000%;
}
/* (!).email-feedback
*во всем проекте прописан в 2-х местах:
- 1) в пан.инструментов и
- 2) в пан.нав.
x не используется
(i) переделано как анимационная всплывающая подсказка через div.feedback-tooltip
*/
.email-feedback:hover {
	/* position: fixed; *//* (i) если в правиле.toc-footer вкл.overflow: hidden; */
	position: absolute;
	padding: 4px;
	border: 1px solid #fff;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	transform: translate(-50%, -80%); /* (x, y) */
	-webkit-transform: translate(-50%, -80%); /* Chrome, Safari, iOS */
	-moz-transform: translate(-50%, -80%); /* Firefox */
	-o-transform: translate(-50%, -80%); /* Opera */
	-ms-transform: translate(-50%, -80%); /* IE */
}
/* (!).feedback-tooltip - анимационная всплывающая подсказка для кн.email на пан.нав.
(i) имя класса так же присутствует в стилях topic.css и navigation.css, но правила разные
*/
.footer_btn-tooltip-popup .feedback-tooltip, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на иконку: SJ/email/hh */
.feedback-tooltip {
	position: absolute;
	left: 0; right: 0;
	display: flex;
	flex: 1 1 100%;
	flex-flow: row wrap;
}
.feedback_tooltip-title,
.feedback-tooltip {padding: 4px;}
/**фон подсказки */
.feedback-tooltip {
	width: 150px; height: 230px;
	align-content: space-between;
	justify-content: center;
	background: url(../icon/HaTaXa.jpg) no-repeat transparent;
	/* background-size: cover; */
	background-size: contain;
	background-origin: content-box;
	-webkit-background-origin: content-box;
	-moz-background-origin: content-box;
}
/**текст подсказки */
.feedback_tooltip-title {width: auto; height: auto;}
/* 'перебиваем св-ва правила.toc-footer span */
.feedback_tooltip-title span {
	display: block;
	margin: 0; padding: 0;
	hyphens: auto; /* - чтобы браузер не обращал внимания на мягкий дефис, вставляем hyphens: none для Chrome, с Firefox все сложнее */
	-moz-hyphens: auto; /* (!) все равно не работает */
	-ms-hyphens: auto;
}
.title_txt-top {
	top: 0;
	align-items: flex-start;
	align-content: flex-start;
}
.title_txt-center {
	top: 0; bottom: 0;
	align-items: center; /* выравнивание флекс-элементов внутри контейнера в перпендикулярном направлении */
	align-content: center; /* Выравнивает линии в пределах flex-контейнера, когда есть дополнительное пространство на поперечной оси. Не действует, когда есть только одна строка flex-элементов, а так же, если flex-wrap: nowrap. *//**либо align-items: center. */
}
.title_txt-bottom {
	bottom: 0;
	align-items: flex-end;
	align-content: flex-end;
}
.title_txt-custom {bottom: 30px;}
/**треугольник */
.feedback-tooltip:after {
	content: "";
	position: absolute;
	bottom: -52px;
	width: 0;
	margin: auto;
	background-color: transparent;
	border-left: 75px solid transparent;
	border-right: 75px solid transparent;
	border-top: 50px solid rgba(255,255,255,.4);
}
/**анимация */
.feedback-tooltip {
	opacity: 0;
	transform-origin: center center;
	-webkit-transform-origin: center center;
	-moz-transform-origin: center center;
	-o-transform-origin: center center;
	-ms-transform-origin: center center;
	transform: translate(-68px, 0) scale(0);
	-webkit-transform: translate(-68px, 0) scale(0);
	-moz-transform: translate(-68px, 0) scale(0);
	-o-transform: translate(-68px, 0) scale(0);
	-ms-transform: translate(-68px, 0) scale(0);
	transition: all 2s ease;
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-o-transition: all 2s ease;
	/* will-change: transform transition; */ /* св-во will-change - экспериментальная технология, заранее передает браузеру инфу о возможном предстоящем изменении элемента */
}
.footer_btn-tooltip-popup .feedback-tooltip, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на иконку: SJ/email/hh */
.feed-back:hover .feedback-tooltip {
	/* animation: tooltipToAppear ease 2s both;
	-webkit-animation: tooltipToAppear ease 2s both;
	-moz-animation: tooltipToAppear ease 2s both;
	-o-animation: tooltipToAppear ease 2s both; */
	transform: translate(-68px, -180px) scale(1);
	-webkit-transform: translate(-68px, -180px) scale(1);
	-moz-transform: translate(-68px, -180px) scale(1);
	-o-transform: translate(-68px, -180px) scale(1);
	-ms-transform: translate(-68px, -180px) scale(1);
	opacity: 1;
	/* will-change: animation; */ /* св-во will-change - экспериментальная технология, заранее передает браузеру инфу о возможном предстоящем изменении элемента */
}
/* @keyframes tooltipToAppear {
	0% {
		opacity: 0;
		transform: translate(-68px, -52px) scale(.1);
		-webkit-transform: translate(-68px, -52px) scale(.1);
		-moz-transform: translate(-68px, -52px) scale(.1);
		-o-transform: translate(-68px, -52px) scale(.1);
		-ms-transform: translate(-68px, -52px) scale(.1);
	}
	100% {
		transform: translate(-68px, -182px);
		-webkit-transform: translate(-68px, -182px);
		-moz-transform: translate(-68px, -182px);
		-o-transform: translate(-68px, -182px);
		-ms-transform: translate(-68px, -182px);
		opacity: 1;
	}
} */
.footer_btn-tooltip-popup .feedback-tooltip:after, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на иконку: SJ/email/hh */
.feed-back:hover .feedback-tooltip:after {
	animation: triangleFadeIn ease 2s both;
	-webkit-animation: triangleFadeIn ease 2s both;
	-moz-animation: triangleFadeIn ease 2s both;
	-o-animation: triangleFadeIn ease 2s both;
}
@keyframes triangleFadeIn {
	0% {opacity: 0;}
	50% {opacity: 1;}
	100% {opacity: 0;}
}

.footer_btn-tooltip-popup .feedback-tooltip .feedback_tooltip-title, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на иконку: SJ/email/hh */
.feed-back:hover .feedback-tooltip .feedback_tooltip-title span,
.feed-back:hover .feedback-tooltip .feedback_tooltip-title {
	animation: titleToAppear ease 10s both;
	-webkit-animation: titleToAppear ease 10s both;
	-moz-animation: titleToAppear ease 10s both;
	-o-animation: titleToAppear ease 10s both;
	/* will-change: animation; */ /* св-во will-change - экспериментальная технология, заранее передает браузеру инфу о возможном предстоящем изменении элемента */
	/* transition-delay: 3s; */ /* задержка перед началом анимации */
	/* transition-duration: 3s; */ /* длительность анимации */
	/* (i) первичный вариант */
	/* transition: 2s 3s;
	transform-origin: center center;
	-webkit-transform-origin: center center;
	-moz-transform-origin: center center;
	-o-transform-origin: 100% 100%;
	-ms-transform-origin: center center;
	transform: scale(-1, 1);
	-webkit-transform: scale(-1, 1);
	-moz-transform: scale(-1, 1);
	-o-transform: scale(-1, 1);
	-ms-transform: scale(-1, 1);
	opacity: 1; */
}
@keyframes titleToAppear {
	0% {opacity: 0;}
	20% {
		opacity: 1;
		transform: scale(-1, 1);
		-webkit-transform: scale(-1, 1);
		-moz-transform: scale(-1, 1);
		-o-transform: scale(-1, 1);
		-ms-transform: scale(-1, 1);
	}
	40% {
		transform: scale(1);
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
		-ms-transform: scale(1);
	}
	80% {opacity: 1;}
	100% {opacity: 0;}
}

.hr {
	border-style: solid;
	border-color: #3f3f3f;
	border-width: 1px 0 1px 0;
}
/* (!) МЕДИА ЗАПРОСЫ */
/**диапазон < 388 по высоте */
@media screen and (max-height: 388px) {
	.toc-title {max-height: 48px;}
	.toc-subtitle {max-height: 38px;}
	/**всплывающее фоновое изо.для кн.email */
	/**фон подсказки */
	.feedback-tooltip {
		width: 110px; height: 170px;
		transform: translate(-48px, 0) scale(0);
		-webkit-transform: translate(-48px, 0) scale(0);
		-moz-transform: translate(-48px, 0) scale(0);
		-o-transform: translate(-48px, 0) scale(0);
		-ms-transform: translate(-48px, 0) scale(0);
	}
	.footer_btn-tooltip-popup .feedback-tooltip, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на иконку: SJ/email/hh */
	.feed-back:hover .feedback-tooltip {
		transform: translate(-48px, -150px) scale(1);
		-webkit-transform: translate(-48px, -150px) scale(1);
		-moz-transform: translate(-48px, -150px) scale(1);
		-o-transform: translate(-48px, -150px) scale(1);
		-ms-transform: translate(-48px, -150px) scale(1);
	}
	.feedback-tooltip:after {
		border-left: 56px solid transparent;
		border-right: 56px solid transparent;
	}
}
/**диапазон < 388 по высоте и < 206 по ширине */ /* yandex/chrome */
@media screen and (max-height: 388px) and (max-width: 206px) {
	.feedback-tooltip {
		transform: translate(-48px, 0) scale(0);
		-webkit-transform: translate(-48px, 0) scale(0);
		-moz-transform: translate(-48px, 0) scale(0);
		-o-transform: translate(-48px, 0) scale(0);
		-ms-transform: translate(-48px, 0) scale(0);
	}
	.footer_btn-tooltip-popup .feedback-tooltip, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на иконку: SJ/email/hh */
	.feed-back:hover .feedback-tooltip {
		transform: translate(-48px, -120px) scale(1);
		-webkit-transform: translate(-48px, -120px) scale(1);
		-moz-transform: translate(-48px, -120px) scale(1);
		-o-transform: translate(-48px, -120px) scale(1);
		-ms-transform: translate(-48px, -120px) scale(1);
	}
	.feedback-tooltip:after {
		bottom: -26px;
		border-top: 24px solid rgba(255,255,255,.4);
	}
}
/**диапазон < 331 по высоте или < 206 по ширине */
@media screen and (max-height: 331px), (max-width: 206px) {
	.toc-title {max-height: 32px;}
	.toc-subtitle {max-height: 24px;}
}
/**диапазон < 320 по высоте */
@media screen and (max-height: 320px) {
	/**всплывающее фоновое изо.для кн.email */
	/**фон подсказки */
	.feedback-tooltip {
		width: 100px; height: 153px;
		transform: translate(-44px, 0) scale(0);
		-webkit-transform: translate(-44px, 0) scale(0);
		-moz-transform: translate(-44px, 0) scale(0);
		-o-transform: translate(-44px, 0) scale(0);
		-ms-transform: translate(-44px, 0) scale(0);
	}
	.footer_btn-tooltip-popup .feedback-tooltip, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на иконку: SJ/email/hh */
	.feed-back:hover .feedback-tooltip {
		transform: translate(-44px, -140px) scale(1);
		-webkit-transform: translate(-44px, -140px) scale(1);
		-moz-transform: translate(-44px, -140px) scale(1);
		-o-transform: translate(-44px, -140px) scale(1);
		-ms-transform: translate(-44px, -140px) scale(1);
	}
	.feedback-tooltip:after {
		border-left: 50px solid transparent;
		border-right: 50px solid transparent;
	}
}
/**диапазон < 320 по высоте и < 206 по ширине */
@media screen and (max-height: 320px) and (max-width: 206px) {
	.feedback-tooltip {
		transform: translate(-44px, 0) scale(0);
		-webkit-transform: translate(-44px, 0) scale(0);
		-moz-transform: translate(-44px, 0) scale(0);
		-o-transform: translate(-44px, 0) scale(0);
		-ms-transform: translate(-44px, 0) scale(0);
	}
	.footer_btn-tooltip-popup .feedback-tooltip, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на иконку: SJ/email/hh */
	.feed-back:hover .feedback-tooltip {
		transform: translate(-44px, -106px) scale(1);
		-webkit-transform: translate(-44px, -106px) scale(1);
		-moz-transform: translate(-44px, -106px) scale(1);
		-o-transform: translate(-44px, -106px) scale(1);
		-ms-transform: translate(-44px, -106px) scale(1);
	}
}
/** диапазон 295 или 293 по высоте */
@media screen and (max-height: 295px), (max-height: 293px) {
	.feedback-tooltip {
		transform: translate(-44px, 0) scale(0);
		-webkit-transform: translate(-44px, 0) scale(0);
		-moz-transform: translate(-44px, 0) scale(0);
		-o-transform: translate(-44px, 0) scale(0);
		-ms-transform: translate(-44px, 0) scale(0);
	}
	.footer_btn-tooltip-popup .feedback-tooltip, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на иконку: SJ/email/hh */
	.feed-back:hover .feedback-tooltip {
		transform: translate(-44px, -126px) scale(1);
		-webkit-transform: translate(-44px, -126px) scale(1);
		-moz-transform: translate(-44px, -126px) scale(1);
		-o-transform: translate(-44px, -126px) scale(1);
		-ms-transform: translate(-44px, -126px) scale(1);
	}
	.feedback-tooltip:after {
		bottom: -36px;
		border-top: 34px solid rgba(255,255,255,.4);
	}
}
/** диапазон 267 или 265 по высоте */ /* firefox */
@media screen and (max-height: 267px), (max-height: 265px) {
	.feedback-tooltip {
		transform: translate(-44px, 0) scale(0);
		-webkit-transform: translate(-44px, 0) scale(0);
		-moz-transform: translate(-44px, 0) scale(0);
		-o-transform: translate(-44px, 0) scale(0);
		-ms-transform: translate(-44px, 0) scale(0);
	}
	.footer_btn-tooltip-popup .feedback-tooltip, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на иконку: SJ/email/hh */
	.feed-back:hover .feedback-tooltip {
		transform: translate(-44px, -100px) scale(1);
		-webkit-transform: translate(-44px, -100px) scale(1);
		-moz-transform: translate(-44px, -100px) scale(1);
		-o-transform: translate(-44px, -100px) scale(1);
		-ms-transform: translate(-44px, -100px) scale(1);
	}
	.feedback-tooltip:after {
		bottom: -18px;
		border-top: 16px solid rgba(255,255,255,.4);
	}
}
/**диапазоны < 206 или 205 или 202 по ширине */
@media screen and (max-width: 206px), (max-width: 205px), (max-width: 202px) {
	.item-1 {
		order: 0;
		flex: 1 1 100%;
	}
}
/* x */
/**диапазон < 205 по ширине */
/* @media screen and (max-width: 205px) {
	.feedback-tooltip {
		transform: translate(-44px, 0) scale(0);
		-webkit-transform: translate(-44px, 0) scale(0);
		-moz-transform: translate(-44px, 0) scale(0);
		-o-transform: translate(-44px, 0) scale(0);
		-ms-transform: translate(-44px, 0) scale(0);
	}
	.footer_btn-tooltip-popup .feedback-tooltip, */ /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на иконку: SJ/email/hh */
	/* .feed-back:hover .feedback-tooltip {
		transform: translate(-94px, -100px) scale(1);
		-webkit-transform: translate(-94px, -100px) scale(1);
		-moz-transform: translate(-94px, -100px) scale(1);
		-o-transform: translate(-94px, -100px) scale(1);
		-ms-transform: translate(-94px, -100px) scale(1);
	}
} */
/**диапазон < 205 по ширине */
/* @media screen and (max-width: 205px) {
	.feedback-tooltip {
		transform: translate(-60px, -36px) scale(0);
		-webkit-transform: translate(-60px, -36px) scale(0);
		-moz-transform: translate(-60px, -36px) scale(0);
		-o-transform: translate(-60px, -36px) scale(0);
		-ms-transform: translate(-60px, -36px) scale(0);
	}
	.footer_btn-tooltip-popup .feedback-tooltip, */ /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на иконку: SJ/email/hh */
	/* .feed-back:hover .feedback-tooltip {
		transform: translate(-94px, -148px) scale(1);
		-webkit-transform: translate(-94px, -148px) scale(1);
		-moz-transform: translate(-94px, -148px) scale(1);
		-o-transform: translate(-94px, -148px) scale(1);
		-ms-transform: translate(-94px, -148px) scale(1);
	}
	.feedback-tooltip:after {
		border-left: 90px solid transparent;
		border-right: 10px solid transparent;
	}
} */
/**диапазон < 190 по ширине */
/* @media screen and (max-width: 190px) {
	.feedback-tooltip {
		transform: translate(-44px, 0) scale(0);
		-webkit-transform: translate(-44px, 0) scale(0);
		-moz-transform: translate(-44px, 0) scale(0);
		-o-transform: translate(-44px, 0) scale(0);
		-ms-transform: translate(-44px, 0) scale(0);
	}
	.footer_btn-tooltip-popup .feedback-tooltip, */ /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на иконку: SJ/email/hh */
	/* .feed-back:hover .feedback-tooltip {
		transform: translate(-92px, -106px) scale(1);
		-webkit-transform: translate(-92px, -106px) scale(1);
		-moz-transform: translate(-92px, -106px) scale(1);
		-o-transform: translate(-92px, -106px) scale(1);
		-ms-transform: translate(-92px, -106px) scale(1);
	}
} */
/**диапазон < 146 по ширине */
/* @media screen and (max-width: 146px) {
	.feedback-tooltip {
		transform: translate(-44px, 0) scale(0);
		-webkit-transform: translate(-44px, 0) scale(0);
		-moz-transform: translate(-44px, 0) scale(0);
		-o-transform: translate(-44px, 0) scale(0);
		-ms-transform: translate(-44px, 0) scale(0);
	}
	.footer_btn-tooltip-popup .feedback-tooltip, */ /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на иконку: SJ/email/hh */
	/* .feed-back:hover .feedback-tooltip {
		transform: translate(-84px, -106px) scale(1);
		-webkit-transform: translate(-84px, -106px) scale(1);
		-moz-transform: translate(-84px, -106px) scale(1);
		-o-transform: translate(-84px, -106px) scale(1);
		-ms-transform: translate(-84px, -106px) scale(1);
	}
} */
/**диапазон < 145 по ширине */
/* @media screen and (max-width: 145px) {
	.feedback-tooltip {
		transform: translate(-44px, 0) scale(0);
		-webkit-transform: translate(-44px, 0) scale(0);
		-moz-transform: translate(-44px, 0) scale(0);
		-o-transform: translate(-44px, 0) scale(0);
		-ms-transform: translate(-44px, 0) scale(0);
	}
	.footer_btn-tooltip-popup .feedback-tooltip, */ /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на иконку: SJ/email/hh */
	/* .feed-back:hover .feedback-tooltip {
		transform: translate(-10px, -120px) scale(1);
		-webkit-transform: translate(-10px, -120px) scale(1);
		-moz-transform: translate(-10px, -120px) scale(1);
		-o-transform: translate(-10px, -120px) scale(1);
		-ms-transform: translate(-10px, -120px) scale(1);
	}
	.feedback-tooltip:after {
		border-left: 24px solid transparent;
		border-right: 80px solid transparent;
	}
} */
/**диапазон < 124 по ширине */
/* @media screen and (max-width: 124px) {
	.feedback-tooltip {
		transform: translate(-44px, 0) scale(0);
		-webkit-transform: translate(-44px, 0) scale(0);
		-moz-transform: translate(-44px, 0) scale(0);
		-o-transform: translate(-44px, 0) scale(0);
		-ms-transform: translate(-44px, 0) scale(0);
	}
	.footer_btn-tooltip-popup .feedback-tooltip, */ /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на иконку: SJ/email/hh */
	/* .feed-back:hover .feedback-tooltip {
		transform: translate(-44px, -160px) scale(1);
		-webkit-transform: translate(-44px, -160px) scale(1);
		-moz-transform: translate(-44px, -160px) scale(1);
		-o-transform: translate(-44px, -160px) scale(1);
		-ms-transform: translate(-44px, -160px) scale(1);
	}
	.feedback-tooltip:after {
		border-left: 50px solid transparent;
		border-right: 50px solid transparent;
	}
} */ /* x */