/***/

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

.circle-chart__circle {
  stroke: #00acc1;
  stroke-width: 2;
  stroke-linecap: square;
  fill: none;
  animation: circle-chart-fill 1s reverse; /* 1 */ 
  -webkit-transform: rotate(-180deg);    /* for Chrome || Safari */
  -moz-transform: rotate(-180deg);       /* for Firefox */
  -ms-transform: rotate(-180deg);        /* for IE */
  -o-transform: rotate(-180deg);         /* for Opera */
  transform: rotate(-180deg); /* 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(-90deg) scale(1,-1); /* 1, 2, 3 */
}

.circle-chart__background {
  stroke: #ebf5f7;
  stroke-width: 2;
  fill: none; 
}

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

.circle-chart__percent {
  alignment-baseline: central;
  text-anchor: middle;
  font-size: 6px;
}
.tx{
  alignment-baseline: central;
  /*text-anchor: middle;*/
  font-size: 3px;
}
.circle-chart__subline {
    alignment-baseline: central;
    text-anchor: middle;
    font-size: 3px;
}

.success-stroke {
  stroke: #5d77ff;
}

.warning-stroke {
  stroke: #5d77ff;
}

.danger-stroke {
  stroke: #5d77ff;
}

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

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


.circle-chart2{
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -75px;
  -webkit-transform: rotate(-180deg);    /* for Chrome || Safari */
  -moz-transform: rotate(-180deg);       /* for Firefox */
  -ms-transform: rotate(-180deg);        /* for IE */
  -o-transform: rotate(-180deg);         /* for Opera */
  transform: rotate(-180deg); /* 2, 3 */
}
.circle-chart2 .circle-chart__circle{
  -webkit-transform: rotate(0deg);    /* for Chrome || Safari */
  -moz-transform: rotate(0deg);       /* for Firefox */
  -ms-transform: rotate(0deg);        /* for IE */
  -o-transform: rotate(0deg);         /* for Opera */
  transform: rotate(0deg); /* 2, 3 */
}