#elapsed-time,
#elapsed-time2 {
    /* Стили для блока показа прошедшего времени */
    position: absolute; /* Положение элемента */
    top: 145px; /* Отступ сверху */
    right: 10px; /* Отступ справа */
    padding: 10px; /* Внутренний отступ */
    background-color: rgba(255, 255, 255, 0.8); /* Цвет фона с прозрачностью */
    border: 1px solid #ccc; /* Граница */
    border-radius: 5px; /* Радиус скругления углов */
    color: red; /* Цвет текста */
    font-size: 10px; /* Размер шрифта */
}

.head-col-btn {
    /* Стили для кнопок в заголовке столбца */
    display: flex; /* Отображение в виде блока с гибкими свойствами */
    align-items: center; /* Выравнивание элементов по центру по вертикали */
    justify-content: center; /* Выравнивание элементов по центру по горизонтали */
}

#left-month-btn,
#right-month-btn,
#p-left-month-btn,
#p-right-month-btn,
#p2-left-month-btn,
#p2-right-month-btn,
#st-left-month-btn,
#st-right-month-btn {
    /* Стили для кнопок переключения месяцев */
    width: 6rem; /* Ширина кнопок */
    font-size: 1.5rem; /* Размер шрифта */
    color: white; /* Цвет текста */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* Тень */
}


/**
 * Cодержит стили CSS для элементов дизайна карточек и диаграмм.
 */

/**
 * Определяет стиль тени и отступы для дизайна карточек.
 */
.cardDesign {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    margin-top: 5px;
    margin-bottom: 5px;
}

/**
   * Устанавливает внутренние отступы для колонки с диаграммами.
   */
#chart-col {
    padding: .5rem;
}

/**
   * Задает высоту для тела карточки.
   */
.card-body {
    height: 500px;
}

/**
   * Задает высоту для блока с точечной диаграммой.
   */
#rso-scatter {
    height: 550px;
}

/**
   * Задает отступ по нижнему краю для блоков ТОП ГРБС и ТОП ГУ.
   */
#second-chart-row > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1),
#second-chart-row > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) {
    margin-bottom: 1rem;
}

/**
   * Корректирует размер шрифта текста аннотации (ВНУТРЕННИЙ ТЕКСТ) в круговой
   * диаграмме для экранов с максимальной шириной 1400px.
   */
@media screen and (max-width: 1400px) {
    .annotation-text {
        font-size: 24px !important;
    }
}

/**
   * Корректирует размеры шрифтов для меток осей X и Y в конкретных
   * элементах SVG (REACT) для экранов шириной от 1200px до 1400px.
   */
@media screen and (min-width:1200px) and (max-width:1400px) {

    /*Размер шрифта на оси X*/
    #top5-rso>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(1)>g:nth-child(5)>g:nth-child(1)>g:nth-child(12)>g:nth-child(1)>g:nth-child(1)>g:nth-child(1)>*>* {
        font-size: 11px !important;
    }

    #top5-gu>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(1)>g:nth-child(5)>g:nth-child(1)>g:nth-child(12)>g:nth-child(1)>g:nth-child(1)>g:nth-child(1)>*>* {
        font-size: 11px !important;
    }

    #top5-grbs>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(1)>g:nth-child(5)>g:nth-child(1)>g:nth-child(12)>g:nth-child(1)>g:nth-child(1)>g:nth-child(1)>*>* {
        font-size: 11px !important;
    }

    /*Размер шрифта на оси Y*/
    #top5-rso>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(1)>g:nth-child(5)>g:nth-child(1)>g:nth-child(18)>*>* {
        font-size: 11px !important;
    }

    #top5-gu>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(1)>g:nth-child(5)>g:nth-child(1)>g:nth-child(18)>*>* {
        font-size: 11px !important;
    }

    #top5-grbs>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(1)>g:nth-child(5)>g:nth-child(1)>g:nth-child(18)>*>* {
        font-size: 11px !important;
    }

    #potreb-rso-pie>div:js-plotly-plot>div:plot-container.plotly>div:user-select-none.svg-container>svg:main-svg>g:infolayer>g>annotation>g:annotation-text-g>g:cursor-pointer>text:annotation-text {
        font-size: 20px !important;
    }

    #potreb2-rso-pie>div:js-plotly-plot>div:plot-container.plotly>div:user-select-none.svg-container>svg:main-svg>g:infolayer>g>annotation>g:annotation-text-g>g:cursor-pointer>text:annotation-text {
        font-size: 20px !important;
    }

    #structure-rso-pie>div:js-plotly-plot>div:plot-container.plotly>div:user-select-none.svg-container>svg:main-svg>g:infolayer>g>annotation>g:annotation-text-g>g:cursor-pointer>text:annotation-text {
        font-size: 20px !important;
    }

}

/**
   * Корректирует размер шрифта текста аннотации (ВНУТРЕННИЙ ТЕКСТ) в круговой
   * диаграмме для экранов с максимальной шириной 1200px.
   */
@media screen and (max-width: 1200px) {

    /*размер аннтоации в круговой диаграмме*/
    .annotation-text {
        font-size: 18px !important;
    }

    #potreb-tab-row>div.col-9>div>#first-chart-row>#chart-col {
        width: unset;
    }

    #potreb-rso-scatter>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(1)>g:nth-child(5)>g:nth-child(1)>g:nth-child(18)>*>*{
        font-size: 11px !important;
    }

    #rso-scatter>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(1)>g:nth-child(5)>g:nth-child(1)>g:nth-child(18)>*>* {
        font-size: 11px !important;
    }

    #potreb-rso-scatter > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > svg:nth-child(3) > g:nth-child(5) > g:nth-child(2) > g:nth-child(2) > g:nth-child(1) > * > * {
        font-size: 10px !important;
    }

    #potreb2-tab-row>div.col-9>div>#first-chart-row>#chart-col {
        width: unset;
    }

    #potreb2-rso-scatter>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(1)>g:nth-child(5)>g:nth-child(1)>g:nth-child(18)>*>*{
        font-size: 11px !important;
    }

    #potreb2-rso-scatter > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > svg:nth-child(3) > g:nth-child(5) > g:nth-child(2) > g:nth-child(2) > g:nth-child(1) > * > * {
        font-size: 10px !important;
    }

 /**/

    #structure-tab-row>div.col-9>div>#first-chart-row>#chart-col {
        width: unset;
    }

    #structure-rso-scatter>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(1)>g:nth-child(5)>g:nth-child(1)>g:nth-child(18)>*>*{
        font-size: 11px !important;
    }

    #structure-rso-scatter > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > svg:nth-child(3) > g:nth-child(5) > g:nth-child(2) > g:nth-child(2) > g:nth-child(1) > * > * {
        font-size: 10px !important;
    }
}

/**
   * Корректирует компоновку и размеры шрифтов для различных элементов и удаляет блок legend для
   * экранов с максимальной шириной 1000px.
   */
@media screen and (max-width: 1000px) {

    #first-chart-row,
    #second-chart-row {
        flex-direction: column;
    }

    /* Корректирует направление ряда диаграмм и ширину колонок */
    .col-6 {
        width: 100%;
    }

    /* Корректирует размер шрифта в заголовке временной диаграммы */
    .annotation-text {
        font-size: 24px !important;
    }

    /*Размер шрифта в шапке временной диаграммы*/
    #rso-scatter>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(3)>g:nth-child(5)>g:nth-child(1)>text {
        font-size: 14px !important;
    }

    /*Убрать блок legend из временной диаграммы*/
    #rso-scatter>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(3)>g:nth-child(5)>g:nth-child(2),
    #potreb-rso-scatter>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(3)>g:nth-child(5)>g:nth-child(2),
    #potreb2-rso-scatter>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(3)>g:nth-child(5)>g:nth-child(2),
    #structure-rso-scatter>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(3)>g:nth-child(5)>g:nth-child(2) {
        display: none;
    }
}

/**
   * Корректирует размер шрифта для текста внутри точечной диаграммы для экранов с максимальной шириной 900px.
   */
@media screen and (max-width: 900px) {
    #rso-scatter>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(3)>g:nth-child(5)>g:nth-child(1)>text {
        font-size: 13px !important;
    }
}

/**
   * Корректирует размер шрифта текста аннотации (ВНУТРЕННИЙ ТЕКСТ) в круговой
   * диаграмме для экранов с максимальной шириной 1400px.
   */
@media screen and (max-width: 500px) {

    /**
   * Устанавливает отступы для дизайна карточек, убирая верхний и нижний отступы.
   */
    .cardDesign {
        margin-top: 0;
        margin-bottom: 0;
    }

    /**
     * Устанавливает отступы для первого и второго ряда диаграмм, корректируя их для узких экранов.
     */
    #first-chart-row,
    #second-chart-row {
        margin: 0 -10px 0 2px;
    }

    /**
     * Корректирует отступы для определенного элемента внутри колонки, убирая отступы справа.
     */
    .col-9>div:nth-child(1)>div:nth-child(4) {
        margin: 0 -14px 0 0;
    }

    /**
     * Устанавливает размер шрифта заголовков в различных SVG (REACT) элементах.
     */
    /*Размер шрифта заголовков*/
    #top5-gu>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(3)>g:nth-child(5)>g:nth-child(1)>text:nth-child(1) {
        font-size: 12px !important;
    }

    #top5-grbs>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(3)>g:nth-child(5)>g:nth-child(1)>text:nth-child(1) {
        font-size: 12px !important;
    }

    #top5-rso>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(3)>g:nth-child(5)>g:nth-child(1)>text:nth-child(1) {
        font-size: 12px !important;
    }

    #rso-pie>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(3)>g:nth-child(5)>g:nth-child(1)>text:nth-child(1) {
        font-size: 12px !important;
    }

    #rso-scatter>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(3)>g:nth-child(5)>g:nth-child(1)>text {
        font-size: 12px !important;
    }

    /*Размер шрифта на оси X*/
    #top5-rso>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(1)>g:nth-child(5)>g:nth-child(1)>g:nth-child(12)>g:nth-child(1)>g:nth-child(1)>g:nth-child(1)>*>* {
        font-size: 11px !important;
    }

    #top5-gu>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(1)>g:nth-child(5)>g:nth-child(1)>g:nth-child(12)>g:nth-child(1)>g:nth-child(1)>g:nth-child(1)>*>* {
        font-size: 11px !important;
    }

    #top5-grbs>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(1)>g:nth-child(5)>g:nth-child(1)>g:nth-child(12)>g:nth-child(1)>g:nth-child(1)>g:nth-child(1)>*>* {
        font-size: 11px !important;
    }

    /*Размер шрифта на оси Y*/
    #top5-rso>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(1)>g:nth-child(5)>g:nth-child(1)>g:nth-child(18)>*>* {
        font-size: 11px !important;
    }

    #top5-gu>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(1)>g:nth-child(5)>g:nth-child(1)>g:nth-child(18)>*>* {
        font-size: 11px !important;
    }

    #top5-grbs>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(1)>g:nth-child(5)>g:nth-child(1)>g:nth-child(18)>*>* {
        font-size: 11px !important;
    }

    /*Размер шрифта на оси X*/
    #rso-scatter>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(1)>g:nth-child(5)>g:nth-child(1)>g:nth-child(17)>*>* {
        font-size: 11px !important;
    }

    /*Размер шрифта на оси Y*/
    #rso-scatter>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(1)>g:nth-child(5)>g:nth-child(1)>g:nth-child(18)>*>* {
        font-size: 11px !important;
    }

    #potreb-tab-row > div:nth-child(2) > div:nth-child(1) > div:nth-child(3) {
        margin-left: 1px;
    }

    #potreb-rso-scatter > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > svg:nth-child(3) > g:nth-child(5) > g:nth-child(1) > text:nth-child(1) {
        font-size: 10px !important;
    }

    #potreb2-tab-row > div:nth-child(2) > div:nth-child(1) > div:nth-child(3) {
        margin-left: 1px;
    }

    #potreb2-rso-scatter > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > svg:nth-child(3) > g:nth-child(5) > g:nth-child(1) > text:nth-child(1) {
        font-size: 10px !important;
    }

    #structure-tab-row > div:nth-child(2) > div:nth-child(1) > div:nth-child(3) {
        margin-left: 1px;
    }

    #structure-rso-scatter > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > svg:nth-child(3) > g:nth-child(5) > g:nth-child(1) > text:nth-child(1) {
        font-size: 10px !important;
    }

    #top5-potreb > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > svg:nth-child(3) > g:nth-child(5) > g:nth-child(1) > text:nth-child(1),
    #potreb-rso-pie > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > svg:nth-child(3) > g:nth-child(5) > g:nth-child(1) > text:nth-child(1),
    #potreb-top5-rso > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > svg:nth-child(3) > g:nth-child(5) > g:nth-child(1) > text:nth-child(1) {
        font-size: 14px !important;
    }

    #top5-potreb > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > svg:nth-child(1) > g:nth-child(5) > g:nth-child(1) > g:nth-child(18) > * > *,
    #potreb-rso-scatter>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(1)>g:nth-child(5)>g:nth-child(1)>g:nth-child(18)>*>*,
    #potreb-top5-rso>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(1)>g:nth-child(5)>g:nth-child(1)>g:nth-child(18)>*>*{
        font-size: 11px !important;
    }

    #potreb-top5-rso>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(1)>g:nth-child(5)>g:nth-child(1)>g:nth-child(12)>g:nth-child(1)>g:nth-child(1)>g:nth-child(1)>*>*,
    #top5-potreb>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(1)>g:nth-child(5)>g:nth-child(1)>g:nth-child(12)>g:nth-child(1)>g:nth-child(1)>g:nth-child(1)>*>*{
        font-size: 11px !important;
    }



    #potreb2-tab-row > div:nth-child(2) > div:nth-child(1) > div:nth-child(3) {
        margin-left: 1px;
    }

    #potreb2-rso-scatter > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > svg:nth-child(3) > g:nth-child(5) > g:nth-child(1) > text:nth-child(1) {
        font-size: 10px !important;
    }

    #top5-potreb2 > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > svg:nth-child(3) > g:nth-child(5) > g:nth-child(1) > text:nth-child(1),
    #potreb2-rso-pie > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > svg:nth-child(3) > g:nth-child(5) > g:nth-child(1) > text:nth-child(1),
    #potreb2-top5-rso > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > svg:nth-child(3) > g:nth-child(5) > g:nth-child(1) > text:nth-child(1) {
        font-size: 14px !important;
    }

    #top5-potreb2 > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > svg:nth-child(1) > g:nth-child(5) > g:nth-child(1) > g:nth-child(18) > * > *,
    #potreb2-rso-scatter>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(1)>g:nth-child(5)>g:nth-child(1)>g:nth-child(18)>*>*,
    #potreb2-top5-rso>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(1)>g:nth-child(5)>g:nth-child(1)>g:nth-child(18)>*>*{
        font-size: 11px !important;
    }

    #potreb2-top5-rso>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(1)>g:nth-child(5)>g:nth-child(1)>g:nth-child(12)>g:nth-child(1)>g:nth-child(1)>g:nth-child(1)>*>*,
    #top5-potreb2>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(1)>g:nth-child(5)>g:nth-child(1)>g:nth-child(12)>g:nth-child(1)>g:nth-child(1)>g:nth-child(1)>*>*{
        font-size: 11px !important;
    }

/**/

    #structure-tab-row > div:nth-child(2) > div:nth-child(1) > div:nth-child(3) {
        margin-left: 1px;
    }

    #structure-rso-scatter > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > svg:nth-child(3) > g:nth-child(5) > g:nth-child(1) > text:nth-child(1) {
        font-size: 10px !important;
    }

    #top5-structure > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > svg:nth-child(3) > g:nth-child(5) > g:nth-child(1) > text:nth-child(1),
    #structure-rso-pie > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > svg:nth-child(3) > g:nth-child(5) > g:nth-child(1) > text:nth-child(1),
    #structure-top5-rso > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > svg:nth-child(3) > g:nth-child(5) > g:nth-child(1) > text:nth-child(1) {
        font-size: 14px !important;
    }

    #top5-structure > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > svg:nth-child(1) > g:nth-child(5) > g:nth-child(1) > g:nth-child(18) > * > *,
    #structure-rso-scatter>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(1)>g:nth-child(5)>g:nth-child(1)>g:nth-child(18)>*>*,
    #structure-top5-rso>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(1)>g:nth-child(5)>g:nth-child(1)>g:nth-child(18)>*>*{
        font-size: 11px !important;
    }

    #structure-top5-rso>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(1)>g:nth-child(5)>g:nth-child(1)>g:nth-child(12)>g:nth-child(1)>g:nth-child(1)>g:nth-child(1)>*>*,
    #top5-structure>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>svg:nth-child(1)>g:nth-child(5)>g:nth-child(1)>g:nth-child(12)>g:nth-child(1)>g:nth-child(1)>g:nth-child(1)>*>*{
        font-size: 11px !important;
    }


}