.btn-primary {
    color: #fff;
}

.vdp__veh__info__mod .veh__info__item:nth-child(even)[VehicleInfoWidgetCssScope] {
    color: #000;
}

/* Finance Section */
.cw-finance-section {
    padding: 2% 0;
    background: url("{{ asset 'images/rs_gradbg2.jpg' }}") center center /cover;
}

.cw-finance-section h6 {
    color: #FFFFFF;
    font-size: 2rem;
    font-weight: 400;
    text-transform: uppercase;
}

.inventorydetails .vdp-module-canvas-razor-wrapper .btn-outline-secondary {
    border-color: var(--color-theme-primary);
    color: #fff;
}

.inventorydetails .vdp-module-canvas-razor-wrapper .btn-outline-secondary:hover,
.inventorydetails .vdp-module-canvas-razor-wrapper .btn-outline-secondary:before {
    background-color: var(--color-theme-primary);
    border-color: #000;
}

.inventorydetails .vdp-module-canvas-razor-wrapper .btn-check:checked+.btn-outline-secondary {
    color: var(--color-theme-text-btn);
    background-color: var(--color-theme-primary);
    border-color: var(--color-theme-primary);
}




/* If you need the hero to go under the header a certain amount, adjust the variable. */
:root {
    /* variable-for how much the hero overlaps with the header. */
    /* template 17 value */
    /* --cw-header-hero-overlap: 167px; */
    /* if no overlap desired, use zero */
    --cw-header-hero-overlap: 0px;
}

/* and use the .page-home header code here if the header isn't already fixed or positioned to be on top of the hero */
/* .page-home .header .header-container {
    position: relative;
    z-index: 1030;
    background: transparent;
} */

.cw-hero-slideshow {
    position: relative;
    /* z-index: 0; */
    /* margin-top: -110px; */
    /* margin-top: calc(-1 * var(--cw-headerHeight)); */
    margin-top: calc(-1 * var(--cw-header-hero-overlap));
}

.cw-hero-slideshow .cw-absolute-carousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.cw-hero-slideshow .cw-absolute-carousel .carousel-inner,
.cw-hero-slideshow .cw-absolute-carousel .carousel-item {
    height: 100%;
}

.cw-hero-slideshow .cw-absolute-carousel .carousel-item img {
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.cw-hero-slideshow .cw-hero-wrapper {
    width: 100%;
    padding: 150px 1rem;
    padding: calc(100px + var(--cw-header-hero-overlap)) 24px 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-theme-text);
    overflow: hidden;
    z-index: 6;
    position: relative;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
}

.cw-hero-slideshow .cw-hero-text-box {
    max-width: 600px;
    margin-left: 0px;
    margin-right: auto;
}

.cw-hero-slideshow .btn-outline {
    background: 0 0;
    border: 2px solid var(--color-theme-primary);
    color: var(--color-theme-primary);
}

.cw-hero-slideshow .btn-outline:hover {
    background: var(--color-theme-primary);
    color: var(--color-theme-text-btn);
}

.cw-hero-slideshow .btn-outline:before {
    background: var(--color-theme-primary);
}

.cw-hero-slideshow .cw-hero-gradient-lr {
    background: linear-gradient(270deg, transparent 0%, var(--color-theme-background) 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.cw-hero-slideshow .cw-hero-gradient-tb {
    background: linear-gradient(0deg, transparent 0%, var(--color-theme-background) 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 25%;
    z-index: 1;
}

.cw-hero-slideshow .cw-hero-gradient-bt {
    background: linear-gradient(180deg, transparent 0%, var(--color-theme-background) 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25%;
    z-index: 1;
}

.cw-hero-slideshow .cw-hero-title {
    font-size: 1rem;
    text-transform: uppercase;
}

.cw-hero-slideshow .cw-hero-title span {
    display: inline-block;
}

.cw-hero-slideshow .cw-hero-title .cw-h1-preline {
    font-size: 100%;
    font-weight: 400;
}

.cw-hero-slideshow .cw-hero-title .cw-h1-preline span {
    color: var(--color-theme-primary);
}

.cw-hero-slideshow .cw-hero-title .cw-h1-headline {
    font-size: 200%;
    padding: 5px 0;
    font-weight: 900;
    line-height: 1;
}

.cw-hero-slideshow .cw-hero-title .cw-h1-headline span {
    color: var(--color-theme-primary);
}

.cw-hero-slideshow .cw-hero-title .cw-h1-subheadline {
    font-size: 100%;
    margin-bottom: 1rem;
    color: var(--color-theme-primary);
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .cw-hero-slideshow .cw-hero-title {
        font-size: 1.2rem;
    }

    :root {
        /* --cw-header-hero-overlap: 138px; */
    }

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .cw-hero-slideshow .cw-hero-title {
        font-size: 1.5rem;
    }

}

/* Large devices (desktops, 992px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 992px) {}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .cw-hero-slideshow .cw-hero-title {
        font-size: 2rem;
    }
}








.cw-search-section {
    padding: 1.5rem 0;
    margin-top: 0;
    margin-bottom: 2rem;
    z-index: 5;
    position: relative;

    color: var(--color-theme-background);
}

.cw-search-section::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 20%;
    object-fit: cover;
}

.inventory-search-module .container {
    position: relative
}

.inventory-search-module .container .form__wrapper {
    border: none;
    padding: 0;
}

.inventory-search-module .container .form__wrapper label {
    display: none
}

@media (min-width: 576px) {}

@media (min-width: 768px) {}

@media (min-width: 992px) {}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .cw-search-section {
        padding: 6rem 1rem;
        margin-bottom: 3rem;
    }

    /*  Search module containers are set to 1500px width, which is different than standard Bootstrap widths. This and the 1400px code make the search module containers the same sizes as bootstrap containers 
    (another at 1400px) */
    .page-home .inventory-search-module .container {
        max-width: 1140px;
    }

    /* Otherwise you could make other containers on page match up with the search module instead. */
    /* .page-home .container {
        max-width: 1500px;
    } */


    .page-home .inventory-search-module .container .form__wrapper {
        position: absolute;
        z-index: 10;
        left: 0;
        top: -340px;
        width: 700px;
        max-width: 50%;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: unset;
        border: none;
        gap: 10px;
    }


    .page-home .inventory-search-module {
        margin: 0 !important;
        padding: 0;
        background-color: transparent;
    }

    .page-home .inventory-search-module .search__input {
        min-width: 40%;
        flex-basis: 45%;
        flex-grow: 1;
    }

    .page-home .inventory-search-module .container .form__wrapper .search__input--min-year,
    .page-home .inventory-search-module .container .form__wrapper .search__input--max-year {
        min-width: 45%;
        flex-basis: 45%;
    }

    .cw-search-hero .cw-heroContent {
        max-width: clamp(200px, 50%, 600px);
        margin-left: 5px;
        margin-right: auto;
    }

    /* order positioning of the html, before re-ordering with css
    0. .search__input--classification
    1. .search__input-make
    2. .search__input--model
    3. .search__input--min-year
    4. .search__input--max-year
    5. .search__input--max-price
    6. .search__input--max-mileage
    7. (button. no specific class) :last-of-type
    */
    .page-home .inventory-search-module .search__input.search__input--classification {
        order: 0;
    }

    .page-home .inventory-search-module .search__input.search__input-make {
        order: 1;
    }

    .page-home .inventory-search-module .search__input.search__input--model {
        order: 3;
    }

    .page-home .inventory-search-module .search__input.search__input--min-year {
        order: 5;
    }

    .page-home .inventory-search-module .search__input.search__input--max-year {
        order: 6;
    }

    .page-home .inventory-search-module .search__input.search__input--max-price {
        order: 2;
    }

    .page-home .inventory-search-module .search__input.search__input--max-mileage {
        order: 4;
    }

    .page-home .inventory-search-module .search__input:last-of-type {
        order: 7;
    }

    .page-home .inventory-search-module .search__input {
        min-width: 40%;
        flex-basis: 45%;
        flex-grow: 1;
    }

    .page-home .inventory-search-module .container .form__wrapper .search__input--min-year:has(+.search__input--max-year),
    .page-home .inventory-search-module .container .form__wrapper .search__input--min-year+.search__input--max-year {
        min-width: 20%;
        flex-basis: 20%;
    }
}

@media (min-width: 1400px) {
    .page-home .inventory-search-module .container {
        max-width: 1320px;
    }
}