.Footer__footer--NjGqT {
    grid-column: full;
    background-color: var(--md-sys-color-surface-container-high);
    background-image: var(--v5f31587c);
    background-size: cover;
    background-repeat: no-repeat;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 1rem;
    line-height: 1.6;
    display: grid;
    grid-template-columns: 1fr minmax(0, var(--dhp-page-max-width)) 1fr;
}
.Footer__columns--K5897 {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--dhp-space-xl);
    padding: var(--dhp-space-2xl) var(--dhp-gutter);
}
.Footer__companyInfo--BRhWP {
    display: flex;
    flex-direction: column;
}
.Footer__companyInfo--BRhWP strong {
        color: var(--md-sys-color-on-surface);
        margin-block-end: 0.25rem;
}
.Footer__companyInfo--BRhWP a {
        color: inherit;
        text-decoration: none;
}
.Footer__companyInfo--BRhWP a:hover {
            text-decoration: underline;
}
.Footer__companyInfo--BRhWP a:focus-visible {
            outline: 2px solid var(--md-sys-color-primary);
            outline-offset: 2px;
}
.Footer__menuGroup--buai1 {
    display: flex;
    flex-direction: column;
    text-align: center;
}
.Footer__menuGroupHeading--Ctqul {
    color: var(--md-sys-color-on-surface);
    margin: 0 0 0.5rem;
    font-size: inherit;
    font-weight: bold;
    line-height: inherit;
}
.Footer__menuList--pM_kQ {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.Footer__menuLink--MZy3a {
    color: var(--md-sys-color-on-surface-variant);
    text-decoration: none;
    padding: 0.15rem 0;
}
.Footer__menuLink--MZy3a:hover {
        text-decoration: underline;
}
.Footer__menuLink--MZy3a:focus-visible {
        outline: 2px solid var(--md-sys-color-primary);
        outline-offset: 2px;
}
.Footer__copyrightColumn--KWqEN {
    grid-column: -1 / -2;
    display: flex;
    flex-direction: column;
    text-align: right;
}
.Footer__copyrightColumn--KWqEN > div {
        display: flex;
        flex-direction: column;
}
.Footer__agency--Yni1Y {
    margin-block-start: 1.5rem;
    font-size: 0.8rem;
    color: var(--md-sys-color-outline);
}
.Footer__agency--Yni1Y a {
        color: var(--md-sys-color-outline);
        text-decoration: none;
}
.Footer__agency--Yni1Y a:hover {
            text-decoration: underline;
}
.Footer__agency--Yni1Y a:focus-visible {
            outline: 2px solid var(--md-sys-color-primary);
            outline-offset: 2px;
}
.Footer__visuallyHidden--rs2BQ {
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
}
.Footer__editableContent--xqgBN {
    margin-block-start: 1rem;
    font-size: 0.8rem;
}
.Footer__bottomBar--quvVE {
    grid-column: 2;
    border-block-start: 1px solid var(--md-sys-color-surface-container-highest);
    padding: var(--dhp-space-md) var(--dhp-gutter);
    display: flex;
    justify-content: center;
}
.Footer__consentPill--qjgbl {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border: none;
    border-radius: 2em;
    padding: 0.4em 1.5em;
    font-size: 0.85rem;
    cursor: pointer;
    transition: opacity 0.15s;
}
.Footer__consentPill--qjgbl:hover {
        opacity: 0.85;
}
.Footer__consentPill--qjgbl:focus-visible {
        outline: 2px solid var(--md-sys-color-primary);
        outline-offset: 2px;
}
@media print {
.Footer__footer--NjGqT {
        display: none;
}
}
@media screen and (width <= 768px) {
.Footer__columns--K5897 {
        grid-template-columns: 1fr;
        padding: var(--dhp-space-xl) var(--dhp-gutter);
}
.Footer__menuGroup--buai1 {
        text-align: left;
}
.Footer__copyrightColumn--KWqEN {
        text-align: left;
}
.Footer__bottomBar--quvVE {
        padding: var(--dhp-space-md) var(--dhp-gutter);
}
}


.Dispatcher__dispatcher--OB3Py {
    grid-column: full;
    grid-row: 1;
    /*
     * Reserve at least one viewport height for the routed page even when the
     * content is still loading or has been torn down mid-transition. Without
     * this, the dhpApp grid row 1 collapses to the intrinsic height of an
     * empty Dispatcher during the <transition> out→in gap, pulling the footer
     * up into the viewport for a split second before the new page mounts.
     *
     * The dhpApp has min-height: 100vh, so subtracting the footer's own
     * height keeps the footer glued to the bottom of the first screenful
     * until real content arrives and grows the row naturally.
     */
    min-height: 100vh;
}
.Dispatcher__pageContainer--lYQst {
    display: flex;
    flex-direction: column;
    align-items: center;
}
@media print {
.Dispatcher__dispatcher--OB3Py {
        grid-column: auto;
        grid-row: auto;
        min-height: 0;
}
.Dispatcher__pageContainer--lYQst {
        display: block;
}
}


.dhp-fade-enter-active,
.dhp-fade-leave-active {
    transition: opacity 0.15s ease;
}
.dhp-fade-enter-from,
.dhp-fade-leave-to {
    opacity: 0;
}
@media print {
.dhp-fade-enter-from,
    .dhp-fade-leave-to {
        opacity: 1;
}
.dhp-fade-enter-active,
    .dhp-fade-leave-active {
        transition: none;
}
}


.DhpApp__dhpApp--DiYd1 {
    /* Layout design tokens */
    --dhp-sidebar-width: 264px;
    --dhp-page-max-width: 1900px;
    --dhp-header-height: 78px;

    /* Spacing scale */
    --dhp-space-xs: 0.25rem;
    --dhp-space-sm: 0.5rem;
    --dhp-space-md: 1rem;
    --dhp-space-lg: 1.5rem;
    --dhp-space-xl: 2rem;
    --dhp-space-2xl: 3rem;
    --dhp-space-3xl: 4rem;

    /* Page edge gutter */
    --dhp-gutter: var(--dhp-space-xl);

    /* Map modal-dialog variables expected by shared overlay components */
    --modal-dialog-background-color: var(--md-sys-color-surface, #ffffff);
    --modal-dialog-text-color: var(--md-sys-color-on-surface, #000000);
    --modal-dialog-title-color: var(--md-sys-color-on-surface, #000000);
    --modal-dialog-overlay-1-color: var(--md-sys-color-surface-container, #f0f0f0);
    --modal-dialog-primary-color: var(--md-sys-color-primary, #000000);
    --modal-dialog-primary-color-contrast: var(--md-sys-color-on-primary, #ffffff);
    --modal-dialog-primary-color-outline: var(--md-sys-color-outline, #000000);
    --modal-dialog-secondary-color: var(--md-sys-color-secondary, #000000);
    --modal-dialog-secondary-color-contrast: var(--md-sys-color-on-secondary, #ffffff);
    --modal-dialog-secondary-color-outline: var(--md-sys-color-outline, #000000);

    /* Shared color tokens expected by v2TemplateComponents (buttons, overlays, etc.) */
    --primary-color: var(--md-sys-color-primary, #000000);
    --primary-color-contrast: var(--md-sys-color-on-primary, #ffffff);
    --primary-color-outline: var(--md-sys-color-outline, #000000);
    --secondary-color: var(--md-sys-color-secondary, #000000);
    --secondary-color-contrast: var(--md-sys-color-on-secondary, #ffffff);
    --secondary-color-outline: var(--md-sys-color-outline, #000000);
    --main-overlay-1-color: var(--md-sys-color-surface-container, #cccccc);
    --main-overlay-2-color: var(--md-sys-color-surface-container-high, #aaaaaa);
    --body-text-color: var(--md-sys-color-on-surface, #000000);

    /* Form field variables used by LoginForm and other shared components */
    --form-field-primary-text-color: var(--md-sys-color-on-surface, #000000);
    --form-field-primary-background-color: var(--md-sys-color-surface-container-low, #f9f9f9);
    --form-field-label-text-color: var(--md-sys-color-on-surface-variant, #6aa0ba);
    --form-field-placeholder-text-color: var(--md-sys-color-on-surface-variant, #555555);
    --form-field-error-text-color: var(--md-sys-color-error, red);
    --form-field-error-label-text-color: var(--md-sys-color-error, red);
    --form-field-focus-background-color: var(--md-sys-color-surface-container, #eeeeee);
    --form-field-focus-text-color: var(--md-sys-color-on-surface, #000000);
    --form-field-focus-outline-color: var(--md-sys-color-primary, #000000);
    --form-field-focus-label-text-color: var(--md-sys-color-primary, #6da0bb);
    --form-field-selected-item-background-color: var(--md-sys-color-surface-container-high, #cccccc);

    font-family: var(--md-sys-typescale-body-font, 'Roboto', sans-serif);
    font-size: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns: [full-start] 1fr [content-start] minmax(0, var(--dhp-page-max-width)) [content-end] 1fr [full-end];
    grid-template-rows: 1fr auto;
}

/*
 * Pin the footer to the declared `auto` row (row 2) so auto-placement of
 * sibling overlay wrappers (GlobalOverlaysWrapper, AdminModals) cannot push
 * it into an implicit row after the Dispatcher. The Dispatcher explicitly
 * claims row 1 in its own stylesheet.
 */
.DhpApp__pageFooter--IpeZb {
    grid-column: full;
    grid-row: 2;
}
.DhpApp__skipLink--tlluH {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    padding: 0.75rem 1.5rem;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    text-decoration: none;
    font-weight: 500;
    z-index: 10000;
    border-radius: 0 0 0.25rem 0.25rem;
}
.DhpApp__skipLink--tlluH:focus-visible {
        transform: translateX(-50%) translateY(0);
}
@media screen and (width <= 768px) {
.DhpApp__dhpApp--DiYd1 {
        --dhp-gutter: var(--dhp-space-md);
}
}
@media print {
.DhpApp__dhpApp--DiYd1 {
        display: block;
        min-height: 0;
}
.DhpApp__skipLink--tlluH,
    .DhpApp__myPageOpen--dI733 > .DhpApp__pageContent--PN1Df,
    .DhpApp__myPageOpen--dI733 > .DhpApp__pageFooter--IpeZb {
        display: none;
}
}


:root {
    /* Font size scale using rem (1rem = 16px body font size) */
    --w-font-12: 0.75rem;
    --w-font-14: 0.875rem;
    --w-font-16: 1rem;
    --w-font-18: 1.125rem;
    --w-font-20: 1.25rem;
    --w-font-26: 1.625rem;
    --w-font-30: 1.875rem;
    --w-font-38: 2.375rem;
    --w-font-46: 2.875rem;
    --w-font-54: 3.375rem;
    --w-font-70: 4.375rem;
    --w-font-80: 5rem;

    --title-font-size: 1.1;
    --main-font-size: 1;
    --menu-font-size: 1;

    /* Title variants */
    --w-font-12-title: calc(var(--w-font-12) * var(--title-font-size));
    --w-font-14-title: calc(var(--w-font-14) * var(--title-font-size));
    --w-font-16-title: calc(var(--w-font-16) * var(--title-font-size));
    --w-font-18-title: calc(var(--w-font-18) * var(--title-font-size));
    --w-font-20-title: calc(var(--w-font-20) * var(--title-font-size));
    --w-font-26-title: calc(var(--w-font-26) * var(--title-font-size));
    --w-font-30-title: calc(var(--w-font-30) * var(--title-font-size));
    --w-font-38-title: calc(var(--w-font-38) * var(--title-font-size));
    --w-font-46-title: calc(var(--w-font-46) * var(--title-font-size));
    --w-font-54-title: calc(var(--w-font-54) * var(--title-font-size));
    --w-font-70-title: calc(var(--w-font-70) * var(--title-font-size));
    --w-font-80-title: calc(var(--w-font-80) * var(--title-font-size));

    /* Main text variants */
    --w-font-12-main: calc(var(--w-font-12) * var(--main-font-size));
    --w-font-14-main: calc(var(--w-font-14) * var(--main-font-size));
    --w-font-16-main: calc(var(--w-font-16) * var(--main-font-size));
    --w-font-18-main: calc(var(--w-font-18) * var(--main-font-size));
    --w-font-20-main: calc(var(--w-font-20) * var(--main-font-size));
    --w-font-26-main: calc(var(--w-font-26) * var(--main-font-size));
    --w-font-30-main: calc(var(--w-font-30) * var(--main-font-size));
    --w-font-38-main: calc(var(--w-font-38) * var(--main-font-size));
    --w-font-46-main: calc(var(--w-font-46) * var(--main-font-size));
    --w-font-54-main: calc(var(--w-font-54) * var(--main-font-size));
    --w-font-70-main: calc(var(--w-font-70) * var(--main-font-size));
    --w-font-80-main: calc(var(--w-font-80) * var(--main-font-size));

    /* Menu variants */
    --w-font-12-menu: calc(var(--w-font-12) * var(--menu-font-size));
    --w-font-14-menu: calc(var(--w-font-14) * var(--menu-font-size));
    --w-font-16-menu: calc(var(--w-font-16) * var(--menu-font-size));
    --w-font-18-menu: calc(var(--w-font-18) * var(--menu-font-size));
    --w-font-20-menu: calc(var(--w-font-20) * var(--menu-font-size));
    --w-font-26-menu: calc(var(--w-font-26) * var(--menu-font-size));
    --w-font-30-menu: calc(var(--w-font-30) * var(--menu-font-size));

    /* Button variants */
    --w-font-16-button: calc(var(--w-font-16) * var(--menu-font-size));

    /* Reading compliance status palette */
    --dhp-status-compliant: #1b5e20;
    --dhp-status-expiring: #d97706;
    --dhp-status-superseded: #ca8a04;
    --dhp-status-overdue: #b71c1c;

    /* Soft tints of the same palette, for row/badge backgrounds */
    --dhp-status-compliant-soft: #e8f5e9;
    --dhp-status-expiring-soft: #fef3c7;
    --dhp-status-superseded-soft: #fef9c3;
    --dhp-status-overdue-soft: #ffebee;
}

/*
 * Lock page scroll while a modal dialog is open.
 *
 * Two narrow opt-in paths — both keep the :has() match set tiny:
 *   1. Native <dialog>: matched via [open], which the browser sets
 *      automatically on .showModal() and clears on .close(). Nothing
 *      to do per-dialog.
 *   2. Overlay divs: opt in by setting `data-scroll-lock` on the
 *      overlay root. For v-if'd overlays, hardcode the attribute.
 *      For always-mounted overlays, bind it conditionally.
 */
@media screen {
html:has(dialog[open]),
    html:has([data-scroll-lock]) {
        overflow: hidden;
        overscroll-behavior: contain;
}
html:has(dialog[open]) body,
    html:has([data-scroll-lock]) body {
        overflow: hidden;
        overscroll-behavior: contain;
}
}