.pbuic-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pbuic-pager li {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #f3f5f8;
    transition: all ease-in-out .2s;
}

.pbuic-pager a,
.pbuic-pager span {
    padding: .4rem 1rem;
}

.pbuic-pager .pgr-active,
.pbuic-pager .pgr-inactive,
.pbuic-pager a {
    color: var(--eespa-primary);
    text-decoration: none;
}
.pbuic-pager .pgr-inactive {
    color: var(--baseLight300);
}

.pbuic-pager li:not(.pgr-active):hover {
    background: var(--eespa-primary);
    transition: all ease-in-out .2s;
}

.pbuic-pager li:hover a {
    color: var(--baseLight100);
    transition: all ease-in-out .2s;
}

.pbuic-pager .pgr-active {
    background: transparent;
}

.pgr-active span {
    font-weight: bold;
}

.pbuic-pager .pgr-previous,
.pbuic-pager .pgr-next {
    width: auto;
    height: auto;
    border: 1px solid var(--baseLight300);
    border-radius: 30rem;
    color: var(--baseLight300);
    background-color: transparent;
}

.pbuic-pager .pgr-previous a,
.pbuic-pager .pgr-next a {
    display: block;
    padding: .4rem 1rem;
    font-weight: bolder;
    text-transform: uppercase;
}

.pgr-previous a::before,
.pgr-next a::after {
    font-family: 'fa-regular';
    font-size: .8rem;
}

.pgr-previous a::before {
    content: '\e82c';
    margin-right: .6rem;
}

.pgr-next a::after {
    content: '\e851';
    margin-left: .6rem;
}

.pgr-previous a:hover::after,
.pgr-next a:hover::after {
    margin-left: .8rem;
    transition: margin ease-in-out .2s;
}

.pbuic-pager .pgr-previous a:hover,
.pbuic-pager .pgr-next a:hover {
    padding-right: .8rem;
    transition: padding ease-in-out .2s;
}