.chart-hit {
  fill: transparent;
  stroke: transparent;
  pointer-events: all;
  outline: none;
}
.chart-hit:hover,
.chart-hit:focus {
  fill: #3a665009;
  stroke: #6c8c6a55;
  stroke-width: 0.7;
  vector-effect: non-scaling-stroke;
}
.chart-tooltip {
  position: fixed;
  z-index: 1400;
  pointer-events: none;
  min-width: 210px;
  max-width: calc(100vw - 16px);
  padding: 15px 17px;
  border: 1px solid #dbe4d2;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 35px #193c3226;
  color: #254538;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.chart-tooltip[hidden] {
  display: none;
}
.chart-tooltip-date {
  display: block;
  margin-bottom: 12px;
  font-size: 11px;
  color: #6c7e62;
  font-weight: 600;
}
.chart-tooltip dl {
  display: grid;
  gap: 10px;
  margin: 0;
}
.chart-tooltip-row {
  display: flex;
  justify-content: space-between;
  gap: 25px;
}
.chart-tooltip dt {
  color: #7b8973;
}
.chart-tooltip dd {
  margin: 0;
  font-weight: 600;
}
.chart-tooltip-row.in dd {
  color: #3a6650;
}
.chart-tooltip-row.out dd {
  color: #94734a;
}
.chart-tooltip-row.net {
  border-top: 1px solid #e3e9dc;
  padding-top: 10px;
}
.chart-tooltip-row.net dd {
  color: #254538;
}
.chart-tooltip-row.muted dd {
  color: #7b8973;
}