/* Вся страница */
/* Определение шрифта */
@font-face {
    font-family: 'Rosatom';
    src: url('/static/fonts/RST55.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
}

.rootpage {    
    width: 100vw;
    height: 100vh;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    background-color: #F7F7F7; /*цвет потом под замену как цвет фона*/
    flex-direction: column;
    font-family: 'Rosatom', sans-serif;
}

/* Блок header. В него вложены 3 столбца: лого, наименование, кнопки */
.headerpage {
    width: 100vw;
    height: 6.1962vh;
    display: flex;
    flex-direction: row;
    justify-content: center
}

.header_column_1 {
    flex: 1;
    justify-content: left;
    background-color: #FFFFFF;
    height: 6.1962vh;
    border-top-left-radius: 20px;
}

.header_column_2 {
    flex: 2;
    height: 6.1962vh;
    background-color: #FFFFFF;
}

.header_column_3 {
    flex: 1;
    justify-content: right;
    height: 6.1962vh;
    border-top-right-radius: 20px;
    background-color: #FFFFFF;
}

/* atom_mind_logo */
.headerlogo {
    display: flex;
    width: 9.375vw;
    height: 3.5318vh;
    margin-left: 2.0833vw;
    margin-top: 1.4630vh;
    /*left: 40px;
    top: 17px;
    width: 180px;
    height: 20.04px;*/
}
.headername {
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 6.0vh;
    font-size: 2.4957vh;
    font-weight: bold;
    color:#3C3B3A;
}
.headerenter {
    display: flex;
    justify-content: right;
    align-items: center;
    text-align: center;
    height: 6.2vh;
}
.custom-btn {
    display: flex;
    background-color: #025EA1; /* Цвет фона */
    color: white; /* Цвет текста */
    border: none; /* Убираем границу */
    border-radius: 20px;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 4.3229vw;
    height: 3.0120vh;
    margin-right: 1.2911vw;
    font-size: 1.6351vh;
}
.mlmodel-btn {
    position: absolute;
    display: flex;
    background-color: #6E6E6E; /* Цвет фона */
    color: white; /* Цвет текста */
    border: none; /* Убираем границу */
    border-radius: 20px;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 6.0229vw;
    height: 3.0120vh;
    margin-right: 1.2911vw;
    margin-left: 40vw;
    font-size: 1.6351vh;
}

.custom-btn:hover {
    background-color: #0891f3; /* Цвет при наведении */
}

.block-content {
    background-color: #F7F7F7; /*цвет потом под замену как цвет фона*/
    padding-top: 1.5vh;
    padding-bottom: 1.5vh;
    /* padding-left: 0.52083vw; */
    padding-right: 0.52083vw;
    width: 100vw;
    height: 93.80vh;
    display: flex;
    flex-direction: row;
}
/*Левое меню с фильтрами и списком сотрудников*/
.block-list {
    width: 14.63542vw;
    height: 91.5vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* border: 1px solid black; */
}
/*Фильтры*/
.filtrs {
    width: 12.1875vw;
    height: 5.0775vh;
    display: flex;
    flex-direction: column;
    margin-bottom: 1vh;
}
.filtrs-name {
    display: flex;
    height: 1.6351vh;
    font-size: 1.3769vh;
    color: #6E6E6E;
    align-items: center;
}
.filtrs-spisok {
    display: flex;
    border-radius: 20px;
    width: 12.1vw;
    height: 3.25vh;
    background-color: #EDEDED;
    flex-direction: row;
    color: #025EA1; 
    white-space: normal; /* Разрешаем перенос текста */
    word-wrap: break-word; /* Разбиваем длинные слова */
    font-size: 1.5vh;
    line-height: 1;
}
.dropdown-menu {
    --bs-dropdown-font-size: 1.5vh;
    --bs-dropdown-link-active-bg:#025EA1;
}
.dropdown-item {
    color:#025EA1;
    --bs-dropdown-item-padding-y: 0.25vh;
    max-width: 100%;
    white-space: normal; /* Разрешает перенос текста на новую строку */
    word-wrap: break-word;
}
.date-down-menu{
    width: 12vw;
    text-align: center;
}
.btn {
    --bs-border-width:none;
}
.btn.show {
    --bs-btn-active-bg:#d1d0d0;
}
.btn:hover {
    /* color: var(--bs-btn-hover-color); */
    --bs-btn-hover-bg: #d1d0d0;
    border-color: none;
}
.btn-sm {
    --bs-btn-font-size: 0.65rem;
}

.search {
    width: 12.1875vw;
    height: 3.4423vh;
    /* border: 1px solid black; */
    border-radius: 20px;
    background-color: #FFFFFF;
    margin-top: 1vh;
    margin-bottom: 2vh;
    display: flex;
    flex-direction: row;
    /* justify-content: center; */
    align-items: center;
}
.icon-search-container {
    display: flex;
    height: 2.2vh;
    justify-content: center;
    align-items: center;
    /* border: 1px solid black; */
    margin-left: 0.7vw;
}

#search-input {
    height: 2.2vh;
    margin-left: 0.2vw;
    border: none;
    width: 10vw;

}
/* Стиль и структура отображения списка сотрудников */
.staff-list {
    width: 14.63542vw;
    height: 55.678vh;
    display: flex;
    /* border: 1px solid black; */
    flex-direction: column;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    scrollbar-width: none; /* Для Firefox */
    -ms-overflow-style: none; /* Для IE и Edge */
}
.staff-list::-webkit-scrollbar {
    display: none; /* Полностью скрываем скроллбар */
}
.staff-list ul {
    width: 100%;
    height: 100%;
    margin: 0; /* Обнуление внешних отступов */
    padding: 0; /* Обнуление внутренних отступов */
}
.staff-list ul li {
    list-style: none;
    width: 100%;
    height: 9.2796vh;
    display: flex;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s;
    justify-content: center;
}
.staff-list ul li:hover {
    background-color: #d1d0d0;
}
.staff-list ul li.selected {
    background-color: #ffffff;
}
/* Добавляем серую полосу перед каждым элементом */
.staff-list ul li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    /* width: 100%; */
    height: 1px; /* Толщина линии */
    background-color: #ccc; /* Цвет линии */
    left: 20px; 
    right: 20px;
    width: auto;
    transform: translateZ(0);
}
.staff-list ul li:last-child::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    background-color: #ccc;
    left: 20px;
    right: 20px;
    width: auto;
    transform: translateZ(0);
}

/* .staff-list li::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80%;
    height: 1px;
    background-color: #D4D1D1;
    transform: translateY(50%);
    margin-left: 41px;
} */
/* Контейнер карточки сотрудника в списке */
.staff-list-li-container {
    display: flex;
    /* border: 1px solid black; */
    width: 12.1875vw;
    height: 9.2796vh;
    flex-direction: column;
}
.staff-list-li-container-row1 {
    display: flex;
    margin-top: 0.65vh;
    margin-right: 0.344vh;
    margin-left: 0.344vh;
    /* border: 1px solid black; */
    height: 1.7vh;
    justify-content: flex-end;
    font-size: 1.2vh;
    padding-top: 0px;
    line-height: 1.5vh;
    flex-direction: row;
}
.staff-list-li-container-row1-el-1 {
    display: flex;
    /* border: 1px solid black; */
    justify-content: center;
    align-items: center;
    width: 0.9vw;
}
.staff-list-li-container-row1-el-2 {
    /* border: 1px solid black; */
    width: 6vw;
    border-radius: 4px;
    font-size: 1.5vh;
    padding-top: 0px;
    line-height: 1.5vh;
    justify-content: flex-start;
    margin-left: 0.2vw;
    padding-left: 0.4vw;
}
.staff-list-li-container-row2 {
    display: flex;
    margin-top: 0.15vh;
    margin-right: 0.344vh;;
    /* border: 1px solid black; */
    height: 5.6vh;
    margin-left: 0.52vw;
}
.staff-list-li-container-row2-el1 {
    height: 3vh;
    width: 1.5625vw;
}
.staff-list-li-container-row2-el1 img {
    height: 3vh;
    width: 1.5625vw; /* Фиксированная высота изображения */
    object-fit: cover; /* Сохраняем пропорции изображения */
    border-radius: 50%;
}
.staff-list-li-container-row2-el2 {
    height: 5.50vh;
    width: 6.15vw;
    /* border: 1px solid black; */
    margin-left: 3px;
    font-size: 1.3vh;
    line-height: 1.3;
}
.staff-list-li-container-row2-el3 {
    height: 5.50vh;
    width: 4.8vw;
    /* border: 1px solid black; */
    margin-left: 3px;

}


.save-list {
    margin-top: 6.5vh;
    width: 11.6145vw;
    height: 2.6817vh;
    display: flex;
    justify-content: center;
    /* border: 1px solid black; */
  }
  
  .save-staff-list {
    /* border: 1px solid black; */
    display: flex;
    width: 100%;
    align-items: center;
    gap: 1vw;
    background-color: #F7F7F7;
    color: rgba(51, 51, 51, 1);
    border: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
  }
  
  .save-staff-list:hover {
    background-color: #d1d0d0;
}
.save-staff-list:active {
    background-color: #FFFFFF; /* Цвет фона при нажатии */
}
.icon-save-container {
    position: relative;
    height: 2.5vh;
}
.icon-back {
    width: 100%; /* Первое изображение занимает весь контейнер */
    height: 100%;
    display: block; /* Убираем лишние отступы */
    z-index: 1;
}
.icon-icon {
    position: absolute; /* Позиционируем второе изображение абсолютно */
    top: 50%; /* Центрируем по вертикали */
    left: 50%; /* Центрируем по горизонтали */
    transform: translate(-50%, -50%); /* Корректируем центр */
    z-index: 2;
}

/*Блок информации о персонале*/
.block-personal {
    /* border: 1px solid black; */
    width: 84.32292vw;
    height: 91.5vh;
    border-radius: 20px;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
}
.employee-name {
    margin-top: 2.6678vh;
    margin-left: 1.71875vw;
    width: 80vw;
    height: 3.95869vh;
    display: flex;
    /* border: 1px solid black; */
    font-size: 2.75387vh;
    color: #025EA1;
    align-content: center;
    flex-direction: row;
}
.employee-name-image {
    display: flex;
    /* border: 1px solid black; */
    height: 3.65vh;
    width: 2.88vw;
    border-radius: 20px;
    margin-left: 1vw;
}
.employee-name-image img {
    max-width: 100%; /* Изображение не будет шире контейнера */
    /* height: auto;    Высота подстраивается пропорционально */
    border-radius: 20px;
}
.employee-name-fio {
    height: 100%;
    width: 100%;
    padding-left: 0px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: left;
    text-align: left;
}
/*Блок серых прямоугольников со сводной информацией по предиктам*/
.data-blocks {
    /* border: 1px solid black; */
    width: 80vw;
    height: 10.843373vh;
    display: flex;
    margin-left: 1.71875vw;
    flex-direction: row;
}
.data-block {
    display: flex;
    /* border: 1px solid black; */
    border-radius: 20px;
    height: 10.8vh;
    width: 15.41vw;
    flex-direction: column;
    align-items: center;
    background-color: #F8F8F9;
    
}
.data-block-superblock {
    border: 1px solid rgba(51, 51, 51, 1);;
}
.data-block-row-1 {
    display: flex;
    margin-top: 0.43029vh;
    margin-right: 0.7vw;
    margin-left: 0.7vw;
    width: 14.50vw;
    height: 2.2vh;
    justify-content: right;
    align-items: center;
}
.data-block-row-1-znak {
    display: flex;
    background-color: #FFFFFF;
    justify-content: center; /* Центрирование по горизонтали */
    align-items: center;
    text-align: center;
    border: 1px solid #d1d0d0;
    width: 1.05vw;
    height: 2.1vh;
    border-radius: 20px;
    font-size: 1.5vh;
    color: #d1d0d0;
    line-height: 2.1vh;
}
.data-block-row-1-znak:hover {
    background-color: #d1d0d0;
    border: 1px solid #025EA1;
    color: #025EA1;
}
.data-block-row-2 {
    display: flex;
    width: 14.50vw;
    height: 2.0654vh;
    font-size: 1.8vh;
    justify-content: center;
    align-items: flex-start;
    line-height: 1.8vh;
    color: #333333;
}
.data-block-row-3 {
    display: flex;
    width: 14.50vw;
    height: 3.27vh;
    justify-content: center;
    align-items: center;
    font-size: 3.2vh;
    color: #0B1F35;
    flex-direction: row;
    font-weight: 700;
}
.data-block-row-3-znak {
    display: flex;
    width: 1.34vw;
    height: 1.8vh;
}
.data-block-row-3-znach {
    display: flex;
    font-weight: 700;
    margin-left: 0.5vw;
}
.data-block-row-3-zodiac {
    display: flex;
    width: 14.50vw;
    height: 3.27vh;
    justify-content: center;
    align-items: center;
    font-size: 3.2vh;
    color: #0B1F35;
    flex-direction: row;
    font-weight: 700;
}
.data-block-row-3-zodiacznak {
    display: flex;
    width: 1.8vw;
    height: 3vh;
}
.data-block-row-4 {
    display: flex;
    width: 14.50vw;
    height: 3.27vh;
    align-items: flex-start;
    justify-content: center;
    font-size: 1.3769vh;
    color: #333333;
    
}
.data-block-whitespace {
    margin-right: 0.7375vw;
}
.heat-line {
    /* border: 1px solid black; */
    width: 80vw;
    height: 2.84vh;
    display: flex;
    margin-left: 1.71875vw;
    flex-direction: column;
    margin-top: 1.3vh;
    /* align-items: center; */
    /* justify-content: center; */
}
.heat-line-line {
    /* border: 1px solid black; */
    width: 80vw;
    height: 1.2vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
.heat-line-gradient-line {
    position: relative;
    width: 80vw; /* Ширина линии равна ширине viewport */
    height: 2px;
    background: linear-gradient(
      to right,
      #FD6925 0%, /* Оранжевый слева */
      #feaf8a 35%, /* Оранжевый слева */
      #FCC30B 40%, /* Желтый начинается на 58% */
      #91df72 44%, /* Зеленый справа */
      #56C02B 100% /* Зеленый справа */
    );
  }
.gradient-line-point {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    width: 5px;
    height: 5px;
    background-color: black; /* Цвет самой точки */
    border-radius: 50%; /* Делаем точку круглой */
    box-shadow: 0 0 0 2px white; /* Белая рамка вокруг точки */
    transition: left 0.2s ease; /* Плавное перемещение точки */
    opacity: 0;
}
.gradient-line-point.visible {
    opacity: 1;
}
.heat-line-legend {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* border: 1px solid black; */
    width: 100%;
    height: 1.6vh;
}
.heat-line-legend-col-1 {
    display: flex;
    width: 30%;
    /* border: 1px solid black; */
    height: 1.6vh;
    font-size: 1.5vh;
    color: rgba(107, 114, 128, 1);
    padding: 0;
    margin: 0;
    line-height: 1; 
    justify-content: flex-start;
    
}
.heat-line-legend-col-2 {
    display: flex;
    width: 20%;
    /* border: 1px solid black; */
    height: 1.6vh;
    font-size: 1.5vh;
    color: rgba(107, 114, 128, 1);
    padding: 0;
    margin: 0;
    line-height: 1;
    justify-content: center;
}
.heat-line-legend-col-3 {
    display: flex;
    width: 50%;
    /* border: 1px solid black; */
    height: 1.6vh;
    font-size: 1.5vh;
    color: rgba(107, 114, 128, 1);
    padding: 0;
    margin: 0;
    line-height: 1;
    justify-content: flex-end;
}
.detail-info {
    /* border: 1px solid black; */
    width: 80vw;
    height: 65vh;
    display: flex;
    margin-left: 1.71875vw;
    margin-top: 1.32358vh;
    flex-direction: row;
}
/* Карточка сотрудника с Bootstrap аккордеоном */
.employee-card {
    display: flex;
    height: 64.9vh;
    width: 31.5575vw;
    /* border: 1px solid black; */
    border-radius: 20px;
    background-color: #F7F7F7;
    flex-direction: column;
}
.employee-card-name {
    display: flex;
    height: 4.3029vh;
    width: 31.5vw;
    font-size: 2.0654vh;
    color: #6E6E6E;
    padding-left: 1.5vw;
    padding-top: 0.5vh;
    padding-bottom: 5vh;
}
.accordion {
    --bs-accordion-border-width: 0;
    --bs-accordion-active-bg: none;
    --bs-accordion-btn-focus-box-shadow: none;
  }
.accordion-item {
    background-color: #F7F7F7;
    width: 31.4vw;
    margin-bottom: 0.3vh;
}
.accordion-flush {
    background-color: #F7F7F7;
    width: 31.4vw;
}
.accordion-header {
    width: 31.4vw;
  }
.accordion-button {
    border-radius: 8px !important;
    width: 30.5vw;
    height: 3.4vh;
    background-color: #ffffff;
    font-size: 1.72vh;
    color: #333333;
    --bs-accordion-btn-padding-y: 0rem;
  }

.accordion-button::after {
    --bs-accordion-btn-icon-width: 0.75rem;
}
.accordion-button:not(.collapsed) {
    background-color: #ffffff;
    border-radius: 8px 8px 0px 0px !important;
}
.accordion-button:not(.collapsed)::after {
    --bs-accordion-btn-icon-width: 0.75rem;
}
.accordion-body {
    background-color: #ffffff;
    height: 21vh;
    width: 30.5vw;
    border-radius: 0px 0px 8px 8px !important;
}
.table_org_str {
    overflow-wrap: break-word;
}
.table_org_str td {
    line-height: 1.6; /* Высота строки */
  }

.stand_col {
    font-size: 1.4vh;
    color: #6E6E6E;
}

.dyn_col {
    font-size: 1.4vh;
    color: #333333;
    padding-left: 10px;
}
.dyn_col_ruk {
    font-size: 1vh;
    color: #025EA1;
    padding-left: 10px;
}


.charts {
    display: flex;
    height: 64.9vh;
    width: 47.705vw;
    /* border: 1px solid black; */
    flex-direction: column;
}
.chart {
    display:flex;
    height: 32.45vh;
    width: 47.6vw;
    background-color: #F8F8F9;
    /* border: 1px solid black; */
    border-radius: 20px;
    padding: 10px;
}
.chart-whitespace {
    margin-bottom: 0.9vh;
}
/* #chart-dism {
    display: block;
    margin: 0;
    padding: 0;
} */
.about {
    margin-left: 1.71875vw;
    width: 80vw;
    height: 2.1vh;
    display: flex;
    color: #025EA1;
    justify-content: flex-end;
}
.about-btn {
    width: 4vw;
    height: 2vh;
    display: flex;
    font-size: 1.5vh;
    color: #025EA1;
    justify-content: center;
    border-radius: 20px;
    align-items: center;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    cursor: pointer;
}

/*МОДАЛЬНЫЕ ОКНА*/
.modal {
    display: none; /* Скрыт */
    position: fixed; /* Позиционирование относительно окна браузера */
    z-index: 1; /* Размещаем поверх других элементов */
    left: 0;
    top: 0;
    width: 100%; /* Занимает всю ширину */
    height: 100%; /* Занимает всю высоту */
    background-color: rgba(0, 0, 0, 0.3); /* Полупрозрачный фон */
}

/* Стиль содержимого модального окна */
.modal-content {
    background-color: #fefefe;
    margin: 30vh auto; /* Отступ сверху и центрирование */
    padding: 20px;
    border: 1px solid #888;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: justify;
}
.modal-content-about {
    width: 30vw; /* Ширина окна */
    max-width: 500px; /* Максимальная ширина */
    height: 34vh;
}
.modal-content-probabylity {
    width: 30vw; /* Ширина окна */
    max-width: 500px; /* Максимальная ширина */
    height: 32vh;
}
.modal-content-experience {
    width: 30vw; /* Ширина окна */
    max-width: 500px; /* Максимальная ширина */
    height: 13.30vh;
}
.modal-content-teamatmos {
    width: 30vw; /* Ширина окна */
    max-width: 500px; /* Максимальная ширина */
    height: 35vh;
}
.modal-content-vacation {
    width: 30vw; /* Ширина окна */
    max-width: 500px; /* Максимальная ширина */
    height: 22vh;
}
.modal-content-zodiac {
    width: 30vw; /* Ширина окна */
    max-width: 500px; /* Максимальная ширина */
    height: 56vh;
}
.modal-contentml {
    background-color: #fefefe;
    margin: 20vh auto; /* Отступ сверху и центрирование */
    padding: 20px;
    border: 1px solid #888;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: justify;
}
.modal-content-mlmodel {
    width: 60vw; /* Ширина окна */
    max-width: 900px; /* Максимальная ширина */
    height: 60vh;
}

.modal-content h2 {
    font-size: 1.5327vh;
    color: #025EA1;
    text-align: center;
}
.modal-content p {
    font-size: 1.4327vh;
    color: #6E6E6E;
}