/*Base colour variables*/
:root {
    --generalTextColor: #212529;
    --ctaTextColor: #E30A21;
    --generalFillColor: #E30A21;
    --backgroundHoverColor: #ccc;
    --borderColor: #414042;
    --backgroundColor: #414042;
    --borderColorLight: #b4b4b4;
    --backgroundColorLight: #F4F4F4;
    --generalTextColorLight: #A0A0A0;
    --generalTextColorVeryLight: #ccc;
    --borderColorDark: #5C5C5C;
    --backgroundDark: #5C5C5C;
    --generalTextColorDark: #5C5C5C;
    --bodyColor: #fff;
    --saleBanner: #000;
    --searchFilterLabels: #E30A21;
    --searchFilterText: #000;
    --searchButtonFillText: #ffffff;
    --searchButtonFill: #E30A21;
    --searchButtonText: #414042;
    --searchButtonBorder: #E30A21;
    --searchGridBorder: #ccc;
    --searchResultCountColor: #E30A21;
    --vehicleCardBorder: #ccc;
    --vehicleKeywordBorder: #ccc;
    --vehicleKeywordText: #A0A0A0;
    --vehicleTitleText: #1D1D1B;
    --vehicleVariantText: #414042;
    --vehiclePrice: #212529;
    --vehiclePriceSpecial: #E30A21;
    --vehiclePriceORC: #414042;
    --vehicleIconColor: #E30A21;
    --insertBackgroundColor: #F4F4F4;
    --imageSliderControlsBackground: #414042;
    --enquiryButtonBackgroundColor: #E30A21;
    --enquiryButtonText: #fff;
    --detailsButtonBorder: #E30A21;
    --detailsButtonText: #1D1D1B;
    --linkText: #E30A21;
    --vehicleDetailsHeader: #414042;
    --vehicleDetailsIconHeaderText: #414042;
    --vehicleDetailsText: #414042;
    --vehicleDetailsSecondaryHeader: #414042;
    --vehicleDetailsTableHeader: #414042;
    --vehicleDetailsTableText: #212529;
    --vehicleStarRatingsColor: #E30A21;
    --altColorOne: #fff;
    --altColorTwo: #fff;
    --altColorThree: #fff;
    --altColorFour: #fff;
    --altColorFive: #fff;
}

/* these styles override the positioning of filter options, not used by 4guys*/
/*
.search-bar-box > .pos-1 {
    order: 1;
}

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

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

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

.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;
}

*/

/* these styles may need to be provided as overrides if sticky headers are used*/
@media (max-width: 768px){

    /* needed to make sidebar sit below header*/
    .navigation-sidebar.active, .navigation-desktop-sidebar.active{
        top:80px!important;
    }
  
    .navigation-desktop-sidebar.active .side-search-container{
      	padding-top: 30px!important;
  	}

    /* prevent our sidebar overlaying their content*/
    .vertical-search-sidebar-wrapper {
        z-index: 1;
    }

    /* site override, hide header announcement when menu is open*/
    .vdp-menu-open header .sqs-announcement-bar-dropzone {
        display: none;
    }

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

    /* site override affecting vdp search control*/
    .input-search-vertical-bar.form-control.large-input {
        height: 26px !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;
    }

    /* not needed
    .vdp_offsetTop {
        height: 0px;
    }*/

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

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

    /* needed to make sidebar sit below header*/
    .navigation-desktop-sidebar.sticky{
        top:110px!important;
    }

    /* site override affecting vdp search control*/
    .input-icons-search {
        margin-bottom: 2px;
    }
}

/* bootstrap override for forcing vdp to use fullwidth when using 100% width vertical menu option*/
.container {
    max-width: inherit !important;
    padding: inherit !important;
}