/* all mobile styles and/or styles that are unaffected by size (ex. colors, fonts, etc) */

header {
    position: relative;
    width: 100%;
    z-index: 30;
}

body {
    background-color: #ccc;
    /*background-color: #222222;*/
}

.layoutContainer {/*max-width:1440px;*/background-color:#fff; padding:0}


main {
    display: flex;
    height: 100%;
    min-height: calc(100vh - 215px);
}

/* hide blazor reconnect to server modal */
#components-reconnect-modal {
    display: none !important;
}

.touch-device > main {
    min-height: unset;
}

div:focus-visible {
    outline:none;
}

h1, h2, h4, h5, h6 {
    text-transform: capitalize;
}

h2 {
    font-size: 2.25rem;
}

h3 {
    text-transform: uppercase;
}

.container-fluid {
    padding: 0;
}

/* set padding for most pages in addition to container-fluid */
.section-padding {
    padding: 2rem;
}

.hide, .hidden {
    display: none;
}

#preloader {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card {
    border: 1px solid var(--dmns-gray);
}

.spinner-wrapper {
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

.heading-font {
    font-family: var(--dmns-heading-font);
    letter-spacing: .03rem;
}

.fc-dmns-green {
    color: var(--dmns-green);
}

.fc-dmns-red {
    color: var(--dmns-red);
}

.confirmation-alert {
    border: 5px solid var(--dmns-green);
    border-radius: .5rem;
}

.confirmation-alert-inner {
    border-radius: .25rem;
}

/* Styling popovers to match tooltip style */
.popover {
    --bs-popover-bg: #000000;
}

.popover-body {
    color: white;
}

/* #region Popup Alerts */
.popup-alert-success {
    border: 5px solid var(--dmns-green);
    border-radius: .25rem;
    background-color: #ffffff;
}

.popup-alert-error {
    border: 5px solid var(--dmns-red);
    border-radius: .25rem;
    background-color: #ffffff;
}

.popup-alert-action {
    border: 5px solid var(--dmns-orange);
    border-radius: .25rem;
    background-color: #ffffff;
}

.popup-alert-info {
    border: 5px solid var(--dmns-blue);
    border-radius: .25rem;
    background-color: #ffffff;
}
/* #endregion Popup Alerts */

/* #region Buttons */

/* #region Generic Buttons */
.cta-button {
    border-radius: .25rem;
    border: 1px solid var(--dmns-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .75rem 2rem;
    transition: transform ease-in .1s;
    letter-spacing: .03rem;
    text-decoration: none;
}

.buy-reserve {
    font-family: var(--dmns-heading-font);
    text-transform: uppercase;
    font-weight: bold;
    background: var(--dmns-green);
    color: black;
}

    .buy-reserve:hover, .buy-reserve:focus, .buy-reserve:active {
        background-color: var(--dmns-green-hover);
        color: #FFFFFF;
        border: 1px solid var(--dmns-gray);
        transition: background-color .3s;
    }

.read-learn {
    font-family: var(--dmns-heading-font);
    text-transform: uppercase;
    font-weight: bold;
    color: black;
    background-color: var(--dmns-corporate-blue);
}

    .read-learn:hover, read-learn:focus, .read-learn:active {
        background-color: var(--dmns-blue-hover);
/*        border: 2px solid #000000;*/
        color: #FFFFFF;
        transition: background-color .3s;
    }

/*.read-learn-dark {
    background-color: var(--dmns-corporate-blue);
    border: 2px solid #000000;
    font-family: var(--dmns-heading-font);
    text-transform: uppercase;
    font-weight: bold;
    color: black;
}

    .read-learn-dark:hover, .read-learn-dark:focus {
        background-color: #66cce8;
        border: 2px solid black;
        color: black;
        transition: background-color .3s;
    }*/

.read-learn-optional {
    border: 1px solid var(--dmns-gray);
    border-radius: .25rem;
}

    .read-learn-optional:hover, .read-learn-optional:active, .read-learn-optional:focus {
        border-color: #009CEB; /* accessible version of var(--dmns-blue) */
        color: #007AB8;
    }

.action-btn-solid {
    background-color: var(--dmns-orange);
    font-family: var(--dmns-heading-font);
    font-weight: bold;
    text-transform: uppercase;
}

    .action-btn-solid:hover {
        background-color: var(--dmns-orange-hover);
        color: white;
    }

.action-btn {
    border: 1px solid var(--dmns-gray);
    border-radius: .25rem;
    background-color: #ffffff;
}

    .action-btn:hover {
        background-color: var(--dmns-orange);
        border: 1px solid var(--dmns-gray);
    }

    .action-btn:disabled {
        border-color: var(--dmns-gray);
        pointer-events: none;
    }

.apply-button {
    background-color: white;
    border: 1px solid #000000;
}

    .apply-button:hover {
        background-color: var(--dmns-green);
        color: white;
    }

.icon-btn:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}

.search-btn {
    background-color: var(--dmns-orange);
    border: 1px solid var(--dmns-gray);
}

    .search-btn:hover {
        background-color: var(--dmns-orange);
        border: 1px solid var(--dmns-gray);
    }

/*  Potential for dark mode  
    .cta-button:focus {
        border: 2px solid var(--dmns-blue);
        border: 1px solid white;
        color: black;

    }*/

.camp-graph-button {
    border: 1px solid var(--dmns-gray);
    border-radius: .25rem;
    padding: .5rem .0rem;
}

.member-update-required-btn {
    background-color: var(--dmns-red);
    color: white;
    font-family: var(--dmns-heading-font);
    font-weight: bold;
    margin-top: .5rem;
    text-transform: uppercase;
    width: 100%;
}

    .member-update-required-btn:hover {
        background-color: var(--dmns-red-hover);
        color: white;
    }

/* #endregion Generic Buttons */

/* Cart Icon in Navbar links to offcanvas */
.cart-trigger-btn {
    color: #424242;
    font-size: 1.45rem;
    background: transparent;
    border: none;
}

/* #region Pricing Table */
.toggle-button {
    font-family: var(--dmns-heading-font);
    border: 1px solid black;
}

.toggle-button.active {
    background-color: var(--dmns-corporate-blue);

}

.toggle-button:hover:not(.active) {
    background: #fafafa;
    border: 1px solid #000000 !important;
}

.renew-select {
    border-radius: .25rem;
    border: 2px solid #000000;
    margin: .25rem 0;
    transition: transform ease-in .1s;
    width: auto;
    --bs-btn-active-bg: var(--dmns-corporate-blue);
    --bs-btn-active-color: white;
    font-family: var(--dmns-heading-font);
}
    .renew-select:hover {
        box-shadow: 0 0 20px var(--dmns-corporate-blue);
    }
/* #endregion Pricing Table */

/* #region Webstore Buttons */
.productSelectButton, .addToCartButton {
    background-color: var(--dmns-green);
    border: 1px solid var(--dmns-gray);
    color: #000000;
    border-radius: .25rem;
    font-size: 1.2rem;
}

    .productSelectButton:hover, .addToCartButton:hover {
        background-color: var(--dmns-green-hover);
        color: #FFFFFF;
        border: 1px solid var(--dmns-gray);
    }

    .productSelectButton:disabled, .addToCartButton:disabled {
        border-color: var(--dmns-gray);
    }


.container.product-buttons {
    max-width: 85%;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 15px 15px 0 15px;
    margin-bottom: 40px;
}

    .container.product-buttons .addToCartButton {
        width: 80%
    } 

.wizard-btn {
    background-color: var(--dmns-orange);
    border: 1px solid var(--dmns-gray);
    color: #000000;
    border-radius: .25rem;
    padding: .5rem 0;
    margin: 1rem 0;
    width: 100%;
}

    .wizard-btn:hover {
        background-color: #F6A446;
        color: #000000;
        border: 2px solid #000000;
        box-shadow: 0 0 20px #f6a446;
    }

    .wizard-btn:focus {
        background-color: #F6A446;
        color: #000000;
        border: 2px solid #000000;
        box-shadow: 0 0 20px #f6a446;
    }

#autoRenewalSelection .form-check:has(.form-check-input:checked[type=radio]) {
    background-color: var(--dmns-corporate-blue);
}

.productBackButton, .productBackButton:hover {
    background: transparent;
    border: none;
    /*color: white;*/
    font-size: 2.5rem;
    padding: 0;
    color: #424242;
    border: 2px solid #424242;
    width: 64px;
    veritcal-align: center;
    border-radius: 50%;
}

    .productBackButton:hover {
        color: var(--dmns-green);
        background:#424242
    }


    .productBackButton .hx-icon.bi.bi-x-lg {
        color: #424242
    }

    .add-roster-form-btn {
        border: 2px solid #000000;
        border-radius: .25rem;
    }

    .add-roster-form-btn:hover,
    .add-roster-form-btn:active,
    .add-roster-form-btn:focus {
        border-color: var(--dmns-orange);
        color: var(--dmns-orange);
    }

    .add-roster-form-btn .spinner-border-sm {
        --bs-spinner-width: 1.75rem;
        --bs-spinner-height: 1.75rem;
        --bs-spinner-border-width: .25rem;
    }

.remove-roster-form-btn {
    border: 2px solid var(--dmns-red);
    color: var(--dmns-red);
    min-width: 2rem;
    max-height: 2rem;
}

    .remove-roster-form-btn:hover,
    .remove-roster-form-btn:active,
    .remove-roster-form-btn:focus {
        background-color: var(--dmns-red);
        color: #ffffff;
    }
/* #endregion Webstore Buttons */

/* Style for the row hover effect */
/* Obviously just for demo - please update me */
.row-highlight:hover,
.row-highlight.selected {
    border: solid 1px var(--dmns-orange);
    background-color: #f0f0f0;
    cursor: pointer;
}

/* #region Checkout */

.checkout-btn {
    font-family: var(--dmns-heading-font);
    text-transform: uppercase;
    font-weight: bold;
    background: var(--dmns-green);
    color: black;
    font-size: 1.5rem;
    width: 100%;
}

    .checkout-btn:hover {
        background-color: var(--dmns-green-hover);
        color: #FFFFFF;
        transition: background-color .3s;
    }

a[href="/purchase/checkout"].disabled-link {
    pointer-events: none;
    border: 1px solid var(--dmns-gray);
    background-color: #ffffff;
    color: var(--dmns-gray);
}

.purchase-select-btn {
    align-self: center;
    background-color: #ffffffa6;
    backdrop-filter: blur(5px);
    border: 2px solid #000;
    color: #000;
    display: flex;
    font-family: var(--dmns-heading-font);
    font-size: 1.5rem;
    font-weight: bold;
    padding: 1rem 1.5rem;
    width: fit-content;
}

    .purchase-select-btn:focus-visible, .purchase-select-btn:hover, .purchase-select-btn:active {
        background-color: var(--dmns-green);
        border: 2px solid #000000;
        color: #000000;
    }


#microdonation .round-up-btn {
    --bs-btn-border-width: 2px;
    --bs-btn-active-color: #000000;
    --bs-btn-border-color: #000000;
    color: black;
}

#microdonation .btn-check + .btn {
    background-color: #ffffff;
}

    #microdonation .btn-check + .btn:hover {
        background-color: var(--dmns-green);
    }

#microdonation .btn-check:checked + .btn {
    background-color: var(--dmns-green);
}
/* #endregion Checkout */



/* #endregion Buttons */

/* #region _announcementBar (Alert)*/
.alert {
    margin-bottom: 0;
}

    .alert p {
        display: inline-block;
    }

        .alert p:last-of-type {
            margin-bottom: 0;
            padding-bottom: 0;
        }
/* #endregion _announcementBar */

/* #region _headerNavigation (Navbar) */
.navbar {
    /*background: rgb(0, 0, 0, 1);*/
    background:#fafafa;
    border-bottom:1px solid #999;
    display: flex;
    padding: 0;
    justify-content: space-between;
    /* Uncomment to add border back to toggler */
    /*--bs-navbar-toggler-border-color: white;*/
}

.navbar-brand {
    border-bottom: none;
    margin: .5rem;
}

    .navbar-brand:hover {
        border-bottom: none;
    }

    .navbar-brand:focus {
        padding: .25rem;
        outline: 2px solid var(--dmns-blue);
        border-radius: .25rem;
    }

/*.navbar-collapse, .offcanvas-top {
    background: #222222;
    width: -webkit-fill-available;
    display: flex;
    //flex-direction: column-reverse;
}*/

.nav-wrapper {
    display: flex;
}

#navbarOffcanvasLg {
    width: -webkit-fill-available;
    display: flex;
    height: fit-content;
    max-height: 100vh;
}

    #navbarOffcanvasLg .offcanvas-header {
        background-color: #fafafa;
        border-bottom:1px solid #999; 
    }

    #navbarOffcanvasLg .offcanvas-title {
        flex-grow: 1;
    }

        #navbarOffcanvasLg .offcanvas-title img {
            width: 12rem;
        }

    #navbarOffcanvasLg .offcanvas-body {
        display: flex;
        flex-direction: column;
        background-color: #FFFFFF;
        padding: .5rem;
        /* background-color: #222222; */
    }

.navbar-toggler {
    margin: .5rem;
}

    .navbar-toggler:focus-visible {
        padding: .25rem;
        border: 2px solid var(--dmns-blue);
        border-radius: .25rem;
    }

.btn-close-white:focus {
    border: 2px solid var(--dmns-blue);
    border-radius: .25rem;
}

.navbar-toggler-icon {
    /*
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
*/
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28 0,0, 0, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.nav-link {
    font-family: var(--dmns-heading-font)
}

    .nav-link:focus-visible {
        border: 2px solid var(--dmns-blue);
        border-radius: .25rem;
        box-shadow: none;
    }

#offCanvasCartBadge {
    margin-top: -.5rem;
    margin-left: -.5rem;
    min-width: 1.5em;
    min-height: 1.5em;
    padding: .25rem;
    background-color: var(--dmns-red);
    font-size: .75rem;
}

.cart-timer-tooltip .tooltip-inner {
    background-color: var(--dmns-red);
}

.cart-timer-tooltip .tooltip-arrow::before {
    border-bottom-color: var(--dmns-red) !important;
}

/* #region Main Nav */

i.bi-chevron-left.expand {
    transform: scale(1.5) rotate(90deg);
    -webkit-transform: scale(1.5) rotate(90deg);
    -moz-transform: scale(1.5) rotate(90deg);
    transition: transform 0.2s ease;
    -webkit-transition: transform 0.2s ease;
    -moz-transition: transform 0.2s ease;
}

i.bi-chevron-left.contract {
    transform: scale(1.5) rotate(-90deg);
    -webkit-transform: scale(1.5) rotate(-90deg);
    -moz-transform: scale(1.5) rotate(-90deg);
    transition: transform 0.2s ease;
    -webkit-transition: transform 0.2s ease;
    -moz-transition: transform 0.2s ease;
}

.column-dropdown {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    width:100%;
}

.dropdown-item {
    /*    color: #000000;*/
    /*color: white;*/
    font-family: var(--dmns-heading-font);
    padding: 0.75rem 1rem;
    word-wrap: normal;
}

    .dropdown-item:hover {
        background-color: transparent;
        border-bottom: none;
        transform: scale(1.1);
    }

    .dropdown-item.stretched-link {
        background: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.5));
        font-size: 1rem;
    }
        .dropdown-item.stretched-link:hover {
            transform: unset;
        }

            .dropdown-item.stretched-link:hover .overlay-link.read-learn {
                background-color: var(--dmns-blue-hover);
                color: white;
            }

            .dropdown-item.stretched-link:hover .overlay-link.buy-reserve {
                background-color: var(--dmns-green-hover);
                color: white;
            }

        .dropdown-item.stretched-link:focus {
            border: 2px solid var(--dmns-blue);
            border-radius: .25rem;
        }

/* Override Bootstrap scss focus on touch-devices */
.touch-device .dropdown-item:focus {
    background-color: transparent;
    /*border: 2px solid var(--dmns-blue);*/
    color: #000000;
    /*color: white;*/
}

.dropdown-toggle {
    display: flex;
    flex-flow: row wrap-reverse;
    align-items: center;
    //height: 3.5rem;
}

    .dropdown-toggle::after {
        display: none;
    }

    .dropdown-toggle .bi-chevron-left {
        color: #000000;
        /*color: white;*/
        transform: scale(1.5);
        padding: .5rem;
        position: absolute;
        right: 0;
    }

        .dropdown-toggle .bi-chevron-left:hover {
            font-weight: bold;
        }

.dropdown-menu.show {
    background: #FFFFFF;
    /*background: #222222;*/
    border: none;
/*    border-top: 1px solid #ccc;*/
    border-radius: 0rem;
    height: auto;
    margin-top: 0;
    padding: 0;
}

.hours-address {
    align-items: center;
    /*color: white;*/
    display: flex;
    flex-direction: row;
    font-size: 0.75em;
    justify-content: space-evenly;
}

    .hours-address p {
        margin: 0;
        white-space: nowrap;
    }

.main-nav {
    margin: 0em .5em;
}

.main-nav-item {
    border-bottom: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
}

    .main-nav-item a[aria-expanded='true'] {
        border-bottom: none;
        color: #000000;
        font-weight: bold;
        /*color: var(--dmns-green);*/
    }

    .main-nav-item a[aria-expanded='false'] {
        border-bottom: none;
        color: #000000;
        /*color: white;*/
    }

.main-nav-link {
    align-items: center;
    /*color: white;*/
    display: flex;
    font-size: 1.25rem;
    justify-content: space-between;
    padding: .75rem;
}


    .main-nav-link:focus-visible {
        /*border: 2px solid var(--dmns-blue);*/
        outline: 2px solid var(--dmns-blue);
        outline-offset: -2px; /* Optional: Adjust this value to control the outline spacing */
    }

    .main-nav-link:hover {
        font-weight: bold;
    }

    .main-nav-link:visited {
        color: #000000;
        /*color: white;*/
    }

.nav-img {
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0.25rem;
    height: 12rem;
    min-width: 12rem;
    overflow: hidden;
    padding: 0;
}

.overlay-link {
    border: 2px solid transparent;
    border-radius: .25rem;
/*    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, .25);*/
    color: black;
    display: flex;
    justify-content: center;
    margin: .5rem;
    padding: .5rem;
    transform: translate(0rem, 6em);
}

.subnav-wrapper {
    margin: auto;
    margin-top: .75rem;
    padding-bottom: 1rem;
    padding-top:1rem
}

.subcolumn {
    margin: .25rem;
    max-width: 50%;
}

/* #endregion Main Nav */

/* #region Utility Nav */
.u-nav-item {
    flex-direction: row;
    padding: 0 .75rem;
}

.u-nav-link {
    align-items: center;
    color: #000000;
    /* color: white;*/
    display: flex;
    flex-direction: row;
    font-size: 1rem;
    justify-content: start;
}

    .u-nav-link:hover {
        font-weight: bold;
        /*color: white;*/
    }

    .u-nav-link .bi {
        align-content: center;
        /*color: #000000;*/
        /* color: white; */
        display: flex;
        font-size: 1.25em;
        padding-right: .5rem;
        transition: transform .2s;
    }

.unavtooltip {
    --bs-tooltip-bg: var(--bs-secondary);
}

.u-nav-icon {
    display: flex;
}

.u-nav-no-icon {
    display: flex;
    justify-content: center;
    flex-basis: 50%;
}

    .u-nav-no-icon > a {
        border-bottom: 2px solid var(--dmns-green);
        padding-bottom: 0px;
        margin: .5rem;
    }

#u-nav-1 {
    order: 4;
}

#u-nav-2 {
    order: 5;
}

#u-nav-3 {
    order: 6;
}

#u-nav-4 {
    
}

#u-nav-5 {
    order: 1;
}

#u-nav-6 {
    order: 2;
}


.utility-nav {
    justify-content: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#modalCartBadge {
    top: .25rem;
    margin-left: 1.25rem;
    min-width: 1.5em;
    min-height: 1.5em;
    padding: .25rem;
    background-color: var(--dmns-red);
    font-size: .75rem;
}

#tickets-link {
    background-color: var(--dmns-green);
    border: 2px solid #000000;
    border-radius: .25rem;
    display: flex;
    justify-content: center;
    position: relative;
    text-align: center;
    width: 100%;
    margin: .5rem;
    order: 3;
}

/*    #tickets-link a {
        margin: 0em 5em;
    }*/

    #tickets-link div {
        font-size: 1.25rem;
        margin: 0;
        text-wrap: nowrap;
    }

    #tickets-link .bi {
        /*color: black;*/
        font-size: 2em;
        margin: 0;
        padding-right: 1rem;
    }

#tickets-link > a > .bi::before {
    transform: rotate(-45deg);
}
/* #endregion Utility Nav */
/* #endregion _headerNavigation */

/* #region Google Translate Widget */
font {
    pointer-events: none;
}

#google_translate_element .goog-te-gadget {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

    #google_translate_element .goog-te-gadget div {
        width: 100%;
        text-align: center;
    }

    #google_translate_element .goog-te-gadget .goog-te-combo {
        width: 75%;
        height: 2rem;
        border: 2px solid #000000;
        border-radius: .25rem;
    }

    #google_translate_element .goog-te-gadget a {
        display: flex;
        flex-flow: row nowrap;
    }

    #google_translate_element .goog-te-gadget img {
        margin-left: .2rem;
    }
/* #endregion Google Translate Widget */

/* #region _fullScreenSlideShow (Homepage Slideshow) */

/* set position relative for pause button */
.full-screen-slideshow-wrapper {
    background-color: #000000;
    position: relative;
}

/* icon */
#play-pause-full-screen-slideshow {
    z-index: 25;
    background: transparent;
    border: none;
    color: white;
    font-size: 36px;
    height: fit-content;
    position: absolute;
    width: fit-content;
    right: 0;
    bottom: 0;
    padding: 0rem 1.4rem;
}
    /* Match next/prev arrow opacity */
    #play-pause-full-screen-slideshow .bi-pause-circle-fill {
        opacity: .75;
    }

        #play-pause-full-screen-slideshow .bi-pause-circle-fill:hover {
            opacity: 1;
        }

    #play-pause-full-screen-slideshow .bi-pause-circle-fill:focus {
        opacity: 1;
    }

/* Hide slides when they're off screen */
#full-screen-slideshow .slick-slide {
    opacity: 0;
    visibility: hidden;
}
/* Show active slide */
#full-screen-slideshow .slick-active {
    opacity: 1;
    visibility: visible;
}

/* Unset max width so image doesn't shrink behind nav */
#full-screen-slideshow img,
#full-screen-slideshow video {
    max-width: unset;
}

/* for homepage slideshow ONLY make sure everything 'slick' is 100% wide and no more than 100vh */
#full-screen-slideshow,
#full-screen-slideshow .slick-track,
#full-screen-slideshow .slick-slide,
#full-screen-slideshow .slick-slide img,
#full-screen-slideshow .slick-slide video {
    width: 100%;
    max-height: 92vh;
}

    /* both arrows */
    #full-screen-slideshow .slick-arrow:before {
        font-size: 2rem;
    }

    #full-screen-slideshow .slick-arrow {
        z-index: 10;
    }

    #full-screen-slideshow .slick-prev, #full-screen-slideshow .slick-next {
        position: absolute;
        top: 80%;
    }

    /* left arrow */
    #full-screen-slideshow .slick-prev {
        left: 1rem;
        height: 2rem;
        width: 2rem;
    }

        #full-screen-slideshow .slick-prev:focus,
        #full-screen-slideshow .slick-next:focus {
            opacity: 1;
        }
    /* right arrows */
    #full-screen-slideshow .slick-next {
        right: 1.5rem;
        height: 2rem;
        width: 2rem;
    }

    /* Text and buttons overlay */
    #full-screen-slideshow .carousel-caption {
        align-items: center;
        backdrop-filter: blur(5px);
        background: radial-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5));
        bottom: 0;
        display: flex;
        flex-direction: column;
        height: fit-content;
        left: unset;
        min-width: 100vw;
        max-width: 100vw;
        padding: 1rem 4rem 2.5rem;
        right: unset;
        width: 100%;
    }

        #full-screen-slideshow .carousel-caption .customer-message {
            font-size: 1.25rem;
        }

        #full-screen-slideshow .carousel-caption h1 {
            color: white;
            font-size: 2rem;
            font-weight: bolder;
            margin: .5rem 0rem;
        }

        #full-screen-slideshow .carousel-caption .subheading p {
            margin-bottom: .5rem;
        }

    /* center on small screens */
    #full-screen-slideshow .slick-track .slick-active {
        display: flex;
        justify-content: center;
    }

    /* Dim and align image */
    #full-screen-slideshow .slick-active img,
    #full-screen-slideshow .slick-active video {
        filter: brightness(0.8);
        max-height: 100vh;
        object-fit: cover;
        width: unset;
    }

    /* remove margin from bottom of slideshow to prevent gap */
    #full-screen-slideshow.slick-dotted.slick-slider {
        margin-bottom: 0;
    }

    /* move dots onto media */
    #full-screen-slideshow .slick-dots {
        bottom: 1rem;
    }

        #full-screen-slideshow .slick-dots li button:focus {
            border: 2px solid var(--dmns-blue);
            border-radius: 1rem;
        }

/* #endregion _fullScreenSlideShow */

/* On _fullScreenSlideShow and _bannerHeading */
.slideshow-button-wrapper {
    margin: .5rem 0rem;
}

/* #region ===== CONTENT BLOCKS ===== */


/* #region _bannerHeading (Content Pages) */
.banner-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    height: 100vh;
    justify-content: center;
    max-height: 80vh;
    max-width: 100vw;
    overflow: hidden;
    position: relative;
}

    .banner-wrapper img {
        width: 100%;
        object-fit: cover;
        aspect-ratio: 16/9;
    }
/* Full screen embed classes. See: https://codepen.io/joshorrom/pen/MWjeQXQ */
.embed-full-screen {
    position: relative;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
}

    .embed-full-screen iframe {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100vw;
        height: 100vh;
        transform: translate(-50%, -50%);
    }

@media (min-aspect-ratio: 16/9) {
    .embed-full-screen iframe {
        /*height = 100 * (9 / 16) = 56.25 */
        height: 56.25vw;
    }
}

@media (max-aspect-ratio: 16/9) {
    .embed-full-screen iframe {
        /*width = 100 / (9 / 16) = 177.777777 */
        width: 177.78vh;
    }
}

/* Half-screen embed classes*/
.embed-half-screen {
    height: 450px;
    margin: 0;
    padding: 0;
}

    .embed-half-screen iframe {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100vw;
        height: 450px;
        transform: translate(-50%, -50%);
    }

@media (max-aspect-ratio: 16/9) {
    .embed-half-screen iframe {
        /*width = 50 / (9 / 16) = 88.88 */
        width: 120vh;
    }
}

.heading-wrapper {
    align-items: center;
    backdrop-filter: blur(5px);
    background: radial-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5));
    bottom: 0rem;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    min-width: 100vw;
    max-width: 100vw;
    padding: 1rem 3rem;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 10;
}

    .heading-wrapper h1 {
        font-size: 2.5rem;
    }

    .heading-wrapper.caption-text-wrapper div {
        margin-top: .5rem;
        
    }

#play-pause-embed, #play-pause-video-file {
    z-index: 100;
    background: transparent;
    border: none;
    color: white;
    font-size: 36px;
    height: fit-content;
    position: absolute;
    width: fit-content;
    right: 0;
    bottom: 0;
}
/* #endregion _bannerHeading */


.umb-override .umb-block-grid li {
    line-height: 1.8;
}

/*  for all content cards */
.content-card {
    border: 1px solid var(--dmns-gray);
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, .1);
}

    .content-card:has(.stretched-link):hover, 
    .content-card:has(.glightbox):hover,
    .content-card:has(.video-btn):hover {
        border: 1px solid var(--dmns-gray);
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
    }

    .content-card .card-body {
        margin: 1rem;
    }

/* #region Slick Slideshows */
/* For ALL Slick sliders - Make slide focusable for accessibility */
.slick-slide:focus {
    border: 5px solid var(--dmns-blue);
    border-radius: .25rem;
}

/* indicator buttons */
.slick-dots li button:before {
    opacity: .75;
    color: #fff;
    font-size: 8px;
}

.slick-dots li.slick-active button:before {
    opacity: 1;
    color: #fff;
    font-size: 12px;
}

/* the slides */
.slick-slide {
    max-width: 100vw;
}

/* the parent */
.slick-list {
    max-width: 100vw;
}

/* #endregion Slick Slideshows */

/* #region Tables */
.content-table .table th {
    background-color: rgba(85, 156, 190, .5);
    font-family: var(--dmns-heading-font);
}

.table .bi.bi-check-lg::before, .table .bi.bi-x-lg::before {
    font-weight: 600 !important;
}

/* #endregion Tables */

/* #region _cardGalleryScroller (Event Scroller for now) */
.cardGalleryControls {
    margin: auto;
    max-width: 84vw;
    padding-bottom: 1.5rem;
}

    .cardGalleryControls .card {
        /*background-color: #CCCCCC;*/
        /*background-color: #3B3A39;*/
        /*border: none;*/
        display: flex;
        margin: 0 15px;
        /*color: white;*/
    }

        .cardGalleryControls .card img {
            border-top-left-radius: .25rem;
            border-top-right-radius: .25rem;
            max-height: 100%;
            max-width: 100%;
            object-fit: cover;
            overflow: clip;
        }

    .cardGalleryControls .img-wrapper {
        display: flex;
        height: 15rem;
        justify-content: center;
        max-width: 100%;
    }

    .cardGalleryControls .card-title {
        /*color: var(--dmns-corporate-blue);*/
        text-decoration: none;
    }

    .cardGalleryControls .card-text {
        word-break: break-word;
    }

    .cardGalleryControls .card-body a {
        color: #000000;
        text-decoration: none;
    }

    .cardGalleryControls .card-footer {
        /*background-color: var(--dmns-purple);*/
        /*color: white;*/
        font-family: var(--dmns-heading-font);
        font-size: 1.1rem;
        font-weight: bold;
        letter-spacing: .03rem;
        text-align: center;
        text-transform: uppercase;
        padding: .75rem 2rem;

    }

    .cardGalleryControls .slick-prev {
        left: -2.25rem;
        z-index: 10;
    }

        .cardGalleryControls .slick-prev:before {
            color: #000000;
            font-size: 2rem;
            position: relative;
        }

    .cardGalleryControls .slick-next {
        right: -1.5rem;
    }

        .cardGalleryControls .slick-next:before {
            color: #000000;
            font-size: 2rem;
            position: relative;
        }

    .cardGalleryControls .slick-slide {
        height: auto !important;
    }

        .cardGalleryControls .slick-slide:focus {
            border: 2px solid var(--dmns-blue);
        }

    .cardGalleryControls .slick-track {
        align-items: stretch;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        padding-bottom: .5rem;
    }

    .cardGalleryControls .slick-dots {
        bottom: unset;
    }

        .cardGalleryControls .slick-dots li button:before {
            color: #000000;
            /*color: white;*/
        }

/* #endregion _cardGalleryScroller */

/* cardGrid & _cardGalleryScroller Heading and Button */
.card-section-heading {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

    .card-section-heading .heading-button {
        /*background: transparent;*/
        /*border: 2px solid #000000;*/
        /*border: 1px solid white;*/
        /*color: #000000;*/
        /*color: white;*/
        height: fit-content;
    }

/* #region cardGrid */
.card-grid .card {
    /*background-color: #EEEEEE;*/
    /*background-color: #3B3A39;*/
}

    .card-grid .card img {
        object-fit: cover;
    }

.card-grid .card-link {
    text-decoration: none;
}

.card-grid .card-title {
    text-decoration: none;
}

.card-grid .card-text {
    word-break: break-word;
}

.card-grid .card-footer {
    font-family: var(--dmns-heading-font);
    font-size: 1.1rem;
    padding: .75rem 2rem;
    text-align: center;
    text-transform: uppercase;
}

/* #endregion cardGrid */

/* #region expandableContentCard */

.expandable-card {
    /*background-color: #3B3A39;*/
    /*color: white;*/
    /*background-color: #DDDDDD;*/
    background: white;
    border-radius: .25rem;
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, .1);
    border: 1px solid var(--dmns-gray);
    /*border: none;*/
}

    .expandable-card .img-wrapper {
        align-items: start;
        display: flex;
        justify-content: center;
    }

    .expandable-card img {
        border-radius: .25rem .25rem 0rem 0rem;
        display: flex;
        flex-grow: 1;
        max-width: 600px;
        max-height: 400px;

        /* image-rendering: -webkit-optimize-contrast; */
    }

.expandable-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 100%;
    padding: 1.5rem;
}

.collapse-group .collapse {
    min-height: 3.75rem !important;
    max-height: 100%;
    padding: 0;
}

    .collapse-group .collapse .body-text {
        min-height: 3.75rem !important;
        max-height: 100%;
        transition: all 0.35s ease;
    }

    .collapse-group .collapse:not(.show) {
        display: block !important;
        height: 5rem;
        overflow: hidden;
        position: relative;
    }

    
        /* IF ANYONE WANTS TO TAKE A CRACK AT A FANCY FADING GRADIENT!
            ~SR 9/28/24
        */
        /*.collapse-group .collapse:not(.show)::before {*/
            /* background: -webkit-gradient(linear, left bottom, left top, color-stop(10%, rgba(59, 58, 57, 0.5)), color-stop(90%, rgba(255, 255, 255, 0)));
            background: linear-gradient(to top, rgba(59, 58, 57, 0.5) 10%, rgba(255, 255, 255, 0) 90%);*/
            /*            background: -webkit-gradient(linear, left bottom, left top, color-stop(10%, rgba(0, 0, 0, 0.9)), color-stop(80%, rgba(0, 0, 0, 0)));*/
            /*-webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
            -webkit-mask-size: 100%;
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-position: bottom;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 10%, rgba(0, 0, 0, 0) 80%);
            border-bottom-left-radius: .25rem;
            border-bottom-right-radius: .25rem;
            content: "";
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
        }*/

.collapse-group .collapsing {
    height: 5rem;
    overflow: hidden;
    transition: all 0.35s ease;
}

.collapse-group .btn {
    border: none;
    border-radius: 0;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-size: .8rem;
    font-weight: bold;
    margin: 1.5rem 0rem;
}

    .collapse-group .btn .icon {
        padding: 0 .5rem;
    }

    .collapse-group .btn:focus {
        margin: 1.5rem 0rem;
        border: 2px solid var(--dmns-blue);
        border-radius: .25rem;
        /*outline: 1px solid white;*/
    }

.collapse-toggler a:hover {
    font-weight: bold;
}
/* #endregion expandableContentCard */

/* #region imageGridGallery */
/* remove bootstrap gutter for space between heading and cards */
.gallery {
    --bs-gutter-y: 0;
    margin: auto;
/*    animation: fade-in linear;
    animation-timeline: view()*/
}

    .gallery .col {
        margin-top: .5rem;
        padding: .75rem;
        overflow: hidden;
    }

    .gallery .card {
        background-color: transparent;

    }

/*@keyframes fade-in {
    from {scale: .8; opacity: 0;}
    to {scale: 1; opacity: 1;}
}*/


        /* remove usual anchor styling */
        .gallery .card a {
            border-bottom: none;
            opacity: 1;
            transition: .5s ease;
            backface-visibility: hidden;
        }

        .gallery .card img {
            border-radius: .25rem;
            width: 100%;
            object-fit: cover;
            filter: brightness(1);
            transition: .2s ease-in;
            max-height: 300px;
        }

.gallery .card .card-middle {
    transition: .2s ease-in;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;

}

.gallery .card:hover img {
    filter: brightness(0.8);
}

        .gallery .card:hover .card-middle {
            opacity: 1;
            filter: brightness(1.25);
            background-color: #ffffffa6;
            backdrop-filter: blur(10px);
            border-radius: .25rem;
        }

        .gallery .card .card-middle-text {
            font-family: var(--dmns-heading-font);
            color: #000000;
            display: flex;
            padding: .5rem 1rem;
        }

/* override glightbox-clean (glightbox's 'skin' for retheming) */
.glightbox-clean .gslide-title,
.glightbox-clean .gslide-desc {
    /* 'dmns-font' not working here ~SR 9/28/23 */
    font-family: var(--dmns-heading-font);
    color: white;
}

.glightbox-clean .gslide-description .gdesc-inner {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.9));
    padding: 1rem 2rem;
}

.glightbox-mobile .glightbox-container .gslide-description {
    padding: 0;
}

.glightbox-mobile .glightbox-container .gslide-desc {
    padding-bottom: 1rem;
}

    .glightbox-mobile .glightbox-container .gslide-desc .desc-more {
        opacity: .7;
    }
/* #endregion imageGridGallery */

/* #region imageWithCaption AND videoWithCaption */
.media-caption-wrapper {
    /*color: white;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    opacity: 0;
    transition: opacity .5s ease;
}

    .media-caption-wrapper p {
        border-bottom: 1px solid #222222;
        /*border-bottom: 1px solid white;*/
        padding: .75rem 0rem;
        margin: 0;
        word-break: break-word;
    }

    .media-caption-wrapper.show {
         opacity: 1;
    }
/* #endregion imageWithCaption AND videoWithCaption */

/* #region richTextSection */
.rich-text-wrapper p:last-of-type {
    margin-bottom: 0;
}
/* #endregion richTextSection */

/* #region twoColumnSection */
.two-column-wrapper {
    align-items: center;
    justify-content: center;
    text-align: start;
}

    .two-column-wrapper img {
        border-radius: .25rem;
        max-width: inherit;
        margin: auto;
    }

    .two-column-wrapper p:last-of-type {
        margin-bottom: 0;
    }
/* #endregion twoColumnSection */

/* #region videoGridGallery */

.video-grid {
    margin: auto;
}

    .video-grid .container-fluid {
        display: flex;
        justify-content: center;
        padding: 0;
    }

    /* Add margin for when more videos show */
    .video-grid .first-videos, .video-grid .more-videos {
        margin-bottom: 1.5rem;
    }

    .video-grid .card {
        /*background-color: #CCCCCC;*/
        /* background-color: #3B3A39;*/
        /*border: none;*/
        /*color: white;*/
    }

.load-more-videos {
    /*    border: 1px solid white;
    color: white;*/
    border: 2px solid #000000;
    width: 100%;
}

/*    .load-more-videos:before, .load-more-videos:visited {
        border: 1px solid white;
        color: white;
    }*/

/* Too much space at end of text. */
.video-grid .card .card-text p:last-child {
    margin-bottom: 0;
}

/* Remove underline from icon */
.video-grid .card .video-btn {
    border-bottom: none;
    text-decoration: none;
}

/* Change properties so icon will go to the right spot */
.video-grid .card .ratio {
    align-content: center;
    display: flex;
    justify-content: center;
}

.video-grid .card .bi {
    align-self: center;
    color: white;
    display: flex;
    font-size: 2rem;
    height: fit-content;
    justify-content: center;
    position: relative;
    text-align: center;
    text-decoration: none;
    width: fit-content;
    z-index: 10;
}

/* Modal */
#videoModal {
    --bs-modal-bg: transparent;
    --bs-modal-border: none;
    padding: 0 1rem !important;
    max-height: 100vh;
    overflow: hidden;
}

    #videoModal .modal-dialog {
        max-width: 80vw;
        max-height: 80vh;
        margin: 2rem auto;
    }

    #videoModal .modal-body {
        position: relative;
        padding: 0;
    }

        #videoModal .modal-body .ratio {
            height: 100%;
        }

    #videoModal .close {
        background: transparent;
        border: none;
        box-shadow: none;
        position: absolute;
        right: 0;
        top: -4rem;
        z-index: 100;
        font-size: 3rem;
        font-weight: normal;
        color: white;
        opacity: 1;
    }

    #videoModal iframe {
        z-index: 900;
        position: relative;
        height: 80vh;
    }

    #videoModal .spinner-border {
        position: absolute;
        top: 50%;
        left: 50%;
    }

/* #endregion videoGridGallery */

/* #region peoplePicker */

.peoplePicker .content-card {
    cursor: pointer;
}

    .peoplePicker .content-card:hover {
        box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, .5);
    }

.peoplePicker .modal-dialog {
    max-width: 800px;
    margin: 1.75rem auto;
    display: flex;
    align-items: center;
}

.peoplePicker .modal-title-container {
    display: flex;
    flex-direction: column;
}

.peoplePicker .modal-title {
    margin: 0;
}

.peoplePicker .modal-job-title {
    margin: 0;
    font-size: 1rem;
    font-weight: normal;
    color: inherit;
}

.peoplePicker .modal-body {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

    .peoplePicker .modal-body .modalPersonImg {
        flex: 0 0 40%;
        max-width: 40%;
    }

        .peoplePicker .modal-body .modalPersonImg img {
            width: 100%;
            height: auto;
        }

    .peoplePicker .modal-body .personBio {
        max-width: 60%;
        overflow-y: auto;
        max-height: 70vh;
    }

.peoplePicker .modalPersonImg {
    width: 40%;
    padding: 0 1rem;
}

.peoplePicker .personBio {
    width: 60%;
    padding: 0 1rem;
}

    .peoplePicker .personBio p {
        line-height: 1.6;
    }
/* #endregion peoplePicker */

/* #region accordionSection */
.accordion {
    --bs-accordion-bg: inherit;
    --bs-accordion-btn-focus-border-color: var(--dmns-corporate-blue);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem var(--dmns-corporate-blue);
    margin: 0 auto;
    max-width: 1200px;
}

.accordion-flush .accordion-item .accordion-button {
    border-bottom: none;
    padding: 2rem 1rem;
}

    .accordion-flush .accordion-item .accordion-button.collapsed {
        border-bottom: 1px solid var(--dmns-gray);
        padding: 2rem 1rem;
    }

.accordion-item:first-of-type .accordion-button {
    border-top: 1px solid var(--dmns-gray);
}

.accordion-header:hover {
    text-decoration: underline;
}

.accordion-button::after {
    margin-left: 1rem;
}

.accordion-button {
    justify-content: space-between;
}

.accordion-button:not(.collapsed) {
    color: black;
    background-color: inherit;
}

.accordion-body {
    border-bottom: 1px solid var(--dmns-gray);
}

/* #endregion accordionSection */


/* #endregion ===== CONTENT BLOCKS ===== */
/* #region ===== /PURCHASE ===== */
/* Note: The id="tickets" is located in /Views/Tickets.cshtml and is 
    propped into the blazor component /Shared/Tabs/ProductTabsComponent.razor
    This id is used to target the blazor ticketing components only. In the future, 
    it may be necessary to refactor if we utilize these styles on other pages.
    ~SR 10/13/23
*/
/* #region Required Popup Alert Modal */
.hx-modal.modal {
    background-color: rgba(0, 0, 0, .5);
}

.required-modal .modal-footer {
    justify-content: space-between;
    border-top: 0;
}

    .required-modal .modal-footer button {
        border: 2px solid #000000;
        border-radius: .25rem;
    }

        .required-modal .modal-footer button:hover,
        .required-modal .modal-footer button:active,
        .required-modal .modal-footer button:focus {
            background-color: var(--dmns-green);
        }

        .required-modal .modal-footer button:first-of-type:hover,
        .required-modal .modal-footer button:first-of-type:active,
        .required-modal .modal-footer button:first-of-type:focus {
            background-color: var(--dmns-orange);
        }
    
    .required-modal .modal-footer button:disabled {
        border-color: #acacac;
    }
/* #endregion Required Popup Alert Modal */

/* #region Ticket Product Nav Tabs */

/* Using the class .product to gain more specificity as well as reusability, 
    particularly for product nav/tabs and accordions.*/
.product .nav {
    padding-top: 1rem;
}

.product .nav-link {
    border: 1px solid var(--dmns-gray);
    color: #000000;
    /*color: white;*/
    margin-bottom: .5rem;
    margin: .25rem;
}

    .product .nav-link:hover {
        background-color: #DDDDDD;
    }

    .product .nav-link.active {
        background: var(--dmns-green);
        color: black;
    }

.product .accordion-header {
    font-family: Arial, Helvetica, sans-serif;
}

/* overriding the nav-fill so that the tabs have gutters */
.product .nav-fill .nav-item .nav-link {
    width: unset;
}

/* #endregion Ticket Product Nav Tabs */

/* #region Ticket Product Filters */

.product .dropdown-item {
    font-family: var(--dmns-body-font);
}

#tabContent .product-filters ul {
    transform: translate(0, 50px) !important;
    width: 100%;
    border: 5px solid;
    border-radius: .5rem;
    box-shadow: 0 .25rem 1rem .1rem rgba(0, 0, 0, .25);
    padding: .25rem .5rem;
}

    #tabContent .product-filters ul li {
        border: none;
    }

        #tabContent .product-filters ul li button:hover {
            transform: unset;
        }

        #tabContent .product-filters ul li button:active {
            color: #000000;
        }

#tabContent .product-filters .hx-multi-select-input {
    border: 2px solid #000000;
}

#tabContent .filter-audience div[class="show"] .hx-multi-select-input,
#tabContent .filter-audience .hx-multi-select-input:focus {
    border-color: var(--dmns-purple);
    box-shadow: 0 0 0 .25rem rgba(135, 33, 117, .5);
}

#tabContent .filter-audience .hx-multi-select-input.filtered {
    border-color: var(--dmns-purple);
    box-shadow: 0 0 0 .15rem rgba(135, 33, 117, 1);
}

#tabContent .filter-audience ul {
    border-color: var(--dmns-purple);
}

#tabContent .filter-audience .form-check-input[type=checkbox]:focus {
    border-color: var(--dmns-purple);
    box-shadow: none;
}

#tabContent .filter-audience .form-check-input[type=checkbox]:checked {
    background-color: var(--dmns-purple);
    border-color: var(--dmns-purple);
}

#tabContent .filter-event div[class="show"] .hx-multi-select-input, 
#tabContent .filter-event .hx-multi-select-input:focus {
    border-color: var(--dmns-royal-blue);
    box-shadow: 0 0 0 .25rem rgba(0, 74, 168, .5);
}

#tabContent .filter-event .hx-multi-select-input.filtered {
    border-color: var(--dmns-royal-blue);
    box-shadow: 0 0 0 .15rem rgba(0, 74, 168, 1);
}

#tabContent .filter-event ul {
    border-color: var(--dmns-royal-blue);
}

#tabContent .filter-event .form-check-input[type=checkbox]:focus {
    border-color: var(--dmns-royal-blue);
    box-shadow: none;
}

#tabContent .filter-event .form-check-input[type=checkbox]:checked {
    background-color: var(--dmns-royal-blue);
    border-color: var(--dmns-royal-blue);
}

#tabContent .filter-accessibility div[class="show"] .hx-multi-select-input,
#tabContent .filter-accessibility .hx-multi-select-input:focus {
    border-color: var(--dmns-gold);
    box-shadow: 0 0 0 .25rem rgba(270, 173, 0, .5);
}

#tabContent .filter-accessibility .hx-multi-select-input.filtered {
    border-color: var(--dmns-gold);
    box-shadow: 0 0 0 .15rem rgba(270, 173, 0, 1);
}

#tabContent .filter-accessibility ul {
    border-color: var(--dmns-gold);
}

#tabContent .filter-accessibility .form-check-input[type=checkbox]:focus {
    border-color: var(--dmns-gold);
    box-shadow: none;
}

#tabContent .filter-accessibility .form-check-input[type=checkbox]:checked {
    background-color: var(--dmns-gold);
    border-color: var(--dmns-gold);
}
/* #endregion Ticket Product Filters */

/* #region Ticket Product Items */
#tabContent svg {
    padding: .25rem;
    border: 2px solid #000000;
    border-radius: .25rem;
}

.ticket-product {
    border: 1px solid var(--dmns-gray);
    border-radius: .25rem;
}

/*    .ticket-product button:not(.action-btn) {
        border: none;
    }*/

/*        .ticket-product button:not(.action-btn):hover, .ticket-product button:not(.action-btn):hover:active {
            color: var(--dmns-orange);
        }*/

    .ticket-product .product-details {
        border-bottom: 1px solid var(--dmns-gray);
    }

        .ticket-product .product-details .tags {
            display: flex;
            flex-flow: row wrap;
        }

            .ticket-product .product-details .tags span {
                border-radius: .25rem;
            }

            .ticket-product .product-details .tags .audience-tag {
                background-color: var(--dmns-purple);
                color: #ffffff;
            }

            .ticket-product .product-details .tags .eventtype-tag {
                background-color: var(--dmns-royal-blue);
                color: #ffffff;
            }

            .ticket-product .product-details .tags .accessibility-tag {
                background-color: var(--dmns-gold);
                color: #000000;
            }

    .ticket-product i {
        padding: 0 .5rem 0 0;
        font-size: 1.5rem;
    }

    .ticket-product p {
        padding-left: .5rem;
    }

.ticket-product-desc .card {
    border-top: 0px;
    border-radius: 0 0rem .25rem .25rem;
}
/*#endregion Ticket Product Items*/

/* #region Off-Canvas Ticket Product Builder */
#productBuilder {
    border: 2px solid #000000;
    overflow: auto;
}

    #productBuilder.offcanvas.offcanvas-bottom {
        height: 100vh;
        max-width:1440px;margin:0 auto
    }

    #productBuilder .product-title {
        background-color: var(--dmns-green);
    }

    #productBuilder .component-container {
        flex-flow: column nowrap;
    }

    #productBuilder .alert {
        width: fit-content;
        align-self: center;
    }

.productBackButton .spinner-border {
    height: 2rem;
    width: 2rem;
    vertical-align: unset;
    border: 4px solid currentcolor;
    border-right-color: transparent;
}

/* #region Datepicker /Shared/Calendar/CalendarComponent.razor */
.productCalendar label {
    width: 100%;
    padding: .25rem 1rem;
    background-color: #000000;
    color: #ffffff;
    font-size: 1.5rem;
    font-family: var(--dmns-heading-font);
    text-align: center;
}

.productCalendar .hx-input-date-wrapper {
    margin: 0 .75rem;
}

    .productCalendar .hx-input-date-wrapper .hx-input-date {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        flex-grow: 1;
        margin-top: .5rem;
        border: 1px solid #000000;
        border-radius:.25rem
    }

        .productCalendar .hx-input-date-wrapper .hx-input-date:not(> input.form-control:disabled):hover,
        .productCalendar .hx-input-date-wrapper .hx-input-date:not(> input.form-control:disabled):focus,
        .productCalendar .hx-input-date-wrapper .hx-input-date:active {
            border-bottom: 2px solid var(--dmns-orange);
        }

            .productCalendar .hx-input-date-wrapper .hx-input-date:not(> input.form-control:disabled):hover .hx-input-date-icon,
            .productCalendar .hx-input-date-wrapper .hx-input-date:not(> input.form-control:disabled):focus .hx-input-date-icon,
            .productCalendar .hx-input-date-wrapper .hx-input-date:active .hx-input-date-icon {
                color: var(--dmns-orange);
            }

        .productCalendar .hx-input-date-wrapper .hx-input-date input {
            order: 2;
            flex-grow: 1;
            border: 0;
            font-size: 1.5rem;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            border-left: 1px solid black;
        }


            .productCalendar .hx-input-date-wrapper .hx-input-date input:focus {
                box-shadow: inset 0 0 0 .15rem rgba(13, 110, 253, .25);
            }

            .productCalendar .hx-input-date-wrapper .hx-input-date input.form-control:disabled {
                background-color: #ffffff;
            }

    .productCalendar .hx-input-date-wrapper .hx-input-date-dropdown-menu {
        order: 3;
        display: block;
        position: absolute;
        inset: 0 auto auto 0;
        width: 100%;
        margin: 0;
        padding: 0 0 1rem 0;
        transition: visibility .25s, transform .25s, opacity .25s;
    }

        .productCalendar .hx-input-date-wrapper .hx-input-date-dropdown-menu:not(.show) {
            visibility: hidden;
            opacity: 0;
            transform: translate3d(0px, 30px, 0px) !important;
        }

        .productCalendar .hx-input-date-wrapper .hx-input-date-dropdown-menu.show {
            visibility: visible;
            opacity: 1;
            transform: translate3d(0px, 60px, 0px) !important;
        }

        .productCalendar .hx-input-date-wrapper .hx-input-date-dropdown-menu .hx-input-date-dropdown-buttons {
            display: none;
        }

    .productCalendar .hx-input-date-wrapper .hx-input-date-icon {
        order: 1;
        padding: 0 1rem;
        font-size: 1.25rem;
    }

    .productCalendar .invalid-feedback span {
        margin-left: 1rem;
    }

.hx-calendar {
    color: var(--dmns-gray);
    border: 5px solid var(--dmns-orange);
    border-radius: 0.25rem;
    padding: 1rem .5rem;
}

    .hx-calendar table {
        width: 100%;
        border-top: 1px solid var(--dmns-gray);
        border-bottom: 1px solid var(--dmns-gray);
    }

    .hx-calendar .calendar-key {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-evenly;
        margin-top: 1rem;
    }

        .hx-calendar .calendar-key i.bi-circle {
            color: #000000;
        }

        .hx-calendar .calendar-key i.bi-circle-fill {
            color: var(--dmns-orange);
        }

        .hx-calendar .calendar-key i.bi-sun,
        .hx-calendar .calendar-key i.bi-moon {
            color: var(--dmns-green);
        }

        .hx-calendar .calendar-key i.bi-ban-fill,
        .hx-calendar .calendar-key i.bi-ban {
            color: var(--dmns-red);
        }

        .hx-calendar .calendar-key span {
            margin: 0 .5rem;
            text-transform: uppercase;
        }

.hx-calendar-navigation {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-evenly;
    align-items: center;
}

    .hx-calendar-navigation .hx-button {
        width: 2.25rem;
        height: 2.25rem;
        border-width: 0px;
        border-radius: 2rem;
    }

        .hx-calendar-navigation .hx-button:hover {
            border: 2px solid var(--dmns-orange);
        }

        .hx-calendar-navigation .hx-button:active {
            border: 2px solid var(--dmns-orange);
            background-color: var(--dmns-orange);
            opacity: 1;
        }

.hx-calendar-month-year-select {
    flex-grow: 1;
    text-align: center;
}

    .hx-calendar-month-year-select .form-select {
        display: inline-block;
        width: 30%;
        padding: .25rem;
        border: 0;
        background-image: none;
        font-size: 1.25rem;
        width: 50%;
    }

        .hx-calendar-month-year-select .form-select:disabled {
            background-color: transparent;
        }

        .hx-calendar-month-year-select .form-select:first-child {
            text-align: center;
        }

        .hx-calendar-month-year-select .form-select:focus {
            box-shadow: 0 0 0 .25rem var(--dmns-orange);
        }

#calendarMonthSelect {
    width: 55%;
}

#calendarYearSelect {
    width: 40%;
}

.hx-calendar-day-names {
    height: 2rem;
    font-size: .75rem;
    text-align: center;
    text-transform: uppercase;
}

.hx-calendar-week {
    height: 4rem;
    color: #424242;
    font-size: .9rem;
}

    .hx-calendar-week td {
        max-width: 2rem;
    }

        .hx-calendar-week td div {
            width: 2rem;
            height: 2rem;
            margin: auto;
            border: 0px solid transparent;
            border-radius: 2rem;
            background-color: transparent;
            text-align: center;
            line-height: 2rem;
            transition: border .15s ease-in-out;
        }

            .hx-calendar-week td div:not(.disabled, .date-status-icon):hover,
            .hx-calendar-week td div:not(.disabled, .date-status-icon):focus {
                border: 2px solid var(--dmns-orange);
            }

            .hx-calendar-week td div.disabled {
                color: var(--dmns-gray);
            }

            .hx-calendar-week td div.selected {
                background-color: var(--dmns-orange);
                color: #000000;
            }

            .hx-calendar-week td div.out:not(.disabled) {
                opacity: 0.6;
            }

            .hx-calendar-week td div.hx-calendar-today {
                border: 1px solid #000000;
                color: #000000;
            }

                .hx-calendar-week td div.hx-calendar-today:hover {
                    border: 2px solid var(--dmns-orange);
                }

            .hx-calendar-week td div.date-status-icon {
                position: relative;
                top: -2rem;
                font-size: 1.75rem;
            }

                .hx-calendar-week td div.date-status-icon .bi-ban,
                .hx-calendar-week td div.date-status-icon .bi-ban-fill {
                    color: var(--dmns-red);
                }

                .hx-calendar-week td div.date-status-icon .bi-sun,
                .hx-calendar-week td div.date-status-icon .bi-moon {
                    position: relative;
                    z-index: -1;
                    color: var(--dmns-green);
                }
/* #endregion Datepicker /Shared/Calendar/CalendarComponent.razor */

/* #region Timepicker /Shared/Showtimes/ShowtimesComponent.razor */
#tickets .showTimes.updated .time-button {
    color: white;
    animation-name: datechange;
    animation-duration: 1s;
    background-color: white;
    opacity: 0;
}

@keyframes datechange {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

#timepicker .time-button {
    border: 1px solid #000000;
    /*border: 1px solid white;*/
    border-radius: .25rem;
    /*color: white;*/
    text-align: center;
    width: 100%;
    height: 4rem;
}

    #timepicker .time-button.selected,
    #timepicker .time-button.selected:disabled,
    #timepicker .time-button.selected div {
        background-color: var(--dmns-orange);
        /*background-color: white;*/
        color: black;
        opacity: 1;
    }

    #timepicker .time-button:hover {
        background-color: var(--dmns-orange);
        /*background-color: white;*/
        color: black;
    }

    #timepicker .time-button:not(.selected):disabled {
        border: 1px solid var(--dmns-gray);
        color: var(--dmns-gray);
    }

#timepicker .time-button-available {
    display: flex;
    font-size: .8rem;
    justify-content: center;
    margin-top: .25rem;
}

#timepicker .capacity-text {
    font-size: .75rem;
}

    #timepicker .capacity-text.sold-out {
        background: none;
        color: var(--dmns-red);
    }

    #timepicker .capacity-text.low-capacity {
        background: none;
        color: var(--dmns-red);
    }

#timepicker .bi-exclamation-diamond-fill::before {
    color: var(--dmns-orange);
}

#tickets .low-capacity {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23f4911e' class='bi bi-exclamation-diamond-fill' viewBox='0 0 16 16'%3E%3Cpath d='M9.05.435c-.58-.58-1.52-.58-2.1 0L.436 6.95c-.58.58-.58 1.519 0 2.098l6.516 6.516c.58.58 1.519.58 2.098 0l6.516-6.516c.58-.58.58-1.519 0-2.098L9.05.435zM8 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%3E%3C/svg%3E") no-repeat;
    background-position: 5% 50%;
}

.showtimes-key {
    flex-shrink: unset;
    margin: 0 .75rem;
    border: 1px dashed var(--dmns-gray);
    border-radius: .5rem;
}

    .showtimes-key span {
        font-size: .9rem;
    }

.showTimes .popup-alert-error {
    width: fit-content;
}
/* #endregion Timepicker /Shared/Showtimes/ShowtimesComponent.razor */

/* #region Quantitypicker Shared/Items/ItemsComponent.razor */
#typeScroller {
    display: inline-block;
    width: 100%;
    padding: .5rem 1rem;
    background-color: #000000;
    color: #ffffff;
    font-family: var(--dmns-heading-font);
    font-size: 1.5rem;
    text-align: center;
}

#quantitypicker .btn {
    border: 0;
    font-size: 1.5rem;
}

    #quantitypicker .btn.action-btn {
        align-self: center;
        width: fit-content;
        border: 1px solid var(--dmns-gray);
        font-size: 1rem;
    }

    #quantitypicker .btn:disabled .bi-dash, #quantitypicker .btn:disabled .bi-plus {
        border-color: var(--dmns-gray);
    }

    #quantitypicker .btn .bi-dash {
        border: 2px solid #000000;
        border-radius: 2rem;
        color: #000000;
    }

        #quantitypicker .btn .bi-dash:hover, #quantitypicker .btn .bi-dash:active, #quantitypicker .btn .bi-dash:focus {
            border-color: var(--dmns-red);
            color: var(--dmns-red);
        }

    #quantitypicker .btn .bi-plus {
        border: 2px solid #000000;
        border-radius: 1rem;
        color: #000000;
    }

        #quantitypicker .btn .bi-plus:hover, #quantitypicker .btn .bi-plus:active, #quantitypicker .btn .bi-plus:focus {
            border-color: var(--dmns-green);
            color: var(--dmns-green);
        }

/* Center number of tickets in it's box -  override BS  */
#quantitypicker input#adult.form-control,
#quantitypicker input#youth.form-control,
#quantitypicker input#senior.form-control {
    text-align: center;
}

/* Comment/Uncomment below to remove or add valid checkmark */
#quantitypicker .form-control.is-valid, .was-validated .form-control:valid {
    background-image: unset;
    padding: unset;
}

    /* Make focus ring more opaque */
    .form-control.is-valid:focus, .was-validated .form-control:valid:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), .5);
    }

.readonly-input {
    border: none;
    background-color: transparent; /* Prevent greyed out appearance */
    cursor: unset;
}

/* Hide the default number input arrows */
.tab-content input[type="number"]::-webkit-inner-spin-button, .tab-content input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.tab-content input[type=number] {
    -moz-appearance: textfield;
}

#quantitypicker .input-group {
    width: 12rem;
}

.quantity-label-wrapper {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: start;
    border-top: 1px solid var(--dmns-gray);
    border-right: 1px solid var(--dmns-gray);
    border-left: 1px solid var(--dmns-gray);
    border-radius: .25rem .25rem 0 0;
}

    .quantity-label-wrapper label {
        margin-bottom: 0;
    }

    .quantity-label-wrapper span {
        text-align: left;
        font-size: 1rem;
    }

.quantity-input-wrapper {
    border-top: 1px solid var(--dmns-gray);
    border-right: 1px solid var(--dmns-gray);
    border-bottom: 1px solid var(--dmns-gray);
    border-left: 1px solid var(--dmns-gray);
    border-radius: 0 0 .25rem .25rem;
}
/* #endregion Quantitypicker Shared/Items/ItemsComponent.razor */

#add-to-cart-btn-validation {
    text-align: center;
}

/* #region Toast */
#productBuilder .product-buttons .toast {
    background-color: #ffffff;
}

    #productBuilder .product-buttons .toast .toast-header {
        align-items: baseline;
        font-size: 1rem;
    }
/* #endregion Toast */

/* #endregion Off-Canvas Ticket Product Builder */

/* What is this for?  ~SR 1/19/24 */
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
    opacity: unset;
    color: var(--dmns-gray);
}

/* SAM - this is all placeholder */
/* just wanted to show data-attributes as CSS selectors */
[data-free-day="true"] span::after,
[data-free-night="true"] span::after {
    font-size: .6rem;
    position: relative;
    top: .75rem;
}

[data-free-day="true"] span::after {
    content: "Free Day";
}

[data-free-night="true"] span::after {
    content: "Free Night";
}

#datepicker .free-day-toggle, #datepicker .free-night-toggle {
    display: none;
}

/* #region Cart Component /Views/Partials/_cart.cshtml */
.cart-wrapper .alert-info,
#modalCart .alert-info,
#offcanvasCart .alert-info {
    font-size: .9rem;
}

.cart-card {
    border: 1px solid var(--dmns-gray);
}

#cart-widget .card-header {
    background-color: transparent;
    border-bottom: none;
}

#cart-widget .card-body ul {
    list-style: none;
}

#cart-widget .base-price {
    font-size: .8rem;
    text-decoration: line-through var(--dmns-red) solid .1rem;
}

#cart-widget .cart-line-item {
    align-items: baseline;
    border-bottom: 1px solid #dee2e6;
    justify-content: space-between;
    margin: auto;
    width: 100%;
}

    #cart-widget .cart-line-item:last-child {
        border-bottom: none;
    }

    #cart-widget .cart-line-item div {
        font-size: .8rem;
    }

    #cart-widget .cart-line-item #item-title {
        order: 1;
    }

        #cart-widget .cart-line-item #item-title .fw-bolder:first-child {
            font-size: .7rem;
            line-height: 1rem;
            padding: 0;
        }

        #cart-widget .cart-line-item #item-title .fw-bolder:last-child {
            font-size: .9rem;
            line-height: 1rem;
            padding: 0;
        }

    #cart-widget .cart-line-item #item-details {
        order: 3;
        align-self: flex-end;
        line-height: 1rem;
    }

    #cart-widget .cart-line-item #item-price {
        order: 4;
        align-self: flex-end;
    }

        #cart-widget .cart-line-item #item-price .base-price {
            font-size: .7rem;
            line-height: .7rem;
        }

        #cart-widget .cart-line-item #item-price .final-price {
            font-size: 1rem;
            line-height: 1rem;
        }

    #cart-widget .cart-line-item #item-quantity {
        order: 5;
        align-self: flex-end;
        text-align: center;
        line-height: 1rem;
    }

/*    #cart-widget .cart-line-item #addon-item-details {
        order: 6;
        align-self: flex-end;
    }

    #cart-widget .cart-line-item #addon-item-price {
        order: 7;
        align-self: flex-end;
    }

    #cart-widget .cart-line-item #addon-item-quantity {
        order: 8;
        align-self: flex-end;
        text-align: center;
    }*/

    #cart-widget .cart-line-item #item-remove {
        order: 2;
        align-self: flex-start;
        text-align: center;
    }

        #cart-widget .cart-line-item #item-remove .hx-button {
            padding: 0;
        }

            #cart-widget .cart-line-item #item-remove .hx-button:hover > .bi-trash3 {
                color: var(--dmns-red);
            }

#cart-widget .cart-subline-item{
    order : 6;
}

#cart-widget .no-promo-codes {
    border-top: 1px dashed var(--dmns-gray);
}

#cart-widget .promo-codes {
    flex-flow: row wrap;
    padding: .5rem;
    border: 1px dashed var(--dmns-gray);
    border-radius: .25rem;
    font-size: .9rem;
    line-height: .8rem;
    color: #696969;
}

    #cart-widget .promo-codes .promo-code-item {
        flex-grow: 1;
        font-size: .7rem;
        color: #000000;
    }

#cart-widget .cart-total {
    flex-flow: row nowrap;
    align-items: center;
}

    #cart-widget .cart-total div:first-child {
        flex-grow: 1;
    }

/* #endregion Cart Component /Views/Partials/_cart.cshtml */

/* #region /Views/MembershipForm.cshtml */
/* Membership Wizard Tab arrows */
#membershipForm.product .nav {
    padding-top: 0;
}

#mbr-form-nav {
    margin: 0;
}

#mbr-form-nav-tabs {
    padding-right: 1.5rem;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
}

    #mbr-form-nav-tabs .mbr-form-tab {
        max-width: 45%;
        flex-basis: unset;
        flex-grow: 0;
        flex-shrink: 1;
    }

        #mbr-form-nav-tabs .mbr-form-tab:first-child {
            flex-grow: 1;
            flex-shrink: 0;
        }

.mbr-form-tab {
    margin-top: .75rem;
    width: 95%;
    align-self: center;
    justify-content: center;
    height: fit-content;
}

    .mbr-form-tab .content {
        position: relative;
        z-index: 1;
        flex-basis: unset;
        flex-grow: 0;
        flex-shrink: 1;
        border: solid #000000;
        border-top-width: 2px;
        border-bottom-width: 2px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        background-color: #ffffff;
        padding: .5rem 1rem .5rem 1rem;
    }

        .mbr-form-tab .content:hover {
            color: #000000;
            background-color: #F6A446;
        }

            .mbr-form-tab .content:hover > div {
                background-color: #F6A446;
            }

        .mbr-form-tab .content.active {
            flex-grow: 1;
            flex-shrink: 0;
            background-color: var(--dmns-orange);
            color: #000000;
        }

            .mbr-form-tab .content.active > div {
                background-color: var(--dmns-orange);
            }
            /*this will need to be changed if background color is changed
                    opacity and transparent will not work appropriately.
                */
            .mbr-form-tab .content.active > .pointer.in {
                background-color: white;
            }

    .mbr-form-tab .first {
        border-right-width: 0px;
        border-left-width: 2px;
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
    }

    .mbr-form-tab .mid {
        margin-left: 1.75rem;
        border-left: 0px;
        border-right: 0px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        padding-left: 2rem;
    }

    .mbr-form-tab .last {
        margin-left: 1.75rem;
        border-right-width: 2px;
        border-left-width: 0px;
        border-radius: 0px 15px 15px 0px;
        padding-left: 2rem;
    }

    .mbr-form-tab .pointer {
        position: absolute;
        width: 1.75rem;
        height: 50%;
        border-right: 2px solid #000000;
        transition: background-color .15s ease-in-out;
    }

        .mbr-form-tab .pointer.in {
            z-index: 2;
            left: -1.75rem;
            margin-left: 2px;
            background-color: inherit;
        }

        .mbr-form-tab .pointer.out {
            z-index: 0;
            right: 0;
            margin-right: 1px;
        }

        .mbr-form-tab .pointer.top {
            top: 0;
            transform: skewX(50deg);
            transform-origin: top left;
        }

        .mbr-form-tab .pointer.bottom {
            top: 50%;
            transform: skewX(-50deg);
            transform-origin: bottom left;
        }

#mbrPurchaseTabContent .form-group {
    display: flex;
    flex-direction: column;
}

#membershipForm .tab-content {
    flex-grow: 1;
}

#membershipForm .tab-pane.active {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
}

#btnradioyes ~ .active,
#autoRenewYes ~ .active,
#annualAutoRenew ~ .active,
#monthlyAutoRenew ~ .active {
    background-color: #BBD7E5;
    color: #000000;
}

/* override havit form gap */
#membershipForm form {
    gap: 0;
}

#reviewMembership .card {
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, .1);
}

#reviewMembership .bi-exclamation-triangle-fill::before, #dashboardAccountInfoPane .bi-exclamation-triangle-fill::before {
    padding-right: .5rem;
}
/* #endregion /Views/MembershipForm.cshtml */

/* #region Camp Product Filters */
#purchaseCamps .product-filters ul {
    transform: translate(0, 50px) !important;
    width: 100%;
    border: 5px solid;
    border-radius: .5rem;
    box-shadow: 0 .25rem 1rem .1rem rgba(0, 0, 0, .25);
    padding: .25rem .5rem;
}

    #purchaseCamps .product-filters ul li {
        border: none;
    }

        #purchaseCamps .product-filters ul li button:hover {
            transform: unset;
        }

        #purchaseCamps .product-filters ul li button:active {
            color: #000000;
        }

#purchaseCamps .product-filters .hx-multi-select-input {
    border: 2px solid #000000;
}

#purchaseCamps .filter-theme div[class="show"] .hx-multi-select-input,
#purchaseCamps .filter-theme .hx-multi-select-input:focus {
    border-color: var(--dmns-purple);
    box-shadow: 0 0 0 .25rem rgba(135, 33, 117, .5);
}

#purchaseCamps .filter-theme .hx-multi-select-input.filtered {
    border-color: var(--dmns-purple);
    box-shadow: 0 0 0 .15rem rgba(135, 33, 117, 1);
}

#purchaseCamps .filter-theme ul {
    border-color: var(--dmns-purple);
}

#purchaseCamps .filter-theme .form-check-input[type=checkbox]:focus {
    border-color: var(--dmns-purple);
    box-shadow: none;
}

#purchaseCamps .filter-theme .form-check-input[type=checkbox]:checked {
    background-color: var(--dmns-purple);
    border-color: var(--dmns-purple);
}

#purchaseCamps .filter-grade div[class="show"] .hx-multi-select-input,
#purchaseCamps .filter-grade .hx-multi-select-input:focus {
    border-color: var(--dmns-royal-blue);
    box-shadow: 0 0 0 .25rem rgba(0, 74, 168, .5);
}

#purchaseCamps .filter-grade .hx-multi-select-input.filtered {
    border-color: var(--dmns-royal-blue);
    box-shadow: 0 0 0 .15rem rgba(0, 74, 168, 1);
}

#purchaseCamps .filter-grade ul {
    border-color: var(--dmns-royal-blue);
}

#purchaseCamps .filter-grade .form-check-input[type=checkbox]:focus {
    border-color: var(--dmns-royal-blue);
    box-shadow: none;
}

#purchaseCamps .filter-grade .form-check-input[type=checkbox]:checked {
    background-color: var(--dmns-royal-blue);
    border-color: var(--dmns-royal-blue);
}

#purchaseCamps .filter-date div[class="show"] .hx-multi-select-input,
#purchaseCamps .filter-date .hx-multi-select-input:focus {
    border-color: var(--dmns-gold);
    box-shadow: 0 0 0 .25rem rgba(270, 173, 0, .5);
}

#purchaseCamps .filter-date .hx-multi-select-input.filtered {
    border-color: var(--dmns-gold);
    box-shadow: 0 0 0 .15rem rgba(270, 173, 0, 1);
}

#purchaseCamps .filter-date ul {
    border-color: var(--dmns-gold);
}

#purchaseCamps .filter-date .form-check-input[type=checkbox]:focus {
    border-color: var(--dmns-gold);
    box-shadow: none;
}

#purchaseCamps .filter-date .form-check-input[type=checkbox]:checked {
    background-color: var(--dmns-gold);
    border-color: var(--dmns-gold);
}

.ticket-product .product-details .tags .theme-tag {
    background-color: var(--dmns-purple);
    color: #ffffff;
}

.ticket-product .product-details .tags .grade-tag {
    background-color: var(--dmns-royal-blue);
    color: #ffffff;
}

.ticket-product .product-details .tags .date-tag {
    background-color: var(--dmns-gold);
    color: #000000;
}
/* #endregion Camp Product Filters */

/* #region Roster Form Component */
#productBuilder .card {
    border: 2px solid #000000;
}

#productBuilder .dropdown-menu {
    border: 5px solid var(--dmns-orange);
    box-shadow: none;
}

    #productBuilder .dropdown-menu .dropdown-item:hover,
    #productBuilder .dropdown-menu .dropdown-item:active,
    #productBuilder .dropdown-menu .dropdown-item:focus {
        transform: unset;
        background-color: var(--dmns-orange);
    }

.roster-form-dropdown {
    height: 2rem !important;
    color: #000000;
    text-decoration: none;
}

    .roster-form-dropdown:hover,
    .roster-form-dropdown:active,
    .roster-form-dropdown:focus,
    .roster-form-dropdown.btn.show {
        color: var(--dmns-orange);
    }
/* #endregion Roster Form Component */

/* #region ===== /PURCHASE/CHECKOUT ===== */

/* POSSIBLE VALIDATION REGION TO BE BROKEN OUT LATER ~SJR 12/11/2023 */
.required {
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23b31F17' xmlns='http://www.w3.org/2000/svg'><path d='M8 0a1 1 0 0 1 1 1v5.268l4.562-2.634a1 1 0 1 1 1 1.732L10 8l4.562 2.634a1 1 0 1 1-1 1.732L9 9.732V15a1 1 0 1 1-2 0V9.732l-4.562 2.634a1 1 0 1 1-1-1.732L6 8 1.438 5.366a1 1 0 0 1 1-1.732L7 6.268V1a1 1 0 0 1 1-1'/></svg>");
    background-repeat: no-repeat;
    background-position: center right 10px;
    background-size: .75rem .75rem;
}

.form-control.invalid, .form-control.is-invalid {
    outline: 1px solid var(--dmns-red);
    box-shadow: 0 0 10px var(--dmns-red);
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23b31F17' xmlns='http://www.w3.org/2000/svg'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/><path d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/></svg>") !important;
    background-repeat: no-repeat;
    background-position: center right 10px;
    background-size: .75rem .75rem;
}
/* Used on membership purchase for email duplication validation */
.invalid-custom > input {
    outline: 1px solid var(--dmns-red);
    box-shadow: 0 0 10px var(--dmns-red);
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23b31F17' xmlns='http://www.w3.org/2000/svg'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/><path d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/></svg>") !important;
    background-repeat: no-repeat;
    background-position: center right 10px;
    background-size: .75rem .75rem;
}

#checkout a i {
    display: inline-block;
}

#checkout a span {
    display: none;
}

#checkout .form-label {
    margin-bottom: .25rem;
}

/* New form styling -- revisit when there's time to apply to all forms */
/*#checkout input, #checkout select {
    border: 2px solid #acacac;
    border-radius: .25rem;
    transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out;
}

    #checkout input:hover, 
    #checkout select:hover, 
    #checkout input:checked {
        border-color: #000000;
    }

    #checkout input:focus, #checkout input:active,
    #checkout select:focus, #checkout select:active {
        border-color: var(--dmns-blue);
        box-shadow: 0 0 0 .1rem var(--dmns-blue);
    }

    #checkout input.invalid, #checkout select.invalid {
        border-color: var(--dmns-red);
        box-shadow: none;
    }*/

/*#payment-element:not(.hide) {
    border: 2px solid #acacac;
    border-radius: .5rem;
    padding: .25rem;
    transition: border-color .2s ease-in-out;
}

    #payment-element:not(.hide):hover {
        border-color: #000000;
    }*/

#infoSameAsBilling, #termsAndConditions {
    padding: 0;
    background-image: none;
    background-position: center center;
}

    #infoSameAsBilling.modified.valid, #termsAndConditions.modified.valid {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    }

.validation-message {
    color: var(--dmns-red);
    margin-top: .25rem;
    padding: 0 .25rem;
}

    .validation-message.validation-success {
        color: var(--dmns-green);
        font-size: .8rem;
    }

    .validation-message.validation-error {
        color: var(--dmns-red);
        font-size: .8rem;
    }

#promoValidationAlert div:not(.hide), #microdonationValidationAlert div:not(.hide) {
    display: flex;
    align-items: center;
    padding: .5rem .75rem;
    line-height: 1.1rem;
}

#promoValidationAlert .alert i, #microdonationValidationAlert .alert i {
    padding-right: .75rem;
}

#checkout .cart-wrapper {
    background-color: #e6e6e6;
    border: 2px solid #dddddd;
    border-radius: .25rem;
    padding: .5rem 1rem 1.25rem;
    z-index: 10;
}

    #checkout .cart-wrapper input:focus {
        box-shadow: 0 0 0 .1rem var(--dmns-green);
        border-color: var(--dmns-green);
    }

/* Shared/MicroDonationComponent.razor */
#microdonation {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #bbbbbb;
}

    #microdonation .form-control {
        border-radius: 0 .25rem .25rem 0;
    }

/* #endregion ===== /PURCHASE/CHECKOUT ===== */

/* #endregion ===== /PURCHASE ===== */

/* #region ===== /LOGIN ===== */
.password-visibility {
    border: var(--bs-border-width) solid var(--bs-border-color);
}

/* #region ContactCollisionModal */
.contact-collision-modal{}
.contact-collision-modal .action-btn {
    margin:0 auto
}

#contact-selection input[type="radio"] {
    appearance: none;
}

    #contact-selection input[type="radio"]:checked ~ label {
        background-color: var(--dmns-orange);
    }


/* #endregion ContactCollisionModal */

.dashboard-tab .nav {
    padding-top: 1rem;
}

.dashboard-tab .nav-link {
    border: 1px solid var(--dmns-gray);
    color: #000000;
    margin: 0;
}

    .dashboard-tab .nav-link:hover {
        background-color: #DDDDDD;
    }

    .dashboard-tab .nav-link.active {
        background: var(--dmns-orange);
        color: black;
    }

    /* Order History Tab */

.collapse-icon.collapsed {
    transform: scale(1.5) rotate(-180deg);
    -webkit-transform: scale(1.5) rotate(-180deg);
    -moz-transform: scale(1.5) rotate(-180deg);
    transition: transform 0.2s ease;
    -webkit-transition: transform 0.2s ease;
    -moz-transition: transform 0.2s ease;
}
.collapse-icon {
    transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    transition: transform 0.2s ease;
    -webkit-transition: transform 0.2s ease;
    -moz-transition: transform 0.2s ease;
}

    .collapse-icon:active {
        border: none;
    }

    .collapse-icon:focus-visible {
        border: 1px solid #000000; 
    }

.edit-border {
    border: 2px solid var(--dmns-orange);
    border-radius: .25rem;
}

#userDashboardTabPanes .tab-pane:focus-visible{
    border: 2px solid #000000;
    border-radius: .25rem;
}

#orderHistoryTabPane .table {
    font-size: .8rem;
}
/* #endregion ===== /LOGIN ===== */

/* #region === Footer === */
.footer {
    background: #fafafa;
    padding: 40px;
    color: #222;
    border-top: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    position: relative;
}

    .footer .subscribe-link-wrapper {
        display: flex;
        flex-direction: column;
    }

    .footer .subscription {
        align-self: center;
        display: flex;
        font-weight: bold;
        padding: .75rem 1.5rem;
        margin: .5rem 1rem;
        text-decoration: none;
        width: fit-content;
    }

        .footer .subscription:hover {
            background-color: var(--dmns-blue-hover);
            /*border: 2px solid black;*/
            color: #fff;
        }

        .footer .subscription i {
            display: flex;
            justify-content: center;
            align-items: center;
            padding-right: .5rem;
            font-size: 1rem;
            vertical-align: middle;
        }

    .footer ul.social-links {

        display: flex;
        justify-content: space-evenly;
        align-items: center;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .footer .social-links a {
        border-bottom: none;
        color: #000000;
        display: block !important;
        text-decoration: none;
        transition: transform ease-in .1s;
    }

        .footer .social-links a:hover {
            transform: scale(1.2, 1.2);
        }

    .footer .social-links i {
        font-size: 2rem;
    }

    .footer .acknowledgement-wrapper {
        /*        background-color: #FFFFFF;*/
        background-color: #eee;
        border-radius: .25rem;
        display: flex;
        flex-direction: column;
        margin: .25rem 1rem;
        padding: 1.563rem;
        color: #999;
        font-size: .8rem;
    }

        .footer .acknowledgement-wrapper p:last-of-type {
            margin-bottom: .25rem;
        }

        .footer .acknowledgement-wrapper i {
            align-self: center;
            font-size: 2rem;
            margin-bottom: .5rem;
        }

    .footer .hours-location {
        margin: 2.5rem 0;
        font-size: .8rem;
        line-height: 1.9;
        font-weight: bold;
        flex-direction:column;
    }
    .footer .hours-location .title {border-bottom:2px solid #424242;padding-bottom:4px; margin-bottom:3px}

.footer #SocialAndRecognitionLogos {
    text-align: center;
}
        .footer #SocialAndRecognitionLogos .recognitionLogo {
            max-width: 100px;
            display: inline-flex;
            vertical-align: middle;
        }

.footer .hours-location .hours, .location {
    padding: .25rem;
    width:100%;
}
    .footer address {margin-bottom:0}

    .footer .footer-links {
        display: flex;
        justify-content: center;
        list-style: none;
        margin: 1.875rem 0;
        padding-left: 0;
    }

        .footer .footer-links li {
            padding: .25rem .5rem;
        }

        .footer .footer-links a {
           color: #424242;
            font-size: .8rem;
            font-weight:bold;
        }

    .footer .copyright {
        font-size: .8rem;
        text-align: center;
        margin-top: .25rem;
    }

    .footer .additional {
        font-size: .8rem;
        margin-top: .5rem;
        text-align: center;
    }

        .footer .additional p:last-of-type {
            margin-bottom: .5rem;
        }
/* #endregion === Footer === */

/* ===== Small devices (landscape phones, 576px and up) ===== */
@media (min-width: 576px) {
    /* #region _headerNavigation (Navbar) */
    .overlay-link {
        transform: translate(0rem, 7rem);
    }

    .u-nav-link {
        margin: 0;
        padding: .75rem 0rem;
    }

    .utility-nav {
        align-content: center;
        flex-direction: row;
        flex-wrap: wrap;
    }

    #tickets-link {
        background-color: var(--dmns-green);
        border: 2px solid #000000;
        border-radius: .25rem;
        display: flex;
        justify-content: center;
        position: relative;
        text-align: center;
        width: 100%;
    }

        #tickets-link a {
            margin: 0em 5em;
        }

        #tickets-link:hover {
            font-weight: bold;
            background-color: #333333;
            color: white;
            border: 2px solid var(--dmns-transparent);
            //box-shadow: 0 0 10px var(--dmns-green);
        }

            #tickets-link:hover a, #tickets-link:hover a.bi {
                color: white;
            }

        #tickets-link div {
            /*color: black;*/
            font-size: 1.5em;
            margin: 0;
        }

        #tickets-link .bi {
            /*color: black;*/
            font-size: 2em;
            margin: 0;
            padding-right: 1rem;
        }
    /* #endregion _headerNavigation (Navbar) */

    /* #region _fullScreenSlideShow */
    #full-screen-slideshow .carousel-caption {
        align-items: start;
        text-align: start;
        padding: 2rem 8rem 2.5rem;
    }

        #full-screen-slideshow .carousel-caption .customer-message {
            font-size: 1.5rem;
        }

        #full-screen-slideshow .carousel-caption h1 {
            font-size: 2.25rem;
            margin: 1rem 0rem;
        }

        #full-screen-slideshow .carousel-caption .subheading {
            font-size: 1.25rem;
        }

    /* #endregion _fullScreenSlideShow */

    /* #region _bannerHeading (Content Pages)*/

    /* Reset values at this breakpoint to avoid width issues */
    .embed-half-screen {
        position: relative;
        overflow: hidden;
        padding-top: 56.25%;
    }

        .embed-half-screen iframe {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            width: 100vw;
            height: 100%;
            transform: unset;
        }

    @media (max-aspect-ratio: 16/9) {
        .embed-half-screen iframe {
            /*width = 50 / (9 / 16) = 88.88 */
            width: 100vh;
        }
    }
    /* #endregion _bannerHeading */

    /* #region content blocks */
    #videoModal .modal-content {
        height: 80vh;
    }

    .card-grid .card img {
        width: 600px;
        height: 200px;
    }

    .cardGalleryControls .slick-slide {
        height: auto !important;
    }

    .expandable-card-body {
        padding: 2rem;
    }
    /* #endregion content blocks */

    /* #region ===== /PURCHASE ===== */
    #checkout a i {
        display: none;
    }

    #checkout a span {
        display: inline-block;
    }

    .select-date-text, .select-time-text {
        font-size: 1.5rem;
    }

    .low-capacity {
        background-position: 10% 50%;
    }

    .hx-calendar-month-year-select .form-select:first-child {
        text-align: right;
    }

    #calendarMonthSelect, #calendarYearSelect {
        width: 35%;
    }

    #timepicker .time-button {
        height: auto;
    }

    /* #region ItemsComponent */
    .quantity-label-wrapper {
        border-top: 1px solid var(--dmns-gray);
        border-right: none;
        border-bottom: 1px solid var(--dmns-gray);
        border-left: 1px solid var(--dmns-gray);
        border-radius: .25rem 0 0 .25rem;
    }

        .quantity-label-wrapper div, .quantity-label-wrapper span {
            text-align: right;
        }

    .quantity-input-wrapper {
        border-top: 1px solid var(--dmns-gray);
        border-right: 1px solid var(--dmns-gray);
        border-bottom: 1px solid var(--dmns-gray);
        border-left: 1px solid var(--dmns-gray);
        border-radius: 0 .25rem .25rem 0;
    }
    /* #endregion ItemsComponent */
    /* #endregion ===== /PURCHASE ===== */

    /*  account */


    #orderHistoryTabPane .table {
        font-size: 1rem;
    }

    /* #region _footer */
    .footer .subscribe-link-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .footer ul.social-links {
        padding: .25rem 1rem;
    }

    .footer .social-links a {
        margin: 0 1rem;
    }

    .footer .acknowledgement-wrapper {
        flex-direction: row;
    }

        .footer .acknowledgement-wrapper i {
            padding-right: 1rem;
        }

        .footer .acknowledgement-wrapper p {
            margin-bottom: 0;
        }
   


    /* #endregion _footer */
}

/* ===== Medium devices (tablets, 768px and up) ===== */
@media (min-width: 768px) {

    /* #region NavigationBar */
    .u-nav-no-icon {
        display: list-item;
        flex-basis: initial;
    }

        .u-nav-no-icon > a {
            font-size: 1rem;
            border-bottom: 3px solid #a1a912;
        }

    #u-nav-1 {
        order: unset;
    }

    #u-nav-2 {
        order: unset;
    }

    #u-nav-3 {
        order: unset;
    }

    #u-nav-4 {
        order: unset;
    }

    #u-nav-5 {
        order: unset;
    }

    #u-nav-6 {
        order: unset;
    }

    #tickets-link {
        order: unset;
    }
    /* #endregion NavigationBar */

    /* #region _fullScreenSlideShow */
    #full-screen-slideshow .slick-slide img,
    #full-screen-slideshow .slick-slide video {
        /* set max width to avoid issues on large resolutions */
        height: 92vh;
        max-width: 100%;
        width: 100vw;
    }
    #full-screen-slideshow .carousel-caption .customer-message {
        font-size: 1.75rem;
    }

    #full-screen-slideshow .carousel-caption h1 {
        font-size: 3rem;
    }

    #full-screen-slideshow .carousel-caption .subheading {
        font-size: 1.5rem;
    }
    /* #endregion _fullScreenSlideShow */

    /* On _fullScreenSlideshow and _bannerHeading */
    /* Override dynamic p margin */
    .caption-text-wrapper p {
        margin: 0;
    }

    /* #region _bannerHeading */
    .banner-wrapper {
        align-items: center;
        flex-direction: column;
        position: relative;
    }

    .heading-wrapper {
        align-items: start;
        backdrop-filter: unset;
        background: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3));
        height: 100%;
        justify-content: center;
        text-align: left;
    }

    .embed-full-screen {
        height: 100%;
        display: block;
    }

    .embed-half-screen iframe {
        /*height: 450px;*/
        width: 100%;
    }
    /* #endregion _bannerHeading */

    /* #region content blocks */
    .expandable-card-body {
        margin: 1rem 4rem;
    }

    .expandable-card img {
        padding-top: 2rem;
        object-fit: contain;
        border-radius: .25rem;
    }

    .two-column-wrapper img {
        height: 17rem;
        aspect-ratio: 16/9;
        object-fit: cover;
    }

    .cardGalleryControls .img-wrapper {
        height: 10rem;
    }

    /* #region imageGridGallery */

    .gallery img {
        height: 200px;
    }

    /* override .glightbox-clean class */
    .glightbox-clean .gslide-description {
        background: transparent;
    }

        .glightbox-clean .gslide-description .gdesc-inner {
            background: transparent;
        }

    .glightbox-clean .gslide-title {
        color: white;
    }

    .glightbox-clean .desc-more {
        text-decoration: none;
        color: white;
        opacity: .75;
    }

    /* #endregion imageGridGallery */
    /* #endregion content blocks */

    /* #region ===== /PURCHASE ===== */
    .custom-col {
        height: 24rem;
    }

    /* Undo margin/padding from small resolution */
    .product-titleTemplate-image {
        margin-top: 0;
    }

    .product-titleTemplate-description {
        padding-top: 0;
    }

        .product-titleTemplate-description p:last-child {
            margin: 0;
        }


    .select-date-text, #tickets .select-time-text {
        font-size: 1.75rem;
    }

    .quantity-label-wrapper {
        justify-content: space-between;
    }

    /* #region /Views/MembershipForm.cshtml */

    .mbr-form-tab {
        width: 100%;

    }

    #mbrPurchaseTabContent .form-group {
        justify-content: space-evenly;
    }

    /* Following used for horizontal cards on Login and Membership components */
/*    #reviewMembership .card-header, #dashboardAccountInfoPane .card-header {
        border-bottom: none;
        border-right: 1px solid rgba(0, 0, 0, .175);
        padding: 1rem;
    }*/

    .horizontal-card-header {
        border-bottom: none;
        border-right: 1px solid rgba(0, 0, 0, .175);
        padding: 1rem;
    }

        .horizontal-card-header:first-child {
            border-radius: 0;
        }

/*        #reviewMembership .card-header:first-child, #dashboardAccountInfoPane .card-header:first-child {
            
        }*/

    /* #endregion /Views/MembershipForm.cshtml */

    /* #endregion ===== /PURCHASE ===== */

    /* #region _footer */
    .footer .subscription {
        padding: .75rem 3rem;
    }

    .footer .hours-location {
        display: flex;
        justify-content: space-around;
        flex-direction:row
    }
        .footer .hours-location .hours, .location {
            width: 47%;
        }


    .footer .footer-links li:hover {
        transform: scale(1.1);
    }

    /* #endregion _footer */
}

/* ===== Large devices (desktop, 992px and up) ===== */
@media (min-width: 992px) {

    /* Set body and html to 100% height to ensure full viewport coverage */
    html {
        margin: 0;
        min-height: 100vh;
        padding: 0;
    }

    /* Create a flex container to vertically align header, main, and footer */
    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        position: relative;
    }

    /* Expand the main content to fill the available space */
    main {
        flex: 1;
        overflow-x: inherit;
    }

    header {
        /* change position so it doesn't cover the alert */
        position: relative;
        background: #fafafa;
        padding: 5px 0 0 0;
        border-bottom: 1px solid #ddd
    }
    .navbar a {
        color: currentcolor;
        text-decoration: none;
        transition: color .4s ease;
    }

    /* Set a fixed height for the footer */
    footer {
        flex-shrink: 0;
        height: auto;
    }

    .section-wrapper, #checkout {
        padding: 0 30px
    }

    .product .nav-link {
    }

    /* #region _headerNavigation (Navbar) */
    .navbar {
        padding: 0 .5rem;
        position: relative;
        background: #fafafa;
        border:none;
        max-width:1440px
    }

    .navbar-brand {
        display: flex;
        margin: 0rem;
    }

    .nav-wrapper {
        width: 100%;
        background: #fafafa;
    }

    /*Non JS way of doing sub nav stuff on non-touch devices*/

    body:not(.touch-device) .dropdown-menu.show:hover {

    }
        #navbarOffcanvasLg .offcanvas-body {
        background: transparent;
        flex-direction: column-reverse;
        flex-grow: unset;
        justify-content: space-between;
        padding: 0rem;
        width: 100%;
    }

    /* #region Main Nav */
    .main-nav-item a[aria-expanded='false'] {
        color: white;
    }

    .column-dropdown {
        border-bottom: none;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        list-style: none;
        margin: 0;
        padding: .5rem 0;
    }

    .dropdown-toggle {white-space:normal; display:block;}

    .dropdown-item {
        margin-top: 0;
        padding: .25rem;
    }

        .dropdown-item.stretched-link {
            font-size: 1rem;
            padding: 0.5em;
            transform: unset;
        }

    .dropdown-toggle {
        height: unset;
        padding: 0;
    }

        .dropdown-toggle .bi-chevron-left {
            display: none;
        }

    .dropdown-menu {
        left: 0;
        min-width: max-content;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        transition: visibility 0s linear 1000ms, opacity 1000ms;
        visibility: hidden;
        width: 90%;

    }

        .dropdown-menu.show {
            opacity: 1;
            background-color: #FFFFFF;
            border: none;
            border-radius: .25rem;
            box-shadow: none;
            transition: visibility 0s linear 0s, opacity 1000ms;
            visibility: visible;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
        }

    .navigationLinkColumn {display:flex; padding-left:2rem}

    .hours-address {
        align-items: baseline;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        font-size: .8rem;
        justify-content: space-around;
    }

        .hours-address p {
            margin: 0em 1em;
            padding: .1em 0em;
            white-space: nowrap;
        }

    .main-nav {
        margin: 0;
        padding-top: .5rem;
        padding-bottom: 0;
    }

    .main-nav-item {
        border: none;
        display: block;
        padding: 0;
        position: static;
        margin: unset;
        width:100%;
    }

   

    a.main-nav-link {
        display: flex;
        padding: 15px;
        min-height: 78px;
        text-align: center;
        justify-content: center;
        align-items: center;
        color: #424242;
        margin: 0;

        font-size:1rem
    }
    
        .main-nav-link:has(+ .dropdown-menu.show) {
            color: var(--dmns-green);
        }



        /*LOOK MA, NO JAVASCRIPT*/
    .main-nav-item:hover a.main-nav-link, .main-nav-link:hover {
        color: var(--dmns-green);
        font-weight: normal;
        transform: scale(1.05);
        transition-timing-function: ease;
        background: #424242;
    }



        .main-nav-link:visited {
            /*color: white;*/
        }

            .main-nav-link:visited:hover {
                color: var(--dmns-green);
            }

        .main-nav-link.show {
            color: var(--dmns-green) !important;
        }

    .nav-img {
        border-radius: 0rem;
    }

    .overlay-link {
        padding: 0.5em;
    }

    .subnav-wrapper {
        margin-top: 0rem;
        /*padding-bottom: unset;*/
        padding-right: 1rem;
        padding-left: 1rem;
        border:1px solid #ccc
    }

    .subcolumn {
        display: flex;
        flex-direction: column;
        margin: 0;
        max-width: 100%;
    }
    /* #endregion Main Nav */

    /* #region Utility Nav */
    .utility-nav {
        align-items: center;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding: .5rem;
        width: inherit;
    }

    .u-nav-item {
        font-size: 1rem;
        padding: unset;
    }

        .u-nav-link .bi {
            color: #424242;
            padding-right: 0rem;
        }

    .u-nav-link:hover .bi, .u-nav-link#login-link:hover .u-nav-with-icon {
        color: var(--dmns-green);
        text-decoration: none;
        transform: scale(1.1);
        border-bottom: none;
    }

    .u-nav-link#login-link:hover .u-nav-with-icon {
        transform: none;
    }

        .u-nav-link:visited:hover {
            color: var(--dmns-green);
        }

        .u-nav-link .u-nav-with-icon {
            display: none;
        }

        .u-nav-link#login-link .u-nav-with-icon {
            display: block;
            color: #424242;
            margin: .25rem 0rem 0rem .25rem;
        }

        .u-nav-no-icon {
            margin: .25rem;
        }
    /* Space for cart badge */
    #u-nav-4 {
        margin-right: .25rem;
    }

    .u-nav-no-icon > a {
        border: none;
        margin: 0rem;
        padding: .25rem .5rem;
    }

    .u-nav-no-icon a:hover {
        border-bottom: 3px solid #a1a912;
    }

    /* Ensuring that the hover/click is on the icon or text and not it's wrapper */
    .u-nav-no-icon .u-nav-link > div {
        padding: 0rem .5rem;
    }

    .u-nav-no-icon > .u-nav-link.green-u-nav {
        color: var(--dmns-dark-green);
        border: 2px solid var(--dmns-dark-green);
        border-radius: .25rem;
    }

        .u-nav-no-icon > .u-nav-link.green-u-nav:hover {
            background-color: var(--dmns-green);
            color: black;
            font-weight: normal;
            transform: unset;
        }

    .u-nav-no-icon > .u-nav-link.blue-u-nav {
        color: var(--dmns-corporate-readibility-blue);
        border: 2px solid var(--dmns-corporate-readibility-blue);
        border-radius: .25rem;
    }

            .u-nav-no-icon > .u-nav-link.blue-u-nav:hover {
                background-color: var(--dmns-corporate-blue);
                color: black;
                font-weight: normal;
                transform: unset;
            }

    .modal-backdrop.show {
        z-index: 10;
    }

    #modalCart .modal-dialog {
        height: inherit;
        margin-right: 0;
        margin-top: 0;
        margin-bottom: 0;
        max-width: 35vw;
    }

    #modalCart .modal-content {
        height: 100%;
    }

    /* overwrite _position.scss z-index so it doesn't cover cart modal when shown */
    .sticky-lg-top {
        z-index: 3;
    }

    #tickets-link {
        border: 2px solid transparent;
        margin: 0;
        margin-left: .25rem;
        width: auto;
    }

        #tickets-link:hover {
            background-color: var(--dmns-green);
            border: 2px solid var(--dmns-green);
            color: black;
            font-weight: normal;
        }

        #tickets-link a {
            color: black;
            margin: 0;
            padding: .25rem .75rem;
        }

            #tickets-link:hover a {
                color: black;
                font-weight: normal;
            }

        #tickets-link div {
            font-size: 1rem;
        }

        #tickets-link .bi {
            color: black;
            font-size: 1.25rem;
            padding-right: .5rem;
        }

            #tickets-link:hover .bi {
                color: black;
                transform: unset;
            }

/*        #tickets-link:hover {
            font-weight: bold;
            background-color: transparent;
            color: white;
            border: none;
            box-shadow: none;
        }

            #tickets-link:hover a, #tickets-link:hover a.bi {
                color: white;
            }*/
    /* #endregion Utility Nav */

    /* #endregion _headerNavigation (Navbar) */

    /* #region _fullScreenSlideshow */
    .full-screen-slideshow-wrapper {
        position: relative;
    }

    #full-screen-slideshow {
        position: relative;
    }

        #full-screen-slideshow .carousel-caption .customer-message {
            font-size: 2rem;
        }

        #full-screen-slideshow .carousel-caption h1 {
            font-size: 3.5rem;
        }

    /* #endregion _fullScreenSlideshow */

    /* _bannerHeading */
    .banner-wrapper {
        max-height: 100vh;
    }

        .banner-wrapper img {
            height: 450px;
            object-fit: cover;
            width: 100%;
        }

    /* #region content blocks */
    .gallery img {
        height: 275px;
    }

    .expandable-card {
        padding: 1.5rem;
    }

    .expandable-card-body {
        margin: 0rem;
        padding: 2rem;
    }

    .expandable-card img {
        border-radius: .25rem;
        padding: 1.5rem;
        max-width: 600px;
        max-height: 400px;
    }

    .two-column-wrapper img {
        height: 20rem;
    }

    .cardGalleryControls .img-wrapper {
        height: 9rem;
    }
    /* #endregion content blocks */

    /* #region Purchase/Tickets */
    .showTimes .btn.time-button {
        padding: .3rem;
    }

    .productSelectButton {
        justify-self: center;
        padding: .5rem 6rem;
        width: 66.6%;
    }

    #productBuilder .component-container {
        flex-flow: row wrap;
    }

        #productBuilder .component-container > div:first-child {
            border-right: 1px solid var(--dmns-gray);
        }

    #productBuilder .product-buttons .hx-toast-container .toast {
        width: 50vw;
        height: auto;
    }

    .select-date-text, .select-time-text {
        font-size: 2rem;
    }

    .hx-calendar {
        padding: 1rem;
    }

    .productCalendar label {
        text-align: left;
    }

    .productCalendar .hx-input-date-wrapper .hx-input-date-dropdown-menu {
        box-shadow: none;
        border: none;
    }

    #typeScroller {
        text-align: left;
    }

    #checkout .cart-wrapper {
        padding: .75rem;
        margin-bottom: 7rem;
    }
    /* #endregion Purchase/Tickets */

    .offcanvas-body.flex-column {
        margin-top: 1.25rem;
    }

    .footer ul.social-links {
        flex-wrap: wrap;
    }

    .footer #SocialAndRecognitionLogos {
        text-align: right
    }


}

/* ===== X-Large devices (large desktops, 1200px and up) ===== */
@media (min-width: 1200px) {
    
    /* #region _headerNavigation */
    .main-nav-link {
        margin: 0;
    }

    .dropdown-menu {
        width: 82%;
    }
    /* #endregion _headerNavigation */

    /* #region _fullScreenSlideShow */

    #full-screen-slideshow .carousel-caption h1 {
        font-size: 4rem;
    }
    /* #endregion _fullScreenSlideShow */

    /* #region content blocks */

    .section-padding {
        padding: 2rem 3rem;
    }

    .card-grid .card img {
        height: 250px;
    }

    .gallery img {
        height: 350px;
    }

    .two-column-wrapper img {
        height: 22rem;
    }

    .cardGalleryControls .img-wrapper {
        height: 11em;
    }
    /* #endregion content blocks */
}

/* ===== XX-Large devices (larger desktops, 1400px and up) ===== */
@media (min-width: 1400px) {
    .container {
        margin: auto;
        max-width: 1440px;
    }

    /* #region _headerNavigation */

    .column-dropdown {
        margin: .5rem 2rem;
    }

    .navbar {
        margin: auto;
    }
    .main-nav {
        padding-top: 0rem;
    }

    .dropdown-menu {
        /*width: 70%;
        max-width: 1000px;*/
    }

    /* #endregion _headerNavigation */

    /* #region content blocks*/

    .section-padding {
        margin: auto;
        padding: 3rem 4rem;
        display: flex;
        flex-direction: column;
    }

    .expandable-card {
        max-width: 100%;
    }

    .media-caption-wrapper {
        max-width: 100%;
    }

    .banner-wrapper img {
        height: 40vh;
    }

    .heading-wrapper .caption-text-wrapper h1 {
        font-size: 4rem;
    }

    .cardGalleryControls .img-wrapper {
        height: 14em;
    }

    /* #endregion content blocks */

    /* #region purchase */
    #calendarMonthSelect, #calendarYearSelect {
        width: 25%;
    }

/*    #productBuilder .component-container {
        max-width: 1440px;
        margin: 0 auto;
    }*/
    /* #endregion purchase */

    /* #region _footer */
    .footer {
        align-items: center;
    }

        .footer .subscribe-link-wrapper {
            justify-content: space-between;
            
        }

        .footer .subscription {
            margin: 0;
        }

        .footer ul.social-links {
            padding: .5rem 0;
        }

        .footer .acknowledgement-wrapper {
           
            
        }

        .footer .hours-location {
            justify-content: space-between;
        }

        .footer .footer-links {
            
        }
    /* #endregion _footer */
}

/*
  $grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1400px
  );
*/