/* Regular Styles */
html {
    box-sizing: border-box;
  }
  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }

  /* Bar Delays Animation Function */
  /* Chart Styles */
  .chart-wrap {
    --font-sans: var(--font-serif);
    max-width: 900px;
    margin: 2%;
    padding: 10px;
    border: 1px solid #eeeeee;
  }
  .chart-wrap .chart-title {
    --font-sans: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif !important;
    margin-bottom: 15px;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
  }
  .chart-wrap .row {
    position: relative;
    height: 26px;
    margin-bottom: 15px;
  }
  .chart-wrap .bar-wrap {
	position: absolute;
	background: #d7dbde;
	width: 92.5%;
	height: 100%;
	overflow: hidden;
	right: 6% !important;
	left: 1%;
}
  .chart-wrap .bar-wrap .bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    transition: all 1s;
    transform: translateX(-100%);
  }
  .chart-wrap .bar-wrap .bar.in {
    transform: translateX(0%);
  }
  .chart-wrap .row:nth-of-type(1) .bar {
    transition: 1s 400ms;
    background: #f37167;
  }
  .chart-wrap .row:nth-of-type(2) .bar {
    transition: 1s 700ms;
    background: #ee6a69;
  }
  .chart-wrap .row:nth-of-type(3) .bar {
    transition: 1s 1000ms;
    background: #e9646a;
  }
  .chart-wrap .row:nth-of-type(4) .bar {
    transition: 1s 1300ms;
    background: #e45d6c;
  }
  .chart-wrap .row:nth-of-type(5) .bar {
    transition: 1s 1500ms;
    background: #de576e;
  }
  .chart-wrap .row:nth-of-type(6) .bar {
    transition: 1s 1700ms;
    background: #d85270;
  }
  .chart-wrap .row:nth-of-type(7) .bar {
    transition: 1s 2300ms;
    background: #d24c71;
  }
  .chart-wrap .row:nth-of-type(8) .bar {
    transition: 1s 2600ms;
    background: #cb4773;
  }
  .chart-wrap .row:nth-of-type(9) .bar {
    transition: 1s 2900ms;
    background: #c44275;
  }
  .chart-wrap .row:nth-of-type(10) .bar {
    transition: 1s 2900ms;
    background: #bc3e76;
  }
  .chart-wrap .label {
    position: absolute;
    top: 0;
    left: 1%;
    width: auto;
    padding-left: 10px !important;
    text-align: left !important;
    font-size: 12px;
    line-height: 26px;
    font-weight: bold;
    z-index: 10;
  }
  .chart-wrap .number {
    position: absolute;
    top: 0;
    right: 0px;
    width: 4.5%;
    font-size: 18px;
    line-height: 26px;
    font-weight: bold;
    z-index: 10;
  }
  @media screen and (min-width: 800px) {
    .chart-wrap .row {
      padding: 0 40px 0 160px;
    }
    .chart-wrap .label {
      text-align: right;
      padding-left: 0;
    }
    .chart-wrap .number {
      text-align: left;
      padding-right: 0;
    }
  }