
.bs-wizard {
    margin-top: 2rem;
    border-bottom: solid 1px #e0e0e0;
    padding: 0 0 10px 0;
    overflow-x: auto
}

    .bs-wizard > .bs-wizard-step {
        position: relative;
        padding: 0;
        width: 100%;
        min-width: 100px;
        max-width: 160px;
        text-align: center
    }

        .bs-wizard > .bs-wizard-step .bs-wizard-stepnum {
            color: #595959;
            font-size: 14px;
            margin-bottom: 5px
        }

        .bs-wizard > .bs-wizard-step .bs-wizard-info {
            color: #999;
            font-size: x-small;
            display: none
        }

        .bs-wizard > .bs-wizard-step .active {
            display: block
        }

            .bs-wizard > .bs-wizard-step.active .bs-wizard-stepnum {
                font-weight: bold
            }

        .bs-wizard > .bs-wizard-step > .bs-wizard-dot {
            position: absolute;
            width: 60px;
            height: 60px;
            display: block;
            background: url(../OrderStatusStepProgress/status-sprite-icons.png) no-repeat;
            top: 22px;
            left: 45%;
            margin-top: -15px;
            margin-left: -15px;
        }

.bs-wizard-step:nth-child(2) .bs-wizard-dot {
    background-position-x: -60px;
}

.bs-wizard-step:nth-child(3) .bs-wizard-dot {
    background-position-x: -120px;
}

.bs-wizard-step:nth-child(4) .bs-wizard-dot {
    background-position-x: -180px;
}

.bs-wizard-step:nth-child(5) .bs-wizard-dot {
    background-position-x: -240px;
}

.bs-wizard > .bs-wizard-step > .bs-wizard-dot:after {
    content: ' ';
    width: 14px;
    height: 14px;
    background: #007bff;
    border-radius: 50px;
    position: absolute;
    top: 8px;
    left: 8px;
    display: none;
}

.bs-wizard > .bs-wizard-step > .progress {
    position: relative;
    height: 8px;
    margin: 38px 0;
    background: #ddd;
    border-radius: 0;
    box-shadow: none
}

    .bs-wizard > .bs-wizard-step > .progress > .progress-bar {
        width: 0;
        box-shadow: none;
        background: #75b6fd
    }

.bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar {
    width: 100%
}

.bs-wizard > .bs-wizard-step.active > .progress > .progress-bar {
    width: 50%
}

.bs-wizard > .bs-wizard-step:first-child.active > .progress > .progress-bar {
    width: 0%
}

.bs-wizard > .bs-wizard-step:last-child.active > .progress > .progress-bar {
    width: 100%
}

.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot {
    -ms-filter: grayscale(1);
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

    .bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot:after {
        opacity: 0
    }

.bs-wizard > .bs-wizard-step:first-child > .progress {
    right: 50%;
    width: 50%
}

.bs-wizard > .bs-wizard-step:last-child > .progress {
    width: 55%
}

.bs-wizard > .bs-wizard-step.disabled a.bs-wizard-dot {
    pointer-events: none
}

.order-list-page .bs-wizard {
    margin-top: -7px;
    border-bottom: 0;
    padding-top: 5px
}
