.forest-d3 rect.bar {
  fill-opacity: 0.7;
  stroke-width: 1;
  stroke: #fff;
  stroke-opacity: 0.1;
  transition: fill-opacity 0.25s, stroke-opacity 0.25s;
}
.forest-d3 .highlight rect.bar {
  fill-opacity: 0.9;
  stroke-opacity: 0.9;
}
.forest-d3.bar-chart text {
  font-size: 20px;
  fill: #dcdcdc;
}
.forest-d3 .bars rect {
  stroke: #fff;
}
.forest-d3 .bars line.zero-line {
  stroke: #fff;
  stroke-opacity: 0.7;
}

.forest-d3 svg {
  width: 100%;
  height: 100%;
}
.forest-d3.auto-height svg {
  height: auto;
}
.forest-d3 rect.backdrop {
  opacity: 0;
  pointer-events: all;
}
.forest-d3 .axis .tick line {
  stroke: #fff;
}
.forest-d3 .axis .tick text {
  fill: #dcdcdc;
}
.forest-d3 .axis.x-axis .tick line {
  stroke-opacity: 0.2;
}
.forest-d3 .axis.y-axis .tick line {
  stroke-opacity: 0.1;
}
.forest-d3 .axis > path {
  fill: none;
  stroke: #fff;
  stroke-opacity: 0.2;
}
.forest-d3 .axes-labels {
  fill: #dcdcdc;
  pointer-events: none;
}
.forest-d3 .canvas > rect {
  pointer-events: all;
  fill: none;
  stroke: #fff;
  stroke-opacity: 0.2;
}
.forest-d3 .canvas path.point {
  fill-opacity: 0.75;
  stroke: #fff;
  stroke-opacity: 0.5;
  transition: fill-opacity 0.25s, stroke-opacity 0.25s, stroke-width 0.25s;
}
.forest-d3 .canvas .highlight path.point {
  fill-opacity: 0.9;
  stroke-opacity: 0.9;
  stroke-width: 1.5;
}
.forest-d3 .canvas line.guideline,
.forest-d3 .canvas line.crosshair-x,
.forest-d3 .canvas line.crosshair-y {
  stroke: #fff;
  pointer-events: none;
}
.forest-d3 .canvas .guideline-markers circle.marker {
  stroke: #fff;
  stroke-opacity: 0.7;
}
.forest-d3 .canvas .series {
  pointer-events: none;
}
.forest-d3 .canvas .series.interactive {
  pointer-events: all;
}

.forest-d3.legend .item {
  min-width: 200px;
  padding: 5px;
  cursor: pointer;
  transition: all 0.25s;
}
.forest-d3.legend .item:hover {
  background-color: rgba(124,124,244,0.23);
}
.forest-d3.legend .item:hover .show-only {
  display: inline-block;
}
.forest-d3.legend .item.disabled {
  color: #ccc;
  font-style: italic;
  opacity: 0.5;
}
.forest-d3.legend .item .color-square {
  position: relative;
  top: 3px;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  border: solid 1px #ccc;
  border-radius: 3px;
}
.forest-d3.legend .item .show-only {
  display: none;
  margin-left: 15px;
}
.forest-d3.legend .button {
  cursor: pointer;
  color: #498fcb;
}
.forest-d3.legend .button:hover {
  text-decoration: underline;
}

.forest-d3 path.line {
  fill: none;
  stroke-opacity: 0.8;
  stroke-width: 2;
  pointer-events: none;
  transition: stroke-opacity 0.25s, stroke-width 0.25s;
}
.forest-d3 path.area {
  fill-opacity: 0.3;
  transition: fill-opacity 0.25s;
}
.forest-d3 .highlight path.line {
  stroke-opacity: 1;
  stroke-width: 3;
}
.forest-d3 .highlight path.area {
  fill-opacity: 0.5;
}

.forest-d3 line.marker {
  stroke: #fff;
  stroke-opacity: 0.5;
  stroke-dasharray: 5;
}
.forest-d3 .marker-label {
  fill: #dcdcdc;
  font-size: 11px;
}

.forest-d3 .ohlc line {
  stroke: #fff;
}
.forest-d3 .ohlc line.ohlc-range {
  stroke-width: 2px;
}
.forest-d3 .ohlc line.ohlc-open,
.forest-d3 .ohlc line.ohlc-close {
  stroke-width: 3px;
}

.forest-d3 rect.region {
  fill: #dcdcdc;
  fill-opacity: 0.15;
}

.forest-d3.tooltip-box {
  position: absolute;
  pointer-events: none;
  min-width: 20px;
  min-height: 20px;
  margin: 0 10px 0 10px;
  padding: 7px;
  background: #201f1d;
  color: #dcdcdc;
  border: solid 1px #ccc;
  border-radius: 3px;
  z-index: 100;
}
.forest-d3.tooltip-box .header {
  font-weight: bold;
  margin-bottom: 8px;
}
.forest-d3.tooltip-box table td {
  white-space: nowrap;
}
.forest-d3.tooltip-box table td.series-label {
  padding-right: 20px;
}
.forest-d3.tooltip-box table td.series-value {
  text-align: right;
  font-weight: bold;
}
.forest-d3.tooltip-box table td .series-color {
  width: 13px;
  height: 12px;
  border-radius: 3px;
  margin-right: 10px;
}