.c19-arc-container {
  height: 190px;
}

.c19-arc {
  margin-left: auto;
  margin-right: auto;
  width: 122px;
  height: 122px;
}

.c19-arc svg {
  width: 100%;
  height: 100%;
}

.c19-arc svg circle {
  stroke: #0392cf;
  stroke-dashoffset: 400;
  transition: 2s stroke-dashoffset ease-in-out;
  transform: rotate(90deg);
  transform-origin: 50% 50%;
}

.icon-metric-value {
  visibility: hidden;
}

.active .icon-metric-value {
  visibility: visible;
  animation: fade-from-bottom .8s;
}

.c19-arc-footer p {
  letter-spacing: -1px;
}

.c19-arc-footer {
  position: absolute;
  left: 0;
  width: 100%;
  padding-top: 0.5rem;
  top: 108px;
}

@media (min-width: 768px) {
  .c19-arc {
    width: 162px;
    height: 162px;
  }

  .c19-arc-footer {
    padding-top: 0.5rem;
    top: 138px;
  }

  .c19-arc-container {
    height: 208px;
  }

  .c19-arc-footer p {
    letter-spacing: 0;
  }
}