.highcharts-background {
  fill: var(--dm-card-bg-color);
}

/* Navigator (Stock Chart) */

.highcharts-navigator-mask-outside {
  fill-opacity: 0;
}

.highcharts-navigator-mask-inside {
  fill: var(--primary-color);
  /* navigator.maskFill option */
  fill-opacity: 0.25;
  cursor: ew-resize;
}

.highcharts-navigator-outline {
  stroke: none;
  fill: none;
}

.highcharts-navigator-handle {
  stroke: var(--primary-color);
  fill: var(--primary-color);
  cursor: ew-resize;
}

.highcharts-navigator-series {
  fill: #335cad;
  stroke: #335cad;
}

.highcharts-navigator-series .highcharts-graph {
  stroke-width: 1px;
}

.highcharts-navigator-series .highcharts-area {
  fill-opacity: 0.25;
}

.highcharts-navigator-xaxis .highcharts-axis-line {
  stroke-width: 0;
}

.highcharts-navigator-xaxis .highcharts-grid-line {
  stroke-width: 1px;
  stroke: var(--dm-base-body-bg-color);
}

.highcharts-navigator-xaxis.highcharts-axis-labels {
  fill: #999999;
}

.highcharts-navigator-yaxis .highcharts-grid-line {
  stroke-width: 0;
}

.highcharts-scrollbar-thumb {
  fill: var(--primary-color);
  stroke: var(--primary-color);
  stroke-width: 1px;
}

.highcharts-scrollbar-button {
  fill: var(--primary-color);
  stroke: var(--primary-color);
  stroke-width: 1px;
}

.highcharts-scrollbar-arrow {
  fill: #ffffff;
}

.highcharts-scrollbar-rifles {
  stroke: #ffffff;
  stroke-width: 1px;
}

.highcharts-scrollbar-track {
  fill: var(--dm-base-body-bg-color);
  stroke: var(--dm-base-body-bg-color);
  stroke-width: 1px;
}

/* .highcharts-range-selector-buttons */

.highcharts-button text {
  fill: #aaaaaa !important;
}

.highcharts-button .highcharts-button-box {
  fill: rgba(255, 255, 255, .05);
}

.highcharts-button-hover .highcharts-button-box {
  fill: rgba(255, 255, 255, 0.25);
}

.highcharts-button-hover text {
  fill: #ffffff !important;
}

.highcharts-button-pressed .highcharts-button-box {
  fill: rgba(255, 255, 255, 0.25);
}

.highcharts-button-pressed text {
  fill: #ffffff !important;
}

.highcharts-legend-item text {
  fill: rgba(255, 255, 255, 0.5) !important;
}

.highcharts-legend-item:hover text {
  fill: rgba(255, 255, 255, 0.75) !important;
}

.highcharts-legend-item-hidden text {
  fill: rgba(255, 255, 255, 0.1) !important;
}