ul.dt-pagination {
    width: 100%;
    font-family: var(--site-font, "Arial", "Helvetica", sans-serif);
    font-size: var(--font-md);
    list-style-type: none;
    margin: 20px 0;
    overflow: hidden;
    padding: 0; 
}

ul.dt-pagination li.details {
    background-color: var(--primary-background-color, white);
    border-color: var(--secondary-accent-color, #C8D5E0);
    border-image: none;
    border-style: solid;
    border-width: 1px 1px 2px;
    color: var(--primary-accent-color, #1E598E);
    font-weight: bold;
    padding: 8px 10px;
    text-decoration: none; 
}

ul.dt-pagination li.dot {
    padding: 3px 0;
    color: var(--primary-text-color, #333);
}

ul.dt-pagination li {
    float: left;
    list-style-type: none;
    margin: 0 3px 0 0; 
}

ul.dt-pagination li:first-child {
    margin-left: 0; 
}

ul.dt-pagination li a {
    color: var(--primary-accent-color, black);
    background-color: var(--primary-background-color, #f2f2f2);
    border-color: var(--secondary-accent-color, #f2f2f2);
    border-image: none;
    border-style: solid;
    border-width: 1px 1px 2px;
    display: block;
    font-weight: bold;
    padding: 8px 10px;
    text-decoration: none;
    transition: all 0.3s ease;
}

ul.dt-pagination li a img {
    border: medium none; 
}

ul.dt-pagination li a:hover {
    color: var(--secondary-text-color, white);
    background-color: var(--primary-accent-color, #C8D5E0);
    border-color: var(--secondary-accent-color, #C8D5E0);
}

ul.dt-pagination li a.current {
    color: var(--secondary-text-color, white);
    background-color: var(--primary-accent-color, white);
    border-color: var(--secondary-accent-color, #C8D5E0);
    border-radius: 0;
}

ul.dt-pagination li a.current:hover {
    color: var(--secondary-text-color, white);
    background-color: var(--primary-accent-color, white);
    opacity: 0.9;
}