/* =============
Прогресс
=============== */

:root {
    --color1-gorizont-progress: #fff;/*Цвет фона шкалы*/
    --color2-gorizont-progress: #a57b01;/*Цвет заголовка шкалы*/
    --gorizont-progress-border-top: 0px solid #fff;/*верхний бордер*/
    --gorizont-progress-border-right: 0px solid #fff;/*правый бордер*/
    --gorizont-progress-border-bottom: 0px solid #fff;/*нижний бордер*/
    --gorizont-progress-border-left: 0px solid #fff;/*левый бордер*/
    --color3-gorizont-progress: #ededed;/* цвет прогресса до заполнения*/
    --color4-gorizont-progress: #d1ae4a; /* цвет заполнения */
    --color5-gorizont-progress: #a57b01;/*Цифры прогресса*/
}

.gorizont_progress .xdget-trainingAchievements{
    display:none;
}

.gorizont_progress{
    background: var(--traning-zoloto-bg-fon)!important;
    padding: 20px 20px 10px!important;
    border-radius: var(--traning-zoloto-border-radius);
    margin: 0 auto 20px;
}

/*Стили для контейнера шкалы*/
.gorizont_progress .prog {
    background: var(--color1-gorizont-progress);
    border-radius: var(--traning-zoloto-border-radius);
    border-top: var(--gorizont-progress-border-top) !important;
    border-right: var(--gorizont-progress-border-right) !important;
    border-bottom: var(--gorizont-progress-border-bottom) !important;
    border-left: var(--gorizont-progress-border-left) !important;
    -webkit-box-shadow: var(--traning-zoloto-box-shadow) !important;
    box-shadow: var(--traning-zoloto-box-shadow) !important;
    width: 100%;
    max-width: 100%;
    padding: 0 10px 10px;/*0 20 10*/
    margin: 0px auto 15px!important;
}

/*Заголовок для шкалы*/
.gorizont_progress .title_prog {
    font-family: var(--traning-zoloto-font-family-header)!important;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    text-align: center;
    letter-spacing: 0.02em;
    color:var(--color2-gorizont-progress);
    margin-bottom: 20px;/*30*/

}

/*Стили шкалы достижений*/
/***************/
.gorizont_progress .show-container,
.gorizont_progress .progress-container{
    position: relative;
}  


.gorizont_progress .rounded {
    height: 100%;
    border-radius: 99px;
    overflow: hidden; 
    transform: translateZ(0);
}

.gorizont_progress .progress {
    position: relative;
    width: 100%;
    height: 20px;
    background-color: var(--color3-gorizont-progress);
    border-radius: 99px;
    overflow: visible;
    box-shadow: none;
    margin-bottom: 40px;/*60*/
    stroke-linecap: round;
}
.gorizont_progress .progress .progress-bar {
    position: relative;
    height: 100%;
    background:var(--color4-gorizont-progress);
    transition: width .5s ease-out;
}

.gorizont_progress .progress .progress-number {
    position: absolute;
    left: 0;
    top: 0;
    transition: transform .5s ease-out; 
}

.gorizont_progress .progress .progress-number {
    position: absolute;
    top: 25px;
    color: var(--color5-gorizont-progress);
    font-family: var(--traning-zoloto-font-family-header)!important;
    font-size: 3rem;
    font-weight: 500;
    white-space: nowrap;
    transform: translateX(-10%);
}



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


}