text {
  font-family: "MarsCentra-Book", sans-serif;
}
.axis .domain,
.axis-grid .domain {
  stroke: rgba(0, 0, 0, 0.12);
}
.axis .tick circle {
  fill: rgba(0, 0, 160, 0.4);
}
.axis .tick text {
  font-size: 6.42px;
  fill: #0000a0;
}
.label {
  font-size: 7.49px;
  fill: #3c3c3c;
}
.axis-grid .tick line {
  stroke: rgba(0, 0, 0, 0.12);
}

/***** Data Circles *****/
.data-circles .data-circle {
  fill: #0000a0;
}
.data-circles .data-circle.current {
  fill: #fff;
  stroke: #0000a0;
  stroke-width: 2;
}

/***** Neutering *****/
.neuteringTooltip rect {
  fill: #fff;
  stroke: #f00a50;
  filter: drop-shadow(2px 4px 6px rgba(60, 60, 60, 0.1));
  cursor: none;
}
.neuteringTooltip text {
  cursor: none;
}
.neuteringTooltip text tspan:first-child {
  font-family: "MarsCentra-Bold";
  font-size: 14px;
}
.neuteringTooltip text tspan:last-child {
  font-size: 12px;
}

/***** Percentiles - lines *****/
.percentile path {
  stroke: #0000a0;
  stroke-width: 1;
  fill: none;
  opacity: 0.4;
  stroke-width: 0.67;
}
.percentiles-wrapper .percentile:nth-of-type(odd) path {
  stroke-dasharray: 4;
}

/***** Percentiles - areas *****/
.percentiles-area-wrapper .percentile-area path {
  opacity: 0.4;
  fill: none;
  pointer-events: none;
}
/* .percentiles-area-wrapper .percentile-area:nth-child(odd) path {
  fill: rgba(255, 20, 20, 0.15);
}
.percentiles-area-wrapper .percentile-area:nth-child(even) path {
  fill: rgba(0, 215, 185, 0.2);
} */
.percentiles-area-wrapper .percentile-area path.on-track {
  fill: rgba(0, 215, 185, 0.2);
}
.percentiles-area-wrapper .percentile-area path.warning {
  fill: rgba(255, 200, 40, 0.2);
}
.percentiles-area-wrapper .percentile-area path.danger {
  fill: rgba(255, 20, 20, 0.15);
}
.percentile-label {
  font-size: 5.5px;
  fill: rgba(240, 10, 80, 0.5);
}

.scale-chart-hldr .axis .tick text {
  font-size: 10px;
}
.scale-chart-hldr .label {
  font-size: 12px;
}
.scale-chart-hldr .percentile-label {
  font-size: 10px;
}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  .axis .tick text {
    font-size: 12px;
  }
  .label {
    font-size: 14px;
  }
  .percentile-label {
    font-size: 12px;
  }
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
}

@media (min-width: 1400px) {
}

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
  .scale-chart-hldr .axis .tick text {
    font-size: 12px;
  }
  .scale-chart-hldr .label {
    font-size: 14px;
  }
}

/*Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {
  .data-circles circle {
    stroke: transparent;
    stroke-width: 8px;
  }
}