/*--------------------------------------------------------------*/
/* General HTML overrides for Spydus OPAC                       */
/*--------------------------------------------------------------*/

:root {
    --spy-body-background-color: rgba(255,255,255,1);
    --spy-primary-color: rgba(0,156,166,1); /* Bondi Blue - Use for Components, Background, Icons, Highlight and text about 18px or bold */
    --spy-primary-color-rgb: 0,156,166; /* Bondi Blue - Use for Components, Background, Icons, Highlight and text about 18px or bold */
    --spy-primary-hover-color: rgba(26,166,175,1);
    --spy-primary-hover-color-rgb: 26,166,175;
    --spy-primary-bg-text-color: rgba(255,255,255,1); /* White - Use for text on primary background */
    --spy-primary-bg-text-color-rgb: 255,255,255; /* White - Use for text on primary background */
    --spy-primary-hover-bg-text-color: rgba(255,255,255,1); /* White - Use for text on primary hover background */
    --spy-primary-hover-bg-text-color-rgb: 255,255,255; /* White - Use for text on primary hover background */
    --spy-secondary-color: rgba(164,164,164,1);
    --spy-secondary-color-rgb: 164,164,164;
    --spy-secondary-hover-color: rgba(193,193,193,1);
    --spy-secondary-hover-color-rgb: 193,193,193;
    --spy-secondary-bg-text-color: rgba(255,255,255,1); /* White - Use for text on primary background */
    --spy-secondary-bg-text-color-rgb: 255,255,255; /* White - Use for text on primary background */
    --spy-secondary-hover-bg-text-color: rgba(255,255,255,1); /* White - Use for text on primary background */
    --spy-secondary-hover-bg-text-color-rgb: 255,255,255; /* White - Use for text on primary background */
    --spy-copyright-bg-color: rgba(38,38,38,1); /* Use for copyright background */
    --spy-copyright-bg-color-rgb: 38,38,38; /* Use for copyright background */
    --spy-copyright-text-color: rgba(255,255,255,1); /* Use for copyright text*/
    --spy-copyright-text-color-rgb: 255,255,255; /* Use for copyright text*/
    --spy-small-text-color: rgba(0,129,138,1); /* Blue Lagon - Use for text below 18px */
    --spy-small-text-color-rgb: 0,129,138; /* Blue Lagon - Use for text below 18px */
    --spy-highlight-primary-color: rgba(214,37,152,1); /* Cerise - Use for Highlight */
    --spy-highlight-primary-color-rgb: 214,37,152; /* Cerise - Use for Highlight */
    --spy-highlight-primary-hover-color: rgba(233,77,178,1);
    --spy-highlight-primary-hover-color-rgb: 233,77,178;
    --spy-highlight-primary-bg-text-color: rgba(255,255,255,1); /* White - Use for text on dark background */
    --spy-highlight-primary-bg-text-color-rgb: 255,255,255; /* White - Use for text on dark background */
    --spy-highlight-secondary-color: rgba(123,87,203,1); /* Amethyst - Use for Highlight */
    --spy-highlight-secondary-color-rgb: 123,87,203; /* Amethyst - Use for Highlight */
    --spy-highlight-secondary-hover-color: rgba(142,137,229,1);
    --spy-highlight-secondary-hover-color-rgb: 142,137,229;
    --spy-highlight-secondary-bg-text-color: rgba(255,255,255,1); /* White - Use for text on dark background */
    --spy-highlight-secondary-bg-text-color-rgb: 255,255,255; /* White - Use for text on dark background */
    --spy-body-bg-text-color: rgba(38,38,38,1); /* Use for text on light background */
    --spy-body-bg-text-color-rgb: 38,38,38; /* Use for text on light background */
    --spy-darkbg-text-color: rgba(255,255,255,1); /* White - Use for text on dark background */
    --spy-darkbg-text-color-rgb: 255,255,255; /* White - Use for text on dark background */
    --spy-lightbg-text-color: rgba(38,38,38,1); /* Use for text on light background */
    --spy-lightbg-text-color-rgb: 38,38,38; /* Use for text on light background */
    --spy-secondary-lightbg-text-color: rgba(89,89,89,1); /* Use for text on light background */
    --spy-secondary-lightbg-text-color-rgb: 89,89,89; /* Use for text on light background */
    --spy-breadcrumb-main-color: rgba(164,164,164,1);
    --spy-breadcrumb-main-color-rgb: 164,164,164;
    --spy-breadcrumb-hover-color: rgba(24,24,24,1);
    --spy-breadcrumb-hover-color-rgb: 24,24,24;
    --spy-button-hover-shadow-color: rgba(78,78,78,1);
    --spy-button-hover-shadow-color-rgb: 78,78,78;
    --spy-info-light-color: rgba(244,244,230,1);
    --spy-info-light-color-rgb: 244,244,230;
    --spy-info-dark-color: rgba(100,80,7,1);
    --spy-info-dark-color-rgb: 100,80,7;
    --spy-update-light-color: rgba(219,247,255,1);
    --spy-update-light-color-rgb: 219,247,255;
    --spy-update-dark-color: rgba(6,86,132,1);
    --spy-update-dark-color-rgb: 6,86,132;
    --spy-success-light-color: rgba(222,247,235,1);
    --spy-success-light-color-rgb: 222,247,235;
    --spy-success-dark-color: rgba(6,91,80,1);
    --spy-success-dark-color-rgb: 6,91,80;
    --spy-danger-light-color: rgba(248,215,218,1);
    --spy-danger-light-color-rgb: 248,215,218;
    --spy-danger-dark-color: rgba(132,32,41,1);
    --spy-danger-dark-color-rgb: 132,32,41;
    --spy-warning-light-color: rgba(255,243,205,1);
    --spy-warning-light-color-rgb: 255,243,205;
    --spy-warning-dark-color: rgba(102,77,3,1);
    --spy-warning-dark-color-rgb: 102,77,3;
    --spy-disable-primary-color: rgba(181,181,181,1);
    --spy-disable-primary-color-rgb: 181,181,181;
    --spy-disable-dark-color: rgba(71,71,71,1);
    --spy-disable-dark-color-rgb: 71,71,71;
    --spy-disable-light-color: rgba(229,229,229,1);
    --spy-disable-light-color-rgb: 229,229,229;
    --spy-list-active-color: rgba(242,242,242,1);
    --spy-list-active-color-rgb: 242,242,242;
    --spy-list-hover-color: rgba(248,249,250,1);
    --spy-list-hover-color-rgb: 248,249,250;
    --spy-control-border-color: rgba(206,212,218,1);
    --spy-control-border-color-rgb: 206,212,218;
    --spy-control-border-hover-color: rgba(0,156,166,1);
    --spy-control-border-hover-color-rgb: 0,156,166;
    --bs-primary: rgba(0,156,166,1);
    --bs-primary-rgb: 0,156,166;
    --bs-secondary: rgba(164,164,164,1);
    --bs-secondary-rgb: 164,164,64;
    --bs-danger: rgba(132,32,41,1);
    --bs-danger-rgb: 132,32,41;
    --bs-success: rgba(6,91,80,1);
    --bs-success-rgb: 6,91,80;
    --bs-info: rgba(100,80,7,1);
    --bs-info-rgb: 100,80,7;
    --bs-warning: rgba(102,77,3);
    --bs-warning-rgb: 102,77,3;
    --spy-header-height: 45px;
    --spy-container-image-height-small: 100px;
    --spy-container-image-height-medium: 150px;
    --spy-container-image-height-large: 200px;
}

html {
    -ms-overflow-style: scrollbar;
    -webkit-overflow-scrolling: touch;
    font-size: 14px;
}

body {
    overflow-x: hidden;
    padding: 0;
    margin: 0;
    height: 100%;
    background-color: rgba(255, 255, 255, 1);
    word-break: break-word;
}

h1, .h1 {
    font-size: 1.75rem;
}

h2, .h2 {
    font-size: 1.5rem;
}

h3, .h3 {
    font-size: 1.375rem;
}

h4, .h4 {
    font-size: 1.25rem;
}

h5, .h5 {
    font-size: 1.125rem;
}

    h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
    .h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a {
        font-weight: inherit;
    }

a {
    color: var(--spy-small-text-color);
    text-decoration: none;
    font-weight: 400;
}

    a.disabled {
        pointer-events: none;
    }

    a:hover {
        color: var(--spy-small-text-color);
        text-decoration: underline;
    }

    a.btn:hover,
    a.nav-link:hover,
    a.dropdown-item:hover,
    a.page-link:hover,
    .menu-group h3 > a:hover {
        text-decoration: none;
    }

@media (max-width: 991px) {
    .container {
        max-width: 100%;
    }

    header .container,
    main .main-container,
    main .main-body {
        padding-left: 0;
        padding-right: 0;
    }
}

main {
    margin-bottom: 2rem;
}

footer div.footer {
    background-color: var(--spy-primary-color);
}

    footer div.footer h3 {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--spy-primary-bg-text-color);
    }

        footer div.footer h3 button {
            color: var(--spy-primary-bg-text-color);
            background-color: transparent;
            border: none;
        }


    footer div.footer ul > li > a {
        color: var(--spy-primary-bg-text-color);
        text-decoration: none;
    }

    footer div.footer ul.list-unstyled {
        margin-bottom: 0;
    }

footer div.copyright {
    background-color: var(--spy-copyright-bg-color);
    font-size: 12px;
    color: var(--spy-copyright-text-color);
}

    footer div.copyright .footer-lang {
        font-size: 1rem;
    }

footer .copyright a {
    font-size: 1rem;
    color: var(--spy-copyright-text-color);
}

footer div.copyright .footer-lang a.dropdown-toggle {
    color: var(--spy-copyright-text-color);
}

footer .copyright .footer-lang a.dropdown-item {
    color: rgba(0, 0, 0,1);
}

#offcanvasCookie {
    height: fit-content;
}

header .container > div,
main .container > div,
footer .container > div {
    padding-left: 0;
    padding-right: 0;
}

footer div.fixed-bottom {
    height: 50px;
    background-color: var(--spy-body-background-color);
    box-shadow: 0 0 0 .15rem rgba(var(--spy-secondary-color-rgb),.25);
}

    footer div.fixed-bottom .mb-menu a {
        color: var(--spy-primary-color);
    }

    footer div.fixed-bottom div.mb-menu-user {
        padding: 0;
    }

    footer div.fixed-bottom svg {
        padding: 2px;
    }

    footer div.fixed-bottom div.mb-menu-user button svg {
        background-color: var(--spy-highlight-primary-color);
        color: white;
        border-radius: 100%;
        padding: 5px;
    }

    footer div.fixed-bottom div.mb-menu-user .mb-menu-toggler {
        background-color: transparent;
        border-width: 0;
    }

header .container.header-navbar > div,
header .container.header-main > div,
main .container.body-main > div,
main .container.main-container > div,
footer .container > div,
header .container-fluid.header-navbar > div,
header .container-fluid.header-main > div,
main .container-fluid.body-main > div,
main .container-fluid.main-container > div,
footer .container-fluid > div {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (max-width: 767px) {
    footer div.copyright {
        margin-bottom: 50px;
    }
}

footer div.fixed-bottom div.mb-menu-user .navbar-nav .nav-link,
footer div.fixed-bottom div.mb-menu-user .navbar-nav .nav-link:focus,
footer div.fixed-bottom div.mb-menu-user .navbar-nav .nav-link:hover {
    color: var(--spy-breadcrumb-hover-color);
    padding-left: 12px;
    padding-right: 12px;
    position: relative;
    text-align: center !important;
}

    footer div.fixed-bottom div.mb-menu-user .navbar-nav .nav-link::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 4px;
        border-radius: 4px;
        background-color: var(--spy-primary-color);
        bottom: 0;
        left: 0;
        transform-origin: right;
        transform: scaleX(0);
        transition: transform .3s ease-in-out;
    }

@media (prefers-reduced-motion) {
    footer div.fixed-bottom div.mb-menu-user .navbar-nav .nav-link::before {
        transition: none !important;
    }
}

footer div.fixed-bottom div.mb-menu-user .navbar-nav .nav-link:hover::before {
    transform-origin: left;
    transform: scaleX(1);
}

footer div.fixed-bottom div.mb-menu-user .navbar-nav .nav-link svg {
    color: var(--spy-primary-color);
    padding-right: .5rem;
}

footer div.fixed-bottom div.mb-menu .offcanvas .dropdown-item {
    font-size: 1rem;
}

footer div.fixed-bottom div.mb-menu .offcanvas .dropdown-item {
    color: var(--spy-breadcrumb-hover-color);
}

    footer div.fixed-bottom div.mb-menu .offcanvas .dropdown-item:focus,
    footer div.fixed-bottom div.mb-menu .offcanvas .dropdown-item:hover {
        color: var(--spy-body-bg-text-color);
        background-color: var(--spy-list-hover-color);
        transition: color .2s ease-in-out, background-color .2s ease-in-out;
    }

@media (prefers-reduced-motion) {
    footer div.fixed-bottom div.mb-menu .offcanvas .dropdown-item:focus,
    footer div.fixed-bottom div.mb-menu .offcanvas .dropdown-item:hover {
        transition: none !important;
    }
}

footer div.fixed-bottom div.mb-menu .offcanvas .dropdown-item.active,
footer div.fixed-bottom div.mb-menu .offcanvas .dropdown-item:active {
    color: var(--spy-primary-bg-text-color);
    background-color: var(--spy-primary-color);
}

.page-item .page-link {
    border: none;
    border-radius: 1px;
    background-color: var(--spy-body-background-color);
    color: var(--spy-small-text-color);
    transition: color .3s ease-in-out,background-color .3s ease-in-out;
}

@media (prefers-reduced-motion) {
    .page-item .page-link {
        transition: none !important;
    }
}

.page-item:first-child .page-link,
.page-item:last-child .page-link {
    border-radius: 1px;
}

.page-item .page-link:hover {
    background-color: var(--spy-secondary-hover-color);
    color: var(--spy-secondary-hover-bg-text-color);
}

.page-item .page-link:focus,
.page-item .page-link.focus {
    outline: 0;
    box-shadow: 0 0 0 .15rem rgba(var(--spy-secondary-color-rgb),.25);
}

.page-item .page-link svg {
    color: var(--spy-small-text-color);
}

.page-item .page-link svg {
    transition: color .3s ease-in-out,background-color .3s ease-in-out;
}

@media (prefers-reduced-motion) {
    .page-item .page-link svg {
        transition: none !important;
    }
}

.page-item .page-link:hover svg {
    color: var(--spy-secondary-bg-text-color);
}

.list-inline-item.splitter svg {
    color: var(--spy-primary-color);
}

.page-item.disabled .page-link,
.page-item.disabled .page-link svg,
.list-inline-item.disabled span,
.list-inline-item.disabled span svg {
    color: var(--spy-disable-primary-color);
}

.page-item.disabled .page-link {
    border-color: var(--spy-disable-primary-color);
}

.page-item.active .page-link {
    background-color: var(--spy-primary-color);
    color: var(--spy-primary-bg-text-color);
}

.form-control,
.form-select {
    font-size: 1rem;
    border-radius: 2px;
    border-color: var(--spy-control-border-color);
}

    .form-control:focus,
    .form-select:focus,
    .k-input:focus, .k-input:focus-within {
        outline: 0;
        border-color: var(--spy-control-border-hover-color);
        box-shadow: 0 0 0 .15rem rgba(var(--spy-control-border-hover-color-rgb),.25);
    }

.form-static-text {
    display: block;
}

.form-static-text-alert {
    font-weight: 600;
    color: var(--spy-highlight-primary-color);
}

.dropdown-menu {
    border-color: var(--spy-primary-color);
    border-radius: 2px;
}

    .dropdown-menu.dropdown-secondary-menu {
        border-color: var(--spy-secondary-color);
        z-index: 1001;
    }

@media (min-width: 992px) {
    .dropdown-menu .dropdown-item {
        font-size: 1rem;
    }

        .dropdown-menu .dropdown-item:focus,
        .dropdown-menu .dropdown-item:hover {
            color: var(--spy-body-bg-text-color);
            background-color: var(--spy-list-hover-color);
            transition: color .2s ease-in-out, background-color .2s ease-in-out;
        }

    @media (prefers-reduced-motion) {
        .dropdown-menu .dropdown-item:focus,
        .dropdown-menu .dropdown-item:hover {
            transition: none !important;
        }
    }

    .dropdown-menu .dropdown-item.active,
    .dropdown-menu .dropdown-item:active {
        color: var(--spy-primary-bg-text-color);
        background-color: var(--spy-primary-color);
    }

    .dropdown-menu.dropdown-secondary-menu .dropdown-item.active,
    .dropdown-menu.dropdown-secondary-menu .dropdown-item:active {
        color: var(--spy-secondary-bg-text-color);
        background-color: var(--spy-secondary-color);
    }
}

@media (max-width: 991px) {
    .dropdown-menu .dropdown-item:not(.btn) {
        font-size: 1rem;
    }

        .dropdown-menu .dropdown-item:not(.btn):focus,
        .dropdown-menu .dropdown-item:not(.btn):hover {
            color: var(--spy-body-bg-text-color);
            background-color: var(--spy-list-hover-color);
            transition: color .2s ease-in-out, background-color .2s ease-in-out;
        }

    @media (prefers-reduced-motion) {
        .dropdown-menu .dropdown-item:not(.btn):focus,
        .dropdown-menu .dropdown-item:not(.btn):hover {
            transition: none !important;
        }
    }

    .dropdown-menu .dropdown-item:not(.btn).active,
    .dropdown-menu .dropdown-item:not(.btn):active {
        color: var(--spy-primary-bg-text-color);
        background-color: var(--spy-primary-color);
    }

    .dropdown-menu.dropdown-secondary-menu .dropdown-item:not(.btn):focus,
    .dropdown-menu.dropdown-secondary-menu .dropdown-item:not(.btn):hover {
        color: var(--spy-body-bg-text-color);
        background-color: var(--spy-list-hover-color);
        transition: color .2s ease-in-out, background-color .2s ease-in-out;
    }

    @media (prefers-reduced-motion) {
        .dropdown-menu.dropdown-secondary-menu .dropdown-item:not(.btn):focus,
        .dropdown-menu.dropdown-secondary-menu .dropdown-item:not(.btn):hover {
            transition: none !important;
        }
    }

    .dropdown-menu.dropdown-secondary-menu .dropdown-item:not(.btn).active,
    .dropdown-menu.dropdown-secondary-menu .dropdown-item:not(.btn):active {
        color: var(--spy-secondary-bg-text-color);
        background-color: var(--spy-secondary-color);
    }
}

.list-group-item.active {
    color: var(--spy-primary-bg-text-color);
    background-color: var(--spy-primary-color);
}

.badge {
    border-radius: 2px;
}

/* header nav */

header nav {
    height: var(--spy-header-height);
}

header .navbar-light .navbar-toggler {
    color: var(--spy-primary-color);
    border-color: var(--spy-primary-color);
    border-width: 0;
}

    header .navbar-light .navbar-toggler:focus {
        color: var(--spy-primary-color);
        border-color: var(--spy-primary-color);
        box-shadow: 0 0 0 .15rem rgba(var(--spy-primary-color-rgb),.25);
    }

header .navbar-light .navbar-nav .nav-link,
header .navbar-light .navbar-nav .nav-link:focus,
header .navbar-light .navbar-nav .nav-link:hover {
    color: var(--spy-breadcrumb-hover-color);
    padding-left: 12px;
    padding-right: 12px;
    position: relative;
    text-align: center !important;
}

    header .navbar-light .navbar-nav .nav-link::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 4px;
        border-radius: 4px;
        background-color: var(--spy-primary-color);
        bottom: 0;
        left: 0;
        transform-origin: right;
        transform: scaleX(0);
        transition: transform .3s ease-in-out;
    }

@media (prefers-reduced-motion) {
    header .navbar-light .navbar-nav .nav-link::before {
        transition: none !important;
    }
}

header .navbar-light .navbar-nav .nav-link:hover::before {
    transform-origin: left;
    transform: scaleX(1);
}

header .navbar-light .navbar-nav .nav-link.join,
header .navbar-light .navbar-nav .nav-link.join:focus,
header .navbar-light .navbar-nav .nav-link.join:hover {
    font-size: 1rem;
    font-weight: 600;
    color: var(--spy-primary-color);
}

header .header-library-name {
    font-size: 20px;
    font-weight: 600;
    color: var(--spy-primary-color);
}

header .navbar-brand img {
    max-width: 100%;
    height: auto;
    max-height: var(--spy-header-height);
}

/* tab container */
.tab-container {
    padding: 1rem;
    margin-bottom: 2rem;
    box-shadow: 1px 5px 24px -4px rgba(var(--spy-secondary-lightbg-text-color-rgb), .25);
    background-color: var(--spy-body-background-color);
}

.side-tab-containers .tab-container {
    padding: 0;
 }

#contentTabContainers .tab-container {
    box-shadow: none;
}

    #contentTabContainers .tab-container.show-box-shadow {
        box-shadow: 1px 5px 24px -4px rgba(var(--spy-secondary-lightbg-text-color-rgb), .25);
    }

.tab-container-CA {
    padding-top: 0
}

.tab-container-head {
    color: var(--spy-secondary-lightbg-text-color);
    background-color: var(--spy-body-background-color);
    font-weight: 400;
}

    .tab-container-head h2,
    .tab-container-head h3 {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 0;
    }

.side-tab-containers .tab-container-head {
    padding: 0.5rem 1rem;
    background-color: var(--spy-primary-color);
}

.side-tab-containers .tab-container-head * {
    color: var(--spy-primary-bg-text-color);
}

.tab-container-BL .tab-container-head {
    padding-bottom: .5rem;
}

.tab-container-head a {
    display: block;
    position: relative;
    text-decoration: none;
    color: var(--spy-secondary-lightbg-text-color);
    height: 100%;
}

    .tab-container-head a.showall {
        color: var(--spy-small-text-color);
        padding-right: 0px;
        font-size: 1rem;
        font-weight: 400;
        z-index: 1;
    }

    .tab-container-head a:not(.showall)::after {
        display: none !important;
        font: var(--fa-font-regular);
        content: '\f077';
    }

    .tab-container-head a svg[data-fa-pseudo-element='::after'] {
        position: absolute;
        right: 10px;
        transform: rotate(0);
        transition: transform .5s ease;
    }

@media (prefers-reduced-motion) {
    .tab-container-head a svg[data-fa-pseudo-element='::after'] {
        transition: none !important;
    }
}

.tab-container-head a.collapsed svg[data-fa-pseudo-element='::after'] {
    transform: rotate(180deg);
}

.tab-container-head a.showall:hover {
    text-decoration: underline;
}

.tab-container-body {
    padding-top: 0;
}

.side-tab-containers .tab-container-body {
    padding: 0 1rem 1rem 1rem;
}

.side-tab-containers .tab-container-UL .tab-container-body {
    padding-left: 0;
    padding-right: 0;
}

.tab-container-UL .tab-container-body .list-group .list-group-item {
    border-width: 0;
    color: var(--spy-secondary-lightbg-text-color);
}

    .tab-container-UL .tab-container-body .list-group .list-group-item span:first-of-type {
        padding-left: .75rem;
    }

    .tab-container-UL .tab-container-body .list-group .list-group-item svg {
        color: var(--spy-primary-color);
    }

    .tab-container-IN .tab-container-body .qrcode img {
        width: 100%;
    }

.tab-container .tab-container-body .facet-group .facet-group-header a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--spy-body-bg-text-color);
    padding: .5rem 0;
    font-weight: 600;
}

    .tab-container .tab-container-body .facet-group .facet-group-header a:hover {
        background-color: var(--spy-list-hover-color);
    }

    .tab-container .tab-container-body .facet-group .facet-group-header a > span:first-of-type {
        padding-left: .75rem;
    }

    .tab-container .tab-container-body .facet-group .facet-group-header a > svg {
        transform: rotate(180deg);
        transition: transform .5s ease;
    }

@media (prefers-reduced-motion) {
    .tab-container .tab-container-body .facet-group .facet-group-header a > svg {
        transition: none !important;
    }
}

.tab-container .tab-container-body .facet-group .facet-group-header a.collapsed > svg {
    transform: rotate(90deg);
}

.tab-container .tab-container-body .facet-list .list-group-item {
    border-width: 0;
    padding: .25rem .5rem;
    color: var(--spy-body-bg-text-color);
}

.tab-container .tab-container-body .facet-group .facet-list .list-group-item span.count {
    font-size: 12px;
    color: var(--spy-secondary-lightbg-text-color);
}

.tab-container-IL .card,
.tab-container-ML .card,
.flip-card .card,
.masonry-container-item .card {
    border-color: var(--spy-list-active-color);
    box-shadow: 0px 12px 7px -7px rgba(var(--spy-secondary-lightbg-text-color-rgb),.25);
    border-radius: 2px;
    margin-bottom: 0;
}

.tab-container-IL .card:not(.flip-card-inner),
.tab-container-ML .card:not(.flip-card-inner),
.masonry-container-item .card:not(.flip-card-inner) {
    overflow: hidden;
}

    .tab-container-IL .card .card-title a,
    .tab-container-ML .card .card-title a {
        font-size: 18px;
        font-weight: 600;
    }

    .tab-container-IL .card .card-img,
    .tab-container-ML .card .card-img,
    .masonry-container-item .card .card-img {
        min-height: 150px;
        height: 100%;
        object-fit: cover;
    }

    .tab-container-IL .card .card-img-top {
        height: 180px;
    }

    .tab-container-IL .card .card-img-top,
    .tab-container-ML .card .card-img-top,
    .masonry-container-item .card .card-img-top {
        object-fit: cover;
        transform: scale(1);
        transition: transform .3s ease-in-out;
    }

    @media (prefers-reduced-motion) {
        .tab-container-IL .card .card-img-top,
        .tab-container-ML .card .card-img-top,
        .masonry-container-item .card .card-img-top {
            transition: none !important;
        }
    }

    .tab-container-IL .card:hover .card-img-top,
    .tab-container-ML .card:hover .card-img-top,
    .masonry-container-item .card:not(.flip-card-inner):hover .card-img-top,
    .masonry-container-item .card:not(.flip-card-inner):hover .noimgsc {
        transform: scale(1.1);
    }

    .tab-container-ML .card .flip-card-back a:hover {
        text-decoration: none;
    }

    .tab-container-ML .card .flip-card-back a .card-text.summary {
        color: var(--spy-secondary-lightbg-text-color);
    }


/* The flip card container */
.flip-card {
  background-color: transparent;
  perspective: 800px; /* Remove this if you don't want the 3D effect */
}

.tab-container-IL .flip-card {
    height: 100%;
}

.flip-card .card-body {
    height: 100%;
    overflow: hidden;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: fit-content;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.tab-container-IL .flip-card-inner {
    height: 100%;
}

.flip-card-inner.flip-card-nogap {
  border: none;
  box-shadow: none;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner,
.flip-card.auto-flip .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the back side */
.flip-card-back {
  position: absolute;
  transform: rotateY(180deg);
  background-color: inherit;
}

.flip-card-nogap .flip-card-back {
  border: 2px solid var(--spy-list-active-color);
}

.flip-card-back .card-text.summary {
    display: contents;
}

.masonry-container-item .imgsc {
    min-height: var(--spy-container-image-height-medium);
    object-fit: cover;
}

.masonry-container-item .noimgsc {
    width: auto;
    max-width: none;
}

.image-loading {
    font-size: 50px; 
    line-height: 1;
    --fa-primary-color: var(--spy-primary-color); 
    --fa-secondary-color: var(--spy-secondary-color);
}

/* pseudo icon setup */
.pseudo-icon-after:after {
    display: none !important;
}

.pseudo-icon-before:before {
    display: none !important;
}

/* navbar dropdown login form */

.navbar-login {
    padding: 1rem;
    font-size: 1rem;
}

    .navbar-login a {
        color: var(--spy-small-text-color);
        text-decoration: none;
        font-weight: 500;
    }

.navbar-login-saml p {
    margin-top: 1rem;
}

.navbar-brwloggedin {
	z-index: 1002;
}

@media (min-width: 992px) {
    .navbar-login {
        min-width: 350px;
    }

    .dropdown-lg .navbar-login.dropdown-menu[data-bs-popper],
    .dropdown-lg .navbar-brwloggedin.dropdown-menu[data-bs-popper] {
        top: 100%;
        bottom: auto;
        margin-top: .125rem;
        margin-bottom: 0;
        z-index: 1001;
    }
}

@media (max-width: 991px) {
    .navbar-login.dropdown-menu,
    .navbar-brwloggedin.dropdown-menu {
        position: absolute;
    }

    .navbar-login.dropdown-menu-end[data-bs-popper] {
        right: -120px;
        left: auto;
        width: 375px;
    }

    .navbar-brand {
        padding-top: 0;
    }
}

/* navbar logged in */
#navbarLoginMenuLinkName.dropdown-toggle > svg,
#header-navbar .dropdown-toggle.pseudo-icon-after > svg {
    background-color: var(--spy-highlight-primary-color);
    color: var(--spy-highlight-primary-bg-text-color);
    margin-left: 1rem;
    padding: 6px;
    border-radius: 100%;
    font-size: 1.25em;
}

#navbarLoginMenuLinkName.dropdown-toggle::after,
#header-navbar .dropdown-toggle.pseudo-icon-after:after {
    font: var(--fa-font-solid);
    content: "\f406";
}

.navbar-brwloggedin :not(.fa-layers) svg {
    padding-right: .75rem;
}

.navbar-brwloggedin .bookmark-all {
    width: 28px;
}

#header-search-submit-nav::after {
    display: none !important;
    font: var(--fa-font-regular);
    font-size: 1.5rem;
    content: '\f010';
}

#header-search-submit-nav.collapsed::after {
    display: none !important;
    font: var(--fa-font-regular);
    font-size: 1.5rem;
    content: '\f00e';
}

/* Borrower account page */
.brw-welcome-header svg {
    color: var(--spy-primary-color);
}

.brw-welcome-header .mb-account-menu-toggler svg {
    font-size: 1.75rem;
    margin-bottom: .5rem;
}

.brw-welcome-header .offcanvas {
    font-size: 1rem;
    font-weight: 400;
}

.brw-welcome-header .navbar-nav .nav-link,
.brw-welcome-header .navbar-nav .nav-link:focus,
.brw-welcome-header .navbar-nav .nav-link:hover {
    color: var(--spy-breadcrumb-hover-color);
    padding-left: 12px;
    padding-right: 12px;
    position: relative;
    text-align: center !important;
}

    .brw-welcome-header .navbar-nav .nav-link::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 4px;
        border-radius: 4px;
        background-color: var(--spy-primary-color);
        bottom: 0;
        left: 0;
        transform-origin: right;
        transform: scaleX(0);
        transition: transform .3s ease-in-out;
    }

@media (prefers-reduced-motion) {
    .brw-welcome-header .navbar-nav .nav-link::before {
        transition: none !important;
    }
}

.brw-welcome-header .navbar-nav .nav-link:hover::before {
    transform-origin: left;
    transform: scaleX(1);
}

.brw-welcome-header .navbar-nav .nav-link svg {
    padding-right: .5rem;
}

/* Borrower account nav */
#navBrwMenu {
    padding: 0;
}

    #navBrwMenu .tab-container-head-content {
        background-color: var(--spy-primary-color);
        padding: 10px 5px;
        border-radius: 1px;
        z-index: 1;
    }

        #navBrwMenu .tab-container-head-content h2 {
            color: var(--spy-primary-bg-text-color);
            padding-left: 11px;
        }

            #navBrwMenu .tab-container-head-content h2 span:first-of-type {
                padding-left: .6rem;
            }

    #navBrwMenu .navBrwMenu-id {
        padding-left: .75rem;
    }

    #navBrwMenu .tab-container-body {
        border-style: solid;
        border-color: var(--spy-list-active-color);
        border-top-width: 1px;
        border-left-width: 0;
        border-right-width: 0;
        border-bottom-width: 0;
    }

    #navBrwMenu .list-group-item,
    #navBrwMenu .list-group-item svg {
        border-width: 1px;
        border-radius: 1px;
        border-color: var(--spy-body-background-color);
        transition: color .3s ease-in-out, background-color .3s ease-in-out;
    }

@media (prefers-reduced-motion) {
    #navBrwMenu .list-group-item,
    #navBrwMenu .list-group-item svg {
        transition: none !important;
    }
}

#navBrwMenu .list-group-item:active {
    background-color: var(--spy-primary-color);
    color: var(--spy-primary-bg-text-color);
    border-color: var(--spy-primary-color);
}

    #navBrwMenu .list-group-item:active svg {
        color: var(--spy-primary-bg-text-color);
    }

#navBrwMenu .list-group-item.active {
    color: var(--spy-body-bg-text-color);
    background-color: var(--spy-list-active-color);
    border-color: var(--spy-list-active-color);
    border-left-width: 5px;
    border-left-color: var(--spy-primary-color);
    padding-left: 10px;
}

    #navBrwMenu .list-group-item.active svg {
        color: var(--spy-primary-color);
    }

@media (max-width: 991px) {
    #navBrwMenu:not(.tab-container-overlay-show) .list-group-item .navBrwMenu-id {
        transition: background-color .3s ease-in-out;
    }

    @media (prefers-reduced-motion) {
        #navBrwMenu:not(.tab-container-overlay-show) .list-group-item .navBrwMenu-id {
            transition: none !important;
        }
    }

    #navBrwMenu:not(.tab-container-overlay-show) .tab-container-head-content:hover {
        position: relative;
        box-shadow: 0px 10px 11px -4px rgba(var(--spy-secondary-hover-color-rgb), .56);
        border-radius: 1px;
    }

        #navBrwMenu:not(.tab-container-overlay-show) .tab-container-head-content:hover .navBrwMenu-id {
            position: absolute;
            width: max-content;
            top: 0px;
            padding-top: 10px;
            padding-bottom: 10px;
            padding-right: 16px;
            display: inline-block !important;
            background-color: var(--spy-primary-color);
            box-shadow: 0px 10px 11px -4px rgba(var(--spy-secondary-hover-color-rgb), .56);
            clip-path: inset(-20px -20px -20px 0);
        }

    #navBrwMenu:not(.tab-container-overlay-show) .list-group-item:hover,
    #navBrwMenu:not(.tab-container-overlay-show) .list-group-item:focus {
        box-shadow: 0px 10px 11px -4px rgba(var(--spy-secondary-hover-color-rgb), .56);
        border-style: solid;
        border-width: 1px;
        border-right-width: 0;
        border-radius: 1px;
        border-color: var(--spy-primary-color);
        z-index: 1001;
    }

    #navBrwMenu:not(.tab-container-overlay-show) .list-group-item.active:hover,
    #navBrwMenu .list-group-item.active:focus {
        border-left-width: 5px;
    }

    #navBrwMenu:not(.tab-container-overlay-show) .list-group-item:hover .navBrwMenu-id,
    #navBrwMenu:not(.tab-container-overlay-show) .list-group-item:focus .navBrwMenu-id {
        position: absolute;
        width: max-content;
        top: -1px;
        padding-top: 7px;
        padding-bottom: 7px;
        padding-right: 16px;
        display: inline-block !important;
        background-color: var(--spy-list-hover-color);
        border-style: solid;
        border-width: 1px;
        border-left-width: 0;
        border-radius: 1px;
        border-color: var(--spy-primary-color);
        box-shadow: 0px 10px 11px -4px rgba(var(--spy-secondary-hover-color-rgb), .56);
        clip-path: inset(-20px -20px -20px 0);
    }

    #navBrwMenu:not(.tab-container-overlay-show) .list-group-item.active:hover .navBrwMenu-id,
    #navBrwMenu:not(.tab-container-overlay-show) .list-group-item.active:focus .navBrwMenu-id {
        background-color: var(--spy-list-active-color);
        color: var(--spy-body-bg-text-color);
    }

    #navBrwMenu:not(.tab-container-overlay-show) .list-group-item:active .navBrwMenu-id {
        background-color: var(--spy-primary-color);
    }

    #navBrwMenu:not(.tab-container-overlay-show) .list-group-item.active:active .navBrwMenu-id {
        color: var(--spy-body-bg-text-color);
    }

    #navBrwMenu.tab-container-overlay-show {
        position: absolute;
        z-index: 1;
    }

        #navBrwMenu.tab-container-overlay-show .navBrwMenu-id {
            display: inline-block !important;
        }
}

#mobilemenu-navbar .dropdown-menu {
    position: relative;
    border: none;
}

    #mobilemenu-navbar .dropdown-menu .dropdown-item svg {
        padding-right: .75rem;
        padding-top: 0;
        padding-bottom: 0;
    }

    #mobilemenu-navbar .dropdown-menu .dropdown-item .fa-layers {
        width: 30px;
    }

    #mobilemenu-navbar .dropdown-menu.svl-chg-menu {
        position: static !important;
        transform: translate(0px, 0px) !important;

    }

    #mobilemenu-navbar .dropdown-menu.svl-chg-menu .dropdown-item svg {
        padding-left: 2rem;
    }

#mobilemenu-navbar .dropdown-menu.svl-chg-menu,
.navbar-brwloggedin .dropdown-menu.svl-chg-menu {
    bottom: auto !important;
}

/* Borrower dashboard*/
.brw-dashboard-row {
    margin-left: 0;
    margin-right: 0;
    padding-bottom: .5rem;
}

.brw-dashboard-col {
    padding-left: 0;
    padding-top: 1.5rem;
    padding-right: 2rem;
}

    .brw-dashboard-col .brw-dashboard-item {
        position: relative;
        border: 1px solid var(--spy-primary-color);
        box-shadow: 0px 4px 4px -2px rgba(var(--spy-primary-color-rgb), .25);
        border-radius: 2px;
        color: var(--spy-body-bg-text-color);
        text-decoration: none;
        transition: color .3s ease-in-out, background-color .3s ease-in-out, box-shadow .3s ease-in-out;
    }

@media (prefers-reduced-motion) {
    .brw-dashboard-col .brw-dashboard-item {
        transition: none !important;
    }
}

.brw-dashboard-col .brw-dashboard-item:hover {
    box-shadow: 0px 10px 11px -4px rgba(var(--spy-primary-color-rgb), .56);
    color: var(--spy-primary-color);
}

.brw-dashboard-col .brw-dashboard-item svg {
    color: var(--spy-primary-color);
    transition: color .3s ease-in-out;
}

@media (prefers-reduced-motion) {
    .brw-dashboard-col .brw-dashboard-item svg {
        transition: none !important;
    }
}

.brw-dashboard-col .brw-dashboard-item:not(.disabled):active {
    background-color: var(--spy-primary-color);
}

    .brw-dashboard-col .brw-dashboard-item:not(.disabled):active,
    .brw-dashboard-col .brw-dashboard-item:not(.disabled):active svg {
        color: var(--spy-primary-bg-text-color);
    }

.brw-dashboard-col .badge-spydus {
    left: 100%;
    z-index: 1;
}

.brw-dashboard-col.brw-dashboard-col-history .brw-dashboard-item .brw-dashboard-item-body {
    font-size: 2em;
    line-height: .75em;
    color: var(--spy-primary-color);
    transition: color .3s ease-in-out;
}

@media (prefers-reduced-motion) {
    .brw-dashboard-col.brw-dashboard-col-history .brw-dashboard-item .brw-dashboard-item-body {
        transition: none !important;
    }
}

.brw-dashboard-col.brw-dashboard-col-history .brw-dashboard-item .brw-dashboard-item-body:active,
.brw-dashboard-col.brw-dashboard-col-history .brw-dashboard-item:active .brw-dashboard-item-body {
    color: var(--spy-primary-bg-text-color);
}

.card {
    border: 1px solid var(--spy-primary-color);
    border-radius: 1px;
    margin-bottom: 1rem;
    box-shadow: 1px 5px 12px -4px rgba(var(--spy-primary-color-rgb), .25)
}

    .card .card-header {
        border: none;
        border-radius: 0;
        border-bottom: 1px solid var(--spy-primary-color);
        background-color: var(--spy-primary-color);
        color: var(--spy-primary-bg-text-color);
        padding: .5rem 1rem;
    }

        .card .card-header h2,
        .card .card-header h3 {
            font-size: 1rem;
            margin-bottom: 0;
        }

    .card.card-info {
        border-color: var(--spy-info-dark-color);
        box-shadow: 1px 5px 12px -4px rgba(var(--spy-info-dark-color-rgb), .25)
    }

        .card.card-info .card-header {
            border-color: var(--spy-info-dark-color);
            background-color: var(--spy-info-dark-color);
        }

    .card.card-update {
        border-color: var(--spy-update-dark-color);
        box-shadow: 1px 5px 12px -4px rgba(var(--spy-update-dark-color-rgb), .25)
    }

        .card.card-update .card-header {
            border-color: var(--spy-update-dark-color);
            background-color: var(--spy-update-dark-color);
        }

    .card.card-success {
        border-color: var(--spy-success-dark-color);
        box-shadow: 1px 5px 12px -4px rgba(var(--spy-success-dark-color-rgb), .25)
    }

        .card.card-success .card-header {
            border-color: var(--spy-success-dark-color);
            background-color: var(--spy-success-dark-color);
        }

    .card.card-danger {
        border-color: var(--spy-danger-dark-color);
        box-shadow: 1px 5px 12px -4px rgba(var(--spy-danger-dark-color-rgb), .25)
    }

        .card.card-danger .card-header {
            border-color: var(--spy-danger-dark-color);
            background-color: var(--spy-danger-dark-color);
        }

    .card.card-warning {
        border-color: var(--spy-warning-dark-color);
        box-shadow: 1px 5px 12px -4px rgba(var(--spy-warning-dark-color-rgb), .25)
    }

        .card.card-warning .card-header {
            border-color: var(--spy-warning-dark-color);
            background-color: var(--spy-warning-dark-color);
        }

    .card .card-body ul {
        margin-bottom: 0;
    }

    .card .card-img,
    .card .card-img-top,
    .card .card-img-bottom {
        border-radius: 1px;
    }

.is-new .brw-message-text {
    font-weight: 700;
}

/* autocompleter */

ul.autocompleter-choices {
    position: absolute;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--spy-control-border-color);
    background-color: var(--spy-body-background-color);
    text-align: left;
    z-index: 50;
    overflow-x: auto;
    z-index: 1000;
}

    ul.autocompleter-choices li {
        position: relative;
        display: block;
        cursor: pointer;
        white-space: nowrap;
        padding: .25rem 1rem;
    }

        ul.autocompleter-choices li.autocompleter-selected {
            background-color: var(--spy-primary-color);
            color: var(--spy-primary-bg-text-color);
        }

/* breadcrumbs */

#breadcrumbs .breadcrumb-item,
#breadcrumbs .breadcrumb-item a,
#breadcrumbs .breadcrumb-item a:visited {
    color: var(--spy-breadcrumb-main-color);
    font-size: 1rem;
}

    #breadcrumbs .breadcrumb-item a,
    #breadcrumbs .breadcrumb-item a:visited {
        position: relative;
        text-decoration: none;
    }

    #breadcrumbs .breadcrumb-item:last-child {
        color: var(--spy-breadcrumb-hover-color);
    }

    #breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
        display: none !important;
        color: var(--spy-breadcrumb-main-color);
        font: var(--fa-font-light);
        content: '\f054';
    }

    #breadcrumbs .breadcrumb-item + .breadcrumb-item svg {
        padding-left: 5px;
        padding-right: 15px;
        transition: padding .3s ease-in-out, color .3s ease-in-out;
    }

@media (prefers-reduced-motion) {
    #breadcrumbs .breadcrumb-item + .breadcrumb-item svg {
        transition: none !important;
    }
}

#breadcrumbs .breadcrumb-item + .breadcrumb-item:hover svg {
    padding-left: 15px;
    padding-right: 5px;
    color: var(--spy-breadcrumb-hover-color);
}

#breadcrumbs .breadcrumb-item a::before,
#breadcrumbs .breadcrumb-item a:visited::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    border-radius: 4px;
    background-color: var(--spy-breadcrumb-hover-color);
    bottom: -3px;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
}

@media (prefers-reduced-motion) {
    #breadcrumbs .breadcrumb-item a::before,
    #breadcrumbs .breadcrumb-item a:visited::before {
        transition: none !important;
    }
}

#breadcrumbs .breadcrumb-item a:hover::before,
#breadcrumbs .breadcrumb-item a:visited:hover::before {
    transform-origin: left;
    transform: scaleX(1);
}

#breadcrumbs .breadcrumb-item a,
#breadcrumbs .breadcrumb-item a:visited {
    transition: color .3s ease-in-out;
}

@media (prefers-reduced-motion) {
    #breadcrumbs .breadcrumb-item a,
    #breadcrumbs .breadcrumb-item a:visited {
        transition: none !important;
    }
}

#breadcrumbs .breadcrumb-item a:hover,
#breadcrumbs .breadcrumb-item a:visited:hover {
    color: var(--spy-breadcrumb-hover-color);
}

@media (max-width: 991px) {
    #breadcrumbs > .container > .row > .col {
        padding-left: 0;
    }
}

/* buttons */

.btn {
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 2px;
    font-size: 1rem;
}

    .btn.btn-sm {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .btn:focus,
    .btn-close:focus {
        box-shadow: 0 0 0 .15rem rgba(var(--spy-primary-color-rgb),.25);
        border-color: var(--spy-primary-color);
    }

    .btn:hover,
    .btn:active,
    .btn:active:focus,
    .btn.show,
    .btn.show:hover,
    .btn.show:active,
    .btn.show:active:focus {
        border-color: var(--spy-primary-color);
    }

.btn-primary,
.btn-primary:active {
    color: var(--spy-primary-bg-text-color);
    background-color: var(--spy-primary-color);
    border-color: var(--spy-primary-color);
}

    .btn-primary:focus,
    .btn-primary:active:focus,
    .btn-primary.show,
    .btn-primary.show:focus,
    .btn-primary.show:active:focus {
        color: var(--spy-primary-bg-text-color);
        background-color: var(--spy-primary-color);
        border-color: var(--spy-primary-color);
        box-shadow: 0 0 0 .15rem rgba(var(--spy-primary-color-rgb),.25);
    }

        .btn-primary:hover,
        .btn-primary.show:hover {
            color: var(--spy-primary-hover-bg-text-color);
            background-color: var(--spy-primary-hover-color);
            border-color: var(--spy-primary-hover-color);
            box-shadow: 0 3px 4px -1px rgba(var(--spy-button-hover-shadow-color-rgb),.25);
        }

    .btn-primary.disabled,
    .btn-primary:disabled {
        color: var(--spy-primary-bg-text-color);
        background-color: var(--spy-disable-primary-color);
        border-color: var(--spy-disable-primary-color);
    }

.btn-secondary,
.btn-secondary:active {
    color: var(--spy-secondary-bg-text-color);
    background-color: var(--spy-secondary-color);
    border-color: var(--spy-secondary-color);
}

    .btn-secondary:focus,
    .btn-secondary:active:focus {
        color: var(--spy-secondary-bg-text-color);
        background-color: var(--spy-secondary-color);
        border-color: var(--spy-secondary-color);
        box-shadow: 0 0 0 .15rem rgba(var(--spy-primary-color-rgb),.25);
    }

    .btn-secondary:hover {
        color: var(--spy-secondary-hover-bg-text-color);
        background-color: var(--spy-secondary-hover-color);
        border-color: var(--spy-secondary-hover-color);
        box-shadow: 0 3px 4px -1px rgba(var(--spy-button-hover-shadow-color-rgb),.25);
    }

    .btn-secondary.disabled,
    .btn-secondary:disabled {
        color: var(--spy-primary-bg-text-color);
        background-color: var(--spy-disable-primary-color);
        border-color: var(--spy-disable-primary-color);
    }

@media (min-width: 992px) {
    .btn-outline-primary,
    .dropdown-menu .dropdown-item.btn-outline-primary {
        font-size: 1rem;
        font-weight: 400;
        color: var(--spy-primary-color);
        border: 1px solid var(--spy-primary-color);
        box-shadow: inset 0 0 0 0 var(--spy-primary-color);
        transition: color .5s ease-in-out, box-shadow .5s ease-in-out;
    }

    @media (prefers-reduced-motion) {
        .btn-outline-primary,
        .dropdown-menu .dropdown-item.btn-outline-primary {
            transition: none !important;
        }
    }

    .btn-outline-primary.btn-login,
    .dropdown-menu .dropdown-item.btn-outline-primary.btn-login {
        font-weight: 700;
    }

    .btn-outline-primary:hover,
    .dropdown-menu .dropdown-item.btn-outline-primary:hover {
        color: var(--spy-primary-bg-text-color);
        background-color: var(--spy-body-background-color);
        border-color: var(--spy-primary-hover-color);
        box-shadow: inset 300px 0 0 0 var(--spy-primary-hover-color), 0 3px 4px -1px rgba(var(--spy-button-hover-shadow-color-rgb),.25);
    }

    .btn-outline-primary.active:hover,
    .btn-outline-primary:active:hover,
    .btn-outline-primary.dropdown-toggle.show:active:hover,
    .btn-outline-primary.active,
    .btn-outline-primary.dropdown-toggle.show,
    .btn-outline-primary.dropdown-toggle.show:active,
    .btn-outline-primary:active,
    .dropdown-menu .dropdown-item.btn-outline-primary.active:hover,
    .dropdown-menu .dropdown-item.btn-outline-primary:active:hover,
    .dropdown-menu .dropdown-item.btn-outline-primary.dropdown-toggle.show:active:hover,
    .dropdown-menu .dropdown-item.btn-outline-primary.active,
    .dropdown-menu .dropdown-item.btn-outline-primary.dropdown-toggle.show,
    .dropdown-menu .dropdown-item.btn-outline-primary.dropdown-toggle.show:active,
    .dropdown-menu .dropdown-item.btn-outline-primary:active {
        color: var(--spy-primary-bg-text-color);
        background-color: var(--spy-body-background-color);
        border-color: var(--spy-primary-color);
        box-shadow: inset 200px 0 0 0 var(--spy-primary-color), 0 3px 4px -1px rgba(var(--spy-button-hover-shadow-color-rgb),.25);
    }

        .btn-outline-primary.active:focus,
        .btn-outline-primary:focus,
        .btn-outline-primary:active:focus,
        .dropdown-menu .dropdown-item.btn-outline-primary.active:focus,
        .dropdown-menu .dropdown-item.btn-outline-primary:focus,
        .dropdown-menu .dropdown-item.btn-outline-primary:active:focus {
            color: var(--spy-primary-color);
            background-color: var(--spy-body-background-color);
            border-color: var(--spy-primary-color);
            box-shadow: 0 0 0 .15rem rgba(var(--spy-primary-color-rgb),.25);
        }

        .btn-outline-primary.dropdown-toggle.show:focus,
        .btn-outline-primary.dropdown-toggle.show:active:focus,
        .btn-outline-primary:hover:focus,
        .dropdown-menu .dropdown-item.btn-outline-primary.dropdown-toggle.show:focus,
        .dropdown-menu .dropdown-item.btn-outline-primary.dropdown-toggle.show:active:focus,
        .dropdown-menu .dropdown-item.btn-outline-primary:hover:focus {
            color: var(--spy-primary-bg-text-color);
            background-color: var(--spy-body-background-color);
            border-color: var(--spy-primary-color);
            box-shadow: 0 0 0 .15rem rgba(var(--spy-primary-color-rgb),.25), inset 200px 0 0 0 var(--spy-primary-color);
        }

    .btn-outline-primary.disabled,
    .btn-outline-primary:disabled,
    .dropdown-menu .dropdown-item.btn-outline-primary.disabled,
    .dropdown-menu .dropdown-item.btn-outline-primary:disabled {
        color: var(--spy-disable-primary-color);
        background-color: var(--spy-body-background-color);
        border-color: var(--spy-disable-primary-color);
        transition: none;
    }

    @media (prefers-reduced-motion) {
        .btn-outline-primary.disabled,
        .btn-outline-primary:disabled,
        .dropdown-menu .dropdown-item.btn-outline-primary.disabled,
        .dropdown-menu .dropdown-item.btn-outline-primary:disabled {
            transition: none !important;
        }
    }

    .btn-outline-secondary,
    .dropdown-menu .dropdown-item.btn-outline-secondary {
        font-size: 1rem;
        font-weight: 400;
        color: var(--spy-secondary-color);
        border: 1px solid var(--spy-secondary-color);
        box-shadow: inset 0 0 0 0 var(--spy-secondary-color);
        transition: color .5s ease-in-out, box-shadow .5s ease-in-out;
    }

    @media (prefers-reduced-motion) {
        .btn-outline-secondary,
        .dropdown-menu .dropdown-item.btn-outline-secondary {
            transition: none !important;
        }
    }

    .btn-outline-secondary:hover,
    .dropdown-menu .dropdown-item.btn-outline-secondary:hover {
        color: var(--spy-secondary-bg-text-color);
        background-color: var(--spy-body-background-color);
        border-color: var(--spy-secondary-hover-color);
        box-shadow: inset 300px 0 0 0 var(--spy-secondary-hover-color), 0 3px 4px -1px rgba(var(--spy-button-hover-shadow-color-rgb),.25);
    }

    .btn-outline-secondary.active:hover,
    .btn-outline-secondary:active:hover,
    .btn-outline-secondary.dropdown-toggle.show:active:hover,
    .btn-outline-secondary.active,
    .btn-outline-secondary.dropdown-toggle.show,
    .btn-outline-secondary.dropdown-toggle.show:active,
    .btn-outline-secondary:active,
    .dropdown-menu .dropdown-item.btn-outline-secondary.active:hover,
    .dropdown-menu .dropdown-item.btn-outline-secondary:active:hover,
    .dropdown-menu .dropdown-item.btn-outline-secondary.dropdown-toggle.show:active:hover,
    .dropdown-menu .dropdown-item.btn-outline-secondary.active,
    .dropdown-menu .dropdown-item.btn-outline-secondary.dropdown-toggle.show,
    .dropdown-menu .dropdown-item.btn-outline-secondary.dropdown-toggle.show:active,
    .dropdown-menu .dropdown-item.btn-outline-secondary:active {
        color: var(--spy-secondary-bg-text-color);
        background-color: var(--spy-body-background-color);
        border-color: var(--spy-secondary-color);
        box-shadow: inset 300px 0 0 0 var(--spy-secondary-color), 0 3px 4px -1px rgba(var(--spy-button-hover-shadow-color-rgb),.25);
    }

        .btn-outline-secondary.active:focus,
        .btn-outline-secondary:focus,
        .btn-outline-secondary:active:focus,
        .dropdown-menu .dropdown-item.btn-outline-secondary.active:focus,
        .dropdown-menu .dropdown-item.btn-outline-secondary:focus,
        .dropdown-menu .dropdown-item.btn-outline-secondary:active:focus {
            color: var(--spy-secondary-color);
            background-color: var(--spy-body-background-color);
            border-color: var(--spy-secondary-color);
            box-shadow: 0 0 0 .15rem rgba(var(--spy-secondary-color-rgb),.25);
        }

        .btn-outline-secondary.dropdown-toggle.show:focus,
        .btn-outline-secondary.dropdown-toggle.show:active:focus,
        .btn-outline-secondary:hover:focus,
        .dropdown-menu .dropdown-item.btn-outline-secondary.dropdown-toggle.show:focus,
        .dropdown-menu .dropdown-item.btn-outline-secondary.dropdown-toggle.show:active:focus,
        .dropdown-menu .dropdown-item.btn-outline-secondary:hover:focus {
            color: var(--spy-secondary-bg-text-color);
            background-color: var(--spy-body-background-color);
            border-color: var(--spy-secondary-color);
            box-shadow: 0 0 0 .15rem rgba(var(--spy-secondary-color-rgb),.25), inset 300px 0 0 0 var(--spy-secondary-color);
        }

    .btn-outline-secondary.disabled,
    .btn-outline-secondary:disabled,
    .dropdown-menu .dropdown-item.btn-outline-secondary.disabled,
    .dropdown-menu .dropdown-item.btn-outline-secondary:disabled {
        color: var(--spy-disable-primary-color);
        background-color: var(--spy-body-background-color);
        border-color: var(--spy-disable-primary-color);
    }

    .btn-outline-highlight-primary,
    .dropdown-menu .dropdown-item.btn-outline-highlight-primary {
        font-size: 1rem;
        font-weight: 400;
        color: var(--spy-highlight-primary-color);
        border: 1px solid var(--spy-highlight-primary-color);
        box-shadow: inset 0 0 0 0 var(--spy-highlight-primary-color);
        transition: color .5s ease-in-out, box-shadow .5s ease-in-out;
    }

    @media (prefers-reduced-motion) {
        .btn-outline-highlight-primary,
        .dropdown-menu .dropdown-item.btn-outline-highlight-primary {
            transition: none !important;
        }
    }

    .btn-outline-highlight-primary:hover,
    .dropdown-menu .dropdown-item.btn-outline-highlight-primary:hover {
        color: var(--spy-highlight-primary-bg-text-color);
        background-color: var(--spy-body-background-color);
        border-color: var(--spy-highlight-primary-hover-color);
        box-shadow: inset 300px 0 0 0 var(--spy-highlight-primary-hover-color), 0 3px 4px -1px rgba(var(--spy-button-hover-shadow-color-rgb),.25);
    }

    .btn-outline-highlight-primary.active:hover,
    .btn-outline-highlight-primary:active:hover,
    .btn-outline-highlight-primary.dropdown-toggle.show:active:hover,
    .btn-outline-highlight-primary.active,
    .btn-outline-highlight-primary.dropdown-toggle.show,
    .btn-outline-highlight-primary.dropdown-toggle.show:active,
    .btn-outline-highlight-primary:active,
    .dropdown-menu .dropdown-item.btn-outline-highlight-primary.active:hover,
    .dropdown-menu .dropdown-item.btn-outline-highlight-primary:active:hover,
    .dropdown-menu .dropdown-item.btn-outline-highlight-primary.dropdown-toggle.show:active:hover,
    .dropdown-menu .dropdown-item.btn-outline-highlight-primary.active,
    .dropdown-menu .dropdown-item.btn-outline-highlight-primary.dropdown-toggle.show,
    .dropdown-menu .dropdown-item.btn-outline-highlight-primary.dropdown-toggle.show:active,
    .dropdown-menu .dropdown-item.btn-outline-highlight-primary:active {
        color: var(--spy-highlight-primary-bg-text-color);
        background-color: var(--spy-body-background-color);
        border-color: var(--spy-highlight-primary-color);
        box-shadow: inset 300px 0 0 0 var(--spy-highlight-primary-color), 0 3px 4px -1px rgba(var(--spy-button-hover-shadow-color-rgb),.25);
    }

        .btn-outline-highlight-primary.active:focus,
        .btn-outline-highlight-primary:focus,
        .btn-outline-highlight-primary:active:focus,
        .dropdown-menu .dropdown-item.btn-outline-highlight-primary.active:focus,
        .dropdown-menu .dropdown-item.btn-outline-highlight-primary:focus,
        .dropdown-menu .dropdown-item.btn-outline-highlight-primary:active:focus {
            color: var(--spy-highlight-primary-color);
            background-color: var(--spy-body-background-color);
            border-color: var(--spy-highlight-primary-color);
            box-shadow: 0 0 0 .15rem rgba(var(--spy-secondary-color-rgb),.25);
        }

        .btn-outline-highlight-primary.dropdown-toggle.show:focus,
        .btn-outline-highlight-primary.dropdown-toggle.show:active:focus,
        .btn-outline-highlight-primary:hover:focus,
        .dropdown-menu .dropdown-item.btn-outline-highlight-primary.dropdown-toggle.show:focus,
        .dropdown-menu .dropdown-item.btn-outline-highlight-primary.dropdown-toggle.show:active:focus,
        .dropdown-menu .dropdown-item.btn-outline-highlight-primary:hover:focus {
            color: var(--spy-highlight-primary-bg-text-color);
            background-color: var(--spy-body-background-color);
            border-color: var(--spy-highlight-primary-color);
            box-shadow: 0 0 0 .15rem rgba(var(--spy-secondary-color-rgb),.25), inset 300px 0 0 0 var(--spy-highlight-primary-color);
        }

    .btn-outline-highlight-primary.disabled,
    .btn-outline-highlight-primary:disabled,
    .dropdown-menu .dropdown-item.btn-outline-highlight-primary.disabled,
    .dropdown-menu .dropdown-item.btn-outline-highlight-primary:disabled {
        color: var(--spy-disable-primary-color);
        background-color: var(--spy-body-background-color);
        border-color: var(--spy-disable-primary-color);
    }

    .btn-outline-highlight-secondary,
    .dropdown-menu .dropdown-item.btn-outline-highlight-secondary {
        font-size: 1rem;
        font-weight: 400;
        color: var(--spy-highlight-secondary-color);
        border: 1px solid var(--spy-highlight-secondary-color);
        box-shadow: inset 0 0 0 0 var(--spy-highlight-secondary-color);
        transition: color .5s ease-in-out, box-shadow .5s ease-in-out;
    }

    @media (prefers-reduced-motion) {
        .btn-outline-highlight-secondary,
        .dropdown-menu .dropdown-item.btn-outline-highlight-secondary {
            transition: none !important;
        }
    }

    .btn-outline-highlight-secondary:hover,
    .dropdown-menu .dropdown-item.btn-outline-highlight-secondary:hover {
        color: var(--spy-highlight-secondary-bg-text-color);
        background-color: var(--spy-body-background-color);
        border-color: var(--spy-highlight-secondary-hover-color);
        box-shadow: inset 300px 0 0 0 var(--spy-highlight-secondary-hover-color), 0 3px 4px -1px rgba(var(--spy-button-hover-shadow-color-rgb),.25);
    }

    .btn-outline-highlight-secondary.active:hover,
    .btn-outline-highlight-secondary:active:hover,
    .btn-outline-highlight-secondary.dropdown-toggle.show:active:hover,
    .btn-outline-highlight-secondary.active,
    .btn-outline-highlight-secondary.dropdown-toggle.show,
    .btn-outline-highlight-secondary.dropdown-toggle.show:active,
    .btn-outline-highlight-secondary:active,
    .dropdown-menu .dropdown-item.btn-outline-highlight-secondary.active:hover,
    .dropdown-menu .dropdown-item.btn-outline-highlight-secondary:active:hover,
    .dropdown-menu .dropdown-item.btn-outline-highlight-secondary.dropdown-toggle.show:active:hover,
    .dropdown-menu .dropdown-item.btn-outline-highlight-secondary.active,
    .dropdown-menu .dropdown-item.btn-outline-highlight-secondary.dropdown-toggle.show,
    .dropdown-menu .dropdown-item.btn-outline-highlight-secondary.dropdown-toggle.show:active,
    .dropdown-menu .dropdown-item.btn-outline-highlight-secondary:active {
        color: var(--spy-highlight-secondary-bg-text-color);
        background-color: var(--spy-body-background-color);
        border-color: var(--spy-highlight-secondary-color);
        box-shadow: inset 300px 0 0 0 var(--spy-highlight-secondary-color), 0 3px 4px -1px rgba(var(--spy-button-hover-shadow-color-rgb),.25);
    }

        .btn-outline-highlight-secondary.active:focus,
        .btn-outline-highlight-secondary:focus,
        .btn-outline-highlight-secondary:active:focus,
        .dropdown-menu .dropdown-item.btn-outline-highlight-secondary.active:focus,
        .dropdown-menu .dropdown-item.btn-outline-highlight-secondary:focus,
        .dropdown-menu .dropdown-item.btn-outline-highlight-secondary:active:focus {
            color: var(--spy-highlight-secondary-color);
            background-color: var(--spy-body-background-color);
            border-color: var(--spy-highlight-secondary-color);
            box-shadow: 0 0 0 .15rem rgba(var(--spy-secondary-color-rgb),.25);
        }

        .btn-outline-highlight-secondary.dropdown-toggle.show:focus,
        .btn-outline-highlight-secondary.dropdown-toggle.show:active:focus,
        .btn-outline-highlight-secondary:hover:focus,
        .dropdown-menu .dropdown-item.btn-outline-highlight-secondary.dropdown-toggle.show:focus,
        .dropdown-menu .dropdown-item.btn-outline-highlight-secondary.dropdown-toggle.show:active:focus,
        .dropdown-menu .dropdown-item.btn-outline-highlight-secondary:hover:focus {
            color: var(--spy-highlight-secondary-bg-text-color);
            background-color: var(--spy-body-background-color);
            border-color: var(--spy-highlight-secondary-color);
            box-shadow: 0 0 0 .15rem rgba(var(--spy-secondary-color-rgb),.25), inset 300px 0 0 0 var(--spy-highlight-secondary-color);
        }

    .btn-outline-highlight-secondary.disabled,
    .btn-outline-highlight-secondary:disabled,
    .dropdown-menu .dropdown-item.btn-outline-highlight-secondary.disabled,
    .dropdown-menu .dropdown-item.btn-outline-highlight-secondary:disabled {
        color: var(--spy-disable-primary-color);
        background-color: var(--spy-body-background-color);
        border-color: var(--spy-disable-primary-color);
    }
}

@media (max-width: 991px) {
    .btn-outline-primary:not(.dropdown-item) {
        font-size: 1rem;
        font-weight: 400;
        color: var(--spy-primary-color);
        border: 1px solid var(--spy-primary-color);
        box-shadow: inset 0 0 0 0 var(--spy-primary-color);
        transition: color .5s ease-in-out, box-shadow .5s ease-in-out;
    }

    @media (prefers-reduced-motion) {
        .btn-outline-primary:not(.dropdown-item) {
            transition: none !important;
        }
    }

    .btn-outline-primary:not(.dropdown-item).btn-login {
        color: var(--spy-small-text-color);
        font-weight: 700;
    }

    .btn-outline-primary:not(.dropdown-item):hover {
        color: var(--spy-primary-bg-text-color);
        background-color: var(--spy-body-background-color);
        border-color: var(--spy-primary-hover-color);
        box-shadow: inset 200px 0 0 0 var(--spy-primary-hover-color), 0 3px 4px -1px rgba(var(--spy-button-hover-shadow-color-rgb),.25);
    }

    .btn-outline-primary:not(.dropdown-item).active:hover,
    .btn-outline-primary:not(.dropdown-item):active:hover,
    .btn-outline-primary:not(.dropdown-item).dropdown-toggle.show:active:hover,
    .btn-outline-primary:not(.dropdown-item).active,
    .btn-outline-primary:not(.dropdown-item).dropdown-toggle.show,
    .btn-outline-primary:not(.dropdown-item).dropdown-toggle.show:active,
    .btn-outline-primary:not(.dropdown-item):active {
        color: var(--spy-primary-bg-text-color);
        background-color: var(--spy-body-background-color);
        border-color: var(--spy-primary-color);
        box-shadow: inset 200px 0 0 0 var(--spy-primary-color), 0 3px 4px -1px rgba(var(--spy-button-hover-shadow-color-rgb),.25);
    }

        .btn-outline-primary:not(.dropdown-item).active:focus,
        .btn-outline-primary:not(.dropdown-item):focus,
        .btn-outline-primary:not(.dropdown-item):active:focus {
            color: var(--spy-primary-color);
            background-color: var(--spy-body-background-color);
            border-color: var(--spy-primary-color);
            box-shadow: 0 0 0 .15rem rgba(var(--spy-primary-color-rgb),.25);
        }

        .btn-outline-primary:not(.dropdown-item).dropdown-toggle.show:focus,
        .btn-outline-primary:not(.dropdown-item).dropdown-toggle.show:active:focus,
        .btn-outline-primary:not(.dropdown-item):hover:focus {
            color: var(--spy-primary-bg-text-color);
            background-color: var(--spy-body-background-color);
            border-color: var(--spy-primary-color);
            box-shadow: 0 0 0 .15rem rgba(var(--spy-primary-color-rgb),.25), inset 200px 0 0 0 var(--spy-primary-color);
        }

    .btn-outline-primary:not(.dropdown-item).disabled,
    .btn-outline-primary:not(.dropdown-item):disabled {
        color: var(--spy-disable-primary-color);
        background-color: var(--spy-body-background-color);
        border-color: var(--spy-disable-primary-color);
    }

    .btn-outline-secondary:not(.dropdown-item) {
        font-size: 1rem;
        font-weight: 400;
        color: var(--spy-secondary-color);
        border: 1px solid var(--spy-secondary-color);
        box-shadow: inset 0 0 0 0 var(--spy-secondary-color);
        transition: color .5s ease-in-out, box-shadow .5s ease-in-out;
    }

    @media (prefers-reduced-motion) {
        .btn-outline-secondary:not(.dropdown-item) {
            transition: none !important;
        }
    }

    .btn-outline-secondary:not(.dropdown-item):hover {
        color: var(--spy-secondary-bg-text-color);
        background-color: var(--spy-body-background-color);
        border-color: var(--spy-secondary-hover-color);
        box-shadow: inset 760px 0 0 0 var(--spy-secondary-hover-color), 0 3px 4px -1px rgba(var(--spy-button-hover-shadow-color-rgb),.25);
    }

    .btn-outline-secondary:not(.dropdown-item).active:hover,
    .btn-outline-secondary:not(.dropdown-item):active:hover,
    .btn-outline-secondary:not(.dropdown-item).dropdown-toggle.show:active:hover,
    .btn-outline-secondary:not(.dropdown-item).active,
    .btn-outline-secondary:not(.dropdown-item).dropdown-toggle.show,
    .btn-outline-secondary:not(.dropdown-item).dropdown-toggle.show:active,
    .btn-outline-secondary:not(.dropdown-item):active {
        color: var(--spy-secondary-bg-text-color);
        background-color: var(--spy-body-background-color);
        border-color: var(--spy-secondary-color);
        box-shadow: inset 300px 0 0 0 var(--spy-secondary-color), 0 3px 4px -1px rgba(var(--spy-button-hover-shadow-color-rgb),.25);
    }

        .btn-outline-secondary:not(.dropdown-item).active:focus,
        .btn-outline-secondary:not(.dropdown-item):focus,
        .btn-outline-secondary:not(.dropdown-item):active:focus {
            color: var(--spy-secondary-color);
            background-color: var(--spy-body-background-color);
            border-color: var(--spy-secondary-color);
            box-shadow: 0 0 0 .15rem rgba(var(--spy-secondary-color-rgb),.25);
        }

        .btn-outline-secondary:not(.dropdown-item).dropdown-toggle.show:focus,
        .btn-outline-secondary:not(.dropdown-item).dropdown-toggle.show:active:focus,
        .btn-outline-secondary:not(.dropdown-item):hover:focus {
            color: var(--spy-secondary-bg-text-color);
            background-color: var(--spy-body-background-color);
            border-color: var(--spy-secondary-color);
            box-shadow: 0 0 0 .15rem rgba(var(--spy-secondary-color-rgb),.25), inset 300px 0 0 0 var(--spy-secondary-color);
        }

    .btn-outline-secondary:not(.dropdown-item).disabled,
    .btn-outline-secondary:not(.dropdown-item):disabled {
        color: var(--spy-disable-primary-color);
        background-color: var(--spy-body-background-color);
        border-color: var(--spy-disable-primary-color);
    }

    .btn-outline-highlight-primary:not(.dropdown-item) {
        font-size: 1rem;
        font-weight: 400;
        color: var(--spy-highlight-primary-color);
        border: 1px solid var(--spy-highlight-primary-color);
        box-shadow: inset 0 0 0 0 var(--spy-highlight-primary-color);
        transition: color .5s ease-in-out, box-shadow .5s ease-in-out;
    }

    @media (prefers-reduced-motion) {
        .btn-outline-highlight-primary:not(.dropdown-item) {
            transition: none !important;
        }
    }

    .btn-outline-highlight-primary:not(.dropdown-item):hover {
        color: var(--spy-highlight-primary-bg-text-color);
        background-color: var(--spy-body-background-color);
        border-color: var(--spy-highlight-primary-hover-color);
        box-shadow: inset 760px 0 0 0 var(--spy-highlight-primary-hover-color), 0 3px 4px -1px rgba(var(--spy-button-hover-shadow-color-rgb),.25);
    }

    .btn-outline-highlight-primary:not(.dropdown-item).active:hover,
    .btn-outline-highlight-primary:not(.dropdown-item):active:hover,
    .btn-outline-highlight-primary:not(.dropdown-item).dropdown-toggle.show:active:hover,
    .btn-outline-highlight-primary:not(.dropdown-item).active,
    .btn-outline-highlight-primary:not(.dropdown-item).dropdown-toggle.show,
    .btn-outline-highlight-primary:not(.dropdown-item).dropdown-toggle.show:active,
    .btn-outline-highlight-primary:not(.dropdown-item):active {
        color: var(--spy-highlight-primary-bg-text-color);
        background-color: var(--spy-body-background-color);
        border-color: var(--spy-highlight-primary-color);
        box-shadow: inset 300px 0 0 0 var(--spy-highlight-primary-color), 0 3px 4px -1px rgba(var(--spy-button-hover-shadow-color-rgb),.25);
    }

        .btn-outline-highlight-primary:not(.dropdown-item).active:focus,
        .btn-outline-highlight-primary:not(.dropdown-item):focus,
        .btn-outline-highlight-primary:not(.dropdown-item):active:focus {
            color: var(--spy-highlight-primary-color);
            background-color: var(--spy-body-background-color);
            border-color: var(--spy-highlight-primary-color);
            box-shadow: 0 0 0 .15rem rgba(var(--spy-secondary-color-rgb),.25);
        }

        .btn-outline-highlight-primary:not(.dropdown-item).dropdown-toggle.show:focus,
        .btn-outline-highlight-primary:not(.dropdown-item).dropdown-toggle.show:active:focus,
        .btn-outline-highlight-primary:not(.dropdown-item):hover:focus {
            color: var(--spy-highlight-primary-bg-text-color);
            background-color: var(--spy-body-background-color);
            border-color: var(--spy-highlight-primary-color);
            box-shadow: 0 0 0 .15rem rgba(var(--spy-secondary-color-rgb),.25), inset 300px 0 0 0 var(--spy-highlight-primary-color);
        }

    .btn-outline-highlight-primary:not(.dropdown-item).disabled,
    .btn-outline-highlight-primary:not(.dropdown-item):disabled {
        color: var(--spy-disable-primary-color);
        background-color: var(--spy-body-background-color);
        border-color: var(--spy-disable-primary-color);
    }

    .btn-outline-highlight-secondary:not(.dropdown-item) {
        font-size: 1rem;
        font-weight: 400;
        color: var(--spy-highlight-secondary-color);
        border: 1px solid var(--spy-highlight-secondary-color);
        box-shadow: inset 0 0 0 0 var(--spy-highlight-secondary-color);
        transition: color .5s ease-in-out, box-shadow .5s ease-in-out;
    }

    @media (prefers-reduced-motion) {
        .btn-outline-highlight-secondary:not(.dropdown-item) {
            transition: none !important;
        }
    }

    .btn-outline-highlight-secondary:not(.dropdown-item):hover {
        color: var(--spy-highlight-secondary-bg-text-color);
        background-color: var(--spy-body-background-color);
        border-color: var(--spy-highlight-secondary-hover-color);
        box-shadow: inset 760px 0 0 0 var(--spy-highlight-secondary-hover-color), 0 3px 4px -1px rgba(var(--spy-button-hover-shadow-color-rgb),.25);
    }

    .btn-outline-highlight-secondary:not(.dropdown-item).active:hover,
    .btn-outline-highlight-secondary:not(.dropdown-item):active:hover,
    .btn-outline-highlight-secondary:not(.dropdown-item).dropdown-toggle.show:active:hover,
    .btn-outline-highlight-secondary:not(.dropdown-item).active,
    .btn-outline-highlight-secondary:not(.dropdown-item).dropdown-toggle.show,
    .btn-outline-highlight-secondary:not(.dropdown-item).dropdown-toggle.show:active,
    .btn-outline-highlight-secondary:not(.dropdown-item):active {
        color: var(--spy-highlight-secondary-bg-text-color);
        background-color: var(--spy-body-background-color);
        border-color: var(--spy-highlight-secondary-color);
        box-shadow: inset 300px 0 0 0 var(--spy-highlight-secondary-color), 0 3px 4px -1px rgba(var(--spy-button-hover-shadow-color-rgb),.25);
    }

        .btn-outline-highlight-secondary:not(.dropdown-item).active:focus,
        .btn-outline-highlight-secondary:not(.dropdown-item):focus,
        .btn-outline-highlight-secondary:not(.dropdown-item):active:focus {
            color: var(--spy-highlight-secondary-color);
            background-color: var(--spy-body-background-color);
            border-color: var(--spy-highlight-secondary-color);
            box-shadow: 0 0 0 .15rem rgba(var(--spy-secondary-color-rgb),.25);
        }

        .btn-outline-highlight-secondary:not(.dropdown-item).dropdown-toggle.show:focus,
        .btn-outline-highlight-secondary:not(.dropdown-item).dropdown-toggle.show:active:focus,
        .btn-outline-highlight-secondary:not(.dropdown-item):hover:focus {
            color: var(--spy-highlight-secondary-bg-text-color);
            background-color: var(--spy-body-background-color);
            border-color: var(--spy-highlight-secondary-color);
            box-shadow: 0 0 0 .15rem rgba(var(--spy-secondary-color-rgb),.25), inset 300px 0 0 0 var(--spy-highlight-secondary-color);
        }

    .btn-outline-highlight-secondary:not(.dropdown-item).disabled,
    .btn-outline-highlight-secondary:not(.dropdown-item):disabled {
        color: var(--spy-disable-primary-color);
        background-color: var(--spy-body-background-color);
        border-color: var(--spy-disable-primary-color);
    }
}

.btn-outline-primary.disabled {
    transition: none;
}

.btn-login.dropdown-toggle::after,
.record-options .dropdown-toggle::after {
    content: none;
}

/* alerts */
.alert {
    font-size: 1rem;
    border-radius: 2px;
}

.alert-info {
    border-color: var(--spy-info-dark-color);
    background-color: var(--spy-info-light-color);
    color: var(--spy-info-dark-color);
}

.alert-update {
    border-color: var(--spy-update-dark-color);
    background-color: var(--spy-update-light-color);
    color: var(--spy-update-dark-color);
}

.alert-success {
    border-color: var(--spy-success-dark-color);
    background-color: var(--spy-success-light-color);
    color: var(--spy-success-dark-color);
}

.alert-danger {
    border-color: var(--spy-danger-dark-color);
    background-color: var(--spy-danger-light-color);
    color: var(--spy-danger-dark-color);
}

.alert-warning {
    border-color: var(--spy-warning-dark-color);
    background-color: var(--spy-warning-light-color);
    color: var(--spy-warning-dark-color);
}

.text-muted {
    color: var(--spy-secondary-color) !important;
}

.offcanvas-header > .svg-inline--fa {
    color: var(--spy-primary-color);
}

.badge-spydus {
    background-color: var(--spy-highlight-primary-color);
    color: var(--spy-highlight-primary-bg-text-color) !important;
}

.badge-spydus-secondary {
    background-color: var(--spy-highlight-secondary-color);
    color: var(--spy-highlight-secondary-bg-text-color) !important;
}

/* header search */
.header-main {
    padding-top: 10px;
    padding-bottom: 5px;
}

@media (max-width: 767px) {
    .header-search-container.collapse {
        display: none;
    }

        .header-search-container.collapse.show {
            display: block;
        }
}

#header-search-entry {
    border-top-left-radius: 2px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 0;
}

    #header-search-entry::placeholder {
        color: var(--spy-secondary-color);
        font-weight: 300;
    }

#header-search-option {
    border-top-left-radius: 0;
    border-top-right-radius: 2px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 2px;
    background-color: var(--spy-list-active-color);
    font-size: 1rem;
    color: var(--spy-secondary-lightbg-text-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3C!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath fill='%23565656' d='M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z'/%3E%3C/svg%3E");
}

@media (min-width: 768px) {
    #header-search-entry {
        border-right: none;
    }

    #header-search-option {
        border-left: none;
    }
}

#header-search-advanced {
    font-size: 1rem;
    color: var(--spy-secondary-lightbg-text-color);
    text-decoration: none;
    margin-right: 58px;
    padding-left: 5px;
    padding-right: 5px;
}

#header-search-submit {
    width: 46px;
}

/* set options */
@media (min-width: 992px) {
    .set-options:not(.set-options-brief) .dropdown-menu {
        display: contents;
    }
}

/* floating current savedlist */

#mylist-floating a {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    border-radius: 10rem !important;
    padding: .7rem 1rem;
    z-index: 9999;
    background-color: var(--spy-list-active-color);
    border-color: var(--spy-list-active-color);
    color: var(--spy-primary-color);
    box-shadow: inset 0 0 0 0 var(--spy-primary-color);
    transition: color .5s ease-in-out, box-shadow .5s ease-in-out;
    z-index: 1000;
}

@media (prefers-reduced-motion) {
    #mylist-floating a {
        transition: none !important;
    }
}

@media (max-width: 767px) {
    #mylist-floating a {
        bottom: calc(1rem + 50px);
    }
}

#mylist-floating a:hover {
    background-color: var(--spy-list-active-color);
    border-color: var(--spy-list-active-color);
    box-shadow: inset 60px 0 0 0 var(--spy-primary-color);
    color: var(--spy-list-active-color);
}

#mylist-floating .badge {
    position: absolute;
    top: -5px;
    left: 0;
    background-color: var(--spy-highlight-primary-color);
    color: var(--spy-highlight-primary-bg-text-color);
}

/* floating current selections */

#cursel-floating > div {
    position: fixed;
    right: 1rem;
    bottom: 5rem;
    border-radius: 10rem !important;
    padding: .7rem .8rem;
    z-index: 9999;
    background-color: var(--spy-list-active-color);
    border-color: var(--spy-list-active-color);
    color: var(--spy-primary-color);
    box-shadow: inset 0 0 0 0 var(--spy-primary-color);
    transition: color .5s ease-in-out, box-shadow .5s ease-in-out;
    z-index: 1000;
}

    #cursel-floating.mobile > div {
        bottom: 1rem;
    }

@media (prefers-reduced-motion) {
    #cursel-floating > div {
        transition: none !important;
    }
}

@media (max-width: 767px) {
    #cursel-floating > div {
        bottom: calc(5rem + 50px);
    }

    #cursel-floating.mobile > div {
        bottom: 5rem;
    }
}

#cursel-floating > div .selicon {
    display: inline;
}
#cursel-floating > div .selicon-hover{
    display: none;
    color: var(--spy-list-active-color);
}

#cursel-floating > div:hover {
    background-color: var(--spy-list-active-color);
    border-color: var(--spy-list-active-color);
    box-shadow: inset 60px 0 0 0 var(--spy-primary-color);
    color: var(--spy-list-active-color);
}

#cursel-floating > div:hover .selicon {
    display: none;
}
#cursel-floating > div:hover .selicon-hover {
    display: inline;
}

#cursel-floating .badge {
    position: absolute;
    top: -5px;
    left: 0;
    background-color: var(--spy-highlight-primary-color);
    color: var(--spy-highlight-primary-bg-text-color);
}

/* word cloud */

div.wordCloud-container {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    line-height: 2rem;
    padding-top: 2px;
}

    div.wordCloud-container a {
        --size: 4;
        --color: var(--spy-primary-color);
        color: var(--color);
        font-size: calc(var(--size) * .25rem + .5rem);
        display: block;
        padding: .125rem .25rem;
        position: relative;
        text-decoration: none;
        /*For different tones of a single color */
        opacity: calc((15 - (9 - var(--size))) / 15);
    }

    div.wordCloud-container span.wc1 a {
        --size: 1;
    }

    div.wordCloud-container span.wc2 a {
        --size: 2;
    }

    div.wordCloud-container span.wc3 a {
        --size: 3;
    }

    div.wordCloud-container span.wc4 a {
        --size: 4;
    }

    div.wordCloud-container span.wc5 a {
        --size: 5;
    }

    div.wordCloud-container span.wc6 a {
        --size: 6;
    }

    div.wordCloud-container span.wc7 a {
        --size: 7;
    }

    div.wordCloud-container span.wc8 a {
        --size: 8;
    }

    div.wordCloud-container span.wc9 a {
        --size: 9;
    }

    div.wordCloud-container span.wc10 a {
        --size: 10;
    }

    div.wordCloud-container span:nth-child(2n+1) a {
        --color: var(--spy-highlight-primary-color);
    }

    div.wordCloud-container span:nth-child(3n+1) a {
        --color: var(--spy-highlight-secondary-color);
    }

    div.wordCloud-container span:nth-child(4n+1) a {
        --color: var(--spy-body-bg-text-color);
    }

    div.wordCloud-container a:focus {
        outline: 1px dashed;
    }

    div.wordCloud-container a::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 0;
        height: 100%;
        background: var(--color);
        transform: translate(-50%, 0);
        opacity: .15;
        transition: width .25s;
    }

@media (prefers-reduced-motion) {
    div.wordCloud-container a::before {
        transition: none !important;
    }
}

div.wordCloud-container a:focus::before,
div.wordCloud-container a:hover::before {
    width: 100%;
}

/* ratings */
.rating svg[data-prefix="fas"],
.select2-container span svg[data-prefix="fas"] {
    color: var(--spy-primary-color);
}

.rating svg[data-prefix="fad"],
.select2-container span svg[data-prefix="fad"] {
    --fa-primary-color: var(--spy-primary-color);
    --fa-secondary-color: var(--spy-secondary-hover-color);
    --fa-secondary-opacity: 1.0;
}

.rating svg[data-prefix="far"],
.select2-container span svg[data-prefix="far"] {
    color: var(--spy-secondary-hover-color);
}

.select2-container--bootstrap4.select2-container--focus .select2-selection {
    border-color: var(--spy-primary-color) !important;
    box-shadow: 0 0 0 .15rem rgba(var(--spy-primary-color-rgb),.25) !important;
}

/* record format */
.card-text.recfrmt {
    font-size: 12px;
}

/* results header */
.result-header .result-header-options.result-header-options-table .btn-toolbar {
    margin: 0;
    border: 1px solid var(--spy-control-border-color);
    border-radius: 1px;
    padding-left: 5px;
    padding-right: 5px;
}

    .result-header .result-header-options.result-header-options-table .btn-toolbar > div {
        margin-top: .5rem;
        margin-bottom: .5rem;
    }

/* result records */
/* checkbox */

.form-check.checkbox-shrink {
    padding-top: calc(.375rem + 1px);
    margin-bottom: 0;
    font-size: inherit;
    line-height: 1.5;
}

.form-check-input:checked {
    border-color: var(--spy-primary-color);
    background-color: var(--spy-primary-color);
}

.form-check-input[type="checkbox"] {
    border-radius: 1px;
}

.form-check-input:focus {
    box-shadow: 0 0 0 .15rem rgba(var(--spy-primary-color-rgb),.25);
}

/* stacked tables */
.table-stacked {
    font-size: 1rem;
}

    .table-stacked > :not(:first-child) {
        border-width: 0;
    }

    .table-stacked > :not(caption) > * > * {
        border-bottom-width: 0;
    }

    .table-stacked thead,
    .table-stacked thead th {
        background-color: var(--spy-primary-color);
        border: 1px solid var(--spy-primary-color);
        color: var(--spy-primary-bg-text-color);
    }

        .table-stacked thead > tr > th {
            font-weight: 600;
        }

        .table-stacked thead > tr .form-check-input {
            margin-right: 7px;
        }

    .table-stacked > tbody > tr {
        border: 1px solid transparent;
    }

        *:not(.result-content-records):not(.recfmt-container-body) > .table-stacked > tbody > tr:hover,
        *:not(.result-content-records):not(.recfmt-container-body) > .table-stacked > tbody > tr.row-selected {
            transition: background-color .3s ease-in-out, border .3s ease-in-out;
            background-color: var(--spy-list-active-color);
            border: 1px solid var(--spy-list-active-color);
            z-index: 1;
        }

        .table-stacked > tbody > tr > td > span.d-block > a {
            display: block;
        }
		
    .table-stacked > tbody > tr > td:not(.counter-select):has(.dropdown-menu.show) {
        z-index: 1001;
    }

@media (min-width: 768px) {
    .table-stacked > tbody > tr > td:not(.counter-select):has(.dropdown-menu.show) {
        position: relative;
    }
}

@media (prefers-reduced-motion) {
    .table-stacked > tbody > tr:hover,
    .table-stacked > tbody > tr.row-selected {
        transition: none !important;
    }
}

.table-stacked .item-num {
    word-break: normal;
}

.table-stacked .form-check-input {
    border-radius: 1px;
}

@media (max-width: 767px) {
    .table-stacked thead {
        display: none;
    }

    .table-stacked > tbody > tr {
        border: 1px solid var(--spy-control-border-color);
        box-shadow: .25rem .25rem .5rem var(--spy-control-border-color);
        margin-top: 1rem !important;
        display: block;
        padding: .75rem;
        position: relative;
        z-index: 1;
    }
		.table-stacked > tbody > tr:has(.dropdown-menu.show) {
			position: relative;
			z-index: 2;
		}

        .table-stacked > tbody > tr > td.text-nowrap {
            white-space: inherit !important;
        }

    .table-stacked td {
        border: 0;
        display: block;
        position: relative;
        padding: 0 0 0 10rem;
        z-index: -1;
    }

        .table-stacked td.counter {
            float: left;
            padding-left: 0;
            z-index: 1;
        }

            .table-stacked td.counter.counter-select,
            .table-stacked td.counter.counter-noselect {
                float: none;
                margin-bottom: .5rem;
                position: absolute;
                background-color: transparent;
                top: 12px;
                left: 12px;
                right: 12px;
                z-index: 0;
            }
            
                .table-stacked td.counter.counter-select + td,
                .table-stacked td.counter.counter-noselect + td {
                    width: 90%;
                    z-index: 1;
                    background-color: transparent;
                }
				
				.table-stacked td.counter.counter-select div.form-check {
                    position: relative;
                    z-index: 2;
                }

        .table-stacked td[data-caption]:before {
            content: attr(data-caption) ":";
            display: table-cell;
            font-weight: 400;
            height: 100%;
            left: 3rem;
            margin: auto;
            position: absolute;
            vertical-align: middle;
            white-space: nowrap;
            text-align: right;
            left: 0;
            width: 9.5rem;
            color: var(--spy-breadcrumb-main-color);
        }

        /*
        .table-stacked td.counter.counter-select + td[data-caption]:before {
            padding-left: 40px
        }

        .table-stacked td.counter.counter-noselect + td[data-caption]:before {
            padding-left: 20px;
        }
        */

    .table-stacked span[data-caption]:before {
        content: attr(data-caption) ": ";
        font-weight: 700;
    }

    .table-stacked td.col-result {
        padding-left: 0;
        margin-top: .5rem;
    }
}

@media (max-width: 575px) {
    .table-stacked td {
        border: 0;
        display: block;
        position: relative;
        padding: 0 0 0 7.75rem;
    }

        .table-stacked td[data-caption]:before {
            width: 7.5rem;
        }
}

.table-stacked .item-num {
    font-size: 1rem;
    vertical-align: text-bottom;
}

.item-num:after {
    content: ".";
}

@media (max-width: 767px) {
    .table-stacked-image td {
        padding-left: 9rem;
    }

        .table-stacked-image td.col-image {
            float: left;
            padding-left: 0;
            margin-top: .125rem;
            margin-bottom: 1rem;
            z-index: 0;
        }

        .table-stacked-image td.below-image {
            clear: both;
            margin-top: .5rem;
            padding-top: .5rem;
            border-top: 1px solid var(--spy-control-border-color);
        }

        .table-stacked-image td[data-caption]:before {
            width: 7.5rem;
        }

        .table-stacked-image td.counter.counter-select + td.col-image,
        .table-stacked-image td.counter.counter-noselect + td.col-image {
            width: auto;
            margin-left: 30px;
            padding-right: 10px;
        }

        .table-stacked-image td.col-image + td {
            width: 100%;
            z-index: 999;
            background-color: transparent;
        }

    .table-stacked-image.has-options td.col-image + td {
        width: 90%;
        z-index: 999;
        background-color: transparent;
    }
}

@media (min-width: 768px) {
    .table-stacked-image td.col-image + td {
        width: 100%;
    }
}

.table-stacked td.counter-select.noselect {
    padding-top: .75rem;
}

.table-stacked h5 {
    font-size: 1rem;
}

.table-stacked .alert {
    padding: .75rem;
}

.table-stacked .record-options .btn-options {
    padding-left: .5rem;
    padding-right: .5rem;
    height: 24px;
}

    .table-stacked .record-options .btn-options:after {
        display: none !important;
        font: var(--fa-font-solid);
        content: '\f0c9';
        font-size: .75rem;
    }

    .table-stacked .record-options .btn-options.show:after {
        font: var(--fa-font-solid);
        content: '\e59b';
    }

    .table-stacked .record-options .btn-options.show svg {
        transition: all .3s ease-in-out;
    }

@media (prefers-reduced-motion) {
    .table-stacked .record-options .btn-options.show svg {
        transition: none !important;
    }
}

.table-stacked h3.card-title {
    font-size: 1rem;
}

.table-stacked .card-text {
    color: var(--spy-button-hover-shadow-color);
}

.table-stacked-image td.col-result .alert {
    margin-bottom: 0;
    border-radius: 1px;
}

.d-inline-span span.d-block {
    display: inline !important;
}

@media (max-width: 767px) {
    .d-inline-span-date span.d-block {
        display: inline !important;
    }

        .d-inline-span-date span.d-block:not(:first-child)::before {
            content: ' - ';
        }
}

/* modal */

.modal-content {
    border-radius: 2px;
}

    .modal-content .modal-header {
        border-bottom-width: 0px;
    }

    .modal-content .model-header .modal-title {
        font-size: 18px;
    }

    .modal-content .modal-body {
        padding-top: 0;
    }

    .modal-content .modal-footer {
        border-top-width: 0px;
        padding-top: 0;
        justify-content: flex-start;
    }

#alertDlg svg {
    --fa-primary-color: var(--spy-breadcrumb-hover-color);
    --fa-secondary-color: #ffff00;
    --fa-secondary-opacity: 1;
}

    #alertDlg svg path.fa-secondary {
        stroke: var(--spy-breadcrumb-hover-color);
        stroke-width: 10px;
    }

.icon-group {
    position: absolute;
    display: flex;
}

/* record format */
.recfrmt-icon {
    padding: .25rem .5rem;
    border-radius: .25rem;
    background-color: rgba(var(--spy-breadcrumb-hover-color-rgb),.5);
    color: var(--spy-body-background-color);
    z-index: 999;
    margin-right: 3px;
}

/* default book cover/image - height and width overridden by specific containers below */
.imgsc {
    position: relative;
    box-shadow: 4px 4px 5px rgba(var(--spy-breadcrumb-hover-color-rgb),.25);
    opacity: 0;
    transform: scale(0);
}

.noimgsc {
    height: var(--spy-container-image-height-medium);
    margin-left: auto;
    margin-right: auto;
    width: calc(var(--spy-container-image-height-medium) * 0.67);
    max-width: var(--spy-container-image-height-medium);
    background-color: rgba(8,62,82,1);
    line-height: 1.3rem;
    font-size: .875rem;
    box-shadow: 4px 4px 5px rgba(var(--spy-breadcrumb-hover-color-rgb),.25);
    transform: scale(1);
    transition: transform .3s ease-in-out;
}

@media (prefers-reduced-motion) {
    .noimgsc {
        transition: none !important;
    }
}

.noimgsc p {
    height: 85%;
    width: 100%;
    text-align: right;
    position: relative;
    margin-bottom: 0;
    overflow: hidden;
}

.noimgsc span {
    font-weight: bold;
    display: block;
    padding: .5rem;
}

    .noimgsc span:not(.deficon) {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100%;
    }

/* default image colours - based on length of title */

.noimgsc .bc1 {
    background-color: rgba(161,38,85,1);
    color: var(--spy-darkbg-text-color);
}

.noimgsc .bc2 {
    background-color: rgba(169,39,10,1);
    color: var(--spy-darkbg-text-color);
}

.noimgsc .bc3 {
    background-color: rgba(251,176,65,1);
    color: var(--spy-lightbg-text-color);
}

.noimgsc .bc4 {
    background-color: rgba(29,99,73,1);
    color: var(--spy-darkbg-text-color);
}

.noimgsc .bc5 {
    background-color: rgba(132,35,148,1);
    color: var(--spy-darkbg-text-color);
}

.noimgsc .bc6 {
    background-color: rgba(76,175,80,1);
    color: var(--spy-lightbg-text-color);
}

.noimgsc .bc7 {
    background-color: rgba(251,176,65,1);
    color: var(--spy-lightbg-text-color);
}

.noimgsc .bc8 {
    background-color: rgba(43,146,109,1);
    color: var(--spy-darkbg-text-color);
}

.noimgsc .bc9 {
    background-color: rgba(132,35,148,1);
    color: var(--spy-darkbg-text-color);
}

.noimgsc .bc10 {
    background-color: rgba(182,43,96,1);
    color: var(--spy-darkbg-text-color);
}

.img-loaded {
    opacity: 1;
    transform: scale(1);
    transition: opacity .15s, transform .3s ease-out;
    min-width: 0;
}

@media (prefers-reduced-motion) {
    .img-loaded {
        transition: none !important;
    }
}

/* image gallery */
.img-gallery {
    padding: 0 0 0 0;
}

.img-gallery-buttons {
    margin-top: 1rem;
}

.img-gallery-item {
    padding-top: .25rem;
    padding-bottom: .25rem;
}

    .img-gallery-item .imgsc,
    .img-gallery-item .noimgsc {
        height: var(--spy-container-image-height-medium);
        transform: scale(1);
        transition: transform .3s ease-in-out;
    }

@media (prefers-reduced-motion) {
    .img-gallery-item .imgsc,
    .img-gallery-item .noimgsc {
        transition: none !important;
    }
}

.img-gallery-item .imgsc {
    padding: 0;
}

.img-gallery-item:hover .noimgsc,
.img-gallery-item:hover .imgsc {
    transform: scale(1.1);
}

.img-gallery-item:hover .flip-card .noimgsc,
.img-gallery-item:hover .flip-card .imgsc {
    transform: scale(1);
}

/* holdings dialog */
#holdingsDlg .table-stacked > tbody > tr {
    z-index: 1;
}

/* xrecord display */

.xrecord {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--spy-control-border-color);
}

    .xrecord .card {
        margin: 0;
        padding: .5rem;
        border: 1px solid var(--spy-control-border-color);
        box-shadow: .25rem .25rem .5rem var(--spy-control-border-color);
        border-top: 0;
        display: block;
    }

        .xrecord .card:hover .noimgsc,
        .xrecord .card:hover .imgsc {
            transform: translateX(6px) translateY(4px) scale(1.1);
            transition: transform .3s ease-in-out;
        }

@media (prefers-reduced-motion) {
    .xrecord .card:hover .noimgsc,
    .xrecord .card:hover .imgsc {
        transition: none !important;
    }
}

.xrecord .card-body {
    padding-top: 0;
    padding-bottom: 0;
}

.xrecord .card-title {
    margin-bottom: 0;
    font-size: 1rem;
}

.xrecord-image {
    width: 86px;
    max-width: 86px;
}

    .xrecord-image .recfrmt-icon {
        font-size: 10px;
    }

.xrecord-image-footer {
    margin-top: .5rem;
    margin-bottom: .5rem;
    margin-left: 6px;
}

/* xthumb display */

.xthumb {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--spy-control-border-color);
    margin-bottom: 0;
}

    .xthumb.card {
        margin: 0;
        border: none;
        box-shadow: none;
        display: block;
    }

        .xthumb.card:hover .noimgsc,
        .xthumb.card:hover .imgsc {
            transform: scale(1.1);
            transition: transform .3s ease-in-out;
        }

@media (prefers-reduced-motion) {
    .xthumb.card:hover .noimgsc,
    .xthumb.card:hover .imgsc {
        transition: none !important;
    }
}

.xthumb .card-body {
    padding-top: 0;
    padding-bottom: 0;
}

.xthumb .card-title {
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 1.5;
}

.xthumb .xthumb-image {
    width: 86px;
    max-width: 86px;
}

    .xthumb .xthumb-image .recfrmt-icon {
        font-size: 10px;
    }

.xthumb .xthumb-image-footer {
    margin-top: .5rem;
    margin-bottom: .5rem;
    margin-left: 6px;
}

/* gallery container */

.gallery-container {
    padding: 0 0 0 0;
    display: flex;
}

.thumb-container {
    overflow: hidden;
    margin: 0 .5rem 0 .5rem;
    padding: 5px;
    width: auto;
    min-height: 100px;
    font-size: .875rem;
}

.thumbs {
    width: 6000px;
    left: 0;
}

.gallery-container-item {
    max-width: 160px;
    min-width: 160px;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 0;
    border-width: 0;
    padding-right: 5px;
    padding-left: 5px;
    box-shadow: none;
}

.gallery-container-item:not(:first-child) {
    margin-left: 5px;
}

    .gallery-container-item .thumblink {
        padding-top: .25rem;
        height: var(--spy-container-image-height-medium);
        display: flex;
        align-items: center;
        justify-content: center;
    }

.gallery-container-item .recfrmt-icon {
    font-size: 10px;
}

    .gallery-container-item .imgsc {
        max-height: var(--spy-container-image-height-medium);
        transform: scale(1);
        transition: transform .3s ease-in-out;
    }

@media (prefers-reduced-motion) {
    .gallery-container-item .imgsc {
        transition: none !important;
    }
}

.gallery-container-item .noimgsc {
    transform: scale(1);
    transition: transform .3s ease-in-out;
}

@media (prefers-reduced-motion) {
    .gallery-container-item .noimgsc {
        transition: none !important;
    }
}

.gallery-container-item:hover .noimgsc,
.gallery-container-item:hover .imgsc {
    transform: scale(1.1);
}

.gallery-container-item .card-body {
    padding: .5rem .5rem 0;
}

.gallery-container-item .card-footer {
    padding: 0 .5rem .5rem;
    background-color: transparent;
    border: 0;
}

.gallery-container-item .card-title,
.masonry-container-item .card-title {
    margin-bottom: 0;
    font-size: 1rem;
}

.masonry-container-item .card-title,
.masonry-container-item .card-text {
    font-size: 12px;
}

    .gallery-container-item .card-title a,
    .masonry-container-item .card-title a {
        font-weight: 500;
    }

    .gallery-container-item .card-title a,
    .gallery-container-item .card-text span.d-block,
    .masonry-container-item .flip-card .card-text span.d-block,
    .img-gallery-item .flip-card .card-text span.d-block {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        display: block;
    }

        .gallery-container-item .card-text span.d-block:hover,
        .masonry-container-item .flip-card .card-text span.d-block:hover {
            white-space: normal;
        }

.gallery-container-item .card-text span.d-block,
.masonry-container-item .card-text span.d-block,
.img-gallery-item .card-text span.d-block,
.masonry-container-item .card-text.summary,
.img-gallery-item .card-text.summary {
    color: var(--spy-secondary-lightbg-text-color);
}

.gallery-container-item .flip-card .flip-card-back > a:hover,
.masonry-container-item .flip-card .flip-card-back > a:hover,
.img-gallery-item .flip-card .flip-card-back > a:hover {
    text-decoration: none;
}

/* forward-backward buttons for gallery */
.gallery-container .fwdbkwd {
    display: flex;
    align-items: center;
}

    .gallery-container .fwdbkwd svg {
        color: var(--spy-primary-color);
        background-color: var(--spy-list-active-color);
        border-radius: 100%;
        padding: 5px;
        width: 20px;
        height: 20px;
        cursor: pointer;
        transition: color .3s ease-in-out, background-color .3s ease-in-out;
    }

@media (prefers-reduced-motion) {
    .gallery-container .fwdbkwd svg {
        transition: none !important;
    }
}

.gallery-container .fwdbkwd svg:hover {
    background-color: var(--spy-primary-color);
    color: var(--spy-list-active-color);
}

.gallery-container .card-group {
    display: flex;
}

.gallery-container .gallery-container-body {
    position: relative;
}

/* events */

/* session status */

.event-inprogress {
    font-weight: 700;
    color: rgba(14, 78, 14, 1);
}

.event-cancelled {
    font-weight: 700;
    color: rgba(255, 0, 0, 1);
}

.event-closed {
    font-weight: 700;
    color: rgba(255, 0, 0, 1);
}

.event-complete {
    font-weight: 700;
    color: rgba(255, 0, 0, 1);
}

.event-full {
    font-weight: 700;
    color: rgba(255, 0, 0, 1);
}

.event-registrationreq {
    font-weight: 700;
    color: rgba(8, 62, 82, 1);
}

.event-noregistration {
    font-weight: 700;
    color: rgba(8, 62, 82, 1);
}

.event-venueregistration {
    font-weight: 700;
    color: rgba(8, 62, 82, 1);
}

.event-fee {
    font-weight: 700;
    color: rgba(8, 62, 82, 1);
}

.event-free {
    font-weight: 700;
    color: rgba(14, 78, 14, 1);
}

.event-postponed-brief {
    font-weight: 700;
    color: rgba(255, 0, 0, 1);
}

.event-postponed-full {
    font-weight: 700;
    color: rgba(51, 204, 221, 1);
}

/* registration status */

.evreg-confirmed {
    font-weight: 700;
    color: rgba(14, 78, 14, 1);
}

.evreg-pendingpayment {
    font-weight: 700;
    color: rgba(255, 0, 0, 1);
}

.evreg-onwaitlist {
    font-weight: 700;
    color: rgba(8, 62, 82, 1);
}

.evreg-cancelled {
    font-weight: 700;
    color: rgba(255, 0, 0, 1);
}

.evreg-eventcancelled {
    font-weight: 700;
    color: rgba(255, 0, 0, 1);
}

.evreg-eventcomplete {
    font-weight: 600;
    color: rgba(88, 89, 91, 1);
}

/* Events grid */
.events-grid .card.card-event {
    border-color: var(--spy-list-active-color);
    box-shadow: 0px 12px 7px -7px rgba(var(--spy-secondary-lightbg-text-color-rgb),.25);
    border-radius: 2px;
}

    .events-grid .card.card-event .card-title a {
        font-size: 18px;
        font-weight: 600;
    }

    .events-grid .card.card-event .card-event-header-overlay,
    .events-grid .card.card-event .card-event-header {
        position: relative;
        overflow: hidden;
    }

        .events-grid .card.card-event .card-event-header-overlay .card-img-overlay {
            display: flex;
            justify-content: center;
            align-items: center;
        }

    .events-grid .card.card-event .card-img,
    .events-grid .card.card-event .card-img-top {
        transform: scale(1);
        transition: transform .3s ease-in-out;
    }

@media (prefers-reduced-motion) {
    .events-grid .card.card-event .card-img,
    .events-grid .card.card-event .card-img-top {
        transition: none !important;
    }
}

.events-grid .card.card-event:hover .card-img,
.events-grid .card.card-event:hover .card-img-top {
    transform: scale(1.1);
}

.events-grid .card.card-event .card-event-header-overlay .card-img-overlay .card-title {
    background-color: rgba(var(--spy-breadcrumb-hover-color-rgb),.75);
    color: var(--spy-darkbg-text-color);
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}

/* small image wrapper */

.image-wrapper-small {
    width: 6.25rem;
    min-width: 6.25rem;
}

    .image-wrapper-small .noimgsc {
        height: 100px;
        max-width: 5rem;
    }

        .image-wrapper-small .noimgsc span {
            font-size: .6rem;
            line-height: 1.3;
            top: 0;
        }

    .image-wrapper-small .imgsc {
        max-height: 100px;
    }

    .image-wrapper-small .recfrmt-icon {
        font-size: 10px;
    }

/* result footer */
.result-footer .result-pages {
    z-index: auto;
}

/* kendo styles */
.k-list-item.k-selected, .k-selected.k-list-optionlabel {
    color: var(--spy-primary-bg-text-color);
    background-color: var(--spy-primary-color);
}

    .k-list-item.k-selected:hover, .k-selected.k-list-optionlabel:hover, .k-list-item.k-selected.k-hover, .k-selected.k-hover.k-list-optionlabel {
        color: var(--spy-primary-hover-bg-text-color);
        background-color: var(--spy-primary-hover-color);
    }

.k-rounded-md {
    border-radius: 2px;
}

.k-chip-solid-base {
    border-color: var(--spy-list-active-color);
    color: var(--spy-body-bg-text-color);
    background-color: var(--spy-list-active-color);
}

.k-daterangepicker input.k-textbox,
.k-daterangepicker input.k-textbox:focus {
    border-radius: 1px;
}

.k-calendar {
    font-size: 1rem;
}

    .k-calendar .k-calendar-view .k-today.k-state-focused .k-link,
    .k-calendar .k-calendar-view .k-today.k-focused .k-link {
        box-shadow: inset 0 0 0 1px var(--spy-small-text-color), inset 0 0 0 .25rem rgba(var(--spy-small-text-color-rgb), .25);
    }

    .k-calendar .k-calendar-view .k-today .k-link {
        box-shadow: inset 0 0 0 1px var(--spy-small-text-color);
    }

    .k-calendar .k-calendar-td.k-state-selected .k-link,
    .k-calendar .k-calendar-td.k-selected .k-link {
        border-color: var(--spy-small-text-color);
        color: var(--spy-primary-bg-text-color);
        background-color: var(--spy-primary-color);
    }

    .k-calendar .k-calendar-td.k-state-selected:hover .k-link, .k-calendar .k-calendar-td.k-state-selected.k-state-hover .k-link,
    .k-calendar .k-calendar-td.k-selected:hover .k-link, .k-calendar .k-calendar-td.k-selected.k-state-hover .k-link {
        border-color: var(--spy-small-text-color);
        color: var(--spy-darkbg-text-color);
        background-color: var(--spy-small-text-color);
    }

    .k-calendar .k-range-start, .k-calendar .k-range-end, .k-calendar .k-range-mid {
        background-image: linear-gradient(transparent 1px, rgba(var(--spy-primary-color-rgb),.25) 1px, rgba(var(--spy-primary-color-rgb),.25) calc(100% - 1px), transparent calc(100% - 1px));
    }

.k-progressbar .k-state-selected,
.k-progressbar .k-selected {
    color: var(--spy-primary-bg-text-color);
    background-color: var(--spy-primary-color);
}

/* search forms */
.form-options legend,
.form-profile legend {
    text-align: center;
    margin-bottom: 0;
}

    .form-options legend > h2,
    .form-profile legend > h2 {
        margin-bottom: 0;
    }

.main-content-header {
    text-align: center;
}

.add-new-line {
    cursor: pointer;
    color: var(--spy-highlight-secondary-color);
}

    .add-new-line:hover {
        color: var(--spy-highlight-secondary-color);
    }

.clear-prev-line {
    cursor: pointer;
    color: var(--spy-highlight-primary-color);
}

    .clear-prev-line:hover {
        color: var(--spy-highlight-primary-color);
    }

/* Search menu */
#tabSearchMenu {
    padding-top: 0;
}

#tabSearchMenu-head h2 {
    color: var(--spy-primary-color);
}

    #tabSearchMenu-head h2 > a::before {
        display: none !important;
        font: var(--fa-font-solid);
        content: '\e0ae';
        margin-right: 4px;
    }

    #tabSearchMenu-head h2 > a svg[data-fa-pseudo-element="::before"] {
        margin-right: 8px;
    }

#navSearchFormMenu {
    box-shadow: 1px 5px 24px -4px rgba(var(--spy-secondary-lightbg-text-color-rgb), .25);
    border-radius: 1px;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-right: 0;
    padding-left: 0;
}

    #navSearchFormMenu h3:hover {
        color: var(--spy-body-bg-text-color);
        background-color: var(--spy-list-hover-color);
        transition: color .2s ease-in-out, background-color .2s ease-in-out;
    }

@media (prefers-reduced-motion) {
    #navSearchFormMenu h3:hover {
        transition: none !important;
    }
}

#navSearchFormMenu h3 > a {
    font-size: 1rem;
    color: var(--spy-body-bg-text-color);
}

    #navSearchFormMenu h3 > a::before {
        display: none !important;
        font: var(--fa-font-solid);
        content: '\f2ec';
    }

    #navSearchFormMenu h3 > a > svg {
        margin-left: .5rem;
        font-size: .75rem;
        vertical-align: baseline;
        transform: rotate(180deg);
        transition: transform .3s ease;
    }

@media (prefers-reduced-motion) {
    #navSearchFormMenu h3 > a > svg {
        transition: none !important;
    }
}

#navSearchFormMenu h3 > a.collapsed > svg {
    transform: rotate(90deg);
    transition: transform .3s ease;
}

@media (prefers-reduced-motion) {
    #navSearchFormMenu h3 > a.collapsed > svg {
        transition: none !important;
    }
}

#navSearchFormMenu h3 > a > svg {
    margin-right: 10px;
}

#navSearchFormMenu h3 {
    margin-bottom: 0;
    padding-left: 4px;
}

#navSearchFormMenu .menu-group h3 > a {
    width: 100%;
}

#navSearchFormMenu .list-group-item {
    border-radius: 0;
    border: 0 solid transparent;
    padding-left: 13px;
}

    #navSearchFormMenu .list-group-item.active {
        color: var(--spy-body-bg-text-color);
        background-color: var(--spy-list-active-color);
        border-color: var(--spy-list-active-color);
        border-left-width: 5px;
        border-left-color: var(--spy-primary-color);
        padding-left: 8px;
    }

.extsite-type h3 {
    font-size: 1.25rem;
}

/* wizard form */
.wizard-progress {
    /*width: 83%;*/
    height: 5px;
    margin-bottom: .5rem;
    padding-left: 0;
    padding-right: 0;
}

.wizard-header {
    margin-bottom: 2rem;
}

    .wizard-header .wizard-tab {
        color: var(--spy-secondary-color);
        font-size: 12px;
        font-weight: 400;
        text-align: center;
    }

        .wizard-header .wizard-tab a {
            position: relative;
            color: var(--spy-secondary-color);
            text-decoration: none;
            cursor: default;
        }

        .wizard-header .wizard-tab.active a {
            color: var(--spy-highlight-primary-color);
        }

        .wizard-header .wizard-tab.complete a {
            color: var(--spy-primary-color);
            cursor: pointer;
        }

        .wizard-header .wizard-tab a .wizard-icon:after {
            display: none !important;
            font: var(--fa-font-solid);
            content: '\f192';
            transition: all .3s ease-in-out;
        }

@media (prefers-reduced-motion) {
    .wizard-header .wizard-tab a .wizard-icon:after {
        transition: none !important;
    }
}

.wizard-header .wizard-tab a .wizard-icon {
    background-color: var(--spy-body-background-color);
    z-index: 1;
    position: absolute;
    top: -20px;
    left: calc(50% - 9px);
    transition: transform .3s ease-in-out;
    transform: scale(1);
}

@media (prefers-reduced-motion) {
    .wizard-header .wizard-tab a .wizard-icon {
        transition: none !important;
    }
}

.wizard-header .wizard-tab.complete a:hover .wizard-icon {
    transform: scale(1.2);
}

.wizard-header .wizard-tab.complete a .wizard-icon:after {
    content: '\f058';
}

.wizard-header .wizard-tab.active a .wizard-icon {
    transform: scale(1.2);
}

    .wizard-header .wizard-tab.active a .wizard-icon:after {
        content: '\e0fe';
    }

.wizard-header .wizard-progress-circular {
    width: 100px;
    height: 100px;
}

    .wizard-header .wizard-progress-circular .wizard-progress-circular-text,
    .wizard-header .wizard-progress-circular-next,
    .wizard-header .wizard-progress-circular-next-label {
        color: var(--spy-secondary-color);
        font-size: 1rem;
    }

    .wizard-header .wizard-progress-circular .wizard-progress-circular-text {
        font-size: 1.5rem !important;
    }

    .wizard-header .wizard-progress-circular svg path {
        stroke: var(--spy-primary-color);
    }

.wizard-header .wizard-progress-circular-current {
    color: var(--spy-highlight-primary-color);
    font-size: 1.5rem;
}

.wizard-form-tab {
    position: relative;
}

/* borrower registration */
.brwreg-wizard-progress {
    /*width: 83%;*/
    height: 5px;
    margin-bottom: .5rem;
    padding-left: 0;
    padding-right: 0;
}

.brwreg-wizard-header {
    margin-bottom: 2rem;
}

    .brwreg-wizard-header .brwreg-wizard-tab {
        color: var(--spy-secondary-color);
        font-size: 12px;
        font-weight: 400;
        text-align: center;
    }

        .brwreg-wizard-header .brwreg-wizard-tab a {
            position: relative;
            color: var(--spy-secondary-color);
            text-decoration: none;
            cursor: default;
        }

        .brwreg-wizard-header .brwreg-wizard-tab.active a {
            color: var(--spy-highlight-primary-color);
        }

        .brwreg-wizard-header .brwreg-wizard-tab.complete a {
            color: var(--spy-primary-color);
            cursor: pointer;
        }

        .brwreg-wizard-header .brwreg-wizard-tab a .wizard-icon:after {
            display: none !important;
            font: var(--fa-font-solid);
            content: '\f192';
            transition: all .3s ease-in-out;
        }

@media (prefers-reduced-motion) {
    .brwreg-wizard-header .brwreg-wizard-tab a .wizard-icon:after {
        transition: none !important;
    }
}

.brwreg-wizard-header .brwreg-wizard-tab a .wizard-icon {
    background-color: var(--spy-body-background-color);
    z-index: 1;
    position: absolute;
    top: -20px;
    left: calc(50% - 9px);
    transition: transform .3s ease-in-out;
    transform: scale(1);
}

@media (prefers-reduced-motion) {
    .brwreg-wizard-header .brwreg-wizard-tab a .wizard-icon {
        transition: none !important;
    }
}

.brwreg-wizard-header .brwreg-wizard-tab.complete a:hover .wizard-icon {
    transform: scale(1.2);
}

.brwreg-wizard-header .brwreg-wizard-tab.complete a .wizard-icon:after {
    content: '\f058';
}

.brwreg-wizard-header .brwreg-wizard-tab.active a .wizard-icon {
    transform: scale(1.2);
}

    .brwreg-wizard-header .brwreg-wizard-tab.active a .wizard-icon:after {
        content: '\e0fe';
    }

.brwreg-wizard-header .brwreg-wizard-progress-circular {
    width: 100px;
    height: 100px;
}

    .brwreg-wizard-header .brwreg-wizard-progress-circular .brwreg-wizard-progress-circular-text,
    .brwreg-wizard-header .brwreg-wizard-progress-circular-next,
    .brwreg-wizard-header .brwreg-wizard-progress-circular-next-label {
        color: var(--spy-secondary-color);
        font-size: 1rem;
    }

    .brwreg-wizard-header .brwreg-wizard-progress-circular .brwreg-wizard-progress-circular-text {
        font-size: 1.5rem !important;
    }

    .brwreg-wizard-header .brwreg-wizard-progress-circular svg path {
        stroke: var(--spy-primary-color);
    }

.brwreg-wizard-header .brwreg-wizard-progress-circular-current {
    color: var(--spy-highlight-primary-color);
    font-size: 1.5rem;
}

.brwreg-tab {
    position: relative;
}

.brwreg-result-icon {
    text-align: center;
}

    .brwreg-result-icon.brwreg-result-success {
        color: var(--spy-success-dark-color);
    }

    .brwreg-result-icon.brwreg-result-fail {
        color: var(--spy-danger-dark-color);
    }

/* HTML text */
.text-html {
    display: inline;
}

/* max lines */
.max-lines {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

@supports (-webkit-touch-callout: none) {
    .max-lines {
        line-height: 1.25rem;
        max-height: 4rem;
    }
}

.max-lines-1 {
    -webkit-line-clamp: 1;
}

.max-lines-2 {
    -webkit-line-clamp: 2;
}

.max-lines-3 {
    -webkit-line-clamp: 3;
}

.max-lines-4 {
    -webkit-line-clamp: 4;
}

.max-lines-5 {
    -webkit-line-clamp: 5;
}

.max-lines-6 {
    -webkit-line-clamp: 6;
}

.max-lines-7 {
    -webkit-line-clamp: 7;
}

.max-lines-8 {
    -webkit-line-clamp: 8;
}

.max-lines-9 {
    -webkit-line-clamp: 9;
}

.max-lines-10 {
    -webkit-line-clamp: 10;
}

/* general styles */

.Style1 {
    font-weight: 600;
}

.Style4 {
    color: var(--spy-danger-dark-color);
    font-weight: 700;
}

.hidden {
    display: none;
}

.bold {
    font-weight: 700;
}

.highlight {
    color: inherit;
    font-weight: inherit;
}

.g-recaptcha-init {
    padding-top: calc(.375rem + 1px);
}

.label-required:after {
    content: "*";
    font-weight: 700;
    color: var(--spy-danger-dark-color);
    display: inline-block;
    margin-left: .25rem;
}

.label-selected:after {
    content: "*";
    font-weight: 700;
    color: var(--spy-success-dark-color);
    display: inline-block;
    margin-left: .25rem;
}

.fd-caption {
    min-width: 11.25rem;
    font-weight: 600;
}

.legend-sm {
    font-size: 20px;
    font-weight: 300;
    color: var(--spy-secondary-color);
}

    .legend-sm h3 {
        font-size: inherit;
    }

.text-overflow {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: block;
}

/* Brief display */
#result-content-list {
    display: none;
}

    #result-content-list.is-active {
        display: block;
    }

#result-content-grid {
    display: none;
}

    #result-content-grid.is-active {
        display: block;
    }

.col-records-brief .sort-options {
    padding-right: 0;
}

.col-records-brief h3 {
    font-size: 1.1rem;
}

@media (min-width: 768px) {
    .col-records-brief .record-options svg {
        color: var(--spy-secondary-color);
    }
}

.change-display-buttons svg {
    font-size: 18px;
}

#button-grid-display,
#button-list-display {
    color: var(--spy-primary-color);
    padding: .25rem .5rem;
}

    #button-grid-display:disabled,
    #button-list-display:disabled {
        color: var(--spy-secondary-color);
        border-color: rgba(0,0,0,0);
    }

.search-result-header h1 {
    margin-bottom: 0;
    font-size: 1.5rem;
}

.availability-text {
    font-size: 12px;
    font-weight: 400;
    color: var(--spy-secondary-lightbg-text-color);
}

.availability-val {
    font-size: 12px;
    font-weight: 500;
    color: var(--spy-secondary-lightbg-text-color);
}

/* set options */
@media (min-width: 992px) {
    .search-result-header .dropdown-menu {
        display: contents;
    }

        .search-result-header .dropdown-menu a.dropdown-item {
            padding: 0;
            color: var(--spy-small-text-color);
        }

        .search-result-header .dropdown-menu .dropdown-item:hover {
            color: var(--spy-small-text-color);
            background-color: inherit;
            transition: none;
        }
}

/* facets */
.col-facets h2 {
    font-size: 1.1rem;
}

.col-facets h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0;
    color: var(--spy-secondary-color);
}

@media (max-width: 991px) {
    #tabFacets {
        padding: 0;
        height: 0;
        max-width: 0;
    }
}

#facets-offcanvas-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--spy-secondary-lightbg-text-color);
}

/* list display card */

.card-list {
    margin-top: 1rem;
    border: 1px solid var(--spy-control-border-color);
    box-shadow: .25rem .25rem .5rem var(--spy-control-border-color);
    transition: box-shadow .3s ease-in-out;
    display: block;
}

    .card-list.row-selected {
        box-shadow: .25rem .25rem .5rem var(--spy-primary-color);
        transition: box-shadow .3s ease-in-out;
    }

    .card-list:hover .noimgsc,
    .card-list:hover .imgsc {
        transform: translateX(6px) translateY(4px) scale(1.1);
        transition: transform .3s ease-in-out;
    }

@media (prefers-reduced-motion) {
    .card-list,
    .card-list.row-selected {
        transition: none !important;
    }

    .card-list:hover .noimgsc,
    .card-list:hover .imgsc {
        transition: none !important;
    }
}

.card-list-image {
    width: 126px;
    max-width: 126px;
}

@media (max-width: 575px) {
    .card-list-image {
        width: 100%;
        max-width: none;
    }

        .card-list-image img {
            width: 126px;
        }
}

.card-list-image-header .is-checked {
    background-color: inherit;
    border: none;
}

.card-list-image-body {
    margin-top: .25rem;
    margin-bottom: .25rem;
    margin-left: 6px;
}

    .card-list-image-body a:hover {
        text-decoration: none;
    }

.card-list-image-footer {
    margin-top: .5rem;
    margin-bottom: .5rem;
    margin-left: 6px;
}

.card-list-buttons {
    margin-bottom: .5rem;
    margin-right: 1rem;
}

    .card-list-buttons .btn {
        padding: .25rem .5rem;
    }

.card-list .card-body {
    padding: 0 1rem .5rem 1.25rem;
    overflow: hidden;
}

.card-list .card-title {
    margin-bottom: 0;
}

.card-list .summary {
    margin-top: 1rem;
    font-size: .875rem;
    display: none;
}

.card-list .card-list-header-message {
    margin-bottom: .25rem;
    padding-left: 1.25rem;
}

.card-list .card-list-buttons .record-options svg {
    color: var(--spy-primary-color);
}

@media (min-width: 768px) {
    .card-list .summary {
        display: block;
    }
}

/* grid display card */

.col-grid {
    margin-bottom: 1rem;
}

.card-grid {
    border: 1px solid var(--spy-control-border-color);
    box-shadow: .25rem .25rem .5rem var(--spy-control-border-color);
    height: 100%;
}

    .card-grid:hover .noimgsc,
    .card-grid:hover .imgsc {
        transform: scale(1.1);
        transition: transform .3s ease-in-out;
    }

@media (prefers-reduced-motion) {
    .card-grid:hover .noimgsc,
    .card-grid:hover .imgsc {
        transition: none !important;
    }
}

.card-grid-image-header .is-checked {
    background-color: inherit;
    border: none;
}

.card-grid-buttons .btn-bookmark,
.card-grid-buttons .btn-like,
.card-grid-buttons .btn-dislike {
    padding-left: .5rem;
    padding-right: .5rem;
    line-height: 1.25;
}

.card-grid-image-body {
    margin-top: .25rem;
    height: var(--spy-container-image-height-medium);
    min-height: 150px;
}

    .card-grid-image-body .recfrmt-icon {
        margin-left: .25rem;
    }

    .card-grid-image-body .imgsc {
        max-height: var(--spy-container-image-height-medium);
    }

    .card-grid-image-body a:hover {
        text-decoration: none;
    }

.card-grid .card-body {
    padding: .5rem;
    overflow: hidden;
}

.card-grid .card-title {
    margin-bottom: 0;
}

.form-check.form-check-brief {
    margin-top: 4px;
    margin-left: 6px;
}


/* add/remove svl bookmark */

.btn-bookmark {
    display: none;
}

    .btn-bookmark svg {
        color: var(--spy-primary-color);
    }

    .btn-bookmark.is-active {
        display: inline-block;
    }

/* Like / Dislike titles */

.btn-like,
.btn-dislike,
.btn-like:hover,
.btn-dislike:hover,
.btn-like:focus,
.btn-dislike:focus,
.btn-like svg,
.btn-dislike svg {
    color: var(--spy-primary-color);
}

    .btn-like svg,
    .btn-dislike svg {
        padding-right: .5rem;
    }

.card-quick-review .btn-like svg,
.card-quick-review .btn-dislike svg {
    padding-right: 0;
}

.btn-like::before {
    display: none !important;
    font: var(--fa-font-regular);
    content: '\f164';
}

.btn-like.is-selected::before {
    display: none !important;
    font: var(--fa-font-solid);
    content: '\f164';
}

.btn-dislike::before {
    display: none !important;
    font: var(--fa-font-regular);
    content: '\f165';
}

.btn-dislike.is-selected::before {
    display: none !important;
    font: var(--fa-font-solid);
    content: '\f165';
}

.btn-like.disabled,
.btn-dislike.disabled {
    border-color: rgba(0,0,0,0);
    pointer-events: auto;
    cursor: context-menu;
    text-decoration: none;
    color: var(--spy-secondary-color);
}

    .btn-like.disabled svg,
    .btn-dislike.disabled svg {
        color: var(--spy-secondary-color);
    }

.fd-feature .btn-like svg,
.fd-feature .btn-dislike svg {
    font-size: 1.25em;
    line-height: 0.05em;
}

/* global query */
.change-query-buttons .btn {
    color: var(--spy-primary-color);
    padding: .25rem .5rem;
}

    .change-query-buttons .btn:disabled {
        color: var(--spy-secondary-color);
    }

/* headings list */
.headlist-check.counter {
    width: 75px;
}

/* Booking screen */
.bookings-header-daytime th {
    font-weight: 400;
}

svg.bkg-selected path {
    stroke: var(--spy-success-dark-color);
    stroke-width: 30;
    fill: var(--spy-success-light-color);
}

svg.bkg-unavailable path {
    stroke: var(--spy-disable-dark-color);
    stroke-width: 30;
    fill: var(--spy-disable-light-color);
}

svg.bkg-mybooking path {
    stroke: var(--spy-highlight-primary-color);
    stroke-width: 30;
    fill: var(--spy-disable-light-color);
}

.bookings-item-title {
    font-weight: 500;
}

.bookings-item-month,
.bookings-item-day {
    border: 1px solid var(--spy-secondary-color);
    padding: .5rem;
    padding-top: 0;
}

.btn-outline-booking {
    font-size: 12px;
    padding: .5rem;
    width: 115px;
    font-weight: 400;
    color: var(--spy-breadcrumb-hover-color);
    border: 1px solid var(--spy-secondary-color);
    box-shadow: inset 0 0 0 0 var(--spy-success-light-color);
    transition: color .5s ease-in-out, box-shadow .5s ease-in-out;
}

@media (prefers-reduced-motion) {
    .btn-outline-booking {
        transition: none !important;
    }
}

.bookings-item-month .btn-outline-booking {
    width: 60px;
}

.btn-check:hover + .btn-outline-booking,
.btn-outline-booking:hover:not(.btn-blocked-booking) {
    color: var(--spy-breadcrumb-hover-color);
    border-color: var(--spy-success-dark-color);
    box-shadow: inset 200px 0 0 0 var(--spy-success-light-color), 0 3px 4px -1px rgba(var(--spy-success-dark-color-rgb),.25);
}

.btn-check:active:hover + .btn-outline-booking,
.btn-check:active + .btn-outline-booking,
.btn-outline-booking:active:hover:not(.btn-blocked-booking),
.btn-outline-booking:active:not(.btn-blocked-booking) {
    color: var(--spy-breadcrumb-hover-color);
    border-color: var(--spy-success-dark-color);
    box-shadow: inset 200px 0 0 0 var(--spy-success-light-color), 0 3px 4px -1px rgba(var(--spy-success-dark-color-rgb),.25);
}

.btn-check:focus + .btn-outline-booking,
.btn-check:active:focus + .btn-outline-booking,
.btn-outline-booking:focus:not(.btn-blocked-booking),
.btn-outline-booking:active:focus:not(.btn-blocked-booking) {
    color: var(--spy-breadcrumb-hover-color);
    border-color: var(--spy-success-dark-color);
    box-shadow: 0 0 0 .15rem rgba(var(--spy-success-dark-color-rgb),.25);
}

.btn-check:checked + .btn-outline-booking {
    color: var(--spy-success-dark-color);
    background-color: var(--spy-success-light-color);
    border-color: var(--spy-success-dark-color);
}

.btn-check:disabled + .btn-outline-booking,
.btn-outline-booking:disabled,
.btn-outline-booking.btn-blocked-booking {
    color: var(--spy-disable-dark-color);
    background-color: var(--spy-disable-light-color);
    border-color: var(--spy-disable-dark-color);
}

    .btn-check:disabled + .btn-outline-booking.booking-mybooking,
    .btn-outline-booking.booking-mybooking:disabled,
    .btn-outline-booking.btn-blocked-booking.booking-mybooking {
        color: var(--spy-highlight-primary-color);
        background-color: var(--spy-disable-light-color);
        border-color: var(--spy-highlight-primary-color);
    }


/* Event calendar */

.event-calendar-header .btn {
    padding-left: .5rem;
    padding-right: .5rem;
}

#DISPLAY_YEAR_NEXT:disabled svg, #DISPLAY_YEAR_PREV:disabled svg,
#DISPLAY_MONTH_NEXT:disabled svg, #DISPLAY_MONTH_PREV:disabled svg {
    color: grey;
}

.event-calendar-header select.form-control {
    border: none;
    font-weight: 600;
    padding-left: .5rem;
    padding-right: .5rem;
}

.event-calendar-header select.event-filter-select {
    width: auto;
}

@media (min-width: 992px) {
    .event-calendar-header select.event-filter-select {
        max-width: 150px;
    }
}

.event-calendar-view .card {
    border: none;
    box-shadow: none;
    margin-bottom: .5rem;
    padding-bottom: .5rem;
    height: 100%;
}

    .event-calendar-view .card .card-body {
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    .event-calendar-view .card .card-title {
        font-size: 12px;
        border-bottom: 1px solid var(--spy-breadcrumb-hover-color);
        margin-bottom: 0;
    }

    .event-calendar-view .card .card-text {
        padding-top: 0;
        padding-bottom: 0;
        position: relative;
        min-height: 100px;
        height: 100%;
    }

.event-calendar-day {
    font-size: 20px;
    font-weight: 500;
    top: 0;
    left: 0;
    position: absolute;
    padding: .5rem;
}

.event-calendar-view .card .event-calendar-day.has-image {
    background-color: rgba(var(--spy-breadcrumb-hover-color-rgb),.5);
    color: var(--spy-darkbg-text-color);
    z-index: 1;
}

.event-calendar-view .card.event-calendar-today .card-text {
    background-color: var(--spy-list-active-color);
}

.event-calendar-view .card.event-calendar-today .event-calendar-day.has-image {
    background-color: rgba(var(--spy-darkbg-text-color-rgb),.75);
    z-index: 1;
}

.event-calendar-view .card.event-calendar-today.event-calender-dow .card-title {
    color: var(--spy-highlight-primary-color);
}

@media (min-width: 992px) {
    .event-calendar-view .card.event-calender-dow .card-title {
        color: var(--spy-highlight-primary-color);
    }
}

.event-calendar-view .card .card-text .event-sessions-list {
    margin-top: 2.5rem;
    padding-left: .5rem;
    padding-right: .5rem;
}

@media (max-width: 991px) {
    .event-calendar-view .card .card-text .event-sessions-list {
        margin-top: 0;
        margin-left: 150px;
    }
}

.event-calendar-view .card .card-text .event-feature-image-anchor + .event-sessions-list {
    margin-top: 0;
    margin-left: 0;
}


.event-calendar-view .card .card-text .event-sessions-list span a:not(.event-session-show) {
    font-weight: 500;
}

.event-calendar-view .card .card-text .event-sessions-list span.event-feature,
.event-calendar-view .card .card-text .event-sessions-list span.event-feature a {
    font-weight: 500;
}

.event-calendar-view .card .card-text .event-sessions-list span:not(:first-child) {
    margin-top: .5rem;
}

.event-calendar-view .card .card-text .event-sessions-list .event-sessions-list-more {
    margin-top: .5rem;
}

.event-calendar-view .card .card-text .event-sessions-list .event-session-show.event-session-show-more:before {
    content: "Show more";
    padding-right: .5rem;
}

.event-calendar-view .card .card-text .event-sessions-list .event-session-show.event-session-show-more svg {
    transform: rotate(0deg);
    transition: transform .3s ease;
}

@media (prefers-reduced-motion) {
    .event-calendar-view .card .card-text .event-sessions-list .event-session-show.event-session-show-more svg {
        transition: none !important;
    }
}

.event-calendar-view .card .card-text .event-sessions-list .event-session-show.event-session-show-less:before {
    content: "Show less";
    padding-right: .5rem;
}

.event-calendar-view .card .card-text .event-sessions-list .event-session-show.event-session-show-less svg {
    transform: rotate(180deg);
    transition: transform .3s ease;
}

@media (prefers-reduced-motion) {
    .event-calendar-view .card .card-text .event-sessions-list .event-session-show.event-session-show-less svg {
        transition: none !important;
    }
}

.event-calendar-view .card.event-calendar-prevmonth .event-calendar-day,
.event-calendar-view .card.event-calendar-nextmonth .event-calendar-day {
    color: var(--spy-secondary-hover-color);
}

.event-calendar-view .card.event-calendar-today .event-calendar-day {
    color: var(--spy-primary-color);
}

.event-calendar-view .card.event-calendar-today .card-title {
    border-bottom-color: var(--spy-highlight-primary-color);
}

.event-feature-image img:not(.img-loaded) {
    margin-bottom: 1.3rem;
}

.event-feature-image .imgsc,
.event-feature-image .noimgsc {
    width: 150px;
}

.event-feature-image .imgsc {
    height: auto;
}

@media (min-width: 992px) {
    .event-feature-image .imgsc,
    .event-feature-image .noimgsc {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 991px) {
    .event-calendar-view .card:not([data-has-sessions]),
    .event-calendar-view .row:not([data-has-sessions]) {
        display: none;
    }
}

/* Session modal */
#eventsDlg .modal-body {
    padding-left: 0;
    padding-right: 0;
}

    #eventsDlg .modal-body .btn-close {
        position: absolute;
        z-index: 1;
        right: 0;
        font-size: 20px;
        padding: .5rem;
        border-radius: 0;
        background-color: rgba(var(--spy-darkbg-text-color-rgb),.5);
    }

.xevent .card {
    border: none;
    box-shadow: none;
    margin-bottom: 0;
}

    .xevent .card .card-body {
        padding-bottom: 0;
    }

        .xevent .card .card-body .card-text .recsummary,
        .xevent .card .card-body .card-text .recavailability {
            margin-top: 1rem;
        }

.xevent .xevent-image-body img {
    box-shadow: none;
}

.xevent .xevent-image-body .noimgsc {
    width: 100%;
    max-width: none;
}

/* form validation */

.form-control.is-valid, .was-validated .form-control:valid,
.form-select.is-valid, .was-validated .form-select:valid,
.k-input.is-valid, .was-validated .k-input:valid {
    border-color: var(--spy-success-dark-color);
}

    .form-control.is-valid:focus, .was-validated .form-control:valid:focus,
    .form-select.is-valid:focus, .was-validated .form-select:valid:focus,
    .k-input.is-valid:focus, .k-input.is-valid:focus-within, .was-validated .k-input:valid:focus, .was-validated .k-input:valid:focus-within {
        border-color: var(--spy-success-dark-color);
        box-shadow: 0 0 0 .15rem rgba(var(--spy-success-dark-color-rgb),.25);
    }

.form-control.is-invalid, .was-validated .form-control:invalid,
.form-select.is-invalid, .was-validated .form-select:invalid,
.k-input.is-invalid, .was-validated .k-input:invalid {
    border-color: var(--spy-danger-dark-color);
}

    .form-control.is-invalid:focus, .was-validated .form-control:invalid:focus,
    .form-select.is-invalid:focus, .was-validated .form-select:invalid:focus,
    .k-input.is-invalid:focus, .k-input.is-invalid:focus-within, .was-validated .k-input:invalid:focus, .was-validated .k-input:invalid:focus-within {
        border-color: var(--spy-danger-dark-color);
        box-shadow: 0 0 0 .15rem rgba(var(--spy-danger-dark-color-rgb),.25);
    }

.invalid-feedback {
    color: var(--spy-danger-dark-color);
}

.form-select.is-valid:not([multiple]):not([size]),
.form-select.is-valid:not([multiple])[size="1"],
.was-validated .form-select:valid:not([multiple]):not([size]),
.was-validated .form-select:valid:not([multiple])[size="1"],
.form-select.is-invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple])[size="1"],
.was-validated .form-select:invalid:not([multiple]):not([size]),
.was-validated .form-select:invalid:not([multiple])[size="1"],
.form-control.is-valid:not(.k-multiselect),
.was-validated .form-control:not(.k-multiselect):valid,
.form-control.is-invalid:not(.k-multiselect),
.was-validated .form-control:not(.k-multiselect):invalid {
    border-left-width: 3px;
    background-image: none;
}

.form-select.is-valid:not([multiple]):not([size]),
.form-select.is-valid:not([multiple])[size="1"],
.was-validated .form-select:valid:not([multiple]):not([size]),
.was-validated .form-select:valid:not([multiple])[size="1"],
.form-select.is-invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple])[size="1"],
.was-validated .form-select:invalid:not([multiple]):not([size]),
.was-validated .form-select:invalid:not([multiple])[size="1"] {
    padding-right: 2.25rem;
}

.form-control.is-valid:not(.k-multiselect),
.was-validated .form-control:not(.k-multiselect):valid,
.form-control.is-invalid:not(.k-multiselect),
.was-validated .form-control:not(.k-multiselect):invalid {
    padding-left: 10px;
    padding-right: 12px;
}

.form-control.is-valid.k-multiselect,
.was-validated .form-control.k-multiselect:valid,
.form-control.is-invalid.k-multiselect,
.was-validated .form-control.k-multiselect:invalid {
    border-left-width: 3px;
    padding-right: 0;
    background-image: none;
}

    .form-control.is-valid.k-multiselect .k-selection-multiple,
    .was-validated .form-control.k-multiselect:valid .k-selection-multiple,
    .form-control.is-invalid.k-multiselect .k-selection-multiple,
    .was-validated .form-control.k-multiselect:invalid .k-selection-multiple {
        padding-left: 0;
    }

.form-select.is-valid:not([multiple]):not([size]),
.form-select.is-valid:not([multiple])[size="1"],
.was-validated .form-select:valid:not([multiple]):not([size]),
.was-validated .form-select:valid:not([multiple])[size="1"],
.form-select.is-invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple])[size="1"],
.was-validated .form-select:invalid:not([multiple]):not([size]),
.was-validated .form-select:invalid:not([multiple])[size="1"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* icons */
span.datetime-icon:first-child:before {
    display: none !important;
    font: var(--fa-font-regular);
    content: '\f133';
}

span.location-icon:first-child:before {
    display: none !important;
    font: var(--fa-font-regular);
    content: '\f3c5';
}

span.phone-icon:first-child:before {
    display: none !important;
    font: var(--fa-font-regular);
    content: '\f095';
}

span.email-icon:first-child:before {
    display: none !important;
    font: var(--fa-font-regular);
    content: '\f0e0';
}

span.web-icon:first-child:before {
    display: none !important;
    font: var(--fa-font-regular);
    content: '\f0c1';
}

span.no-icon:first-child {
    padding-left: 1.75rem;
}

span.datetime-icon svg,
span.location-icon svg,
span.phone-icon svg,
span.email-icon svg,
span.web-icon svg {
    padding-right: .5rem;
    width: 1.25rem;
    text-align: center;
}

/* comment container */
.reviews .rating-review {
    min-width: 70px;
}

.reviews .review-icon {
    text-align: center;
}

    .reviews .review-icon svg {
        color: var(--spy-secondary-hover-bg-text-color);
        background-color: var(--spy-secondary-hover-color);
        padding: .5rem;
        border-radius: 100%;
        font-size: 1.5rem;
    }

.reviews .rating-short {
    background-color: var(--spy-primary-color);
    color: var(--spy-primary-bg-text-color);
    padding: .3rem;
    text-align: center;
    font-size: 12px;
}

    .reviews .rating-short svg {
        color: var(--spy-primary-bg-text-color);
    }

.reviews .reviewon {
    font-size: 12px;
    color: var(--spy-secondary-color);
}

.reviews .reviewtext {
    font-size: 12px;
}

.reviews a.add-review {
    color: var(--spy-highlight-primary-color)
}

.briefdispgen-item-counter {
    min-width: 50px;
}

/* Full Display */
/* Holidays */
.holidays .holiday {
    /*height: 130px;*/
    width: 150px;
    max-width: 150px;
    border: 1px solid var(--spy-control-border-color);
    color: var(--spy-body-bg-text-color);
}

    .holidays .holiday:not(:last-child) {
        margin-right: .5rem;
    }

    .holidays .holiday .holiday-date {
        font-weight: 600;
    }

/* Opening hours */
.hours .hour {
    width: 150px;
    max-width: 150px;
    border: 1px solid var(--spy-control-border-color);
    color: var(--spy-body-bg-text-color);
}

    .hours .hour:not(:last-child) {
        margin-right: .5rem;
    }

    .hours .hour .hour-day {
        background-color: var(--spy-highlight-secondary-color);
        color: var(--spy-highlight-secondary-bg-text-color);
    }

        .hours .hour .hour-day.hour-day-closed {
            background-color: var(--spy-secondary-hover-color);
            color: var(--spy-secondary-hover-bg-text-color);
        }

    .hours .hour .hour-date {
      background-color: var(--spy-primary-color);
      color: var(--spy-primary-bg-text-color);
    }

/* Location */
.loc-feature-image .noimgsc {
    margin-left: 0;
    margin-right: 0;
    max-width: unset;
    width: auto;
}

/* Event sessions */
.xevent-sessions .xevent-session {
    width: 280px;
    max-width: 280px;
}

    .xevent-sessions .xevent-session .card {
        height: 170px;
        border-color: var(--spy-highlight-secondary-hover-color);
        box-shadow: 1px 5px 12px -4px rgba(var(--spy-highlight-secondary-hover-color-rgb), .25);
    }

        .xevent-sessions .xevent-session .card .card-body,
        .xevent-sessions .xevent-session .card .card-footer {
            padding: .5rem;
        }

            .xevent-sessions .xevent-session .card .card-footer.xevent-sesssion-view {
                background-color: var(--spy-list-active-color);
            }

                .xevent-sessions .xevent-session .card .card-footer.xevent-sesssion-view a {
                    color: var(--spy-highlight-secondary-color);
                }

        .xevent-sessions .xevent-session .card .card-footer {
            border: 0;
            background-color: inherit;
        }

            .xevent-sessions .xevent-session .card .card-footer a {
                font-size: 12px;
            }

                .xevent-sessions .xevent-session .card .card-footer a:not(:first-child) {
                    margin-left: .5rem;
                }

    .xevent-sessions .xevent-session:not(:last-child) {
        margin-right: .5rem;
    }

.fd-feature .card {
    border: 0;
    box-shadow: none;
}

.fd-feature .fd-feature-image .rating {
    text-align: center;
    font-size: 20px;
}

.fd-feature .fd-feature-image .fd-savedlist-buttons {
    text-align: center;
}

.fd-feature .fd-feature-image .card-body {
    padding-top: 0;
}

@media (max-width: 768px) {
    .fd-feature .fd-feature-image.noimage .fd-feature-image-thumbnail {
        display: none;
    }

    .fd-feature .fd-feature-image .card-body {
        padding-bottom: 0;
    }

    .fd-feature .fd-feature-image.noimage .card-body * {
        text-align: left;
    }
}

.fd-feature .fd-feature-image-thumbnail {
    padding: 0;
    padding-bottom: 1rem;
}

@media (max-width: 768px) {
    .fd-feature .fd-feature-image-thumbnail .imgsc {
        max-height: 200px;
    }
}

@media (min-width: 769px) {
    .fd-feature .fd-feature-image-thumbnail .imgsc {
        width: 100%;
    }
}

.fd-feature .fd-feature-image-thumbnail .noimgsc {
    width: 100%;
    max-width: 100%;
    height: 200px;
    max-height: 200px;
}

.fd-feature .fd-availability .card-body {
    padding-top: 0;
}

.fd-feature .fd-availability .fd-availability-buttons a.btn:not(:last-child) {
    margin-right: .5rem;
}

.fd-feature .fd-feature-text .card-text.recfrmt {
    font-size: 12px;
}

    .fd-feature .fd-feature-text .card-text.recfrmt svg {
        padding-right: .5rem;
        width: 1.25rem;
        text-align: center;
        margin-right: 0 !important;
    }

.fd-recinfo .tab-container {
    box-shadow: none;
}

@media (max-width: 991px) {
    .fd-recinfo .tab-container {
        padding-left: 0;
        padding-right: 0;
    }
}

    .fd-recinfo .tab-container.show-box-shadow {
        box-shadow: 1px 5px 24px -4px rgba(var(--spy-secondary-lightbg-text-color-rgb), .25);
    }

#imageViewer {
    height: 200px;
}

@media (min-width: 769px) {
    #imageViewer {
        height: 400px;
    }
}

@media (min-width: 577px) {
    #shareDlg .modal-dialog {
        max-width: fit-content;
    }
}

/* Record formats tab */
.card-body.card-body-tabs {
    overflow: unset;
}

    .card-body.card-body-tabs .nav-link {
        color: var(--spy-primary-color);
    }

    .card-body.card-body-tabs .nav {
        border-bottom: 1px solid var(--spy-control-border-color);
    }

    .card-body.card-body-tabs .nav-link.active {
        background-color: transparent;
        color: var(--spy-highlight-primary-color);
        border-bottom: 2px solid var(--spy-highlight-primary-color);
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    .card-body.card-body-tabs .tab-content a.tab-pane-url-toggle::after {
        display: none !important;
        font: var(--fa-font-regular);
        content: '\f077';
    }

    .card-body.card-body-tabs .tab-content a.tab-pane-url-toggle svg[data-fa-pseudo-element='::after'] {
        transform: rotate(0);
        transition: transform .5s ease;
    }

@media (prefers-reduced-motion) {
    .card-body.card-body-tabs .tab-content a.tab-pane-url-toggle svg[data-fa-pseudo-element='::after'] {
        transition: none !important;
    }
}

.card-body.card-body-tabs .tab-content a.tab-pane-url-toggle.collapsed svg[data-fa-pseudo-element='::after'] {
    transform: rotate(180deg);
}

@media (max-width: 767px) {
    .card-body.card-body-tabs .recfmt-container-body .table-stacked td {
        padding: 0 0 0 5.25rem;
    }

        .card-body.card-body-tabs .recfmt-container-body .table-stacked td[data-caption]:before {
            width: 5rem;
        }

        .card-body.card-body-tabs .recfmt-container-body .table-stacked td.counter.counter-noselect + td[data-caption]:before {
            padding-left: 0;
        }
}

#pdfViewer .k-viewer-pager-input {
    width: 50px;
}

.strike-through {
  text-decoration: line-through;
}

.record-options {
    z-index: 1000;
}

.login-forgot a,
.login-register a {
    font-weight: 500;
}

.svl-containers {
    margin-top: 1rem;
}

.svl-active-text {
    color: var(--spy-info-dark-color);
}

.text-wrap {
    word-break: auto-phrase;
}