/* [IONYX: OUR LOOK (patch 201)] Ionyx colours, straight from the logo. Loaded after the other stylesheets on patient,
   provider and public pages.
   Navy #12182A: text, headers, the practice side.  Sky blue #53B8E7: main buttons and the active tab, always with navy
   words (never white words on sky blue).  Link blue #1A6FA0: links.  Sky tint #E8F5FC: icon tiles, selected answers.
   Ground #F4F7FB: page background.  Sparkle #48C2C8: small touches only, never words.
   Urgency colours do not change. */
html:root{
  --ix-tint:#E8F5FC; --ix-teal:#1E78AD; --ix-teal-d:#1A6FA0; --ix-accent:#53B8E7;
  --ix201-navy:#12182A; --ix201-sky:#53B8E7; --ix201-sky-d:#3FA6D8; --ix201-link:#1A6FA0; --ix201-link-d:#12577E;
  --ix201-tint:#E8F5FC; --ix201-pill:#D6EEFA; --ix201-ground:#F4F7FB; --ix201-line:#E3E9F1; --ix201-mute:#4A5568;
}

/* ---------- buttons shared by the new pieces ---------- */
.ix201-btn{ display:flex; align-items:center; justify-content:center; min-height:54px; padding:0 22px; border-radius:14px; border:0;
            background:#53B8E7; color:#12182A !important; font-family:'Plus Jakarta Sans','Source Sans 3',system-ui,sans-serif;
            font-weight:800; font-size:17px; text-decoration:none !important; cursor:pointer; }
.ix201-btn:hover{ background:#3FA6D8; color:#12182A !important; }
.ix201-btn-o{ background:#fff; border:1.5px solid #12182A; color:#12182A !important; font-family:'Source Sans 3',system-ui,sans-serif; font-weight:700; }
.ix201-btn-o:hover{ background:#F4F7FB; }
.ix201-btn:focus-visible, .ix201-tile:focus-visible, .ix201-stuck:focus-visible, .ix201-cc-go:focus-visible, .ix201-me-e:focus-visible{
  outline:3px solid #1A6FA0; outline-offset:2px; }

/* ---------- the sign-in page: Sign in is sky blue ---------- */
section.ixs .ixs-btn{ background:#53B8E7 !important; color:#12182A !important; font-weight:800 !important; }
section.ixs .ixs-btn:hover{ background:#3FA6D8 !important; }
section.ixs .ixs-btn:focus-visible{ outline:3px solid #1A6FA0 !important; outline-offset:2px; }

/* ---------- sign up: a light page, a sky-blue Create account ---------- */
section.login-outr.ixsu{ background:#F4F7FB !important; background-image:none !important; }
section.login-outr.ixsu::after{ display:none !important; }
.ixsu .commn-btn{ background:#53B8E7 !important; border-color:#53B8E7 !important; color:#12182A !important; font-weight:800 !important; }
.ixsu .commn-btn:hover{ background:#3FA6D8 !important; border-color:#3FA6D8 !important; }

/* ---------- the switch page: two tiles and a sky-blue Switch ---------- */
.ix201-sw{ display:flex; align-items:center; justify-content:center; gap:12px; margin:4px 0 22px; }
.ix201-sw > span{ width:132px; height:80px; border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
                  font-family:'Source Sans 3',system-ui,sans-serif; font-size:16px; box-sizing:border-box; }
.ix201-sw > span svg{ width:22px; height:22px; }
.ix201-sw .ix201-sw-a{ background:#12182A; color:#fff; }
.ix201-sw .ix201-sw-a svg{ color:#53B8E7; }
.ix201-sw .ix201-sw-b{ background:#E8F5FC; border:2px solid #53B8E7; color:#12182A; }
.ix201-sw-ar{ width:28px; height:28px; color:#4A5568; flex:0 0 auto; }
.ix197-card .ix197-btn:not(.light){ background:#53B8E7 !important; border-color:#53B8E7 !important; color:#12182A !important; font-weight:800 !important; }
.ix197-card .ix197-btn:not(.light):hover{ background:#3FA6D8 !important; }
.ix197-card .ix197-in:focus{ border-color:#1A6FA0 !important; outline:none; box-shadow:0 0 0 3px rgba(26,111,160,.3); }

/* ---------- Home: How are you feeling? ---------- */
.ix201-cc{ background:#12182A; color:#fff; border-radius:22px; padding:20px; margin:0 0 18px; font-family:'Source Sans 3',system-ui,sans-serif; }
.ix201-cc-top{ display:flex; align-items:center; gap:14px; }
.ix201-cc-m{ flex:0 0 56px; width:56px; height:56px; border-radius:16px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; }
.ix201-cc-m img{ width:40px; height:auto; display:block; }
.ix201-cc-t{ min-width:0; }
.ix201-cc h2{ margin:0 !important; font-family:'Plus Jakarta Sans','Source Sans 3',sans-serif; font-weight:800; font-size:21px; line-height:1.25; color:#fff !important; }
.ix201-cc-t p{ margin:2px 0 0 !important; font-size:16px; line-height:1.4; color:#D7DEE8; }
.ix201-cc-go{ display:flex; align-items:center; justify-content:center; min-height:54px; margin-top:16px; border-radius:14px; background:#53B8E7;
              color:#12182A !important; font-family:'Plus Jakarta Sans','Source Sans 3',sans-serif; font-weight:800; font-size:17px; text-decoration:none !important; }
.ix201-cc-go:hover{ background:#7CCBEE; }
.ix201-cc-s{ margin:12px 0 0 !important; text-align:center; font-size:16px; line-height:1.4; color:#D7DEE8; }
.ix201-cc-s a{ display:inline-flex; align-items:center; min-height:44px; color:#fff !important; font-weight:800; text-decoration:underline !important; }
@media (min-width:992px){
  .ix201-cc{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:6px 24px; padding:24px 28px; }
  .ix201-cc-go{ margin-top:0; padding:0 28px; }
  .ix201-cc-s{ grid-column:1 / -1; text-align:left; margin-top:4px !important; }
}

/* ---------- Home: What do you need? ---------- */
.ix201-need{ margin:4px 0 18px; font-family:'Source Sans 3',system-ui,sans-serif; }
.ix201-need h2{ margin:0 0 10px !important; font-family:'Plus Jakarta Sans','Source Sans 3',sans-serif; font-weight:800; font-size:19px; color:#12182A; }
.ix201-tiles{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.ix201-tile{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-height:104px; padding:16px; background:#fff; border:1.5px solid #E3E9F1;
             border-radius:18px; color:#12182A !important; text-decoration:none !important; }
.ix201-tile:hover{ border-color:#53B8E7; }
.ix201-ti{ width:42px; height:42px; border-radius:12px; background:#E8F5FC; color:#12182A; display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
.ix201-ti svg{ width:22px; height:22px; }
.ix201-tile b{ font-size:17px; font-weight:700; line-height:1.25; }
.ix201-ts{ font-size:16px; color:#4A5568; line-height:1.35; }
.ix201-stuck{ display:flex; align-items:center; gap:12px; min-height:56px; margin-top:14px; padding:10px 16px; background:#fff; border:1.5px solid #E3E9F1;
              border-radius:16px; color:#12182A !important; text-decoration:none !important; font-size:16.5px; }
.ix201-stuck:hover{ border-color:#53B8E7; }
.ix201-stuck svg{ width:22px; height:22px; flex:0 0 auto; }
.ix201-stuck span{ flex:1; min-width:0; }
.ix201-chev{ flex:0 0 auto; width:9px; height:9px; border-right:2px solid #4A5568; border-top:2px solid #4A5568; transform:rotate(45deg); margin-right:4px; }
@media (min-width:1200px){ .ix201-tiles{ grid-template-columns:repeat(4, minmax(0,1fr)); } }

/* ---------- Me: who you are ---------- */
.ix201-me{ display:flex; align-items:center; gap:14px; background:#fff; border:1.5px solid #E6EBF2; border-radius:18px; padding:16px 18px; margin:0 0 6px;
           font-family:'Source Sans 3',system-ui,sans-serif; }
.ix201-av{ flex:0 0 56px; width:56px; height:56px; border-radius:50%; background:#12182A; color:#fff; display:flex; align-items:center; justify-content:center;
           font-weight:800; font-size:19px; overflow:hidden; }
.ix201-av img{ width:100%; height:100%; object-fit:cover; display:block; }
.ix201-me-t{ flex:1; min-width:0; }
.ix201-me-t b{ display:block; font-size:18px; line-height:1.3; color:#12182A; overflow-wrap:anywhere; }
.ix201-me-t span{ display:block; font-size:16px; color:#4A5568; overflow-wrap:anywhere; }
.ix201-me-e{ display:inline-flex; align-items:center; min-height:44px; padding:0 8px; font-weight:700; font-size:16px; color:#1A6FA0 !important; }

/* ---------- the provider side: a navy top bar ---------- */
.main-page-header:has(.ix201-navy){ background:#12182A !important; }
.header.main-head.ix201-navy{ background:#12182A !important; border-bottom:0 !important; box-shadow:none !important; }
.ix201-navy .navbar-brand img{ height:28px !important; min-height:0 !important; width:auto !important; max-width:none !important; max-height:28px; margin:21px 0 !important; }   /* the bar keeps its old height, so nothing below it moves */
.ix201-navy .ix197-sw{ background:transparent !important; border:0 !important; padding:0 !important; gap:10px !important; box-shadow:none !important; }
.ix201-navy .ix197-sw span[aria-current]{ background:transparent !important; color:#8FD3F2 !important; border:0 !important; box-shadow:none !important; padding:0 !important;
  font-size:13px !important; font-weight:800 !important; letter-spacing:.06em; text-transform:uppercase; min-height:0 !important; }
.ix201-navy .ix197-sw a{ display:inline-flex !important; align-items:center; min-height:40px; padding:0 14px !important; border-radius:999px !important;
  border:1.5px solid #53B8E7 !important; background:transparent !important; color:#fff !important; font-weight:700 !important; text-decoration:none !important; }
.ix201-navy .ix197-sw a:hover{ background:rgba(83,184,231,.18) !important; }
.ix201-navy .ixtop-right > a, .ix201-navy .ixtop-right > button, .ix201-navy .ix184-gear, .ix201-navy .ixs-trig-btn, .ix201-navy .ixhp-fab, .ix201-navy .ixs-trig button,
.ix201-navy .ixtop-right [aria-label="Help"]{
  color:#fff !important; border-color:rgba(255,255,255,.35) !important; background:transparent !important; }
.ix201-navy .ixtop-av{ border-color:rgba(255,255,255,.35) !important; }
.ix201-navy .ixs-trig-btn, .ix201-navy .ixs-trig button{ background:rgba(255,255,255,.08) !important; border:1.5px solid rgba(255,255,255,.35) !important; color:#fff !important; }
.ix201-navy .ixs-trig svg{ color:#fff !important; stroke:currentColor; }
.ix201-navy .ixs-trig-btn *, .ix201-navy .ixs-key{ color:#fff !important; border-color:rgba(255,255,255,.35) !important; background:transparent !important; }
.ix201-navy .ixtop-ini{ color:#12182A !important; }
.ix201-navy .ixtop-av{ background:#E8F5FC !important; }
.ix201-navy a:focus-visible, .ix201-navy button:focus-visible{ outline:3px solid #1A6FA0 !important; outline-offset:2px; box-shadow:0 0 0 5px #fff; }
@media (max-width:767.98px){ .ix201-navy .ix197-sw span[aria-current]{ display:none !important; } }

/* ---------- the welcome page (the installed app, signed out) ---------- */
body.ix201-wb{ margin:0; background:#fff; color:#12182A; font-family:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif; }
.ix201-wel{ max-width:440px; margin:0 auto; padding:16px 24px calc(28px + env(safe-area-inset-bottom)); box-sizing:border-box; min-height:100vh; display:flex; flex-direction:column; }
.ix201-wel-top{ display:flex; align-items:center; justify-content:space-between; min-height:56px; }
.ix201-wel-top img{ height:30px; width:auto; display:block; }
.ix201-wel-top a{ display:inline-flex; align-items:center; min-height:44px; padding:0 4px; color:#12182A; font-weight:700; font-size:16px; text-decoration:none; }
.ix201-wel-mark{ width:176px; height:176px; margin:28px auto 26px; border-radius:44px; background:#E8F5FC; display:flex; align-items:center; justify-content:center; }
.ix201-wel-mark img{ width:118px; height:auto; display:block; }
.ix201-wel h1{ margin:0; text-align:center; font-family:'Plus Jakarta Sans','Source Sans 3',sans-serif; font-weight:800; font-size:30px; line-height:1.18; letter-spacing:-.02em; }
.ix201-wel-lead{ margin:12px 0 22px; text-align:center; font-size:17.5px; line-height:1.45; color:#4A5568; }
.ix201-wel-ticks{ list-style:none; margin:0 0 28px; padding:0; display:flex; flex-direction:column; gap:12px; }
.ix201-wel-ticks li{ position:relative; padding-left:46px; min-height:32px; display:flex; align-items:center; font-size:17px; line-height:1.35; }
.ix201-wel-ticks li::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:10px; background:#E8F5FC; }
.ix201-wel-ticks li::after{ content:""; position:absolute; left:11px; top:50%; width:10px; height:6px; border-left:2px solid #12182A; border-bottom:2px solid #12182A; transform:translateY(-70%) rotate(-45deg); }
.ix201-wel-btns{ display:flex; flex-direction:column; gap:12px; margin-top:auto; }
.ix201-wel-pro{ display:inline-flex; align-self:center; align-items:center; min-height:44px; color:#1A6FA0; font-weight:700; font-size:16px; text-decoration:underline; }
.ix201-wel-em{ margin:14px 0 0; text-align:center; font-size:16px; color:#4A5568; }


/* ---------- the provider's Today: See my calendar (a phone has no Calendar tab) ---------- */
.ix201-cal{ display:none; }
@media (max-width:767.98px){
  .ix201-cal{ display:inline-flex; align-items:center; min-height:44px; font-weight:700; font-size:16px; color:#1A6FA0 !important; text-decoration:underline !important; }
}

/* ---------- review round ---------- */
/* the back arrow at the start of the patient's top bar */
.ix201-back{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin:0 4px 0 -10px; border-radius:12px;
             color:#12182A !important; flex:0 0 auto; }
.ix201-back:hover{ background:#F4F7FB; }
.ix201-back:focus-visible{ outline:3px solid #1A6FA0; outline-offset:1px; }
.ixtop .header-left{ min-width:0; flex:0 1 auto; }
/* the top bar on a small phone: the logo and Start a check never overlap */
@media (max-width:440px){
  .ixtop .navbar-brand img{ max-width:96px !important; width:96px !important; min-height:0 !important; height:auto !important; }
  .ixtop-start{ display:none !important; }      /* the Check tab and Home's card start a check (patch 202 does the same) */
}
/* links people tap are at least 44px tall */
.ix197-strip a{ min-height:44px !important; }
.ixn-bar a{ min-height:44px; display:inline-flex; align-items:center; }
.ix201-wel-em a{ display:inline-flex; align-items:center; min-height:44px; color:#12182A; font-weight:800; }
/* the tour: Show me around is the main action, Back and Skip are outlined */
html body #ixtour .ixtour-next{ background:#53B8E7 !important; color:#12182A !important; border:0 !important; font-weight:800 !important; }
html body #ixtour .ixtour-prev, html body #ixtour .ixtour-alt{ background:#fff !important; color:#12182A !important; border:1.5px solid #12182A !important; }
html body #ixtour .ixtour-ul a{ color:#1A6FA0 !important; }
/* the help panel (its stylesheet is older than this one) */
html body #ixhp .ixhp-fab[aria-expanded="true"]{ background:#1A6FA0 !important; }
html body #ixhp .ixhp-lab, html body #ixhp .ixhp-list button:hover{ color:#1A6FA0 !important; }
/* the time zone question: Yes is not the page's main action */
html body .ix200-b.go{ background:#fff !important; color:#12182A !important; border:1.5px solid #12182A !important; }
/* Ion in the check is the Ionyx mark */
html body .ix157-av, html body.ix157 .screen .q.ix157-q::before, html body .ic .av, html body .ic-dot, html body #question-container .ic-ion .av, html body .ic-think .av, html body .ic-w-ion{
  background-image:url(/brand/mark.png) !important; background-size:contain !important; background-repeat:no-repeat !important; background-position:center !important;
  background-color:transparent !important; border-radius:0 !important; }
@keyframes ix201-breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
html body .ic-think .av, .ix201-ion-live{ animation:ix201-breathe 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){ html body .ic-think .av, .ix201-ion-live{ animation:none; } }

/* Home: a newest check that needs care soon, right under the check card */
.ix201-urg{ display:flex; align-items:center; gap:14px; margin:0 0 18px; padding:16px 18px; background:#fff; border:2px solid #B45309; border-radius:18px;
            color:#12182A !important; text-decoration:none !important; font-family:'Source Sans 3',system-ui,sans-serif; }
.ix201-urg.emergency{ border-color:#B42318; }
.ix201-urg-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.ix201-urg-k{ font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#4A5568; }
.ix201-urg-t b{ font-size:18px; line-height:1.3; }
.ix201-urg-l{ align-self:flex-start; font-size:14px; font-weight:800; color:#fff; background:#B45309; border-radius:99px; padding:3px 10px; }
.ix201-urg.emergency .ix201-urg-l{ background:#B42318; }
.ix201-urg-go{ flex:0 0 auto; display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:12px; background:#53B8E7; color:#12182A; font-weight:800; }
.ix201-urg:focus-visible{ outline:3px solid #1A6FA0; outline-offset:2px; }
@media print{ .ix201-back{ display:none !important; } }
