/*
(i) Символ «*» - универсальный селектор, совпадает с именем любого типа элемента. Соответствует любому отдельному элементу в дереве док.
*Унивесальный селектор имеет нулевой приоритет (ниже только отсутствие приоритета вовсе).
*/
/* - перебить CSS свойства, которые браузеры устанавливают по умолчанию для некоторых тегов, например, тегу гиперссылки <a> синий цвет текста и подчёркивание, тегу body они задают поля (padding) и тд.и т.п. */
* {
	margin: 0; padding: 0;
	/* box-sizing: border-box; */ /* 'размеры будут учитываться браузером без padding и border */
}
/*
(i) считается хорошей практикой, но в моем случае придется много чего переписывать
*/
/* html {box-sizing: border-box;} */
/*
// *, *:after, *:before {box-sizing: inherit;}
*/
body, html {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	width: 100%; height: 100%;
}

body {
	background-color: #3f3f3f;
	background-image: url(../icon/bg-body.jpeg);
	overflow: hidden hidden;
}
/**Избавление от общих контуров выбора */
a, a:active, * :focus {
	outline: 0;
	-moz-outline-style: none;
	outline-style: none; /**В отличие от линии, задаваемой через border, линия через outline отображается вокруг элемента, не влияя на ширину блока или его положение */
}
/* (!) Scrollbars */
*,
html * /* - если нужен общий стиль, его следует применять к тегу html, а не к body */
{
	scrollbar-width: thin;
	scrollbar-color: gray #3f3f3f;
	scroll-behavior: smooth; /* плавная прокрутка */
}
*::-webkit-scrollbar,
html *::-webkit-scrollbar {
	/* top: 0; *//* bottom: 0; *//* 'работать не будет-для всех браузеров высота scrollbara = высоте его элемента */
	width: 10px;
	height: 10px;
}
/**Варианты по умолчанию для элементов на странице */
/* 'вариант-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 {
	border: 4px solid #fff;
	border-radius: 100px;
}
*::-webkit-scrollbar-thumb,
html *::-webkit-scrollbar-thumb {
	background-color: #3f3f3f;
	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;
} */
/* (!).tabs-list */
.tabs-list::-webkit-scrollbar {width: 2px;}
.tabs-list::-webkit-scrollbar-thumb {
	background-color: gray;
	border: 4px solid maroon;
	border-radius: 10px;
}
/* (!).slider-track */
.slider-track::-webkit-scrollbar {
	height: 3px;
	/* display: none; */
}
.slider-track::-webkit-scrollbar-track {
	background-color: transparent;
	border: 1px solid transparent;
}
.slider-track::-webkit-scrollbar-thumb {
	background-color: #fff;
	border: 1px solid maroon;
}
/* Scrollbars the end */
/*
*отражаем противоположно самый верхний div, чтобы scrollbar и треугольник для изменения размеров были слевой стороны
(i) обуславливает то в какую сторону будет изменяться размер при применении правила reflect
'применяется непосредственно к текущему элементу, применение к псевдоэлементу работать не будет
(???) влияет на разные символы такие, как кавычки елочки.., для текстовых элементов типа textarea, label, a, p, span, поэтому данное св-во необходимо отражать обратно для возврата правильного отображения символов и направления чтения по умолчанию (с лева на право).
*/
.reflect *.reflect,
.reflect {
	direction: rtl;
}
.reflect * {
	direction: ltr;
}
/**Компоненты главной страницы контейнера */
/* (!) lightbox-для просмотра изображений во весь экран в гл.окне,
'см.класс lightbox в topic.css
*/
.lightbox {
	position: absolute;
	left: 0; right: 0;
	top: 0; bottom: 0;
	width: auto;
	height: auto;
	margin: auto;
	padding: 4px;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	align-content: space-between;
	justify-content: center;
}
.lightbox {
	font-size: 1em;
	/* font-size: 16px; */
	font-family: 'Times New Roman', Times, Georgia, serif;
	font-style: normal;
	font-weight: bold;
	text-align: center;
	text-indent: 0;
	color: #000;
	background: rgba(0, 0, 0, 0.9);
	z-index: 4;
}
.slider-list,
.img-slider,
.img-title,
.lightbox-video,
.lightbox-img,
.lightbox {overflow: hidden hidden;}

.img-title,
.slider-track,
.slider-list,
.img-slider,
.lightbox-video,
.lightbox-img {
	position: relative;
	left: 0; top: 0;
	width: auto;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}
.lightbox-img {
	height: auto; /* высота будет вычисляться кодом js */
	flex: 1 1 100%;
	flex-flow: row wrap;
	-ms-flex-flow: row wrap; /* IE */
}

.zoomer {
	position: absolute;
	left: 4px; top: 4px;
	width: auto;
	height: auto;
	margin: 6px;
	padding: 6px;
	border: none;
	border-radius: 5px;
	box-shadow: 5px 5px 10px #000;
	cursor: pointer;
}

.btn-slider,
.btn-box,
.zoomer {z-index: 1;}

.zoom-out,
.zoom-in {
	width: 50px;
	height: 50px;
	display: block;
}
.btn-box a:hover,
.btn-slider a:hover,
.zoom-out:hover,
.zoom-in:hover {transform: scale(1.3);}
.btn-slider a,
.slider-item,
.btn-box a, /* .img-btn-next, .img-btn-prev, */
.zoom-out,
.zoom-in {
	transition: 0.6s ease; /**плавное появление/исчезновение при наведении курсора */
	-webkit-transition: .6s ease; /* Chrome, Safari, iOS */
	-moz-transition: .6s ease; /* Firefox */
	-o-transition: .6s ease; /* Opera */
	/* will-change: transition; *//* св-во will-change - экспериментальная технология, заранее передает браузеру инфу о возможном предстоящем изменении элемента */
}

.img-viewer {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 6px;
	box-sizing: border-box; /* позволяет изменить алгоритм для расчета ширины и высоты, чтобы свойства width и height задавали размеры не контента, а размеры блока, т.е.margin, padding, border учитываться не будут */
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	display: flex;
	flex-flow: row wrap;
	-ms-flex-flow: row wrap; /* IE */
	align-items: center;
	border: 1px solid #fff;
	border-radius: 5px;
	/* outline: 1px solid white; */ /* без влияния на размерность */
	overflow: auto;
}

.img-item {
	margin: auto;
	display: block;
	cursor: zoom-out;
	cursor: -webkit-zoom-out;
	cursor: -moz-zoom-out;

	animation: 2s;
	-webkit-animation: 2s;
	-moz-animation: 2s;
	-o-animation: 2s;
	will-change: animation; /* св-во will-change - экспериментальная технология, заранее передает браузеру инфу о возможном предстоящем изменении элемента */
}
/*
(!) css правило img-zoom100 для lightbox в гл.окне работает противоположно правилу img-zoom100 для lightbox в теме топика
*/
.img-zoom100 {
	max-width: 100%;
	max-height: 100%;
	cursor: zoom-in;
	cursor: -webkit-zoom-in;
	cursor: -moz-zoom-in;
}

.btn-box {
	position: absolute;
	width: 50px;
	height: 50px;
	display: flex;
}
.btn-slider,
.btn-box {
	font-size: 2em;
	font-family: Verdana, Tahoma, Helvetica, sans-serif;
}
.slider-item:hover,
.slider-item,
.btn-slider:hover,
.btn-slider,
.zoom-out,
.zoom-in,
.btn-box:hover,
.btn-box {cursor: pointer;}

.btn-slider a,
.btn-box a {
	width: 100%;
	border-radius: 100px;
	border-color: transparent;
	background-color: rgba(0,0,0,0.4);
	line-height: 50px; /* выравниваем "стрелки" по высоте (кнопки перехода) */
	text-decoration: none;
}
.lightbox-btn-close,
.btn-slider a,
.btn-box a {color: #000;}
.btn-slider a:hover,
.btn-box a:hover {border: 1px solid #fff;}

.lightbox-btn-close {
	right: 30px; top: 20px;
	width: auto;
	height: auto;
	margin: 6px;
	padding: 6px;
	line-height: 1;
	border: none;
	outline: none;
	background-color: transparent;
	/* text-shadow: 4px 0 #000, 0.4px 0 #000, -0.4px 0 #000, -0.4px 0 #000; */ /* буквенная обводка */
	text-shadow: 4px 0 #fff, 0.4px 0 #fff, -0.4px 0 #fff, -0.4px 0 #fff; /* буквенная обводка */
}
.lightbox-btn-close {
	transition: 0.3s ease; /**плавное появление/исчезновение при наведении курсора */
	-webkit-transition: .3s ease; /* Chrome, Safari, iOS */
	-moz-transition: .3s ease; /* Firefox */
	-o-transition: .3s ease; /* Opera */
	/* will-change: transition; *//* св-во will-change - экспериментальная технология, заранее передает браузеру инфу о возможном предстоящем изменении элемента */
}
.lightbox-btn-close:hover {
	transform: rotate(180deg) scale(1.6, 1.6);
	-webkit-transform: rotate(180deg) scale(1.6, 1.6); /* Chrome, Safari, iOS */
	-moz-transform: rotate(180deg) scale(1.6, 1.6); /* Firefox */
	-o-transform: rotate(180deg) scale(1.6, 1.6); /* Opera */
	-ms-transform: rotate(180deg) scale(1.6, 1.6); /* IE */
	/* will-change: transform; *//* св-во will-change - экспериментальная технология, заранее передает браузеру инфу о возможном предстоящем изменении элемента */
	/* text-shadow: -4px 0 #000, 0.4px 0 #000, 0 0.4px #000, 0 -0.4px #000; */ /* буквенная обводка */
	text-shadow: -4px 0 #fff, 0.4px 0 #fff, 0 0.4px #fff, 0 -0.4px #fff; /* буквенная обводка */
}

.img-btn-prev {
	left: 0;
	margin: 0 0 0 10px;
	padding: 0 0 0 10px;
}
.img-btn-next,
.img-btn-prev {top: 50%;}

.slider-btn-prev a,
.img-btn-prev a {
	/* - буквенная обводка */
	text-shadow: -4px 0px #fff,
				1px 2px #fff,
				-1px 2px #fff,
				-1px -2px #fff,
				4px 2px #fff,
				0px -2px #fff,
				4px -2px #fff;
}

.img-btn-next {
	right: 0;
	margin: 0 20px 0 0;
	padding: 0 10px 0 0;
}
.slider-btn-next a,
.img-btn-next a {
	/* - буквенная обводка */
	text-shadow: 4px 0px #fff,
				1px 2px #fff,
				-1px 2px #fff,
				1px -2px #fff,
				-4px 2px #fff,
				0px -2px #fff,
				-4px -2px #fff;
}

.video-title,
.img-title {
	width: auto;
	height: auto;
	margin: 6px;
	flex: 1 1 100%;
	flex-flow: column wrap;
	-ms-flex-flow: column wrap;
	color: #fff;
	cursor: default;
}

.img-slider {margin: 6px;}
.slider-list,
.img-slider {
	flex: 1 1 auto;
}
.slider-list {margin: auto;}

.img-slider,
.slider-item,
.btn-slider,
.slider-track,
.slider-list {
	flex-flow: row nowrap;
	-ms-flex-flow: row nowrap; /* IE */
}

.slider-track {
	margin: 2px;
	padding: 4px;
	justify-content: flex-start;
	overflow: auto hidden;
}

.btn-slider {width: 50px;}
.slider-item,
.btn-slider {
	position: relative;
	height: 50px;
	margin: 5px;
	padding: 4px;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
}

.slider-btn-prev {justify-content: flex-start;}
.slider-btn-next {justify-content: flex-end;}

.slider-item {
	min-width: fit-content;
	justify-content: center;
	/* outline: 1px dotted white; */ /* без влияния на размерность */
	border: 1px dotted #fff;
}
.img-slider,
.slider-track,
.slider-list,
.lightbox-img,
.img-viewer,
.slider-item {
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
.slider-item img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain; /* вписываем в область */
	-o-object-fit: contain; /* Opera */
	/* pointer-events: none; */ /* (i)(!) чтобы img не перетаскивались мышью, НО тогда будет влиять на кликабельность */
	cursor: pointer;
}

.slider-current {border-color: red;}
.slider-item:hover,
.slider-current {
	border-style: solid;
	transform: scale(1.1);
	box-shadow: 0 0 20px 20px #fff;
}
/**Фреймворк главной страницы */
.container {
	position: absolute;
	left: 0; right: 0;
	top: 0; bottom: 0;
	width: 100%;
	height: 100%;
}
/* (!).banner - баннер */
.topic-pane,
.nav-pane,
.toolbar-banner,
.toolbar,
.banner {display: flex;}
.banner {order: 1;}
.toolbar-banner,
.toolbar {order: 2;}
.nav-pane {order: 3;}
.topic-pane {order: 4;}
.banner {
	position: relative;
	left: 0; top: 0;
	width: 100%;
	height: 120px;
	margin: auto;
	flex: 0 0 auto;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
	font-family: "Times New Roman", Times, serif;
	color: rgb(0, 0, 0);
	text-indent: 0;
	text-align: center;
	background: url(../icon/fgis-fri-banner.png) repeat-x center #fff;
	/* background-size: cover; */
}

.banner a {
	position: relative;
	left: 0; top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex: 1 1 auto;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}
.banner img {
	position: absolute;
	width: auto;
	height: 100%;
	/* margin: auto; */
	padding: 0 4px;
}
.logo-ri {left: 25px;}
.logo-fri {right: 25px;}

.banner span {
	position: absolute;
	bottom: 10px;
	width: auto;
	height: auto;
	font-size: 0.9em;
	color: #fff;
}
.banner span:hover {text-decoration: underline dotted;}
/* (!).topnav - заголовок меню банера
x 'скорее всего не понадобится, т.к.при компиляции проекта меню баннера отсутствовало */
.topnav {
	border-color: #000000;
	border-style: solid;
	background-color: #3f3f3f;
	border-radius: 5px 0 0 0;
	-webkit-border-radius: 5px 0 0 0;
	-moz-border-radius: 5px 0 0 0;
}
/**Цвет заголовка банера выпадающего меню */
/* (!).topnav li - названия меню */
.topnav li a:hover,
.topnav li a:visited,
.topnav li a {
	color: silver;
	text-decoration: none;
	font-weight: bold;
}
.topnav li a:hover,
.topnav li ul.subnav li a:hover {text-decoration: underline;}
/* (!).subnav - пункты меню */
.subnav li a {color: silver;}
/**Граница и фон меню */
.topnav li ul.subnav {
	background: #3f3f3f;
	border-color: #000000;
	border-width: 0px 1px 1px 1px;
}
/**Тени меню и изогнутые углы */
.subnav {
	box-shadow: 2px 2px 2px #999;
	-webkit-box-shadow: 2px 2px 2px #999;
	-moz-box-shadow: 2px 2px 2px #999;
	border-radius: 0px 0px 4px 4px;
	-webkit-border-radius: 0px 0px 4px 4px;
	-moz-border-radius: 0px 0px 4px 4px;
}/* x 'скорее всего не понадобится */
img#button_off, /* (?) че за кнопки не пойму */
img#social_off {border-color: transparent;}
/* (!) Панель инструментов */
/**Предотвращение выбора инструментов */
.topic-controls *,
.nav-pane *,
.toolbar * {
	/* -webkit-touch-callout: none; */ /* (i) не рекомендуется */
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-ms-user-select: none;
}
/* (!).toolbar, .toolbar-banner */
.toolbar-banner,
.toolbar {
	position: relative;
	left: 0; top: 0;
	width: auto;
	height: 48px; /* height: auto; */ /**test */
	padding: 0px 4px 0px 4px;
	/* flex: 1 1 auto; */ flex: 1 1 100%; /* flex: 1 1 48px; */ /**test */
	flex-flow: row wrap;
}
/**Фон, границы и тень панели инструментов, навигации, баннера и других компонентов */
.banner,
.nav-pane,
.nav-box,
/* .tabs-menu, */ .tabs-list,
.topic-content,
.toolbar-banner,
.toolbar {border-color: #000000;}
/* 'Background */
.nav-pane,
.toolbar-banner,
.toolbar {
	background-color: #2a2a2a;
	background: linear-gradient(#888888, #000000);
	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = #888888, endColorstr = #000000);
	-ms-filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = #888888, 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);
	/* первичный вар.:
	background-color: #3f3f3f;
	background: linear-gradient(#dedede 3%, #3f3f3f 30%);
	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = #dedede, endColorstr = #3f3f3f);
	-ms-filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = #dedede, endColorstr = #3f3f3f);
	background: -webkit-linear-gradient(top, #dedede 3%, #3f3f3f 30%);
	background: -moz-linear-gradient(top, #dedede 3%, #3f3f3f 30%);
	background: -o-linear-gradient(top,rgb(241,241,241) 3%,rgb(63,63,63) 30%);
	background: -ms-linear-gradient(top, #dedede 3%, #3f3f3f 30%);
	*/
}
.nav-pane,
.topic-content,
.toolbar-banner,
.toolbar { margin: 4px; }
/* ''Border */
.toolbar-banner,
.toolbar {border-width: 1px;}
.nav-pane,
.nav-box,
.topic-content,
.toolbar-banner,
.toolbar {
	border: 1px solid;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
/* ''Shadows - тень */
.nav-pane,
.topic-content,
.toolbar-banner,
.toolbar {
	box-shadow: 2px 2px 2px #3f3f3f;
	-webkit-box-shadow: 2px 2px 2px #3f3f3f;
	-moz-box-shadow: 2px 2px 2px #3f3f3f;
}

.toolbar-banner {
	/* height: 49px; */ /**test */
	margin: 0 4px 4px 4px;
	border-top-style: none;
}

.toolbar-right,
.toolbar-center,
.toolbar-left,
.toolbar-search {
	position: relative;
	padding: 2px 0;
	display: flex;
	flex-flow: row nowrap; /* св-ва flex-direction и flex-wrap вместе определяют основные и поперечные оси flex-контейнера. Применяется к родительскому элементу flex-контейнера. */
}

.toolbar-search {
	order: 1; /* порядок появления в flex-контейнере */
	min-width: 160px;
	/* flex-grow: 0; *//* растягивание flex-элемента при необходимости. */
	/* flex-shrink: 1; *//* способность гибкого элемента сжиматься при необходимости. */
	/* flex-basis: 150px; *//* размер элемента по умолчанию ПЕРЕД распределением оставшегося пространства. */
	flex: 0 1 16vw; /* - вьюпорт 16vw, изменение ширины элемента относительно ширины видимой области браузера. */
}

.toolbar-right,
.toolbar-center,
.toolbar-left {
	flex: 1 1 auto; /**Сокращенная запись свойств для текущего flex-элемента: flex-grow, flex-shrink и flex-basis. */
}
.toolbar-left {
	order: 2; /* порядок появления в flex-контейнере */
	justify-content: flex-start; /* выравнивание вдоль главной оси. Не для всех браузеров */
}
.toolbar-center {
	order: 3; /* порядок появления в flex-контейнере */
	justify-content: center; /* выравнивание вдоль главной оси. Не для всех браузеров */
}
.toolbar-right {
	order: 4; /* порядок появления в контейнере flex */
	justify-content: flex-end; /* выравнивание вдоль главной оси. Не для всех браузеров */
}

.toolbar-box {
	position: relative;
	width: auto;
	height: auto;
	padding: 2px 1px 2px 1px;
	display: flex;
	flex-flow: row wrap; /* - св-ва flex-direction и flex-wrap вместе определяют основные и поперечные оси flex-контейнера. Применяется к родительскому элементу flex-контейнера. */
	align-items: center;
	justify-content: center; /* - выравнивание вдоль главной оси. Не для всех браузеров */
	font-family: Tahoma, Verdana, Arial, sans-serif, Helvetica;
	font-size: 9px;
	font-weight: normal;
	text-indent: 0;
	line-height: 1em;
}
/* (!) Quick search box */
.toolbar_box-search {flex: 1 1 auto;}
/* (!) checkboxes */
[for="idBannerShowHide"] {display: contents;}
#idBannerShowHide,
#idNavPaneToggle {display: none;} /* - скрываем "квадратик" checkbox */
/* (!).nav_pane-handle - иконка Скрыть/Показать панель навигации */
.btn_icon-search_off,
.btn_icon-search_on,
.nav_pane-handle {
	position: relative;
	border: 1px solid;
	cursor: pointer;
}
.nav_pane-handle {
	height: 20px;
	border-color: #fff;
	border-radius: 8px 0 0 8px;
	background-color: transparent;
}
.nav_pane-handle:hover {background-color: #dedede;}

.btn-nav_pane {
	width: 16px;
	height: 2px;
	margin: 3px 1px 3px 3px;
	content: "";
	border-top: 3px solid #fff;
	border-bottom: 8px double #fff;
	box-sizing: unset;
}
.btn-nav_pane:hover {border-color: #000;}
/* 'the end .nav_pane-handle - Иконка Скрыть/Показать панель навигации */
.quick-search {
	position: relative;
	left: 0; top: 0;
	width: auto;
	height: auto;
	display: flex;
	flex: 1 1 auto;
	flex-flow: row wrap;
	align-items: center;
	justify-content: space-between;
}

.quick-search input {
	width: 60px;
	height: 20px;
	padding-right: 16px;
	flex: 1 1 auto;
	border: 1px solid #fff;
}
[for="idInputSearch"] {
	position: absolute;
	right: 0; top: 0;
	width: auto;
	height: auto;
	/* font-size: 1rem; */
	font-size: 1.04rem;
	text-align: center;
	line-height: normal;
	border: 1px solid transparent;
	/* border-radius: 100px; */
	/* background: #dedede; */
	transition: .3s;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-o-transition: .3s;
}
[for="idInputSearch"]:hover {
	display: inline-block;
	font-weight: bold;
	top: 3px;
	transform: rotateZ(180deg);
}

.btn_icon-search_off,
.btn_icon-search_on {
	padding: 2px;
	background-color: #dedede;
	border-color: #dedede;
	border-radius: 0 8px 8px 0;
}
.btn_icon-search_off:hover,
.btn_icon-search_on:hover {background-color: transparent;}

.btn_icon-off,
.btn_icon-search_off {
	cursor: default;
	display: none;
}

.toolbar_box-search span {
	top: 0;
	flex: 1 1 100%;
	font-weight: bold;
}
/* the end Quick search box */
.toolbar_box-right,
.toolbar_box-center,
.toolbar_box-left {flex: 0 1 auto;}
/*
(!).permalink - вплывающее окно "Постоянная ссылка"
*/
.permalink-box {
	order: 5;
	position: relative;
	left: 0; top: 0;
	margin-top: auto;
	width: 0;
	height: 0;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	z-index: 2;
}
[for="idPermaLinkTxT"],
.permalink-close,
.permalink-box {flex: 0 0 auto;}

.permalink {
	background-color:lightyellow;
	background-image: url("../icon/spacer.gif"); /* (?) не понятно для чего */
	border-width: 2px;
	border-style: solid;
	border-bottom-color: #333333;
	border-right-color: #555555;
	border-left-color: #EEEEEE;
	border-top-color: #EEEEEE;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	box-shadow: 2px 2px 3px #969696;
	-webkit-box-shadow: 2px 2px 3px #969696;
	-moz-box-shadow: 2px 2px 3px #969696;
	filter: progid: DXImageTransform.Microsoft.Shadow(color = #969696, Direction = 135, Strength = 3);
}
.permalink {
	position: absolute;
	top: 0; right: 0; /* (i) обуславливает то в какую сторону будет изменяться размер при применении правила reflect */
	width: auto;
	height: auto;
	margin: 4px; /* (?) */
	padding: 2px 2px 10px 2px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-indent: 0;
	overflow: hidden auto;
	resize: both;
}
.permalink-btns,
.permalink {flex: 1 1 auto;}
.permalink-txt,
.permalink {flex-flow: column nowrap;}
.permalink-txt,
.permalink-close,
.permalink-btns {
	position: relative;
	left: 0; top: 0;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}
.permalink-btns {width: 100%;}
.permalink-btns {flex-flow: row nowrap;}

.permalink-txt *,
.permalink-txt {width: 100%;}
.permalink-txt {flex: 1 1 100%;}

.permalink-copy,
.permalink-bookmark,
.permalink-close {width: auto;}

.permalink-txt,
.permalink-btns {margin: auto;}

[for="idPermaLinkCopy"]:before,
[for="idPermaLinkBookmark"]:before,
.permalink-copy,
.permalink-bookmark {padding: 2px 6px;}

[for="idPermaLinkCopy"],
[for="idPermaLinkBookmark"],
.permalink-copy,
.permalink-bookmark {
	font-family: Arial, sans-serif;
	font-size: .8rem;
	text-align: center;
}

[for="idPermaLinkCopy"],
[for="idPermaLinkBookmark"],
.permalink-copy,
.permalink-bookmark,
.permalink-close {margin: 2px;}

.permalink-close {
	justify-content: flex-end;
	line-height: 1;
	font-family: Verdana, Tahoma, Helvetica, sans-serif;
	/* font-size: .8rem; */
	font-size: 1em;
	border: none;
	outline: none;
	background-color: transparent;
}

[for="idPermaLinkCopy"]:before,
[for="idPermaLinkBookmark"]:before,
.btn-flip:before,
.permalink-copy,
.permalink-bookmark {
	color: #fff;
	background: linear-gradient(#888888, #000000);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#888888",endColorstr="#000000",GradientType=1);
	-ms-filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = #888888, endColorstr = #000000);
	background: -webkit-linear-gradient(top, #888888, #000000);
	background: -moz-linear-gradient(top, #888888, #000000);
	background: -o-linear-gradient(top, #888888, #000000);
	border: 1px solid #737373;
	border-radius: 5px;
}
.btn-flip:hover:before,
.permalink-copy:hover,
.permalink-bookmark:hover {
	background: linear-gradient(#000000, #888888);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#888888",GradientType=1);
	-ms-filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = #000000, endColorstr = #888888);
	background: -webkit-linear-gradient(top, #000000, #888888);
	background: -moz-linear-gradient(top, #000000, #888888);
	background: -o-linear-gradient(top, #000000, #888888);
}
.permalink-copy,
.permalink-bookmark,
.permalink-close {cursor: pointer;}
/* *анимация
'плавное проявление/исчезновение
*/
.permalink-box {
	opacity: 0;
	transform: scale(0);
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-o-transform: scale(0);
	-ms-transform: scale(0);
	transition: transform 0s 1s ease, opacity .9s linear;
	-webkit-transition: transform 0s 1s ease, opacity .9s linear;
	-moz-transition: transform 0s 1s ease, opacity .9s linear;
	-o-transition: transform 0s 1s ease, opacity .9s linear;
}
.permalink-popup {
	opacity: 1;
	transform: scale(1);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transition: transform 0s ease, opacity .9s linear;
	-webkit-transition: transform 0s ease, opacity .9s linear;
	-moz-transition: transform 0s ease, opacity .9s linear;
	-o-transition: transform 0s ease, opacity .9s linear;
}

.permalink-close {
	transition: .4s;
	-webkit-transition: .4s;
	-moz-transition: .4s;
	-o-transition: .4s;
}
.permalink-close:hover {
	transform: rotate(180deg) scale(1.6, 1.6);
	-webkit-transform: rotate(180deg) scale(1.6, 1.6);
	-moz-transform: rotate(180deg) scale(1.6, 1.6);
	-o-transform: rotate(180deg) scale(1.6, 1.6);
	-ms-transform: rotate(180deg) scale(1.6, 1.6);
	/* will-change: transform; */ /* св-во will-change - экспериментальная технология, заранее передает браузеру инфу о возможном предстоящем изменении элемента */
}

/* .permalink-copy:hover,
.permalink-bookmark:hover {
	transform: rotateY(180deg) scaleX(-1);
	-webkit-transform: rotateY(180deg) scaleX(-1);
	-moz-transform: rotateY(180deg) scaleX(-1);
	-o-transform: rotateY(180deg) scaleX(-1);
	-ms-transform: rotateY(180deg) scaleX(-1);
} */
/**кн.перевертыш */
[for="idPermaLinkCopy"],
[for="idPermaLinkBookmark"],
.btn-flip {
	position: relative;
	left: 0; top: 0;
	padding: 1px;
	flex-flow: row wrap;
	/* flex-flow: column wrap; */
}
[for="idPermaLinkCopy"]:before,
[for="idPermaLinkBookmark"]:before,
[for="idPermaLinkCopy"],
[for="idPermaLinkBookmark"],
.btn-flip:before,
.btn-flip {
	width: auto;
	height: auto;
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	/* line-height: 1; */
	outline: none;
}
[for="idPermaLinkCopy"]:before,
[for="idPermaLinkBookmark"]:before,
.btn-flip:before {
	content: attr(data-before);
	position: absolute;
	flex-flow: column wrap;
	/* flex-flow: row wrap; */
}
/* - back */
.btn-flip .permalink-copy,
.btn-flip .permalink-bookmark {
	opacity: 0;
	transform: translateY(50%) rotateX(90deg);
}
[for="idPermaLinkCopy"]:before,
[for="idPermaLinkBookmark"]:before {
	opacity: 0;
	transform: translateY(-50%) rotateX(90deg);
}
/* - front */
.permalink-copy,
.permalink-bookmark,
.btn-flip:before {
	opacity: 1;
	transform: translateY(0) rotateX(0);
}
[for="idPermaLinkCopy"]:before,
[for="idPermaLinkBookmark"]:before,
.permalink-copy,
.permalink-bookmark,
.btn-flip:before,
.btn-flip {
	transition: .7s;
	-webkit-transition: .7s;
	-moz-transition: .7s;
	-o-transition: .7s;
}
/**animation end */
[for="idPermaLinkTxT"] {
	padding: 4px 0;
	font-family: Arial, Helvetica, sans-serif;
}
[for="idPermaLinkTxT"],
.permalink-txt textarea {
	text-align: center;
	font-size: 0.7em;
	font-weight: bold;
}

.permalink textarea {
	height: 100%;
	box-sizing: border-box;
	font-family: Verdana, Tahoma, Arial, sans-serif;
	overflow: hidden auto;
	resize: none;
	cursor: default;
}
/* центрирование текста */ /* (?) не работает */
/* .permalink-txt textarea { */
	/* position: relative; */
	/* width: 100%; */
	/* height: 100%; */
	/* display: inline; */
	/* vertical-align: middle; */ /* для display: inline/inline-block */
	/* display: block; */
	/* margin: auto 0; */
	/* display: flex; */
	/* flex-flow: column wrap; */
	/* align-items: center; */
	/* justify-content: center; */
	/* overflow: hidden hidden; */
/* } */
.permalink-info {color: #0000ff; /* blue */}
.permalink-error {color: #ff0000; /* red */}
/* (!) исключение элементов, например контролы на пан.инстр. */
.exclude-elem {display: none;}
/*
(!) Позиционирование для всех компонентов: и ссылок, и иконок
*/
.btn-icon,
.btn_icon-off,
.toolbar_box-right a {
	position: absolute;
	left: 0; right: 0;
	top: 0;
	margin: 0 auto;
}
/* (i) имя класса так же присутствует в стилях topic.css и navigation.css, но правила разные */
.feedback_tooltip-title,
.feedback-tooltip,
.btn_icon-off,
.btn-icon {padding: 2px 4px 2px 4px;}
.feedback-tooltip,
.btn_icon-off,
.btn-icon {
	border: 1px solid transparent;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
/* .nav-pane:target .nav-box, */ /* :active/:target в firefox не срабатывает */
.nav-pane:active .nav-box, /* only firefox for mobil version - работает только как короткое мигание даже при длительном клике */
.nav-pane:hover .nav-box,
.nav-pane:hover,
.toolbar-banner:hover,
.toolbar:hover,
.feedback-tooltip,
.btn_icon-off:active, /* only firefox for mobil version - работает только как короткое мигание даже при длительном клике */
.btn_icon-off:hover,
.btn-icon:active, /* only firefox for mobil version - работает только как короткое мигание даже при длительном клике */
.btn-icon:hover {border-color: #fff;}
/*
(!)#idFeedBackOn
*во всем проекте прописан в 2-х местах:
- 1) в пан.инстр.и
- 2) в пан.нав.
x не используется
(i) переделано как анимационная всплывающая подсказка через div.feedback-tooltip, а в коде js события mouseover/mouseout исключены
*/
/* #idFeedBackOn:active, 	only firefox for mobil version - работает только как короткое мигание даже при длительном клике
#idFeedBackOn:hover { */
	/* position: absolute; *//* не выводит изображение на передний план, поэтому использ.fixed */
	/* position: fixed; *//* устраняем смещение всплывающей картинки */
	/* left: 50%; */
	/* top: 50%; */
	/* transform: translate(-80%, -5%); *//* (x, y) */
/* 	transform: translateX(-80%);
	-webkit-transform: translateX(-80%); */ /* Chrome, Safari, iOS */
/* 	-moz-transform: translateX(-80%); */ /* Firefox */
/* 	-o-transform: translateX(-80%); */ /* Opera */
/* 	-ms-transform: translateX(-80%); */ /* IE */
/* } */
/* (!).feedback-tooltip - анимационная всплывающая подсказка для кн.email на пан.инструментов
(i) имя класса так же присутствует в стилях topic.css и navigation.css, но правила разные
*/
.feedback-tooltip:before,
.feedback_tooltip-title,
.feedback-tooltip {
	position: absolute;
	left: 0; right: 0;
	display: flex;
	flex-flow: row wrap;
}
/**фон подсказки */
.feedback-tooltip{
	width: 120px;
	height: 130px;
	align-content: space-between;
	background: url(../icon/support.gif) no-repeat center transparent;
}
/**текст подсказки */
.feedback_tooltip-title {width: auto; height: auto;}
.feedback_tooltip-title span {
	width: 100%; height: auto;
	font-size: 11px;
	text-align: center;
	line-height: normal;
	color: #fff;
}
/* (i) перенос текста, пробелы, дефисы, тире */
.btn_text-off,
.btn_text-on,
.feedback_tooltip-title span {
	white-space: normal; /* текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически. Разбивает строки, чтобы заполнить строчные боксы */
	word-spacing: normal; /* нормальный интервал между словами, определенный текущим шрифтом и/или браузером */
	overflow-wrap: anywhere; /* св-во отменяет word-wrap */
	word-wrap: normal; /* св-во отменяет overflow-wrap */
	/* word-break: normal; */ /* normal, чтобы игнорировался разного вида перенос текста */
	/* line-break: anywhere; */
	/* text-wrap-style: pretty; */
	hyphens: auto; /* 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:before {
	content: "";
	top: -22px;
	width: 0;
	margin: auto;
	background-color: transparent;
	border-left: 30px solid transparent;
	border-bottom: 20px solid #fff;
}
/**анимация */
.feedback-tooltip {
	/* (i) изначальное положение при 0-ом размере, иначе появление будет из другого места, даже если изначально все элементы будут иметь значение width: 0; height: 0; вдобавок ко всему, надо учесть, чтобы все элементы не перекрывали саму кнопку */
	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(-50px, -40px) scale(0); /* (x, y) */
	-webkit-transform: translate(-50px, -40px) scale(0); /* Chrome, Safari, iOS */
	-moz-transform: translate(-50px, -40px) scale(0); /* Firefox */
	-o-transform: translate(-50px, -40px) scale(0); /* Opera */
	-ms-transform: translate(-50px, -40px) scale(0); /* IE */
	transition: all 2s ease;
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-o-transition: all 2s ease;
	will-change: transform, transition; /* (i) - св-во will-change - экспериментальная технология, заранее передает браузеру инфу о возможном предстоящем изменении элемента */
	z-index: 2; /* перекрываем.topic-controls {z-index: 1;} */
}
.btn_icon-tooltip-popup, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на иконку email */
.btn-icon:hover+.feedback-tooltip {
	transform: translate(-72px, 64px) scale(1);
	-webkit-transform: translate(-72px, 64px) scale(1);
	-moz-transform: translate(-72px, 64px) scale(1);
	-o-transform: translate(-72px, 64px) scale(1);
	-ms-transform: translate(-72px, 64px) scale(1);
	opacity: 1;
}
/* x */
/* .btn_icon-tooltip-popup, */ /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на иконку email */
/* .btn-icon: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; */
	/*
	св-во will-change - экспериментальная технология, заранее передает браузеру инфу о возможном предстоящем изменении элемента
	*/
	/* will-change: animation;
	z-index: 2; */ /* перекрываем.topic-controls {z-index: 1;} */
/* } */
/* @keyframes tooltipToAppear {
	0% {
		opacity: 0;
		transform: translate(-50px, -40px) scale(.1);
		-webkit-transform: translate(-50px, -40px) scale(.1);
		-moz-transform: translate(-50px, -40px) scale(.1);
		-o-transform: translate(-50px, -40px) scale(.1);
		-ms-transform: translate(-50px, -40px) scale(.1);
	}
	100% {
		transform: translate(-72px, 64px);
		-webkit-transform: translate(-72px, 64px);
		-moz-transform: translate(-72px, 64px);
		-o-transform: translate(-72px, 64px);
		-ms-transform: translate(-72px, 64px);
		opacity: 1;
	}
} */
/* .btn_icon-tooltip-popup .feedback_tooltip-title, */ /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на иконку email */
/* .btn-icon:hover+.feedback-tooltip .feedback_tooltip-title span,
.btn-icon: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; */
	/*
	(i) - св-во will-change - экспериментальная технология, заранее передает браузеру инфу о возможном предстоящем изменении элемента
	*/
	/* will-change: animation; */
/* } */
/* @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: 1;}
} */ /* x */

.btn_text-off,
.btn_text-on {
	position: relative;
	top: 12px;
	margin: 1px;
	text-indent: 0;
	text-align: center;
	text-transform: capitalize; /* преобразование текста элемента в заглавные или прописные символы */
	cursor: default;
}
.btn_text-on {color: #dedede; /* color: #f1f1f1; */}
.btn_text-off {color: #a1a1a1;}
.btn_text-off,
.btn_text-on {
	hyphens: none; /* - чтобы браузер не обращал внимания на мягкий дефис, вставляем hyphens: none для Chrome, с Firefox все сложнее */
	-moz-hyphens: auto; /* - все равно не работает */
	-ms-hyphens: auto;
}
/*
(!).nav-pane - панель навигации
*/
.nav-pane {
	position: absolute;
	left: 0; bottom: 0;
	width: 294px;
	padding: 2px;
	/* min-width: 14vw; */ /* - вьюпорт, изменение ширины элемента относительно ширины видимой области браузера */
}
.topic-pane,
.nav-pane {top: 54px;}
.topic-pane-banner,
.nav-pane-banner {top: 170px;} /* [nav-pane, topic-pane] top: toolbar height: 100px + banner height: 120px */
/*
(!).splitter-right - боковой разделитель между боковой панелью навигации и текстовым топиком
*/
.splitter-right {
	position: absolute;
	right: 0; top: 0; bottom: 0px;
	width: 4px;
	padding: 3px; /* (i) для возможности предотвратить потерю захвата splitterRight */
	/* z-index: 2; */
	cursor: move; /* (i) Указывает на то, что что-то должно быть перемещено - резервный вариант, если курсор захвата не поддерживается, как в IE */
	cursor: col-resize;
}
/*
(!).splitter-bottom - нижний разделитель между боковой панелью навигации и текстовым топиком
*/
.splitter-bottom {
	position: absolute;
	left: 0; right: 0; bottom: -6px;
	height: 4px;
	padding: 3px; /* (i) для возможности предотвратить потерю захвата splitterBottom */
	/* z-index: 2; */
	cursor: move; /* (i) Указывает на то, что что-то должно быть перемещено - резервный вариант, если курсор захвата не поддерживается, как в IE */
	cursor: row-resize;
	cursor: grab;
	cursor: -webkit-grab;
	cursor: -moz-grab;
	display: none;
}
/* (i) для сэнсорных экранов предотвращаем запуск и перехват браузером встроенного события pointercancel для процесса перетаскивания drag’n’drop для изображений, а для событий мыши делаем через js */
.splitter-right,
.splitter-bottom {
	touch-action: none;
	-ms-touch-action: none;
}
.icon-grabing {
	cursor: grabbing;
	cursor: -webkit-grabbing;
	cursor: -moz-grabbing;
}

.nav-box {
	position: absolute;
	left: 4px; right: 4px;
	top: 4px; bottom: 4px;
	/**др.вариант, менее контрастный, см.его так же в navigation.css
	background-color: #5e5e5e;
	background: linear-gradient(#666666, #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);
	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = #ffffff, endColorstr = #222222);
	-ms-filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = #ffffff, endColorstr = #222222); */
}

.scroll-pane {
	position: absolute;
	left: 0; top: 0;
	right: 0; bottom: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 5px;
	/* scroll-behavior: smooth; */ /* плавная прокрутка */
}
/* *Панель Тема (топиков)
(!).topic-pane */
.topic-pane {
	position: absolute;
	left: 304px; right: 0px;
	bottom: 0px;
	margin-top: 4px;
}
/* (!).topic-controls - компоненты вкладок */
.topic-controls {
	position: relative;
	/* left: 8px; */
	left: 0; top: 0;
	width: auto;
	height: 32px;
	margin: 0 8px;
	display: flex;
	flex-flow: row nowrap;
	flex: 1 1 auto;
	justify-content: flex-start;
	background-color: transparent;
}
/* .topic-controls, */ /**не дает вывести idTabsList поверх себя */
.tab_slider-track,
.tab-slider,
.tabs-window {overflow: hidden hidden;}
/* (!).nav-handle - кнопка скрыть/показать панель навигации */
.nav-handle {
	position: relative;
	left: 0; top: 10px;
	width: 20px;
	height: 18px;
	display: flex;
	flex-flow: row nowrap;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
}
.tab_slider-track,
.tabs-controls,
.nav-handle {z-index: 1;}

.tabs-controls:hover,
.nav-handle:hover {
	/* top: 12px; */
	margin-top: 2px;
}
/* .tabs, */
.tabs:not(:last-child), /* .tab_slider-track li:not(:last-child), */
.tabs-controls,
.nav-handle {margin-right: 4px;}

.tabs,
.tabs-controls,
.nav-handle {
	color: #888;
	border: 1px solid #000;
}
.tabs-controls,
.tab_slider-track,
.tab-slider,
.tabs-window,
.tabs,
.tabs-controls,
.nav-handle {
	border-bottom: 0;
	border-radius: 5px 5px 0px 0px;
	-webkit-border-radius: 5px 5px 0px 0px;
	-moz-border-radius: 5px 5px 0px 0px;
}
/* (!) Подавление контуров выбора HTML
- Убираем границу вокруг ссылок */
.tabs a,
.tabs a:active, /* only firefox for mobil version - работает только как короткое мигание даже при длительном клике */
.nav-handle a {outline: none;}
.nav-handle a {
	position: relative;
	top: 0;
	width: auto;
	height: auto;
}

.navpane-handle-icon {
	position: relative;
	width: auto;
	height: auto;
	margin: auto;
	display: flex;
	flex-flow: row nowrap;
	flex: 0 0 16px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
/* (!).navpane-show-трансформация иконки на кнопке в панеле топика
TODO: *переделать в псевдо не получится, см.спецификацию:
'Псевдоэлементы, созданные с помощью ::before и ::after содержатся в блоке форматирования элемента, и поэтому не применяются к замещаемым элементам, таким как <img> или <br> */
.navpane-show {
	transform: rotate(0deg) scale(1, 1);
	-webkit-transform: rotate(0deg) scale(1, 1);
	-moz-transform: rotate(0deg) scale(1, 1);
	-o-transform: rotate(0deg) scale(1, 1);
	-ms-transform: rotate(0deg) scale(1, 1);
	/* will-change: transform; */ /* (i) - св-во will-change - экспериментальная технология, заранее передает браузеру инфу о возможном предстоящем изменении элемента */
}
.navpane-hide {
	transform: rotate(0deg) scale(-1, 1);
	-webkit-transform: rotate(0deg) scale(-1, 1);
	-moz-transform: rotate(0deg) scale(-1, 1);
	-o-transform: rotate(0deg) scale(-1, 1);
	-ms-transform: rotate(0deg) scale(-1, 1);
	/* will-change: transform; */ /* (i) - св-во will-change - экспериментальная технология, заранее передает браузеру инфу о возможном предстоящем изменении элемента */
}

.tabs-controls {
	position: relative;
	left: 0; top: 10px;
	width: auto;
	height: 19px;
	display: flex;
	flex-flow: row nowrap;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	font-family: Tahoma, Verdana, Arial, sans-serif, Helvetica;
	font-size: 11px;
	font-weight: normal;
}

.tabs-btns,
.tabs-menu {
	position: relative;
	left: 0; top: 0;
	width: auto;
	height: auto;
	margin: auto;
	padding: 1px;
	display: flex;
	flex-flow: row nowrap;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}
.tabs-btns,
.tabs-menu {border: 1px solid transparent;}
.tabs-menu img {cursor: pointer;}
.tabs-btns:hover {
	background-color: #fff;
	border-color: #999;
}
/* (!).tabs-menu-box */
.tabs-menu-box {
	position: absolute;
	left: -50px; top: 26px;
	width: max-content;
	max-width: 30vw;
	min-width: fit-content;
	height: auto;
	padding: 4px;
	font-family: Verdana, Arial, sans-serif, Helvetica;
	font-size: 11px;
}
.tabs-menu-box {
	background-color: rgba(63,63,63,.9); /* #3f3f3f; */
	box-shadow: 2px 2px 10px 2px #999;
	-webkit-box-shadow: 2px 2px 10px 2px #999;
	-moz-box-shadow: 2px 2px 10px 2px #999;
	filter: progid: DXImageTransform.Microsoft.Shadow(color = #aaaaaa, direction = 120, trength = 3);
	border: 1px solid #999;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
.tabs-menu-box:before {
	content: "";
	position: absolute;
	left: 50px; top: -10px;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 10px solid #3f3f3f;
}
.tabs-menu-box:hover {border-color: #fff;}
/**плавное появление/исчезновение */
.tabs-menu-box {
	opacity: 0;
	transform-origin: left top;
	-webkit-transform-origin: left top;
	-moz-transform-origin: left top;
	-o-transform-origin: left top;
	-ms-transform-origin: left top;
	transform: translate(58px, -10px) scale(0);
	-webkit-transform: translate(58px, -10px) scale(0);
	-moz-transform: translate(58px, -10px) scale(0);
	-o-transform: translate(58px, -10px) scale(0);
	-ms-transform: translate(58px, -10px) scale(0);
	transition: all ease 1s;
	-webkit-transition: all ease 1s;
	-moz-transition: all ease 1s;
	-o-transition: all ease 1s;
	/* will-change: transform, transition; */
}
.tabs-menu-popup {
	transform: translate(0, 0) scale(1);
	-webkit-transform: translate(0, 0) scale(1);
	-moz-transform: translate(0, 0) scale(1);
	-o-transform: translate(0, 0) scale(1);
	-ms-transform: translate(0, 0) scale(1);
	opacity: 1;
}
/*
(!).tabs-list - список компонентов меню раскрывающихся вкладок
*/
.tabs-list {
	/* padding: 0 2px 0 0; */
	padding-right: 2px;
	list-style-type: decimal; /* нумерация */
	list-style-position: inside;
}
/**для scrollbar */
.tabs-list {
	max-height: 300px;
	overflow: hidden auto;
}
/*
(!).tabs-list li - выпадающие вкладки списка элементов меню
*/
.tabs-list li {
	padding: 0 1px;
	text-indent:0;
	list-style-image: none;
	/* white-space: nowrap; */
	border: 1px solid transparent;
}
.tabs-list li:hover {
	color: #fff;
	border-color: #fff;
}
.tabs-list li a:visited,
.tabs-list li a {color: silver;}
.tabs-list li a {text-decoration: none;}
.tabs-list li a:hover {
	text-decoration: underline;
	color: #fff;
}
.tabs-list li a.highlight,
.highlight {
	color: #fff;
	font-weight: bold;
}
/*
(!).tabs-window - вкладки панели тем - топиков
*/
.tab_slider-track,
.tab-slider,
.tabs-window {
	position: relative;
	left: 0; top: 0;
	height: auto;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
}
/* .tabs-window {width: 92px;} */
.tab-slider,
.tabs-window {
	width: 92px;
	flex: 1 1 100%;
	font-family: 'Lucida Grande', 'Trebuchet MS', Arial, Verdana, sans-serif;
	text-indent: 0;
}
/**TODO: сделать тень по бокам */
/* .tab-slider {
	box-shadow: 35px 0 30px -20px #000 inset,
				-35px 0 30px -20px #000 inset;
} */
/*
(!).tab_slider-track - вкладки
*/
.tab_slider-track {
	width: auto;
	min-width: 50px;
	list-style:none;
}
/**Одиночная вкладка */
.tabs span,
.tabs a,
.tabs {
	position: relative;
	left: 0; top: 0;
	width: auto;
}
.tabs {
	height: 28px; /* с учетом.tabs span {line-height: 28px;} */
	list-style-image: none;
}
.tab-current,
.tabs:hover {
	/* margin-top: 10px; */
	height: auto;
	margin-top: auto;
}

.nav-handle,
.tabs {
	background-color: #6e6e6e;
	background: linear-gradient(#f1f1f1 3%, #888888 20%);
	background: -webkit-linear-gradient(top, #f1f1f1 3%, #888888 20%);
	background: -moz-linear-gradient(top, #f1f1f1 3%, #888888 20%);
	background: -o-linear-gradient(top,rgb(255,255,255) 3%,rgb(136,136,136) 20%);
	background: -ms-linear-gradient(top, #f1f1f1 3%, #888888 20%);
}
/**Текущая вкладка */
.nav-handle:hover,
.tabs-controls,
.tab-current {
	background-color: #3f3f3f;
	background: linear-gradient(#f1f1f1 3%, #3f3f3f 20%);
	background: -webkit-linear-gradient(top, #f1f1f1 3%, #3f3f3f 20%);
	background: -moz-linear-gradient(top, #f1f1f1 3%, #3f3f3f 20%);
	background: -o-linear-gradient(top,rgb(255,255,255) 3%,rgb(63,63,63) 20%);
	background: -ms-linear-gradient(top, #f1f1f1 3%, #3f3f3f 20%);
}

.nav-handle,
.tabs-controls,
.tab-current,
.tabs {
	box-shadow: 2px -1px 4px -1px #3f3f3f;
	-webkit-box-shadow: 2px -1px 4px -1px #3f3f3f;
	-moz-box-shadow: 2px -1px 4px -1px #3f3f3f;
}
/**плавное появление при наведении курсора */
/* (?)(!).tabs span и.tabs a плавают при наведении */
.nav-handle,
.tabs-controls,
.tab-current,
.tabs span:hover,
.tabs span,
.tabs a:hover,
.tabs a,
.tabs:hover,
.tabs {
	transition: .3s ease;
	-webkit-transition: .3s ease; /* Chrome, Safari, iOS */
	-moz-transition: .3s ease; /* Firefox */
	-o-transition: .3s ease; /* Opera */
}
.tabs a {
	height: auto;
	padding: 0px 10px;
	display: block;
	font-size: 13px;
	text-align: center;
	text-decoration: none;
}
/**цвет текста */
.tabs span,
.tabs a {color: #dedede;}
.tabs:hover span,
.tabs:hover a {
	color: #fff;
}
.tabs span {
	height: auto;
	display: block;
	line-height: 28px; /* с учетом.tabs {height: 28px;} */
}
/* (i) перенос текста, пробелы, дефисы, тире */
.tabs span {
	white-space: nowrap; /* текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически. Разбивает строки, чтобы заполнить строчные боксы */
	overflow-wrap: normal;
	word-wrap: normal;
	word-break: normal; /* normal, чтобы игнорировался разного вида перенос текста */
	word-spacing: normal; /* нормальный интервал между словами, определенный текущим шрифтом и/или браузером */
	hyphens: none; /* чтобы браузер не обращал внимания на мягкий дефис, вставляем hyphens: none для Chrome, с Firefox все сложнее */
	-moz-hyphens: none; /* - все равно не работает */
	-ms-hyphens: none;
	text-wrap: nowrap; /* (!) new - экспериментальный */
	/* truncate - усечение длинного текста */
	max-width: 120px;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	-ms-text-overflow: ellipsis;
	overflow: hidden hidden;
	/* усечение длинного текста */
}
.tab-current img,
.tabs:hover img {
	visibility: visible;
}
/* img.close-tab, */
.tab-current img { padding: 0 0 5px 5px; } /**for event click для версий в моб.вар. */
/**Текущая вкладка */
.tabs:hover span,
.tab-current:hover span,
.tab-current span,
.tab-current {line-height: 21px;}
.tab-current span,
.tab-current a {
	color: #737373;
	cursor: default;
}
/*
(!).close-tab - мини-кнопка закрытия текущей вкладки
*/
.close-tab {
	position: absolute;
	right: 0; top: 0;
	width: auto;
	height: auto;
	display: block;
	border: 1px solid transparent;
	visibility: hidden;
}
/*
(!).topic-content - содержимое контейнеров
*/
.topic-content {
	position: absolute;
	left: 0; right: 0;
	top: 25px; bottom: 0;
	background-color: #fff;
	border-color: #fff;
}
/* (i).topic-box - имя класса так же присутствует в стилях topic.css, но правила разные */
.new-tab-box, /* (?) предположительно класс создается кодом js */
.search-box,
.keywords-box,
.topic-box {
	position: absolute;
	left: 0; right: 0;
	top: 0; bottom: 0;
}
/* (?) не понятно где и для чего */
.interface {
	font-family: Verdana, Arial, sans-serif, Helvetica;
	font-size: 8pt;
	font-weight: bold;
}
/* (!) МЕДИА ЗАПРОСЫ */
/*
'Portrait tablets and medium desktops
- Портретные планшеты и средние настольные компьютеры
*/
/**диапазон от 992px до 1199px */
/* @media (min-width: 992px) and (max-width: 1199px) {} */
/**диапазон < 960px */
/* @media screen and (max-width: 960px) {} */
/*
'Portrait tablets and small desktops
- Портретные планшеты и небольшие настольные компьютеры
*/
/**диапазон от 768px до 991px */
/* @media (min-width: 768px) and (max-width: 991px) {} */
/*
'Landscape phones and portrait tablets
- Альбомные телефоны и планшеты с портретом
*/
/**диапазон < 757px */
/* (?) в firefox в.toolbar span's не знаю как заставить переносить текст со слешем */
/* @media screen and (max-width: 757px) {} */
/**диапазон < 740px */
/* @media screen and (max-width: 740px) {} */ /* HACK: 'граница, когда после вкладки Поиск почти не остается места для др.вкладок чтобы не уходить за пределы видимости экрана */
/**диапазон < 715px firefox/chrome < 668 */
@media screen and (max-width: 715px) {
	.toolbar_box-center span,
	.txt-wrap {width: min-content;}
}
/**диапазон < 647px */
@media screen and (max-width: 647px) {
	.toolbar {height: 98px;}
	.toolbar-banner {height: 99px;}

	.toolbar-search {
		flex: 1 1 100%;
		flex-wrap: wrap;
	}
	.toolbar_box-search {align-items: flex-end;}
	.toolbar_box-search span {
		position: absolute;
		top: 12px;
	}

	.toolbar_box-center span,
	.txt-wrap {width: auto;}

	.topic-pane,
	.nav-pane {top: 104px;}
	.topic-pane-banner,
	.nav-pane-banner {top: 220px;} /* [nav-pane, topic-pane] top: banner height: 120px + toolbar (height + margin-top): (100px + 4px) */
}
/**диапазон < 565px */
@media screen and (max-width: 565px) {
	.toolbar_box-search span {top: 8px;}
	.toolbar_box-center span,
	.txt-wrap {width: min-content;}
}
/**диапазон < 500px по высоте */
/* @media screen and (max-height: 500px) { */ /* (?) */
	/**lightbox-клон */
	/* .btn-slider,
	.lightbox-btn-close,
	.btn-box {font-size: 1.5em;}
	.zoom-out, .zoom-in {
		width: 25px;
		height: 25px;
	}
	.slider-item, .btn-slider {height: 25px;}
} */
/**диапазон < 500px по ширине */
@media screen and (max-width: 500px) {
	.permalink {
		max-width: 50vw;
		transition: max-width .9s ease;
	}

	.container {
		display: flex;
		flex-flow: column nowrap;
	}

	.toolbar-banner,
	.toolbar,
	.banner {z-index: 1;}
	/* 'убираем тень */
	.nav-pane,
	.topic-content,
	.toolbar-banner,
	.toolbar {
		box-shadow: none;
		-webkit-box-shadow: none;
		-moz-box-shadow: 0 0 0;
	}/* 'убираем тень */
	.toolbar-banner,
	.toolbar {flex: 0 0 auto;}

	.topic-pane,
	.nav-pane {
		position: relative;
		top: 0;
		width: auto;
		height: auto;
		display: flex; /* создает переполнение и вылезает за пределы видимости */
		flex: 1 1 auto;
		flex-wrap: nowrap;
		z-index: 0;
	}
	.topic-pane {left: 0;}

	.splitter-right {display: none;}
	.splitter-bottom {display: block;}
	/*(!).navpane-show/hide - трансформация иконки на кнопке в панеле топика */
	.navpane-show {
		transform: rotate(90deg) scale(1, 1);
		-webkit-transform: rotate(90deg) scale(1, 1);
		-moz-transform: rotate(90deg) scale(1, 1);
		-o-transform: rotate(90deg) scale(1, 1);
		-ms-transform: rotate(90deg) scale(1, 1);
		/*
		св-во will-change - экспериментальная технология, заранее передает браузеру инфу о возможном предстоящем изменении элемента
		*/
		/* will-change: transform; */
	}
	.navpane-hide {
		transform: rotate(90deg) scale(-1, 1);
		-webkit-transform: rotate(90deg) scale(-1, 1);
		-moz-transform: rotate(90deg) scale(-1, 1);
		-o-transform: rotate(90deg) scale(-1, 1);
		-ms-transform: rotate(90deg) scale(-1, 1);
		/*
		св-во will-change - экспериментальная технология, заранее передает браузеру инфу о возможном предстоящем изменении элемента
		*/
		/* will-change: transform; */
	}
}
/**диапазон < 470 */
@media screen and (max-width: 470px) {
	.toolbar {height: 148px;}
	.toolbar-banner {height: 149px;}

	.toolbar-right {order: 3;}
	.toolbar-center {order: 4;}
	.toolbar-left,
	.toolbar-center,
	.toolbar-right {justify-content: space-around;}

	.toolbar_box-search span {top: 10px;}
	.toolbar_box-center span,
	.txt-wrap {width: auto;}
}
/*
'Landscape phones and smaller
- Ландшафтные телефоны и меньшие
*/
/**диапазон < 398 */
@media screen and (max-width: 398px) {
	.toolbar {height: 198px;}
	.toolbar-banner {height: 199px;}

	.toolbar_box-right,
	.toolbar_box-center,
	.toolbar_box-left,
	.toolbar-left,
	.toolbar-right,
	.toolbar-center {flex-basis: 100%;}
	/* .toolbar_box-search span {top: 14px;} */ /* x */
	/**анимация подсказки для кн.e-mail */
	.feedback-tooltip {
		transform: translate(-40px, -40px) scale(0);
		-webkit-transform: translate(-40px, -40px) scale(0);
		-moz-transform: translate(-40px, -40px) scale(0);
		-o-transform: translate(-40px, -40px) scale(0);
		-ms-transform: translate(-40px, -40px) scale(0);
	}
	.feedback-tooltip:before {
		border-left: none;
		border-right: 30px solid transparent;
	}
	.btn_icon-tooltip-popup, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на иконку email */
	.btn-icon:hover+.feedback-tooltip {
		transform: translate(0px, 60px) scale(1);
		-webkit-transform: translate(0px, 60px) scale(1);
		-moz-transform: translate(0px, 60px) scale(1);
		-o-transform: translate(0px, 60px) scale(1);
		-ms-transform: translate(0px, 60px) scale(1);
	}
	/* x */
	/* @keyframes tooltipToAppear {
		0% {
			opacity: 0;
			transform: translate(-40px, -40px) scale(.1);
			-webkit-transform: translate(-40px, -40px) scale(.1);
			-moz-transform: translate(-40px, -40px) scale(.1);
			-o-transform: translate(-40px, -40px) scale(.1);
			-ms-transform: translate(-40px, -40px) scale(.1);
		}
		100% {
			transform: translate(0px, 60px);
			-webkit-transform: translate(0px, 60px);
			-moz-transform: translate(0px, 60px);
			-o-transform: translate(0px, 60px);
			-ms-transform: translate(0px, 60px);
			opacity: 1;
		}
	} */ /* x */
}
/**диапазон < 346px */
/* @media screen and (max-width: 346px) {.toolbar_box-search span {top: 10px;}} */ /* x */
/**диапазон < 226px */
@media screen and (max-width: 226px) {
	.toolbar {height: 98px;}
	.toolbar-banner {height: 99px;}

	.toolbar-left,
	.toolbar-right,
	.toolbar-center {height: 18px;}
	.toolbar-center {padding: 0 0 6px 0;}

	.toolbar_box-search {align-items: center;}

	.toolbar-box span {display: none;}
}
/**диапазон < 220px */
@media screen and (max-width: 220px) {
	.toolbar-search {min-width: max-content;}
	/**анимация подсказки для кнопки e-mail */
	.feedback-tooltip {
		transform: translate(-34px, -40px) scale(0);
		-webkit-transform: translate(-34px, -40px) scale(0);
		-moz-transform: translate(-34px, -40px) scale(0);
		-o-transform: translate(-34px, -40px) scale(0);
		-ms-transform: translate(-34px, -40px) scale(0);
	}
	.btn_icon-tooltip-popup, /* (i) для моб.вар.firefox имитация псевдо:hover через js при событии click на иконку email */
	.btn-icon:hover+.feedback-tooltip {
		transform: translate(-21px, 60px) scale(1);
		-webkit-transform: translate(-21px, 60px) scale(1);
		-moz-transform: translate(-21px, 60px) scale(1);
		-o-transform: translate(-21px, 60px) scale(1);
		-ms-transform: translate(-21px, 60px) scale(1);
	}
	/* x */
	/* @keyframes tooltipToAppear {
		0% {
			opacity: 0;
			transform: translate(-34px, -40px) scale(.1);
			-webkit-transform: translate(-34px, -40px) scale(.1);
			-moz-transform: translate(-34px, -40px) scale(.1);
			-o-transform: translate(-34px, -40px) scale(.1);
			-ms-transform: translate(-34px, -40px) scale(.1);
		}
		100% {
			transform: translate(-21px, 60px);
			-webkit-transform: translate(-21px, 60px);
			-moz-transform: translate(-21px, 60px);
			-o-transform: translate(-21px, 60px);
			-ms-transform: translate(-21px, 60px);
			opacity: 1;
		}
	} */ /* x */
}