* {
        margin: 0;
        padding: 0;
    }

    .custom_counter {
        font-family: 'Arial';
        display: flex;
        width: unset;
        margin: 0 auto;
        justify-content: space-between;
    }

    .circle_percent {
        font-size: 200px;
        width: 1em;
        height: 1em;
        position: relative;
        background: #eee;
        border-radius: 50%;
        overflow: hidden;
        display: inline-block;
        margin: 20px;
    }

    .circle_inner {
        position: absolute;
        left: 0;
        top: 0;
        width: 1em;
        height: 1em;
        clip: rect(0 1em 1em .5em);
    }

    .round_per {
        position: absolute;
        left: 0;
        top: 0;
        width: 1em;
        height: 1em;
        background: #e4a6d2;
        clip: rect(0 1em 1em .5em);
        transform: rotate(180deg);
        transition: 1.05s;
    }


    .percent_more .circle_inner {
        clip: rect(0 .5em 1em 0em);
    }

    .percent_more:after {
        position: absolute;
        left: .5em;
        top: 0em;
        right: 0;
        bottom: 0;
        background: #e4a6d2;
        content: '';
    }

    .circle_inbox {
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        background: #fff;
        z-index: 3;
        border-radius: 50%;
    }

    .percent_text {
        position: absolute;
        font-size: 36px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 3;
    }

    .green .round_per {
        background-color: #58c9b2;
    }

    .purple .round_per {
        background-color: #9d70cb;
    }

    .yellow .round_per {
        background-color: #f8c350;
    }

    .orange .round_per {
        background-color: #ff523c;
    }

    .green.percent_more:after {
        background-color: #58c9b2;
    }

    .purple.percent_more:after {
        background-color: #9d70cb;
    }

    .yellow.percent_more:after {
        background-color: #f8c350;
    }

    .orange.percent_more:after {
        background-color: #ff523c;
    }
h4.label {
    text-align: center;
    font-size: 20px;
    padding-top: 0;
    font-family: 'Quicksand';
    color: #000;
    font-weight: 600;
}
.circle_percent.green .circle_inbox {
    background: #34c9b30a;
}
.circle_percent.purple .circle_inbox {
    background: #a669c60f;
}
.circle_percent.yellow .circle_inbox {
    background: #fac8611a;
    color: #000;
}
.circle_percent.orange .circle_inbox {
    background: #ff59441f;
}
.circle_percent.green .circle_inbox {
    background: #cbeae6;
}
.circle_percent.purple .circle_inbox {
    background: #dfd0e3;
}
.circle_percent.yellow .circle_inbox {
    background: #f4e3c0;
    color: #000;
}
.circle_percent.orange .circle_inbox {
    background: #ffd1cb;
}
.percent_text {
    font-family: "Product sans", sans-serif;
    font-weight: 700;
    color: #000;
}
h4.label {
    font-family: "Product sans", sans-serif;
    color: #000;
    font-weight: 700;
    font-size: 24px;
}