.rt-container{
    width: 100% !important;
  }

  
  .radialProgressBar {
    border-radius: 50%;
    
    width: 120px;
    height: 120px;
    display: inline-block;
    background: #ddd;
    margin: 20px;
    
  }
  .radialProgressBar .overlay {
    transform: translateY(10%);
    border-radius: 50%;
    width: 100px;
    height: 100px;
    margin: auto;
    background: #fff;
    text-align: center;
    padding-top: 30%;
  }
  @media only screen and (max-width: 504px) {
    .radialProgressBar-text{
        transform: translateY(-10px) !important;
    }
  }
  .progress-0 {
    background-image: -webkit-linear-gradient(left, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, #ddd 50%);
    background-image: linear-gradient(90deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #ddd 50%);
  }
  
  .progress-10 {
    background-image: -webkit-linear-gradient(36deg, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, #ddd 50%);
    background-image: linear-gradient(54deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #ddd 50%);
  }
  
  .progress-20 {
    background-image: -webkit-linear-gradient(72deg, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, #ddd 50%);
    background-image: linear-gradient(18deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #ddd 50%);
  }
  
  .progress-30 {
    background-image: -webkit-linear-gradient(108deg, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, #ddd 50%);
    background-image: linear-gradient(-18deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #ddd 50%);
  }
  
  .progress-40 {
    background-image: -webkit-linear-gradient(144deg, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, #ddd 50%);
    background-image: linear-gradient(-54deg, #f5f5f5 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #f5f5f5 50%);
  }
  
  .progress-50 {
    background-image: -webkit-linear-gradient(right, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, #ddd 50%);
    background-image: linear-gradient(-90deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #ddd 50%);
  }
  
  .progress-60 {
    background-image: -webkit-linear-gradient(left, #0080ff 50%, transparent 50%), -webkit-linear-gradient(36deg, #228ffc 50%, #ddd 50%);
    background-image: linear-gradient(90deg, #ffa927 50%, transparent 50%), linear-gradient(54deg, #ffa927 50%, #f5f5f5 50%);
  }
  
  .progress-70 {
    background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(72deg, #028cd5 50%, #ddd 50%);
    background-image: linear-gradient(90deg, #028cd5 50%, transparent 50%), linear-gradient(18deg, #028cd5 50%, #ddd 50%);
  }
  
  .progress-80 {
    background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(108deg, #028cd5 50%, #ddd 50%);
    background-image: linear-gradient(90deg, #028cd5 50%, transparent 50%), linear-gradient(-18deg, #028cd5 50%, #ddd 50%);
  }
  
  .progress-90 {
    background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(144deg, #028cd5 50%, #ddd 50%);
    background-image: linear-gradient(90deg, #028cd5 50%, transparent 50%), linear-gradient(-54deg, #028cd5 50%, #ddd 50%);
  }
  
  .progress-100 {
    background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(right, #028cd5 50%, #ddd 50%);
    background-image: linear-gradient(90deg, #028cd5 50%, transparent 50%), linear-gradient(-90deg, #028cd5 50%, #ddd 50%);
  }
  
  @property --num {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
  }
  
  #counter {
    animation: counter 2s ease-in-out;
    counter-reset: num var(--num);
    font: 800 40px system-ui;
    padding: 2rem;
  }
  #counter::after {
    content: counter(num);
  }
  
  @keyframes counter {
    from {
      --num: 0;
    }
    to {
      --num: 100;
    }
  }