.pagination {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

#pagebrowse {
    display: flex;
    justify-content: center;
}

.pages {
    display: flex;
}

.page, .ellipsis {
    display: inline-block;
    padding: 6px 1rem;
    margin: 0;
    border-left: 1px solid var(--color1);
    border-right: 1px solid var(--color1);
    background-color: var(--color2); /* Dark background color */
    color: var(--color-font2);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s; /* Add a smooth transition effect to background color */
    height: 24px; /* This is just an example, adjust according to your needs */
    line-height: 24px; /* Should be same as height */
    min-width: 1.6rem;
    text-align: center;
    vertical-align: middle;
}

.page:hover {
    background-color: var(--color3); /* Darker background color on hover */
}

.previous {
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}

.current {
    background-color: var(--color3);
}

.next {
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
}

.ellipsis, .fa-solid {
    /*margin: 0 4px;*/
    pointer-events: none; /* Disable click events on ellipsis */
    vertical-align: middle; /* Ensure icons are vertically centered */
}