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

    --ping--hover--color: #FFF;
    --ping--hover--bg:#000;
    --ping--hover--brd:#ec590e;
}


.paging{
    text-align: center;
    width: -webkit-fill-available;
}
.pagination{text-align: center;}
.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) ;
    
    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;
}