.ww-chart-surface--webadmin {
    --ww-chart-grid-line: rgba(82, 82, 82, 0.18);
    --ww-chart-axis-text: var(--bs-gray-800, #3f4254);
    --ww-chart-tooltip-bg: var(--cds-bg-light, #ffffff);
    --ww-chart-tooltip-title-bg: var(--cds-bg-gray, #f4f4f4);
    --ww-chart-tooltip-border: var(--cds-border-subtle-01, #e0e0e0);
    --ww-chart-tooltip-text: var(--cds-text-primary, #161616);
    --ww-chart-crosshair-fill: rgba(120, 169, 255, 0.08);
    --ww-chart-crosshair-stroke: rgba(82, 82, 82, 0.24);
    --ww-chart-toolbar-icon: #525252;
    --ww-chart-menu-border: rgba(82, 82, 82, 0.22);
    --ww-chart-menu-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
    --ww-chart-yaxis-label-min-width: 72px;
    --ww-chart-yaxis-label-max-width: 96px;
    --ww-chart-yaxis-label-offset-x: -10px;
}

[data-bs-theme="dark"] .ww-chart-surface--webadmin {
    --ww-chart-grid-line: #393939;
    --ww-chart-axis-text: var(--bs-gray-800, #cdcdde);
    --ww-chart-tooltip-bg: var(--cds-bg-light, #161616);
    --ww-chart-tooltip-title-bg: var(--cds-bg-gray, #262626);
    --ww-chart-tooltip-border: var(--cds-border-subtle-01, #393939);
    --ww-chart-tooltip-text: var(--cds-text-primary, #f4f4f4);
    --ww-chart-crosshair-fill: rgba(120, 169, 255, 0.12);
    --ww-chart-crosshair-stroke: rgba(198, 198, 198, 0.2);
    --ww-chart-toolbar-icon: #c6c6c6;
    --ww-chart-menu-border: rgba(141, 141, 141, 0.22);
    --ww-chart-menu-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.ww-chart-surface .apexcharts-canvas,
.ww-chart-surface .apexcharts-svg,
.ww-chart-surface foreignObject {
    background: transparent !important;
}

.ww-chart-surface--webadmin .apexcharts-gridline,
.ww-chart-surface--webadmin .apexcharts-grid-borders line {
    stroke: var(--ww-chart-grid-line) !important;
}

.ww-chart-surface--webadmin .apexcharts-xaxis line,
.ww-chart-surface--webadmin .apexcharts-yaxis line,
.ww-chart-surface--webadmin .apexcharts-xaxis path,
.ww-chart-surface--webadmin .apexcharts-yaxis path {
    stroke: transparent !important;
}

.ww-chart-surface--webadmin .apexcharts-xaxis-label,
.ww-chart-surface--webadmin .apexcharts-yaxis-label,
.ww-chart-surface--webadmin .apexcharts-yaxis-title-text,
.ww-chart-surface--webadmin .apexcharts-legend-text {
    color: var(--ww-chart-axis-text) !important;
    fill: var(--ww-chart-axis-text) !important;
    font-size: 12px !important;
}

.ww-chart-surface--webadmin .apexcharts-xaxis text,
.ww-chart-surface--webadmin .apexcharts-yaxis text,
.ww-chart-surface--webadmin .apexcharts-text tspan {
    fill: var(--ww-chart-axis-text) !important;
}

.ww-chart-surface--webadmin .apexcharts-toolbar {
    top: 0 !important;
    right: 0 !important;
}

.ww-chart-surface--webadmin .apexcharts-tooltip,
.ww-chart-surface--webadmin .apexcharts-xaxistooltip {
    background: var(--ww-chart-tooltip-bg) !important;
    border: 1px solid var(--ww-chart-tooltip-border) !important;
    border-radius: 0 !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18) !important;
    color: var(--ww-chart-tooltip-text) !important;
}

.ww-chart-surface--webadmin .apexcharts-tooltip.apexcharts-theme-light,
.ww-chart-surface--webadmin .apexcharts-tooltip.apexcharts-theme-dark {
    background: var(--ww-chart-tooltip-bg) !important;
    color: var(--ww-chart-tooltip-text) !important;
}

.ww-chart-surface--webadmin .apexcharts-tooltip-title,
.ww-chart-surface--webadmin .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title,
.ww-chart-surface--webadmin .apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {
    background: var(--ww-chart-tooltip-title-bg) !important;
    border-bottom: 1px solid var(--ww-chart-tooltip-border) !important;
    color: var(--ww-chart-tooltip-text) !important;
}

.ww-chart-surface--webadmin .apexcharts-tooltip-series-group {
    padding: 2px 8px !important;
}

.ww-chart-surface--webadmin .ww-chart-tooltip-custom {
    background: var(--ww-chart-tooltip-bg);
    color: var(--ww-chart-tooltip-text);
    min-width: 150px;
}

.ww-chart-surface--webadmin .ww-chart-tooltip-custom__title {
    background: var(--ww-chart-tooltip-title-bg);
    border-bottom: 1px solid var(--ww-chart-tooltip-border);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 8px;
}

.ww-chart-surface--webadmin .ww-chart-tooltip-custom__row {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: 8px 1fr auto;
    padding: 4px 8px;
}

.ww-chart-surface--webadmin .ww-chart-tooltip-custom__marker {
    border-radius: 50%;
    display: inline-block;
    height: 8px;
    width: 8px;
}

.ww-chart-surface--webadmin .ww-chart-tooltip-custom__name,
.ww-chart-surface--webadmin .ww-chart-tooltip-custom__value {
    color: var(--ww-chart-tooltip-text);
    font-size: 12px;
}

.ww-chart-surface--webadmin .ww-chart-tooltip-custom__value {
    font-weight: 600;
    text-align: right;
}

.ww-chart-surface--webadmin .apexcharts-tooltip-text,
.ww-chart-surface--webadmin .apexcharts-tooltip-y-group,
.ww-chart-surface--webadmin .apexcharts-tooltip-text-y-label,
.ww-chart-surface--webadmin .apexcharts-tooltip-text-y-value,
.ww-chart-surface--webadmin .apexcharts-xaxistooltip-text {
    color: var(--ww-chart-tooltip-text) !important;
}

.ww-chart-surface--webadmin .apexcharts-marker {
    stroke-width: 1px !important;
}

.ww-chart-surface--webadmin .apexcharts-xcrosshairs,
.ww-chart-surface--webadmin .apexcharts-ycrosshairs {
    fill: var(--ww-chart-crosshair-fill) !important;
    stroke: var(--ww-chart-crosshair-stroke) !important;
    stroke-dasharray: 2 4 !important;
    stroke-width: 1px !important;
}

.ww-chart-surface--webadmin .apexcharts-toolbar svg,
.ww-chart-surface--webadmin .apexcharts-menu-icon svg {
    fill: var(--ww-chart-toolbar-icon) !important;
}

.ww-chart-surface--webadmin .apexcharts-menu {
    border: 1px solid var(--ww-chart-menu-border) !important;
    box-shadow: var(--ww-chart-menu-shadow) !important;
}

.ww-chart-surface--with-navigator {
    display: flex;
    flex-direction: column;
}

.ww-chart-main {
    min-height: 325px;
    position: relative;
}

.ww-chart-surface--fill,
.ww-chart-surface--fill .ww-chart-main {
    height: 100%;
    min-height: 0;
}

.ww-chart-surface--fill .apexcharts-canvas {
    height: 100% !important;
}

.ww-chart-region--loading {
    position: relative;
}

.ww-chart-loading {
    align-items: center;
    background: rgba(255, 255, 255, 0.74);
    color: var(--ww-chart-axis-text);
    display: flex;
    font-size: 12px;
    gap: 0.5rem;
    inset: 0;
    justify-content: center;
    letter-spacing: -0.01em;
    position: absolute;
    z-index: 2;
}

[data-bs-theme="dark"] .ww-chart-loading {
    background: rgba(22, 22, 22, 0.74);
}

.ww-chart-loading__spinner {
    animation: ww-chart-loading-spin 0.8s linear infinite;
    border: 2px solid rgba(120, 169, 255, 0.28);
    border-top-color: #0f62fe;
    border-radius: 999px;
    display: inline-block;
    height: 16px;
    width: 16px;
}

.ww-chart-loading--navigator {
    min-height: 96px;
}

@keyframes ww-chart-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

.ww-chart-navigator {
    border-top: 0px solid var(--ww-chart-grid-line);
    display: block;
    height: 96px;
    margin-top: 0.25rem;
    min-height: 96px;
    opacity: 0.86;
    overflow: visible;
}

.ww-chart-navigator .apexcharts-selection-rect {
    fill: rgba(241, 194, 27, 0.18) !important;
    stroke: rgba(241, 194, 27, 0.96) !important;
    stroke-width: 2px !important;
}

.ww-chart-navigator .apexcharts-selection-rect + .apexcharts-selection-rect {
    fill: rgba(241, 194, 27, 0.24) !important;
}

.ww-chart-navigator .apexcharts-selection-icon,
.ww-chart-navigator .apexcharts-zoom-icon {
    color: #f1c21b !important;
}