@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Azeret+Mono:wght@400;500&display=swap');

/* ==========================================================================
   Humly brand skin for mfa.nsf
   main-6.css  -  supersedes main-5.css (kept intact, revert by repointing
   page.head back to main-5.css).

   Colour and type values are read from humly.com's own published stylesheet
   on 2026-09-01, not matched by eye. --danger is the one addition: the brand
   defines no error colour.

   Loads AFTER bootstrap 4.6.0 so these rules win. main-5.css loaded before
   it, which is why it only ever styled things bootstrap does not.
   ========================================================================== */

:root {
  --teal:      #56B3B5;
  --teal-dark: #3E9799;
  --gold:      #D7A24F;
  --olive:     #5C6151;
  --earth:     #B28160;
  --white-2:   #FFFCF4;
  --olive-1:   #F1F1F0;
  --card-olive:#EFECE4;
  --ink:       #1C1B1F;
  --muted:     #8D8B89;
  --hairline:  #EBE8E0;
  --danger:    #A6402F;

  --radius-control: 3px;
  --radius-card:    8px;

  --font-ui:   'Manrope', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'Azeret Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
}

/* ---------- COMMON (carried over from main-5.css) ---------- */
body { display: flex; flex-direction: column; min-height: 100vh; }
body.anonymous .logout { display: none; }
main { flex: 1; }
.form-control-password-show { top: 40px; right: 6px; }

/* ---------- SETUP (carried over) ---------- */
body#setup .setup-flow li { display: none; }
body#setup .setup-flow li.active { display: block; }
body#setup .step { display: none; }
body#setup .active { display: block; }

/* ---------- PROFILE (carried over) ---------- */
body#profile .iti { display: block; }

/* ---------- GROUND AND TYPE ---------- */
body {
  font-family: var(--font-ui);
  background-color: var(--olive-1);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
  font-family: var(--font-ui);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}
label { font-weight: 500; color: var(--ink); }
.text-muted, .form-text.text-muted { color: var(--muted) !important; }

/* the humly eyebrow: mono label over a short gold rule.
   markup:  <p class="eyebrow">Secure sign-in</p>  */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--olive);
  margin-bottom: 0.9rem;
}
.eyebrow::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  background: var(--gold);
  margin-top: 0.45rem;
}

/* ---------- LINKS ---------- */
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
a:hover, a:focus { color: var(--olive); text-decoration-color: var(--olive); }
.navbar-brand.text-danger.logout { color: var(--ink) !important; text-decoration-color: var(--gold); }

/* ---------- NAVBAR ---------- */
.navbar.bg-light { background-color: var(--white-2) !important; border-bottom: 1px solid var(--hairline); }

/* ---------- CONTROLS ---------- */
.btn { border-radius: var(--radius-control); font-weight: 600; font-family: var(--font-ui); }
.btn-primary { background-color: var(--teal); border-color: var(--teal); color: #000; }
.btn-primary:hover { background-color: var(--teal-dark); border-color: var(--teal-dark); color: #000; }
.btn-primary:focus, .btn-primary.focus, .btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--teal-dark); border-color: var(--teal-dark); color: #000;
  box-shadow: 0 0 0 0.2rem rgba(86,179,181,0.40);
}
.btn-primary:disabled, .btn-primary.disabled { background-color: var(--teal); border-color: var(--teal); color: #000; opacity: 0.45; }

/* one emphasis per screen, gold - use sparingly */
.btn-warning { background-color: var(--gold); border-color: var(--gold); color: #000; }
.btn-warning:hover { background-color: #C08F3F; border-color: #C08F3F; color: #000; }

.btn-secondary, .btn-outline-secondary {
  background-color: transparent; border-color: #D9D6CE; color: var(--ink);
}
.btn-secondary:hover, .btn-outline-secondary:hover { background-color: var(--card-olive); border-color: #CFCBC1; color: var(--ink); }

.btn-danger { background-color: var(--danger); border-color: var(--danger); }

.form-control {
  border-radius: var(--radius-control);
  border-color: var(--hairline);
  background-color: var(--white-2);
  color: var(--ink);
  font-family: var(--font-ui);
}
.form-control::placeholder { color: var(--muted); }
.form-control:focus {
  background-color: #fff;
  border-color: var(--teal);
  box-shadow: 0 0 0 0.2rem rgba(86,179,181,0.25);
  color: var(--ink);
}
.form-control.is-invalid, .was-validated .form-control:invalid { border-color: var(--danger); }
.invalid-feedback { color: var(--danger); }

.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--teal); border-color: var(--teal); }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 0.2rem rgba(86,179,181,0.25); }
.custom-control-label { color: var(--ink); }

/* ---------- ALERTS ---------- */
.alert {
  border: 0; border-left: 3px solid var(--gold);
  border-radius: var(--radius-control);
  background-color: #FCF7F0; color: var(--ink);
}
.alert-warning { border-left-color: var(--gold); background-color: #FCF7F0; }
.alert-success { border-left-color: var(--teal); background-color: var(--olive-1); }
.alert-danger  { border-left-color: var(--danger); background-color: #FBF0EE; }
.alert-info    { border-left-color: var(--olive); background-color: var(--olive-1); }

/* ---------- STATUS TEXT (carried over, recoloured) ---------- */
form span.action-status.progress { color: var(--olive); }
form span.action-status.failure  { color: var(--danger); }
form span.action-status.success  { color: var(--teal-dark); }
.text-danger { color: var(--danger) !important; }

/* ---------- THE AUTH CARD ----------
   Two selectors on purpose: the body id if it is "login", and a structural
   match on the column that actually contains the login form, so the card
   still lands if the id differs. */
body#login main > .row > [class*="col-"],
main > .row > [class*="col-"]:has(> form[name="login"]) {
  background-color: var(--white-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 1.75rem 1.75rem 2rem;
  margin-top: 2.25rem;
  margin-bottom: 2.25rem;
  box-shadow: 0 1px 2px rgba(28,27,31,0.05), 0 10px 30px rgba(28,27,31,0.07);
}
body#login main > .row > [class*="col-"] .form-control,
main > .row > [class*="col-"]:has(> form[name="login"]) .form-control {
  background-color: #fff;
}
body#login main h3, main > .row > [class*="col-"]:has(> form[name="login"]) h3 {
  font-size: 1.5rem;
  margin-top: 0 !important;
}

/* ---------- BROWSER AUTOFILL ----------
   Chrome paints its own pale blue over autofilled fields, which overrode the
   warm palette entirely. The inset shadow is the only way to repaint it. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--ink);
  border-color: var(--hairline);
  transition: background-color 5000s ease-in-out 0s;
}
input:-webkit-autofill:focus {
  border-color: var(--teal);
  -webkit-box-shadow: 0 0 0 1000px #fff inset, 0 0 0 0.2rem rgba(86,179,181,0.25) !important;
  box-shadow: 0 0 0 1000px #fff inset, 0 0 0 0.2rem rgba(86,179,181,0.25) !important;
}

/* ---------- SUBMIT ROW ----------
   bootstrap's justify-content-between put the toggle label hard against the
   button; in the narrower card the label wraps into it. Give the row a gap
   and let it wrap on small widths. */
form .d-flex.justify-content-between {
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
form .d-flex.justify-content-between .custom-control { flex: 1 1 auto; }
form .d-flex.justify-content-between .btn { flex: 0 0 auto; }

/* ---------- RESET / ACTIVATION PAGES ----------
   Same card as the login page. body#reset is set by GetReset. */
body#reset main > .row > [class*="col-"] {
  background-color: var(--white-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 1.75rem 1.75rem 2rem;
  margin-top: 2.25rem;
  margin-bottom: 2.25rem;
  box-shadow: 0 1px 2px rgba(28,27,31,0.05), 0 10px 30px rgba(28,27,31,0.07);
}
body#reset main > .row > [class*="col-"] .form-control { background-color: #fff; }
body#reset h3 { font-size: 1.5rem; }

/* the password rule checklist */
#js-reset-rules { margin-bottom: 1rem; }
#js-reset-rules li {
  display: flex; align-items: center; gap: 0.5rem; padding: 2px 0;
}
#js-reset-rules .tick {
  width: 13px; height: 13px; border-radius: 50%; flex: none;
  border: 1px solid #D9D6CE; display: inline-block; position: relative;
}
#js-reset-rules li.is-met { color: var(--ink); }
#js-reset-rules li.is-met .tick { background: var(--teal); border-color: var(--teal); }
#js-reset-rules li.is-met .tick::after {
  content: ""; position: absolute; left: 4px; top: 1.5px;
  width: 3px; height: 6px;
  border: solid #1C1B1F; border-width: 0 1.5px 1.5px 0;
  transform: rotate(42deg);
}


/* ===========================================================================
   DARK MODE + BRAND FIXES   (appended 2026-09-09)
   The page follows the OS setting. There is no toggle and no stored state:
   nobody is signed in yet, so the system preference is the only signal.
   hcm20 already does the same for signed-out visitors, so this removes an
   inconsistency rather than introducing one.
   Dark values are restated from hcm20 hcm.css [data-bs-theme="dark"] so the
   two databases agree instead of drifting.
   =========================================================================== */

:root { color-scheme: light dark; }

/* --- primary action is gold, matching the portal (2026-09-09) ------------ */
.btn-primary { background-color: var(--gold); border-color: var(--gold); color: #241B08; }
.btn-primary:hover { background-color: #C4913F; border-color: #C4913F; color: #241B08; }
.btn-primary:focus, .btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: #B5843A; border-color: #B5843A; color: #241B08;
  box-shadow: 0 0 0 0.2rem rgba(215,162,79,0.40);
}
.btn-primary:disabled, .btn-primary.disabled {
  background-color: var(--gold); border-color: var(--gold); color: #241B08; opacity: 0.45;
}

/* --- logo: the current brand mark from humly.com ------------------------- */
/* mfa.nsf still carries the PREVIOUS logo (teal wordmark, black tail) as
   h250.png and logo.svg. The current mark is monochrome. Both variants are
   inlined here, so no image resource has to be created in the NSF. */
img[src*="h250"], img[src*="logo.svg"] {
  content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMTAyIDMyIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfMTkzXzE5MDY5KSI+CjxwYXRoIGQ9Ik00MC4xODU5IDcuNzQwMTRIMzMuODM0MVYxMC45MTUxSDM2LjEzNTlWMTguNzc0QzM2LjEzNTkgMTkuODg0NyAzNC4yNzA3IDIyLjQyNTggMzEuNDExOCAyMi40MjU4QzI5LjM4NzcgMjIuNDI1OCAyOC4wMzc3IDIxLjE1NjEgMjguMDM3NyAxOC44MTQyVjcuNzQwMTRIMjEuNTI3VjEwLjkxNTFIMjQuMTA4MlYxOS4zMzEyQzI0LjEwODIgMjMuODk2MyAyNy4yMDQ3IDI1Ljc2MTUgMzAuNDYgMjUuNzYxNUMzNC4yNzA3IDI1Ljc2MTUgMzYuMzM1IDIyLjk0MjcgMzYuMzM1IDIyLjk0MjdMMzYuNzMxNCAyNS40MDM0SDQyLjU1MzRWMjIuMjI4NUg0MC4xODQxVjcuNzQwMTRINDAuMTg1OVpNMTguODE2IDEzLjgxNDJDMTguODE2IDkuMjQ5MDcgMTUuNzU5OCA3LjM4MzkxIDEyLjIyNjggNy4zODM5MUM5LjQ0ODE5IDcuMzgzOTEgNy41MDI2NSA4Ljk3MTQgNi43NDgxOSA5LjcyNTg3VjBIMFYzLjE3NDk3SDIuNzM4MzdWMjIuMjI4NUgwVjI1LjQwMzRIOS4wNDk5NVYyMi4yMjg1SDYuNzQ4MTlWMTQuMzY5NkM2Ljc0ODE5IDEzLjI1ODkgOC43NzIyOCAxMC43MTc4IDExLjcwOTggMTAuNzE3OEMxMy43NzQgMTAuNzE3OCAxNC44NDY0IDExLjkwODkgMTQuODQ2NCAxNC4xNzA1VjIyLjIyODVIMTIuNDY0MlYyNS40MDM0SDIxLjM5NTRWMjIuMjI4NUgxOC44MTZWMTMuODEyNFYxMy44MTQyWk02NC4zMzQzIDcuMzQzNzJDNjAuNzIyNyA3LjM0MzcyIDU4Ljk3NDUgOS44NDQ2MSA1OC45NzQ1IDkuODQ0NjFDNTguOTc0NSA5Ljg0NDYxIDU3LjU4NDMgNy4zNDM3MiA1NC40ODk3IDcuMzQzNzJDNTEuMjM0MyA3LjM0MzcyIDQ5LjIxMDMgOS45NjMzNSA0OS4yMTAzIDkuOTYzMzVMNDguOTcyOCA3Ljc0MDE0SDQzLjE1MDhWMTAuOTE1MUg0NS41MjAxVjI1LjQwMzRINTEuNzEzVjIyLjIyODVINDkuNTcwMVYxNC4wOTAxQzQ5LjU3MDEgMTMuMDE3OCA1MS40MzUzIDEwLjY3NTggNTMuMzgwOCAxMC42NzU4QzU0Ljg4OTggMTAuNjc1OCA1NS44NDE1IDExLjc4NjUgNTUuODQxNSAxMy44MTI0VjI1LjQwMzRINjIuMzUwNFYyMi4yMjg1SDU5LjgwOTNWMTQuMDExNUM1OS44MDkzIDEyLjk3OTQgNjEuMzE4MyAxMC42Nzc2IDYzLjUwMTMgMTAuNjc3NkM2NS4wODg4IDEwLjY3NzYgNjYuMDgyNiAxMS42Njk2IDY2LjA4MjYgMTQuMDExNVYyNS40MDM0SDcwLjAxMzhWMTIuNjYxNUM3MC4wMTM4IDkuMjg3NDMgNjcuMjM1MyA3LjM0MTkgNjQuMzM2MSA3LjM0MTlMNjQuMzM0MyA3LjM0MzcyWk03OC4xNjg2IDBINzAuNjI3NlYzLjE3NDk3SDc0LjEyMDVWMjUuNDAzNEg4MS43MTk5VjIyLjIyODVINzguMTY4NlYwWk05NC42MjgxIDEwLjgwNTVMOTAuNDMwMSAyMC4yNjY1TDg1LjM2NjIgMTAuNzMwNkw4MS40MjQgMTAuODAzN0w4OC41Nzc3IDI0LjIzOThMODYuNDIwMyAyOC45NzEySDgxLjc2NTZWMzEuOTk4Mkg4NS40MzAyQzg5LjIyNjIgMzEuOTk4MiA5MC4zMTg3IDI4Ljk3MTIgOTAuMzE4NyAyOC45NzEyTDk4LjQxODcgMTAuODA1NSIgZmlsbD0iIzFDMUIxRiIvPgo8cGF0aCBkPSJNMTAxLjI1NCA3Ljc3ODU2SDkyLjIzMTNWMTAuODA1NkgxMDEuMjU0VjcuNzc4NTZaIiBmaWxsPSIjMUMxQjFGIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMTkzXzE5MDY5Ij4KPHJlY3Qgd2lkdGg9IjEwMS4yNTQiIGhlaWdodD0iMzIiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==");
  height: 32px; width: auto;
}

/* --- Microsoft lockup: served from here, not from hcm12 ------------------ */
/* Was /hcm12.nsf/ms-symbollockup_signin_light.png - a dependency on the
   database being retired, and the light lockup is not permitted on dark. */
img[src*="symbollockup"] {
  content: url("data:image/png;base64,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");
}

@media (prefers-color-scheme: dark) {
  :root {
    --teal:       #6FC7C9;
    --teal-dark:  #8AD4D6;
    --gold:       #D7A24F;
    --olive:      #8E9382;
    --earth:      #C69A7B;
    --white-2:    #1D1F18;
    --olive-1:    #15160F;
    --card-olive: #24261F;
    --ink:        #E7E3D8;
    --muted:      #8E8B81;
    --hairline:   #33352C;
    --danger:     #E09480;
  }

  /* the literal colours that assume paper */
  .btn-secondary, .btn-outline-secondary { border-color: #454839; }
  .btn-secondary:hover, .btn-outline-secondary:hover { background-color: #2A2C24; }
  .form-control { background-color: #24261F; }
  .form-control:focus { background-color: #24261F; box-shadow: 0 0 0 0.2rem rgba(111,199,201,0.25); }
  .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 0.2rem rgba(111,199,201,0.25); }
  .alert { background-color: #241F18; }
  .alert-warning { background-color: #241F18; }
  .alert-danger  { background-color: #2A1C19; }
  main > .row > [class*="col-"]:has(> form[name="login"]),
  body#reset main > .row > [class*="col-"] {
    box-shadow: 0 1px 2px rgba(0,0,0,0.45), 0 8px 24px rgba(0,0,0,0.35);
  }
  main > .row > [class*="col-"]:has(> form[name="login"]) .form-control,
  body#reset main > .row > [class*="col-"] .form-control { background-color: #24261F; }
  #js-reset-rules .tick { border-color: #454839; }
  #js-reset-rules li.is-met .tick::after { border-color: #E7E3D8; }

  /* autofill ignores every rule above unless it is overridden explicitly */
  input:-webkit-autofill, input:-webkit-autofill:hover,
  input:-webkit-autofill:focus, input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 60px #24261F inset !important;
    -webkit-text-fill-color: #E7E3D8 !important;
    caret-color: #E7E3D8;
  }
  input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 60px #24261F inset, 0 0 0 0.2rem rgba(111,199,201,0.25) !important;
  }

  /* assets that need a dark variant */
  img[src*="h250"], img[src*="logo.svg"] {
    content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMTAyIDMyIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfMTkzXzE5MDY5KSI+CjxwYXRoIGQ9Ik00MC4xODU5IDcuNzQwMTRIMzMuODM0MVYxMC45MTUxSDM2LjEzNTlWMTguNzc0QzM2LjEzNTkgMTkuODg0NyAzNC4yNzA3IDIyLjQyNTggMzEuNDExOCAyMi40MjU4QzI5LjM4NzcgMjIuNDI1OCAyOC4wMzc3IDIxLjE1NjEgMjguMDM3NyAxOC44MTQyVjcuNzQwMTRIMjEuNTI3VjEwLjkxNTFIMjQuMTA4MlYxOS4zMzEyQzI0LjEwODIgMjMuODk2MyAyNy4yMDQ3IDI1Ljc2MTUgMzAuNDYgMjUuNzYxNUMzNC4yNzA3IDI1Ljc2MTUgMzYuMzM1IDIyLjk0MjcgMzYuMzM1IDIyLjk0MjdMMzYuNzMxNCAyNS40MDM0SDQyLjU1MzRWMjIuMjI4NUg0MC4xODQxVjcuNzQwMTRINDAuMTg1OVpNMTguODE2IDEzLjgxNDJDMTguODE2IDkuMjQ5MDcgMTUuNzU5OCA3LjM4MzkxIDEyLjIyNjggNy4zODM5MUM5LjQ0ODE5IDcuMzgzOTEgNy41MDI2NSA4Ljk3MTQgNi43NDgxOSA5LjcyNTg3VjBIMFYzLjE3NDk3SDIuNzM4MzdWMjIuMjI4NUgwVjI1LjQwMzRIOS4wNDk5NVYyMi4yMjg1SDYuNzQ4MTlWMTQuMzY5NkM2Ljc0ODE5IDEzLjI1ODkgOC43NzIyOCAxMC43MTc4IDExLjcwOTggMTAuNzE3OEMxMy43NzQgMTAuNzE3OCAxNC44NDY0IDExLjkwODkgMTQuODQ2NCAxNC4xNzA1VjIyLjIyODVIMTIuNDY0MlYyNS40MDM0SDIxLjM5NTRWMjIuMjI4NUgxOC44MTZWMTMuODEyNFYxMy44MTQyWk02NC4zMzQzIDcuMzQzNzJDNjAuNzIyNyA3LjM0MzcyIDU4Ljk3NDUgOS44NDQ2MSA1OC45NzQ1IDkuODQ0NjFDNTguOTc0NSA5Ljg0NDYxIDU3LjU4NDMgNy4zNDM3MiA1NC40ODk3IDcuMzQzNzJDNTEuMjM0MyA3LjM0MzcyIDQ5LjIxMDMgOS45NjMzNSA0OS4yMTAzIDkuOTYzMzVMNDguOTcyOCA3Ljc0MDE0SDQzLjE1MDhWMTAuOTE1MUg0NS41MjAxVjI1LjQwMzRINTEuNzEzVjIyLjIyODVINDkuNTcwMVYxNC4wOTAxQzQ5LjU3MDEgMTMuMDE3OCA1MS40MzUzIDEwLjY3NTggNTMuMzgwOCAxMC42NzU4QzU0Ljg4OTggMTAuNjc1OCA1NS44NDE1IDExLjc4NjUgNTUuODQxNSAxMy44MTI0VjI1LjQwMzRINjIuMzUwNFYyMi4yMjg1SDU5LjgwOTNWMTQuMDExNUM1OS44MDkzIDEyLjk3OTQgNjEuMzE4MyAxMC42Nzc2IDYzLjUwMTMgMTAuNjc3NkM2NS4wODg4IDEwLjY3NzYgNjYuMDgyNiAxMS42Njk2IDY2LjA4MjYgMTQuMDExNVYyNS40MDM0SDcwLjAxMzhWMTIuNjYxNUM3MC4wMTM4IDkuMjg3NDMgNjcuMjM1MyA3LjM0MTkgNjQuMzM2MSA3LjM0MTlMNjQuMzM0MyA3LjM0MzcyWk03OC4xNjg2IDBINzAuNjI3NlYzLjE3NDk3SDc0LjEyMDVWMjUuNDAzNEg4MS43MTk5VjIyLjIyODVINzguMTY4NlYwWk05NC42MjgxIDEwLjgwNTVMOTAuNDMwMSAyMC4yNjY1TDg1LjM2NjIgMTAuNzMwNkw4MS40MjQgMTAuODAzN0w4OC41Nzc3IDI0LjIzOThMODYuNDIwMyAyOC45NzEySDgxLjc2NTZWMzEuOTk4Mkg4NS40MzAyQzg5LjIyNjIgMzEuOTk4MiA5MC4zMTg3IDI4Ljk3MTIgOTAuMzE4NyAyOC45NzEyTDk4LjQxODcgMTAuODA1NSIgZmlsbD0iI0U3RTNEOCIvPgo8cGF0aCBkPSJNMTAxLjI1NCA3Ljc3ODU2SDkyLjIzMTNWMTAuODA1NkgxMDEuMjU0VjcuNzc4NTZaIiBmaWxsPSIjRTdFM0Q4Ii8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMTkzXzE5MDY5Ij4KPHJlY3Qgd2lkdGg9IjEwMS4yNTQiIGhlaWdodD0iMzIiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==");
  }
  img[src*="symbollockup"] {
    content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANcAAAApCAYAAACm5bzcAAAACXBIWXMAAAsSAAALEgHS3X78AAAHEElEQVR4Ae2dMUwcRxSGhyQSFECHhE2VxrgDybiKI2FLKSiA9LiIBAV0uAAqW5FNBYVdUoCUAheWmwASBkWykUA0NhIWDdCExkYu3Niu3CT6JvefhmX39u5yQ+7C+6TT3e3Nzrx5M/+bN7M4aerp6fnLGYZRc74xlxpGHExchhEJE5dhRMLEZRiRMHEZRiRMXIYRCROXYUTCxGUYkTBxGUYkTFyGEYnvqql2+/vPuWV+/LPN/Tz/Nrfc71M9NrbG/xJbuQwjEiYuw4hEw4urr6+v+Oru7i5eHxoaclNTU9Hbpw3auijGx8fdyMhIrk1LS0tn/JEHZeXHLFQmrLcce/5r2travI0vXrzwfrkoqtpz1QMM8JMnT9yVK1fOWDM2NubevHnjHj586L+/evXKf48BNmhira6uRvfK1atX/WRWe58//7P3xY73798Xv1+/ft3duHHDT6pymZ6e9vfAvXv3vN9CqIuJ2dra6vb29tzo6OgZe54+fVoHsyKdrACQ9FutaUhxJQf69evXrqury92+fbtYhgnC4McSFhwdHbn5+Xk/QBcB7Tx48MC3pAlBgOnv7y8GlVowPDx8Tlz4Fn+HhPbUM/QHsFVBMIbfkjSkuIg4DPTp6amPoGkkJ4criFLRKk8QlKN8nuNLRWxSKESACGtFcoXMW50IMLwqsYNJR71hRJ+YmHBfvnw5J7CsFVvpZZav8S/16zfZmXWPxs4VglpytVF7af2UzaGtlazq1dKwaSGQEuLUNAGwspHm9Pb2+u8MjFY7VxDFzZs33bVr14pl9vf3/fva2pobHBz0nxHw/fv3M0XGPUqTsGVxcdEdHx/736gb+J06khMGm549e+bbGBgY8NfYL5HCYAP3qA2VkY3YrM9Au7ouiNjqh/rMSlsKbMdu9pEKHPQLX9MPpY5h/8N209L1hYUF/1JZ1cM12nj06JEXdEhoK7YozRdqj99IaUPR0wfGA1vkl3Cswj6k+a1WNOSBBhN9a2vLf8Y5iKbURjxMI5mkDKqElQZ1MbC0wSRh8CqBeomg1MFAM5hpOT8RFntoQ1H7zp07/l390fvLly/P3U8/uN8VAgLfQxBWeB0b8iL28vKyf797927xmtKqNBvS/Ex/5GfaT64y+APfEmzwLcJiVVR52YpwqBNh8TupPqmdxh7f8BvjyjUESbv4H4FTf+gTPq+srOT6rVZUtXLxgLgcYj4gnpyc9BtVJgGDhciyIrPSSAZIKwQpwvr6emrdc3NzPq2kzPb2dqYI8+xT2vP48WN/yJAGE5aJpBVYE5N3JpbElbZyKkhQlkmTLBOufoiWfuCLUqku9iq60zYBAJESJPLSSsSgACY/pxEemGhFwk5d+/Tpk/cJNidtZUyU3kn0CAt/63eyAezH//hIhy6hiEr5rVZUJa63U1u5ZXrm+93+XP5faPROVy9ApRU6DeKFo5L7rbQJGk6iJLq/2lMk6tW9eXVgE3Yz2FpVGHD6hN1cdxl7yDzClaaSvtA+fmHyHh4e+mta0Uoh+/NWOI1DeKQf9k8+oT7GSWk6QQrhKvhptQ/bC7OBvEASm4Z/zqX0S/sDpVVphCkRn9OEddFoUklIrBDhXkcpVLW+qQaiP6s8ExqB8bkScXNyW45d4R5UQkl+doVVjVM9RIZoEFkozLA846r9Xqwj9nJpSHHhWCK7xIJzJap3796dK6/opVTHFXL6ekF7O2zjsQKTApHJxryVwCVWgVrA6uUK+0eEVc5ElVjYQ+mxCGOTtR+mTu19OI1kPCmvdA9f8J26GENEpkDDdfmF8uq/fEa95ZyO1tpvIQ0pLgYBcbEf4gSIvROTkwibdjTMwOgEj70Z93A/5esBJpErHBnLfl1zGfstoXKcMoanh/+W8BGDhJYHtsvPrC47Ozt+bEodNpHiucLhC39BQXkErRUcEakuDkt0+IFw1B5jzz5L4xrWm4XSXfxG3TH4trOz89dK6/3wwy+5ZTp3f3PjP33ILbfwR2fF3SLiff361TU1NfkIxYvoyklSmGowAJqYz58/999bWlrcx48ffSqpfU640aV8cjKnXUv+riiJbeH3rGsh2KMym5ub/heu8aJfu7u7mfZQZ0dHh59wTLSNjY0zfQ9XnLRrIeHvOozRJC7Vl9Ae2tfYYL8OINRm0pcnJyf+e3t7e3Elo/zs7OyZfWtzc7P/zH52ZmbG20Y7YXvcy++MbSmfwcHBQdFv2CC/1ZKq/ou79XKgUQnJh6J6xoRzb926dSE2GJeLhn6IXAk890Bg5Om8K68v5xTMMKrh0oiLHBtBKSdnxSKnj/UA0TAujbjIw3mxQWblquXf+xlGGvZ/OTGMSNi/RDaMSJi4DCMSJi7DiISJyzAiYeIyjEiYuAwjEiYuw4iEicswImHiMoxImLgMIwbOub8BJBaeJu1xr2MAAAAASUVORK5CYII=");
  }
}