:root {
    --generalTextColor: #212529;
    --ctaTextColor: #1a1b1f;
    --generalFillColor: #164983;
    --backgroundHoverColor: #ccc;
    --borderColor: #414042;
    --backgroundColor: #164983;
    --borderColorLight: #F9F9F9;
    --backgroundColorLight: #F9F9F9;
    --generalTextColorLight: #A0A0A0;
    --generalTextColorVeryLight: #ccc;
    --borderColorDark: #5C5C5C;
    --backgroundDark: #5C5C5C;
    --generalTextColorDark: #5C5C5C;
    --bodyColor: #fff;
    --saleBanner: #174a83;
    --searchFilterLabels: #164983;
    --searchFilterText: #000;
    --searchButtonFillText: #ffffff;
    --searchButtonFill: #1a1b1F;
    --searchButtonText: #414042;
    --searchButtonBorder: #000;
    --searchGridBorder: #ccc;
    --searchResultCountColor: #000000;
    --vehicleCardBorder: #ccc;
    --vehicleKeywordBorder: #b1b1b1;
    --vehicleKeywordText: #757575;
    --vehicleTitleText: #1A1B1F;
    --vehicleVariantText: #000000;
    --vehiclePrice: #1A1B1F;
    --vehiclePriceSpecial: #174a83;
    --vehiclePriceORC: #414042;
    --vehicleIconColor: #164983;
    --insertBackgroundColor: #F9F9F9;
    --imageSliderControlsBackground: #414042;
    --enquiryButtonBackgroundColor: #1a1b1f;
    --enquiryButtonText: #fff;
    --detailsButtonBorder: #1a1b1f;
    --detailsButtonText: #1a1b1f;
    --linkText: #1a1b1f;
    --vehicleDetailsHeader: #000000;
    --vehicleDetailsIconHeaderText: #000000;
    --vehicleDetailsText: #000000;
    --vehicleDetailsSecondaryHeader: #000000;
    --vehicleDetailsTableHeader: #000000;
    --vehicleDetailsTableText: #212529;
    --vehicleStarRatingsColor: #164983;
    --altColorOne: #fff;
    --altColorTwo: #fff;
    --altColorThree: #fff;
    --altColorFour: #fff;
    --altColorFive: #fff;
}

/* these styles override the positioning of filter options*/
.container-landing-search-bar .search-bar-item.pos-1 {
    order: 9 !important;
}

.container-landing-search-bar .search-bar-item.pos-2 {
    order: 1 !important;
}

.container-landing-search-bar .search-bar-item.pos-3 {
    order: 4 !important;
}

.container-landing-search-bar .search-bar-item.pos-4 {
    order: 5 !important;
}

.container-landing-search-bar .search-bar-item.pos-5 {
}

.container-landing-search-bar .search-bar-item.pos-6 {
    order: 2 !important;
}

.container-landing-search-bar .search-bar-item.pos-7 {
    order: 3 !important;
}

.search-bar-box > .pos-1 {
    order: 5;
}

.search-bar-box > .pos-2 {
    order: 2;
}

.search-bar-box > .pos-3 {
    order: 3;
}

.search-bar-box > .pos-4 {
    order: 2;
}

.search-bar-box > .pos-5 {
    order: 5;
}

.search-bar-box > .pos-6 {
    order: 6;
}

.search-bar-box > .pos-7 {
    order: 7;
}

.search-bar-box > .pos-8 {
    order: 8;
}

.search-bar-box > .pos-9 {
    order: 9;
}

.search-bar-box > .pos-10 {
    order: 10;
}

/* general vdp customisations VDP-203 */

.autoplay-btn{
    border-radius:50px!important;
}

.general-border-color-button-detail {
    border: 1px solid var(--detailsButtonBorder) !important;
}

.container-landing-search-bar {
    border: none !important;
}

.content-card {
  height: 29rem !important;
}

.card-body {
    padding: 16px !important;
}

.icon-spec-summary {
    height: 2.5rem !important;
    width: 2.5rem !important;
    font-size: 20px !important;
}

.icon-spec-detail .icon, .icon-spec-detail i {
    height: 1.5rem !important;
    width: 1.5rem !important;
    font-size: 1.6rem;
}

#label-view-favourites, .count-result-wrapper .fa.fa-heart{
  color:#fff!important;
}

.corner-sale {
    border-bottom: none!important;
    border-right: none!important;
    border-left: none!important;
    border-color: var(--saleBanner) transparent transparent var(--saleBanner) !important;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    left: 20px !important;
    width: 7rem !important;
}

.corner-sale span{
    transform: none!important;
    top: -1.6rem!important;
    width: 7rem!important;
  	left: 0!important;
    font-size: 1rem!important;
  	text-transform: capitalize!important;
}

.vdp-container .modal label, .vdp-container .modal textarea::placeholder, .vdp-container .modal input::placeholder, .vdp-container .modal textarea, .vdp-container .modal input, .vdp-container .modal select{
  	color: var(--ctaTextColor)!important;
}

.vdp-container .btn-submit-form, .vdp-container .btn-next-finance-enquiry{
  background-color: var(--enquiryButtonBackgroundColor)!important;
}


/*Use Pipe Seperator instead of round keyword labels VDP-317*/
.keyword-content {
   padding-left: 2px !important;
   min-height: 5.5em!important;
}

.keyword-label:last-of-type {
    display: inline-block;
}

.keyword-label:not(:last-of-type)::after {
   content: ' | ';
}

.keyword-label {
    border: 0px !important;
    border-radius: 0px !important;
    padding-top: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-bottom: 0px !important;
}

.car-clean-content {
    height: 0rem!important;
}

.makes-model-span {
    font-family: sans-serif;
}

.price-label {
    font-family: sans-serif;
}

.title-content {
  font-size: 16px;
}

@media (max-width: 576px){
    .detail-content-info {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
} 

/* these styles may need to be provided as overrides if sticky headers are used*/
@media (max-width: 768px) {
    .navigation-sidebar.active, .navigation-desktop-sidebar.active {
        top: 80px !important;
    }

    .vdp-menu-open header header {
        z-index: auto;
    }

    .vertical-search-sidebar-wrapper {
        z-index: 1;
    }

    .vdp-menu-open header .sqs-announcement-bar-dropzone {
        display: none;
    }

    .navigation-sidebar.sticky.active, .navigation-desktop-sidebar.sticky.active {
        top: 0px !important;
    }

    .btn-filter-icon {
        padding-top: 0px!important;
    }

    .button-header-horizontal{
        margin:0!important;
    }

    .spec-summary-wrapper{
        padding:0!important;
    }
}

@media (min-width: 769px) {
    /* overrides sites header when our modal is open (our modal has higher z-index but is a child of site, and so has no effect */
    .modal-open header {
        z-index: auto !important;
    }

    /* need to adjust height of menus and sidebars */
    #vdp_search_holder .vdp_offsetBottom {
        height: 240px !important;
    }

    #vdp_detail_holder .vdp_offsetBottom {
        height: 80px !important;
    }

    /* needed to make sidebar sit in container correctly*/

    #vdp_detail_holder {
        max-width: 1310px;
        margin: 0 auto;
    }

    .detail-sidebar-wrapper {
        max-width: 280px;
        z-index: 500 !important;
        top:0px!important;
    }

    .search-bar-wrapper.sticky {
        top: 75px !important;
    }

    .navigation-desktop-sidebar.sticky {
        top: 185px !important;
    }

    .detail-sidebar-wrapper.sticky {
        top: 70px !important;
    }

    /* general details page styling */
    .vdp-container .detail-content-info {
        padding-bottom: 3rem !important;
    }

    .detail-sidebar-info .text-spec-summary {
        width: 100% !important;
    }

    .detail-sidebar-info .header-spec-text {
        font-size: 12px !important;
    }

    .detail-spec-text {
        font-size: 14px !important;
    }

    .navigation-desktop-sidebar.active {
        padding-left: 0 !important;
    }

    .navigation-desktop-sidebar.sticky .side-search-scroll {
        padding-bottom: 0px !important;
    }


    .navigation-desktop-sidebar.active .side-search-container {
        padding-left: 2rem;
    }

    /* fix as site is overriding search box height */


    /* controls width of listing cards on search page */
    .content-card, .grid-content-card {
        width: 17rem !important;
    }

    .search-result-content {
        grid-template-columns: repeat(auto-fill,minmax(17rem, 1fr)) !important;
    }

    /* prevent site image overlaying make and model modal */
    .vdp-search-box-container .modal.show .modal-dialog {
        height: 40%;
    }

    .vdp-search-box-container .modal-content {
        height: 100%;
    }
}

/*large screens*/
@media only screen and (min-width:1310px) {
    .navigation-desktop-sidebar.active {
        left: calc(50% - 655px) !important; /* 655+20 = 675 = 1310/2 this keeps nav bar responsive and in correct position*/
        margin-left: -20px;
    }

    /* the following styling is needed to make menu fit in site container */
    .search-bar-wrapper.sticky {
        max-width: 1310px !important;
        margin: 0 auto !important;
    }
}

/*tablet and smaller laptops below site container maximum*/
@media only screen and (max-width:1309px) and (min-width:768px) {
    .navigation-desktop-sidebar.active {
        margin-left: 0vw;
        padding-left: 0 !important;
    }
}

.template-page, .column-top-margin {
    z-index: auto!important;
}

.vertical-search-sidebar-wrapper {
    z-index: 500!important;
}

/*VDP-342*/
.vdp-search-box-container .homepage-container {
    width: 80%;
}

.detail-button i, .makes-breadcrumb, .detail-jump-section{display:none;}

.detail-sidebar-wrapper {box-shadow:none!important;}

.vehicle-title-text {
    font-size: 18px;
    font-weight: bold;
}

.detail-title{
  font-size: 14px!important;
}

.detail-sidebar-buttons .autoplay-btn {
    text-transform: capitalize!important;
}

.detail-sidebar-wrapper .icon.icon-transmission{
width:24px!important;
  height:24px!important;
}

.carousel-detail .card-title.title-content-related-cars-four-items, .carousel-detail .related-cars-span.vehicle-title-text {
    font-size: 12px !important;
    line-height: 2rem;
}