@import url("https://code.highcharts.com/css/highcharts.css");
@import url("../code/css/dashboards.css");

:root,
.highcharts-light {
    /* Colors for data series and points */
    --highcharts-color-0: #69a285;
    --highcharts-color-1: #ffbb07;
    --highcharts-color-2: #727e8d;
    --highcharts-color-3: #fc6556;
    --highcharts-color-5: #404040;
    --highcharts-color-6: #730082;

    /* Extra colors */
    --gray: #ccc;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Colors for data series and points */
        --highcharts-color-0: #93cbae;
        --highcharts-color-5: #c4c4c4;

        /* Extra colors */
        --gray: #333;
    }
}

.highcharts-dashboards-component-title {
    font-size: 1.2em;
    text-align: left;
    margin: 1em;
}

.dashboard-header .dashboard-title,
.dashboard-header .dashboard-description {
    background-color: var(--highcharts-neutral-color-5);
    color: var(--highcharts-neutral-color-100);
    margin: 0;
    padding-left: 20px;
}

.highcharts-dashboards-component.highcharts-dashboards-component-kpi-value {
    font-size: 4em;
    margin-top: 40px;
}

.highcharts-dashboards-component-kpi-content .highcharts-dashboards-component-subtitle {
    font-size: 1.4em;
}

#dashboard-kpi-3 .highcharts-dashboards-component .highcharts-point.highcharts-color-0 {
    fill: var(--highcharts-neutral-color-100);
}

.highcharts-dashboards-component.highcharts-dashboards-component-kpi,
.highcharts-dashboards-component.highcharts-dashboards-component-highcharts {
    border-radius: 10px;
}

.highcharts-dashboards-component.highcharts-dashboards-component-kpi-chart-container .highcharts-background {
    fill: transparent;
}

#dashboard-chart-1 .highcharts-point.highcharts-color-0,
#dashboard-chart-2 .highcharts-color-0 {
    fill: var(--highcharts-color-5);
    stroke: var(--highcharts-color-5);
}

#dashboard-chart-2 .highcharts-grid-axis .highcharts-tick,
#dashboard-chart-2 .highcharts-axis-line {
    stroke-width: 0;
}

#dashboard-chart-2 .highcharts-data-label text {
    fill: var(--highcharts-neutral-color-0);
}

.highcharts-plot-line {
    stroke-width: 3px;
    stroke: #f00;
}

.highcharts-plot-line-label {
    fill: var(--highcharts-neutral-color-100);
    font-size: 1em;
    font-weight: bold;
}