.chart {
  text-align: center;
  min-width: 375px;
  max-width: 500px;
  min-height: 435px;
  margin: 10px auto;
  padding: 10px 0;

  box-shadow: 0 2px 3px 0 #00000033;
  border-radius: 2px;
  font-family: 'CTVSans-Regular', 'CTV Sans', Arial, Helvetica, sans-serif;
}

.chart-title {
  font-family: 'CTVSans-Bold', 'CTV Sans', Arial, Helvetica, sans-serif;
  font-size: 18px;
  text-align: center;
  margin: 10px 0 3px;
}

.chart-subtitle {
  font-family: 'CTVSans-Regular', 'CTV Sans', Arial, Helvetica, sans-serif;
  font-size: 14px;
  margin: 3px 0 16px;
}

.chart-legend {
  font-size: 14px;
}

.chart-source {
  font-size: 12px;
  text-align: right;
  padding: 0 15px 0 0;
  color: #2c2c2c
}

.chart-tooltip {
  background: white;
  padding: 5px 6px 3px;
  border: 1px solid #6a6a6a;
  font-family: 'CTVSans-Regular', 'CTV Sans', Arial, Helvetica, sans-serif;
  border-radius: 2px;
  transition: opacity 0.1s;
  box-shadow: 0 2px 3px 0 #00000011;

}

.tooltip-title {
  font-family: 'CTVSans-Regular', 'CTV Sans', Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.tooltip-body {
  font-family: 'CTVSans-Bold', 'CTV Sans', Arial, Helvetica, sans-serif;
  font-size: 16px;
  text-align: center;
  margin: 3px 0 0;
}

.chart-axis {
  font-family: 'CTVSans-Regular', 'CTV Sans', Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.chart-line {
  stroke: black;
  stroke-width: 3px;
  stroke-linecap: round;
}

.chart-dots {
  stroke: black;
  stroke-width: 3px;
}

#chart-1 .layer-1-dots {
  fill: rgb(245, 90, 90);
}

#chart-1 .layer-2-dots {
  fill: rgb(192, 36, 36);
}

#chart-2 .layer-1-line {
}

#chart-2 .layer-2-line {
  stroke-dasharray: 5;
}

#chart-2 .layer-3-line {
  stroke-dasharray: 5;
}

#chart-2 .layer-1-dots {
  fill: rgb(192, 36, 36);
}

#chart-2 .layer-2-dots {
  fill: rgb(192, 119, 36);
}

#chart-2 .layer-3-dots {
  fill: rgb(192, 176, 36);
}