/* 14. Charts */

.chart {
  width: 100%;
  height: auto;
  min-height: 180px;
  display: block;
  direction: ltr;
}

.chart text {
  font: 12px Vazirmatn,Tahoma,sans-serif;
  fill: var(--text-soft);
}

.chart-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12px;
}

.chart-legend span:before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 3px;
  background: var(--blue);
  margin-inline-start: 6px;
  vertical-align: middle;
}

.chart-legend .predicted:before {
  background: var(--gold);
}

.chart-legend .interval:before {
  height: 10px;
  background: var(--chart-interval);
}

.chart-legend .baseline:before {
  background: var(--purple);
}

.chart-legend .issue:before {
  background: var(--red);
}