.pieChart{
    position: relative;
}

.barChart__img,
.pieChart__img{
    stroke-width: 0.4em;
    stroke: rgb(var(--colUIBack03));
    stroke-linecap: round;
    width: 100%;
    fill: none;
}

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

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

    .barChart__img--progressBar,
    .pieChart__img--progressBar{
        stroke: rgb(var(--colAccent));
        transition: 0.5s linear;
        /*stroke-dasharray: 1,100;*/
    }

    .progress__period--cur .pieChart__img--progressBar,
    .progress__period--cur .barChart__img--progressBar{
        /*stroke-dasharray: 25,100;*/
    }

    .progress__period--pre .pieChart__img--progressBar,
    .progress__period--pre .barChart__img--progressBar{
        stroke-dasharray: 100,100;
    }


    .pieChart__digits{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: fit-content;
        font-weight: 300;
    }

    .pieChart__digits--number{
        font-size: 5rem;
    }

    .pieChart__digits--unit{
        font-size: 1.2rem;

    }

        .pieChart__digits--unit:before{
            content: "/";
        }

        .pieChart__digits--unit:after{
            content: "%";
        }

    .barChart__period{
        width: 15em;
        display: flex;
        flex-direction: row;
        margin: 0px 0.5em;
    }

    .pieChart__period{
        width: 15em;
    }

        .pieChart__period>.pieChart__digits>.pieChart__digits--number:before{
            content: "CP";
            font-size: 1.5rem;
            position: absolute;
            left: 50%;
            top: -0.5em;
            transform: translateX(-50%);
        }
        .pieChart__period>.pieChart__digits>.pieChart__digits--unit:after{
            content: "";
        }