.grid line {
    stroke: #ccc;
    stroke-opacity: 0.7;
  }
  
  /* Need to discuss this with the team */
  .axis path,
  .axis line {
    stroke: none; /* Changes the color of the axis lines */
  }
  
  .grid .tick {
    stroke: lightgrey; /* Changes the color of the gridlines */
    stroke-opacity: 0.7;
    shape-rendering: crispEdges; /* Makes the gridlines appear more crisp */
  }
  .grid path {
    stroke-width: 0; /* Removes the line along the y-axis */
  }
  
  /* .chart-container {
    display: inline-block;
    vertical-align: top;
  }
  
  .chart-container:last-child {
    margin-right: 0;
  }
  
  .title {
    font-weight: 600;
    fill: #414042;
  } */

  .dataLabel {
    font-weight: 600;
    font-size: 14px;
  }

  body {
    padding-top: 3px;
  }

  @keyframes example {
    from {stroke: #dadada;}
    to {stroke: #003C57;}
  }

  path.selected {
    /* stroke: #003C57;
    transition: stroke 5000ms ease;
     */
     /* color: #003C57; */
     animation-name: example;
     animation-duration: 500ms;
     stroke: #003C57;
  }

  circle.selected {
    opacity: 1;
    transition: 500ms ease;
  }

  text.selected {
    opacity: 1;
    transition: 500ms ease;
  }

  .area-selected{
    opacity: 0.15;
    transition: 500ms ease;
  }

 #legend {
  padding-top: 10px;
 }

 /* From design system */

 /* .ons-field {
  position: relative;
}

.ons-input--block, .ons-input-search {
  display: block; 
  width: 90%;
}

.ons-input--select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMS43NSA3LjcnPjxwYXRoIGZpbGw9J2N1cnJlbnRDb2xvcicgZD0nbTEuMzcuMTUgNC41IDUuMSA0LjUtNS4xYS4zNy4zNyAwIDAgMSAuNiAwbC43LjdhLjQ1LjQ1IDAgMCAxIDAgLjVsLTUuNSA2LjJhLjM3LjM3IDAgMCAxLS42IDBsLTUuNS02LjFhLjY0LjY0IDAgMCAxIDAtLjZsLjctLjdhLjY0LjY0IDAgMCAxIC42IDBaJy8+PC9zdmc+) no-repeat center right 10px;
  background-size: 1rem;
  line-height: 1.3rem;
  padding: 0.39rem 2rem 0.39rem 0.5rem;
}

.ons-input {
  border: 1px solid var(--ons-color-input-border);
  border-radius: 3px;
  color: inherit;
  display: block;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1rem;
  padding: 0.39rem 0.5rem;
  position: relative;
  width: 100%;
  z-index: 3;
}

button, select {
  text-transform: none;
}

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
} */