.steps-progressbar > ul {
    display: table;
    table-layout: fixed;
    border-collapse: separate;
    margin: 12px 0 10px;
    width: 100%;
    padding: 0;
    list-style: none;
    color: #999;
    font-size: 14px;
    font-weight: 400;
}

    .steps-progressbar > ul > li {
        position: relative;
        display: table-cell;
        list-style-type: none;
        font-weight: 400;
        text-align: center;
    }

        .steps-progressbar > ul > li:before {
            position: inherit;
            display: block;
            margin: 13px auto 20px;
            width: 20px;
            height: 20px;
            border: 2px solid #ededed;
            border-radius: 50%;
            background-color: #fff;
            line-height: 30px;
            content: " ";
            z-index: 1;
        }

        .steps-progressbar > ul > li:after {
            position: absolute;
            top: 21px;
            right: 50%;
            width: 100%;
            height: 5px;
            box-shadow: inset 0 0 5px #f2f8fc;
            background-color: #e3e3e3;
            content: " ";
            z-index: 0;
        }

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

        .steps-progressbar > ul > li.active:before, .steps-progressbar > ul > li.previous:before {
            border-color: #ff0003;
            background-color: #ff0003;
        }

        .steps-progressbar > ul > li.active:after, .steps-progressbar > ul > li.previous:after {
            box-shadow: none;
            background-color: #ff0003;
        }

        .steps-progressbar > ul > li.active:before {
            margin-top: 0;
            margin-bottom: 20px;
            width: 20px;
            height: 20px;
        }