:root {
	--themeColorLightest:  hsl(191,11%, 83%);
	--themeColorLighter:  hsl(191,11%, 63%);
	--themeColorLight:  hsl(191,11%, 43%);
	--themeColor:  hsl(191,11%,15%); /*hsl(185, 63%, 56%);*/
	--themeColorShift: hsl(191, 70%, 37%);
	--themeColorDarker:  hsl(191, 33%, 10%);
	--themeColorDarkest:  hsl(191, 63%, 6%);
	--accentColor:  hsl(47,100%,60%);/*hsl(47,100%,60%)*/
}

* {
	position: relative;
	box-sizing: border-box;
}

.scrollBottom {
	scroll-behavior: smooth;
}

.material-tooltip:after {
	content: '';
	display: block;
	border-top: 10px solid #323232;
	border-bottom: 10px solid transparent;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	position: absolute;
	top: 99%;
	left: 50%;
	z-index: 10;
	transform: translateX(-50%);
}
.material-tooltip {
	overflow: visible;
	border-radius: 4px;
}
body {
	display: flex;
	min-height: 100vh;
	min-height: 100dvh;
	flex-direction: column;
	cursor: default;
}

main {
	flex: 1 0 auto;
}

.onPageMenu{
	/*background: linear-gradient(27deg,var(--themeColor),var(--themeColorShift));*/
	background: url('/css/images/squeres3.png') repeat-y right, linear-gradient(27deg,var(--themeColor),var(--themeColorShift));


}
/*wide*/
/*short*/
/*collapsed*/
.onPageMenu.wide ul{
	display: flex;
}
.onPageMenu.short ul{
	display: block;
}

.onPageMenu ul li {
	display: block;
	border-right: 1px solid  var(--themeColorLighter);
}
.onPageMenu ul li a:hover {
	background:  var(--themeColorDarker);
}
.onPageMenu ul li.active a {
	background:  var(--accentColor);
	color: var(--themeColorDarker);
	font-weight: bold;
}

.svgLetter {
	fill:  var(--themeColorDarker);
	stroke: var(--themeColorDarker);
}
.svgLetter:hover {
	fill:  red;
	stroke: var(--themeColorDarker);
}

.onPageMenu.wide  a {
	white-space: nowrap;
	color: white;
	display: inline-block;
	padding: 10px 20px;
	transition: 200ms background-color ease-in;
}

.onPageMenu.short.collapsed li:not(.menuButton){
	display: none;
}

.onPageMenu.short a {
	white-space: nowrap;
	color: white;
	display: block;
	padding: 10px 20px;
	transition: 200ms background-color ease-in;
}


.onPageMenu.wide  .menuButton {
	display: none;
}

.C {
	text-align: center;
}
.R {
	text-align: right;
}
a {
	cursor: pointer;
}

.mytoast {
	border-radius: 5px;
	color: black;
}
.mytoast.success {
	background-color: hsla(120,50%,90%,1);
}
.mytoast.warning {
	background-color: hsla(60,80%,90%,1);
}

.mytoast.error {
	background-color: hsla(0,50%,90%,1);
}

tr {
	transition: 200ms ease-out background-color;
}

th,td {
	padding: 5px 15px;
}
tr:hover {
	/*background-color: hsla(0,0%,0%,0.06);*/
}

table>tbody>tr:last-child {
	border-bottom: none;
}


.CT {
	display: grid;
	grid-gap: 0px;
}
.CTrow>div {
	padding: 3px 6px;
	transition: background-color 200ms ease-in;
}


.CTrowHeader {
	display: contents;
	font-weight: bold;
}
.CTrowHeader>div {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 3px 8px;
	border-bottom: 1px solid silver;
	border-right: 1px solid silver;
}
.CTrowHeader>div:last-child{
	border-right: none;
}
.CTrow {
	display: contents;
}

.CTrow:hover > div{
	background-color: #EEE;
}

.pushBtn {
	/*border: 1px solid silver;*/
	width: 20px;
	height: 20px;
	border-radius: 50%;
	cursor: pointer;
	background-color: #F1F1F1;
	-webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
	box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);

	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none;
	margin: 0 auto;
}

.pushBtn:active {
	background-color: #26a69a;
}

.pagination li.active {/*2751*/
	background-color: var(--accentColor);
}
.pagination li.active a {/*2747*/
	color: var(--themeColorDarker);
}

.btn.active {
	background: var(--accentColor);
	color: var(--themeColorDarker);
	font-weight: bold;
}
.btn-small.active {
	background: var(--accentColor);
	color: var(--themeColorDarker);
	font-weight: bold;
}


a.explicit{
	/*text-decoration: underline;*/
	border-bottom: 1px dashed var(--themeColorDarkest);
	text-decoration: none;
}

.container {
	max-width: unset;
}

.not-selectable {
	user-select: none;
}



.pulsing-red-text {
	color: red; /* Начальный цвет текста */
	animation: pulse-red-text 1.5s infinite; /* Применение анимации */
}

@keyframes pulse-red-text {
	0% {
		transform: scale(1); /* Исходное состояние */
		opacity: 1;
	}
	50% {
		transform: scale(1.2); /* Увеличение текста */
		opacity: 0.5; /* Полупрозрачность */
	}
	100% {
		transform: scale(1); /* Возвращение к исходному состоянию */
		opacity: 1;
	}
}


table.excel .hidden-row {
	opacity: 0.1;
	transition: 0.3s ease-in-out opacity;
}
/* Основной стиль для таблицы Excel */
table.excel:hover .hidden-row {
	opacity: 1;
}
table.excel {
	width: auto;
	max-width: 100%;
	min-width: 0;
	border-collapse: collapse; /* Убираем двойные линии между ячейками */
	/*table-layout: fixed;  Фиксированная ширина столбцов */
	font-family: Arial, sans-serif;
	font-size: 14px;
	background-color: #fff;
	/*white-space: nowrap;  Запрет переноса текста */
	/*overflow: hidden;  Скрытие лишнего текста */
	/*text-overflow: ellipsis;  Многоточие для обрезанного текста */
}

/* Заголовки таблицы */
table.excel th {
	background-color: #f4f4f4; /* Светло-серый фон */
	color: #333; /* Цвет текста */
	font-weight: bold;
	border: 1px solid #ccc; /* Границы */
	padding: 4px 8px;
	text-align: center; /* Текст по центру */
}

/* Ячейки таблицы */
table.excel td {
	border: 1px solid #ccc; /* Границы */
	padding: 0px;
	vertical-align: middle; /* Вертикальное выравнивание */
	/*white-space: nowrap;  Запрет переноса текста */
	/*overflow: hidden;  Скрытие лишнего текста */
	/*text-overflow: ellipsis;  Многоточие для обрезанного текста */
}

/* Чередующиеся строки */
/*	table.excel tr:nth-child(even) td {
		background-color: #f9f9f9;  Светлый фон для четных строк 
	}*/

/* Чередующиеся строки при наведении */
table.excel tr:hover td {
	background-color: #e6f7ff; /* Светло-голубой фон */
}

/* Стили для ячеек ввода */
table.excel td input[type="text"],
table.excel td input[type="number"] {
	width: 100%; /* Полная ширина ячейки */
	height: 100%;
	border: none; /* Убираем границы */
	background: transparent; /* Прозрачный фон */
	padding: 4px 8px;
	box-sizing: border-box; /* Учитываем внутренние отступы */
	outline: none; /* Убираем обводку */
	font-size: inherit; /* Наследуем размер шрифта */
}

/* При фокусе на поле ввода */
table.excel td:focus-within
{
	outline: 2px solid #217346; /* Голубая рамка */
	background-color: #f0f8ff; /* Светло-голубой фон */
	z-index: 2;
}


table.excel td:focus-within::after {
	content: "";
	position: absolute;
	width: 7px; /* Размер квадрата */
	height: 7px;
	border: 1px solid white;
	background-color: #217346; /* Цвет квадрата */
	bottom: -5px; /* Сдвиг вниз */
	right: -5px; /* Сдвиг вправо */
	z-index: 5; /* Поверх других элементов */
}

/* Для ячеек без полей ввода */
table.excel td:not(:has(input, select, button)) {
	padding: 0px 8px; /* Отступы для ячеек без поля ввода */
}


.TXLED {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 15px;
	border-radius: 50%;
	width: 4px;
	height: 4px;
}

.RXLED{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 22px;
	border-radius: 50%;
	width: 4px;
	height: 4px;
}

.TXLED,
.RXLED {
	background-color: gray;
	transition: opacity 50ms;
	opacity: 1;
}

.TXLED.idle,
.RXLED.idle {
	opacity: 0.3;
}