@charset "utf-8";
:root {
	--rem-font-size: 16px;
}
* {
  position:relative;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
html {
  	font-family: sans-serif;
  	/*-webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;*/
	font-size:var(--rem-font-size);
}
body {
	background:#FFF;
	margin: 0;
	padding: 0;
	color:#64686d;
}

.frame {
  background:#FFF;

	font-family:'Open Sans',Helvetica,Arial,Lucida,sans-serif;
	font-optical-sizing: auto;
	color:#64686d;
	font-weight:350;
	
	overflow:hidden;
}
.frame.site-offline { background-image:url(../images/offline.gif); background-repeat:repeat; background-position:top right; }

header { z-index:3; }
main { z-index:2; }
footer { z-index:1; }

#displayText { background:#CCC; border:1px solid #999; color:#222; }
#displayText h2 { color:#000 !important; }

/* --- page spacing --- */
.pageRow { padding:1em 0; }

.container {
	max-width:1400px;
	margin:0 auto;
}
.padding,
.padding-x,
.padding-y { padding:clamp(14px, 5.5vw, 110px) clamp(24px, 4.1vw, 60px); }
.padding-x { padding-top:0 !important; padding-bottom:0 !important; }
.padding-y { padding-left:0 !important; padding-right:0 !important; }

.margin,
.margin-x,
.margin-y { margin: clamp(50px, calc(40px + 4vw), 110px) auto; }
.margin-x { margin-top:0 !important; margin-bottom:0 !important; }
.margin-y { margin-left:0 !important; margin-right:0 !important; }

/* general */
h1, h2, h3, h4 {
  	font-family:"Montserrat", Helvetica, Arial, sans-serif;
  	font-weight:300;
  	letter-spacing:.01em;
    padding:0;
    margin:0;
    line-height:1.3;
}
h1 { color:#000000; font-size: clamp(1.8rem, calc(1.2rem + 3vw), 3.8rem); }
h2 { color:#171717; font-size: clamp(1.8rem, calc(1rem + 1.6vw), 2.6875rem); }
h3 { color:#252525; font-size: clamp(1.4rem, calc(1rem + 1vw), 2.3rem);}
h4 { color:#323232; font-size: clamp(1.2rem, calc(1rem + .7vw), 2rem); }

.sub-hd {
    display:inline-block;
    color:#FF8000;
    font-size: clamp(1.05rem, calc(0.95rem + 0.45vw), 1.4rem) !important;
    font-weight:300 !important;
    margin: 1px 0 0.6em;
    padding: 0;
    line-height: 1.25;
}
.sub-hd b { font-weight:500; }


.txt-xxs  { font-size:0.7em !important; }
.txt-xs   { font-size:0.875em !important; }
.txt-sm   { font-size:0.95em !important; }
/* normal = 1em */
.txt-lg   { font-size:1.05em !important; }
.txt-xl   { font-size:1.125em !important; }
.txt-xxl  { font-size:1.25em !important; }

.txt-thin 		{ font-weight:300 !important; }
.txt-bold 		{ color:#203030; font-weight:500; }
.txt-bolder		{ color:#172324; font-weight:700; }

.txt-info		{ font-style:italic; opacity:0.75; font-size:0.875em !important; }
.txt-info--sm	{ font-size:0.75em !important; }
.txt-info--xs	{ font-size:0.82em !important; }
.txt-info--lg	{ font-size:0.95em !important; }

a.txt-link {
  color: #8a5a18;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(138, 90, 24, 0.45);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

a.txt-link:hover {
  color: #5f3d10 !important;
  text-decoration-color: #5f3d10 !important;
}

a.txt-link:focus-visible {
  outline: 2px solid #c49a45;
  outline-offset: 3px;
}

.txt-error 		{ font-size:1.1em; font-weight:bold; color:#F00; }
.txt-red 		{ color:#C00 !important;; }
.txt-grn 		{ color:#090 !important;; }
.txt-orn 		{ color:#ED5306 !important;; }
.txt-blu 		{ /*color:#00008C !important;;*/ color:#0086B9 !important; } 
.txt-gry 		{ color:#AAA !important;;}
.txt-dark		{ color:#003133 !important;; }
.txt-blk 		{ color:#000 !important;; }
.txt-wht 		{ color:#FFF !important;; }
.txt-yel		{ color:#FFD24C !important;; }

.clr {clear:both;}
.br { display:block; }
.hidden { visibility:hidden; }


/* Screen-reader-only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* --- Divider --- */
hr.bar { border:0; height:3px; background-color:#ED5306; margin:5em auto; }
hr.bar-short { width:25%; max-width:250px; }

.img-responsive-full { display:block; width:100%; height:auto; }

.timeZone { font-weight:300; font-size:0.8em; }
.border-radius { border-radius:6px; }

.loading-background-blk { background: #000 url(../images/loading_spinner_bck.gif) no-repeat center; }
.loading-box {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
    background:#CAD6D9;
	border: 1px dotted #999;
	z-index:2;
}
.loading-box .lds-roller {
	/* see base.css -> .lds-roller */
	position:absolute;
	top:50%; left:50%;
	width:80px; height:80px;
	margin:-40px 0 0 -40px;
}
.loading-box .lds-roller div:after { background:#042974; }

.item-overlay {
    display: -webkit-flex;
    display: flex;
	position:absolute; 
	top:0; left:0; 
	width:100%; height:100%; 
	background:#FED700DD; opacity: 0;
    overflow: auto;
    transition: .5s ease;
	-webkit-align-items: center;
    align-items: center;
	text-decoration:none;
}
.item-overlay-content { width:100%; color:#FFF; }
.item-overlay-icon { font-size:4em; }
.item-overlay-text { padding:1px 15px 30px 15px; font-size:2em; line-height:110%; }
.item-overlay:hover { opacity:1; }

sup { font-size:0.6em; }

.inner-boarder:before { content:""; display:block; position:absolute; top:4px; right: 4px; bottom:4px; left:4px; border:1px solid #FFF; opacity:0.4; }

.box-shadow { box-shadow:0 1px 12px #282828; }
a.box-shadow:hover { box-shadow:0 1px 12px #FFF; }


/* ============================================================
   BUTTONS
   Merged in from core/assets/css/buttons.css on 21 September 2026, which is now deleted.
   They live here because base.css is core's generic-component file — the same place as
   the Back-to-Top widget, the spinners, the result tables and the message boxes below.

   ⚠ THIS IS SHARED by every site. It is the BASE: structure, sizes, rows, states. It does
   NOT own a site's personality — a site supplies colour from its own
   assets/css/buttons.css, linked after this file and before the component stylesheets.

   ------------------------------------------------------------
   THREE RULES THIS SECTION KEEPS TO — break one and sites start needing !important
   ------------------------------------------------------------

   1. PLAIN CLASS SELECTORS ONLY. No `a.btn`, no `button.btn`, no ids, no !important.
      `a.btn` is an element PLUS a class, so it out-ranks a site's own `.btn--gold` on
      any <a> and the site rule loses silently. At one class, a site's variant always
      wins on load order. The bare `button` normalize is the sole exception, and it is
      bare precisely so that it loses to everything.

   2. NEVER STYLE THE BARE <button> ELEMENT. It used to — gold gradient, border, shadows
      and a ► on ::after — and every non-CTA button in every site then had to undo it one
      rule at a time: search fields, popup closes, cookie bars, hamburgers, language
      switchers, lightbox toolbars, carousel dots. A <button> now needs class="btn".

   3. NO ARROW ON .btn. The ► is opt-in via .btn--arrow, which adds the glyph and the
      padding that makes room for it together, so they cannot drift apart. .btn-box is
      the one exception — see below.
   ============================================================ */


/* Shared box model */
.btn,
.btn-box,
.btn-txt,
.btn-row {
    position:relative;              /* the ::after arrows anchor to this */
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
            box-sizing:border-box;
}


/* The bare <button>: NORMALIZE ONLY — see rule 2 above.
   Form controls do not inherit font from their parent, which is the one thing genuinely
   worth fixing globally. Everything else is left to .btn. */
button,
input[type="submit"],
input[type="button"] {
    box-sizing:border-box;
    font:inherit;
    color:inherit;
    cursor:pointer;
}


/* .btn — structure */
.btn {
    display:inline-block;
    padding:1em 2em;
    margin:0;
    border:1px solid transparent;
    border-radius:5px;

    font-size:1em;
    font-weight:600;
    line-height:100%;               /* ⚠ every existing .btn is sized against this */
    text-align:center;
    text-decoration:none;

    cursor:pointer;
    transition:background .2s ease, color .2s ease, border-color .2s ease;
}

/* ---- THE NEUTRAL LOOK — a site's buttons.css replaces this block wholesale ----
   Deliberately kept apart from the structure above so that an override is three
   declarations, not a restatement of the whole button.
   ⚠ .btn-hover is not a typo for :hover — it is added by jQuery on mouseover, so it must
   carry the same colours as :hover or form buttons flicker.
   ⚠⚠ It MUST be written `.btn.btn-hover`, never `.btn-hover` alone:
   core/assets/js/main.js adds the class to `$('form button')` — EVERY button inside a
   form, whatever its classes. On MHL that is the footer search and sidebar search
   buttons, which are not .btn at all; a bare `.btn-hover` would paint them on hover.
   Two plain classes keeps rule 1 and still only fires on a real .btn. */
.btn {
    background:#2c3138;
    color:#fff;
}
.btn:hover,
.btn.btn-hover {
    background:#1b1f24;
    color:#fff;
}
/* ---- end of the colour block ---- */


/* .btn-secondary — the second action, always written WITH .btn: class="btn btn-secondary".
   Added 11 October 2026 (MHL 2.4.1) so a template names a button by its job, not its
   colour: .btn is the main action, .btn-secondary the secondary one, .btn-txt (below) a
   text link. They are the names core's Form and Table classes already print, and the ones
   the admin styles in its own admin-buttons.css (the admin does not load this file).
   ---- THE NEUTRAL LOOK — a site's buttons.css replaces this block too ---- */
.btn-secondary {
    background:#fff;
    border-color:#2c3138;
    color:#2c3138;
}
.btn-secondary:hover,
.btn-secondary.btn-hover {
    background:#2c3138;
    color:#fff;
}
/* ---- end of the colour block ---- */


/* States. :focus-visible (not :focus) so a mouse click does not leave a ring behind. */
.btn:focus-visible,
.btn-box:focus-visible,
.btn-txt:focus-visible {
    outline:2px solid currentColor;
    outline-offset:3px;
}

.btn:active {
    transform:translateY(1px);
}

.btn[disabled],
.btn.is-disabled {
    opacity:.55;
    pointer-events:none;
    cursor:not-allowed;
}


/* .btn--arrow — the ► , opt-in. The glyph and the right padding that makes room for it
   live in the same rule, so a button can never end up with one and not the other. */
.btn--arrow {
    padding-right:2.8em;
}
.btn--arrow::after {
    content:"\25BA";
    position:absolute;
    right:1.4em;
    top:50%;
    transform:translateY(-50%);
    font-size:.75em;
}


/* Sizes — font-size only; .btn's padding is in em, so the whole button scales with it. */
.btn--xxs { font-size:0.8em; }
.btn--xs  { font-size:0.9em; }
.btn--sm  { font-size:0.95em; }
/*  base   font-size:1em  */
.btn--lg  { font-size:1.2em; }
.btn--xl  { font-size:1.4em; }
.btn--xxl { font-size:1.6em; }


/* .btn--block — one button, full width of its container.
   flex rather than display:block so it centres its label on <a> and <button> alike. */
.btn--block {
    display:flex;
    width:100%;
    align-items:center;
    justify-content:center;
}


/* .btn-row — a container for several buttons */
.btn-row {
    display:flex;
    flex-wrap:wrap;
    gap:1em 2em;
    padding:1em 0;
}

.btn-row--center { justify-content:center; }
.btn-row--left   { justify-content:flex-start; }
.btn-row--right  { justify-content:flex-end; }

/* A row that becomes a full-width stack on a narrow screen. */
@media only screen and (max-width:600px) {
    .btn-row--stack {
        flex-direction:column;
        align-items:stretch;
    }
}


/* .btn-box — the outlined button.
   ⚠ It keeps its ► BUILT IN rather than needing .btn--arrow: .btn-box is used ~70 times
   across mwd and mhl and has always carried one, and both sites already reserve the right
   padding for it. Making it opt-in would silently change all 70. */
.btn-box {
    display:inline-block;
    padding:.5em 2.8em .5em 1.5em;
    border-radius:2px;

    font-size:0.9em;
    font-weight:600;
    text-decoration:none;
    text-transform:uppercase;

    cursor:pointer;
    transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.btn-box::after {
    content:"\25BA";
    position:absolute;
    right:1.4em;
    top:48%;
    transform:translateY(-50%);
    font-size:.9em;
}

/* ---- .btn-box colour — a site replaces this block too ---- */
.btn-box {
    background:none;
    border:1px solid rgba(0,0,0,.3);
    color:#111;
}
.btn-box:hover {
    color:#1eb111;
    border-color:#1eb111;
}
/* ---- end of the colour block ---- */


/* .btn-txt — a text link with a trailing arrow.
   This component IS an arrow link, so its → is not opt-in. */
.btn-txt {
    display:inline-block;
    padding-right:1.8em;

    color:#111;
    font-size:.95rem;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
    text-decoration:none;
}
.btn-txt::after {
    content:"\2192";
    position:absolute;
    right:0;
    top:44%;
    transform:translateY(-50%);
    z-index:2;
}


/* Responsive size step-downs */
@media only screen and (max-width:1024px) {
    .btn--lg  { font-size:1.15em; }
    .btn--xl  { font-size:1.3em; }
    .btn--xxl { font-size:1.45em; }
}

@media only screen and (max-width:768px) {
    .btn--lg  { font-size:1.1em; }
    .btn--xl  { font-size:1.2em; }
    .btn--xxl { font-size:1.3em; }
}

/* ---- end of BUTTONS ---- */


/* ------------------------------------------------------------
   Page UP / Back To Top
------------------------------------------------------------ */

#pageUp {
  position:fixed;
  right:24px;
  bottom:24px;

  z-index:999;

  opacity:0;
  visibility:hidden;

  transform:translateY(12px);

  transition:
    opacity .28s ease,
    transform .28s ease,
    visibility .28s;
}

/* visible state */
#pageUp.active {
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

#pageUp a {
  display:flex;
  align-items:center;
  justify-content:center;

  width:56px;
  height:56px;

  border-radius:50%;

  color:#333;
  text-decoration:none;

  background: rgba(255,255,255,.65);

  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);

  box-shadow: 0 10px 28px rgba(0,0,0,.18);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

#pageUp a i {
  	font-size:1rem;
}
#pageUp a img {
  display:block; width:35%;
}

/* hover */
#pageUp a:hover {
	color:#000;
	background: #F5F4BC;
  	transform: translateY(-3px);
  	box-shadow: 0 16px 34px rgba(0,0,0,.22);
}

/* mobile */
@media only screen and (max-width:600px){

  #pageUp {
    right:18px;
    bottom:18px;
  }

  #pageUp a {
    width:50px;
    height:50px;
  }

}


/* ------------------------------------------------------------
   CSS Loader / Spinner -> Roller
------------------------------------------------------------ */
.lds-roller {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 40px 40px;
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  margin: -4px 0 0 -4px;
}
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
  top: 63px;
  left: 63px;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
  top: 68px;
  left: 56px;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
  top: 71px;
  left: 48px;
}
.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
  top: 72px;
  left: 40px;
}
.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
  top: 71px;
  left: 32px;
}
.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
  top: 68px;
  left: 24px;
}
.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
  top: 63px;
  left: 17px;
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 56px;
  left: 12px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* CSS Loader / Spinner -> Ellipsis */
.lds-ellipsis,
.lds-ellipsis div {
  box-sizing: border-box;
}
.lds-ellipsis {
  display: block;
  position: relative;
  width: 80px;
  height: 40px;
  margin:0 auto;
}
.lds-ellipsis div {
  position: absolute;
  top: 15px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}


/* ------- LIST RESULTS ------- */
#main .tblBox {
	position:relative;
	padding:0.5em 0.5em;
	margin:0.5em auto;
	text-align:left;
	font-size:17px;
	font-weight:400;
}
table.listTbl, table.listTblAlt {
	border-collapse:collapse;
	width:100%;
	margin:0;
}
table tr.listTblHd {
	color:#222;
	font-weight:bold;
	border-bottom:2px solid #BBB;
}
table tr.listTblsub-hd {
	font-weight:bold;
	font-style:italic;
	border-bottom:2px solid #BBB;
}
table.listTbl tbody tr {
    cursor: pointer;
}
table.listTbl td.leftLine, 
table.listTblAlt td.leftLine { border-left:1px solid #CCC; }
table.tblLg, .tblLg { font-size:1.05em; }
table.tblMd, .tblMd { font-size:0.9em; }
table.tblSm, .tblSm { font-size:0.85em; }

table.listTbl td, 
table.listTblAlt td { padding:0.4em 5px; }
table.tblMd td 		{ padding:0.3em 4px; }
table.tblSm td 		{ padding:0.2em 3px; }

.claimTbl table tr.listTblHd { border:none; }
.rowOdd  { background:#FFF; }
.rowEven { background:#FAF9DC; }
/*table.listTbl tr:nth-child(odd), 
table.listTblAlt tr:nth-child(odd) { background:#FFF; }
table.listTbl tr:nth-child(even), 
table.listTblAlt tr:nth-child(even) { background:#FAF9DC; }*/
table tr.trLine { height:1px; background:#DDD; }
table tr.trLine td { padding:0; }
table tr td.amountCol { min-width:70px; }
table tr td .tdDate { display:inline-block; width:150px; }
table tr td .tdStatus { text-align:right; display:inline-block; width:100px; padding-left:5px; }

table tr.rowSelected { background:#F5F4BC; color:#000; cursor:pointer;}
table tr.rowViewed   { background:#FFCC99; color:#000; cursor:pointer;}

.row-blk		{ color:#111; }
.row-grn		{ color:#360; }
.row-blu		{ color:#036; }
.row-brn		{ color:#A6611C; }
.row-gry		{ color:#999; }
.row-red		{ color:#C00; }
.row-bold		{ font-weight:500; }
.row-bolder		{ font-weight:700; }

.row-win    	{ color:#360; font-weight:bold; }
.row-de-active  { color:#CCC; font-weight:300; }


/* Message Box — every site. Rebuilt 13 October 2026 (MHL 2.4.5.1, Ben: "restyle .msg-box to
   look better, but simple ... default white, with other colour options, plus .msg-box--error").
   A white box with a coloured bar down its left edge; a variant tints it:
     <div class="msg-box [msg-box--info | --success | --warning | --error]">
       <p class="msg-box__title">…</p>  <p>…</p>  <ul><li>…</li></ul>
       <p class="msg-box__links"><a class="btn-txt" href="…">…</a></p>
     </div>
   The core component templates/components/msg_box.php prints exactly this, escaped.
   ⚠ A SITE RESTYLES IT WITH TOKENS, NEVER BY EDITING THIS BLOCK (the popup.css pattern). The
     plain box reads --msg-box-bg, -line, -accent, -text, -title and -radius, which a site
     declares on :root in its own CSS. Each variant declares its colours on its own class
     below, so a site that wants a different red re-declares the token on that class
     (.msg-box--error { --msg-box-accent:… }) in a file that loads after this one.
   ⚠ The bar is an INSET SHADOW, not border-left: core form.css loads after this file on form
     pages and gives .msg-error a whole 1px border, which would wipe out a border-left.
   ⚠ No !important (the old block had three), so a site's CSS can win.
   ⚠ OLD NAMES STILL WORK: .msg-error = --error and .msg-box-hd = __title (the Errors class
     prints both); .msg-box-grn = --success; .msg-box-orn and .msg-box-amb = --warning;
     .msg-box-gry is now the plain box. On 13 October 2026 nothing in core, admin or the sites
     printed -grn/-orn/-amb/-gry. The old look (red by default, 3px border, dark shadow, and a
     3px border again at 769–1150px, now gone too) is in "base - v1 (pre-2.4.5.1).css". */
#displayMsg { padding-top:1px; padding-bottom:1px; background:#2C4E69; }
.msg-box {
	margin:1.5em 0;
	padding:1em 1.25em 1em 1.5em;
	background:var(--msg-box-bg, #fff);
	color:var(--msg-box-text, #2b3038);
	border:1px solid var(--msg-box-line, #d9dee6);
	border-radius:var(--msg-box-radius, 8px);
	box-shadow:inset 4px 0 0 var(--msg-box-accent, #5b6676);
	text-align:left;
	line-height:1.5;
	font-size:0.95em;
}
.msg-box p { margin:0.35em 0; padding:0; }
.msg-box ul { margin:0.4em 0; padding:0 0 0 1.3em; }
.msg-box li { margin:0.2em 0; padding:0; }
.msg-box > :first-child { margin-top:0; }
.msg-box > :last-child { margin-bottom:0; }
.msg-box .msg-box__title,
.msg-box .msg-box-hd { color:var(--msg-box-title, #1e232b); font-size:1.06em; font-weight:700; }
.msg-box .msg-box__links { display:flex; flex-wrap:wrap; gap:0.4em 1.25em; margin-top:0.75em; }

/* The variants — tinted. Contrast checked 13 October 2026: the text is 12:1 or more on every
   tint, each title 6.9:1 or more, each bar 3.3:1 or more. */
.msg-box--info    { --msg-box-bg:#f1f6fb; --msg-box-line:#cddcec; --msg-box-accent:#2f6f9f; --msg-box-title:#1d4f75; }
.msg-box--success,
.msg-box-grn      { --msg-box-bg:#eff8f2; --msg-box-line:#c9e5d3; --msg-box-accent:#2c7a56; --msg-box-title:#1c573f; }
.msg-box--warning,
.msg-box-orn,
.msg-box-amb      { --msg-box-bg:#fff7e8; --msg-box-line:#f0d9a8; --msg-box-accent:#b97c12; --msg-box-title:#7a4b00; }
.msg-box--error,
.msg-error        { --msg-box-bg:#fdf2f2; --msg-box-line:#f1c5c5; --msg-box-accent:#c62828; --msg-box-title:#a51d1d; }


/* Header Nav Scrolbar */
@media only screen and (min-width: 600px) {
  /* Chrome */
  .scrollBar::-webkit-scrollbar {
	width:4px;
  }
  
  .scrollBar::-webkit-scrollbar-track {
	background-color: #111;
	/*box-shadow: inset 0 0 5px #000; */
	border-radius: 15px;
  }
  
  .scrollBar::-webkit-scrollbar-thumb {
	background-color:#222;
	border-radius: 15px;
	/*border: 1px solid #333;*/
  }
  
  .scrollBar::-webkit-scrollbar-button {
	background-color: #222;
	border-radius: 15px;
  }
  
  .scrollBar::-webkit-scrollbar-thumb:hover {
	background: #333; 
  }
  
  /* IE */
  .scrollBar {
	scrollbar-face-color:#222; 
	scrollbar-shadow-color:#111; 
	scrollbar-highlight-color:#333;
  }
  
  /* FireFox */
  .scrollBar {
	scrollbar-color: #222 #111;
	scrollbar-width: thin;
  }
  
  /* View Scrollbar */
  .scrollBar {
	overflow-y: scroll;
	overflow-x: hidden;
  }
}


@media all and (min-width: 769px) and (max-width: 1024px) {
	:root {
		--rem-font-size: 15px;
	}
}
@media all and (max-width: 768px) {
	:root {
		--rem-font-size: 14px;
	}
	/* table */
	table tr td .tdDate { width:120px; }
	table tr td .tdStatus { width:90px; }
	
	/* logos */
    .logos .img { width:33%; }
	
	/* followUsSideBar */
	#followUsSideBar { display:none; } 
}
@media only screen and (max-width: 700px) {
	
	/* table */
	table.listTbl, 
	table.listTblAlt 			{ line-height: 130%; }
	table.tblLg, .tblLg 		{ font-size:1em; }
	table.tblMd, .tblMd 		{ font-size:0.85em; }
	table.tblSm, .tblSm 		{ font-size:0.8em; }
	table.listTbl td, 
	table.listTblAlt td 		{ padding:0.6em 5px; }
	table.tblMd td 				{ padding:0.5em 4px; }
	table.tblSm td 				{ padding:0.4em 3px; }
	table td.amountCol			{ min-width:20px; }
	table thead tr td .tdDate,
	table thead tr td .tdStatus { display:none; }
	table tr td .tdDate,
	table tr td .tdStatus,
	table tr td .tdFname 		{ display:block; width:auto; font-size:0.8em; font-style:italic; padding-bottom:3px; }
	table tr td .tdStatus 		{ padding:3px 0 0; }
	table.listTbl tbody tr, 
	table.listTblAlt tbody tr 	{ border-bottom:1px solid #DDD; }
}
@media only screen and (max-width: 450px) {
	
	/* tables */
	table.listTbl, 
	table.listTblAlt 	{ font-size:0.8em; }
	table.tblLg, .tblLg { font-size:0.85em; }
	table.tblMd, .tblMd { font-size:0.75em; }
	table.tblSm, .tblSm { font-size:0.7em; }
}
@media only screen and (max-width: 400px) {
	
    .logos .img { width:40%; }
}
@media only screen and (max-width: 374px) {
	
	/* tables */
	table.listTbl, 
	table.listTblAlt 	{ font-size:0.75em; }
	table.tblLg, .tblLg { font-size:0.8em; }
	table.tblMd, .tblMd { font-size:0.7em; }
	table.tblSm, .tblSm { font-size:0.65em; }
}