.horizontal-bar-chart {
  display: inline-block;
  width: 100%;
}

.horizontal-bar-chart .hb__value-container {
  font-size: 14px;
  text-align: left;
  margin-bottom: 12px;
  color: #000;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: flex-start;
}

.horizontal-bar-chart .hb__bar-wrapper .hb__value {
  font-weight: 700;
  color: #000;
}

.horizontal-bar-chart .hb__bar-value {
  margin-bottom: 8px;
}

.horizontal-bar-chart .hb__bar-value.center {
  text-align: center;
}

.horizontal-bar-chart .hb__bar-value.right {
  text-align: right;
}

.horizontal-bar-chart .hb__bar-wrapper .hb__value,
.horizontal-bar-chart .hb__bar-wrapper .hb__value-param {
  color: #000;
  line-height: 1;
}

.horizontal-bar-chart .hb__bar-wrapper .hb__value.value-size--s,
.horizontal-bar-chart .hb__bar-wrapper .hb__value.value-size--S {
  font-size: 25px;
}
.horizontal-bar-chart .hb__bar-wrapper .hb__value.value-size--m,
.horizontal-bar-chart .hb__bar-wrapper .hb__value.value-size--M {
  font-size: 30px;
}
.horizontal-bar-chart .hb__bar-wrapper .hb__value.value-size--l,
.horizontal-bar-chart .hb__bar-wrapper .hb__value.value-size--L {
  font-size: 35px;
}
.horizontal-bar-chart .hb__bar-wrapper .hb__value.value-size--xl,
.horizontal-bar-chart .hb__bar-wrapper .hb__value.value-size--XL {
  font-size: 40px;
}

.horizontal-bar-chart .hb__bar-wrapper .hb__value-param.unit-size--s,
.horizontal-bar-chart .hb__bar-wrapper .hb__value-param.unit-size--S {
  font-size: 20px;
}
.horizontal-bar-chart .hb__bar-wrapper .hb__value-param.unit-size--m,
.horizontal-bar-chart .hb__bar-wrapper .hb__value-param.unit-size--M {
  font-size: 25px;
}
.horizontal-bar-chart .hb__bar-wrapper .hb__value-param.unit-size--l,
.horizontal-bar-chart .hb__bar-wrapper .hb__value-param.unit-size--L {
  font-size: 30px;
}
.horizontal-bar-chart .hb__bar-wrapper .hb__value-param.unit-size--xl,
.horizontal-bar-chart .hb__bar-wrapper .hb__value-param.unit-size--XL {
  font-size: 35px;
}

.horizontal-bar-chart > * {
  align-items: center;
  gap: 8px
}

.horizontal-bar-chart .hb__value-container {
  text-transform: uppercase
}


.horizontal-bar-chart .hb__value-container {
  width: auto;
  margin-bottom: 8px
}

.horizontal-bar-chart .hb__title {
  color: #0c273e;
  font-size: 1rem;
  font-weight: 700;
}


.horizontal-bar-chart .hb__bar-wrapper {
  font-size: .875rem;
}

.horizontal-bar-chart .hb__bar-wrapper span {
  color: #8c8c8e;
}

/* Score Bar */
.score__bar {
  display: inline-block;
  margin-inline: 4px;
  max-width: 170px; /* Before 150px */
  width: 100%;;
  height: 10px; /* Before 6px */
  background-color: #d1d6e1;
  position: relative;
  border-radius: 16px;
}

.score__bar.medium {
  max-width: 600px;
}

.score__bar.large {
  max-width: 900px;
}

.hb__description p {
  font-size: 14px;
  text-align: center;
  margin-block: 0 10px;
}


.score__bar .score__bar__indicator {
  border-radius: 16px;
  height: 100%;
  width: 0
}

.score__bar .score__bar__indicator::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0
}

.score__bar.hb--gradient .score__bar__indicator {
  background-color: none;
  -webkit-mask: linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0)
}

.score__bar.hb--gradient .score__bar__indicator::before {
  background-image: linear-gradient(270deg, #BD6666 0%, #D7BD61 48.44%, #25BF75 100%)
}

@media screen and (max-width: 497px) {
  .score__bar.score__bar--display {
    max-width: 85px;
  }
  .score__bar {
    max-width: 120px;
  }
}

/* Color Variables */
.hb--primary .score__bar__indicator {
  background: var(--base-primary, var(--color-primary));
}
.hb--secondary .score__bar__indicator {
  background: var(--base-secondary, var(--color-secondary));
}

.bar-left-large {
  float: left;
}
.bar-right-large {
  float: right;
}

.score__bar--display {
  width: 60% !important;
}

.score__bar--display.large {
  width: 100% !important;
}