/* Elephant Pay — pay bills: the site's own screens (loading, no account for paying bills, could not open it).
   Their cards, colours and type come from the shared theme (assets/theme: theme.css and shell.css), in light and at
   night. The sign-in screen has its own sheets (signin-ui.css, css/sign-in.css) and the Pay bills page its own. */
body { margin: 0; }
#portal { min-height: 100vh; }
.pp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Loading: the mark appears only if it takes a moment, so a quick start shows nothing at all. */
.pp-boot .ep-mark { color: var(--ep-text-3); opacity: 0; animation: pp-appear .4s ease .35s forwards, pp-breathe 1.6s ease-in-out .75s infinite; }
@keyframes pp-appear { to { opacity: 1; } }
@keyframes pp-breathe { 50% { opacity: .4; } }

/* The cards' headings take the focus when a card replaces the screen, without a ring around the text. */
html.ep .ep-state-card h2:focus { outline: none; }
html.ep .ep-state .btn { font-family: inherit; }

/* When scripts are off. */
.pp-noscript { max-width: 30rem; margin: 20vh auto 0; padding: 0 1.25rem; text-align: center; color: var(--ep-text-2, #536078); font-family: var(--ep-font, system-ui, sans-serif); }
.pp-noscript b { display: block; margin-bottom: .4rem; color: var(--ep-text, #111318); font-size: 1.2rem; }

@media (prefers-reduced-motion: reduce) {
  .pp-boot .ep-mark { animation: pp-appear .01s linear .35s forwards; }
}