
.dsb-container {
    width: 100%;
    position: absolute;
    z-index: 1;
}

.dsb-stepbar li {
    float: left;
    width: 20%;
    position: relative;
    text-align: center;
    cursor: pointer;
}

.dsb-stepbar {
   counter-reset: step 5;
    list-style: none;
}

    .dsb-stepbar li:before {
        content: counter(step);
        counter-increment: step -1;
        width: 30px;
        height: 30px;
        border: 2px solid #bebebe;
        display: block;
        margin: 0 auto 10px auto;
        border-radius: 50%;
        line-height: 27px;
        background: white;
        color: #bebebe;
        text-align: center;
        font-weight: bold;
    }

.dsb-stepbar li:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    background: #979797;
    top: 15px;
    left: -50%;
    z-index: -1;
}

/*.dsb-stepbar li.dsb-active + li:after {
    background: #62cb31;
}*/

.dsb-stepbar li.dsb-active:before {
    border-color: #62cb31;
    background: #62cb31;
    color: white
}

.dsb-old-active + li:before {
    border-color: #3498db;
    background: #3498db;
    color: white
}

.dsb-stepbar li:first-child:after {
    content: none;
}
 