.vis-container {
  svg {
    background-color: #f2f2f2;
    font-family: "Geist", sans-serif;
  }
}

.axis text {
  font-weight: 500;
  font-size: 12px;
  line-height: 1.25;
  font-style: normal;
  fill: #5f5f80;
}

.grid-label {
  fill: #5f5f80;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 125%;
}

.line-chart-rect-label {
  font-style: normal;
  font-weight: 700;
  line-height: 125%;
}

.line-chart-top-label {
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 125%;
}

.waffle-percent {
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 125%;
}

.waffle-label {
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 125%;
  fill: #6b7280;
}

.inner-donut-label {
  fill: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 125%;
}

.central-donut-label {
  fill: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 125%;
}

.outer-donut-label {
  color: #04033a;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 125%;
}

.chart1-area-label {
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 125%;
  color: #04033a;
}

.chart1-legend-title {
  color: #04033a;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 125%;
}

.chart1-legend-label {
  fill: #8989a4;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 125%;
}

.chart2-archetype-label {
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 125%;
  color: #130c4c;
}

.chart2-bucket-label {
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 125%;
}

.chart2b-title {
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 125%;
}

.chart3a-title {
  fill: #130c4c;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 125%;
}

.chart3a-value {
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 125%;
}

.chart3a-label {
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 125%;
}

.chart3a-key {
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%;
}

.chart4-value {
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 125%;
}

.chart5-title {
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 125%;
}

.chart5-value {
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 125%;
}

.chart6-title {
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 125%;
}

.chart5-label {
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 125%;
}

#chart6-buttons span {
  cursor: pointer;
  border-radius: 8px;
  border: 1.5px solid #04033a;
  width: 49px;
  height: 24px;
  padding: 2px 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  text-align: center;

  &.selected {
    background-color: #04033a;
    color: #fff;
  }
}

.chart7a-col-title {
  color: #04033a;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 125%;
}

.chart7-segment-label {
  color: var(--Primary-White, #fff);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 125%;
}

.chart7b-value {
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 125%;
}

.chart9-title {
  fill: #04033a;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 22.4px */
}

.chart9-label {
  color: #04033a;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 125%;
}

.chart9-value {
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 125%;
}

.chart9b-line-label {
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 125%;
}

.chart9b-annotation {
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 125%; /* 15px */
}

.chart9c-normal-value {
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 125%;
}

.chart9c-highlighted-value {
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 125%;
}

.chart9c-vs-label {
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 125%;
}

.line-chart-tooltip {
  position: absolute;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  font-family: "Geist", sans-serif;
  border-radius: 10px;
  padding: 16px;
  font-size: 14px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 16px;

  .line-chart-tooltip-title {
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%; /* 17.5px */
  }
  .line-chart-tooltip-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .line-chart-tooltip-label {
    color: #04033a;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 19.6px */
    margin: 0;
  }
  .line-chart-tooltip-value {
    color: #000;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 14px; /* 100% */
    margin: 0;
  }
}