@import url("https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");


body {
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    background: white;
    /*background: radial-gradient(#55d37d 20%, #21c804); */
    background-color: #fff;
    color: #212121;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    /*overflow-y: hidden;*/
    width: 100%;
}



.diagr {
    word-wrap: break-word;
    width: auto;
    /*background: #aef;*/
    padding: 0 10px;
    /* Добавляем отступы слева и справа */
    font-size: 25px;
    margin-top: 15px;
    line-height: 20px;
    /* Уменьшение межстрочного интервала */
}

.razdel h2 {
    display: inline;
    font-size: 18px;

}

.razdel_navbar,
.razdel {
    margin: 0 auto;
    max-width: 1200px;
    width: auto;
    min-width: 120px;
    /*background: #aef;*/
    height: 100%;
}








.btn {
    display: none;
}

/* Добавленные стили для навигационной панели */
.navbar {
    background-color: #489EE2;
    /* Цвет фона */
    overflow: hidden;
    z-index: 3
        /* Поверх всех контейнеров */
}

.navbar a {
    float: left;
    display: block;
    color: white;

    padding: 10px 20px;
    text-decoration: none;

    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer */
    user-select: none;
    /* Standard syntax */
}

.navbar a:hover {
    /*background-color: #ddd;*/
    /* Цвет фона при наведении курсора */
    color: black;
    cursor: pointer;
}

.navbar .lang_link {
    float: right;
    /* Выравнивание элементов справа */
}

.navbar .icon {
    display: none;
}











.subtitle_diagram {
    font-weight: 500;

    color: #454242;
    padding-top: 8px;
    font-size: 14px;
}

/*----------------------------------------------- */



/*----------------------------------------------- */



/*----------------------------------------------- */










/*----------------------------------------------- */

.option {
    font-weight: normal;
    display: block;
    min-height: 1.2em;
    padding: 0px 2px 1px;
    white-space: nowrap;
}

.about {
    line-height: 1.5;
    color: black;
    padding: 0px 15px 0px 15px;
    /* Одинаковый внутренний отступ со всех сторон */
    font-size: 14px;
    font-family: inherit;
    text-decoration: none;
    text-align: justify;

    width: auto;
    /* Ширина зависит от контента */
    margin-bottom: 95px;

    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
}

/*----------------------------------------------- */

#footer {
    position: fixed;
    /* Фиксированное положение */
    bottom: 0;
    /* Поля вокруг текста */
    background: #489EE2;
    /* Цвет текста */
    overflow: hidden;
    width: 100%;
    height: 42px;
    z-index: 1000
        /* Поверх всех контейнеров */
}

#footer p,
#footer a {
    display: block;
    /* Делаем ссылку блочным элементом, чтобы установить ширину */
    margin: 0 auto;
    /* Устанавливаем автоматичесные отступы слева и справа, чтобы выровнять по центру */
    color: white;
    padding: 4px;
    text-decoration: none;
}

#footer a:hover {
    /*background-color: #ddd;*/
    /* Цвет фона при наведении курсора */
    color: black;
    cursor: pointer;
}


/* Изменить установленные настройки вида курсора при наведении над легендой */
.highcharts-legend-item text {
    cursor: default !important;
}

.highcharts-legend-item {
    pointer-events: none;
    /* Отключаем события мыши для элементов легенды */
}


.highcharts-button {
    font-size: 13px;
    text-align: center;
}

.highcharts-reset-zoom {
    display: block !important;
    position: absolute !important;
}


@media only screen and (max-width: 680px) {

    #footer p,
    #footer a {
        /*       display: block;*/
        font-size: 15px;
        /*       margin: 8px 0px;*/
    }

    .navbar a {
        display: none;
    }

    .navbar a.icon {
        float: right;
        display: block;
    }
}

@media only screen and (max-width: 680px) {
    .navbar.responsive {
        position: relative;
    }

    .navbar.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }

    .navbar.responsive a {
        float: none;
        display: block;
        text-align: left;
    }

    .navbar.responsive .lang_link {
        float: none;
        display: flex;
        flex-direction: row;
        justify-content: center;
        /* Расположение по центру */
    }

    .navbar.responsive .dropdown-divider {
        height: 0;
        border-top: 1px solid #e9ecef;
        margin-left: 10px;
        /* Добавляем отступ слева */
        margin-right: 10px;
        /* Добавляем отступ справа */
    }

}


/* xs (<=543px) */

@media only screen and (max-width: 575px) {

    .razdel h2 {
        font-size: 14px;
    }

    .subtitle_diagram {
        padding-top: 6px;
        font-size: 13px;
    }

    .container .highcharts-container svg {
        height: 100%;
        /* Установите высоту 100% для SVG внутри контейнера */
    }

}


/* sm (>=576 и <=767) */

@media only screen and (min-width: 576px) and (max-width: 767px) {}


/* md (>=768 и <=991) */

@media only screen and (min-width: 768px) and (max-width: 991px) {}


/* lg (>=992 и <=1199) */

@media only screen and (min-width: 992px) and (max-width: 1199px) {}


/* xl (>=1200 и <=1919) */

@media only screen and (min-width: 1200px) and (max-width: 1919px) {

    .razdel h2 {
        font-size: 20px;
        /* Increasing font size */
    }

    .subtitle_diagram {
        font-size: 18px;
        /* Increasing font size */
    }


    /* Add any additional custom styles for larger screens */
}

@media only screen and (min-width: 1920px) and (max-width: 3840px) {}