.sd-checkout-steps {
    list-style: none;
    --li-pl: 0;
    margin-bottom: 0
}

.sd-checkout-steps li span:after {
    content: '';
    position: absolute;
    top: 100%;
    right: 0;
    width: 0;
    height: 2px;
    background-color: var(--sd-primary-color);
    transition: width 0.4s cubic-bezier(0.19, 1, 0.22, 1)
}

.sd-checkout-steps .step-active span:after {
    width: 100%
}

.sd-checkout-steps li {
    display: inline-flex;
    align-items: center;
    margin-block: 5px;
    color: var(--sd-title-color);
    text-transform: uppercase;
    font-weight: var(--sd-title-font-weight);
    font-style: var(--sd-title-font-style);
    font-size: 22px;
    font-family: var(--sd-title-font);
    line-height: 1.2
}

.sd-checkout-steps li a {
    display: inline-block;
    color: inherit;
    opacity: .7
}

.sd-checkout-steps li a:hover {
    color: inherit;
    opacity: 1
}

.sd-checkout-steps li > span {
    opacity: .7
}

.sd-checkout-steps li span {
    position: relative;
    display: block
}

.sd-checkout-steps li:after {
    margin: 0 15px;
    font-weight: 400;
    font-size: 85%;
    opacity: .7;
    content: "\f121";
    font-family: "sandbox-font";
    flex-shrink: 0;
}

.sd-checkout-steps li:last-child:after {
    content: none
}

.sd-checkout-steps .step-active a, .sd-checkout-steps .step-active > span {
    opacity: 1
}

@media (max-width: 768.98px) {
    .sd-checkout-steps li {
        margin-block: 0
    }

    .sd-checkout-steps li:not(.step-active), .sd-checkout-steps li span:after, .sd-checkout-steps li:after {
        display: none
    }
}