body {
    font-family: "Open Sans";
}

.stepper-horizontal {
    display: table;
    width: 100%;
    margin: 0 auto;
    max-width: 950px;
    padding: 15px 0 0px;
    text-align: center;
}

.stepper-horizontal .step {
    display: table-cell;
    position: relative;
    padding: 1.5rem;
    padding-top: .2rem;
    z-index: 2;
    width: 16%;
    opacity: 0.6;
    padding-bottom: 0px;
}


.step-number {
    font-family: poppins;
    line-height: inherit;
    width: 30px;
    height: 30px;
    display: inline-block;
    background-size: 30px !important;
}
.step-number.package {
    background: url("../images/package.png") no-repeat center;
} 
.step-number.menu {
    background: url("../images/menu.png") no-repeat center;
} 
.step-number.checkout {
    background: url("../images/checkout.png") no-repeat center;
} 
.step-number.upsell {
    background: url("../images/confirmation.png") no-repeat center;
} 
.step-number.calculator {
    background: url("../images/calculator.png") no-repeat center;
} 
.step-number.thank-you {
    background: url("../images/thank-you.png") no-repeat center;
}
.step-number.get-started {
    background: url("../images/FlagClock.svg") no-repeat center;
} 

.stepper-horizontal .step:last-child .step-bar-left,.stepper-horizontal .step:last-child .step-bar-right {
    display: none
}

.stepper-horizontal .step .step-circle {
    margin: 0 auto;
    line-height: initial !important;
}

.stepper-horizontal .step .step-title {
    font-family: inter,sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    width: 15%;
    text-align: left;
    margin: 0 auto;
      margin-top: 0px;
    position: relative;
    margin-top: 0px;
    line-height: 2em;
    left: 5px;
}
.stepper-horizontal .step .step-title p {
    font-weight: 300;
    font-size: 12px;
    margin-bottom: 0px !important;
    line-height: 5px;
    display: none;
}

.stepper-horizontal .step.editing { 
    opacity: 1;
}
.stepper-horizontal .step.editing .step-circle {

}


.stepper-horizontal .step.editing .step-title {
    color: #000;
}

.stepper-horizontal .step .step-title,.stepper-horizontal .step .step-optional {
    color: gray
}

.stepper-horizontal .step .step-optional {
    font-size: 2rem;
    font-style: italic;
    color: gray
}

.stepper-horizontal .step .step-bar-left,.stepper-horizontal .step .step-bar-right {
    position: absolute;
    top: 25px;
    height: 1px;
    /* background-color: #d9e2ec; */
    border-top: 2px dotted #000;
}

.stepper-horizontal .step .step-bar-left {
    width: calc(70%);
    left: 65%;
    z-index: -1;
}

.stepper-horizontal .step .step-bar-right {
    width: 0;
    left: 50%;
    margin-left: 10px;
    z-index: -1;
    transition: width 500ms ease-in-out
}

.stepper-horizontal .step.done {
    opacity: 1;
    text-decoration: none;
}

.step.done .step-number {
    background-size: 30px;
}
.step.done .step-number.package {
    background: url("../images/package-done.png") no-repeat center;
}
.step.done .step-number.menu {
    background: url("../images/menu-done.png") no-repeat center;
}
.step.done .step-number.checkout {
    background: url("../images/checkout-done.png") no-repeat center;
}
.post-checkout-step.done .step-number.upsell {
    background: url("../images/confirmation-done.png") no-repeat center;
}
.step.done .step-number.calculator {
    background: url("../images/calculator-done.png") no-repeat center;
}
.step.done .step-number.thank-you {
    background: url("../images/thank-you-done.png") no-repeat center;
}

.post-checkout-step.done .step-number.barbell {
    background: url("../images/barbell-done.png") no-repeat center;
}
.post-checkout-step.done .step-number.get-started {
    background: url("../images/FlagClock-done.svg") no-repeat center;
}

.stepper-horizontal .step.done .step-title {
    color: #51ab3a;
}
.stepper-horizontal .step.done .step-bar-left {
    border-color: #51ab3a;
}
.stepper-horizontal .step.done .step-bar-right {
    border-color: #51ab3b;
}
.stepper-horizontal .step.done .step-title:after {
    font-family: fontawesome;
    font-weight: 100;
    content: "\f00c";
    background: #51ab3a;
    border-radius: 30px;
    padding: 4px;
    font-size: 10px;
    color: #fff;
    margin-left: 5px;
    position: relative;
    top: -2px;
}

@media (max-width: 1024px) {
    .post-step-title {
        display: none;
    }
    
    .post-step-description {
        display: none;
    }
}

@media (max-width: 768px) {
    #stepper {
        margin-bottom: 1rem;
    }
    .stepper-horizontal {
        padding: 15px 0 5px !important;
    }
    .stepper-horizontal .step {
        padding: 0px;
    }
    .stepper-horizontal .step .step-title {
        font-size: 13px !important;
        left: -3px;
        margin-top: 0px;
    }
    .stepper-horizontal .step.done .step-title::after { 
        font-size: 5px;
        padding: 3px;
        margin-left: 3px;
    }
    .stepper-horizontal .step .step-title p {
        width: 50px;
        font-size: 10px;
    }
    .stepper-horizontal .step .step-circle {

    }
    .stepper-horizontal .step.done .step-circle {
        line-height: 1.6rem;
      }
    .stepper-horizontal .step .step-bar-left {
        width: calc(60%);
        left: 70%;
    }
    .elementor-widget-wrap.elementor-element-populated {
        padding-inline: 0px !important;
        margin-bottom: .5rem;
      }
    .stepper-horizontal .step .step-bar-left, .stepper-horizontal .step .step-bar-right {
        top: 15px;
    }
    .step-number {
        background-size: 25px !important;
        width: 25px !important;
        height: 25px !important;
      }

    /* STEPPER CSS POST-CHECKOUT MOBILE */
    .post-checkout-stepper {
        justify-content: flex-start !important;
        overflow-x: scroll;
    }

    .post-step-title {
        display: none;
    }
    
    .post-step-description {
        display: none;
    }

    .post-checkout-step {
        padding: 0px 0px 8px 10px !important;
        flex-grow: 1;
    }
}

/* STEPPER CSS POST-CHECKOUT */
.post-checkout-stepper {
    display: flex;
    padding: 20px 0px 10px;
    justify-content: center;
    justify-items: center;
}

.post-checkout-step {
    display: flex;
    border-bottom: 3px solid #ECECEC;
    padding: 0px 30px 8px 30px;
}

.post-checkout-step.done {
    border-bottom: 3px solid #51ab3a;
}

.post-step-title {
    color: #BDBDBD;
    font-weight: 300;
    font-size: 10px;
    text-transform: uppercase;
}

.post-step-description {
    color: #BDBDBD;
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
}

.post-checkout-step.done .post-step-title {
    color: #51ab3a;
}

.post-checkout-step.editing .post-step-title {
    color: #51ab3a;
}

.post-checkout-step.done .post-step-description {
    color: #51ab3a;
    font-weight: 600;
}

.post-checkout-step.editing .post-step-description {
    color: #51ab3a;
    font-weight: 600;
}

.post-checkout-step.editing {
    border-bottom: 3px solid #51ab3a;
}

.post-checkout-step.editing .step-number.calculator {
    background: url("../images/calculator-done.png") no-repeat center;
}

.post-checkout-step.editing .step-number.thank-you {
    background: url("../images/thank-you-done.png") no-repeat center;
}

.post-checkout-step.done .step-number.thank-you {
    background: url("../images/thank-you-done.png") no-repeat center;
}

.post-checkout-step.done .step-number.calculator {
    background: url("../images/calculator-done.png") no-repeat center;
}

.post-checkout-step.done .confirmation {
    background: url("../images/confirmation-done.png") no-repeat center;
}

.post-checkout-step.done .calculator {
    background: url("../images/calculator-done.png") no-repeat center;
}

.post-checkout-step.done .thank-you {
    background: url("../images/thank-you-done.png") no-repeat center;
}

.post-step-icon {
    margin: 0px 15px 0px 0px;
}

.calculator-icon-check {
    background: url("../images/confirmation-filled-white.png") no-repeat center;
    padding: 8px;
    border-radius: 50px;
    background-size: 20px;
}

.step-number.barbell {
    background: url("../images/barbell.png") no-repeat center;
}
.step-number.powerup {
    background: url("../images/powerup.png") no-repeat center;
}
.step-number.info {
    background: url("../images/info.png") no-repeat center;
}
.step-number.trophy {
    background: url("../images/trophy.png") no-repeat center;
}

.post-step-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/*New stepper*/

.step-1.done svg path,
.step-2.done svg path,
.step-3.done svg path {
    fill: #1BC01B;
    stroke: #1BC01B;
}
.step-1.editing svg path,
.step-2.editing svg path,
.step-3.editing svg path {
    stroke: #1BC01B;
    fill: #F7FFF8;
}
.step-1.pendent svg path,
.step-2.pendent svg path,
.step-3.pendent svg path {
    fill: transparent;
    stroke: #737373;
}
.horizontal-stepper {
    width: 827px;
    margin: auto;
    height: 79px;
    margin-bottom: 0px;
    padding-top: 10px
}
.horizontal-stepper > div,
.horizontal-stepper > a {
    float: left;
    position: relative;
}
.horizontal-stepper > :first-child{
    margin-right: -11px;
}
.horizontal-stepper > :first-child svg {
    width: 292px !important;
    height: 60px !important;
}
.horizontal-stepper > :nth-child(2) {
    margin-right: -13px;
}
.horizontal-stepper > :nth-child(2) svg {
    width: 292px !important;
    height: 60px !important;
}
.horizontal-stepper > :last-child svg {
    width: 267px !important;
    height: 60px !important;
}
.horizontal-stepper > div > div,
.horizontal-stepper > a > div {
    position: absolute;
    top:0;
    left: 0;
    display: flex;
    flex-direction: column;
}

.horizontal-stepper > :first-child > div {
    padding: 10px 21px 10px 40px;
}

.horizontal-stepper > :nth-child(2) > div,
.horizontal-stepper > :nth-child(3) > div {
    padding: 10px 0 0 40px;
}
.horizontal-stepper > div > div span,
.horizontal-stepper > a > div span{
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0.1px;
}
.horizontal-stepper > div > div strong,
.horizontal-stepper > a > div strong{
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.1px;
}
.horizontal-stepper > div > div div,
.horizontal-stepper > a > div div{
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.1px;
}

.horizontal-stepper > .done,
.horizontal-stepper > .done:hover {
    color: #fff;
    filter: brightness(100%);
}

.horizontal-stepper > .editing span,
.horizontal-stepper > .pendent span{
    color: #646B68;
}
.horizontal-stepper > .editing strong {
    color: #009400 !important;
}

.horizontal-stepper > .pendent strong{
    color: #009400;
}

.horizontal-stepper > .editing .stepper-content div{
    color: #00AF2C;
}
.horizontal-stepper > .pendent .stepper-content div{
    color: #A3A3A3;
}

@media (max-width: 767px) {
    .horizontal-stepper {
        width: 348px;
        height: 40px;
        margin: 0 auto 5px;
        padding-top: 5px;
    }

    .horizontal-stepper > :first-child {
        margin-right: -4px;
    }
    .horizontal-stepper .step-1 {
        width: 121px;
    }
    .horizontal-stepper > :nth-child(2) {
        margin-right: -4px;
    }
    .horizontal-stepper .step-2 {
        width: 121px;
    }
    .horizontal-stepper .step-3 {
        width: 114px
    }

    .horizontal-stepper > :first-child svg,
    .horizontal-stepper > :nth-child(2) svg,
    .horizontal-stepper > :last-child svg {
        height: 31px !important;
        width: 120px !important;
    }

    .horizontal-stepper .stepper-content span {
        font-size: 8.47px;
        line-height: 10px;
        letter-spacing: 0.06px;
    }

    .horizontal-stepper .stepper-content strong {
        font-size: 10.89px;
        line-height: 11px;
        letter-spacing: 0.1px;
    }

    .horizontal-stepper .stepper-content div {
        font-size: 7.26px;
        line-height: 10px;
        letter-spacing: 0.06px;
    }

    .horizontal-stepper > :first-child > div {
        padding: 4px 12px;
    }
    .horizontal-stepper > :nth-child(2) > div,
    .horizontal-stepper > :nth-child(3) > div {
        padding: 5px 22px;
    }
}