.sf-posts-page-bar {

display: grid;

    width: 100%;

    align-items: flex-start;

    grid-auto-rows: min-content;

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

    grid-template-areas: "load space pag";

    gap: 0.5em;

    justify-content: space-between;



.sf-load-more-cont {

    grid-area: load;

}



    .sf-load-more-cont, .sf-orders-load-more {



        .sf-load-more-btn, .sf-orders-lm-butt {

            background: #dedced !important;

            padding: 0 1.5em;

            border-radius: 8px;

            color: #3f3c5a;

            font-weight: 600;

            font-family: 'Poppins';

            height: 36px;

            cursor: pointer;

        }

    }



    .sf-pagination, .sf-orders-pagination {

        display: inline-flex;

        flex-direction: row;

        flex-wrap: nowrap;

        align-items: center;

        list-style-type: none;

        margin: 0px;

        padding: 0;

        gap: 0.5em;

grid-area: pag;



        .sf-pagination-list, .sf-orders-pag-list {

            list-style-type: none;

            margin: 0;

            padding: 0;

            display: inline-flex;

            flex-direction: row;

            flex-wrap: nowrap;

            align-items: center;

            gap: 0.5em;



.sf-fir-cont, .sf-pre-cont, .sf-nex-cont, .sf-las-cont {

                background: #dedced;

                border-radius: 25px;

}

 

.sf-page-select-container {

                border-radius: 6px;

                border: 1px solid #dfdfdf;

}



            .sf-page, .sf-orders-page {



                color: rgb(0, 0, 0);



                min-width: 36px;

                position: relative;



                .sf-page-btn.sf-current-link {

                    display: none !important;

                }



                a.sf-first::before {

                    content: '';

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

                    background-size: cover;

                    width: 16px;

                    height: 16px;

                    position: absolute;

                    top: 10px;

                    left: 11px;

                }



                a.sf-page-btn.sf-prev::before {

                    content: '';

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

                    background-size: cover;

                    width: 16px;

                    height: 16px;

                    position: absolute;

                    top: 10px;

                    left: 9px;

                }



                a.sf-page-btn.sf-next::before {

                    content: '';

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

                    background-size: cover;

                    width: 16px;

                    height: 16px;

                    position: absolute;

                    top: 10px;

                    left: 11px;

                    transform: rotate(180deg);

                }



                a.sf-page-btn.sf-last:before {

                    content: '';

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

                    background-size: cover;

                    width: 16px;

                    height: 16px;

                    position: absolute;

                    top: 10px;

                    left: 9px;

                    transform: rotate(180deg);

                }



                .ss-main.sf-page-select:focus, .ss-main.sf-orders-page-select:focus {

                    box-shadow: unset !important;

                }



                .ss-main.sf-page-select, .ss-main.sf-orders-page-select {

                    border: 0;

                    border-radius: 6px;

                    height: 36px;

                    min-width: 46px;

                }

                

                .sf-page-btn {

                    height: 36px;

                    align-items: center;

                    display: flex;

                    flex-direction: row;

                    color: rgb(0, 0, 0);

                    justify-content: center;

                    white-space: nowrap;

                    font-family: 'DM Sans';

                    font-size: 14px;

                    width: 36px;

                }

            }

        }

    }

}



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

    .sf-page-bar, .sf-orders-page-bar {

        display: grid;

        width: 100%;

        align-items: flex-start;

        grid-auto-rows: min-content;

        grid-template-columns: min-content;

        grid-template-areas: 'load pag';

        gap: 0.5em;

        justify-content: space-between;



        .sf-load-more-cont, .sf-orders-load-more {

            grid-area: load;

            width: max-content;

        }



        .sf-pagination, .sf-orders-pagination  {

            grid-area: pag;

        }

    }

}



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

    .sf-page-bar, .sf-orders-page-bar {

        display: inline-flex;

        width: 100%;

        flex-wrap: nowrap;

        justify-content: space-between;

        align-items: flex-start;

        flex-direction: column;

        margin-top: 1em;

        gap: 1em;



        .sf-load-more-cont, .sf-orders-load-more {

            width: 100%;



            .sf-load-more-btn, .sf-orders-lm-butt {

                font-size: 14px;

                width: 100%;

            }

        }



        .sf-pagination, .sf-orders-pagination {

            flex-direction: column !important;

            align-items: unset !important;

            width: 100%;



            .sf-pagination-list, .sf-orders-pag-list {

                display: grid;

                align-items: center;

                list-style-type: none;

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

                grid-auto-rows: auto;

                grid-template-areas: 'fir pre sel nex las';

                padding: 0;

                gap: 0.5em;



                .sf-page, .sf-orders-page {

                    width: 100%;



                    .sf-page-btn {

                        width: 100% !important;

                    }

                }



                a.sf-page-btn.sf-first::before {

                    left: 50% !important;

                    transform: translateX(-8px);

                }



                .sf-fir-cont {

                    grid-area: fir;

                }



                a.sf-page-btn.sf-prev::before {

                    left: 50% !important;

                    transform: translateX(-8px);

                }



                .sf-pre-cont {

                    grid-area: pre;

                }



                .sf-page-select-container {

                    grid-area: sel;



                    .ss-values {

                        justify-content: center;

                    }

                }



                a.sf-page-btn.sf-next::before {

                    left: 50% !important;

                    transform: translateX(-8px) rotate(180deg) !important;

                }



                .sf-nex-cont {

                    grid-area: nex;

                }



                a.sf-page-btn.sf-last:before {

                    left: 50% !important;

                    transform: translateX(-8px) rotate(180deg) !important;

                }



                .sf-las-cont {

                    grid-area: las;

                }

            }

        }

    }

}



/*pageselect cont*/



.ss-content.sf-page-select.ss-open-above, .ss-content.sf-orders-page-select.ss-open-above {

    min-width: 70px;

    transform: scaleY(1) translateY(-0.5em);

    border-radius: 6px;

}



.ss-content.sf-page-select.ss-open-below, .ss-content.sf-orders-page-select.ss-open-below {

    min-width: 70px;

    transform: scaleY(1) translateY(0.5em);

    border-radius: 6px;

}



.ss-content.sf-page-select, .ss-content.sf-orders-page-select {



    .ss-search {

        display: none !important;

    }



    .ss-list {

        scrollbar-width: thin;

        scrollbar-gutter: stable;

        scrollbar-color: #dddddd transparent;



        .ss-option:not(.ss-disabled).ss-selected {

            color: #f48b2a;

            background-color: #ffe5c9;

        }



        .ss-option:hover {

            color: #f48b2a;

            background-color: #ffe5c9;

        }

    }

}