/*-- square Pagination --*/
.square-pagination {
    float: right;
}

    .square-pagination li {
        display: inline-block;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: #FFF;
        border: 1px solid #E4E7ED;
        -webkit-transition: 0.2s all;
        transition: 0.2s all;
    }

        .square-pagination li + li {
            margin-left: 5px;
        }

        .square-pagination li:hover {
            background-color: #E4E7ED;
            color: var(--bs-primary);
        }

        .square-pagination li.active {
            background-color: var(--bs-primary);
            border-color: var(--bs-primary);
            color: white;
            font-weight: 500;
            cursor: default;
        }

            .square-pagination li.active a {
                background-color: var(--bs-primary);
                border-color: var(--bs-primary);
                color: white;
                font-weight: 500;
                cursor: default;
            }

        .square-pagination li a {
            color: black;
            display: block;
        }

/*-- circle Pagination --*/
.circle-pagination-1 {
    float: right;
}

    .circle-pagination-1 li {
        display: inline-block;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: #FFF;
        border: 1px solid #E4E7ED;
        border-radius: 100%;
        -webkit-transition: 0.2s all;
        transition: 0.2s all;
    }

        .circle-pagination-1 li + li {
            margin-left: 5px;
        }

        .circle-pagination-1 li:hover {
            background-color: #E4E7ED;
            color: var(--bs-primary);
        }

        .circle-pagination-1 li.active {
            background-color: var(--bs-primary);
            border-color: var(--bs-primary);
            color: white;
            font-weight: 500;
            cursor: default;
        }

            .circle-pagination-1 li.active a {
                border-color: var(--bs-primary);
                color: white;
                font-weight: 500;
                cursor: default;
            }

        .circle-pagination-1 li a {
            color: black;
            display: block;
        }

/*-- circle Pagination without border --*/
.circle-pagination {
    float: right;
}

    .circle-pagination li {
        display: inline-block;
        margin-left: 3px;
        padding: 0;
        width: 35px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        border-radius: 100%;
    }

        .circle-pagination li + li {
            margin-left: 5px;
        }

        .circle-pagination li:hover {
            background-color: #E4E7ED;
        }

        .circle-pagination li.disabled:hover {
            background-color: inherit;
        }

        .circle-pagination li.active {
            background-color: var(--bs-primary);
            border-color: var(--bs-primary);
            color: white;
            font-weight: 500;
            cursor: default;
        }

        /*.circle-pagination li.active a {
                border-color: var(--bs-primary);
                color: white;
                font-weight: 500;
                cursor: default;
            }*/

        .circle-pagination li a {
            color: black;
            display: block;
        }


/*Toggle (chose data per page)*/
.toggle {
    box-sizing: border-box;
    font-size: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: stretch;
}

    .toggle input {
        width: 0;
        height: 0;
        position: absolute;
        left: -9999px;
    }

        .toggle input + label {
            margin: 0;
            padding: .4rem 1.5rem;
            box-sizing: border-box;
            position: relative;
            display: inline-block;
            border: solid 1px #DDD;
            background-color: #FFF;
            font-size: 0.9rem;
            line-height: 140%;
            font-weight: 600;
            text-align: center;
            box-shadow: 0 0 0 rgba(255, 255, 255, 0);
            transition: border-color .15s ease-out, color .25s ease-out, background-color .15s ease-out, box-shadow .15s ease-out;
        }

            .toggle input + label:first-of-type {
                border-radius: 6px 0 0 6px;
                border-right: none;
            }

            .toggle input + label:last-of-type {
                border-radius: 0 6px 6px 0;
                border-left: none;
            }

        .toggle input:hover + label {
            border-color: var(--bs-primary);
        }

        .toggle input:checked + label {
            background-color: var(--bs-primary);
            color: #FFF;
            box-shadow: 0 0 2px rgba(var(--primary-rgb), 0.5);
            border-color: var(--primary-highlight);
            z-index: 1;
        }