:root
{
--main_color: #0056b3; /*Основний колір темніший для тексту */
--main_bgcolor: #337ab7; /*Основний колір світліший для фону*/
--main_bgcolor_light: #337ab7a8; /*Основний колір ще світліший для фону*/
--main_color_light: #fff; /*Світлий для тексту на темному фоні*/

--button_bgcolor: #e2e2e2; /*Фон для кнопки */
--button_bgcolor_hover: #e2e2e2; /*Фон для кнопки при наведенні курсора */
--button_bordercolor_active: #222222; /*Фон для кнопки при кліку */

--button_color:green; /*Текст для кнопки   */
--button_color_alt: blue; /*Текст для кнопки - алтернативний*/
--button_color_nav:var(--main_color); /*Текст для кнопки навігації */

--disable_button_bgcolor: rgba(239, 239, 239, 0.3); /*Фон для неактивної кнопки */
--disable_button_color: rgba(16, 16, 16, 0.6); /*Текст для неактивної кнопки */
--disable_button_bordcolor:rgba(16, 16, 16, 0.3); /*Рамка для неактивної кнопки */

--alert_text_color: red; /*Текст попереджень та помилок */
--accent_text_color: #9f5050; /*Текст, який треба виділити */

/*форми*/
--bgcolor0: #f5f5f5; /*Світло-сірий для фону */
--filtr_color: #00800020; /*Для позицій фільтра, які заповнені*/ /*#ffeb3b; жовтий */
--disable_filtr_color:#dbd8d8; /* #b1b1b1; більш темний */
--bord_rad: 6px; /*border-radius*/
}

body {
* {margin: 0;}
}

footer {margin: 10px 0px; }

footer::before {margin: 10px 0px; background-color: var(--main_bgcolor);}
/*width: 400px; height:2px; */

/****Назва програми****/
.first_caption {font-size:180%; color:#fff; color:var(--main_color_light); background-color:#337ab7; background-color: var(--main_bgcolor); }

/****Назва модуля****/
.second_caption {font-size:160%; color:#337ab7; color:var(--main_bgcolor); } 

/*Заголовки*/
h1 {text-align:center; font-weight:bold; margin: 15px 0px 10px 0px;}
h2 {text-align:center; font-weight:bold; margin: 10px 0px;}
h3 {margin: 15px 0px 5px 0px;}
h4 {margin: 5px 0px;}

.middle_caption {font-weight:bold; font-size:120%; margin: 10px px 0px 0px;}
.little_caption {font-weight:bold; margin: 5px 0px;}

/**** інформація текстова різна*****/
/*інформація, норм шрифт */
.info_little {}  
/*інформація збільшений шрифт*/
.info_mid  {font-size:130%; }   
/*інформація центрована */
.info_centered  {font-size:130%;  text-align:center; } 
/*інформація, важливе подвідомлення */    
.info_message {font-size:130%; color:#337ab7; color:var(--main_bgcolor);  padding:1%;  margin: 10px 10px 0px 0px;}/* text-align:center;*/
/*примітка*/ 
.remark_message  {font-style: italic; margin: 5px 0px;} /*font-size:80%; */
/*.remark_message::before,  .remark_message::after {content:''; display:block; width:10%; border:1px dashed var(--main_bgcolor); margin: 10px 0px;}*/
/*інформація про помилки*/ 
.info_error  {color:red; color:var(--alert_text_color); font-size:150%; text-align:center;  margin: 10px  0px;}      
/*До побачення!*/    
.info_bye {text-align:center; color:#9f5050; color:var(--accent_text_color); font-size:140%; font-weight:bold; }
/*disabled - мітки до некативних об'єктах */
.disabled_text {color:rgba(16, 16, 16, 0.6);  color:var(--disable_button_color);}

.info_box{background-color: #f5f5f5; background-color: var(--bgcolor0);   border: 2px solid; border-color:#337ab7; border-color:var(--main_bgcolor); border-radius: var(--bord_rad); padding:1%;  margin: 10px 0px; }
.info_part{ margin: 5px 0px; }

.mylist{}

.myshadow {box-shadow: 4px 4px; }

.hidden_labels
{position:absolute; left:-10000px; top:auto; width:1px;  height:1px; overflow:hidden;}


/****форми*****/
.filtr_box {background-color: #f5f5f5; background-color: var(--bgcolor0);  border: 2px solid; border-color:#337ab7; border-color:var(--main_bgcolor); border-radius: var(--bord_rad); padding:1%;  }

/***********пробні ***************

.fcont_v {display:flex; flex-direction:column;}
.fcont_h {display:flex; flex-wrap:wrap; gap: 10px;}/justify-content:space-between; /

.filtr_part {border-radius: var(--bord_rad); padding: 4px 16px; margin: 5px; border: 1px solid var(--main_bgcolor);  background-color:white  } / сірий #e6e4e4  блакитний #d5e8f9 /
.filtr_flexchild  {flex-basis:auto;}

/ margin: 5px;  /
/.fcont_h :nth-child(n)  {flex-basis:auto; border-radius: var(--bord_rad); padding: 4px 16px; border: 2px solid black;  }
.filtr_part_v:not(:last-child)  {flex-basis:auto; border-radius: var(--bord_rad); padding: 4px 16px; margin: 5px; border: 2px solid black;  }/
**********************/

/*input[type="date"], input[type="submit"], input[type="button"], input[type="text"]*/
select, input, button
     {border-radius: var(--bord_rad); padding: 4px 16px; margin: 5px 5px 0px 0px; } 

select, input[type="date"],  input[type="text"], input[type="password"]
     {border: 1px solid;} 
.select0 {min-width:350px; width: 90%;} 
.select1 {min-width:150px;} 
.date1 {min-width:120px; } 
.edit0 {}  /*padding:0px */
.edit_long {min-width:450px; padding:4px; } 
.enter_number { width:30pt; padding: 4px 0px 4px 16px; }

/*****кнопки******/
input[type="submit"], input[type="button"], button  
     { border: 2px solid black;    }   /*background-color:var(--button_bgcolor);*/

input[type="submit"]:not(:disabled):hover, input[type="button"]:not(:disabled):hover , button:not(:disabled):hover 
   {background-color:#e2e2e2; background-color:var(--button_bgcolor_hover);  } 
input[type="submit"]:focus, input[type="button"]:focus, button:focus  
   {border-width: 3px; } 
input[type="submit"]:active, input[type="button"]:active, button:active  
   { border-color:#337ab7; border-color:var(--main_bgcolor);} 
input[type="submit"]:disabled, input[type="button"]:disabled, button:disabled 
   { color:rgba(16, 16, 16, 0.6); border-color:rgba(16, 16, 16, 0.3); background-color:rgba(239, 239, 239, 0.3); color:var(--disable_button_color); border-color:var(--disable_button_bordcolor); background-color:var(--disable_button_bgcolor);} 

/*велика кнопка*/
.l_button {min-width:200px; color:green; color:var(--button_color);} 
/*середня кнопка*/
.m_button {min-width:150px; color:green; color:var(--button_color);}  
/*маленька кнопка*/
.s_button {min-width:50px; color:green; color:var(--button_color);} 
/*кнопка Повернутись до кабінету*/
.return_cab_button {min-width:50px; color:#0056b3; color:var(--button_color_nav); margin: 10px 5px;} 
/*кнопка Оновити*/
.reload_button {min-width:100px; color:#0056b3; color:var(--button_color_nav); }
.button_in_table {margin: 0px;} 

/*Результат відбору bgcolor0 */
.result_part {display: inline-block; }
table.result {margin: 5px 0px;  }  /*width: 100%; центрувати: margin: 5px auto; */
table.result thead tr:first-child {background-color:#337ab7a8; background-color:var(--main_bgcolor_light);} 
table.result tbody tr:nth-child(odd) {background-color:#f5f5f5; background-color:var(--bgcolor0); } 

/*кнопки під результатом*/
.bottom_buttons {border-width: 0; margin: 0;  padding: 5px;  }


/****діалогове вікно *****//*display:none; visibility 1s;*/
.backdrop {display:flex; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0, 0, 0, 0.5);  justify-content:center; align-items: center; padding: 2px;  transition: opacity 0.7s, visibility 0.7s;  opacity: 0; visibility: hidden;}
.dialog_box {max-width: 50%; background-color: white; border: 2px solid; border-color:#337ab7; border-color:var(--main_bgcolor); border-radius: var(--bord_rad); padding: 2px 2px 0px 2px; display:flex; flex-direction:column;}
.dialog_top {background-color:#337ab7;  background-color:var(--main_bgcolor); display:flex; justify-content:right; align-items: start;}  /*position: relative; flex-basis: 30px; */
.dialog_bottom {display:flex; justify-content:space-evenly;  gap: 10px; padding: 4px; margin: 4px 0px 0px 0px;}
.dialog_close_b {border: 1px solid; margin: 0px; padding: 2px 4px; } /*position:absolute; */
.dialog_content {padding: 6px;  overflow-y: auto;}

/*Фон*/
.pattern1  {
  background: -moz-linear-gradient(45deg,rgba(0, 0, 0, 0) 48%,rgba(0, 0, 0, 0.2) 50%,rgba(0, 0, 0, 0) 52%),-moz-linear-gradient(-45deg,rgba(0, 0, 0, 0) 48%,rgba(0, 0, 0, 0.2) 50%,rgba(0, 0, 0, 0) 52%);
  background: -webkit-linear-gradient(45deg,rgba(0, 0, 0, 0) 48%,rgba(0, 0, 0, 0.2) 50%,rgba(0, 0, 0, 0) 52%),-webkit-linear-gradient(-45deg,rgba(0, 0, 0, 0) 48%,rgba(0, 0, 0, 0.2) 50%,rgba(0, 0, 0, 0) 52%);
  background: -ms-linear-gradient(45deg,rgba(0, 0, 0, 0) 48%,rgba(0, 0, 0, 0.2) 50%,rgba(0, 0, 0, 0) 52%),-ms-linear-gradient(-45deg,rgba(0, 0, 0, 0) 48%,rgba(0, 0, 0, 0.2) 50%,rgba(0, 0, 0, 0) 52%);
  background: linear-gradient(45deg,rgba(0, 0, 0, 0) 48%,rgba(0, 0, 0, 0.2) 50%,rgba(0, 0, 0, 0) 52%),linear-gradient(-45deg,rgba(0, 0, 0, 0) 48%,rgba(0, 0, 0, 0.2) 50%,rgba(0, 0, 0, 0) 52%);
  background-size: 1em 1em;
  background-color: #fff;
 }