.progressbar {
    overflow: hidden;
    color: lightgrey
}

    .progressbar .active {
        color: #673AB7
    }

    .progressbar div {
        list-style-type: none;
        font-size: 15px;
        width: 25%;
        float: left;
        font-weight: 400
    }

    .progressbar #account:before {
        font-family: FontAwesome;
    }

    .progressbar #personal:before {
        font-family: FontAwesome;
    }

    .progressbar #payment:before {
        font-family: FontAwesome;
    }

    .progressbar #areas:before {
        font-family: FontAwesome;
    }

    .progressbar #confirm:before {
        font-family: FontAwesome;
    }

    .progressbar div:before {
        width: 50px;
        height: 50px;
        line-height: 45px;
        display: block;
        font-size: 20px;
        color: #ffffff;
        background: lightgray;
        border-radius: 50%;
    }

    .progressbar div:after {
        content: '';
        width: 100%;
        height: 2px;
        background: lightgray;
        position: absolute;
        left: 0;
        top: 25px;
        z-index: -1
    }

    .progressbar div.active:before,
    .progressbar div.active:after {
        background: #673AB7
    }

.progress-bar {
    background-color: #673AB7
}