:root {
    --rating-circle-size: 130px;
    --bar-size: 10px;
    --bar-size2: 15px;
    --background-color: #e7f2fa;
    /* --rating-circle-color-default: #2980b9; */
    --rating-circle-color-background: #a0a0a0;
    --rating-circle-color-good: #27ae60;
    --rating-circle-color-meh: #f1c40f;
    --rating-circle-color-bad: #e74c3c;
  }
  
  /* rating-circle item */
  .rating-circle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    overflow: hidden;
    
    /* background: var(--rating-circle-color-default); */
    color: var(--rating-circle-color-default);
    width: var(--rating-circle-size);
    height: var(--rating-circle-size);
  
    /* Basic style for the text */
    font-size: calc(var(--rating-circle-size) / 3);
    line-height: 1;
  }
  
  /* rating-circle circle content */
  .rating-circle span {
    position: relative;
    display: flex;
    font-weight: bold;
    z-index: 2;
    transition: all .2s linear;
  }
  
  .rating-circle span small {
    font-size: 0.5em;
    font-weight: 900;
    align-self: center;
  }
  
  /* Bar mask, creates an inner circle with the same color as thee background */
  .rating-circle::after {
    content: "";
    position: absolute;
    top: var(--bar-size);
    right: var(--bar-size);
    bottom: var(--bar-size);
    left: var(--bar-size);
    background: var(--background-color);
    border-radius: inherit;
    z-index: 1;
    transition: all .2s linear;
  }
  .rating-circle:hover span{
    transform: scale(1.2);
    transition: all .2s linear;
    cursor: default;
}
  
  /* Bar background */
  .rating-circle::before {
    content: "";
    position: absolute;
    top: var(--bar-size);
    right: var(--bar-size);
    bottom: var(--bar-size);
    left: var(--bar-size);
    border-radius: inherit;
    box-shadow: 0 0 0 2rem var(--rating-circle-color-background);
    z-index: -1;
    transition: all .2s linear;
  }
  .rating-circle:hover:after{
    top: 7px;
    right: 7px;
    bottom: 7px;
    left: 7px;
    transition: all .2s linear;
  }
  .rating-circle:hover:before{
    top: 7px;
    right: 7px;
    bottom: 7px;
    left: 7px;
    transition: all .2s linear;
  }
  /* Classes to give different colors to rating-circles, based on their score */
  .rating-circle.good {
    background: var(--rating-circle-color-good);
    color: var(--rating-circle-color-good);
  }
  
  .rating-circle.meh {
    background: var(--rating-circle-color-meh);
    color: var(--rating-circle-color-meh);
  }
  
  .rating-circle.bad {
    background: var(--rating-circle-color-bad);
    color: var(--rating-circle-color-bad);
  }
  
  .all-mean-circle{
    font-size: calc(var(--rating-circle-size) / 2);
    width: 200px;
    height: 200px;
  }
  .all-mean-circle::before{
    top: var(--bar-size2);
    right: var(--bar-size2);
    bottom: var(--bar-size2);
    left: var(--bar-size2);
  }
  .all-mean-circle::after{
    top: var(--bar-size2);
    right: var(--bar-size2);
    bottom: var(--bar-size2);
    left: var(--bar-size2);
  }
  .title-mean{
    font-size:16px;
    color: var(--background-color);
    margin-top:10px;
  }
  .tmp-block,.title-mean{
    text-align: center;
  }
  .all-mean{
    display: flex;
    justify-content: center;
    margin-top: 30px;
  }
  .all-circles-marks{
    display: flex;
    justify-content: space-around;
    margin-top: 70px;
    flex-wrap: wrap;
  }
  .circle-name{
    font-size: 15px;
    color: var(--background-color);
    margin-top:10px;
  } 
  .circles-all{
    position: relative;
    z-index: 1;
  }