:root {
    --border-brush: gainsboro;
    --inner-padding: 0.5em 1em;
    --selected-color: orange;
    --background-color: white;
    --headers-color: whitesmoke;
    --content-color: white;
    /*
        white
        - задний фон (неактивная область)
        rgb (250, 250, 250)
        - задний фон заголовка страницы
        whitesmoke
        - задний фон подвала
        - задний фон меню
        - задний фон выделенного элемента списка
        - задний фон ячейки-заголовка в конфигураторе отчета
        - задний фон ячейки с возможной сортировкой при наведении в таблице рейджей
        - задний фон ячейки с возможной сортировкой при наведении в списке значений отчета
        - задний фон ячейки-заголовка в списке значений отчета
        - задний фон ячейки-заголовка в таблице отчета
        - задний фон выделенной строки в таблице сравнения
        - задний фон блока загрузки
        rgb (240, 240, 240)
        - граница элемента списка фильтров в таблице рейджей
        #ebebeb
        - цвет линии легенды на диаграмме
        gainsboro:
        - границы подвала
        - границы меню
        - границы блочного заголовка на странице
        - границы h-заголовков параграфов текста
        - граница выделенного элемента списка
        - граница таблицы правил
        - цвет границы ячейки в списке значений отчета
        - граница блока загрузки
        silver
        - границы выделенного пункта меню
        - активные границы выделенного пункта меню
        - нижняя граница заголовка таблицы реджей
        - нижняя таблицы ячейки-заголовка в отчете
        rgb(140, 140, 140)
        - цвет значения столбца в гистограмме
        gray
        - цвет текста подзаголовка в меню
        - цвет подписи к параметру
        - цвет пояснительного текста к таблице правил
        - цвет вспомогательной линии на диаграмме
        - цвет границы столбика на диаграмме
        rgb(96,96,96)
        - цвет текста невыделенной ячейки в конфигураторе отчета
        rgb (64, 64, 64)
        - цвет текста элемента списка

        #e50000
        - цвет пояснения в конфигураторе отчетов
        forestgreen
        - цвет пояснения в конфигураторе отчетов

        blue
        - цвет текста ячейки при наведении в таблице отчета
        - цвет текста ячейки выделенного отчета в сравнении

        green
        - цвет доступного периода в конфигураторе отчетов

        lightpink
        - цвет граничной выделенной ячейки в конфигураторе отчетов

        lightyellow
        - задний цвет фона ошибки

        #c9ffc9
        - цвет промежуточной выделенной ячейки в конфигураторе отчетов

        #ffdddd
        - цвет наведения на ячейку в конфигураторе отчетов

        #e3830e
        - цвет активной линии в графике с накоплением
        #ff991d4d
        - цвет прозрачной линии в графике с накоплением

        #18c818
        - цвет текста большего значения в таблице отчета

        red
        - цвет кнопки закрытия
        - цвет недоступного периода в конфигураторе отчетов
        - цвет текста меньшего значения в таблице отчета
        orange
        - цвет границы выделенного пункта меню
        royalblue
        - цвет текста кнопок навигации отчета
        - цвет текста отсортированной колонки
        - цвет метки актуальной версии
        - цвет кнопки создания отчетов
        - цвет текущей отсортированной колонке в списке значений отчета


    */
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
}
#app{
}

.column{
    display: flex;
    flex-direction: column;
}
.row{
    display: flex;
}
.row-center{
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.content{

}

.visible{
    display: inherit !important;
    visibility: inherit !important;
}
.hidden{
    visibility: hidden !important;
}
.collapsed{
    display: none !important;
}



td.text, th.text {
    text-align: left;
}

td.numbers, th.numbers {
    text-align: right;
}

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

    width: 50%;
    margin: auto;
    margin-top: 3em;
    padding: 0.5em;

    border: 2px solid gainsboro;
    border-radius: 3px;

    font-size: 2em;
    text-align: center;
    background-color: whitesmoke;
    font-family: Verdana;
}
.loading img{
    height: 56px;
    margin: 0 12px;
    opacity: 0.8;
}
@media (max-device-width:480px) {
    .loading{
        width: auto;
        font-size: 1.4em;
        margin-top: 50%;
    }
    .loading img{
        height: 36px;
        margin: 0 4px;
    }
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    height: 10em;
    z-index: 1000;
}
#blazor-error-ui h3{
    margin: 4px 0;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        width: 20px;
        height: 20px;
    }





.page-header {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(250,250,250);
    border-bottom: 1px solid gainsboro;
}
    .page-header img {
        height: 25px;
        margin: 0 10px;
    }
    .page-header h2 {
        margin: 0;
        padding: 15px 0;
    }


.menu-list a {
    display: block;
    padding: 5px;
    border-radius: 2px;
    text-decoration: none;
    color: black;
    text-align: left;
    border: 5px solid transparent;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

    .menu-list a.active {
        border-left: 5px solid var(--selected-color);
        border-right: 5px solid var(--selected-color);
        border-top: 1px solid silver;
        border-bottom: 1px solid silver;
    }

    .menu-list a:hover {
        background-color: gainsboro;
    }

.menu-list .report-link.selected {
    border-left: 2px solid var(--selected-color);
    border-right: 2px solid var(--selected-color);
    border-top: 1px solid silver;
    border-bottom: 1px solid silver;
}