input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; height: 20px; text-align:center; width: 20px; cursor:pointer;   border-radius:20px; padding:2px; line-height:20px; text-align:center;
background: url("data:image/svg+xml;charset=UTF-8,%3csvg viewPort='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3e%3cline x1='1' y1='11' x2='11' y2='1' stroke='black' stroke-width='2'/%3e%3cline x1='1' y1='1' x2='11' y2='11' stroke='black' stroke-width='2'/%3e%3c/svg%3e") 6px 5px, #fff; 
}
.debugger { position: absolute; left: 50%; top: 0; }
.menublk{ border-radius:10px; margin:0 15px; min-height:calc(100vh - 100px); top:10px; position:relative; }
.menublk h2{ margin-bottom:0px; }
.nav-wrapper.show-menu .tomenu{ background: rgb(255 255 255 / 88%); width: 100%; height: 100%; position: fixed; top: 0; filter:blur(4px); -o-filter:blur(4px); -ms-filter:blur(4px); -moz-filter:blur(4px); -webkit-filter:blur(4px); }	
.nav-wrapper { position: fixed; top:0; left:0; z-index:9999; border-top:solid 1px #f7f7f7; width: 400px; height: 100vh; background:#fff; transition: transform 0.3s; transform: translateX(-100%); -webkit-box-shadow:  0px 8px 5px 4px rgb(0 0 0 / 5%); box-shadow: 0px 5px 5px 4px rgb(0 0 0 / 5%); }
.nav-wrapper.show-menu { transform: none; }
.nav-wrapper .showbo{ display:none; }
.nav-wrapper.show-menu .showbo{ display:block; }

.nav-wrapper .cattitle{ display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #ccc; }
.nav-wrapper .cattitle font{ font-size:20px; font-weight:500; margin:5px 10px 5px 20px; text-overflow: ellipsis; text-transform: capitalize; }
.js-nav-toggle span { position: relative; background-color: #345; height: 2px; display: block; width: 22px; margin: 9px auto 0; transition: all 0.4s; transition-delay: 0.3s; }
.js-nav-toggle span:before, .js-nav-toggle span:after { content: ""; position: absolute; display: block; width: 20px; height: 0; left: 1px; top: 50%; margin-top: -7px; transition: all 0.3s 0.3s; }
.js-nav-toggle span:before { box-shadow: 0 14px 0 1px #345; } 
.js-nav-toggle span:after { box-shadow: 0 0 0 1px #345; } 
.showbo { position: absolute; top: 0px; right:0px; width: 43px; height: 43px; background:none; margin:0; display: block; float: left; padding: 0; color: var(--mycolor);  z-index: 9999; } 
.showbo:hover{ background:#e4e2e2!important; border-radius:40px;  }

.compdiv{ display:flex; flex-direction:column; justify-content:space-between; align-items:center; padding:10px 0px; border-bottom: 1px solid #ccc; background:var(--mycolor); }
.compcon{ width:100%; display:flex; justify-content:space-between; align-items:center; }
.compcon img{ width:150px; margin-left:10px; }
.complink{ width:100%; display:flex; align-items:center; padding:5px 0px 5px 10px; gap:10px; }
.nav-wrapper nav .complink a{ margin:0px; padding:5px 10px; color:#fff; font-size:13px; line-height:16px; background:none; }
.nav-wrapper nav .complink a:hover{ background:none; }

.logo .js-nav-toggle{ margin:-30px 0px 0px 0px; }
.logo .js-nav-toggle:hover{ background:none; }

.show-menu .js-nav-toggle span { background-color: transparent; }
.show-menu .js-nav-toggle span:before { transform: rotate(-45deg); } 
.show-menu .js-nav-toggle span:after { transform: rotate(45deg); } 
.show-menu .js-nav-toggle span:before, .show-menu .js-nav-toggle span:after { margin-top: 0; box-shadow: 0 0 0 1px #424646; }
.show-menu .compcon .js-nav-toggle span:before, .show-menu .compcon .js-nav-toggle span:after{ box-shadow:0 0 0 1px #ffffff; }

.nav-wrapper nav { position: absolute; left: 0; top: 0; height: calc(100% - 5px); width: 100%; overflow-x: hidden; overflow-y: auto; background-color: #fff; }
.nav-wrapper nav .nav-toggle { position:relative; top: auto; left: 0; width:100%; max-width:347px; padding: 1.8em 0.6em; background-color:#fff;  color: #424646; z-index: 100; cursor: pointer; transition: backgroun-color 0.2s; }
.nav-wrapper nav .nav-toggle:hover { background-color: #f7f7f7; } .nav-wrapper nav .nav-toggle.back-visible .nav-back { opacity: 1; }
.nav-wrapper nav .nav-toggle.back-visible .nav-title { width: calc(100% - 20px); white-space: nowrap;   overflow: hidden; font-size:16px; font-weight:700;   text-overflow: ellipsis; text-transform: capitalize; }
.nav-wrapper nav .nav-title { padding-left: 0.7em; transition: transform 0.3s; } 
.nav-wrapper nav .nav-back { display: inline-block; position: relative; width: 30px; height: 30px; vertical-align: middle; z-index: 1; opacity: 0; transition: opacity 0.2s; }
.nav-wrapper nav .menublk .nav-back .svg_ico{ stroke:var(--mycolor); }
.nav-wrapper nav a { display: block; position: relative; padding: 0.7em; color: var(--dark); text-decoration: none; margin:5px 10px; border-radius:10px; transition: color 0.15s, background-color 0.15s; font-size:16px; }
.nav-wrapper nav a:hover, .nav-wrapper nav .nav-dropdown-active > a,  .nav-wrapper nav .nav-dropdown-active .active { color: #fff; background-color: var(--mycolor); }
.nav-wrapper nav ul { list-style: none; padding:0px; transition: transform 0.3s; background-color: #fff; position: absolute; left: 0; top: 0; height: auto;  width: 100%; }
.nav-wrapper nav ul ul { display: none; left: calc(100% - 20px); }
.nav-wrapper nav li.has-dropdown > a { padding-right: 2.5em; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-weight:400; }
.nav-wrapper nav li.has-dropdown > a span{max-width: calc(100% - 30px);     overflow: hidden;     text-overflow: ellipsis;} 
.nav-wrapper nav li.has-dropdown > a:after { content: ""; position: absolute; top: 50%; right: 1em; width: 9px; height: 9px; border: 1px solid currentcolor; border-left-color: transparent; border-top-color: transparent; transform: translateY(-90%) rotateZ(-45deg); transition: transform 0.3s; transform-origin: 100%; }
.nav-wrapper nav li.has-dropdown.nomore > a:after{ display: none;}
.nav-wrapper nav li.nav-dropdown-open > ul { display: block; }
.has-dropdown img, .singlecat img{width:30px; margin-right: 10px; padding:2px;} 
.singlecat img{ width:30px; margin-right: 10px; }
.has_eli{ display: flex; align-items: center; font-weight:400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.navigation .logo{ position:fixed; z-index:999; top:0; max-width:347px; width:100%; }

.catmenu{ position:inherit!important; top:74px!important; width:calc(100% - 30px)!important; margin:0px 15px 15px 15px!important; }

li.newliv{ margin:5px; }
li.newliv a{ width:calc(100% - 20px); background:#fff; color:var(--dark); line-height:20px; display:flex; align-items:center; flex-direction:row; }
li.newliv a span.mb-2{ margin:0!important; }
li.newliv a .svg_ico{ stroke:var(--dark)!important; width:20px!important; height:20px!important; margin: -4px 15px 0px 0px;}
li.newliv a:hover{background:var(--mycolor)!important; color:#fff;}
li.newliv a:hover .svg_ico{stroke:#fff!important;}

.cartsvg{ stroke-width:0.5px; stroke:#fff; fill:var(--gray)!important; cursor:pointer; margin-right:0px; }
.total-count{ font-size:15px; margin:-15px 10px 0px -5px; }

.all_acces .svg_ico{cursor: pointer; margin-right:0!important;}
.all_acces h4{color:var(--gray);}
.all_acces .total-count{font-size:12px;}

.radius-30{border-radius:10px;}
.left100{ transform: translateX(-107%); }
.left200{ transform: translateX(-215%); }
.nav-dropdown-active ul{ margin-left:40px; }
.halfheight{ min-height:490px!important; }
.autoheight{ min-height:auto!important; }
.menuside{ height:calc(100% - 60px); }

.c_det { display:flex; flex-wrap: wrap; width:100%; margin-left: 10px; }
.c_det .product-content{width:calc(100% - 100px); line-height: 20px;}
.c_det .pro_exgst{ width:100px; display:flex; flex-direction:column; align-items:flex-end; }
.c_det .pro_exgst font{ display:block; width:100%; }
.c_det .qtytax{ width:100%; display:flex; align-items:end; margin-top:10px; }
.c_img { width: 60px; text-align: center; display:flex; flex-direction:column; justify-content:space-between; }
.c_img img { width: 100%; height: auto;}
.c_img .cd-qty { color: var(--mycolor); margin-top: 5px; display: block; line-height:1; }
.c_img small { font-size: 11px; line-height:16px; display: block; }
.c_img svg{ width:22px; height:22px; margin-top:5px; }
.cprodiv{ display:flex; gap:2px; }
.cprodiv .cimg{ width:30px; height:30px; padding:2px; border:1px solid #ccc; border-radius:6px; cursor:pointer; }
.cprodiv .cimg img{ width:30px; height:24px; border-radius:6px; }
.covimg{ position: relative; width: 30px; height: 30px; border: 1px solid #ccc; border-radius: 6px; cursor:pointer; }
.covimg span{ display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; position: absolute; overflow: hidden; top: 0; left: 0; background-color: rgba(23, 24, 24, 0.51); z-index: 999; border-radius: 6px; color: #fff; font-size: 14px; }

.cartnpro{ width:100%; margin:0px; }
.cartnpro span{ font-size:13px; line-height:18px; color:#ccc; }
.cartnpro font{ font-size:13px; line-height:18px; color:#ccc; }
.compmenu{ display:none; }
.comp_parent{ display:block; } .comp_child{ display:block; }
.compmenu.comp_parent{ display:none!important; }

.compdiv.comp_child{ display:none; }
.compdiv.comp_parent{ display:none; }

@media screen and (min-device-width: 1224px) and (max-device-width: 1740px) {
    .openshop .header{width:calc(100% - 300px)!important; transition: transform 0.3s; margin-left:294px;}
}

@media screen and (max-width: 991px) { 
    .nav-wrapper nav{ height: calc(100% - 56px);  }
}

@media screen and (max-width: 768px) {
    .compmenu{ display:block; } .comp_child{ display:none; } 
    .compdiv.comp_child{ display:flex; }
    .cattitle.comp_child{ display:none; }
    .mobcart .c_det{ justify-content:space-between; }
    .mobcart .c_det .product-content { width:calc(100% - 30px); }
}

@media screen and (max-width: 450px) {
    .c_det .product-content{ width:100%; }
    .c_det .pro_exgst{ width:100px; align-items:flex-start; margin: 10px 0px 0px 0px; }
    .c_det .pro_exgst font{ display:block; width:100%; margin-right:5px; }
    .c_det .qtytax{ width:calc(100% - 100px); flex-direction:column; justify-content:center; align-items: end; margin-top:10px; }
    .c_det .qtytax .quantity2{ margin-right:0px; }
    .smallmob{ display:none; }

    #mainacc #faq .card .card-body{ padding:15px; }
    .w3-sidebar, .nav-wrapper{width:100%; max-width:100%;  }    
    .nav-wrapper{top: 0px!important; height: calc(100% - 5px);}
    .navigation .logo{ max-width:95%; }
}