:root {
    --accent-color: #cb3a38;
    --header-color: #CEDADC;
    --background-color: #F0EFE8;
    --white-color: #FFFFFF;
    --button-color: #CCD8D4;
    --title-color: #B5CBC4;
    --chip-bg: #cfd7d5;     /* фон общей плашки (заголовок) */
    --chip-num: #e0e5e4;
}

body{
    background-color: var(--background-color);
    margin: 0;
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 30px;
}

header{
    background-color: var(--header-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 111px;
}

.top_menu{
    height: 111px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 36px;
    margin-left: 27px;
}

.nav_links{
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: flex-end;
    gap: 39px;
    margin-bottom: 9px;
}

.nav_links p {
    margin: 0;
    padding: 0;
}

.before_entrance{
    margin-right: 54px;
}

.before_entrance input{
    font-weight: 600;
    font-size: 35px;
    height: 68px !important;
    width: 391px !important;
    border-radius: 10px !important;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.after_entrance{
    height: 111px;
    margin-top: 8px;
    margin-right: 20px;
    display: flex;
    flex-direction: column;
    gap: 0px;
    justify-content: flex-end;
    align-items: flex-end;
}

.after_entrance .account_info{
    display: flex;
    flex-direction: row;
    gap: 15px;
    justify-content: flex-end;
    align-items: center;
}

.after_entrance .account_info img{
    width: 40px;
    height: 39px;
}

.after_entrance #username{
    font-weight: 300;
    font-size: 20px;
    margin: 0;
    padding: 0;
}

.after_entrance .message_info{
    font-weight: 600;
    font-size: 20px;
    margin: 0;
    padding: 0;
}

.after_entrance input[name=exit]{
    background-color: transparent !important;
    border: none; 
    font-size: 20px;
    margin: 0;
    padding: 0;
    text-align: right;
    width: 40% !important;
}

.title{
    font-size: 86px;
    font-weight: 500;
}

.container_questionnaire{
    width: 65%;
    background-color: var(--white-color);
    margin: auto;
    padding: 25px 130px 100px 130px;
    border-radius: 10px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    margin-bottom: 30px;
}

.container_questionnaire p {
    height: 10px;
    margin-left: 15px;
}

.factors p {
    height: 50px;
}

.factor p {
    height: auto;
}

h2, h3{
    font-weight: 600;
    font-size: 35px;
    text-align: center;
}

h2{
    color: var(--accent-color);
}

h3{
    color: var(--title-color);
}

input:not([type=checkbox]):not([class=data_archive]), select{
    width: 100%;
    height: 50px;
}

input, select{
    background-color: var(--background-color);
    border: none;
    padding-left: 20px;
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    border-radius: 8px;
}



.checkbox-group, .conditions-group{
    background-color: var(--background-color);
    padding: 10px;
    border-radius: 6px;
}

.conditions-group{
    display: flex;
    flex-direction: column;
    /* padding: 0px 200px; */
}
.conditions-group div{
    display: flex;
    justify-content: space-between;
    gap: 10px;
    height: 60px;
    align-items: center;
}

.condition-shum p, 
.condition-vibro-lokalnaya p,
.condition-vibro-obshaya p,
.condition-tyazhest-trud p,
.condition-apdf p {
    height: 30px !important;
}



.risk-category {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 255px;
    height: 40px;
    border: none;
    border-radius: 5px;
    background-color: var(--white-color);
    color: #000;
    text-align: center;
    font-size: 16px;
    transition: background-color 0.3s, border-color 0.3s;
    margin-left: 8px; /* Если нужно отступ от кнопок */
}

.conditions-header {
    display: flex;
    justify-content: space-between;
}

.risk-category strong {
    padding: 5px;
}


.usloviya-truda {
    font-size: 18px;

}

.categoriya-riska {
    font-size: 16px;
}


.number p{
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    width: 40px; 
    height: 40px;
    background-color: var(--white-color); 
    border-radius: 4px;
}

.buttons {
    width: 100%;
    margin-top: 40px;
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

.buttons input {
    font-weight: 600;
    background-color: var(--button-color);
    border: none;
    border-radius: 10px;
    width: auto;
    height: auto;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.buttons input[name="exit"] {
    font-size: 36px;
    /* width: 20%; */
}

.buttons input[name="continue"] , .buttons input[name="select"]{
    font-size: 36px;
    background-color: var(--accent-color);
    color: var(--white-color);
}

@media (max-width: 1733px) {
    .buttons {
        flex-direction: column;
    }
}

.buttons input[name="continue"], input[name=login], .buttons input[name="select"] {
    background-color: var(--accent-color); 
    /* border: none; 
    padding: 10px 20px;  */
    border-radius: 10px; 
}




.info_message{
    text-align: center;
    margin-top: 30px;
    margin-bottom: 40px;
}

.button_back{
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin-left: 30px;
    padding: 5px;
}

.button_back img {
    width: 16px; /* Установите желаемую ширину */
    height: 18px; /* Сохраняет пропорции изображения */
}

.button_back p{
    font-size: 16px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.checkbox-item input[type="checkbox"] {
    display: none;
}

.checkbox-item label {
    position: relative;
    padding-left: 55px; 
    cursor: pointer;
    line-height: 40px; 
}

.checkbox-item label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); 
    width: 40px;
    height: 40px;
    border: none;
    background-color: var(--white-color);
    border-radius: 5px;
    transition: background-color 0.3s;
}

.checkbox-item input[type="checkbox"]:checked + label::before {
    background-color: var(--accent-color); 
}

.checkbox-item input[type="checkbox"]:focus + label::before {
    outline: none;
}

.number {
    display: flex;
    gap: 10px; /* Расстояние между радиокнопками */
    align-items: center; /* Выравнивание по центру вертикально */
}

.number input[type="radio"] {
    display: none; /* Скрываем стандартные радиокнопки */
}

.number input[type="radio"] + label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* Ширина квадратика */
    height: 40px; /* Высота квадратика */
    border: none; /* Граница квадратика */
    border-radius: 5px; /* Округление углов квадратика */
    background-color: var(--white-color); /* Цвет фона квадратика */
    color: #000; /* Цвет текста внутри квадратика */
    cursor: pointer; /* Указатель при наведении */
    text-align: center; /* Центрирование текста */
    font-size: 16px; /* Размер шрифта */
    transition: background-color 0.3s, border-color 0.3s; /* Плавный переход цвета */
}

/* Стили для выбранного радиокнопки */
.number input[type="radio"]:checked + label {
    background-color: var(--accent-color); /* Цвет фона при выборе */
    border-color: var(--accent-color); /* Цвет границы при выборе */
    color: var(--white-color); /* Цвет текста при выборе */
}

.container_login, .container_reg, .container_snils{
    width: 42%;
    height: auto;
    background-color: var(--white-color);
    padding: 25px 130px 50px 130px;
    border-radius: 10px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    margin-top: 67px;
}

.container_login div{
    margin-bottom: 10px;
}

input[name=login]{
    width: 200px;
    color: var(--white-color);
    display: block;
    margin: 20px auto;   
}

.container_login input[name=login], .container_snils input[name=login], .button_noise, .button_apdf{
    font-size: 35px;
    font-weight: 600;
    color: var(--white-color);
    background-color: var(--accent-color);  
    padding: 14px 92px;
    width: auto !important;
    height: auto !important;
    border-radius: 10px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.button_noise, .button_apdf{
    margin-top: 60px !important;
}

.container_login p{
    text-align: center;
    margin-top: 40px;
}

.container_login input[name=registration], .container_reg input[name=registration]{
    display: block;
    background-color: var(--button-color);
    font-weight: 600;
    font-size: 40px;
    padding: 26px 98px;
    width: 654px;
    height: auto;
    margin-top: 15px;
    margin-bottom: 50px;
    margin-inline: auto;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.container_reg form div{
    margin-bottom: 15px;
}

.center_container{
    display: flex;
    justify-content: center;     
    align-items: center;
 }

h1{
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-weight: 600; 
    font-size: 64px;
    text-align: center;
    /* margin-top: 76px; */
}

.platform_name{
    font-weight: 600;
    font-size: 32px;
    text-align: center;
    margin-top: 13px;
}

.description-text{
    font-weight: 400;
    font-size: 20px;
    text-align: center;
    margin-top: 26px;
    /* margin-bottom: 95px; */
}

.available_modules{
    font-weight: 600;
    font-size: 35px;
    text-align: center;
    margin-top: 34px;
}

.container_modules{
    margin-top: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 116px;
}

.container_modules .module{
    background-color: var(--white-color);
    width: 467px;
    height: 260px;
    text-align: center;
    padding-top: 40px;
    border-radius: 10px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    margin-bottom: 63px;
}

.container_modules .module p{
    font-size: 32px;
}

.container_reg{
    margin: 74px auto;
}

.data_archive{
    background-color: var(--button-color);
    width: 492px;
    height: 143px;
    font-weight: 600;
    font-size: 35px;
    text-align: center;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.analysis_summary{
    text-align: center;
}

.container_snils{
    margin: 5% auto;
    padding-top: 50px !important;
}

.container_table{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 200px;
    border-collapse: collapse;
    border: none;
}

.container_table div{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container_table div p{
    color: var(--accent-color);
    height: auto;
}

.container_table table input{
    width: 80px !important;
    height: auto;
    margin: 5px 10px;
}

.table-title {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    font-size: 18px;
    height: 40px !important;
    white-space: nowrap;
    width: 100%;
    align-items: center;
    margin-left: 0px !important;
    gap: 10px;
}


.top_tr td{
    height: auto;
    text-align: center;
}

.bottom_tr td{
    width: auto;
    height: auto;
}

.bottom_tr td{
    background-color: var(--white-color);
    border-top: 1px solid black;
} 

.container_table table td:not(:last-child) {
    border-right: 1px solid black;
}

.custom-select {
    position: relative;
    display: inline-block;
    background-color: var(--background-color);
    /* border: 1px solid #ccc; */
    border-radius: 8px;
    padding-left: 20px;
    width: 100%;
    cursor: pointer;
    font-size: 25px;
    user-select: none;
    font-weight: 400;
}

/* Верхняя "строка выбора" */
.select-selected {
    cursor: pointer;
    align-items: center;
    min-height: 50px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    color: var(--text-color, #333);
    border-radius: 8px;
}

/* Выпадающий блок со списком */
.select-items {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background-color: var(--background-color);
    /* border: 1px solid #ccc; */
    border-radius: 8px;
    z-index: 99;
    width: 100%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    max-height: 180px;
    overflow-y: auto;
    transition: all 0.15s ease-in-out;
}

/* Стиль меток (чекбоксы + текст) */
.select-items label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 15px;
    color: var(--text-color, #333);
}

/* Подсветка при наведении */
.select-items label:hover {
    background-color: #e0e0e0;
}

/* Прячем список, когда класс .hidden активен */
.hidden {
    display: none !important;
}

.same-as-selected {
    background-color: #ddd;
}

div.information{
    width: 60%;
    margin: auto;
    padding: 25px 130px 100px 130px;
}

#autocomplete-list-desease, #autocomplete-list-job, #autocomplete-list-chemicals{
    position: absolute;
    background-color: var(--background-color);
    border: 1px solid #ccc;
    z-index: 999;
    width: 100%;
    display: none;
    max-height: 150px;
    overflow-y: auto;
}

.autocomplete-item{
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    cursor: pointer;
    min-height: 50px;
    max-height: auto;
    color: #000;
}

.autocomplete-item:hover {
    color: var(--accent-color);
}

#error{
    color: var(--accent-color);
    font-size: 12px;
}

.accent_color{
    color: var(--accent-color);
}

.inline_block {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap; /* Позволяет изображениям переноситься, если они не помещаются */
    max-width: 100%; /* Ограничение по ширине */
    /* overflow: hidden; Скрытие выходящего содержимого */
}

.container_questionnaire > img{
    width: 100%;
    height: auto;
}

.center{
    justify-content: center; 
    align-items: center;
}

.container_coming_soon div{
    width: 66.8%;
    height: auto;
    background-color: var(--white-color);
    text-align: center;
    padding: 26px 48px;
    border-radius: 10px;
    font-size: 32px;
    margin: auto;
}

.container_coming_soon input{
    font-weight: 600;
    font-size: 40px;
    padding: 34px 152px !important;
    width: auto !important;
    height: auto !important;
    margin-top: 55px;
}

.archive_container{
    background-color: var(--white-color);
    margin: 0 102px;
    padding: 25px 60px;
}

/* .archive_table_container{
    overflow-x: auto;
    max-width: 100%; 
    border: 1px solid #ccc;
} */
.archive_table_container {
    overflow-x: auto;
    overflow-y: auto; /* Включает вертикальную прокрутку */
    max-width: 100%; 
    max-height: 70vh; /* Ограничение высоты контейнера */
    border: 1px solid #ccc;
}

.archive_table_container table {
    width: 100%; 
    border-collapse: collapse; 
    table-layout: auto;
}

.archive_table_container table td, .archive_table_container table th{
    position: relative;
    border: 1px solid black;
    width: auto;
    height: auto;
    text-align: center;
    padding: 12px 32px;
    white-space: nowrap;
}

/* .archive_table_container table th{
    position: relative;
    padding-left: 60px;
} */
.archive_table_container table th {
    position: sticky; /* Фиксируем заголовки */
    top: 0; /* Фиксируем на верхнем краю контейнера */
    background-color: var(--white-color);
    z-index: 10;
}

.archive_table_container table th .archive_icons{
    position: absolute;
    top: 5px;
    left: 10px;
    display: flex;
    gap: 5px;
}

.archive_table_container table tbody tr{
    font-size: 24px;
}

.archive_table_container table tbody tr:nth-child(odd){
    background-color: var(--background-color);
}

.archive_container input{
    border-radius: 20px;
    width: 30% !important;
}

.search_container{
    text-align: right;
    margin-top: 10px;
    margin-bottom: 20px;
}

.selected_hniz, .selected_chemicals{
    width: 100%;
    min-height: 50px;
    height: auto;
    padding: 0 10px;
    /* background-color: var(--background-color); */
    border-radius: 8px;
}

.clue{
    font-size: 20px;
    color: #9c9c9c;
    margin-top: 0px;
}

.checkbox-container {
    display: flex;
    align-items: center;
    background: #f5f3eb; /* Светлый фон */
    padding: 10px;
    border-radius: 5px;
    /* margin-bottom: 10px; */
    position: relative; /* Добавляем для абсолютного позиционирования кнопки */
}

.remove-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: #f5f3eb;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1em;
    border-radius: 4px;
    flex-shrink: 0;
    position: absolute;
    left: -65px; /* Сдвигаем кнопку за пределы контейнера */
    top: 50%;
    transform: translateY(-50%); /* Центрируем кнопку по вертикали */
}

.remove-btn:hover {
    background: var(--header-color);
    color: var(--accent-color);
}

div #snils, div #factor, div #medical_events, div #pmo, div #activities_employer, div #activities_employee{
    background-color: var(--background-color);
    border: none;
    padding-left: 20px;
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 40px;
    border-radius: 8px;
    padding-top: 15px;
    padding-bottom: 15px;
    width: 100%;
    color: rgba(0, 0, 0, 0.3);
}

#archive_button, #button_system, #button_contacts, #button_back, .button_back, .title, input[type=button], input[type=submit], .module{
    cursor: pointer;
}

.archive_icons{
    display: flex;
    gap: 5px;
}

#searchButton, #resetButton{
    background-color: var(--background-color);
    border: none;
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    border-radius: 8px;
    height: 50px;
    width: auto;
    padding: 5px 20px;
}

a{
    color: #000;
    text-decoration: none;
}

#consent{
    width: 40px;
    height: 40px;
}


.criteria-section {
    display: flex;
    gap: 50px;
}

.criteria-group {
    flex: 1;
}

.criteria-options {
    display: flex;
    flex-direction: column;
}

.checkbox-group h4 {
    text-align: center;
}

.checkbox-group p {
    text-align: center;
    color: var(--accent-color);
    height: 20px;
}

.respiratory-failure-container {
    text-align: center;
    width: 100%;
}

.respiratory-failure-btn-group {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.respiratory-failure-option {
    flex: 1; /* Равномерное распределение кнопок */
    background-color: #f5f3ee;
    border: none;
    padding: 12px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
}

/* Когда элемент выбран */
.respiratory-failure-option.active {
    background-color: var(--accent-color); /* Красный цвет для активного */
}

.respiratory-failure-option.error, #chemicals-search.error {
    border: 2px solid red; /* Подсвечиваем ошибку */
}

.error-message {
    color: red;
    margin-top: 10px;
    font-size: 14px;
}

.plot-container {
    width: 100%; /* Заполнение всего доступного пространства */
    display: flex;
    justify-content: center; /* Горизонтальное центрирование */
    align-items: center; /* Вертикальное центрирование (если нужно) */
}

.leader-info, .org-info {
    box-sizing: border-box;
    width: 100%;

    margin-bottom: 20px;
    padding: 10px;
}

.leader-info p, .org-info p {
    margin: 5px;
    height: auto;
}

.leader-name {
    color: var(--accent-color)
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.risk-calc-block {
    text-align: center;
    margin: 40px 0;
}

.risk-calc-title {
    color: #bcd2ce; /* светло-зелёный оттенок */
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 32px;
    letter-spacing: 0.5px;
}

.risk-calc-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 12px;
}

.risk-btn {
    font-size: 18px;
    padding: 18px 38px;
    border-radius: 10px;
    border: none;
    box-shadow: 0 4px 6px rgba(44, 62, 80, 0.07);
    cursor: pointer;
    font-weight: 600;
    transition: 0.18s;
}

.risk-btn-light {
    background: #f6f6f2;
    color: #c73232;
    box-shadow: 0 4px 6px rgba(44, 62, 80, 0.11);
}

.risk-btn-red {
    background: #d13a36;
    color: #fff;
    box-shadow: 0 4px 6px rgba(44, 62, 80, 0.17);
    position: relative;
}

.risk-calc-or {
    color: #222;
    font-size: 15px;
    font-weight: 500;
}

.risk-btn-tooltip {
    position: relative;
    display: inline-block;
}

.tooltip-text {
    position: absolute;
    top: 105%;
    left: 50%;
    transform: translateX(-50%);
    color: #222;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 99;
    text-decoration: underline;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.last-calculations{
  margin: 120px auto 0;
  text-align: left;
}

.calc-title{
  color:#bdd1cb;
  font-size:18px;
  text-align:center;
  font-weight:500;
  letter-spacing:1px;
  margin-bottom:14px;
}

.calc-table-wrapper{
  background:#fff;
  border-radius:0;
  padding:0;
}

/* сетка таблицы */
.calc-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
  font-size:16px;
}

/* заголовок */
.calc-table thead th{
  font-weight:600;
  text-align:left;
  padding:14px 14px 12px;
  background:#fff;
  border-bottom:2px solid #d9d7cf;
  color:#222;
  vertical-align:bottom;
  border-right:2px solid #d9d7cf;
}
.calc-table thead th:last-child{ border-right:none; }

/* тело */
.calc-table tbody td{
  padding:12px 14px;
  border-bottom:1px solid #e7e5de;
  background:#fbfbf8;
  color:#333;
  border-right:2px solid #d9d7cf;
}
.calc-table tbody td:last-child{ border-right:none; }

/* чередование строк */
.calc-table tbody tr:nth-child(2n) td{
  background:#f3f2ed;
}

/* нижняя панель управления */
.calc-table-controls{
  display: flex;
  justify-content: space-between; /* архив справа, пагинация по центру */
  align-items: center;
  margin-top: 8px;
  font-size: 15px;
  position: relative;
}

/* пагинация по центру */
.calc-pagination{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  color: #a7a69e;
  letter-spacing: .5px;
}
.calc-pagination-btn{
  cursor: pointer;
  padding: 3px 8px;
  border: 1px solid #e2e1db;
  border-radius: 16px;
  color: #a7a69e;
  user-select: none;
  line-height: 1;
}
.calc-pagination-btn:hover{ background: #f3f2ed; }
.calc-pagination-btn.disabled{
  color: #dfded8;
  border-color: #efeee9;
  cursor: default;
  background: transparent;
}

/* ссылка архив справа */
.calc-table-archive{
  margin-left: auto;
  color: #222;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.calc-table-archive:hover{ color: #699889; }

/* адаптив */
@media (max-width: 700px){
  .last-calculations{ max-width:100%; padding:0 8px; }
  .calc-table thead, .calc-table tbody, .calc-table tr,
  .calc-table th, .calc-table td{ font-size:14px; }
  .calc-table-controls{ flex-direction:column; gap:6px; }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */



.employees-block {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 50px 0 0 0;
}

.employees-title {
    color: #bcd2ce;
    font-size: 18px;
    text-align: center;
    font-weight: 500;
    letter-spacing: 1px;
    margin-bottom: 26px;
}

.employees-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
}

.employees-row {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
}

.emp-input {
    background: #f2f1eb;
    border: none;
    border-radius: 8px;
    padding: 10px 15px;
    flex: 1 1 0;
    min-width: 0;
    font-size: 16px;
    color: #86857e;
    outline: none;
    transition: box-shadow 0.16s;
    box-sizing: border-box;
}

.emp-input[readonly] {
    color: #b7b6b0;
}

.emp-input::placeholder {
    color: #b7b6b0;
    opacity: 1;
}

.emp-actions {
    display: flex;
    gap: 13px;
    flex-shrink: 0;
}

.emp-btn {
    background: #f6f6f2;
    border: none;
    border-radius: 8px;
    padding: 8px 25px;
    font-size: 15px;
    font-weight: 500;
    color: #23221f;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(44, 62, 80, 0.07);
    transition: background 0.13s, box-shadow 0.15s;
}

.emp-btn.red {
    background: #e5eceb;
    color: #d13a36;
    box-shadow: 0 4px 6px rgba(44, 62, 80, 0.11);
}

.emp-btn:not(.red):hover {
    background: #e1e1da;
}

.emp-btn.red:hover {
    background: #faeeec;
    color: #c02121;
}

.add-emp-btn {
    margin-top: 16px;
    background: #d1dad5;
    border: none;
    border-radius: 8px;
    padding: 13px 42px;
    font-size: 17px;
    font-weight: 700;
    color: #23221f;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(44, 62, 80, 0.13);
    transition: background 0.13s, box-shadow 0.15s;
    letter-spacing: 1px;
    display: block;
}

.add-emp-btn:hover {
    background: #c0ccc5;
}

@media (max-width: 900px) {
    .employees-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        width: 100%;
    }
    .emp-actions {
        flex-direction: row;
        justify-content: flex-start;
        gap: 8px;
    }
    .emp-input {
        width: 100%;
        min-width: 0;
    }
    .add-emp-btn {
        width: 100%;
    }
}

.employees-header {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    margin-bottom: 6px;
    margin-left: 2px;
}

.emp-label {
    font-size: 16px;
    color: #23221f;
    opacity: 0.84;
    font-weight: 500;
    flex: 1 1 0;
    min-width: 0;
    letter-spacing: 0.3px;
}

.employees-header .emp-label:last-child {
    flex: none;
    min-width: 120px;
}

.employees-row {
    margin-bottom: 0;
}

.emp-btn.red {
    background: #e5eceb;
    color: #d13a36;
    box-shadow: 0 2px 8px rgba(44,62,80,0.07);
    transition: background 0.13s, color 0.13s;
}
.emp-btn.red:hover {
    background: #f6eaea;
    color: #c02121;
}

.add-emp-btn {
    margin-top: 19px;
    background: #d1dad5;
    border: none;
    border-radius: 8px;
    padding: 13px 42px;
    font-size: 17px;
    font-weight: 700;
    color: #23221f;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(44,62,80,0.11);
    letter-spacing: 1px;
    display: block;
    margin-left: 0;
    margin-bottom: 0;
    transition: background 0.13s, box-shadow 0.15s;
}

.add-emp-btn:hover {
    background: #c0ccc5;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ 

.dashboard-panel {
    margin: 36px auto 0;
    font-family: Arial, sans-serif;
    text-align: center;
}
.dashboard-title {
    color: #bcd2ce;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-bottom: 18px;
}
.dashboard-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
}
.dashboard-left {
    min-width: 225px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-top: 32px;
}
.dashboard-count {
    background: #f6f6f2;
    border-radius: 8px;
    font-size: 17px;
    padding: 9px 18px 9px 18px;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    width: 80%;
    min-width: 210px;
    align-items: center;
    gap: 9px;
    box-shadow: 0 2px 6px rgba(44,62,80,0.07);
}
.count-red { color: #c73232; font-weight: 600; font-size: 17px; }
.count-bold { font-weight: 700; font-size: 17px; }
.dashboard-link {
    margin-top: 14px;
    color: #23221f;
    text-decoration: underline;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: color 0.13s;
    text-underline-offset: 3px;
}
.dashboard-link:hover { color: #699889; }
.dashboard-link-arrow {
    font-size: 18px;
    margin-top: -2px;
}

.dashboard-charts {
    display: flex;
    flex-direction: row;
    gap: 32px;
    justify-content: center;
    flex: 1 1 auto;
    /* width: 340px; */
}
.dashboard-chart {
    min-width: 290px;
    flex: 1 1 0;
    max-width: 370px;
    margin: 0 0 0 0;
}
.dashboard-chart-title {
    font-size: 13px;
    color: #222;
    margin-bottom: 8px;
    text-align: center;
    font-weight: 500;
    line-height: 1.4;
}
.chart-pie, .chart-bar {
    width: 100%;
    min-height: 220px;
    height: 230px;
    font-size: 13px;
    margin-bottom: 8px;
}

.dashboard-years {
    min-width: 120px;
    max-width: 140px;
    background: #fff;
    border: 2px solid #ececec;
    border-radius: 16px;
    padding: 16px 10px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    align-items: stretch;
    margin-top: 2px;
}
.year-btn {
    background: #e5eceb;
    color: #23221f;
    border: none;
    border-radius: 8px;
    padding: 10px 0;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 0;
    transition: background 0.15s, color 0.15s;
}
.year-btn.active, .year-btn:focus {
    background: #d13a36;
    color: #fff;
    font-weight: 600;
}
.year-btn:not(.active):hover {
    background: #e1e1da;
}

@media (max-width: 950px) {
    .dashboard-main {
        flex-direction: column;
        align-items: stretch;
    }
    .dashboard-charts {
        flex-direction: column;
        gap: 18px;
        align-items: center;
    }
    .dashboard-years {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        max-width: 100%;
        margin: 18px 0 0 0;
        padding: 9px 5px;
        gap: 8px;
    }
}







cta-wrapper {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.cta-access {
    background-color: var(--button-color); /* как у .data_archive */
    width: 800px;
    height: 80px;            /* можно уменьшить по сравнению с архивом */
    font-weight: 600;
    font-size: 22px;         /* поменьше, чем 35px */
    text-align: center;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    border: none; 
}





/* === Общий контейнер блока === */
.risk-info {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0px 2px 6px rgba(0,0,0,0.15);
    padding: 30px;
    margin: 30px auto;
    max-width: 1600px;
}
/* Группа: заголовок + сама колонка */
.risk-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.risk-group .col-header {
  text-align: left;
  align-self: flex-start;
}

/* Левая группа прижимается влево, правая — вправо */
.risk-group:first-child { align-items: flex-start; }
.risk-group:last-child  { align-items: flex-end;   }

/* Заголовок блока */
.risk-title {
    color: #d32f2f; /* красный */
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 15px;
    text-align: center;
}

/* Подзаголовок */
.risk-subtitle {
    text-align: center;
    margin-bottom: 30px;
    font-size: 20px;
    line-height: 1.5;
}

.risk-learn {
    text-align: center;
    margin-bottom: 30px;
    font-size: 15px;
    line-height: 1.5;
}

/* Колонки по краям и центрирование блока относительно середины */
.risk-columns {
  display: flex;                 /* вместо grid */
  justify-content: space-between;/* левая у левого края, правая у правого */
  align-items: center;           /* вертикально по центру друг относительно друга */
  gap: 25px;
}

/* Каждая колонка */
.risk-col {
    background: #f6f6f2;
    border-radius: 6px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 260px;
}

/* Заголовок колонки */
.col-header {
    font-size: 20px;
    font-weight: 700;
    color: #8ba3a3;
    margin-bottom: 10px;
    text-transform: uppercase;
}

/* Карточки */
.risk-card {
    background: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.risk-card b {
    display: block;
    margin-bottom: 6px;
}

.risk-card ul {
    padding-left: 20px;
    margin: 0;
}

.risk-card li {
    margin-bottom: 6px;
}

/* ====================== */
/* ЛЕВАЯ КОЛОНКА (горизонтальные стрелки) */
/* ====================== */
.risk-text {
    display: flex;
    flex-direction: column; /* стрелка сверху, текст под ней */
    align-items: flex-start;
    margin-top: 8px;
}

.arrow {
    display: block;
    width: 25%;
    height: 2px;
    background: #000;
    position: relative;
    margin-bottom: 10px;
}

.arrow::after {
    content: "▶";           /* наконечник стрелки */
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #000;
}

/* ====================== */
/* ПРАВАЯ КОЛОНКА (вертикальные стрелки) */
/* ====================== */
.right-col .risk-row {
    display: flex;
    align-items: flex-start;   /* стрелка слева, текст справа */
    gap: 12px;
    margin-bottom: 20px;
}

.right-col .arrow {
    width: 2px;
    background: #000;
    position: relative;
    flex-shrink: 0;
}

/* Стрелка вверх */
.right-col .arrow-up {
    height: 110px;
}
.right-col .arrow-up::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 10px solid #000;
}

/* Стрелка вниз */
.right-col .arrow-down {
  height: 110px;
  width: 2px;
  background: #000;
  position: relative;
}

.right-col .arrow-down::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;                /* прямо под линией */
  transform: translateX(-50%);
  width: 0; height: 0;      /* классический "треугольник" */
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid #000; /* направлен вниз */
}

.right-col .arrow-up::after {
    content: none !important;
}

/* ====================== */
/* Адаптивность */
/* ====================== */
@media (max-width: 900px) {
  .risk-columns { 
    flex-direction: column;
    align-items: stretch;
  }
  .risk-group:last-child { align-items: flex-start; }
}





.risk-methodology {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0px 2px 6px rgba(0,0,0,0.15);
    padding: 30px;
    margin: 30px auto;
    max-width: 1600px;
}

.risk-methodology .risk-title {
    color: #d32f2f;
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 15px;
}

.risk-methodology .risk-subtitle {
    text-align: center;
    margin: 20px 0;
    font-size: 20px;
    line-height: 1.5;
}

.cta-wrapper {
    text-align: center;
    margin: 20px 0;
}

.cta-doc {
    background: #d9e5e4;
    border: none;
    padding: 10px 25px;
    font-size: 30px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Контейнер карточек — центрируем, делаем «три по центру» */
.criteria-cards{
  display: flex;               /* вместо grid */
  justify-content: center;     /* весь блок по центру */
  align-items: stretch;
  gap: 80px;                   /* как на втором скрине */
  max-width: 980px;            /* чтобы не растягивалось на всю ширину */
  margin: 18px auto 24px;      /* отступы сверху/снизу и авто по бокам */
  padding: 0 10px;
  flex-wrap: nowrap;           /* на десктопе в одну строку */
}

/* Карточка */
.criteria-card{
  background: #f6f6f2;
  border-radius: 8px;
  padding: 16px 18px;
  flex: 0 0 300px;             /* визуально как «фикс-ширина» */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  font-size: 14px;
  line-height: 1.4;
  color: var(--);
}

/* Заголовок внутри карточки — плотнее и темнее */
.criteria-card p{
  margin: 0;
}
.criteria-card p b{
  display: inline-block;
  font-size: 20px;
  line-height: 1.2;
  color: #2f2f2f;
}
.criteria-card p + p{
  margin-top: 8px;             /* отступ между заголовком и текстом */
  font-size: 18px;
}

/* Адаптив: на узких экранах переходим в две/одну колонку, но центр держим */
@media (max-width: 960px){
  .criteria-cards{ flex-wrap: wrap; }
  .criteria-card{ flex: 1 1 280px; }
}
@media (max-width: 600px){
  .criteria-card{ flex: 1 1 100%; }
}

.risk-result{
  color: #000;          /* весь текст — чёрный */
  font-size: 20px;
  margin-top: 25px;
  padding: 80px;
}

.risk-result b,
.risk-result strong{
  color: #d32f2f;       /* только жирная часть — красная */
}

.scheme {
  text-align: center;
  margin-top: 20px;
}

.scheme img {
  width: 75%;          /* уменьшили */
  max-width: 800px;    /* ограничение сверху */
  height: auto;
  border: 1px solid #ddd;
  border-radius: 6px;
}

/* На узких экранах — во всю ширину */
@media (max-width: 600px){
  .scheme img { width: 100%; max-width: none; }
}






/* Контейнер и заголовок блока — как было */
.risk-steps {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  padding: 30px;
  margin: 30px auto;
  max-width: 1600px;
}
.risk-steps .risk-title {
  color: #d32f2f;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
}

/* Список шагов */
.steps-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 70%;
  margin-left: 240px;
}

/* Один шаг: чип слева, описание справа */
.step-item{
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ЧИП: сплошная плашка, внутри цифра светлее */
.step-chip{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--button-color);
  border-radius: 9999px;
  padding: 6px 14px 6px 6px; /* слева меньше — под кружок */
  flex-shrink: 0;
}

/* Кружок с цифрой — светлее */
.step-number{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--background-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  color: #000;
}

/* Заголовок внутри чипа */
.step-title{
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  color: #000;
  white-space: nowrap;   /* как на макете — в одну строку */
  margin: 0;
  padding: 0;
  background: transparent;  /* на случай старых стилей */
  border-radius: 0;
}

/* Описание справа от чипа */
.step-desc{
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  color: #000;
  flex: 1 1 auto;
  min-width: 0;
}

/* Адаптив */
@media (max-width: 768px){
  .step-item{
    align-items: flex-start;
    gap: 10px;
  }
  .step-desc{
    margin-top: 6px;
  }
  .step-title{ white-space: normal; } /* разрешаем перенос на мобилках */
}





.request-access{
  background:#fff;
  border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  padding:30px;
  margin:30px auto;
  max-width:1600px;
}

.request-access .risk-title{
  color:#d32f2f;
  font-size:20px;
  font-weight:700;
  margin-bottom:20px;
  text-align:center;
}

/* Внутренний бежевый блок по центру и не на всю ширину */
.request-form{
  background:var(--background-color);
  padding:22px;
  border-radius:10px;
  max-width:900px;      /* как на скрине */
  margin:0 auto;
}

/* Каждая строка — СЕТКА из двух равных колонок */
.form-row{
  display:grid; 
  grid-template-columns: repeat(2, minmax(300px, 1fr));
  column-gap:44px;      /* горизонтальный промежуток, как на фото */
  row-gap:0;
  align-items:start;
  margin-bottom:16px;   /* вертикальный промежуток между строками */
}

/* Чтобы поля не «схлопывались» в гриде */
.form-group{ 
  min-width:0; 
}

/* Подпись + поле */
.form-group label{
  display:block;
  margin:0 0 6px;
  font-size:14px;
  font-weight:600;
  color:#1d1d1d;
}
.form-group input{
  width:100%;           /* растянуть на всю ячейку */
  height:44px;
  padding:10px 14px;
  background:var(--white-color);
  border:1px solid rgba(0,0,0,.08);
  border-radius:8px;
  font-size:14px;
  box-sizing:border-box;
}

/* чекбокс и текст — как на макете: чёрный текст, ссылка подчёркнута */
.form-agree{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:#000;
  margin:6px 0 20px;
}
.form-agree a{
  color:#000;
  text-decoration:underline;
}
.form-agree input[type="checkbox"]{
  appearance:none;
  width:18px; height:18px;
  border:2px solid #d7d7d7;
  border-radius:4px;
  background:#fff;
  box-shadow:0 1px 1px rgba(0,0,0,.06) inset;
  cursor:pointer;
}
.form-agree input[type="checkbox"]:checked{
  background:#d32f2f;
  border-color:#d32f2f;
  position:relative;
}
.form-agree input[type="checkbox"]:checked::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(#fff,#fff) left 6px top 8px / 6px 2px no-repeat,
    linear-gradient(#fff,#fff) left 8px top 10px / 10px 2px no-repeat;
  transform:rotate(-45deg);
}

/* кнопка — крупная, с лёгким «тиснением» */
.form-submit{ text-align:center; }
.btn-submit{
  background:linear-gradient(#d94139, #c8372f);
  color:#fff;
  border:none;
  padding:14px 36px;
  font-size:16px;
  font-weight:800;
  border-radius:8px;
  cursor:pointer;
  box-shadow:0 3px 0 #a62e28, 0 6px 12px rgba(0,0,0,.2);
  text-transform:uppercase;
  letter-spacing:.3px;
}
.btn-submit:hover{ filter:brightness(.98); }
.btn-submit:active{ transform:translateY(1px); box-shadow:0 2px 0 #a62e28, 0 4px 8px rgba(0,0,0,.2); }

/* адаптив */
@media (max-width: 768px){
  .form-row{ grid-template-columns:1fr; }
}




.contacts-block{
  background:#fff;
  border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  padding:24px 28px;
  margin:30px auto;
  max-width: 1600px;          /* как на макете — не на всю ширину */
  font-size:15px;
  line-height:1.6;
  color:#000;
  display: flex;
  justify-content: center;
  
}
.contacts-wrap{
  width: 100%;
  max-width: 900px;         /* подгони при желании (800–1000px) */
  margin: 0 auto;           /* на случай других родителей */
  box-sizing: border-box;
}

/* Заголовок с иконкой */
.contacts-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.contacts-icon{
  font-size:22px;           /* крупнее, как на фото */
  line-height:1;
}
.contacts-title{
  font-weight:800;
  font-size:20px;
}

/* Текстовые блоки и отступы */
.contacts-block p{
  margin:0;
}
.contacts-block p + p{
  margin-top:18px;          /* расстояние между абзацами */
}

/* Ссылки — чёрные, подчёркивание только при ховере */
.contacts-block a{
  color:#000;
  text-decoration:none;
}
.contacts-block a:hover{
  text-decoration:underline;
}

/* Красное ФИО как на скрине */
.contacts-block .fio{
  color:#d32f2f;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}

.select-data {
    height: 350px;;
}

.select-data-content {
    display: flex;
    justify-content: space-between;
}

.select-data-form {
    width: 41%;
}

.period-row {
    display: flex;
    gap: 15px;
    
}

#period,
#date-to {
    font-size: 25px;
    font-weight: 400;
    width: 180px !important;
}

#org {
    font-size: 25px;
    font-weight: 400;
}

.period-field label,
.org-field label,
.stat {
    font-weight: 400;
    font-size: 25px;
}

.arrow-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 55px 0;
    /* width: 20%; */
    align-items: center;
}

.arrow-item {
  position: relative;
  width: 80px;    /* длина линии стрелки */
  height: 2px;    /* толщина линии */
  background: black;
  width: 120px;

}

.arrow-item::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 10px;
  height: 10px;
  border-top: 2px solid black;
  border-right: 2px solid black;
  transform: translateY(-50%) rotate(45deg);
}

.org-row {
    display: flex;
    gap: 45px;
}

input[name="from"], input[name="to"] {
    width: 50% !important;
}

select[name="org"] {
  width: 100%;
}

.stats {
    width: 41%;;
}

.stat {
    display: flex;
    margin: 12px 0;
    justify-content: space-between;
}

.muted-note {
    font-size: 15px;
}

.actions {
    margin-top: 100px;        /* отправит actions вниз */
    text-align: center;      /* центрирует кнопку */
}

.pill {
    background-color: var(--background-color);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 10%;
}

.pill.accent {
    color: var(--accent-color);
}

.submit-btn {
    background-color: var(--button-color); /* как у .data_archive */
    width: 20%;
    height: 80px;            /* можно уменьшить по сравнению с архивом */
    font-weight: 600;
    font-size: 25px;         /* поменьше, чем 35px */
    text-align: center;
    margin: auto;
    border-radius: 8px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    border: none;
}


.upper-info-table {
    display: flex;
    justify-content: center;
}

.upper-info-group-risk {
    display: flex;
    justify-content: space-between;
}

.terms-list {
    background-color: #E7EFEF;
    border-radius: 8px;
    /* width: 40%; */
    padding: 10px 0;
    height: 350px;
    margin-top: 50px;
}

.term{
    display:grid; 
    grid-template-columns:64px 1fr; 
    gap:8px; 
    align-items:start; 
    padding: 3px 10px;
}

.term .abbr {
    font-size: 16px;
    white-space: nowrap;
    font-weight: 600;
}

.abbrs, .kr-item .abbr {
    font-size: 16px;
    white-space: nowrap;
}



.table-title {
    font-weight: bold;
    font-size: 14px;
}

.period-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 300px;
}

.period-table th,
.period-table td {
    border: 3px solid #ccc;
    padding: 4px 10px;
    text-align: center;
    font-size: 18px;
}

.period-table th {
    background-color:  var(--background-color);
    font-weight: bold;
}

.period-table td:first-child {
    text-align: left;
}

.period-table tr.total-row td {
    font-weight: bold;
    background-color:  var(--background-color)
}

.period-table tr:nth-child(even):not(.total-row) {
    background-color: var(--background-color);
}





.my-pie-info {
    display: flex;
    align-items: center;   /* выравнивание по центру по вертикали */
    justify-content: center; /* если нужно ещё и по центру по горизонтали */
    height: 100%;          /* важно: задать высоту контейнера */
}

.pie-legend {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    
}

.legend-item {
    display: flex;
    justify-content: flex-start;
    gap: 5px;

}
.desc {
    font-size: 16px;
    margin-left: 5px;
    font-weight: 300;
}

.kr-item .desc {
    background-color: var(--background-color);
    white-space: nowrap;
    width: 200px;
}


.descs {
    background-color: var(--background-color);
    border-radius: 8px;
}

.dots {
    margin-top: 4px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-bottom: 8px;
}

.d1 { background: #f1efe7; } /* ГР 1 */
.d2 { background: #eaf0f0; } /* ГР 2 */
.d3 { background: #b8c8c2; } /* ГР 3 */
.d4 { background: #de6e6e; } /* ГР 4 */
.d5 { background: #b81116; } /* ГР 5 */

.lower-info {
    display: flex;
    justify-content: space-between;
}

.mean-bar-container {
    display: flex;
    justify-content: flex-start;
}

.lower-info-kriteria {
    display: flex;
    justify-content: flex-start;
}

.kr-legend {
    display: flex;
    /* justify-content: flex-start; */
    flex-direction: column;
    margin-top: 130px;

}

.kr-item {
    display: flex;
    justify-content: flex-start;
}

.chart-title {
    font-size: 18px;
    height: 25px !important;
    white-space: nowrap;
    font-weight: 600;
    margin-bottom: 40px;
    text-align: center;
}

.first-row-container.noise, 
.first-row.local_vibro, 
.first-row.common_vibro,
.first-row.hard_work,
.first-row.apdf  {
    display: flex;
    justify-content: space-between;
}

/* .second-row.noise,
.second-row.local_vibro, 
.second-row.common_vibro,
.second-row.hard_work,
.second-row.apdf  {
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between;
} */

.pie-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.table-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}


.pie-container-with-filters {
    display: flex;
    justify-content: space-between;
}

.filter-container {
    display: flex;
    flex-direction: column;
    align-items: center; 
    gap: 10px;
    margin-bottom: 10px; 
}

.filter-container p {
    font-weight: 300;
    font-size: 16px;
    white-space: nowrap;
}

.filter-container button {
    background-color: var(--background-color);
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    width: 100px;
    font-weight: 300;
    font-size: 16px;
}


.filter-container button:hover {
  background: #eee;
}


.pie-desc-lower {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.p-header {
    font-weight: 600;
    font-size: 18px;
}
.p-desc {
    font-weight: 300;
    font-size: 18px;;
}

.p-title {
    /* display: flex;
    justify-content: space-between; */
    font-weight: 600;
    font-size: 18px;
    text-align: center;
    height: 40px !important;
}



.second-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}


.calendar-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    vertical-align: middle;
}

.calendar-btn img {
    width: 28px;
    height: 28px;
}

.form-icon {
    width: 45px;
    height: 45px;
}

.date-popup {
    position: absolute;
    background: var(--white-color);
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 10;
}

.date-popup.hidden {
    display: none;
}

.date-popup label {
    font-size: 14px;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
}




/* --- Фиксированное меню справа --- */
.side-nav {
  position: fixed;
  right: 0;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 12px 0 0 12px;
  z-index: 1000;

  /* базовая и активная ширина */
  --item-w: 200px;
  --item-w-active: 250px;
  --shift: calc(var(--item-w-active) - var(--item-w));
}

/* --- Кнопки навигации --- */
.side-nav-item {
  position: relative;
  background: #fff;
  border: 1px solid #c9d4d1;
  border-radius: 8px 0 0 8px;
  padding: 10px 20px 10px 18px;
  text-align: left;
  cursor: pointer;
  font-size: 20px;
  font-weight: 300;
  width: var(--item-w);
  transition: width .3s ease, transform .3s ease, background-color .2s ease, border-color .2s ease;
  transform: translateX(0);              /* базово без смещения */
}

.side-nav-item:hover {
  background-color: #e5efec;
}

/* --- Активный пункт: шире и выезжает влево --- */
.side-nav-item.active {
  background-color: var(--button-color);
  border-color: #98b8b0;
  font-weight: 600;
  font-size: 25px;
  width: var(--item-w-active);
  transform: translateX(calc(-1 * var(--shift)));  /* вынос влево на разницу ширин */
  z-index: 1;
}




/* Оверлей поверх всего экрана */
#loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.3s ease;
}

/* Прячем по умолчанию */
#loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Красивая анимация */
.loader {
    border: 4px solid #eee;
    border-top: 4px solid #d44;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin-bottom: 12px;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.loading-text {
    font-size: 1.1rem;
    color: #333;
    font-weight: 500;
}