/* ------- DO NOT EDIT BELOW --------- */
.chart-one {
  width: 200px;
  height: 200px;
  margin: 0;
  position: relative; }
  .chart-one.animate svg .circle-foreground {
    animation: offset 3s ease-in-out forwards;
    animation-delay: 1s; }
    .chart-one.animate figcaption:after {
      animation: chart-one-label 3s steps(100) forwards;
      animation-delay: 1s; }
  .chart-one svg {
    width: 100%;
    height: 100%; }
    .chart-one svg .circle-background, .chart-one svg .circle-foreground, .chart-one svg .chart-two svg .circle-foreground, .chart-two svg .chart-one svg .circle-foreground, .chart-one svg .chart-three svg .circle-foreground, .chart-three svg .chart-one svg .circle-foreground {
      r: 99.5px;
      cx: 50%;
      cy: 50%;
      fill: none;
      stroke: #305556;
      stroke-width: 1px; }
    .chart-one svg .circle-foreground {
      stroke: #79be9b;
      stroke-dasharray: 624.86px 624.86px;
      stroke-dashoffset: 624.86px;
      stroke-linecap: round;
      transform-origin: 50% 50%;
      transform: rotate(-90deg); }
  .chart-one figcaption {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: #c6e8d7;
    position: absolute;
    top: calc(50% - 19px);
    left: 0;
    font-size: 0; }
    .chart-one figcaption span {
      display: inline-block;
      white-space: pre;
      font-size: 38px;
      line-height: 38px; }

@keyframes chart-one-label {
    100% {
      transform: translateY(-3800px); } }

.chart-two {
  width: 200px;
  height: 200px;
  margin: 0;
  position: relative; }
  .chart-two.animate svg .circle-foreground {
    animation: offset 3s ease-in-out forwards;
    animation-delay: 1s; }
    .chart-two.animate figcaption:after {
      animation: chart-two-label 3s steps(100) forwards;
      animation-delay: 1s; }
  .chart-two svg {
    width: 100%;
    height: 100%; }
    .chart-two svg .circle-background, .chart-two svg .chart-one svg .circle-foreground, .chart-one svg .chart-two svg .circle-foreground, .chart-two svg .circle-foreground, .chart-two svg .chart-three svg .circle-foreground, .chart-three svg .chart-two svg .circle-foreground {
      r: 92.5px;
      cx: 50%;
      cy: 50%;
      fill: none;
      stroke: #305556;
      stroke-width: 15px; }
    .chart-two svg .circle-foreground {
      stroke: #d0f09e;
      stroke-dasharray: 580.9px 580.9px;
      stroke-dashoffset: 580.9px;
      stroke-linecap: round;
      transform-origin: 50% 50%;
      transform: rotate(-90deg); }
  .chart-two figcaption {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: #c6e8d7;
    position: absolute;
    top: calc(50% - 19px);
    left: 0;
    font-size: 0; }
    .chart-two figcaption span {
      display: inline-block;
      white-space: pre;
      font-size: 38px;
      line-height: 38px; }

@keyframes chart-two-label {
    100% {
      transform: translateY(-3800px); } }

.chart-three {
  width: 200px;
  height: 200px;
  margin: 0;
  position: relative; }
  .chart-three.animate svg .circle-foreground {
    animation: offset 3s ease-in-out forwards;
    animation-delay: 1s; }
    .chart-three.animate figcaption:after {
      animation: chart-three-label 3s steps(100) forwards;
      animation-delay: 1s; }
  .chart-three svg {
    width: 100%;
    height: 100%; }
    .chart-three svg .circle-background, .chart-three svg .chart-one svg .circle-foreground, .chart-one svg .chart-three svg .circle-foreground, .chart-three svg .chart-two svg .circle-foreground, .chart-two svg .chart-three svg .circle-foreground, .chart-three svg .circle-foreground {
      r: 87.5px;
      cx: 50%;
      cy: 50%;
      fill: none;
      stroke: #305556;
      stroke-width: 25px; }
    .chart-three svg .circle-foreground {
      stroke: #389967;
      stroke-dasharray: 549.5px 549.5px;
      stroke-dashoffset: 549.5px;
      stroke-linecap: round;
      transform-origin: 50% 50%;
      transform: rotate(-90deg); }
  .chart-three figcaption {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: #c6e8d7;
    position: absolute;
    top: calc(50% - 19px);
    left: 0;
    font-size: 0; }
    .chart-three figcaption span {
      display: inline-block;
      white-space: pre;
      font-size: 38px;
      line-height: 38px; }

@keyframes chart-three-label {
    100% {
      transform: translateY(-3800px); } }

@keyframes offset {
  100% {
    stroke-dashoffset: 0; } }