.pagination {
    display: flex;
    list-style: none;
    justify-content: center;
    padding: 0px 0 25px 0;
    margin-top: -45px;
}

.pagination-item {
    font-family: 'Roboto', sans-serif;
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: .25rem;
    background-color: none;
}

.pagination-item.disabled .pagination-circle {
    cursor: unset;
    color: var(--tagColor);
}

.pagination-item.disabled .pagination-circle:not(.active):hover {
    animation: none !important;
    -webkit-animation: none !important;
}

.pagination-circle {
    color: var(--primaryTextColor);
    background: none;
    margin-right: 2px;
    margin-left: 2px;
    line-height: 1.25;
    padding: .5rem .75rem;
    font-size: .9rem;
    border: 0;
    border-radius: 50%;
    outline: 0 !important;
}

.pagination-circle:not(.active):hover {
    -webkit-animation: hoverEffect 0.5s forwards;
            animation: hoverEffect 0.5s forwards;
}

.pagination-circle.active {
    color: var(--secondaryTextColor);
    background: var(--bgPrimaryColor);
    border-radius: 50%;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}

@-webkit-keyframes hoverEffect {
    to {
        background-color: var(--lineColor);
    }
}

@keyframes hoverEffect {
    to {
        background-color: var(--lineColor);
    }
}