/* ========================================================= SAPHNELO PATIENT LOGIN PAGE Scoped only to #patient-login-updated IMPORTANT: The page styles remain scoped to #patient-login-updated. The final section also corrects the runtime AEM modal markup appended directly under . ========================================================= */ #patient-login-updated { --page-max-width: 1310px; --content-max-width: 1265px; --saphnelo-blue: #2d6f88; --saphnelo-dark-blue: #006982; --saphnelo-light-blue: #eef9fb; --saphnelo-pink: #bd4c88; --saphnelo-green: #b8d52f; --saphnelo-grey: #5a6267; --saphnelo-light-grey: #f3f3f3; width: 100%; overflow-x: hidden; } #patient-login-updated, #patient-login-updated * { box-sizing: border-box; } #patient-login-updated img { display: block; max-width: 100%; height: auto; } #patient-login-updated a { text-decoration: none; } /* ========================================================= 1. HEADER ========================================================= */ #patient-login-updated #saphnelo-header { position: relative; width: 100%; max-width: var(--page-max-width); height: 84px; min-height: 84px; margin: 0 auto; padding: 0; overflow: hidden; background: linear-gradient( 90deg, #ffffff 0%, #ffffff 14%, #eef9fb 38%, #d9f1f6 100% ); border-bottom: 1px solid #8e8e8e; } #patient-login-updated #saphnelo-header > .text, #patient-login-updated #saphnelo-header > .text > .cmp-text { width: 100%; height: 84px; margin: 0; padding: 0; } #patient-login-updated #saphnelo-header > .text > .cmp-text { position: relative; display: flex; align-items: center; } #patient-login-updated #saphnelo-header .saphnelo-header-logo { position: absolute; top: 50%; left: 25px; width: 202px; transform: translateY(-50%); } #patient-login-updated #saphnelo-header .saphnelo-header-logo img { width: 202px; max-width: 202px; } #patient-login-updated #saphnelo-header .saphnelo-header-actions { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; gap: 46px; margin: 0; transform: translate(-50%, -50%); } #patient-login-updated #saphnelo-header .saphnelo-header-button { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 14px; color: #ffffff; border-radius: 4px; box-shadow: 0 2px 5px rgb(0 0 0 / 18%); font-size: 13px; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; } #patient-login-updated #saphnelo-header .saphnelo-header-button-patient { width: 137px; min-width: 137px; background: var(--saphnelo-pink); } #patient-login-updated #saphnelo-header .saphnelo-header-button-hcp { width: 270px; min-width: 237px; background: var(--saphnelo-blue); } #patient-login-updated #saphnelo-header .saphnelo-header-language { position: absolute; top: 50%; right: 25px; margin: 0; color: var(--saphnelo-blue); font-size: 11px; font-weight: 500; line-height: 1; white-space: nowrap; transform: translateY(-50%); } #patient-login-updated #saphnelo-header .saphnelo-header-language a, #patient-login-updated #saphnelo-header .saphnelo-header-language span { color: var(--saphnelo-blue); } #patient-login-updated #saphnelo-header .saphnelo-header-language span { margin: 0 6px; } /* ========================================================= 2. HERO ========================================================= */ #patient-login-updated #saphnelo-hero { width: 100%; max-width: var(--content-max-width); margin: 0 auto; padding: 0; background: #ffffff; } #patient-login-updated #saphnelo-hero > .text, #patient-login-updated #saphnelo-hero > .text > .cmp-text { width: 100%; margin: 0; padding: 0; } #patient-login-updated #saphnelo-hero .saphnelo-hero-heading { position: relative; z-index: 3; width: 100%; margin: 0; padding: 50px 25px 0; } #patient-login-updated #saphnelo-hero .saphnelo-hero-heading h1 { width: 100%; max-width: 1190px; margin: 0 auto -38px; color: var(--saphnelo-dark-blue); font-family: "Barlow Condensed", Arial, sans-serif; font-size: 74px; font-weight: 700; font-style: italic; line-height: 0.98; text-align: center; text-transform: uppercase; } #patient-login-updated #saphnelo-hero .heading-line-1, #patient-login-updated #saphnelo-hero .heading-line-2 { display: flex; align-items: center; justify-content: center; width: 100%; } #patient-login-updated #saphnelo-hero .heading-line-1 { gap: 14px; white-space: nowrap; } #patient-login-updated #saphnelo-hero .heading-line-2 { margin-top: 18px; white-space: nowrap; } #patient-login-updated #saphnelo-hero .heading-logo { display: inline-block; flex: 0 0 auto; width: 430px; min-width: 430px; max-width: 430px; margin: -12px 0 0; vertical-align: middle; } #patient-login-updated #saphnelo-hero .saphnelo-hero-wrapper { position: relative; z-index: 1; width: 100%; max-width: var(--content-max-width); margin: 0 auto; overflow: hidden; } #patient-login-updated #saphnelo-hero .saphnelo-hero-image { width: 100%; max-width: var(--content-max-width); margin: 0; } #patient-login-updated #saphnelo-hero .saphnelo-hero-overlay { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 45.5%; height: 100%; padding: 115px 35px 34px; text-align: center; } #patient-login-updated #saphnelo-hero .hero-overlay-text, #patient-login-updated #saphnelo-hero .saphnelo-hero-overlay p { align-self: center; width: 100%; max-width: 470px; margin: 0 auto 42px !important; padding: 0; color: #ffffff; font-family: "Barlow Condensed", Arial, sans-serif; font-size: 48px; font-weight: 600; font-style: italic; line-height: 1.02; text-align: center !important; } #patient-login-updated #saphnelo-hero .hero-get-started { align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 260px; min-width: 260px; height: 70px; margin: 0 auto 52px !important; padding: 0 25px; background: #ffffff; color: #b54885; border: 4px solid var(--saphnelo-green); border-radius: 40px; font-family: "Barlow Condensed", Arial, sans-serif; font-size: 35px; font-weight: 700; line-height: 1; text-align: center; text-transform: uppercase; } #patient-login-updated #saphnelo-hero .hero-pen-image { align-self: center; width: 500px; max-width: 96%; margin: 0 auto 22px; } #patient-login-updated #saphnelo-hero .hero-pen-label { align-self: center; display: inline-flex; align-items: center; justify-content: center; min-height: 38px; margin: 0 auto; padding: 6px 15px; background: var(--saphnelo-pink); color: #ffffff; border-radius: 4px; font-family: "Barlow Condensed", Arial, sans-serif; font-size: 23px; font-weight: 600; font-style: italic; line-height: 1; text-align: center; text-transform: uppercase; } #patient-login-updated #saphnelo-hero .hero-pen-label sup { position: relative; top: -0.3em; margin-left: 2px; font-size: 60%; line-height: 0; } /* ========================================================= 3. VIDEO ========================================================= */ #patient-login-updated .video { width: 100%; max-width: var(--content-max-width); margin: 0 auto; padding: 72px 0 66px; background: #ffffff; } #patient-login-updated .video .cmp-video { width: 845px; max-width: 100%; margin: 0 auto; } #patient-login-updated .video .cmp-video__holder, #patient-login-updated .video .cmp-video__player, #patient-login-updated .video .cmp-video__video { width: 100% !important; max-width: 845px; margin: 0 auto; } #patient-login-updated .video .cmp-video__player { height: auto !important; aspect-ratio: 845 / 472; } #patient-login-updated .video .cmp-video__video, #patient-login-updated .video iframe, #patient-login-updated .video video { width: 100% !important; height: 100% !important; } /* ========================================================= 4. COVERAGE ========================================================= */ #patient-login-updated #saphnelo-coverage, #patient-login-updated #saphnelo-coverage > .text, #patient-login-updated #saphnelo-coverage > .text > .cmp-text { width: 100%; min-height: 895px; margin: 0 auto; padding: 0; background: var(--saphnelo-light-blue) !important; opacity: 1 !important; } #patient-login-updated #saphnelo-coverage { max-width: var(--content-max-width); } #patient-login-updated #saphnelo-coverage > .text > .cmp-text { padding: 48px 70px 50px; } #patient-login-updated #saphnelo-coverage .saphnelo-coverage-heading { width: 100%; margin: 0 0 35px; } #patient-login-updated #saphnelo-coverage .saphnelo-coverage-heading h2 { width: 100%; max-width: 925px; margin: 0 auto; color: var(--saphnelo-grey); font-family: "Barlow Condensed", Arial, sans-serif; font-size: 42px; font-weight: 700; line-height: 48px; text-align: center; text-transform: uppercase; } #patient-login-updated #saphnelo-coverage .saphnelo-coverage-heading h2 span { display: block; } #patient-login-updated #saphnelo-coverage .saphnelo-coverage-heading sup, #patient-login-updated #saphnelo-coverage .saphnelo-coverage-message sup { position: relative; top: -0.35em; font-size: 55%; line-height: 0; } #patient-login-updated #saphnelo-coverage .saphnelo-coverage-main { display: grid; grid-template-columns: 525px minmax(0, 1fr); align-items: center; column-gap: 58px; width: 100%; max-width: 1020px; margin: 0 auto 46px; } #patient-login-updated #saphnelo-coverage .saphnelo-coverage-map { width: 525px; max-width: 100%; } #patient-login-updated #saphnelo-coverage .saphnelo-coverage-map img { width: 525px; max-width: 100%; } #patient-login-updated #saphnelo-coverage .saphnelo-coverage-eligibility { position: relative; display: flex; align-items: center; min-height: 180px; padding-left: 32px; } #patient-login-updated #saphnelo-coverage .saphnelo-coverage-eligibility::before { content: ""; position: absolute; top: 50%; left: 0; width: 4px; height: 138px; background: var(--saphnelo-green); transform: translateY(-50%); } #patient-login-updated #saphnelo-coverage .saphnelo-coverage-divider { display: none !important; } #patient-login-updated #saphnelo-coverage .saphnelo-coverage-message { width: 100%; max-width: 390px; margin: 0; color: var(--saphnelo-dark-blue); font-family: "Montserrat", Arial, sans-serif; font-size: 31px; font-weight: 700; line-height: 1.22; text-align: left; } #patient-login-updated #saphnelo-coverage .saphnelo-discussion-guide { display: grid; grid-template-columns: 155px minmax(0, 1fr); align-items: center; gap: 30px; width: 100%; max-width: 820px; min-height: 192px; margin: 0 auto; padding: 18px 32px; background: #ffffff !important; border-radius: 8px; } #patient-login-updated #saphnelo-coverage .saphnelo-discussion-guide-thumbnail { width: 135px; margin: 0 auto; } #patient-login-updated #saphnelo-coverage .saphnelo-discussion-guide-content p { margin: 0 0 22px; color: #222222; font-family: "Montserrat", Arial, sans-serif; font-size: 18px; line-height: 1.35; } #patient-login-updated #saphnelo-coverage .saphnelo-download-button { display: inline-flex; align-items: center; justify-content: center; width: 110px; min-width: 110px; height: 40px; padding: 0 16px; background: #45a5c4; color: #ffffff; border-radius: 3px; font-family: "Barlow Condensed", Arial, sans-serif; font-size: 18px; font-weight: 700; line-height: 1; } /* ========================================================= 5. PATIENT LOGIN ========================================================= */ #patient-login-updated #saphnelo-patient-login { position: relative !important; display: block !important; width: calc(100% - 40px) !important; max-width: var(--content-max-width) !important; margin: 42px auto 0 !important; padding: 0 !important; overflow: visible !important; background: var(--saphnelo-light-grey) !important; } #patient-login-updated #saphnelo-patient-login > .text, #patient-login-updated #saphnelo-patient-login > .dynamicform, #patient-login-updated #saphnelo-patient-login > .text > .cmp-text, #patient-login-updated #saphnelo-patient-login .cmp-dynamicform, #patient-login-updated #saphnelo-patient-login .form-holder, #patient-login-updated #saphnelo-patient-login .cmp-dynamicform__generated-form, #patient-login-updated #saphnelo-patient-login .cmp-dynamicform__form-validation { float: none !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding-left: 0; padding-right: 0; } #patient-login-updated #saphnelo-patient-login > .text:first-child, #patient-login-updated #saphnelo-patient-login > .text:first-child > .cmp-text, #patient-login-updated #saphnelo-patient-login > .dynamicform, #patient-login-updated #saphnelo-patient-login .cmp-dynamicform, #patient-login-updated #saphnelo-patient-login .form-holder, #patient-login-updated #saphnelo-patient-login .cmp-dynamicform__generated-form, #patient-login-updated #saphnelo-patient-login .cmp-dynamicform__form-validation, #patient-login-updated #saphnelo-patient-login .din-links-wrap { background: var(--saphnelo-light-grey) !important; } #patient-login-updated #saphnelo-patient-login .saphnelo-login-header { width: 100% !important; padding: 47px 55px 0 !important; text-align: center; } #patient-login-updated #saphnelo-patient-login .saphnelo-login-heading { max-width: 950px !important; margin: 0 auto 58px !important; color: var(--saphnelo-grey); font-family: "Barlow Condensed", Arial, sans-serif !important; font-size: 32px !important; font-weight: 700 !important; line-height: 1.12 !important; text-align: center; text-transform: uppercase; } #patient-login-updated #saphnelo-patient-login .saphnelo-login-heading sup { position: relative; top: -0.35em; font-size: 55%; line-height: 0; } #patient-login-updated #saphnelo-patient-login .saphnelo-login-description { max-width: 900px !important; margin: 0 auto !important; color: #262626; font-family: "Montserrat", Arial, sans-serif !important; font-size: 17px !important; line-height: 1.45 !important; text-align: center; } #patient-login-updated #saphnelo-patient-login .cmp-dynamicform__form-validation { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; padding: 34px 55px 0 !important; border: 0; box-shadow: none; } #patient-login-updated #saphnelo-patient-login .cmp-dynamicform__form-label-container { display: none !important; } #patient-login-updated #saphnelo-patient-login .cmp-dynamicform__form-group:not(.button-group):not(.captch-holder) { display: block !important; float: none !important; width: 520px !important; max-width: 100% !important; margin: 0 auto !important; } #patient-login-updated #saphnelo-patient-login .cmp-dynamicform__form-control-container { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; margin: 0 auto !important; padding: 0 !important; } #patient-login-updated #saphnelo-patient-login .cmp-dynamicform input.form-control { display: block !important; float: none !important; width: 520px !important; max-width: 100% !important; height: 50px !important; min-height: 50px; margin: 0 auto !important; padding: 8px 14px; background: #ffffff; color: #222222; border: 1px solid #bcbcbc !important; border-radius: 4px; box-shadow: none; font-family: "Montserrat", Arial, sans-serif; font-size: 16px; outline: none; } #patient-login-updated #saphnelo-patient-login .cmp-dynamicform input.form-control:focus { border-color: var(--saphnelo-blue) !important; box-shadow: 0 0 0 2px rgb(45 111 136 / 12%); } #patient-login-updated #saphnelo-patient-login .cmp-dynamicform input.form-control.error, #patient-login-updated #saphnelo-patient-login .cmp-dynamicform input.form-control.input-validation-error, #patient-login-updated #saphnelo-patient-login .cmp-dynamicform__form-control-container.has-error input.form-control, #patient-login-updated #saphnelo-patient-login .cmp-dynamicform__form-group:has(.cmp-dynamicform__generated-form-error:not(:empty)) input.form-control { border: 2px solid #dc4548 !important; box-shadow: none !important; } #patient-login-updated #saphnelo-patient-login .cmp-dynamicform__generated-form-error { display: block !important; width: 520px !important; max-width: 100% !important; min-height: 22px !important; margin: 8px auto 0 !important; padding: 0 !important; color: #dc4548 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.25 !important; text-align: center !important; } #patient-login-updated #saphnelo-patient-login .captch-holder:empty { display: none; } #patient-login-updated #saphnelo-patient-login .button-group { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: none !important; margin: 26px auto 0 !important; } #patient-login-updated #saphnelo-patient-login .cmp-dynamicform__submit-btn { display: inline-flex; align-items: center; justify-content: center; width: 117px; min-width: 117px; height: 43px; min-height: 43px; margin: 0 auto !important; padding: 0 18px; background: #45a5c4; color: #ffffff; border: 0; border-radius: 3px; box-shadow: none; cursor: pointer; font-family: "Barlow Condensed", Arial, sans-serif; font-size: 16px; font-weight: 700; line-height: 1; } #patient-login-updated #saphnelo-patient-login .cmp-dynamicform__clear-btn, #patient-login-updated #saphnelo-patient-login .cmp-dynamicform__form-error-msg[hidden] { display: none !important; } #patient-login-updated #saphnelo-patient-login .din-links-wrap { position: relative !important; z-index: 2 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 48px !important; width: 100% !important; min-height: 150px !important; margin: 0 !important; padding: 58px 330px 48px 30px !important; overflow: visible !important; } #patient-login-updated #saphnelo-patient-login .din-wrap { margin: 0; padding: 0; } #patient-login-updated #saphnelo-patient-login .din-link { color: #1b7284 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 16px !important; font-weight: 400; line-height: 1.2; text-decoration: underline; text-underline-offset: 3px; } #patient-login-updated #saphnelo-patient-login .din-links-wrap > img.saphnelo-login-butterflies, #patient-login-updated #saphnelo-patient-login img.saphnelo-login-butterflies { position: absolute !important; z-index: 3 !important; right: 18px !important; bottom: 12px !important; display: block !important; width: 285px !important; max-width: 285px !important; height: auto !important; margin: 0 !important; object-fit: contain !important; pointer-events: none !important; } #patient-login-updated #saphnelo-patient-login > .text:has(.saphnelo-legal-copy), #patient-login-updated #saphnelo-patient-login > .text:has(.saphnelo-legal-copy) > .cmp-text { background: #ffffff !important; } #patient-login-updated #saphnelo-patient-login .saphnelo-legal-copy { width: 100% !important; max-width: var(--content-max-width) !important; margin: 0 auto !important; padding: 68px 0 26px !important; color: #555555 !important; background: #ffffff !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 12px !important; line-height: 1.45 !important; } #patient-login-updated #saphnelo-patient-login .saphnelo-legal-copy p { margin: 0 0 4px; } #patient-login-updated #saphnelo-patient-login .saphnelo-trademark-copy { margin-top: 24px !important; } /* ========================================================= 6. FOOTER ========================================================= */ #patient-login-updated #saphnelo-footer { width: 100% !important; max-width: var(--page-max-width) !important; min-height: 167px; margin: 22px auto 0 !important; padding: 0; background: #f4f4f4; } #patient-login-updated #saphnelo-footer > .text, #patient-login-updated #saphnelo-footer > .text > .cmp-text { width: 100%; margin: 0; padding: 0; } #patient-login-updated #saphnelo-footer .footer-container { width: 100% !important; max-width: var(--page-max-width) !important; min-height: 167px; margin: 0 auto !important; padding: 34px 45px 22px !important; background: #f4f4f4; } #patient-login-updated #saphnelo-footer .footer-links { display: flex; align-items: center; justify-content: center; margin: 0 0 34px; padding: 0; list-style: none; } #patient-login-updated #saphnelo-footer .footer-links li { display: flex; align-items: center; } #patient-login-updated #saphnelo-footer .footer-links li:not(:last-child)::after { content: "|"; margin: 0 12px; color: #282828; } #patient-login-updated #saphnelo-footer .footer-links a { color: #282828; font-family: "Montserrat", Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1; } #patient-login-updated #saphnelo-footer .footer-logo-wrap { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 35px !important; width: 100% !important; max-width: 1140px !important; margin: 0 auto !important; } #patient-login-updated #saphnelo-footer .footer-logo-wrap > * { flex: 0 0 auto !important; margin: 0 !important; } #patient-login-updated #saphnelo-footer .saphnelo-logo { width: 205px !important; max-width: 205px !important; } #patient-login-updated #saphnelo-footer .az-logo { width: 190px !important; max-width: 190px !important; } #patient-login-updated #saphnelo-footer .footer-code { min-width: 88px !important; color: #666666; font-family: "Montserrat", Arial, sans-serif; font-size: 12px; text-align: center !important; white-space: nowrap; } #patient-login-updated #saphnelo-footer .imc-logo { width: 225px !important; max-width: 225px !important; } #patient-login-updated #saphnelo-footer .paab-logo { width: 112px !important; max-width: 112px !important; } /* ========================================================= TABLET ========================================================= */ @media screen and (max-width: 1280px) { #patient-login-updated #saphnelo-hero { width: calc(100% - 40px); } #patient-login-updated #saphnelo-hero .saphnelo-hero-heading h1 { max-width: 1120px; font-size: 66px; } #patient-login-updated #saphnelo-hero .heading-logo { width: 385px; min-width: 385px; max-width: 385px; } #patient-login-updated #saphnelo-hero .saphnelo-hero-overlay { padding-top: 98px; } #patient-login-updated #saphnelo-hero .hero-overlay-text, #patient-login-updated #saphnelo-hero .saphnelo-hero-overlay p { font-size: 43px; } } @media screen and (max-width: 1024px) { #patient-login-updated #saphnelo-header .saphnelo-header-logo { left: 20px; width: 170px; } #patient-login-updated #saphnelo-header .saphnelo-header-logo img { width: 170px; } #patient-login-updated #saphnelo-header .saphnelo-header-actions { gap: 18px; } #patient-login-updated #saphnelo-header .saphnelo-header-button-patient { width: 120px; min-width: 120px; } #patient-login-updated #saphnelo-header .saphnelo-header-button-hcp { width: 205px; min-width: 205px; } #patient-login-updated #saphnelo-header .saphnelo-header-language { right: 20px; } #patient-login-updated #saphnelo-hero, #patient-login-updated .video, #patient-login-updated #saphnelo-coverage, #patient-login-updated #saphnelo-patient-login { width: calc(100% - 40px) !important; } #patient-login-updated #saphnelo-hero .saphnelo-hero-heading h1 { margin-bottom: -24px; font-size: 50px; } #patient-login-updated #saphnelo-hero .heading-logo { width: 285px; min-width: 285px; max-width: 285px; } #patient-login-updated #saphnelo-hero .saphnelo-hero-overlay { padding: 75px 22px 25px; } #patient-login-updated #saphnelo-hero .hero-overlay-text, #patient-login-updated #saphnelo-hero .saphnelo-hero-overlay p { margin-bottom: 28px !important; font-size: 34px; } #patient-login-updated #saphnelo-coverage > .text > .cmp-text { padding-left: 40px; padding-right: 40px; } #patient-login-updated #saphnelo-coverage .saphnelo-coverage-main { grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr); column-gap: 36px; } #patient-login-updated #saphnelo-patient-login .cmp-dynamicform__form-validation { padding-left: 35px !important; padding-right: 35px !important; } #patient-login-updated #saphnelo-patient-login .din-links-wrap { padding-right: 250px !important; } #patient-login-updated #saphnelo-patient-login img.saphnelo-login-butterflies { right: 12px !important; width: 220px !important; max-width: 220px !important; } #patient-login-updated #saphnelo-footer .footer-logo-wrap { gap: 20px !important; } #patient-login-updated #saphnelo-footer .saphnelo-logo { width: 165px !important; } #patient-login-updated #saphnelo-footer .az-logo { width: 155px !important; } #patient-login-updated #saphnelo-footer .imc-logo { width: 180px !important; } #patient-login-updated #saphnelo-footer .paab-logo { width: 95px !important; } } /* ========================================================= MOBILE ========================================================= */ @media screen and (max-width: 767px) { #patient-login-updated #saphnelo-header { height: auto; min-height: 122px; } #patient-login-updated #saphnelo-header > .text, #patient-login-updated #saphnelo-header > .text > .cmp-text { height: auto; min-height: 122px; } #patient-login-updated #saphnelo-header > .text > .cmp-text { flex-direction: column; justify-content: center; gap: 10px; padding: 12px 16px; } #patient-login-updated #saphnelo-header .saphnelo-header-logo, #patient-login-updated #saphnelo-header .saphnelo-header-actions, #patient-login-updated #saphnelo-header .saphnelo-header-language { position: static; transform: none; } #patient-login-updated #saphnelo-header .saphnelo-header-logo, #patient-login-updated #saphnelo-header .saphnelo-header-logo img { width: 165px; } #patient-login-updated #saphnelo-header .saphnelo-header-actions { width: 100%; gap: 8px; } #patient-login-updated #saphnelo-header .saphnelo-header-button-patient, #patient-login-updated #saphnelo-header .saphnelo-header-button-hcp { flex: 1 1 50%; width: auto; min-width: 0; font-size: 10px; } #patient-login-updated #saphnelo-hero, #patient-login-updated .video, #patient-login-updated #saphnelo-coverage, #patient-login-updated #saphnelo-patient-login { width: calc(100% - 24px) !important; } #patient-login-updated #saphnelo-hero .saphnelo-hero-heading { padding: 30px 12px 18px; } #patient-login-updated #saphnelo-hero .saphnelo-hero-heading h1 { margin-bottom: 0; font-size: 34px; line-height: 1; } #patient-login-updated #saphnelo-hero .heading-line-1, #patient-login-updated #saphnelo-hero .heading-line-2 { flex-wrap: wrap; white-space: normal; } #patient-login-updated #saphnelo-hero .heading-logo { width: 205px; min-width: 0; max-width: 65vw; margin-top: 0; } #patient-login-updated #saphnelo-hero .saphnelo-hero-overlay { position: relative; width: 100%; height: auto; min-height: 410px; padding: 38px 20px 30px; background: var(--saphnelo-blue); } #patient-login-updated #saphnelo-coverage, #patient-login-updated #saphnelo-coverage > .text, #patient-login-updated #saphnelo-coverage > .text > .cmp-text { min-height: auto; } #patient-login-updated #saphnelo-coverage > .text > .cmp-text { padding: 32px 20px; } #patient-login-updated #saphnelo-coverage .saphnelo-coverage-heading h2 { font-size: 28px; line-height: 1.12; } #patient-login-updated #saphnelo-coverage .saphnelo-coverage-main { display: flex; flex-direction: column; gap: 30px; margin-bottom: 36px; } #patient-login-updated #saphnelo-coverage .saphnelo-coverage-map, #patient-login-updated #saphnelo-coverage .saphnelo-coverage-map img { width: 100%; } #patient-login-updated #saphnelo-coverage .saphnelo-coverage-message { max-width: 100%; font-size: 24px; } #patient-login-updated #saphnelo-coverage .saphnelo-discussion-guide { grid-template-columns: 1fr; gap: 20px; padding: 24px 20px; text-align: center; } #patient-login-updated #saphnelo-coverage .saphnelo-download-button { margin: 0 auto; } #patient-login-updated #saphnelo-patient-login .saphnelo-login-header { padding: 32px 18px 0 !important; } #patient-login-updated #saphnelo-patient-login .saphnelo-login-heading { margin-bottom: 32px !important; font-size: 22px !important; } #patient-login-updated #saphnelo-patient-login .saphnelo-login-description { font-size: 14px !important; } #patient-login-updated #saphnelo-patient-login .cmp-dynamicform__form-validation { padding: 25px 18px 0 !important; } #patient-login-updated #saphnelo-patient-login .cmp-dynamicform__form-group:not(.button-group):not(.captch-holder), #patient-login-updated #saphnelo-patient-login .cmp-dynamicform input.form-control, #patient-login-updated #saphnelo-patient-login .cmp-dynamicform__generated-form-error { width: 100% !important; } #patient-login-updated #saphnelo-patient-login .din-links-wrap { flex-direction: column !important; gap: 15px !important; min-height: 210px !important; padding: 38px 145px 34px 20px !important; } #patient-login-updated #saphnelo-patient-login .din-link { font-size: 14px !important; } #patient-login-updated #saphnelo-patient-login img.saphnelo-login-butterflies { right: 8px !important; bottom: 12px !important; width: 125px !important; max-width: 125px !important; } #patient-login-updated #saphnelo-patient-login .saphnelo-legal-copy { padding: 38px 0 20px !important; font-size: 10px !important; } #patient-login-updated #saphnelo-footer .footer-container { padding: 25px 18px !important; } #patient-login-updated #saphnelo-footer .footer-links { flex-wrap: wrap; row-gap: 12px; } #patient-login-updated #saphnelo-footer .footer-logo-wrap { display: grid !important; grid-template-columns: 1fr 1fr !important; justify-items: center !important; row-gap: 24px !important; } #patient-login-updated #saphnelo-footer .footer-code { grid-column: 1 / -1 !important; } } @media screen and (max-width: 480px) { #patient-login-updated #saphnelo-hero .saphnelo-hero-heading h1 { font-size: 27px; } #patient-login-updated #saphnelo-hero .heading-logo { width: 170px; } #patient-login-updated #saphnelo-hero .hero-overlay-text, #patient-login-updated #saphnelo-hero .saphnelo-hero-overlay p { font-size: 31px; } #patient-login-updated #saphnelo-patient-login .din-links-wrap { padding-right: 118px !important; } #patient-login-updated #saphnelo-patient-login img.saphnelo-login-butterflies { width: 105px !important; max-width: 105px !important; } } /* ========================================================= 7. AEM DIN MODALS — CONTAINED INSIDE PATIENT LOGIN SECTION IMPORTANT: AEM creates the visible runtime modal directly below . The companion JavaScript file moves only the two DIN runtime modals into #saphnelo-patient-login and assigns these classes: .saphnelo-section-modal .saphnelo-modal--what-din .saphnelo-modal--find-din This allows the popup to remain inside the patient-login panel instead of covering or blurring the whole browser viewport. ========================================================= */ /* The modal is positioned against this section only. */ #patient-login-updated #saphnelo-patient-login { position: relative !important; isolation: isolate; overflow: visible !important; } /* Remove the global modal blur from the two relocated DIN modals. */ .cmp-modal__modalbox.saphnelo-section-modal.cmp-modal--defaultStyle.modal, .cmp-modal__modalbox.saphnelo-section-modal.cmp-modal--defaultStyle { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; filter: none !important; } /* * Keep visibility and opacity controlled by modal.css/modal.js. * Do not force hidden modals to display. */ /* ========================================================= SECTION-LEVEL MODAL LAYER ========================================================= */ #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal { position: absolute !important; inset: 0 !important; z-index: 100 !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: 100% !important; min-height: 100% !important; max-height: none !important; margin: 0 !important; padding: 24px !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; /* Reference design keeps the section visible and unblurred. */ background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; filter: none !important; } /* Centre only the active modal. */ #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal.modal--visible, #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal.cmp-modal--visible, #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal[style*="display: block"], #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal[style*="display:block"] { display: flex !important; align-items: center !important; justify-content: center !important; } /* ========================================================= COMMON WHITE MODAL BOX ========================================================= */ #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal > .modal-box { position: relative !important; width: 744px !important; max-width: calc(100% - 48px) !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: calc(100% - 48px) !important; margin: auto !important; padding: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; background: #ffffff !important; border: 0 !important; border-radius: 10px !important; box-shadow: 0 3px 6px rgb(0 0 0 / 20%), 0 1px 3px rgb(0 0 0 / 14%) !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } /* Reset the generated runtime wrappers. */ #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal > .modal-box > .modal-box__content { position: relative !important; display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 84px 50px 36px !important; overflow: visible !important; background: #ffffff !important; color: #333333 !important; opacity: 1 !important; visibility: visible !important; } #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal .modal-box__content > [role="dialog"], #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal .cmp-modal__content { position: static !important; display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; opacity: 1 !important; visibility: visible !important; } /* Remove AEM grid widths, floats and inherited component spacing. */ #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal .aem-Grid, #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal .aem-GridColumn, #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal .text, #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal .cmp-text { float: none !important; clear: both !important; display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; } /* Hide the author-configured title and empty helper text. */ #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal .cmp-modal__title, #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal .cmp-modal__field-info { display: none !important; } /* ========================================================= AEM CLOSE BUTTON ========================================================= */ #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal .modal__close { position: absolute !important; top: 25px !important; right: 24px !important; z-index: 50 !important; display: inline-flex !important; flex-direction: row-reverse !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 30px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; cursor: pointer !important; } #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal .modal__closeLabel { display: inline-block !important; margin: 0 !important; padding: 0 !important; color: #333333 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1 !important; text-decoration: underline !important; text-underline-offset: 2px !important; } #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal .modal__closeIcon { display: inline-flex !important; flex: 0 0 30px !important; align-items: center !important; justify-content: center !important; width: 30px !important; min-width: 30px !important; height: 30px !important; min-height: 30px !important; margin: 0 !important; padding: 4px !important; background: transparent !important; border: 3px solid #bd4c88 !important; border-radius: 50% !important; } #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal .modal__closeIcon svg { display: block !important; width: 16px !important; height: 16px !important; margin: 0 !important; } #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal .modal__closeIcon path { fill: #bd4c88 !important; } /* ========================================================= MODAL 1 — WHAT IS A DIN? ========================================================= */ #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal.saphnelo-modal--what-din > .modal-box > .modal-box__content { min-height: 180px !important; padding: 84px 50px 34px !important; } #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal .din-modal-content { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 62px !important; margin: 0 !important; padding: 0 !important; } #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal .din-modal-text { width: 100% !important; max-width: 590px !important; margin: 0 auto !important; padding: 0 !important; color: #333333 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.35 !important; text-align: center !important; } /* ========================================================= MODAL 2 — WHERE CAN I FIND MY DIN? ========================================================= */ #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal.saphnelo-modal--find-din > .modal-box > .modal-box__content { min-height: 405px !important; padding: 88px 38px 30px !important; } /* Reset the custom inner wrapper; AEM owns the actual popup shell. */ #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal .saphnelo-din-modal, #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal .saphnelo-din-modal-box { position: static !important; inset: auto !important; display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } /* Avoid two close controls in modal 2. */ #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal .saphnelo-din-modal-close { display: none !important; } #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal .saphnelo-din-location-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: start !important; justify-content: center !important; column-gap: 48px !important; row-gap: 30px !important; width: 100% !important; max-width: 670px !important; margin: 0 auto !important; padding: 0 !important; } #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal .saphnelo-din-location-item { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; text-align: center !important; } #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal .saphnelo-din-location-text { width: 100% !important; min-height: 54px !important; margin: 0 0 22px !important; padding: 0 !important; color: #333333 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 17px !important; font-weight: 400 !important; line-height: 1.35 !important; text-align: center !important; } #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal .saphnelo-din-location-image { display: block !important; width: auto !important; max-width: 100% !important; height: 210px !important; max-height: 210px !important; margin: 0 auto !important; object-fit: contain !important; } /* ========================================================= TABLET — 701px TO 1024px ========================================================= */ @media screen and (max-width: 1024px) { #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal { padding: 18px !important; } #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal > .modal-box { width: 720px !important; max-width: calc(100% - 36px) !important; max-height: calc(100% - 36px) !important; } #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal > .modal-box > .modal-box__content { padding-left: 32px !important; padding-right: 32px !important; } #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal .saphnelo-din-location-grid { column-gap: 28px !important; } #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal .saphnelo-din-location-text { font-size: 16px !important; } } /* ========================================================= MOBILE — UP TO 700px ========================================================= */ @media screen and (max-width: 700px) { #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal { padding: 14px !important; } /* Large content begins near the top and scrolls inside the section. */ #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal.saphnelo-modal--find-din.modal--visible, #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal.saphnelo-modal--find-din.cmp-modal--visible, #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal.saphnelo-modal--find-din[style*="display: block"], #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal.saphnelo-modal--find-din[style*="display:block"] { align-items: flex-start !important; } #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal > .modal-box { width: 100% !important; max-width: 100% !important; max-height: calc(100% - 28px) !important; border-radius: 8px !important; } /* Modal 1 */ #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal.saphnelo-modal--what-din > .modal-box > .modal-box__content { min-height: 0 !important; padding: 72px 22px 30px !important; } #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal .din-modal-content { min-height: 70px !important; } #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal .din-modal-text { max-width: 100% !important; font-size: 16px !important; line-height: 1.45 !important; } /* Modal 2 */ #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal.saphnelo-modal--find-din > .modal-box > .modal-box__content { min-height: 0 !important; padding: 72px 22px 30px !important; } #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal .saphnelo-din-location-grid { grid-template-columns: 1fr !important; column-gap: 0 !important; row-gap: 34px !important; max-width: 360px !important; } #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal .saphnelo-din-location-text { min-height: 0 !important; margin-bottom: 16px !important; font-size: 16px !important; line-height: 1.4 !important; } #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal .saphnelo-din-location-text br { display: none !important; } #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal .saphnelo-din-location-image { height: 190px !important; max-height: 190px !important; } #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal .modal__close { top: 19px !important; right: 18px !important; } #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal .modal__closeLabel { font-size: 15px !important; } #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal .modal__closeIcon { flex-basis: 28px !important; width: 28px !important; min-width: 28px !important; height: 28px !important; min-height: 28px !important; } } /* ========================================================= SMALL MOBILE — UP TO 420px ========================================================= */ @media screen and (max-width: 420px) { #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal { padding: 10px !important; } #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal > .modal-box { max-height: calc(100% - 20px) !important; } #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal > .modal-box > .modal-box__content, #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal.saphnelo-modal--what-din > .modal-box > .modal-box__content, #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal.saphnelo-modal--find-din > .modal-box > .modal-box__content { padding: 66px 16px 24px !important; } #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal .modal__close { top: 17px !important; right: 15px !important; gap: 7px !important; } #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal .modal__closeLabel { font-size: 14px !important; } #patient-login-updated #saphnelo-patient-login > .cmp-modal__modalbox.saphnelo-section-modal .saphnelo-din-location-image { height: 175px !important; max-height: 175px !important; } } /* ========================================================= 8. PATIENT LOGIN SECTION — REFERENCE LAYOUT FIX Keeps the DIN links centred and guarantees the decorative butterfly artwork is visible on desktop, tablet and mobile. ========================================================= */ /* Keep the complete grey login panel at the intended width. */ #patient-login-updated #saphnelo-patient-login { position: relative !important; isolation: isolate !important; overflow: hidden !important; } /* Match the reference input width. */ #patient-login-updated #saphnelo-patient-login .cmp-dynamicform__form-group:not(.button-group):not(.captch-holder), #patient-login-updated #saphnelo-patient-login .cmp-dynamicform input.form-control, #patient-login-updated #saphnelo-patient-login .cmp-dynamicform__generated-form-error { width: 500px !important; max-width: 100% !important; } /* Match the reference button treatment. */ #patient-login-updated #saphnelo-patient-login .cmp-dynamicform__submit-btn { background: #00a4bd !important; text-transform: capitalize !important; } /* * The links must be centred across the whole panel. Do not reserve * 250–330px of right padding on desktop; the butterfly image is an * absolute decorative layer and does not participate in the layout. */ #patient-login-updated #saphnelo-patient-login .din-links-wrap { position: relative !important; z-index: 1 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 48px !important; width: 100% !important; min-height: 130px !important; margin: 0 !important; padding: 44px 30px 34px !important; overflow: visible !important; background: var(--saphnelo-light-grey) !important; } #patient-login-updated #saphnelo-patient-login .din-wrap { position: relative !important; z-index: 3 !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; } #patient-login-updated #saphnelo-patient-login .din-link { position: relative !important; z-index: 3 !important; display: inline-block !important; white-space: nowrap !important; } /* * Force the authored decorative image to render. The content URL also * corrects the image when an older or incomplete DAM src is cached. */ #patient-login-updated #saphnelo-patient-login .din-links-wrap > img.saphnelo-login-butterflies, #patient-login-updated #saphnelo-patient-login img.saphnelo-login-butterflies { content: url('/content/dam/intelligentcontent/brands/saphnelo-ca/en/updated-images/Group%20817%20(1).png') !important; position: absolute !important; z-index: 2 !important; right: 18px !important; bottom: 14px !important; display: block !important; visibility: visible !important; opacity: 1 !important; width: 285px !important; max-width: 285px !important; height: 235px !important; max-height: 235px !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; object-position: right bottom !important; transform: none !important; pointer-events: none !important; } /* Tablet */ @media screen and (max-width: 1024px) { #patient-login-updated #saphnelo-patient-login .din-links-wrap { gap: 34px !important; min-height: 128px !important; padding: 42px 225px 34px 24px !important; } #patient-login-updated #saphnelo-patient-login .din-links-wrap > img.saphnelo-login-butterflies, #patient-login-updated #saphnelo-patient-login img.saphnelo-login-butterflies { right: 10px !important; bottom: 12px !important; width: 210px !important; max-width: 210px !important; height: 180px !important; max-height: 180px !important; } } /* Small tablet / large mobile */ @media screen and (max-width: 767px) { #patient-login-updated #saphnelo-patient-login .saphnelo-login-header { padding-left: 20px !important; padding-right: 20px !important; } #patient-login-updated #saphnelo-patient-login .cmp-dynamicform__form-validation { padding-left: 20px !important; padding-right: 20px !important; } #patient-login-updated #saphnelo-patient-login .din-links-wrap { flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 15px !important; min-height: 190px !important; padding: 32px 145px 30px 24px !important; } #patient-login-updated #saphnelo-patient-login .din-link { white-space: normal !important; } #patient-login-updated #saphnelo-patient-login .din-links-wrap > img.saphnelo-login-butterflies, #patient-login-updated #saphnelo-patient-login img.saphnelo-login-butterflies { right: 8px !important; bottom: 10px !important; width: 128px !important; max-width: 128px !important; height: 145px !important; max-height: 145px !important; } } /* Mobile */ @media screen and (max-width: 480px) { #patient-login-updated #saphnelo-patient-login .din-links-wrap { min-height: 180px !important; padding: 28px 118px 26px 18px !important; } #patient-login-updated #saphnelo-patient-login .din-link { font-size: 14px !important; } #patient-login-updated #saphnelo-patient-login .din-links-wrap > img.saphnelo-login-butterflies, #patient-login-updated #saphnelo-patient-login img.saphnelo-login-butterflies { right: 5px !important; bottom: 8px !important; width: 108px !important; max-width: 108px !important; height: 125px !important; max-height: 125px !important; } } /* Very small mobile */ @media screen and (max-width: 360px) { #patient-login-updated #saphnelo-patient-login .din-links-wrap { min-height: 176px !important; padding-right: 98px !important; } #patient-login-updated #saphnelo-patient-login .din-links-wrap > img.saphnelo-login-butterflies, #patient-login-updated #saphnelo-patient-login img.saphnelo-login-butterflies { width: 92px !important; max-width: 92px !important; height: 112px !important; max-height: 112px !important; } } /* ========================================================= 9. FINAL DIN LINKS + BUTTERFLY EDGE ALIGNMENT Keeps both DIN links centred below the form and compensates for transparent space inside the butterfly PNG so the visible artwork sits against the bottom-right edge of the grey panel. ========================================================= */ /* The common-container class may carry a global width. Reset it so the two link items are sized only by their link text. */ #patient-login-updated #saphnelo-patient-login .din-wrap { width: auto !important; max-width: none !important; min-width: 0 !important; flex: 0 0 auto !important; } /* Desktop: keep the two links as a genuinely centred two-item group. */ #patient-login-updated #saphnelo-patient-login .din-links-wrap { display: grid !important; grid-template-columns: max-content max-content !important; align-items: center !important; justify-content: center !important; justify-items: center !important; column-gap: 48px !important; row-gap: 0 !important; padding: 44px 0 34px !important; } /* The DAM artwork has transparent space on its right and bottom sides. A negative offset clips only that empty canvas and places the visible butterflies against the section edge, as in the reference. */ #patient-login-updated #saphnelo-patient-login .din-links-wrap > img.saphnelo-login-butterflies, #patient-login-updated #saphnelo-patient-login img.saphnelo-login-butterflies { right: -175px !important; bottom: -6px !important; } /* Laptop and tablet */ @media screen and (max-width: 1024px) { #patient-login-updated #saphnelo-patient-login .din-links-wrap { grid-template-columns: max-content max-content !important; justify-content: center !important; justify-items: center !important; column-gap: 34px !important; min-height: 128px !important; padding: 42px 0 34px !important; } #patient-login-updated #saphnelo-patient-login .din-links-wrap > img.saphnelo-login-butterflies, #patient-login-updated #saphnelo-patient-login img.saphnelo-login-butterflies { right: -135px !important; bottom: -5px !important; } } /* Small tablet and large mobile: stack links while keeping space for the artwork. The visible butterflies still touch the right edge. */ @media screen and (max-width: 700px) { #patient-login-updated #saphnelo-patient-login .din-links-wrap { grid-template-columns: 1fr !important; justify-content: stretch !important; justify-items: start !important; row-gap: 15px !important; min-height: 185px !important; padding: 32px 105px 28px 24px !important; } #patient-login-updated #saphnelo-patient-login .din-wrap, #patient-login-updated #saphnelo-patient-login .din-link { width: auto !important; max-width: 100% !important; } #patient-login-updated #saphnelo-patient-login .din-links-wrap > img.saphnelo-login-butterflies, #patient-login-updated #saphnelo-patient-login img.saphnelo-login-butterflies { right: -82px !important; bottom: -4px !important; } } /* Mobile */ @media screen and (max-width: 480px) { #patient-login-updated #saphnelo-patient-login .din-links-wrap { min-height: 176px !important; padding: 28px 88px 25px 18px !important; } #patient-login-updated #saphnelo-patient-login .din-links-wrap > img.saphnelo-login-butterflies, #patient-login-updated #saphnelo-patient-login img.saphnelo-login-butterflies { right: -69px !important; bottom: -3px !important; } } /* Very small mobile */ @media screen and (max-width: 360px) { #patient-login-updated #saphnelo-patient-login .din-links-wrap { min-height: 172px !important; padding-right: 76px !important; } #patient-login-updated #saphnelo-patient-login .din-links-wrap > img.saphnelo-login-butterflies, #patient-login-updated #saphnelo-patient-login img.saphnelo-login-butterflies { right: -59px !important; bottom: -2px !important; } } /* ========================================================= 10. FINAL OVERRIDE — CENTRE DIN LINKS ACROSS FULL PANEL Resets the global .common-container max-width that was keeping the link group centred inside a narrower left-side container. Keep this block at the absolute end of the CSS file. ========================================================= */ /* Make the AEM text component containing the links span the panel. */ #patient-login-updated #saphnelo-patient-login > .text:has(.din-links-wrap), #patient-login-updated #saphnelo-patient-login > .text:has(.din-links-wrap) > .cmp-text { display: block !important; float: none !important; clear: both !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } /* Reset .common-container on the outer links wrapper. */ #patient-login-updated #saphnelo-patient-login .din-links-wrap.common-container, #patient-login-updated #saphnelo-patient-login .din-links-wrap { position: relative !important; left: auto !important; right: auto !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 48px !important; width: 100% !important; max-width: none !important; min-width: 0 !important; min-height: 132px !important; margin: 0 !important; padding: 44px 24px 34px !important; transform: none !important; overflow: visible !important; } /* Reset .common-container on each individual link item. */ #patient-login-updated #saphnelo-patient-login .din-links-wrap > .din-wrap.common-container, #patient-login-updated #saphnelo-patient-login .din-links-wrap > .din-wrap { position: static !important; display: block !important; flex: 0 0 auto !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; transform: none !important; } #patient-login-updated #saphnelo-patient-login .din-links-wrap .din-link { display: inline-block !important; width: auto !important; max-width: none !important; margin: 0 !important; white-space: nowrap !important; text-align: center !important; } /* Move only the transparent PNG canvas beyond the panel edge so the visible butterfly artwork finishes at the bottom-right boundary. */ #patient-login-updated #saphnelo-patient-login .din-links-wrap > img.saphnelo-login-butterflies, #patient-login-updated #saphnelo-patient-login img.saphnelo-login-butterflies { right: -135px !important; bottom: -4px !important; } /* Tablet */ @media screen and (max-width: 1024px) { #patient-login-updated #saphnelo-patient-login .din-links-wrap.common-container, #patient-login-updated #saphnelo-patient-login .din-links-wrap { flex-direction: row !important; justify-content: center !important; gap: 34px !important; min-height: 128px !important; padding: 42px 20px 32px !important; } #patient-login-updated #saphnelo-patient-login .din-links-wrap > img.saphnelo-login-butterflies, #patient-login-updated #saphnelo-patient-login img.saphnelo-login-butterflies { right: -98px !important; bottom: -3px !important; } } /* Mobile and small tablet */ @media screen and (max-width: 700px) { #patient-login-updated #saphnelo-patient-login .din-links-wrap.common-container, #patient-login-updated #saphnelo-patient-login .din-links-wrap { flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 15px !important; min-height: 185px !important; padding: 30px 104px 28px 22px !important; } #patient-login-updated #saphnelo-patient-login .din-links-wrap .din-link { max-width: 100% !important; white-space: normal !important; text-align: left !important; } #patient-login-updated #saphnelo-patient-login .din-links-wrap > img.saphnelo-login-butterflies, #patient-login-updated #saphnelo-patient-login img.saphnelo-login-butterflies { right: -55px !important; bottom: -2px !important; } } @media screen and (max-width: 480px) { #patient-login-updated #saphnelo-patient-login .din-links-wrap.common-container, #patient-login-updated #saphnelo-patient-login .din-links-wrap { min-height: 176px !important; padding: 27px 84px 25px 18px !important; } #patient-login-updated #saphnelo-patient-login .din-links-wrap > img.saphnelo-login-butterflies, #patient-login-updated #saphnelo-patient-login img.saphnelo-login-butterflies { right: -44px !important; bottom: -1px !important; } } /* ========================================================= 11. ABSOLUTE FINAL OVERRIDE — KEEP BUTTERFLIES VISIBLE The image and DIN links are authored in the same .din-links-wrap. Earlier rules moved the image outside the panel with a negative right value. Because #saphnelo-patient-login clips at its boundary, most of the decorative artwork disappeared. Keep this block at the absolute end of the CSS file. ========================================================= */ /* The links component must allow the tall artwork to extend upward. */ #patient-login-updated #saphnelo-patient-login > .text:has(.din-links-wrap), #patient-login-updated #saphnelo-patient-login > .text:has(.din-links-wrap) > .cmp-text, #patient-login-updated #saphnelo-patient-login .din-links-wrap.common-container, #patient-login-updated #saphnelo-patient-login .din-links-wrap { overflow: visible !important; } /* Keep the complete image inside the right and bottom panel edges. */ #patient-login-updated #saphnelo-patient-login .din-links-wrap > img.saphnelo-login-butterflies, #patient-login-updated #saphnelo-patient-login img.saphnelo-login-butterflies { position: absolute !important; z-index: 2 !important; right: 0 !important; bottom: 0 !important; left: auto !important; top: auto !important; display: block !important; visibility: visible !important; opacity: 1 !important; width: 285px !important; max-width: 285px !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; object-position: right bottom !important; transform: none !important; pointer-events: none !important; } /* Tablet */ @media screen and (max-width: 1024px) { #patient-login-updated #saphnelo-patient-login .din-links-wrap > img.saphnelo-login-butterflies, #patient-login-updated #saphnelo-patient-login img.saphnelo-login-butterflies { right: 0 !important; bottom: 0 !important; width: 220px !important; max-width: 220px !important; height: auto !important; max-height: none !important; } } /* Mobile and small tablet */ @media screen and (max-width: 700px) { #patient-login-updated #saphnelo-patient-login .din-links-wrap > img.saphnelo-login-butterflies, #patient-login-updated #saphnelo-patient-login img.saphnelo-login-butterflies { right: 0 !important; bottom: 0 !important; width: 125px !important; max-width: 125px !important; height: auto !important; max-height: none !important; } } /* Small mobile */ @media screen and (max-width: 480px) { #patient-login-updated #saphnelo-patient-login .din-links-wrap > img.saphnelo-login-butterflies, #patient-login-updated #saphnelo-patient-login img.saphnelo-login-butterflies { right: 0 !important; bottom: 0 !important; width: 105px !important; max-width: 105px !important; } } /* ========================================================= 8. FRENCH PAGE — CTA, COVERAGE LINE AND DOWNLOAD BUTTON ========================================================= */ /* --------------------------------------------------------- FR HERO CTA — styles "Commencer" even when the class .hero-get-started is missing from the authored link. --------------------------------------------------------- */ html[lang^="fr"] #patient-login-updated #saphnelo-hero .hero-get-started, html[lang^="fr"] #patient-login-updated #saphnelo-hero .saphnelo-hero-overlay > a { align-self: center !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 260px !important; min-width: 260px !important; height: 70px !important; min-height: 70px !important; margin: 0 auto 52px !important; padding: 0 25px !important; background: #ffffff !important; color: #b54885 !important; border: 4px solid var(--saphnelo-green) !important; border-radius: 40px !important; box-shadow: none !important; font-family: "Barlow Condensed", Arial, sans-serif !important; font-size: 35px !important; font-weight: 700 !important; font-style: normal !important; line-height: 1 !important; text-align: center !important; text-decoration: none !important; text-transform: uppercase !important; white-space: nowrap !important; } html[lang^="fr"] #patient-login-updated #saphnelo-hero .hero-get-started:hover, html[lang^="fr"] #patient-login-updated #saphnelo-hero .hero-get-started:focus, html[lang^="fr"] #patient-login-updated #saphnelo-hero .saphnelo-hero-overlay > a:hover, html[lang^="fr"] #patient-login-updated #saphnelo-hero .saphnelo-hero-overlay > a:focus { background: #ffffff !important; color: #b54885 !important; border-color: var(--saphnelo-green) !important; text-decoration: none !important; } /* --------------------------------------------------------- FR COVERAGE — make the green divider span the complete height of the longer French eligibility text. --------------------------------------------------------- */ html[lang^="fr"] #patient-login-updated #saphnelo-coverage .saphnelo-coverage-eligibility { position: relative !important; align-items: stretch !important; min-height: 0 !important; padding-left: 32px !important; } html[lang^="fr"] #patient-login-updated #saphnelo-coverage .saphnelo-coverage-eligibility::before { top: 0 !important; bottom: 0 !important; left: 0 !important; width: 4px !important; height: auto !important; min-height: 100% !important; transform: none !important; } html[lang^="fr"] #patient-login-updated #saphnelo-coverage .saphnelo-coverage-message { align-self: stretch !important; display: flex !important; align-items: center !important; margin: 0 !important; } /* --------------------------------------------------------- FR DISCUSSION GUIDE — styles "Télécharger" even when the class .saphnelo-download-button is missing from the link. --------------------------------------------------------- */ html[lang^="fr"] #patient-login-updated #saphnelo-coverage .saphnelo-download-button, html[lang^="fr"] #patient-login-updated #saphnelo-coverage .saphnelo-discussion-guide-content > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 128px !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 0 20px !important; background: #45a5c4 !important; color: #ffffff !important; border: 0 !important; border-radius: 3px !important; box-shadow: none !important; font-family: "Barlow Condensed", Arial, sans-serif !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1 !important; text-align: center !important; text-decoration: none !important; white-space: nowrap !important; } html[lang^="fr"] #patient-login-updated #saphnelo-coverage .saphnelo-download-button:hover, html[lang^="fr"] #patient-login-updated #saphnelo-coverage .saphnelo-download-button:focus, html[lang^="fr"] #patient-login-updated #saphnelo-coverage .saphnelo-discussion-guide-content > a:hover, html[lang^="fr"] #patient-login-updated #saphnelo-coverage .saphnelo-discussion-guide-content > a:focus { background: #45a5c4 !important; color: #ffffff !important; text-decoration: none !important; } /* ========================================================= FR RESPONSIVE ========================================================= */ @media screen and (max-width: 1024px) { html[lang^="fr"] #patient-login-updated #saphnelo-hero .hero-get-started, html[lang^="fr"] #patient-login-updated #saphnelo-hero .saphnelo-hero-overlay > a { width: 225px !important; min-width: 225px !important; height: 60px !important; min-height: 60px !important; margin-bottom: 38px !important; font-size: 30px !important; } } @media screen and (max-width: 768px) { html[lang^="fr"] #patient-login-updated #saphnelo-hero .hero-get-started, html[lang^="fr"] #patient-login-updated #saphnelo-hero .saphnelo-hero-overlay > a { width: 210px !important; min-width: 210px !important; height: 56px !important; min-height: 56px !important; margin-bottom: 30px !important; padding: 0 18px !important; border-width: 3px !important; font-size: 27px !important; } html[lang^="fr"] #patient-login-updated #saphnelo-coverage .saphnelo-coverage-eligibility { width: 100% !important; padding-left: 24px !important; } html[lang^="fr"] #patient-login-updated #saphnelo-coverage .saphnelo-coverage-eligibility::before { width: 4px !important; } html[lang^="fr"] #patient-login-updated #saphnelo-coverage .saphnelo-download-button, html[lang^="fr"] #patient-login-updated #saphnelo-coverage .saphnelo-discussion-guide-content > a { margin: 0 auto !important; } } @media screen and (max-width: 480px) { html[lang^="fr"] #patient-login-updated #saphnelo-hero .hero-get-started, html[lang^="fr"] #patient-login-updated #saphnelo-hero .saphnelo-hero-overlay > a { width: 190px !important; min-width: 190px !important; height: 50px !important; min-height: 50px !important; margin-bottom: 24px !important; padding: 0 14px !important; font-size: 24px !important; } html[lang^="fr"] #patient-login-updated #saphnelo-coverage .saphnelo-coverage-eligibility { padding-left: 20px !important; } html[lang^="fr"] #patient-login-updated #saphnelo-coverage .saphnelo-download-button, html[lang^="fr"] #patient-login-updated #saphnelo-coverage .saphnelo-discussion-guide-content > a { min-width: 120px !important; height: 40px !important; min-height: 40px !important; padding: 0 16px !important; font-size: 17px !important; } } /* ========================================================= 9. FINAL RESPONSIVE OVERRIDES Mobile header, coverage eligibility text and footer links ========================================================= */ /* Keep the French injectable label clear of the hero edge. */ html[lang^="fr"] #patient-login-updated #saphnelo-hero .hero-pen-label { position: relative !important; bottom: 24px !important; margin-top: 0 !important; margin-bottom: 0 !important; transform: none !important; } html[lang^="fr"] #patient-login-updated #saphnelo-hero .hero-pen-image { margin-bottom: 18px !important; } /* Keep the French discussion-guide content vertically controlled. */ html[lang^="fr"] #patient-login-updated #saphnelo-coverage .saphnelo-discussion-guide-content { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } html[lang^="fr"] #patient-login-updated #saphnelo-coverage .saphnelo-discussion-guide-content p { width: 100% !important; margin: 0 0 22px !important; padding: 0 !important; text-align: left !important; } @media screen and (max-width: 767px) { /* ------------------------------------------------------- HEADER — preserve the desktop horizontal arrangement while scaling each element with the viewport. ------------------------------------------------------- */ #patient-login-updated #saphnelo-header { position: relative !important; width: 100% !important; height: 76px !important; min-height: 76px !important; margin: 0 auto !important; overflow: hidden !important; } #patient-login-updated #saphnelo-header > .text, #patient-login-updated #saphnelo-header > .text > .cmp-text { position: relative !important; display: block !important; width: 100% !important; height: 76px !important; min-height: 76px !important; margin: 0 !important; padding: 0 !important; } #patient-login-updated #saphnelo-header .saphnelo-header-logo { position: absolute !important; top: 50% !important; left: 8px !important; width: clamp(62px, 18vw, 125px) !important; max-width: none !important; margin: 0 !important; transform: translateY(-50%) !important; } #patient-login-updated #saphnelo-header .saphnelo-header-logo img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; } #patient-login-updated #saphnelo-header .saphnelo-header-actions { position: absolute !important; top: 50% !important; left: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: clamp(4px, 1vw, 10px) !important; width: auto !important; margin: 0 !important; transform: translate(-50%, -50%) !important; } #patient-login-updated #saphnelo-header .saphnelo-header-button { flex: 0 0 auto !important; height: clamp(28px, 6vw, 36px) !important; min-height: 28px !important; padding: 0 4px !important; border-radius: 3px !important; font-size: clamp(7.5px, 1.7vw, 11px) !important; line-height: 1.05 !important; white-space: nowrap !important; } #patient-login-updated #saphnelo-header .saphnelo-header-button-patient { width: clamp(64px, 17vw, 105px) !important; min-width: clamp(64px, 17vw, 105px) !important; } #patient-login-updated #saphnelo-header .saphnelo-header-button-hcp { width: clamp(98px, 29vw, 175px) !important; min-width: clamp(98px, 29vw, 175px) !important; } #patient-login-updated #saphnelo-header .saphnelo-header-language { position: absolute !important; top: 50% !important; right: 8px !important; margin: 0 !important; font-size: clamp(8px, 1.7vw, 10px) !important; line-height: 1 !important; transform: translateY(-50%) !important; } #patient-login-updated #saphnelo-header .saphnelo-header-language span { margin: 0 3px !important; } /* ------------------------------------------------------- COVERAGE ELIGIBILITY — use the available mobile width, remove authored desktop line breaks and scale the text. ------------------------------------------------------- */ #patient-login-updated #saphnelo-coverage > .text > .cmp-text { padding: 28px 16px 32px !important; } #patient-login-updated #saphnelo-coverage .saphnelo-coverage-main { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 22px !important; width: 100% !important; max-width: none !important; margin: 0 auto 32px !important; } #patient-login-updated #saphnelo-coverage .saphnelo-coverage-map, #patient-login-updated #saphnelo-coverage .saphnelo-coverage-map img { display: block !important; width: 100% !important; max-width: 440px !important; height: auto !important; margin: 0 auto !important; } #patient-login-updated #saphnelo-coverage .saphnelo-coverage-eligibility, html[lang^="fr"] #patient-login-updated #saphnelo-coverage .saphnelo-coverage-eligibility { position: relative !important; display: block !important; width: 100% !important; max-width: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 0 0 18px !important; } #patient-login-updated #saphnelo-coverage .saphnelo-coverage-eligibility::before, html[lang^="fr"] #patient-login-updated #saphnelo-coverage .saphnelo-coverage-eligibility::before { top: 0 !important; bottom: 0 !important; left: 0 !important; width: 4px !important; height: auto !important; min-height: 100% !important; transform: none !important; } #patient-login-updated #saphnelo-coverage .saphnelo-coverage-message, html[lang^="fr"] #patient-login-updated #saphnelo-coverage .saphnelo-coverage-message { display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; font-size: clamp(19px, 5.5vw, 24px) !important; line-height: 1.18 !important; text-align: left !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; } #patient-login-updated #saphnelo-coverage .saphnelo-coverage-message br { display: none !important; } /* ------------------------------------------------------- FOOTER LINKS — always remain in one horizontal line. The row becomes horizontally scrollable only if a very narrow viewport cannot contain translated labels. ------------------------------------------------------- */ #patient-login-updated #saphnelo-footer { min-height: auto !important; } #patient-login-updated #saphnelo-footer .footer-container { min-height: auto !important; padding: 24px 8px 20px !important; overflow-x: hidden !important; } #patient-login-updated #saphnelo-footer .footer-links { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; gap: 0 !important; width: max-content !important; max-width: 100% !important; margin: 0 auto 24px !important; padding: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; white-space: nowrap !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch; } #patient-login-updated #saphnelo-footer .footer-links::-webkit-scrollbar { display: none !important; } #patient-login-updated #saphnelo-footer .footer-links li { display: flex !important; flex: 0 0 auto !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } #patient-login-updated #saphnelo-footer .footer-links li:not(:last-child)::after { margin: 0 clamp(3px, 1.2vw, 8px) !important; font-size: clamp(7.5px, 2.2vw, 12px) !important; line-height: 1 !important; } #patient-login-updated #saphnelo-footer .footer-links a { display: inline-block !important; font-size: clamp(7.5px, 2.2vw, 12px) !important; line-height: 1.1 !important; white-space: nowrap !important; } html[lang^="fr"] #patient-login-updated #saphnelo-hero .hero-pen-label { bottom: 14px !important; } html[lang^="fr"] #patient-login-updated #saphnelo-coverage .saphnelo-discussion-guide-content { align-items: center !important; text-align: center !important; } html[lang^="fr"] #patient-login-updated #saphnelo-coverage .saphnelo-discussion-guide-content p { margin-bottom: 18px !important; font-size: 16px !important; text-align: center !important; } } @media screen and (max-width: 420px) { #patient-login-updated #saphnelo-header { height: 68px !important; min-height: 68px !important; } #patient-login-updated #saphnelo-header > .text, #patient-login-updated #saphnelo-header > .text > .cmp-text { height: 68px !important; min-height: 68px !important; } #patient-login-updated #saphnelo-coverage > .text > .cmp-text { padding-left: 12px !important; padding-right: 12px !important; } #patient-login-updated #saphnelo-coverage .saphnelo-coverage-eligibility, html[lang^="fr"] #patient-login-updated #saphnelo-coverage .saphnelo-coverage-eligibility { padding-left: 15px !important; } #patient-login-updated #saphnelo-footer .footer-container { padding-left: 5px !important; padding-right: 5px !important; } } /* ========================================================= FINAL VIEWPORT FIXES — 360–390 MOBILE HEADER + IPAD LINE Keep this section at the very end of the stylesheet. ========================================================= */ /* --------------------------------------------------------- IPAD MINI / SMALL TABLET COVERAGE BLOCK Make the green divider follow the full height of the text. --------------------------------------------------------- */ @media screen and (min-width: 768px) and (max-width: 900px) { #patient-login-updated #saphnelo-coverage > .text > .cmp-text { padding-left: 28px !important; padding-right: 28px !important; } #patient-login-updated #saphnelo-coverage .saphnelo-coverage-main { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important; align-items: center !important; column-gap: 24px !important; width: 100% !important; max-width: none !important; } #patient-login-updated #saphnelo-coverage .saphnelo-coverage-map, #patient-login-updated #saphnelo-coverage .saphnelo-coverage-map img { width: 100% !important; max-width: 100% !important; height: auto !important; } #patient-login-updated #saphnelo-coverage .saphnelo-coverage-eligibility, html[lang^="fr"] #patient-login-updated #saphnelo-coverage .saphnelo-coverage-eligibility { position: relative !important; display: flex !important; align-items: center !important; align-self: center !important; width: 100% !important; max-width: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 0 0 24px !important; } #patient-login-updated #saphnelo-coverage .saphnelo-coverage-eligibility::before, html[lang^="fr"] #patient-login-updated #saphnelo-coverage .saphnelo-coverage-eligibility::before { top: 0 !important; bottom: 0 !important; left: 0 !important; width: 4px !important; height: auto !important; min-height: 100% !important; transform: none !important; } #patient-login-updated #saphnelo-coverage .saphnelo-coverage-message, html[lang^="fr"] #patient-login-updated #saphnelo-coverage .saphnelo-coverage-message { width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; font-size: clamp(24px, 3.35vw, 28px) !important; line-height: 1.2 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; } /* Remove desktop-authored breaks so tablet wrapping follows its width. */ #patient-login-updated #saphnelo-coverage .saphnelo-coverage-message br { display: none !important; } } /* --------------------------------------------------------- IPHONE / SAMSUNG 360–390 HEADER Preserve the desktop-style one-row header while giving the HCP button enough width for its complete label. --------------------------------------------------------- */ @media screen and (max-width: 480px) { #patient-login-updated #saphnelo-header { position: relative !important; width: 100% !important; height: 70px !important; min-height: 70px !important; margin: 0 auto !important; overflow: hidden !important; } #patient-login-updated #saphnelo-header > .text, #patient-login-updated #saphnelo-header > .text > .cmp-text { width: 100% !important; height: 70px !important; min-height: 70px !important; margin: 0 !important; padding: 0 !important; } #patient-login-updated #saphnelo-header > .text > .cmp-text { position: relative !important; display: grid !important; grid-template-columns: clamp(64px, 18vw, 82px) minmax(0, 1fr) max-content !important; align-items: center !important; column-gap: clamp(3px, 1vw, 6px) !important; padding: 0 clamp(5px, 1.5vw, 8px) !important; } #patient-login-updated #saphnelo-header .saphnelo-header-logo { position: static !important; grid-column: 1 !important; justify-self: start !important; width: 100% !important; max-width: 82px !important; margin: 0 !important; transform: none !important; } #patient-login-updated #saphnelo-header .saphnelo-header-logo img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; } #patient-login-updated #saphnelo-header .saphnelo-header-actions { position: static !important; grid-column: 2 !important; display: grid !important; grid-template-columns: minmax(70px, 0.78fr) minmax(126px, 1.42fr) !important; align-items: center !important; gap: 4px !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; transform: none !important; } #patient-login-updated #saphnelo-header .saphnelo-header-button, #patient-login-updated #saphnelo-header .saphnelo-header-button-patient, #patient-login-updated #saphnelo-header .saphnelo-header-button-hcp { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 30px !important; min-height: 30px !important; margin: 0 !important; padding: 0 3px !important; border-radius: 3px !important; font-size: clamp(7.2px, 1.95vw, 8.6px) !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: -0.1px !important; text-align: center !important; white-space: nowrap !important; } #patient-login-updated #saphnelo-header .saphnelo-header-language { position: static !important; grid-column: 3 !important; justify-self: end !important; margin: 0 !important; font-size: clamp(7.5px, 2vw, 9px) !important; line-height: 1 !important; white-space: nowrap !important; transform: none !important; } #patient-login-updated #saphnelo-header .saphnelo-header-language span { margin: 0 2px !important; } } /* Additional protection for the narrowest supported phones. */ @media screen and (max-width: 370px) { #patient-login-updated #saphnelo-header > .text > .cmp-text { grid-template-columns: 62px minmax(0, 1fr) max-content !important; column-gap: 3px !important; padding-left: 4px !important; padding-right: 4px !important; } #patient-login-updated #saphnelo-header .saphnelo-header-actions { grid-template-columns: minmax(66px, 0.76fr) minmax(120px, 1.44fr) !important; gap: 3px !important; } #patient-login-updated #saphnelo-header .saphnelo-header-button, #patient-login-updated #saphnelo-header .saphnelo-header-button-patient, #patient-login-updated #saphnelo-header .saphnelo-header-button-hcp { padding-left: 2px !important; padding-right: 2px !important; font-size: 7.1px !important; letter-spacing: -0.15px !important; } #patient-login-updated #saphnelo-header .saphnelo-header-language { font-size: 7.3px !important; } } /* ========================================================= FR ONLY — KEEP THE REGISTERED SYMBOL ATTACHED TO SAPHNELO ========================================================= */ html[lang^="fr"] #patient-login-updated #saphnelo-coverage .saphnelo-coverage-message sup { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: inline !important; float: none !important; margin: 0 0 0 2px !important; padding: 0 !important; font-size: 55% !important; line-height: 0 !important; vertical-align: super !important; transform: none !important; } /* ========================================================= FINAL FR FIX — KEEP ® ATTACHED TO SAPHNELO The earlier FR rule made the paragraph a flex container, causing the text and ^{to become separate flex items.
========================================================= */

html[lang^="fr"]
#patient-login-updated
#saphnelo-coverage
.saphnelo-coverage-message {
display: block !important;
align-self: center !important;
}

html[lang^="fr"]
#patient-login-updated
#saphnelo-coverage
.saphnelo-coverage-message sup {
position: relative !important;
top: -0.9em !important;
right: auto !important;
bottom: auto !important;
left: auto !important;

display: inline !important;
float: none !important;

margin: 0 0 0 2px !important;
padding: 0 !important;

font-size: 55% !important;
line-height: 0 !important;
vertical-align: baseline !important;
white-space: nowrap !important;

transform: none !important;
}}