.circular-chart {
  display: block;
  margin: 5px auto;
  /*max-width: 80%;*/
  max-height: 250px;
  position: relative;
}

.circle {
  stroke: #0089FA;
  fill: none;
  stroke-width: 3.8;
  stroke-linecap: butt;
  animation: progress 1s ease-out forwards;
}
.circle-bg {
    fill: none;
    stroke: #F4F4F4;
    stroke-width: 3.8;
}
.percentage {
  fill: var(--main-darknest-gray-color);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  text-anchor: middle;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}