/* '**********************************************************************' '* © Copyright 2026 Vega Solutions Ltd, all rights reserved. *' '* *' '* This software is the copyrighted work of Vega Solutions Ltd. Its *' '* use is governed by the terms of an end-user license agreement *' '* granted by Vega Solutions Ltd. Use of the software without *' '* a license agreement is prohibited. *' '* *' '* WITHOUT LIMITING THE FOREGOING, MODIFYING, COPYING OR *' '* REPRODUCTION OF THE SOFTWARE IS EXPRESSLY PROHIBITED. *' '**********************************************************************' '* Version Date Who Description '* 12.01.01 24/09/2026 JM REQ#5744 SiriusNG - DigiHub login restyle '*/ /* Linked last by Index.cshtml / Error.cshtml only when LoginStyle = DigiHub; tokens come from SiriusStyles :root. Auth-page rules sit under body:has(:is()), offline under body:has(> .offlineNavBar), the error page under body.dh-error. */ @font-face { font-family: 'InterVariable'; src: url('/fonts/InterVariable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'DM Mono'; src: url('/fonts/DMMono-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; } :root { --dh-font: var(--login-font, 'InterVariable'), 'InterVariable', 'Inter', -apple-system, 'Segoe UI', sans-serif; --dh-mono: 'DM Mono', ui-monospace, 'Cascadia Mono', monospace; --dh-neutral-50: #F8F9FB; --dh-neutral-100: #F0F2F7; --dh-neutral-200: #E2E6EF; --dh-neutral-400: #A3B0C8; --dh-neutral-600: #596585; --dh-neutral-950: #0A1020; --dh-cta: #FF6600; --dh-cta-hover: #E82840; --dh-amber: #F7A600; --dh-error: #FF495D; --dh-error-surface: #FFF2F3; --dh-error-border: #FFC4CA; --dh-eyebrow: #9992F5; --dh-shadow-modal: 0 12px 36px 16px rgba(0,0,0,0.24); --dh-focus: 0 0 0 3px rgba(255,255,255,0.85); } /* ---------- Page (bleed) ---------- */ body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)), body:has(> .offlineNavBar), body.dh-error { background: var(--partner-bleed); color: #fff; font-family: var(--dh-font); } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .main-template, body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #page-container { background: transparent; min-height: 100vh; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .modal { --bs-modal-color: var(--dh-neutral-950); } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage))::after, body:has(> .offlineNavBar)::after, body.dh-error::after { content: ''; position: fixed; right: -100px; bottom: -140px; width: 517px; height: 521px; background: var(--login-splash) no-repeat center / contain; opacity: .3; pointer-events: none; z-index: 0; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #top-section, body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #mid-section, body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #footer { position: relative; z-index: 1; background: transparent; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #top-section { z-index: 3; pointer-events: none; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #top-section :is(a, button, input, vw-button, [role=button], .cookieContainer) { pointer-events: auto; } /* Header: logo top-left on the bleed, Log Out kept top-right */ body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .navBar, body:has(> .offlineNavBar) .offlineNavBar { background: transparent; border-bottom: 0; padding: 40px 48px 0; min-height: 0; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #logoImage, body:has(> .offlineNavBar) #logoImage img { height: 64px; width: auto; } body:has(vp-loginpage) #logoImage { height: 72px; } /* White logo on the bleed; :where() keeps it overridable by a tenant's HeadImageStyle (decide on dev) */ :where(body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #logoImage:not([src*="vega-logo-white"], [src*="/vegatechnology/" i])), :where(body:has(> .offlineNavBar) #logoImage img:not([src*="vega-logo-white"], [src*="/vegatechnology/" i])) { filter: var(--login-logo-filter, brightness(0) invert(1)); } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #logoImage[src*="/vegatechnology/" i], body:has(> .offlineNavBar) #logoImage img[src*="/vegatechnology/" i] { content: url('/images/DigiHub/vega-logo-white.svg'); } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .pageBreak, body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #firstHr, body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #secondHr { display: none; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #logOut-button.nav-button { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.7); border-radius: 999px; padding: 8px 18px; font: 600 14px/20px var(--dh-font); } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #logOut-button.nav-button:hover { background: rgba(255,255,255,.12); } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #logOut-button i { margin-left: 8px; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .navBar .theLogo, body:has(> .offlineNavBar) .offlineNavBar .theLogo { margin: 0 auto 0 0; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .navBar .burger-menu { display: none; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .navBar .button-container > vw-button.nav-button:not(#logOut-button) { display: none; } /* Title → white display heading above the card */ body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #title-panel { border: 0; justify-content: center; padding: 24px 16px 28px; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #title-panel .theTitle { color: #fff; font: 700 36px/1.2 var(--dh-font); letter-spacing: 0; text-transform: none; } body:has(vp-loginpage) #title-panel { display: none !important; } /* ---------- Card (shared pattern: page element = card) ---------- */ body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(vp-memorablewordpage, vp-memorablewordchangepage, vp-twofapage, vp-twofasmspage, vp-twofaemailpage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-termsandconditionspage) { display: flex; flex-direction: column; align-items: stretch; gap: 20px; width: 559px; max-width: calc(100% - 32px); margin: 0 auto 48px; background: var(--dh-neutral-50); color: var(--dh-neutral-950); border-radius: 16px; box-shadow: var(--dh-shadow-modal); padding: 32px 32px 40px; box-sizing: border-box; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(vp-memorablewordpage, vp-memorablewordchangepage, vp-twofapage, vp-twofasmspage, vp-twofaemailpage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-termsandconditionspage):empty { display: none; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(.dialogTextContainer, .memWrdTextContainer, .newPasswordTextContainer, .resetPassTextContainer), body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(.TwoFaContainer, .TwoFaEnrollContainer, .memorableWordContainer, .memorableWordChangeContainer, .iForgotContainer, .PasswordResetContainer, .NewPasswordContainer, .TandCDiv) { display: block; width: auto; min-width: 0; max-width: none; margin: 0; padding: 0; background: transparent; border: 0; float: none; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .dialogTextContainer, body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .memWrdTextContainer, body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .newPasswordTextContainer, body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .resetPassTextContainer { color: var(--partner-action); font: 700 20px/28px var(--dh-font) !important; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(.dialogTextContainer, .memWrdTextContainer, .newPasswordTextContainer, .resetPassTextContainer) h2 { color: var(--partner-action) !important; font: 700 24px/1.3 var(--dh-font); margin: 0 0 12px; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(.dialogTextContainer, .memWrdTextContainer) p { color: var(--dh-neutral-600); font: 400 16px/24px var(--dh-font); margin: 0 0 10px; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(vp-memorablewordpage, vp-memorablewordchangepage) .memWrdTextContainer > h2:first-child { display: none; } /* Login: welcome display above, card, disclaimer below */ body:has(vp-loginpage) .loginPage { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 132px); box-sizing: border-box; padding: 24px 16px 48px; } body:has(vp-loginpage) .welcomeTextContainer { display: contents; } body:has(vp-loginpage) .welcomeTextContainer h2 { order: 0; color: #fff !important; font: 700 36px/1.2 var(--dh-font); margin: 0 0 28px; text-align: center; } body:has(vp-loginpage) .welcomeTextContainer p { order: 2; width: 559px; max-width: 100%; color: #fff; font: 400 16px/24px var(--dh-font); margin: 0 0 14px; } body:has(vp-loginpage) .welcomeTextContainer p:first-of-type { margin-top: 28px; } body:has(vp-loginpage) .loginContainer { order: 1; width: 559px; max-width: 100%; box-sizing: border-box; margin: 0; background: var(--dh-neutral-50); color: var(--dh-neutral-950); border-radius: 16px; box-shadow: var(--dh-shadow-modal); padding: 32px 32px 40px; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .dh-card-title { color: var(--partner-action) !important; font: 700 24px/1.3 var(--dh-font); text-transform: none; text-align: left; margin: 0 0 18px; } /* ---------- Fields ---------- */ body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(#loginForm, #aVForm, #memWrdForm, #memWrdChangeForm, #newPasswordForm, #resetPassForm) { background: transparent; border: 0; padding: 0; margin: 0; width: auto; color: var(--dh-neutral-950); } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(#loginForm, #aVForm, #memWrdForm, #memWrdChangeForm, #newPasswordForm, #resetPassForm) .container-fluid { display: block; background: transparent; color: inherit; width: auto; max-width: none; margin: 0; padding: 0; border-radius: 0; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(#loginForm, #aVForm, #memWrdForm, #memWrdChangeForm, #newPasswordForm, #resetPassForm) .row { display: grid; grid-template-columns: auto 1fr; grid-auto-flow: row dense; column-gap: 10px; margin: 0; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(#loginForm, #aVForm, #memWrdForm, #memWrdChangeForm, #newPasswordForm, #resetPassForm) :is(.vFormLabel, .vFormElement) { grid-column: 1 / -1; width: auto; max-width: none; padding: 0; flex: none; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .vFormLabel { color: var(--dh-neutral-950); font: 500 14px/20px var(--dh-font); margin: 0 0 6px; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .vFormElement { margin: 0 0 20px; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(#loginForm, #aVForm, #memWrdForm, #memWrdChangeForm, #newPasswordForm, #resetPassForm) .vFormLabel { display: block; flex: none; white-space: normal; color: var(--dh-neutral-950); font: 500 14px/20px var(--dh-font); margin: 0 0 6px; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(#loginForm, #aVForm, #memWrdForm, #memWrdChangeForm, #newPasswordForm, #resetPassForm) .vFormElement { margin: 0 0 20px; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(#loginForm, #aVForm, #memWrdForm, #memWrdChangeForm, #newPasswordForm, #resetPassForm) .vFormElement vw-input { display: block; width: 100%; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(#loginForm, #aVForm, #memWrdForm, #memWrdChangeForm, #newPasswordForm, #resetPassForm) .vFormElement input:not([type=checkbox]):not([type=hidden]) { width: 100%; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .dh-required { color: var(--dh-error); } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .vFormElement input:not([type=checkbox]):not([type=hidden]) { width: 100%; height: 38px; box-sizing: border-box; padding: 8px 12px; font: 400 14px/20px var(--dh-font); color: var(--dh-neutral-950); background: #fff; border: 1px solid var(--dh-neutral-400); border-radius: 8px; outline: none; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .vFormElement input:focus-visible { border-color: var(--partner-action); box-shadow: inset 0 0 0 1px var(--partner-action), 0 0 0 3px color-mix(in srgb, var(--partner-action) 25%, transparent); } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) input.dh-error-state { border-color: var(--dh-error) !important; box-shadow: inset 0 0 0 1px var(--dh-error) !important; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .dh-validation { display: flex; gap: 6px; margin: -14px 0 16px; grid-column: 1 / -1; color: var(--dh-error); font: 400 12px/16.5px var(--dh-font); } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .dh-validation::before { content: 'i'; flex: 0 0 15px; width: 15px; height: 15px; box-sizing: border-box; margin-top: 0.75px; display: inline-flex; align-items: center; justify-content: center; border: 1.25px solid currentColor; border-radius: 50%; font: 600 10px/1 var(--dh-font); } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #twoFaCode { width: 100%; } body:has(vp-memorablewordpage) #memWrdForm :is(#char1Input, #char2Input, #char3Input, #char4Input, #char5Input, #char6Input) { display: block; width: auto; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #memWrdForm :is(#char1Input, #char2Input, #char3Input, #char4Input, #char5Input, #char6Input) input { width: 64px; text-align: center; font-family: var(--dh-mono); } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) vp-memorablewordpage > vw-div.dialog:empty { display: none; } /* Remember-me row: checkbox before its label */ body:has(vp-loginpage) #loginForm .rememberUserIDLabel { grid-column: 2; margin: 0 0 16px; } body:has(vp-loginpage) #loginForm .rememberUserIDElement { grid-column: 1; position: static; top: auto; height: auto; margin: 0 0 16px; display: flex; align-items: center; } body:has(vp-loginpage) .rememberUserIDElement input[type=checkbox] { appearance: none; width: 20px; height: 20px; border: 1.5px solid var(--dh-neutral-400); border-radius: 6px; background: #fff; margin: 0; display: block; } body:has(vp-loginpage) .rememberUserIDElement input[type=checkbox]:checked { background: var(--partner-action) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px 20px no-repeat; border-color: var(--partner-action); } /* ---------- CTA + links ---------- */ body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(#login-button, #Submit-button, #Update-button, .tandcContinuebtn) { display: flex; margin: 8px 0 0 auto; width: fit-content; min-width: 0; height: auto; float: none; background: var(--login-cta, var(--partner-action)); color: #fff; border: 0; border-radius: 999px; padding: 12px 28px; font: 600 14px/20px var(--dh-font); box-shadow: none; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(#login-button, #Submit-button, #Update-button, .tandcContinuebtn):hover { background: color-mix(in srgb, var(--login-cta, var(--partner-action)) 75%, white) !important; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(#login-button, #Submit-button, #Update-button, .tandcContinuebtn):focus-visible { outline: 3px solid var(--login-cta, var(--partner-action)); outline-offset: 2px; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(#toLoginPage, #logOut-button):focus-visible { outline: none; box-shadow: var(--dh-focus); } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(#Update-button, #Submit-button)[disabled], body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(#Update-button, #Submit-button).disabled { background: #808080; cursor: not-allowed; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) vw-div.noCodeReceivedContainer:has(> #Submit-button) { display: grid; grid-template-columns: auto 1fr; column-gap: 4px; row-gap: 16px; align-items: center; } body:has(:is(vp-twofaemailpage, vp-twofasmspage)) vw-div.noCodeReceivedContainer:has(> #Submit-button) > vw-div.noCodeReceivedContainer { grid-row: 1; grid-column: 1; display: block; } body:has(:is(vp-twofaemailpage, vp-twofasmspage)) vw-div.noCodeReceivedContainer:has(> #Submit-button) > :is(#TwoFaSMS-resendCodeButton, #TwoFaEmail-resendCodeButton) { grid-row: 1; grid-column: 2; justify-self: start; } body:has(:is(vp-twofaemailpage, vp-twofasmspage)) vw-div.noCodeReceivedContainer:has(> #Submit-button) > #Submit-button { grid-row: 2; grid-column: 1 / -1; justify-self: end; margin: 0; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) vw-div.noCodeReceivedContainer { display: inline; color: var(--dh-neutral-950); font: 400 14px/23px var(--dh-font); } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(#TwoFaSMS-resendCodeButton, #TwoFaEmail-resendCodeButton) { background: none; border: 0; padding: 0; color: var(--partner-action); text-decoration: underline; font: 500 14px/23px var(--dh-font); } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .forgotten-password a, body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .forgotten-password { color: var(--partner-action); text-decoration: underline; font: 500 14px/20px var(--dh-font); } body:has(vp-loginpage) .microsoft-login-button { font-family: var(--dh-font); } /* Help expander (memorable word / passwords) */ body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #Help-button { background: none; border: 0; padding: 0; color: var(--partner-action); font: 600 14px/20px var(--dh-font); } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(.memWrdhelpText-container, .passWrdhelpText-container, [class*="passWrdhelpText-container"]) { background: #fff; border: 1px solid var(--dh-neutral-200); border-radius: 8px; padding: 12px 16px; margin-top: 8px; color: var(--dh-neutral-950); font: 400 13px/19px var(--dh-font); } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(.memWrdhelpText-container, .passWrdhelpText-container, [class*="passWrdhelpText-container"]):not([style*="none"]) { display: block !important; } /* In-card toast → coral banner */ body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) vw-toast .toastalert { position: static; width: auto; margin: 16px 0 0; border-radius: 8px; padding: 12px 16px; background: var(--dh-error-surface); border: 1px solid var(--dh-error-border); color: var(--dh-error); font: 500 14px/20px var(--dh-font); box-shadow: none; } /* QR enrol: keep a white quiet zone */ body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .qrCodeImage img { background: #fff; padding: 12px; border-radius: 12px; width: 240px; height: auto; display: block; margin: 8px auto 28px; } /* ---------- Terms and conditions ---------- */ body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) vp-termsandconditionspage .TandCTextDiv-text { display: block; max-height: 50vh; overflow: auto; border: 0; background-color: transparent !important; color: var(--dh-neutral-950); font: 400 14px/22px var(--dh-font); } body:has(vp-termsandconditionspage) .main-template { min-width: 0; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) vp-termsandconditionspage .TandCTextDiv-text :is(center, table, tbody, tr, td) { display: block; width: auto; border: 0; padding: 0; background: transparent; text-align: left; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) vp-termsandconditionspage .TandCTextDiv-text font { font: inherit; color: inherit; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) vp-termsandconditionspage .TandCTextDiv-text br:first-child, body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) vp-termsandconditionspage .TandCTextDiv-text > br { display: none; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .TandCCheckOuterDiv { display: block; width: auto; margin: 24px 0 0; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .TandCCheckInnerDiv { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 20px; align-items: center; margin: 0; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .TandCCheckTextDiv { grid-row: 1; grid-column: 2; min-width: 0; font: 500 14px/20px var(--dh-font); color: var(--dh-neutral-950); } body:has(vp-termsandconditionspage) vp-termsandconditionspage #tandcCheckbox { grid-row: 1; grid-column: 1; display: flex; padding: 0; } body:has(vp-termsandconditionspage) vp-termsandconditionspage #tandcCheckbox input { width: 20px; height: 20px; margin: 0; accent-color: var(--partner-action); } body:has(vp-termsandconditionspage) vp-termsandconditionspage .tandcContinuebtn { grid-row: 2; grid-column: 1 / -1; justify-self: end; height: auto !important; } /* ---------- LogOut hero ---------- */ body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) vp-logoutpage { display: block; align-self: flex-start; width: auto; max-width: 760px; padding: 60px 48px; margin: 0 auto 0 0; box-shadow: none; background: none; } body:has(vp-logoutpage) #page-content { padding-left: 0; padding-right: 0; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) vp-logoutpage .logOutDiv { display: block; width: auto; max-width: none; margin: 0; padding: 0; text-align: left; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) vp-logoutpage .dh-eyebrow { color: var(--login-hero-eyebrow, var(--dh-eyebrow)); font: 600 15px/20px var(--dh-font); } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) vp-logoutpage .dh-hero-title { color: #fff; font: 600 48px/1.15 var(--dh-font); margin: 8px 0 20px; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) vp-logoutpage .dh-hero-text { color: #fff; font: 400 20px/28px var(--dh-font); margin: 0; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) vp-logoutpage .logOutDiv-text { display: none; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #toLoginPage { position: fixed; top: 40px; right: 48px; z-index: 2; background: var(--login-hero-cta, var(--dh-amber)); color: var(--login-hero-cta-text, var(--dh-neutral-950)); border: 0; border-radius: 999px; padding: 12px 28px; font: 600 14px/20px var(--dh-font); width: auto; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #toLoginPage:hover { background: color-mix(in srgb, var(--login-hero-cta, var(--dh-amber)) 75%, white); } /* ---------- Offline hero ---------- */ body:has(> .offlineNavBar) .offlineContainer { display: block; padding: 60px 48px; max-width: 760px; } body:has(> .offlineNavBar) .offline-text { display: block; width: auto; max-width: none; margin: 0; padding: 0; background: none; border-radius: 0; color: #fff; font-family: var(--dh-font); text-align: left; } body:has(> .offlineNavBar) .offline-text h1 { color: #fff !important; font: 600 48px/1.15 var(--dh-font); text-transform: none; text-align: left; margin: 0 0 20px; } body:has(> .offlineNavBar) .offline-text p { color: #fff; font: 400 20px/28px var(--dh-font); text-align: left; margin: 0 0 12px; } /* ---------- Error page ---------- */ body.dh-error { display: flex; align-items: center; justify-content: center; min-height: 100vh; } body.dh-error .error-card { background: var(--dh-neutral-50); color: var(--dh-neutral-950); border-radius: 16px; box-shadow: var(--dh-shadow-modal); width: 559px; max-width: calc(100% - 32px); position: relative; z-index: 1; } body.dh-error .error-icon { background: var(--partner-action); } body.dh-error .btn { background: var(--login-cta, var(--partner-action)); border-radius: 999px; padding: 12px 28px; font-weight: 600; } /* ---------- Footer + cookie bar (cookie bar may show on any page once DigiHub is on) ---------- */ body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #footer { display: none; } .cookieContainer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: #fff; color: var(--dh-neutral-950); padding: 20px 40px; font: 400 16px/26px var(--dh-font); box-shadow: 0 -4px 16px rgba(0,0,0,.12); } .cookieContainer .nav-button { display: flex; justify-content: center; text-align: center; background: var(--dh-neutral-950); color: #fff; border: 2px solid var(--dh-neutral-950); border-radius: 999px; padding: 12px 26px; font: 500 15px/20px var(--dh-font); } .cookieContainer .nav-button:focus-visible { outline: 3px solid var(--dh-neutral-950); outline-offset: 2px; } .cookieContainer a { color: inherit; text-decoration: underline; } /* ---------- Narrow screens ---------- */ @media (max-width: 768px) { body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .navBar .button-container { display: flex; position: static; width: auto; background: transparent; box-shadow: none; padding: 0; transform: none; visibility: visible; opacity: 1; } } @media (max-width: 600px) { body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) .navBar, body:has(> .offlineNavBar) .offlineNavBar { padding: 24px 16px 0; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #title-panel .theTitle, body:has(vp-loginpage) .welcomeTextContainer h2 { font-size: 28px; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) :is(vp-memorablewordpage, vp-memorablewordchangepage, vp-twofapage, vp-twofasmspage, vp-twofaemailpage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-termsandconditionspage), body:has(vp-loginpage) .loginContainer { padding: 24px 20px 28px; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) vp-logoutpage, body:has(> .offlineNavBar) .offlineContainer { padding: 32px 16px; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) vp-logoutpage .dh-hero-title, body:has(> .offlineNavBar) .offline-text h1 { font-size: 32px; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage)) #toLoginPage { position: static; display: inline-flex; margin-top: 24px; } .cookieContainer { flex-direction: column; align-items: stretch; padding: 16px; } body:has(:is(vp-loginpage, vp-logoutpage, vp-twofapage, vp-twofaemailpage, vp-twofasmspage, vp-twofaenrollpage, vp-iforgotpage, vp-passwordresetpage, vp-newpasswordpage, vp-memorablewordpage, vp-memorablewordchangepage, vp-termsandconditionspage))::after, body:has(> .offlineNavBar)::after, body.dh-error::after { width: 260px; height: 262px; right: -60px; bottom: -80px; } }