.ctv-graphic {
  min-height: 400px;
  line-height: 1.25;
}

.chart-note > p {
  font-family: "CTVSans-Regular", Roboto, sans;
  color: #222;
  font-size: 12px;
  text-align: center;
  line-height: 1.25;
    margin-bottom: 8px;
}

.ctv-graphic svg {
  font-family: "CTVSans-Regular", Roboto, sans;
  fill: #666;
  font-size: 10px;
  width: 100%;
  height: 400px;
  /* box-shadow: 0 0 2px 1px #ccc; */
}

.ctv-graphic svg .title text {
  font-family: "CTVSans-Bold", Roboto, sans;
  fill: #222;
  text-anchor: middle;
}
.ctv-graphic svg .legend text {
  font-size: 12px;
}

.ctv-graphic svg text.date-highlight {
  text-anchor: middle;
  font-family: "CTVSans-Black", Roboto, sans;
  fill: #222;
}

.ctv-graphic svg .title text.sub-title {
  font-family: "CTVSans-Regular", Roboto, sans;
  fill: #222;
  text-anchor: middle;
}

.ctv-graphic svg .chart line {
  fill: none;
  stroke: #222;
  stroke-width: 1px;
  stroke-dasharray: 3 2;
}

.ctv-graphic svg path,
.ctv-graphic svg .legend line {
  fill: none;
  stroke: #222;
  stroke-width: 5px;
}

.ctv-graphic svg path.canada,
.ctv-graphic svg line.canada {
  stroke: #ec5757;
}

.ctv-graphic svg path.usa,
.ctv-graphic svg line.usa {
  stroke: rgb(44, 44, 44);
}

.ctv-graphic .dashed,
.ctv-graphic svg .legend line.dashed {
  stroke-width: 2px;
  /* stroke-dasharray: 2 3; */
  opacity: 0.8;
}

.ctv-graphic line {
  shape-rendering: crispEdges;
}

.ctv-graphic .y-axis line {
  stroke-dasharray: 2 4;
  stroke: #ccc;
  stroke-width: 1px;
}

.ctv-graphic line:first-child {
  stroke-dasharray: none;
  stroke: #999;
}

.ctv-graphic .x-axis line {
  stroke: #999;
}

.ctv-graphic .x-axis text {
  text-anchor: middle;
}