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

.circle-chart__circle {
    stroke: #00acc1;
    stroke-width: 2;
    stroke-linecap: square;
    fill: none;
    animation: circle-chart-fill 2s reverse;
    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: circle-chart-appear 2s forwards;
    opacity: 0;
    transform: translateY(0.3em)
}

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

.circle-chart__subline {
    alignment-baseline: central;
    text-anchor: middle;
    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)
    }
}