/* ======================= search form ======================= */
.position_relatve { position:relative;}
.select_fleid:first-child { width: 72%; }
.search_form_topBanner{display: flex; flex-wrap: wrap;align-items: center;position: relative;}
.select_fleid{width: 13%;margin-right: 12px;}
.select_fleid:last-child{margin-right: 0;}
.select_fleid .open_make{ display: flex;align-items: center; border-radius:3px; font-size: 15px; color:#666666; background:	#ffffff; border:1px solid #666666;position: relative;padding: 11px 15px 8px;width: 100%; cursor: pointer;height: 43px;}
.open_make span{ position: absolute;top: -7px;left: 4px; background: #fff;  padding: 0 6px; font-size: 12px;}
.active-label {  color: #336eff !important; font-weight: bold; }
.select_fleid .sort-control{font-size: 14px;}
.select_fleid .open_make.active { border: 1px solid #006cfa;color: #336eff;}
.select_fleid .open_make.active span{color: #006cfa;}
.open_make:after {  height: 0; width: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #777; transform-origin: center center; transition: all 0.125s ease-in-out;  content: '';  display: block; margin-top: -2px; position: absolute; right: 10px; top: 50%; }
.open_make.active:after { transform: rotate(180deg); }
.filter_feild{    display: inline-block; border-radius: 3px; font-size: 13px; color: #666666; background: #ffffff; border: 1px solid #666666; position: relative; padding: 10px 20px; width: 100%;}
.filter_feild:focus{outline: none;border: 1px solid #006cfa;}
.search_btn{ text-align:center;line-height: 20px; background-color: #d9383d; font-weight: 500; font-size: 16px !important; color: #fff !important; padding: 11px 9px 10px !important; height:43px; transition: .5s; position: relative; width: 100%;position: relative; display: block;border-radius: 2px;font-weight: 700 !important; text-transform: uppercase;border: none;cursor: pointer;transition: all .5s;}
.search_btn:hover{background-color: #006cfa;}
.search_btn:hover, .search_btn:focus{color: #fff;outline: none !important;}
.search_btn input{border: none;outline: none;background-color: transparent;}
.more_filter{  padding: 20px 15px; border-radius: 5px; top: 44px;background: #fff; position: absolute; z-index: 1;right: 0px;/*overflow-y: auto;*/padding: 10px 10px 57px 10px !important;box-shadow: 0 2px 1px #f1f1f1; border: 1px solid #e9e9e9;box-shadow: 0 9px 10px rgba(0, 0, 0, .5);width: 100%;}
.more_filter_box{width: 100%; background-color: #fff; border-bottom: none;  max-width: 100%; min-width: 100%;height: calc(100vh - 25vw); /*height: 300px;*/overflow-y: scroll;scrollbar-width: thin;}
.searchPanelMainBox { margin-bottom: 20px; border-radius: 5px; }
.searchPanelMainBox:last-child{padding-bottom: 10px;}

.searchMainPanel{width: 100%;/*padding-bottom: 50px; position: relative;*/overflow-y: auto;}

.searchPanelTitle { display: flex; justify-content: space-between; align-items: center; padding: 10px; background-color: #e1e1e1; cursor: pointer; font-size: 14px; border-radius: 5px 5px 0 0;    font-weight: bold; }
.searchPanelTitle{ border-bottom: none; border: 1px solid #ddd; }
input[type="radio"]:checked + .searchPanelTitle .searchPanelArrow { transform: rotate(180deg); }
.searchPanelTitle.active { color: #333; font-weight: bold; border: 1px solid #8aa2dd; }

.searchPanelTitle .searchformrow1, .searchPanelTitle .searchformrow2, .searchPanelTitle .searchformrow3, .searchPanelTitle .searchformrow4{font-weight: 400 !important;font-size: 14px;color:#1616ff;}

.searchPanelArrow { transition: transform 0.3s ease; }
.searchPanelBoxDescription { display: none; padding: 15px 15px 2px; background-color: #fff; border-top: none; border: 1px solid #ddd; border-radius: 0 0 5px 5px; }

.searchPanelBoxDescription.active { background-color: #f1f5ff;border: 1px solid #8aa2dd; }
.selectForm{ padding: 0 5px !important; height: 35px; font-size: 14px; top: 0px !important; position: relative; display: block; width: 100%; line-height: 1.42857143; color: #555; background-color: #fff; border: 1px solid #ccc; border-radius: 4px; }
.selectRow{display: flex;flex-wrap: wrap;width: 100%;}
.selectCol{width: 24%;margin-bottom: 18px;margin-right: 1.2%;}
.selectCol:nth-child(4n){margin-right: 0%;}
.selectForm:focus{ outline: none; }
.searchPanelArrow { display: inline-block; transition: transform 0.3s ease; }
.searchPanelArrow.rotate { transform: rotate(180deg);}
.searchBtnBottom .btnsAll .btn-default-gray, .searchBtnBottom .btnsAll .btn-default{border-radius: 5px;}
.inputRadio span{display: flex;align-items: center;}

.inputRadio span{display: inline-flex !important; align-items: center;}
.inputRadio input{height: 18px; width: 18px; background-color: #fff; border: 2px solid rgba(36, 39, 44, .15); border-radius: 4px;margin: 0 8px 0 0; }
.inputRadio label{font-size: 15px;line-height: 15px;bottom: 0px !important;}
/* .discount_clr span{display: flex !important;align-items: c;} */
.searchBtnBottom{position: absolute;bottom: 0;left: 0;background-color: #fff;box-shadow: 0 0px 5px rgba(0,0,0,.5); width: 100%;display: flex;justify-content: space-between;padding: 10px 10px;align-items: center;}
.searchBtnBottom .btnsAll{display: flex;justify-content: space-between;align-items: center;}
.searchBtnBottom .btnsAll .resetBtn{border-radius: 5px;border: 1px solid #333;color: #000;padding: 10px 20px;background-color: #fff; margin-right: 10px;font-size: 15px;cursor: pointer;display: inline-block;transition: all .5s linear;}
.searchBtnBottom .btnsAll .SearchBtn{border-radius: 5px;border: 1px solid #336eff;color: #fff;padding: 10px 20px;background-color: #336eff;font-size: 15px;cursor: pointer;display: inline-block;transition: all .5s linear;}
.searchBtnBottom .btnsAll .resetBtn:hover{background-color: #333;border: 1px solid #333;color: #fff;}
.searchBtnBottom .btnsAll .SearchBtn:hover{background-color: #fff;border: 1px solid #336eff;color: #336eff;}   
.desktopsearchsuggestion{
	position:relative;
}
.desktopsearchsuggestion .suggestion-data {
	word-break: break-all;
	position: absolute;
	left: 0px;
	top: 44px;
	width: 100%;
	z-index: 999;
	background: #fff;
	padding: 0px 0px;
	border-radius: 4px;
	border: 1px solid #d8d8d8;
	height:auto;
}
.desktopsearchsuggestion .suggestion-data .suggestion-item {
	padding: 4px 6px;
}
.desktopsearchsuggestion .suggestion-data .suggestion-item svg {
	margin-right: 12px;
}
.skeleton-wrapper {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 300px;
	padding: 20px;
}
	
.skeleton-image {
	width: 100%;
	height: 180px;
	background: #e0e0e0;
	border-radius: 8px;
	animation: shimmer 1.5s infinite linear;
}
	
.skeleton-text {
	width: 100%;
	height: 20px;
	background: #e0e0e0;
	border-radius: 4px;
	animation: shimmer 1.5s infinite linear;
}
	
@keyframes shimmer {
	0% {
		background-position: 100%;
	}
	100% {
		background-position: -100%;
	}
}
	
.skeleton-image,.skeleton-text {
	background: linear-gradient(
		90deg,
		#e0e0e0 25%,
		#f5f5f5 50%,
		#e0e0e0 75%
	);
	background-size: 200% 100%;
}	
/* @media only screen and ( min-width:1024px ) and ( max-width:1050px ){
	
}
@media only screen and ( min-width:768px ) and ( max-width:1023px ){
	
} */
.suggestion-data > div.responsesearch {
	display: flex;
	flex-direction: column;
	gap: 5px;
	/* //max-width: 300px; */
	padding: 10px;
}
#search_deskcount{
	position: absolute;
	top: -8px;
	right: -8px;
	width: 16px;
	height: 16px;
	background-color: #d9383d;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	font-size: 12px;
	padding-top: 1px;
	z-index: 999;
	display:none;
}

/* ======================= search form ======================= */



/* ======================== @meada query css start =============== */

@media only screen and ( min-width: 1024px ) and ( max-width:1050px ){
	.top_menu_li, .top_menu_span{display: none !important;}
	/* .mid_menu .mid_menu_mid .nav_ul .nav_ul_li{font-size: 14px !important;padding: 0px 6px 0 6px !important;} */
	.mid_menu .mid_menu_mid .nav_ul .nav_ul_li .nav_ul_li_link{font-size: 13px !important;}
	.jct_top_slaaj{display: none;}
	.select_form_5 { width: 20% !important; }
	.banner .max_width form a{ width: 12% !important;}
	.banner .max_width form .filter_btn{ width: 13% !important;margin: 0 0 0 2px !important;}
	.caution{display: none;}

	.select_fleid:first-child{width: 67%;}
	.select_fleid{width: 14.8%;}
}

@media only screen and ( min-width: 768px ) and ( max-width:1023px ){
	.top_menu_li, .top_menu_span{display: none !important;}
	.mid_menu .mid_menu_mid .nav_ul .nav_ul_li .nav_ul_li_link{font-size: 12px !important;}
	.jct_top_slaaj{display: none;}
	.select_form_5 { width: 20% !important; }
	.banner .max_width form .filter_btn{width: 15% !important;}
	.banner .max_width form a{width: 15% !important;}
	.caution{display: none;}
	.top_menu_time{display: none !important;}
	.jct_top_safe_trade{display: none;}
	.mid_menu .mid_menu_left{width: 25%;}
	.mid_menu .mid_menu_mid{width: 75%;}
	.mid_menu .mid_menu_right{display: none;}
	.mid_menu .mid_menu_mid .nav_ul .nav_ul_li{font-size: 14px !important;}
	.mid_menu .mid_menu_mid .nav_ul{justify-content: end;}
	.select_form_1 { width: 30% !important; }
	.select_form_2 { width: 30% !important; }
	.select_form_3 { width: 20% !important; }
	.select_form_4 { width: 20% !important; }
	.select_form_5 { width: 63% !important; margin-top: 5px;}
	.banner .max_width form a{margin-top: 5px;}
	.banner .max_width form .filter_btn{width: 20.5% !important; margin: 5px 0 0 2px !important;}
	.banner .max_width h2{font-size: 25px;margin-bottom: 8px;}
	.top_menu_span_m{display: none;}
	#google_translate_element{width: 92px !important;}


	.select_fleid{width: 20.4%;}
	.select_fleid:first-child{width: 55%;}
	.more_filter_box{max-width: 697px;min-width: 697px;}
	/* .selectCol{width: 24%;}
	.selectCol:nth-child(5n){margin-right: 1.3%;}
	.selectCol:nth-child(4n){margin-right: 0;} */
}


@media (min-width: 576px) {
.max_width {
	max-width: 540px;
}
}
@media (min-width: 768px) {
.max_width{
	max-width: 720px;
}
}
@media (min-width: 992px) {
.max_width {
	max-width: 960px;
}
}
@media (min-width: 1200px) {
.max_width {
	max-width:1230px;
}
}
/* @media (min-width: 1400px) {
.max_width {
	max-width: 1360px;
}
} */
.searchbottomtop{
	display:flex;
}
.searchbtntopheader{
	padding: 12px 40px 8px;
	font-size: 18px;
	font-weight: bold;
	display: inline-block;
	margin-bottom: 0;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	touch-action: manipulation;
	cursor: pointer;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	transition: all 0.5s linear;
	color: #fff;
	background-color: #d83338;
	border-color: #d83338;
	border-radius: 5px;
}
.resetbtntopheader{
	padding: 12px 40px 8px;
	font-size: 18px;
	font-weight: bold;
	display: inline-block;
	margin-bottom: 0;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	touch-action: manipulation;
	cursor: pointer;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	transition: all 0.5s linear;
	color: #fff;
	background-color: #333;
	border-color: #333;
	border-radius: 5px;
}
.recordText { font-size: 18px; }
.resetbtntopheader:active,.resetbtntopheader:focus,.resetbtntopheader:hover {
		color: #333;
		background-color: #fff;
		border-color: #8c8c8c;box-shadow: inset 0 0 20px rgba(255, 159, 56, 0.5), 0 0 20px rgba(255, 159, 56, 0.2);
}
.searchbtntopheader:focus,.searchbtntopheader:focus,.searchbtntopheader:hover {
    color: #d83338;
    background-color: #fff;
    border-color: #d83338;
    box-shadow: inset 0 0 20px rgba(255, 159, 56, 0.5), 0 0 20px rgba(255, 159, 56, 0.2);
}
.closetopform{
	margin: 0px 10px;
	padding: 14px;
	cursor:pointer;
}
.closetopSearchInputform{
	margin: 0px 0pc 0px 10px;
	padding: 14px;
	cursor:pointer;
	position: absolute;
	top: 0px;
	right: 0;
	background: #d2d2d2;
	height: 100%;
	border-radius: 0 4px 4px 0;
}
.search_submit_btn{ 
	text-align: center;
	line-height: 20px;
	background-color: #d9383d;
	font-size: 16px !important;
	color: #fff !important;
	padding: 12px 10px 10px 25px!important;
    height: 43px;
    width: 100%;
    position: relative;
    display: block;
    border-radius: 2px;
    font-weight: 700 !important;
    border: none;
    cursor: pointer;
    transition: all .5s;
}

.active_box{
	border-color: #1616ff !important;
}


/*===============  Search Popup New CSS =================*/
.show_popup{position: relative;}
.popup{position: absolute;top: 31%;left: 2%;background-color: #fff;z-index: 99;border-radius: 10px;box-shadow: 0px 2px 5px #ddd;width: 850px;height: 500px;overflow: hidden;}
.popup_content{overflow-y: scroll;scrollbar-width: thin;padding: 15px;max-height: 500px;}
.popup_flex{display: flex;justify-content: space-between;}
.popup_flex button{background-color: #fff;border: none;text-decoration: underline;color: #333;cursor: pointer;}
.popup_flex p{cursor: pointer;text-decoration: underline;}
.makes_icon{display: inline-block;}
.makes_icon li{border: 1px solid #d8d8d8;border-radius: 5px;cursor: pointer;text-align: center;margin-left: 11.8px;display: inline-block;margin-bottom: 15px;width: 10.8%;padding: 10px;letter-spacing: 0.2px;font-weight: 400;}
.makes_icon li:nth-child(8n + 1){margin-left: 0px;}
.makes_icon li .make_link{color: #333 !important;list-style: none;text-decoration: none;background-color: #fff !important;}
.makes_icon li p{margin-bottom: 0px;}
.make_list{display: block;}
.make_list li{width: 24.5%;font-size: 14px; color: #333;display: inline-block;margin-bottom: 8px;cursor: pointer;}
.make_list li label{cursor: pointer;}
.makes_color{display: inline-block;}
.makes_color li{width: 30px;height: 30px;border-radius: 5px;display: inline-block;margin-left: 9px;cursor: pointer;}
.makes_color li.white{background-color: #fff;border: 1px solid #000;}
.makes_color li.black{background-color: #000;}
.makes_color li.black-white{background: linear-gradient(135deg, rgb(221, 220, 218) 0%, rgb(157, 156, 154) 100%)}
.makes_color li.blue{background-color: rgb(72, 162, 215);}
.makes_color li.light_yellow{background: linear-gradient(133.23deg, rgb(240, 241, 233) 0%, rgb(218, 219, 186) 97.09%)}
.makes_color li.red{background-color: #DD5051;}
.makes_color li.gray{background-color: #ccc;}
.makes_color li.purple{background-color: #961891;}
.makes_color li.green{background-color: #33CC33;}
.makes_color li.pink{background-color: #F96bb9;}
.makes_color li.beige{background-color: #F9D19f;}
.makes_color li.brown{background-color: #9C7732;}
.makes_color li.orange{background-color: #Fd7600;}
.makes_color li.gold{background: linear-gradient(135deg, rgb(249, 238, 188) 0%, rgb(199, 154, 47) 100%);}
#make_id_advance,#type_id_advance,#color_id_advance,#maker_id_advance{display: block; width: 100%;height: 43px;padding: 10px 8px !important;
    font-size: 14px;color: #333;background-color: #fff;border: 1px solid #ccc; position: relative;}
/* #make_id_advance,#type_id_advance,#color_id_advance,#maker_id_advance > img{position: absolute;right: 4px;top: 17px;} */
input[type=radio], input[type=checkbox]{
	/* width: 8px; */
	position: relative;
	top: 1.9px;
}
.makers_icon li{border: none !important;width: 24.5% !important;margin-left: 0px !important;margin-bottom: 8px !important;padding: 0px !important;text-align: left !important;}
.makers_icon li:nth-child(4n+1){margin-left: 0px !important;}
#model_code_id_advance > .popup{width: 350px !important;}

@media only screen and (min-width:1024px) and (max-width:1050px){
	.popup{top: 20%;left: 5% !important;}
	/* #popup_advance_maker{left: 5% !important;} */
	#popup_advance_type , #popup_advance_subtype{top: 31% !important;left: 3% !important;}
}

@media only screen and (min-width:768px) and (max-width:1023px){
	.popup{top: 13%;left: 4%;width: 650px;height: 350px;}
	.popup_content{max-height: 350px;}
	.makes_icon li{width: 12%;}
	.makes_icon li:nth-child(8n + 1){margin-left: 11.8px;}
	.makes_icon li:nth-child(7n + 1){margin-left: 0px;}
	.volvo{display: none !important;}
	.porsche{display: none !important;}
	#popup_advance_maker{left: 4% !important;}
	#subtype_id_advance{left: 4% !important;}
	#popup_advance_subtype{left: 6% !important;}
	#popup_advance_type,#popup_advance_subtype{top:20% !important;}
	#popup_advance_modelcode{left: 5% !important;}
	.makers_icon li{width: 33% !important;}
	.make_list li{width: 33% !important;}
}

.top_search_btn_loading .top_search_dots {
  display: inline-block;
}

.top_search_btn_loading .top_search_dots span {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 2px;
  background-color: #fff; /* change to white if needed */
  border-radius: 50%;
  animation: blinkDots 1.4s infinite both;
}

.top_search_btn_loading .top_search_dots span:nth-child(2) { animation-delay: 0.2s; }
.top_search_btn_loading .top_search_dots span:nth-child(3) { animation-delay: 0.4s; }

.search_submit_btn.disabled,.searchbtntopheader.disabled {
  opacity: 0.8;
  /* pointer-events: none; */
  cursor: not-allowed;
}

.searchbottomtop .loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* display: flex;
    gap: 3px;
    font-size: 30px;
    font-weight: bold;
    color: #000; */
}

.searchbottomtop .loader span {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 2px;
	background-color: #fff; /* change to white if needed */
	border-radius: 50%;
    opacity: 0;
    animation: blinkDots 1s infinite;
}

.searchbottomtop .loader span:nth-child(1) { animation-delay: 0s; }
.searchbottomtop .loader span:nth-child(2) { animation-delay: 0.2s; }
.searchbottomtop .loader span:nth-child(3) { animation-delay: 0.4s; }

@keyframes blinkDots {
  0%, 80%, 100% { opacity: 0; }
  40% { opacity: 1; }
}