/*Прогресс-бар*/
:root{
    --color1-progress: transparent; /* цвет дырки */
    --color2-progress:#8672c952; /* цвет кольца */
    --color3-progress: #E53AAA; /* цвет заполнения */
    --color7-progress: #E53AAA; /*Цифры прогресса*/
    --color4-progress: transparent;/*Цвет контейнера шкалы*/
    --color5-progress: #222; /*Цвет обводки контейнера шкалы*/
    --color6-progress: #36302C; /*Цвет заголовка контейнера шкалы*/

}

/*Стили для контейнера шкалы*/
.prog {
    background: var(--color4-progress);
    border-radius: var(--raduga-border-radius);
    border:var(--raduga-border);
    -webkit-box-shadow: var(--raduga-box-shadow);
    box-shadow: var(--raduga-box-shadow);
    width: 100%;
    max-width: 400px;
    margin: 0 auto 20px;

}

/*Заголовок для шкалы*/
.title_prog {
    font-family: var(--raduga-font-header-family);
    font-style: normal;
    font-weight: 500;
    font-size: 26px;
    line-height: 33px;
    text-align: center;
    letter-spacing: 0.02em;
    color:var(--color6-progress);
    margin-bottom: 0;
}

/*Стили шкалы достижений*/
.xdget-trainingAchievements {
    display:none;
}
svg.lessons-dount {
    display:block!important;
}
svg.lessons-dount .donut-hole {
    fill: var(--color1-progress);
}
svg.lessons-dount .donut-ring {
    stroke: var(--color2-progress);
    stroke-width: 4; /* толщина кольца */
    fill: transparent;
}
svg.lessons-dount .donut-segment {
    stroke:var(--color3-progress);
    stroke-width: 4; /* толщина заполнения */
    fill: transparent;
    stroke-dasharray: "0 100";
    stroke-dashoffset: 25;
}
.chart-text {
    fill: var(--color7-progress); 
    -ms-transform: translateY(0.25em); 
    -webkit-transform: translateY(0.25em); 
    transform: translateY(0.25em);
}
.chart-number {
    font-family: var(--raduga-font-header-family);
    font-style: normal;
    font-weight: 400;
    font-size: 9px;
    line-height: 51px;
    text-anchor: middle; 
    -ms-transform: translateY(-0.25em); 
    -webkit-transform: translateY(-0.25em); 
    transform: translateY(-0.25em);
}
.chart-label {
    font-style: normal;
    font-weight: 400;
    font-size: 0.2em; 
    line-height: 36px;
    font-family: var(--raduga-font-family);
    font-style: normal;
    text-transform: uppercase; 
    text-anchor: middle; 
    -ms-transform: translateY(0.7em); 
    -webkit-transform: translateY(0.7em);
    transform: translateY(0.7em);
}



@media (max-width: 425px){
    .prog{
        max-width: 100%;
        width: calc(100% - 10px);
        margin: 0 auto 20px;
    }
}