:root {
    --container-max-widths-sm: 540px;
    --container-max-widths-md: 720px;
    --container-max-widths-lg: 960px;
    --container-max-widths-xl: 1140px;
    --xs: 0;
    --sm: 576px;
    --md: 768px;
    --lg: 992px;
    --xl: 1200px;
    --xxl: 1400px;
}

.tire-finder-main {
    /* padding: 85px 0px 200px; */
    background-image: url(./../../../../assets/tire-search/tire-finder-footer-panner.svg);
    background-repeat: no-repeat;
    background-position: center calc(100% + 56px);
    background-size: initial;
}

    .tire-finder-main > div {
        padding-bottom: 10rem;
    }

    .tire-finder-main.tire-finder-size {
        min-height: calc(100vh - 128px);
    }

    .tire-finder-main .btn-back-appointment {
        color: #1d4288;
        text-transform: uppercase;
        /* font-size: 36px;
    line-height: 38px;
    font-weight: 700;
    font-family: BebasNeue; */
        cursor: pointer;
        /* margin-bottom: 10px;  */
    }

        .tire-finder-main .btn-back-appointment img {
            display: inline-block;
            /* margin-right: 28px; */
        }

    .tire-finder-main .choose-tire-by {
        color: #1a1a1a;
        /* font-size: 16px;
    line-height: 24px;
    font-family: Inter;
    margin-bottom: 40px; */
    }

        .tire-finder-main .choose-tire-by a {
            color: #1d4288 !important;
            font-weight: 400;
        }

            .tire-finder-main .choose-tire-by a:first-of-type {
                margin: 0 24px;
                display: inline-block;
            }

    .tire-finder-main .step-heading {
        display: flex;
        justify-content: space-between;
        /* padding-bottom: 24px; */
    }

        .tire-finder-main .step-heading h3 {
            /* font-size: 22px;
    line-height: 32px; */
            color: #1d4288;
            /* font-family: Inter;
        font-weight: 700;
        margin: 0px; */
        }

        .tire-finder-main .step-heading span {
            font-weight: 400;
            font-size: 16px;
            line-height: 28px;
            font-family: Inter;
            color: #1d4288;
        }

    .tire-finder-main .step-sub-heading {
        display: flex;
        justify-content: space-between;
        padding: 24px 0px;
        border-bottom: 1px solid #939598;
    }

        .tire-finder-main .step-sub-heading .step-sub-heading__rangetime h4 {
            font-weight: 700;
            font-size: 18px;
            line-height: 28px;
            font-family: Inter;
            color: #1d4288;
            margin: 0px 32px;
        }

        .tire-finder-main .step-sub-heading .step-sub-heading__rangetime img {
            cursor: pointer;
        }

        .tire-finder-main .step-sub-heading span {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            font-family: Inter;
            color: #1d4288;
        }

    .tire-finder-main .left-section {
        flex: 1 1 auto;
        /* margin-right: 24px; */
    }

    .tire-finder-main .loading-screen {
        display: flex;
        position: fixed;
        height: 100%;
        width: 100%;
        background-color: transparent;
        align-items: center;
        justify-content: center;
        left: 0px;
        top: 0px;
    }

    .tire-finder-main .appointmet-billing {
        background-color: #1d4288;
        /* padding: 24px; 
        width: 424px; */
    }

        .tire-finder-main .appointmet-billing .appointment-billing-banner {
            background: #ffffff;
            height: 104px;
            display: flex;
            justify-content: center;
            align-items: center;
            /* margin-bottom: 29px; */
        }

        .tire-finder-main .appointmet-billing .appointment-billing-content {
            /* margin-bottom: 17px; */
        }

            .tire-finder-main .appointmet-billing .appointment-billing-content h3 {
                /* font-family: BebasNeue;
    font-weight: 400;
    font-size: 32px;
    line-height: 28px; */
                color: white;
            }

            .tire-finder-main .appointmet-billing .appointment-billing-content .appointment-billing-content-description {
                display: flex;
                justify-content: space-between;
            }


                .tire-finder-main .appointmet-billing .appointment-billing-content .appointment-billing-content-description p {
                    /* font-family: Inter;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px; */
                    letter-spacing: 0.1px;
                    color: #ffffff;
                    max-width: 256px;
                    margin: 0px;
                }

                .tire-finder-main .appointmet-billing .appointment-billing-content .appointment-billing-content-description span {
                    /* font-family: Inter;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px; */
                    letter-spacing: 0.1px;
                    color: #ffffff;
                    text-decoration: underline;
                    cursor: pointer;
                }

        .tire-finder-main .appointmet-billing .appointment-billing-banner .appointment-billing-matches {
            margin-right: 18px;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
            font-family: Inter;
            font-weight: 700;
            color: #1a1a1a;
            background-color: #efefef;
        }

        .tire-finder-main .appointmet-billing .appointment-billing-banner h3 {
            color: inherit;
            font-family: BebasNeue;
            font-weight: 700;
            font-size: 32px;
            text-transform: uppercase;
        }

        .tire-finder-main .appointmet-billing .appointment-billing-button {
            display: block;
            padding: 12px 0px;
            font-size: 22px;
            line-height: 24px;
            font-family: BebasNeue;
            color: #1d4288;
            background-color: white;
            font-weight: 400;
            border: none;
            width: 100%;
        }

    .tire-finder-main .list-makes-wrapper .list-makes {
        /* padding: 24px 0px; */
        display: grid;
        grid-gap: 24px;
        grid-template-columns: repeat(5, auto);
    }

    .tire-finder-main .list-makes-wrapper .make-wrapper {
        text-align: center;
    }

        .tire-finder-main .list-makes-wrapper .make-wrapper .make-img-wrapper {
            height: 120px;
            width: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2px;
            background-origin: content-box;
            border: 3px solid #1d4288;
            border-radius: 50%;
            margin: auto;
            /* margin-bottom: 3px; */
            cursor: pointer;
        }

            .tire-finder-main .list-makes-wrapper .make-wrapper .make-img-wrapper img {
                width: 120px;
                height: 120px;
            }

            .tire-finder-main .list-makes-wrapper .make-wrapper .make-img-wrapper .make-img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
            }

        .tire-finder-main .list-makes-wrapper .make-wrapper span {
            /* font-size: 16px;
    line-height: 24px;
    font-family: Inter;
    font-weight: 500; */
            color: #1d4288;
            display: block;
            margin: auto;
        }

        .tire-finder-main .list-makes-wrapper .make-wrapper.selected .make-img-wrapper .make-img {
            background-color: #3eb049;
        }

        .tire-finder-main .list-makes-wrapper .make-wrapper.selected span {
            font-weight: 700;
        }

    .tire-finder-main .list-makes-wrapper.horizontal-makes .make-wrapper {
        display: flex;
        align-items: center;
    }

        .tire-finder-main .list-makes-wrapper.horizontal-makes .make-wrapper .make-img-wrapper {
            margin: 0px;
        }

        .tire-finder-main .list-makes-wrapper.horizontal-makes .make-wrapper .make-para-wrapper {
            margin: 0px;
            margin-left: 21px;
            text-align: left;
        }

        /*.tire-finder-main .list-makes-wrapper.horizontal-makes .make-wrapper span {
    font-family: Inter;
    font-weight: 700;
    font-size: 24px;
    line-height: 22px;
}  */

        .tire-finder-main .list-makes-wrapper.horizontal-makes .make-wrapper p {
            /* font-family: Inter;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px; */
            text-decoration: underline;
            cursor: pointer;
            margin-bottom: 0px;
            color: #1d4288;
        }

    /* .tire-finder-main .step-content .input-picker {
    margin-bottom: 8px;
} */

    .tire-finder-main .step-content .input-picker label {
        /* font-size: 14px;
    font-family: Inter; */
        color: #1a1a1a;
        /* line-height: 20px;
        margin-bottom: 6px;
        font-weight: 500; */
    }

    .tire-finder-main .step-content .input-picker input {
        border: transparent;
        background-color: #efefef;
        color: #1d4288;
        height: 48px;
        width: 100%;
        border-radius: 0px;
        padding: 16px 16px;
    }

    .tire-finder-main .step-content .input-picker .input-icon-prefix {
        position: absolute;
        top: 16px;
        right: 16px;
        cursor: pointer;
    }

    .tire-finder-main .step-content .input-picker .input-dropdown {
        position: absolute;
        margin-top: 3px;
        width: 100%;
        background-color: white;
        border: 1px solid #efefef;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        max-height: 231px;
        overflow: auto;
        z-index: 999;
    }

        .tire-finder-main .step-content .input-picker .input-dropdown .list-items .item {
            padding: 8px 16px;
            cursor: pointer;
        }

            .tire-finder-main .step-content .input-picker .input-dropdown .list-items .item:hover {
                background-color: #1d4288;
                color: white;
            }

    .tire-finder-main .step-content .input-picker .input-icon-prefix img {
        display: block;
    }

    .tire-finder-main .step-content .year-list {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 8px;
    }

        .tire-finder-main .step-content .year-list .year-item {
            display: block;
            height: 48px;
            border: 1px solid #1d4288;
            padding: 12px 20px;
            /* margin-right: 8px; */
            margin-bottom: 0;
            background-color: white;
            color: #1d4288;
        }

            .tire-finder-main .step-content .year-list .year-item.selected {
                background-color: #1d4288;
                color: white;
                border: none;
            }

            .tire-finder-main .step-content .year-list .year-item:nth-child(4n) {
                margin-right: 0px;
            }

    .tire-finder-main .step-content .item-list .item {
        display: block;
        width: 100%;
        height: 48px;
        border: none;
        text-align: left;
        /* padding: 0px 20px 0px 30px; 
    font-size: 16px;
    line-height: 24px; */
        color: #1d4288;
        background-color: white;
        border: 1px solid #1d4288;
        cursor: pointer;
    }

        /* .tire-finder-main .step-content .item-list>div,
.tire-finder-main .step-content .item-list>button {
    margin-bottom: 8px;
} */

        .tire-finder-main .step-content .item-list .item:last-child {
            margin-bottom: 0px;
        }

        .tire-finder-main .step-content .item-list .item.selected {
            background: #1d4288;
            color: white;
        }

        .tire-finder-main .step-content .item-list .item.trim-item {
            height: auto;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }

    /* .tire-finder-main .step-content .item-list .trim-item h5 {
    font-family: Inter;
    font-size: 16px;
    line-height: 24px;
    margin: 0px;
} */

    /*.tire-finder-main .step-content .item-list .trim-item span {
    font-family: Inter;
    font-size: 14px;
    line-height: 20px;
}  */

    .tire-finder-main .step-content .item-list .trim-item button {
        /* font-family: BebasNeue;
    font-size: 18px;
    line-height: 24px; */
        color: #1D4288;
        border: transparent;
        background: transparent;
    }

    .tire-finder-main .step-content .item-list .trim-item.selected button {
        color: white;
    }

    .tire-finder-main .step-content .item-list .trim-item span b {
        margin: 0 8px;
    }

    .tire-finder-main .step-content .item-list .tire-item {
        background-color: transparent;
        border: none;
        border-bottom: 1px solid #939598;
        /* padding: 16px 0px; */
    }

        .tire-finder-main .step-content .item-list .tire-item:last-child {
            border-bottom: 0px;
        }

        .tire-finder-main .step-content .item-list .tire-item .tire-item-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }

            .tire-finder-main .step-content .item-list .tire-item .tire-item-row:last-child {
                margin-bottom: 0px;
            }

        .tire-finder-main .step-content .item-list .tire-item span {
            /* font-family: Inter;
    font-weight: 500;
    font-size: 18px;
    line-height: 28px; */
            color: #1d4288;
        }

        .tire-finder-main .step-content .item-list .tire-item span {
            /* font-family: Inter;
    font-weight: 500;
    font-size: 18px;
    line-height: 28px; */
            color: #1d4288;
        }

            .tire-finder-main .step-content .item-list .tire-item span b {
                /* font-weight: 700; */
                color: black;
                /* margin-right: 24px; */
                width: 45px;
                display: inline-block;
            }

            .tire-finder-main .step-content .item-list .tire-item span i {
                margin: 0 4px;
            }

        .tire-finder-main .step-content .item-list .tire-item button {
            color: white;
            background: #3EB049;
            border: transparent;
            font-size: 18px;
            line-height: 24px;
            height: 48px;
            text-transform: uppercase;
            width: 187px;
            font-family: BebasNeue;
        }

    /*.tire-finder-main .step-content .tire-size-advises {
    margin-top: 15px;
    margin-bottom: 26px;
} */

    .tire-finder-main .step-content .tire-size-advises h6 {
        color: #1a1a1a;
        /* font-family: BebasNeue;
    font-weight: 400;
    font-size: 24px;
    line-height: 28px;
    margin-bottom: 8px; */
    }

    .tire-finder-main .step-content .tire-size-advises p {
        color: #1a1a1a;
        /*font-family: Inter;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 8px;  */
    }

    .tire-finder-main .step-content .tire-size-advises b {
        color: #1d4288;
        /*font-family: Inter;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;  */
        text-decoration: underline;
        display: block;
        /* margin-bottom: 8px; */
    }

    /* .tire-finder-main .step-content .tire-size-advises b img {
    margin-right: 8px;
} */

    .tire-finder-main .step-content .noted-text {
        /* margin-top: 40px;
    font-family: Inter;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px; */
        color: #1a1a1a;
        text-align: center;
    }

        .tire-finder-main .step-content .noted-text a {
            color: #1d4288;
            /*  margin-left: 16px; */
            font-weight: 400;
        }

    /* .tire-finder-main.tire-finder-size .step-content .step-content-section {
        padding: 24px 0px 40px;
    } */

    .tire-finder-main.tire-finder-size .size-selector-section {
        max-width: 656px;
        /* width: 100%; */
    }

    .tire-finder-main.tire-finder-size .step-content .step-content-section .size-selector-section .tire-overview {
        /*margin-bottom: 16px; */
        text-align: center;
        position: relative;
    }

        .tire-finder-main.tire-finder-size .step-content .step-content-section .size-selector-section .tire-overview img {
            max-width: 648px;
            max-height: 247px;
            width: 100%;
        }

        .tire-finder-main.tire-finder-size .step-content .step-content-section .size-selector-section .tire-overview .tire-selection {
            position: absolute;
            width: 100%;
            display: block;
            font-size: 34px;
            line-height: 34px;
            top: 28%;
            font-weight: bold;
            color: white;
            rotate: 23deg;
        }

.tire-selection span {
    display: inline-block;
}


.tire-finder-main .list-makes-wrapper .list-text-makes {
    display: flex;
    flex-direction: column;
    /*padding: 25px 0px;  */
    gap: 8px;
}

.wrap-search-tire-make {
    width: 100%;
    flex-direction: column;
    transition: all 0.5s;
    margin-top: 10px;
}

    .wrap-search-tire-make .input-icon-prefix {
        width: 48px;
        text-align: center;
    }

        .wrap-search-tire-make .input-icon-prefix img {
            cursor: pointer;
        }

.search-tire-make-label {
    width: 100%;
    /* font-size: 14px;
    font-weight: 400; */
    float: left;
}

.wrap-search-input-make {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #efefef;
    /* margin: 4px 0; */
}

.search-tire-input {
    width: 80%;
    outline: none;
    border: none;
    background-color: transparent;
    font-size: 16px;
    font-weight: 400;
    box-sizing: border-box;
    color: #1d4288;
    padding: 12px;
}

.wrap-search-btn {
    width: 16px;
    margin-right: 16px;
    cursor: pointer;
}

.makes-text-item {
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    /* padding: 0 30px; */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #ffffff;
    color: #1d4288;
    border: 2px solid #1d4288;
    /* margin: 4px 0; */
    cursor: pointer;
}

    .makes-text-item.active {
        background-color: #1d4288;
        color: #ffffff;
    }

/* .tire-selection span:nth-child(5) {
  transform: translate(0px, 5px) rotate(0deg);
}

.tire-selection span:nth-child(4) {
  transform: translate(12px, 4px) rotate(-9deg);
}

.tire-selection span:nth-child(6) {
  transform: translate(-8px, 6px) rotate(7deg);
}

.tire-selection span:nth-child(3) {
  transform: translate(18px, 12px) rotate(-18deg);
}

.tire-selection span:nth-child(7) {
  transform: translate(-18px, 12px) rotate(18deg);
}

.tire-selection span:nth-child(2) {
  transform: translate(28px, 22px) rotate(-27deg);
}

.tire-selection span:nth-child(8) {
  transform: translate(-28px, 22px) rotate(27deg);
}

.tire-selection span:first-child {
  transform: translate(-33px, 22px) rotate(-33deg);
  top: 40px;
}

.tire-selection span:last-child {
  transform: rotate(33deg);
  top: 40px;
} */

.tire-finder-main.tire-finder-size .step-content .step-content-section .size-selector-section .tire-title {
    /* margin-bottom: 20px; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .tire-finder-main.tire-finder-size .step-content .step-content-section .size-selector-section .tire-title h3 {
        /* font-size: 32px;
        font-weight: 400;
        line-height: 32px;
        font-family: BebasNeue;  */
        text-transform: uppercase;
        color: #1d4288;
        margin: 0px;
    }

    .tire-finder-main.tire-finder-size .step-content .step-content-section .size-selector-section .tire-title span {
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        font-family: Inter;
        color: #1d4288;
        text-decoration: underline;
        cursor: pointer;
    }

.tire-finder-main.tire-finder-size .step-content .input-picker label {
    /* font-size: 18px;
    line-height: 28px; */
    color: #1d4288;
}

.tire-finder-main.tire-finder-size .step-footer {
    /* padding: 40px; */
    border-top: 1px solid #1d4288;
}

    .tire-finder-main.tire-finder-size .step-footer button {
        width: 100%;
        /* border: 1px solid #1d4288;
        height: 48px;
        margin-bottom: 8px;
        background-color: transparent;
        color: #1d4288;
        font-size: 18px;
        line-height: 24px;
        font-family: BebasNeue;
        font-weight: 400; */

    }

        .tire-finder-main.tire-finder-size .step-footer button:last-child {
            margin-bottom: 0px;
        }

        /* .tire-finder-main.tire-finder-size .step-footer button.active {
            background-color: #3EB049;
            color: white;
            border: none;
        } */

        .tire-finder-main.tire-finder-size .step-footer button.disabled {
            cursor: initial !important;
            opacity: 0.5 !important;
        }

.left-section .left-section-submit-btn {
    font-weight: 400;
    font-size: 18px;
    padding: 12px 0px;
    line-height: 24px;
    font-family: BebasNeue;
    text-align: center;
    color: white;
    background: #1d4288;
    width: 324px;
    border: none;
    margin-top: 25px;
}

#step-4 .side-bar {
    position: fixed;
    height: 100%;
    background-color: #EFEFEF;
    z-index: 9999;
    right: 0;
    top: 0;
    transition: all 0.5s ease;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    max-width: 508px;
    transform: translate(508px, 0);
    padding: 30px;
    box-sizing: border-box;
}

#step-4 .display-side-bar {
    transform: translate(0%, 0) !important;
}

#step-4 .side-bar .header-side-bar {
    font-family: BebasNeue;
    font-size: 32px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 0px;
    text-align: left;
    color: #1D4288    ;
}

#step-4 .side-bar .header-title {
    font-family: BebasNeue;
    font-size: 32px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 0px;
    text-align: left;
    color: #1D4288    ;
}

#step-4 .side-bar .text-price-desc {
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.10000000149011612px;
    text-align: left;
}

#step-4 .side-bar h3 {
    font-family: BebasNeue;
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 0px;
    text-align: left;
    color: #1D4288;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .tire-finder-main {
        background-size: var(--container-max-widths-sm) auto;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .tire-finder-main {
        background-size: var(--container-max-widths-md) auto;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .tire-finder-main {
        background-size: var(--container-max-widths-lg) auto;
    }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .tire-finder-main {
        background-size: var(--container-max-widths-xl) auto;
    }
}

/* XX-Large devices (larger desktops, 1400px and up) */

@media (min-width: var(--xxl)) {
}

@media (max-width: 1400px ) {
    .tire-finder-main .list-makes-wrapper .list-makes {
        grid-template-columns: repeat(4, auto);
    }
}

@media (max-width: 991px ) {
    .tire-finder-main .appointmet-billing .appointment-billing-content .appointment-billing-content-description span {
        position: absolute;
        top: -32px;
        right: 0;
        color: #1D4288;
        font-weight: 700;
        font-size: 14px;
    }

    .tire-finder-main .choose-tire-by {
        padding-bottom: 16px;
    }

    .tire-finder-main .step-content .item-list .tire-item span b {
        display: block;
        margin-bottom: 8px;
    }

    .tire-finder-main .step-content .item-list .tire-item span {
        margin-right: 16px;
    }

}

@media (max-width: 768px ) {
    .tire-finder-main .list-makes-wrapper .list-makes {
        grid-template-columns: repeat(3, auto);
    }

    .tire-finder-main .list-makes-wrapper .make-wrapper .make-img-wrapper {
        height: 80px;
        width: 80px;
        flex: none;
    }

    .tire-finder-main .choose-tire-by {
        font-size: 14px;
    }

    .tire-form .row {
        gap: 16px;
    }
}

@media (max-width: 576px ) {
    .tire-finder-main .step-content .year-list {
        grid-template-columns: auto auto auto;
    }

    .tire-finder-main .step-content .noted-text a {
        display: block;
    }

    .tire-finder-main .step-content .item-list .tire-item span b {
        display: block;
        margin-bottom: 8px;
    }

    .tire-finder-main .step-content .item-list .tire-item span {
        margin-right: 16px;
    }
}