html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* ---- FieldForce login (static SSR page, no MudBlazor circuit) ---- */
.ff-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #173B6E 0%, #2A5DA8 100%); font-family: 'Roboto', sans-serif; }
.ff-login-card { background: #fff; border-radius: 12px; padding: 40px 36px; width: 380px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.ff-login-card h1 { margin: 0 0 4px; color: #173B6E; font-size: 28px; }
.ff-login-card .ff-sub { color: #777; margin: 0 0 24px; font-size: 14px; }
.ff-login-card label { display: block; font-size: 13px; color: #444; margin: 14px 0 4px; }
.ff-login-card input { width: 100%; padding: 10px 12px; border: 1px solid #ccc; border-radius: 6px;
  font-size: 15px; box-sizing: border-box; }
.ff-login-card input:focus { outline: 2px solid #2A5DA8; border-color: transparent; }
.ff-login-card button { width: 100%; margin-top: 22px; padding: 11px; background: #173B6E; color: #fff;
  border: none; border-radius: 6px; font-size: 15px; font-weight: 500; cursor: pointer; }
.ff-login-card button:hover { background: #2A5DA8; }
.ff-signin-btn { display: block; width: 100%; margin-top: 22px; padding: 11px; background: #173B6E;
  color: #fff; border-radius: 6px; font-size: 15px; font-weight: 500; text-align: center;
  text-decoration: none; box-sizing: border-box; }
.ff-signin-btn:hover { background: #2A5DA8; }
.ff-error { background: #fdecea; color: #b71c1c; padding: 10px 12px; border-radius: 6px; font-size: 13px; }
.ff-note { color: #999; font-size: 12px; margin-top: 18px; text-align: center; }

/* ---- The circuit has thrown (App.razor's #blazor-error-ui) ----
   Blazor shows this by setting display:block on it directly, so the default here must be none and
   the rule must not be more specific than an inline style.

   Above everything the console draws — the dropdown panel and its scrim (1150/1149), the modal
   scrim (1100), and the Places autocomplete (2000) — because the page it is reporting on is frozen
   underneath, and an open dropdown covering the notice is exactly the case this was reported in. */
#blazor-error-ui { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 3000;
  background: #b71c1c; color: #fff; padding: 12px 20px; box-sizing: border-box;
  font: 500 13.5px Figtree, 'Roboto', sans-serif; box-shadow: 0 -2px 12px rgba(0,0,0,.3); }
#blazor-error-ui strong { font-weight: 700; }
#blazor-error-ui .reload { color: #fff; text-decoration: underline; margin-left: 10px; font-weight: 700; }

/* ============================================================================================
   The connection has dropped (App.razor's <ReconnectModal />)
   ============================================================================================
   The sibling of #blazor-error-ui above. That one answers a circuit that has THROWN; this one
   answers a circuit the browser can no longer REACH — a deploy restarting the server, a laptop
   waking up, a tunnel. Blazor opens it by name and then only sets classes on it; everything a
   person reads is decided here.

   It lives in app.css rather than a ReconnectModal.razor.css because that is the bug this replaced.
   Scoped CSS is bundled into FieldForce.Web.styles.css, the shell has never linked that file, and
   so every rule below was built, published and never served: the dialog came up as a bare white box
   with all five of its messages showing at once, on every deploy, while nothing anywhere failed.
   app.css is linked by the shell on every page, which is the whole requirement. ReconnectModalTests
   holds the line.

   Colours fall back to Picasso Blue literals. An unresolved var() takes its whole declaration with
   it, and of everything in this product, THIS dialog is the one that must still look like itself
   when the rest of the page's styling is in doubt. */

#components-reconnect-modal {
  width: min(27rem, calc(100vw - 2rem)); margin: auto; padding: 0; border: 0;
  border-radius: var(--ff-r-card, 14px); background: var(--ff-card, #fff);
  box-shadow: 0 18px 50px rgba(15, 42, 51, .28); color: var(--ff-text, #0F2A33);
  font-family: Figtree, system-ui, 'Roboto', sans-serif; }
#components-reconnect-modal[open] { animation: ff-rx-in .34s cubic-bezier(.2, .8, .3, 1) both; }
#components-reconnect-modal::backdrop { background: rgba(15, 42, 51, .45); backdrop-filter: blur(2px); }

.ff-rx { display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 30px 28px 26px; text-align: center; }

/* ---- which of the five messages is on screen ----
   Everything is hidden until a state asks for it. The default is none and not the other way round:
   a state Blazor adds later then shows nothing until somebody writes a rule, where the reverse
   would quietly stack two answers on top of each other — which is precisely what used to be on
   screen. */
#components-reconnect-modal .ff-rx-state,
#components-reconnect-modal [data-rx]:not(.ff-rx-state),
#components-reconnect-modal [data-net],
#components-reconnect-modal .ff-rx-mark { display: none; }

/* Trying to get back. Blazor leaves -show in place when it adds -retrying, and -rejected is the
   instant before the script asks the server to rebuild the circuit; all three are one wait. */
#components-reconnect-modal.components-reconnect-show .ff-rx-state[data-rx~="connecting"],
#components-reconnect-modal.components-reconnect-retrying .ff-rx-state[data-rx~="connecting"],
#components-reconnect-modal.components-reconnect-rejected .ff-rx-state[data-rx~="connecting"],
#components-reconnect-modal.components-reconnect-failed .ff-rx-state[data-rx~="failed"],
#components-reconnect-modal.components-reconnect-paused .ff-rx-state[data-rx~="paused"],
#components-reconnect-modal.components-reconnect-resume-failed .ff-rx-state[data-rx~="resume-failed"] {
  display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }

#components-reconnect-modal.components-reconnect-paused [data-rx~="paused"]:not(.ff-rx-state),
#components-reconnect-modal.components-reconnect-resume-failed [data-rx~="resume-failed"]:not(.ff-rx-state) {
  display: block; }

#components-reconnect-modal.components-reconnect-show .ff-rx-mark,
#components-reconnect-modal.components-reconnect-retrying .ff-rx-mark,
#components-reconnect-modal.components-reconnect-rejected .ff-rx-mark { display: block; }

/* The server being down and the network being down are different problems with different remedies.
   The script sets ff-rx-offline from navigator.onLine; only one sentence is ever on screen. */
#components-reconnect-modal:not(.ff-rx-offline) [data-net="online"],
#components-reconnect-modal.ff-rx-offline [data-net="offline"] { display: block; }

/* ---- the words ---- */
.ff-rx-title { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.01em;
  color: var(--ff-brand-strong, #173B6E); }
.ff-rx-text { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ff-text-2, #5B7078); }
.ff-rx-meta { margin: 0; font-size: 12px; font-weight: 600; color: var(--ff-muted, #7A8F96);
  font-variant-numeric: tabular-nums; }

/* The countdown and "trying now" are the same fact at two moments, so exactly one shows: the script
   marks a real countdown with ff-rx-counting, and an attempt in flight has no countdown to show. */
#components-reconnect-modal .ff-rx-wait { display: none; }
#components-reconnect-modal.ff-rx-counting .ff-rx-wait { display: inline; }
#components-reconnect-modal.ff-rx-counting .ff-rx-now { display: none; }

/* ---- the progress bar ----
   Determinate while Blazor is counting down to the next attempt, because that wait is a real number
   it hands us every second. Indeterminate while an attempt is actually in flight, because nobody
   knows how long that takes and a bar sitting full is a bar telling a lie. */
.ff-rx-bar { width: 100%; height: 6px; margin: 2px 0; border-radius: 999px;
  background: var(--ff-hairline, #E9EEF5); overflow: hidden; }
.ff-rx-bar-fill { height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--ff-cta-from, #2A5DA8), var(--ff-cta-to, #1F4E93)); }
#components-reconnect-modal:not(.ff-rx-counting) .ff-rx-bar-fill { width: 38%;
  animation: ff-rx-sweep 1.5s cubic-bezier(.65, 0, .35, 1) infinite; }
#components-reconnect-modal.ff-rx-counting .ff-rx-bar-fill {
  width: calc(var(--ff-rx-progress, 0) * 100%); transition: width 1s linear; }

/* ---- the brand mark ----
   Drawn, not an <img>: the one moment this dialog exists is the moment the server cannot be relied
   on to answer a request, and a broken image in the "hold on" dialog is worse than no image. */
.ff-rx-mark { position: relative; width: 58px; height: 58px; }
.ff-rx-mark i { position: absolute; inset: 0; margin: auto; width: 0; height: 0; opacity: 0;
  border: 2.5px solid var(--ff-teal, #2A5DA8); border-radius: 50%;
  animation: ff-rx-pulse 1.9s cubic-bezier(0, .2, .8, 1) infinite; }
.ff-rx-mark i:nth-child(2) { animation-delay: -.63s; }
.ff-rx-mark i:nth-child(3) { animation-delay: -1.26s; }

/* ---- the buttons ---- */
.ff-rx-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }
.ff-rx-btn { border: 0; border-radius: var(--ff-r-input, 10px); padding: 9px 20px; cursor: pointer;
  font: 600 13.5px Figtree, system-ui, 'Roboto', sans-serif; text-decoration: none; }
.ff-rx-btn-go { color: #fff;
  background: linear-gradient(135deg, var(--ff-cta-from, #2A5DA8), var(--ff-cta-to, #1F4E93)); }
.ff-rx-btn-go:hover { filter: brightness(1.08); }
.ff-rx-btn-quiet { background: transparent; color: var(--ff-text-2, #5B7078);
  box-shadow: inset 0 0 0 1px var(--ff-border, #DCE4EF); }
.ff-rx-btn-quiet:hover { background: var(--ff-thead, #F2F5FA); }
.ff-rx-btn:focus-visible { outline: 2px solid var(--ff-teal, #2A5DA8); outline-offset: 2px; }

@keyframes ff-rx-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes ff-rx-sweep { from { transform: translateX(-110%); } to { transform: translateX(300%); } }
@keyframes ff-rx-pulse { 0% { width: 0; height: 0; opacity: 0; } 6% { opacity: 1; }
  100% { width: 58px; height: 58px; opacity: 0; } }

/* Someone who has asked for less motion still needs to see that something is happening, so the
   moving parts become steady ones rather than disappearing altogether. */
@media (prefers-reduced-motion: reduce) {
  #components-reconnect-modal[open] { animation: none; }
  .ff-rx-mark i { animation: none; opacity: 1; width: 58px; height: 58px;
    border-color: var(--ff-border, #DCE4EF); }
  .ff-rx-mark i:nth-child(1) { border-color: var(--ff-teal, #2A5DA8);
    border-right-color: transparent; border-bottom-color: transparent; }
  .ff-rx-mark i:nth-child(3) { display: none; }
  #components-reconnect-modal:not(.ff-rx-counting) .ff-rx-bar-fill { width: 100%; animation: none; opacity: .45; }
  #components-reconnect-modal.ff-rx-counting .ff-rx-bar-fill { transition: none; }
}