:root {

    --qrz-blue-300: #99ccff;
    --qrz-green-300: #99ffcc;

    --qrz-blue: #238cff;
    --qrz-green: #23ff8c;
    --qrz-blue-rgb: 35, 140, 255;
    --qrz-green-rgb: 35, 255, 140;

    --qrz-blue-hover: #147be6;
    --qrz-green-hover: #14e67b;
    --qrz-blue-hover-rgb: 20, 123, 230;
    --qrz-green-hover-rgb: 20, 230, 123;

    --qrz-blue-active: #0f68c7;
    --qrz-green-active: #0fc768;
    --qrz-blue-soft: #e6f2ff;
    --qrz-green-soft: #e6fff2;

    /* Global overrrides */
    --bs-primary: var(--qrz-blue);
    --bs-primary-rgb: 77, 163, 255;

    --bs-link-color: var(--qrz-blue);
    --bs-link-color-rgb: var(--qrz-blue-rgb);
    --bs-link-hover-color: var(--qrz-blue-hover);
    --bs-link-hover-color-rgb: var(--qrz-blue-hover-rgb);

    --bs-focus-ring-color: rgba(var(--qrz-blue-rgb), 0.25);

    --bs-info: #6fb6ff;
    --bs-info-rgb: 111, 182, 255;

    --bs-info-bg-subtle: #f2f8ff; /* slightly brighter, less gray */
    --bs-info-border-subtle: #cfe6ff; /* cleaner edge */
    --bs-info-text-emphasis: #0b5394; /* stronger readable blue */

}



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

.form-check-input:focus {
    border-color: var(--qrz-blue);
    box-shadow: 0 0 0 0.25rem rgba(var(--qrz-blue-rgb), 0.25);
}
/***********************************************************************************************************************
 * Body
 */
body {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-tertiary-bg-rgb),var(--bs-bg-opacity))!important;
}

/* mobile */
@media (max-width: 991.98px) {
    body {
        padding-top: 45px; /* match navbar height */
    }
}

/***********************************************************************************************************************
 * Header
 */

.site-header {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "top"
        "notifications"
        "mainnav"
        "topright"
        "ad";
    row-gap: 0;
}

.header-top {
    grid-area: top;
    min-width: 0;
    align-self: last baseline;

}

.header-ad {
    grid-area: ad;
    display: flex;
    justify-content: center;
}

.main-nav-row {
    grid-area: mainnav;
}

.top-right-row {
    grid-area: topright;
}

.nav-search-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    width: 100%;
}

.nav-btn {
    padding-left: 0;
    padding-right: 0;
    width: 2rem;
}

/* mobile */
@media (max-width: 991.98px) {
    .header-ad {
        justify-content: center;
    }
    .header-top {
        display: none;
    }
    .top-right-row {
        display: none!important;
    }
}

/* desktop */
@media (min-width: 992px) {
    .site-header {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "top ad"
            "notifications notifications"
            "mainnav mainnav"
            "topright topright";
        column-gap: 1rem;
        row-gap: 0;
        align-items: start;
    }

    .header-ad {
        justify-content: end;
        align-self: start;
    }



    .nav-search-btn {
        display: none!important;
    }

    #offcanvasUserMenu {
        display: none!important;
    }
}

/***********************************************************************************************************************
 * Main Navigation
 */

.qrz-navigation-region-top-navbar.navbar, #nav-search-overlay {
    background-color: var(--qrz-blue-soft);
    --bs-border-color: #dbeafe;
    width: 100%;
}

.qrz-navigation-region-top-navbar.navbar .offcanvas {
    --bs-offcanvas-width: 300px;

}

.qrz-navigation-region-top-navbar .dropdown-menu.nav-level-1 .nav-item {
    padding-left: .5em;
    padding-right: .5em;
}

.qrz-navigation-region-top-navbar .menu-logo img {
    max-height: 44px;
    margin-bottom: -6px;
}

.qrz-navigation-region-top-navbar .nav-level-0 > .nav-item > .nav-link {

    --bs-dropdown-border-radius: var(--bs-border-radius);
    --bs-dropdown-border-width: var(--bs-border-width);
    border: var(--bs-dropdown-border-width) solid transparent;
    border-radius: var(--bs-dropdown-border-radius) var(--bs-dropdown-border-radius) 0 0 ;

    border-bottom: none;
    user-select: none;

    transition: none;
    --bs-text-opacity: 1;
    color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important;
    font-weight: 600 !important;
}
.qrz-navigation-region-top-navbar .offcanvas.show .nav-level-0 > .nav-item > .nav-link  {
    border-color: transparent!important;
}
.qrz-navigation-region-top-navbar .nav-level-0 > .nav-item > .nav-link.dropdown-toggle.show {
    --bs-dropdown-color: var(--bs-body-color);
    --bs-dropdown-bg: var(--bs-body-bg);
    --bs-dropdown-border-color: var(--bs-border-color-translucent);
    --bs-dropdown-border-radius: var(--bs-border-radius);
    --bs-dropdown-border-width: var(--bs-border-width);
    background-color: var(--bs-dropdown-bg);
    border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
    border-radius: var(--bs-dropdown-border-radius) var(--bs-dropdown-border-radius) 0 0 ;
    z-index: 1001;
    border-bottom: none;
}


.qrz-navigation-region-top-navbar .dropdown-menu {
    background-color: #E1F4FF;
    border-color: transparent;
    pointer-events: none;

    margin-top: -1px !important;
    border-radius: 0 var(--bs-dropdown-border-radius) var(--bs-dropdown-border-radius) var(--bs-dropdown-border-radius);
}
.qrz-navigation-region-top-navbar .dropdown-menu.show {
    --bs-dropdown-border-color: var(--bs-border-color-translucent);
    --bs-dropdown-bg: var(--bs-body-bg);
    border-color: var(--bs-dropdown-border-color);
    background-color: var(--bs-dropdown-bg);
    pointer-events: auto;

}
.qrz-navigation-region-top-navbar .dropdown-menu-end {
    --bs-dropdown-border-radius: var(--bs-border-radius);
    border-radius: var(--bs-dropdown-border-radius) 0 var(--bs-dropdown-border-radius) var(--bs-dropdown-border-radius);
}

.qrz-navigation-region-top-navbar .dropdown-item.active, .qrz-navigation-region-top-navbar  .dropdown-item:active {
    background-color: var(--qrz-blue-soft);
}


/* round corners once nav is no longer full width */
@media (min-width: 1400px) {
    .qrz-navigation-region-top-navbar {
        border-radius: var(--bs-border-radius);
        padding-left: 0
    }
}

/* mobile */
@media (max-width: 991.98px) {

    .mads {
        max-width: 500px;
    }

    .qrz-navigation-region-top-navbar, #nav-search-overlay {
        border-top: none!important;
        border-right: none!important;
        border-left: none!important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1030;
        width: 100vw !important;
        padding-right: 1rem;
    }

    #nav-search-box {
        display: none!important;
    }

    /* transform top level into offCanvas header */
    #nav-user-menu > li.nav-item > span.nav-link {
        display: block;
        display: flex;
        align-items: center;
        padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
        line-height: var(--bs-offcanvas-title-line-height);
        font-weight: 500!important;
        pointer-events: none;
    }
    #nav-user-menu > li.nav-item > span.nav-link > span.nav-item-title {
        font-size: 1.25rem;

    }
    #nav-user-menu > li.nav-item > span.nav-link > span > svg {
        font-size: 2rem !important;

    }
    /* force child display */
    #nav-user-menu > li.nav-item > ul.dropdown-menu {
        display: block;
        padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
    }

    /* force bold */
    #nav-user-menu li.nav-item span.nav-item-title {
        --bs-text-opacity: 1;
        color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important;
        font-weight: var(--bs-nav-link-font-weight) !important;
        color: var(--bs-nav-link-color);
    }

    #nav-user-menu .dropdown-menu {
        background-color: unset !important;
    }

    /* hide the normal dropdown icon */
    #nav-user-menu .dropdown-toggle::after {
        display: none;
    }

    /* show the hidden close button */
    #nav-user-menu .dropdown-toggle .btn-close {
        display: block !important;
        pointer-events: all !important;

    }
    /* allow click events */
    #nav-user-menu  .dropdown-menu {
        pointer-events: unset;
        margin-top: unset;
    }

    .qrz-navigation-region-top-navbar .dropdown-menu {
        border: none;
        padding-top: 0;
        margin-top:0;
    }
    .dropdown-item.active, .dropdown-item:active {
        background-color: var(--qrz-blue-soft);
    }
    .qrz-navigation-region-top-navbar .dropdown-menu.nav-level-1 .nav-item {
        padding-left: 0;
        padding-right: 0;
    }
}


/* desktop */
@media (min-width: 992px) {
    .qrz-navigation-region-top-navbar .menu-logo {
        display: none !important;;
    }
}



.page-title-header {
    display: inline-block;
    border-bottom: 2px solid var(--qrz-blue);
}

.page-title-header .page-subtitle {

}

.flex-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 100dvh;
}

.table td.fit,
.table th.fit {
    white-space: nowrap;
    width: 1%;
}





/* Form Controls */
form .form-label {
    font-weight: 600;
}

form .form-label.required {
    position: relative;
}

form .form-label.required::after {
    content: " *";
    color: var(--bs-danger);
    font-weight: bold;
}

form .form-label.required:hover::before {
    content: "Required field";
    position: absolute;
    left: 0;
    bottom: -1.5rem;
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: .75rem;
    white-space: nowrap;
}

/** Custom font sizes */
.fs-sm {
    font-size: .875rem!important;
}
.fs-xs {
    font-size: .750rem!important;
}


.qrz-navigation-footer.col {
    flex: 1 1 200px; /* grow + shrink but prefer 200px */
}

/***********************************************************************************************************************
 * Top Marketing
 */
.mads {
    width: 100%;
    max-width: 728px;
    aspect-ratio: 728 / 90;
    text-align: right;
}

.mads img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* desktop */
@media (min-width: 992px) {
    .mads {
        max-width: 728px;
        height: 90px;
    }
}

/***********************************************************************************************************************
 * Left Marketing
 */
body .lads {
    margin-bottom: 8px;
    width: 125px;
    overflow: hidden;

}
body .lads img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* or cover */
}
@media (max-width: 768px) and (hover: none) {
    /* real phones */
    body .lads {
        margin-bottom: 8px;
        width: 100px;
        aspect-ratio: 1;
        overflow: hidden;
    }

}

.container-fluid {
    max-width: 1400px;
}



/* Content Blocks */
.block {


}

.block.blockCannotDisplay {
    border: 1px solid grey;

    --bs-border-opacity: 0.25;
    border-color: rgba(var(--bs-secondary), var(--bs-border-opacity)) !important;
    border-radius: var(--bs-border-radius);
    padding: .25rem;
    margin: .25rem;
    text-align: center;
    color: var(--bs-secondary);
    background-color: var(--bs-secondary-bg) !important;


}

.contentPageTitle {
    margin-bottom: .75em !important;
}

.contentPageTitle > h2 {
    margin-bottom: 0 !important;
}



#qrzRightCol {
    width: 160px;
}


/* disabled rounded on small screen */

nav.qrz-navigation-region-top-navbar {
    padding-left: 0.25rem;
}
nav.qrz-navigation-region-top-navbar.navbar-collapse > ul {
    margin-bottom: 0!important;
}

nav.qrz-navigation-region-top-navbar .navbar-collapse > ul > li > a,
nav.qrz-navigation-region-top-navbar .navbar-collapse > ul > li > span {
    padding-left: .5rem;
}

nav.qrz-navigation-region-top-navbar .navbar-collapse > ul > li > ul > li > a {
    padding-left: .5rem;
}

nav.qrz-navigation-region-top-navbar .navbar-collapse ul.dropdown-menu {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-left: .75rem;
    overflow: hidden;
}

nav.qrz-navigation-region-top-navbar .nav-item.border-top {
    --bs-dropdown-border-color: var(--bs-border-color-translucent) !important;
    --bs-border-color: var(--bs-dropdown-border-color);
    border-color: var(--bs-dropdown-border-color) !important;
    border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}


.caution-tape {
    display: inline-block;
    padding: 1rem 2rem;
    font-weight: 700;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #111;
    background: repeating-linear-gradient(
        -45deg,
        #f7d400 0 20px,
        #111 20px 40px
    );
    border: 3px solid #111;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    margin-left: -1em;
    margin-right: -1em;
}

.caution-tape.reverse {
    background: repeating-linear-gradient(
        45deg,
        #f7d400 0 20px,
        #111 20px 40px
    );
}