/**
 * Inspiration for this project found at:
 * https://markus.oberlehner.net/blog/pure-css-animated-svg-circle-chart
 * 1. The `reverse` animation direction plays the animation backwards
 *    which makes it start at the stroke offset 100 which means displaying
 *    no stroke at all and animating it to the value defined in the SVG
 *    via the inline `stroke-dashoffset` attribute.
 * 2. Rotate by -90 degree to make the starting point of the
 *    stroke the top of the circle.
 * 3. Using CSS transforms on SVG elements is not supported by Internet Explorer
 *    and Edge, use the transform attribute directly on the SVG element as a
 * .  workaround.
 */

.circle-chart {
  width: 140px;
  height: 140px;
}

.circle-chart__circle {
  stroke: #00acc1;
  stroke-width: 5;
  stroke-linecap: square;
  fill: none;
  animation: circle-chart-fill 2s reverse; /* 1 */
    transform: rotate(-90deg) scale(.87);
  transform-origin: center; /* 4 */
}
.circle-orange .circle-chart__circle {
  stroke: #FF8917;
}
/**
 * 1. Rotate by -90 degree to make the starting point of the
 *    stroke the top of the circle.
 * 2. Scaling mirrors the circle to make the stroke move right
 *    to mark a positive chart value.
 * 3. Using CSS transforms on SVG elements is not supported by Internet Explorer
 *    and Edge, use the transform attribute directly on the SVG element as a
 * .  workaround.
 */

.circle-chart__circle--negative {
  transform: rotate(-90deg) scale(1,-1); /* 1, 2, 3 */
}

.circle-chart__background {
  stroke: rgba(204, 204, 204, 0.30);
  stroke-width: 5;
  fill: none;
}

.circle-chart__info {
  animation: circle-chart-appear 2s forwards;
  opacity: 0;
  transform: translateY(0.3em);
}

.circle-chart__percent {
  alignment-baseline: central;
  text-anchor: middle;
  font-size: 6px;
}



.circle-chart__subline {
    alignment-baseline: central;
    text-anchor: middle;
    font-size: 3px;
}

.success-stroke {
  stroke: #2ABB9C;
}

.warning-stroke {
  stroke: #ffbb33;
}

.danger-stroke {
  stroke: #ff4444;
}

@keyframes circle-chart-fill {
  to { stroke-dasharray: 0 100; }
}

@keyframes circle-chart-appear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.circlechart{
  /*box-shadow: 0px 6px 25px rgb(0 0 0 / 25%);*/
  border-radius: 100px;
}