/* ./Main TopBar Search & Filters Styling views/home.php, views/cars.php, views/car_details.php style */
 .section-bg:before {
    /* background-color: unset !important; */
    background-color: rgb(0 0 0 / 35%) !important;

}
/* background-color: rgba(0, 0, 0, 0.2); */
.CityFilterOptions,.makeMdlFilterOptions,.priceFilterOptions,.kmFilterOptions,.yearFilterOptions,.RegionalSpecsFilterOptions{ display:none;}
.formFilter {
background-color: #fff;
padding: 20px;
border-radius: 10px;
}


form {
max-width: 1100px;
width: 100%;
}

#veh_category_id,#veh_city_id,#veh_regional_id {
text-align: left; 
padding-left:8px;
}
/* Search Form */
.styled-input {
float: left;
background: #fff;
border: 1px solid #EFEFEF;
border-radius: 3px;
-webkit-box-shadow: inset 0 -1px 4px 0 rgba(0,0,0,0.20);
      box-shadow: inset 0 -1px 4px 0 rgba(0,0,0,0.20);
width: 100%;
position: relative;
margin-bottom: 10px;
font-family: "Lato", sans-serif;
}

.styled-input.multi {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: stretch;
  -ms-flex-align: stretch;
      align-items: stretch;
-webkit-box-pack: justify;
  -ms-flex-pack: justify;
      justify-content: space-between;
padding: 12px 0;
height: auto;
}

.styled-input label {
color: #292c89;
font-size: 0.9rem;
text-transform: uppercase;
font-weight: bold;
/* letter-spacing: 1px; */
position: absolute;
top: -15px;
left: 0;
-webkit-transition: all 0.25s cubic-bezier(0.2, 0, 0.03, 1);
-o-transition: all 0.25s cubic-bezier(0.2, 0, 0.03, 1);
transition: all 0.25s cubic-bezier(0.2, 0, 0.03, 1);
pointer-events: none;
}

.styled-input.multi label {
padding: 10px 0 0;
}

.styled-input.active {
border: 1px solid #D0E5BA;
-webkit-box-shadow: inset 0 -2px 4px 0 #D5EEBB;
      box-shadow: inset 0 -2px 4px 0 #D5EEBB;
}

.styled-input .icon--check, 
.styled-input .icon--error, 
.styled-input .chevron-down {
display: inline-block;
position: absolute;
top: 50%;
/* right: 2%; */
-webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
z-index: 0;
}

.styled-input .icon--check,
.styled-input .icon--error {
display: none;
}

.styled-input .icon--check {
right: 0%;
}

.styled-input input.success ~ .icon--check, 
.styled-input input.error ~ .icon--error {
display: inline-block;
}

.styled-input label.error,
.styled-input input:focus ~ label.error, 
.styled-input input#fn:valid ~ label.error,
.styled-input input#ln:valid ~ label.error {
font-size: 15px;
text-transform: none;
letter-spacing: normal;
color: #ff523d;
top: 53px;
left: -3px;
}

.styled-input.multi.error {
margin-bottom: 20px;
}

.styled-input.multi > div {
position: relative;
width: 100%;
border-right: 2px solid #ccc;
}

.styled-input.multi > div:nth-last-of-type(1) {
border-right: 0;
}

.styled-input.multi > div input,
.styled-input.multi > div label {
padding-left: 12px;
margin-top:5px;
}

.styled-input.multi > div input {
padding-top: 20px;
}


.styled-input input:focus, 
.styled-input textarea:focus, 
.styled-input select:focus {
outline: none;
}

.styled-input input, 
.styled-input textarea, 
.styled-input select {
color: #4A4A4A;
border: 0;
width: 90%;
font-size: 14px;
padding-top: 20px;
background: transparent;
}

.styled-input select {
width: 100%;
background: transparent;
border: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
z-index: 1;
left: 11px;
}

/* Focus Label */

/* .styled-input input:focus ~ label, 
.styled-input input#fn:valid ~ label, 
.styled-input input#ln:valid ~ label, 
.styled-input input#city[filled="true"]:valid ~ label, 
.styled-input #select-state label {
font-size: 13px;
letter-spacing: 1.56px;
color: #4A3B8F;;
top: -12.8px;
-webkit-transition: all 0.125s cubic-bezier(0.2, 0, 0.03, 1);
-o-transition: all 0.125s cubic-bezier(0.2, 0, 0.03, 1);
transition: all 0.125s cubic-bezier(0.2, 0, 0.03, 1);
} */

@media (min-width: 991px) {
.styled-input.multi {
height: 65px;
}
}

@media (min-width: 768px) and (max-width: 990px) {
.styled-input.multi {
height: 65px;
padding: 8px 0;
}
.styled-input.multi > div input {
padding-top: 18px;
}
.styled-input.multi label {
padding: 7px 0 0;
}
.styled-input input#fn:valid ~ label, 
.styled-input input#ln:valid ~ label, 
.styled-input input#city[filled="true"]:valid ~ label, 
.styled-input.multi input:focus ~ label,
.styled-input #select-state label {
top: -9px;
}
.styled-input.multi.error {
margin-bottom: 30px;
}
.styled-input label.error,
.styled-input input:focus ~ label.error, 
.styled-input input#fn:valid ~ label.error,
.styled-input input#ln:valid ~ label.error {
font-size: 13px;
top: 53px;
}
.search-area .form-area button.serach-btn {
height: 60px;
padding: 0;
}
}

@media (max-width: 767.98px) {
.examples [class^="col-"] {
padding: 0
}

.styled-input.multi > div {
background-color: #fff;
margin-bottom: 10px;
display: block;
border: 1px solid #EFEFEF;
border-radius: 3px;
-webkit-box-shadow: inset 0 -1px 4px 0 rgba(0,0,0,0.20);
        box-shadow: inset 0 -1px 4px 0 rgba(0,0,0,0.20);
width: 100%;
padding: 16px 16px 8px 11.2px;
height: 50px;
}

.styled-input.multi {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
border: 0;
-webkit-box-shadow: none;
        box-shadow: none;
background: transparent;
margin-bottom: 0;
}

.styled-input.multi > div label {
padding: 18px 0 0 12px;
}
.styled-input.multi > div input:valid ~ label,
.styled-input.multi > div input:focus ~ label,
.styled-input.multi #select-state > label {
padding-top: 15px;
}

.styled-input.multi > div input {
padding-left: 0;
padding-top: 2px;
position: relative;
z-index: 2;
width: 100%;
}
.styled-input select {
left: 0;
padding-top: 2px;
}

.styled-input.multi.error {
margin-bottom: 0;
}

.styled-input.multi > div.error {
margin-bottom: 30px;
}

.styled-input.multi > div.error label.error {
  padding-top: 0;
}
.col-topbarsearch
{
    display:none !important;
}
}

/* Button */

.no-pad-left-10 {
padding-left: 5px;
}

@media (max-width: 991px) and (min-width: 768px) {
.no-pad-left-10 {
padding-left: 0px;
margin-left: -5px;
width: calc(16.66666667% + 5px);
}
}

@media (max-width: 767px) {
.no-pad-left-10 {
padding-left: 15px;
margin-left: 0;
}
}

.form-area button.serach-btn {
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border: none;
font-size: 24px;
background: #221f1e9e;
text-align: center;
color: white;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1.01px;
width: 100%;
height: 70px;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
}

.form-area button.serach-btn:hover {
background: #cb1818fa;
-webkit-box-shadow: -2px -2px 4px -4px rgba(0, 0, 0, 0.02), 0 3px 9px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.14);
box-shadow: -2px -2px 4px -4px rgba(0, 0, 0, 0.02), 0 3px 9px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.14);
}

.form-area button.serach-btn:focus {
outline: none;
}

@media only screen and (max-width: 991px) {
.form-area button.serach-btn {
font-size: 20px;
height: 60px;
padding: 0;
}
}

@media only screen and (max-width: 767px) {
.form-area button.serach-btn {
font-size: 22px;
padding: 7px 20px;
width: 100%;
height: 50px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
margin-top: -12px;
margin-bottom: 20px;
}
}
/* ./filter form designs */
/* input - datalist */
input {
font-size: 18px;
padding: 5px;
height: 35px;
width: 100%;
border: none;
outline: none;
/* border-radius: 5px; */
/* color: blue; */
/*   border-bottom: none; */
}
datalist {
position: absolute;
background-color: white;
border: none;
border-radius: 0 0 5px 5px;
border-top: none;
width: 100%;
padding: 5px;
max-height: 10rem;
overflow-y: auto;
z-index: 11;

}

option {
background-color: white;
padding: 4px;
/* color: white; */
margin-bottom: 1px;
 /* font-size: px; */
cursor: pointer;
}

option:hover{
background-color: #1b6be3;
color: white;
cursor: pointer;
}

.suggestions-box {
/* border: 1px solid #ccc; */
border-top: none;
max-height: 150px;
overflow-y: auto;
background-color: white;
width: 100%;
position: absolute;
z-index: 1000;
text-align:left;
}

.suggestion-item {
padding: 8px;
cursor: pointer;
border-bottom: 1px solid #eee;
}

.suggestion-item:hover {
background-color: #1b6be3;
color: white;
}
#makemodel:focus {
    box-shadow: 0 0 0 .2rem rgb(0 0 0 / 0%) !important;
}


/* Price Range Dropdown Styling */
#price-range {
position: relative;
}

.price-toggle {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
padding: 10px;
/* border: 1px solid #ccc; */
border-radius: 8px;
background-color: #fff;
height: 28px;
}

.price-label {
font-weight: bold;
font-size: 16px;
color: #333;
}

.price-range-dropdown {
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 8px;
padding: 10px;
top: 100%;
left: 0;
width: 100%;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
z-index: 10;
}

.price-inputs {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}

.price-inputs label {
margin-right: 10px;
font-size: 14px;
}

.price-inputs input {
width: 45%;
padding: 5px;
border: 1px solid #ddd;
border-radius: 4px;
}

.apply-price-btn {
width: 100%;
text-align: center;
background-color: #333;
color: #fff;
padding: 8px;
border-radius: 4px;
cursor: pointer;
}

/* Chevron icon rotation */
.chevron-down {
transition: transform 0.3s ease;
}

.chevron-down.rotated {
transform: rotate(180deg);
}
/* @media only screen and (max-width: 768px) {
.makeDiv, .cityDiv, .regionalDiv, .priceDiv, .kmDiv{
    display: none !important;
}
} */
 /* ./Main TopBar Search & Filters Styling views/home.php, views/cars.php, views/car_details.php style */
.shareBtnsMainDiv {
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 16px;
}
.shareBtn {
    cursor: pointer;
    width: max-content;
    background: transparent;
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 25px;
}
.shareIcon {
    width: 40px;
    height: 40px;
}
@media (min-width: 768px) {
    .shareIcon:hover svg {
        --hoverBgColor: #17191C;
    }
}
.shareIcon:hover svg {
    --shareColor: #17191C;
    --shareOpacity: 0.3;
}
.fvrtBtn {
    cursor: pointer;
    width: max-content;
    background: transparent;
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 48px;
}
.shareBtnsMainDiv {
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 16px;
}
.shareBtnDiv {
    display: flex;
    flex-direction: row;
    padding: 16px;
    gap: 16px;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
}
.shareAnchor:focus {
    text-decoration: none;
}
.shareLinkDiv {
    display: flex;
    flex-direction: row;
    gap: 8px;
    -webkit-box-align: center;
    align-items: center;
}
.shareInputDiv {
    display: inline-flex;
    flex-direction: column;
    position: relative;
    min-width: 0px;
    vertical-align: top;
    padding: 0px;
    margin: 0px;
    border-width: 0px;
    border-style: initial;
    border-color: initial;
    border-image: initial;
    flex: 1 1 0%;
}
.shareInputChildDiv {
    letter-spacing: 0px;
    font-family: Apercu Pro, Apercu Pro Helvetica Fallback, Apercu Pro Arial Fallback, sans-serif !important;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.4375em;
    color: rgb(35, 38, 42);
    box-sizing: border-box;
    cursor: text;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    position: relative;
    border-radius: 6px;
}
.shareInputChildDiv .shareLink-input {
    font-weight: 600;
    padding: 13px;
    /* width: 332px; */
}
.sharelink-inputFieldset {
    text-align: left;
    position: absolute;
    inset: -5px 0px 0px;
    margin: 0px;
    padding: 0px 8px;
    pointer-events: none;
    border-radius: inherit;
    border-style: solid;
    border-width: 1px;
    overflow: hidden;
    min-width: 0%;
    border-color: rgba(0, 0, 0, 0.23);
}
.sharelink-inputFeildLegend {
    float: unset;
    line-height: 11px;
    overflow: hidden;
    padding: 0px;
    transition: width 150ms cubic-bezier(0, 0, 0.2, 1);
}
.sharelink-btnCopy {
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
    appearance: none;
    font-family: Apercu Pro, Apercu Pro Helvetica Fallback, Apercu Pro Arial Fallback, sans-serif !important;
    line-height: 1.75;
    min-width: 64px;
    color: rgb(255, 255, 255);
    background-color: #595c60bf;
    box-shadow: none;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.15px;
    text-transform: capitalize;
    width: 82px;
    height: 35px;
    outline: 0px;
    border-width: 0px;
    border-style: initial;
    border-color: initial;
    border-image: initial;
    margin: 0px;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1);
    padding: 12px 24px;
}
.shareLink-CopybtnText {
    margin: 0px;
    font-weight: 600;
    letter-spacing: 0px;
    font-family: Apercu Pro, Apercu Pro Helvetica Fallback, Apercu Pro Arial Fallback, sans-serif !important;
    font-size: 1rem;
    line-height: 1.75;
}
.share-socialBtns {
    display: flex;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    width: 70px;
    gap: 16px;
}
.share-socialBtnsText {
    margin: 0px;
    letter-spacing: 0px;
    font-family: Apercu Pro, Apercu Pro Helvetica Fallback, Apercu Pro Arial Fallback, sans-serif !important;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    color: rgb(58, 63, 71);
    text-transform: capitalize;
    text-align: center;
}
.MainDialogBox {
    z-index: 10002;
    position: fixed;
    width: 33.5rem;
    min-height: 200px;
    left: calc(50% - 240px);
    top: 0%;
    background: rgb(255, 255, 255);
    border-radius: 6px;
    border: 1px solid rgb(238, 240, 241);
    padding: 32px 64px;
    box-sizing: border-box;
    text-align: center;
    animation: 0.3s cubic-bezier(0, 0, 0.2, 1) 0s 1 normal none running animation-1sya3t8;
    font-family: proxima-nova, GE-SS, noto, "Helvetica Neue", Helvetica, Arial;
}
.shareBtnDiv-hr {
    margin: 0px;
    flex-shrink: 0;
    border-width: 0px 0px thin;
    border-style: solid;
    border-color: #595c60bf;
}
:root {
    --defaultBgColor: #d7d7d74a; /* Your default color */
    --hoverBgColor: #2f2f2f8f;   /* Color on hover */
}

/* Target the rect element on hover (within the SVG or the container) */
svg:hover rect {
    fill: var(--hoverBgColor);
}

@media (min-width: 0px) {
    .contactBtnMainDiv {
        gap: 16px;
        flex-direction: row-reverse;
    }
}
.contactBtnMainDiv {
  display: flex;
  /* flex-direction: column; */
  /* margin-top: 1rem; */
  width: 100%;
  -webkit-box-align: center;
  align-items: center;
  margin-bottom: 0px;
}
@media (max-width: 899.95px) {
  .contactBtnChat {
      width: 100% !important;
  }
}
.contactBtnChat {
  display: inline-flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  appearance: none;
  font-family: Apercu Pro, Apercu Pro Helvetica Fallback, Apercu Pro Arial Fallback, sans-serif !important;
  line-height: 1.75;
  min-width: 64px;
  box-shadow: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.25px;
  text-transform: capitalize;
  color: rgb(35, 38, 42);
  /* background-color: rgb(58 239 80 / 8%); */
  background-color: #29387e;
  height: 40px;
  outline: 0px;
  border-width: 0px;
  border-style: initial;
  border-color: initial;
  border-image: initial;
  margin: 0px;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1);
  padding: 8px 16px;
  flex: 1 1 0%;
}
.contactBtnChat > span:lang(en) {
  margin: 0px 8px 0px -4px;
}
.contactBtnSpan {
  display: inherit;
  margin-top: 15px !important;
  /* margin-right: 8px;
  margin-left: -4px; */
}
.contactBtnSpan > :nth-of-type(1) {
  font-size: 20px;
  color: #fff !important;
}
.contactBtnP:last-child {
  margin-bottom: 0px !important;
}
.contactBtnP {
  margin: 0px 0px 0px 4px;
  letter-spacing: 0px;
  font-family: Apercu Pro, Apercu Pro Helvetica Fallback, Apercu Pro Arial Fallback, sans-serif !important;
  /* font-weight: 400; */
  font-size: 1rem;
  line-height: 1.5;
  color:#fff;
}
@media (min-width: 0px) {
  .contactBtnCall {
      width: 100%;
  }
}
.contactBtnCall {
  display: inline-flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  appearance: none;
  font-family: Apercu Pro, Apercu Pro Helvetica Fallback, Apercu Pro Arial Fallback, sans-serif !important;
  line-height: 1.75;
  min-width: 64px;
  box-shadow: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.25px;
  text-transform: capitalize;
  color: rgb(35, 38, 42);
  /* background-color: rgba(255, 237, 234, 0.5); */
  background-color: #29387e;
  height: 40px;
  outline: 0px;
  border-width: 0px;
  border-style: initial;
  border-color: initial;
  border-image: initial;
  margin: 0px;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1);
  padding: 8px 16px;
  flex: 1 1 0%;
}
.contactBtnCall > span:lang(en) {
  margin: 0px 8px 0px -4px;
}
.contactBtnChat:hover {
  /* background-color: rgb(58 195 33 / 30%); */
  background-color: #269f10d4;
  border-color: unset;
  box-shadow: none;
}
.contactBtnCall:hover {
  /* background-color: rgba(255, 218, 212, 0.8); */
  background-color: #e00000;
  border-color: unset;
  box-shadow: none;
}


.CitymainDiv {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    z-index: 52;
    background-color: transparent;
    overflow: hidden;
    transition: box-shadow 0.25s ease-in;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px;
}
.cityForm {
    transition: transform 0.25s;
    background-color: white;
    border-radius: 8px 8px 0px 0px;
    height: inherit;
    display: flex;
    flex-direction: column;
    -webkit-box-pack: justify;
    justify-content: space-between;
    overflow: hidden;
    padding: 16px;
    transform: translate(0px, 0px);
}
.cityDiv2 {
    padding-bottom: 6px;
}
.cityDiv2DropdownHeader {
    border-bottom: 2px solid rgb(247, 247, 248);
    padding-bottom: 10px;
}
.citydiv2DropdownHeader2 {
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
}
.cityDivTitle {
    font-size: 16px;
    font-weight: bold;
    text-transform: capitalize;
    text-align: inherit;
    color: rgb(43, 45, 46);
}
.cityDivRevBtn {
    background-color: transparent;
    display: inline-flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    border-radius: 6px;
}
.cityDivDropdownContent {
    padding: 16px 0px;
    -webkit-box-flex: 1;
    flex-grow: 1;
    overflow: auto;
}
.cityDivDropdownContentDiv2 {
    display: flex;
    overflow-x: scroll;
    padding: 1px;
    scrollbar-width: none;
}
.cityDivDropdownContentDiv3.tagList.city, .cityDivDropdownContentDiv3.tagList.jobs.no-seo-link, .cityDivDropdownContentDiv3.tagList.jobs-wanted.no-seo-link {
    flex-wrap: wrap;
}
.cityDivDropdownContentDiv3 {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
}
.cityNameDivs {
    justify-content: space-around;
    cursor: pointer;
    width: max-content;
    margin-right: 10px;
    margin-bottom: 0px;
    display: block;
}
.cityDivBottomDiv {
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    border-top: 1px solid rgb(224, 225, 227);
    padding: 16px 16px 0px;
    margin: 0px -16px;
    background: white;
}
.cityDivBottomDiv > :first-of-type {
    flex: 1 1 0%;
}
.cityDivBottomDiv button {
    height: 48px;
}
.cityDivClearBtn {
    background-color: rgb(255, 255, 255);
    display: inline-flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    border-radius: 4px;
    min-height: 36px;
    font-size: 16px;
    color: rgb(107, 109, 112);
    border: 1px solid rgb(163, 166, 170);
}
.cityDivFilterBtn.applyButton {
    font-weight: 600;
}
.cityDivBottomDiv > :last-child {
    margin-left: 16px;
    flex: 3 1 0%;
}
.cityDivBottomDiv button {
    height: 48px;
}
.cityDivFilterBtn {
    display: inline-flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    border-radius: 4px;
    min-height: 36px;
    font-size: 16px;
    background: rgb(43, 45, 46);
    color: rgb(255, 255, 255);
    border: 1px solid transparent;
}



.mainDiv1FilterMV {
    display: flex;
    font-size: 18px;
    margin-right: -12px;
    /* margin-left: -12px; */
    overflow-x: auto; /* Allow horizontal scrolling */
    white-space: nowrap; /* Prevent wrapping of buttons */
}

.mainDiv2FilterMV {
    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping */
    justify-content: flex-start; /* Align buttons to the left */
    align-items: center;
    margin-left: 1rem;
    /* border: 1px solid #00000070;
    border-radius: 10px; */
    padding: 0.3rem;
}

.Filterbtn {
    background-color: rgb(245, 249, 254);
    justify-content: center;
    align-items: center;
    border-radius: 64px;
    padding: 8px 12px;
    white-space: nowrap;
    /* border: 1px solid rgb(137, 184, 246); */
    border: 1px solid rgb(0 0 0 / 78%);
    color: rgb(43, 45, 46);
    font-weight: bold;
    margin-right: 8px;
    display: flex;
    flex-shrink: 0; /* Prevent shrinking */
    font-size: 18px;
    margin-bottom:10px;
}
.Filterbtn:focus {
    background-color: rgb(242, 247, 254) !important;
    border: 2px solid #080808 !important;
}
.Filterbtn:last-child {
    margin-right: 0;
}

@media (max-width: 768px) {
    /* Adjust button size for smaller screens */
    .Filterbtn {
        padding: 6px 10px;
        font-size: 18px;
    }
}
@media (min-width: 758px)
{
  .mainDiv1FilterMV
  {
    display:none;
  }
}
.sepDiv {
    background-color: rgb(224, 225, 227);
    display: block;
    margin: 0px 8px;
}
.sepDiv::after {
    content: " ";
    height: 80%;
    width: 1px;
    display: block;
}




/* car details page css */
.cd_div1 {
    box-sizing: border-box;
    margin: 0px;
}
.cd_div2 {
    background: rgb(255, 255, 255);
    border-radius: 6px;
    border: 1px solid rgb(238, 240, 241);
    margin-bottom: 16px;
    padding: 16px;
    box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 16px;
}
.cd_div3 {
    box-sizing: border-box;
    margin: 0px 0px 16px;
}
.cd_div4 {
    display: flex;
}

.cd_div5 {
    box-sizing: border-box;
    margin: 0px;
    -webkit-box-pack: justify;
    justify-content: space-between;
}
.cd_div6 {
    font-family: proxima-nova, ProximaNova, noto, GESS, GE-SS, "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    letter-spacing: normal;
    color: rgb(98, 100, 101);
    margin: 0px;
    padding: 0px;
}
p:last-child {
    margin-bottom: 0px;
}
.cd_div7 {
    font-weight: 600;
}
.cd_div8 {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}
.cd_div9 {
    font-family: proxima-nova, ProximaNova, noto, GESS, GE-SS, "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    letter-spacing: normal;
    color: rgb(43, 45, 46);
    margin: 0px;
    padding: 0px;
}
.cd_div10 {
    max-height: 48px;
    max-width: 86px;
}
@media (min-width: 992px) {
    .cd_div11 {
        gap: 6px;
    }
}
.cd_div11 {
    width: 100%;
    display: flex;
    flex-flow: row-reverse wrap;
    gap: 8px;
}
.cd_div12.cd_div13.phone-number-shown {
    background-color: rgb(255, 255, 255);
    color: rgb(35, 38, 42);
    cursor: text;
    pointer-events: none;
}
.cd_div12.cd_div13 {
    flex-basis: 100%;
}
@media (min-width: 992px) {
    .cd_div12 {
        line-height: 26px;
        padding: 10px 16px;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
    }
}
.cd_div12 {
    padding: 11px 16px;
    font-size: 16px;
    line-height: 18px;
    gap: 6px;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(194, 196, 199);
    font-weight: 600;
    border-radius: 6px;
    color: rgb(35, 38, 42);
    text-align: center;
    min-width: 100px;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    flex: 1 1 0%;
}
@media (min-width: 768px) {
    .cd_div12.primary-cta > svg {
        --leadIconFill: #fff;
    }
}
@media (min-width: 768px) {
    .cd_div12.primary-cta:hover, .cd_div12.primary-cta:active {
        border: 1px solid rgb(242, 61, 61);
        background-color: rgb(242, 61, 61);
        color: rgb(255, 255, 255);
    }
}

.cd_div12:hover, .cd_div12:active {
    border: 1px solid rgb(224, 0, 0);
    background-color: rgb(224, 0, 0);
    color: rgb(255, 255, 255);
}
@media (min-width: 768px) {
    .cd_div12.primary-cta {
        border: 1px solid rgb(224, 0, 0);
        background-color: rgb(224, 0, 0);
        color: rgb(255, 255, 255);
    }
}
@media (min-width: 992px) {
    .cd_div12:not(:last-child) {
        margin-bottom: 8px;
    }
}


@media (min-width: 768px) {
    .premiumBadge {
        /* right: 0px; */
        left: unset;
        top: unset;
        padding: 2px 0px;
        display: flex;
        margin-top: -2.5rem;
    }
    .mui-premiumBadge-span1 {
        padding: 0.3rem;
        border-radius: 4px;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 10px;
        letter-spacing: 0.02em;
        text-align: center;
        margin-left: 5px;
        margin-right: 1.2rem;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        color: white;
        background: linear-gradient(95.78deg, rgb(61 139 255) 2.35%, rgb(21 7 241) 95.78%);
        /* background: linear-gradient(95.78deg, rgb(6 155 17) 2.35%, rgb(48 223 16) 95.78%); */
    }
}
.premiumBadge {
    position: absolute;
    display: flex;
    flex-shrink: 0;
    margin-top: -2.5rem;
    /* right: 0.2rem; */
}
.mui-premiumBadge-span1 {
    padding: 0.2rem;
    border-radius: 4px;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 10px;
    letter-spacing: 0.02em;
    text-align: center;
    margin-left: 5px;
    margin-right: 1.2rem;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    color: white;
    background: linear-gradient(95.78deg, rgb(61 139 255) 2.35%, rgb(21 7 241) 95.78%);
    /* background: linear-gradient(95.78deg, rgb(6 155 17) 2.35%, rgb(48 223 16) 95.78%); */
}
.mui-premiumBadge-span2 {
    background-color: unset !important;
    padding: 0.1rem;
}