@import url("https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/css/grid.css");

#container {
    /*
    width: 100%;
    height: 60vh;
    padding: 20px;
    */
}

.hcg-caption {
    padding: 20px;
}

.highcharts-description {
    padding: 0 20px;
}

.my-theme {
    --hcg-color: #333;
    --hcg-background: #fff;
    --hcg-border-radius: 5px;
    --hcg-border-width: 1px;
    --hcg-column-border-width: 0;
    --hcg-row-border-color: #e8e8e8;
    --hcg-row-even-background: #fbfbfb;
    --hcg-caption-font-size: 18px;
    --hcg-header-column-border-color: #dfdfdf;
    --hcg-padding: 15px;
    --hcg-font-size: 14px;
    --hcg-border-color: #e5e5e5;
    --hcg-header-color: #fff;
    --hcg-header-background: #6c7ae0;
    --hcg-header-column-border-width: 1px;
    --hcg-header-vertical-padding: 10px;
    --hcg-header-hovered-background: #7b88e3;
    --hcg-row-border-width: 1px;
    --hcg-cell-hovered-column-background: #fcebf5;
    --hcg-cell-hovered-row-background: #fcebf5;
    --hcg-cell-hovered-background: #e03e9c;
    --hcg-cell-hovered-header-background: #7b88e3;
    --hcg-cell-hovered-color: #fff;
}

@media (prefers-color-scheme: dark) {
    #container {
        background: #333;
    }

    .my-theme {
        --hcg-color: #eee;
        --hcg-background: #292929;
        --hcg-row-border-color: #434343;
        --hcg-header-row-border-color: #525252;
        --hcg-row-even-background: #2e2e2e;
        --hcg-header-column-border-color: #4e4e4e;
        --hcg-border-color: #646a9e;
        --hcg-header-background: #343a6c;
        --hcg-cell-hovered-column-background: #3d3d3d;
        --hcg-cell-hovered-row-background: #3d3d3d;
        --hcg-cell-hovered-background: #841857;
        --hcg-cell-hovered-header-background: #4b5297;
    }
}