/*loading panel*/
.overlay

{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1060;
}

.overlay-card {
    background: #fff;
    border-radius: .75rem;
    padding: 1rem 1.25rem;
    box-shadow: 0 1rem 3rem rgba(0,0,0,.2);
    min-width: 260px;
}
.refine-box {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 1rem;
    width: 100%;
}

.refine-box h6 {
        font-weight: 600;
        border-bottom: 1px solid #dee2e6;
        padding-bottom: .5rem;
        margin-bottom: 1rem;
    }

.refine-section + .refine-section {
    margin-top: 1.25rem;
}

.refine-section a {
    display: block;
    color: #0d6efd;
    text-decoration: none;
    margin: 2px 0;
}

 .refine-section a:hover {
        text-decoration: underline;
}

/* An applied filter reads as a removable chip, not as another link to follow. */
.refine-section a.refine-applied {
    display: inline-block;
    background: #e7f1ff;
    border: 1px solid #b6d4fe;
    border-radius: 999px;
    padding: 1px 10px;
    margin: 2px 4px 2px 0;
    font-size: .875rem;
}

    .refine-section a.refine-applied:hover {
        background: #d0e3ff;
        text-decoration: none;
    }

.refine-section a.refine-clear {
    margin-top: .5rem;
    font-size: .875rem;
    color: #6c757d;
}

/* Type-ahead list under the home-page search box. */
.suggest-box {
    position: absolute;
    z-index: 1050;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 .375rem .375rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
    max-height: 320px;
    overflow-y: auto;
}

    .suggest-box button {
        display: block;
        width: 100%;
        text-align: left;
        border: 0;
        background: none;
        padding: .45rem .75rem;
        font-size: .9rem;
        color: #1e2022;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .suggest-box button:hover,
        .suggest-box button.active {
            background: #eef4ff;
        }

/*
   Footer social links. They stack one per row inside the Contact column, and
   an icon's default line box leaves far more room around it than the glyph
   needs. Collapsing the line height and setting the spacing explicitly keeps
   the rows close together.
*/
.social-link {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    padding: 0;
    margin-bottom: .25rem;
}

    /*
       The row is as tall as the glyph, so the size is what actually drives the
       spacing. This matches the 22px images these icons replaced; the theme's
       fs-5 renders them at about 31px.
    */
    .social-link .uil,
    .social-link .svg-inline--fa {
        font-size: 1.375rem;
        line-height: 1;
    }

    .social-link:last-child {
        margin-bottom: 0;
    }

/* Copy summary beside a result whose title has more than one physical copy. */
.copies-note {
    margin-left: .5rem;
    font-size: .875rem;
    color: #6c757d;
}

.copies-toggle {
    font-size: .875rem;
    text-decoration: none;
    cursor: pointer;
}

    .copies-toggle:hover {
        text-decoration: underline;
    }

.copies-table {
    font-size: .875rem;
    margin-top: .25rem;
    max-width: 640px;
}

    .copies-table th {
        font-weight: 600;
        color: #6c757d;
    }

/*
   The header is taller than the theme's 4rem, so the library's logo fits
   whole beside a name that wraps onto two lines. The theme sizes the bar
   and its first layer from this one variable.
*/
#dualNav {
    --phoenix-navbar-top-height: 5.75rem;
}

/* One white bar: the theme shades the brand's part of a dual navigation bar. */
#dualNav .dual-nav-first-layer {
    background-color: transparent;
}

/* The library's name beside its logo in the header: from the licence, never Web.config. */
.opac-logo {
    height: 72px;
    width: auto;
}

/* The same logo, larger, beside the library's name in the footer. */
.opac-footer-logo {
    height: 110px;
    width: auto;
}

.opac-brand {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    max-width: 380px;
}

.opac-brand-name {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--phoenix-emphasis-color, #141824);
    white-space: normal;
}

.opac-brand-sub {
    font-size: .75rem;
    color: #6c757d;
}

/* Carousel pictures keep the 3:1 shape of a 1200 x 400 picture, whatever size the library
   uploads, so one shows whole; on a phone they keep 180px of height and lose a little at the sides. */
.opac-slide-img {
    aspect-ratio: 3 / 1;
    height: auto;
    min-height: 180px;
    object-fit: cover;
}

/* The results and My Account pagers (asp:DataPager renders plain links and spans). */
.opac-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: .5rem 0 .75rem;
    font-size: .875rem;
}

    .opac-pager a,
    .opac-pager span.current,
    .opac-pager input[disabled] {
        display: inline-block;
        min-width: 2rem;
        padding: .2rem .55rem;
        border: 1px solid #dee2e6;
        border-radius: .375rem;
        text-align: center;
        text-decoration: none;
        color: #0d6efd;
        background: #fff;
    }

        .opac-pager a:hover {
            background: #eef4ff;
        }

    .opac-pager span.current {
        background: #0d6efd;
        border-color: #0d6efd;
        color: #fff;
        font-weight: 600;
    }

    .opac-pager a.aspNetDisabled {
        color: #adb5bd;
        pointer-events: none;
    }

.opac-pager-total {
    margin-left: .5rem;
    color: #6c757d;
}

/* The library's own pages (OPAC Settings): tables and pictures as the editor made them. */
.opac-content {
    overflow-wrap: anywhere;
}

    .opac-content img {
        max-width: 100%;
        height: auto;
    }

    .opac-content table {
        width: 100%;
        border-collapse: collapse;
        margin: .75rem 0;
    }

    .opac-content th,
    .opac-content td {
        border: 1px solid #dee2e6;
        padding: .4rem .6rem;
        vertical-align: top;
    }

    .opac-content th {
        background: #f8f9fa;
        font-weight: 600;
    }

    .opac-content blockquote {
        border-left: 4px solid #dee2e6;
        padding-left: 1rem;
        color: #525b75;
    }

/* Documents: a section's heading over its list; each document's kind as a coloured icon. */
.opac-doc-section {
    margin: 0 0 .25rem;
    padding-bottom: .35rem;
    border-bottom: 2px solid #3874ff;
    font-weight: 700;
}

.opac-doc-icon {
    width: 1.25rem;
    font-size: 1.15rem;
}

/* Gallery: photos in a grid, cropped to one shape, a dark band carrying the title over the bottom. */
.opac-gallery-item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: .5rem;
    background-color: #e9ecef;
}

.opac-gallery-item img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .35s ease;
}

.opac-gallery-item:hover img,
.opac-gallery-item:focus-visible img {
    transform: scale(1.06);
}

.opac-gallery-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1.6rem .75rem .6rem;
    color: #fff;
    font-size: .8rem;
    line-height: 1.3;
    background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
}

.opac-gallery-caption strong {
    display: block;
    font-size: .9rem;
}