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{ position:relative; width:375px; margin:0 12px; top:10px; border-radius:10px; }
.menublk h2{ margin-bottom:0px; }
.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.seclevel{ width: 800px; }
.nav-wrapper .secondlevel{ width:400px; margin-left:400px; border-left:1px solid #eee; }

.nav-wrapper.show-menu { transform: none; }
.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 .cattitle{ display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #eee; }
.nav-wrapper .cattitle font{ font-size:20px; font-weight:500; margin:12px 10px 12px 20px; text-overflow: ellipsis; text-transform: capitalize; }
.js-nav-toggle span { position: relative; background-color: #345; height: 2px; display: block; width: 22px; margin: 0px auto; 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 { display:flex; justify-content: center; align-items:center; position: absolute; top:2px; right:5px; width: 43px; height: 43px; background:none; margin:0; 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 #eee; 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: 51px; height: calc(100% - 55px); 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 0px; 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; }
.catmenu li a.active{ border:1px solid var(--mycolor); }

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;}

.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); }

.hybrid-left{ width:30%; margin:0px; overflow:hidden; border:1px solid #00000014; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; border-radius:10px; }
.hybmenu{ position:inherit; width:calc(100% - 20px); margin:0px 10px; max-height:305px; overflow: auto; }
.hybmenu::-webkit-scrollbar { display: none; }
.hybmenu li a h2{ margin-bottom:0px; }
.hybmenu li a{ display: block; position: relative; padding:12px; color: var(--dark); text-decoration: none; margin:0px; border-radius: 10px; transition: color 0.15s, background-color 0.15s; font-size: 16px; }
.hybmenu li:hover h2{ font-weight:600!important; }
.hybmenu li a.active{ border:1px solid var(--mycolor); }
.hybmenu li.has-dropdown > a { padding-right:40px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-weight: 400; }
.hybmenu li.has-dropdown > a:after { content: ""; opacity:0; 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%; }
.hybmenu li.has-dropdown:hover > a:after{ opacity:1; }
.hybmenu li.has-dropdown img{ width:25px; margin-right:10px; padding: 2px; }

.hybrid-right{ width:70%; margin:0px; padding-left:20px; overflow:hidden; }
.hybrid-right .single-slider{ padding-bottom:0px!important; border-radius:10px; overflow:hidden; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; }

.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%; font-weight:600; }
.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; }

.estimateblk{ display:flex; flex-wrap: wrap; gap:10px; }
.estimateblk .form-group{ width:calc(100%/2 - 5px); margin-bottom:0px; }

.calculator-main { display:flex; align-items:center; padding:30px 30px; gap:40px; }
.calculator-content { width:100%; display:flex; align-items:center; gap:20px; }
.calculator-info { width:270px; }
.calculator-title { font-size: 20px; font-weight: 700; color: #1e293b; margin-bottom: 4px; display: flex; align-items: center; gap: 10px; } 
.shipping-icon { width: 24px; height: 24px; fill: #059669;\n        }\n\n        .calculator-subtitle { font-size: 14px; color: #64748b; font-weight: 500; }
.calculator-form { width:calc(100% - 290px); }
.form-row{ width:100%; margin:0px; display: flex; flex-wrap: inherit; align-items: center; gap:10px; background:#fff; border:2px solid #e2e8f0; border-radius:10px; padding:6px; transition: all 0.2s ease; }
.form-input { width:calc(100% - 180px); color: #1e293b; padding: 14px 18px!important; font-size: 16px; border: none!important; background: transparent; }
.form-input:focus { outline: none; }
.form-input::placeholder { color: #94a3b8; font-weight: 400; }
.calculate-btn { width:180px; background: linear-gradient(135deg, var(--mycolor), var(--mycolor)); color:#fff; border: none; padding: 14px 32px; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; display: flex; justify-content: center; align-items: center; gap: 8px; white-space: nowrap; flex-shrink: 0; }
.calculate-btn:hover { background: linear-gradient(135deg, var(--mycolor), var(--mycolor)); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(5, 150, 105, 0.3); }
.calculate-btn:active { transform: translateY(0); }
.result-display { width:15%; text-align: right; } 
.result-section { width:100%; transition: all 0.3s ease; /*transform: translateX(20px);*/ } 
.result-label { font-size: 13px; color: #64748b; font-weight: 500; margin-bottom: 4px; }
.result-price { font-size: 28px; font-weight: 800; color: #059669; margin-bottom: 2px; line-height: 1; }
.result-details { font-size: 12px; color: #64748b; } 

.disclaimer-bar { background: linear-gradient(135deg, #fef3c7, #fef7cd); border-top: 1px solid #fde68a; padding: 16px 40px; display: flex; align-items: center; gap: 12px; border-radius:0px 0px 10px 10px; }
.warning-icon { width: 16px; height: 16px; fill: #d97706; flex-shrink: 0; }
.disclaimer-content { flex: 1; }
.disclaimer-title { font-size: 13px; font-weight: 600; color: #92400e; margin-bottom: 2px; }
.disclaimer-text { font-size: 12px; color: #78716c; line-height: 1.4; text-align:justify; }

.welcome-banner { background: linear-gradient(135deg, var(--mycolor) 0%, var(--seccolor) 100%); border-radius: 12px; padding: 32px 36px; margin-bottom: 24px; box-shadow: 0 4px 16px rgba(30, 91, 168, 0.2); }
.welcome-content { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.welcome-greeting h1 { font-size: 28px; font-weight: 700; color: #fff; margin-bottom: 6px; line-height: 1.2; }
.welcome-greeting .user-name { color: #ffd54f; font-weight: 800; }
.welcome-subtitle { font-size: 14px; color: rgba(255, 255, 255, 0.85); font-weight: 400; }
.welcome-actions { text-align: right; }
.last-login { display: inline-block; background: rgba(255, 255, 255, 0.15); padding: 8px 16px; border-radius: 20px; font-size: 12px; color: rgba(255, 255, 255, 0.9); font-weight: 500; }

@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: 1000px) { 
    .form-input { width:calc(100% - 145px); padding:14px 10px!important; }
    .calculate-btn { width:145px; padding: 14px 15px; }
}

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

@media screen and (max-width: 900px) { 
    .hybrid-left{ display:none; width:100%; }
    .hybrid-right{ width:100%; padding-left:0px; }
}

@media screen and (max-width: 850px) { 
    .calculator-main{ gap:10px; }
    .calculator-content{ width:75%; flex-direction: column; }
    .result-display { width:25%; }
    .calculator-info, .calculator-form{ width:100%; }
}

@media screen and (max-width: 768px) {
    .compmenu{ display:block; } .comp_child{ display:none; } 
    .nav-wrapper nav.topcomp_child{ top:0px; }
    .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: 500px){
    .calculator-main{ flex-direction: column; }
    .calculator-content{ width:100%; flex-direction: column; }
    .result-display { width:100%; text-align:left; }

    .form-row{ flex-wrap: wrap; border:0px; }
    .form-row .form-input{ width:100%; border:1px solid #e2e8f0!important; border-radius:10px; }
    .calculate-btn{ width:100%; padding: 16px 15px; }
}

@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%; }
}

@media screen and (max-width: 400px){
    .calculator-main{ padding:15px; }
    .disclaimer-bar{ padding: 16px 20px; }
    .warning-icon { width: 20px; height: 20px; }
}