:root{
    --mj-sad-modal-zindex: 9999 !important;
}
.mj-sad-filter-s1-header-st1{
    padding-bottom: 0;
    margin-bottom: 10px;
    border: none ;
}
.mj-sad-filter-s1-header-st2{
    padding-bottom: 10px;
    border-bottom: 1px solid #dfdfdf;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mj-sad-filter-s1-modal-close-btn{
    font-family: FontAwesome !important;
    margin: 0;
    border: none;
    outline: none;
    background: none;
    font-weight: 300;
    font-size: 30px;
    color: #303030;
}

.mj-sad-filter-s1-delete-all-btn{
    display: flex;
    gap: 5px;
    border: none;
    outline: none;
    background: none;
    align-items: center;
}
.mj-sad-filter-s1-delete-all-btn div{
    font-family: FontAwesome !important;
    font-size: 17px;
    color: #FD2C2C;
}
.mj-sad-filter-s1-delete-all-btn span{
    font-weight: 400;
    font-size: 13px;
    color: #303030;
}

.mj-sad-filter-s1-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:15px 5px ;
    border-bottom: 1px solid #EEEEEE;
}

.mj-sad-filter-item-text{
    font-weight: 500;
    font-size: 15px;
    color: #303030;
    text-align: right;
}

.mj-sad-caret-left{
    font-family: FontAwesome !important;
}

.mj-sad-filter-s1-selected:after{
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #FF862A;
    margin-right: 5px;
    border-radius: 50%;
}

/*Start | On-Off Button Design*/
.mj-sad-btn-onoff{
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.mj-sad-btn-onoff input{
    display: block;
    position: absolute;
    opacity:0;
    width: 550%;
    right: -433%;
    height: 115%;
}
.mj-sad-btn-onoff span{
    position: relative;
    display: block;
    width: 55px;
    height: 25px;
    border-radius: 40px;
    background: #ccc;
    border: 1px solid #ccc;
    -webkit-transition: 400ms;
    -moz-transition: 400ms;
    -ms-transition: 400ms;
    transition: 400ms
}
.mj-sad-btn-onoff input:checked ~ span{
    border: 1px solid #33348E;
    background: #33348E;
}
.mj-sad-btn-onoff input ~ span:before{
    content: '';
    display: block;
    width: 34px;
    height: 34px;
    position: absolute;
    right: 0px;
    font-size: 14px;
    font-family: "Arial";
    font-weight: bold;
    line-height: 34px;
    color: #444;
    padding: 0px 8px;
    letter-spacing: 1px;
    text-transform: uppercase;
    -webkit-transition: 500ms;
    -moz-transition: 500ms;
    -ms-transition: 500ms;
    transition: 500ms
}
.mj-sad-btn-onoff input:checked ~ span:before{
    content: '';
    right: 28px;
    color: #fff
}
.mj-sad-btn-onoff input ~ span:after{
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 2px;
    left: 3px;
    background: #fff;
    border-radius: 50%;
    -webkit-transition: 400ms;
    -moz-transition: 400ms;
    -ms-transition: 400ms;
    transition: 400ms
}
.mj-sad-btn-onoff:hover input ~ span:after{
    -webkit-transform:scale(0.9);
    -moz-transform:scale(0.9);
    -ms-transform:scale(0.9);
    transform:scale(0.9)
}
.mj-sad-btn-onoff input:checked ~ span:after{
    content: '';
    left: 30px;
}
/*End | On-Off Button Design*/

.mj-sad-filter-modal-footer-btn,.mj-sad-filter-categories-select-btn{
    background: #33348E;
    border-radius: 10px;
    height: 60px;
    width: 100%;
    color: #FFFFFF;
    border: none;
    outline: none;
    font-weight: 400;
    font-size: 20px;
}

.mj-sad-filter-categories-modal,.mj-sad-filter-s1-modal{
    z-index: var(--mj-sad-modal-zindex);
    background-color: rgb(255 255 255 / 90%) !important;
    backdrop-filter: blur(4px);

}
.mj-sad-filter-categories-modal .modal-content,.mj-sad-filter-s1-modal .modal-content{
    z-index: var(--mj-sad-modal-zindex);
    background: unset !important;
}

.mj-sad-filter-s2-header-st1{
    padding-bottom: 0;
    margin-bottom: 10px;
    border: none ;
}

.mj-sad-filter-s2-header-st2{
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dfdfdf;
    width: 100%;
}

.mj-sad-filter-s2-header-text{
    color: #303030;
    font-weight: 500;
    font-size: 15px
}

.mj-sad-filter-s2-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 10px;
    background:  #dfdfdf;
    gap: 10px;
    margin-bottom: 7px;
    border-radius: 10px;

}

.mj-sad-selected-filter-category-item .mj-sad-filter-s2-item-text{
    color: #FF862A;
}
.mj-sad-selected-filter-category-item .mj-sad-caret-left{
    transform: rotate(-90deg);
    color: #FF862A;
}

.mj-sad-filter-brands-modal-body{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    grid-auto-rows: max-content;
}

.mj-sad-filter-brands-items{
    background: #e6e6e6;
    border-radius: 15px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 15px;
}

.mj-sad-filter-brands-items-selected{
    background: #857ADE;
    color: #F5F5F6;
}

.mj-sad-filter-price-from-div,.mj-sad-filter-price-to-div{
    background: #e6e6e6;
    border-radius: 10px;
    height: 60px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    margin-bottom: 15px;
}

.mj-sad-filter-price-from-div div{
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}
.mj-sad-filter-price-to-div div{
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.mj-sad-filter-price-from-num,.mj-sad-filter-price-to-num{
    font-weight: 500;
    font-size: 16px;
    color: #303030;
}

.mj-sad-filter-price-from-label{
    font-weight: 400;
    font-size: 12px;
    color: #989898;
}

/*--------- price range*/

/* This line can be removed it was just for display on CodePen: */


.slider-labels {
    margin-top: 10px;
}

/* Functional styling;
 * These styles are required for noUiSlider to function.
 * You don't need to change these rules to apply your design.
 */
.noUi-target,
.noUi-target * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -ms-touch-action: none;
    touch-action: none;
    -ms-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.noUi-target {
    position: relative;
    direction: ltr;
}

.noUi-base {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    /* Fix 401 */
}

.noUi-origin {
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
}

.noUi-handle {
    position: relative;
    z-index: 1;
}

.noUi-stacking .noUi-handle {
    /* This class is applied to the lower origin when
     its values is > 50%. */
    z-index: 10;
}

.noUi-state-tap .noUi-origin {
    -webkit-transition: left 0.3s, top 0.3s;
    transition: left 0.3s, top 0.3s;
}

.noUi-state-drag * {
    cursor: inherit !important;
}

/* Painting and performance;
 * Browsers can paint handles in their own layer.
 */
.noUi-base,
.noUi-handle {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* Slider size and handle placement;
 */
.noUi-horizontal {
    height: 6px;
}

.noUi-horizontal .noUi-handle {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    left: -7px;
    top: -9px;
    background-color: #fff;
    border: 4px solid #33348E;
}

/* Styling;
 */
.noUi-background {
    background: #d6d7d9;
}

.noUi-connect {
    background: #33348E;
    -webkit-transition: background 450ms;
    transition: background 450ms;
}

.noUi-origin {
    border-radius: 5px;
}

.noUi-target {
    border-radius: 2px;
}

.noUi-target.noUi-connect {
}

/* Handles and cursors;
 */
.noUi-draggable {
    cursor: w-resize;
}

.noUi-vertical .noUi-draggable {
    cursor: n-resize;
}

.noUi-handle {
    cursor: default;
    -webkit-box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    box-sizing: content-box !important;
}

.noUi-handle:active {
    border: 8px solid #345dbb;
    border: 8px solid rgba(53, 93, 187, 0.38);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    left: -14px;
    top: -14px;
}

/* Disabled state;
 */
[disabled].noUi-connect,
[disabled] .noUi-connect {
    background: #b8b8b8;
}

[disabled].noUi-origin,
[disabled] .noUi-handle {
    cursor: not-allowed;
}