/**
 * 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__percent,.circle-chart__subline{alignment-baseline:central;text-anchor:middle}.circle-chart{width:150px;height:150px}.circle-chart__circle{stroke:#00acc1;stroke-width:2;stroke-linecap:square;fill:none;animation:2s reverse circle-chart-fill;transform:rotate(-90deg);transform-origin:center}.circle-chart__circle--negative{transform:rotate(-90deg) scale(1,-1)}.circle-chart__background{stroke:#efefef;stroke-width:2;fill:none}.circle-chart__info{animation:2s forwards circle-chart-appear;opacity:0;transform:translateY(.3em)}.circle-chart__percent{font-size:8px}.circle-chart__subline{font-size:3px}.success-stroke{stroke:#00C851}.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)}}