.radial {
  align-items: center;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
}

.radial .radial-percent {
  position: relative;
}

.radial svg {
  height: 130px;
  position: relative;
  transform: rotate(-180deg);
  width: 130px;
}

.radial-small svg {
  height: 70px;
  width: 70px;
}

.radial svg circle {
  fill: none;
  height: 100%;
  stroke-linecap: round;
  stroke-width: 14;
  stroke: rgba(var(--orange-rgb), 0.18);
  width: 100%;
}

.radial-blue svg circle {
  stroke: rgba(var(--dark-blue-rgb), 0.21);
}

.radial-small svg circle {
  stroke-width: 8;
  stroke: var(--green);
}

.radial svg circle:last-of-type {
  stroke-dasharray: 360px;
  stroke-dashoffset: calc(360px - (360px * var(--percent)) / 100);
  stroke-width: 7;
  stroke: var(--orange);
}

.radial-blue svg circle:last-of-type {
  stroke: var(--dark-blue);
}

.radial-small svg circle:last-of-type {
  stroke-dasharray: 180px;
  stroke-dashoffset: calc(180px - (180px * var(--percent)) / 100);
  stroke-width: 4;
  stroke: var(--dark-blue);
}

.radial .radial-number {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.radial .radial-number {
  font-size: 38px;
  font-style: italic;
  font-weight: 500;
}

.radial-small .radial-number {
  font-size: 18px;
}