html {   
	font-family: Calibri, Arial, Helvetica, sans-serif;
	    background-color: #f4f4f9;
	    font-size:20px;
}
tr.grey {
    color: #aaa; /* Полупрозрачность */
}

tr.grey .red{
    color: #faa; /* Полупрозрачность */
}

tr.grey .descr {
    color: #000 !important; /* Сбрасываем полупрозрачность для .descr */
}

.poster {
    position: relative;
    cursor: pointer;
}

.descr {
    display: none;
    opacity: 0; /* начальная непрозрачность */
    padding: 10px;
    background: #f3f3f3;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
    text-align: left;
    max-width: calc(100vw - 80px)!important;
    position: fixed; /* фиксированное положение */
    max-height: 80vh;
    overflow-y: auto;
    z-index: 105;
}
.poster:hover .descr {
    opacity: 1 !important;
}

/* Основной стиль для таблицы */
.subtable {
    border-collapse: collapse;
    text-align: center;
    font-size: 1rem;
    width: 100%; /* Таблица занимает всю ширину контейнера */
}

/* Стиль для всех ячеек в таблице */
.subtable td, .subtable th {
    padding: 4px; /* Отступы внутри ячеек */
    width: 12% !important;
    border: 1px solid black !important; /* Граница ячеек */
}

/* Заголовки по умолчанию центрированы */
.subtable th {
    text-align: center;
    font-weight: bold; /* Жирный текст для заголовков */
    background: #e8edff;
}


.box table#main tbody tr:hover:not(.itog) td {
    background: #e8edff;
}


.toggle-box {
	display: none;
		
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.toggle-box:checked+label+div {
	display: block;
	animation: fadeIn 0.3s ease-in-out;
		
}

.toggle-box+label+div {
	display: none;
    border-radius: 10px; /* Скругление углов */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Тень */
    background: #fff; /* Фон для контента */
    padding: 5px; /* Отступы внутри div */
    margin-top: 0px; /* Отступ сверху */
		
}


.toggle-box+label {
	float: left;
	color: #444;
	border-radius: 40px;
	border: 1px solid #CCC;
	background: #DDD;
	box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	vertical-align: middle;
	padding: 5px;
	text-align: center;
	font-size: 1.5rem;
		
}

td[v^='-']:not(.green) {
    color: red;
}
.toggle-box+label:active {
	color: red;
}
.toggle-box+label:hover {
	box-shadow: 0 0 15px -1px rgba(0, 0, 0, 0.6);
}

.toggle-box:checked+label {
	background: #ACA;
	border-radius: 4px;
}

.bold {
	font-weight: bold
}

.big {
	font-weight: bold;
	font-size: 1.5rem
}

table#main td {
      	width: 20%;
	border: 1px solid black;
}

table#main {
	border-collapse: collapse;
	text-align: right !important;
	width: 100%;
}


#maincontainer {
	margin-left: auto;
	margin-right: auto;
}




.toggle-box + label + div th, 
.toggle-box + label + div td {
    border: 1px solid #CCC; /* Граница ячеек */
}

/* Общие стили для блока с информацией о балансе */
.balance-info {
    padding: 10px;
    margin: 10px 0;
    font-weight: bold;
    border-radius: 5px;
    text-align: right;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.5rem;
}


#table-container table.main {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;

}
#table-container table.main tr:hover td {
	background: #e8edff;
}


#table-container table.main th, #table-container table.main td {
    border: 1px solid #ccc;
    padding: 8px;
}

/* Выровнять все ячейки таблицы по правому краю */
#table-container > table.main td {
    text-align: right;
}

/* Выровнять ячейки первого столбца по центру */
#table-container table.main td:first-child {
    text-align: center;
}

/* Выровнять ячейки второго столбца по левому краю, за исключением строк с классом 'itog' */
#table-container table.main tr:not(.itog) td:nth-child(2) {
    text-align: left;
}

/* Для заголовков оставляем стандартное выравнивание */
#table-container table.main th {
    background-color: #eee;
    cursor: pointer;
    text-align: center;
}

#table-container table.main th.sorted-asc::after {
    content: " ▲";
}

#table-container table.main th.sorted-desc::after {
    content: " ▼";
}
#table-container{
           background-color: #f4f4f9;
}

/* Основной контейнер фильтра */
#filter-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 колонки на широком экране */
    gap: 16px;
    align-items: center;
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

/* Каждая колонка */
.column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Лейблы */
#filter-container label {
    display: flex;
    align-items: center;
    justify-content: space-between; /* текст слева, input/селект справа */
    gap: 8px;
    width: 100%;
}

/* Инпуты, селекты и кнопки */
#filter-container select,
#filter-container input,
#filter-container button {
    padding: 8px 12px;
    font-size: 1rem;
    border-radius: 4px;
    border: 1px solid #ccc;
    width: 100%; /* растягиваем на всю ширину колонки */
}

/* Надписи, которые должны занимать всю ширину */
#filter-container .full-span {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: 8px;
}

/* Медиазапрос для узких экранов */
@media (max-width: 800px) {
    #filter-container {
        grid-template-columns: 1fr; /* все колонки в одну строку */
    }
    #filter-container .column {
        width: 100%;
    }
    .buttons-container{
    display: none}
}

#filter-container label {
    font-size: 1rem;
    margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: flex-end; /* Текст слева, элемент справа */
            gap: 8px;

}

#filter-container select, #filter-container input, #filter-container button {
    padding: 8px 12px;
    font-size: 1rem;
    border-radius: 4px;
    border: 1px solid #ccc;
}

/* Стили для поля ввода и селектора в состоянии disabled */
#filter-container select:disabled, 
#filter-container input:disabled {
    background-color: #f5f5f5; /* Легкий фон для отключенных полей */
    cursor: not-allowed; /* Указатель в виде "запрещено" */
    border-color: #ccc; /* Обычная рамка */
}


#filter-container select, input {
    width: 200px;
}


#filter-container select:focus, #filter-container input:focus {
    border-color: #007BFF;
    outline: none;
}
.itog {
    background: #eee;
    font-weight: bold; 
}
.box .itog td:last-child:not(:only-child) {
    color: #000;       /* черный цвет текста */
    font-size: 2.3rem;   /* размер шрифта */
}

.subtable td:nth-child(2) {
    text-align: left !important;  /* Выравнивание по левому краю для второго столбца */
}

.subtable td:nth-child(3) {
    text-align: right !important;  /* Выравнивание по правому краю для третьего столбца */
}

.subtable td:nth-child(4) {
    text-align: left !important;  /* Выравнивание по левому краю для четвёртого столбца */
}

.subtable td:nth-child(5) {
    text-align: left !important;
    width: 50% !important; /* Принудительно устанавливаем ширину для последнего столбца */
}
@media (max-width: 1024px) {
html {   
	    font-size:12px;
}
}
@media (max-width: 768px) {
    #filter-container {
        min-width: auto; /* Убираем ограничение по минимальной ширине */
        width: 100%; /* Элементы будут растягиваться по ширине на мобильных устройствах */

    }
html {   
	    font-size:10px;
}

}

#header {
    position: sticky;
    top: 0;  /* Закрепить к верхней части страницы */
    z-index: 99;  /* Убедитесь, что элемент поверх других */
    background-color: #fff;  /* Фон, чтобы текст не скрывался */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);  /* Легкая тень для отделения */
    padding: 10px 0;  /* Отступы */
}


#datetime{
font-size: 1rem;
}

#paytable {

    border-collapse: collapse;
    margin: 0px;
    text-align: left; /* Базовое выравнивание для всех */
}

#paytable th {
    text-align: center; /* Заголовки таблицы выравнены по центру */
    background-color: #f4f4f4;
    padding: 10px;
    border: 1px solid #ddd;
}

#paytable td {
    padding: 10px;
    border: 1px solid #ddd;
}

/* Настройка столбцов */
#paytable td:nth-child(2){
    text-align: center !important; /* 1-й, 2-й и 4-й столбцы выравнены по центру */
    font-size: 1.5rem !important; /* 1-й, 2-й и 4-й столбцы выравнены по центру */
}

#paytable td:nth-child(1),
#paytable td:nth-child(3) {
    text-align: right !important; /* 3-й столбец выравнен по правому краю */
   font-size: 2rem !important; /* 1-й, 2-й и 4-й столбцы выравнены по центру */
   font-weight: bold;
}

#paytable {
    margin: auto;
    display: table;
}


.paysubtable {
  border-collapse: collapse;
  width: 100%;
}

.paysubtable td {
  padding: 0;
  margin: 0;
  border: none !important;
}
.paysubtable td:nth-child(1),
.paysubtable td:nth-child(3){
  vertical-align: bottom;
  font-size: small;
}
.paysubtable td:first-child {
  text-align: left;
}
.paysubtable td:nth-child(2) {
  padding-left: 10px;  /* Отступ слева */
  padding-right: 10px; /* Отступ справа */
}
.red{color: #A00000;}
.green{color: #007050;}

#datetime {
  position: relative;
}

#datetime .hover-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: rgba(0,0,0,0.6);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  font-size: 2rem;
}

#datetime:hover .hover-text {
  opacity: 1;
}

#datetime span.original {
  transition: opacity 0.2s;
}

#datetime:hover span.original {
  opacity: 0.3;
}




/* styles.css */

/* Оверлей и модалка */
.modal-overlay {
  display: flex;
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  animation: fadeIn 0.3s forwards;
}

.modal-overlay.fade-out {
  animation: fadeOut 0.3s forwards;
}

@keyframes fadeIn {
  to {opacity: 1;}
}
@keyframes fadeOut {
  to {opacity: 0;}
}

.modal-container {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 720px;
  max-height: 90vh;
  overflow-y: auto;
  font-family: sans-serif;
  transform: translateY(-20px);
  animation: slideIn 0.3s forwards;
}

.modal-overlay.fade-out .modal-container {
  animation: slideOut 0.3s forwards;
}

@keyframes slideIn {
  to {transform: translateY(0);}
}
@keyframes slideOut {
  to {transform: translateY(-20px);}
}

/* styles.css */

/* Оверлей и модалка */
.modal-overlay {
  display: flex;
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  animation: fadeIn 0.3s forwards;
}

.modal-overlay.fade-out {
  animation: fadeOut 0.3s forwards;
}

@keyframes fadeIn {
  to {opacity: 1;}
}
@keyframes fadeOut {
  to {opacity: 0;}
}

.modal-container {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 720px;
  max-height: 90vh;
  overflow-y: auto;
  font-family: sans-serif;
  transform: translateY(-20px);
  animation: slideIn 0.3s forwards;
}

.modal-overlay.fade-out .modal-container {
  animation: slideOut 0.3s forwards;
}

@keyframes slideIn {
  to {transform: translateY(0);}
}
@keyframes slideOut {
  to {transform: translateY(-20px);}
}

/* styles.css */

/* Оверлей и модалка */
.modal-overlay {
  display: flex;
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  animation: fadeIn 0.3s forwards;
}

.modal-overlay.fade-out {
  animation: fadeOut 0.3s forwards;
}

@keyframes fadeIn {
  to {opacity: 1;}
}
@keyframes fadeOut {
  to {opacity: 0;}
}

.modal-container {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 720px;
  max-height: 90vh;
  overflow-y: auto;
  font-family: sans-serif;
  transform: translateY(-20px);
  animation: slideIn 0.3s forwards;
}

.modal-overlay.fade-out .modal-container {
  animation: slideOut 0.3s forwards;
}

@keyframes slideIn {
  to {transform: translateY(0);}
}
@keyframes slideOut {
  to {transform: translateY(-20px);}
}

.modal-container h3, .modal-container h4 {
  margin-top: 0;
  margin-bottom: 10px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 4px;
}

.modal-section {
  margin-bottom: 20px;
  padding: 10px 0;
  border-bottom: 1px solid #aaa;
}

/* Блок 1 - три колонки */
.modal-block-1 {
  display: grid;
  grid-template-columns: 20% 45% 33%;
  gap: 10px;
  margin-top: 10px;
}

.modal-block-1 div {
  padding: 4px 0;
}

.modal-block-1 input {
  width: 100%;
  padding: 4px 6px;
  box-sizing: border-box;
}

/* Блок 2 и 3 - два столбца, поля одинаковой ширины */
.modal-block-2, .modal-block-3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.modal-block-2 label,
.modal-block-3 div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-block-2 label input,
.modal-block-3 div input {
  width: 45%; /* одинаковая ширина всех полей */
}

/* Поля на всю ширину (растянуты на 2 колонки) */
#correctionTextLabel,
#noteField {
  grid-column: span 2;
}

#correctionTextLabel input,
#noteField textarea {
  width: 100%;
  box-sizing: border-box;
}

#noteField textarea {
  height: 50px;
  resize: vertical;
}
.modal-status {
  padding: 4px;
  border-radius: 4px;
  font-weight: bold;
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
  display: inline-block;
}

/* Адаптив */
@media (max-width: 600px) {
  .modal-block-1, .modal-block-2, .modal-block-3 {
    grid-template-columns: 1fr;
  }

  .modal-block-2 label,
  .modal-block-3 div {
    flex-direction: column;
    align-items: flex-start;
  }

  .modal-block-2 label input,
  .modal-block-3 div input,
  #noteField textarea,
  #correctionTextLabel input,
  .modal-block-1 input {
    width: 100%;
    margin-top: 2px;
  }
}

/* Кнопки */
button {
  padding: 6px 12px;
  margin-right: 10px;
  cursor: pointer;
  border: 1px solid #888;
  border-radius: 4px;
  background: #f0f0f0;
}

button:hover {
  background: #e0e0e0;
}
.modal-block-1 h4,
.modal-block-2 h4,
.modal-block-3 h4 {
  grid-column: 1 / -1; /* занимает все колонки */
  margin-bottom: 10px;
}
.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
}

.left-buttons {
  display: flex;
  gap: 10px;
}

.form-actions button {
  padding: 8px 14px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: 500;
}

.primary {
  background: #007bff;
  color: white;
}

.secondary {
  background: #eeeeee;
}

.history-btn {
  white-space: nowrap;
}
/* если href есть */
#adr:link,
#adr:visited {
  color: blue;
  text-decoration: underline; /* убери если не нужно */
}

/* если href отсутствует */
#adr:not([href]) {
  color: black;
  text-decoration: none;
  cursor: default; /* чтобы не было вида ссылки */
}