.donut-chart-whole {margin-bottom: 25px; position: relative; z-index: 30}
.semi-donut {
    --percentage: 0; margin: 0 auto;
    --fill: #ff0;
    width: 130px;
    height: 65px;
    position: relative;
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    overflow: hidden;
    color: var(--fill);
    display: -webkit-box;
    display: flex;
    -webkit-box-align: end;
    align-items: flex-end;
    -webkit-box-pack: center;
    justify-content: center;
    box-sizing: border-box;
}
.semi-donut::after {
    content: '';
    width: 130px;
    height: 130px;
    border: 26px solid;
    border-top-color: currentcolor;
    border-right-color: currentcolor;
    border-bottom-color: currentcolor;
    border-left-color: currentcolor;
    border-color: #ECF0F6 #ECF0F6 var(--fill) var(--fill);
    position: absolute;
    border-radius: 50%;
    left: 0;
    top: 0;
    box-sizing: border-box;
    -webkit-transform: rotate(calc( 1deg * ( -45 + var(--percentage) * 1.8 ) ));
    transform: rotate(calc( 1deg * ( -45 + var(--percentage) * 1.8 ) ));
    -webkit-animation: fillAnimation 1s ease-in;
    animation: fillAnimation 1s ease-in;
}
.chart-text {display: inline-block; font-weight: 700; line-height: 1.3; position: relative; top: -25px}
.chart-text2 {font-size: 0.8rem; line-height: 1.4; display: block}