#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
}

#progressbar li {
    list-style-type: none;
    color: #99a2a8;
    width: calc(100% / 7);
    float: left;
    position: relative;
    font: 500 12px/1 "Roboto", sans-serif;
    text-align: center
}

#progressbar li.person:before {
    content: "\f007";
}

#progressbar li.exhibitor:before {
    content: "\f007";
}

#progressbar li.owner:before {
    content: "\f007";
}

#progressbar li.horse:before {
    content: "\f7ab";
}

#progressbar li.program:before {
    content: "\f133";
}

#progressbar li.membership:before {
    content: "\f2c2";
}

#progressbar li.options:before {
    content: "\f022";
}

#progressbar li.summary:before {
    content: "\f543";
}

#progressbar li:before {
    content: "\f111";
    font: normal normal normal 30px/50px "Font Awesome 6 Free";
    font-weight: 900;
    width: 50px;
    height: 50px;
    line-height: 50px;
    display: block;
    background: #eaf0f4;
    border-radius: 50%;
    margin: 0 auto 10px auto;
}

#progressbar li:after {
    content: '';
    width: 100%;
    height: 10px;
    background: #eaf0f4;
    position: absolute;
    left: -50%;
    top: 21px;
    z-index: -1;
}

#progressbar li:last-child:after {
    width: 150%;
}

#progressbar li.active {
    color: #5cb85c;
}

#progressbar li.active:before, #progressbar li.active:after {
    background: #5cb85c;
    color: white;
}

#progressbar li.cancel {
    color: #b22222;
}

#progressbar li.cancel:before, #progressbar li.cancel:after {
    background: #b22222;
    color: white;
}