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

    --ping--hover--color: #FFF;
    --ping--hover--bg:#f70020;
    --ping--hover--brd:#f70020;
}
.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 100%;
}

.paging{
    margin-top: 35px;
    text-align: center;
    
}
.pagination li{display: inline-block;}
.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) ;
    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) ;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}