/* Stronghold header system This file is intentionally loaded last so the header has one authoritative responsive layout after earlier application theme layers. */ html body#strongholdApp:not(.login-active) .app-header { position: sticky !important; top: 0 !important; z-index: 900 !important; box-sizing: border-box !important; width: 100% !important; max-width: 100vw !important; margin: 0 !important; border: 0 !important; background-size: auto !important; } html body#strongholdApp:not(.login-active) .app-header[hidden] { display: none !important; } html body#strongholdApp:not(.login-active) .app-header .header-brand, html body#strongholdApp:not(.login-active) .app-header .header-divider { display: none !important; } html body#strongholdApp:not(.login-active) .app-header .header-logo-shell, html body#strongholdApp:not(.login-active) .app-header .login-card, html body#strongholdApp:not(.login-active) .app-header .header-tools-menu, html body#strongholdApp:not(.login-active) .app-header .header-workflow-links, html body#strongholdApp:not(.login-active) .app-header .header-utility-links { position: relative !important; inset: auto !important; margin: 0 !important; transform: none !important; box-sizing: border-box !important; } html body#strongholdApp:not(.login-active) .app-header .header-logo-shell, html body#strongholdApp:not(.login-active) .app-header .header-logo-shell a { display: flex !important; align-items: center !important; justify-content: center !important; } html body#strongholdApp:not(.login-active) .app-header .header-logo-shell::before { display: none !important; content: none !important; } html body#strongholdApp:not(.login-active) .app-header .header-logo { display: block !important; object-position: center !important; } html body#strongholdApp:not(.login-active) .app-header #loginCard.login-card { display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html body#strongholdApp:not(.login-active) .app-header .search-box { position: relative !important; width: 100% !important; min-width: 0 !important; max-width: none !important; } html body#strongholdApp:not(.login-active) .app-header .search-box input { width: 100% !important; min-width: 0 !important; height: 42px !important; min-height: 42px !important; padding: 0 40px 0 14px !important; border-radius: 8px !important; outline: 0 !important; font-size: 0.88rem !important; line-height: 1 !important; } html body#strongholdApp:not(.login-active) .app-header .search-box input::placeholder { color: #6b7f86 !important; opacity: 1 !important; } html body#strongholdApp:not(.login-active) .app-header .header-tools-menu { z-index: 912 !important; } html body#strongholdApp:not(.login-active) .app-header button#headerToolsToggle.header-tools-toggle, html body#strongholdApp:not(.login-active) .app-header .header-tools-toggle { display: grid !important; place-items: center !important; width: 42px !important; min-width: 42px !important; max-width: 42px !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; padding: 0 !important; border: 1px solid #8fa9b0 !important; border-radius: 8px !important; background: rgba(247, 250, 251, 0.94) !important; color: var(--header-ink) !important; box-shadow: inset 0 1px 0 #ffffff, 0 4px 9px rgba(23, 52, 61, 0.10) !important; } html body#strongholdApp:not(.login-active) .app-header .header-tools-toggle:hover, html body#strongholdApp:not(.login-active) .app-header .header-tools-toggle[aria-expanded="true"] { border-color: #3b8997 !important; background: #ffffff !important; box-shadow: 0 0 0 3px rgba(46, 130, 145, 0.12), 0 5px 10px rgba(23, 52, 61, 0.10) !important; } html body#strongholdApp:not(.login-active) .app-header .header-tools-toggle::before, html body#strongholdApp:not(.login-active) .app-header .header-tools-toggle::after { display: none !important; content: none !important; } html body#strongholdApp:not(.login-active) .app-header .header-tools-bars, html body#strongholdApp:not(.login-active) .app-header .header-tools-bars::before, html body#strongholdApp:not(.login-active) .app-header .header-tools-bars::after { width: 20px !important; height: 2px !important; border-radius: 2px !important; background: var(--header-ink) !important; box-shadow: none !important; } html body#strongholdApp:not(.login-active) .app-header .header-tools-panel { top: calc(100% + 10px) !important; left: 0 !important; right: auto !important; width: min(330px, calc(100vw - 24px)) !important; max-width: min(330px, calc(100vw - 24px)) !important; padding: 12px !important; border: 1px solid #aabcc1 !important; border-radius: 8px !important; background: #f8fbfb !important; color: var(--header-ink) !important; box-shadow: 0 18px 40px rgba(23, 52, 61, 0.20) !important; } html body#strongholdApp:not(.login-active) .app-header .header-tools-title { margin: 0 0 8px !important; color: var(--header-muted) !important; font-size: 0.7rem !important; font-weight: 900 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } html body#strongholdApp:not(.login-active) .app-header .header-tools-panel .header-links, html body#strongholdApp:not(.login-active) .app-header .header-tools-panel .mobile-workflow-links { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; width: 100% !important; margin: 0 !important; } html body#strongholdApp:not(.login-active) .app-header .header-tools-panel .mobile-workflow-links { display: none !important; margin-bottom: 8px !important; } html body#strongholdApp:not(.login-active) .app-header .header-tools-panel button.top-link { width: 100% !important; min-width: 0 !important; min-height: 36px !important; height: auto !important; padding: 8px 10px !important; border: 1px solid #c1cdd0 !important; border-radius: 6px !important; background: #ffffff !important; color: #29434c !important; font-size: 0.69rem !important; font-weight: 800 !important; line-height: 1.15 !important; text-align: left !important; text-shadow: none !important; box-shadow: none !important; } html body#strongholdApp:not(.login-active) .app-header .header-tools-panel button.top-link:hover { border-color: #6e9ca5 !important; background: #edf4f5 !important; } html body#strongholdApp:not(.login-active) .app-header .header-workflow-links { display: flex !important; align-items: stretch !important; justify-content: stretch !important; gap: 6px !important; width: 100% !important; min-width: 0 !important; max-width: none !important; padding: 0 !important; overflow: visible !important; } html body#strongholdApp:not(.login-active) .app-header .header-chart-links, html body#strongholdApp:not(.login-active) .app-header .header-stage-links { display: flex !important; align-items: stretch !important; gap: 6px !important; width: auto !important; min-width: 0 !important; max-width: none !important; overflow: visible !important; } html body#strongholdApp:not(.login-active) .app-header .header-chart-links { flex: 2 1 0 !important; } html body#strongholdApp:not(.login-active) .app-header .header-stage-links { flex: 3 1 0 !important; } html body#strongholdApp:not(.login-active) .app-header .header-chart-divider { flex: 0 0 1px !important; width: 1px !important; min-width: 1px !important; height: auto !important; margin: 5px 1px !important; border: 0 !important; background: rgba(64, 99, 108, 0.26) !important; } html body#strongholdApp:not(.login-active) .app-header .header-chart-links > button.top-link.header-chart-link, html body#strongholdApp:not(.login-active) .app-header .header-stage-links > button.top-link.header-chart-link, html body#strongholdApp:not(.login-active) .app-header button.top-link.header-chart-link { --header-button-accent: #588e99; flex: 1 1 0 !important; display: grid !important; grid-template-columns: 28px minmax(0, 1fr) !important; align-items: center !important; justify-items: stretch !important; gap: 6px !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: 54px !important; min-height: 54px !important; max-height: 54px !important; padding: 6px 8px 7px !important; overflow: hidden !important; border: 1px solid #a8babf !important; border-radius: 8px !important; background: linear-gradient(180deg, #fbfcfc 0%, #edf3f4 100%) !important; color: var(--header-ink) !important; box-shadow: inset 0 -3px 0 var(--header-button-accent), inset 0 1px 0 #ffffff, 0 4px 9px rgba(23, 52, 61, 0.09) !important; text-shadow: none !important; transform: none !important; } html body#strongholdApp:not(.login-active) .app-header .header-chart-link.production { --header-button-accent: #4d7fc5; } html body#strongholdApp:not(.login-active) .app-header .header-chart-link.service { --header-button-accent: #3c8c82; } html body#strongholdApp:not(.login-active) .app-header .header-chart-link.pipeline { --header-button-accent: #bb8b32; } html body#strongholdApp:not(.login-active) .app-header .header-chart-link.service-opportunities { --header-button-accent: #3295a7; } html body#strongholdApp:not(.login-active) .app-header .header-chart-link.approved { --header-button-accent: #4b9367; } html body#strongholdApp:not(.login-active) .app-header .header-chart-links > button.top-link.header-chart-link:hover, html body#strongholdApp:not(.login-active) .app-header .header-stage-links > button.top-link.header-chart-link:hover, html body#strongholdApp:not(.login-active) .app-header button.top-link.header-chart-link:hover, html body#strongholdApp:not(.login-active) .app-header button.top-link.header-chart-link:focus-visible, html body#strongholdApp:not(.login-active) .app-header button.top-link.header-chart-link.active { border-color: var(--header-button-accent) !important; background: #ffffff !important; box-shadow: inset 0 -3px 0 var(--header-button-accent), 0 0 0 3px rgba(45, 111, 124, 0.10), 0 7px 14px rgba(23, 52, 61, 0.12) !important; transform: translateY(-1px) !important; } html body#strongholdApp:not(.login-active) .app-header .header-nav-icon { display: grid !important; place-items: center !important; width: 28px !important; min-width: 28px !important; max-width: 28px !important; height: 28px !important; min-height: 28px !important; max-height: 28px !important; border: 0 !important; border-radius: 7px !important; background: var(--header-button-accent) !important; color: #ffffff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.28) !important; } html body#strongholdApp:not(.login-active) .app-header .header-nav-icon svg { width: 17px !important; height: 17px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; } html body#strongholdApp:not(.login-active) .app-header .header-nav-text, html body#strongholdApp:not(.login-active) .app-header .header-chart-link.service-opportunities .header-nav-text { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; color: var(--header-ink) !important; font-size: 0.58rem !important; font-weight: 900 !important; line-height: 1.08 !important; letter-spacing: 0 !important; text-align: center !important; text-transform: uppercase !important; text-shadow: none !important; white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; } html body#strongholdApp:not(.login-active) .app-header .header-utility-links { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 7px !important; width: 100% !important; min-width: 0 !important; max-width: none !important; padding: 0 !important; overflow: visible !important; } html body#strongholdApp:not(.login-active) .app-header button#headerHomeButton.header-icon-button, html body#strongholdApp:not(.login-active) .app-header button#headerNotificationsButton.header-icon-button, html body#strongholdApp:not(.login-active) .app-header button#headerChatButton.header-icon-button, html body#strongholdApp:not(.login-active) .app-header button#headerUserToggle.header-user-toggle { display: grid !important; place-items: center !important; width: 38px !important; min-width: 38px !important; max-width: 38px !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; padding: 0 !important; overflow: visible !important; border: 1px solid transparent !important; border-radius: 8px !important; background: transparent !important; color: #244851 !important; box-shadow: none !important; text-shadow: none !important; } html body#strongholdApp:not(.login-active) .app-header button#headerNotificationsButton.header-icon-button, html body#strongholdApp:not(.login-active) .app-header button#headerChatButton.header-icon-button, html body#strongholdApp:not(.login-active) .app-header button#headerNotificationsButton.header-icon-button:hover, html body#strongholdApp:not(.login-active) .app-header button#headerChatButton.header-icon-button:hover, html body#strongholdApp:not(.login-active) .app-header button#headerNotificationsButton.header-icon-button:focus-visible, html body#strongholdApp:not(.login-active) .app-header button#headerChatButton.header-icon-button:focus-visible { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body#strongholdApp:not(.login-active) .app-header button#headerHomeButton.header-icon-button:hover, html body#strongholdApp:not(.login-active) .app-header button#headerNotificationsButton.header-icon-button:hover, html body#strongholdApp:not(.login-active) .app-header button#headerChatButton.header-icon-button:hover, html body#strongholdApp:not(.login-active) .app-header button#headerUserToggle.header-user-toggle:hover, html body#strongholdApp:not(.login-active) .app-header button#headerHomeButton.header-icon-button:focus-visible, html body#strongholdApp:not(.login-active) .app-header button#headerNotificationsButton.header-icon-button:focus-visible, html body#strongholdApp:not(.login-active) .app-header button#headerChatButton.header-icon-button:focus-visible, html body#strongholdApp:not(.login-active) .app-header button#headerUserToggle.header-user-toggle:focus-visible { border-color: #91abb1 !important; background: rgba(248, 251, 252, 0.88) !important; box-shadow: 0 4px 9px rgba(23, 52, 61, 0.09) !important; } html body#strongholdApp:not(.login-active) .app-header .header-icon-wrap, html body#strongholdApp:not(.login-active) .app-header #headerHomeButton .header-icon-wrap, html body#strongholdApp:not(.login-active) .app-header .header-user-icon { display: grid !important; place-items: center !important; width: 24px !important; min-width: 24px !important; max-width: 24px !important; height: 24px !important; min-height: 24px !important; max-height: 24px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; } html body#strongholdApp:not(.login-active) .app-header #headerHomeButton svg, html body#strongholdApp:not(.login-active) .app-header #headerNotificationsButton svg, html body#strongholdApp:not(.login-active) .app-header #headerChatButton svg, html body#strongholdApp:not(.login-active) .app-header .header-user-icon svg { width: 22px !important; min-width: 22px !important; height: 22px !important; min-height: 22px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; } html body#strongholdApp:not(.login-active) .app-header .header-user-card { position: relative !important; width: 38px !important; min-width: 38px !important; max-width: 38px !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; } html body#strongholdApp:not(.login-active) .app-header .header-user-status, html body#strongholdApp:not(.login-active) .app-header .header-user-arrow { display: none !important; } html body#strongholdApp:not(.login-active) .app-header .header-user-details { top: calc(100% + 10px) !important; right: 0 !important; left: auto !important; z-index: 930 !important; width: 220px !important; min-width: 220px !important; padding: 12px !important; border: 1px solid #aabcc1 !important; border-radius: 8px !important; background: #f8fbfb !important; color: var(--header-ink) !important; box-shadow: 0 18px 40px rgba(23, 52, 61, 0.20) !important; } html body#strongholdApp:not(.login-active) .app-header .header-user-copy { margin-bottom: 8px !important; color: var(--header-ink) !important; font-weight: 900 !important; } html body#strongholdApp:not(.login-active) .app-header .header-user-details button { width: 100% !important; min-height: 36px !important; margin-top: 6px !important; border: 1px solid #bdcace !important; border-radius: 6px !important; background: #ffffff !important; color: #29434c !important; box-shadow: none !important; text-shadow: none !important; } html body#strongholdApp:not(.login-active) .app-header .header-icon-badge { top: -3px !important; right: -3px !important; min-width: 17px !important; height: 17px !important; padding: 0 4px !important; border: 2px solid var(--header-surface) !important; border-radius: 999px !important; background: #c74652 !important; color: #ffffff !important; font-size: 0.58rem !important; line-height: 13px !important; box-shadow: 0 2px 6px rgba(90, 20, 29, 0.24) !important; } html body#strongholdApp:not(.login-active) .app-header .header-utility-links #headerPresenceIndicator.header-presence-indicator { position: absolute !important; right: 0 !important; bottom: -8px !important; top: auto !important; width: 11px !important; min-width: 11px !important; max-width: 11px !important; height: 11px !important; min-height: 11px !important; max-height: 11px !important; padding: 0 !important; border: 2px solid var(--header-surface-deep) !important; border-radius: 999px !important; background: #37a862 !important; color: transparent !important; font-size: 0 !important; box-shadow: 0 0 0 3px rgba(55, 168, 98, 0.14) !important; } /* The header participates in normal sticky layout. Older fixed-header offsets otherwise leave a false spacer between the command bar and the workspace. */ html body#strongholdApp.command-map-theme:not(.login-active) .app-shell { margin-top: 0 !important; } html body#strongholdApp:not(.login-active) .app-header .header-user-details:not([hidden]) { display: grid !important; position: absolute !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } @media (min-width: 1400px) { html body#strongholdApp:not(.login-active) .app-header { display: grid !important; grid-template-columns: 188px minmax(260px, 1fr) 42px minmax(540px, 650px) 176px !important; grid-template-areas: "logo search tools workflow utilities" !important; align-items: center !important; gap: 10px !important; min-height: 94px !important; height: 94px !important; max-height: 94px !important; padding: 9px 14px !important; overflow: visible !important; } html body#strongholdApp:not(.login-active) .app-header .header-logo-shell { grid-area: logo !important; width: 188px !important; max-width: 188px !important; height: 74px !important; max-height: 74px !important; } html body#strongholdApp:not(.login-active) .app-header .header-logo-shell a, html body#strongholdApp:not(.login-active) .app-header .header-logo { width: 178px !important; max-width: 178px !important; height: 72px !important; max-height: 72px !important; } html body#strongholdApp:not(.login-active) .app-header #loginCard.login-card { grid-area: search !important; } html body#strongholdApp:not(.login-active) .app-header .header-tools-menu { grid-area: tools !important; } html body#strongholdApp:not(.login-active) .app-header .header-workflow-links { grid-area: workflow !important; } html body#strongholdApp:not(.login-active) .app-header .header-utility-links { grid-area: utilities !important; } html body#strongholdApp.command-map-theme:not(.login-active) .sidebar { top: 94px !important; } } @media (min-width: 1101px) and (max-width: 1399px) { html body#strongholdApp:not(.login-active) .app-header { display: grid !important; grid-template-columns: 145px minmax(205px, 1fr) 40px minmax(455px, 44vw) 158px !important; grid-template-areas: "logo search tools workflow utilities" !important; align-items: center !important; gap: 8px !important; min-height: 84px !important; height: 84px !important; max-height: 84px !important; padding: 8px 10px !important; overflow: visible !important; } html body#strongholdApp:not(.login-active) .app-header .header-logo-shell { grid-area: logo !important; width: 145px !important; max-width: 145px !important; height: 64px !important; max-height: 64px !important; } html body#strongholdApp:not(.login-active) .app-header .header-logo-shell a, html body#strongholdApp:not(.login-active) .app-header .header-logo { width: 138px !important; max-width: 138px !important; height: 62px !important; max-height: 62px !important; } html body#strongholdApp:not(.login-active) .app-header #loginCard.login-card { grid-area: search !important; } html body#strongholdApp:not(.login-active) .app-header .header-tools-menu { grid-area: tools !important; } html body#strongholdApp:not(.login-active) .app-header .header-workflow-links { grid-area: workflow !important; } html body#strongholdApp:not(.login-active) .app-header .header-utility-links { grid-area: utilities !important; } html body#strongholdApp:not(.login-active) .app-header .header-chart-links > button.top-link.header-chart-link, html body#strongholdApp:not(.login-active) .app-header .header-stage-links > button.top-link.header-chart-link, html body#strongholdApp:not(.login-active) .app-header button.top-link.header-chart-link { grid-template-columns: 24px minmax(0, 1fr) !important; gap: 4px !important; height: 50px !important; min-height: 50px !important; max-height: 50px !important; padding-inline: 5px !important; } html body#strongholdApp:not(.login-active) .app-header .header-nav-icon { width: 24px !important; min-width: 24px !important; max-width: 24px !important; height: 24px !important; min-height: 24px !important; max-height: 24px !important; } html body#strongholdApp:not(.login-active) .app-header .header-nav-icon svg { width: 15px !important; height: 15px !important; } html body#strongholdApp:not(.login-active) .app-header .header-nav-text, html body#strongholdApp:not(.login-active) .app-header .header-chart-link.service-opportunities .header-nav-text { font-size: 0.49rem !important; } html body#strongholdApp:not(.login-active) .app-header .header-stage-links > button.top-link.header-chart-link.pipeline, html body#strongholdApp:not(.login-active) .app-header .header-stage-links > button.top-link.header-chart-link.approved { flex: 0.86 1 0 !important; } html body#strongholdApp:not(.login-active) .app-header .header-stage-links > button.top-link.header-chart-link.service-opportunities { flex: 1.28 1 0 !important; } html body#strongholdApp.command-map-theme:not(.login-active) .sidebar { top: 84px !important; } } @media (max-width: 1100px) { html body#strongholdApp:not(.login-active) .app-header { display: grid !important; grid-template-columns: 102px minmax(0, 1fr) 42px !important; grid-template-rows: 42px 42px 50px !important; grid-template-areas: "logo utilities utilities" "search search tools" "workflow workflow workflow" !important; align-items: center !important; gap: 7px 8px !important; min-height: 0 !important; height: auto !important; max-height: none !important; padding: 7px 9px 8px !important; overflow-x: clip !important; overflow-y: visible !important; } html body#strongholdApp:not(.login-active) .app-header .header-logo-shell { grid-area: logo !important; justify-self: start !important; width: 102px !important; min-width: 102px !important; max-width: 102px !important; height: 42px !important; max-height: 42px !important; } html body#strongholdApp:not(.login-active) .app-header .header-logo-shell a, html body#strongholdApp:not(.login-active) .app-header .header-logo { width: 98px !important; max-width: 98px !important; height: 42px !important; max-height: 42px !important; } html body#strongholdApp:not(.login-active) .app-header #loginCard.login-card { grid-area: search !important; } html body#strongholdApp:not(.login-active) .app-header .header-tools-menu { grid-area: tools !important; justify-self: end !important; } html body#strongholdApp:not(.login-active) .app-header .header-utility-links { grid-area: utilities !important; justify-self: end !important; width: auto !important; } html body#strongholdApp:not(.login-active) .app-header .header-workflow-links { grid-area: workflow !important; display: flex !important; gap: 7px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 0 0 2px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x proximity !important; scrollbar-width: none !important; } html body#strongholdApp:not(.login-active) .app-header .header-workflow-links::-webkit-scrollbar { display: none !important; } html body#strongholdApp:not(.login-active) .app-header .header-chart-links, html body#strongholdApp:not(.login-active) .app-header .header-stage-links { flex: 0 0 auto !important; width: max-content !important; min-width: max-content !important; max-width: none !important; } html body#strongholdApp:not(.login-active) .app-header .header-chart-divider { display: none !important; } html body#strongholdApp:not(.login-active) .app-header .header-chart-links > button.top-link.header-chart-link, html body#strongholdApp:not(.login-active) .app-header .header-stage-links > button.top-link.header-chart-link, html body#strongholdApp:not(.login-active) .app-header button.top-link.header-chart-link { flex: 0 0 126px !important; width: 126px !important; min-width: 126px !important; max-width: 126px !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; grid-template-columns: 24px minmax(0, 1fr) !important; gap: 5px !important; padding: 5px 7px 6px !important; scroll-snap-align: start !important; } html body#strongholdApp:not(.login-active) .app-header .header-nav-icon { width: 24px !important; min-width: 24px !important; max-width: 24px !important; height: 24px !important; min-height: 24px !important; max-height: 24px !important; } html body#strongholdApp:not(.login-active) .app-header .header-nav-text, html body#strongholdApp:not(.login-active) .app-header .header-chart-link.service-opportunities .header-nav-text { font-size: 0.52rem !important; } html body#strongholdApp:not(.login-active) .app-header .header-tools-panel .mobile-workflow-links { display: none !important; } html body#strongholdApp:not(.login-active) .app-header .header-tools-panel { top: calc(100% + 8px) !important; right: 0 !important; left: auto !important; } html body#strongholdApp.command-map-theme:not(.login-active) .sidebar { top: 164px !important; } } /* The DLC mark is also the primary Company Calendar control. */ html body#strongholdApp:not(.login-active) .app-header .header-logo-shell #headerLogoLink { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 1px !important; box-sizing: border-box !important; padding: 3px 5px 2px !important; border: 1px solid rgba(17, 94, 89, 0.24) !important; border-radius: 7px !important; background: rgba(255, 255, 255, 0.34) !important; box-shadow: 0 3px 10px rgba(14, 43, 48, 0.08) !important; cursor: pointer !important; overflow: hidden !important; transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important; } html body#strongholdApp:not(.login-active) .app-header .header-logo-shell #headerLogoLink:hover, html body#strongholdApp:not(.login-active) .app-header .header-logo-shell #headerLogoLink:focus-visible { border-color: #079aaa !important; background: rgba(255, 255, 255, 0.72) !important; box-shadow: 0 0 0 2px rgba(7, 154, 170, 0.15), 0 5px 14px rgba(14, 43, 48, 0.14) !important; transform: translateY(-1px) !important; outline: none !important; } html body#strongholdApp:not(.login-active) .app-header .header-logo-shell #headerLogoLink:active { transform: translateY(0) !important; } html body#strongholdApp:not(.login-active) .app-header .header-logo-shell #headerLogoLink .header-logo { width: 100% !important; height: calc(100% - 16px) !important; min-height: 0 !important; object-fit: contain !important; } html body#strongholdApp:not(.login-active) .app-header .header-logo-action-label { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; width: 100% !important; min-height: 13px !important; color: #064e53 !important; font-family: var(--font-display, inherit) !important; font-size: 0.52rem !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: uppercase !important; white-space: nowrap !important; } html body#strongholdApp:not(.login-active) .app-header .header-logo-action-label svg { width: 11px !important; height: 11px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } @media (max-width: 1100px) { html body#strongholdApp:not(.login-active) .app-header .header-logo-shell #headerLogoLink { padding: 2px 3px 1px !important; } html body#strongholdApp:not(.login-active) .app-header .header-logo-shell #headerLogoLink .header-logo { height: calc(100% - 12px) !important; } html body#strongholdApp:not(.login-active) .app-header .header-logo-action-label { gap: 2px !important; min-height: 10px !important; font-size: 0.38rem !important; } html body#strongholdApp:not(.login-active) .app-header .header-logo-action-label svg { width: 8px !important; height: 8px !important; } } @media (max-width: 520px) { html body#strongholdApp:not(.login-active) .app-header { grid-template-columns: 88px minmax(0, 1fr) 40px !important; padding-inline: 7px !important; } html body#strongholdApp:not(.login-active) .app-header .header-logo-shell { width: 88px !important; min-width: 88px !important; max-width: 88px !important; } html body#strongholdApp:not(.login-active) .app-header .header-logo-shell a, html body#strongholdApp:not(.login-active) .app-header .header-logo { width: 86px !important; max-width: 86px !important; } html body#strongholdApp:not(.login-active) .app-header .header-utility-links { gap: 3px !important; } html body#strongholdApp:not(.login-active) .app-header button#headerHomeButton.header-icon-button, html body#strongholdApp:not(.login-active) .app-header button#headerNotificationsButton.header-icon-button, html body#strongholdApp:not(.login-active) .app-header button#headerChatButton.header-icon-button, html body#strongholdApp:not(.login-active) .app-header button#headerUserToggle.header-user-toggle, html body#strongholdApp:not(.login-active) .app-header .header-user-card { width: 35px !important; min-width: 35px !important; max-width: 35px !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; } html body#strongholdApp:not(.login-active) .app-header .search-box input { font-size: 0.8rem !important; } html body#strongholdApp:not(.login-active) .app-header .header-user-details { position: fixed !important; top: 52px !important; right: 8px !important; } }