/* --------------------------------------------------------------- */
/* --------------------------- FILTER ---------------------------- */
/* --------------------------------------------------------------- */

/* ----- filter popup ----- */

#popup-filter-section {
    position: relative;
    /* display: none !important; */
}
#popup-filter-section>.filter-section-inside {
    background-color: #fff;
    bottom: 0;
    box-shadow: 0 0 20px rgb(0 0 0 / 50%);
    height: 100%;
    position: fixed;
    right: -550px;
    top: 0;
    z-index: 1050;
    transition: right .3s ease;
    -webkit-transition: right .3s ease;
    -moz-transition: right .3s ease;
    -ms-transition: right .3s ease;
    -o-transition: right .3s ease;
}
#popup-filter-section>.filter-section-inside {
    width: 500px;
}
#popup-filter-section.open>.filter-section-inside {
    right: 0;
}

#popup-filter-section>.filter-section-inside>.filter-section-container {
    position: relative;
    height: 100%;
    padding: 0!important;
    width: 100%;
}
#popup-filter-section .filter-head,
#popup-filter-section .filter-footer {
    padding-left: 30px;
    padding-right: 30px;
}
#popup-filter-section .filter-head {
    background-color: #fff;
    border-bottom: 1px solid #e5e5e5;
    height: 80px;
    padding-top: 25px;
    top: 0;
}
#popup-filter-section .filter-head .title-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
#popup-filter-section .filter-head .title-row>.title {
    flex: 1 0 0%;
}
#popup-filter-section .filter-body {
    height: calc(100% - 170px);
    /* overflow-y: auto; */
    /* padding-top: 15px;
    padding-bottom: 15px; */
    z-index: 1;    
}
#popup-filter-section .filter-footer {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-top: 1px solid #e5e5e5;
    bottom: 0;
    height: 90px;    
}
#popup-filter-section .filter-footer .btn-row {
    flex: 1 0 0%;
}

/* filter field section */
.field-filter-section,
.field-filter-group,
.field-filter-group .field-filter-item {
    position: relative;
}
.field-filter-section {
    padding: 30px;
}
.field-filter-group .field-filter-item.hiden {
    display: none !important;
    opacity: 0 !important;
}
.field-filter-group .field-filter-item.hiden+.field-filter-item,
.field-filter-group .field-filter-item.hiden+.field-filter-item.hiden {
    margin-top: 0 !important;
}
.field-filter-group .field-filter-item+.field-filter-item,
.field-filter-group .field-filter-item+.field-filter-item.hiden+.field-filter-item {
    margin-top: 20px!important;
}
.field-filter-group .field-filter-item>.title-filter {
    position: relative;
    border-bottom: 1px solid #000;
    cursor: pointer!important;
    font-size: 15px!important;
    font-weight: 700!important;
    letter-spacing: 0!important;
    line-height: 25px!important;
    margin: 0!important;
    padding: 15px 30px 15px 0!important;
}
.field-filter-group .field-filter-item>.title-filter .icon {
    position: absolute;
    right: 0;
    font-size: 10px;
    line-height: 25px;
    width: 30px;
    text-align: center;
    /* opacity: 0.4; */
}
/* .field-filter-group .field-filter-item.open>.title-filter .icon {
    opacity: 1;
} */
.field-filter-group .field-filter-item>.list-filter {
    display: none;
    /* display: block !important; */
}
/* .field-filter-group .field-filter-item>.list-filter>.select-field-group {
    padding-top: 20px !important;
} */

/* dropdown */
.field-filter-group .field-filter-item>.list-filter ul.product-filter-option.border-format>li.product-filter-option-list,
.field-filter-group .field-filter-item>.list-filter ul.product-filter-option.border-middle-format>li.product-filter-option-list {
    border: none !important;
}
.field-filter-group .field-filter-item>.list-filter ul.product-filter-option.border-format>li.product-filter-option-list+li.product-filter-option-list,
.field-filter-group .field-filter-item>.list-filter ul.product-filter-option.border-middle-format>li.product-filter-option-list+li.product-filter-option-list {
    border-top: 1px solid rgba(0,0,0,0.05) !important;
}
.field-filter-group .field-filter-item>.list-filter ul.product-filter-option.border-format>li.product-filter-option-list>.product-filter-option-btn,
.field-filter-group .field-filter-item>.list-filter ul.product-filter-option.border-middle-format>li.product-filter-option-list>.product-filter-option-btn {
    padding: 15px 0;
}

/* .field-filter-group .field-group {
	padding:0 !important;
	margin:0 !important;
}
.field-filter-group .field-group > .field {
	display:none !important;
}
.field-filter-group .select-field-dropdown {
    position: relative !important;
    visibility: inherit !important;
    max-height:none !important;
	background:none !important;
	border:none !important;
    box-shadow:none !important;
    overflow: hidden !important;
}
.field-filter-group ul.select-dropdown > li {
    padding: 10px  0 10px 35px !important;
    background: none !important;
}
.field-filter-group ul.select-dropdown > li + li {
    border-top: 1px dashed rgba(234,234,234,0.8);
}
.field-filter-group ul.select-dropdown > li:before {
    position: absolute;
    display: block !important;
    top: 8px;
    right: auto !important;
    left:0 !important;
    padding-top: 1px;
    width: 25px;
    height: 25px;
    font-size: 10px;
    line-height: 25px;
    color: rgba(0,0,0,0) !important;
	background-color: rgba(242,242,242,1) !important;
    text-align:center !important;
    border-radius: 100% !important;
    
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    content: "\f633";
}
.field-filter-group ul.select-dropdown > li:hover:before {
    color: rgba(0,0,0,0.5) !important;
}
.field-filter-group ul.select-dropdown > li.active:before {
    background-color: rgba(0,0,0,1) !important;
    color: rgba(255,255,255,1) !important;
} */

/* --------------------------------------------------------------- */
/* ------------------------ PRODUCT FILTER ----------------------- */
/* --------------------------------------------------------------- */

ul.product-filter-option,
ul.product-filter-option>li {
    position: relative;
    list-style: none !important;
    margin: 0;
    padding: 0;
}
.product-filter-option.mg-left {
    margin-left: 35px;
}
.product-filter-dropdown,
.product-filter-option-list,
.product-filter-option-btn {
    position: relative;
}

.product-filter-option-btn {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;    
    cursor: pointer;
    line-height: 25px;
    padding: 5px 0;
}
.product-filter-option-btn>.text {
    position: relative;
    text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.product-filter-option-btn .flex-full {
    flex: 1 0 0;
}

/* dropdown */
.product-filter-dropdown {
    display: none;
}




/* border format */

ul.product-filter-option.border-format>li {
    border-top: 1px solid rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(0,0,0,0.2);
}
ul.product-filter-option.border-format>li+li {
    border-top: none !important;
}
ul.product-filter-option.border-format>li>.product-filter-option-btn {
    padding: 15px 0;
}

ul.product-filter-option.border-middle-format>li+li {
    border-top: 1px solid rgba(0,0,0,0.2);
}


/* ul.product-filter-option.sub-cate>li {
    border-top: 1px dotted rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
} */
/* ul.product-filter-option.sub-cate>li.has-extra-sub-cate:before {
    display: none !important;
} */
ul.product-filter-option.sub-cate>li>.product-filter-option-btn {
    padding: 5px 0;
}

.product-filter-option-btn.is-action-check,
.product-filter-option-btn.is-action-slide {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;    
    cursor: pointer;
    width: 100%;
}
.product-filter-option-btn.is-action-check>.text,
.product-filter-option-btn.is-action-slide>.text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* is check */
.product-filter-option-btn.is-action-check.leading-action-check:before,
.product-filter-option-btn.is-action-check.trailing-action-check:after {
    width: 22px;
    height: 22px;
    font-size: 10px;
    line-height: 22px;    
    border: 1px solid rgba(200,200,200,1);
    color: rgba(0,0,0,0);
    background-color: rgba(0,0,0,0);
    text-align: center !important;
    border-radius: 5px !important;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    content: "\f633";
}
.product-filter-option-btn.is-action-check.leading-action-check:hover:before,
.product-filter-option-btn.is-action-check.trailing-action-check:hover:after {
    color: rgba(0,0,0,0.3);
}
.product-filter-option-btn.is-action-check.leading-action-check.fill-action-check.action-check-is-active:before,
.product-filter-option-btn.is-action-check.trailing-action-check.fill-action-check.action-check-is-active:after {
    color: rgba(255,255,255,1);
    background-color: rgba(0,0,0,1);
    border-color: rgba(0,0,0,1);
}
.product-filter-option-btn.is-action-check.leading-action-check.outline-action-check.action-check-is-active:before,
.product-filter-option-btn.is-action-check.trailing-action-check.outline-action-check.action-check-is-active:after {
    color: rgba(0,0,0,1);
    border-color: rgba(0,0,0,1);
}

/* is slide */
.product-filter-option-btn.is-action-slide.leading-action-slide:before,
.product-filter-option-btn.is-action-slide.trailing-action-slide:after {
    width: 22px;
    font-size: 12px;
    line-height: 22px;    
    color: rgba(0,0,0,0.2);
    text-align: center !important;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    content: "\f64d";
    margin-left: 15px;
}

.product-filter-option-btn.is-action-slide.leading-action-slide:hover:before,
.product-filter-option-btn.is-action-slide.trailing-action-slide:hover:after {
    color: rgba(0,0,0,0.3);
}
.product-filter-option-btn.is-action-slide.leading-action-slide.action-slide-is-active:before,
.product-filter-option-btn.is-action-slide.trailing-action-slide.action-slide-is-active:after {
    color: rgba(0,0,0,1);
}


.product-filter-option-btn.is-action-check.leading-action-check:before,
.product-filter-option-btn.is-action-slide.leading-action-check:before {
    margin-right: 15px;
}
.product-filter-option-btn.is-action-check.trailing-action-check:after,
.product-filter-option-btn.is-action-slide.trailing-action-check:after {
    margin-left: 15px;
}


/* --------------------------------------------------------------- */
/* -------------------- FILTER - MENU ON PAGE -------------------- */
/* --------------------------------------------------------------- */

#menu-onpage-section .field-filter-section {
    padding: 0 !important;
}

/* xxl */
@media (min-width: 1400px) {}

/* xl */
@media (min-width: 1200px) and (max-width: 1399.98px) {}

/* lg */
@media (min-width: 992px) and (max-width: 1199.98px) {}

/* md */
@media (min-width: 768px) and (max-width: 991.98px) {}

/* sm - xs */
@media (max-width: 767.98px) {}

/* sm */
@media (min-width: 576px) and (max-width: 767.98px) {}

/* xs */
@media (max-width: 575.98px) {

#popup-filter-section>.filter-section-inside {
    width: 100% !important;
}

}

/* xs custom */
@media (max-width: 399.98px) {}