.cat-option-label:after {
    background-color: rgba(0,0,0,0.7);
    content: '';
    opacity: 0;
    pointer-events: none;
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}
.cat-option-checkbox:checked ~ .dc__filter__right__panel .cat-option-label span {
    background-color: #fff;
    box-shadow: none;
}
[id="filter-btn"]:checked ~ .dc__filter__right__panel .cat-option-label span{
    z-index: 1;
}
.cat-option-checkbox:checked ~ .dc__filter__right__panel .cat-option-label span:before {
    transform: rotate(45deg);
}
.cat-option-checkbox:checked ~ .dc__filter__right__panel .cat-option-label:after {
    opacity: 1;
    pointer-events: auto;
}
.sortby-label:after{
    content: '';
    height: 100vh;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    width: 100%;
    z-index: 1;
}
.sortby-label:after{        
    background-color: rgba(0, 0, 0, 0.7);
}
.sortby-checkbox:checked ~ .sortby-label{
    color: #B20101;
}
.sortby-checkbox:checked ~ .sortby-label:after {
    opacity: 1;
    pointer-events: auto;
}
@media(max-width:1023px){
    .no-scroll{
        overflow-y: hidden;
    }
}
.no-scroll-02{
    overflow: hidden;
    height: 100%;
}
@media(min-width:1024px){
    .no-scroll-02 .sticky{
        z-index: 1003;
    }
    .no-scroll-02 .dc-section{
        transform:inherit;
    }
}
@media(max-width:1023px){
    .no-scroll-02 .dc-section{
        position: relative;
        z-index: 1003;
    }
    .no-scroll-02 .dc-section.overlap-hidden{
        position:unset;
    }
    /* .scroll-down .filter-panel{
        opacity: 0;;
    } */
}
.sortby-dropdown {
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgb(0 0 0 / 50%);
    display: none;
    padding: 12px 15px;
    position: absolute;
    left: 0;
    top: -195px;
    width: 140px;
    z-index: 4;
}
@media(min-width:1024px){
    .sortby-dropdown {
        left: 0;
        top: 65px;
    }
}
.sortby-checkbox:checked ~ .sortby-dropdown {
    display: block;
}
.sortby-option {
    color: #4d4d4d;
    cursor: pointer;
    display: block;
    padding-left: 22px;
    position: relative;
}
.sortby-option::before{
    content: '';
    display: block;
    height: 14px;
    position: absolute;
    left: 0;
    top: 3px;
    width: 14px;
}
.popularity:before{
    background-image: url(https://www.giftstoindia24x7.com/svg22/sort-popularity-icn.svg);
}
.high-price:before{
    background-image: url(https://www.giftstoindia24x7.com/svg22/sort-highprice-icn.svg);
}
.low-price:before{
    background-image: url(https://www.giftstoindia24x7.com/svg22/sort-lowprice-icn.svg);
}
.new-price:before{
    background-image: url(https://www.giftstoindia24x7.com/svg22/sort-new-icn.svg);
}
.trending:before 
{
    background-image: url(https://www.giftstoindia24x7.com/svg22/sort-trending-icn.svg);
}
.sortby-option+.sortby-option {
    margin-top: 15px;
}

.sortby-option.selected {
    color: #2b2b2b;
    font-weight: 700;
}
.filter-label:after {
    content: '';
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    width: 100%;
    z-index: 1001;
}
[id="filter-btn"]:checked ~ .dc__filter__right__panel .filter-label:after {
    opacity: 1;
    pointer-events: auto;
}
.filter-label:after {
    background-color: rgba(0, 0, 0, 0.7);
}
.filter-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-y: auto;
    position: relative;
    width: 100%;
}
.filter-container:before{
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    z-index: -1;
}
.filter-hdn {
    border-bottom: 1px solid #EBEBEB;
    color: #2B2B2B;
    display: block;
    font: normal 18px/22px 'Roboto Condensed', sans-serif;
    padding: 12px 15px 10px;
    text-transform: uppercase;
    text-align: center;
}
.filter-close {
    cursor: pointer;
    font-size: 0;
    position: relative;
    transition: all 0.3s ease-in-out;
    position: absolute;
    left: 20px;
    top: 13px;
    width: 14px;
}
.filter-close:before, .filter-close:after {
	background-color: #4D4D4D;
	cursor: pointer;
	content: "";
	position: absolute;
	border-radius: 50px;
	height: 18px;
	width: 2px;
	z-index: 1;
}
.filter-close:before {
	transform: rotate(-45deg);    
}
.filter-close:after {
	transform: rotate(45deg);
}

.filter-clear-all {
    color: #4D4D4D;
    cursor: pointer;
    font: normal 14px/22px 'Roboto Condensed', sans-serif;
    position: absolute;
    right: 15px;
    top: 12px;
    text-transform: uppercase;
}
.applied-filter-section {
    border-bottom: 1px solid #EBEBEB;    
    padding-right: 10px;
    width: 100%;
}
.filter-option {
    align-items: center;
    background-color: #E9EBEF;
    border: 1px solid #E9EBEF;
    border-radius: 15px;
    color: #4D4D4D; 
    flex: 0 0 auto;
    height: 30px !important;
    line-height: 30px;
    margin: 15px 5px;
    padding: 0 30px 0 15px;
    position: relative;
    width: auto !important;
    transition: all 0.3s ease-in-out;
} 
.filter-option i {
    content: '';
    cursor: pointer;
    display: block;
    font-size: 0;
    line-height: 0;
    position: absolute;
    right: 8px;
    height: 12px;
    width: 12px;
    top: 9px;
}
.filter-option i:before, .filter-option i:after {
	background-color: rgba(0,0,0,0.3);
	cursor: pointer;
	content: "";
	position: absolute;
    right: 6px;
	border-radius: 50px;
	height: 12px;
	width: 1px;
	z-index: 1;
	transform: rotate(-45deg);
}
.filter-option i:after {
	transform: rotate(45deg);
}
.filter-price-range {
    align-items: center;
    /* border-top: 1px solid #EBEBEB; */
    padding: 15px;
    display: grid;
    grid-template-columns: 145px auto;
    width: 100%;
}
.filter-price-label {
    display: block;
    padding-right: 10px;   
    color: #4d4d4d;
    position: relative;
}  
.filter-price-txt {
    display: block;
}
.filter-price-label .input-fld {
    color: #2B2B2B;  
    display: block;
    font-weight: 500;
    margin-top: 5px;
}
.range-slider {
    padding-right: 10px;
}
.irs--round {            
    height: 30px;
}
.irs {
    display: block;
    position: relative;
    user-select: none;
}
.irs-line {
    background-color: #E1DCE7;
    border-radius: 2px;
    display: block;
    height: 4px;
    position: relative;
    top: 15px;
    overflow: hidden;
    outline: none !important;
    width: 100%;
}
.irs-bar {
    background-color: #D9333F;
    display: block;
    top: 15px;
    height: 4px; 
    position: absolute;
    left: 0;
    width: 0;
}
.irs-handle {
    background-color: #fff;
    border: 1px solid #D9333F;
    border-radius: 50%;
    cursor: pointer;
    display: block; 
    box-sizing: border-box;
    position: absolute;
    top: 26px;
    z-index: 1;
}
.irs-handle.from {
    height: 20px;
    width: 20px;
    top: 7px;
}
.irs-handle.to {
    height: 30px;
    top: 2px;
    width: 30px;
    z-index: 2;
}
.js-range-slider {
    display: none;
}   

.filter-tab-control {
    border-top: 1px solid #EBEBEB;
    display: table;
    flex: 1;
    height:100%;
    position: relative;
    width: 100%;
}

.filter-tab-control:before {
    background-color: #96172E;
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    width: 150px;
    height: 100%;
    display: block;
    z-index: -1
}
.filter-tab-control .filter-tab > .filter-filter-tab-selector {
    position: absolute;
    display: none;
}

.filter-tab > label {
    background-color: #96172E;
    color: #fff;
    cursor: pointer;
    display: table-cell;
    height: 56px;
    line-height: 18px;
    width: 150px;
    position: relative;
    margin: 0;
    padding: 0 33px 0 15px;
    text-transform: uppercase;
    vertical-align: middle;
}
.filter-tab + .filter-tab label:before{
    background-color: rgba(0,0,0,0.2);
    content: '';
    display: block;
    height: 1px;
    position: absolute;
    left: 15px;
    right: 15px;
    top: 0;
}
.filter-tab.active + .filter-tab label:before{
    display: none;
}
.filter-tab > input:checked + label {
    background-color: #fff;
    border-radius: 30px 0 0 30px;
    color: #B20101;
    font-weight: 500;
    width:151px;
}
.filter-tab:first-of-type > input:checked + label {
    border-top-left-radius: 0;
}
.filter-tab.first-tab + .filter-tab > label:before {
    display: none;
}
.filter-tab + .filter-tab > input:checked + label:before {
    background-color: #96172E;
    border-bottom-right-radius: 30px;
    box-shadow: 6px 5px 0 5px #fff;
    content: '';
    display: block;
    height: 22px;
    pointer-events: none;
    position: absolute;
    left: inherit;
    right: 1px;
    top: -22px;
    width: 18px;
}
.filter-tab > input:checked + label:after {
    background-color: #96172E;
    border-top-right-radius: 30px;
    box-shadow: 6px -5px 0 5px #fff;
    content: '';
    display: block;
    height: 22px;
    pointer-events: none;
    position: absolute;
    right: 1px;
    top: 100%;
    width: 18px;
    z-index: 1;
}
.filter-tab-content {
    display: none;
    font-size: 14px;
    line-height: 18px;
    overflow-y: auto;
    position: absolute;
    left: 150px;
    top: 1px;
    right: 0;
    bottom: 0;
    padding-bottom: 60px;
}
.filter-tab-selector:checked ~ .filter-tab-content {
    display: block;
}
.filter-count {
    color: #D5D5D5;
    font-size: 12px;
    line-height: 18px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    text-align: right;
}
.filter-tab > input:checked + label .filter-count {
    color: #4D4D4D;
    font-weight: normal;
    
}
.filter-menu-panel {
    background-color: #fff;
    border-bottom: 3px solid #F7F4FB;    
    margin: 0 15px;
}
.filter-menu-panel:last-child{
    border-bottom: none;
}
.filter-menu-hd {
    background-color: #fff;
    color: #2B2B2B;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-weight: 700;
    height: 55px;    
    position: relative;
}
.filter-menu-hd:after {
    content: '';
    display: block;
    position: absolute;
    top: 32%;
    right: 0;
    height: 20px;
    width: 20px;
}
.filter-menu-down:after {
    background-image: url(https://www.giftstoindia24x7.com/svg22/plus.svg);
}
.filter-menu-up:after {
    background-image: url(https://www.giftstoindia24x7.com/svg22/minus.svg);
}
.filter-menu-hd+div {
    display: block;
    max-height: 265px;
    overflow-y: auto;
    padding: 0 15px;
}
.cat-option {
    cursor: pointer;
    display: block;
    font-size: 14px;
    padding: 10px 40px 15px 22px;
    position: relative;
}
.filter-menu-panel div > span + span {
    padding-top: 0;
}
.filter-menu-panel div>span:before {
    content: '';
    display: inline-block;
    position: absolute;
    left: -3px;
    transform: rotate(45deg) translateY(-88%);
    height: 10px;
    width: 5px;
    border-bottom: 1px solid #B4B4B4;
    border-right: 1px solid #B4B4B4;
    z-index: 1;
    top: 21px;
}
.filter-menu-panel div > span + span:before {
    top: 10px;
}
.filter-menu-panel div>span.selected {
    color: #2B2B2B;
    font-weight: 700;
}
.filter-menu-panel div>span.selected:before {
    border-color: #B20101;
    border-width: 2px;
    width: 5px;
    height: 9px;
}
.filter-menu-panel div span span.prod-qty {
    color: #B4B4B4;
    font-size: 12px;
    font-weight: normal;
    position: absolute;
    right: 0;
    top: 10px;
}
.filter-menu-panel div > span + span span.prod-qty {
    top: 0;
}

.filter-apply-btn {
    border-radius: 7px;
    background-color: #4D4D4D;
    color: #fff;
    cursor: pointer;
    display: block;
    font-weight: 700;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-transform: uppercase;
    position: absolute;
    left: 165px;
    right: 15px;
    bottom: 15px;
    z-index: 1;
}