.MajBG		{background-color:#1F689F}
.OvlyBG		{background-color:#FFFFFF}
.MnrBG		{background-color:#ECFAFF}
.MajTxt		{color:White}
.HdgBord	{border-top:1px solid #A5C2D2}
.NormTxt	{color:#1F689F}

/* Global layout/reset (original behaviour retained) */
html,body,div,form,table {width:100%;height:100%;font-family:Roboto;margin:0;padding:0;border-spacing:0;border:0}
/* Original alternates kept as comments for reference
html,body      {width:100%;height:100%;margin:0;padding:0;font-family:Roboto}
div,form,table {width:100%;margin:0;padding:0;border-spacing:0;border:0}
*/

body		{padding-top:env(safe-area-inset-top)}
div,table	{border-collapse:collapse}
body,td,th	{font-size:1em;padding:0}
td,label	{color:#1F689F}
select		{margin:0;padding:0}
img			{margin:0;padding:0;border:none;border-spacing:0;border-collapse:collapse;image-orientation:from-image}
.Flag		{width:8px;position:absolute;visibility:hidden}
.UpdPos		{top:6px;right:8px}
.NtfyPos	{top:6px;right:8px}
.GiftPos	{top:5px;right:8px}
.mUpdPos	{top:6px;right:4px}
.mNtfyPos	{top:6px;right:19px}
.mGiftPos	{top:5px;right:33px}
.Help		{width:9px;position:relative;visibility:hidden;top:-8px;right:-4px}
.menu		{width:26px;height:26px}
.hcell		{border:0;text-align:center}
.hcellr		{border:0;text-align:center;width:12%;position:relative}
.fcell		{width:10%;border:0;cursor:pointer;text-align:center}
.fcellr		{width:10%;border:0;cursor:pointer;position:relative}
.xcell		{color:#FFFFFF;text-align:center;border-top:1px solid #A5C2D2}
.xcellr		{height:4em;color:#FFFFFF;text-align:center;border-top:1px solid #A5C2D2;position:relative}
.xcellimg	{margin-bottom:-8px;width:24px;padding-right:1em}
.btntab		{border:3px solid #1F689F;cursor:pointer}
.btnfill	{text-align:center;color:#FFFFFF;background:#1F689F}
.btnblnk	{text-align:center;color:#1F689F;background:#FFFFFF}
input,select	{font-size:1em}
input[type=text],input[type=number],input[type=password],input[type=email],input[type=date]	{border-top:none;border-left:none;border-right:none;border-bottom:1px solid #DBDBDB}
input[type=text],input[type=number],input[type=password],input[type=email],textarea			{background-image:url('../Images/Pen.png');background-size:14px;background-repeat:no-repeat;background-position:right}
input[type=text]:focus,input[type=number]:focus,input[type=password]:focus,input[type=email]:focus	{background-image:none;border-bottom:1px solid #1F689F}
input[type=radio],input[type=checkbox],input[type=button]	{cursor:pointer}
input[type=button]	{color:#0066CC;height:2em;font-size:1.5em;cursor:pointer}
input[type=number]	{width:8em}
input::-webkit-input-placeholder	{font-size:0.7em}
input:-moz-placeholder				{font-size:0.7em}
input::-moz-placeholder				{font-size:0.7em}
input:-ms-input-placeholder			{font-size:0.7em}
.wrapper	{width:100%;height:100%;border:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#header		{width:100%;height:44px;position:fixed;left:0;top:0;border:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:999}
#footer		{width:100%;height:44px;position:fixed;left:0;top:44px;border:0;transition:top 0.3s;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:999}
#Xtras		{position:fixed;top:44px;right:0;width:0}
#content	{width:100%;height:calc(100%-44px);padding:0;overflow:auto;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;overflow-y:scroll;-webkit-overflow-scrolling:touch}
#Sleep		{background-size:240px 240px;background-image:url("../Images/iEphalump.png");background-color:rgba(255,255,255,0.7);background-blend-mode:lighten;background-position:center;background-repeat:no-repeat;position:fixed;top:0;left:0}
.ShrTD		{width:26%;height:2.5em;color:#0066CC;font-size:0.9em;text-align:right;padding-right:4px}
#Shared		{position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(192,192,192,0.8)}
#ShowShare	{margin-left:20px;margin-top:50px;width:90%;position:relative}
#tw			{position:absolute;width:100%;bottom:0}
#twTab		{border:2px solid #1F689F}
#twData		{position:relative;font-size:0.7em;text-align:center;background:#FFFFEE;background-size:10px 10px;background-image:url('../Images/Close.gif');background-position:right top;background-repeat:no-repeat}
.Edit		{cursor:pointer; font-family:Arial; margin-right:1px; padding-left:2px; width:1.9em; height:1em; border-radius:4px; font-size:0.7em; font-variant:small-caps; vertical-align:top; background-color:#91AEBE; background-image:none !important}
.INtable	{border:1px solid #1F689F;border-collapse:separate;border-top-left-radius:5px;border-top-right-radius:5px;table-layout:fixed}
.INlbltd	{text-align:center;background-color:#1F689F;background:linear-gradient(#1F689F 60%,#91AEBE);color:#FFFFFF;font-size:0.75em;margin:0;padding:0}
.INbordtd	{text-align:center;border-right:1px solid #1F689F;margin:0;padding:0}
.INtd		{text-align:center}
.INpadtd	{padding:0 2px}
.INinput	{font-size:0.9em}
.foto12		{border-radius:25%;height:12px}
.foto14		{border-radius:25%;height:14px;padding-top:4px}
.foto20		{border-radius:25%;height:20px}
.foto22		{border-radius:25%;height:22px;padding-top:4px}
.foto26		{border-radius:22%;height:26px;padding-top:2px}
.foto30		{border-radius:20%;height:30px}
.foto40		{border-radius:15%;height:40px}
.foto50		{border-radius:15%;height:50px}
.amt		{font-size:1em; text-align:right}
.altFont	{font-family:Roboto Condensed}
.dim		{opacity:0.6}
.Left		{text-align:left}
.Rght		{text-align:right}
.Cntr		{text-align:center}
.Auto		{table-layout:auto}
.Fxd		{table-layout:fixed}
.Sep		{border-collapse:separate}
.Top		{vertical-align:top}
.Bot		{vertical-align:bottom}
.Bd			{font-weight:bold}
.soon		{color:#EB9C00}
.now		{color:#008000}
.past		{color:#FF0000}
.gray		{color:#999999}
.Dgray		{color:#777777}
.hdg		{color:#3399CC}
.Lgreen		{background-color:#99FF99}
.Lyellow	{background-color:#FFFFEE}
.err		{background-color:#FFD5EA}
.ok			{background-color:initial}
.even		{background-color:rgba(145,174,190,0.2)}
.Fs055		{font-size:0.55em}
.Fs06		{font-size:0.6em}
.Fs065		{font-size:0.65em}
.Fs07		{font-size:0.7em}
.Fs075		{font-size:0.75em}
.Fs08		{font-size:0.8em}
.Fs085		{font-size:0.85em}
.Fs09		{font-size:0.9em}
.Fs095		{font-size:0.95em}
.Fs1		{font-size:1em}
.Fs11		{font-size:1.1em}
.Fs125		{font-size:1.25em}
.Fs15		{font-size:1.5em}
.Fs155		{font-size:1.55em}
.Fs2		{font-size:2em}
.Point		{cursor:pointer}
.H015		{height:0.15em}
.H05		{height:0.5em}
.H07		{height:0.7em}
.H08		{height:0.8em}
.H1			{height:1em}
.H125		{height:1.25em}
.H15		{height:1.5em}
.H2			{height:2em}
.H25		{height:2.5em}
.H3			{height:3em}
.H35		{height:3.5em}
.H4			{height:4em}
.H45		{height:4.5em}
.H55		{height:5.5em}
.H6			{height:6em}
.H65		{height:6.5em}
.H7			{height:7em}
.H8			{height:8em}
.H9			{height:9em}
.H10		{height:10em}
.blink		{color:#0000FF;animation-name:blinker;animation-duration:0.75s;animation-iteration-count:5;animation-direction:alternate;animation-fill-mode:forwards;animation-timing-function:ease-in-out}
.CalcTot	{color:#000000;background-color:#EEEEEE;border-top:1px inset #EEEEEE;border-left:1px inset #EEEEEE}
@-webkit-keyframes blinker	{from{font-weight:normal} to {font-weight:bold}}
@keyframes blinker			{from{font-weight:normal} to {font-weight:bold}}

/* ===============================
   Ephalump Toggle Switch (CSS-only)
   =============================== */

:root {
  --tg-on:#0080ff;          /* Ephalump blue */
  --tg-off:#c0c9d6;         /* grey off */
  --tg-dot:#fff;
  --tg-ring:#66aaff;
  --tg-w:42px;
  --tg-h:24px;
  --tg-p:2px;
  --tg-dur:.22s;
}

/* main switch */
.toggle {
  appearance:none;
  -webkit-appearance:none;
  inline-size:var(--tg-w);
  block-size:var(--tg-h);
  background:var(--tg-off);
  border-radius:999px;
  position:relative;
  cursor:pointer;
  transition:background var(--tg-dur);
  vertical-align:middle;
}

/* switch knob */
.toggle::before {
  content:"";
  position:absolute;
  inset:var(--tg-p) auto var(--tg-p) var(--tg-p);
  inline-size:calc(var(--tg-h) - 2*var(--tg-p));
  block-size:calc(var(--tg-h) - 2*var(--tg-p));
  background:var(--tg-dot);
  border-radius:50%;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
  transition:transform var(--tg-dur);
}

/* active state */
.toggle:checked {background:var(--tg-on)}

.toggle:checked::before {transform:translateX(calc(var(--tg-w) - var(--tg-h)))}

/* focus & disabled */
.toggle:focus-visible {box-shadow:0 0 0 3px var(--tg-ring)}
.toggle:disabled {opacity:.55;cursor:not-allowed}

/* size variants if ever needed */
.toggle.tg-sm {
  --tg-w:34px;
  --tg-h:18px;
}
.toggle.tg-lg {
  --tg-w:56px;
  --tg-h:32px;
  --tg-p:3px;
}

/* =========================================================
   GetAccess-specific tweaks (non-destructive, EpShell-scoped)
   ========================================================= */

/* EpShell app shell to avoid IMAX-wide cards */
.EpShell {width:100%;max-width:480px;margin:0 auto;min-height:100vh;padding:0 12px;box-sizing:border-box}

/* Desktop polish: make it a nice centred card */
@media (min-width: 900px) {
  body {background:#f0f3f8}
  .EpShell {max-width:600px;background:#ffffff;border-radius:10px;padding:20px;box-shadow:0 4px 18px rgba(0,0,0,0.15)}
}

.Btn {font-family:Roboto Condensed;height:2em;border-radius:25px;font-size:1.25em;color:#fff;text-align:center;background-color:#1F689F;background:linear-gradient(#97B4CA 60%, #91AEBE);padding:0 0px;border:none;cursor:pointer}
/* NOTHING ABOVE THIS LINE SHOULD BE TOUCHED */

/* ==========================================================
   Modern Page Shell System
   For: WhoAreYou, HelloWorldShell, NoDb, GetAccess, etc.
   ========================================================== */

/* A modern page opts into the Shell by declaring <body class="ModernPage"> */
.ModernPage {margin:0;padding:0}

/* =========================================
   Shell Layout: Card, Header, Body, Footer
   ========================================= */
/* Modern pages provide their own header, so they don't need body safe-area padding */
body.ModernPage {padding-top:0}

/* Card container – centres and constrains width, uses flex column */
.ModernPage .EpShellCard {display:flex;flex-direction:column;min-height:100vh;max-width:640px;margin:0 auto;background:#ffffff;box-shadow:0 4px 18px rgba(0,0,0,0.15);overflow:hidden;box-sizing:border-box}

/* Neutralise the destructive legacy rule:   html,body,div,form,table {height:100%} but ONLY inside the shell */
.ModernPage .EpShellCard,
.ModernPage .EpShellCard * {height:auto !important;}

.ModernPage .EpShellHeader,
.ModernPage #header {
  position: static !important;
  width:100%;padding:4px 12px;background:#1F689F;color:#ffffff;box-sizing:border-box}

/* --- Scrollable content area --- */
.ModernPage .EpShellBody,
.ModernPage #content {
  flex: 1 1 auto;                 /* this is the flex child that grows/shrinks */
  width:100%;box-sizing:border-box;
  overflow-y: auto !important;    /* only this section scrolls */
  min-height: 0 !important;       /* critical for proper flex scrolling */
}

/* --- Bottom bar (fixed at bottom of card, not page) --- */
.ModernPage .EpShellFooter,
.ModernPage #bottomBar {
  position: static !important;    /* cancel legacy fixed footer */
  width: 100%;padding: 0;background:#eef3f7;border-top:1px solid #ccd5dd;box-sizing:border-box}

/* Use dynamic viewport height so header/footer stay visible behind iOS Safari’s address bar & keyboard */
@supports (height: 100dvh) {
  .EpShellCard {height:100dvh;max-height:100dvh}
}

/* Button bar inside the footer – full width, nice height */
.WhoAreYouPage .ButtonBarWrapper {width:100%}
.WhoAreYouPage .ButtonBar {width:100%;border-collapse:collapse}
.WhoAreYouPage .ButtonBar td {height:50px;line-height:50px;text-align:center}

/* =========================================
   PageIntro block (top explanatory text)
   ========================================= */
.ModernPage .PageIntro {margin:0px 0 25px;text-align:center}
.ModernPage .PageIntroMain {margin-bottom:4px}
.ModernPage .PageIntroSub,
.ModernPage .ExplainText {color:#1F689F}