@import "../new-variables";
.pagination-container{
&.ten{@media (min-height:1079px) { position: absolute;
    bottom:68px;
    width: calc(100% - 400px);}}


    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    .perpage {
        .dropdown-item.active {
            color: $main-color;
        }
        .select-wrapper {
            display: flex;
            align-items: center;


            label {
                font-weight: $bold;
                font-size: $text-size-small;
                letter-spacing: 0.22px;
                margin: 0 30px 0 0;
                color: $main-color;
            }

            .bootstrap-select {
                width: 60px !important;
            }

            .bootstrap-select button {
                .filter-option {
                    .filter-option-inner {
                        .filter-option-inner-inner {
                            padding-left: 10px !important;
                        }
                    }
                }

                height: 30px !important;
                width: 60px !important;
                border: 1px solid $main-color;
                background-color: white;
                padding-left: 0;
            }

            .bootstrap-select button:after {
                margin-right: 2.5px;
                border-top: 0;
                border-bottom: 0;
                content: url("../../images/down-arrow-blue.svg");
            }

            .dropdown-menu {
                --bs-dropdown-link-hover-bg: #040059;
                --bs-dropdown-link-active-bg: #040059;
                --bs-dropdown-link-hover-color: white;

                li {
                    a {
                        padding: 8px 0 8px 10px;
                    }

                    &:hover {
                        .text {

                            color: white;
                        }
                    }
                }


                .selected {
                    .text {
                        &:hover {
                            color: white;
                        }

                        color: white;
                    }

                }

                &[data-popper-placement="top-start"] {
                    bottom: 30px !important;
                }

                &[data-popper-placement="bottom-start"] {
                    top: 30px !important;
                }

                a {
                    padding: 7px 0 7px 10px!important;
                }
            }
        }
    }
    ul.pagination {
        .paginator {
            display: flex;

            & li:not(.prev):not(.next) {
                padding-top: 3px;
                width: 29px;
                height: 29px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.3rem;
                font-weight: $medium;

                &:hover {
                    border: 1px solid $main-color;
                    padding-top: 4px;

                }

                &.current {
                    color: white;
                    background-color: $main-color;
                }

                & a {
                    padding: 10px;
                }
            }

            & .prev, .next {
                &:hover {
                    border: 1px solid $main-color;
                    padding: 1px 9px;
                }

                padding: 2px 10px;

                a {
                    img {
                        height: 6px;
                    }
                }


                &.inactive {
                    color: #CFCFCF;
                    pointer-events: none;

                    & img {
                        border-color: black;
                        filter: invert(85%) sepia(0%) saturate(194%) hue-rotate(174deg) brightness(99%) contrast(90%);
                    }
                }


            }

            & .prev {
                a {
                    img {
                        transform: rotateZ(90deg);
                    }
                }
            }

            & .next {
                a {
                    img {
                        transform: rotateZ(-90deg);
                    }
                }
            }
        }
    }
}