.checkout-step {
    margin-bottom: 60px;
    .checkout-step-item {
        opacity: 1;
        width: 33.3%;
        position: relative;
        float: left;
        padding-right: 15px;
        .number {
            font-size: 36px;
            height: 36px;
            line-height: 36px;
            top: 50%;
            margin-top: -18px;
            position: absolute;
            left: 0px;
            width: 77px;
            display: inline-block;
            text-align: center;
        }
        &::before {
            content: "";
            position: absolute;
            background-image: url(img/checkout/step-inactive.png);
            background-repeat: no-repeat;
            background-position: right;
            background-size: auto 100%;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: -16px;
        }
        &.active {
            &::before {
                background-image: url(img/checkout/step.png);
            }
            .checkout-step-item-container {
                background-color: #4a0b0b;
            }
        }
    }
    .checkout-step-item-container {
        background-color: #a48585;
        min-height: 50px;
        width: 100%;
        td {
            padding-left: 77px;
            vertical-align: middle;
            font-size: 18px;
            line-height: 30px;
            position: relative;
            color: #ffffff;
        }
    }
    .checkout-step-item-index-1 {
        position: relative;
        z-index: 3;
    }
    .checkout-step-item-index-2 {
        position: relative;
        z-index: 2;
    }
    .checkout-step-item-index-3 {
        padding-right: 0px;
        &::before {
            background-image: none;
        }
    }
}

@media screen and (max-width: @screen-sm-max) {
    .checkout-step .checkout-step-item {
        width: 100%;
        padding-right: 0px;
        margin-bottom: 10px;
    }
    .checkout-step .checkout-step-item::before {
        display: none;
    }
}