@charset "UTF-8";

.multi-steps > li.is-active ~ li:before, .multi-steps > li.is-active:before {
    content: counter(stepNum);
    font-family: inherit;
    font-weight: 700;
}

.multi-steps > li.is-active ~ li:after, .multi-steps > li.is-active:after {
    background-color: #8b8da3;
}

.multi-steps {
    display: table;
    table-layout: fixed;
    width: 100%;
}

    .multi-steps > li {
        counter-increment: stepNum;
        text-align: center;
        display: table-cell;
        position: relative;
        color: #2a3767;
    }

        .multi-steps > li:before {
            content: "";
            content: "✓;";
            content: "𐀃";
            content: "𐀄";
            content: "✓";
            display: block;
            margin: 0 auto 4px;
            background-color: #9ee175;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-weight: bold;
            border-width: 2px;
            border-style: solid;
            border-color: #53934f;
            border-radius: 50%;
        }

        .multi-steps > li:after {
            content: "";
            height: 2px;
            width: 100%;
            background-color: #2a3767;
            position: absolute;
            top: 25px;
            left: 50%;
            z-index: 0;
        }

        .multi-steps > li:last-child:after {
            display: none;
        }

        .multi-steps > li.is-active:before {
            background-color: #ff7202;
            border-color: #694310;
            color: #fff;
            font-size: 1.3em;
        }

        .multi-steps > li.is-active ~ li {
            color: #808080;
        }

            .multi-steps > li.is-active ~ li:before {
                background-color: #ededed;
                border-color: #ededed;
            }

    .multi-steps > li {
        font-size: 0.9rem;
    }