:root {
    --duration: .4s;
  }
  
  .form-check {
    font-weight: normal;
    font-size: small;
  }


.bar-graph {
    padding: 0;
    width: 50%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: flex-end;
        -ms-flex-align: end;
            align-items: flex-end;
    height: 200px;
    margin: 0;
    margin-top: 100px;
  }
  
  .bar-graph li {
    display: block;
    padding: 1.5625rem 0;
    position: relative;
    text-align: center;
    vertical-align: bottom;
    border-radius: 4px 4px 0 0;
    max-width: 20%;
    height: 100%;
    margin: 0 1.8% 0 0;
    -webkit-flex: 1 1 15%;
        -ms-flex: 1 1 15%;
            flex: 1 1 15%;
  }
  
  .bar-graph .bar-graph-axis {
      height: 250px;
      padding: 0;
    -webkit-flex: 1 1 8%;
        -ms-flex: 1 1 8%;
            flex: 1 1 8%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  
  .bar-graph .bar-graph-label {
    margin: 0;
    background-color: none;
    color: #8a8a8a;
    position: relative;
  }
  
  @media print, screen and (min-width: 40em) {
    .bar-graph .bar-graph-label:before, .bar-graph .bar-graph-label:after {
      content: "";
      position: absolute;
      border-bottom: 1px dashed #8a8a8a;
      top: 0;
      left: 0;
      height: 50%;
      width: 20%;
    }
  }
  
  @media print, screen and (min-width: 40em) and (min-width: 64em) {
    .bar-graph .bar-graph-label:before, .bar-graph .bar-graph-label:after {
      width: 30%;
    }
  }
  
  @media print, screen and (min-width: 40em) {
    .bar-graph .bar-graph-label:after {
      left: auto;
      right: 0;
    }
  }
  
  .bar-graph .percent {
    letter-spacing: -3px;
    opacity: 0.4;
    width: 100%;
    font-size: 20px;
    position: absolute;
  }
  
  @media print, screen and (min-width: 40em) {
    .bar-graph .percent {
      font-size: 20px;
    }
  }
  
  .bar-graph .percent span {
    font-size: 20px;
  }
  
  .bar-graph .description {
    font-weight: 800;
    opacity: 0.5;
    text-transform: uppercase;
    width: 100%;
    font-size: 12px;
    bottom: 20px;
    position: absolute;
    overflow: hidden;
  }
  
  .bar-graph .bar.primary {
    border: 1px solid #1779ba;
    background: linear-gradient(#2196e3, #1779ba 70%);
  }
  
  .bar-graph .bar.secondary {
    border: 1px solid #767676;
    background: linear-gradient(#909090, #767676 70%);
  }
  
  .bar-graph .bar.success {
    border: 1px solid #3adb76;
    background: linear-gradient(#65e394, #3adb76 70%);
  }
  
  .bar-graph .bar.warning {
    border: 1px solid #ffae00;
    background: linear-gradient(#ffbe33, #ffae00 70%);
  }
  
  .bar-graph .bar.alert {
    border: 1px solid #cc4b37;
    background: linear-gradient(#d67060, #cc4b37 70%);
  }
  
  .navbar {
    background-color: #7DCBA1;
  }

  .dark {
    background-color: #7DCBA1;
    color: #e9edd5;
  }