@highcharts/dashboards/css/datagrid.css

Highcharts Dashboards framework

/**
 * @license Highcharts Dashboards v3.5.0
 *
 * (c) 2009-2025 Highsoft AS
 *
 * License: www.highcharts.com/license
 */

/*  ==== Start Grid Color Scheme  ==== */
.hcg-container,
.highcharts-datagrid-container,
.highcharts-light .hcg-container,
.highcharts-light .highcharts-datagrid-container {
    --ig-default-color: #000000;
    --ig-negative-default-color: #c10008;
    --ig-negative-default-border-color: #e7000b;
    --ig-negative-default-background: #fef3f2;
    --ig-neutral-default-color: #884b00;
    --ig-neutral-default-border-color: #d18700;
    --ig-neutral-default-background: #fefce8;
    --ig-positive-default-color: #008236;
    --ig-positive-default-border-color: #00a63e;
    --ig-positive-default-background: #effdf4;
    --ig-highlight-color-5: #f3f6fe;
}

@media (prefers-color-scheme: dark) {
    .hcg-container,
    .highcharts-datagrid-container {
        --ig-default-color: #ffffff;
        --ig-negative-default-color: #ffb3b3;
        --ig-negative-default-border-color: #7a1e1e;
        --ig-negative-default-background: #3d0e0b;
        --ig-neutral-default-color: #ffe8c1;
        --ig-neutral-default-border-color: #7d5c20;
        --ig-neutral-default-background: #3b2a11;
        --ig-positive-default-color: #a6f8c1;
        --ig-positive-default-border-color: #1e6f3e;
        --ig-positive-default-background: #0a3e1a;
        --ig-highlight-color-5: #2d2e36;
    }
}

.highcharts-dark .hcg-container,
.highcharts-dark .highcharts-datagrid-container {
    --ig-default-color: #ffffff;
    --ig-negative-default-border-color: #a80000;
    --ig-negative-default-background: #6b0000;
    --ig-neutral-default-border-color: #b3b3b3;
    --ig-neutral-default-background: #636363;
    --ig-positive-default-border-color: #008000;
    --ig-positive-default-background: #265a26;
    --ig-highlight-color-5: #2d2e36;
}

/*  ==== End Grid Color Scheme  ==== */

/* stylelint-disable max-line-length */

/* ==== Start Grid Variables ==== */
.hcg-container,
.highcharts-datagrid-container {
    /* Fonts */

    /* Global fonts */
    --ig-font-weight: var(--hcg-font-weight, normal);
    --ig-font-size: var(--hcg-font-size, 1rem);
    --ig-font-family: var(--hcg-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif);
    --ig-color: var(--hcg-color, var(--ig-default-color));
    --ig-font: var(--ig-font-weight) var(--ig-font-size) var(--ig-font-family);
    --ig-text-align: var(--hcg-text-align, left);

    /* Link fonts */
    --ig-link-color: var(--hcg-link-color, inherit);
    --ig-link-text-decoration: var(--hcg-link-text-decoration, underline);
    --ig-link-hovered-color: var(--hcg-link-hovered-color, var(--ig-link-color));
    --ig-link-hovered-text-decoration: var(--hcg-link-hovered-text-decoration, none);
    --ig-link-font-weight: var(--hcg-link-font-weight, inherit);

    /* Header fonts */
    --ig-header-font-weight: var(--hcg-header-font-weight, var(--ig-font-weight));
    --ig-header-font-size: var(--hcg-header-font-size, var(--ig-font-size));
    --ig-header-font-family: var(--hcg-header-font-family, var(--ig-font-family));
    --ig-header-color: var(--hcg-header-color, var(--ig-color));
    --ig-header-font: var(--ig-header-font-weight) var(--ig-header-font-size) var(--ig-header-font-family);
    --ig-header-text-align: var(--hcg-header-text-align, var(--ig-text-align));

    /* Caption fonts */
    --ig-caption-font-weight: var(--hcg-caption-font-weight, var(--ig-font-weight));
    --ig-caption-font-size: var(--hcg-caption-font-size, var(--ig-font-size));
    --ig-caption-font-family: var(--hcg-caption-font-family, var(--ig-font-family));
    --ig-caption-color: var(--hcg-caption-color, var(--ig-color));
    --ig-caption-font: var(--ig-caption-font-weight) var(--ig-caption-font-size) var(--ig-caption-font-family);
    --ig-caption-text-align: var(--hcg-caption-text-align, var(--ig-text-align));

    /* Description fonts */
    --ig-description-font-weight: var(--hcg-description-font-weight, var(--ig-font-weight));
    --ig-description-font-size: var(--hcg-description-font-size, var(--ig-font-size));
    --ig-description-font-family: var(--hcg-description-font-family, var(--ig-font-family));
    --ig-description-color: var(--hcg-description-color, var(--ig-color));
    --ig-description-font: var(--ig-description-font-weight) var(--ig-description-font-size) var(--ig-description-font-family);
    --ig-description-text-align: var(--hcg-description-text-align, var(--ig-text-align));

    /* Notification fonts */
    --ig-notification-font-weight: var(--hcg-notification-font-weight, var(--ig-font-weight));
    --ig-notification-font-size: var(--hcg-notification-font-size, var(--ig-font-size));
    --ig-notification-font-family: var(--hcg-notification-font-family, var(--ig-font-family));
    --ig-notification-color: var(--hcg-notification-color, var(--ig-color));
    --ig-notification-font: var(--ig-notification-font-weight) var(--ig-notification-font-size) var(--ig-notification-font-family);
    --ig-notification-text-align: var(--hcg-notification-text-align, var(--ig-text-align));

    /* Credits fonts */
    --ig-credits-font-size: var(--hcg-credits-font-size, 0.7em);
    --ig-credits-color: var(--hcg-credits-color, var(--ig-color));
    --ig-credits-text-align: var(--hcg-credits-text-align, right);

    /* Default borders */
    --ig-border-radius: var(--hcg-border-radius, 0);
    --ig-border-width: var(--hcg-border-width, 0);
    --ig-border-style: var(--hcg-border-style, solid);
    --ig-border-color: var(--hcg-border-color, var(--ig-color));
    --ig-border: var(--ig-border-width) var(--ig-border-style) var(--ig-border-color);

    /* Row borders */
    --ig-row-border-width: var(--hcg-row-border-width, var(--ig-border-width));
    --ig-row-border-style: var(--hcg-row-border-style, var(--ig-border-style));
    --ig-row-border-color: var(--hcg-row-border-color, var(--ig-border-color));
    --ig-row-border: var(--ig-row-border-width) var(--ig-row-border-style) var(--ig-row-border-color);

    /* Header row borders */
    --ig-header-row-border-width: var(--hcg-header-row-border-width, var(--ig-row-border-width));
    --ig-header-row-border-style: var(--hcg-header-row-border-style, var(--ig-row-border-style));
    --ig-header-row-border-color: var(--hcg-header-row-border-color, var(--ig-row-border-color));
    --ig-header-row-border: var(--ig-header-row-border-width) var(--ig-header-row-border-style) var(--ig-header-row-border-color);

    /* Column borders */
    --ig-column-border-width: var(--hcg-column-border-width, var(--ig-border-width));
    --ig-column-border-style: var(--hcg-column-border-style, var(--ig-border-style));
    --ig-column-border-color: var(--hcg-column-border-color, var(--ig-border-color));
    --ig-column-border: var(--ig-column-border-width) var(--ig-column-border-style) var(--ig-column-border-color);

    /* Header column borders */
    --ig-header-column-border-width: var(--hcg-header-column-border-width, var(--ig-column-border-width));
    --ig-header-column-border-style: var(--hcg-header-column-border-style, var(--ig-column-border-style));
    --ig-header-column-border-color: var(--hcg-header-column-border-color, var(--ig-column-border-color));
    --ig-header-column-border: var(--ig-header-column-border-width) var(--ig-header-column-border-style) var(--ig-header-column-border-color);

    /* Notification border */
    --ig-notification-border-radius: var(--hcg-notification-border-radius, var(--ig-border-radius));
    --ig-notification-border-width: var(--hcg-notification-border-width, 1px);
    --ig-notification-border-style: var(--hcg-notification-border-style, solid);
    --ig-notification-border-color: var(--hcg-notification-border-color, var(--ig-color));
    --ig-notification-border: var(--ig-notification-border-width) var(--ig-notification-border-style) var(--ig-notification-border-color);

    /* Default padding */
    --ig-horizontal-padding: var(--hcg-horizontal-padding, var(--hcg-padding, 0));
    --ig-vertical-padding: var(--hcg-vertical-padding, var(--hcg-padding, 0));
    --ig-padding: var(--ig-vertical-padding) var(--ig-horizontal-padding);

    /* Header padding */
    --ig-header-horizontal-padding: var(--hcg-header-horizontal-padding, var(--hcg-header-padding, var(--ig-horizontal-padding)));
    --ig-header-vertical-padding: var(--hcg-header-vertical-padding, var(--hcg-header-padding, var(--ig-vertical-padding)));
    --ig-header-padding: var(--ig-header-vertical-padding) max(var(--ig-header-horizontal-padding), 20px) var(--ig-header-vertical-padding) var(--ig-header-horizontal-padding);

    /* Caption padding */
    --ig-caption-horizontal-padding: var(--hcg-caption-horizontal-padding, var(--hcg-caption-padding, var(--ig-horizontal-padding)));
    --ig-caption-vertical-padding: var(--hcg-caption-vertical-padding, var(--hcg-caption-padding, var(--ig-vertical-padding)));
    --ig-caption-padding: 0 var(--ig-caption-horizontal-padding) var(--ig-caption-vertical-padding) var(--ig-caption-horizontal-padding);

    /* Description padding */
    --ig-description-horizontal-padding: var(--hcg-description-horizontal-padding, var(--hcg-description-padding, var(--ig-horizontal-padding)));
    --ig-description-vertical-padding: var(--hcg-description-vertical-padding, var(--hcg-description-padding, var(--ig-vertical-padding)));
    --ig-description-padding: var(--ig-description-vertical-padding) var(--ig-description-horizontal-padding) 0 var(--ig-description-horizontal-padding);

    /* Credits padding */
    --ig-credits-horizontal-padding: var(--hcg-credits-horizontal-padding, var(--hcg-credits-padding, var(--ig-horizontal-padding)));
    --ig-credits-vertical-padding: var(--hcg-credits-vertical-padding, var(--hcg-credits-padding, var(--ig-vertical-padding)));
    --ig-credits-padding: var(--ig-credits-vertical-padding) var(--ig-credits-horizontal-padding) var(--ig-credits-vertical-padding) var(--ig-credits-horizontal-padding);

    /* Notification padding */
    --ig-notification-horizontal-padding: var(--hcg-notification-horizontal-padding, var(--hcg-notification-padding, var(--ig-horizontal-padding)));
    --ig-notification-vertical-padding: var(--hcg-notification-vertical-padding, var(--hcg-notification-padding, var(--ig-vertical-padding)));
    --ig-notification-padding: var(--ig-notification-vertical-padding) var(--ig-notification-horizontal-padding);

    /* Loading indicator */
    --ig-loader-color: var(--hcg-loader-color, var(--ig-color));

    /* Default backgrounds and colors */
    --ig-background: var(--hcg-background, transparent);
    --ig-row-background: var(--hcg-row-background, transparent);
    --ig-row-even-background: var(--hcg-row-even-background, var(--ig-row-background));
    --ig-header-background: var(--hcg-header-background, var(--ig-row-background));
    --ig-row-even-color: var(--hcg-row-even-color, var(--ig-color));

    /* Cell hovered backgrounds and colors */
    --ig-cell-hovered-background: var(--hcg-cell-hovered-background, var(--hcg-cell-hovered-column-background, var(--ig-cell-hovered-row-background)));
    --ig-cell-hovered-color: var(--hcg-cell-hovered-color, var(--hcg-cell-hovered-column-color, var(--ig-cell-hovered-row-color, var(--hcg-color))));
    --ig-cell-even-hovered-background: var(--hcg-cell-hovered-even-background, var(--hcg-cell-hovered-background, var(--hcg-cell-hovered-column-background, var(--ig-cell-hovered-row-even-background))));
    --ig-cell-even-hovered-color: var(--hcg-cell-even-hovered-color, var(--hcg-cell-hovered-color, var(--hcg-cell-hovered-column-color, var(--ig-cell-hovered-row-even-color))));

    /* Cell hovered horizontal border */
    --ig-cell-hovered-horizontal-border-width: var(--hcg-cell-hovered-border-width, var(--ig-cell-hovered-column-border-width));
    --ig-cell-hovered-horizontal-border-style: var(--hcg-cell-hovered-border-style, var(--ig-cell-hovered-column-border-style));
    --ig-cell-hovered-horizontal-border-color: var(--hcg-cell-hovered-border-color, var(--ig-cell-hovered-column-border-color));
    --ig-cell-hovered-horizontal-border: var(--ig-cell-hovered-horizontal-border-width) var(--ig-cell-hovered-horizontal-border-style) var(--ig-cell-hovered-horizontal-border-color);

    /* Cell hovered vertical border */
    --ig-cell-hovered-vertical-border-width: var(--hcg-cell-hovered-border-width, var(--ig-cell-hovered-row-border-width));
    --ig-cell-hovered-vertical-border-style: var(--hcg-cell-hovered-border-style, var(--ig-cell-hovered-row-border-style));
    --ig-cell-hovered-vertical-border-color: var(--hcg-cell-hovered-border-color, var(--ig-cell-hovered-row-border-color));
    --ig-cell-hovered-vertical-border: var(--ig-cell-hovered-vertical-border-width) var(--ig-cell-hovered-vertical-border-style) var(--ig-cell-hovered-vertical-border-color);

    /* Cell hovered row backgrounds and colors */
    --ig-cell-hovered-row-background: var(--hcg-cell-hovered-row-background, var(--ig-row-background));
    --ig-cell-hovered-row-color: var(--hcg-cell-hovered-row-color, var(--ig-color));
    --ig-cell-hovered-row-even-background: var(--hcg-cell-hovered-row-even-background, var(--hcg-cell-hovered-row-background, var(--ig-row-even-background)));
    --ig-cell-hovered-row-even-color: var(--hcg-cell-hovered-row-even-color, var(--hcg-cell-hovered-row-color, var(--ig-row-even-color)));

    /* Cell hovered row border */
    --ig-cell-hovered-row-border-width: var(--hcg-cell-hovered-row-border-width, 0);
    --ig-cell-hovered-row-border-style: var(--hcg-cell-hovered-row-border-style, var(--ig-border-style));
    --ig-cell-hovered-row-border-color: var(--hcg-cell-hovered-row-border-color, var(--ig-border-color));
    --ig-cell-hovered-row-border: var(--ig-cell-hovered-row-border-width) var(--ig-cell-hovered-row-border-style) var(--ig-cell-hovered-row-border-color);

    /* Cell hovered column backgrounds and colors */
    --ig-cell-hovered-column-background: var(--hcg-cell-hovered-column-background, var(--ig-row-background));
    --ig-cell-hovered-column-color: var(--hcg-cell-hovered-column-color, var(--ig-color));
    --ig-cell-hovered-column-even-background: var(--hcg-cell-hovered-column-even-background, var(--hcg-cell-hovered-column-background, var(--ig-row-even-background)));
    --ig-cell-hovered-column-even-color: var(--hcg-cell-hovered-column-even-color, var(--hcg-cell-hovered-column-color, var(--ig-row-even-color)));

    /* Cell hovered column border */
    --ig-cell-hovered-column-border-width: var(--hcg-cell-hovered-column-border-width, 0);
    --ig-cell-hovered-column-border-style: var(--hcg-cell-hovered-column-border-style, var(--ig-border-style));
    --ig-cell-hovered-column-border-color: var(--hcg-cell-hovered-column-border-color, var(--ig-border-color));
    --ig-cell-hovered-column-border: var(--ig-cell-hovered-column-border-width) var(--ig-cell-hovered-column-border-style) var(--ig-cell-hovered-column-border-color);

    /* Cell hovered header background and color */
    --ig-cell-hovered-header-background: var(--hcg-cell-hovered-header-background, var(--ig-header-background));
    --ig-cell-hovered-header-color: var(--hcg-cell-hovered-header-color, var(--ig-header-color));

    /* Cell hovered header border */
    --ig-cell-hovered-header-border-width: var(--hcg-cell-hovered-header-border-width, 0);
    --ig-cell-hovered-header-border-style: var(--hcg-cell-hovered-header-border-style, var(--ig-cell-hovered-column-border-style));
    --ig-cell-hovered-header-border-color: var(--hcg-cell-hovered-header-border-color, var(--ig-cell-hovered-column-border-color));
    --ig-cell-hovered-header-border: var(--ig-cell-hovered-header-border-width) var(--ig-cell-hovered-header-border-style) var(--ig-cell-hovered-header-border-color);

    /* Header hovered background and color */
    --ig-header-hovered-background: var(--hcg-header-hovered-background, var(--ig-header-background));
    --ig-header-hovered-color: var(--hcg-header-hovered-color, var(--ig-header-color));

    /* Cell synced backgrounds and colors */
    --ig-cell-synced-background: var(--hcg-cell-synced-background, var(--ig-cell-hovered-background));
    --ig-cell-synced-color: var(--hcg-cell-synced-color, var(--ig-cell-hovered-color));
    --ig-cell-even-synced-background: var(--hcg-cell-synced-even-background, var(--ig-cell-even-hovered-background));
    --ig-cell-even-synced-color: var(--hcg-cell-even-synced-color, var(--ig-cell-even-hovered-color));

    /* Cell synced horizontal border */
    --ig-cell-synced-horizontal-border-width: var(--hcg-cell-synced-border-width, var(--hcg-cell-hovered-border-width, 0));
    --ig-cell-synced-horizontal-border-style: var(--hcg-cell-synced-border-style, var(--hcg-cell-hovered-border-style, var(--ig-border-style)));
    --ig-cell-synced-horizontal-border-color: var(--hcg-cell-synced-border-color, var(--hcg-cell-hovered-border-color, var(--ig-border-color)));
    --ig-cell-synced-horizontal-border: var(--ig-cell-synced-horizontal-border-width) var(--ig-cell-synced-horizontal-border-style) var(--ig-cell-synced-horizontal-border-color);

    /* Cell synced vertical border */
    --ig-cell-synced-vertical-border-width: var(--hcg-cell-synced-border-width, var(--hcg-cell-hovered-border-width, 0));
    --ig-cell-synced-vertical-border-style: var(--hcg-cell-synced-border-style, var(--hcg-cell-hovered-border-style, var(--ig-border-style)));
    --ig-cell-synced-vertical-border-color: var(--hcg-cell-synced-border-color, var(--hcg-cell-hovered-border-color, var(--ig-border-color)));
    --ig-cell-synced-vertical-border: var(--ig-cell-synced-vertical-border-width) var(--ig-cell-synced-vertical-border-style) var(--ig-cell-synced-vertical-border-color);

    /* Cell synced row backgrounds and colors */
    --ig-cell-synced-row-background: var(--hcg-cell-synced-row-background, var(--ig-cell-hovered-row-background));
    --ig-cell-synced-row-color: var(--hcg-cell-synced-row-color, var(--ig-cell-hovered-row-color));
    --ig-cell-synced-row-even-background: var(--hcg-cell-synced-row-even-background, var(--ig-cell-hovered-row-even-background));
    --ig-cell-synced-row-even-color: var(--hcg-cell-synced-row-even-color, var(--ig-cell-hovered-row-even-color));

    /* Cell synced row border */
    --ig-cell-synced-row-border-width: var(--hcg-cell-synced-row-border-width, var(--ig-cell-hovered-row-border-width));
    --ig-cell-synced-row-border-style: var(--hcg-cell-synced-row-border-style, var(--ig-cell-hovered-row-border-style));
    --ig-cell-synced-row-border-color: var(--hcg-cell-synced-row-border-color, var(--ig-cell-hovered-row-border-color));
    --ig-cell-synced-row-border: var(--ig-cell-synced-row-border-width) var(--ig-cell-synced-row-border-style) var(--ig-cell-synced-row-border-color);

    /* Cell synced column backgrounds and colors */
    --ig-cell-synced-column-background: var(--hcg-cell-synced-column-background, var(--ig-cell-hovered-column-background));
    --ig-cell-synced-column-color: var(--hcg-cell-synced-column-color, var(--ig-cell-hovered-column-color));
    --ig-cell-synced-column-even-background: var(--hcg-cell-synced-column-even-background, var(--hcg-cell-synced-column-background, var(--ig-cell-hovered-column-even-background)));
    --ig-cell-synced-column-even-color: var(--hcg-cell-synced-column-even-color, var(--ig-cell-hovered-column-even-color));

    /* Cell synced column border */
    --ig-cell-synced-column-border-width: var(--hcg-cell-synced-column-border-width, var(--ig-cell-hovered-column-border-width));
    --ig-cell-synced-column-border-style: var(--hcg-cell-synced-column-border-style, var(--ig-cell-hovered-column-border-style));
    --ig-cell-synced-column-border-color: var(--hcg-cell-synced-column-border-color, var(--ig-cell-hovered-column-border-color));
    --ig-cell-synced-column-border: var(--ig-cell-synced-column-border-width) var(--ig-cell-synced-column-border-style) var(--ig-cell-synced-column-border-color);

    /* Cell synced header background and color */
    --ig-cell-synced-header-background: var(--hcg-cell-synced-header-background, var(--ig-cell-hovered-header-background));
    --ig-cell-synced-header-color: var(--hcg-cell-synced-header-color, var(--ig-cell-hovered-header-color));

    /* Cell synced header border */
    --ig-cell-synced-header-border-width: var(--hcg-cell-synced-header-border-width, var(--ig-cell-hovered-header-border-width));
    --ig-cell-synced-header-border-style: var(--hcg-cell-synced-header-border-style, var(--ig-cell-synced-column-border-style));
    --ig-cell-synced-header-border-color: var(--hcg-cell-synced-header-border-color, var(--ig-cell-synced-column-border-color));
    --ig-cell-synced-header-border: var(--ig-cell-synced-header-border-width) var(--ig-cell-synced-header-border-style) var(--ig-cell-synced-header-border-color);

    /* Negative colors */
    --ig-negative-border-color: var(--hcg-negative-border-color, var(--ig-negative-default-border-color));
    --ig-negative-background: var(--hcg-negative-background, var(--ig-negative-default-background));
    --ig-negative-color: var(--hcg-negative-color, var(--ig-negative-default-color));

    /* Neutral colors */
    --ig-neutral-border-color: var(--hcg-neutral-border-color, var(--ig-neutral-default-border-color));
    --ig-neutral-background: var(--hcg-neutral-background, var(--ig-neutral-default-background));
    --ig-neutral-color: var(--hcg-neutral-color, var(--ig-neutral-default-color));

    /* Positive colors */
    --ig-positive-border-color: var(--hcg-positive-border-color, var(--ig-positive-default-border-color));
    --ig-positive-background: var(--hcg-positive-background, var(--ig-positive-default-background));
    --ig-positive-color: var(--hcg-positive-color, var(--ig-positive-default-color));
}

/* ==== End Grid Variables ==== */

/* Grid container */
.hcg-container,
.highcharts-datagrid-container {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    font: var(--ig-font);
}

.hcg-container *,
.highcharts-datagrid-container * {
    box-sizing: border-box;
}

.hcg-column,
.highcharts-datagrid-column {
    width: 0;
}

/* Links */
.hcg-container a,
.highcharts-datagrid-container a {
    color: var(--ig-link-color);
    text-decoration: var(--ig-link-text-decoration);
    font-weight: var(--ig-link-font-weight);
}

.hcg-container a:hover,
.highcharts-datagrid-container a:hover {
    color: var(--ig-link-hovered-color);
    text-decoration: var(--ig-link-hovered-text-decoration);
}

/* Table */
.hcg-table,
.highcharts-datagrid-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: var(--ig-border);
    background: var(--ig-background);
    table-layout: fixed;
    border-radius: var(--ig-border-radius);
    flex: 1;
}

.hcg-table.hcg-scrollable-content,
.highcharts-datagrid-table.highcharts-datagrid-scrollable-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Table Header */
.hcg-table.hcg-virtualization thead,
.highcharts-datagrid-table.highcharts-datagrid-virtualization thead {
    display: block;
}

.hcg-table thead,
.highcharts-datagrid-table thead {
    background-color: var(--ig-header-background);
}

.hcg-table thead th,
.highcharts-datagrid-table thead th {
    position: relative;
    border-right: var(--ig-header-column-border);
    border-bottom: var(--ig-header-row-border);
    background: var(--ig-header-background);
    padding: var(--ig-header-padding);
    color: var(--ig-header-color);
}

.hcg-table thead th .hcg-header-cell-content,
.highcharts-datagrid-table thead th .highcharts-datagrid-header-cell-content {
    width: 100%;
    font: var(--ig-header-font);
    text-align: var(--ig-header-text-align);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    padding: 0;
    user-select: none; /* Standard syntax */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
}

.hcg-table thead th .hcg-header-cell-content span,
.highcharts-datagrid-table thead th .highcharts-datagrid-header-cell-content span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hcg-resizable-content thead,
.highcharts-datagrid-resizable-content thead,
.hcg-resizable-content tbody,
.highcharts-datagrid-resizable-content tbody {
    display: block;
    overflow: hidden;
    width: 100%;
}

.hcg-table thead tr:first-of-type th:first-child,
.highcharts-datagrid-table thead tr:first-of-type th:first-child {
    border-top-left-radius: var(--ig-border-radius);
}

.hcg-table thead tr:first-of-type th:last-child,
.highcharts-datagrid-table thead tr:first-of-type th:last-child {
    border-top-right-radius: var(--ig-border-radius);
}

.hcg-table tbody tr:last-of-type td:first-child,
.highcharts-datagrid-table tbody tr:last-of-type td:first-child {
    border-bottom-left-radius: var(--ig-border-radius);
}

.hcg-table tbody tr:last-of-type td:last-child,
.highcharts-datagrid-table tbody tr:last-of-type td:last-child {
    border-bottom-right-radius: var(--ig-border-radius);
}

.hcg-resizable-content tr,
.highcharts-datagrid-resizable-content tr {
    width: 100%;
}

.hcg-table thead th .hcg-column-resizer,
.highcharts-datagrid-table thead th .highcharts-datagrid-column-resizer {
    position: absolute;
    top: 0;
    width: 16px;
    right: -9px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    z-index: 10;
}

.hcg-table thead th .hcg-column-resizer::after,
.highcharts-datagrid-table thead th .highcharts-datagrid-column-resizer::after {
    content: "";
    position: absolute;
    display: block;
    height: 20px;
    width: 7px;
    margin-top: -10px;
    top: 50%;
    left: 2px;
}

.hcg-table thead th .hcg-column-resizer:hover::after,
.highcharts-datagrid-table thead th .highcharts-datagrid-column-resizer:hover::after {
    border-left: 2px solid var(--ig-header-color);
    border-right: 2px solid var(--ig-header-color);
}

/* Sorting */
.hcg-table thead th.hcg-column-sortable,
.highcharts-datagrid-table thead th.highcharts-datagrid-column-sortable {
    cursor: pointer;
}

th.hcg-column-sortable > .hcg-column-sortable-icon,
th.highcharts-datagrid-column-sortable > .highcharts-datagrid-column-sortable-icon {
    right: 10px;
    top: calc(50% - 10px);
    bottom: 50%;
    position: absolute;
    display: none;
    width: 12px;
    height: 12px;
    user-select: none;
    pointer-events: none;
}

.hcg-column-sortable.hcg-column-sorted-asc .hcg-column-sortable-icon,
.highcharts-datagrid-column-sortable.highcharts-datagrid-column-sorted-asc .highcharts-datagrid-column-sortable-icon,
.hcg-column-sortable.hcg-column-sorted-desc .hcg-column-sortable-icon,
.highcharts-datagrid-column-sortable.highcharts-datagrid-column-sorted-desc .highcharts-datagrid-column-sortable-icon {
    display: inline-block;
}

.hcg-column-sortable.hcg-column-sorted-desc .hcg-column-sortable-icon,
.highcharts-datagrid-column-sortable.highcharts-datagrid-column-sorted-desc .highcharts-datagrid-column-sortable-icon {
    transform: rotate(180deg);
    top: calc(50% - 2px);
    right: 10px;
}

.hcg-container:has(.hcg-no-data),
.highcharts-datagrid-container:has(.highcharts-datagrid-no-data) {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
    padding: var(--ig-description-padding);
    text-align: var(--ig-description-text-align);
}

/* Table body */
.hcg-table.hcg-scrollable-content tbody,
.highcharts-datagrid-table.highcharts-datagrid-scrollable-content tbody {
    height: 100%;
    overflow: auto;
    min-height: 0;
    flex: 1;
}

.hcg-table.hcg-virtualization tbody,
.highcharts-datagrid-table.highcharts-datagrid-virtualization tbody {
    display: block;
    position: relative;
}

.hcg-table tbody,
.highcharts-datagrid-table tbody {
    border-bottom-left-radius: var(--hcg-border-radius);
    border-bottom-right-radius: var(--hcg-border-radius);
}

.hcg-table tbody tr,
.highcharts-datagrid-table tbody tr {
    overflow: hidden;
    width: 100%;
}

.hcg-table tbody tr td,
.highcharts-datagrid-table tbody tr td,
.hcg-table tbody tr.hcg-mocked-row td,
.highcharts-datagrid-table tbody tr.highcharts-datagrid-mocked-row td {
    border-right: var(--ig-column-border);
    border-bottom: var(--ig-row-border);
    text-align: var(--ig-text-align);
    padding: var(--ig-padding);
    color: var(--ig-color);
    font: var(--ig-font);
    line-height: 1em;
    overflow: hidden;
}

.hcg-table tbody tr.hcg-mocked-row td,
.highcharts-datagrid-table tbody tr.highcharts-datagrid-mocked-row td {
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hcg-table .hcg-last-header-cell-in-row,
.highcharts-datagrid-table .highcharts-datagrid-last-header-cell-in-row,
.hcg-table td:last-of-type,
.highcharts-datagrid-table td:last-of-type {
    border-right: none;
}

.hcg-table tr:last-of-type td,
.highcharts-datagrid-table tr:last-of-type td {
    border-bottom: none;
}

.hcg-table.hcg-scrollable-content tbody tr,
.highcharts-datagrid-table.highcharts-datagrid-scrollable-content tbody tr {
    display: block;
}

.hcg-table.hcg-virtualization tbody tr,
.highcharts-datagrid-table.highcharts-datagrid-virtualization tbody tr {
    position: absolute;
}

.hcg-table tbody.hcg-rows-content-nowrap td,
.highcharts-datagrid-table tbody.highcharts-datagrid-rows-content-nowrap td {
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hcg-table tbody td:focus,
.highcharts-datagrid-table tbody td:focus,
.hcg-table thead th:focus-visible,
.highcharts-datagrid-table thead th:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 1px rgb(117, 124, 199);
}

/* Header hovered background and color */
.hcg-table thead tr th.hcg-column-sortable:hover,
.highcharts-datagrid-table thead tr th.highcharts-datagrid-column-sortable:hover {
    background: var(--ig-header-hovered-background);
}

.hcg-table thead th.hcg-column-sortable:hover .hcg-header-cell-content,
.highcharts-datagrid-table thead th.highcharts-datagrid-column-sortable:hover .highcharts-datagrid-header-cell-content {
    color: var(--ig-header-hovered-color);
}

/* Row backgrounds */
.hcg-table tbody tr td,
.highcharts-datagrid-table tbody tr td {
    background: var(--ig-row-background);
    position: relative;
}

.hcg-table tbody tr.hcg-row-even td,
.highcharts-datagrid-table tbody tr.highcharts-datagrid-row-even td {
    background: var(--ig-row-even-background);
    color: var(--ig-row-even-color);
}

/* Cell hovered and synced shared styles */
.hcg-table thead th.hcg-hovered-column::before,
.highcharts-datagrid-table thead th.highcharts-datagrid-hovered-column::before,
.hcg-table tbody tr:hover td:hover::before,
.highcharts-datagrid-table tbody tr:hover td:hover::before,
.hcg-table tbody tr:hover td::before,
.highcharts-datagrid-table tbody tr:hover td::before,
.hcg-table tbody tr td.hcg-hovered-column::before,
.highcharts-datagrid-table tbody tr td.highcharts-datagrid-hovered-column::before,
.hcg-table thead th.hcg-synced-column::before,
.highcharts-datagrid-table thead th.highcharts-datagrid-synced-column::before,
.hcg-table tbody tr.hcg-synced-row td.hcg-synced-cell::before,
.highcharts-datagrid-table tbody tr.highcharts-datagrid-synced-row td.highcharts-datagrid-synced-cell::before,
.hcg-table tbody tr.hcg-synced-row td::before,
.highcharts-datagrid-table tbody tr.highcharts-datagrid-synced-row td::before,
.hcg-table tbody tr td.hcg-synced-column::before,
.highcharts-datagrid-table tbody tr td.highcharts-datagrid-synced-column::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    pointer-events: none;
}

/* Cell hovered background and color */
.hcg-table tbody tr:hover td:hover,
.highcharts-datagrid-table tbody tr:hover td:hover {
    background: var(--ig-cell-hovered-background);
    color: var(--ig-cell-hovered-color);
}

/* Cell hovered border */
.hcg-table tbody tr:hover td:hover::before,
.highcharts-datagrid-table tbody tr:hover td:hover::before {
    border-top: var(--ig-cell-hovered-vertical-border);
    border-right: var(--ig-cell-hovered-horizontal-border);
    border-bottom: var(--ig-cell-hovered-vertical-border);
    border-left: var(--ig-cell-hovered-horizontal-border);
}

/* Cell hovered background and color */
.hcg-table tbody tr.hcg-row-even:hover td:hover,
.highcharts-datagrid-table tbody tr.highcharts-datagrid-row-even:hover td:hover {
    background: var(--ig-cell-even-hovered-background);
    color: var(--ig-cell-even-hovered-color);
}

/* Cell hovered row background and color */
.hcg-table tbody tr:hover td,
.highcharts-datagrid-table tbody tr:hover td {
    background: var(--ig-cell-hovered-row-background);
    color: var(--ig-cell-hovered-row-color);
}

/* Cell hovered row border */
.hcg-table tbody tr:hover td::before,
.highcharts-datagrid-table tbody tr:hover td::before {
    border-top: var(--ig-cell-hovered-row-border);
    border-bottom: var(--ig-cell-hovered-row-border);
}

/* Cell hovered row background and color */
.hcg-table tbody tr.hcg-row-even:hover td,
.highcharts-datagrid-table tbody tr.highcharts-datagrid-row-even:hover td {
    background: var(--ig-cell-hovered-row-even-background);
    color: var(--ig-cell-hovered-row-even-color);
}

/* Cell hovered column background and color */
.hcg-table tbody tr td.hcg-hovered-column,
.highcharts-datagrid-table tbody tr td.highcharts-datagrid-hovered-column {
    background: var(--ig-cell-hovered-column-background);
    color: var(--ig-cell-hovered-column-color);
}

/* Cell hovered column border */
.hcg-table tbody tr td.hcg-hovered-column::before,
.highcharts-datagrid-table tbody tr td.highcharts-datagrid-hovered-column::before {
    border-left: var(--ig-cell-hovered-column-border);
    border-right: var(--ig-cell-hovered-column-border);
}

/* Cell hovered column background and color */
.hcg-table tbody tr.hcg-row-even td.hcg-hovered-column,
.highcharts-datagrid-table tbody tr.highcharts-datagrid-row-even td.highcharts-datagrid-hovered-column {
    background: var(--ig-cell-hovered-column-even-background);
    color: var(--ig-cell-hovered-column-even-color);
}

/* Cell hovered header background */
.hcg-table thead th.hcg-hovered-column,
.highcharts-datagrid-table thead th.highcharts-datagrid-hovered-column {
    background: var(--ig-cell-hovered-header-background);
}

/* Cell hovered header border */
.hcg-table thead th.hcg-hovered-column::before,
.highcharts-datagrid-table thead th.highcharts-datagrid-hovered-column::before {
    border-left: var(--ig-cell-hovered-header-border);
    border-right: var(--ig-cell-hovered-header-border);
}

/* Cell hovered header color */
.hcg-table thead th.hcg-hovered-column .hcg-header-cell-content,
.highcharts-datagrid-table thead th.highcharts-datagrid-hovered-column .highcharts-datagrid-header-cell-content {
    color: var(--ig-cell-hovered-header-color);
}

/* Cell synced background and color */
.hcg-table tbody tr.hcg-synced-row td.hcg-synced-column,
.highcharts-datagrid-table tbody tr.highcharts-datagrid-synced-row td.highcharts-datagrid-synced-column {
    background: var(--ig-cell-synced-background);
    color: var(--ig-cell-synced-color);
}

/* Cell synced border */
.hcg-table tbody tr.hcg-synced-row td.hcg-synced-column::before,
.highcharts-datagrid-table tbody tr.highcharts-datagrid-synced-row td.highcharts-datagrid-synced-column::before {
    border-top: var(--ig-cell-synced-vertical-border);
    border-right: var(--ig-cell-synced-horizontal-border);
    border-bottom: var(--ig-cell-synced-vertical-border);
    border-left: var(--ig-cell-synced-horizontal-border);
}

/* Cell synced background and color */
.hcg-table tbody tr.hcg-row-even.hcg-synced-row td.hcg-synced-column,
.highcharts-datagrid-table tbody tr.highcharts-datagrid-row-even.highcharts-datagrid-synced-row td.highcharts-datagrid-synced-column {
    background: var(--ig-cell-even-synced-background);
    color: var(--ig-cell-even-synced-color);
}

/* Cell synced row background and color */
.hcg-table tbody tr.hcg-synced-row td,
.highcharts-datagrid-table tbody tr.highcharts-datagrid-synced-row td {
    background: var(--ig-cell-synced-row-background);
    color: var(--ig-cell-synced-row-color);
}

/* Cell synced row border */
.hcg-table tbody tr.hcg-synced-row td::before,
.highcharts-datagrid-table tbody tr.highcharts-datagrid-synced-row td::before {
    border-top: var(--ig-cell-synced-row-border);
    border-bottom: var(--ig-cell-synced-row-border);
}

/* Cell synced row background and color */
.hcg-table tbody tr.hcg-row-even.hcg-synced-row td,
.highcharts-datagrid-table tbody tr.highcharts-datagrid-row-even.highcharts-datagrid-synced-row td {
    background: var(--ig-cell-synced-row-even-background);
    color: var(--ig-cell-synced-row-even-color);
}

/* Cell synced column background and color */
.hcg-table tbody tr td.hcg-synced-column,
.highcharts-datagrid-table tbody tr td.highcharts-datagrid-synced-column {
    background: var(--ig-cell-synced-column-background);
    color: var(--ig-cell-synced-column-color);
}

/* Cell synced column border */
.hcg-table tbody tr td.hcg-synced-column::before,
.highcharts-datagrid-table tbody tr td.highcharts-datagrid-synced-column::before {
    border-left: var(--ig-cell-synced-column-border);
    border-right: var(--ig-cell-synced-column-border);
}

/* Cell synced column background and color */
.hcg-table tbody tr.hcg-row-even td.hcg-synced-column,
.highcharts-datagrid-table tbody tr.highcharts-datagrid-row-even td.highcharts-datagrid-synced-column {
    background: var(--ig-cell-synced-column-even-background);
    color: var(--ig-cell-synced-column-even-color);
}

/* Cell synced header background */
.hcg-table thead th.hcg-synced-column,
.highcharts-datagrid-table thead th.highcharts-datagrid-synced-column {
    background: var(--ig-cell-synced-header-background);
}

/* Cell synced header border */
.hcg-table thead th.hcg-synced-column::before,
.highcharts-datagrid-table thead th.highcharts-datagrid-synced-column::before {
    border-left: var(--ig-cell-synced-header-border);
    border-right: var(--ig-cell-synced-header-border);
}

/* Cell synced header color */
.hcg-table thead th.hcg-synced-column .hcg-header-cell-content,
.highcharts-datagrid-table thead th.highcharts-datagrid-synced-column .highcharts-datagrid-header-cell-content {
    color: var(--ig-cell-synced-header-color);
}

.hcg-table td:first-child,
.highcharts-datagrid-table td:first-child,
.hcg-table thead th.hcg-column-first,
.highcharts-datagrid-table thead th.highcharts-datagrid-column-first,
.hcg-table thead tr:first-child th:first-child,
.highcharts-datagrid-table thead tr:first-child th:first-child {
    border-left: none;
}

.hcg-table tbody td input:not(.hcg-field-auto-width),
.hcg-table tbody td input select,
.highcharts-datagrid-table tbody td input:not(.highcharts-datagrid-field-auto-width),
.highcharts-datagrid-table tbody td select {
    width: 100%;
}

.highcharts-datagrid-cell-editing-container,
.hcg-cell-editing-container {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    padding-left: inherit;
    z-index: 1;
    background: #b7d4ff;
    box-shadow: inset 0 0 0 1px #0000ed;
    display: flex;
    align-items: center;
}

.hcg-table tbody td.hcg-edited-cell input:not(.hcg-field-auto-width),
.highcharts-datagrid-table tbody td.highcharts-datagrid-edited-cell input:not(.highcharts-datagrid-field-auto-width),
.hcg-table tbody td.hcg-edited-cell input:not(.hcg-field-auto-width):focus,
.highcharts-datagrid-table tbody td.highcharts-datagrid-edited-cell input:not(.highcharts-datagrid-field-auto-width):focus,
.hcg-table tbody td.hcg-edited-cell select:not(.hcg-field-auto-width),
.highcharts-datagrid-table tbody td.highcharts-datagrid-edited-cell select:not(.highcharts-datagrid-field-auto-width),
.hcg-table tbody td.hcg-edited-cell select:not(.hcg-field-auto-width):focus,
.highcharts-datagrid-table tbody td.highcharts-datagrid-edited-cell select:not(.highcharts-datagrid-field-auto-width):focus {
    border-width: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    outline: none;
    float: left;
    font: var(--ig-font);
    padding-left: inherit;
    background: transparent;
}

.highcharts-datagrid-table tbody td.hcg-edited-cell-error input:not(.highcharts-datagrid-field-auto-width),
.highcharts-datagrid-table tbody td.hcg-edited-cell-error input:not(.highcharts-datagrid-field-auto-width):focus,
.highcharts-datagrid-table tbody td.hcg-edited-cell-error select,
.highcharts-datagrid-table tbody td.hcg-edited-cell-error select:focus,
.hcg-table tbody td.hcg-edited-cell-error input:not(.hcg-field-width),
.hcg-table tbody td.hcg-edited-cell-error input:not(.hcg-field-width):focus,
.hcg-table tbody td.hcg-edited-cell-error select,
.hcg-table tbody td.hcg-edited-cell-error select:focus {
    color: var(--ig-color);
    box-shadow: inset 0 0 0 1px var(--ig-negative-border-color) !important;
    background-color: var(--ig-negative-background) !important;
}

/* Notification container */
.hcg-notification,
.highcharts-datagrid-notification {
    position: absolute;
    left: 0;
    top: 0;
    margin: 10px;
    width: calc(100% - 20px);
    display: none;
    padding: var(--ig-notification-padding);
    font: var(--ig-notification-font);
    background: var(--ig-background);
    border-radius: var(--ig-notification-border-radius);
    border: var(--ig-notification-border);
    box-shadow: 0 0 15px 1px #00000030;
}

/* Notification states */
.hcg-notification-error,
.highcharts-datagrid-notification-error {
    color: var(--ig-negative-color);
    background: var(--ig-negative-background);
    border-color: var(--ig-negative-border-color);
}

.hcg-notification-warning,
.highcharts-datagrid-notification-warning {
    color: var(--ig-neutral-color);
    background: var(--ig-neutral-background);
    border-color: var(--ig-neutral-border-color);
}

.hcg-notification-success,
.highcharts-datagrid-notification-success {
    color: var(--ig-neutral-color);
    background: var(--ig-neutral-background);
    border-color: var(--ig-neutral-border-color);
}

/* Notification animation */
.hcg-notification-animation,
.highcharts-datagrid-notification-animation {
    display: block;
    animation: notification-animation 0.5s;
}

@keyframes notification-animation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Accessibility */
.hcg-visually-hidden,
.highcharts-datagrid-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(1px, 1px, 1px, 1px);
    margin-top: -3px;
    opacity: 0.01;
}

/* Caption */
.hcg-caption,
.highcharts-datagrid-caption {
    color: var(--ig-caption-color);
    font: var(--ig-caption-font);
    text-align: var(--ig-caption-text-align);
    padding: var(--ig-caption-padding);
}

.hcg-caption *,
.highcharts-datagrid-caption * {
    font: inherit;
    margin: 0;
}

/* Description */
.hcg-description,
.highcharts-datagrid-description {
    color: var(--ig-description-color);
    font: var(--ig-description-font);
    text-align: var(--ig-description-text-align);
    padding: var(--ig-description-padding);
}

/* Credits */

.hcg-credits-container.hcg-credits-pro,
.highcharts-datagrid-credits-container.highcharts-datagrid-credits-pro {
    text-align: var(--ig-credits-text-align);
    padding: var(--ig-credits-padding);
}

.hcg-credits-container.hcg-credits-pro .hcg-credits,
.highcharts-datagrid-credits-container.highcharts-datagrid-credits-pro .highcharts-datagrid-credits {
    color: var(--ig-credits-color);
    font-size: var(--ig-credits-font-size);
    text-decoration: none;
    display: inline-block;
}

/* Loader */
.hcg-loading-wrapper,
.highcharts-datagrid-loading-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    gap: 10px;
}

.hcg-loading-wrapper .hcg-spinner,
.highcharts-datagrid-loading-wrapper .highcharts-datagrid-spinner {
    border-top: 5px solid var(--ig-loader-color);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Helpers */
.hcg-no-padding,
.highcharts-datagrid-no-padding {
    padding: 0 !important;
}

/* Start CSS Helper Classes */
.hcg-table thead tr th.hcg-right .hcg-header-cell-content,
.highcharts-datagrid-table thead tr th.highcharts-datagrid-right .highcharts-datagrid-header-cell-content,
.hcg-table tbody tr td.hcg-right,
.highcharts-datagrid-table tbody tr td.highcharts-datagrid-right {
    text-align: right;
}

.hcg-table thead tr th.hcg-center .hcg-header-cell-content,
.highcharts-datagrid-table thead tr th.highcharts-datagrid-center .highcharts-datagrid-header-cell-content,
.hcg-table tbody tr td.hcg-center,
.highcharts-datagrid-table tbody tr td.highcharts-datagrid-center {
    text-align: center;
}

.hcg-table thead tr th.hcg-left .hcg-header-cell-content,
.highcharts-datagrid-table thead tr th.highcharts-datagrid-left .highcharts-datagrid-header-cell-content,
.hcg-table tbody tr td.hcg-left,
.highcharts-datagrid-table tbody tr td.highcharts-datagrid-left {
    text-align: left;
}

/* End CSS Helpers Classes */

/* Start Grid Default Theme */
.hcg-theme-default,
.highcharts-datagrid-theme-default,
.highcharts-light .hcg-theme-default,
.highcharts-light .highcharts-datagrid-theme-default {
    /* Primary colors */
    --hcg-color: var(--highcharts-neutral-color-100, #000000);
    --hcg-background: var(--highcharts-background-color, #ffffff);

    /* Other properties */
    --hcg-border-radius: 5px;
    --hcg-border-width: 1px;
    --hcg-caption-font-size: 18px;
    --hcg-column-border-width: 0;
    --hcg-credits-padding: 5px;
    --hcg-font-size: 15px;
    --hcg-header-column-border-width: 0;
    --hcg-header-vertical-padding: 10px;
    --hcg-padding: 15px;
}

@media (prefers-color-scheme: dark) {
    .hcg-theme-default,
    .highcharts-datagrid-theme-default {
        --hcg-color: var(--highcharts-neutral-color-100, #ffffff);
        --hcg-background: var(--highcharts-background-color, #141414);
    }
}

.highcharts-dark .hcg-theme-default,
.highcharts-dark .highcharts-datagrid-theme-default {
    --hcg-color: var(--highcharts-neutral-color-100, #ffffff);
    --hcg-background: var(--highcharts-background-color, #141414);
}

.hcg-theme-default,
.highcharts-datagrid-theme-default {
    --hcg-border-color:
        var(
            --highcharts-neutral-color-20,
            color-mix(
                in srgb,
                var(--hcg-color, #000000) 20%,
                var(--hcg-background, #ffffff)
            )
        );
    --hcg-cell-hovered-row-background:
        var(
            --ig-highlight-color-5,
            color-mix(
                in srgb,
                var(--hcg-color, #000000) 5%,
                var(--hcg-background, #ffffff)
            )
        );
    --hcg-header-background:
        var(
            --highcharts-neutral-color-5,
            color-mix(
                in srgb,
                var(--hcg-color, #000000) 5%,
                var(--hcg-background, #ffffff)
            )
        );
    --hcg-header-column-border-color:
        var(
            --highcharts-neutral-color-20,
            color-mix(
                in srgb,
                var(--hcg-color, #000000) 20%,
                var(--hcg-background, #ffffff)
            )
        );
    --hcg-header-row-border-color:
        var(
            --highcharts-neutral-color-10,
            color-mix(
                in srgb,
                var(--hcg-color, #000000) 10%,
                var(--hcg-background, #ffffff)
            )
        );
    --hcg-row-border-color:
        var(
            --highcharts-neutral-color-10,
            color-mix(
                in srgb,
                var(--hcg-color, #000000) 10%,
                var(--hcg-background, #ffffff)
            )
        );
    --hcg-row-even-background:
        var(
            --highcharts-neutral-color-3,
            color-mix(
                in srgb,
                var(--hcg-color, #000000) 3%,
                var(--hcg-background, #ffffff)
            )
        );
}

/* End Grid Default Theme */