/**
 * 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: 200px;
    height: 200px;
    float: left;
    position: relative;
  }
  
  svg.circle-chart {
    fill: #fff;
  }
  
  .circle-chart__circle {
    stroke: #00acc1;
    stroke-width: 2;
    stroke-linecap: square;
    fill: none;
    animation: circle-chart-fill 5s reverse; /* 1 */ 
    transform: rotate(275deg); /* 2, 3 */
    transform-origin: center; /* 4 */
  }
  
  /**
   * 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(-30deg) scale(1,-1); /* 1, 2, 3 */
  }
  
  .circle-chart__background {
      stroke: #ddd;
      stroke-width: 2;
      fill: none;
  }
  
  .circle-chart__info {
    animation: circle-chart-appear 2s forwards;
    opacity: 0;
    transform: translateY(0.3em);
  }
  
  .circle-chart__percent {
    display: none;
  }
  
    .circle-chart__subline {
      text-anchor: middle;
      font-size: 8px;
      position: relative;
      font-weight: 700;
      color: rgb(254, 254, 255);
  }
  
  .success-stroke {
      stroke: #0D5ADC;
  }
  
  .circlechart.style-tow .success-stroke {
      stroke: #0D5ADC;
  }
  
  .circlechart.style-three .success-stroke {
      stroke: #6CD5CE;
  }
  
  .circlechart.style-four .success-stroke {
      stroke: #F55650;
  }
  
  .warning-stroke {
    stroke: #0E58DB;
  }
  
  .success-stroke {
    stroke: #0D5ADC;
  }
  
  @keyframes circle-chart-fill {
    to { stroke-dasharray: 0 100; }
  }
  
  @keyframes circle-chart-appear {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }