.CmSrchCont{padding:2px 0px 0;}
.CmSrchTtl{font-size:var(--cm-text-size); font-family:var(--cm-text-family); margin:8px 0 2px; padding-left:5px; display:flex; align-items:center; border-radius:0 0 8px 8px; color:#4b4b4b;}

.CmSrchBntCont .CmSrchBntWr{display:flex; align-items:center; width:100%; position:relative;}
.CmSrchIcCon{display:flex; width:33px; align-items:center; justify-content:center; border:0.5px solid #ccc; border-right:none; background-color:var(--cm-main); padding:6px; transition:transform 0.4s ease, opacity 0.3s ease; cursor:pointer; transition:0.4s ease; fill:white;}
.CmSrchIcCon:hover{background:var(--cm-dark-bg-color);}
.CmSrchSvg{height:34px; fill:#6b7280; transition:fill 0.4s ease; transform:translate(3px, 3px); animation:smooth-wiggle 8s infinite;}
.CmSrchInp:focus{}
.CmSrchBntAF{display:none; height:33px; color:#fff;}
.CmSrchBntCont.clicked .CmSrchIcCon{opacity:0; pointer-events:none;}
.CmSrchBntCont:focus-within .CmSrchSvg { animation: wiggle 0.4s ease-in-out forwards !important; }
@keyframes wiggle { 0% { transform: translate(3px, 0); } 10% { transform: translate(2.8px, 0); fill: var(--cm-main); } 20% { transform: translate(2.5px, 0); fill: var(--cm-main); } 30% { transform: translate(2.2px, 0); fill: var(--cm-main); } 40% { transform: translate(1.9px, 0); fill: var(--cm-main); } 50% { transform: translate(1.5px, 0); fill: var(--cm-main); } 60% { transform: translate(1.9px, 0); fill: var(--cm-main); } 70% { transform: translate(2.2px, 0); fill: var(--cm-main); } 80% { transform: translate(2.5px, 0); fill: var(--cm-main); } 90% { transform: translate(2.8px, 0); fill: var(--cm-main); } 100% { transform: translate(0, 0); fill: black; } }
@keyframes smooth-wiggle { 0%, 85% { transform: translateX(0); fill: black; } 88% { transform: translateX(-8px); fill: var(--cm-main);  } 92% { transform: translateX(8px); fill: var(--cm-main); } 96% { transform: translateX(-4px); fill: var(--cm-main); } 100% { transform: translateX(0); fill: black; } }
.CmBoxButMdl{display:flex; justify-content:flex-end;}
.CmSrchLink {font-size:15px; font-family: var(--cm-text-family); color: var(--cm-main);  display: flex; text-align: left; margin-top: 16px; padding-left: 5px; padding-bottom:2px; text-align: center; cursor: pointer; text-decoration: none; text-transform: uppercase; justify-content:flex-end; width:fit-content;}
.CmSrchLink:hover{text-decoration:underline!important;}
.CmCarSel { display: flex; flex-direction: column; gap: 18px; padding: 10px 20px; position: relative; }
.CmSrchBntCont:hover { border-color: #c; }
#CmSvgSrchNum{fill:white!important;}

.CmSrchBntCont{display:flex; border:1px solid #fff; zoom: 0.9;}
.CmSrchInp{display:flex; align-items:center; background:#fff; color: var(--cm-main); flex:1; height:43px; padding:1px 0 0 0px; border:0.5px solid #ccc; outline:none; font-size:20px; border-radius:0; transition:width 0.4s ease; font-weight:bold; text-align:center; width: calc(120% - 200px);}
.CmSrchInp input{border: none; font-size: 16px; font-family: var(--cm-text-family); color: #3c3c3c; width: 100%; box-sizing: border-box;}
.CmSrchInp input:focus{border:none; outline:none;}
.CmSrchInp input:active{border: none; outline: none;}
.CmSrchInp::placeholder{color:#c6c6c6; font-size:16px;}

.CmSrchBnt{display:flex; align-items:center; justify-content:center; font-family:var(--cm-text-family); background-color:var(--cm-main); text-transform:uppercase; width:80px; height:48px; cursor: pointer; padding:0 16px; border-radius:0px; border:none; color:#fff; font-weight:bold; font-size:16px; position:relative; overflow:hidden; transition:transform 0.3s ease;}
.CmSrchBnt:hover { background: linear-gradient(135deg, #ff570c, #ff6c6c); }
.CmSrchBnt::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.4); z-index: 1; opacity: 0; transition: left 0.3s, opacity 0.3s; }
.CmSrchBnt:hover::before { animation: glitchForward 0.3s 1 forwards; }
@keyframes glitchForward { 0% { left: -100%; opacity: 0.8; } 50% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes glitchBackward { 0% { left: 100%; opacity: 0; } 50% { opacity: 1; } 100% { left: -100%; opacity: 0.8; } }

.CmSrchClear{position:absolute; top:46px; left:46px; right:1px; width:-webkit-fill-available; z-index:999; background:#fff;}
.CmSrchResLeft .CmSearchTab{width:100%;}
.CmSvgSrch{transition: fill 0.4s ease; transform: translate(0px, 0px);}
.CmSrchBntCont:focus-within .CmSvgSrch{ animation: wiggle 0.3s ease-in-out forwards !important; }
.CmNotFoundBox{background:var(--cm-main); height:100%; font-size:14px; align-items:center; color:white; font-weight:bold; transition:all 0.4s ease; max-width: 0; overflow:hidden; display:flex!important; flex-shrink:0; white-space:nowrap;}
.CmNotFoundBox.CmNFoundVisible{max-width:200px; padding:0 20px;}
.CmBlinkSrc{color:#c6c6c6!important;}



/* LOADING */
.CmSrchLoading{top:20px; left:47%; display:none; position:absolute;}
.CmLoadSBlN{background-color:#808080;}
.CmSrchLoading div{position:absolute; width:11px; height:11px; border-radius:50%; animation-timing-function:cubic-bezier(0, 1, 1, 0);}
.CmSrchLoading div:nth-child(1){left:6px; animation: CmMSelectLoading1 0.6s infinite;}
.CmSrchLoading div:nth-child(2){left:6px; animation: CmMSelectLoading2 0.6s infinite;}
.CmSrchLoading div:nth-child(3){left:26px; animation: CmMSelectLoading2 0.6s infinite;}
.CmSrchLoading div:nth-child(4){left:45px; animation:CmMSelectLoading3 0.6s infinite;}
@keyframes CmSrchLoading1{
	0%{transform:scale(0);}
	100%{transform:scale(1);}
}
@keyframes CmSrchLoading3 {
	0%{transform:scale(1);}
	100%{transform:scale(0);}
}
@keyframes CmSrchLoading2 {
	0%{transform:translate(0,0);}
	100%{transform:translate(19px,0);}
}


@media (max-width:768px) { 
	.CmSrchIcCon { display: none; } 
	.CmSrchBntAF { display: flex; } 
	.CmSrchBnt { padding: 0px;} 
	.CmSrchBnt span { display: none; } 

}
@media (max-width:425px) { 
}

@media (max-width:320px) { 
	.CmSrchBnt { width: 50px;} 
}