/**
 * Fluid CSS-only wizard step indicator
 *
 * - Just a simple ordered list is all the required HTML.
 * - Set the class "current" to the <li> of the current step to highlight current
 *   and previous steps.
 * - Can handle any number of steps (just tweak calc(100% / 4) in li)
 */

/*Общая разметка*/
ol.stepbystep {
    font-size: 14px; /*Общий размер шрифта*/
    position: relative;
    overflow: hidden;
    counter-reset: wizard;
    margin: 0;
}

ol.stepbystep > li {
    list-style-type: none;
    position: relative;
    float: left;
    width: calc(100% / 4); /*Делим на кол-во шагов*/
    text-align: center;
    color: black;
}

/*Активные значки*/
ol.stepbystep > li:before {
    counter-increment: wizard;
    content: counter(wizard);
    display: block;
    color: white; /*Цвет текста внутри*/
    background-color: #504de4; /*Цвет заливки*/
    border: 2px solid #6a67ed; /*Границы значков*/
    text-align: center;
    width: 2em;
    height: 2em;
    line-height: 1.8em; /*Вертикальное положение цифры внутри*/
    border-radius: 2em;
    position: relative;
    left: 50%;
    margin-bottom: calc(1em / 2); /*Расстояние от подписей до значков*/
    margin-left: calc(2em * -0.5);
    z-index: 1;
}

/*Активные линии*/
ol.stepbystep > li + li:after {
    content: "";
    display: block;
    width: 100%;
    background-color: #6a67ed; /*Цвет активной линии*/
    height: 3px; /*Толщина активной линии*/
    position: absolute;
    left: -50%;
    top: calc(1.8em / 2);
    z-index: 0;
}

/*Неактивные значки*/
ol.stepbystep > .current ~ li:before {
    background-color: white;
    color: gray;
    border-color: gray;
}

ol.stepbystep > .current ~ li {
    color: gray; /*Цвет неактивных подписей*/
}

ol.stepbystep > .current ~ li:after {
    background-color: gray; /*Цвет неактивных линий*/
}