.flex-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #F7F7F7;
    padding: 1em;
  }
  
  .star-container{
    display: flex;
  }
  
  .center {
    text-align: center;
  }
  
  .padding-left{
    padding-left: 0.5em;
  }
  
  /* Three column layout */
  .side {
    float: left;
    width: 15%;
    margin-top:10px;
  }
  
  .middle {
    margin-top:10px;
    float: left;
    width: 70%;
  }
  
  /* Place text to the right */
  .right {
    text-align: center;
  }
    
  .bar-box{
    width: 25em;
  }
  
  /* The bar container */
  .bar-container {
    width: 100%;
    background-color: #D0D0CE;
    text-align: center;
    color: white;
    border-radius: 10px
  }
  
  
  /* Individual bars */
  .bar-5 {width: var(--bar5-value); height: 18px; background-color: var(--hh-red); border-radius: 10px; display: block !important}
  .bar-4 {width: var(--bar4-value); height: 18px; background-color: var(--hh-red); border-radius: 10px; display: block !important}
  .bar-3 {width: var(--bar3-value); height: 18px; background-color: var(--hh-red); border-radius: 10px; display: block !important}
  .bar-2 {width: var(--bar2-value); height: 18px; background-color: var(--hh-red); border-radius: 10px; display: block !important}
  .bar-1 {width: var(--bar1-value); height: 18px; background-color: var(--hh-red); border-radius: 10px; display: block !important}
  
  /* Responsive layout - make the columns stack on top of each other instead of next to each other */
  @media (max-width: 400px) {
    .side, .middle {
      width: 100%;
    }
    .right {
      display: none;
    }
  }
  
  /*stars*/
  .container {
    position: relative;
    display: inline-block;
  }
  .star-under {
    color: #D0D0CE;
    vertical-align: top;
  }
  .star-over-1 { color: var(--hh-red); position: absolute; left: 0; top: 0; width: calc(var(--star-value)); overflow: hidden}
  .star-over-2 { color: var(--hh-red); position: absolute; left: 0; top: 0; width: calc(var(--star-value) - 100%); overflow: hidden}
  .star-over-3 { color: var(--hh-red); position: absolute; left: 0; top: 0; width: calc(var(--star-value) - 200%); overflow: hidden}
  .star-over-4 { color: var(--hh-red); position: absolute; left: 0; top: 0; width: calc(var(--star-value) - 300%); overflow: hidden}
  .star-over-5 { color: var(--hh-red); position: absolute; left: 0; top: 0; width: calc(var(--star-value) - 400%); overflow: hidden}
  
  @media (max-width: 800px) {
    .flex-container {
      flex-direction: column;
      justify-content: space-around;
    }
    
    .bar-box {
      width: 23em;
    }
    
    .flex-container > div > button {
      margin-top: 2em;
    }
  }