/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

.site-header-section {    
height: 25px;    
min-height: 0;    
align-items: center

}



html, body {
    height: 100% !important;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}


/*-----------------------------------------------------------*/


/* Общий контейнер */
div.form-and-table-container {
    width: 100%;
    height:100;/* Это гарантирует, что контейнер займет всю высоту */
    display: flex;
    margin: 10px 20px 10px 20px;
    flex-direction: column;
    overflow: hidden; /* Убираем лишние полосы прокрутки */
    box-sizing: border-box; /* Учитываем отступы и границы */
}

div.form-and-table-container-modal {
    width: 100%;
    height:100;/* Это гарантирует, что контейнер займет всю высоту */
    display: flex;
    margin: 5px 5px 5px 5px;
    flex-direction: column;
    overflow: hidden; /* Убираем лишние полосы прокрутки */
    box-sizing: border-box; /* Учитываем отступы и границы */
}

/* Разрешаем растягивать контейнеры по высоте */
.wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.site-content {
  min-height: 100vh; /* Минимальная высота равна высоте окна браузера */

}

.ast-container{
  min-height: 100vh; /* Минимальная высота равна высоте окна браузера */

}




.button-group {
	 display: flex;
    justify-content: flex-start; /* Выровнять элементы по левому краю */
    gap: 1px;                    /* Отступы между кнопками */
    flex-wrap: wrap;             /* Перенос на новую строку при необходимости */
}

.month-button, .year-button {
    color: white;
    border: none;
    padding: 10px;
    font-size: 10px;
    cursor: pointer;
    border-radius: 3px;
}

.month-button.active {
    background-color: green;
}

.year-button.active {
    background-color: orange;
}


div.select_per {
  display: flex;
  flex-direction: column; /* Направление flex-контейнера по колонке */
  justify-content: flex-end; /* Выровнять элементы по низу */
}

div.page-header{
	font-size:20px;
	letter-spacing: -0.5px; 
	color: #008080;
}

.selected-month {
    font-size: 14px;
    margin-bottom: 0px;
}

div.page-description{
	font-size:12px;
	margin-bottom: 10px;
	margin-top:-5px;
}

/* Стили для элемента label */
.custom-label {
    font-size: 12px; /* Размер шрифта для метки */
}

/*для прямоугольников на странице*/
.container_box {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 0 10px 0;
}


.box {
  display: flex;
  align-items: center;
  flex: 1;
  height: 60px;
  color: black;
  font-size: 12px;
  border-radius: 3px;
  padding: 10px;
  gap: 15px; /* Расстояние между изображением и текстом */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.box span {
  width: 40px;
  object-fit: cover; /* Чтобы изображение сохраняло пропорции */
  border-radius: 2px;
}

.text-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.2; /* Уменьшает расстояние между строками */
   width: 100%;
}

.title {  
  font-size: 12px;

}

.subtitle {
  font-size: 14px;
  opacity: 0.8;
  font-weight: bold;
  margin-top: 0px;
  width: 100% !important;
}

.box1 { background-color: #c6a4d8; }
.box2 { background-color: #8fc7d4; }
.box3 { background-color: #eeb96b; }
.box4 { background-color: #83caad; }
.box5 { background-color: #ffbe45; }

.filter_field b {
    color: red !important;       /* Красный цвет текста */
    font-weight: bold; /* Жирный текст (обычно тег <b> уже делает текст жирным) */
}


.filter_field {
  line-height: 1.2; /* Уменьшает расстояние между строками */
  font-size: 12px
}
	
/*--------------вывод ошибок------------------*/
.error-message {
    background-color: #f8d7da; /* Светло-красный фон для ошибки */
    color: #721c24; /* Темно-красный цвет текста */
    border: 1px solid #f5c6cb; /* Розовый бордер */
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px; /* Скругление углов */
    font-size: 12px; /* Размер шрифта */
    font-family: Arial, sans-serif; /* Шрифт текста */
    display: flex;
    align-items: top;
}

.error-message::before {
    content: "Ошибка: "; /* Добавление иконки ошибки */
    font-weight: bold;
    margin-right: 8px;
}
/*--------------------------------------------*/

/*---для карты*/


#dataTableMap th, #dataTableMap td {
    border: 1px solid #ddd;
	height: 20px;
	padding: 0px;
	vertical-align: center !important;
	line-height: 1.0;
    text-align: left;
	font-size: 10px;
}

#dataTableMap td {
    background-color: #ffffff;
}

 #dataTableMap th{
			font-weight:normal !important;
			line-height: 1.0; /* межстрочный интервал */
			font-size:11px; 
			color:#ffffff;
			text-align: center;
			background-color:#77a2d4;
			 line-height: 0.8px;
		}

#dataTableMap td div {
    border: 1px solid #ddd;
	
}
/*--------------------------------------*/
/*для главной*/
.containerT {
    margin: 5px 0px 5px 0px;
    display: flex;
}

.containerT > div {
    flex: 1 1 0; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
    margin: 0 5px; /* Добавляет отступы между элементами */
}

.metric {
    background: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}



.header_metric {
    padding: 10px 10px 3px 10px;
    color: white !important;
    font-size:10px; 
    line-height: 0.8px;
}


.body_metric {
    display: flex; /* Включаем Flexbox */
    align-items: top; /* Вертикальное выравнивание по центру */
    gap: 20px; /* Отступ между контейнерами */
}


.container-graph {
  display: flex;
  margin: 5px 5px 5px 5px;
  gap: 10px; /* Отступ между блоками */
  flex-wrap: wrap; /* Позволяет блокам переходить на новую строку при сужении окна */
  justify-content: space-between; /* Распределение пространства между блоками */
  align-items: stretch; /* Растягивает блоки по высоте */
}

.metric-graph {
  flex: 1 1 45%; /* Блоки занимают по 45% ширины, но могут сжиматься */
  min-width: 300px; /* Минимальная ширина блока, чтобы не сжимались слишком сильно */
  background: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 0px; /* Внутренние отступы */
  transition: transform 0.3s ease; /* Плавный эффект при наведении */
}


/* Адаптация для очень узких экранов */
@media (max-width: 768px) {
  .metric-graph {
    flex: 1 1 100%; /* На маленьких экранах блоки занимают 100% ширины */
    min-width: unset; /* Убираем минимальную ширину для мобильных устройств */
  }
}

.chart-container {
      width: 100px;
  height: 100px;
}

/*стиль ссылок быстрый выбор периода*/
.quick-link {
    font-family: Arial, sans-serif; /* Изменение шрифта */
    font-size: 11px;               /* Размер шрифта */
    color: #0274BE;                /* Цвет текста */
    margin-right: 7px;            /* Отступ между ссылками */

}

.quick-link:hover {
    color: #5a6268;                /* Цвет текста при наведении */
    text-decoration: underline;    /* Добавляем подчеркивание при наведении */
}
/*кнопка выбор периода*/
.date-picker-btn {
    background-color: white; /* Начальный цвет кнопки */
    border: 1px solid gray; /* Тонкая серая рамка */
    cursor: pointer; /* Указатель при наведении */
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.date-picker-btn:hover {
    background-color: #0274BE; /* Цвет кнопки при наведении */
    border: 1px solid gray; /* Тонкая серая рамка */
}

/*это диаграмма процент*/
/* Общая переменная для процента */
@property --p{
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.pie {
  --p: 20;
  --b: 15px;
  --c: darkred;
  --w: 100px;
  --h: 100px;
  
  width: var(--w);
  height: var(--h);
  aspect-ratio: 1;
  position: relative;
  display: inline-grid;
  margin: 5px;
  place-content: center;
  font-size: 20px;
  font-weight: bold;
  font-family: sans-serif;
}

.pie:before,
.pie:after {
  content: "";
  position: absolute;
  border-radius: 70%;
}

.pie:before {
  inset: 0;
  background:
    /* Прозрачный фон для незаполненной области */
    radial-gradient(farthest-side, rgba(0, 0, 0, 0.1) 98%, #0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p)*1%), rgba(0, 0, 0, 0.1) 0);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
          mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
}

.pie:after {
  inset: calc(50% - var(--b)/2);
  background: var(--c);
  transform: rotate(calc(var(--p) * 3.6deg)) translateY(calc(50% - var(--w)/2));
}

.animate {
  animation: p 1s .5s both;
}

.no-round:before {
  background-size: 0 0, auto;
}

.no-round:after {
  content: none;
}

@keyframes p {
  from { --p: 0; }
}


td.table-proc {
    font-size: 11px !important;
    font-weight: bold !important;  /* Делает текст жирным */
    text-align: center !important; /* Центрирует текст */
    vertical-align: middle !important; /* Центрирует текст по вертикали */
}



/*-----------------для полей возле круга процента---------------*/
.contdiv {
   display: flex; /* Включаем Flexbox для контентного контейнера */
    flex-direction: column; /* Элементы располагаются вертикально */
    align-items: flex-end; /* Выравнивание элементов по правому краю */
    flex-grow: 1; /* Позволяет занять оставшееся пространство */
    margin-right: 8px;
    line-height: 1px;
}

.line {
    height: 2px; /* Высота линии */
    background-color: #d5d7da; /* Цвет линии */
    margin: 5px 0px 5px 0px;
    width: 100%; /* Ширина линии на 100% */
}

.plan {
    font-size: 10px; /* Размер шрифта */
    color: #d5d7da; /* Цвет текста */ 
    
       
}
.sum {
    font-size: 14px; /* Размер шрифта */
    color: #333; /* Цвет текста */
    font-weight: 500;
     margin-bottom: 2px !important;
}

.content-area {
    background: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin: 5px !important;
    padding: 10px !important;
}


.chart-kol {
    background: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin: 15px !important;
    padding: 2px !important;
}

/*----------------------------------------------------------*/
/*-------------------модальное окно----------------------------*/

/* Первое модальное окно */
.modal-content {
	position: fixed;
    top: 55%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 560px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1030;
    display: none;
    resize: both; /* Делает окно изменяемым по размеру */        
    overflow: auto;
}

.modal-body {
			width: 100%; 
			height: calc(100% - 50px); 
			border: none;
        }

/* Второе модальное окно */
.modal-content2 {
 position: fixed;
            top: 55%;
            left: 55%;
            transform: translate(-50%, -50%);
            width: 70%;
            height: 650px !important;
            background-color: #fff;

            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            z-index: 1050;
            display: none;
            resize: both; /* Делает окно изменяемым по размеру */        
		  
		  overflow: auto;
}

/* Затемнение фона */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 999;
}

.modal-header {
            height: 30px;
			padding: 5px;
            color: white;
            cursor: move; /* Показывает, что заголовок можно перетаскивать */
        }
		
.modal-header2 {
           height: 30px;
			padding: 5px;
            color: white;
            cursor: move; /* Показывает, что заголовок можно перетаскивать */
        }


/* Кнопка закрытия */
.modal-close-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 24px;
  cursor: pointer;
  color: grey;
  
}

.modal-close-btn:hover {
  color: #ff0000;
}
/*-------------------------------------------------------------------*/

/* ---------------------это все для бокового меню-----------------------*/
/* Боковое меню */
.sidebar {
    width: 160px;
    position: absolute; /* Или relative, если нужно */
    top: 0;
    left: 0;
    height: 100%; /* Растягивается на высоту родителя */
    background: #343a40;    
    transition: width 0.3s ease-in-out;
    overflow-x: hidden;
    z-index: 1000;
	 display: block;
}






/* Сворачивание меню */
#wrapper.toggled #sidebar {
    min-width: 50px; /* Используем min-width, чтобы избежать скачков */
    width: 50px;
}


#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;

    position: relative; /* Чтобы дочерние элементы наследовали размеры */
}



/* Кнопка-гамбургер */
/* Кнопка-гамбургер */
.toggle-btn {

    font-size: 16px;
    width: 100%;
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: flex-start; /* Текст и иконка в один ряд */
    background: none;
    color: white;

    white-space: nowrap; /* Запрещаем перенос текста */
    gap: 10px; /* Расстояние между иконкой и текстом */
	  border-radius: 0px; /* Закругление углов */
	 border-bottom: 2px solid gray !important; /* Горизонтальная линия снизу */

transition: border-color 0.3s ease-in-out !important;
}



.toggle-btn:hover {
    border-bottom: 2px solid red !important; /* Меняется цвет линии при наведении */
    color: white;

}

/* Если кнопка была нажата, но не должна менять цвет */
.toggle-btn:focus, 
.toggle-btn:active {
    background: none;
    color: white;
    outline: none;
    box-shadow: none; /* Убираем тень, если есть */
	border: 0px  !important; /* Меняется цвет линии при наведении */
}

/* Пункты меню */
.nav {
    padding: 0;
    margin: 0;
    list-style: none;
}





.nav-item:hover {
  background: rgba(255, 255, 255, 0.2);
}

.nav-item:hover .nav-link {
  color: #fff;
  text-decoration: none;
  border-left: 2px solid #17a2b8 !important; /* Бирюзовая граница */
}


.nav-item .nav-link.active {
    color: #fff !important; /* Белый текст */
    background-color: rgba(255, 255, 255, 0.2) !important; /* Полупрозрачный фон */

}




.menu-text {
    font-size: 12px; /* Укажи нужный размер */
    transition: font-size 0.3s ease-in-out; /* Плавное изменение */
    white-space: nowrap; /* Убираем перенос */
    overflow: hidden; /* Обрезаем, если не влезает */
    text-overflow: ellipsis; /* Добавляем "..." при нехватке места */
	color: #bec0c2 !important;
}

.menu-text .nav-link.active {
    color: #fff !important; /* Белый текст */
}

.nav-item:hover .menu-text {
  color: #fff !important;
  text-decoration: none;
}

.nav-item:hover .menu-icon {
   filter: brightness(1.5); /* Делаем ярче */
    transition: filter 0.3s ease;
}




#wrapper.toggled #sidebar .menu-text {
    max-width: 0;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    transition: max-width 0s ease-in-out, opacity 0.1s ease-in-out;
    display: inline-block;
    pointer-events: none; /* Запрещаем взаимодействие */
}


/* Оставляем одинаковые отступы */
.nav-link {
    display: flex;
    align-items: center;
    padding: 10px !important; /* Фиксируем одинаковый padding */
   
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 16px; /* Фиксируем высоту строки */
}

/* Фиксируем расположение элементов */
#wrapper.toggled #sidebar .nav-link {
    justify-content: flex-start; /* Выравниваем элементы слева */
	 padding: 10px !important; /* Фиксируем одинаковый padding */
}



/* Оставляем одинаковые отступы */
.menu-icon {
    width: 16px;
    height: 16px;
    margin-right: 10px; /* Делаем одинаковым */
}


#wrapper.toggled #sidebar .menu-icon {
    margin-right: 10px; /* Фиксируем */
}

/* Контент смещается */
#content {
    transition: margin-left 0.3s ease-in-out;
    margin-left: 160px; /* Подстраиваем под sidebar */
}

#wrapper.toggled #content {
    margin-left: 50px;
}

@media (max-width:991px) {
#content {
    margin-left: 50px;
    transition: all .4s ease 0s;
}

#sidebar .menu-icon {
    margin-right: 10px; /* Фиксируем */
}

#sidebar .nav-link {
    justify-content: flex-start; /* Выравниваем элементы слева */
	 padding: 10px !important; /* Фиксируем одинаковый padding */
}

#sidebar .menu-text {
    max-width: 0;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    transition: max-width 0s ease-in-out, opacity 0.1s ease-in-out;
    display: inline-block;
    pointer-events: none; /* Запрещаем взаимодействие */
}

#sidebar {
    min-width: 50px; /* Используем min-width, чтобы избежать скачков */
    width: 50px;
}
}


/* ----------------------------------*/
/*для страницы мониторинг ведения учета*/
/* Стиль для блоков */
.boxU1 {
  flex: 1; /* Растягиваем блоки на всю доступную ширину */
  border-radius: 3px;
   border: 1px solid #ddd;
  display: flex;
  flex-direction: column; /* Для вертикального расположения элементов */
  color: black;
  height: 100%; /* Убираем фиксированную высоту, чтобы блок растягивался */
  font-size: 12px;
  gap: 8px; /* Меньший отступ внутри блока */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Заголовки блоков */
.box-header {
 
  display: flex;
  justify-content: space-between; /* Распределяет элементы по краям */
  align-items: center; /* Вертикальное выравнивание */
  padding: 5px 16px;
  font-size: 12px;
}

.box1_1 .box-header {
  background-color: #83caad;
}

.box1_2 .box-header {
  background-color: #8fc7d4;
}

.box1_3 .box-header {
  background-color: #c6a4d8;
}

/* Стиль для содержания блока */
.box-content {
  flex-grow: 1; /* Разрешаем блоку контента растягиваться */
  padding: 10px;
  display: flex;
  flex-direction: column; /* Размещение элементов по вертикали */
}



.details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.detail-row .tooltip {
  margin-left: 5px;
  background: #ccc;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
}

.value {
  display: flex;
  align-items: center;
  gap: 6px;
}

.total{
   padding: 0px 5px;
}

.total1 {
  background-color: #9ce7a1;
  color: black;
}

.total2 {
  background-color: #ffce86;
  color: black;
}

.total3 {
  background-color: #b9d5fd;
   color: black;
}

.btn-filter{
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-filter:hover {
  background-color: #2a92bc;
}

.btn-filter.active {
    background-color: #2a92bc;  /* Например, синий цвет для активной кнопки */
    color: white;               /* Белый текст */
}

.btn-filter .dashicons {
  font-size: 14px; /* меньше размера, например 14px */
  width: 14px;
  height: 14px;
  line-height: 1;
}


.text-with-tooltip {
  position: relative;
  display: inline-block;
  padding-right: 5px; /* Добавляем отступ справа от текста */
}

.tooltip-wrapper-top {
  position: absolute;
  top: -10px;
  right: -10px;
}

.tooltip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #e0e0e0; /* светло-серый фон */
  font-size: 10px;
  color: #000;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  position: relative;
  z-index: 1; /* Чтобы иконка была поверх других элементов */
}

.tooltip-wrapper-top:hover .tooltip-icon {
  background-color: #d0d0d0;
  color: #007BFF;
}

.tooltip-text {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease;
  background-color: #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  position: absolute;
  z-index: 9999;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  width: 160px;
  word-wrap: break-word;
  white-space: normal;
  text-align: left;
  line-height: 1; /* Меньше расстояние между строками */
}

.tooltip-wrapper-top:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}


.info-block {
    line-height: 1;
  }

.label_ib {
    font-weight: bold;
	font-size: 12px;
    color: #225d61;
	width: 30px;
  }

.value_ib {
   
	font-size: 12px;
  }

 .lines {
   width: 100%;
  display: flex;
  align-items: center;

}

.labels {
  display: inline-block;
  min-width: 40px;
  text-align: left;
  color: #444;
  
}

/* -----------------стиль поля поиска БИН наименование*/
.table-search-wrapper {
  display: flex;
  align-items: center;
  margin-top: 20px;
  margin-right: 300px;
  margin-bottom: -40px;
  flex-wrap: wrap; 
}

/* Контейнер для поля с крестиком */
.table-search-field {
  position: relative;
  display: flex;
  flex: 1; /* растягиваем на всю доступную ширину */
  min-width: 200px; /* минимальная ширина */
  max-width: 400px; /* минимальная ширина */
   z-index: 1;
}

/* Поле поиска растягивается по ширине контейнера */
.table-search-input {
  flex: 1;
  line-height: 20px;    /* центрирует текст */
  padding:0px 35px 0px 10px !important; /* место справа для крестика */
  border: 1px solid #808080 !important;
  border-radius: 3px;
  font-size: 11px;
  outline: none;
}

.table-search-btn{
	 z-index: 9999;
}


.table-search-input:focus {
  border-color: #2271b1;
  box-shadow: 0 0 0 1px rgba(34,113,177,.2);
}

/* Крестик внутри поля */
.clear-icon {
  position: absolute;
  right: 32px;  /* место перед кнопкой */
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 16px;
  color: #888;
  display: none;
}

.clear-icon:hover {
  color: #333;
}


.table-search-btn:hover {
  background: #135e96;
}

/* Если браузер autofill */
.table-search-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px white inset; /* фон */
  -webkit-text-fill-color: #000; /* цвет текста */
  transition: background-color 5000s ease-in-out 0s; /* предотвращает мерцание */
}

/* Если фокус и есть текст */
.table-search-input:focus {
  color: #000;        /* цвет текста остаётся */
  background-color: #fff; /* фон остаётся белым */
  border-color: #2271b1;
  box-shadow: 0 0 0 1px rgba(34,113,177,.2);
}

/* Кнопка «лупа» внутри поля */
.table-search-btn {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  height: 20px;
  width: 25px;           /* квадратная кнопка */
  border: none;
  background-color: #565555;
   cursor: pointer;
  font-size: 14px;       /* размер лупы */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  padding: 0;
}

.table-search-btn:hover {
  background-color: #000000;
  border-color: #d0d5dd;
}

.table-search-btn:focus {
  background-color: #000000;
  border-color: #d0d5dd;
}

.table-search-btn svg {
  color: #fff !important; /* делаем иконку белой */
}


.page-header-row {
    display: flex;
    align-items: center;        /* по вертикали ровно */
    justify-content: space-between; /* заголовок слева, кнопка справа */
    width: 100%;
}



.otchet-button {
    color: white;
    border: none;
    padding: 10px;
    font-size: 10px;
    cursor: pointer;
    border-radius: 3px;
	background-color: #2F4F4F !important;
}

.otchet-button:hover {
    background-color: #8FBC8F !important;
}

/* Стиль для поля выбора (отображается выбранный элемент) */
#orgSelect + .select2-container--default .select2-selection--single {
    height: 30px;           /* высота поля */
    font-size: 12px;        /* размер текста */
    line-height: 30px;      /* вертикальное выравнивание текста */
    padding: 2px 2px;      /* отступы слева и справа */
}

/* Placeholder */
#orgSelect.select2-hidden-accessible + .select2-container--default .select2-selection__placeholder {
    font-size: 12px !important;
    line-height: 40px !important;
}

/* Элементы выпадающего списка */
.select2-container--default .select2-results__option {
    font-size: 12px !important;
    line-height: 1.5 !important;
    padding: 4px 5px !important;
}

/* Поле поиска внутри dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field {
    font-size: 12px !important;
    line-height: 1.5 !important;
    padding: 2px 5px !important;
}

.filter-row {
    display: flex;
    flex-direction: column; /* сверху вниз */
    gap: 2px; /* расстояние между верхним и нижним блоком */
}

/* Верхнее поле — занимает всю ширину */
.filter-row-top select {
    width: 100%;

}

/* Нижняя строка: месяц, год, кнопка в одну линию */
.filter-row-bottom,
.filter-row-top {
    display: flex;
    gap: 2px; /* расстояние между элементами */
    align-items: center; /* выравнивание по вертикали */
}

/* Можно задать ширину для месяца и года */
.filter-row-bottom select#monthSelect,
.filter-row-bottom select#yearSelect,
.input-fld, 
.input-fld-1 {
	font-size: 12px !important;
	height: 28px !important;
	padding: 2px 2px;  /* верх/низ 6px, лев/право 10px */
  border: 1px solid #808080 !important;
  border-radius: 3px;
  outline: none;
}

.input-fld::placeholder, .input-fld-1::placeholder {
    color: #ccc; /* светло-серый цвет */
    font-style: italic; /* если хочешь, чтобы текст был курсивом */
}

.filter-row-bottom select#yearSelect {
    width: 80px; /* или любая удобная ширина */
}

.input-fld {
    width: 48px; /* или любая удобная ширина */
}

.input-fld-1 {
    width: 180px; /* или любая удобная ширина */
}


.filter-row-bottom select#monthSelect {
    width: 100px; /* или любая удобная ширина */
}

.name-report{
width: 85px; /* или любая удобная ширина */	
font-weight: bold !important; 
font-size: 12px !important;
}


/* Кнопка */
.filter-row-bottom button#openReport {
    padding: 8px 12px;
	font-size: 12px !important;
	color: white;
}

#cellTooltip hr {
    border: 0;
    border-top: 1px solid #fff;
    margin: 4px 0;
}

#cellTooltip {
    position: absolute; /* фиксируем относительно окна, а не документа */
    padding: 5px 10px;
    background-color: rgba(0,0,0,0.8);
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 9999;
}