.wrapper {
    /*background: #ccc;*/
    height: 250px;
    width: 280px;
    position: relative;
}

.wrapper .donut {
    position: absolute;
    /*left: 120px;
    top: -25px;*/
    left:0;
    top:0;
}

.donut-segment {
    animation-name: fill-in;
    animation-fill-mode: forwards;
    animation-duration: 2000ms;
    /*   animation-timing-function: ease-in-out; */
    /*   opacity: 0; */
}

@keyframes fill-in {
    from {
        /*     opacity: 0; */
        /*stroke-dashoffset: 0;*/
    }
    to {
        /*     opacity: 1; */
    }
}

.donutUser{
    position: absolute;
    top: 97px;
    left: 97px;
    background-color: #EBBCC4;
    width: 127px;
    height: 127px;
    border-radius: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
}
.donutUser h3{color: white; align-self: center; margin:0; font-family: MuliSemiBold, sans-serif; font-size: 40px;}

.legendPerc{
    width: 88px;
    height: 88px;
    border-radius: 101%;
    display: flex;
    justify-content: center;
}

.legendPerc h4{align-self: center; color:white; font-size:29px;}
.legendPerc h4:after{content:'%'}

.legendPerc_first{background-color: #D6D6D6;}
.legendPerc_second{background-color: #EBBCC4;}
.legendPerc_third{background-color: #DB8E9B;}