@import "../settings/_mixins";
@import "../settings/_variables";

.dnetor-radial-progress {

    .radial-progress-inner {
        position: relative;
        width: 170px;
        display: inline-block;
    }

    .radial-progress-circle-bg {
        fill: none;
        stroke: #e7fced;
        stroke-width: 2;
    }

    .radial-progress-circle {
        fill: #e7fced;
        stroke-width: 2;
        stroke-linecap: round;
        animation: progress ease-out forwards;
        animation-play-state: paused;
        stroke: #26cb63;
    }

    @keyframes progress {
        0% {
            stroke-dasharray: 0 100;
        }
    }

    .dnetor-radial-progress-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }

    .dnetor-progress-number {
        color: #178704;
        font-size: 64px;
        line-height: 40px;
    }

    .dnetor-progress-text {
        color: #178704;
        font-size: 16px;
        margin-top: 8px;
    }
}