:root {
    --e-box-with-progress-circle-one-orange: #FF8917;
    --e-box-with-progress-circle-one-red: #FF3A29;
}

.e-box-with-progress-circle-one {
    border-left: 5px solid #FF8917;
    box-shadow: 0px 6px 25px rgba(187, 187, 187, 0.25);
    border-radius: 10px;
    padding: 40px 20px;
    display: flex;
}


.e-box-with-progress-circle-one [role="e-progress-circle"] {
    margin: 0 15px;
    position:relative;
}

.e-box-with-progress-circle-one .title {
    font-size: 22px;
    font-weight: 700;
}

/* e-progress-circle*/
[role="e-progress-circle"] {
    --size: 8rem;
    --fg: #369;
    --bg: #def;
    --pgPercentage: var(--value);
    animation: growProgressBar 3s 1 forwards;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(closest-side, white 85%, transparent 0 99.9%, white 0),
    conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
    font-family: Helvetica, Arial, sans-serif;
    font-size: calc(var(--size) / 5);
    color: var(--fg);
}
/* e-progress-circle*/
.e-box-with-progress-circle-one.red [role="e-progress-circle"] {
    --size: 8rem;
    --fg: #fd3a29;
    --bg: #fde3d1;
    --pgPercentage: var(--value);
    animation: growProgressBar 3s 1 forwards;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(closest-side, white 85%, transparent 0 99.9%, white 0),
    conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
    font-family: Helvetica, Arial, sans-serif;
    font-size: calc(var(--size) / 5);
    color: var(--fg);
}

[role="e-progress-circle"]::before {
    content: attr(aria-valuenow) '%';
    position: absolute;
    right: 50%;
    top: 50%;
    transform: translate(50%,-50%);
}

@keyframes growProgressBar {
    0%, 33% {
        --pgPercentage: 0;
    }
    100% {
        --pgPercentage: var(--value);
    }
}

@keyframes growProgressBar {
    0%, 33% {
        --pgPercentage: 0;
    }
    100% {
        --pgPercentage: var(--value);
    }
}

@keyframes growProgressBar {
    0%, 33% {
        --pgPercentage: 0;
    }
    100% {
        --pgPercentage: var(--value);
    }
}

/* Responsive Style */
@media only screen and (max-width: 768px) {
    .e-box-with-progress-circle-one {
        flex-direction: column;
    }

    .e-box-with-progress-circle-one .chart-progress {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .e-box-with-progress-circle-one .title {
        text-align: center;
        margin: 15px;
    }

    .e-box-with-progress-circle-one {
        padding-bottom: 10px;
    }

}

[dir="rtl"] .e-box-with-progress-circle-one {
    border-left: unset;
    border-right: 5px solid #FF8917;
}