.hidden {
    display: none;
}

/* KO does not clear this class; used by errVehicleImg when all vehicle image URLs fail */
.vehicle-image-failed {
    display: none !important;
}

button.close.custom-close {
    top: -11px;
    border-bottom: none;
    border-right: none;
}

ul.ui-autocomplete {
    height: 300px;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

.bg-brand-body {
    background-color: #fdfdfd
}

.bg-brand-body-secondary {
    background-color: #f5f5f5
}

.bg-brand-link {
    background-color: #00458b
}

.bg-brand-text {
    background-color: #2f2f2f
}

.bg-brand-muted {
    background-color: #a2a2a2
}

.bg-brand-gray {
    background-color: #2f2f2f
}

.bg-brand-light-gray {
    background-color: #d3d3d3
}

.bg-brand-lighter-gray {
    background-color: #bbb
}

.bg-brand-darken-white {
    background-color: #f0f0f0
}

.bg-brand-light-shadow {
    background-color: #f6f6f6
}

.bg-brand-white {
    background-color: #fff
}

.bg-brand-black {
    background-color: #000
}

.bg-brand-primary {
    background-color: #ff2800 !important
}

.text-brand-body {
    color: #fdfdfd
}

.text-brand-body-secondary {
    color: #fcfcfc
}

.text-brand-link {
    color: #00458b
}

.text-brand-text {
    color: #2f2f2f
}

.text-brand-muted {
    color: #a2a2a2
}

.text-brand-gray {
    color: #2f2f2f
}

.text-brand-light-gray {
    color: #575757
}

.text-brand-darken-white {
    color: #f0f0f0
}

.text-brand-light-shadow {
    color: #f6f6f6
}

.text-brand-white {
    color: #fff
}

.text-brand-black {
    color: #000
}


.border-color-brand-body {
    border-color: #fdfdfd !important
}

.border-color-brand-body-secondary {
    border-color: #fcfcfc !important
}

.border-color-brand-link {
    border-color: #00458b !important
}

.border-color-brand-text {
    border-color: #2f2f2f !important
}

.border-color-brand-muted {
    border-color: #a2a2a2 !important
}

.border-color-brand-gray {
    border-color: #2f2f2f !important
}

.border-color-brand-light-gray {
    border-color: #575757 !important
}

.border-color-brand-darken-white {
    border-color: #f0f0f0 !important
}

.border-color-brand-light-shadow {
    border-color: #f6f6f6 !important
}

.border-color-brand-white {
    border-color: #fff !important
}

.border-color-brand-black {
    border-color: #000 !important
}

.left-panel {
    /* background-color: #F5F5F5; */
    padding: 0;
    left: 0;
    position: fixed;
    /* height: calc(100vh + 180px); */
    height: calc(100vh + 180px);
}

.wheels-page .vehicle-card {
    border-radius: 0px !important;
}

.vehicle-card {
    width: 100%;
    min-height: 150px
}

    .vehicle-card:hover {
        cursor: pointer
    }

    .vehicle-card.preloader {
        width: 312px;
        height: 200px
    }

    .vehicle-card.border {
        border-radius: 8px
    }

#pills-compatible .tab-content .tab-pane a {
    text-decoration: none
}

    #pills-compatible .tab-content .tab-pane a:hover {
        text-decoration: underline;
        cursor: pointer
    }

.vehicle-image {
    width: 100%
}

.vehicle-image-default-size {
    height: 200px;
    width: 200px
}

.vehicle-image img {
    max-height: 200px;
    min-width: 135px;
    max-width: 382.5136px;
    width: 100%
}

.vehicle-model {
    font-size: 13px
}

.vehicle-model-default-size {
    height: 30px;
    width: 100%
}

.vehicle-card:hover .vehicle-model {
    color: #2f2f2f;
}

.vehicle-card .vehicle-model {
    color: #a2a2a2;
    text-decoration: none !important;
    font-size: 16px;
}

.bg-light-overlay {
    background-color: rgba(0,0,0,.61)
}

.bg-overlay {
    background-color: rgba(0,0,0,.72)
}

.blur-lg {
    filter: blur(5px)
}

.blur, .blur-lg {
    transition: filter .3s
}

.blur {
    filter: blur(2px)
}

.blur-sm {
    filter: blur(1px)
}

.blur-sm, .darken {
    transition: filter .3s
}

.darken {
    filter: brightness(80%)
}

.unfocused {
    filter: brightness(90%) blur(2px);
    transform: scale(.99);
    transition: filter .3s,transform .3s
}

.non-available-colorized {
    filter: grayscale(.96);
    opacity: .4
}

img.d-none ~ .preloader {
    display: flex !important;
    justify-content: center;
    border-radius: .3em;
    padding: .61rem 0;
    width: 100%
}

.transition-all {
    transition: all .6s ease;
    -o-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -webkit-transition: all .6s ease
}

.fade-enter-active, .fade-leave-active {
    transition: opacity .3s ease;
    -o-transition: opacity .3s ease;
    -moz-transition: opacity .3s ease;
    -webkit-transition: opacity .3s ease
}

.fade-enter-from, .fade-leave-to {
    opacity: 0
}

.slide-fade-to-left-enter-active {
    transition: all .5s ease
}

.slide-fade-to-left-leave-active {
    transition: all .3s ease
}

.slide-fade-to-left-enter-from, .slide-fade-to-left-leave-to {
    transform: translateX(20px);
    opacity: 0
}

.slide-fade-to-up-enter-active {
    transition: all .5s ease
}

.slide-fade-to-up-leave-active {
    transition: all .3s ease
}

.slide-fade-to-up-enter-from, .slide-fade-to-up-leave-to {
    transform: translatey(20px);
    opacity: 0
}

.slide-fade-to-down-enter-active {
    transition: all .5s ease
}

.slide-fade-to-down-leave-active {
    transition: all .3s ease
}

.slide-fade-to-down-enter-from, .slide-fade-to-down-leave-to {
    transform: translatey(-20px);
    opacity: 0
}

.bounce-enter-active {
    animation: bounce-in .3s
}

.bounce-leave-active {
    animation: bounce-in .3s reverse
}

.content-full-height {
    height: calc(100vh - 120px);
    overflow-y: auto;
}

    .content-full-height.hidden-header {
        height: calc(100vh - 40px) !important;
    }

.landing-page {
    background: url('https://assets.envywheels.com/img/website2/LandingPageBG.png') no-repeat top center;
    background-size: cover;
    height: calc(100vh - 80px);
}

    .landing-page .search-start {
        max-width: 350px;
        color: #fff;
    }

.cap-landing-page {
    background: url('https://assets.envywheels.com/img/website2/Cap-Search-BG.jpg') no-repeat top center;
    background-size: cover;
    height: calc(100vh - 80px);
}

.landing-page .search-start button, .search-start select {
    font-size: 0.9em;
    border-radius: 0;
    height: 40px;
}

    .landing-page .search-start button.dropdown-toggle {
        line-height: 2rem;
    }

.landing-page .search-start .icon-carmakes {
    max-width: 25px;
    max-height: 25px;
    margin-right: 10px;
}

.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 100%;
}

.btn-check:focus + .btn-secondary, .btn-secondary:focus,
.btn-check:active + .btn-light:focus, .btn-check:checked + .btn-light:focus, .btn-light.active:focus, .btn-light:active:focus, .show > .btn-light.dropdown-toggle:focus,
.btn-check:active + .btn-primary:focus, .btn-check:checked + .btn-primary:focus, .btn-primary.active:focus, .btn-primary:active:focus, .show > .btn-primary.dropdown-toggle:focus,
.btn-check:focus + .btn-primary, .btn-primary:focus {
    box-shadow: none !important;
}

.landing-page .search-start p {
    font-size: 0.8rem;
}

.fitment-card-container {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
    border: solid 1px #d7d7d7 !important;
}

    .fitment-card-container .fitment-sizes {
        grid-row: 1
    }

.fitment-package h4 span {
    font-size: .9rem;
    font-weight: 600;
}

.fitment-package.active, .fitment-package:hover {
    background-color: #ff2800 !important;
    color: #fff;
}

.package-tire-size-front {
    color: #df3b1c;
}

.fitment-package.active .package-tire-size-front .tiresize, .fitment-package:hover .package-tire-size-front .tiresize {
    background-color: #ff2800 !important;
    color: #000;
}


.fitment-card-container .fitment-sizes .fitment-package {
    grid-template-columns: auto auto auto;
    min-width: 82px;
    text-align: center !important;
}

.package-rim-size-front h4 {
    font-size: 1.5rem;
}

.fitment-sizes {
    cursor: pointer;
    width: 160px;
}

.fast-option-card {
    min-width: 200px;
    flex: 0 0 auto;
}

.fast-option-card .fitment-package .package-rim-size-front {
    word-break: break-word;
}

.fast-option-label {
    font-size: 1.25rem;
}

.fast-option-subtext {
    font-size: 0.75rem;
    font-weight: 300;
    margin-top: 0.25rem;
}

.fitment-card-container .fitment-sizes .fitment-package .package-rim-size-front-label {
    /*grid-column-start: 1/span 2;*/
    /*grid-row: 1*/
}

.fitment-card-container .fitment-sizes .fitment-package .package-rim-size-front {
    /*grid-column-start: 1/span 2;*/
    /*grid-row: 1*/
}

.fitment-card-container .fitment-sizes .fitment-package .package-tire-size-front {
    grid-column-start: 3/span 3;
    grid-row: 2;
    letter-spacing: 1px
}

.fitment-card-container .fitment-sizes .fitment-package .package-rim-size-rear-label {
    grid-column-start: 1/span 2;
    grid-row: 3
}

.fitment-card-container .fitment-sizes .fitment-package .package-rim-size-rear {
    grid-column-start: 1/span 2;
    grid-row: 4
}

.fitment-card-container .fitment-sizes .fitment-package .package-tire-size-rear {
    grid-column-start: 3/span 3;
    grid-row: 4;
    letter-spacing: 1px
}

.fitment-card-container .fitment-notes {
    grid-row: 2
}

.router-link {
    text-decoration: none
}

    .router-link:link, .router-link:visited {
        color: #000
    }

    .router-link:hover * {
        color: #fff !important
    }

.card-container {
    background-color: hsla(0,0%,92.2%,.8);
    border-radius: 8px;
    box-shadow: 6px 5px 5px 0 rgba(0,0,0,.1);
    display: inline-block;
    height: auto;
    width: auto
}

    .card-container:hover {
        box-shadow: 8px 10px 10px 0 rgba(0,0,0,.1)
    }

        .card-container:hover.disabled {
            filter: grayscale(1) opacity(.6803);
            cursor: no-drop
        }

.card-container, a {
    transition: .3s
}

img {
    max-width: 100%
}

.cards-disabled {
    filter: grayscale(1) opacity(.6803)
}

.thumbail-container {
    height: 308px;
    width: 300px;
    overflow: hidden
}

    .thumbail-container .thumbnail {
        max-height: 175px;
        max-width: 270px
    }

.legends-tab {
    padding: 7px;
    font-size: 13px;
    border: solid 1px #ededed
}

    .legends-tab legend {
        font-size: 0.8rem;
        margin: 0;
    }

    .legends-tab .nav-link {
        color: #000;
        padding-top: 0px;
        padding-bottom: 0px;
        font-weight: 500;
    }

    .legends-tab .nav-item {
        color: #000;
        border: none;
    }

    .legends-tab .nav-link.active {
        background-color: transparent !important;
        color: #000;
    }

    .legends-tab .nav-item:first-child {
        border-left: 0px !important;
    }

    .legends-tab .nav-item, .legends-tab > .nav-link {
        flex: 1;
        text-align: center;
    }

.search-by-vehicle-results h2 {
    font-size: 20px !important;
    font-weight: bold;
    letter-spacing: 1px;
    font-family: 'Montserrat', sans-serif;
}

.search-by-vehicle-results-filter label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
}

.search-by-vehicle-results-filter #clear-filters {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 14px;
    border: 1px solid #d0d0d0;
    background: transparent;
    color: #888;
    font-size: 10px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-decoration: none;
    height: 24px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.search-by-vehicle-results-filter #clear-filters:hover {
    border-color: #e53935;
    color: #e53935;
    background: rgba(229, 57, 53, 0.05);
    text-decoration: none;
}

/* Pill toggle buttons for binary filters (Winter, OE Lugs, Aggressive) */
.btn-pill-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 12px;
    border-radius: 14px;
    border: 1px solid #d0d0d0;
    background: #f5f5f5;
    color: #666;
    font-size: 10px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    height: 24px;
    line-height: 1;
    outline: none;
}

.btn-pill-toggle:hover {
    border-color: #999;
    background: #eaeaea;
    color: #333;
}

.btn-pill-toggle.active {
    background: #333;
    color: #fff;
    border-color: #333;
}

.btn-pill-toggle.active:hover {
    background: #444;
    border-color: #444;
}

.btn-pill-toggle img {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.btn-pill-toggle.active img {
    filter: brightness(0) invert(1);
}

.btn-pill-toggle svg {
    flex-shrink: 0;
    stroke: #e53935;
}

.btn-pill-toggle.active svg {
    stroke: #fff;
}

/* Loading overlay for aggressive refetch */
.wheels-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    backdrop-filter: blur(2px);
}

.wheels-loading-overlay .spinner-border {
    width: 2rem;
    height: 2rem;
    color: #333;
}

/* vertical dropdown
.search-by-vehicle-results-filter .dropdown-menu.show {
    width: 95svh;
    left: 0 !important;
    top: 56px !important;
    transform: translate(0, 0) !important;
}
.search-by-vehicle-results .dropdown {
    position: initial;
}*/
.search-by-vehicle-results .dropdown-menu ul li a i, .bootstrap-select > .dropdown-toggle .filter-option-inner-inner i {
    color: #fff;
    font-style: normal;
    font-size: 0.7rem;
    border: solid 1px;
    padding: 0 3px;
    border-radius: 5px;
}


.search-by-vehicle-results .dropdown-menu ul li a span.span-diameter,
.search-by-vehicle-results .dropdown-menu ul li a span.span-width {
    display: inline-block;
    width: 25px;
}

.search-by-vehicle-results .dropdown-menu ul li a i.i-oe, .bootstrap-select > .dropdown-toggle .filter-option-inner-inner i.i-oe {
    background: green;
}

.search-by-vehicle-results .dropdown-menu ul li a i.i-variance,
.bootstrap-select > .dropdown-toggle .filter-option-inner-inner i.i-variance {
    color: red;
    font-weight: 500;
}

.search-by-vehicle-results .dropdown-menu ul li a i.i-upsize,
.bootstrap-select > .dropdown-toggle .filter-option-inner-inner i.i-upsize {
    color: gray;
}

.search-by-vehicle-results .dropdown-menu ul li a i.i-optional,
.bootstrap-select > .dropdown-toggle .filter-option-inner-inner i.i-optional {
    background: gray;
}

.search-by-vehicle-results .dropdown-menu .dropdown-item.active i, .search-by-vehicle-results .dropdown-menu .dropdown-item.active i {
    color: #fff !important;
}

.search-by-vehicle-results > a {
    max-width: 260px;
}

.search-by-vehicle-results.d-flex span {
    font-size: 0.8rem;
}

.bootstrap-select > .dropdown-toggle {
    display: block;
    width: 100%;
    padding: 0.375rem 1rem 0.375rem 0.75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.3rem;
    border-radius: 0px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.bootstrap-select .dropdown-toggle:focus, .bootstrap-select > select.mobile-device:focus + .dropdown-toggle {
    outline: 0 !important;
}

.bootstrap-select > .dropdown-toggle.bs-placeholder, .bootstrap-select > .dropdown-toggle.bs-placeholder:active, .bootstrap-select > .dropdown-toggle.bs-placeholder:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder:hover {
    color: #212529;
}

.search-by-vehicle-results-filter .bootstrap-select > .dropdown-toggle {
    height: 24px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    border: 1px solid #d0d0d0;
    background: #f5f5f5;
    font-size: 10px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 0 22px 0 8px;
    color: #444;
    transition: border-color 0.15s ease, background 0.15s ease;
    line-height: 24px;
}

.search-by-vehicle-results-filter .bootstrap-select > .dropdown-toggle:hover {
    border-color: #999;
    background: #eaeaea;
}

.search-by-vehicle-results-filter .bootstrap-select > .dropdown-toggle .filter-option,
.search-by-vehicle-results-filter .bootstrap-select > .dropdown-toggle .filter-option span,
.search-by-vehicle-results-filter .bootstrap-select > .dropdown-toggle .filter-option i {
    font-size: 10px !important;
}

.search-by-vehicle-results-filter .bootstrap-select > .dropdown-toggle::after {
    border-top-color: #888;
}

/* Dropdown menu styling for filter bar */
.search-by-vehicle-results-filter .bootstrap-select .dropdown-menu {
    border-radius: 6px;
    border: 1px solid #ddd;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 4px 0;
    margin-top: 2px;
}

.search-by-vehicle-results-filter .bootstrap-select .dropdown-menu .dropdown-item {
    font-size: 11px;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    padding: 5px 12px;
    color: #444;
}

.search-by-vehicle-results-filter .bootstrap-select .dropdown-menu .dropdown-item:hover,
.search-by-vehicle-results-filter .bootstrap-select .dropdown-menu .dropdown-item:focus {
    background: #f0f0f0;
    color: #222;
}

.search-by-vehicle-results-filter .bootstrap-select .dropdown-menu .dropdown-item.active,
.search-by-vehicle-results-filter .bootstrap-select .dropdown-menu .dropdown-item.selected {
    background: #333;
    color: #fff;
}

/* Active filter dropdown state — when a value is selected */
.search-by-vehicle-results-filter .bootstrap-select.has-selection > .dropdown-toggle {
    background: #333;
    color: #fff;
    border-color: #333;
}

.search-by-vehicle-results-filter .bootstrap-select.has-selection > .dropdown-toggle::after {
    border-top-color: #fff;
}

.search-by-vehicle-results-filter .bootstrap-select.has-selection > .dropdown-toggle .filter-option,
.search-by-vehicle-results-filter .bootstrap-select.has-selection > .dropdown-toggle .filter-option span,
.search-by-vehicle-results-filter .bootstrap-select.has-selection > .dropdown-toggle .filter-option i {
    color: #fff !important;
}

/* Stable wheel card image container — prevents layout shift during pagination */
.vehicle-card.vehicle-wheel .wheel-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    min-height: 80px;
}

/* Stable kit card image — prevents layout shift */
.kit-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    min-height: 60px;
}

    .vehicle-card.vehicle-wheel:hover, .vehicle-card.vehicle-wheel.selected { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#eeeeee+0,c7c7c7+100 */
        background: #eeeeee; /* Old browsers */
        background: -moz-linear-gradient(top, #eeeeee 0%, #db7a7a 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, #eeeeee 0%,#db7a7a 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, #eeeeee 0%, #db7a7a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#db7a7a',GradientType=0 ); /* IE6-9 */
    }

    .vehicle-card.vehicle-wheel:hover .s-wheel-size, .vehicle-card.vehicle-wheel.selected .s-wheel-size {
        background: #fff;
    }

.s-wheel-title {
    color: #000;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: left;
    margin-bottom: 0;
}

    .s-wheel-title span {
        font-size: 10px;
    }
.wheels .s-wheel-title,
.specs-label,
.specs-text,
.s-kits-title {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.s-wheel-desc {
    text-align: left;
    text-transform: uppercase;
    font-size: 0.75rem;
    margin-bottom: 0;
    height: 42px;
}
.wheels .s-wheel-desc,
.kits .s-wheel-desc {
    height: fit-content;
    font-size: 10px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%;
}
.kits .s-wheel-title,
.kits .s-kits-desc {
    width: 100%;
    height: 32px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    font-size: 16px;
    font-weight: bold;
}
.s-wheel-filter-select {
    border-radius: 0px;
    background-color: #f5f5f5;
    font-size: 14px;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.5px;
}

.s-wheel-size {
    padding: 7px;
    display: block;
    background: #d2d2d2;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
}

.s-wheel-size-dd {
    padding: 4px;
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    text-align: center;
    text-transform: lowercase;
}

    .s-wheel-size-dd:disabled {
        background-image: none;
    }

.wheels-page {
    .s-wheel-title

{
    font-size: 1.43rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    text-align: left;
    margin-bottom: 0;
    text-transform: uppercase;
    width: 78%;
}

.s-wheel-title span {
    font-size: 0.7rem;
}

.s-wheel-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    text-align: left;
    text-transform: uppercase;
    font-size: 0.75rem;
    margin-bottom: 0;
    height: auto !important;
}

.s-wheel-filter-select {
    font-size: 1rem;
}

.s-wheel-size {
    font-size: 1.142rem;
}

.s-wheel-size-dd {
    font-size: 1.142rem;
}

.tab-icon-wrapper {
    padding-right: 0;
    flex: 1;
}

.s-wheel-size-dd {
    padding: 7px !important;
}

.vehicle-card {
    & img

{
    background: none;
}

}
}

.slider-container {
    background: #F5F5F5;
    position: relative;
    margin-top: -40px;
}

    .slider-container .vehicle-icons {
        height: 35px;
        width: 35px;
        display: block;
        padding: 5px;
        border: solid 1px #595959;
        border-radius: 5px;
        position: absolute;
        top: 50px;
        cursor: pointer;
        z-index: 2;
    }

        .slider-container .vehicle-icons.icon-favorite {
            right: 10px;
        }

        .slider-container .vehicle-icons.icon-magnify {
            right: 10px;
        }

        .slider-container .vehicle-icons.icon-share {
            right: 50px;
        }

        .slider-container .vehicle-icons.icon-garage {
            right: 90px;
        }


        .slider-container .vehicle-icons img {
            width: 25px
        }

.back-button {
    position: absolute;
    top: 48px;
    left: 1rem;
    z-index: 2;
}

.slider-container .car-name {
    --car-name-inset: 50px;
    position: absolute;
    top: 52px;
    left: var(--car-name-inset);
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 1;
}

.slider-container .car-name .car-name-tpms-row {
    display: grid;
    grid-template-columns: var(--car-name-inset) 1fr;
    align-items: center;
    margin-left: calc(-1 * var(--car-name-inset));
    width: calc(100% + var(--car-name-inset));
}

.slider-container .car-name .car-name-tpms-icon-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider-container .part-number-container {
    width: 370px;
    position: absolute;
    bottom: 10px;
    z-index: 1;
    margin-left: -5px;
}

.vehicle-tab-content {
    /* margin-left: 1rem!important; */
    z-index: 1;
    position: relative;
}

    .vehicle-tab-content .tab-content {
        background-color: #fff;
        margin-left: 5px;
        margin-right: 5px;
        height: calc(50vh - 200px);
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
    }

        .vehicle-tab-content .tab-content.hidden-header {
            height: calc(50vh - 120px);
            padding-top: 10px;
        }

    .vehicle-tab-content .wheel-specs {
        font-size: 0.75rem;
        position: relative;
    }

.hidden-header .vehicle-tab-content .wheel-specs {
    font-size: 0.8rem;
}

.vehicle-tab-content .wheel-specs .mt-1 {
    margin-top: 0.1rem !important;
}

/* Inventory tab: match wheel details grid font size; allow full province names (no ellipsis) */
.vehicle-tab-content #pills-inventory,
.vehicle-tab-content #pills-inventory-mobile {
    font-size: 0.75rem;
}

.hidden-header .vehicle-tab-content #pills-inventory,
.hidden-header .vehicle-tab-content #pills-inventory-mobile {
    font-size: 0.8rem;
}

.vehicle-tab-content #pills-inventory .specs-label,
.vehicle-tab-content #pills-inventory .specs-text,
.vehicle-tab-content #pills-inventory-mobile .specs-label,
.vehicle-tab-content #pills-inventory-mobile .specs-text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.vehicle-tab-content .nav-link {
    color: #000;
    background-color: #d2d2d2;
    border-radius: 0px;
    font-weight: 500;
}

.vehicle-tab-content .nav-item {
    padding: 0px 5px;
}

.vehicle-tab-content .nav-link.active {
    background-color: #ffffff !important;
    color: #000;
    box-shadow: 0 -0.1rem 0.3rem rgba(0,0,0,.15) !important;
}

#accessoriesContainer .accessories-tabs-desktop .nav-link {
    color: #000;
    background-color: #d2d2d2;
    border-radius: 0;
    font-weight: 500;
}

#accessoriesContainer .accessories-tabs-desktop .nav-item {
    padding: 0 5px;
}

#accessoriesContainer .accessories-tabs-desktop .nav-link.active {
    background-color: #ffffff !important;
    color: #000;
    box-shadow: 0 -0.1rem 0.3rem rgba(0,0,0,.15) !important;
}

@media (min-width: 768px) {
    #accessoriesContainer .accessories-tab-content-fixed {
        height: 220px;
        overflow-y: auto;
        overflow-x: hidden;
    }
}

/* .slide-thumb-container{ background-color: #ccc;} */
.slide-thumb-container .slick-slide, .slide-wheel-image .slick-slide {
    cursor: pointer;
}

.slide-thumb-container .slick-list {
    height: 275px !important;
}

.slide-wheel-image {
    max-width: 340px;
    padding-bottom: 10px;
}

    .slide-wheel-image .slick-list {
        height: fit-content !important;
    }

.hidden-header .slide-wheel-image .slick-list {
    height: 308px !important;
}

.slider-for {
    height: fit-content !important;
    overflow: hidden;
}

.slide-wheel-image .slick-list {
    max-height: fit-content !important;
    overflow: hidden !important;
}

.hidden-header .vehicle-tab-content .slide-wheel-image .slick-track > div {
    max-width: 308px !important;
}

.vehicle-tab-content h3 {
    font-size: 28px;
    margin-bottom: 0;
    font-weight: 600;
}

    .vehicle-tab-content h3 span {
        font-size: 1.2rem;
    }

.hidden-header .vehicle-tab-content h3 {
    font-size: 30px;
    margin-bottom: 0;
    font-weight: 600;
}

.vehicle-tab-content p {
    font-size: 15px;
    margin-bottom: 0;
}

.hidden-header .vehicle-tab-content p {
    font-size: 18px;
    margin-bottom: 0;
}

.vehicle-tab-content h3.s-kits-title {
    color: #000;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: left;
    margin-bottom: 0;
}

.vehicle-tab-content p.s-kits-desc {
    text-align: left;
    text-transform: uppercase;
    font-size: 0.65rem;
    margin-bottom: 0;
    font-weight: 500;
    color: #dc3545;
}

.vehicle-tab-content .kits > div {
    border: solid 1px #dfdfdf;
    margin-bottom: 0.1rem !important;
}

.specs-part-number-label {
    font-size: 1.2rem;
    font-weight: 500;
}

.specs-label {
    font-weight: 500;
}

.specs-text {
    font-weight: 600;
}

.vehicle-tab-content .kits .specs-label {
    font-size: 0.55rem;
}

.vehicle-tab-content .kits .specs-text {
    font-size: 0.6rem;
}

.no-fitments {
    max-width: 700px;
    text-align: center;
    margin: auto;
    /* border: solid 1px #e5e5e5; */
    padding: 20px;
    background-color: #fff;
}

    .no-fitments img {
        max-width: 350px;
        display: block;
        margin: auto
    }

    .no-fitments p {
        font-size: 1.1rem;
        /* font-style: italic; */
        font-weight: 500;
    }

    .no-fitments h3 {
        font-size: 0.9rem;
        font-weight: 700;
    }

    .no-fitments ul {
        list-style: none;
        padding-left: 0;
    }

        .no-fitments ul li {
            font-size: 0.8rem;
        }

    .no-fitments div {
        text-align: justify
    }

.bg-dark-grey {
    background-color: #5d5d5d;
}

.bg-light-grey {
    background-color: #ebebeb;
}

.bg-black {
    background-color: #000;
}

.bg-orange {
    background-color: #ff2800;
}

h1, h2, h3, h4, h5 {
    font-family: 'Montserrat', sans-serif;
}

#mainNav select {
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
    border-radius: 0px;
    background-color: #f5f5f5;
}

.calendar-years-grid-expanded .calendar-years-item:hover,
.calendar-years-grid-collapsed .calendar-years-item:hover,
.calendar-years-grid-expanded .calendar-years-item.selected,
.calendar-years-grid-collapsed .calendar-years-item.selected {
    background-color: #ff2800 !important;
    color: #fff;
}

#popup-garage .modal-dialog {
    width: calc(100vw - 60px);
    max-width: 100%;
}

#popup-garage .slider-container .vehicle-icons {
    top: -50px;
}

#popup-garage .modal-body {
    overflow: auto;
}

#popup-garage .modal-dialog .modal-content {
    height: calc(100vh - 60px);
}

#popup-garage .modal-dialog .modal-header,
#popup-image .modal-dialog .modal-header,
#dynamicPopup .modal-dialog .modal-header {
    padding: 0;
    background: #ffffff;
}

.modal-wrapper .modal-dialog .modal-header {
    justify-content: initial;
    align-items: baseline;
    flex-direction: column;
}

    .modal-wrapper .modal-dialog .modal-header h3 {
        padding: 0;
        margin-bottom: -10px;
        font-size: 1.6rem;
        padding: 10px 15px !important;
        text-transform: uppercase;
        color: black;
        line-height: 1;
    }

    .modal-wrapper .modal-dialog .modal-header p {
        padding: 0px 15px !important;
    }

#popup-garage .modal-dialog .vehicle-model span {
    font-size: 0.8rem;
    display: block;
    height: 40px;
    color: #000;
}

#popup-image .slick-next:before, .slick-prev:before {
    font-size: 30px;
    color: #000;
}

#popup-image .modal-dialog .slick-track .slick-slide img,
#dynamicPopup .modal-dialog img {
    width: 100% !important
}

.right-align-select .dropdown-menu[data-bs-popper] {
    right: 0;
    left: auto;
}

.make-card {
    text-decoration: none
}

.make-option {
    min-height: 75px;
}

.make-logo {
    max-height: 75px;
    max-width: 50px;
}

.make-name {
    flex-grow: 1;
    min-height: 20px;
    margin-left: 10px;
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.make-card:hover > .make-name {
    font-weight: 600;
    transition: .1s;
}

@media(max-width: 600px) {
    .thumbail-container {
        height: auto;
        width: 100%;
        max-width: 300px
    }

        .thumbail-container .thumbnail {
            max-width: 200px;
            max-height: 100px
        }
}

.brand-image {
    max-height: 48px;
    max-width: 150px
}

.section-container {
    width: 50%;
    max-height: 100vh
}

    .section-container.fitments-section-container {
        overflow: hidden;
        overflow-y: auto
    }

        .section-container.fitments-section-container .fitments-container {
            display: grid;
            grid-template-columns: repeat(auto-fill,minmax(210px,1fr))
        }

.vehicle-image-container {
    top: 48%;
    max-height: 100vh;
    overflow-y: hidden;
    transition: right .3s
}

    .vehicle-image-container .vehicle-image {
        max-width: 2400px;
        z-index: 1
    }

.vehicle-info {
    z-index: 1
}

.vehicle-trim:hover {
    filter: brightness(.7);
    transition: filter .3s
}

.fitments-font-size {
    font-size: .9rem
}

.vehicle-option-label {
    font-size: .7rem;
    background-color: #ff2800;
    border: 0px !important;
}

#region-wrapper .bootstrap-select {
    width: 200px
}

#region-wrapper .dropdown-menu {
    font-size: 0.8rem;
}

#region-wrapper .bootstrap-select > .dropdown-toggle, #region-wrapper div > p > a {
    font-size: 12px;
}

@media(min-width:1920px) {
    .years-calendar-container {
        position: fixed;
        top: 120px;
        left: calc(50% - 960px);
        max-width: 480px;
    }
}

@media(max-width: 1440px) {

    .years-calendar-container {
        position: fixed;
        top: 120px;
        left: 0;
    }

    .section-container.fitments-section-container .fitments-container {
        grid-template-columns: 1fr 1fr
    }

    .hidden-header .vehicle-tab-content .tab-content {
        height: calc(50vh - 120px);
        padding-top: 10px;
    }

    .vehicle-tab-content .nav-link {
        font-size: 0.9rem;
    }

    .specs-part-number-label {
        font-size: 1rem;
    }

    .hidden-header .vehicle-tab-content h3 {
        font-size: 1.5rem;
        margin-bottom: 0;
        font-weight: 600;
    }

    .hidden-header .vehicle-tab-content p {
        font-size: 1rem;
        margin-bottom: 0;
    }

    .vehicle-tab-content h3.s-kits-title {
        font-size: 18px;
    }

    .vehicle-tab-content p.s-kits-desc {
        font-size: 0.65rem
    }

    .s-wheel-title {
        font-size: 1rem;
    }

    .s-wheel-desc {
        font-size: 0.65rem;
    }

    .s-wheel-size-dd {
        padding: 3px;
        margin-bottom: 5px;
        font-size: 0.9rem;
    }

    .tab-icon {
        height: 19px !important;
        width: 19px !important;
    }

    .wheels-page {
        .tab-icon

{
    height: 22px !important;
    width: 22px !important;
}

.oe-icon {
    width: 28px !important;
}

}

.oe-icon {
    background-position: -3px -2px !important;
    width: 28px !important;
    background-size: cover;
    zoom: 80%;
}

.hub-icon {
    background-position: -32px 0 !important;
}

.multi-icon {
    background-position: -52px 0 !important;
}

.winter-icon {
    background-position: -72px 0 !important;
}

}

@media(max-width:1024px) {
    .hidden-header .vehicle-tab-content .tab-content {
        height: calc(50vh - 120px);
        padding-top: 10px;
    }

    .vehicle-tab-content .nav-link {
        font-size: 0.8rem;
    }

    .vehicle-tab-content h3 {
        font-size: 1.3rem;
        margin-bottom: 0;
        font-weight: 600;
    }

    .hidden-header .vehicle-tab-content h3 {
        font-size: 1.3rem;
    }

    .vehicle-tab-content .wheel-specs {
        font-size: 0.6rem;
    }

    .hidden-header .vehicle-tab-content .wheel-specs {
        font-size: 0.7rem;
    }

    .vehicle-tab-content p {
        font-size: 0.9rem !important;
    }

    .vehicle-tab-content h3.s-kits-title {
        font-size: 1rem;
    }

    .vehicle-tab-content p.s-kits-desc {
        font-size: 0.6rem !important;
    }

    .vehicle-tab-content .kits .specs-label {
        font-size: 0.45rem;
    }

    .vehicle-tab-content .kits .specs-text {
        font-size: 0.55rem;
    }

    .vehicle-tab-content #pills-inventory,
    .vehicle-tab-content #pills-inventory-mobile {
        font-size: 0.6rem;
    }

    .hidden-header .vehicle-tab-content #pills-inventory,
    .hidden-header .vehicle-tab-content #pills-inventory-mobile {
        font-size: 0.7rem;
    }

    .slider-container {
        /*margin-top: -75px;*/
    }

    .s-wheel-filter-select {
        font-size: 0.7rem;
        letter-spacing: 0.1px;
    }

    .search-by-vehicle-results-filter .col-md-3 {
        padding: 0 7px 0 0;
    }

    .search-by-vehicle-results-filter label {
        font-size: 0.7rem;
        font-weight: 500;
    }

    .legends-tab .nav-link {
        font-size: 0.6rem;
    }

    .tab-icon {
        height: 17px !important;
        width: 17px !important;
    }

    .wheels-page {
        .tab-icon

{
    height: 24px !important;
    width: 24px !important;
}

.oe-icon {
    width: 30px !important;
}

}

.oe-icon {
    background-position: -3px 1px !important;
    width: 25px !important;
}

.winter-icon {
    background-position: -65px 0 !important;
}

.hub-icon {
    background-position: -29px 0 !important;
}

.multi-icon {
    background-position: -46px 0 !important;
}

.s-wheel-title {
    font-size: 1rem;
}

.s-wheel-desc {
    font-size: 0.7rem;
}

.s-wheel-size-dd {
    padding: 0px;
    margin-bottom: 5px;
    font-size: 0.8rem;
}

.specs-part-number-label {
    font-size: 0.9rem;
}

}

#saveYourBuildBtn1 {
    position: absolute;
    right: 50%;
    bottom: 23px;
    height: 20px;
    font-size: 14px;
    width: fit-content;
    white-space: nowrap;
    padding: 14px 22px;
    z-index: 2;
    transform: translateX(50%);
}
@media(max-width: 1210px) {
    .slider-container .car-name {
        --car-name-inset: 12px;
        top: auto;
        left: var(--car-name-inset);
        bottom: 18px;
    }
        .slider-container .car-name:has(+ #saveYourBuildBtn1.d-md-flex) {
            flex-direction: column;
            width: calc(100% - 210px);
        }
    #saveYourBuildBtn1 {
        right: 14px;
        transform: none;
    }
}
@media(max-width: 991px) {
    .configurator-icons .nav-link .tab-icon {
        display: block;
        margin: auto;
    }
    .slider-container .car-name:has(+ #saveYourBuildBtn1:not(.d-md-flex)) {
        flex-direction: column;
        width: calc(100% - 25px);
    }
        .slider-container .car-name > span {
            margin-bottom: 5px !important;
        }

    #configurator-slide-for {
        width: 200px;
        margin: auto !important;
    }

        #configurator-slide-for > .slider-for,
        #configurator-slide-for > .slider-for > .slick-list {
            height: auto !important;
        }

    #configurator-slide-nav .slick-list,
    #configurator-slide-nav .slick-slider .slick-list .slick-track,
    #configurator-slide-nav-mobile .slick-list,
    #configurator-slide-nav-mobile .slick-slider .slick-list .slick-track,
    #configurator-slide-nav-modal .slick-list,
    #configurator-slide-nav-modal .slick-slider .slick-list .slick-track {
        height: auto !important;
    }

    #configurator-slide-nav .slick-track,
    #configurator-slide-nav-mobile .slick-track,
    #configurator-slide-nav-modal .slick-track {
        display: flex;
        justify-content: center;
        height: auto !important;
        margin-bottom: 15px;
    }

        #configurator-slide-nav .slick-track > div,
        #configurator-slide-nav-mobile .slick-track > div,
        #configurator-slide-nav-modal .slick-track > div {
            width: 200px !important;
        }

    #configurator-slide-nav .slick-slide.slick-active,
    #configurator-slide-nav-mobile .slick-slide.slick-active,
    #configurator-slide-nav-modal .slick-slide.slick-active {
        width: 60px !important;
    }

    .brand-image {
        max-height: 24px;
        max-width: 80px
    }

    .section-container {
        width: 100%
    }

        .section-container.vehicle-thumbnail-container {
            max-height: 40vh
        }

        .section-container.fitments-section-container {
            max-height: 61.8vh
        }

            .section-container.fitments-section-container .fitments-container {
                grid-template-columns: 1fr 1fr 1fr
            }

    .vehicle-image-container {
        top: 52%;
        left: 0
    }

        .vehicle-image-container .vehicle-image {
            width: 100vw
        }

    .fitments-font-size {
        font-size: .7rem
    }

   
}

@media (max-width: 768px) {
    .modal-wrapper .modal-dialog .modal-header h3 {
        font-size: 1.2em !important;
        margin-top: 7px !important;
        margin-bottom: -6px !important;
        padding-bottom: 0px !important;
    }

    .modal-body .row > div > p {
        font-size: 0.9em;
    }

    .left-panel {
        height: auto !important;
        margin-bottom: 15px;
        position: relative !important;
    }

    .hidden-header .vehicle-tab-content .wheel-specs {
        margin-bottom: 3rem !important;
    }

    #configurator-slide-for {
        height: auto !important;
    }

    .slide-thumb-container >
    .slider-nav >
    .slick-list >
    .slick-track >
    .slick-slide {
        width: 100px !important;
    }

    .slider-nav > .slick-list > .slick-track {
        width: 320px !important;
    }

    .slide-thumb-container .slick-list {
        height: 150px !important;
    }

    .slider-container {
        margin-top: -40px !important;
    }

    .hidden-header .vehicle-tab-content .tab-content {
        min-height: 460px !important;
    }

    .vehicle-tab-content .tab-content {
        min-height: 440px;
    }

    .slick-slide img {
        max-width: 90%;
        margin: auto;
        margin-top: 10px;
    }

    .slide-wheel-image {
        margin: auto !important;
    }
    .slider-container .car-name {
        width: calc(100% - 25px) !important;
    }
}

@media(max-width: 767px) {
    #configurator-slide-for {
        width: 270px;
        margin: auto !important;
    }


    #configurator-slide-nav .slick-slide.slick-active,
    #configurator-slide-nav-mobile .slick-slide.slick-active {
        width: 80px !important;
    }
}

@media(max-width: 720px) {
    .vehicle-trim {
        font-size: 80%
    }

    .section-container.fitments-section-container .fitments-container {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width: 596px) {
    .vehicle-trim {
        background-color: hsla(0,0%,100%,.3)
    }

        .vehicle-trim > span {
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            line-clamp: 1;
            box-orient: vertial;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            max-width: 100%
        }
}

@media(max-width: 476px) {
    .section-container.fitments-section-container .fitments-container {
        grid-template-columns: 1fr
    }
}

.breadcrumbs-container {
    background: #000;
    color: #fff;
    position: relative;
    z-index: 1;
}


#mainNav ul > li > ul {
    max-height: 75vh;
    overflow-y: scroll;
}

@media print {

    @page {
        size: A4 portrait;
        margin: 0;
    }

    body, html {
        margin: 0 !important;
        padding: 0 !important;
    }

    h2 {
        font-size: 14px !important;
    }

    h3 {
        font-size: 20px !important;
    }

    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    #printContainer {
        display: block !important;
    }
        #printContainer img {
            max-width: 100% !important; 
            height: auto !important;
        }
        #printContainer .footer-image .tab-icon {
            height: 15px;
            width: 16px;
        }

        #printContainer .footer-image .hub-icon {
            background-position: -23px 0;
        }

        #printContainer .footer-image .oe-icon {
            background-position: 5px 0px;
            width: 28px;
            background-size: cover;
            zoom: 76%;
            margin-top: 0px;
        }

        #printContainer .footer-image .multi-icon {
            background-position: -39px 0;
        }

        #printContainer .footer-image .winter-icon {
            background-position: -56px 0;
        }
}






@media (max-width: 768px) {
    .container {
        height: auto; /* Dynamic height based on content on smaller screens */
    }

    #carDescriptionResult {
        position: static !important;
        margin: 0 !important;
    }
    #screenResult {
        position: relative;
    }

    #resultBtns {
        position: fixed;
        bottom: 0;
        margin-bottom: 1rem;
    }

    .slide-thumb-container .slick-list{
        display: flex !important;
        justify-content: center !important;
        height: fit-content !important;
    }
    .slick-track{
        height: fit-content !important;
    }
}

#printContainer {
    margin: 0;
    padding: 0;
    width: 210mm !important; /* A4 Width */
    height: 297mm !important; /* A4 Height */
    z-index: 3;
    left: 50%;
    transform: translate(-50%, 0);
}

    #printContainer .wheel-print-detail .detail {
        background-color: #ebebeb;
        width: 50%;
    }

    #printContainer .wheel-print-detail .detail-header {
        background-color: #5d5d5d;
        width: 50%;
    }

#userInputModal input:disabled {
    background-color: #f3f3f3 !important;
}

.share-link-container {
    cursor: pointer;
}

    .share-link-container .share-link {
        display: inline-block;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
    }

.disclaimer-checkbox input[type="checkbox"] {
    display: none;
}

/* Custom checkbox container */
.disclaimer-checkbox {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    border-radius: 3px;
    position: relative;
    cursor: pointer;
}

    /* Checkbox unselected state */
    .disclaimer-checkbox span {
        display: block;
        width: 100%;
        height: 100%;
        background-color: white;
        transition: background-color 0.3s;
    }

    /* Checkbox selected state */
    .disclaimer-checkbox input[type="checkbox"]:checked + span {
        background-color: green; /* Green color when checked */
    }

.page-item.active {
    border: 1px solid black;
}

    .page-item.active span {
        color: black !important;
    }

.page-item.disabled a {
    color: #9FA6B2 !important;
}

.page-item .page-link:focus {
    outline: none !important;
    box-shadow: none;
}

.pagination {
    font-size: 14px !important;
}
.tippy-box[data-theme~='light'] {
    background-color: #b5b5b7 !important;
    color: black !important;
    font-size: 12px !important;
}
    .tippy-box[data-theme~='light'][data-placement^='top'] > .tippy-arrow::before {
        border-top-color: #b5b5b7 !important;
    }

.kit-img-container:hover .kit-img,
.wheel-img-container:hover .wheel-img{
    opacity: 0.5 !important;
}
.kit-img-container:hover .kit-magnify-icon,
.wheel-img-container:hover .wheel-magnify-icon {
    display: flex !important;
}

.carousel-indicators [data-bs-target] {
    width: 10px; /* Adjust size */
    height: 10px; /* Adjust size */
    border-radius: 50%; /* Make it circular */
    background-color: #9fa5aa; /* Default color */
    border: 1px solid transparent; /* Optional border */
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.carousel-indicators [data-bs-target].active {
    background-color: #a2a2a2; /* Active dot color  9fa5aa */
    transform: scale(1.1); /* Enlarge active dot */
}
.accordion-button {
    color: black !important;
    font-weight: bold;
    background-color: white !important;
    transition: none;
}
    .accordion-button:focus {
        color: black !important;
        border: 1px solid #d3d3d3 !important;
        outline: 0;
        box-shadow: none;
        background-color: white !important;
    }
    .accordion-button.collapsed {
        border: none;
        color: black !important;
        background-color: #d3d3d3 !important;
        box-shadow: none;
    }


.accordion-button {
    position: relative;
}

    .accordion-button::after {
        content: '';
        display: inline-block;
        width: 1em;
        height: 1em;
        background: no-repeat center/contain;
        background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"%3E%3Cpath d="M246.6 470.6c-12.5 12.5-32.8 12.5-45.3 0l-160-160c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L224 402.7 361.4 265.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-160 160zm160-352l-160 160c-12.5 12.5-32.8 12.5-45.3 0l-160-160c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L224 210.7 361.4 73.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3z"%3E%3C/path%3E%3C/svg%3E');
        transform: rotate(0deg);
        transition: transform 0.3s ease;
    }

    .accordion-button:not(.collapsed)::after {
        content: '';
        display: inline-block;
        width: 1em;
        height: 1em;
        background: no-repeat center/contain;
        background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"%3E%3Cpath d="M246.6 470.6c-12.5 12.5-32.8 12.5-45.3 0l-160-160c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L224 402.7 361.4 265.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-160 160zm160-352l-160 160c-12.5 12.5-32.8 12.5-45.3 0l-160-160c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L224 210.7 361.4 73.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3z"%3E%3C/path%3E%3C/svg%3E');
        transition: transform 0.3s ease;
        transform: rotate(180deg);
    }
.printBuildBtn {
    background-color: #959595;
}

@media (max-width: 511px) {
    #screenResult div {
        font-size: 7px !important;
    }
    #screenResult h2 {
        font-size: 12px !important;
    }
    #screenResult h3 {
        font-size: 14px !important;
    }
    #screenResult h6 {
        font-size: 8px !important;
    }
    #screenResult p,
    #screenResult table th,
    #screenResult table td {
        font-size: 7px !important;
    }

    #screenResult .user-info p {
        font-size: 9px !important;
    }
    #screenResult a {
        font-size: 14px !important;
    }
    #screenResult .bootstrap-select > .dropdown-toggle {
        height: 20px !important;
        font-size: 8px;
    }
}

#kit-configurator .vehicle-tab-content .tab-content {
    height: calc(50vh - 60px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}
.lifted-truck-badge {
    width: fit-content;
    background: white;
}

.lifted-truck-badge.vertical {
    width: 17px;
    top: 35px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.lifted-truck-badge p {
    white-space: nowrap;
    font-size: 9px !important;
    background: red;
    font-family: "Open Sans"
}

.lifted-truck-badge p.vertical-text {
    writing-mode: vertical-rl; /* vertical from bottom to top */
    transform: rotate(180deg); /* if you want it going up instead of down */
}

/* Wheel part number copy control: not clipped by .specs-text overflow / mobile #screenResult font scaling */
.part-number-copy-btn {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 0 !important;
    vertical-align: middle;
    border: none !important;
    box-shadow: none !important;
}

.part-number-copy-btn:focus,
.part-number-copy-btn:focus-visible,
.part-number-copy-btn:active {
    border: none !important;
    box-shadow: none !important;
    outline: none;
}

.part-number-copy-btn svg.bi-copy {
    display: block;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px;
    min-height: 16px;
}

.part-number-copy-btn--wheel-detail-pad {
    padding-left: 5px !important;
    padding-right: 5px !important;
}