.chart {
  overflow: visible;
}

.chart-svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.chart-grid {
  fill: none;
  stroke: rgba(23, 60, 44, .08);
  stroke-width: 1;
}

.chart-area {
  fill: rgba(23, 60, 44, .10);
}

.chart-path {
  fill: none;
  stroke: #173c2c;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.chart-point {
  position: absolute;
  z-index: 1;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border: 2px solid #173c2c;
  border-radius: 50%;
  background: #c9f86f;
}

.chart-point-one { left: 22.67%; top: 65%; }
.chart-point-two { left: 46.33%; top: 54.29%; }
.chart-point-three { left: 69%; top: 47.86%; }
.chart-point-four { left: 100%; top: 12.86%; }

@media (max-width: 620px) {
  .chart-point {
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
  }
}

.chart-label {
  z-index: 2;
}