#van-page-container {display: flex;gap: 20px;padding: 20px;}
#van-page-container .filterpopup {width: 300px;}
/* #van-page-container .filterpopup:before {content: '';position: absolute;top: 50%;left: 50%;height: 100vh;width: 100vw;background: rgb(0 0 0 / 50%);transform: translate(-50%,-50%);z-index: -1;} */
#van-page-container .van-results-container {width: calc(100% - 320px);}
.filterpopup .di-modal-head h2 {font-size: 22px;font-weight: 700;letter-spacing: 1px;}

/* Filter section */
.van-filter-container {background-color: #f9f9f9;padding: 15px;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}

/* Results section */
.van-results-container {background-color: #fff;padding: 15px;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}

/* Style for filter form */
#filter-form {display: flex;flex-direction: column;}
#filter-form h3 {margin-bottom: 15px;}
#filter-form div {margin-bottom: 10px;}
#filter-form label {font-weight: bold;}
#filter-form input[type="checkbox"], 
#filter-form select {margin-right: 10px;}

/* Style for the results */
#van-results {display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 15px;}
.van-item {background-color: #f2f2f2;padding: 10px;border-radius: 8px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);}
.van-item h4 {font-size: 18px;margin-bottom: 10px;}
.van-item p {margin: 5px 0;}
.pagination {display: flex;justify-content: center;flex-wrap: wrap;gap: 8px; /* spacing between items */margin-top: 20px;}
.pagination a {display: inline-block;padding: 8px 12px;border: 1px solid #ccc;text-decoration: none;color: #333;border-radius: 4px;transition: all 0.2s ease;}
.pagination a:hover {background-color: #f0f0f0;}
.pagination a.active {background-color: #0073aa;color: white;font-weight: bold;border-color: #0073aa;}
.pagination .active {font-weight: bold;text-decoration: underline;color: #0073aa;}

.ba-text-search-selector {position: relative;padding: 20px;width: 100%;}
.sr-only {position: relative !important;}
#text-search-change-button {position: absolute;right: 40px;top: 50%;transform: translateY(-50%);background: none;border: none;cursor: pointer;padding: 0;color: #333;font-size: 18px;}
#text-search-change-button i {pointer-events: none;}

#paginationNum {border: none;width: 50%;}
#inventorySort {border: none;margin-left: 40%;width: 50%;}
.left-rigth-section {display: flex;margin-left: 27%;}


.result-container {display: -ms-flexbox;display: flex;-ms-flex-direction: row;flex-direction: row;margin: 0 60px 0;height: auto;border-bottom: 1px solid #E5E3DD;padding: 60px 0;}
.result-container {margin: 0 auto 50px;padding: 0px 0 0;border-bottom: 0;align-items: center;width: auto;}
.result-container:last-of-type {border-bottom: none;}
.result-container .vehicle-photo {width: 30%;}
.result-container .vehicle-photo img {box-shadow: 0 2px 29px 0 rgba(0, 0, 0, 0.1);}
.result-container .vehicle-info {width: 50%;padding: 10px 40px;}
.result-container .vehicle-info h3 {font-size: 24px;letter-spacing: 1px;}
.result-container .vehicle-info h3 a {color: #2C3240;}
.result-container .vehicle-info h3 a:hover {text-decoration: underline;}
.result-container .vehicle-info ul {margin: 0;padding: 0;list-style: none;}
.result-container .vehicle-info ul::after {clear: both;content: "";display: block;}
.result-container .vehicle-info ul li {padding-left: 20px;font-size: 15px;font-weight: 400;color: #333;}
.result-container .vehicle-info ul li:before {content: "-";text-align: right;padding-right: 10px;}
.result-container .vehicle-pricing {width: 20%;padding: 20px;display: -ms-flexbox;display: flex;-ms-flex-direction: column;flex-direction: column;}
.result-container .vehicle-pricing h5 {font-weight: bold;-ms-flex-item-align: end;align-self: flex-end;margin: 0;}
.result-container .vehicle-pricing .price {-ms-flex-item-align: end;align-self: flex-end;padding: 20px 0;font-size: 24px;}
.result-container .vehicle-pricing p {text-align: right;}
.result-container .vehicle-pricing .button {-ms-flex-item-align: end;align-self: flex-end;margin: 10px 0;padding: 20px;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);background: #B8A082;transition: all 0.3s ease-in-out;line-height: 0px;font-weight: normal;}
.result-container .vehicle-pricing .button a {color: white;text-transform: none;}
.result-container .vehicle-pricing .button:hover {background-color: #a68761;box-shadow: none;}
.result-container .vehicle-info {padding: 20px 20px;width: 100%;}
.result-container .vehicle-info {width: 100%;padding: 20px 20px;background: #f5f5f5;}
.result-container .vehicle-photo {width: 50%; min-height: 215px;}
.result-container .vehicle-photo a{display:block;}
.result-container .vehicle-photo img {box-shadow: none;/*height: 100%;object-fit: cover;*/}

/*  leftside filter */
#van-page-container .van-filter-container,
#van-page-container .van-results-container {box-shadow: unset;background: transparent;border-radius: 0;}

#van-page-container .ba-text-search-selector {padding: 0;margin-bottom: 20px;}
#van-page-container .ba-text-search-selector .ui-input-text {box-shadow: unset;margin: 0;border-radius: 0;background: transparent;border: 0;}
#van-page-container .ba-text-search-selector input {border: 1px solid #a8987d;padding: 15px 60px 15px 15px;height: unset;color: #7a7676;font-size: 18px;}
#van-page-container .ba-text-search-selector .ui-input-text input::placeholder {color: #7a7676;}
#van-page-container #text-search-change-button {width: fit-content;box-shadow: unset;border: 0;margin: 0;right: 15px;color: #a8987d;font-size: 23px;}
#van-page-container #total_data_count {font-size: 20px;color: #0c0c0c;font-weight: 400;}

#van-page-container .extra-sort-filters {display:flex;margin: 10px 0;justify-content: space-between;gap: 20px;}
#van-page-container .active-filters-tags {display: flex;gap: 5px;flex-wrap: wrap;}
#van-page-container .active-filters-tags > div {background: #a8987d;padding: 8px 10px;color: #fff;border-radius: 8px;font-size: 12px;cursor: pointer;white-space: nowrap;}
#van-page-container .active-filters-tags > div:not(:first-child) {background: #d3cbbd;color: #2a2926;font-weight: 500;text-shadow: unset;}
#van-page-container .left-rigth-section {margin: 0;justify-content: space-between;gap: 10px;flex-wrap: nowrap;}
#van-page-container .left-rigth-section .ba-fieldset.dropdown {margin: 0;display: flex;width: auto;align-items: center;}
#van-page-container .left-rigth-section .ba-search-option-item {width: fit-content;background: unset;box-shadow: unset;border-color: #ddd;border-radius: 0;padding-right: 0;padding-left: 10px;position: relative;margin: 0;}
#van-page-container .left-rigth-section .ba-search-option-item select {border-radius: 0;}
#van-page-container .left-rigth-section .ba-search-option-item:after {font-family: "FontAwesome";content: "\f0d7";font-weight: 900;background: unset;color: #a8987d;width: 8px;font-size: 20px;display: flex;align-items: center;position: absolute;top: 0;right: 14px;height: 100%;}
#van-page-container .left-rigth-section .item-text {width: fit-content;display: block;height: auto;font-size: 16px;font-weight: 400;color: #0c0c0c;}

#van-page-container #filter-form fieldset {padding: 15px 0;display: contents;}
#van-page-container #filter-form fieldset > div {padding: 5px 0 15px 0;}
#van-page-container #filter-form fieldset div {margin: 0;}
#van-page-container #filter-form fieldset legend {padding: 15px 0;border-top: 1px solid #b8b2b2;width: 100%;font-size: 18px;font-weight: 400;color: #000;cursor: pointer;position:relative;}
#van-page-container #filter-form fieldset legend:before {position: absolute;font-family: "FontAwesome";content: "\f107";font-weight: 900;background: unset;color: #a8987d;width: 14px;font-size: 20px;display: flex;align-items: center;right: 0;transition: .2s ease;}
#van-page-container #filter-form fieldset:not(.close) legend:before {transform: rotate(180deg)}
#van-page-container #filter-form fieldset legend:last-child {border: 0;}

#filter-form .filter-content-row input[type="checkbox"] {visibility: hidden;opacity:0;position: absolute}
#filter-form .filter-content-row input[type="checkbox"] + label {font-size: 16px;border: 0;background: unset;padding: 2px 0 2px 24px;font-weight: 400;text-transform: uppercase;color: #7a7676;line-height: 1.1;position: relative;}
#filter-form .filter-content-row input[type="checkbox"] + label:before {content: '';position: absolute;left: 0;top: 2px;height: 16px;width: 16px;border: 1px solid #e1dcd4;}
#filter-form .filter-content-row input[type="checkbox"] + label:after {content: "\f00c";font-family: "FontAwesome";font-weight: 900;position: absolute;font-size: 12px;opacity: 0;left: 0;top: 1px;height: 16px;width: 16px;background: #a8987d;display: flex;align-items: center;justify-content: center;color: #fff;}
#filter-form .filter-content-row input[type="checkbox"]:checked + label:after {opacity: 1;}
#filter-form .filter-content-row {position: relative;}
#filter-form .yearDropdown .filter-content-row {width: fit-content;}
#filter-form .yearDropdown .filter-content-row:before {font-family: "FontAwesome";content: "\f107";font-weight: 900;position: absolute;top: 0;right: 16px;height: 100%;display: flex;align-items: center;color: #a8987d;}
#filter-form .filter-content-row select {border-radius: 0;border: 1px solid #a8987d;width: fit-content;}

#inventoryQuickDelivery .filter-content-row input[type="checkbox"] + label {padding-left: 42px !important;position: relative;}
#inventoryQuickDelivery .filter-content-row input[type="checkbox"] + label:before {content: '';position: absolute;top: 1px;left: 0;height: 18px;width: 36px;background-color: #a8987d;transition: background-color 0.25s ease;border-radius: 11px;opacity: .5;}
#inventoryQuickDelivery .filter-content-row input[type="checkbox"] + label:after {content: "";position: absolute;left: 4px;top: 4px;width: 12px;height: 12px;display: block;background-color: #fff !important;border-radius: 50%;transition: left 0.25s ease;z-index: 1;opacity: 1;}
#inventoryQuickDelivery .filter-content-row input[type="checkbox"]:checked + label:before {opacity: 1;}
#inventoryQuickDelivery .filter-content-row input[type="checkbox"]:checked + label:after {left: 20px;}

.close_filter {display: none;background: #a8987d !important;color: #fff !important;font-size: 12px !important}
.filter_btn {line-height: 1;padding: 12px;font-size: 14px;height: auto;display: none;max-width: fit-content;background: #a8987d !important;color: #fff !important;font-weight: 400;box-shadow: unset;}
.filter_btn:hover {background: #363e4f !important;}
.pagination a.active {background-color: #a8987c;color: white;font-weight: bold;border-color: #a8987c;}

#slider-range {border: 0;height: 10px;max-width: calc(100% - 20px);margin: 0 auto !important;}
#slider-range .ui-slider-handle {border-radius: 50%;border-color: #a8987c;background: #a8987c;}
#slider-range .ui-slider-handle:focus {outline: none;}
#slider-range .ui-slider-range {height: 2px;top: 4px;}
 
#van-results {display: flex;flex-wrap: wrap;gap: 20px;}
#van-results .result-container.grid-item {width: calc(33.33% - 40px/3);margin: 0 !important;}
#van-results .a-vh-image {width: 100%;}
#van-results .a-vh-image .vh-image {width: 100%;}

#van-results.loader {position: relative;overflow: hidden;}
#van-results.loader::before {content: '';position: absolute;height: 100%;width: 100%;background: rgb(255 255 255 / 80%);z-index: 1;}
#van-results.loader::after {position: absolute;top: 100px;left: 0;width: 100%;z-index: 1;border-radius: 50%;border-right-color: transparent;animation: spinner infinite 2s;content: "\f1ce";font-family: "FontAwesome";font-weight: 700;display: flex;justify-content: center;align-items: center;font-size: 50px;}
@keyframes spinner {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}
 
@media (max-width: 1400px){
    #van-results .result-container.grid-item {width: calc(50% - 20px/2);}
}
@media (max-width: 767px){
    #van-results .result-container.grid-item {width: 100%;}
}

@media (max-width: 1200px){
    #van-results {grid-template-columns: 1fr 1fr;}
}
@media (max-width: 1024px){
    #van-page-container .van-results-container {width: 100%;}
    .filter_btn,
    #van-page-container {display: block;}
    #van-page-container .filterpopup {position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);width: calc(100% - 30px);z-index: 1;max-height: 90vh;height: 100%;padding: 12px;transition: .3s ease;opacity: 0;visibility: hidden;z-index: 99;background-color: #fff;}
    #van-page-container .filterpopup.open {opacity: 1;visibility: visible;}
    #van-page-container .filterpopup .van-filter-container {height: 100%;overflow-y: auto;box-shadow: 0 0 12px 11px #00000012;border: 1px solid #00000033;background: #fff;}
    #van-page-container .filterpopup .close_filter {position: absolute;top: 0;right: 0;width: 25px;height: 25px;display: flex;align-items: center;justify-content: center;padding: 0;border-radius: 50%;margin: 0;}
    #van-page-container .extra-sort-filters {flex-direction: column;}
    .filterpopup fieldset .filter-content.ba-checkbox {display: flex;flex-wrap: wrap;gap: 5px calc(40px/3);}
    .filterpopup fieldset .filter-content.ba-checkbox .filter-content-row {width: calc(25% - 10px);}
    .filterpopup fieldset .filter-content.ba-checkbox .filter-content-row label {line-height: 1.3 !important;}
    #van-page-container > .van-results-container {padding: 15px 0;}
}
@media (max-width: 767px){
    .filterpopup fieldset .filter-content.ba-checkbox {gap: 5px calc(30px/2);}
    .filterpopup fieldset .filter-content.ba-checkbox .filter-content-row {width: calc(33.33% - 10px);}
}
@media (max-width: 575px){
    #van-results {grid-template-columns: 1fr;}
    #van-page-container .extra-sort-filters {flex-direction: column;} 
    .filterpopup fieldset .filter-content.ba-checkbox .filter-content-row {width: 100%;}   
}