﻿    /* Form progress bar begin */

    #progressbar {
        margin-bottom: 10px;
        overflow: hidden;
        /*CSS counters to number the steps*/
        counter-reset: step;
    }

    #progressbar li {
        list-style-type: none;
        color: white;
        text-transform: uppercase;
        font-size: 1.2rem;
        width: 19%;
        float: left;
        position: relative;
    }

    #progressbar li:before {
        content: counter(step);
        counter-increment: step;
        width: 40px;
        line-height: 40px;
        display: block;
        font-size: 1.2rem;
        color: #333;
        background: white;
        border-radius: 20px;
        margin: 0px auto 5px auto;
    }
    /*progressbar connectors*/
    #progressbar li:after {
        content: '';
        width: 100%;
        height: 12px;
        background: white;
        position: absolute;
        left: -50%;
        top: 13px;
        z-index: -1; /*put it behind the numbers*/
    }

    #progressbar li:first-child:after {
        /*connector not needed before the first step*/
        content: none;
    }
    /*marking active/completed steps green*/
    /*The number of the step and the connector before it = green*/
        #progressbar li.active:before, #progressbar li.active:after {
            background: #1b6ec2;
            color: white;
            border: 1px solid 
        }
