/* HEADER */
.CmHeadBox{margin:0px -21px; padding:0px 21px 0px 21px;}
h1#CmCarModH1{line-height:20px; font-family:Calibri!important; text-overflow:ellipsis; display:inline-block; color:#828282; font-weight:600; font-size:22px; text-shadow:1px 1px 2px #ffffff;}
.CmTitleModelBlock{background-color:#f5f5f5; margin:0px -21px; padding:30px 21px 10px 21px;}
.boxMod{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); justify-items:stretch;}
.ModBox{height:196px; background-size:auto 100px!important; text-decoration:none; display:block; positioN:relative; float:left; background-color:#ffffff; margin:0px 2px 5px 3px; background-repeat:no-repeat!important; font-family:Verdana; font-size:12px; background-position:center 64px!important; border-radius:4px; border:1px solid #fff; box-shadow:2px 2px 8px rgba(0,0,0,0.2); color:var(--cm-main);}
.ModBox:hover{box-shadow:2px 2px 8px rgba(0,0,0,0.5); border-style:solid; border-width:1px; transform: translateY(-2px); transition:transform 0.3s; border-color:var(--cm-main); }
.ModBox:hover .ModName{color:#ffffff; background-color:var(--cm-main);}
.ModBox:hover .ModName i{color:#ffffff;}
.ModBox:hover .ModYear{color:#000;}
.ModBox:hover .ModVDS{color:#bd0000;}
.ModName{width:100%; left:0px; top:0px; min-height:42px; box-sizing:border-box; padding:6px 6px 4px 6px; font-weight:bold; line-height:1.25; border-radius:4px 4px 0px 0px; text-align:center; positioN:absolute; background-color:#ffffff; z-index:1;}
.ModName a{text-decoration:none; color:#000;}
.ModName a:hover{color:#ff0000;}
.ModName i{color:#666666; font-size:11px; font-weight:normal!important;}
.CmModYVDS{display:flex; justify-content:space-between; align-items:flex-end; positioN:absolute; bottom:0px; left:0; width:100%; box-sizing:border-box; padding:4px 4% 6px 4%; background-color:#ffffff; z-index:1;}
.ModYear{font-weight:bold; color:#474747; font-style:italic; }
.ModVDS{font-size:10px; max-width:124px; overflow:hidden; color:#7c6868; text-align: end;}

.modtab{border-collapse:collapse; font-size:12px; font-family:Verdana; margin:0px auto 0px auto;}
.modtab td{border:1px solid #000; padding:2px 6px 2px 6px; vertical-align:top;}
.modtab span{color:#c60000;}
.modtab i{color:#2a8800;}
.modtab div{color:#929292; font-size:10px;}
.typtab{border-collapse:collapse; font-size:10px; font-family:Verdana;}
.typtab td{border-bottom:1px solid #b0b0b0; padding:2px 6px 2px 6px; vertical-align:top; border-top:0px; border-left:0px; border-right:0px;}

.modelsdiv{width:212px; height:140px; float:left; background-color:#ffffff!important; margin:0px 12px 22px 10px; background-repeat:no-repeat!important; background-position:top center!important; -moz-border-radius:8px; border-radius:8px; -moz-box-shadow:2px 2px 8px rgba(0,0,0,0.2); -webkit-box-shadow:2px 2px 8px rgba(0,0,0,0.2); box-shadow:2px 2px 8px rgba(0,0,0,0.2);}
.modelname{margin-top:90px; text-align:center; font-weight:bold; font-size:11px;}
.ampick{display:block; text-align:center; background:#efefef; overflow:hidden; height:21px!important; line-height:18px!important; text-decoration:underline!important; font-size:12px!important; padding:3px 12px 0px 12px; margin:4px 0px 0px 0px!important; color:#5e5e5e!important; font-family:Arial!important;}
.ampick:hover{text-decoration:none!important;}

div.fxCont{width:1180px;}
div.fxCont .CmBrTitleSearchWrap{margin:0px -30px;}
div.fxCont #CmTitlH1Page{text-align:left;}
div.fxCont div.CmTypesWrap{width:100%;}

/* ?????? ??????? */
.CmMdFilter{width:100%; box-sizing:border-box; padding:14px 0px 4px 0px; font-family:var(--cm-text-family);}
.CmMdHide{display:none!important;}

/* ??????? ??????: ?????, ?????, ???, ????? */
.CmMdFiltTop{display:flex; align-items:center; flex-wrap:wrap; gap:14px; padding-bottom:12px;}
.CmMdBrandBadge{display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; min-width:72px; max-width:180px; height:40px; padding:0px 18px; border:1px solid #d0d0d0; border-radius:999px; background:linear-gradient(to bottom, #f3f3f3, #e8e8e8); box-shadow:inset 0px 2px 4px rgba(0,0,0,0.18), inset 0px -1px 0px rgba(255,255,255,0.7); color:var(--cm-main); font-family:var(--cm-text-family); font-size:13px; font-weight:bold; line-height:1; letter-spacing:0.03em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* ????? ?? ???????? */
.CmMdSearchBox{flex:0 0 auto; position:relative; width:250px; max-width:100%; height:40px;}
.CmMdSearchInp{width:100%!important; height:40px!important; box-sizing:border-box!important; padding:0px 44px 0px 14px!important; margin:0px!important; border:1px solid var(--cm-main)!important; border-radius:0px!important; background:#ffffff!important; font-size:15px!important; line-height:38px!important; color:var(--cm-main)!important; transition:box-shadow 0.2s ease-in-out!important;}
.CmMdSearchInp:hover{box-shadow:inset 0px 0px 5px 0px var(--cm-light-bg-color);}
.CmMdSearchInp:focus, .CmMdSearchInp:valid{outline:none; box-shadow:inset 0px 0px 5px 0px var(--cm-light-bg-color);}
.CmMdSearchLbl{display:flex!important; position:absolute!important; left:14px!important; top:50%!important; transform:translateY(-50%); pointer-events:none; color:var(--cm-main)!important; font-size:13px!important; line-height:unset!important; transition:all 0.2s ease-in-out;}
.CmMdSearchInp:focus ~ .CmMdSearchLbl, .CmMdSearchInp:valid ~ .CmMdSearchLbl{transform:translateY(-155%) scale(0.85); background-color:#ffffff; padding:0px 5px;}
.CmMdSearchIco{position:absolute; right:0px; top:0px; width:40px; height:40px; padding:0px; fill:var(--cm-main); border-left:1px solid var(--cm-light-bg-color); pointer-events:none; transition:opacity 0.2s ease-in-out;}
.CmMdSearchClr{position:absolute; right:9px; top:9px; width:22px; height:22px; opacity:0; pointer-events:none; cursor:pointer; stroke:var(--cm-main); stroke-width:2; stroke-linecap:round; fill:none; transition:opacity 0.2s ease-in-out;}
.CmMdFilter.CmMdHasQuery .CmMdSearchIco{opacity:0;}
.CmMdFilter.CmMdHasQuery .CmMdSearchClr{opacity:1; pointer-events:auto;}

/* ?????? ?? ???? */
.CmMdYear{flex:0 0 auto; position:relative;}
.CmMdYearBut{display:flex; align-items:center; justify-content:space-between; gap:8px; box-sizing:border-box; min-width:110px; height:40px; padding:0px 12px; border:1px solid var(--cm-main); color:var(--cm-main); font-weight:bold; font-size:14px; cursor:pointer; user-select:none; transition:background-color 0.2s ease-in-out;}
.CmMdYearBut:hover{background-color:var(--cm-aero-bg-color);}
.CmMdYear.CmMdYearOn .CmMdYearBut{background-color:var(--cm-main); color:#ffffff;}
.CmMdYearArr{width:14px; height:12px; flex:0 0 auto; transition:transform 0.2s ease-in-out;}
.CmMdYear.CmMdYearOpen .CmMdYearArr{transform:rotate(180deg);}
.CmMdYearDrop{display:none; position:absolute; left:0px; top:calc(100% + 4px); z-index:800; box-sizing:border-box; min-width:300px; padding:8px; border:1px solid var(--cm-main); background:#ffffff; box-shadow:0px 4px 12px rgba(0,0,0,0.25);}
.CmMdYear.CmMdYearOpen .CmMdYearDrop{display:block;}
.CmMdDecades{display:flex; flex-wrap:wrap; gap:4px; margin:6px 0px 8px 0px; padding-bottom:8px; border-bottom:1px solid var(--cm-light-bg-color);}
.CmMdDecade{padding:4px 8px; border:1px solid var(--cm-light-bg-color); color:#757575; font-size:13px; font-weight:bold; cursor:pointer; transition:all 0.2s ease-in-out;}
.CmMdDecade:hover{border-color:var(--cm-main); color:var(--cm-main);}
.CmMdDecade.CmMdActive{border-color:var(--cm-main); background-color:var(--cm-main); color:#ffffff;}
.CmMdYearsGr{display:none; grid-template-columns:repeat(4, 1fr); gap:4px;}
.CmMdYearsGr.CmMdActive{display:grid;}
.CmMdYearItem{padding:6px 8px; text-align:center; color:#585858; font-size:13px; cursor:pointer; transition:all 0.15s ease-in-out;}
.CmMdYearItem:hover{background-color:var(--cm-aero-bg-color); color:var(--cm-main);}
.CmMdYearItem.CmMdActive{background-color:var(--cm-main); color:#ffffff;}
.CmMdYearAny{margin-bottom:2px; border:1px solid var(--cm-light-bg-color); font-weight:bold;}
.CmMdYearDec{grid-column:1 / -1; border:1px solid var(--cm-light-bg-color); font-weight:bold;}

/* ????? */
.CmMdReset{flex:0 0 auto; margin-left:auto; display:none; align-items:center; gap:6px; height:40px; padding:0px 12px; border:1px solid var(--cm-light-bg-color); color:#757575; font-size:13px; cursor:pointer; transition:all 0.2s ease-in-out;}
.CmMdReset:hover{border-color:var(--cm-main); color:var(--cm-main);}
.CmMdFilter.CmMdFiltered .CmMdReset{display:flex;}
.CmMdResetIco{width:14px; height:14px; flex:0 0 auto;}

/* ?????? ?? ?????? ????? */
.CmMdLetters{display:flex; flex-wrap:wrap; gap:4px; padding-bottom:12px;}
.CmMdLetter{min-width:30px; box-sizing:border-box; padding:5px 7px; border:1px solid var(--cm-light-bg-color); color:var(--cm-main); font-size:13px; font-weight:bold; text-align:center; cursor:pointer; user-select:none; transition:all 0.2s ease-in-out;}
.CmMdLetter:hover{background-color:var(--cm-aero-bg-color);}
.CmMdLetter.CmMdActive{border-color:var(--cm-main); background-color:var(--cm-main); color:#ffffff;}

/* ?????? ?? ???????? ?????? */
.CmMdNames{display:flex; flex-direction:column; align-items:flex-start; padding-bottom:10px;}
ul.CmMdNameList{columns:6; column-gap:20px; width:100%; margin:0px; padding:0px; list-style:none;}
li.CmMdName{padding:3px 0px; color:#757575; font-size:13px; cursor:pointer; break-inside:avoid; transition:color 0.15s ease-in-out;}
li.CmMdName:hover{color:var(--cm-main);}
li.CmMdName.CmMdActive{color:var(--cm-main); font-weight:bold; text-decoration:underline;}
li.CmMdNameExtra{display:none;}
.CmMdNames.CmMdExpanded li.CmMdNameExtra{display:list-item;}
.CmMdShowNames{display:flex; align-items:center; justify-content:center; gap:6px; align-self:center; margin:14px auto 4px auto; color:var(--cm-main); font-size:14px; font-weight:bold; cursor:pointer; user-select:none; transition:opacity 0.2s ease-in-out;}
.CmMdShowNames:hover{opacity:0.7;}
.CmMdShowArr{width:16px; height:13px; transition:transform 0.2s ease-in-out;}
.CmMdNames.CmMdExpanded .CmMdShowArr{transform:rotate(180deg);}

/* Empty filter result */
.CmMdEmpty{display:none; padding:10px 0px 14px 0px; color:var(--cm-main); font-size:18px;}
.CmMdFilter.CmMdNoResult .CmMdEmpty{display:block;}

.boxTAuto{display:flex; justify-content:space-between; align-items:center; margin-top:8px;}
.sliderTg{transition:0.2s; font-weight:bold; color:#3c3c3c; font-size:11px; line-height:24px; display:table; padding:0px 8px; border:1px solid #969597; cursor:pointer; background:linear-gradient(to bottom,#fff,#d0d0d0);}
.activeTg{box-shadow:inset 1px 1px 5px 1px rgb(191, 191, 191); cursor:default; background:#e8e8e8; color:#797979;}
.sliderTg:hover{background:linear-gradient(to bottom,#fff,#e2e2e2);}
.activeTg:hover{background:#e8e8e8; color:#797979;}
.sliderTg sup{color:#8e8e8e;}
.block_filt {margin-top: 10px !important;}

div.fxCont.CmTypesFxCont{
	width:100%!important;
	max-width:100%!important;
	min-width:0!important;
	min-height:440px;
	max-height:calc(100vh - 48px);
	box-sizing:border-box!important;
	margin:0!important;
	top:0!important;
	overflow:visible!important;
	align-items:stretch;
}
.fxModal.CmTypesFxModal{
	width:min(920px, calc(100vw - 48px))!important;
	max-width:calc(100vw - 48px)!important;
	max-height:calc(100vh - 48px);
	box-sizing:border-box;
	margin:0;
	overflow:visible;
}
.fxModal.CmTypesFxLoadingModal{width:min(720px, calc(100vw - 48px))!important;}
.CmTypesFxLoader{display:flex;}
div.fxCont.CmTypesFxCont.CmTypesFxLoading{
	min-height:320px;
	padding:24px!important;
	justify-content:center;
	align-items:center;
}
div.fxCont.CmTypesFxCont>.CmFxClose,
div.fxCont.CmTypesFxCont>.fxClose{right:-14px!important; top:-14px!important;}

@media screen and (max-width: 1200px){
    ul.CmMdNameList{columns:5;}
}
@media screen and (max-width: 960px){
    .CmTitleModelBlock{margin:0;}
    ul.CmMdNameList{columns:4;}
}
@media screen and (max-width: 768px){
    .cm_modCont{margin:30px;}
    #CmContent h1{font-size:14px; line-height:16px; margin:5px 0px 5px 0px;}
    #CmContent h1 b{font-size:18px;}
    .CmMdSearchBox{flex:1 1 220px;}
    ul.CmMdNameList{columns:3;}
    .ModBox{background-size:auto 96px!important;}
}
@media screen and (max-width: 648px){
    ul.CmMdNameList{columns:2;}
    .ModBox{background-size:auto 92px!important;}
}
@media screen and (max-width: 500px){
    #CmContent h1{line-height:16px; margin:5px 0px 5px 0px;}
}
@media screen and (max-width: 480px){
    .cm_modCont{margin:20px; padding:15px;}
    .CmMdFiltTop{gap:10px;}
    .CmMdBrandBadge{height:36px; padding:0px 14px; font-size:12px; max-width:140px;}
    .CmMdSearchBox{flex:1 1 100%; order:3;}
    .CmMdYear{order:4;}
    .CmMdYearDrop{left:auto; right:0px;}
    .CmMdReset{order:5;}
    ul.CmMdNameList{columns:2;}
    .ModBox{background-size:auto 88px!important;}
}
@media screen and (max-width: 390px){
    .cm_modCont{margin:10px;}
    .CmMdYearsGr{grid-template-columns:repeat(3, 1fr);}
}

/* Keep the popup inside narrow viewports. */
@media screen and (max-width:768px){
	.fxModal.CmTypesFxModal{
		width:calc(100% - 30px)!important;
		max-width:calc(100% - 30px)!important;
		margin:0 15px!important;
	}
	.fxCont.CmTypesFxCont{
		width:100%!important;
		max-width:100%!important;
		min-width:0!important;
		margin:0!important;
		min-height:min(440px, calc(100vh - 30px));
		max-height:calc(100vh - 30px);
	}
	.fxCont.CmTypesFxCont.CmTypesFxLoading{min-height:min(300px, calc(100vh - 30px));}
}