/**
 * Radial Chart CSS
 * Description : Radial Chart JS to display the data in Circle Chart
 *
 * Released under the MIT license
 *
 * @package : Radial Chart JS
 * @author  : Web Host Nepal (http://whn.com.np/)
 * @developer : Web Host Nepal & Team
 * @copyright (C) 2009-2022 Web Host Nepal (info@webhostnepal.com)
 */

.radial-chart {
    padding: 10px;
}

.radial-chart .canvas {
    fill: none;
    stroke: #00acc1;
    stroke-width: 2;
    stroke-linecap: round;
    animation: circle-chart-fill 2s reverse;
    transform: rotate(-90deg);
    transform-origin: center;
}

.radial-chart .canvas-bg {
    stroke: #efefef;
    stroke-width: 2px;
    fill: none;
}

.radial-chart text {
    fill: #454545;
    font-size: 8px;
    font-weight: 600;
    alignment-baseline: central;
    text-anchor: middle;
}

.radial-chart .stroke-success {
    stroke: #29d56ed0;
}

.radial-chart .stroke-warning {
    stroke: #efae2de2;
}

.radial-chart .stroke-danger {
    stroke: #fe4040d1;
}

.radial-chart .stroke-info {
    stroke: #fe4040d1;
}

.radial-chart .bg-success {
    fill: #cbfbde;
}

.radial-chart .bg-warning {
    fill: #ffe3ac;
}

.radial-chart .bg-danger {
    fill: #ffcaca;
}

.radial-chart .bg-info {
    fill: #ffcaca;
}

[data-layout-mode=dark] text {
    fill: #f5f5f5;
}

[data-background="true"][data-color="success"] text {
    fill: #4dda86;
}

[data-background=true][data-color=warning] text {
    fill: #efb543;
}

[data-background=true][data-color=danger] text {
    fill: #fe4040d1;
}

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

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