body{
    --ping--color: #D23B3B;
    --ping--bg:#FFF;
    --ping--brd:#D23B3B;


    --ping--hover--color: #FFF;
    --ping--hover--bg:#D23B3B;
    --ping--hover--brd:#D23B3B;
    --paing--active:#D23B3B;
}


.page{
    margin-top: 35px;
    text-align: center;
}
.pagination .active .page-link{
    background-color: var(--paing--active);
    border: 1px solid var(--paing--active) ;
}
.pagination li:last-child a {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}
.pagination li:first-child a {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
}


.pagination li a {
    position: relative;
    display: block;
    color: var(--ping--color);
    text-decoration: none;
    background-color: var(--ping--bg);
    border: 1px solid var(--ping--brd) ;
    padding: .375rem .75rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.pagination li a:hover {
    color: var(--ping--hover--color);
    background-color: var(--ping--hover--bg);
    border: 1px solid var(--ping--hover--brd) ;
    padding: .375rem .75rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.pagination li .active {
    color: var(--ping--hover--color);
    background-color: var(--ping--hover--bg);
    border: 1px solid var(--ping--hover--brd) ;
    padding: .375rem .75rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}