:root {
    /*Pagination*/
    --pagination-primary: var(--phoenix-primary, #0d6efd);
    --pagination-primary-rgb: var(--phoenix-primary-rgb, "13,110,253");
    --pagination-secondary: var(--phoenix-secondary, #6c757d);
    --pagination-secondary-rgb: var(--phoenix-secondary-rgb, "108,117,125");
    --pagination-border-radius: var(--phoenix-border-radius, 0.25em);
    --pagination-border-width: var(--phoenix-border-width, 1px);
    --pagination-border-style: var(--phoenix-border-style, solid);
    --pagination-border-color: var(--pagination-primary, #e0e5ec);
    --pagination-font-size: var(--phoenix-body-font-size, 1.6rem);
    --pagination-btn-padding-y: var(--phoenix-btn-padding-y, .6em);
    --pagination-btn-padding-x: var(--phoenix-btn-padding-x, .8em);
    --hover-rgba: rgba(var(--phoenix-primary-dark-rgb), 0.1);
    --pagination-hover: var(--hover-rgba, #e6e7fa);
    /*Filters toggle*/
    --toggle-primary: var(--phoenix-primary, #0d6efd);
    --toggle-primary-rgb: var(--phoenix-primary-rgb, "13,110,253");
    --toggle-border-radius: var(--phoenix-border-radius, 0.25em);
    --toggle-border-width: var(--phoenix-border-width, 1px);
    --toggle-border-style: var(--phoenix-border-style, solid);
    --toggle-border-color: var(--toggle-primary, #e0e5ec);
    --toggle-font-size: var(--phoenix-body-font-size, 1.6rem);
}

/* -------------------------------- 
Basic style
-------------------------------- */
nav[role="navigation"] {
    text-align: center;
}

.paginationSystem {
    width: 90%;
    max-width: 768px;
    margin: 2em auto 4em;
    text-align: center;
    padding-left: 0px;
}

    .paginationSystem li {
        /* hide numbers on small devices */
        display: none;
        margin: 0 .2em;
    }

        .paginationSystem li.button {
            /* make sure prev next buttons are visible */
            display: inline-block;
        }

    .paginationSystem a, .paginationSystem span {
        display: inline-block;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        /* use padding and font-size to change buttons size */
        padding: var(--pagination-btn-padding-y) var(--pagination-btn-padding-x);
        font-size: var(--pagination-font-size);
    }

    .paginationSystem a {
        border: var(--pagination-border-width) var(--pagination-border-style) var(--pagination-border-color);
        border-radius: var(--pagination-border-radius);
        color: var(--pagination-primary);
    }

        .paginationSystem a:hover {
            background-color: var(--pagination-hover);
        }

        .paginationSystem a:active {
            /* click effect */
            -webkit-transform: scale(0.9);
            -moz-transform: scale(0.9);
            -ms-transform: scale(0.9);
            -o-transform: scale(0.9);
            transform: scale(0.9);
        }

        .paginationSystem a.disabled {
            /* button disabled */
            color: #a3aeba;
            border-color: #a3aeba;
            pointer-events: none;
        }

            .paginationSystem a.disabled::before, .paginationSystem a.disabled::after {
                opacity: .4;
            }

    .paginationSystem .current {
        /* selected number */
        background-color: var(--pagination-primary);
        border-color: var(--pagination-primary);
        color: #ffffff;
        pointer-events: none;
    }

@media only screen and (min-width: 768px) {
    .paginationSystem li {
        display: inline-block;
    }
}

@media only screen and (min-width: 1170px) {
    .paginationSystem {
        margin: 2em auto 1em;
    }
}

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

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

        .filtersToggle input + label {
            margin: 0;
            padding: .4rem 1.5rem;
            box-sizing: border-box;
            position: relative;
            display: inline-block;
            border: var(--toggle-border-width) var(--toggle-border-style) var(--toggle-border-color);
            background-color: #FFF;
            font-size: var(--toggle-font-size);
            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;
        }

            .filtersToggle input + label:first-of-type {
                border-radius: var(--toggle-border-radius) 0 0 var(--toggle-border-radius);
                border-right: none;
            }

            .filtersToggle input + label:last-of-type {
                border-radius: 0 var(--toggle-border-radius) var(--toggle-border-radius) 0;
                border-left: none;
            }

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

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