ul.steps-form {
    counter-reset: step;
}

ul.steps-form li {
    list-style-type: none;
    float: left;
    width: 24.99%;
    position: relative;
    text-align: center;
    color: rgb(202, 202, 202);
}

ul.steps-form li:before {
    content: counter(step);
    counter-increment: step;
    width: 40px;
    height: 40px;
    line-height: 35px;
    border: 2px solid rgb(202, 202, 202);
    color: rgb(202, 202, 202);
    display: block;
    text-align: center;
    margin: 0 auto 10px auto;
    border-radius: 50%;
    background: white;
}

ul.steps-form li:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #ddd;
    top: 20px;
    left: -50%;
    z-index: -1;
}

ul.steps-form li:first-child:after {
    content: none;
}

ul.steps-form li.active:before {
    border-color: rgba(4, 177, 194, 1);
    background: rgba(4, 177, 194, 1);
    color: #fff;
}

ul.steps-form li.active + li:after {
    background: rgba(4, 177, 194, 1);
}

div.steps-content div.step-tab {
    display: none;
}

div.steps-content div.step-tab.active {
    display: block;
}

ul.steps-form li.filled:before {
    border-color: rgba(4, 177, 194, 1);
    background: rgba(4, 177, 194, 1);
    color: #fff;
}

ul.steps-form li.filled + li:after {
    background: rgba(4, 177, 194, 1);
}