/* Общие стили для body и html */
body, html {
    margin: 0;
    padding: 0;
    height: 100%; /* Чтобы 100vh работал корректно */
    width: 100%;
}

.container {
    width: 100%; /* Убедитесь, что контейнер занимает всю доступную ширину */
    /*padding-left: 0;*/
    /*padding-right: 0;*/
}

/* Header занимает всю ширину */
header {
    width: 100%;
}

/* Главный контейнер для размещения */
.main_box {
    flex: 1;
    display: flex; /* Включаем Flexbox */
    height: 100vh; /* Высота 100% от экрана */
    width: 100%;

    padding-top: 10px;
    padding-right: 10px;
}

/*.left_box {*/
/*    height: 100%;*/
/*    width: 100%;*/
/*}*/

/* Форма */
form {
    max-width: 500px;
    margin: auto;
}

/* Горизонтальная линия */
.custom-line {
    border: 0;
    height: 2px; /* Толщина линии */
    background-color: #000000; /* Цвет линии */
    margin-right: 35px;
    margin-left: 35px;
}

.list_box_up {
    margin: 0;
}

/* Слева: фиксированная ширина */
.list_box {
    flex-shrink: 0; /* Не сжимаем ширину списка */
    width: 380px; /* Фиксированная ширина для списка */
    overflow-y: auto; /* Добавляем прокрутку, если список длинный */
}
#topics-list {
    width: 100%;
    height: 100%;
    max-height: calc(100vh - 695px); /* Задайте желаемую максимальную высоту */
    overflow-y: auto; /* Добавьте вертикальную прокрутку */
}

/* Data Box, который занимает оставшееся пространство */
.data_box {
    display: flex;
    flex-direction: column;
    flex: 1; /* Занимает всё доступное пространство */
    height: 100%; /* Растягиваем по высоте */
    width: 100%;
}

/* Карта, растягиваем по ширине и высоте */
.map {
    flex: 1; /* Карта занимает оставшееся пространство */
    width: 100%; /* Растягивается по ширине */
    height: 100%; /* Растягиваем по высоте */
    background-color: #f0f0f0; /* Временный фон */
    border: 2px solid #0033ff;
}

/* График */
.graph_box {
    height: 200px; /* Фиксированная высота для графика */
    width: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin-top: 25px;
    margin-bottom: 40px;
    margin-right: 0;
    margin-left: 0;
}
.card {
    width: 100%;  /* Задаем ширину графика 100% от контейнера */
    height: 100%; /* График будет заполнять высоту контейнера */
    /*display: flex;*/
}
#mainChart {
    width: 100%;  /* Задаем ширину графика 100% от контейнера */
    height: 100%; /* График будет заполнять высоту контейнера */
    /*display: flex;*/
}

/*.data_box, .graph_box, .map {*/
/*    border: 1px solid red;*/
/*}*/