#sf-posts {

    display: grid;

    grid-template-columns: 1fr;

    grid-auto-rows: min-content;

    gap: 1em;



    h1 {

        margin: 0 !important;

        line-height: 1;

        font-size: 2em;

    }



    #sf-posts-filters-app {



    }

}



.stark-frame-post-filters {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    width: 100%;



    .sf-post-filter-hashtags, .sf-post-filter-search, .sf-post-filter-date {



        .sf-fil-tit-cont.active {

            border: 1px solid #ffe5c9 !important;

            color: #F48B2A !important;

            background: #FFE5C9 !important;



                .sf-post-filter-title::after {

                    opacity: 0;

                }



                .sf-post-filter-title {

                    padding-right: 42px !important;

                }



                .sf-fil-reset-sprt {

                    visibility: visible;

                    opacity: 1;

                }



                .sf-fil-reset-sprt:before  {

                    content: '';

                    width: 1px;

                    background: #f48b2a;

                    height: 50%;

                    top: 25%;

                    right: 0px;

                    display: block;

                    position: relative;

                }

        }



        .sf-fil-tit-cont {



            .sf-fil-reset-sprt:after  {

                content: '';

                background: url(https://starkframe.store/wp-content/themes/starkframe/assets/images/stark-frame/a-filt-cros-o1.svg);

                background-size: cover;

                width: 18px;

                height: 18px;

                position: absolute;

                top: 8px;

                left: 8px;

            }



            .sf-fil-reset-sprt  {

                margin-right: 0;

                width: 36px;

                height: 36px;

                position: absolute;

                right: 0;

                top: 0;

                opacity: 0;

                transition: opacity 0.3s ease, visibility 0.3s ease;

                visibility: hidden;

            }

        }

    }



    .sf-post-filter-all-butt {



        .sf-fil-tit-cont.active {

            border: 1px solid #ffb471 !important;

            color: #ffffff !important;

            background: #ffb471 !important;



            .sf-filter-title  {

                padding-right: 42px !important;

            }



            .sf-filter-reset {

                opacity: 1;

                visibility: visible;

            }

        }



        .sf-fil-tit-cont {

            background: #3f3c5a !important;

            border: 1px solid #3f3c5a !important;

            color: #fff;



            .sf-filter-title {

                font-weight: 600 !important;

                align-content: center;

                height: inherit;

                cursor: pointer;

                position: relative;

                padding: 0px 20px 0px 36px;

                font-size: 13px;

                margin: 0;

            }



            .sf-filter-title::before {

                content: '';

                background-image: url(https://starkframe.store/wp-content/themes/starkframe/assets/images/stark-frame/a-filter-b1.svg);

                background-position: center;

                background-size: 26px;

                background-repeat: no-repeat;

                cursor: pointer;

                height: 26px;

                width: 26px;

                display: block;

                box-sizing: border-box;

                position: absolute;

                left: 6px;

                top: 5px;

            }



            .sf-tit-sprt {

                background: #ffffff;

                width: 1px;

                height: 50%;

                display: none;

            }



            .sf-filter-reset::before {

                content: '';

                width: 1px;

                background: #ffffff;

                height: 50%;

                top: 25%;

                right: 0px;

                display: block;

                position: relative;

            }



            .sf-filter-reset {

                margin-right: 0;

                width: 36px;

                height: 36px;

                position: absolute;

                right: 0;

                top: 0;

                opacity: 0;

                visibility: hidden;



                .sf-reset-btn {

                    width: 36px;

                    height: 36px;

                    position: absolute;

                    top: 0;

                    left: 0;

                    right: 0;

                    bottom: 0;

                    z-index: 1;

                }

            }



            .sf-filter-reset::after {

                content: '';

                background: url(https://starkframe.store/wp-content/themes/starkframe/assets/images/stark-frame/a-filt-cros-w1.svg);

                background-size: cover;

                width: 18px;

                height: 18px;

                position: absolute;

                top: 8px;

                left: 8px;

            }

        }

    }

    

/*

    .sf-order-filter-price {



        .sf-filter-title {

            padding: 0 36px 0 15px;

        }



        .sf-filter-cont {



            .sf-order-price-slider-container {



                .noUi-target {

                    border-radius: 15px !important;

                    border: unset !important;

                    box-shadow: unset !important;

                }



                .noUi-horizontal {

                    height: 6px !important;



                    .noUi-handle {

                        border-radius: 25px;

                    }

                }

            }



            .sf-order-price-values {

                display: flex;

                flex-direction: row;

                flex-wrap: nowrap;

                align-items: center;

                width: 100%;

                position: relative;

                justify-content: space-between;

                gap: 0.5em;



                .sf-order-price-min-value, .sf-order-price-max-value {

                    display: flex;

                    flex-direction: column;

                    flex-wrap: nowrap;

                    align-items: center;

                    gap: 0.5em;



                    #sf-order-price-min, #sf-order-price-max {

                        border: 0px;

                        margin: 0px;

                        background: #ffffff32;

                        height: 30px;

                        display: inline;

                        vertical-align: top;

                        color: #ffffff;

                        padding: 4px 10px;

                        text-align: center;

                        border-radius: 8px;

                        width: 100px;

                        font-family: 'DM Sans';

                        font-size: 14px;

                    }

                }

            }



            #sf-order-price-apply {

                height: 36px;

                border-radius: 8px;

                width: 100%;

                position: relative;

                font-family: 'Poppins';

                font-weight: 600;

                line-height: 1;

                cursor: pointer;

            }



            .sf-fil-reset-sprt {

                text-align: center;

                align-content: center;

                border-radius: 8px;

                font-weight: 600;

                font-size: 14px;

                cursor: pointer;

                width: 100%;

                font-family: 'Poppins';

                height: 36px;

                grid-area: reset;

                display: none;

            }

        }

    }



    .sf-order-filter-status {



        .sf-status-list-options {

            margin: 0;

            padding: 0;

            list-style-type: none;

            display: flex;

            flex-direction: column;

            flex-wrap: nowrap;

            gap: 0.75em;



            .sf-status-option.selected::before {

                content: '';

                position: absolute;

                background: url(https://starkframe.store/wp-content/themes/starkframe/assets/images/stark-frame/done-o1.svg);

                background-size: cover;

                width: 20px;

                height: 20px;

                top: 7px;

                right: 7px;

                z-index: 9;

                opacity: 1;

            }



            .sf-status-option {

                position: relative;

                display: flex;

                flex-direction: row;

                flex-wrap: nowrap;

                cursor: pointer;

                padding: 0 2.5em 0 0.75em;

                height: 36px;

                align-items: center;

                border-radius: 8px;

            }

        }

    }

*/

    .sf-post-filter-date {



        .sf-filter-cont {



            .sf-date-filter-periods {

                display: grid;

                gap: 0.75em;

                grid-template-columns: 1fr 1fr;

                grid-auto-rows: min-content;



                > button {

                    padding: 7px 15px;

                    border-radius: 6px;

                    font-family: 'Poppins';

                }

            }



            .sf-date-range {

                display: grid;

                grid-template-columns: 1fr 1fr;

                gap: 0.75em;

                width: 100%;

                grid-template-rows: min-content min-content min-content min-content;

                grid-template-areas:

                    'head head'

                    'cal cal'

                    'inp inp'

                    'apply apply';



                .sf-date-range-head {

                    grid-area: head;

                }



                .sf-date-range-inputs {

                    grid-area: inp;

                    display: grid;

                    grid-template-columns: 1fr 1fr;

                    grid-auto-rows: min-content;

                    gap: 0.75em;

                    grid-template-areas: 'from to';



                    input#sf-date-from, input#sf-date-to {

                        border: none;

                        padding: 7px 15px;

                        border-radius: 6px;

                        width: 100%;

                        text-align: center;

                        font-family: 'DM Sans';

                    }



                    .sf-date-from-wrap, .sf-date-to-wrap {

                        display: flex;

                        flex-direction: column;

                        flex-wrap: nowrap;

                        gap: 0.25em;

                    }



                    .sf-date-from-wrap {

                        grid-area: from;

                    }



                    .sf-date-to-wrap {

                        grid-area: to;

                    }

                }



                #sf-inline-date-range {

                    grid-area: cal !important;



                    .air-datepicker.-inline- {

                        border: none !important;

                        width: 100%;

                        border-radius: 10px;



                        .air-datepicker--navigation {



                            .air-datepicker-nav {

                                margin: 0 1em;

                            }

                        }



                        .air-datepicker--content {



                            .air-datepicker-cell {

                                font-family: 'DM Sans';

                            }

                        }

                    }

                }

            }



            .sf-fil-reset-sprt, .sf-apply-date-range {

                padding: 0 15px;

                border-radius: 6px;

                height: 32px;

                font-weight: 600;

                font-family: 'Poppins';

                text-align: center;

                align-content: center;

                cursor: pointer;

            }



            .sf-apply-date-range {

                grid-area: apply;

            }



            .sf-fil-reset-sprt.sf-reset-date-range {

                grid-area: reset;

                display: none;

            }

        }



        .sf-filter-cont.applied {

            .sf-date-range {

                grid-template-areas:

                    'head head'

                    'cal cal'

                    'inp inp'

                    'reset apply' !important;



                .sf-fil-reset-sprt.sf-reset-date-range {

                    display: block !important;

                }

            }

        }

    }



    .sf-post-filter-hashtags {

        

        .sf-filter-cont {



            .sf-post-hashtag-search-wrap {



                .sf-post-hashtag-search {

                    width: 100%;

                    height: 34px;

                    border-radius: 8px;

                    border: 0px;

                    padding: 0 15px;

                    background: #ffffff32;

                    color: #ffffff;

                }

            }



            .sf-post-hashtag-list {

                list-style-type: none;

                margin: 0;

                padding: 0;

                display: flex;

                gap: 0.5em;

                position: relative;

                padding-right: 0.25em;

                height: auto;

                max-height: 215px;

                scrollbar-width: thin;

                scrollbar-gutter: stable;

                overflow-y: scroll;

                width: calc(100% + 1em);

                flex-direction: row;

                flex-wrap: wrap;



                .sf-post-hashtag-opt.active::before {

                    content: '';

                    position: absolute;

                    background: url(https://starkframe.store/wp-content/themes/starkframe/assets/images/stark-frame/done-o1.svg);

                    background-size: cover;

                    width: 20px;

                    height: 20px;

                    top: 7px;

                    right: 7px;

                    z-index: 9;

                    opacity: 1;

                }



                .sf-post-hashtag-opt {

                    position: relative;

                    padding: 8px 15px;

                    border-radius: 8px;

                    background: #ffffff32;

                    max-width: 100%;

                    white-space: nowrap;

                    text-overflow: ellipsis;

                    overflow: hidden;

                }

            }

        }

    }



    .sf-post-filter-only-reels  {

        .sf-post-filter-title {

            background: #ffffff;

            padding: 0 1.5em;

            height: 36px;

            align-content: center;

            font-size: 13px;

            font-weight: 400;

            border-radius: 8px;

            margin: 0;

            border: 1px solid #dfdfdf;

            cursor: pointer;

            position: relative;

            white-space: nowrap;

        }

    }



    .sf-post-filter-search  {



        .sf-post-search-input {

            width: 100%;

            height: 34px;

            border-radius: 8px;

            border: 0px;

            padding: 0 15px;

            background: #ffffff32;

            color: #ffffff;

        }



        .sf-post-search-apply {

            height: 36px;

            border-radius: 8px;

            width: 100%;

            position: relative;

            font-family: 'Poppins';

            font-weight: 600;

            line-height: 1;

            cursor: pointer;

            background: #ffffff32;

            color: #ffffff;

        }

    }

    

    .sf-post-filter-only-reels  {



        .sf-post-filter-title {

            position: relative;

            display: flex;

            flex-direction: row;

            flex-wrap: nowrap;

            align-items: center;



            .sf-toggle-btn.sf-post-only-reels-toggle.is-active {

                background: #ffb471;

            }



            .sf-toggle-btn.sf-post-only-reels-toggle.is-active::before {

                transform: translateX(16px);

            }



            .sf-toggle-btn.sf-post-only-reels-toggle::before {

                content: "";

                width: 16px;

                height: 16px;

                background: #fff;

                position: absolute;

                border-radius: 25px;

                top: 2px;

                left: 2px;

                transition: all 0.3s ease, transform 0.3s ease;

            }



            .sf-toggle-btn.sf-post-only-reels-toggle {

                width: 36px;

                height: 20px;

                background: #c4c7e1;

                position: relative;

                right: -7px;

                border-radius: 25px;

                transition: all 0.3s ease, transform 0.3s ease;

            }

        }

    }



    .sf-fil-block {

        margin-right: 0.5em;



        .sf-fil-tit-cont {

            background: #ffffff;

            height: 36px;

            font-size: 13px;

            font-weight: 400;

            border-radius: 8px;

            margin: 0;

            border: 1px solid #dfdfdf;

            cursor: pointer;

            position: relative;

            white-space: nowrap;

            display: inline-flex;

            flex-direction: row;

            flex-wrap: nowrap;

            align-items: center;

            justify-content: space-between;



            .sf-post-filter-title::after {

                content: '';

                background: url(https://starkframe.store/wp-content/themes/starkframe/assets/images/stark-frame/a-arr-filt1.svg);

                background-size: cover;

                width: 20px;

                height: 20px;

                position: absolute;

                top: 7px;

                right: 8px;

                transition: transform 0.3s, opacity 0.3s ease;

            }



            .sf-post-filter-title {

                font-weight: 400 !important;

                align-content: center;

                height: inherit;

                cursor: pointer;

                position: relative;

                padding: 0 36px 0 15px;

                font-size: 13px;

                margin: 0;

                transition: padding 0.3s ease;

            }

        }



        .sf-filter-backgr {

            opacity: 0;

        }



        .sf-filter-cont {

            position: absolute;

            align-items: center;

            user-select: none;

            -webkit-user-select: none;

            -moz-user-select: none;

            -ms-user-select: none;

            grid-auto-rows: min-content;

            grid-template-columns: 1fr;

        }

    }

}





@media screen and (min-width: 901px) {

    .stark-frame-post-filters {



        .sf-fil-block:hover .sf-filter-backgr {

            position: absolute;

            top: 0;

            bottom: 0;

            left: 0;

            right: 0;

            transform: translateY(100%);

        }



        .sf-fil-block:hover .sf-filter-cont {

            opacity: 1 !important;

            visibility: visible !important;

        }



        .sf-post-filter-hashtags:hover .sf-post-filter-title::after, .sf-post-filter-search:hover .sf-post-filter-title::after, .sf-post-filter-date:hover .sf-post-filter-title::after {

            transform: rotate(180deg);

        }





        .sf-post-filter-date {



            .sf-filter-cont {

                width: 275px;



                .sf-date-filter-periods {



                    > button {

                        background: #ffffff32;

                        color: #ffffff;

                    }

                }



                .sf-date-range {



                    .sf-date-from::placeholder, .sf-date-to::placeholder {

                        color: #ffffff;

                    }



                    .sf-date-range-inputs {



                        input#sf-date-from, input#sf-date-to {

                            background: #ffffff32;

                            color: #ffffff;

                        }

                    }



                    

                }



                #sf-inline-date-range {



                        .air-datepicker.-inline- {

                            background: #ffffff32 !important;

                            color: #fff !important;



                            .air-datepicker--navigation {



                                .air-datepicker-nav {

                                    border-bottom: 1px solid #ffffff52 !important;



                                    .air-datepicker-nav--title:hover {

                                        background: #00000052 !important;

                                    }



                                    .air-datepicker-nav--action:hover {

                                        background: #00000052 !important;

                                    }

                                }

                            }



                            .air-datepicker--content {



                                .air-datepicker-body--day-name {

                                    color: #ffb471 !important;

                                }



                                .-selected-.air-datepicker-cell.-range-from- {

                                    background: #ffb471 !important;

                                }



                                .air-datepicker-cell.-range-from- {

                                    border: 1px solid #ffb471 !important;

                                }



                                .air-datepicker-cell.-in-range- {

                                    background: #ffb4718a !important;

                                }



                                .-selected-.air-datepicker-cell.-range-to- {

                                    background: #ffb471 !important;

                                }



                                .air-datepicker-cell.-range-to- {

                                    border: 1px solid #ffb471 !important;

                                }



                                .air-datepicker-cell.-current- {

                                    color: #ffffff !important;

                                    border: 2px solid #ffb471 !important;

                                }



                                .air-datepicker-cell.-focus- {

                                    background: #00000052 !important;

                                }

                            }

                        }

                    }



                .sf-fil-reset-sprt, .sf-apply-date-range {

                    background: #ffffff32;

                    color: #fff;

                }

            }

        }

/*

        .sf-order-filter-status {



            .sf-status-list-options {



                .sf-status-option.selected {

                    background: #ffffff52;

                }



                .sf-status-option {

                    background: #ffffff22;

                }

            }



            .sf-filter-butt {

                display: none;

            }

        }

*/

        .sf-post-filter-hashtags {

        

            .sf-filter-cont {



                .sf-order-number-search::placeholder {

                    color: #ffffff;

                }



                .sf-order-number-search {

                    background: #ffffff32;

                    color: #ffffff;

                }



                .sf-order-number-list {

                    scrollbar-color: #ffffff22 transparent;



                    .sf-order-num-opt.selected {

                        background: #ffffff52 !important;

                    }



                    .sf-order-num-opt.selected:hover {

                        background: #ffffff32 !important;

                    }



                    .sf-order-num-opt:hover {

                        background: #ffffff52 !important;

                    }



                    .sf-order-num-opt {

                        background: #ffffff32;

                    }

                }



                .sf-filter-butt {

                    display: none;

                }

            }

        }



        .sf-fil-block {

            position: relative;



            .sf-filter-cont {

                display: grid;

                opacity: 1;

                z-index: 99;

                background: #25242e96;

                border-radius: 12px;

                backdrop-filter: blur(15px);

                color: #fff;

                top: 3em;

                left: 0;

                max-width: 275px;

                visibility: hidden;

                padding: 1.5em !important;

                gap: 0.75em !important;

                min-width: 200px;



                .sf-fil-head-bar {

                    display: none;

                }

            }

        }

    }

}



@media screen and (max-width: 900px) {

    .stark-frame-order-filters {

        overflow-x: auto;

        flex-wrap: nowrap !important;

        scrollbar-color: #e7e7e7 transparent;

        scrollbar-gutter: stable;

        scrollbar-width: none !important;

        position: relative;

        left: -1em;

        width: calc(100% + 2em);



        > div:first-child {

            padding-left: 0.75em;

        }



        > div {

            margin: 0.25em 0.5em 0.25em 0.25em;

        }



        > div:last-child {

            padding-right: 1em;

        }



        .sf-post-filter-date {



            .sf-filter-cont {

                gap: 0.75em;



                .sf-fil-head-bar {

                    .sf-fil-reset-sprt.sf-reset-date-range {

                        display: none;

                    }

                }



                .sf-date-filter-periods {



                    > button {

                        background: #ebeaf2;

                        color: #3f3c5a;

                    }

                }



                .sf-date-range {



                    .sf-date-range-inputs {



                        .sf-date-from::placeholder, .sf-date-to::placeholder {

                            color: #3f3c5a;

                        }



                        input#sf-date-from, input#sf-date-to {

                            background: #ebeaf2;

                            color: #3f3c5a;

                        }

                    }



                    #sf-inline-date-range {



                        .air-datepicker.-inline- {

                            background: #ebeaf2 !important;

                            color: #3f3c5a !important;



                            .air-datepicker--navigation {



                                .air-datepicker-nav {

                                    border-bottom: 1px solid #3f3c5a52 !important;



                                    .air-datepicker-nav--title:hover {

                                        background: none !important;

                                    }



                                    .air-datepicker-nav--action:hover {

                                        background: none !important;

                                    }

                                }

                            }



                            .air-datepicker--content {



                                .air-datepicker-body--day-name {

                                    color: #ff9535 !important;

                                }



                                .air-datepicker-cell.-day-.-other-month-  {

                                    color: #b4b4b4;

                                }



                                .air-datepicker-cell.-year-.-other-decade-, .air-datepicker-cell.-day-.-other-month- {

                                    color: #b4b4b4;

                                }



                                .-selected-.air-datepicker-cell.-range-from- {

                                    background: #ffb471 !important;

                                }



                                .air-datepicker-cell.-range-from- {

                                    border: 1px solid #ffb471 !important;

                                }



                                .air-datepicker-cell.-in-range- {

                                    background: #ffb4718a !important;

                                }



                                .-selected-.air-datepicker-cell.-range-to- {

                                    background: #ffb471 !important;

                                }



                                .air-datepicker-cell.-range-to- {

                                    border: 1px solid #ffb471 !important;

                                }



                                .air-datepicker-cell.-current- {

                                    color: #3f3c5a !important;

                                    border: 2px solid #ffb471 !important;

                                }



                                .air-datepicker-cell.-focus- {

                                    background: none !important;

                                }

                            }

                        }

                    }

                }



                .sf-fil-reset-sprt, .sf-apply-date-range {

                    background: #3f3c5a;

                    color: #fff;

                }

            }

        }



        .sf-order-filter-number {



            .sf-filter-cont.active {

                gap: 0.75em;



                .sf-order-number-search {

                    background: #ebeaf2;

                    color: #3f3c5a;

                }



                .sf-order-number-list:hover {

                    overflow-y: scroll;

                }



                .sf-order-number-list {

                    gap: 0.75em !important;

                    scrollbar-width: none !important;

                    scrollbar-gutter: unset !important;

                    padding-right: 0 !important;

                    width: 100% !important;

                    height: 215px;



                    .sf-order-num-opt.selected {

                        background: #ffecda !important;

                        color: #fd9334 !important;

                    }



                    .sf-order-num-opt {

                        background: #ebeaf2;

                        color: #3f3c5a;

                    }

                }

            }



            .sf-filter-cont {



                .sf-order-number-search::placeholder {

                    color: #3f3c5a;

                }

            }



            .sf-filter-cont.applied {



                .sf-fil-head-bar {

                    

                    .sf-fil-reset-sprt.sf-reset-order-number {

                        display: block !important;

                    }

                }

            }

        }



        .sf-order-filter-status {



            .sf-filter-cont {

                width: calc(100% - 3em);

                gap: 1.25em;



                .sf-status-list-options {



                    .sf-status-option.selected {

                        background: #ffecda;

                    }



                    .sf-status-option {

                        background: #ebeaf2;

                        color: #3f3c5a;

                    }

                }

            }



            .sf-filter-cont.applied {



                .sf-fil-head-bar {



                    .sf-fil-reset-sprt.sf-reset-order-status {

                        display: block !important;

                    }

                }

            }

        }



        .sf-order-filter-price {



            .sf-filter-cont.applied {

                grid-template-areas:

                    'head head'

                    'slider slider'

                    'value value'

                    'reset apply' !important;



                .sf-fil-reset-sprt {

                    display: block !important;

                    background: #ebeaf2;

                }

            }



            .sf-filter-cont {

                padding: 0.75em 1.5em 1.5em !important;

                gap: 1em !important;

                width: calc(100% - 3em);

                grid-template-rows: min-content min-content min-content min-content;

                grid-template-columns: 1fr 1fr;

                grid-template-areas:

                    'head head'

                    'slider slider'

                    'value value'

                    'apply apply';



                .sf-fil-head-bar {

                    grid-area: head;



                    .sf-fil-reset-sprt {

                        display: none !important;

                    }

                }



                .sf-order-price-slider-container {

                    padding: 0 1em;

                    margin: 1em 0;

                    grid-area: slider;



                    .noUi-target{

                        background: #ebeaf2 !important;



                        .noUi-handle {

                            border: 2px solid #ffb471 !important;

                            border-radius: 25px;

                        }

                    }

                }



                .sf-order-price-values {

                    grid-area: value;

                    color: #000000 !important;



                    #sf-order-price-min, #sf-order-price-max {

                        background: #ebeaf2 !important;

                        color: #000000 !important;

                    }

                }



                #sf-order-price-apply {

                    background: #3f3c5a;

                    color: #ffffff;

                    grid-area: apply;

                    font-size: 14px;

                    font-weight: 600;

                    height: 40px !important;

                }

            }

        }



        .sf-order-filter-price, .sf-post-filter-date, .sf-order-filter-number, .sf-order-filter-status  {



            .sf-filter-backgr.active {

                opacity: 1;

                visibility: visible;

            }



            .sf-filter-backgr {

                position: fixed;

                z-index: 99;

                top: 0;

                left: 0;

                right: 0;

                bottom: 0;

                background: #0000009c;

                backdrop-filter: blur(3px);

                visibility: hidden;

                transition: opacity 0.4s ease, visibility 0.4s ease;

            }



            .sf-filter-cont.active {

                transform: translateY(0%) !important;

                visibility: visible !important;

            }



            .sf-filter-cont {

                position: fixed;

                z-index: 999999;

                display: grid;

                background: #ffffff;

                border-radius: 15px 15px 0 0;

                bottom: 0;

                top: auto;

                padding: 0.75em 1.5em 1.5em;

                min-height: 20vh;

                left: 0;

                right: 0;

                visibility: hidden;

                transition: transform 0.4s cubic-bezier(.22,1,.36,1), visibility 0.45s;

                transform: translateY(100%);



                .sf-fil-head-bar {

                    display: grid;

                    grid-template-columns: 1fr min-content min-content;

                    grid-template-rows: auto;

                    position: relative;

                    width: calc(100% + 1em);

                    gap: 0.5em;

                    align-items: end;



                    .sf-filter-tit-mini {

                        padding: 0 0 5px;

                        align-content: center;

                        font-size: 18px;

                        font-weight: 600;

                        margin: 0;

                        cursor: pointer;

                        position: relative;

                        white-space: nowrap;

                        color: #25242e;

                        font-family: 'Poppins';

                        line-height: 1;

                    }



                    .sf-fil-reset-sprt {

                        color: #3f3c5a;

                        text-decoration: underline;

                        margin-right: 0;

                        padding-bottom: 5px;

                        display: none;

                    }



                    .sf-filter-close:before {

                        content: '';

                        margin-right: 0;

                        background: url(https://starkframe.store/wp-content/themes/starkframe/assets/images/stark-frame/rev_blue_cross.svg);

                        background-size: contain !important;

                        width: 18px;

                        height: 18px;

                        position: absolute;

                        right: 14px;

                        top: 6px;

                    }



                    .sf-filter-close {

                        margin-right: 0;

                        width: 40px;

                        height: 30px;

                        position: relative;

                    }

                }

            }

        }



        .sf-order-filter-number, .sf-order-filter-status {



            .sf-filter-cont {



                .sf-filter-butt {

                    background: #3f3c5a;

                    color: #ffffff;

                    font-size: 14px;

                    font-weight: 600;

                    height: 40px;

                    border-radius: 12px;

                    font-family: 'Poppins';

                    font-size: 14px;

                }

            }

        }

    }

}