@keyframes opaque {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes resizeanim {

  0%,
  to {
    opacity: 0
  }
}

.apexcharts-canvas {
  position: relative;
  direction: ltr !important;
  user-select: none;
  /* Focus indicator colour. Themes override below. */
  --apexcharts-focus-color: #008FFB;
}

/* Dark theme & high-contrast: brighter focus colour for sufficient contrast. */
.apexcharts-canvas .apexcharts-theme-dark,
.apexcharts-theme-dark.apexcharts-canvas {
  --apexcharts-focus-color: #FFD500;
}
.apexcharts-canvas.apexcharts-high-contrast,
.apexcharts-high-contrast.apexcharts-canvas {
  --apexcharts-focus-color: #FFFF00;
}

/* Visually-hidden aria-live status region (WCAG 4.1.3 Status Messages). */
.apexcharts-sr-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Respect OS-level reduced-motion preference (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  .apexcharts-canvas *,
  .apexcharts-canvas *::before,
  .apexcharts-canvas *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.apexcharts-canvas ::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 6px
}

.apexcharts-canvas ::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5)
}

.apexcharts-inner {
  position: relative
}

.apexcharts-text tspan {
  font-family: inherit
}

rect.legend-mouseover-inactive,
.legend-mouseover-inactive rect,
.legend-mouseover-inactive path,
.legend-mouseover-inactive circle,
.legend-mouseover-inactive line,
.legend-mouseover-inactive text.apexcharts-yaxis-title-text,
.legend-mouseover-inactive text.apexcharts-yaxis-label {
  transition: .15s ease all;
  opacity: .2
}

/* Linked Views (#4): per-mark crossfilter dim. Applied to individual data
   marks (not whole series) whose x is outside the brushed range. Opacity is
   overridable per chart via the --apx-cf-dim custom property. */
.apexcharts-crossfilter-dimmed {
  transition: opacity .25s ease;
  opacity: var(--apx-cf-dim, .2)
}

/* Linked Views (#4): default styling for the built-in crossfilter data table
   (cf.dataTable). Deliberately light so host styles can override. */
.apexcharts-cf-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}
.apexcharts-cf-table caption {
  caption-side: bottom;
  text-align: right;
  padding: 6px 2px;
  font-size: 12px;
  opacity: .7
}
.apexcharts-cf-table th,
.apexcharts-cf-table td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, .08)
}
.apexcharts-cf-table th {
  font-weight: 600;
  border-bottom-width: 2px
}
.apexcharts-cf-table tbody tr:hover {
  background: rgba(99, 102, 241, .06)
}

/* Measure ruler (#18): measure / delta ruler.
   Theme via these classes or the --apx-measure-* custom properties below
   (config `chart.measure.colors` overrides both). The ruler group also carries
   a direction class: apexcharts-measure-up | -down | -flat.
   Element classes:
     .apexcharts-measure-band     shaded span band
     .apexcharts-measure-vline    vertical guide lines
     .apexcharts-measure-line     free-mode diagonal line
     .apexcharts-measure-label-bg readout box     .apexcharts-measure-label text
   Colors are applied as SVG presentation attributes, so any rule you write on
   these classes overrides them. */
.apexcharts-canvas {
  --apx-measure-up: #16a34a;
  --apx-measure-down: #dc2626;
  --apx-measure-neutral: #64748b;
  --apx-measure-guide: #94a3b8;
}
.apexcharts-measure-capture {
  cursor: crosshair;
}

/* Radial Actions (#chrome): right-click context menu. Theme via these classes
   or the --apx-menu-* custom properties. */
.apexcharts-canvas {
  --apx-menu-bg: #ffffff;
  --apx-menu-fg: #1e293b;
  --apx-menu-border: #e2e8f0;
  --apx-menu-hover: #f1f5f9;
  --apx-menu-shadow: rgba(15, 23, 42, 0.18);
}
.apexcharts-context-menu {
  min-width: 168px;
  padding: 4px;
  border-radius: 8px;
  background: var(--apx-menu-bg);
  border: 1px solid var(--apx-menu-border);
  box-shadow: 0 6px 22px var(--apx-menu-shadow);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  z-index: 20;
  user-select: none;
}
.apexcharts-context-menu-item {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  padding: 7px 12px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--apx-menu-fg);
  font: inherit;
  cursor: pointer;
}
.apexcharts-context-menu-item:hover,
.apexcharts-context-menu-item--active {
  background: var(--apx-menu-hover);
}
.apexcharts-context-menu-item:focus {
  outline: none;
}

/* Ink Layer (#7): the floating note editor card, opened by clicking an
   ink-managed annotation. Theme via these classes or the --apx-ink-* vars. */
.apexcharts-canvas {
  --apx-ink-card-bg: #ffffff;
  --apx-ink-card-fg: #1e293b;
  --apx-ink-card-border: #e2e8f0;
  --apx-ink-card-hover: #f1f5f9;
  --apx-ink-card-accent: #6366f1;
  --apx-ink-card-shadow: rgba(15, 23, 42, 0.18);
}
.apexcharts-ink-card {
  position: absolute;
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: 8px;
  background: var(--apx-ink-card-bg);
  border: 1px solid var(--apx-ink-card-border);
  box-shadow: 0 6px 22px var(--apx-ink-card-shadow);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: var(--apx-ink-card-fg);
  user-select: none;
}
.apexcharts-ink-card-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.apexcharts-ink-card input.apexcharts-ink-editor {
  flex: 1 1 auto;
  width: 150px;
  min-width: 0;
  box-sizing: border-box;
  padding: 4px 6px;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid var(--apx-ink-card-border);
  border-radius: 5px;
}
.apexcharts-ink-card input.apexcharts-ink-editor:focus {
  outline: none;
  border-color: var(--apx-ink-card-accent);
}
.apexcharts-ink-btn {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.apexcharts-ink-btn:hover,
.apexcharts-ink-btn--active {
  background: var(--apx-ink-card-hover);
}
.apexcharts-ink-btn:focus-visible,
.apexcharts-ink-swatch:focus-visible {
  outline: 2px solid var(--apx-ink-card-accent);
  outline-offset: 1px;
}
.apexcharts-ink-btn--bold {
  font-weight: 700;
}
.apexcharts-ink-btn--delete:hover {
  color: #dc2626;
}
.apexcharts-ink-swatch {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid rgba(100, 116, 139, 0.45);
  border-radius: 50%;
  cursor: pointer;
}
.apexcharts-ink-swatch--active {
  box-shadow:
    0 0 0 2px var(--apx-ink-card-bg),
    0 0 0 4px var(--apx-ink-card-accent);
}
.apexcharts-ink-sep {
  flex: 0 0 auto;
  width: 1px;
  height: 16px;
  margin: 0 2px;
  background: var(--apx-ink-card-border);
}
.apexcharts-ink-cardlabel {
  flex: 0 0 auto;
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  opacity: 0.65;
  margin-right: 2px;
}
.apexcharts-ink-marker-size {
  flex: 0 0 auto;
  min-width: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.apexcharts-legend-text {
  padding-left: 15px;
  margin-left: -15px;
}

.apexcharts-legend-series[role="button"]:focus {
  outline: 2px solid var(--apexcharts-focus-color, #008FFB);
  outline-offset: 2px;
}

.apexcharts-legend-series[role="button"]:focus:not(:focus-visible) {
  outline: none;
}

.apexcharts-legend-series[role="button"]:focus-visible {
  outline: 2px solid var(--apexcharts-focus-color, #008FFB);
  outline-offset: 2px;
}

.apexcharts-series-collapsed {
  opacity: 0
}

/* A series still playing its exit tween stays painted so it can visibly shrink
   away, hiding it on the first frame leaves a hole in a stacked chart for the
   length of the animation. Dropped once the tween lands. */
.apexcharts-series-collapsed.apexcharts-series-collapsing {
  opacity: 1
}

/* Its labels ride the shrinking marks, but a mark runs out of room for its text
   well before it reaches zero, so fade them across the exit instead of holding
   them crisp over a sliver. Duration is set inline from dynamicAnimation.speed. */
.apexcharts-datalabels.apexcharts-series-collapsing {
  animation: apexcharts-datalabels-exit var(--apexcharts-dl-exit, 400ms) ease-in
    forwards;
}

@keyframes apexcharts-datalabels-exit {
  from {
    opacity: 1
  }
  to {
    opacity: 0
  }
}

.apexcharts-canvas svg:focus:not(:focus-visible) {
  outline: none;
}

/* Keyboard navigation focus indicator on SVG data elements.
   SVG elements don't support CSS outline, so we use stroke. */
.apexcharts-bar-area.apexcharts-keyboard-focused,
.apexcharts-candlestick-area.apexcharts-keyboard-focused,
.apexcharts-boxPlot-area.apexcharts-keyboard-focused,
.apexcharts-rangebar-area.apexcharts-keyboard-focused,
.apexcharts-pie-area.apexcharts-keyboard-focused,
.apexcharts-heatmap-rect.apexcharts-keyboard-focused,
.apexcharts-treemap-rect.apexcharts-keyboard-focused {
  stroke: var(--apexcharts-focus-color, #008FFB);
  stroke-width: 2;
  stroke-opacity: 1;
}

.apexcharts-tooltip {
  --apx-tt-bg: #ffffff;
  /* Shared by the body and the arrow's two outward facets, so the
   * hairline reads as one continuous outline around the whole shape.
   * Keep it strong enough to survive on its own: the shadow below is
   * elevation, not edge definition. */
  --apx-tt-border: rgba(15, 23, 42, 0.12);
  /* Elevation, in three layers: a tight contact shadow that anchors the
   * bottom edge, a directional key shadow for the lift, and a wide
   * ambient one that grounds the whole box. Each is weaker and more
   * diffuse than the last.
   *
   * A tooltip is unusual in that it floats over *data*, so reach costs
   * more than it does on a page: every pixel the shadow travels tints a
   * bar or a line the reader is trying to compare. These numbers are
   * tuned to keep the near-edge contrast that reads as elevation while
   * dropping the long low haze that only muddies the plot.
   *
   * Note there is deliberately no `0 0 0 1px` ring layer. That used to
   * stand in for edge definition back when --apx-tt-border was barely
   * visible; now that the border is a real hairline (and the arrow
   * shares it) a ring only double-draws the outline, and being spread
   * rather than offset it leaked ink upward too, flattening the lift.
   *
   * `--apx-tt-shadow-dir` flips the whole stack's Y in one place — see
   * the `[data-placement="bottom"]` rule further down. */
  --apx-tt-shadow-dir: 1;
  --apx-tt-shadow: 0 calc(var(--apx-tt-shadow-dir) * 1px) 2px rgba(15, 23, 42, 0.06), 0 calc(var(--apx-tt-shadow-dir) * 4px) 8px -2px rgba(15, 23, 42, 0.10), 0 calc(var(--apx-tt-shadow-dir) * 12px) 20px -8px rgba(15, 23, 42, 0.14);
  --apx-tt-arrow-bg: var(--apx-tt-bg);
  --apx-tt-color: #0f172a;
  --apx-tt-color-muted: rgba(15, 23, 42, 0.55);
  border-radius: 8px;
  background: var(--apx-tt-bg);
  border: 1px solid var(--apx-tt-border);
  box-shadow: var(--apx-tt-shadow);
  color: var(--apx-tt-color);
  cursor: default;
  font-size: 13px;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  display: flex;
  flex-direction: column;
  padding: 2px 0;
  white-space: nowrap;
  z-index: 12;
  transition: opacity .12s ease
}

/* While the tooltip is visible, smoothly animate position changes
 * between data points. Kept short (160 ms) and ease-out so it stays
 * responsive — too long would feel laggy when sweeping across many
 * points fast. The position transition is only attached after the
 * first paint (Position.applyTooltipPosition flips `data-positioned`
 * once the tooltip has been placed) so the *first* show doesn't slide
 * the tooltip in from the previously-stale (0,0) coordinates. */
.apexcharts-tooltip.apexcharts-active {
  opacity: 1;
  transition: opacity .12s ease
}
.apexcharts-tooltip.apexcharts-active[data-positioned="true"] {
  transition: opacity .12s ease, left .16s ease-out, top .16s ease-out
}

.apexcharts-tooltip.apexcharts-theme-light {
  /* defaults already set above; class kept for backward-compat selectors */
}

.apexcharts-tooltip.apexcharts-theme-dark {
  --apx-tt-bg: #1c1c1f;
  --apx-tt-border: rgba(255, 255, 255, 0.16);
  /* Dark needs more alpha than light to register at all, but not as much
   * as it used to: the light rim above now carries the edge, so the
   * shadow is free to be pure elevation instead of doubling as an
   * outline. Same geometry as light, heavier ink. */
  --apx-tt-shadow: 0 calc(var(--apx-tt-shadow-dir) * 1px) 2px rgba(0, 0, 0, 0.24), 0 calc(var(--apx-tt-shadow-dir) * 4px) 8px -2px rgba(0, 0, 0, 0.30), 0 calc(var(--apx-tt-shadow-dir) * 12px) 20px -8px rgba(0, 0, 0, 0.38);
  --apx-tt-color: #f3f4f6;
  --apx-tt-color-muted: rgba(243, 244, 246, 0.55);
}

.apexcharts-tooltip * {
  font-family: inherit
}

/* Point-annotation hover tooltip (apexcharts/apexcharts.js#2424). Reuses the
 * glass body/border/shadow from `.apexcharts-tooltip` but holds free-form
 * content, so it needs its own padding, wrapping and a sane max width. */
.apexcharts-tooltip.apexcharts-annotation-tooltip {
  padding: 6px 10px;
  max-width: 240px;
  white-space: normal;
  line-height: 1.4;
  pointer-events: none;
  z-index: 13
}

.apexcharts-tooltip-title {
  padding: 8px 12px 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--apx-tt-color-muted);
  background: transparent;
  border-bottom: none;
  margin-bottom: 0
}

.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title,
.apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {
  background: transparent;
  border-bottom: none
}

/* `fillSeriesColor`: each series-group already paints itself with the
 * series colour. Drop the glass body entirely (transparent bg, no
 * border, no backdrop-filter, no padding) and clip the coloured
 * series-group(s) to the tooltip's rounded corners so they fill the
 * shell edge-to-edge. Text inside the coloured group is forced to
 * white for contrast. */
.apexcharts-tooltip.apexcharts-tooltip-fill-series {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: none;
  padding: 0;
  overflow: hidden;
  color: #fff
}

.apexcharts-tooltip.apexcharts-tooltip-fill-series .apexcharts-tooltip-title {
  background: rgba(0, 0, 0, 0.22);
  color: #fff;
  opacity: 1;
  padding: 6px 12px
}

.apexcharts-tooltip.apexcharts-tooltip-fill-series .apexcharts-tooltip-series-group {
  color: #fff
}

/* Arrow connector — a 45°-rotated square straddling the body's edge, so
 * the body's 1px border runs continuously out across the arrow and back.
 * The two facets that face away from the tooltip carry the border; the
 * two that face into it carry none, and the square's opaque fill covers
 * the segment of the body's own border it sits on, hiding the seam.
 *
 * This is why it's a rotated square and not a triangle: `clip-path`
 * erases `border` and `box-shadow` along with everything outside the
 * polygon, which left `filter: drop-shadow` as the only way to suggest
 * an edge — and a drop-shadow can only ever blur one, never draw a
 * hairline. Nothing here needs a filter.
 *
 * Geometry: a square of side S rotated 45° reaches S/√2 from its centre
 * to each corner, so S = 10px gives the ~7px tip overhang that
 * ARROW_TIP_OVERHANG assumes (tooltip/constants.js) over a ~14px base.
 * The offsets park the square's *centre* 1px outside the padding box
 * (-6px = -1px border - 10px/2), i.e. exactly on the body's border line,
 * so the two borders meet end to end instead of overlapping or gapping.
 * `box-sizing` must be border-box or the bordered sides would grow the
 * square asymmetrically and knock its centre off that line. */
.apexcharts-tooltip-arrow {
  position: absolute;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  background: var(--apx-tt-arrow-bg);
  transform: rotate(45deg);
  pointer-events: none;
  top: calc(var(--apx-tt-arrow-y, 50%) - 5px)
}

/* Which two sides face outward depends on the placement. Under
 * `rotate(45deg)` the square's bottom-left corner swings to the left,
 * top-right to the right, top-left to the top and bottom-right to the
 * bottom — so the pair of borders below is always the two sharing the
 * corner that ends up as the tip. */
.apexcharts-tooltip[data-placement="right"] .apexcharts-tooltip-arrow {
  left: -6px;
  border-left: 1px solid var(--apx-tt-border);
  border-bottom: 1px solid var(--apx-tt-border)
}

.apexcharts-tooltip[data-placement="left"] .apexcharts-tooltip-arrow {
  right: -6px;
  border-top: 1px solid var(--apx-tt-border);
  border-right: 1px solid var(--apx-tt-border)
}

/* Vertical arrow variants: tooltip is above/below the data point and the
 * arrow points down/up. The base rule above uses `--apx-tt-arrow-y` for
 * left/right placement; for top/bottom we centre on `--apx-tt-arrow-x`
 * instead (set by applyTooltipPosition). */
.apexcharts-tooltip[data-placement="top"] .apexcharts-tooltip-arrow,
.apexcharts-tooltip[data-placement="bottom"] .apexcharts-tooltip-arrow {
  top: auto;
  left: calc(var(--apx-tt-arrow-x, 50%) - 5px)
}

.apexcharts-tooltip[data-placement="top"] .apexcharts-tooltip-arrow {
  bottom: -6px;
  border-right: 1px solid var(--apx-tt-border);
  border-bottom: 1px solid var(--apx-tt-border)
}

.apexcharts-tooltip[data-placement="bottom"] .apexcharts-tooltip-arrow {
  top: -6px;
  border-top: 1px solid var(--apx-tt-border);
  border-left: 1px solid var(--apx-tt-border)
}

/* When the tooltip is flipped below the data point, the default
 * downward-biased shadow leaves its top edge undefined. Negating the
 * direction casts the whole elevation upward instead, so the shadow
 * falls between the tooltip and the mark above it. One multiplier flips
 * all three layers together; the arrow needs no counterpart, since its
 * border doesn't depend on light direction. */
.apexcharts-tooltip[data-placement="bottom"] {
  --apx-tt-shadow-dir: -1
}

.apexcharts-tooltip-text-goals-value,
.apexcharts-tooltip-text-y-value,
.apexcharts-tooltip-text-z-value {
  display: inline-block;
  margin-left: 5px;
  font-weight: 600
}

.apexcharts-tooltip-text-goals-label:empty,
.apexcharts-tooltip-text-goals-value:empty,
.apexcharts-tooltip-text-y-label:empty,
.apexcharts-tooltip-text-y-value:empty,
.apexcharts-tooltip-text-z-value:empty,
.apexcharts-tooltip-title:empty {
  display: none
}

.apexcharts-tooltip-text-goals-label,
.apexcharts-tooltip-text-goals-value {
  padding: 6px 0 5px
}

.apexcharts-tooltip-goals-group,
.apexcharts-tooltip-text-goals-label,
.apexcharts-tooltip-text-goals-value {
  display: flex
}

.apexcharts-tooltip-text-goals-label:not(:empty),
.apexcharts-tooltip-text-goals-value:not(:empty) {
  margin-top: -6px
}

.apexcharts-tooltip-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  vertical-align: middle;
  color: inherit;
}

.apexcharts-tooltip-marker svg {
  width: 100%;
  height: 100%;
  display: block;
}

.apexcharts-tooltip-series-group {
  padding: 4px 12px;
  display: none;
  gap: 8px;
  text-align: left;
  justify-content: left;
  align-items: center
}

.apexcharts-tooltip-series-group.apexcharts-active .apexcharts-tooltip-marker {
  opacity: 1
}

.apexcharts-tooltip-series-group.apexcharts-active:last-child,
.apexcharts-tooltip-series-group:last-child {
  padding-bottom: 8px
}

.apexcharts-tooltip-y-group {
  padding: 6px 0 5px
}

/* `tooltip.compact`: a tight box instead of a card, for panels a normal card
   would cover (small multiples, sparklines, tiles). Only the box shrinks, so
   the arrow and every anchor rule still apply. Rows stay stacked when there
   are several series (the names are what tells them apart); a one-series
   chart collapses to a single line, see `-value-only` below. */
.apexcharts-tooltip.apexcharts-tooltip-compact {
  padding: 3px 8px;
  font-size: 11px;
  line-height: 1.35
}

.apexcharts-tooltip-compact .apexcharts-tooltip-title {
  padding: 0;
  font-size: 11px;
  white-space: nowrap
}

.apexcharts-tooltip-compact .apexcharts-tooltip-series-group,
.apexcharts-tooltip-compact .apexcharts-tooltip-series-group.apexcharts-active:last-child,
.apexcharts-tooltip-compact .apexcharts-tooltip-series-group:last-child {
  padding: 0;
  gap: 5px
}

.apexcharts-tooltip-compact .apexcharts-tooltip-y-group {
  padding: 0
}

.apexcharts-tooltip-compact .apexcharts-tooltip-marker {
  width: 8px;
  height: 8px
}

/* A one-series panel: the series name repeats what the panel header already
   says, so the value stands alone and the x label becomes its prefix on one
   line ("Aug 2024  6.59"). */
.apexcharts-tooltip.apexcharts-tooltip-compact.apexcharts-tooltip-value-only {
  /* The tooltip body is a flex COLUMN by default (title row, then series
     rows); one series needs no column, so the same box turns into one line. */
  flex-direction: row;
  align-items: baseline;
  gap: 6px
}

.apexcharts-tooltip-value-only .apexcharts-tooltip-marker {
  display: none
}

.apexcharts-tooltip-value-only .apexcharts-tooltip-text-y-label {
  display: none
}

.apexcharts-custom-tooltip,
.apexcharts-tooltip-box {
  padding: 4px 8px
}

.apexcharts-tooltip-boxPlot {
  display: flex;
  flex-direction: column-reverse
}

.apexcharts-tooltip-box>div {
  margin: 4px 0
}

.apexcharts-tooltip-box span.value {
  font-weight: 700
}

.apexcharts-tooltip-rangebar {
  padding: 5px 8px
}

.apexcharts-tooltip-rangebar .category {
  font-weight: 600;
  color: #777
}

.apexcharts-tooltip-rangebar .series-name {
  font-weight: 700;
  display: block;
  margin-bottom: 5px
}

/* X/Y axis tooltips — small popovers that label the crosshair on the
 * axes. Restyled to match the modern data-tooltip palette: solid white
 * body with a subtle border + soft drop-shadow, smaller font, rounded
 * corners. The arrows still use the CSS border-triangle technique
 * (cheap, crisp at small sizes); their colours flow from CSS variables
 * so light/dark themes only need one override per axis. */
.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
  --apx-axt-bg: #ffffff;
  --apx-axt-border: rgba(15, 23, 42, 0.08);
  --apx-axt-color: #0f172a;
  --apx-axt-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.18), 0 1px 3px -1px rgba(15, 23, 42, 0.12);
  opacity: 0;
  pointer-events: none;
  color: var(--apx-axt-color);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  border-radius: 6px;
  position: absolute;
  z-index: 10;
  background: var(--apx-axt-bg);
  border: 1px solid var(--apx-axt-border);
  box-shadow: var(--apx-axt-shadow)
}

.apexcharts-xaxistooltip.apexcharts-theme-dark,
.apexcharts-yaxistooltip.apexcharts-theme-dark {
  --apx-axt-bg: #1c1c1f;
  --apx-axt-border: rgba(255, 255, 255, 0.1);
  --apx-axt-color: #f3f4f6;
  --apx-axt-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.55), 0 1px 3px -1px rgba(0, 0, 0, 0.45)
}

.apexcharts-xaxistooltip {
  padding: 4px 8px;
  transition: .15s ease all
}

.apexcharts-xaxistooltip:after,
.apexcharts-xaxistooltip:before {
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none
}

/* :before paints the 1px border outline of the triangle (slightly larger
 * than :after); :after sits inside and paints the fill — leaves a 1px
 * ring of :before visible at the edges. */
.apexcharts-xaxistooltip:after {
  border-color: transparent;
  border-width: 5px;
  margin-left: -5px
}

.apexcharts-xaxistooltip:before {
  border-color: transparent;
  border-width: 6px;
  margin-left: -6px
}

.apexcharts-xaxistooltip-bottom:after,
.apexcharts-xaxistooltip-bottom:before {
  bottom: 100%
}

.apexcharts-xaxistooltip-top:after,
.apexcharts-xaxistooltip-top:before {
  top: 100%
}

.apexcharts-xaxistooltip-bottom:after {
  border-bottom-color: var(--apx-axt-bg)
}

.apexcharts-xaxistooltip-bottom:before {
  border-bottom-color: var(--apx-axt-border)
}

.apexcharts-xaxistooltip-top:after {
  border-top-color: var(--apx-axt-bg)
}

.apexcharts-xaxistooltip-top:before {
  border-top-color: var(--apx-axt-border)
}

.apexcharts-xaxistooltip.apexcharts-active {
  opacity: 1;
  transition: .15s ease all
}

.apexcharts-yaxistooltip {
  padding: 3px 8px
}

.apexcharts-yaxistooltip:after,
.apexcharts-yaxistooltip:before {
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none
}

.apexcharts-yaxistooltip:after {
  border-color: transparent;
  border-width: 5px;
  margin-top: -5px
}

.apexcharts-yaxistooltip:before {
  border-color: transparent;
  border-width: 6px;
  margin-top: -6px
}

.apexcharts-yaxistooltip-left:after,
.apexcharts-yaxistooltip-left:before {
  left: 100%
}

.apexcharts-yaxistooltip-right:after,
.apexcharts-yaxistooltip-right:before {
  right: 100%
}

.apexcharts-yaxistooltip-left:after {
  border-left-color: var(--apx-axt-bg)
}

.apexcharts-yaxistooltip-left:before {
  border-left-color: var(--apx-axt-border)
}

.apexcharts-yaxistooltip-right:after {
  border-right-color: var(--apx-axt-bg)
}

.apexcharts-yaxistooltip-right:before {
  border-right-color: var(--apx-axt-border)
}

.apexcharts-yaxistooltip.apexcharts-active {
  opacity: 1
}

.apexcharts-yaxistooltip-hidden {
  display: none
}

.apexcharts-xcrosshairs,
.apexcharts-ycrosshairs {
  pointer-events: none;
  opacity: 0;
  transition: .15s ease all
}

.apexcharts-xcrosshairs.apexcharts-active,
.apexcharts-ycrosshairs.apexcharts-active {
  opacity: 1;
  transition: .15s ease all
}

.apexcharts-ycrosshairs-hidden {
  opacity: 0
}

.apexcharts-selection-rect {
  cursor: move
}

.svg_select_shape {
  stroke-width: 1;
  stroke-dasharray: 10 10;
  stroke: black;
  stroke-opacity: 0.1;
  pointer-events: none;
  fill: none;
}

.svg_select_handle {
  stroke-width: 3;
  stroke: black;
  fill: none;
}

.svg_select_handle_r {
  cursor: e-resize;
}

.svg_select_handle_l {
  cursor: w-resize;
}

.apexcharts-svg.apexcharts-zoomable.hovering-zoom {
  cursor: crosshair
}

.apexcharts-svg.apexcharts-zoomable.hovering-pan {
  cursor: move
}

.apexcharts-menu-icon,
.apexcharts-measure-icon,
.apexcharts-pan-icon,
.apexcharts-reset-icon,
.apexcharts-selection-icon,
.apexcharts-toolbar-custom-icon,
.apexcharts-zoom-icon,
.apexcharts-zoomin-icon,
.apexcharts-zoomout-icon {
  cursor: pointer;
  /* WCAG 2.5.8 Target Size (Minimum): 24×24 CSS px hit target. */
  width: 26px;
  height: 24px;
  line-height: 24px;
  color: #6e8192;
  text-align: center;
  /* Reset native <button> chrome — these are styled via SVG icons. */
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .12s ease, color .12s ease;
}

.apexcharts-menu-icon svg,
.apexcharts-measure-icon svg,
.apexcharts-pan-icon svg,
.apexcharts-reset-icon svg,
.apexcharts-selection-icon svg,
.apexcharts-zoom-icon svg,
.apexcharts-zoomin-icon svg,
.apexcharts-zoomout-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.apexcharts-theme-dark .apexcharts-menu-icon,
.apexcharts-theme-dark .apexcharts-measure-icon,
.apexcharts-theme-dark .apexcharts-pan-icon,
.apexcharts-theme-dark .apexcharts-reset-icon,
.apexcharts-theme-dark .apexcharts-selection-icon,
.apexcharts-theme-dark .apexcharts-toolbar-custom-icon,
.apexcharts-theme-dark .apexcharts-zoom-icon,
.apexcharts-theme-dark .apexcharts-zoomin-icon,
.apexcharts-theme-dark .apexcharts-zoomout-icon {
  color: #d4d6dc
}

.apexcharts-canvas .apexcharts-measure-icon.apexcharts-selected,
.apexcharts-canvas .apexcharts-pan-icon.apexcharts-selected,
.apexcharts-canvas .apexcharts-reset-zoom-icon.apexcharts-selected,
.apexcharts-canvas .apexcharts-selection-icon.apexcharts-selected,
.apexcharts-canvas .apexcharts-zoom-icon.apexcharts-selected {
  background: rgba(0, 143, 251, 0.12);
  color: #008ffb
}

.apexcharts-theme-light .apexcharts-menu-icon:hover,
.apexcharts-theme-light .apexcharts-measure-icon:not(.apexcharts-selected):hover,
.apexcharts-theme-light .apexcharts-pan-icon:not(.apexcharts-selected):hover,
.apexcharts-theme-light .apexcharts-reset-icon:hover,
.apexcharts-theme-light .apexcharts-selection-icon:not(.apexcharts-selected):hover,
.apexcharts-theme-light .apexcharts-zoom-icon:not(.apexcharts-selected):hover,
.apexcharts-theme-light .apexcharts-zoomin-icon:hover,
.apexcharts-theme-light .apexcharts-zoomout-icon:hover {
  background: rgba(15, 23, 42, 0.06);
  color: #1f2937
}

.apexcharts-theme-dark .apexcharts-menu-icon:hover,
.apexcharts-theme-dark .apexcharts-measure-icon:not(.apexcharts-selected):hover,
.apexcharts-theme-dark .apexcharts-pan-icon:not(.apexcharts-selected):hover,
.apexcharts-theme-dark .apexcharts-reset-icon:hover,
.apexcharts-theme-dark .apexcharts-selection-icon:not(.apexcharts-selected):hover,
.apexcharts-theme-dark .apexcharts-zoom-icon:not(.apexcharts-selected):hover,
.apexcharts-theme-dark .apexcharts-zoomin-icon:hover,
.apexcharts-theme-dark .apexcharts-zoomout-icon:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff
}

.apexcharts-menu-icon,
.apexcharts-selection-icon {
  position: relative
}

.apexcharts-toolbar {
  position: absolute;
  z-index: 11;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 3px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.apexcharts-theme-dark .apexcharts-toolbar {
  background: rgba(28, 28, 31, 0.82);
}

.apexcharts-menu {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: absolute;
  top: calc(100% + 4px);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  padding: 4px;
  right: 0;
  opacity: 0;
  min-width: 120px;
  transition: opacity .15s ease, transform .15s ease;
  transform: translateY(-2px);
  pointer-events: none;
  box-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.12), 0 2px 4px -1px rgba(15, 23, 42, 0.06)
}

.apexcharts-menu.apexcharts-menu-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all
}

.apexcharts-menu-item {
  padding: 6px 9px;
  font-size: 12px;
  border-radius: 5px;
  cursor: pointer
}

.apexcharts-theme-light .apexcharts-menu-item:hover {
  background: rgba(15, 23, 42, 0.06)
}

.apexcharts-theme-dark .apexcharts-menu {
  background: rgba(28, 28, 31, 0.92);
  border-color: rgba(255, 255, 255, 0.08);
  color: #f3f4f6;
  box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.4)
}

.apexcharts-theme-dark .apexcharts-menu-item:hover {
  background: rgba(255, 255, 255, 0.08)
}

@media screen and (min-width:768px) {
  .apexcharts-canvas:hover .apexcharts-toolbar {
    opacity: 1
  }
}

/* Toolbar keyboard accessibility: show toolbar when any button inside it is focused */
.apexcharts-toolbar:focus-within {
  opacity: 1
}

/* Focus indicator for toolbar icon buttons */
.apexcharts-menu-icon:focus-visible,
.apexcharts-measure-icon:focus-visible,
.apexcharts-pan-icon:focus-visible,
.apexcharts-reset-icon:focus-visible,
.apexcharts-selection-icon:focus-visible,
.apexcharts-toolbar-custom-icon:focus-visible,
.apexcharts-zoom-icon:focus-visible,
.apexcharts-zoomin-icon:focus-visible,
.apexcharts-zoomout-icon:focus-visible {
  outline: 2px solid var(--apexcharts-focus-color, #008FFB);
  outline-offset: 1px;
  border-radius: 5px
}

/* Focus indicator for hamburger menu items */
.apexcharts-menu-item:focus-visible {
  outline: 2px solid var(--apexcharts-focus-color, #008FFB);
  outline-offset: -2px;
  background: #eee
}

.apexcharts-canvas .apexcharts-element-hidden,
.apexcharts-datalabel.apexcharts-element-hidden,
.apexcharts-hide .apexcharts-series-points {
  opacity: 0;
}

.apexcharts-hidden-element-shown {
  opacity: 1;
  transition: 0.25s ease all;
}

.apexcharts-datalabel,
.apexcharts-datalabel-label,
.apexcharts-datalabel-value,
.apexcharts-datalabels,
.apexcharts-pie-label,
.apexcharts-pie-name-label,
.apexcharts-pie-name-label-group,
.apexcharts-pie-label-connector,
.apexcharts-unit-outer-label,
.apexcharts-unit-outer-label-group,
.apexcharts-unit-label-connector {
  cursor: default;
  pointer-events: none
}

.apexcharts-pie-label-connector,
.apexcharts-unit-label-connector {
  fill: none
}

.apexcharts-pie-label-delay,
.apexcharts-unit-label-delay {
  opacity: 0;
  animation-name: opaque;
  animation-duration: .3s;
  animation-fill-mode: forwards;
  animation-timing-function: ease
}

/* Slower than the pie's, on purpose: these come in while the dots are still
   easing into place, so a longer fade reads as arriving WITH the crowd. */
.apexcharts-unit-label-delay {
  animation-duration: .5s
}

.apexcharts-radialbar-label {
  cursor: pointer;
}

.apexcharts-annotation-rect,
.apexcharts-area-series .apexcharts-area,
.apexcharts-gridline,
.apexcharts-line,
.apexcharts-point-annotation-label,
.apexcharts-radar-series path:not(.apexcharts-marker),
.apexcharts-radar-series polygon,
.apexcharts-toolbar svg,
.apexcharts-tooltip .apexcharts-marker,
.apexcharts-xaxis-annotation-label,
.apexcharts-yaxis-annotation-label,
.apexcharts-zoom-rect,
.no-pointer-events {
  pointer-events: none
}

.apexcharts-tooltip-active .apexcharts-marker {
  transition: .15s ease all
}

.apexcharts-radar-series .apexcharts-yaxis {
  pointer-events: none;
}

.resize-triggers {
  animation: 1ms resizeanim;
  visibility: hidden;
  opacity: 0;
  height: 100%;
  width: 100%;
  overflow: hidden
}

.contract-trigger:before,
.resize-triggers,
.resize-triggers>div {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0
}

.resize-triggers>div {
  height: 100%;
  width: 100%;
  background: #eee;
  overflow: auto
}

.contract-trigger:before {
  overflow: hidden;
  width: 200%;
  height: 200%
}

.apexcharts-bar-goals-markers {
  pointer-events: none
}

.apexcharts-bar-shadows {
  pointer-events: none
}

.apexcharts-rangebar-goals-markers {
  pointer-events: none
}

.apexcharts-drilldown-target {
  cursor: pointer
}

.apexcharts-breadcrumb {
  position: absolute;
  z-index: 11;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-family: inherit;
  padding: 2px 4px
}

.apexcharts-breadcrumb-item {
  background: transparent;
  border: none;
  padding: 2px 6px;
  border-radius: 3px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  line-height: 1.2
}

.apexcharts-breadcrumb-item:hover:not(.apexcharts-breadcrumb-current) {
  background: rgba(0, 0, 0, 0.08)
}

.apexcharts-breadcrumb-arrow {
  margin-right: 4px;
  font-weight: 600;
  user-select: none
}

.apexcharts-breadcrumb-current {
  cursor: default;
  font-weight: 600;
  opacity: 0.85
}

.apexcharts-breadcrumb-separator {
  opacity: 0.5;
  user-select: none
}

.apexcharts-theme-dark .apexcharts-breadcrumb-item:hover:not(.apexcharts-breadcrumb-current) {
  background: rgba(255, 255, 255, 0.12)
}

.apexcharts-drilldown-loading {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  font-family: inherit;
  color: inherit;
  background: rgba(255, 255, 255, 0.62);
  /* The chart underneath stays interactive-looking but must not take clicks
     while a level is resolving, or a second drill can start mid-fetch. */
  cursor: progress
}

.apexcharts-drilldown-loading-spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2.5px solid rgba(0, 0, 0, 0.16);
  border-top-color: rgba(0, 0, 0, 0.55);
  animation: apexcharts-drilldown-spin 0.7s linear infinite
}

.apexcharts-drilldown-loading-text {
  opacity: 0.8
}

.apexcharts-theme-dark .apexcharts-drilldown-loading {
  background: rgba(30, 30, 30, 0.62)
}

.apexcharts-theme-dark .apexcharts-drilldown-loading-spinner {
  border-color: rgba(255, 255, 255, 0.22);
  border-top-color: rgba(255, 255, 255, 0.7)
}

@keyframes apexcharts-drilldown-spin {
  to {
    transform: rotate(360deg)
  }
}

@media (prefers-reduced-motion: reduce) {
  .apexcharts-drilldown-loading-spinner {
    animation: apexcharts-drilldown-pulse 1.4s ease-in-out infinite
  }

  @keyframes apexcharts-drilldown-pulse {
    0%, 100% {
      opacity: 0.35
    }

    50% {
      opacity: 1
    }
  }
}

.apexcharts-disable-transitions * {
  transition: none !important;
}
/* ── Trellis (#22): small multiples ─────────────────────────────────────── */
.apexcharts-trellis {
  position: relative;
}
.apexcharts-trellis-grid {
  display: grid;
}
.apexcharts-trellis-cell {
  min-width: 0;
  position: relative;
}
.apexcharts-trellis-header {
  font-size: 12px;
  font-weight: 600;
  line-height: 22px;
  height: 22px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--apx-fore, #373d3f);
}
.apexcharts-trellis-title {
  font-size: 14px;
  font-weight: 700;
  padding: 2px 0 6px;
  color: var(--apx-fore, #373d3f);
}
/* Edge-label policy: a muted cell hides its axis-label INK, never the label
   SPACE — every panel keeps the identical plot rectangle, and flipping the
   policy on a resize is a class toggle, not a re-render. */
.apexcharts-trellis-mute-y .apexcharts-yaxis {
  opacity: 0;
}
.apexcharts-trellis-mute-x .apexcharts-xaxis {
  opacity: 0;
}
/* The shared toolbar floats at the top-right, so a grid that has one starts
   below it: from four columns on, the last cell's header (or a 2-D column
   strip label) would otherwise run under the buttons. One band for the whole
   grid, not per panel. */
.apexcharts-trellis-has-toolbar {
  padding-top: 24px;
}
/* 2-D faceting (P4): column labels once across the top, row labels once
   down the left. The row strip column is auto-sized; panel columns stay
   equal fractions, so panel alignment is independent of the strip width. */
.apexcharts-trellis-strip {
  font-size: 12px;
  font-weight: 600;
  color: var(--apx-fore, #373d3f);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.apexcharts-trellis-strip-column {
  text-align: center;
  line-height: 22px;
  height: 22px;
  align-self: end;
}
.apexcharts-trellis-strip-row {
  align-self: center;
  max-width: 140px;
  padding-right: 6px;
}
/* Empty (row, column) combinations. 'placeholder' keeps a REAL panel with a
   quiet label; 'skip' shows the tinted skeleton; 'hide' shows nothing while
   keeping the grid slot. */
.apexcharts-trellis-cell-empty {
  position: relative;
}
.apexcharts-trellis-empty-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--apx-fore, #373d3f);
  opacity: 0.45;
  pointer-events: none;
}
.apexcharts-trellis-cell-hidden > * {
  visibility: hidden;
}
/* P5: one shared gradient strip is a heatmap grid's legend. The slot is
   content-sized inline (the strip svg's own box); centering is its own. */
.apexcharts-trellis-gradient-legend {
  margin: 10px auto 0;
}
/* Virtualization (P2): an unmounted panel's mount div reserves the exact
   panel height (inline min-height) so page height and scroll position never
   shift; the skeleton itself is a quiet tinted block. Deliberately not
   animated: a shimmering grid of 200 placeholders is noise. */
.apexcharts-trellis-panel.apexcharts-trellis-skeleton {
  background: var(--apx-fore, #373d3f);
  opacity: 0.05;
  border-radius: 4px;
}
/* tooltip: 'panel' — the group still syncs every panel's crosshair, but only
   the hovered cell shows its tooltip cards. */
.apexcharts-trellis[data-tooltip-mode='panel'] .apexcharts-trellis-cell:not(:hover) .apexcharts-tooltip,
.apexcharts-trellis[data-tooltip-mode='panel'] .apexcharts-trellis-cell:not(:hover) .apexcharts-xaxistooltip,
.apexcharts-trellis[data-tooltip-mode='panel'] .apexcharts-trellis-cell:not(:hover) .apexcharts-yaxistooltip {
  opacity: 0 !important;
}
/* tooltip: 'grid' (P3) — ALL per-panel tooltip ink is hidden (the group
   still computes it; the trellis card reads it) and one trellis-owned card
   follows the cursor with one row per panel. */
.apexcharts-trellis[data-tooltip-mode='grid'] .apexcharts-trellis-cell .apexcharts-tooltip,
.apexcharts-trellis[data-tooltip-mode='grid'] .apexcharts-trellis-cell .apexcharts-xaxistooltip,
.apexcharts-trellis[data-tooltip-mode='grid'] .apexcharts-trellis-cell .apexcharts-yaxistooltip {
  opacity: 0 !important;
}
.apexcharts-trellis-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 14;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease;
  background: var(--apx-bg, #fff);
  color: var(--apx-fore, #373d3f);
  border: 1px solid rgba(120, 120, 120, 0.25);
  border-radius: 5px;
  box-shadow: 2px 2px 6px -4px rgba(0, 0, 0, 0.4);
  font-size: 12px;
  min-width: 140px;
  max-width: 320px;
}
.apexcharts-trellis-tooltip-active {
  opacity: 1;
}
.apexcharts-trellis-tooltip .apexcharts-tooltip-title {
  padding: 5px 10px;
  font-weight: 600;
  background: rgba(120, 120, 120, 0.08);
  border-bottom: 1px solid rgba(120, 120, 120, 0.18);
  margin-bottom: 2px;
}
.apexcharts-trellis-tooltip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 2px 10px;
  line-height: 1.6;
}
.apexcharts-trellis-tooltip-row-active {
  background: rgba(120, 120, 120, 0.1);
  font-weight: 600;
}
.apexcharts-trellis-tooltip-key {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.apexcharts-trellis-tooltip-vals {
  display: flex;
  gap: 10px;
  white-space: nowrap;
}
.apexcharts-trellis-tooltip-val {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.apexcharts-trellis-tooltip-marker {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}
/* Panel promotion (P3): the promoted cell spans the grid; the rest park.
   The promoted panel is the only visible one, so both its axes unmute. */
.apexcharts-trellis-cell-promoted {
  grid-column: 1 / -1;
}
.apexcharts-trellis-cell-parked {
  display: none;
}
.apexcharts-trellis-cell-promoted.apexcharts-trellis-mute-y .apexcharts-yaxis,
.apexcharts-trellis-cell-promoted.apexcharts-trellis-mute-x .apexcharts-xaxis {
  opacity: 1;
}
.apexcharts-trellis-header-clickable {
  cursor: pointer;
}
.apexcharts-trellis-header-clickable:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.apexcharts-trellis-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 2px 0 6px;
  color: var(--apx-fore, #373d3f);
}
.apexcharts-trellis-breadcrumb-back {
  border: none;
  background: none;
  padding: 0;
  font-size: 12px;
  cursor: pointer;
  color: var(--apx-accent, #008ffb);
}
.apexcharts-trellis-breadcrumb-back:hover {
  text-decoration: underline;
}
.apexcharts-trellis-breadcrumb-sep {
  opacity: 0.5;
}
.apexcharts-trellis-breadcrumb-current {
  font-weight: 600;
}
/* The toolbar download menu (P3). */
.apexcharts-trellis-menu {
  position: absolute;
  top: 26px;
  right: 0;
  display: none;
  flex-direction: column;
  min-width: 132px;
  background: var(--apx-bg, #fff);
  border: 1px solid rgba(120, 120, 120, 0.25);
  border-radius: 5px;
  box-shadow: 2px 2px 6px -4px rgba(0, 0, 0, 0.4);
  padding: 4px;
  z-index: 15;
}
.apexcharts-trellis-menu-open {
  display: flex;
}
.apexcharts-trellis-menu-item {
  border: none;
  background: none;
  text-align: left;
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 3px;
  cursor: pointer;
  color: var(--apx-fore, #373d3f);
}
.apexcharts-trellis-menu-item:hover {
  background: rgba(120, 120, 120, 0.12);
}
.apexcharts-trellis-toolbar {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 2px;
  z-index: 12;
}
.apexcharts-trellis-tool {
  border: 0;
  background: transparent;
  padding: 2px;
  cursor: pointer;
  border-radius: 3px;
  color: #6e8192;
  line-height: 0;
}
.apexcharts-trellis-tool:hover {
  color: var(--apx-fore, #373d3f);
}
.apexcharts-trellis-tool.apexcharts-selected {
  color: var(--apx-accent, #008ffb);
}
.apexcharts-trellis-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
  padding: 8px 10px 2px;
}
.apexcharts-trellis-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  line-height: 1;
}
.apexcharts-trellis-legend-item .apexcharts-legend-marker {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}
.apexcharts-trellis-legend-item .apexcharts-legend-text {
  font-size: 12px;
  color: var(--apx-fore, #373d3f);
}
.apexcharts-trellis-legend-item.apexcharts-inactive-legend {
  opacity: 0.45;
}