/*:root { --bg-color: #1B1B1B; --accent-btn-color: #FF553C; }*/
:root { --bg-color: #F0F8FF; --accent-btn-color: #5671FF; --btn-bg-color: white; --table-odd: #EFEFEF; --text-color: #25293A; --search-head-color: #5671FF; --chk2-bg: #D9D9D9; --pillar-color: #cbcbcb54; --check-bg: #F6F6F6; --check-border: #BBCAEB; --pag-btn-bord: #25293A; --cd-bg: white; --scroll-btn-text: white; --scroll-btn: #25293A; --filter-btn: white; --filter-txt: black; --cars-bg: white; --grid-border: #D2D2D2; --search-input: black;}
.light-mode { --bg-color: #1B1B1B; --accent-btn-color: #5671FF; --btn-bg-color: #393939; --table-odd: #565656c2; --text-color: white; --search-head-color: white; --chk2-bg: #565656; --pillar-color: #3d3d3d54; --check-bg: #2C2C2C; --check-border: white; --pag-btn-bord: white; --cd-bg: white; --scroll-btn-text: #161925; --scroll-btn: white; --filter-btn: #3F3F3F; --filter-txt: white; --cars-bg: #00000000; --grid-border: #5671FF; --search-input: white; }

body { color: white; background: var(--bg-color); font-family: roboto; overflow: hidden; height: 100vh; }
#filters {scrollbar-width: none; font-size: 13px; margin-top: 15px; }
    #filters .chk-1 { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border: solid 1px var(--check-border); border-radius: 4px;  margin-right: 8px; vertical-align: -1px; }
        #filters .chk-1:before { content: '\00a0'; color: white; font-size: 14px; font-weight:800; vertical-align: 1px; line-height: 1; font-family: 'Material Symbols Outlined'; }
        #filters .chk-1:checked { background: var(--accent-btn-color); cursor: pointer; }
            #filters .chk-1:checked + .t { font-weight: bold; color: black; }
            #filters .chk-1:checked:before { content: '\e876'; }
.move-drop-box .chk-1 { -webkit-appearance: none;  appearance: none; width: 15px; height: 15px; border: solid 1px #fff; border-radius: 4px;  margin-right: 8px; vertical-align: -1px; border: solid 1px var(--check-border); }
    .move-drop-box .chk-1:before { content: '\00a0'; color: white; font-size: 12px; font-weight: 800; vertical-align: 1px; line-height: 1; font-family: 'Material Symbols Outlined'; cursor: pointer; }
    .move-drop-box .chk-1:checked { background: var(--accent-btn-color); cursor: pointer; }
        .move-drop-box .chk-1:checked + .t { font-weight: bold; color: black; }
        .move-drop-box .chk-1:checked:before { content: '\e876'; }
.drop-box-other .t { font-size: 12px; white-space: nowrap; margin-left: 3px; margin-right: 6px; }
.drop-box-status .t { font-size: 12px; white-space: nowrap; margin-left: 3px; margin-right: 6px; }
.drop-box .t { font-size: 14px; line-height: 16px; padding-top: 4px; padding-bottom: 4px; margin-left: 3px; margin-right: 6px; }
#filters::-webkit-scrollbar { display: none; }
.drop-box-other .chk-2 { width: 41px; height: 20px; background-color: var(--chk2-bg); display: flex; align-items: center; padding: 2px 2px 2px 3px; }
.drop-box-status .chk-2 { width: 41px; height: 20px; background-color: var(--chk2-bg); display: flex; align-items: center; padding: 2px 2px 2px 3px; }
.drop-box-other .chk-2:before { width: 14px; height: 14px; }
.filters-clear {  
    background: #ffffff; 
    cursor: pointer; 
    display: flex;
    align-items: center;
}
/*.setting-profile-div-desktop { display: flex; position: relative; flex-direction: column; margin-right: 0px; align-items: center; display: none; }*/
/*.fbo-settings-div { cursor: pointer; display: flex; margin-right: 45px; text-decoration: none; color: white; }
.fbo-settings-icon { width: 34px; height: 34px; border-radius: 10px; background: #25293A; color: white; display: flex; justify-content: center; align-items: center; margin-right: 21px; }
.fbo-profile-icon.fbo-settings-icon { margin-right: 0px; }
.fbo-span-text { display: flex; justify-items: center; align-items: center; }*/
.fbo-profile-div { cursor: pointer; display: flex; text-decoration: none; color: white; }
    .filter > .h { display: flex; align-items: center; cursor: pointer; padding: 6px 20px; }
        .filter > .h > .ic:before { content: '\e5df'; }
        .filter > .h:hover { background: #424a66; }
    .filter > .c { display: none; padding: 0 20px 10px 30px; }
        .filter > .c > .i { display: flex; justify-content: space-between; align-items: center; }
.i > label { display: flex; align-items: center; }
.list .i { position: relative; }
.list .i { }
    /*.list .i .t::after { content: ""; position: absolute; left: 33px; bottom: 0; height: 1px; width: 50%;*/ /* or 100px */ /*border-bottom:1px dotted #9f9f9f; }*/
            .filter > .c > .i.disabled { opacity: .5; }
                .filter > .c > .i.disabled > .chk-2 { cursor: not-allowed; }
        .filter > .c > .list { }
            .filter > .c > .list > .i { margin: 5px 0; }
                .filter > .c > .list > .i > label, .filter > .c > .i > label > input { cursor: pointer; }
                .filter > .c > .list > .i > label { margin: 8px 0; display: block; }
                .filter > .c > .list > .i.disabled { opacity: .5;}
.list .i.disabled { background: #e9e9e9; border-bottom: 1px #f5f5f5 solid; border-radius: 5px; }
.list .i label:hover { cursor: pointer; }
.list .i.disabled label:hover { cursor: default; }
#filters .i .chk-1 { cursor: pointer; }
#filters .i.disabled .chk-1 { background: #dddddd; cursor: default }
#filters-gv-container .col-2-btns { border: #F2F2F2 solid 1px;}
#filters-gv-container { margin-bottom: 25px;}
#filters-gv-container .filter { position: relative;}
#filters { max-height: 81vh !important;}
.drop-box-padding { border-bottom: 20px solid white; }
.drop-box { top: 60px; color: var(--text-color); /*height: 0px;*/ overflow: hidden; position: absolute; }
    .drop-box::-webkit-scrollbar { width: 4px; }
    .drop-box::-webkit-scrollbar-thumb { background-color: #f0f0f0; border-radius: 5px; }
/*.grid-item-b::-webkit-scrollbar { width: 4px; }
.grid-item-b::-webkit-scrollbar-thumb { background-color: #5671ff; border-radius: 5px; }
.table-scroll-div { height: 800px; overflow-y: auto; }*/
.table-scroll-div { margin: 0 0; }

#filters-cv-container .filter { position: relative; width: 100%; display: flex; justify-content: center; flex-direction: column; align-items: center; } 
#filters-cv-container { display: flex;   align-items: center; /*width: 90%;*/ }


/*.drop-box-dealer { right: -310px; top: 0px; }*/

.filter > .c > .list > .i.disabled > label, .filter > .c > .i.disabled > label > input { cursor: not-allowed; }
.open-close-filters { cursor: pointer}
.add-margin-filters:hover { cursor: pointer; background-color: #e7e5e5; border-radius: 10px; margin-right: 25px; }
.filter > .c > .show { cursor: pointer; margin: 20px 0 10px 4px; font-size: 14px; font-weight: bold; }
            .filter > .c > .show:after { content: 'Show more'; }
            .filter > .c > .show:before { font-family: 'Material Symbols Outlined'; content: '\e145'; margin-right: 5px; vertical-align: -2px; }
        .filter > .c.show-all > .show:after { content: 'Show less'; }
        .filter > .c.show-all > .show:before { content: '\e15b'; }
        .filter > .c:not(.show-all) > .list > .i:not(:nth-child(-n+10)) { display: none; }
    .filter.open { background: #1E243D; }
        .filter.open > .c { display: block; }
        .filter.open > .h > .ic:before { content: '\e5c5'; }
 /*   .filter > .c > .slider-w { margin-top: 25px; height: 5px; margin-bottom: 20px; }
        .filter > .c > .slider-w > .lbl { position: absolute; top: -27px; background: red; color: white; padding: 2px 5px; border-radius: 4px; font-weight: bold; font-size: 11px; margin-left: -20px; }
        .filter > .c > .slider-w > .ui-slider-handle { border: solid 4px #625DF5; border-radius: 100%; width: 14px; height: 14px; }
        .filter > .c > .slider-w > .ui-slider-range { background: #625DF5; }*/
body:not(.use-headerbar) .desking-logo { text-decoration: none; color: var(--accent-btn-color); cursor: pointer; display: flex; margin-left: 25px; height: 100%; padding: 10px 0; }
body:not(.use-headerbar) .desking-logo img { width: 100%; }
.header-search-div { display: none; width: 80%; justify-content: center; }
.c > .slider-w { margin-top: 25px; height: 5px; margin-bottom: 20px; border-radius: 10px; border: none; }
.slider-w > .lbl { position: absolute; margin-top: -27px; background: #c51412; color: white; padding: 2px 5px; border-radius: 4px; font-weight: bold; font-size: 11px; display: none; }
/*.c > .slider-w > .ui-slider-handle { border: solid 4px #c51412; border-radius: 100%; width: 14px; height: 14px; }*/
.c > .slider-w > .ui-slider-handle { border: solid 4px #5671ff; border-radius: 100%; width: 15px; height: 15px; }
.c > .slider-w > .ui-slider-range { background: /*#c51412*/ #1235c53b; }
/*.from { position: relative;}*/
/*.to { margin-left: 100px !important; position: relative; }*/
.in-transit-div { display: flex; justify-content: center; }
.in-transit { margin: 0px;}
.color-div { margin-bottom: 5px; }
.check-box-colors { margin-right: 10px; }
#f-color { display: flex; flex-direction: column; }
#f-color > .side { margin-top: 0px; width: 100%; font-size: 16px;  }
    #f-color > .side > .h { font-weight: bold; text-align: left; padding-left: 10px; font-size: 11px; }
    #f-color > .side > .c { display: flex; flex-wrap: wrap; padding: 10px 10px; flex-direction: column; }
        #f-color > .side > .c .col-w { flex-shrink: 0; border-radius: 100%; width: 16px; height: 16px; border: solid 1px #636363; margin-right: 5px;  cursor: pointer; position: relative;}
            #f-color > .side > .c .col-w.disabled { opacity: .3; cursor: not-allowed; }
            #f-color > .side > .c .col-w > .col { height: 100%; border-radius: 100%; }
            #f-color > .side > .c .col-w > .span { position: absolute; top: -1px; left: 20px; } 
            #f-color > .side > .c .col-w.active { padding: 0; }
#f-term, #f-miles { outline: none; border: none; padding: 5px 10px; border-radius: 4px; }

#vin-msrp { display: flex; align-items: center; padding: 0 20px 0 30px; }
    #vin-msrp > .fields { margin-right: 10px; }
/*        #vin-msrp > .fields > input { border: none; margin: 5px 0; padding: 2px 5px; width: 140px; display: block }*/
.field-vin-msrp { border: none; margin: 5px 0; padding: 2px 5px; width: 140px; display: none; }
    #vin-msrp .btn-w button { background: var(--accent-btn-color); padding: 6px 10px; border-radius: 6px; border: none; cursor: pointer; color: white; }
#main { padding: 0px 0px; background: white; height: 100vh; /*overflow: hidden;*/  }
body:not(.use-headerbar) #main > header.mobile-header-style:first-child {
    display: block !important;
    position: relative !important;
    width: 100% !important;
}
    #main > .intro > .line-1 { font-size: 22px; }
    #main > .intro > .line-2 { font-weight: bold; opacity: 0.7; }
    #main > .intro > .line-3 { opacity: 0.7; }
.remove-filter-btn { height: 35px; margin-right: 7px; border: none; border-radius: 50px; background: #dbe4f6; color: var(--filter-txt); padding: 10px; cursor: pointer; display: flex; justify-content: center; align-items: center; }
.filter-state-name { font-size: 15px; font-weight: 500; white-space: nowrap; }
.change-x-size { font-size: 12px;}
.engine-dots { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 100px; }
.engine-dot-td { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width: 100px; }
#badges { display: flex; flex-direction: column; }
    #badges > .badge { width: 364px; padding: 26px 0 36px 29px; /*display: flex;*/ display:none; background: white; margin-right: 23px; border-radius: 10px; }
        #badges > .badge > .l { width: 68px; height: 68px; background: #54A2FE; display: flex; align-items: center; justify-content: center; border-radius: 10px; margin-right: 32px; }
        #badges > .badge > .r { }
            #badges > .badge > .r > .t { font-size: 16px; opacity: 0.7; }
            #badges > .badge > .r > .num { font-weight: bold; font-size: 50px; line-height: 50px; }
.row-for-filters-first { display: none; /*justify-content: space-between;*/ gap: 15px;  margin-bottom: 0px; position: relative; }
.filters-container { display: flex; margin-left: 0px; margin-top: 10px;}
#best-min { color: var(--text-color)}
#best-max { color: var(--text-color);}
.input-wrapper .left { cursor: pointer; user-select: none; display: none; }
.input-wrapper .right { cursor: pointer; user-select: none; display: none; }
#f-other { color: var(--text-color)}
#f-status { color: var(--text-color)}
.input-wrapper { position: relative; width: fit-content; color: var(--text-color) }
    .input-wrapper .money { position: absolute; left: 36px; top: 25px; font-size: 15px; }
    .input-wrapper input { border-radius: 6px; position: relative; width: 95%; height: 44px; margin: 10px 0; line-height: 6ex; background: var(--bg-color); color: var(--text-color); /*padding-left: 13px;*/text-align:center; padding-top: 4px; font-size: 16px; font-weight: 500; }
    .input-wrapper label { position: absolute; top: 25px; z-index: 1; left: 9px; padding: 0 5px; font-size: 11px; font-weight: 800; }
.grey-line { height: 56px; width: 1px; background: #D9D9D9; margin-left: 7px; margin-right: 7px; display: flex; align-self: center; }
input[type="number"] { -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; }
.arrow-min-max { display: flex; }
.input-wrapper .left { transform: rotate(90deg); position: absolute; right: 22px; top: 20px; font-size: 16px; color: #D2D2D2;}
.input-wrapper .right { transform: rotate(-90deg); position: absolute; right: 12px; top: 20px; font-size: 16px; color: #D2D2D2; }
.badges-col-1 { width: 55%; display: flex; align-items: center; }
    .badges-col-1 .c { display: flex; display: flex; /*flex-direction: column;*/ width: 100%; gap: 5px; margin: 0;}
        .badges-col-1 .c .i { margin-left: 0px; margin-bottom: 3px; display: flex; /*flex-direction: row-reverse*/ align-items: center; justify-content: space-between; padding: 0 15px; }
.badges-col-2 { display: block; }
.drop-box-dealer::-webkit-scrollbar { width: 4px; }
.drop-box-dealer::-webkit-scrollbar-thumb { background-color: #f0f0f0; border-radius: 5px; }
.list-search-div::-webkit-scrollbar { width: 4px; }
.list-search-div::-webkit-scrollbar-thumb { background-color: #f0f0f0; border-radius: 5px; }
#filters-collect-cv { /* text-wrap: nowrap; overflow: auto;*/ width: 100%; display: flex; align-items: center; margin-bottom: 10px;}
    #filters-collect-cv::-webkit-scrollbar { height: 4px; }
    #filters-collect-cv::-webkit-scrollbar-thumb { background-color: #f0f0f0; border-radius: 5px; }
    .badges-col-3 { display: flex; justify-content: end; }
        .badges-col-3 p { display: none;}
        .view-as-text { margin-right: 30px; align-self: center; margin-right: 10px; }
.columns-text { margin-right: 10px; }
.view-select-div { display: flex; align-items: center; }
.inner-col-one { display:flex; justify-content: space-evenly; }
.inner-col-two { display: flex; justify-content: space-evenly; margin-top: 20px; }
.col-grid-view-select { cursor:pointer; width: 30px; height: 30px; background-color: #D9D9D9; border-radius: 7px; margin-right: 10px; display: flex; align-items: center; justify-content: center; }
.grid-box .material-symbols-outlined { font-size: 20px; }
/*.col-box { background-color: #C51412; color: white; }*/
/*.col-box .material-symbols-outlined { color: black; font-size: 20px; }*/
.selected-box { background-color: #C51412; color: white !important; }
    .selected-box .material-symbols-outlined { color: white; }
.reset-button-div { width: 100%; display: flex; justify-content: end; padding-right: 10px;  }
/*.clear-filters-div { width: 130px; justify-content: space-between; height: 40px; background-color: var(--accent-btn-color);*/ /*border: #F2F2F2 solid 1px;*/ /*color: white; margin-top: 0px; display: flex; align-items: center; padding: 0 15px; font-weight: 500; margin-left: 15px; font-weight: 500; border-radius: 10px; }*/
.clear-filters-div { opacity: 0.5; pointer-events: none; }
.clear-filters-div { display: inline-flex; align-items: center; gap: 8px; /* Spacing between text and icon */ border: 1px solid #0A30FF; /* blue-500 */ color: #0A30FF; /* blue-600 */ background-color: #eff6ff; /* blue-50 */ padding: 8px 16px; /* py-2 px-4 */ border-radius: 6px; /* rounded-md */ cursor: pointer; transition: background-color 0.2s ease-in-out; font-size: 1rem; /* Default font size */ }

    .clear-filters-button:hover { background-color: #dbeafe; /* blue-100 */ }
 .clear-filters-div.active { opacity: 1; pointer-events: auto; }
#cars-grid { display: flex; width: 100%; flex-wrap: wrap; justify-content: end; }
.grid-menu { display: none; background-color: white; min-height: fit-content;  border-radius: 10px; }
.add-margin-filters { display: none; }
/*.drop-status-div, .drop-color-div, .drop-monthly-div, .drop-msrp-div, .drop-term-div, .drop-mileage-div, .add-margin-filters { display: none !important; }
*/
.filters-grid-div { display: flex; flex-direction: column; padding-left: 0px; padding-top: 5px; margin-top: 10px; background: var(--bg-color); }
.filters-Column { display: flex;  padding-left: 0px; padding-top: 0px; align-items: center; width: 100%; gap: 10px; }
.card { margin: 10px; height: 488px; width: 444px; background-color: white; padding: 20px 40px 20px 50px; border-radius: 10px; }
.interior-style{ margin-left: 10px;}
.card-circle { height: 10px; width: 10px; border-radius: 100%; margin-left: 10px; }
.color-ex-text { color: #999999; }
.card img { width: 80%; }
.card-title { font-size: 18px; }
.card-text { font-size: 16px; }
.card-top { border-bottom: 1.5px solid #cdcdcd; margin-top: 10px; margin-bottom: 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-top span { margin-bottom: 0px; }
    .card-top p { margin-top: 6px; color: #999999; }
.car-title { color: #000; font-family: Roboto; font-size: 19px; font-style: normal; font-weight: 700; line-height: normal; }
.card-body{ display: flex; margin-top: 10px;}
.card-body-row1 { width: 70% }
.card-body-row2 { width: 30% }
.card-body-title { color: #4d4d4d; font-family: Roboto; font-size: 13px; font-style: normal; font-weight: 700; line-height: normal; }
.card-body-text { color: #999999; font-family: Roboto; font-size: 13px; font-style: normal; font-weight: 400; line-height: normal; }
.card-body-title-margin { /*margin-top: 24px;*/ height: 25%;}
.selected-col-drop { width: 211px; height: 52px; background-color: white; border-radius: 10px; display: flex; align-items: center; justify-content: space-evenly; font-weight: 500; position: relative; cursor: pointer; }
.card-footer-btn { text-decoration: none; display: flex; width: 130px; padding: 10px; justify-content: center; align-items: center; gap: 10px; border-radius: 4px; background: var(--red, #C51412); color: white; border: none; }
.footer-price-text { color: #000; font-family: Roboto; font-size: 20px; font-style: normal; font-weight: 700; line-height: normal; opacity: 0.4000000059604645; }
.footer-price-header { margin-bottom:4px; color: var(--black, #000); font-family: Roboto; font-size: 13px; font-style: normal; font-weight: 700; line-height: normal; }
.select-col-drop-box { display: none; width: 211px; height: fit-content; background-color: #f5f5f5; border-radius: 10px; position: absolute; z-index: 2; margin-top: 10px; }
.card-footer { display: flex; justify-content: space-between; border-top: 1.5px solid #cdcdcd; padding-top: 20px; margin-top: 20px; margin-bottom: 20px; }
.footer-price { display: flex; flex-direction: column;}
.col1-div { display: flex; margin-top:15px;}
.col1-div-child { width: 50%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.right-grid-div { width: 80%}
.car-inventory { height: 20%}
.car-monthly { margin-top: 0px;}
.engine-trans-text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 2; -webkit-box-orient: vertical; }
.car-engine { height: 40%; }
.left-grid-div { width: 20%;  }
    .check-container { margin-left: 15px; display: block; position: relative; padding-left: 35px; margin-bottom: 35px; cursor: pointer; font-size: 16px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
    .check-container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: white; border-radius:5px; }
.check-container:hover input ~ .checkmark { background-color: #ccc; }
.check-container input:checked ~ .checkmark { background-color: #C51412; }
.checkmark:after { content: ""; position: absolute; display: none; }
.check-container input:checked ~ .checkmark:after { display: block; }
.checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
.check-container-top { margin-top: 20px; }
/*th.header-center-text { text-align: center !important; }*/

.check-span-fw { font-weight: bold;}
.filter-name-marg { display: flex; justify-content: space-between; font-size: 18px !important; font-weight: 500; color: #0A30FF; }
.col-2-btns { width: 100%; height: 44px; color: var(--text-color); border-radius: 4px; border: none; display: flex; justify-content: space-between; align-items: center; padding: 0 15px; font-weight: 500; background: #E9F2FF; }
.icon-name { display: flex; }
.drop-color-btn { width: 100%; }
.plus-minus { font-size: 18px; }
.remove-icon { display: none;}
.icon-filter-text { display: flex; align-items: center; margin: 0 7px; font-size: 16px; font-weight: 500; white-space: nowrap; }
#cars { font-size: 14px; overflow: hidden; border-spacing: 0px; background: var(--cars-bg); display: none; box-shadow: 0px 10px 15px -5px rgba(186, 201, 255, 0.34),0px 10px 15px -5px rgba(186, 201, 255, 0.34),0px 0px 15px -4px rgba(186, 201, 255, 0.34); }
    #cars > thead > tr > th { text-align: center; /*background: black;*/ background: #ff000000; color: #25293a; border: none; white-space: nowrap; padding-top: 10px; padding-bottom: 10px; /*border-right: #565656 1px solid;*/ justify-content: center;}
        #cars > thead > tr > th:last-child { border-right: #bbbbbb6b; border-top-right-radius: 10px; }
/*.bg-msrp { background: var(--pillar-color) !important; }*/
        #cars > thead > tr > th::before { opacity: 1; display: none; }
        #cars > thead > tr > th::after { opacity: 1; display: none; }
        /* Show sort arrows only on sortable columns (Best Monthly, MSRP, Trim, ODO, Days in Inv) */
        #cars > thead > tr > th.sorting::before,
        #cars > thead > tr > th.sorting_asc::before,
        #cars > thead > tr > th.sorting_desc::before,
        #cars > thead > tr > th.sorting::after,
        #cars > thead > tr > th.sorting_asc::after,
        #cars > thead > tr > th.sorting_desc::after { display: inline-block !important; }
#cars > tbody > tr > td { color: var(--text-color); /*border-bottom: 8px solid #1b1b1b;*/ /*border-right: #565656 solid 1px;*/ border-top: none; border-bottom: none; height: 134px; width: 125px; text-align: center; align-items: center;  }
#cars > tbody > tr > td:last-child { border-right: none; }
.even td { padding-top: 8px !important; padding-bottom: 8px !important;  }
.even { background: #f9f9f9 !important; }
        #cars > tbody > tr > td:last-child { text-align: center; }
.no-image-class { text-align: center;}
#cars > tbody > tr > td.title-column-change { text-align: left; }
#cars > tbody > tr > td.dealer-title-info { text-align: left; }
#cars img { width: 100%; cursor: pointer; display: block; padding-top: 3px; padding-bottom: 3px; height: 89px; width: auto; border-radius: 10px; }
    #cars .wd-w { margin-top: 5px; display: flex; justify-content: center; }
#cars .wd { background: var(--accent-btn-color); border-radius: 10px; color: white; /* padding: 5px;*/ cursor: pointer; transition: background .3s; text-decoration: none; height: 38px; display: flex; align-items: center; width: 90px; justify-content: space-evenly; }
      /*  #cars .wd:hover { background: #625DF5; }*/
    #cars .vin { margin-top: 0px; margin-bottom: 5px; }
        #cars .vin > a { font-size: 13px; opacity: 0.7; text-decoration: underline; color: var(--text-color); }
#cars .colors > .col > .circle-w { display: inline-block; border: solid 1px #25293a; padding: 2px; border-radius: 20px; vertical-align: -4px; }
        #cars .colors > .col > .circle-w > .circle { width: 10px; height: 10px; border-radius: 10px; }
    #cars .colors > .col > .t { width: 30px; display: inline-block;  }
    #cars .colors { display: flex; justify-content: start; flex-direction: column; }
    #cars .colors .col { margin-bottom: 10px; }
.col-colors { display: flex; align-items: center;}

/* #cars .colors > .col:not(:first-child) { margin-top: 8px; }*/
#cars .stock-num { font-size: 13px; opacity: 0.7; color: #10131e; }
    #cars .window-sticker { font-size: 13px; opacity: 0.7; text-decoration: underline; color: #10131e; display: block; }
    #cars .monthly-info { vertical-align: -6px; margin-left: 5px; cursor: pointer; }
    #cars .mmr { text-decoration: none; }
.feature-search-div .drop-box { margin-bottom: 10px; padding: 10px; height: 100%; overflow: auto; background: var(--btn-bg-color); position: absolute; z-index: 2; right: 0px;  display: none; width: 49%; top: 0px; box-shadow:none; }
.drop-box-year { margin-bottom: 10px; padding: 10px; width: 200px; height: fit-content; background: var(--btn-bg-color);  /*position: absolute;*/ z-index: 2; margin-top: -10px; display: none; }
.drop-box-make { margin-bottom: 10px; padding: 10px; width: 200px; max-height: 600px; overflow-y: auto; overflow-x: hidden; background: var(--btn-bg-color);  /*position: absolute;*/ z-index: 2; margin-top: -10px; display: none; }
.drop-box-model { margin-bottom: 10px; padding: 10px; width: 200px; max-height: 600px; overflow-y: auto; overflow-x: hidden; background: var(--btn-bg-color); /*position: absolute;*/ z-index: 2; margin-top: -10px; display: none; }
.drop-box-trim { margin-bottom: 10px; padding: 10px; min-width: 400px; width: 400px; max-height: 600px; overflow-y: auto; overflow-x: auto; background: var(--btn-bg-color); /*position: absolute;*/ z-index: 2; margin-top: -10px; display: none; }
.drop-box-trim .t { overflow: visible; text-overflow: clip; white-space: normal; }
.drop-box-style { margin-bottom: 10px; padding: 10px; width: 200px; max-height: 600px; overflow-y: auto; overflow-x: hidden; background: var(--btn-bg-color); /*position: absolute;*/ z-index: 2; margin-top: -10px; display: none; }
.drop-box-drive { margin-bottom: 10px; padding: 10px; width: 200px; max-height: 600px; overflow-y: auto; overflow-x: hidden; background: var(--btn-bg-color); /*position: absolute;*/ z-index: 2; margin-top: -10px; display: none; }
.drop-box-status { margin-bottom: 10px; margin-top: 10px; padding-left: 0px; width: 100%; height: fit-content;  z-index: 2; margin-top: 0px; display: flex; text-align: center; }
    .drop-box-status .ck-2 { width: 40px; height: 20px; }
.drop-box-color { margin-bottom: 10px; padding: 10px; width: 200px; max-height: 600px; overflow-y: auto; overflow-x: hidden; background: var(--btn-bg-color);  /*position: absolute;*/ z-index: 2; margin-top: -10px; display: none; }
.drop-box-monthly { margin-bottom: 10px; text-align: center; padding: 0px 35px; height: fit-content;   /*position: absolute;*/ z-index: 2; margin-top: -10px; display: block; }
.drop-box-msrp { margin-bottom: 10px; text-align: center; padding: 0px 35px; width:100%; height: fit-content;   /*position: absolute;*/ z-index: 2; margin-top: -10px; display: block; }
.drop-box-term { margin-bottom: 10px; padding: 10px; width: 100%; height: 150px; background: var(--btn-bg-color);  /*position: absolute;*/ z-index: 2; margin-top: -10px; display: none; text-align: center; }
.drop-box-mileage { margin-bottom: 10px; padding: 10px; width: 100%; height: 150px; background: var(--btn-bg-color);  /*position: absolute;*/ z-index: 2; margin-top: -10px; display: none; text-align: center; }
.drop-box-dealer { color: var(--text-color);  margin-bottom: 10px;  padding-bottom: 10px; width: 475px; height: fit-content; background: var(--btn-bg-color); border-radius: 10px; /*border-top-left-radius: 0px; border-top-right-radius: 0px;*/ /*border: solid 1px black;*/ position: absolute; z-index: 200; margin-top: -46px; display: none; text-align: center; left: -5px; /*box-shadow: 10px 5px 5px #f5f5f5;*/ }
.dropdown { position: relative; cursor: pointer; }
.slider-head { font-size: 12px; font-weight: bold; }
.ui-slider-handle.ui-corner-all.ui-state-default:last-child { right: 0; }
/*.drop-box-padding { padding-left: 0px !important; }*/
.drop-box-color .c { margin-top: 0px; }
.bottom-filters { margin: auto; margin-top: 20px; }
.behind-filters { }
.drop-dealership-btn { display: none;}
.column-view { display: flex; }
.grid-view { display: flex; }
.move-drop-box .drop-box-dealer .i { font-size: 13px; text-align: left; margin-top: 10px; margin-left: 0px !important; line-height: 18px; }
.move-drop-box { display: none; width: 300px; height: fit-content; background: white /*#f1f1f1*/;  position: absolute; top: 45px; z-index: 40; color: black; left: 5px;}
.grid-container { width: 100%; display: flex; justify-content: end; justify-content: end; margin-top: 15px; margin-bottom: 7px; }
#cars_wrapper { margin-top: 0px; overflow: auto; margin: 0 25px; }
#cars_length { top: 0; right: 0; float: right; position: relative; z-index: 100; }
    #cars_length select { border: none; color: #25293a; font-size: 13px; font-weight: 500; border-radius: 5px; cursor: pointer; position: relative; z-index: 101; }
.has-images .img-cell { position: relative; text-align: center; padding: 0 5px; display: flex; align-self: center; justify-content: center; margin: 0 auto; }
    .has-images .img-cell > .in-transit { position: absolute; bottom: 0; left: 0; }
#cars { width: 100% !important;}
#import-date { position: absolute; /* top: 10px; */ font-size: 12px; /* margin-left: 40px; */ color: black; margin-top: -5px; }
/*#free-text-w { margin: 5px 0 5px 20px; }*/
#free-text { outline: none; border: none; padding: 5px 10px; border-radius: 4px; margin-right: 7px; height: 41px; }
.add-width-feed { width: 175px !important;}
.footer { display: none; }
.arrow-dealer { position: absolute; right: 8px; cursor: pointer; color: var(--text-color); top: 10px; }
.arrow-dealer-no-show { display: none; }
/*Header with search and vin*/
.vin-header { color: var(--text-color); height: 74px; width: 100%; top: 0; background: var(--bg-color); /* left: 220px; */ display: none; justify-content: flex-end; align-items: center; }
/*#free-text-w.mobile-only { display: none; }*/
#vin-msrp.mobile-only { display: none; }
/*#vin-msrp .fields { display: flex; }*/
#dealers-search-new { align-items: end; position: relative; margin-right: 0px; width: 95%; display: flex; margin-top: 15px; min-width: 200px; flex-shrink: 0; }
#dealers-search-new-btn { display: flex; align-items: center; position: relative; margin-right: 0px; }
.list-search-div { max-height: 400px; overflow-y: auto; padding-left: 20px; margin-top: 15px;  }
.clear-dealer-filter-div { padding: 10px 20px; border-top: 1px solid #e5e5e5; background: var(--btn-bg-color); }
.clear-dealer-filter-btn { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; padding: 8px 15px; background: transparent; border: 1px solid #dc3545; color: #dc3545; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.2s ease; }
.clear-dealer-filter-btn:hover { background: #dc3545; color: white; }
.clear-dealer-filter-btn .material-symbols-outlined { font-size: 18px; }

.clear-filter-div { padding: 10px 0 4px; border-top: 1px solid #e5e5e5; margin-top: 8px; }
.clear-filter-button { font-size: 13px; font-weight: 500; color: #0A30FF; cursor: pointer; text-decoration: underline; }
.clear-filter-button:hover { color: #1e40bf; }
.clear-filter-div.hidden { display: none; }
#selected-filters-box .remove-filter-btn { width: fit-content; margin-bottom: 7px; margin-top: 7px; }
.title-button-div { font-size: 16px; font-weight: 500; color: var(--search-head-color) }
.blue-box { color: white; cursor: pointer; width: 25px; height: 25px; background-color: var(--accent-btn-color); border-radius: 7px; display: flex; justify-content: center; align-items: center; }
.blue-box span { font-size: 15px; }
.title-button-div { display: flex; width: 90%; align-items: center; justify-content: space-between; margin: auto; margin-top: 5px; margin-bottom: 5px;   }
    .title-button-div.feature { justify-content: end;}
 #selected-filters-box::-webkit-scrollbar { height: 4px; width: 4px; }
#selected-filters-box::-webkit-scrollbar-thumb { background-color: #f0f0f0; border-radius: 5px; }
#selected-filters-box { width: 215px; max-height: 80px; display: flex; overflow-x: auto; overflow-y: auto; padding-top: 2px; padding-bottom: 2px; flex-wrap: wrap; }
#dealers-input-new { color: black; cursor: pointer; width: 100%; font-size: medium; background: #F9F9F9; position: relative; padding: 5px 10px; margin-left: 0px; height: 44px; border: none; border-left: none; padding-left: 0; border-left: none; }
    #dealers-input-new:focus { outline: none; }

.dealers-input-button { padding-left: 10px; color: var(--text-color); display: flex; justify-content: center; align-items: center; width: 46px; height: 44px; color: black; background: #F9F9F9; cursor: pointer; }
.search-input-button { padding-left: 10px; color: var(--text-color); display: flex; justify-content: center; align-items: center; border-radius: 10px; width: 46px; height: 44px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; cursor: pointer; border-right: none; }
.dealers-input-button .material-symbols-outlined { font-size: 24px; }
#dealers-search-new-btn #dealers-input-new { width: 100%; color: black; padding-left: 15px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-bottom: 1px solid #AFAFAF; border: none; border-left: none; background: white; border-bottom: 1px solid #AFAFAF; }
#dealers-search-new-btn .dealers-input-button { border-bottom-left-radius: 0px; border:none; border-bottom: 1px solid #AFAFAF; background: white; }
    #vin-msrp .fields input { width: 180px; height: 48px; border-radius: 10px; margin-right: 12px; }
#free-text-w { display: flex; align-items: center; } 
.move-drop-box-other { display: flex; width: 100%; }
.drop-box-other { width: 100%; }
.move-drop-box-status { width: 100%; }
/* .move-drop-box-other .drop-box-other .c .i { display: block !important;}*/
#free-text-w > #free-text { height: 44px; align-self: center; font-size: 16px; font-weight: 500; color: black; border-top-left-radius: 0px; border-bottom-left-radius: 0px; padding-left: 10px; width: 230px; border-left: none; padding-right: 52px; } 
#vin-msrp .btn-w button { width: 45px; height: 40px; }
.custom-deal-text { margin-left: 25px; display: flex; margin-right: 35px; cursor: pointer; }
.custom-deal-btn { user-select: none; height: 40px; display: flex; padding: 15px; justify-content: center; align-items: center; border-radius: 10px; background: #fff; cursor: pointer; display: none; }
.custom-deal-span { align-self: center; user-select: none; }
#left { display: none; }
.price-change::before { color: white; }
.price-change::after { color: white;}
.inner-container { padding-left: 0px; padding-right: 0px; }
.inner-container.grid-view { padding-left: 0; padding-right: 0px; }
.filters-grid-text { align-self:center;}
.feature-search-div { display: flex; width: 100%; }
.feature-search-div .col-2-btns { padding-left: 20px; }
.feature-search-div .drop-box,
.options-dropdown { padding: 14px 14px 14px 20px; border-radius: 10px; background: var(--btn-bg-color); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.feature-search-div .drop-box .c,
.feature-search-div .drop-box .list,
.feature-search-div .drop-box .i,
.options-dropdown .c,
.options-dropdown .list,
.options-dropdown .i { padding-left: 6px; }
.add-margin-filters { margin-bottom: 15px; margin-left: 15px; display: none; color: inherit; /* blue colors for links too */ text-decoration: inherit; /* no underline */ }
.grey-filters-box { width: 35.445px; height: 35.445px; flex-shrink: 0; border-radius: 10px; background: #F2F2F2; margin-right: 10px; display: flex; justify-content: center; align-items: center;}
.desk-arrow { font-size: 14px; color: black; align-self: center; }
.circle-arrow { width: 20px; height: 20px; background-color: white; border-radius: 100%; display: flex; justify-content: center; justify-items: center; }
.row-for-filters{ width: 100%}
#cars-grid ul { display: contents; list-style-type: none;}
.column-div-view { display: flex;}
.column-view-left { width: 15%; padding-top: 5px;}
.column-view-right { width: 100%;/* padding-right: 30px; padding-left: 30px; */padding-bottom: 150px; }
.mobile-menu-close { display: none;}
.menu-open-div { display: none; justify-content: center; }
#spinner-w { position: absolute; top: 50%; width: 100vw; text-align: center; }
.options-list-title { color: var(--text-color); display: flex; align-self: center; align-items: center; display: flex; cursor: pointer; position: relative; justify-content: space-between; padding: 10px 17px 10px 20px; font-size: 13px; border: 1px solid gray; height: 40px; }
.options-list { /*overflow-x: auto; overflow-y: hidden;*/ /*flex-wrap: wrap;*/ align-items: center;  display: flex; justify-content: space-around; display: flex; }
/*.option-list-drop-div { position: relative; }*/
.blue-circle-options { font-size: 11px; border-radius: 100%; width: 19px; height: 19px; background: var(--accent-btn-color); color: white; justify-content: center; align-items: center; position: absolute; right: 40px; display: none; top: 11px; }
.blue-circle-num-model { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.options-dropdown { overflow-x: auto; overflow-y: auto; display: none; width: 215px; max-height: 200px; background: var(--btn-bg-color); z-index: 100; padding: 20px 10px; margin-bottom: 15px; font-size: 12px; text-align: left; color: var(--text-color); }
    .options-dropdown::-webkit-scrollbar { width: 4px; }
    .options-dropdown::-webkit-scrollbar-thumb { background-color: #0A30FF; border-radius: 5px; }
  /*  .options-dropdown h2 { margin-left: 20px;}*/
    .options-dropdown .chk-1:checked:before { content: '\e876'; color: white; font-size: 21px; font-weight: 800; vertical-align: 1px; line-height: 1; font-family: 'Material Symbols Outlined'; }
    .options-dropdown .chk-1 { -webkit-appearance: none; min-width: 24px; height: 24px; border: solid 1px var(--check-border); border-radius: 5px; margin-right: 8px; vertical-align: -1px; }
    .options-dropdown .i { margin-bottom: 15px; }
    .options-dropdown .chk-1:checked { background: var(--accent-btn-color); }
.flip-arrow { color: #565656; font-size: 18px; }
.flip-now { transform: rotateX(180deg); }
.flip-now-2 { transform: rotateX(180deg);  }
.close-blue { display: none;}
.display-filters { display: none; }
.text-icon { display: flex; }
/*.make-options-list-of { display: flex; margin-bottom: 15px;}*/
.options-list-title { height: fit-content /*60px*/; /*background: #E9F2FF;*/ border: none; }
.options-list-margin { /*margin-bottom: 10px;*/ margin-left: 20px; margin-right: 20px; }
    .options-list-margin
.border-add { border-bottom: 2px solid #C51412; }
.remove-margin { border-top-left-radius: 0px; border-top-right-radius: 0px; border-top: 1px white solid; }

.add-entries { width: 15%; position: absolute; right: 10px; top: 60px; color: black; font-size: 13px; z-index: 100; }
.add-monthly { padding: 0px 0px; width: 100%; height: fit-content; background: #f5f5f5; border-radius: 0px; /*position: absolute;*/ z-index: 2; margin-top: 0px; display: flex; flex-direction: column;}
.dealers-menu-open-div { display: none; }
.left-mobile-menu-close { display: none; }
.fbo-settings-div { cursor: pointer; display: flex; margin-right: 0px; text-decoration: none; color: white; }
.fbo-settings-icon { width: 44px; height: 44px; border-radius: 5px; background: #237FFF; color: white; display: flex; justify-content: center; align-items: center; }
.fbo-span-text { display: flex; justify-items: center; align-items: center; }
.setting-profile-div { display: flex; margin-right: 0px; align-items: center; }
.fbo-red-circle { width: 54px; height: 54px; background: #C51412; border-radius: 100%; color: white; display: flex; justify-content: center; align-items: center; margin-right: 20px; margin-left: 20px; }
.fbo-header { color: var(--gray, #F1F1F1); font-family: Roboto; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; }
.fbo-sub-header { color: var(--gray, #F1F1F1); font-family: Roboto; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }
.fbo-text { display: flex; flex-direction: column; }
.fbo-profile-div { cursor: pointer; display: flex; text-decoration: none; color: white; }
.settings-text { margin-top: 10px; }
.vin-logo-header { text-decoration: none; color: white; cursor: pointer; }

svg { margin-right: 10px; }
.zip-code-div { margin-right: 15px; align-items: center; color: var(--text-color) }
#deals-links a { color: black; }
.drop-down-arrow { color: white; align-self: center; }
#drop-settings { position: relative; }
.settings-menu { color: black; }
#reports-links a { color: black; }
.rotate-arrow { transform: rotate(180deg); }
.deals-header { border-bottom: 1px solid #e1e1e1; padding-bottom: 8px; }
.my-profile { margin-bottom: 15px; }
.add-margin-deals { margin-top: 20px; }
.settings-link { display: flex; text-decoration: none; color: black; margin-top: 0px; margin-bottom: 10px; align-items: center; }
.my-profile span { display: none; }
.add-margin-settings { margin-left: 7px; }
#deals-links > a:hover { background: #f2f2f2; }
#reports-links > a:hover { background: #f2f2f2; }

.grid-item-a { grid-area: header; border-left: solid 1px #D2D2D2; border-bottom: solid 1px #D2D2D2; }
.grid-item-b { /*grid-area: main;*/ border-left: solid 1px #D2D2D2; overflow: auto; height: 100vh;/*padding-bottom: 200px;*/ }
.grid-item-c { grid-area: sidebar; border-bottom: solid 1px #D2D2D2; }
.grid-item-d { grid-area: sidebar2;  position: relative; height: fit-content; }
.grid-item-e { grid-area: sidebar3; margin: auto; height: 100%; text-align: center; flex-direction: column; align-items: center; position: relative; width: 100%; /*overflow-x: auto;*/ }
    .grid-item-e::-webkit-scrollbar { width: 4px; }
    .grid-item-e::-webkit-scrollbar-thumb { background-color: #5671ff; border-radius: 5px; }
.new-grid-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* Shown only after dashboard.js relocates header widgets (width <= 500) */
.results-go-zip-mobile { display: none; }
.number-inner { display: flex;  }
.make-grid-smaller { grid-template-columns: 0% 100%; }

.menu-open-button { display: none; }
.close-open-btn { width: 60px; height: 60px; background: grey; color: white; display: flex; justify-content: center; align-items: center; margin-left: 30px; border-radius: 6px; cursor:pointer; }
.close-blue span { font-size: 30px; }
.number-input-label { font-size: 15px; font-weight: 700; margin-left: 10px; color: var(--text-color); text-align: left; }
.best-msrp {  /*background-color: var(--pillar-color) */}
.for-entries { display: flex; justify-content: center; display: none; }
#filter { max-height: 76vh; }
/*.blue-circle-dealer { display: none; }*/
.blue-circle { font-size: 11px; border-radius: 100%; width: 19px; height: 19px; background: var(--accent-btn-color); color: white; display: flex; justify-content: center; align-items: center; position: absolute; right: 2px; top: -8px; }
.blue-circle-dealer { font-size: 11px; border-radius: 100%; width: 19px; height: 19px; background: var(--accent-btn-color); color: white; display: flex; justify-content: center; align-items: center; position: absolute; right: 74px; }

.paginate_button, .previous{ background: red; }
.change-bottom-border-btn { border-bottom-right-radius: 0px;  border-bottom-left-radius: 0px}
.footer { position: fixed; bottom: 0px; border-top: 1px var(--accent-btn-color) solid; width: 269px; height: 60px; background: var(--bg-color); justify-content: center; box-shadow: 0px -41px 71px 43px var(--bg-color),0px 10px 15px -3px rgba(0,0,0,0.1); }
.no-shadow { box-shadow: none; }
.border-remove { border-bottom: none; }
.hide-the-div { display: none; }
.dataTables_length { }
.dark-light { padding: 10px 15px; width: fit-content; background: #E9E9E9; color: white; cursor: pointer; width: 75px; height: 40px; border-radius: 20px; display: flex; justify-content: space-around; align-items: center; }
.dark { color: #949494; min-height: 30px; min-width: 30px;  border-radius: 100%; display: flex; justify-content: center; align-items: center; cursor: pointer; }
.light { color: #949494; min-height: 30px; min-width: 30px; border-radius: 100%; display: flex; justify-content: center; align-items: center; cursor: pointer; }
.mode-selected { background: black; color: white; }
.dark span { font-size: 18px; }
.light span { font-size: 18px; }
.input-wrapper input { background-color: white; }
.hide-for-now { display: none; }
#cars_info { color: var(--text-color)}
.paginate_button .previous { display: none; }
#feature-filters-div { width: 850px; /*height: 38px;*/ display: flex; padding-top: 2px; padding-bottom: 2px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
    #feature-filters-div::-webkit-scrollbar { height: 4px; width: 4px; }
    #feature-filters-div::-webkit-scrollbar-thumb { background-color: var(--accent-btn-color); border-radius: 5px; }
    #feature-filters-div .remove-filter-btn { width: fit-content; margin-bottom: 7px; margin-top: 7px; }
.scroll-btn span { position:absolute; right: 25px; bottom: 55px;  color: var(--scroll-btn-text); background: var(--scroll-btn); font-size: 15px; width: 25px; height: 25px; border-radius: 100%; display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 100; }
.scroll-btn { display: none; }
.scroll-btn-arrow { transform: rotate(90deg); }
.scroll-btn-arrow-up { transform: rotate(-90deg); }
#vin-msrp .blue-circle { display: none; }
.cd-filters-drop-2 { display: none; margin-right: 15px; margin-bottom: 0px;}
    .cd-filters-drop-2 .col-2-btns-new { margin-bottom: 0px; }
.col-2-btns-new { cursor:pointer; width: 140px; height: 40px; background-color: var(--btn-bg-color); color: var(--text-color); border-radius: 10px; border: none; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; padding: 0 15px; font-weight: 500; /*margin-left: 15px;*/ }
.drop-year-div-cd { position: relative; }
.drop-make-div-cd { position: relative; }
.drop-model-div-cd { position: relative; }
.drop-trim-div-cd { position: relative; }

.drop-year-div-cd .drop-box-year { position: absolute; left: 0; top: 55px; border-radius: 10px; }
.drop-make-div-cd .drop-box-make { position: absolute; left: 0; top: 55px; border-radius: 10px; }
.drop-model-div-cd .drop-box-model { position: absolute; left: 0; top: 55px; border-radius: 10px; }
.drop-trim-div-cd .drop-box-trim { position: absolute; left: 0; top: 55px; border-radius: 10px;}
/*.left { display: none; }
.right { display: none; }*/
.dark-light { display: none; }
.pag-arrows { font-size: 14px; color: white; display: flex; justify-content: end; align-self: center; }
.paginate_button { margin-right: 10px !important;}
.dataTables_wrapper .dataTables_paginate { text-align: right; float: right; }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active { max-width: 30px; height: 30px; border-radius: 6px; background: black; color: white; }
    .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: #1B1B1B; color: white; border: white 1px solid; height: 30px; min-width: 30px; width: auto; padding: 5px 10px; box-sizing: border-box; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate { margin-top: 10px; }
    .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: #ff000000; border: solid 1px var(--pag-btn-bord); color: var(--text-color) !important; min-width: 30px; width: auto; padding: 5px 10px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
    .dataTables_wrapper .dataTables_paginate .paginate_button { color: #25293A !important; }
        .dataTables_wrapper .dataTables_paginate .paginate_button { width: fit-content; height: 30px; min-width:30px; padding: 5px; }
            .dataTables_wrapper .dataTables_paginate .paginate_button:hover { border-radius: 6px; background: #25293a; }
             .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { border-radius: 6px; background: #25293a; }
            .previous { background: #25293A !important; border-radius: 6px !important; display: flex !important; justify-content: end !important; align-items: center !important; }
.next { background: #25293A !important; border-radius: 6px !important; display: flex !important; justify-content: end !important; align-items: center !important; }
#cars_paginate { display: flex; align-items: center; }
/*#filters { overflow-y: auto; }*/
.zipcode-flex { display: flex; margin-bottom: 0px; margin-top: 0px;  }
.pin-point { font-size: 22px;}
.zip-code { width: 100%; text-align: center; padding-left: 9px; }
.settings-icon { font-size: 21px; }

.cd-filters-drop { cursor: pointer; display: none; align-items: start; text-align: left; width: 140px; height: 40px; background: var(--cd-bg); border-radius: 10px; color: black; font-size: 15px; margin-right: 15px; padding-left: 20px; }

.fields .custom-deal-hide-div { display: none; }
.custom-deal-hide-div { display: none; }
table.dataTable.no-footer { border-bottom: none;}
/*.add-more-margin { margin-bottom: 25px; }*/
.best-montly-btn:hover span { display:none; }
.best-montly-btn:hover:before { content: "Click to Desk" }
.best-monthly-link { text-decoration: none; display: flex; justify-content: center; }
.dealer-title-info { text-align: left; padding-left: 26px;}
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody { border: none; }
    .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody::-webkit-scrollbar { height: 4px; width: 4px; }
    .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody::-webkit-scrollbar-thumb { background-color: #f0f0f0; border-radius: 5px; }
thead { background: #E9F2FF; color: black; }
.best-monthly-head { color: var(--accent-btn-color); display: flex; width: inherit !important;}
.first-header { border-top-left-radius: 10px; padding-left: 15px !important; }
th:last-child { /*border-top-right-radius:15px*/ }
.dataTables_scrollBody { border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; }
.dataTables_scroll { border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; }
.dealer-title-info { text-align: left; padding-left: 15px;}
td.msrp-bold { font-weight: 800; color: #757575 !important; /*padding-left: 25px !important;*/ }
td.body-td-padding { /*padding-left: 20px !important;*/ }
.dataTables_scroll { box-shadow: 0px 10px 15px -5px rgba(186, 201, 255, 0.34),0px 10px 15px -5px rgba(186, 201, 255, 0.34),0px 0px 15px -4px rgba(186, 201, 255, 0.34); }
.best-montly-btn { background: #eaeff9; border-radius: 10px; color: black !important; /* padding: 5px;*/ cursor: pointer; height: 44px; display: flex; align-items: center; width: 90px; justify-content: space-evenly; width: 105px; font-weight: 900; font-size: 16px; }
/*.number-input-divs { margin-top: 5px;  }*/
/*.badges-col-1 { display: none;}*/
.search-inputs-section { display: flex; width: 30%; }
.best-msrp-side { background: #E9F2FF; display: flex; height: 159px; margin: 0 25px; border-radius: 4px; padding: 0 30px; justify-content: space-between; }
table.dataTable thead .sorting_asc { background-image: url("../img/arrowUp.png"); }
table.dataTable thead .sorting_desc { background-image: url("../img/arrowDown.png"); }
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc_disabled:before { font-family: 'Material Symbols Outlined'; font-size:24px !important; right: 20px !important; content: "arrow_drop_up" !important; }
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after { font-family: 'Material Symbols Outlined'; content: "arrow_drop_down" !important; font-size: 24px !important; right: 20px !important; }

table.dataTable thead th { position: relative; background-image: none !important; }

/* #cars: same double-arrow on all sortable columns (sorting, sorting_asc, sorting_desc) */
#cars.dataTable thead .sorting_asc,
#cars.dataTable thead .sorting_desc { background-image: none !important; }
#cars.dataTable thead .sorting:before,
#cars.dataTable thead .sorting_asc:before,
#cars.dataTable thead .sorting_desc:before { font-family: 'Material Symbols Outlined'; font-size: 24px !important; right: 20px !important; content: "arrow_drop_up" !important; opacity: 1; }
#cars.dataTable thead .sorting:after,
#cars.dataTable thead .sorting_asc:after,
#cars.dataTable thead .sorting_desc:after { font-family: 'Material Symbols Outlined'; content: "arrow_drop_down" !important; font-size: 24px !important; right: 20px !important; opacity: 1; }
/* Grey out inactive arrow to show current sort direction */
#cars.dataTable thead .sorting_asc:after { opacity: 0.35; }
#cars.dataTable thead .sorting_desc:before { opacity: 0.35; }
/* Prevent arrow overlapping text: reserve space to the right of the label */
#cars.dataTable thead > tr > th.sorting,
#cars.dataTable thead > tr > th.sorting_asc,
#cars.dataTable thead > tr > th.sorting_desc { padding-right: 48px !important; }

.dataTables_wrapper .dataTables_paginate .ellipsis { cursor: pointer; color: black; }
.filter-area { display:flex; flex-direction: column; width: 100%; }
.add-msrp { width: 100%; }
.make-side-close { margin-left: 185px; }
table.dataTable thead > tr > th.sorting, table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc, table.dataTable thead > tr > th.sorting_asc_disabled, table.dataTable thead > tr > th.sorting_desc_disabled, table.dataTable thead > tr > td.sorting, table.dataTable thead > tr > td.sorting_asc, table.dataTable thead > tr > td.sorting_desc, table.dataTable thead > tr > td.sorting_asc_disabled, table.dataTable thead > tr > td.sorting_desc_disabled { padding-right: 10px;}
.make-sticky { width: 100%; display: none; }
.blue-circle-dealer.for-search-dealer { top: 27px; }
.show-filters-mobile { display: flex; margin: 0 25px; }
.filters-col-title-btn { display: none;}
.best-col-title-btn {display: none;}
.search-col-title-btn { display: none; }
.search-single-col-title-btn { display: none; }
#dealers-search-new .blue-circle-dealer { right: 45px; }
.mobile-msrp-text { display: none;}
.title-feed-span { margin-top: 10px; font-size: 12px; display: block; }
.stock-num-div { margin-top: 6px; font-size: 12px; opacity: 0.8; display: block; }
.add-import { display: none; }
.click-msrp { display: none}
.click-monthly { display: none;}
.pipe-mobile { display: none; }
/*.best-msrp-side { display: none; }
.grid-item-d { display: none; }*/
.has-images .odd { height: 134px; }
.has-images .even { height: 134px; }
/*.feature-search-div { display: none; }*/
.search-inputs-section { display: flex; }
.go-back-text { color: black; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.search-dealer-btn { width: 107px; height: 44px; border: 1px solid black; margin-top: 15px; padding: 7px; cursor: pointer; padding: 0 12px; }
.col-w.disabled + .color-name { color: #00000036; cursor: not-allowed; }
/*#f-color > .side > .c > .col-w.disabled { display: none; }
#f-color > .side > .c > .col-w { display: block;}*/
.button-filter-rest-div { display: flex; flex-direction: column; gap: 26px; }
.header-color .settings-dropdown { 
    display: none;
    overflow-y: auto;
    overflow-x: hidden;
    border: solid 1px #d6d6d6; 
    top: 50px; 
    max-height: calc(100vh - 60px);
    position: absolute;
    background: white;
    z-index: 100001;
    border-radius: 10px;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    right: 0;
    min-width: 200px;
}

.header-color .settings-dropdown.show-now {
    display: flex !important;
    flex-direction: column;
}
.two-btns { width: 120px; height: 44px; border-radius: 4px; display: flex; justify-content: center; align-items: center;  }
.filter-btn { color: #0A30FF; border: solid 1px #0A30FF; cursor: pointer; display: flex; flex-wrap: nowrap; white-space: nowrap; width: fit-content; padding: 0 15px; margin-top: 15px; position: relative; }
.filter-btn-selected { background: #0A30FF; color: white; }
    .reset-filters-btn { color: black; border: solid 1px black; }
.filter-drop-down { position: absolute; background: white; right: 83px; width: 655px; top: 16px; z-index: 100; border-radius: 10px; display: none; flex-direction: column; }
.show-filter-drop { display: flex; }
#options-list { flex-direction: column; gap: 5px; }
.go-search-btn { background: #0A30FF; width: 120px; height: 37px; border-radius: 4px; display: flex; justify-content: center; align-items: center; display: none; } 
.feature-search-div { position: relative; }
.filters-text-div { height: 50px; border-bottom: #DDE1E6 solid 2px; display: flex; padding-top: 17px; padding-left: 15px; }
.filters-text { font-size: 14px; font-weight: 400; color: #697077; }
.filter-area-parent { width: 50%; height: 100%; /*background: red;*/ border-right: #DDE1E6 solid 2px; padding: 15px 0px; }
.other-parent-div { width: 50%;  /*background: blue;*/}
.option-list-drop-div { width: 100%; }
body:not(.use-headerbar) .header-color { display: none !important; }
body:not(.use-headerbar) .desking-logo-mobile { display: none; }
body:not(.use-headerbar) .mobile-logo-area { display: none; }
body:not(.use-headerbar) .mobile-header-style { border-bottom: 1px solid #eaeaea; }
body:not(.use-headerbar) .desking-logo { text-decoration: none; color: var(--accent-btn-color); cursor: pointer; display: flex; height: auto; width: 230px; padding: 10px 15px; margin-left: 0px; justify-content: center; }

/* Header styles - ensure header is visible and positioned correctly */
body:not(.use-headerbar) header.mobile-header-style {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    z-index: 1000 !important;
    background: white !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure header appears at the top of #main and is visible */
body:not(.use-headerbar) #main > header.mobile-header-style:first-child,
body:not(.use-headerbar) #main header.mobile-header-style {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure header elements are visible on desktop */
body:not(.use-headerbar) header.mobile-header-style .header-column-mobile {
    display: flex !important;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
}

body:not(.use-headerbar) header.mobile-header-style .top-container {
    display: flex !important;
    align-items: center;
    width: 100%;
    gap: 10px;
}
.drop-box { z-index: 200; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); border: none; }
.filter-selected { background: #E6EAFF; border-radius: 4px; }
.go-button { 
    height: 44px; 
    min-width: 65px; 
    color: white; 
    background: #237FFF; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 4px;
    text-decoration: none;
    padding: 0 15px;
    gap: 5px;
    white-space: nowrap;
    display: none;
}
.clear-button { height: 44px; width: 131px; color: #3455ff; display: flex; align-items: center; justify-content: center; border: 1px solid #3455ff; border-radius: 4px; background: white; cursor: pointer; }
.filters-clear.clear-button { 
    display: flex !important; 
    align-items: center; 
    justify-content: space-between; 
    padding: 0 15px; 
    height: 44px;
    min-width: 131px;
    border: 1px solid #3455ff;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    color: #3455ff;
}
.reset-button { display: flex; align-items: center; justify-content: center; }
#cars tr td:first-child { padding-left: 40px; }
.filter-and-back { display: none; margin: 0 15px; justify-content: space-between; gap: 15px;  }
/*#cars tr td:last-child { padding-right: 40px; }*/
.options-text { margin-right: 15px; }
#f-other .i { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; }
#f-status { width: 100%; }
    #f-status .i { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; } 
.results-text { font-size: 16px; font-weight: 400; font-family: roboto; color: #237FFF; }
.number-results { font-size: 18px; font-weight: 700; color: #3455FF; margin-right: 12px; }
.background-status { background: white; padding: 15px; padding-top: 0px; padding-bottom: 0px; border-radius: 10px; padding-right: 10px; padding-left: 15px; }
.drop-status { display: none; }

.user-photo { display: none; }
.status-button { display: none; }
.number-container { display: flex; /* margin-bottom: 10px; */ align-items: center; justify-content: center; width: 235px; height: 40px; }
.user-photo { width: 44px; height: 44px; background: grey; color: white; display: flex; justify-content: center; align-items: center; }
.filters-text-clear { font-size: 14px; font-weight: 400; color: #697077; display: flex; justify-content: center; align-items: center; text-decoration: underline; }
.clear-filters-text-div { display: flex; justify-content: space-between; justify-items: center; height: 79px; align-items: center; border-top: #DDE1E6 solid 2px; padding: 0 20px; cursor: pointer; }
@media (max-width: 1024px) {
    .best-msrp-side { justify-content: space-between; flex-direction: column; padding: 20px; height: fit-content;}
    #filters-cv-container { flex-direction: column; align-items: start; }
    .move-search-dealer-button { position:absolute; right: 0; top: -25px; }
} 
@media (max-width: 500px) {
        #cars > tbody > tr > td.title-column-change { text-align: center}
        .move-search-dealer-button { position: relative; top: 0px; }
    .new-grid-container { height: 100vh; display: grid; display: grid; grid-template-columns: 100%; grid-template-rows: /*76px */ auto auto; grid-template-areas:
            "sidebar2"
            "sidebar3"
            "main"; }
    #main { overflow: auto; background: #E9F2FF }
    .grid-item-e { height: 100%; overflow: initial; display: flex; padding-bottom: 0px; width: 100%; }
    .button-filter-rest-div { display: none; }
    .title-button-div { display: none; }
    #mobile-header { display: none; }
    .grid-item-b { overflow: inherit; padding-bottom: 0px; }
    .col-2-btns { width: 85%; }
    #filters-cv-container .filter { width: 100%; }
    #filters-cv-container { flex-direction: column; }
    .filters-Column { width: 100%; padding-bottom: 0px; padding-top: 10px; }
    /*    .filter { display:flex; justify-content: center; }*/
    .column-view-right { padding-bottom: 20px; position: relative; width: auto; margin: 0 15px; }
    .row-for-filters-first { flex-direction: column; background: white; margin-bottom: 15px; display: none; }
    .search-inputs-section { width: 100%; }
    .number-inner { justify-content: center; }
    .number-input-label { margin-left: 27px; }
    .badges-col-1 { padding: 0 22px; }
    #options-list { display: flex; flex-direction: column; width: 100%; }
    .options-list { gap: 10px; }
    .option-list-drop-div { width: 100%; }
    .options-list-title { width: 100%; height: 40px; }
    .options-list-margin { margin-left: 0px; }
    .arrow-dealer { top: 10px; }
    .column-view-right { padding-bottom: 130px; }
    .badges-col-1 { padding: 0 25px; }
    #free-text-w { padding: 0 15px; margin-bottom: 26px; margin-right: 0px; }
    .dealer-title-info { display: -webkit-box; /*-webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;*/ }
    .filters-Column { display: flex; flex-direction: column; }
    .best-msrp-side { display: none; padding: 20px 0px; background: white; }
    .best-msrp-side { flex-direction: column; height: 100%; width: 100%; }
    .badges-col-1 { flex-direction: column; width: 100%; }
    .numbers-input-div-parent { flex-direction: column; }
    .input-wrapper input { background: #F9F9F9; }
    .badges-col-1 .c { flex-direction: column; }
    .row-for-filters-first { display: none; }
    .flip-arrow { position: absolute; right: 10px; font-size: 22px; }
    .filters-col-title-btn { display: none; justify-content: space-between; text-align: center; width: 85%; height: 25px; padding: 0px 28px; margin-bottom: 6px; color: black; cursor: pointer; background: white; border-radius: 7px; align-items: center; color: #2954ED; font-weight: 600; font-size: 16px; height: 60px; justify-content: center; position: relative; }
    .best-col-title-btn { display: flex; justify-content: space-between; width: 100%; height: 25px; padding: 0px 16px; color: black; cursor: pointer; background: white; border-radius: 7px; align-items: center; color: black; font-weight: 600; font-size: 16px; height: 60px; justify-content: start; position: relative; margin-top: 15px; font-weight: 500; }
    .status-button { display: flex; justify-content: space-between; width: 100%; height: 25px; color: black; cursor: pointer; background: white; border-radius: 7px; align-items: center; color: black; font-weight: 600; font-size: 16px; height: 60px; justify-content: start; position: relative; font-weight: 500; border-radius: 10px; }
        .status-button .flip-arrow { right: 0; }
    .search-col-title-btn { display: flex; justify-content: space-between; width: auto; height: 25px; padding: 0px 16px; color: black; cursor: pointer; background: white; border-radius: 7px; align-items: center; color: black; font-weight: 600; font-size: 16px; height: 60px; justify-content: start; position: relative; margin-top: 15px; font-weight: 500; }
    .search-single-col-title-btn { display: none; justify-content: space-between; height: 25px; padding: 0px 28px; margin-bottom: 6px; color: black; cursor: pointer; background: white; border-radius: 7px; align-items: center; margin: auto; color: #2954ED; font-weight: 600; font-size: 16px; height: 60px; justify-content: center; position: relative; }
    .move-search-here { position: relative; display: flex; justify-content: center; }
    .move-search-pop-up { position: relative; }
    .move-drop-box { width: 100%; }
    .drop-box-dealer { width: 100%; /*margin-top: -86px; */ left: 0; top: 0px; }
    .search-inputs-section { width: 100%; display: flex; flex-direction: column; }
    .blue-circle-dealer.for-search-dealer { top: 12px; }
    #dealers-search-new { width: 100%; min-width: 200px; }
    .feature-search-div { margin-bottom: 20px; }
    .add-entries { position: absolute; right: 14px; top: -3px; z-index: 100; }
    .dealer-title-info { display: none; }
    #cars img { width: 70px; height: auto; }
    #cars > tbody > tr > td { width: 90px; }
    #cars > tbody > tr > td { text-align: left; font-size: 9px; }
    #cars .vin > a { font-size: 10px; }
    .drop-box-year { width: 85%; background: #f0f8ff; border: black 1px solid; height: auto; }
    .drop-box-make { width: 85%; background: #f0f8ff; border: black 1px solid; height: auto; }
    .drop-box-model { width: 85%; background: #f0f8ff; border: black 1px solid; height: auto; }
    .drop-box-trim { width: 85%; min-width: 280px; background: #f0f8ff; border: black 1px solid; height: auto; }
    .drop-box-drive { width: 85%; background: #f0f8ff; border: black 1px solid; height: auto; }
    .drop-box-style { width: 85%; background: #f0f8ff; border: black 1px solid; height: auto; }
    .drop-box-color { width: 85%; background: #f0f8ff; border: black 1px solid; max-height: 280px; overflow-y: auto; }
    /* Mobile filter dropdowns: 250px height, scroll only when content overflows */
    .drop-box .c { max-height: 250px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
    /* Color filter: single column on mobile */
    #f-color > .side > .c { flex-wrap: nowrap; height: 100%;}
    .mobile-msrp-text { width: 100%; display: flex; justify-content: center; gap: 5px; margin-top: 5px; }
    .for-entries { display: none; }
    .add-import { display: flex; }
    .h1-black { color: black; }
    .click-msrp { display: flex; cursor: pointer; }
    .click-monthly { display: flex; cursor: pointer; }
    .best-monthly-desktop { display: none; }
    .pipe-mobile { display: flex; cursor: pointer; margin: 0 5px; }
    .first-header { border-top-left-radius: 0px; }
    .grid-item-d { display: none; }
    /* .remove-margin { margin-bottom: 0px; }*/
    thead { background: #cae0ff; }
    .no-radius-bottom { border-bottom-left-radius: 0px !important; border-bottom-right-radius: 0px !important; border-bottom: solid 1px #dedede; }
    .results-go-zip-mobile.results-go-zip-mobile--active {
        height: 40px;
        background: white;
        display: flex;
        margin: 0 15px;
        margin-top: 15px;
        border-radius: 10px;
        align-items: center;
        justify-content: space-between;
        padding-left: 6px;
        padding-right: 6px;
        margin-bottom: 0px;
    }
    .remove-desktop { display: none; }
    .move-zip-mobile .zip-code-div:last-child { display: none; }
    .number-container { background: white; justify-content: start; }
    .move-entries { width: 100%; display: flex; justify-content: end; }
    .add-entries { position: relative; right: 0; top: 0; z-index: 100; }
    .dataTables_length { width: 150px; display: flex; justify-content: end; position: relative; z-index: 100; }
    #filters-collect-cv { display: none; }
    #free-text-w { display: flex; margin-right: 0px; }
    /* Mobile header - blue background with logo and icons only */
    .mobile-header-style { 
        background: #3455ff !important; 
        display: block !important;
    }
    
    /* Show mobile logo area */
    .mobile-logo-area { 
        display: flex !important; 
        align-items: center;
        width: 100%;
        justify-content: space-between;
        padding: 0 15px;
    }
    
    /* Show header section with apps and user icons */
    .header-section { 
        display: flex !important;
        align-items: center; 
        gap: 10px; 
        height: 68px; 
        border-radius: 10px; 
    }
    
    /* Hide desktop logo on mobile */
    .desking-logo { 
        display: none !important; 
    }
    
    /* Hide desktop header content on mobile (legacy header only) */
    body:not(.use-headerbar) .header-column-mobile { 
        display: none !important; 
    }
    
    body:not(.use-headerbar) .remove-mobile { 
        display: none !important; 
    }
    
    /* Ensure header structure is correct on mobile (legacy header only) */
    body:not(.use-headerbar) header.mobile-header-style {
        display: block !important;
        background: #3455ff !important;
    }
    
    body:not(.use-headerbar) header.mobile-header-style .header-mobile {
        display: flex !important;
        align-items: center;
        height: 68px;
        padding: 0;
    }
    
    /* Show mobile logo (legacy header only) */
    body:not(.use-headerbar) .desking-logo-mobile {
        display: flex !important;
        align-items: center;
    }
    
    body:not(.use-headerbar) .desking-logo-mobile img {
        height: auto;
        max-height: 40px;
    }
    
    /* Hide arrow on mobile (legacy header only) */
    body:not(.use-headerbar) .arrow-header {
        display: none !important;
    }
    
    /* Ensure user photo and menu icons are visible - make user icon smaller (legacy header only) */
    body:not(.use-headerbar) .user-photo {
        display: flex !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }
    
    body:not(.use-headerbar) .menu-dropdown {
        display: flex !important;
    }
    
    /* Hide desktop header content containers (legacy header only) */
    body:not(.use-headerbar) header.mobile-header-style .top-container {
        display: none !important;
    }
    
    body:not(.use-headerbar) header.mobile-header-style .header-column-mobile {
        display: none !important;
    }
    #cars tr td:first-child { padding-left: 0px; }
    #cars > tbody > tr > td { height: 120px; position: relative; }
    .filters-text-div { justify-content: space-between; }
    .user-photo { margin-right: 0px; }
    .filter-and-back { display: flex; position: relative; }
    body:not(.use-headerbar) .menu-dropdown { cursor: pointer; }
    .filter-drop-down { top: 70px; }
    #cars_wrapper { margin: 0 0 }
    .blue-circle { right: 50px; top: 13px; }
    .clear-filters-div { height: 44px; border-radius: 4px; margin-top: 15px; margin-left: 0px; }
    .show-filters-mobile { margin-left: 0px; margin-right: 0px; }
    .options-text { display: none; }
    .search-dealer-btn { width: 85px; }
    .close-mobile { color: black; margin-right: 15px; cursor: pointer; }
    .filter-drop-down { right: 0; left: 0; width: 100%; margin: auto; }
    .clear-filters-div { gap: 10px; width: fit-content; }
    .number-container { width: fit-content; }
    .move-drop-box2 { position: relative; width: 100%; }
    .list-search-div { margin-left: 0px; padding-left: 10px; }
    .i > label { gap: 5px; }
    /* Dashboard dealer list: keep dealer names on one line with ellipsis on mobile */
    .drop-box-dealer .list-search-div .i {
        display: flex;
        align-items: center;
    }
    .drop-box-dealer .list-search-div .i .t {
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #free-text-w > #free-text { width: 100%; background: white; }
    .search-input-button { background: white; }
    #free-text-w { margin-top: 15px; margin-bottom: 0px; }
    .best-montly-btn { color: #0A30FF !important; border-radius: 4px; border: 1px solid #0A30FF; background: white; font-size: 14px; }
    .north-east-size { font-size: 16px; }
    #free-text { margin-right: 0px; }
    .dealers-input-button { border-radius: 4px; background: white; border-bottom-right-radius: 0px; border-top-right-radius: 0px; }
    #dealers-input-new { border-radius: 4px; background: white; border-bottom-left-radius: 0px; border-top-left-radius: 0px; }
    .header-color .settings-dropdown { 
        display: none;
        overflow-y: auto;
        overflow-x: hidden;
        border: solid 1px #d6d6d6; 
        top: 0px; 
        max-height: 100vh; 
        right: 0; 
        left: 0; 
        margin: auto; 
        width: 100% !important;
        position: fixed;
        z-index: 100001;
        background: white;
        border-radius: 0px;
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    }
    
    .header-color .settings-dropdown .settings-menu {
        width: 100% !important;
    }
    
    .header-color .settings-dropdown.show-now {
        display: flex !important;
        flex-direction: column;
    }
    
    .header-color .settings-dropdown-close {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 1;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 4px;
        color: #374151;
        border-radius: 6px;
    }
    .header-color .settings-dropdown-close:hover {
        background: #f3f4f6;
        color: #111;
    }
    .header-color .settings-dropdown-close .material-symbols-outlined {
        font-size: 24px;
    }
    body:not(.use-headerbar) .desking-logo-mobile { text-decoration: none; color: var(--accent-btn-color); cursor: pointer; display: flex; height: auto; width: 175px; padding: 10px 15px; margin-left: 0px; justify-content: center; }
}

/* Hide mobile elements on desktop */
.mobile-monthly-msrp-container {
    display: none !important;
}

.header-mobile-text {
    display: none !important;
}

.click-monthly,
.pipe-mobile,
.click-msrp {
    display: none !important;
}

/* Mobile sort indicators - hidden by default */
.mobile-sort-indicator {
    display: none;
    font-family: 'Material Symbols Outlined';
    font-size: 18px;
    margin-left: 2px;
    vertical-align: middle;
    pointer-events: none; /* Don't block clicks on parent */
}

@media (max-width: 500px) {
    /* Hide the separate monthly/msrp column on mobile */
    th.best-monthly-head,
    td.best-msrp:not(.msrp-bold) {
        display: none !important;
    }
    #f-interior { overflow: hidden !important; }
    #f-exterior { overflow: hidden !important; }
    /* Show mobile button and MSRP in title column */
    .mobile-monthly-msrp-container { display: flex !important; flex-direction: column !important; gap: 8px !important; margin-top: 8px !important; align-items: center; }
    
    .mobile-title-button {
        display: flex !important;
        justify-content: flex-start !important;
        width: fit-content !important;
    }
    
    .mobile-title-button .best-montly-btn {
        height: 32px !important;
        font-size: 13px !important;
        padding: 0 12px !important;
        width: auto !important;
        min-width: 100px !important;
    }
    
    .mobile-msrp-in-title {
        display: block !important;
        font-size: 12px !important;
        color: #666 !important;
        margin-top: 4px !important;
    }
    
    .mobile-msrp-in-title strong {
        font-weight: 600 !important;
        color: #333 !important;
    }
    
    /* Update header to show Title, Monthly, MSRP on mobile */
    .header-title-text {
        display: none !important;
    }
    
    .header-mobile-text {
        display: inline !important;
    }
    
    /* Hide desktop header text, show mobile version */
    .best-monthly-desktop {
        display: none !important;
    }
    
    .click-monthly,
    .pipe-mobile,
    .click-msrp {
        display: inline !important;
        cursor: pointer;
        position: relative;
    }
    
    /* Show mobile sort indicators on mobile */
    .mobile-sort-indicator {
        display: inline !important;
    }
    
    /* Hide all indicators by default */
    .mobile-sort-indicator::before {
        content: '';
    }
    
    /* Show up arrow when sorting ascending */
    .mobile-sort-indicator.sort-asc::before {
        content: 'arrow_drop_up';
    }
    
    /* Show down arrow when sorting descending */
    .mobile-sort-indicator.sort-desc::before {
        content: 'arrow_drop_down';
    }
}

/* ===================== Mobile car cards (≤500px) ===================== */
/* Desktop: cards + their control bar are never shown. */
@media (min-width: 501px) {
    #mobile-car-cards,
    #mobile-cars-controls { display: none !important; }
}

@media (max-width: 500px) {
    /* Hide the table itself; keep the wrapper so the relocated pager stays wired. */
    #cars { display: none !important; }

    /* Sticky control bar above the cards: relocated pager + sort field/direction. */
    /* Centered column of control rows: info, pager, then tools (sort + length). */
    #mobile-cars-controls {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        position: sticky;
        top: 0;
        z-index: 50;
        background: #E9F2FF;
        padding: 12px 10px;
        margin: 0;
        font-size: 13px;
    }
    #mobile-cars-controls .mcc-ctrl-info,
    #mobile-cars-controls .mcc-ctrl-pager,
    #mobile-cars-controls .mcc-ctrl-tools { width: 100%; display: flex; justify-content: center; align-items: center; }
    #mobile-cars-controls .mcc-ctrl-tools { gap: 12px; flex-wrap: wrap; }

    /* Normalize the relocated native DataTables controls to one font + no float. */
    #mobile-cars-controls #cars_info,
    #mobile-cars-controls #cars_length,
    #mobile-cars-controls #cars_length label {
        font-size: 13px;
        font-weight: 500;
        color: #25293a;
        margin: 0;
        padding: 0;
        float: none;
        text-align: center;
        white-space: nowrap;
    }
    #mobile-cars-controls #cars_length select {
        font-size: 13px;
        margin: 0 4px;
        border: 1px solid #ddd;
        border-radius: 6px;
        padding: 4px 6px;
        background: #fff;
        cursor: pointer;
    }

    /* Pager: centered, consistent buttons. Bar-scoped (#id) rules outrank the
       global `.paginate_button { background: red }` base rule that applied once
       the pager left .dataTables_wrapper. */
    #mobile-cars-controls #cars_paginate {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 6px;
        margin: 0;
        float: none;
    }
    #mobile-cars-controls .paginate_button {
        background: #fff !important;
        color: #25293a !important;
        border: 1px solid #d6deeb;
        border-radius: 6px;
        min-width: 30px;
        height: 30px;
        margin: 0 !important;
        padding: 4px 8px;
        font-size: 13px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
    #mobile-cars-controls .paginate_button.current {
        background: #3455ff !important;
        color: #fff !important;
        border-color: #3455ff;
    }
    #mobile-cars-controls .paginate_button:hover { background: #eef2fb !important; }
    #mobile-cars-controls .paginate_button.disabled { opacity: 0.4; }
    #mobile-cars-controls #cars_paginate .ellipsis { color: #25293a; padding: 0 2px; }

    .mcc-sort { display: flex; align-items: center; gap: 6px; }
    .mcc-sort-label { font-size: 13px; font-weight: 600; color: #25293a; }
    .mcc-sort-field {
        font-size: 13px;
        font-weight: 500;
        color: #25293a;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 6px;
        padding: 6px 8px;
        min-height: 36px;
        cursor: pointer;
    }
    .mcc-sort-dir {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 6px;
        color: #25293a;
        cursor: pointer;
    }
    .mcc-sort-dir .material-symbols-outlined { font-size: 20px; }

    /* Card list */
    #mobile-car-cards {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 8px;
    }
    .mobile-car-card {
        background: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 12px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .mcc-top { display: flex; gap: 12px; }
    .mcc-img { flex: 0 0 96px; }
    .mcc-img .car-img {
        width: 96px;
        height: 72px;
        object-fit: cover;
        border-radius: 6px;
        background: #f3f3f3;
    }
    .mcc-head { flex: 1; min-width: 0; }
    .mcc-title { font-size: 15px; font-weight: 700; color: #25293a; line-height: 1.2; }
    .mcc-vin, .mcc-stock, .mcc-days, .mcc-odo { font-size: 12px; color: #555; margin-top: 4px; word-break: break-all; }
    .mcc-vin-link { color: #3455ff; text-decoration: none; }
    .mcc-k { color: #888; font-weight: 600; }
    .mcc-badge {
        display: inline-block;
        font-size: 10px;
        font-weight: 600;
        padding: 1px 6px;
        border-radius: 10px;
        vertical-align: middle;
    }
    .mcc-badge--transit { background: #fff3cd; color: #8a6d00; }

    /* Primary CTA — the only tap target on the card */
    .mcc-cta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-top: 12px;
        min-height: 44px;
        padding: 0 14px;
        background: #007bff;
        border-radius: 8px;
        color: #fff;
        text-decoration: none;
        font-weight: 700;
    }
    .mcc-cta:hover, .mcc-cta:active { background: #0069d9; }
    .mcc-cta-monthly { font-size: 16px; font-variant-numeric: tabular-nums; }
    .mcc-cta-action { display: inline-flex; align-items: center; font-size: 13px; }
    .mcc-cta-action .material-symbols-outlined { font-size: 18px; }
    .mcc-msrp { margin-top: 8px; font-size: 13px; color: #25293a; font-variant-numeric: tabular-nums; }

    /* "More info" collapsible toggle */
    .mcc-more {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        width: 100%;
        margin-top: 10px;
        padding: 8px;
        background: #f5f7fb;
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        color: #3455ff;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
    }
    .mcc-more .material-symbols-outlined { font-size: 18px; }

    /* Secondary spec grid (collapsible under "More info") */
    .mcc-specs {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px 12px;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #eee;
    }
    .mcc-specs.mcc-collapsed { display: none; }
    .mcc-spec--full { grid-column: 1 / -1; }
    .mcc-spec { display: flex; flex-direction: column; font-size: 13px; color: #25293a; min-width: 0; }
    .mcc-spec .mcc-k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.02em; }
    .mcc-spec > span:last-child { overflow: hidden; text-overflow: ellipsis; }
    .mcc-colors { display: inline-flex; gap: 6px; align-items: center; }
    .mcc-dot {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 1px solid #ccc;
        display: inline-block;
    }
}

