ol.progtrckr {
    display: table;
    list-style-type: none;
    margin: 0;
    padding: 0;
    table-layout: fixed;
    width: 100%;
}

ol.progtrckr li {
    display: table-cell;
    text-align: center;
    line-height: 0em;
}

ol.progtrckr[data-progtrckr-steps="2"] li {
    width: 49%;
}

ol.progtrckr[data-progtrckr-steps="3"] li {
    width: 33%;
}

ol.progtrckr[data-progtrckr-steps="4"] li {
    width: 24%;
}

ol.progtrckr[data-progtrckr-steps="5"] li {
    width: 19%;
}

ol.progtrckr[data-progtrckr-steps="6"] li {
    width: 16%;
}

ol.progtrckr[data-progtrckr-steps="7"] li {
    width: 14%;
}

ol.progtrckr[data-progtrckr-steps="8"] li {
    width: 12%;
}

ol.progtrckr[data-progtrckr-steps="9"] li {
    width: 11%;
}

    ol.progtrckr li.progtrckr-done {
        color: #5cb85c; /*black;*/
        border-top: 4px solid #5cb85c;
    }

    ol.progtrckr li.progtrckr-todo {
        color: #666; /*black;*/
        border-top: 4px solid #666;
    }

ol.progtrckr li:after {
    content: "\00a0\00a0";
}

ol.progtrckr li:before {
    position: relative;
 
    top: -0.7em;
    float: left;
    left: 50%;
    line-height: 1em;
}

    ol.progtrckr li.progtrckr-done:before {
        /*content: "\25AA";*/
        content: "\2714";
        color: #F5F9FC;
        background-color: #5cb85c; /*  #eb4c5e*/
        height: 1.2em;
        width: 1.2em;
        line-height: 1.2em;
        border: none;
        border-radius: 1.2em;
    }

    ol.progtrckr li.progtrckr-todo:before {
        content: "\25AA";
        color: #F5F9FC; /*#F5F9FC*/
        background-color: #666; /*black;*/
        height: 1.2em;
        width: 1.2em;
        line-height: 1.2em;
        border: none;
        border-radius: 1.2em;
    }