
.barChartHorizontal .barChartItem {
  width: 100%;
  padding-left: 0.78125rem;
  padding-right: 0.78125rem;
}

.barChartHorizontal .barChartItem:not(.barChartHeading) {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.barChartHorizontal .barChartItem:not(:last-child) {
  border-bottom: 1px solid #ecedee;
}

.barChartHorizontal .bar {
  background-color: #006fcf;
  border-radius: 15px;
  display: block;
  height: 15px;
  margin: 3.5Px 0;
}

@media (max-width: 767px) {  .barChartHorizontal .barChartText {
    flex: auto !important;
  }

  .barChartHorizontal .barChartVisual {
    order: 999;
  }
}

.barChartVertical .barChartItem {
  align-self: flex-end;
  padding-left: 0.78125rem;
  padding-right: 0.78125rem;
}

.barChartVertical .barChartItem[aria-selected] .bar {
  background-color: #00175a;
}

.barChartVertical .barChartItem[aria-selected] .barChartText {
  background-color: #ecedee;
  box-shadow: inset 0 -4px 0 0 #00175a;
}

.barChartVertical .barChartVisual {
  height: 75%;
  position: relative;
}

.barChartVertical .barChartText {
  padding: 0.625rem 0;
  margin: 0 -0.75rem;
  height: 25%;
}

.barChartVertical .barHr {
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}

.barChartVertical .bar {
  background-color: #006fcf;
  border-radius: 7.5Px 7.5Px 0 0;
  bottom: 0;
  display: block;
  left: 50%;
  width: 15px;
  position: absolute;
  transform: translate(-50%);
}