.filters-list {



    .sf-post-filters-list-items {

        scrollbar-width: thin;

        scrollbar-color: #00000075 transparent;

        scrollbar-gutter: stable;

        list-style-type: none;

        position: relative;

        height: 100%;

        overflow-y: scroll;

        padding: 0.5em 0.5em 0.5em 1em;

        display: flex;

        flex-direction: column;

        flex-wrap: nowrap;

        gap: 0.65em;





        .sf-post-filter-title {

            display: none;

        }



        .sf-filter-cont {

            display: grid;

            gap: 0.75em;

            background: rgba(0, 0, 0, 0.46);

            border-radius: 12px;

            padding: 1em;

        }



        .sf-post-filter-date {



            .sf-filter-cont {



                .sf-date-filter-periods {

                    display: flex;

                    flex-direction: row;

                    flex-wrap: nowrap;

                    gap: 0.75em;



                    > button {

                        padding: 7px 15px;

                        background: #ffffff32;

                        border-radius: 6px;

                        color: #ffffff;

                        font-family: 'Poppins';

                    }

                }



                .sf-date-range {

                    display: grid;

                    grid-template-columns: 1fr;

                    grid-auto-rows: min-content;

                    gap: 0.75em;

                    width: 100%;



                    .sf-date-range-inputs {

                        display: grid;

                        grid-template-columns: 1fr 1fr;

                        grid-auto-rows: min-content;

                        gap: 0.75em;

                        grid-template-areas: 'from to';



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

                            color: #fff;

                        }



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

                            background: #ffffff32;

                            border: none;

                            padding: 7px 15px;

                            color: #ffffff;

                            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 {



                        .air-datepicker.-inline- {

                            border: none !important;

                            background: #ffffff32 !important;

                            width: 100%;

                            color: #fff !important;

                            border-radius: 10px;



                            .air-datepicker--navigation {



                                .air-datepicker-nav {

                                    margin: 0 1em;

                                    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;

                                }



                                .air-datepicker-cell {

                                    font-family: 'DM Sans';

                                }



                                .-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-apply-date-range {

                    width: 100%;

                    background: #ffffff32;

                    height: 34px;

                    border-radius: 8px;

                    color: #fff;

                    font-weight: 600;

                    font-family: 'Poppins';

                }





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

                    display: none;

                }

            }

        }



        .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-hashtags {

        

            .sf-filter-cont {



                .sf-post-hashtag-search {

                    width: 100%;

                    height: 34px;

                    border-radius: 8px;

                    border: 0px;

                    padding: 0 15px;

                }



                .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-hashtags  {

        

            .sf-filter-cont {



                .sf-post-hashtag-search::placeholder {

                    color: #ffffff;

                }



                .sf-post-hashtag-search {

                    background: #ffffff32;

                    color: #ffffff;

                }



                .sf-post-hashtag-list {

                    scrollbar-color: #ffffff22 transparent;



                    .sf-post-hashtag-opt.active {

                        background: #ffffff52 !important;

                    }



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

                        background: #ffffff32 !important;

                    }



                    .sf-post-hashtag-opt:hover {

                        background: #ffffff52 !important;

                    }



                    .sf-post-hashtag-opt {

                        background: #ffffff32;

                    }

                }



                .sf-filter-butt {

                    display: none;

                }

            }

        }



        .sf-post-filter-only-reels {

            background: #00000075 !important;

            padding: 0.75em 1.25em;

            border-radius: 12px;



            .sf-post-filter-title {

                position: relative;

                display: flex;

                flex-direction: row;

                flex-wrap: nowrap;

                align-items: center;

                justify-content: space-between;

                margin: 0;

                font-size: 15px;



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

                    background: #ffb471;

                }



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

                    transform: translateX(18px);

                }



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

                    content: "";

                    width: 18px;

                    height: 18px;

                    background: #fff;

                    position: absolute;

                    border-radius: 25px;

                    top: 2px;

                    left: 2px;

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

                }



                .sf-post-only-reels-toggle {

                    width: 40px;

                    height: 22px;

                    background: #ffffff52;

                    position: relative;

                    border-radius: 25px;

                    cursor: pointer;

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

                }

            }

        }



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



            .sf-filter-cont.applied {



                .sf-fil-head-bar {



                    .sf-fil-reset-sprt {

                        display: block !important;

                    }

                }

            }



            .sf-filter-cont {



                .sf-fil-head-bar {

                    display: inline-flex;

                    flex-direction: row;

                    flex-wrap: nowrap;

                    justify-content: space-between;

                    align-items: center;



                    .sf-filter-tit-mini {

                        margin: 0;

                        font-size: 15px;

                        font-family: 'Poppins';

                        font-weight: 600;

                    }



                    .sf-filter-close {

                        display: none;

                    }



                    .sf-fil-reset-sprt {

                        display: none;

                        color: #ffffffb0;

                        text-decoration: underline;

                        cursor: pointer;

                    }

                }

            }

        }

    }

}