:root{
    --primary-color:#F82643;
    --cart-added: #0AC59A;
    --white-color:#ffffff;
    --primary-blue:#005BE3;
    --primary-orange:#F8A026;
    --secondary-green:#58B665;
    --yellow-light:#FFF9EB;
    --black-color:#000000;
    --green-btn:#79B52D;
    --border-color:#dddddd;
    --content-grey:#606060;
    --clarification-orange: #F8A026;
    --clarification-blue:#005BE3;
    --bg-color:#f5f5f5;
}
.filterHead-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
}
.filterbtn-left{
    display: flex;
    align-items: center;
    column-gap: 15px;
}
.filterbtn-left button, .filterbtn-left button:hover, .filterbtn-left button:active{
    margin: 0;
    border:1px solid var(--border-color) !important;
    font-weight: 500;
    font-size:14px;
    transition: 0.5s all ease-in-out;
}
.filterbtn-left button span::before{
    margin-right: 5px;
}
.filterbtn-left p{
    margin:0;
    font-size: 14px;
    color:var(--content-grey);
}
.filter-product-wrapper{
    display: flex;
    align-items: flex-start;
    column-gap: 0;
    transition: all 0.3s ease-in-out;
}
.filter-product-wrapper.filter-product-wrapperHide{
    column-gap: 24px;
}
.filter-product-wrapper .filter-wrapper{
    width: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.filter-product-wrapper .filter-wrapper.filtersWeb{
    width: 230px;
    display: block;
    transition: all 0.3s ease;
    opacity: 1;
    visibility: visible;
}
.filter-product-wrapper .ct-filter-product{
    width: calc(100% - 230px);
    transition: all 0.3s ease;
}
.filter-product-wrapper .ct-filter-product.active{
    width: 100%;
    transition: all 0.3s ease;
}
.filters-accordion .accordion-header button{
    padding: 15px 0;
    font-weight: 600;
    color:var(--black-color);
    font-size: 14px;
}
.filters-accordion .accordion-item:first-child .accordion-header button{
    padding-top: 0;
}
.filters-accordion .accordion-header button:not(.collapsed){
    background-color: transparent !important;
    box-shadow: none !important;
}
.filters-accordion .accordion-header button::after{
    background-size: 16px !important;
    font-weight: 600;
}
.filters-accordion .accordion-body{
    padding: 0 0 15px;
}


.filters-list .filter-btn span::before{
    font-size: 18px;
}
.filters-list .filter-btn.manufatureFilter.dropdown-toggle{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    -webkit-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    transition: all 0.6s ease;
    transform: rotate(0deg);
}
.filters-list .filter-btn.manufatureFilter.dropdown-toggle.show{
    border: 1px solid var(--primary-color);
}
.filters-list .filter-btn.manufatureFilter.dropdown-toggle.show i{
    transform: rotate(180deg);
    -webkit-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    transition: all 0.6s ease;
}
.filters-list .filter-btn{
    background-color: #ffffff;
    border:1px solid var(--border-color);
    padding: 10px 25px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    column-gap: 10px;
    margin-bottom: 0;
}
.filters-list .filter-btn.manufatureFilter.sortbyFilter span#sortbyFilter-selected{
    font-size: 14px;
    font-weight: 600;
    color: var(--black-color);
}
.filters-list .filter-btn.manufatureFilter.sortbyFilter.active{
    background-color: var(--primary-color);
    border:1px solid var(--primary-color);
    color: var(--white-color);
}
.filters-list .filter-btn.manufatureFilter.sortbyFilter.active span,
.filters-list .filter-btn.manufatureFilter.sortbyFilter.active span#sortbyFilter-selected{
    color: var(--white-color);
}
.selectedFilter-wrapper button{
    background-color: transparent;
    border:0;
    padding: 0;
    margin: 10px 0 0;
    color: var(--primary-blue);
    text-decoration: underline;
    font-weight: 500;
    font-size: 14px;
}
.selected-filters{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 12px;
}
.selectedFilters{
    background-color: #F1F1F3;
    border:1px solid var(--border-color);
    padding: 5px 15px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    column-gap: 7px;
    margin-top: 10px;
    width: max-content;
}
.selectedFilters i{
    font-size: 14px;
    cursor: pointer;
}
.selectedFilters p{
    font-size: 14px;
    font-weight: 400;
    margin: 0;
}
.fitDevice-wrapper .fitDevice-product{
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
}
.fitDevice-wrapper .fitDevice-product:last-child{
    border-bottom:0;
    padding:0;
}
.fitDevice-wrapper .fitDevice-product h5{
    font-size: 14px;
    font-weight: 600;
}
.fitDevice-wrapper .fitDevice-product input.search-brand{
    height: 40px;
    margin: 15px 0;
}
.filter-selection-wrapper .filterSelection-list .form-check{
    margin-top: 5px;
    font-size: 14px;
}
.filter-selection-wrapper .filterSelection-list .form-check label{
    position: relative;
    top:3px;
    padding-left: 5px;
    font-size: 13px;
    text-transform: uppercase;
}
.filter-selection-wrapper .filterSelection-list label.form-check-color{
    display: flex;
    align-items: center;
}
.filter-selection-wrapper .filterSelection-list .form-check label span.product-count{
    padding-left: 5px;
    color: var(--content-grey);
}
.filter-selection-wrapper .filterSelection-list .form-check label.form-check-color span.product-color{
    width: 18px;
    height: 18px;
    border-radius: 3px;
    margin-right:5px;
    display: inline-block;
}
.filter-selection-wrapper .filterSelection-list .form-check label.form-check-color span.product-color.product-colorBlack{
    background-color: #000000;
}
.filter-selection-wrapper .filterSelection-list .form-check label.form-check-color span.product-color.product-colorRed{
    background-color: #FF0B0B;
}
.filter-selection-wrapper .filterSelection-list .form-check label.form-check-color span.product-color.product-colorBlue{
    background-color: #635BFF;
}
.filter-selection-wrapper .filterSelection-list .form-check label.form-check-color span.product-color.product-colorBrown{
    background-color: #C38D56;
}
.filter-selection-wrapper .filterSelection-list .form-check label.form-check-color span.product-color.product-colorCream{
    background-color: #FFFDD0;
}
.filter-selection-wrapper .filterSelection-list .form-check label.form-check-color span.product-color.product-colorGold{
    background-color: #FFD272;
}
.filter-selection-wrapper .filterSelection-list .form-check label.form-check-color span.product-color.product-colorGreen{
    background-color: #33D29F;
}
a.collapseMore{
    margin-top: 15px;
    color: var(--black-color);
    font-size: 13px;
    display: block;
}
.wishlist-products.row-wishlist-products .product-quantity .qty-container .qty-btn-minus,
.wishlist-products.row-wishlist-products .product-quantity .qty-container .qty-btn-plus{
  border: 1px solid #dddddd;
  padding: 10px 13px;
  font-size: 12px;
  height: 45px;
  width: 45px;
  transition: 0.3s;
  background-color: #F1F1F3;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wishlist-products.row-wishlist-products .product-quantity .qty-container .input-qty{
    height:45px;
}

/* Toggle Switch */
.filters-accordion .accordion-item.inStock{
    padding: 15px 0;
    font-size: 15px;
    display: flex;
    align-items: center;
    column-gap: 15px;
}
.filters-accordion .accordion-item.inStock p{
    margin: 0;
    font-size: 14px;
}
.filterSwitch input
{
  display: none;
}
.filterSwitch 
{
  display: inline-block;
  width: 45px; /*=w*/
  height: 21px; /*=h*/
  margin: 0;
  transform: translateY(5%);
  position: relative;
}
.filterSwitch .slider
{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 100px;
  box-shadow: 0 0 0 1px #ddd, 0 0 1px #ddd;
  cursor: pointer;
  border: 4px solid transparent;
  overflow: hidden;
  transition: 0.2s;
}
.filterSwitch .slider:before
{
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #777;
  border-radius: 30px;
  transform: translateX(-24px);
  transition: 0.2s;
}
.filterSwitch input:checked + .slider:before
{
  transform: translateX(24px); 
  background-color: var(--white-color);
}
.filterSwitch input:checked + .slider{
    background-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-color), 0 0 4px var(--primary-color);
}

/* Toggle Switch */


@media (min-width:1199px) and (max-width:1399px){
    .ct-filter-product.filterProducts .product-items img{
        width: 140px !important;
    } 
    .ct-filter-product.filterProducts .product-details .product-price p{
        font-size: 14px;
    }
    .ct-filter-product.filterProducts .product-details .product-price .pro-added{
        font-size: 12px;
    }
    .ct-filter-product.filterProducts .product-details .product-price .pro-added span::before{
        font-size: 18px;
    }
    .ct-filter-product.filterProducts .product-details .product-substituted p{
        word-wrap: break-word;
    }
}
@media only screen and (min-width:1200px){
    .filter-wrapperWeb{
        display: block;
    }
    .filterHead-wrapperMob{
        display: none;
    }
}
@media only screen and (max-width:1199px){
    .filter-wrapperWeb{
        display: none;
    }
    .filterHead-wrapperWeb{
        display: none;
    }
    .filterHead-wrapperMob{
        display: inline-flex;
        align-items: center;
        column-gap: 15px;
    }
    .filterbtn-left button, .filterbtn-left button:active {
        font-size: 13px;
    }
    .filter-SortbyMob button, .filter-SortbyMob button:active, .filter-SortbyMob button:focus{
        font-size: 13px;
        border:1px solid var(--border-color);
        margin: 0;
    }
    .filter-SortbyMob button::after{
        border:0;
    }
    #mobFilterCanvas, .filterMobSelection{
        max-width: 90%;
    }
    #mobFilterCanvas .offcanvas-header, .filterMobSelection .offcanvas-header{
        background-color: var(--primary-color);
        color: var(--white-color);
    }
    #mobFilterCanvas .offcanvas-header h5, .filterMobSelection .offcanvas-header h5{
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 0;
    }
    #mobFilterCanvas .offcanvas-header i.btn-close{
        filter: invert(1) brightness(2);
        opacity: 1;
        font-size: 12px;
        padding-left: 0;
    }
    #mobFilterCanvas .mobFilter-stock{
        background-color: #F1F1F3;
        border-bottom: 1px solid var(--border-color);
        padding: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    #mobFilterCanvas .offcanvas-filterBody{
        padding: 15px;
    }
    #mobFilterCanvas .offcanvas-filterBody ul{
        padding: 0;
        margin: 0;
    }
    #mobFilterCanvas .offcanvas-filterBody ul li{
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0;
        border-bottom: 1px solid var(--border-color);
    }
    #mobFilterCanvas .offcanvas-filterBody ul li i{
        font-size: 14px;
    }
    #mobFilterCanvas .offcanvas-filterFooter, .filterMobSelection .offcanvas-filterFooter{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        padding: 15px;
    }
    #mobFilterCanvas .offcanvas-filterFooter,  .filterMobSelection .offcanvas-filterFooter{
        border-top:1px solid var(--border-color);
    }
    #mobFilterCanvas .offcanvas-filterFooter a, .filterMobSelection .offcanvas-filterFooter a{
        width: 100%;
    }
    #sortbyMobFilter{
        height: 250px;
    }
    #sortbyMobFilter .offcanvas-header{
        border-bottom: 1px solid var(--border-color);
    }
    #sortbyMobFilter .offcanvas-header button{
        opacity: 1;
    }
    .selectedFilter-wrapper.selectedFilter-wrapperMob{
        display: flex;
        align-items: center;
        column-gap: 10px;
        flex-wrap: wrap;
    }
}