/*! common_filter_new.min.css: v2.0 Last Updated: 2024-11-12 Author: Mohd Ashif */
/*! Root Reset Stylesheet Start Here */
:root{--border-filter:1px solid #D1D2D5;--border-filter-light:1px solid #F3F3F4;--light-black:#1B2131E6;--bold-black:#1B2131;--grey-black:#1B2131CC;--blue:#1A4AB9;--white:#ffffff;--green:#00B868;--font-std:Circular Std;--font-book:Circular Std Book;--filter-gutter-x:16px;--filter-gutter-y:24px;--filter-gutter-0:0}
/*! Root Reset Stylesheet End Here */
.aside{width:100%;flex:0 0 auto;position:relative}
.filters-wrapper{padding:20px 23px 16px 23px;box-shadow:0 3px 6px #00000029;border:var(--border-filter-light);border-radius:11px 11px 0 0;overflow-y:auto;max-height:82.2vh}
.aside.show.active .filters-wrapper{max-height:78.4vh}
.filter-main-title{font-size:16px;line-height:16px;font-family:var(--font-std);font-weight:700;color:var(--bold-black);margin:var(--filter-gutter-0) var(--filter-gutter-0) 26px var(--filter-gutter-0)}
.filters-wrapper .filter-box+.filter-box{margin-top:16px;padding-top:21px;border-top:1px dashed transparent;border-image:repeating-linear-gradient(to right,#1b21314D 0,#1b21314D 4px,transparent 4px,transparent 8px) 1}
.filter-title{display:inline-flex;align-items:center;margin-bottom:5px;font-size:14px;font-family:var(--font-std);font-weight:500;line-height:14px;gap:5px}
.filter-information-icon{cursor:pointer;transform:rotate(180deg)}
.filter-search-box{position:relative;display:flex;align-items:center}
.form-control{display:block;width:100%;padding:6px 8px;font-size:12px;font-weight:400;line-height:12px;color:var(--bold-black);background-color:#fff;background-clip:padding-box;border:1px solid #1b213199;border-radius:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}
.form-control::placeholder{color:#1b21314D}
.input-group{position:absolute;display:flex;flex-wrap:wrap;align-items:center;margin-bottom:var(--filter-gutter-0);right:8px;background:#fff;}
.filters-list-box{padding:8px var(--filter-gutter-0)}
.filter-search-box+.filters-list-box{margin-top:8px}
.filters{--bs-gutter-x:1.5rem;padding:var(--filter-gutter-0) 11px var(--filter-gutter-0) var(--filter-gutter-0);max-height:128px;overflow-y:auto;margin-right:calc(var(--bs-gutter-x)* -.5)}
.filters::-webkit-scrollbar{width:4px;transition:all .6s;height:4px}
.filters::-webkit-scrollbar-track{background:#f1f1f1}
.filters::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:6px}
.filters::-webkit-scrollbar-thumb:hover{background:#b1b1b1}
.filter-item{display:flex;align-items:center;gap:8px;position:relative}
.filter-item+.filter-item{margin-top:8px}
.filter-item-label{font:normal normal normal 12px/16px var(--font-book);color:var(--light-black);margin:var(--filter-gutter-0);display:inline-block;padding-left:24px;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;position:relative;cursor:pointer}
.filter-item-label .filter-items-count{margin-left:2px}
.filter-item-label .whole-number{font-size:14px;vertical-align:baseline}
.filter-item-checkbox{position:absolute;opacity:0;cursor:pointer;height:0;width:0}
.filter-item-checkbox-replica{border-radius:3px;height:16px;width:16px;position:absolute;top:0;left:0;border:var(--border-filter)}
.filter-item-checkbox:checked+.filter-item-checkbox-replica,.filter-item.active .filter-item-checkbox-replica{background-color:var(--blue);border:1px solid var(--blue)}
.filter-item-checkbox-replica::after{content:"";position:absolute;display:none;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}
.filter-item-checkbox:checked+.filter-item-checkbox-replica::after,.filter-item.active .filter-item-checkbox-replica::after{display:inline-block}
.filter-box{position:relative}
.filter-information-box{top:42px;z-index:10;width:280px;display:none;position:absolute;background-color:#f5f6f6;margin-left:0;border-radius:0 6px 6px 0;box-shadow:0 3px 6px #00000029;transition:opacity .3s ease,visibility .3s ease}
.filters-wrapper .filter-box+.filter-box .filter-information-box{top:48px}
.filters-wrapper .filter-box+.filter-box:last-child .filter-information-box{top:auto;bottom:-6%}
.filter-information{padding:13px 16px 22px 17px}
.filter-information-title{font-size:14px;font-family:var(--font-std);font-weight:500;line-height:14px;color:var(--bold-black);margin-bottom:11px}
.filter-information-content p{font-size:12px;font-family:var(--font-book);font-weight:400;line-height:16px;color:var(--grey-black)}
.filter-information-content p:not(:last-child){margin-bottom:20px}
:where(#double-no-img,#double-one-img,#double-all-img,#double-one-img-search) .filters-list-box .filters{--bs-gutter-y:0;display:flex;row-gap:8px;flex-wrap:wrap;margin-top:calc(var(--bs-gutter-y)* -1);margin-left:calc(var(--bs-gutter-x)* -.5)}
:where(#double-no-img,#double-one-img,#double-all-img,#double-one-img-search) .filters-list-box .filters>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x)* .5);padding-left:calc(var(--bs-gutter-x)* .5);margin-top:var(--bs-gutter-y)}
:where(#double-all-img) .filters{max-height:200px}
:where(#double-no-img,#double-one-img,#double-all-img,#double-one-img-search) .filters-list-box .filters>.filter-item{flex:0 0 auto;width:50%;padding-right:0}
:where(#double-all-img) .filters-list-box .filters>.filter-item{padding-right:calc(.5rem* .5)}
:where(#double-all-img) .filter-item-label{display: flex; flex-direction:column;align-items:center;padding:8px;border-radius:6px;gap:6px;border:1px solid transparent;width:100%;color:#1a4ab9;transition:all .6s;}
:where(#single-side-img) .filter-item-label{padding:9px 11px 7px 9px;justify-content:space-between;width:100%;border:1px solid transparent;border-radius:6px;transition:all .6s;color:#1a4ab9;display: flex}
:where(#single-color-img) .filter-item-label{display: flex;gap: 8px}
:where(#double-all-img,#single-side-img) .filter-item-label:hover, .filter-item-label.active{border:1px solid #1a4ab9;font-weight:700;font-family:var(--font-std)}
.filter-item.active .filter-item-label {
    border: 1px solid #1a4ab9;
    font-weight: 700;
    font-family: var(--font-std);
}
.filter-img-box{margin:8px 0}
.filter-img-box img{width:auto;height:40px}
[class^=filter-items-colour]{height:16px;width:16px;border-radius:100%;background-color:#1b2131}
.filter-items-colour__blue{background-color:#8fe0ff}
.filter-items-colour__black{background-color:#000}
.filter-items-colour__yellow{background-color:#f2e520}
.filter-items-colour__red{background-color:#eb1d1d}
.filter-items-colour__orange{background-color:#e3931a}
.filter-items-colour__white{background-color:#fff;border:1px solid #1b213112}
:where(#single-color-img) .filters{max-height:140px}
/*! L1 Page Changes Start */
.aside:is(#categories_l1) .filters-wrapper .filter-main-title{margin:var(--filter-gutter-0)}
.aside:is(#categories_l1) .filters-wrapper .filters{max-height:100%;padding:0;margin:0}
.aside:is(#categories_l1) .filters-wrapper .filters-list-box{padding-top:0}
.aside:is(#categories_l1) .filters-wrapper .filter-item{background-color:var(--white);padding:9px;width:100%;font:normal normal normal 14px/14px var(--font-book);color:#1b2131CC;text-decoration:none}
.aside:is(#categories_l1) .filters-wrapper .filter-item+.filter-item{margin-top:var(--filter-gutter-0)}
.aside:is(#categories_l1) .filters-wrapper .filter-item:is(:hover,.active){background-color:#e0f5ff}
.aside:is(#categories_l1) .filters-wrapper .filter-item:is(:hover,.active) .filter-item-label{font-weight:700;font-family:var(--font-std)}
.bottom-filter-area{display:none}
@media (min-width:768px){
.aside:is(#categories_l1) .filters-wrapper{padding:0 0 16px 0;min-width:232px}
.aside:is(#categories_l1) .filters-wrapper .filters-title-wrapper{padding:20px 24px 16px 24px;border-bottom:1px solid #1b21314D;position: sticky;top: 0;z-index: 9;background-color: #ffffff}
.aside:is(#categories_l1) .filters-wrapper .filter-item{padding:9px 24px}
}
/*! L1 Page Changes End */
/*! Mobile Filter Start */
.mobile-filter-area{background:#fff;position:fixed;bottom:0;width:100%;z-index:999999;padding:0 24px 17px 24px;box-shadow:0 3px 6px #00000029;border-top:1px solid #1b21311A;border-radius:9px 9px 0 0}
.mobile-filter-area:is(.filter-visible,.active){border-radius:0;box-shadow:none;border:0;padding:0 calc(var(--bs-gutter-x)* .5) 0 calc(var(--bs-gutter-x)* .5)}
.mobile-filter-area:is(.filter-visible,.active) .mobile-filter-box{padding:22px 15px 31px 16px;box-shadow:0 3px 6px #00000029;border-top:1px solid #1b21311A}
.mobile-filter-box .mobile-filter-btn{border:0;outline:0;background:0 0;display:flex;align-items:center;gap:6px;font-size:16px;font-family:var(--font-std);font-weight:700;line-height:16px;margin-bottom:8px;color:var(--color-bold-black)}
.applyed-filter-value{font-size:12px;font-family:var(--font-book);color:var(--color-secondury-black);line-height:12px;text-align:left;margin-bottom:0}
.products-count-value{font-size:14px;font-family:var(--font-book);color:var(--color-secondury-black);line-height:14px;margin-bottom:0}
/*! Mobile Filter End */
/*! Mobile Filter Start */
.drag-btn{padding:12px 0 22px 0;display:inline-block;cursor:grab;line-height:5px}
.mobile-filter-area.filter-visible :where(.drag-btn,.mobile-filter-btn,.applyed-filter-value,.products-count-value){display:none}
.mobile-filter-area.filter-visible:not(#categories_l1_mobile-filter) .text-right{text-align:unset}
.mobile-filter-area.active .drag-btn{display:none}
.mobile-filter__clear-btn{border:1px solid var(--green);border-radius:6px;padding:12px;width:100%;max-width:140px;font-size:16px;color:var(--green);font-family:var(--font-std);font-weight:500;background:0 0;outline:0}
.mobile-filter__done-btn{border:1px solid #bbbcc0;border-radius:6px;padding:12px;width:100%;max-width:140px;font-size:16px;color:var(--white);font-family:var(--font-std);font-weight:700;background:#bbbcc0;outline:0}
.mobile-filter-area:not(.filter-visible) :where(.mobile-filter__clear-btn,.mobile-filter__done-btn){display:none}
/*! Mobile Filter End */
@media (min-width:768px){
.aside .drag-btn,.mobile-filter-area{display:none}
.aside{padding-right:0;width:280px;display:block}
.filters-wrapper{margin-left:20px;max-width:248px;position:sticky;top:110px;z-index:2;border-radius:9px;max-height:77vh}
.filter-title{align-items:baseline}
.filter-information-box{margin-left:calc(100% - 10px)}
}
@media (min-width:1400px){
.filters-wrapper{margin-left:52px}
.aside{width:312px}
}
@media (max-width:767px){
    .mobile-filter-area{z-index:999;} 
.aside{position:fixed;background:#fff;bottom:-100vh;z-index:999999;padding-top:16px;transition:bottom .3s ease-in-out}
.aside.show{bottom:103px}
.aside.show.active{bottom:89px}
.dragging .drag-btn{cursor:grabbing}
.aside.show .drag-btn{padding:19px 0 22px 0}
.aside.show .filters-title-wrapper{position:absolute;margin:0;padding:0 23px 27px 23px;background:#fff;z-index:9;top:15px;border-radius:11px 11px 0 0;left:13px;right:13px;text-align:center}
.filter-main-title{margin:0;text-align:left}
.filters-wrapper .filter-box:nth-child(2){margin-top:69px}
/*! L1 Page Changes Start */
.aside:is(#categories_l1).show.active{bottom:50px;height: 100vh;display: flex;align-items:flex-end}
.aside:is(#categories_l1).show.active .filters-wrapper{max-height:80vh;position: relative;width: 100%;padding-top: 0}
.aside:is(#categories_l1).show .filters-title-wrapper{top:0;padding:0;position: sticky;border-radius: 0}
#categories_l1_mobile-filter:is(.filter-visible,.active) :where(.mobile-filter-btn,.products-count-value){display:none}
#categories_l1_mobile-filter:is(.filter-visible,.active) :where(.mobile-filter__done-btn){display:inline-block;background:var(--green);border:1px solid var(--green);color:var(--white)}
.aside:is(#categories_l1) .filters-wrapper .filter-main-title{border-bottom:1px solid #1b21314D;padding-bottom:13px;padding-left:9px}
.aside:is(#categories_l1) .filters-wrapper .filter-item:not(:first-child){border-top:1px solid #1b21311A}
.aside:is(#categories_l1) .filters-wrapper .filter-box:nth-child(2){margin-top:13px}
/*! L1 Page Changes End */
.filter-item-label .whole-number{vertical-align:bottom}
.filterGridLeft .filters-title-wrapper{display:none}
}
@media (max-width:320px){
.filter-information-box{width:260px}
}