.pieChart{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* .barChart__img, */
.pieChart__img{
    width: 100%;
    fill: none;
    stroke-linecap: round;
    /* stroke-width: 0.4em; */
    overflow: visible;
}

/* .barChart__barGroup {
    stroke-width: 0.25em;
} */

.pieChart__img{
    transform: rotate(-90deg);}

/* .barChart__chapter>.barChart__img{
    margin: 0px 0.5em;
} */

    /* .barChart__img>.barChart__barGroup>.barChart__baseBar, */
    .pieChart__img>.pieChart__barGroup>.pieChart__baseBar{
        stroke: rgba(var(--colUIBack02), 0.5);
    }

    /* .barChart__progressBar, */
    .pieChart__progressBar{
        stroke: rgb(var(--colAccent01));
        transition: stroke-dasharray 3s 0.5s ease, opacity 1s ease;
        stroke-dasharray: 1,100;
    }


    .pieChart__digits{
        fill: rgb(var(--colUIText04));
        transform: rotate(90deg);
        transform-origin: center;
        text-anchor: middle;
    }

    .pieChart__digits--active{
        fill: rgb(var(--colUIText03));
    }


    .pieChart__unit{
        font-size: 3px;
    }

    .pieChart__digitsCbValue{
        font-size: 6px;
        text-anchor: end;
    }

    .pieChart__digitsCbValueMax{
        font-size: 3px;
        text-anchor: start;
    }

    .pieChart__digitsCbDivider{
        stroke-width: 0.25px;
        stroke: rgb(var(--colUIText03));

    }

    .pieChart__digitsPoints{
        font-size: 10px;

    }


.barChart{
    width: 100%;
    transition: opacity 0.5s ease;
}

    .barChart__wrapper{
        display: flex;
        flex-wrap: nowrap;
        gap: 0.5em;
        justify-content: center;
        align-items: center;
    }

    .barChart__labelsTop{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .barChart:not(:first-of-type)>.barChart__labelsTop{
        margin-top: 0.5em;
    }


    .barChart__basebar{
        height: 0.6em;
        width: 100%;
        background: rgba(var(--colUIBack02), 0.5);
        border-radius: 1em;
        overflow: hidden;
    }

    .barChart__progressbar{
        height: 100%;
        width: 0%;
        transition: width 3s 0.5s ease;
        background: rgb(var(--colAccent01));
        border-radius: 1em;
    }

    .barChart__prefix,
    .barChart__suffix{
        white-space: nowrap;
    }

    .barChart__label{
        font-size: 0.9em;
    }


    .barChart__icon{
        width: 1.2em;
        height: 1.2em;
        fill: rgb(var(--colUIText04));
        display: flex;
    }




    .barChart__chapter{
        width: 15em;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
    }