/* PAGINATION_VISUALS_20261106_R1
   The history templates use direct anchors, rather than Bootstrap list items. */
div.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    margin: 24px 0;
    padding: 0;
}
div.pagination > div.pagination { min-width: 0; margin: 0; }
div.pagination > a,
div.pagination > span.current,
table.site-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    background: #fff;
    color: #34527c;
    font: 500 16px/1.25 Arial, sans-serif;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    float: none;
}
div.pagination > a:hover,
table.site-pagination a:hover { background: #edf2fa; border-color: #34527c; color: #243b5c; }
div.pagination > a:focus-visible,
table.site-pagination a:focus-visible { outline: 3px solid #34527c; outline-offset: 2px; }
div.pagination > span.current,
table.site-pagination td[bgcolor="#C0C0C0"] > a {
    border-color: #34527c;
    background: #34527c;
    color: #fff;
    font-weight: 700;
}

/* Scope the legacy table-to-flex layout to the pagination tables only. */
table.site-pagination,
table.site-pagination table,
table.site-pagination tbody,
table.site-pagination tr,
table.site-pagination td {
    display: block;
    box-sizing: border-box;
    width: auto;
    max-width: 100%;
    min-width: 0;
    height: auto;
    border: 0;
    padding: 0;
    background: transparent;
}
table.site-pagination { width: 100%; margin: 20px auto; }
table.site-pagination tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
table.site-pagination > tbody > tr > td { flex: 0 0 auto; }
table.site-pagination > tbody > tr > td:nth-child(3) { flex: 0 1 auto; min-width: 0; }
table.site-pagination table td { white-space: normal; }
table.site-pagination table td[bgcolor] { font-size: 0; }
table.site-pagination a font { color: inherit; font: inherit; }
table.site-pagination a p { margin: 0; line-height: inherit; }
table.site-pagination p { margin: 0; }
table.site-pagination .epin-page-arrow { width: 44px; height: 44px; padding: 10px; }
table.site-pagination .epin-page-arrow svg { display: block; width: 22px; height: 22px; }
@media (max-width: 640px) {
    table.site-pagination > tbody > tr > td:nth-child(3) { order: 1; flex-basis: 100%; }
}
@media print {
    div.pagination, table.site-pagination { display: none; }
}