*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
:root{
    --EC-ScaleProgress-v1-bg:#F8F9FA;
    --EC-ScaleProgress-v1-gray:#E9ECEF;
    --EC-ScaleProgress-v1-green:#12B886;
    --EC-ScaleProgress-v1-light-green:#E6FCF5;
    --EC-ScaleProgress-v1-main:#343A40;
}
.EC-ScaleProgress-v1{
    padding: 20px 0;
    position: relative;
}
.EC-ScaleProgress-v1 .EC-ScaleProgress-v1__box{
    background-color:var(--EC-ScaleProgress-v1-bg);
    border-top-left-radius:10px ;
    border-top-right-radius: 10px;
}
.EC-ScaleProgress-v1 .EC-ScaleProgress-v1__items{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 19px 0;
}
.EC-ScaleProgress-v1 .EC-ScaleProgress-v1__item{
    flex:1 ;
    text-align: center;
    border-right: 1px dashed var(--EC-ScaleProgress-v1-main);
    color: var(--EC-ScaleProgress-v1-main);
    font-size: 18px;
    font-weight: 500;
    line-height: 31px;
}
.EC-ScaleProgress-v1 .EC-ScaleProgress-v1__item:last-of-type{
    border-right: none;
}
.EC-ScaleProgress-v1 .EC-ScaleProgress-v1__border-bottom{
    height: 5px;
    width: 100%;
    background-color:var(--EC-ScaleProgress-v1-gray);
    border-radius: 50px;
    position: relative;
}
.EC-ScaleProgress-v1 .EC-ScaleProgress-v1__border-bottom::after {
    content: '';
    width: var(--percent, 0%);
    height: 100%;
    position: absolute;
    left: 0;
    background-color: var(--EC-ScaleProgress-v1-green);
    border-radius: 50px;
}
.EC-ScaleProgress-v1 .EC-ScaleProgress-v1__badge{
    position: absolute;
    bottom: 10px;
    background-color: var(--EC-ScaleProgress-v1-light-green);
    color: var(--EC-ScaleProgress-v1-green);
    font-size: 12px;
    font-weight: 700;
    line-height: 24px;
    padding: 0 5px 0 6px;
    border-radius: 8px;
    text-align: center;
    display: inline-block;
    width: 3.5%;
    min-width: 42px;
    max-width: 47px;
}
.EC-ScaleProgress-v1 .EC-ScaleProgress-v1__badge::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='6' viewBox='0 0 13 6' fill='%23E6FCF5'%3E%3Cpath d='M12.8389 5.5332L9.11117 1.43759C7.92105 0.130035 5.864 0.130048 4.6739 1.43762L0.946289 5.5332H12.8389Z' fill='%23E6FCF5' fill-opacity='1'/%3E%3C/svg%3E");
    position: absolute;
    top: -15px;
    left: var(--after-left, 0%);
}
.EC-ScaleProgress-v1 .EC-ScaleProgress-v1__box{
    margin-bottom: 24px;
}
/* **** tablet style *** */
@media screen and (max-width:768px) {
    .EC-ScaleProgress-v1 .EC-ScaleProgress-v1__items {
        padding: 13px 0;
    }
    .EC-ScaleProgress-v1 .EC-ScaleProgress-v1__item {
        font-size: 16px;
        line-height: 27px;
    }
}
/* ***** mobile style **** */
@media screen and (max-width:576px) {
    .EC-ScaleProgress-v1 .EC-ScaleProgress-v1__items {
        padding: 4px 0;
    }
    .EC-ScaleProgress-v1 .EC-ScaleProgress-v1__item {
        font-size: 10px;
        line-height: 31px;
    }
    .EC-ScaleProgress-v1 {
        padding: 16px 0;
    }
}
/* ********* RTL style ****** */
[dir="rtl"] .EC-ScaleProgress-v1 .EC-ScaleProgress-v1__item {
    border-left: 1px dashed var(--EC-ScaleProgress-v1-main);
    border-right: none;
}
[dir="rtl"] .EC-ScaleProgress-v1 .EC-ScaleProgress-v1__item:last-of-type {
    border-left: none;
}
[dir="rtl"] .EC-ScaleProgress-v1 .EC-ScaleProgress-v1__border-bottom::after {
    right: 0;
    left: unset;
}

[dir="rtl"] .EC-ScaleProgress-v1 .EC-ScaleProgress-v1__badge {
    left: unset;
    right: var(--badge-position, 0%);
}

[dir="rtl"] .EC-ScaleProgress-v1 .EC-ScaleProgress-v1__badge::after {
    left: unset;
    right: var(--after-right, 0%);
}