#content_form { margin-bottom: 5px; } /* -------------------------------------------------------------------------- */ /* Mobile-first responsive: Page title padding on mobile */ /* -------------------------------------------------------------------------- */ @media screen and (max-width: 767px) { .hw-home-hero__title, .hw-cases-hero__title, .hw-faq__title, .hw-profile__title, .page-header h1, .sectionBlockLayout h1:first-of-type { padding-top: 40px; } } div#navbar { background-color: #1c232d; } .open>.dropdown-menu { background-color: var(--portalThemeColor4, #1c232d); } .open>.dropdown-menu>li>a { color: var(--portalThemeOnColor9, #1276CE); } .open .dropdown-menu>li>a:hover, .dropdown-menu>.active>a:hover { color: var(--portalThemeColor4, #1c232d); background-color: var(--portalThemeOnColor9, #1276CE); text-decoration: none !important; } .dropdown-menu>.active>a { color: var(--portalThemeColor4, #1c232d); background-color: var(--portalThemeOnColor9, #1276CE); text-decoration: none !important; } .open .dropdown-menu>.active>a:focus { color: var(--portalThemeColor4, #1c232d); background-color: var(--portalThemeOnColor9, #1276CE); text-decoration: none !important; } footer .footer-bottom { background-color: #1c232d !important; display: inline; } body:has([data-hw-hide-footer-auth][data-hw-auth="1"]) footer[role="contentinfo"], body.hw-hide-footer footer[role="contentinfo"] { display: none !important; } h1 { color: #ced1d6; } a { color: #ced1d6 !important; } body { background-color: #1c232d !important; } /* Navbar styling (no underline/box overlay; color-only hover/focus) */ .navbar.navbar-inverse { background-color: #1c232d; border-color: rgba(255, 255, 255, 0.10); position: sticky; top: 0; z-index: 1030; } /* Full-width header: logo left, nav right (with comfortable edge padding) */ .navbar.navbar-inverse .hw-navbar__container { width: 100%; max-width: none; border-bottom: 1px solid rgb(44 53 68); } .navbar.navbar-inverse .hw-navbar__container .navbar-brand { margin-left: 0 !important; padding: 6px 15px !important; } .navbar.navbar-inverse .hw-navbar__container .navbar-right { margin-right: 0 !important; } /* Keep brand/link tidy on dark background */ .navbar.navbar-inverse .navbar-brand a { color: rgba(206, 209, 214, 0.92) !important; text-decoration: none !important; } .navbar.navbar-inverse .navbar-brand a:hover, .navbar.navbar-inverse .navbar-brand a:focus { color: rgba(206, 209, 214, 0.72) !important; text-decoration: none !important; } .navbar-inverse .navbar-nav>li>a, .navbar-inverse .navbar-nav>li>a:visited { color: rgba(206, 209, 214, 0.92) !important; text-decoration: none !important; background: transparent !important; box-shadow: none !important; } .navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li>a:active { color: rgba(206, 209, 214, 0.72) !important; text-decoration: none !important; background: transparent !important; box-shadow: none !important; outline: none !important; } .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: rgba(206, 209, 214, 0.92) !important; background: transparent !important; text-decoration: none !important; box-shadow: none !important; } .navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { background: transparent !important; color: rgba(206, 209, 214, 0.92) !important; } /* v2.0 - CSS consolidated, sidebar moved to layout-shell.css */ :root { /* Used by the reusable side navigation to size itself below the header. JS can override this by setting --hw-header-h inline on . */ --hw-header-h: 72px; } /* Side navigation styles moved to layout-shell.css to avoid duplication */ /* Sticky footer only when content is short (Power Pages) - If page content is taller than the viewport, footer sits below content and is only visible when you scroll. - If page content is shorter than the viewport, footer is pushed to the bottom. */ html, body { height: 100%; } body { min-height: 100vh; display: flex; flex-direction: column; overflow-y: auto; } /* Ensure the main page content participates in the flex layout. This keeps the footer pushed down on short pages, while still letting the footer sit below overflowing content (you scroll to reach it). */ #content-container { flex: 1 0 auto; } /* When a page uses the hw-shell layout, allow full-bleed layout even if the platform wraps content inside a Bootstrap .container. Page JS adds hw-has-shell. */ body.hw-has-shell #content-container { width: 100% !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; } footer[role="contentinfo"] { margin-top: auto; margin-bottom: 10px; position: static !important; bottom: auto !important; left: auto !important; right: auto !important; } /* Hide footer on selected authenticated pages (Home auth, Cases, FAQ, Profile) JS applies `hw-hide-footer` to when appropriate. */ body.hw-hide-footer footer[role="contentinfo"] { display: none !important; } footer .footer-bottom { position: static !important; } /* -------------------------------------------------------------------------- */ /* "Back to My Cases" Navigation for Create/Edit Case pages */ /* -------------------------------------------------------------------------- */ .hw-caseForm__row { display: flex; flex-wrap: wrap; margin: 0; padding: 8px; } .hw-caseForm__container { padding: 0; display: flex; flex-wrap: wrap; } .hw-caseForm__col { flex-grow: 1; display: flex; flex-direction: column; min-width: 310px; word-break: break-word; } .hw-auth-back, .hw-case-back { display: inline-flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 0 0 14px; border-radius: 10px; font-family: Segoe UI; font-weight: 600; font-size: 14px; line-height: 20px; color: rgba(206, 209, 214, 0.85) !important; text-decoration: none !important; background: transparent; width: fit-content; } .hw-auth-back:hover, .hw-auth-back:focus, .hw-case-back:hover, .hw-case-back:focus { color: rgba(206, 209, 214, 0.65) !important; text-decoration: none !important; background: transparent; } .hw-case-back:focus-visible { outline: 2px solid rgba(39, 144, 236, 0.65); outline-offset: 2px; } .hw-case-back__icon { width: 16px; height: 16px; flex: 0 0 auto; } /********* SIGN IN *******/ #content-container.signinpage { /* Match anonymous home hero styling */ background-size: cover !important; background-repeat: no-repeat !important; background-position: center center !important; background-color: #1c232d !important; margin-top: 0px; /* Anchor for the top-left back link */ position: relative; } /* Back to home link (inside the sign-in card) */ #content-container.signinpage #content .page-content .hw-auth-back, #Register #ContentContainer_MainContent_MainContent_SecureRegister .hw-auth-back { display: inline-flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-family: Segoe UI; font-weight: 600; font-size: 14px; line-height: 20px; color: rgba(206, 209, 214, 0.85) !important; text-decoration: none !important; background: transparent; width: fit-content; margin: 0 0 14px; } #content-container.signinpage #content .page-content .hw-auth-back:hover, #content-container.signinpage #content .page-content .hw-auth-back:focus, #Register #ContentContainer_MainContent_MainContent_SecureRegister .hw-auth-back:hover, #Register #ContentContainer_MainContent_MainContent_SecureRegister .hw-auth-back:focus { color: rgba(206, 209, 214, 0.65) !important; text-decoration: none !important; background: transparent; } @media (max-width: 480px) { #content-container.signinpage #content .page-content .hw-auth-back, #Register #ContentContainer_MainContent_MainContent_SecureRegister .hw-auth-back { font-size: 13px; } } /* Center the auth card within the viewport (mobile-first) */ #content-container.signinpage #content { min-height: calc(100vh - 140px); min-height: calc(100svh - 140px); display: flex; align-items: center; justify-content: center; padding: clamp(18px, 4vw, 48px); } /* Registration page: replace the clamp padding with fixed values */ #content-container.signinpage #content:has(.hw-register) { padding: 48px 48px 0; } #content-container.signinpage #content .nav.nav-tabs { display: none !important; } /* Sign In form */ #content-container.signinpage #content .page-content { width: 100%; max-width: 500px; margin: 0; padding: clamp(20px, 5vw, 40px); position: relative; border-radius: .5rem; background: rgb(44, 53, 68); display: flex; flex-direction: column; } /* Register page: the outer .page-content is just a wrapper around the real card. Without this, both .page-content and the register container can look like cards. */ #content-container.signinpage #content .page-content.hw-register { width: 100%; max-width: 500px; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; display: block; } /* Register card uses the same styling as Sign In card */ #content-container.signinpage #content #ContentContainer_MainContent_MainContent_SecureRegister.hw-auth-card { width: 100%; margin: 0; padding: clamp(20px, 5vw, 40px); position: relative; border-radius: .5rem; background: rgb(44, 53, 68); display: flex; flex-direction: column; } /* Registration card content should fill the same sign-in card (avoid narrow internal columns) */ #Register #ContentContainer_MainContent_MainContent_SecureRegister, #ContentContainer_MainContent_MainContent_SecureRegister, #Register #ContentContainer_MainContent_MainContent_SecureRegister.hw-auth-card, #ContentContainer_MainContent_MainContent_SecureRegister.hw-auth-card { width: 100% !important; max-width: 100% !important; margin: 0 !important; } #Register #ContentContainer_MainContent_MainContent_SecureRegister .row, #ContentContainer_MainContent_MainContent_SecureRegister .row { margin-left: 0 !important; margin-right: 0 !important; } #Register #ContentContainer_MainContent_MainContent_SecureRegister .col-md-6, #ContentContainer_MainContent_MainContent_SecureRegister .col-md-6 { padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; max-width: 100% !important; } /* Remove legacy illustration/card pseudo-elements (if still present) */ #content-container.signinpage #content .page-content::before, #content-container.signinpage #content .page-content::after { content: none !important; display: none !important; } /* Live sign-in markup includes nested .row which can add negative margins */ #content-container.signinpage #content .page-content .row { margin-left: 0 !important; margin-right: 0 !important; } #content-container.signinpage #content .page-content .col-md-6 { padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; } /* Keep inner layout flush so card padding is consistent */ #content-container.signinpage #content .page-content.row { margin-left: 0; margin-right: 0; } @media (max-width: 992px) { #content-container.signinpage #content { padding: 20px; } } /* External login heading in live markup is h2.login-heading-section */ #content-container.signinpage #external-login-heading { font-size: clamp(22px, 3.4vw, 30px) !important; line-height: 1.15 !important; margin: 0 0 12px !important; font-weight: 800 !important; color: #ffffff !important; } #content-container.signinpage .hw-signin-subheading, #Register #ContentContainer_MainContent_MainContent_SecureRegister .hw-signin-subheading { margin: 0 0 20px; color: rgba(247, 247, 247, 0.78); font-size: clamp(14px, 2.2vw, 16px); font-family: Segoe UI; font-style: normal; font-weight: 400; line-height: 1.55; max-width: 520px; } /* Hide the editable page-copy block on sign-in; we inject our own subheading */ #content-container.signinpage #content .page-copy { display: none !important; } /* Typography on dark background (no white card) */ #content-container.signinpage #content, #content-container.signinpage #content h1, #content-container.signinpage #content h2, #content-container.signinpage #content h3, #content-container.signinpage #content h4, #content-container.signinpage #content h5, #content-container.signinpage #content h6, #content-container.signinpage #content label, #content-container.signinpage #content legend, #content-container.signinpage #content p, #content-container.signinpage #content .label { color: rgba(247, 247, 247, 0.92); } /* Hero-like typography (match Home) */ #content-container.signinpage #content .page-content h1, #content-container.signinpage #content .page-content h2 { text-align: left; color: #f7f7f7 !important; margin: 0px 0px 12px !important; font-size: 38px !important; font-family: Segoe UI; font-style: normal; font-weight: 700 !important; line-height: 46px !important; } #content-container.signinpage #content .page-content p, #content-container.signinpage #content .page-content .help-block, #content-container.signinpage #content .page-content .page-copy { text-align: left; color: rgba(247, 247, 247, 0.78); font-size: 16px; font-family: Segoe UI; font-style: normal; font-weight: 400; line-height: 24px; max-width: 520px; } /* Bottom helper row (Troubleshoot CTA) */ #content-container.signinpage #content .page-content .hw-signin-footer, #Register #ContentContainer_MainContent_MainContent_SecureRegister .hw-signin-footer { margin-top: 18px; margin-bottom: 0; margin-left: 0; margin-right: 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.10); display: grid; grid-template-columns: 1fr; gap: 12px 14px; align-items: center; } @media (min-width: 520px) { #content-container.signinpage #content .page-content .hw-signin-footer, #Register #ContentContainer_MainContent_MainContent_SecureRegister .hw-signin-footer { grid-template-columns: 1fr auto; } } #content-container.signinpage #content .page-content .hw-signin-footer__note, #Register #ContentContainer_MainContent_MainContent_SecureRegister .hw-signin-footer__note { display: inline-flex; align-items: center; gap: 10px; color: rgba(206, 209, 214, 0.60); font-family: Segoe UI; font-weight: 400; font-size: 14px; line-height: 18px; } #content-container.signinpage #content .page-content .hw-signin-footer__noteIcon, #Register #ContentContainer_MainContent_MainContent_SecureRegister .hw-signin-footer__noteIcon { color: rgba(206, 209, 214, 0.55); display: inline-flex; } #content-container.signinpage #content .page-content .hw-signin-footer__link, #Register #ContentContainer_MainContent_MainContent_SecureRegister .hw-signin-footer__link { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: .5rem; font-family: Segoe UI; font-weight: 700; font-size: 14px; line-height: 18px; text-decoration: none !important; color: rgb(0, 163, 224) !important; background: rgba(30, 41, 59, 0.40); } #content-container.signinpage #content .page-content .hw-signin-footer__link:hover, #content-container.signinpage #content .page-content .hw-signin-footer__link:focus, #Register #ContentContainer_MainContent_MainContent_SecureRegister .hw-signin-footer__link:hover, #Register #ContentContainer_MainContent_MainContent_SecureRegister .hw-signin-footer__link:focus { background: rgba(30, 41, 59, 0.60); color: rgb(0, 163, 224) !important; } #content-container.signinpage #content .page-content .hw-signin-footer__linkIcon, #Register #ContentContainer_MainContent_MainContent_SecureRegister .hw-signin-footer__linkIcon { display: inline-flex; } @media (max-width: 768px) { #content-container.signinpage #content .page-content h1, #content-container.signinpage #content .page-content h2 { font-size: 32px; line-height: 40px; } } #content-container.signinpage #content .page-content .form-group .label, #content-container.signinpage #content .page-content .form-group .col-sm-8 { -ms-flex: 0 1 auto; flex: 0 1 auto; max-width: 100%; } #content-container.signinpage #content .page-content .form-group .form-control { padding: 1em; border-radius: 8px; /* portalbasictheme.css forces .form-control background via !important */ background-color: rgba(0, 0, 0, 0.12) !important; color: rgba(255, 255, 255, 0.92) !important; } #content-container.signinpage #content .page-content .form-group .form-control:focus { border-color: rgba(0, 163, 224, 0.75) !important; /* box-shadow: 0 0 0 3px rgba(0, 163, 224, 0.18) !important; */ } #content-container.signinpage ::placeholder { color: rgba(247, 247, 247, 0.58) !important; } #content-container.signinpage .help-block { color: rgba(247, 247, 247, 0.78) !important; } /* Provider buttons (external login) */ #content-container.signinpage #content .page-content button.btn[name='provider'], #content-container.signinpage #content .page-content input.btn[name='provider'] { margin: 12px 0px 0px !important; width: 100%; padding: 16px 18px; min-height: 56px; border-radius: 12px; font-family: Segoe UI; font-weight: 700; font-size: 16px; line-height: 1.25; display: block; text-align: center; background: rgba(30, 41, 59, 0.92) !important; background-image: none !important; color: rgba(255, 255, 255, 0.92) !important; word-break: normal; overflow-wrap: break-word; white-space: normal; box-sizing: border-box; transition: background 200ms ease; cursor: pointer; } /* If provider controls are actual