@charset "UTF-8";

/* All @import rules must come before any other rules per CSS spec. */
@import url("website02112021.css");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600;1,700&family=Inter:wght@400;500;600;700&display=swap");

/* =====================================================================
   PCR EDUCATOR — Bistmar "Distilled" Refresh
   ---------------------------------------------------------------------
   Layers the Distilled visual direction on top of website02112021.css
   without touching any HTML, control IDs, or content authoring.
   Targets the real class hooks emitted by the master page:
     .LoginsLayout, .HeaderRow, #LogoColomn, #QuickLinksColumn,
     .menuwrapper > div, .MenuColumn / .SubmenuColumn .menuDefaultNavWrapper,
     .FooterLayout, .PageTitleRow / .PageTitleLabelRow,
     .RadDock, .ButtonFloat input, .ButtonNoFloat input
   ===================================================================== */


/* =========================================
   1. DESIGN TOKENS  (additive — does NOT replace
      Bistmar's --color1/--color3 from dynamic.css;
      Distilled adds gold + serif/sans tokens.)
   ========================================= */
:root {
  --school-navy:        #0a2540;
  --school-navy-2:      #0e2e4f;
  --school-navy-deep:   #061a30;
  --school-gold:        #c9a86a;
  --school-gold-soft:   #f3eada;
  --school-gold-dark:   #b08e54;
  --warm-cream:         #fdfcf8;
  --ink:                #14202e;
  --muted:              #5a6b7c;
  --line:               #e3e8ee;
  --bg:                 #fafbfc;
  --shadow-sm:          0 1px 2px rgba(10,37,64,0.05);
  --shadow-md:          0 4px 16px rgba(10,37,64,0.08);
  --shadow-lg:          0 12px 40px rgba(10,37,64,0.14);
  --radius:             8px;
  --radius-lg:          14px;
  --container-max:      1320px;
  --serif:              'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:               'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Icon recolor filters. CSS filter cannot take a color value, so these
     chains are the filter-math equivalents of the color tokens above,
     applied to icons painted as background-images. If --school-navy or
     --school-gold-dark ever changes, regenerate the matching chain. */
  --school-navy-filter:      brightness(0) saturate(100%) invert(11%) sepia(43%) saturate(2400%) hue-rotate(196deg) brightness(94%) contrast(96%);
  --school-gold-dark-filter: brightness(0) saturate(100%) invert(58%) sepia(22%) saturate(720%) hue-rotate(2deg) brightness(89%) contrast(86%);
}


/* =========================================
   2. FOUNDATION
   ========================================= */
body {
  font-family: var(--sans) !important;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*:focus-visible {
  outline: 2px solid var(--school-gold);
  outline-offset: 2px;
}


/* =========================================
   3. TOP PORTAL LOGINS BAR  (.LoginsLayout)
   PARENTS / STUDENTS / EMPLOYEES / APPLICATION / BILLING.
   Flip the existing pale-gray strip to navy.
   ========================================= */
.LoginsLayout {
  background-color: var(--school-navy) !important;
  color: #c8d2e0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.LoginsLayout ul li > a {
  background-color: transparent !important;
  color: #c8d2e0 !important;
  font-family: var(--sans) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0 12px !important;
  line-height: 38px !important;
  height: 38px !important;
  transition: color 0.15s, background 0.15s;
  border-radius: 3px;
}

.LoginsLayout ul li > a:hover {
  color: #ffffff !important;
  background-color: rgba(255,255,255,0.08) !important;
  font-weight: 600 !important;
}

/* Hide the "|" separators between portal links (Parents/Students/etc.) */
.LoginsLayout li.MenuDefaultCss a::before,
.LoginsLayout ul li a::before {
  display: none !important;
  content: none !important;
}

/* Logout — gold pill */
.LoginsLayout a[href*="Logout"],
.LoginsLayout a[id*="Logout"],
.LoginsLayout .Logout {
  color: var(--school-gold) !important;
  border: 1px solid rgba(201,168,106,0.4);
  padding: 4px 12px !important;
  border-radius: 4px;
  margin-left: 8px;
  background-color: transparent !important;
}
.LoginsLayout a[href*="Logout"]:hover,
.LoginsLayout a[id*="Logout"]:hover,
.LoginsLayout .Logout:hover {
  background: var(--school-gold) !important;
  color: var(--school-navy) !important;
  border-color: var(--school-gold);
}

/* Admin/Content links sit as direct <body> children at top-left,
   overlapping the navy portal bar. Push them up a touch and keep
   them readable for admins without dominating the strip. */
body > a.AdminLinks,
a.AdminLinks {
  color: rgba(255,255,255,0.55) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.4px !important;
  text-decoration: none !important;
  padding: 4px 8px !important;
  border-radius: 3px;
  line-height: 30px;
  transition: color 0.15s, background 0.15s;
}
body > a.AdminLinks:hover,
a.AdminLinks:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,0.08) !important;
}

/* Logout sits OUTSIDE .LoginsLayout as a stand-alone <a class="Logout">,
   absolutely positioned in the top-right by a production rule that
   tops it at y=-5 (5px above the navy bar). Render as a gold pill
   AND vertically center it inside the 39px navy portal bar. */
a.Logout,
.ButtonNoFloat a.Logout,
a.ButtonNoFloat.Logout {
  color: var(--school-gold) !important;
  background-color: transparent !important;
  border: 1px solid rgba(201,168,106,0.4) !important;
  padding: 4px 12px !important;
  border-radius: 4px !important;
  font-family: var(--sans) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  transition: all 0.15s !important;
  /* Vertically center inside the navy portal bar. The bar is 39px
     tall and the Logout pill renders at 26px tall, so top: 6px
     centers it. Right inset for breathing room from the edge. */
  position: absolute !important;
  top: 6px !important;
  right: 24px !important;
}
a.Logout:hover,
.ButtonNoFloat a.Logout:hover,
a.ButtonNoFloat.Logout:hover {
  background-color: var(--school-gold) !important;
  color: var(--school-navy) !important;
  border-color: var(--school-gold) !important;
}

/* Logout button visibility — PCR's LoginStatus control renders an
   <a class="Logout"> on EVERY page regardless of login state, including
   the public homepage to anonymous visitors. The href is `javascript:
   __doPostBack(...)` in both states, so it isn't a discriminator.
   What actually differs is the rendered text content:
     • Authenticated → `<a class="Logout" href="...">Logout</a>`
     • Anonymous     → `<a class="Logout" href="..."></a>`  (empty)
   ASP.NET's LoginStatus only emits LogoutText when the user is signed in;
   for anonymous users it would emit LoginText, but PCR has that blank,
   so the anchor renders truly empty. `:empty` matches no children at all
   (no text, no whitespace), which is exactly the anonymous render. */
a.Logout:empty,
.ButtonNoFloat a.Logout:empty,
a.ButtonNoFloat.Logout:empty {
  display: none !important;
  visibility: hidden !important;
}

/* Hide the legacy .mobilemenu desktop strip — production renders a
   thin dark-blue bar between the portal row and the white header.
   Show only on mobile where it's actually used as a menu launcher. */
.mobilemenu {
  display: none !important;
}
@media (max-width: 900px) {
  .mobilemenu {
    display: block !important;
  }
}


/* =========================================
   4. HEADER  (.HeaderRow + #LogoColomn + #QuickLinksColumn)
   White band with logo and quick actions.
   ========================================= */
.HeaderRow {
  background: #ffffff !important;
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--line);
  /* Production renders this as display: block with each t-col-* as
     an inline-block aligned to baseline. The logo column is tallest,
     QuickLinksColumn has 24px top/bottom padding (so its UL center
     lands at y≈79), and SeachColumn (38px tall, no padding) ends up
     baseline-aligned at y≈74-93 — visibly DROPPED relative to the
     quick links to its left. Force flex with align-items: center so
     every t-col cell vertically centers on the same axis. */
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}

/* Inside the t-row, neutralize the inline-block / baseline cell
   layout that production uses, so flex alignment governs. */
.HeaderRow > .t-col,
.HeaderRow > [class*="t-col-"] {
  vertical-align: middle !important;
  float: none !important;
}

/* The search column (#SeachColumn — note the production typo) needs
   to land at the SAME vertical center as the quick links to its
   left. Drop any production-applied top offset so flex centering
   wins. Also constrain ALL descendants to fit within the column
   (≈213px) so the inline-flex .searchnew can't blow past its
   t-col-2 and crash into the GIVE NOW link in QLC. */
#SeachColumn,
.SeachColumn,
#QuickLinksColumn ~ #SeachColumn {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end;
  min-width: 0 !important;
  overflow: hidden;
}

/* The search-bar's grandparent is an ASP.NET <asp:Panel> with no
   stable class — only an ID like ctl00_ctl00_..._panel. Production
   leaves it content-sized, so .searchnew (inline-flex, sized to its
   input+button content = ~265px) makes the panel 265px wide too,
   spilling past SeachColumn's 213px. Force every descendant of
   SeachColumn to honor the column's width. */
#SeachColumn *,
.SeachColumn * {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
#SeachColumn > div,
#SeachColumn > div > div,
.SeachColumn > div,
.SeachColumn > div > div {
  width: 100% !important;
}

#LogoColomn,
.LogoColomn {
  display: flex;
  align-items: center;
}
#LogoColomn .logoLink,
.LogoColomn .logoLink {
  background-size: contain !important;
  background-repeat: no-repeat;
  background-position: left center;
  min-height: 80px !important;
  transition: opacity 0.2s, transform 0.2s;
}
#LogoColomn .logoLink:hover,
.LogoColomn .logoLink:hover {
  opacity: 0.92;
  transform: scale(1.015);
}


/* QUICK ACTIONS — refine the right-side cluster.
   #QuickLinksColumn currently holds Summer Camp / Alumni / Calendar /
   Give Now plus the search column. Re-style as the Distilled icon-less
   uppercase buttons. */
#QuickLinksColumn,
.QuickLinksColumn {
  margin: 0 !important;
  padding: 24px 0 !important;
  text-align: right;
}

#QuickLinksColumn ul li > a,
.QuickLinksColumn ul li > a {
  font-family: var(--sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase;
  color: var(--ink) !important;
  padding: 8px 14px !important;
  border-radius: 4px;
  line-height: 1.4 !important;
  height: auto !important;
  transition: color 0.18s, background 0.18s;
  text-decoration: none;
}

#QuickLinksColumn ul li > a:hover,
.QuickLinksColumn ul li > a:hover {
  color: var(--school-gold-dark) !important;
  background: var(--bg);
}

/* Drop the trailing "|" separator after the last quick-link */
#QuickLinksColumn ul li:last-child::after,
.QuickLinksColumn ul li:last-child::after {
  display: none !important;
}

/* Inline SVG icons for the four quick-link buttons. Matched by href so
   they survive label tweaks. Icons are knockout-rendered in --ink and
   recolor to --school-gold-dark on hover to match the link text. */
#QuickLinksColumn ul li > a::before,
.QuickLinksColumn ul li > a::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 7px;
  vertical-align: -3px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.85;
  transition: opacity 0.18s, transform 0.18s;
}
#QuickLinksColumn ul li > a:hover::before,
.QuickLinksColumn ul li > a:hover::before {
  opacity: 1;
  transform: scale(1.08);
}

/* Summer Camp — sun. Bistmar page id 60722.
   Match by both the slug ("Registration") AND the bare page id —
   on the active page, production rewrites the href from
   "../Registration/60722" to just "60722", which would lose the
   icon if we matched by slug only. */
#QuickLinksColumn ul li > a[href*="Registration" i]::before,
.QuickLinksColumn ul li > a[href*="Registration" i]::before,
#QuickLinksColumn ul li > a[href$="/60722"]::before,
#QuickLinksColumn ul li > a[href="60722"]::before,
.QuickLinksColumn ul li > a[href$="/60722"]::before,
.QuickLinksColumn ul li > a[href="60722"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314202e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/></svg>");
}
/* Alumni — graduation cap. Bistmar page id 27981. */
#QuickLinksColumn ul li > a[href*="Alumni" i]::before,
.QuickLinksColumn ul li > a[href*="Alumni" i]::before,
#QuickLinksColumn ul li > a[href$="/27981"]::before,
#QuickLinksColumn ul li > a[href="27981"]::before,
.QuickLinksColumn ul li > a[href$="/27981"]::before,
.QuickLinksColumn ul li > a[href="27981"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314202e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 10L12 5 2 10l10 5 10-5z'/><path d='M6 12v5c0 1 3 3 6 3s6-2 6-3v-5'/></svg>");
}
/* Calendar. Bistmar page id 62105. */
#QuickLinksColumn ul li > a[href*="Calendar" i]::before,
.QuickLinksColumn ul li > a[href*="Calendar" i]::before,
#QuickLinksColumn ul li > a[href$="/62105"]::before,
#QuickLinksColumn ul li > a[href="62105"]::before,
.QuickLinksColumn ul li > a[href$="/62105"]::before,
.QuickLinksColumn ul li > a[href="62105"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314202e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><path d='M16 2v4M8 2v4M3 10h18'/></svg>");
}
/* Give Now — heart. Bistmar page id 62173. */
#QuickLinksColumn ul li > a[href*="Make-A-Gift" i]::before,
#QuickLinksColumn ul li > a[href*="Gift" i]::before,
#QuickLinksColumn ul li > a[href*="Give" i]::before,
.QuickLinksColumn ul li > a[href*="Make-A-Gift" i]::before,
.QuickLinksColumn ul li > a[href*="Gift" i]::before,
.QuickLinksColumn ul li > a[href*="Give" i]::before,
#QuickLinksColumn ul li > a[href$="/62173"]::before,
#QuickLinksColumn ul li > a[href="62173"]::before,
.QuickLinksColumn ul li > a[href$="/62173"]::before,
.QuickLinksColumn ul li > a[href="62173"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314202e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>");
}
/* News (if present, future-proof) — newspaper icon */
#QuickLinksColumn ul li > a[href*="News" i]::before,
.QuickLinksColumn ul li > a[href*="News" i]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314202e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2'/><path d='M18 14h-8M15 18h-5M10 6h8v4h-8z'/></svg>");
}

/* In-header search — unified pill containing the text input and the
   "Go" submit button. Production wraps them in .searchnew with a
   nested .content-wrap.searchnew and outputs:
     <input type="text" class="search-box search-text default">
     <input type="button" class="submit-button search">
   We turn the wrapper into a single rounded pill, strip the input's
   own border, and dock the Go button flush on the right with its own
   right-side rounding — so the input + button read as one control. */
.HeaderRow .searchnew,
#QuickLinksColumn .searchnew,
.QuickLinksColumn .searchnew,
.searchnew {
  /* display: flex (block-level), not inline-flex, so width:100%
     fills the parent panel rather than sizing to content. */
  display: flex !important;
  align-items: stretch;
  background-color: var(--bg) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  overflow: hidden;
  height: 38px;
  box-sizing: border-box;
  /* Cap width so the search doesn't overflow its t-col-2 SeachColumn
     (≈213px) and visually crash into QLC's last quick link (GIVE NOW)
     to its left. With this cap, the input shrinks to fit. */
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.HeaderRow .searchnew:focus-within,
#QuickLinksColumn .searchnew:focus-within,
.QuickLinksColumn .searchnew:focus-within,
.searchnew:focus-within {
  border-color: var(--school-navy) !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(10,37,64,0.08);
}

.searchnew .content-wrap.searchnew,
.searchnew > .content-wrap {
  display: inline-flex !important;
  align-items: stretch;
  width: 100%;
  background: transparent !important;
  border: none !important;
}

/* Text input — borderless, blends into pill. Production stamps a
   magnifier background-image on the input itself; force it off so the
   icon doesn't peek out from behind the absolutely-positioned button. */
.searchnew input.search-box,
.searchnew input.search-text,
.searchnew input[type="text"] {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  background-color: transparent !important;
  background-image: none !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 14px !important;
  margin: 0 !important;
  height: 36px !important;
  line-height: 36px !important;
  outline: none !important;
  box-shadow: none !important;
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
}
.searchnew input.search-box::placeholder {
  color: var(--muted);
  font-style: normal;
  opacity: 1;
}

/* Go button — flush right end of the pill, navy with right-only
   rounding picked up from the parent's overflow:hidden. Production
   sets this button to `position: absolute` so it overlays the input
   from the right AND stamps an INLINE style attribute with
   `width: 30px !important; height: 30px !important; min-width: 30px !important;`.
   Inline !important beats external !important for `width`/`height`,
   so we beat width via `flex: 0 0 64px` (basis sizes the main axis,
   ignoring `width`) and beat height via `min-height` / `max-height`
   (those properties are NOT set inline, so external wins them, and
   the rendered height resolves to max(min-height, height) = 36px). */
.HeaderRow .searchnew input.submit-button:not(.rigActionButton):not(.rltbActionButton):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(#__never__),
.HeaderRow .searchnew input[type="button"]:not(.rigActionButton):not(.rltbActionButton):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(#__never__),
#QuickLinksColumn .searchnew input.submit-button:not(.rigActionButton):not(.rltbActionButton):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(#__never__),
#QuickLinksColumn .searchnew input[type="button"]:not(.rigActionButton):not(.rltbActionButton):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(#__never__),
.searchnew input.submit-button:not(.rigActionButton):not(.rltbActionButton):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(#__never__),
.searchnew input.submit-button.search:not(.rigActionButton):not(.rltbActionButton):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(#__never__),
.searchnew input[type="button"]:not(.rigActionButton):not(.rltbActionButton):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(#__never__) {
  font-family: var(--sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  background-color: var(--school-navy) !important;
  background-image: none !important;
  background: var(--school-navy) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  line-height: 36px !important;
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex: 0 0 64px !important;
  align-self: stretch !important;
  box-shadow: none !important;
  transform: none !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  text-align: center;
}
.HeaderRow .searchnew input.submit-button:hover,
.searchnew input.submit-button:hover,
.searchnew input.submit-button.search:hover,
.searchnew input[type="button"]:not(.rigActionButton):not(.rltbActionButton):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(#__never__):hover {
  background-color: var(--school-gold) !important;
  background: var(--school-gold) !important;
  color: var(--school-navy) !important;
  transform: none !important;
}


/* =========================================
   5. LEVEL 1 — NAVY MAIN MENU  (.menuwrapper > div + .MenuColumn)
   Vertical gradient, gold hairline top, animated gold underline
   on hover and selected.
   ========================================= */
.menuwrapper > div {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.04) 0%,
      rgba(255,255,255,0) 8%,
      rgba(0,0,0,0) 92%,
      rgba(0,0,0,0.18) 100%),
    linear-gradient(180deg,
      var(--school-navy-2) 0%,
      var(--school-navy) 60%,
      var(--school-navy-deep) 100%) !important;
  border-top: 1px solid rgba(201,168,106,0.55) !important;
  position: relative;
}

.MenuColumn .menuDefaultNavWrapper > ul > li {
  position: relative;
}

.MenuColumn .menuDefaultNavWrapper > ul > li > a {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 2.2px !important;
  text-transform: uppercase;
  color: #ffffff !important;
  background-color: transparent !important;
  padding: 20px 24px !important;
  height: auto !important;
  line-height: 1.4 !important;
  position: relative;
  cursor: pointer !important;
  transition: color 0.25s ease, background 0.2s ease;
}

/* Menu anchors are emitted without an href (CMS uses JS click handlers
   bound via onclick), so the UA does not auto-apply the pointer
   cursor. Force it on every menu link so users see they're clickable. */
.MenuColumn a,
.SubmenuColumn a,
.MenuColumn .menuDefaultNavWrapper a,
.SubmenuColumn .menuDefaultNavWrapper a,
.menuwrapper a,
.Submenuwrapper a {
  cursor: pointer !important;
}

/* Animated gold underline — anchored center, inset 22px each side */
.MenuColumn .menuDefaultNavWrapper > ul > li > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--school-gold);
  transform: translateX(-50%);
  transition: width 0.28s ease;
}

.MenuColumn .menuDefaultNavWrapper > ul > li > a:hover {
  color: var(--school-gold) !important;
  background-color: transparent !important;
}
.MenuColumn .menuDefaultNavWrapper > ul > li > a:hover::after {
  width: calc(100% - 44px);
}

.MenuColumn .menuDefaultNavWrapper > ul > li > a.MenuDefaultSelectedNodeCss {
  color: var(--school-gold) !important;
  background: rgba(0,0,0,0.22) !important;
}
.MenuColumn .menuDefaultNavWrapper > ul > li > a.MenuDefaultSelectedNodeCss::after {
  width: calc(100% - 44px);
  height: 3px;
}

/* Hover dropdown popovers — clean and on-brand */
.MenuColumn .menuDefaultNavWrapper ul ul {
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg) !important;
  padding: 12px !important;
  min-width: 240px;
}
.MenuColumn .menuDefaultNavWrapper ul ul li {
  padding: 0 !important;
}
.MenuColumn .menuDefaultNavWrapper ul ul li a {
  font-family: var(--sans) !important;
  color: var(--ink) !important;
  font-size: 13.5px !important;
  text-transform: none !important;
  letter-spacing: 0.2px !important;
  padding: 9px 14px !important;
  border-radius: 6px;
  display: block !important;
}
.MenuColumn .menuDefaultNavWrapper ul ul li:hover a {
  color: var(--school-navy) !important;
  background: var(--bg) !important;
}


/* =========================================
   6. LEVEL 2 — SUB-MENU  (.SubmenuColumn)
   Warm off-white bar, thin gold hairline at top, thinner gold
   underline on hover/active.
   ----------
   Note: the demo's italic-serif "Quick Links /" label is content,
   not styling — it can't be CSS-only on a multi-page master.
   A small decorative gold accent stands in for the spine.
   ========================================= */
.SubmenuColumn {
  position: relative;
}

.SubmenuColumn,
.SubmenuColumn .menuDefaultNavWrapper {
  background: var(--warm-cream) !important;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(10,37,64,0.035);
}

/* Hide the L2 sub-bar entirely when its menu has no items
   (homepage renders an empty SubmenuColumn that otherwise leaves
   a thin warm-cream/gold hairline strip below the navy nav). */
.Submenuwrapper:has(.menuDefaultNavWrapper > ul:empty),
.SubmenuColumn:has(.menuDefaultNavWrapper > ul:empty) {
  display: none !important;
}

/* Gold hairline at top — continuous spine with L1's gold rule */
.SubmenuColumn::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201,168,106,0.18) 30%,
    rgba(201,168,106,0.18) 70%,
    transparent 100%);
  z-index: 2;
}

.SubmenuColumn .menuDefaultNavWrapper > ul {
  align-items: center;
}

.SubmenuColumn .menuDefaultNavWrapper > ul > li {
  position: relative;
  border: none !important;
}

.SubmenuColumn .menuDefaultNavWrapper > ul > li > a {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px !important;
  text-transform: none !important;
  color: var(--ink) !important;
  background-color: transparent !important;
  padding: 14px 18px !important;
  line-height: 1.4 !important;
  height: auto !important;
  transition: color 0.2s ease;
  position: relative;
}

/* Thin gold underline */
.SubmenuColumn .menuDefaultNavWrapper > ul > li > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 0;
  height: 2px;
  background: var(--school-gold);
  transform: translateX(-50%);
  transition: width 0.25s ease;
}

.SubmenuColumn .menuDefaultNavWrapper > ul > li > a:hover {
  color: var(--school-navy) !important;
  background: transparent !important;
}
.SubmenuColumn .menuDefaultNavWrapper > ul > li > a:hover::after {
  width: calc(100% - 28px);
}

.SubmenuColumn .menuDefaultNavWrapper > ul > li > a.MenuDefaultSelectedNodeCss {
  color: var(--school-navy) !important;
  font-weight: 600 !important;
  background: transparent !important;
}
.SubmenuColumn .menuDefaultNavWrapper > ul > li > a.MenuDefaultSelectedNodeCss::after {
  width: calc(100% - 28px);
}


/* =========================================
   7. PAGE TITLE  (only the heading text — never the row container,
   because .PageTitleRow on the homepage hosts the hero gallery and
   adding row-level padding/centering breaks the hero layout.
   We restrict styling to the title elements themselves and use
   .PageTitleLabelRow (which IS title-only) for the underline ornament.
   ========================================= */
.PageTitleRow h1,
.PageTitleRow h2,
.PageTitleRow .Title,
.PageTitleColumn h1,
.PageTitleColumn h2,
.PageTitleColumn span,
.PageTitleLabelRow h1,
.PageTitleLabelRow h2,
.PageTitleLabelColumn h1,
.PageTitleLabelColumn h2,
.PageTitleLabelColumn span {
  font-family: var(--serif) !important;
  font-size: 48px !important;
  font-weight: 600 !important;
  color: var(--school-navy) !important;
  letter-spacing: -0.5px !important;
  text-transform: none !important;
  line-height: 1.1 !important;
  margin: 0 !important;
}

/* Underline ornament — only on the dedicated label row, never on
   .PageTitleRow (which on the homepage holds the hero gallery). */
.PageTitleLabelRow {
  text-align: center;
  padding: 48px 0 24px 0;
  position: relative;
}
.PageTitleLabelRow::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  background: var(--school-gold);
  margin: 18px auto 0 auto;
}


/* =========================================
   8. CARDS  (.RadDock — Statement / Donations /
                Apply Online tiles on the parent portal)
   ----
   Telerik inline-sizes RadDock to its content width (~546px), which
   is wider than the .profile/.profileright RadDockZone columns
   (~488px). Without box-sizing: border-box and max-width: 100%, the
   left-column cards spill ~58px into the right column, visually
   overlapping the right cards. Constrain to the column.
   ========================================= */
.RadDockZone {
  position: relative;
  overflow: visible;
}

.RadDock,
.RadDock_Default,
.RadDock_Telerik {
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 28px !important;
  margin-bottom: 20px;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  transition: box-shadow 0.2s, transform 0.2s;
}
.RadDock:hover,
.RadDock_Default:hover,
.RadDock_Telerik:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px);
}

/* Telerik renders the dock chrome as nested tables (.rdTable / .rdTop /
   .rdCenter). Force these to honor parent width so the title bar
   doesn't push the card past its column. */
.RadDock .rdTable,
.RadDock .rdTop,
.RadDock .rdCenter,
.RadDock .rdContent {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.RadDock h1,
.RadDock h2,
.RadDock h3,
.RadDock .rdTitle,
.RadDock_Default .rdTitle {
  font-family: var(--serif) !important;
  font-size: 26px !important;
  color: var(--school-navy) !important;
  font-weight: 600 !important;
  letter-spacing: -0.2px;
  margin: 0 0 18px 0 !important;
  background: transparent !important;
  border: none !important;
}


/* =========================================
   9. BUTTONS
   Production palette uses teal --color3 / orange-red --color4 across
   <input> buttons AND <a class="button"> / <a class="Pay"> anchors.
   Repaint everything to navy primary + gold accent.
   ========================================= */

/* Primary — navy filled.
   Compact size: 6/16 padding + 13px / line-height 1.3 yields ~32px
   total height (down from 43px). Sits naturally next to the 28px
   form controls (selects, inputs) without dominating the row. */
.ButtonFloat input,
.ButtonNoFloat input,
a.button,
.button,
input.button,
input[type="submit"],
input[type="button"],
.RadButton_Default .rbDecorated,
.rbButton .rbDecorated {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.3px !important;
  background-color: var(--school-navy) !important;
  background-image: none !important;
  border: 1px solid var(--school-navy) !important;
  color: #ffffff !important;
  padding: 6px 16px !important;
  border-radius: 999px !important;
  text-transform: none !important;
  text-decoration: none !important;
  box-shadow: var(--shadow-sm);
  transition: background 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s !important;
  display: inline-block;
  cursor: pointer;
}
.ButtonFloat input:hover,
.ButtonNoFloat input:hover,
a.button:hover,
.button:hover,
input.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.RadButton_Default:hover .rbDecorated,
.rbButton:hover .rbDecorated {
  background-color: var(--school-navy-2) !important;
  color: #ffffff !important;
  border-color: var(--school-navy-2) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Pay / payment-action buttons — gold accent so they read as the
   transactional CTA against the navy primary. */
a.Pay,
.Pay,
a[class*="Pay"]:not(.PayPal),
.PayButton input,
input.Pay {
  background-color: var(--school-gold) !important;
  background-image: none !important;
  border: 1px solid var(--school-gold) !important;
  color: var(--school-navy) !important;
  font-weight: 700 !important;
}
a.Pay:hover,
.Pay:hover,
a[class*="Pay"]:not(.PayPal):hover,
.PayButton input:hover,
input.Pay:hover {
  background-color: var(--school-gold-dark) !important;
  border-color: var(--school-gold-dark) !important;
  color: #ffffff !important;
}

/* Compact Pay buttons inside data-table cells. The Donations table
   gives the action column only ~90px and is wrapped in a div with
   overflow:auto, so the standard padding (11px 22px → ~71px wide)
   gets clipped past the parent's right edge. The Pay anchor is
   emitted as <a class="button" href="javascript:__doPostBack(...lbtnPay...)">,
   so target it by the lbtnPay token in the href. Also target by Pay
   class for any non-LinkButton variants. */
.RadDock table a.button[href*="lbtnPay" i],
.RadDock table a.button[href*="btnPay" i],
.RadDock table a.button[href*="Payment" i],
.rdContent table a.button[href*="lbtnPay" i],
.rdContent table a.button[href*="btnPay" i],
table a.button[href*="lbtnPay" i],
table a.button[href*="btnPay" i],
.RadDock table a.button.Pay,
.RadDock table a.Pay.button,
.RadDock table a[class*="Pay"]:not(.PayPal),
table a.button.Pay {
  padding: 4px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  border-radius: 999px !important;
  white-space: nowrap;
  line-height: 1.4 !important;
}

/* Also force the in-card data-table wrapper to NOT clip the action
   column. Telerik's RadGrid wraps the table in nested divs with
   overflow:auto (.GridViewWrap and an unnamed inner div) for
   horizontal scroll; the Pay column ends up clipped by the wrap's
   right edge. Allow visible overflow on these wrappers when they
   contain a Pay link, so the small action button remains visible
   without forcing a scrollbar. */
.GridViewWrap:has(a.button[href*="lbtnPay" i]),
.GridViewWrap:has(a.button[href*="btnPay" i]),
.RadDock .GridViewWrap:has(a.button[href*="Pay" i]),
.rdContent .GridViewWrap:has(a.button[href*="Pay" i]),
.rdContent > div:has(.GridViewWrap a.button[href*="Pay" i]),
.RadDock .rdContent:has(a.button[href*="lbtnPay" i]),
.RadDock .rdContent:has(a.button[href*="btnPay" i]) {
  overflow: visible !important;
  overflow-x: visible !important;
}
/* And the unnamed inner wrapper sibling. Use general :has() on any
   div ancestor of the Pay link with overflow:auto. */
.RadDock div:has(> .GridViewWrap a.button[href*="lbtnPay" i]),
.RadDock div:has(> table a.button[href*="lbtnPay" i]) {
  overflow: visible !important;
  overflow-x: visible !important;
}

/* The .RadDock card itself has overflow:hidden in production/Telerik
   styles, which would clip the Pay button at the card's right edge
   if the table tried to overflow. We deliberately leave that
   overflow:hidden alone so the table is forced to fit INSIDE the
   card. Instead, we tame the table layout so Pay always lands
   inside the card boundary:
     1. Force table to a hard width = 100% with fixed layout, so
        columns share the available card width instead of expanding
        to content.
     2. Allow text in cells to wrap (production may have
        white-space:nowrap on td — override).
     3. Compress cell padding so 5 columns + Pay button fit. */
.RadDock .GridViewWrap:has(a.button[href*="lbtnPay" i]) table,
.RadDock .GridViewWrap:has(a.button[href*="btnPay" i]) table,
.rdContent .GridViewWrap:has(a.button[href*="Pay" i]) table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
}
.RadDock .GridViewWrap:has(a.button[href*="lbtnPay" i]) td,
.RadDock .GridViewWrap:has(a.button[href*="btnPay" i]) td,
.rdContent .GridViewWrap:has(a.button[href*="Pay" i]) td {
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  padding: 6px 6px !important;
  font-size: 12px !important;
}
.RadDock .GridViewWrap:has(a.button[href*="lbtnPay" i]) th,
.RadDock .GridViewWrap:has(a.button[href*="btnPay" i]) th,
.rdContent .GridViewWrap:has(a.button[href*="Pay" i]) th {
  padding: 6px 6px !important;
  font-size: 9.5px !important;
  letter-spacing: 1px !important;
}
/* The Pay anchor cell still needs nowrap so the button itself
   doesn't wrap. Compact in-cell button. */
.RadDock .GridViewWrap td:has(a.button[href*="lbtnPay" i]),
.RadDock .GridViewWrap td:has(a.button[href*="btnPay" i]) {
  white-space: nowrap !important;
  width: 1% !important;            /* table-shrink: cell sizes to its content */
  text-align: right !important;
}
.RadDock table td:has(a.button[href*="lbtnPay" i]),
.RadDock table td:has(a.button[href*="btnPay" i]),
.rdContent table td:has(a.button[href*="lbtnPay" i]) {
  overflow: visible !important;
  white-space: nowrap !important;
}

/* Status pills — production uses `.status-pill` with status-modifier
   classes (.action, .complete, .pending, .declined, .accepted, etc.)
   that paint each status a different color so users can differentiate
   at a glance. We must NOT flatten all pills to a single color.
   ----
   Strategy: only repaint `.status-pill.action` (the actionable CTA
   pills like "Not Completed" / "Select" / "Pay") to navy, since those
   are buttons users click. Leave every other status modifier with
   production's color so status differentiation is preserved. We also
   apply shared typography/shape so all pills share a visual language
   while keeping their distinct background colors. */

/* Shared pill shape & typography — applies to ALL status pills,
   uses NO background/color so production status colors win.
   Width is left to production (do not constrain — different pages
   render the pill in different layouts and overriding width
   regresses some). */
a.status-pill,
.status-pill {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  text-transform: none !important;
  text-decoration: none !important;
  padding: 7px 16px !important;
  border-radius: 999px !important;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s !important;
  box-shadow: var(--shadow-sm);
  border: none !important;
}

/* ONLY action pills (clickable CTAs) get the navy repaint.
   Other status modifiers (.complete, .pending, .declined, etc.) keep
   their production colors so status differentiation is preserved.
   Use higher-specificity selectors so the §2b teal-link override
   (.RadDock a / .contentnews a etc., color: navy) doesn't paint
   the action-pill text the same color as its navy background. */
a.status-pill.action,
.status-pill.action,
.RadDock a.status-pill.action,
.contentnews a.status-pill.action,
.GridViewWrap a.status-pill.action,
.styledDivision a.status-pill.action,
.action-status a.status-pill.action {
  background-color: var(--school-navy) !important;
  background-image: none !important;
  background: var(--school-navy) !important;
  color: #ffffff !important;
  cursor: pointer;
}
a.status-pill.action:hover,
.status-pill.action:hover {
  background-color: var(--school-navy-2) !important;
  background: var(--school-navy-2) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Production sets a.button (the Pay anchor) to a teal linear-gradient
   background-image. We need to crush that gradient in addition to the
   background-color override above. Re-assert with the gold accent
   for Pay specifically, regardless of which rule wins specificity. */
a.button,
a.button[class] {
  background-image: none !important;
  background: var(--school-navy) !important;
  background-color: var(--school-navy) !important;
}
a.button.Pay,
a.Pay.button,
a.button[href*="ay" i][href*="ent" i],
a.button[class~="Pay"] {
  background-image: none !important;
  background: var(--school-gold) !important;
  background-color: var(--school-gold) !important;
  color: var(--school-navy) !important;
  border-color: var(--school-gold) !important;
}
a.button.Pay:hover,
a.Pay.button:hover {
  background: var(--school-gold-dark) !important;
  background-color: var(--school-gold-dark) !important;
  color: #ffffff !important;
  border-color: var(--school-gold-dark) !important;
}

/* "Click Here to Register a New Child" inside the Registration card
   is emitted as a plain <a> with no class, so it renders in the
   production teal hyperlink color. Promote it to a navy CTA button
   using the href pattern (New-Student) so it reads as a primary
   action rather than a stray inline link. Same treatment applies to
   any other in-card CTA links we want to elevate. */
.RadDock .rdContent a[href*="New-Student" i],
.RadDock .rdContent a[href*="newstudent" i],
.RadDock .rdContent a[href*="New-Student" i]:visited,
.rdContent a[href*="New-Student" i] {
  display: inline-block;
  font-family: var(--sans) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  color: #ffffff !important;
  background-color: var(--school-navy) !important;
  background-image: none !important;
  background: var(--school-navy) !important;
  border: 1px solid var(--school-navy) !important;
  padding: 11px 22px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  text-transform: none !important;
  margin: 4px 0 !important;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.RadDock .rdContent a[href*="New-Student" i]:hover,
.RadDock .rdContent a[href*="newstudent" i]:hover,
.rdContent a[href*="New-Student" i]:hover {
  background-color: var(--school-navy-2) !important;
  background: var(--school-navy-2) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Generic sweep — any anchor that production has painted with the
   teal gradient (linear-gradient(...,#0099CC...)) gets navy override
   via attribute fallback for inline styles. */
a[style*="0099CC" i],
a[style*="0099cc"],
[style*="linear-gradient"][class*="button"] {
  background-image: none !important;
  background-color: var(--school-navy) !important;
  color: #ffffff !important;
}

/* Specificity-matched override for production's gbwebsite rule:
     input[type="submit"]:not(.rigActionButton):not(.rltbActionButton)
       :not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast)
   (specificity 0,7,1) which paints submit buttons with a teal
   linear-gradient AND locks them to height/line-height: 22px with
   box-sizing: border-box (which crushes the text into ~6px when our
   padding is added). Match the selector exactly so source-order wins,
   then add one more :not() to push specificity to (0,8,1) and reset
   the box model so padding determines size. */
input[type="submit"]:not(.rigActionButton):not(.rltbActionButton):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(#__never__),
input[type="button"]:not(.rigActionButton):not(.rltbActionButton):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(#__never__),
.button-flat-primary:not(.rigActionButton):not(.rltbActionButton):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(#__never__) {
  background-color: var(--school-navy) !important;
  background-image: none !important;
  background: var(--school-navy) !important;
  border: 1px solid var(--school-navy) !important;
  color: #ffffff !important;
  /* Compact size: 6/16 padding + 13px / line-height 1.3 yields ~32px
     total height (down from 43px). Sits naturally next to the 28px
     form controls (selects, inputs) without dominating the row. */
  padding: 6px 16px !important;
  border-radius: 999px !important;
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.3px !important;
  text-transform: none !important;
  box-shadow: var(--shadow-sm) !important;
  cursor: pointer;
  height: auto !important;
  min-height: 0 !important;
  box-sizing: content-box !important;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s !important;
}
input[type="submit"]:not(.rigActionButton):not(.rltbActionButton):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(#__never__):hover,
input[type="button"]:not(.rigActionButton):not(.rltbActionButton):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(#__never__):hover,
.button-flat-primary:not(.rigActionButton):not(.rltbActionButton):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(#__never__):hover {
  background-color: var(--school-navy-2) !important;
  background-image: none !important;
  background: var(--school-navy-2) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md) !important;
}

/* Anchor-variant of the box-model reset above. PCR's main12152025.css
   (CORS-blocked, can't enumerate from the client) locks `<a class="button">`
   to ~24px height with `box-sizing: border-box`, which crushes the text
   into ~2px of vertical content area when our 11px vertical padding is
   applied (visible on Applicant-Profile > Events: "Schedule" anchors).
   Reset to auto-height + content-box so padding is additive. Excludes
   `.badge` (which has its own compact size rule at §9d2) and Telerik's
   internal grid/pager action classes. */
a.button:not(.badge):not(.rigActionButton):not(.rltbActionButton):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(#__never__) {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  line-height: 1.4 !important;
  box-sizing: content-box !important;
}

/* Pay submit buttons specifically — gold accent for transactional CTA */
/* Pay-specific override must outspecify the §9 navy override
   (`input[type="submit"]:not(...x7)` = specificity 0,8,1 — actually
   1,7,1 with the trailing :not(#__never__)). Match the same :not()
   chain so attribute selectors push us past it. */
input[type="submit"][id*="btnPay" i]:not(.rigActionButton):not(.rltbActionButton):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(#__never__),
input[type="submit"][name*="btnPay" i]:not(.rigActionButton):not(.rltbActionButton):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(#__never__),
input[type="submit"][value="Pay" i]:not(.rigActionButton):not(.rltbActionButton):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(#__never__) {
  background-color: var(--school-gold) !important;
  background-image: none !important;
  background: var(--school-gold) !important;
  border: 1px solid var(--school-gold) !important;
  color: var(--school-navy) !important;
  font-weight: 700 !important;
  /* Match the compact in-table Pay anchor (`a.button[href*="lbtnPay"]`)
     so the <input type="submit" id="..._btnPay"> variant and the
     <a class="button" id="..._lbtnPay"> variant render at the same
     size. Same padding/font/line-height as the rule at line ~945. */
  padding: 4px 12px !important;
  font-size: 12px !important;
  letter-spacing: 0.2px !important;
  line-height: 1.4 !important;
  min-height: auto !important;
}
input[type="submit"][id*="btnPay" i]:not(.rigActionButton):not(.rltbActionButton):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(#__never__):hover,
input[type="submit"][name*="btnPay" i]:not(.rigActionButton):not(.rltbActionButton):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(#__never__):hover,
input[type="submit"][value="Pay" i]:not(.rigActionButton):not(.rltbActionButton):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(#__never__):hover {
  background-color: var(--school-gold-dark) !important;
  background: var(--school-gold-dark) !important;
  border-color: var(--school-gold-dark) !important;
  color: #ffffff !important;
}

/* Make-A-Gift donations totals block (Subtotal / Processing Fee / Total).
   PCR ships `.donationsTotalAmount` as a `.formDiv` (`float: left`,
   natural width); we keep its float and width unchanged. The only
   layout requirement is that the totals block always occupies its
   own row — never floated beside another `.formDiv`, whether that
   sibling comes BEFORE in DOM (e.g. Frequency moved above) or AFTER
   (subsequent form fields). Two-direction guard:
     • `clear: both` on the totals block so it starts a new line
       below any preceding floated siblings.
     • `clear: both` on every following `.formDiv` so they start a
       new line below the totals block. */
.donationsTotalAmount {
  clear: both !important;
}
.donationsTotalAmount ~ .formDiv {
  clear: both !important;
}
/* Inside `.donationsTotalAmount`, PCR emits a `<div class="formDivHeight">`
   empty 52px spacer as the first child to vertically align the totals
   block with an adjacent floated `.formDiv` (e.g. when the design had
   Frequency to its right). Now that we clear the totals block onto its
   own row, that spacer just leaves a visible gap between the preceding
   row (Frequency, etc.) and the first totals row (Annual Fund). Collapse
   it. */
.donationsTotalAmount > .formDivHeight {
  display: none !important;
}

/* RadNumericMoney wrapper width — addresses the missing-CSS-hook problem.
   Source flow:
     1) `WebSite.AppCode.RadNumericMoney` ctor (RadNumericMoney.cs:23) sets
        `this.Width = new Unit(100, UnitType.Percentage)`.
     2) Telerik renders the value into an inline `style="width:..."` on
        `<span class="riSingle RadInput RadInput_Silk InputNumericMoneyTextBox">`,
        but it converts the percentage into an odd fixed pixel value as
        part of its skin sizing.
     3) ContentMaster.Master's `RemoveWidthsNumericMoneyTextBox` JS strips
        that inline style and adds the class `InputNumericMoneyTextBox`,
        leaving width up to CSS — but no CSS rule for the class ever
        existed, so the wrapper fell back to Telerik's default skin width
        (~186px), 10px narrower than the regular form fields (~196px).
   The class is the developer's intended CSS hook. Wire it. */
.InputNumericMoneyTextBox {
  width: 100% !important;
}


/* =========================================
   9. MAKE-A-GIFT PAGE — apply PCR_Make_A_Gift_Redesign_Proposal.html
   styling, scoped to the right sidebar only. Form layout (label
   widths, input widths, alignment) is intentionally NOT touched.
   ========================================= */

/* The "How to Give" navy callout in the right sidebar is rendered as
   <article1>...</article1> (a non-standard HTML tag used as a unique
   styling hook by the page author). It carries the navy background.
   Style its h4 subheadings ("Online", "Drop off or Mail", "In-Kind
   Gifts") as gold uppercase chips per the redesign proposal. */
article1 h4 {
  color: var(--school-gold) !important;
  font-family: var(--sans, 'Inter', sans-serif) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  margin: 18px 0 8px 0 !important;
}
/* Body copy inside the callout — keep white-ish, soften italic asides. */
article1 p {
  color: rgba(255,255,255,0.82) !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  margin: 0 0 8px 0 !important;
}
article1 em,
article1 i {
  color: rgba(255,255,255,0.65) !important;
  font-style: italic !important;
}
/* The callout's own h3 ("How to Give") — keep serif navy-on-white look
   inside the navy bg by overriding to white. */
article1 h3 {
  color: #ffffff !important;
  font-family: var(--serif, 'Cormorant Garamond', serif) !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  margin: 0 0 6px 0 !important;
  letter-spacing: -0.2px !important;
}

/* Contact card in the right sidebar (.ThirdColumn). PCR emits the
   contact-row labels as <td class="DetailsHeaderStyle">Name</td> /
   Position / Phone / Email and values in a sibling td. Per the
   proposal, labels render as italic Cormorant Garamond gold accents.
   Scope to .ThirdColumn so the Family Information panel on the
   parent portal Overview (which uses the same DetailsHeaderStyle
   class) is unaffected. */
.ThirdColumn .DetailsHeaderStyle,
.ThirdColumn span.InputLabel {
  font-family: var(--serif, 'Cormorant Garamond', serif) !important;
  font-style: italic !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--school-gold-dark, #b08e54) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
/* Contact card values keep the body ink color. */
.ThirdColumn .DetailsValueStyle,
.ThirdColumn span.InputLabel + span,
.ThirdColumn td:not(.DetailsHeaderStyle) {
  color: var(--ink, #14202e) !important;
  font-family: var(--sans, 'Inter', sans-serif) !important;
  font-style: normal !important;
}
/* Email links in the contact card — navy with subtle dotted underline
   (matches the proposal's Contact card style). */
.ThirdColumn a[href^="mailto:"] {
  color: var(--school-navy) !important;
  border-bottom: 1px dotted var(--line) !important;
  text-decoration: none !important;
}


/* =========================================
   10. UNIFIED ENTRY-FIELD STYLING (site-wide)
   ----------------------------------------
   Discriminator: PCR's .ascx files explicitly set CssClass="Input*" on
   form-field controls. The same Telerik wrappers without that hook are
   grid cells (gradebook, report-card-marks letter grades, RadGrid
   filter rows) — those must stay tight and unstyled.
   Inventory covered:
     • <input type="text|email|password|tel|search|url|number|date">
     • <select>, <textarea>
     • Hooks: .InputTextBox, .InputTextBoxMultiLine, .InputTextBoxComment,
       .InputComboBox, .InputDropDownList, .InputNumericTextBox,
       .InputNumericMoneyTextBox, .InputMaskedTextBox,
       .InputMaskedTextBoxWrapper, .InputDatePicker
     • Telerik wrappers (when .Input* hook present):
       .RadInput, .RadComboBox, .RadPicker (RadDate/DateTimePicker),
       .RadUpload / .RadAsyncUpload (Silk and WebBlue skins)
     • RadEditor (separate lighter rule — outer frame only)
   Spec — matches PCR_Make_A_Gift_Redesign_Proposal.html:
     border: 1px solid var(--line); border-radius: 6px;
     background: #fff; color: var(--ink); font: 14px/18px Inter;
     padding: 4px 10px; height: 28px;
     focus → border-color navy + 3px navy ring.
   Width: 220px standalone; 100% inside .formDiv .inputDiv (existing
   nesting convention preserved).
   ========================================= */

/* §10.1a — Telerik wrappers (outer frame only).
   These are container elements (<span>/<table>) — interior layout is
   driven by Telerik's own internal cells (input cell + arrow/calendar
   trigger). We set ONLY the visual frame: border, radius, white bg.
   No padding here — Telerik's interior layout takes the full wrapper
   width, and adding padding would crush the inner input in tight TD
   grid cells (the assessment-overrides table).

   NOTE: PCR sometimes ships RadNumericTextBox / RadDatePicker controls
   without setting a `CssClass="Input*"` hook (e.g. `radPossiblePoints`
   on Class Assessment Details). Those render with bare Telerik skin
   classes — `riSingle RadInput RadInput_Silk` for inputs, or
   `RadPicker RadPicker_Silk` for date pickers. We match those too so
   they participate in the unified look. (Inline grid letter-grade
   combos on Report Card Marks use `RadComboBox.RadComboBox_Silk`
   without the riSingle/RadInput class, so they're naturally excluded.) */
.InputComboBox,
.InputNumericTextBox,
.InputNumericMoneyTextBox,
.InputMaskedTextBox,
.InputMaskedTextBoxWrapper,
.InputDatePicker,
.RadUpload, .RadAsyncUpload,
.ruFileWrap.ruStyled,
.riSingle.RadInput,
.RadPicker.RadPicker_Silk,
.RadComboBox.RadComboBox_Silk {
  box-sizing: border-box !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  background: #fff !important;
  font-family: var(--sans, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif) !important;
  font-size: 14px !important;
  color: var(--ink, #14202e) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  /* Suppress the native scrollbar that .RadPicker_Silk's default
     `overflow: hidden auto` paints when its inner table is 1-2px
     taller than the 28px wrapper. The scrollbar's up/down arrows
     read as ghost "spinner buttons" next to the calendar icon.
     RadComboBox_Silk has the same default — but DO NOT clip its
     children: the open dropdown panel (`div.rcbSlide`) is rendered
     as a positioned-absolute child, so we suppress only the visible
     scrollbar via ::-webkit-scrollbar (see override #1 in §13.0). */
  overflow: hidden !important;
}
/* RadComboBox_Silk needs overflow: visible for the popup dropdown panel
   (`div.rcbSlide`) to render outside the combo's box. Override the
   `overflow: hidden` from the rule above for combos only — and rely on
   the `::-webkit-scrollbar { display: none }` rule (§13.0 override #1)
   to hide the residual scrollbar that would otherwise show.

   UNIFIED CHEVRON: Native <select> elements use the browser's built-in
   chevron (Chrome paints a thin V-shape on the right). Telerik combos
   ship with a sprite-image arrow loaded from WebResource.axd that looks
   different — a solid filled triangle. To make every dropdown in the
   portal use the SAME chevron treatment as the Status / native select
   dropdowns, paint a clean SVG chevron as the combo's background-image
   on the right side, and hide Telerik's sprite arrow underneath. The
   click target on the arrow cell is preserved so the dropdown opens
   normally — the SVG is purely visual. */
.RadComboBox.RadComboBox_Silk {
  overflow: visible !important;
  height: 28px !important;       /* match native <select> 28px height */
  /* Chevron tuned to mimic Chrome's native <select> arrow:
     ~10px wide, 1.5px stroke, butt-cap V-shape, dark slate color,
     positioned ~6px from right edge (Chrome's default offset). */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%23222' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='miter'><path d='M2 4l3 3 3-3'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 6px center !important;
  background-color: #fff !important;
  padding-right: 22px !important;  /* reserve space for the chevron */
}
/* Clamp the inner Telerik table to the new 28px height too. */
.RadComboBox.RadComboBox_Silk > table,
.RadComboBox.RadComboBox_Silk > table tbody,
.RadComboBox.RadComboBox_Silk > table tr {
  height: 28px !important;
}
/* Visible text inside the combo (the <input class="rcbInput"> that
   shows "A-", "B+", "**", etc.) — match the native <select> typography:
   Inter regular 14px, navy. NO italic, NO Cormorant. The Status
   dropdown is the reference. */
.RadComboBox.RadComboBox_Silk input.rcbInput {
  font-family: var(--sans, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  color: var(--ink, #14202e) !important;
  padding-left: 10px !important;
  padding-right: 4px !important;
  text-align: left !important;
}
.RadComboBox.RadComboBox_Silk::-webkit-scrollbar,
.RadComboBox.RadComboBox_Silk::-webkit-scrollbar-button {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
/* Hide Telerik's sprite arrow image so only our unified SVG chevron
   shows. Keep the <a> element in the DOM so its click handler still
   fires when the user clicks the arrow cell. */
.RadComboBox.RadComboBox_Silk .rcbArrowCell a {
  background-image: none !important;
  visibility: hidden !important;
}
/* Reserve space on the right for the SVG chevron and remove the cream
   button background that earlier RCE-only styling added (now covered
   by the unified chevron). */
.RadComboBox.RadComboBox_Silk .rcbArrowCell {
  background: transparent !important;
  border: none !important;
  width: 22px !important;
}
/* Telerik paints a 1px gray border around the combo's INNER table
   cells (.rcbInputCell + .rcbArrowCell), creating a nested box visible
   inside our outer border. Strip every internal border so the combo
   reads as one clean rounded box like the native <select>. */
.RadComboBox.RadComboBox_Silk td.rcbInputCell,
.RadComboBox.RadComboBox_Silk td.rcbInputCellLeft,
.RadComboBox.RadComboBox_Silk td.rcbArrowCell,
.RadComboBox.RadComboBox_Silk td.rcbArrowCellRight {
  border: none !important;
  background: transparent !important;
  height: 28px !important;
}
/* Clamp the inner table itself to 28px so its cells don't overflow
   the combo's 28px outer box (was 30px tall, pushing rows by 2px). */
.RadComboBox.RadComboBox_Silk > table {
  height: 28px !important;
  border-collapse: collapse !important;
}

/* §10.1b — Native inputs / selects / textareas plus .InputTextBox /
   .InputTextBoxComment / .InputDropDownList (the `.Input*` hooks that
   sit directly on a native element rather than a wrapper).
   Width is intentionally NOT forced — tight grid contexts crush at
   220px. Width comes from the parent cell (or stays auto / Telerik
   default). The `.formDiv .inputDiv` 100% override in §10.3 still
   handles the standard form-row case. */
.InputTextBox:not(.nodecoration),
.InputTextBoxComment,
.InputDropDownList,
input[type="text"]:not(.nodecoration):not(.rcbInput):not(.riTextBox):not(.rdfd_):not(.ruFakeInput):not(.radPreventDecorate):not([class*="rgFilter"]):not(.InputTextBoxMultiLine):not([id*="Login1_Password"]),
input[type="email"]:not(.rcbInput):not(.riTextBox):not(.rdfd_),
input[type="password"]:not(.rcbInput):not(.riTextBox):not(.rdfd_),
input[type="tel"]:not(.rcbInput):not(.riTextBox):not(.rdfd_),
input[type="search"]:not(.rcbInput):not(.riTextBox):not(.rdfd_),
input[type="url"]:not(.rcbInput):not(.riTextBox):not(.rdfd_),
input[type="number"]:not(.rcbInput):not(.riTextBox):not(.rdfd_),
input[type="date"]:not(.rcbInput):not(.riTextBox):not(.rdfd_),
select:not(.rcbInput):not([class*="rgFilter"]) {
  box-sizing: border-box !important;
  padding: 4px 10px !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: var(--ink, #14202e) !important;
  font-family: var(--sans, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif) !important;
  font-size: 14px !important;
  line-height: 18px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

/* §10.2 — multi-line / comment textareas: same look, auto height. */
.InputTextBoxMultiLine,
textarea:not([class*="rgFilter"]) {
  width: 220px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 8px 10px !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: var(--ink, #14202e) !important;
  font-family: var(--sans, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

/* §10.3 — when nested in `.formDiv .inputDiv`, the cell drives width
   (existing PCR convention). Let the field stretch to fill it. */
.formDiv .inputDiv .InputTextBox,
.formDiv .inputDiv .InputTextBoxComment,
.formDiv .inputDiv .InputComboBox,
.formDiv .inputDiv .InputDropDownList,
.formDiv .inputDiv .InputNumericTextBox,
.formDiv .inputDiv .InputNumericMoneyTextBox,
.formDiv .inputDiv .InputMaskedTextBox,
.formDiv .inputDiv .InputMaskedTextBoxWrapper,
.formDiv .inputDiv .InputDatePicker,
.formDiv .inputDiv .RadUpload,
.formDiv .inputDiv .RadAsyncUpload,
.formDiv .inputDiv .riSingle.RadInput,
.formDiv .inputDiv .RadPicker.RadPicker_Silk,
.formDiv .inputDiv input[type="text"]:not(.nodecoration):not(.rcbInput):not(.riTextBox):not(.rdfd_):not(.ruFakeInput):not(.radPreventDecorate),
.formDiv .inputDiv input[type="email"],
.formDiv .inputDiv input[type="password"],
.formDiv .inputDiv input[type="tel"],
.formDiv .inputDiv input[type="number"],
.formDiv .inputDiv input[type="date"],
.formDiv .inputDiv select,
.formDiv .inputDiv .InputTextBoxMultiLine,
.formDiv .inputDiv textarea {
  width: 100% !important;
}

/* §10.3b — When a RadDate/DateTimePicker is inside `.formDiv .inputDiv`,
   Telerik often ships an inline `width: 160px` on the wrapper AND on
   the inner `<table>` that holds the input + calendar/clock cells.
   Setting the wrapper to `width: 100%` (above) only fixes the outer
   element — the inner table keeps its 160px and creates a visual
   "narrow input + empty padding" look. Force the inner picker table
   to fill the wrapper too. */
.formDiv .inputDiv .RadPicker table,
.formDiv .inputDiv .RadPicker_Silk table,
.formDiv .inputDiv .InputDatePicker table,
.formDiv .inputDiv .riSingle table {
  width: 100% !important;
}
/* And the input cell within the picker table — let it expand to fill
   the table width so the actual text input grows. */
.formDiv .inputDiv .RadPicker .rcInputCell,
.formDiv .inputDiv .RadPicker_Silk .rcInputCell,
.formDiv .inputDiv .InputDatePicker .rcInputCell,
.formDiv .inputDiv .riSingle .rcInputCell {
  width: 100% !important;
}
/* And the inner riTextBox/text input itself */
.formDiv .inputDiv .RadPicker input.riTextBox,
.formDiv .inputDiv .RadPicker_Silk input.riTextBox,
.formDiv .inputDiv .InputDatePicker input.riTextBox,
.formDiv .inputDiv .riSingle input.riTextBox {
  width: 100% !important;
}

/* §10.4 — inside Telerik wrappers, neutralize the skin's inner-input
   border so only our outer-wrapper border shows (no double border).
   Also catches bare-skin wrappers (riSingle/RadPicker without `.Input*`
   hook) — Possible Points and similar. */
.InputComboBox .rcbInputCell,
.InputComboBox .rcbInput,
.InputComboBox .rcbArrowCell,
.InputNumericTextBox input.riTextBox,
.InputNumericMoneyTextBox input.riTextBox,
.InputMaskedTextBox input.riTextBox,
.InputMaskedTextBoxWrapper input.riTextBox,
.InputDatePicker input.riTextBox,
.riSingle.RadInput input.riTextBox,
.RadPicker.RadPicker_Silk input.riTextBox,
.RadUpload .ruFileInput,
.RadAsyncUpload .ruFileInput,
.ruFileWrap.ruStyled .ruFakeInput {
  border: none !important;
  background: transparent !important;
  font: inherit !important;
  color: inherit !important;
  height: 26px !important;       /* 28 - 1 - 1 (top+bottom border) */
  padding: 4px 8px !important;
  box-shadow: none !important;
}
.InputComboBox .rcbArrowCell,
.RadComboBox.RadComboBox_Silk .rcbArrowCell {
  /* Neutralize the combobox arrow cell's skin background. The arrow
     glyph itself stays via its own ::after / icon font. */
  background-color: transparent !important;
  background-image: none !important;
}

/* §10.4b — Telerik's RadComboBox_Silk skin paints the arrow cell with
   a bright cyan-blue on hover/focus. Override so the whole combobox
   stays in the navy/gold palette. Targets the arrow cell across all
   skin states (hover, focus, active, opened). */
.RadComboBox_Silk:hover .rcbArrowCell,
.RadComboBox_Silk.rcbHovered .rcbArrowCell,
.RadComboBox_Silk.rcbFocused .rcbArrowCell,
.RadComboBox_Silk.rcbActive .rcbArrowCell,
.RadComboBox_Silk.rcbExpanded .rcbArrowCell,
.RadComboBoxDropDown_Silk .rcbArrowCell,
.InputComboBox:hover .rcbArrowCell,
.InputComboBox .rcbHovered .rcbArrowCell,
.InputComboBox .rcbFocused .rcbArrowCell {
  background-color: transparent !important;
  background-image: none !important;
}
/* And the arrow glyph itself (Telerik renders the down-arrow via a
   span inside the arrow cell with its own bg-image sprite). Make the
   sprite stay neutral, not switch to a hover-light variant. */
.RadComboBox_Silk:hover .rcbArrowCell .rcbIcon,
.RadComboBox_Silk.rcbHovered .rcbIcon,
.RadComboBox_Silk.rcbFocused .rcbIcon,
.InputComboBox:hover .rcbIcon {
  background-color: transparent !important;
}
/* §10.4b — RadDateTimePicker calendar / clock buttons.
   The Telerik sprite includes a small framed border around each icon
   that looks dated against our flat school theme. Replace the sprite
   with a clean inline-SVG icon (fill=navy) so the picker reads as a
   simple icon button with no extra outline. */
.rcCalPopup,
.rcTimePopup {
  background-image: none !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 16px 16px !important;
  width: 28px !important;
  height: 28px !important;
  display: inline-block !important;
  border: 0 !important;
  border-left: 1px solid var(--line, #e3e8ee) !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease !important;
  vertical-align: middle !important;
}
.rcCalPopup {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%230a2540"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/></svg>') !important;
}
.rcTimePopup {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%230a2540"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>') !important;
}
.rcCalPopup:hover,
.rcTimePopup:hover {
  background-color: rgba(10, 37, 64, 0.05) !important;
}

/* §10.5 — focus ring. Native focusables get :focus; Telerik wrappers
   only react via :focus-within (because the actual focusable is an
   internal element). Same visual either way. */
.InputTextBox:focus,
.InputTextBoxComment:focus,
.InputDropDownList:focus,
.InputTextBoxMultiLine:focus,
input[type="text"]:focus:not(.nodecoration):not(.rcbInput):not(.riTextBox):not(.rdfd_):not(.ruFakeInput):not(.radPreventDecorate),
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus,
.InputComboBox:focus-within,
.InputNumericTextBox:focus-within,
.InputNumericMoneyTextBox:focus-within,
.InputMaskedTextBox:focus-within,
.InputMaskedTextBoxWrapper:focus-within,
.InputDatePicker:focus-within,
.RadUpload:focus-within,
.RadAsyncUpload:focus-within {
  outline: none !important;
  border-color: var(--school-navy) !important;
  box-shadow: 0 0 0 3px rgba(10,37,64,0.08) !important;
}

/* §10.6 — disabled / readonly */
.InputTextBox[disabled], .InputTextBox[readonly],
.InputComboBox.rcbDisabled,
.InputDropDownList[disabled],
input[disabled]:not(.nodecoration):not(.rcbInput):not(.riTextBox):not(.rdfd_),
input[readonly]:not(.nodecoration):not(.rcbInput):not(.riTextBox):not(.rdfd_),
select[disabled],
textarea[disabled], textarea[readonly] {
  background: var(--bg, #f6f8fb) !important;
  color: var(--muted, #5a6b7c) !important;
  cursor: not-allowed !important;
}

/* §10.7 — RadEditor outer frame (rich-text WYSIWYG). Toolbar is left
   to Telerik defaults (toolbar buttons would be brittle to restyle).
   Just unify the outer frame so it reads as the same family of
   entry field as everything else. */
.RadEditor.reWrapper,
.reWrapper.RadEditor {
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.RadEditor.reWrapper:focus-within {
  border-color: var(--school-navy) !important;
  box-shadow: 0 0 0 3px rgba(10,37,64,0.08) !important;
}
.RadEditor .reEditorArea,
.RadEditor .reContentArea,
.RadEditor .reContentCell,
.RadEditor td.reContentCell.reNoBorder {
  background: #fff !important;
  color: var(--ink, #14202e) !important;
  font-family: var(--sans, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif) !important;
  font-size: 14px !important;
}

/* §10.8 — File upload "Browse" button: small navy pill INSIDE the
   unified entry-field box, not the wide button it would otherwise be. */
.ruFileWrap.ruStyled .ruBrowse,
.RadAsyncUpload .ruBrowse,
.RadUpload .ruBrowse {
  display: inline-block !important;
  width: auto !important;
  height: 22px !important;
  padding: 2px 12px !important;
  background: var(--school-navy) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  font-family: var(--sans, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  line-height: 18px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  margin: 1px 4px !important;
}
.ruFileWrap.ruStyled .ruBrowse:hover,
.RadAsyncUpload .ruBrowse:hover,
.RadUpload .ruBrowse:hover {
  background: var(--school-navy-2, #0e2e4f) !important;
}

/* §10.9 — Checkbox alignment in form rows.
   PCR ships native checkboxes inside .formDiv > .inputDiv with
   float:right and a wide intrinsic width (87px observed), which
   shoves them to the far edge of the right column and visually
   detaches them from their label. Pull them back: kill the float,
   give them a consistent 18×18 square, vertically center them with
   the label baseline, and align them to the start of the inputDiv
   (same x-position as where text inputs begin in adjacent rows). */
.formDiv .inputDiv > input[type="checkbox"] {
  float: none !important;
  width: 18px !important;
  height: 18px !important;
  margin: 6px 0 !important;
  padding: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  accent-color: var(--school-navy, #0a2540) !important;
  cursor: pointer !important;
}
/* When the inputDiv contains ONLY a checkbox (no other field), the
   §10.3 rule forces it to 100% width — that's fine — but we also
   want the checkbox at the LEFT (start) of that column so it lines
   up with the left edge of text inputs in surrounding rows. */
.formDiv .inputDiv:has(> input[type="checkbox"]:only-child) {
  text-align: left !important;
  padding: 0 !important;
}

/* §10.10 — Replace the default ASP.NET "Recalculate" icon (a small
   blue down-arrow GIF, img[id$="imgRecalculate"]) with a clean
   inline SVG refresh glyph in navy. content:url() works on void img
   elements and replaces the rendered image without touching markup. */
img[id$="imgRecalculate"],
img[id*="imgRecalculate"] {
  width: 22px !important;
  height: 22px !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  margin-left: 4px !important;
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="%230a2540" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-3-6.7L21 8"/><polyline points="21 3 21 8 16 8"/></svg>') !important;
  opacity: 0.85 !important;
  transition: opacity 0.15s ease, transform 0.2s ease !important;
}
img[id$="imgRecalculate"]:hover,
img[id*="imgRecalculate"]:hover {
  opacity: 1 !important;
  transform: rotate(-30deg) !important;
}


/* §10.10d / §10.10e — Gradebook-specific column-arrow + dropdown rules
   were removed for clean rebuild against PCR_Gradebook_Entry_Redesign_Proposal.html. */


/* §10.11 — GridView date pickers (HIDE / DUE / etc. columns).
   Inside grid TDs Telerik renders .RadPicker with rcInputCell only
   ~38px and the calendar-button cell ~50px — meaning the date input
   becomes ~16px wide and unusable. The §10.x form-field rules don't
   apply here (they're scoped to .formDiv .inputDiv), so we fix it
   in-place: let the picker fill the TD, give the calendar cell a
   small fixed width, and let the input cell take the remainder.

   IMPORTANT — the .RadPicker.RadPicker_Silk default has
   `overflow: hidden auto`. When the inner Telerik table is even 1px
   taller than the picker's 28px height (which happens because the
   calendar-popup wrapper inside the rcCalPopup TD has measurable
   height), Chrome paints a vertical SCROLLBAR with up/down arrows on
   the right side of the picker. That scrollbar reads as phantom
   "spinner arrows" next to every date input in the assessment grid.
   Force overflow:hidden to suppress it. */
table[id*="GridView" i] .RadPicker,
table[class*="GridView" i] .RadPicker,
.GridViewWrap .RadPicker,
table.gv .RadPicker {
  width: 100% !important;
  min-width: 130px !important;
  border: 1px solid var(--line, #d8dde5) !important;
  border-radius: 4px !important;
  background: #fff !important;
  display: inline-block !important;
  overflow: hidden !important;
}
table[id*="GridView" i] .RadPicker > table,
table[class*="GridView" i] .RadPicker > table,
.GridViewWrap .RadPicker > table,
table.gv .RadPicker > table {
  width: 100% !important;
  table-layout: fixed !important;
}
table[id*="GridView" i] .RadPicker .rcInputCell,
table[class*="GridView" i] .RadPicker .rcInputCell,
.GridViewWrap .RadPicker .rcInputCell,
table.gv .RadPicker .rcInputCell {
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
}
table[id*="GridView" i] .RadPicker .rcInputCell input.riTextBox,
table[class*="GridView" i] .RadPicker .rcInputCell input.riTextBox,
.GridViewWrap .RadPicker .rcInputCell input.riTextBox,
table.gv .RadPicker .rcInputCell input.riTextBox {
  width: 100% !important;
  min-width: 80px !important;
  padding: 4px 6px !important;
  border: none !important;
  background: transparent !important;
  font: 13px/1 var(--sans, 'Inter', sans-serif) !important;
  color: var(--ink, #14202e) !important;
  box-shadow: none !important;
}
/* Calendar / time popup buttons — fixed narrow width so they don't
   eat the input space. */
table[id*="GridView" i] .RadPicker > table > tbody > tr > td:not(.rcInputCell),
table[class*="GridView" i] .RadPicker > table > tbody > tr > td:not(.rcInputCell),
.GridViewWrap .RadPicker > table > tbody > tr > td:not(.rcInputCell),
table.gv .RadPicker > table > tbody > tr > td:not(.rcInputCell) {
  width: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  text-align: center !important;
}



/* =========================================
   9a. PORTAL OVERVIEW LAYOUT  (#ProfileWithActions102Row,
                                  #ProfileLeft, #ActionsRight)
   The Overview row uses Telerik t-col-10 + t-col-2, giving the
   right "Actions" column only ~213px. The Distilled design needs
   the right column wider (~33%) so the action tiles can render
   horizontally with full labels (no 2-line wrap) and the Quick
   Actions list reads as a proper bordered card. Override the
   t-col widths just for this row. */
#ProfileWithActions102Row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0 !important;
}
#ProfileWithActions102Row #ProfileLeft,
#ProfileWithActions102Row > #ProfileLeft {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  /* Telerik t-col defaults to padding: 0 15px which creates a
     visible gap even with flex gap:0. Drop the right padding so
     ProfileLeft sits flush against the right column. */
  padding-right: 8px !important;
}
#ProfileWithActions102Row #ActionsRight,
#ProfileWithActions102Row > #ActionsRight {
  flex: 0 0 300px !important;
  width: 300px !important;
  max-width: 300px !important;
  min-width: 0 !important;
  /* Same — kill the left padding on the right column so it abuts
     the left column. Keep right padding for outer-edge breathing. */
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* The single asp:Panel inside #ActionsRight (no class, just an id
   like ctl..._panel) holds BOTH the top quickAction tiles AND the
   Quick Actions list. Force it to fill the column so tiles render
   at the new full width. */
#ActionsRight > div[id*="_panel" i] {
  width: 100% !important;
  max-width: 100% !important;
}


/* =========================================
   9b. RIGHT-COLUMN ACTION TILES  (.ButtonFloat.quickAction)
   The Overview right column emits Apply Online / Online Store /
   Support Bistmar as <div class="ButtonFloat quickAction Admissions">
   (and .store / .donate variants), each containing a single <a>
   label and a <span> error placeholder. Production decorates them
   as small centered cards: teal SVG icon (delivered via mask-image
   on the anchor's ::before) sitting above a label, in a 152x136
   white card with rounded corners.

   Distilled wants horizontal action tiles instead: gold-soft icon
   halo on the LEFT, navy label in the middle, chevron on the right.
   We keep production's mask-image (so the icon SHAPE survives) and
   only override:
     • tile layout — flex row with full-width
     • anchor position — left-padded so the icon sits to its left
     • ::before position/size — absolute left edge, vertically
       centered, 32px square inside a gold-soft halo background
     • icon color — paint the masked icon navy instead of teal,
       hover swaps it to gold-dark
     • chevron — added via tile::after

   The lblError <span> is hidden — it's an empty error placeholder
   that production uses to surface validation errors and would
   otherwise create a blank line above the icon. */
#ActionsRight .ButtonFloat.quickAction,
.RadDockZone .ButtonFloat.quickAction,
.ButtonFloat.quickAction {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 12px 12px !important;
  margin: 0 0 8px 0 !important;
  background: var(--card, #ffffff) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  position: relative !important;
  text-align: left !important;
  box-sizing: border-box !important;
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s !important;
  float: none !important;
}

.ButtonFloat.quickAction:hover {
  border-color: var(--school-gold) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateX(2px);
}

/* Hide the inline error placeholder span — it adds an empty line
   above the label that production would only fill on validation
   error. We don't want it occupying flex space. */
.ButtonFloat.quickAction span[id*="lblError" i] {
  display: none !important;
}

/* The anchor holds the label. Pad-left to leave room for the
   absolutely-positioned icon ::before. Override production's teal
   text color (.ButtonFloat a is teal in dynamic.css). */
.ButtonFloat.quickAction a,
.ButtonFloat.quickAction a:link,
.ButtonFloat.quickAction a:visited {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: block !important;
  position: relative !important;
  font-family: var(--sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  color: var(--ink) !important;
  background: transparent !important;
  background-image: none !important;
  text-decoration: none !important;
  text-transform: none !important;
  text-align: left !important;
  padding: 0 0 0 48px !important;       /* 36px halo + 12px gap */
  margin: 0 !important;
  line-height: 1.3 !important;
  height: auto !important;
  min-height: 36px !important;
  border: none !important;
  box-shadow: none !important;
  white-space: nowrap;                  /* wider column, no wrap */
}

.ButtonFloat.quickAction:hover a {
  color: var(--school-navy) !important;
}

/* Production renders the icon as a 56x56 absolute-positioned
   anchor::before, with a SVG mask-image cutting a teal background
   into the icon shape. Re-anchor to the LEFT of the tile, shrink
   to 24x24, and recolor to navy.

   Per CSS spec, mask-image is set externally (on the rule from
   gbwebsite.css) — we MUST NOT override it here, or the icon
   shape disappears. We only touch position, size, color, and
   surrounding bg. */
.ButtonFloat.quickAction a::before {
  /* Re-anchor — production sets top:18 left:76 right:18 bottom:60
     to center within the 152×136 card. We want left-edge, vertical
     center, navy icon centered inside a 36×36 gold-soft halo
     (which lives on a::after). Icon at left:8 width:20 inside
     halo at left:0 width:36 → icon centered. */
  position: absolute !important;
  top: 50% !important;
  left: 8px !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  width: 20px !important;
  height: 20px !important;
  z-index: 1 !important;

  /* Recolor — paints whatever the production mask cuts into shape.
     Was rgb(0,153,204) teal in production; navy reads as the
     primary palette. */
  background-color: var(--school-navy) !important;
  background-image: none !important;
  background: var(--school-navy) !important;
  box-shadow: none !important;

  /* Mask sizing — keep the production SVG mask but scale it to
     fit the new 24×24 box. */
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
}

/* Gold-soft icon halo — separate ::after pseudo BEHIND the masked
   icon. The mask on ::before would clip a box-shadow into the icon
   shape, so the halo MUST live on a different pseudo. The anchor's
   ::after is unused by production (content: normal), so we claim
   it for the halo. */
.ButtonFloat.quickAction a::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  transform: translateY(-50%) !important;
  width: 36px !important;
  height: 36px !important;
  background: var(--school-gold-soft) !important;
  border-radius: 8px !important;
  z-index: 0 !important;
  display: block !important;
  pointer-events: none;
  transition: background 0.18s !important;
}
.ButtonFloat.quickAction:hover a::before {
  background-color: var(--school-gold-dark) !important;
  background: var(--school-gold-dark) !important;
}
.ButtonFloat.quickAction:hover a::after {
  background: var(--school-gold) !important;
}

/* Chevron on the right — pure CSS, no extra DOM */
.ButtonFloat.quickAction::after {
  content: "›" !important;
  color: var(--muted) !important;
  opacity: 0.5;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  flex-shrink: 0 !important;
  transition: color 0.15s, opacity 0.15s, transform 0.15s !important;
}
.ButtonFloat.quickAction:hover::after {
  color: var(--school-gold-dark) !important;
  opacity: 1;
  transform: translateX(2px);
}


/* =========================================
   9c. RIGHT-COLUMN QUICK ACTIONS LIST  (.ButtonFloat.listActions
                                         + textDisplayWrapper)
   Below the .quickAction tiles, the Overview right column emits a
   "Quick Actions" header (in a div whose id ends with
   "_textDisplayWrapper") followed by .ButtonFloat.listActions
   items (Enroll for 26/27! / Report Absence / Order Lunch). Each
   listActions div uses the SAME mask-image icon mechanism as the
   quickAction tiles (anchor::before, teal bg).

   Distilled wants ALL of these — header + rows — to read as a
   single bordered card with thin internal dividers. We achieve
   this by giving each piece its own card "slice":
     • textDisplayWrapper → top of card (top + sides border, top
       radius, no bottom border — meets the first row seamlessly)
     • each listActions → middle of card (top hairline divider,
       sides border)
     • last listActions → bottom radius
   The slices share borders, so visually it looks like one card. */
/* IMPORTANT — scope to #ActionsRight ONLY. The id pattern
   "textDisplayWrapper" is used elsewhere in the page (e.g. footer
   panels), and an unscoped attribute selector would paint white
   cards over the footer's address/social blocks. */
#ActionsRight [id*="textDisplayWrapper" i],
.RadDockZone [id*="textDisplayWrapper" i] {
  display: block !important;
  background: var(--card, #ffffff) !important;
  border: 1px solid var(--line) !important;
  border-bottom: none !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  padding: 14px 16px 8px 16px !important;
  margin-top: 16px !important;
  /* Title typography — small uppercase letter-spaced, override
     production's serif italic. */
  font-family: var(--sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  font-style: normal !important;
  line-height: 1.4 !important;
  text-align: left !important;
}
#ActionsRight [id*="textDisplayWrapper" i] *,
.RadDockZone [id*="textDisplayWrapper" i] * {
  font-family: var(--sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  font-style: normal !important;
}

/* listActions rows — render as compact list rows inside the card */
.ButtonFloat.listActions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  background: var(--card, #ffffff) !important;
  border-left: 1px solid var(--line) !important;
  border-right: 1px solid var(--line) !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative !important;
  text-align: left !important;
  box-sizing: border-box !important;
  cursor: pointer;
  float: none !important;
  transition: background 0.15s, padding 0.15s !important;
}
.ButtonFloat.listActions:hover {
  background: var(--bg) !important;
  padding-left: 20px !important;
}

/* Last listActions: closes the card with bottom radius + bottom border */
.ButtonFloat.listActions:last-of-type,
.ButtonFloat.listActions ~ .ButtonFloat.listActions:last-child,
.ButtonFloat.listActions:nth-last-of-type(1) {
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
}

/* Hide the validation error span */
.ButtonFloat.listActions span[id*="lblError" i] {
  display: none !important;
}

/* Anchor inside listActions */
.ButtonFloat.listActions a,
.ButtonFloat.listActions a:link,
.ButtonFloat.listActions a:visited {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: block !important;
  position: relative !important;
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
  color: var(--ink) !important;
  background: transparent !important;
  background-image: none !important;
  text-decoration: none !important;
  text-transform: none !important;
  text-align: left !important;
  padding: 0 0 0 44px !important;       /* 32px halo + 12px gap */
  margin: 0 !important;
  line-height: 1.3 !important;
  height: auto !important;
  min-height: 32px !important;
  border: none !important;
  box-shadow: none !important;
  white-space: nowrap;
}
.ButtonFloat.listActions:hover a {
  color: var(--school-navy) !important;
}

/* Reposition the production icon — production paints these icons via
   a background-image set in main12152025.css (CORS-blocked from this
   stylesheet, so we can't read its rules from JS, but production owns
   the icon SHAPE). DO NOT override background or background-image
   here — that kills the icon. We only reposition + resize, and use a
   filter to recolor production's teal icon to navy.

   Position to sit centered INSIDE the 32x32 halo on a::after:
   halo at left:0 width:32, icon at left:6 width:20 → icon centered. */
.ButtonFloat.listActions a::before {
  position: absolute !important;
  top: 50% !important;
  left: 6px !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  width: 20px !important;
  height: 20px !important;
  -webkit-background-size: contain !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  /* Recolor production's teal (#0099CC) icon to school navy. The filter
     chain lives in :root next to the color tokens. */
  filter: var(--school-navy-filter) !important;
  transition: filter 0.18s !important;
}
/* Subtle neutral halo behind the list-row icon — the design uses a
   slightly lighter halo here than the top tiles. Same ::after-as-halo
   trick. Halo at left:0 width:32, icon ::before at left:6 width:20
   → icon centered inside halo. */
.ButtonFloat.listActions a::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  transform: translateY(-50%) !important;
  width: 32px !important;
  height: 32px !important;
  background: var(--bg) !important;
  border-radius: 8px !important;
  z-index: 0 !important;
  display: block !important;
  pointer-events: none;
  transition: background 0.18s !important;
}
.ButtonFloat.listActions a::before {
  z-index: 1 !important;                /* sits above the halo */
}
.ButtonFloat.listActions:hover a::before {
  /* Hover → gold-dark. The filter chain lives in :root next to the
     color tokens. */
  filter: var(--school-gold-dark-filter) !important;
}
.ButtonFloat.listActions:hover a::after {
  background: var(--school-gold-soft) !important;
}

/* True token-driven icon color for the known listActions variants
   (enroll / report / lunch). Production's icon SVGs (data URIs copied
   from main12152025.css) are reused as masks, so the silhouette is
   painted by background-color and the color comes straight from the
   design tokens instead of filter math. The filter rules above stay as
   a fallback for any listActions variant that has no mask here. If
   production changes an icon shape, re-copy its data URI. */
.ButtonFloat.listActions.enroll a::before,
.ButtonFloat.listActions.report a::before,
.ButtonFloat.listActions.lunch a::before {
  filter: none !important;
  background: var(--school-navy) !important;   /* kills production's background-image; the mask provides the shape */
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  transition: background 0.18s !important;
}
.ButtonFloat.listActions.enroll:hover a::before,
.ButtonFloat.listActions.report:hover a::before,
.ButtonFloat.listActions.lunch:hover a::before {
  filter: none !important;
  background: var(--school-gold-dark) !important;
}
.ButtonFloat.listActions.enroll a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Crect%20x='3'%20y='3'%20width='18'%20height='18'%20rx='4'%20fill='%235BA6E6'/%3E%3Cpath%20d='M7.2%2012.4l3.0%203.0L16.8%208.8'%20fill='none'%20stroke='white'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Crect%20x='3'%20y='3'%20width='18'%20height='18'%20rx='4'%20fill='%235BA6E6'/%3E%3Cpath%20d='M7.2%2012.4l3.0%203.0L16.8%208.8'%20fill='none'%20stroke='white'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
.ButtonFloat.listActions.report a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M9%203h6a2%202%200%200%201%202%202v15a2%202%200%200%201-2%202H9a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2z'%20fill='none'%20stroke='%233B82F6'%20stroke-width='2'%20stroke-linejoin='round'/%3E%3Cpath%20d='M9%207h6'%20stroke='%233B82F6'%20stroke-width='2'%20stroke-linecap='round'/%3E%3Cpath%20d='M10%203.5h4'%20stroke='%233B82F6'%20stroke-width='2'%20stroke-linecap='round'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M9%203h6a2%202%200%200%201%202%202v15a2%202%200%200%201-2%202H9a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2z'%20fill='none'%20stroke='%233B82F6'%20stroke-width='2'%20stroke-linejoin='round'/%3E%3Cpath%20d='M9%207h6'%20stroke='%233B82F6'%20stroke-width='2'%20stroke-linecap='round'/%3E%3Cpath%20d='M10%203.5h4'%20stroke='%233B82F6'%20stroke-width='2'%20stroke-linecap='round'/%3E%3C/svg%3E") !important;
}
.ButtonFloat.listActions.lunch a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M7%208h10v11a2%202%200%200%201-2%202H9a2%202%200%200%201-2-2V8z'%20fill='%23E2B86B'/%3E%3Cpath%20d='M9%208V6a3%203%200%200%201%206%200v2'%20fill='none'%20stroke='%23C49A45'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M7%208h10v11a2%202%200%200%201-2%202H9a2%202%200%200%201-2-2V8z'%20fill='%23E2B86B'/%3E%3Cpath%20d='M9%208V6a3%203%200%200%201%206%200v2'%20fill='none'%20stroke='%23C49A45'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* Chevron on the right of each list row */
.ButtonFloat.listActions::after {
  content: "›" !important;
  color: var(--muted) !important;
  opacity: 0.5;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  flex-shrink: 0 !important;
  transition: color 0.15s, opacity 0.15s, transform 0.15s !important;
}
.ButtonFloat.listActions:hover::after {
  color: var(--school-gold-dark) !important;
  opacity: 1;
  transform: translateX(2px);
}


/* =========================================
   9d. DATA TABLES  (.GridViewWrap, .DataWebControlStyle,
                       .AlternatingRowStyle)
   Statement / Donations / Annual Forms data tables. Design wants:
     • Gray/muted uppercase letter-spaced 10px headers (NOT
       production's navy bold)
     • 12.5px Inter body cells with tabular numbers
     • Compressed 8×10 cell padding
     • AlternatingRowStyle in warm cream
   Match the production selector chain
   (`.RadDock .GridViewWrap th` etc.) so we outweigh
   production's brand-color overrides. */
.RadDock .GridViewWrap,
.RadDock .DataWebControlStyle,
.RadDock table.DataWebControlStyle,
.GridViewWrap,
table.DataWebControlStyle {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin: 0 !important;
  font-family: var(--sans) !important;
  font-size: 12.5px !important;
}

.RadDock .GridViewWrap th,
.RadDock .DataWebControlStyle th,
.RadDock table.DataWebControlStyle th,
.GridViewWrap th,
.DataWebControlStyle th {
  background: var(--bg) !important;
  color: var(--muted) !important;
  font-family: var(--sans) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.3px !important;
  padding: 8px 10px !important;
  text-align: left !important;
  border-bottom: 1px solid var(--line) !important;
  border-top: 1px solid var(--line) !important;
}

.RadDock .GridViewWrap td,
.RadDock .DataWebControlStyle td,
.RadDock table.DataWebControlStyle td,
.GridViewWrap td,
.DataWebControlStyle td {
  padding: 8px 10px !important;
  font-family: var(--sans) !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--line) !important;
  line-height: 1.4 !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" !important;
}

/* Override #1: Telerik RadComboBox uses an INTERNAL <table> with TDs
   (.rcbInputCell, .rcbArrowCell, etc.) to lay out the input + arrow.
   When a RadComboBox is rendered inside a DataWebControlStyle/GridViewWrap
   GridView (e.g. a letter-grade dropdown in a marks grid), the rule above
   cascades into the combo's inner TDs and pads them by 8/10px each side.
   That blows the combo's natural ~40px content up to ~67px, which then
   overflows narrow column contexts (e.g. Progress Details, Progress Marks,
   Report Card Marks) where the column is only ~120px wide. The combo
   container clips at ~44px, hiding the "**" placeholder behind the clip
   AND behind the spurious overflow scrollbar. Specificity 0,3,1 beats
   the 0,1,1 of the generic rule above so this override always wins. */
.RadComboBox td.rcbInputCell,
.RadComboBox td.rcbArrowCell,
.RadComboBox td.rcbInputCellLeft,
.RadComboBox td.rcbArrowCellRight,
.RadComboBox.RadComboBox_Silk td.rcbInputCell,
.RadComboBox.RadComboBox_Silk td.rcbArrowCell,
.RadComboBox.RadComboBox_Silk td.rcbInputCellLeft,
.RadComboBox.RadComboBox_Silk td.rcbArrowCellRight {
  padding: 0 !important;
  border-bottom: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
}

/* Override #2: Tighten the marks-grid cell vertical layout.
   PCR ships every grade cell with TWO floated divs:
     <div ..._divAverage>   ← contains either the numeric avg input
                              OR (when no avg) just an empty
                              `<span ..._spanAverageNotAvailable>`
                              placeholder that is 44×18px tall.
     <div ..._divNonAverage> ← the letter-grade RadComboBox.
   Computed `clear: both` on both divs (PCR stylesheet) stacks them
   vertically. On rows that have NO average value (Effort, Class
   Participation on Progress Details, etc.), the top half of the cell
   is occupied by the empty placeholder span — pushing the combo to
   the bottom of an 80px-tall cell with ~50px of empty whitespace
   above it.

   Fix: when a divAverage contains ONLY the empty
   `_spanAverageNotAvailable` placeholder (no numeric input wrapper),
   hide the entire divAverage. The divNonAverage with the combo then
   sits at the natural top of the cell, and the row collapses to its
   actual content height (~30px instead of 80px). The empty placeholder
   span carries no information for the user — it represents a value
   that explicitly doesn't exist.

   Detection: check that divAverage does NOT contain a `span.riSingle`
   (the Telerik RadNumericTextBox wrapper that hosts an actual input).
   Cells WITH a real numeric input keep their divAverage visible. */
[id$="_divAverage"]:not(:has(span.riSingle)):not(:has(input.riTextBox)) {
  display: none !important;
}

/* Override #3: row-height collapse + dropdown width fix.
   PCR ships divText, divAverage, and divNonAverage with computed
   `clear: both`, which forces a new line for each one. Combined with
   the float-left layout, this stacks the small status-dot column ON
   TOP of the input/combo column, doubling the row height to ~80px.

   Replace the float-left + clear-both stacking with flexbox on the
   marks-cell shell: status-dot column and divText sit side by side at
   their natural 18-30px height. Row collapses to ~30px content +
   16px TD padding ≈ 45px (down from ~80px).

   Setting divNonAverage to `width: auto` lets the combo render at its
   natural ~80px instead of being constrained to 50% of divText (~55px).
   The combo's inline `width: 80%` then becomes 80% of ~80px ≈ 64px,
   leaving real room for the "**" placeholder + dropdown arrow.

   No visual style of the entry control changes (font, border, color,
   background). Pure layout. */
[id*="MarksEditInternalControl"] [id*="_gvMarks"] tr.RowStyle > td > div,
[id*="MarksEditInternalControl"] [id*="_gvMarks"] tr.AlternatingRowStyle > td > div {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
}
[id$="_divText"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 1 1 auto !important;
  overflow: visible !important;
  height: auto !important;
}
[id$="_divText"],
[id$="_divAverage"],
[id$="_divNonAverage"] {
  clear: none !important;
}
/* Explicit widths so flex items don't inherit the inline `width: 50%`
   that makes them both fill the flex container. The numeric input
   wrapper renders comfortably in 70px, the letter combo in 85px. */
[id$="_divAverage"] {
  float: none !important;
  width: 70px !important;
  flex: 0 0 70px !important;
  overflow: visible !important;
}
[id$="_divNonAverage"] {
  float: none !important;
  width: 85px !important;
  flex: 0 0 85px !important;
  overflow: visible !important;
}

/* Constrain the TOPIC column on marks grids so grade columns have
   enough horizontal room for [average input] + [letter combo] to sit
   side by side. PCR auto-sizes the first column based on the longest
   topic text — on Progress Details it grows to ~680px, leaving only
   ~130px per grade column. Cap it at 220px so each grade column gets
   at least 240px (more than enough to fit input + combo + gap). */
[id*="MarksEditInternalControl"] table[id$="_gvMarks"] > tbody > tr > td:first-child,
[id*="MarksEditInternalControl"] table[id$="_gvMarks"] > tbody > tr > th:first-child {
  max-width: 240px;
}

/* Restore the donations-totals table's intended (tight) cell padding,
   which the §9 generic data-table rule above was overriding. The
   `gvUnpaidInvoices` GridView lives inside `.donationsTotalAmount`
   and DonationsTotalAmount.ascx ships its own
     `#gvUnpaidInvoices .RowStyle td { padding: 1px 0px }`
   styling, expecting cells to be tight so the row layout
   (label + RadNumericMoney input) lines up with the surrounding
   form. Our 8px/10px padding ate 20px off the row width and made
   the campaign inputs render ~10px narrower than other form fields.
   Match the .ascx's intent and drop the borders too — the totals
   table doesn't want row separators. */
.donationsTotalAmount .DataWebControlStyle td,
.donationsTotalAmount #gvUnpaidInvoices td,
.donationsTotalAmount .RowStyle td {
  padding: 1px 0 !important;
  border-bottom: none !important;
  border-top: none !important;
}

.RadDock .DataWebControlStyle tr:last-child td,
.DataWebControlStyle tr:last-child td {
  border-bottom: none !important;
}

.RadDock .AlternatingRowStyle,
.RadDock .AlternatingRowStyle td,
.AlternatingRowStyle,
.AlternatingRowStyle td {
  background: var(--bg-warm) !important;
}


/* =========================================
   9d2. IN-TABLE BADGE PILLS  (.button.badge inside data tables)
   Some tables (e.g. Applicant-Profile > Applications) use
   <span class="button badge">Application Received</span> as a
   status pill inside a TD. The §9 generic .button rule paints it
   navy with padding 11px 22px and font-size 13.5px — which makes
   the pill ~50px tall and clips it inside the table row's overflow
   boundary. Compact it for in-table use. */
.RadDock table .button.badge,
.RadDock td .button.badge,
.GridViewWrap .button.badge,
.DataWebControlStyle .button.badge,
table .button.badge,
td .button.badge,
span.button.badge {
  display: inline-block !important;
  padding: 4px 12px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  line-height: 1.4 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  box-shadow: none !important;
  text-transform: none !important;
}

/* Allow the parent cell to give the pill room (no overflow:hidden
   forcing clip on the row). */
.RadDock table td:has(.button.badge),
.GridViewWrap td:has(.button.badge),
.DataWebControlStyle td:has(.button.badge) {
  overflow: visible !important;
  white-space: nowrap !important;
}

/* When a `.button.badge` is rendered as an <a> (e.g. Applicant-Profile >
   Applications has `<a class="button badge">Apply Now</a>` for an open
   application slot), the §10 in-content link rule (`.RadDock a → navy`)
   wins specificity over the §9 `.button { color: #fff }` rule and paints
   the text navy on the navy pill background — the label disappears.
   Restore white text by lifting specificity above `.RadDock a`. */
.RadDock a.button.badge,
.RadDock a.button.badge:link,
.RadDock a.button.badge:visited,
.contentnews a.button.badge,
.GridViewWrap a.button.badge,
.DataWebControlStyle a.button.badge,
table a.button.badge,
td a.button.badge {
  color: #ffffff !important;
}
.RadDock a.button.badge:hover,
.contentnews a.button.badge:hover,
.GridViewWrap a.button.badge:hover,
.DataWebControlStyle a.button.badge:hover,
table a.button.badge:hover,
td a.button.badge:hover {
  color: #ffffff !important;
}

/* Generalization of the .button.badge fix above. Any `<a class="button">`
   inside a scoped content area (Applicant-Profile > Events "Schedule",
   Status Update CTAs, etc.) is hit by the §10 teal-link override
   (`.RadDock a → navy`), painting navy text on a navy pill background.
   Lift specificity to .RadDock a.button (0,2,1) to restore the §9
   .button rule's white text. Pay buttons are excluded because they
   intentionally render navy text on a gold background (§9 .Pay rule). */
.RadDock a.button:not([href*="Pay" i]):not(.Pay),
.RadDock a.button:not([href*="Pay" i]):not(.Pay):link,
.RadDock a.button:not([href*="Pay" i]):not(.Pay):visited,
.contentnews a.button:not([href*="Pay" i]):not(.Pay),
.GridViewWrap a.button:not([href*="Pay" i]):not(.Pay),
.DataWebControlStyle a.button:not([href*="Pay" i]):not(.Pay),
table a.button:not([href*="Pay" i]):not(.Pay),
td a.button:not([href*="Pay" i]):not(.Pay) {
  color: #ffffff !important;
}
.RadDock a.button:not([href*="Pay" i]):not(.Pay):hover,
.contentnews a.button:not([href*="Pay" i]):not(.Pay):hover,
.GridViewWrap a.button:not([href*="Pay" i]):not(.Pay):hover,
.DataWebControlStyle a.button:not([href*="Pay" i]):not(.Pay):hover,
table a.button:not([href*="Pay" i]):not(.Pay):hover,
td a.button:not([href*="Pay" i]):not(.Pay):hover {
  color: #ffffff !important;
}


/* =========================================
   9e. BLOG / NEWS POSTS  (.contentnews, .news-wrapper,
                             .news-posted, .news-title,
                             .news-description, .news_image,
                             .descriptionLabel)
   The Class > Blog page (e.g. /Clue/Blog/27922) emits each post as:
     <div class="contentnews">
       <div class="news-wrapper">
         <div class="news-posted"><span>Posted April 21, 2026</span></div>
         <div class="news-title"><a>Upcoming Test</a></div>
         <div class="news-description">
           <div class="news_image">…image…</div>
           <span class="descriptionLabel">Body…</span>
         </div>
       </div>
     </div>
   Production renders this with bare teal-ish links and floating
   text. Distilled wants each post in a clean white card with the
   date as a small uppercase eyebrow above a serif/navy title, then
   a rounded image and proper body type.
   ========================================= */

/* Outer .contentnews is a single Telerik ListView item placeholder
   container that holds ALL the posts as siblings. Strip any
   production styling so it's just a transparent wrapper — the card
   styling lives on each per-post .news-wrapper instead. */
.contentnews,
.newswrapper > .contentnews,
.newsWrapper .contentnews {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}

/* Each post — .news-wrapper is the per-item template. THIS is the
   card. */
.contentnews .news-wrapper,
.newswrapper .news-wrapper,
.news-wrapper {
  background: var(--card, #ffffff) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 24px 28px 28px 28px !important;
  margin: 0 0 20px 0 !important;
  transition: box-shadow 0.2s !important;
  display: block !important;
  box-sizing: border-box;
}
.news-wrapper:hover {
  box-shadow: var(--shadow-md) !important;
}

/* Posted date — small uppercase eyebrow ABOVE the title */
.contentnews .news-posted,
.news-posted {
  font-family: var(--sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  display: block !important;
}
.contentnews .news-posted span,
.news-posted span {
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
}

/* Post title — serif Cormorant Garamond, navy, sized like the card
   titles in §8 RadDocks. The anchor needs a stronger color override
   to beat production's teal/brand-blue link color. */
.contentnews .news-title,
.news-title {
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  display: block !important;
  line-height: 1.15 !important;
}
.contentnews .news-title a,
.contentnews .news-title a:link,
.contentnews .news-title a:visited,
.news-title a,
.news-title a:link,
.news-title a:visited {
  font-family: var(--serif) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  color: var(--school-navy) !important;
  letter-spacing: -0.2px !important;
  line-height: 1.15 !important;
  text-decoration: none !important;
  text-transform: none !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  display: inline !important;
  transition: color 0.15s !important;
}
.contentnews .news-title a:hover,
.news-title a:hover {
  color: var(--school-gold-dark) !important;
  text-decoration: none !important;
}

/* Description block (image + body text) */
.contentnews .news-description,
.news-description {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Image — rounded corners, full width, small margin below */
.contentnews .news_image,
.news_image {
  display: block !important;
  margin: 0 0 16px 0 !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  line-height: 0;                       /* kill inline-image baseline gap */
}
.contentnews .news_image img,
.news_image img,
.news_image span img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 380px !important;
  object-fit: cover !important;
  border-radius: var(--radius) !important;
}

/* Body text */
.contentnews .descriptionLabel,
.descriptionLabel {
  font-family: var(--sans) !important;
  font-size: 14.5px !important;
  font-weight: 400 !important;
  color: var(--ink-soft, #2a3a4c) !important;
  line-height: 1.65 !important;
  display: block !important;
}

/* Outer wrappers — width and spacing */
.newswrapper,
.newsWrapper {
  display: block;
  max-width: 880px;
  margin: 0 auto;
}


/* =========================================
   2b. IN-CONTENT LINKS  (override production teal #0099CC)
   Production paints body anchors a teal #0099CC. The Distilled
   palette wants navy (or gold-dark) for in-content links so they
   read as part of the navy palette, not as a leftover teal accent.
   Scoped to content areas (NOT the navy nav, footer, etc. which
   already have their own color rules). */
.RadDock a,
.RadDock a:link,
.RadDock a:visited,
.contentnews a,
.contentnews a:link,
.contentnews a:visited,
.GridViewWrap a,
.DataWebControlStyle a,
.descriptionLabel a,
.PageTitleColumn ~ * a,
.styledDivision a:not([class]),
.upcoming-events a,
[class*="event"] a,
.eventTitle,
.eventTitle a,
[class*="upcoming"] a {
  color: var(--school-navy) !important;
  text-decoration: none;
  transition: color 0.15s;
}
.RadDock a:hover,
.contentnews a:hover,
.GridViewWrap a:hover,
.DataWebControlStyle a:hover,
.descriptionLabel a:hover,
.styledDivision a:not([class]):hover,
.upcoming-events a:hover,
[class*="event"] a:hover,
[class*="upcoming"] a:hover {
  color: var(--school-gold-dark) !important;
}

/* Generic teal-link override — anything with inline color or
   class hint matching production teal gets repainted navy. */
a[style*="0099CC" i],
a[style*="0099cc"],
a[style*="rgb(0, 153, 204)"],
a.linkBlue,
a.link-blue {
  color: var(--school-navy) !important;
}

/* Footer override — the §2b broad selector
   `.styledDivision a:not([class])` also matches the footer's
   address/phone/email anchors and paints them navy, which is
   invisible on the navy footer bg. Re-apply muted-light color
   inside the footer with higher specificity. */
.FooterLayout a:not([class]),
.FooterLayout a,
.FooterLayout .FooterContact a,
.FooterLayout .FooterLogoColumnCenter a,
.FooterLayout .FooterLogoColumnLeft a,
.FooterLayout .FooterLogoColumnRight a {
  color: #a8b6ca !important;
}
.FooterLayout a:not([class]):hover,
.FooterLayout a:hover {
  color: #ffffff !important;
}


/* =========================================
   2b2. CONTROL-HEADER (homepage section titles)
   Many homepage section titles ("Academic Program Highlights",
   "What Our Students are Saying") are emitted as
     <div class="control-header">Title</div>
   with a teal `border-bottom: 2px solid #00A9E0`. Repaint the
   underline gold and the title text navy. */
.control-header {
  color: var(--school-navy) !important;
  font-family: var(--serif) !important;
  font-weight: 600 !important;
  font-size: 28px !important;
  letter-spacing: -0.2px !important;
  border-bottom-color: var(--school-gold) !important;
  border-bottom-width: 2px !important;
  border-bottom-style: solid !important;
  padding-bottom: 8px !important;
  margin-bottom: 18px !important;
}

/* H4 section titles (e.g. "Focused on Academics") — production
   uses navy-light #064078; repaint to school-navy for consistency. */
.styledDivision h4,
.contentnews h4,
.RadDock h4 {
  color: var(--school-navy) !important;
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
}

/* Production decorates h2 elements (e.g. inside .control-header)
   with a teal `border-top: 2px solid #00A9E0` on h2::after. Repaint
   the underline gold to match the Distilled palette. */
.styledDivision h2::after,
.control-header h2::after,
.RadDock h2::after,
.contentnews h2::after,
.PaddedLayout h2::after,
.ContentLayout h2::after,
h2::after {
  border-top-color: var(--school-gold) !important;
  border-bottom-color: var(--school-gold) !important;
}
/* Same for h1 / h3 / h4 if they use the same pattern */
.styledDivision h1::after,
.styledDivision h3::after,
.styledDivision h4::after,
.control-header h1::after,
.control-header h3::after {
  border-top-color: var(--school-gold) !important;
  border-bottom-color: var(--school-gold) !important;
}


/* =========================================
   2c. SECTION-TITLE UNDERLINES  (homepage editorial sections)
   Production renders some homepage section headings with a teal
   underline (border-bottom or text-decoration). Repaint the gold
   accent by overriding the border color on common heading
   wrappers used on the public homepage. */
.styledDivision h1,
.styledDivision h2,
.styledDivision h3,
.styledDivision .h2-style,
.RadDock h2,
.contentnews h2,
.styledDivision h2[style*="border-bottom"],
.styledDivision h2[style*="border"],
.styledDivision .ContentLayout h2,
.styledDivision .PaddedLayout h2 {
  border-bottom-color: var(--school-gold) !important;
}
/* If production uses a separate <hr> or underline element, paint
   it gold. */
.styledDivision .ContentLayout hr,
.styledDivision hr,
.PaddedLayout hr,
.RadDock hr {
  border-color: var(--school-gold) !important;
  background-color: var(--school-gold) !important;
}


/* =========================================
   2d. THIRD-PARTY CALENDAR WIDGET
   The Calendar page (e.g. /Calendar/62105) embeds a Telerik
   RadScheduler/RadCalendar component with its own teal theme.
   Repaint the controls (Day/Week/Month tabs, header, today/nav
   buttons) to match the Distilled palette. */
.RadScheduler,
.RadCalendar {
  font-family: var(--sans) !important;
}

/* Header bar (today / prev / next / current month) */
.RadScheduler .rsHeader,
.RadCalendar .rcHeader {
  background: var(--bg-warm) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

/* Day/Week/Month view tabs — actual production classes are
   .rsHeaderDay / .rsHeaderWeek / .rsHeaderMonth on the <a>, with
   the selected <li> getting the .rsSelected class. */
.rsHeaderDay,
.rsHeaderWeek,
.rsHeaderMonth,
.RadScheduler ul li a {
  color: var(--ink) !important;
  background: transparent !important;
  background-color: transparent !important;
  font-family: var(--sans) !important;
  padding: 6px 14px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
}
.rsHeaderDay:hover,
.rsHeaderWeek:hover,
.rsHeaderMonth:hover {
  background: var(--bg-warm) !important;
  background-color: var(--bg-warm) !important;
  color: var(--school-navy) !important;
}
li.rsSelected,
li.rsSelected a,
li.rsSelected .rsHeaderDay,
li.rsSelected .rsHeaderWeek,
li.rsSelected .rsHeaderMonth {
  background: var(--school-navy) !important;
  background-color: var(--school-navy) !important;
  color: #fff !important;
  border-color: var(--school-navy) !important;
  border-radius: 6px !important;
}
li.rsSelected a {
  color: #fff !important;
}

/* Month/year header link in the calendar — production paints teal */
.RadScheduler .rsMonthYear,
.RadScheduler .rsHeader a,
.RadScheduler a[id*="MonthYear"],
.RadCalendar .rcMain a {
  color: var(--school-navy) !important;
  text-decoration: none !important;
  border-bottom-color: var(--school-gold) !important;
}

/* Today / Day / Week / Month links: kill teal */
.RadScheduler a,
.RadCalendar a {
  color: var(--ink) !important;
}
.RadScheduler a:hover,
.RadCalendar a:hover {
  color: var(--school-gold-dark) !important;
}

/* Day-cell numbers and event titles */
.RadScheduler .rsApt,
.RadScheduler .rsAptContent,
.RadScheduler .rsDateHeader,
.rsCellLast {
  font-family: var(--sans) !important;
}

/* Event chips — repaint teal to navy */
.RadScheduler .rsApt {
  background: var(--school-navy) !important;
  color: #fff !important;
  border-color: var(--school-navy) !important;
  border-radius: 4px !important;
}
.RadScheduler .rsApt a,
.RadScheduler .rsApt .rsAptContent {
  color: #fff !important;
}


/* =========================================
   9f. FORM SECTION HEADERS  (.container-header)
   Form container titles like "Reference - Math Teacher" on the
   Teacher-Recommendation-Request page are emitted as
     <div class="container-header"><span>Reference - Math Teacher</span></div>
   Production paints these WHITE (assuming dark/navy background),
   but on the Teacher-Recommendation form the header sits on a
   light/cream form panel, so the white text is invisible.
   Repaint as navy serif for editorial weight on light backgrounds.
   ========================================= */
.container-header,
.container-header span,
.container-header *,
div.container-header,
div.container-header > span {
  color: var(--school-navy) !important;
  font-family: var(--serif) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -0.1px !important;
  text-transform: none !important;
  line-height: 1.2 !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  text-shadow: none !important;
}


/* =========================================
   10. FOOTER  (.FooterLayout, .FooterContact,
                 .FooterLogoColumnCenter, .FooterSocial,
                 .FooterAffiliations)
   Navy footer with NAP block, accreditation strip, social row.
   ========================================= */
.FooterLayout {
  background: var(--school-navy) !important;
  color: #c8d2e0 !important;
  margin-top: 80px;
  border: none !important;
  /* Reset any inherited width/positioning so the footer always
     spans the full viewport. */
  width: 100% !important;
  max-width: none !important;
  display: block !important;
  position: relative;
  overflow: hidden;            /* clip stray script-text artifacts */
}

/* Defensive: any <script> in the footer must NOT render as text.
   Production sometimes leaks raw $(…) jQuery init code as visible
   text inside the FooterLogoColumnCenter (CMS sanitizer strips
   the script tag boundary, leaving the JS source as a text node). */
.FooterLayout script,
.FooterLayout style,
.FooterLayout noscript {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  left: -9999px !important;
}
/* Hide direct text nodes that look like JS code (orphaned panel text).
   Catch any DIV inside FooterLogoColumnCenter that has an asp.net
   panel id and contains JS-shaped text but no real markup. */
.FooterLogoColumnCenter > div[id*="_panel" i]:empty {
  display: none !important;
}

.FooterLogoRow {
  margin-top: 0 !important;
  padding: 56px 32px 36px 32px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.FooterContact,
.FooterLogoColumnCenter {
  font-size: 13px !important;
  line-height: 1.75 !important;
  color: #a8b6ca !important;
}

.FooterContact strong,
.FooterLogoColumnCenter strong,
.FooterLogoColumnCenter h2 {
  color: #ffffff !important;
  font-weight: 500 !important;
  display: block;
  font-size: 12px !important;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 6px !important;
  font-family: var(--sans) !important;
}

/* All footer headings (e.g. <h3 class="h2-style"> wordmark below the
   crest) must be readable on navy. Production sets these to brand
   navy, which disappears against the navy footer. */
.FooterLayout h1,
.FooterLayout h2,
.FooterLayout h3,
.FooterLayout h4,
.FooterLayout .h2-style {
  color: #ffffff !important;
  letter-spacing: 2px !important;
  font-weight: 500 !important;
}

.FooterContact a,
.FooterLogoColumnCenter a,
.FooterLayout li > a {
  color: #a8b6ca !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding-bottom: 1px;
}
.FooterContact a:hover,
.FooterLogoColumnCenter a:hover,
.FooterLayout li > a:hover {
  color: #ffffff !important;
  border-bottom-color: var(--school-gold);
}

/* Footer logo — knockout filter as fallback if no white-variant
   asset has been uploaded to .logoLinkFooter. Bistmar's logo lives
   in the center column, hence broad selector. */
.FooterLayout .logoLinkFooter,
.FooterLogoColumnLeft .logoLinkFooter,
.FooterLogoColumnCenter .logoLinkFooter,
.logoLinkFooter {
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

/* Social row — center the icons across the row regardless of which
   t-col they actually live in. */
.FooterSocialRow {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 18px 0 !important;
}
.FooterSocial,
.FooterSocialRow .FooterSocial {
  text-align: center;
}
.FooterSocial a,
.FooterSocialRow a {
  color: #c8d2e0 !important;
  transition: color 0.15s, transform 0.15s;
  margin: 0 6px;
}
.FooterSocial a:hover,
.FooterSocialRow a:hover {
  color: var(--school-gold) !important;
  transform: translateY(-2px);
}
/* Knock the social-icon images out to white so they read on navy */
.FooterSocial img,
.FooterSocialRow img,
.FooterSocial .link-image,
.FooterSocialRow .link-image {
  filter: brightness(0) invert(1);
  opacity: 0.85;
  transition: opacity 0.15s;
  max-height: 18px !important;
  max-width: 18px !important;
}
.FooterSocial a:hover img,
.FooterSocialRow a:hover img {
  opacity: 1;
}

/* Hide the accreditation strip per Bistmar request — they don't want the
   t-col-4 affiliations cell rendered at all. */
.FooterAffiliations,
.FooterSocialRow .FooterAffiliations {
  display: none !important;
}

/* Sitemap row at the very bottom — keep it understated but readable */
.SitemapRow,
.SitemapColumn {
  text-align: center;
  padding: 14px 0 !important;
  font-size: 11px !important;
  letter-spacing: 0.4px;
}
.SitemapColumn a {
  color: rgba(255,255,255,0.55) !important;
  text-decoration: none !important;
  border-bottom: none !important;
}
.SitemapColumn a:hover {
  color: #ffffff !important;
}


/* =========================================
   §10.9c — GRADEBOOK ROW-HIGHLIGHT GAP CLOSE.
   Page: /Clue/Gradebook/* and /Clue/Gradebook-Entry/*

   The outer table cells that wrap each static panel
   (pnlStaticYHeader = names, pnlStaticGradebook = data,
    pnlStaticFooter2 = Quarter) ship with `padding-left: 8px`.
   When a row is clicked, the row-highlight gray bg is painted
   inside each panel — but the 8px of TD padding BETWEEN panels
   stays white. Visually this reads as two gaps in the gray row:
     1. After the student name (between name and data panels)
     2. Before the Quarter column (between data and Quarter panels)

   Minimal fix: set padding-left to 0 ONLY on the panel-wrapping
   TDs. Don't touch widths, row heights, or the empty spacer TDs
   between panels — those are part of the layout. */
table[id$="_tbGradebookTable"] > tbody > tr > td:has(> [id*="pnlStaticYHeader"]),
table[id$="_tbGradebookTable"] > tbody > tr > td:has(> [id*="pnlStaticGradebook"]),
table[id$="_tbGradebookTable"] > tbody > tr > td:has(> [id*="pnlStaticFooter"]) {
  padding-left: 0 !important;
}
/* Collapse the empty spacer TDs in EVERY row of the outer gradebook
   table — the header row (column titles + sort arrows + Quarter
   summary), the data row (student names + grade inputs + Quarter
   marks), and the footer row (Date / Possible / Weight / % Impact
   / Mean / Median / Std Dev).

   Each row has the same outer-table layout:
     [panel TD] [SPACER TD] [Quarter panel TD] [SPACER TD]
   The spacer TDs hold no panel, only whitespace text. Without
   collapsing them in every row, the columns in the data row don't
   align with the column headers above (because the header row's
   spacer is still 26px wide, but the data row's was just collapsed
   to 0). Apply display:none uniformly so all rows shift identically
   and column alignment is preserved across header / data / footer. */
/* Hide the 3rd and 5th spacer TDs in the rows that have 5 cells
   (header row, data row) so the columns align between them. The
   1st cell is the names/corner column, 2nd is the data/header
   panel, 3rd is the spacer between data and Quarter, 4th is the
   Quarter panel, 5th is the right-edge spacer. By targeting
   positions 3 and 5 we collapse both spacers in BOTH header and
   data rows uniformly — without touching the footer row (which
   has different structure) or the corner cell at position 1. */
table[id$="_tbGradebookTable"] > tbody > tr:has(> td > [id*="pnlStaticYHeader"]) > td:nth-child(3),
table[id$="_tbGradebookTable"] > tbody > tr:has(> td > [id*="pnlStaticYHeader"]) > td:nth-child(5),
table[id$="_tbGradebookTable"] > tbody > tr:has(> td > [id*="pnlStaticXHeader"]) > td:nth-child(3),
table[id$="_tbGradebookTable"] > tbody > tr:has(> td > [id*="pnlStaticXHeader"]) > td:nth-child(5) {
  display: none !important;
}


/* =========================================
   §10.9 — GRADEBOOK TOOLBAR ICON ALIGNMENT
   Page: /Clue/Gradebook/* and /Clue/Gradebook-Entry/*

   The gradebook header (`tr.GradeBookTopRow`) renders the toolbar icons
   (sort up/down, swap, export, refresh, popout) in its first TD, and
   per-column sort-arrow buttons in the remaining TDs. Both share the
   `.gb-icon-btn` class.

   Issue: the toolbar TD's content sits at the cell top (y-offset 4px),
   but the per-column sort arrows sit ~24px from the cell top because
   they're stacked above the column-title text. The two sets of icons
   end up on different visual rows — toolbar floats 20px above the
   column header sort arrows.

   Fix: push the toolbar icons down by ~20px so they share the same
   horizontal row as the column-header sort arrows. Use a high-
   specificity selector so this overrides the ASCX inline `<style>`
   block which sets `top: -3px` on the same icons. */
.gb-layout .GradeBookTopRow > td:first-child .gb-icon-btn,
tr.GradeBookTopRow > td:first-child .gb-icon-btn {
  position: relative !important;
  top: 17px !important;       /* (-3px existing) + 20px gap = 17px down */
}


/* =========================================
   11. ACCESSIBILITY
   ========================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* =========================================
   12. RESPONSIVE
   ========================================= */
@media (max-width: 900px) {
  .MenuColumn .menuDefaultNavWrapper > ul > li > a {
    padding: 14px 18px !important;
    letter-spacing: 1.2px !important;
  }
  .PageTitleRow h1, .PageTitleColumn h1, .PageTitleLabelColumn h1,
  .PageTitleRow h2, .PageTitleColumn h2, .PageTitleLabelColumn h2 {
    font-size: 32px !important;
  }
}


/* =========================================
   12. GRADEBOOK ENTRY visual refinements (Bistmar-only).
   ----------------------------------------
   Per PCR_Gradebook_Entry_Redesign_Proposal.html, items 1-4.
   Scoped to table[id$="tbGradebookTable"] (added on the gradebook control's outer
   table) so even within Bistmar nothing else is affected.
   The structural fixes (gap closing, alignment, vertical center,
   icon Material font) live in the gradebook control itself
   because they ship with the new icon code for every tenant.
   ========================================= */

/* §12.D — Outer card frame: rounded corners, subtle shadow, thin
   line border. Per design proposal `.gradebook-wrap`. Applied
   directly to the gradebook table; `overflow: hidden` clips the
   first/last row corners to the radius. */
table[id$="tbGradebookTable"] {
  border-radius: 10px !important;
  border: 1px solid #e3e8ee !important;
  box-shadow: 0 1px 2px rgba(10, 37, 64, 0.05) !important;
  background: #fff !important;
  overflow: hidden;
}

/* §12.S — Structural gap fix between the column-header row and
   the first data row. PCR's outer TDs holding pnlStaticXHeader /
   pnlStaticGradebook each carry ~6.4px top+bottom padding from a
   global TD rule, plus pnlStaticXHeader has an inline Height=35px
   that exceeds its 27px content. Together that creates a ~21px
   white gap between header bottom and data top.
   This fix is universal (not Bistmar-specific styling) — duplicated
   here in the tenant CSS so live Bistmar gets it immediately;
   the same rules also live in GradeBookGridInternal.ascx for the
   eventual platform release. */
table[id$="tbGradebookTable"] > tbody > tr > td:has(> [id$="pnlStaticXHeader"]),
table[id$="tbGradebookTable"] > tbody > tr > td:has(> [id$="pnlStaticSummaryTop"]),
table[id$="tbGradebookTable"] > tbody > tr > td:has(> [id$="pnlStaticYHeader"]),
table[id$="tbGradebookTable"] > tbody > tr > td:has(> [id$="pnlStaticGradebook"]),
table[id$="tbGradebookTable"] > tbody > tr > td:has(> [id$="scrollX"]),
table[id$="tbGradebookTable"] > tbody > tr > td:has(> [id$="pnlStaticFooter"]),
table[id$="tbGradebookTable"] > tbody > tr > td:has(> [id$="pnlStaticFooter2"]) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
table[id$="tbGradebookTable"] [id$="pnlStaticXHeader"],
table[id$="tbGradebookTable"] [id$="pnlStaticSummaryTop"] {
  height: auto !important;
}
/* The trBottomStatistics row's LEFT TD contains the
   .GradebookFooter labels table directly (not wrapped in a
   #pnlStatic* div), so the :has() rule above misses it. Catch
   all TDs in this row to keep label and value rows starting at
   the same top. */
table[id$="tbGradebookTable"] [id$="trBottomStatistics"] > td {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Breathing room between the column-title text (underlined) and
   the data row's input box. The cell's own bg color (blue for
   .GradebookCategory, gold-soft for .GradebookReported) extends
   into this padding so column tints stay continuous.

   vertical-align: bottom anchors the icons + title text to the
   bottom of the cell. When some titles wrap to 2 lines and
   inflate the row to 63px, shorter cells still keep their content
   adjacent to the first data row instead of leaving whitespace
   between header text and data. */
table[id$="tbGradebookTable"] .GradebookHeader tr td {
  padding-bottom: 4px !important;
  vertical-align: bottom !important;
}
/* Vertically center the student name inside the .gradebookHeight
   sizer DIV. The DIV is sized by JS (ResizeMe) to match the data
   row height, but the inner <span> with the name is only the line
   height of the link. */
table[id$="tbGradebookTable"] .GradebookRowHeader td .gradebookHeight {
  display: flex;
  align-items: center;
}

/* Vertically center read-only summary content (.GradebookCategory
   aggregates like 30/36 and .GradebookReported grades like B 85)
   inside their .ResizeMe panel. SCOPED to read-only cells only —
   editable cells contain an <input> + a value-label that need to
   sit horizontally side-by-side (e.g. "Enter Percent Show Value"
   mode); flex on those would push the label into the next column. */
table[id$="tbGradebookTable"] .GradebookGrades td.GradebookCategory .ResizeMe,
table[id$="tbGradebookTable"] .GradebookGrades td.GradebookReported .ResizeMe {
  display: flex !important;
  align-items: center;
}

/* §12.4 — Row zebra striping. Background on the TR so column cells
   with their own bg (.GradebookCategory blue, .GradebookReported
   gold-soft) keep their tint and overlay transparently. */
table[id$="tbGradebookTable"] .GradebookGrades tr.GradebookAlternateRow,
table[id$="tbGradebookTable"] .GradebookRowHeader tr.GradebookAlternateRow {
  background-color: #fafbfc;
}

/* §12.3 — Reported cells (Progress G / Quarter):
   gold-soft cream bg on every reported cell (header/data/footer)
   for column continuity. Cormorant Garamond serif on data + footer
   cells only (excludes header so the column-title labels keep
   PCR's default 11px sans and stay vertically aligned with
   the other column titles).
   Nested <em>/<i> (the secondary number suffix like "85" in
   "85.4 85") get a darker brown for stronger contrast. */
table[id$="tbGradebookTable"] td.GradebookReported {
  background-color: #f3eada !important;
}
table[id$="tbGradebookTable"] .GradebookGrades td.GradebookReported,
table[id$="tbGradebookTable"] .GradebookFooter td.GradebookReported {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 14px !important;
  color: var(--school-navy, #0a2540) !important;
  font-weight: 600 !important;
}
table[id$="tbGradebookTable"] .GradebookGrades td.GradebookReported em,
table[id$="tbGradebookTable"] .GradebookGrades td.GradebookReported i,
table[id$="tbGradebookTable"] .GradebookFooter td.GradebookReported em,
table[id$="tbGradebookTable"] .GradebookFooter td.GradebookReported i {
  font-style: italic;
  color: #5a4a2a;
  font-size: 12.5px;
  margin-left: 4px;
  font-weight: 600;
}

/* §12.2 — Footer rows (Date / Possible / Weight / % Impact):
   warm cream bg, navy uppercase labels on the LEFT side,
   muted body text on the RIGHT side. Excludes Category and
   Reported cells so Quiz/Test blue and Progress G/Quarter
   gold-soft column tints stay continuous through the footer.

   IMPORTANT: every row on both sides shares a fixed 18px line
   height so the LEFT-side label rows (separate <td>s) line up
   with the RIGHT-side value lines (stacked <span>s + <br>s in a
   single <td>). Without this, font-size differences accumulate
   over 9 rows and labels drift away from their data. */
table[id$="tbGradebookTable"] [id$="trBottomStatistics"] > td .GradebookFooter td:not(.GradebookCategory):not(.GradebookReported) {
  background-color: #fdfcf8;
  color: #5a6b7c;
  font-size: 11px;
  line-height: 18px;
  padding-top: 0;
  padding-bottom: 0;
  height: 18px;
}
/* Right-side value cells: also pin line-height so each <span>/<br>
   line is exactly 18px tall, matching the LEFT side rows. */
table[id$="tbGradebookTable"] [id$="trBottomStatistics"] > td:nth-child(2) .GradebookFooter td,
table[id$="tbGradebookTable"] [id$="trBottomStatistics"] > td:nth-child(2) .GradebookFooter td span,
table[id$="tbGradebookTable"] [id$="trBottomStatistics"] > td:nth-child(2) .GradebookFooter td div {
  line-height: 18px;
}
/* Left-side label column. Uppercase navy default; the §12.1 rule
   overrides Mean/Median/StdDev to italic. Same 18px row height.
   !important needed because the general "td:not(.GradebookCategory)
   :not(.GradebookReported)" rule above carries higher specificity
   from the chained :not()s. */
table[id$="tbGradebookTable"] [id$="trBottomStatistics"] > td:first-child .GradebookFooter td {
  background-color: #fdfcf8 !important;
  color: var(--school-navy, #0a2540) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  line-height: 18px !important;
  height: 18px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  text-align: right !important;
  padding-right: 14px !important;
}

/* §12.1 — Stats labels (Mean / Median / Std Dev = last 3 rows of
   the LEFT footer label column). Cormorant Garamond italic in
   navy; cancels the uppercase from §12.2. Same 18px row height
   so they still line up with the right-side value lines. */
table[id$="tbGradebookTable"] [id$="trBottomStatistics"] > td:first-child .GradebookFooter tr:nth-last-of-type(-n+3) td {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  line-height: 18px;
  height: 18px;
  font-weight: 600;
  color: var(--school-navy, #0a2540);
  text-transform: none;
  letter-spacing: 0.2px;
}


/* =========================================
   §13 — REPORT CARD ENTRY
   Scope:  /Clue/Report-Card-Entry/* (any pid that hosts the
           MarksEditInternalControl + dlHeadings + gvMarks data tree).
   Driver: ID-suffix selectors keyed off the PCR control IDs
           (`MarksEditInternalControl`, `_divText`, `_divAverage`,
           `_divNonAverage`) + `gvMarks` grid wrapper. No new markup
           required; this is a pure-CSS layer.
   ========================================= */

/* §13.1 — GRADE CELL: collapse the broken vertical stack into a single
   horizontal row (status dots → numeric input → letter dropdown).

   SCOPING NOTE: every rule in §13 is gated by
     body:has(table[id$="_dlHeadings_ctl01_gvMarks"])
   The Report Card Entry page renders TWO gvMarks tables (Grades +
   Teacher Reflection) → the dlHeadings repeater produces ctl00 and
   ctl01 children. Other pages that use MarksEditInternalControl
   (Progress Details, Progress Marks, Report Card Marks, etc.)
   render only ctl00. Gating on the existence of ctl01 limits the
   entire §13 redesign to Report Card Entry without affecting any
   other page that shares the same control hierarchy.

   Default markup that ships:
     <td>
       <div>                                  <-- outer shell, block
         <div style="float:left; width:10px"> <-- status dots, NARROW
           <img imgIsSavedInStudentMarks>
           <img imgIsAverageOverwritten>
           <img imgIsAverageNonConvertable>
         </div>
         <div ..._divText style="float:left">
           <div ..._divAverage style="float:left; clear:both"> ...input</div>
           <div ..._divNonAverage style="float:left; clear:both"> ...combo</div>
         </div>
       </div>
     </td>

   Bugs (on Report Card Entry):
     1. Status-dot div is hard-pinned to width:10px → 7px-wide imgs wrap
        into a 3-row column.
     2. divAverage / divNonAverage have inline clear:both → forced row
        break even though both are 100px wide in a 200px container.
     3. Numeric input is 78px wide → six-decimal averages truncate
        ("84.6931", "85.4991", "84.4769", "89.0384" all clipped). */

/* Outer cell shell: become a flex row, vertically centered. */
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) [id*="MarksEditInternalControl"] [id*="_gvMarks"] tr.RowStyle > td > div,
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) [id*="MarksEditInternalControl"] [id*="_gvMarks"] tr.AlternatingRowStyle > td > div {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  width: auto !important;
  min-height: 36px !important;
}

/* The status-dot column: kill the inline 10px width + float, make it a
   horizontal flex row of up to 3 squares. The inline
   style="float:left;width:10px" needs !important to be defeated.

   FIXED WIDTH: 32px reserves room for the maximum case (3 dots × 7px +
   2 gaps × 3px = 27px ≈ 32px with breathing room). With width auto the
   column collapsed to fit 1, 2, or 3 dots — pushing the numeric input
   and letter combo to different horizontal positions across rows.
   Fixed width keeps every grade cell's input/combo at the same x. */
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) [id*="MarksEditInternalControl"] [id*="_gvMarks"] tr.RowStyle > td > div > div:first-child:not([id$="_divText"]),
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) [id*="MarksEditInternalControl"] [id*="_gvMarks"] tr.AlternatingRowStyle > td > div > div:first-child:not([id$="_divText"]) {
  float: none !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 3px !important;
  width: 32px !important;
  min-width: 32px !important;
  flex: 0 0 32px !important;
  height: auto !important;
}

/* divText: row, side-by-side input + combo. */
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) [id*="MarksEditInternalControl"] [id$="_divText"] {
  float: none !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  margin: 0 !important;
}

/* divAverage / divNonAverage: kill clear:both + float, become inline.
   `flex-shrink: 0` is critical — the parent divText is constrained by the
   table column width, and without this the children get squished below
   their declared widths and the average values truncate.  Use explicit
   widths so flex layout has a deterministic basis. */
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) [id*="MarksEditInternalControl"] [id$="_divAverage"] {
  float: none !important;
  clear: none !important;
  display: inline-flex !important;
  align-items: center !important;
  width: 100px !important;
  flex: 0 0 100px !important;
  height: auto !important;
}
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) [id*="MarksEditInternalControl"] [id$="_divNonAverage"] {
  float: none !important;
  clear: none !important;
  display: inline-flex !important;
  align-items: center !important;
  width: 80px !important;
  flex: 0 0 80px !important;
  height: auto !important;
}

/* Widen the numeric input wrapper so 6-decimal averages don't truncate.
   Telerik's RadNumericTextBox uses `span.riSingle.RadInput_Silk` as the
   wrapper with inline `style="width:80%"`. Override with !important +
   min-width so flex shrinking can't reduce it below 96px. */
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) [id*="MarksEditInternalControl"] [id$="_divAverage"] span.riSingle.RadInput,
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) [id*="MarksEditInternalControl"] [id$="_divAverage"] span.riSingle.RadInput.RadInput_Silk {
  width: 100% !important;
  min-width: 100px !important;
  height: 30px !important;
  flex: 1 0 auto !important;
}
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) [id*="MarksEditInternalControl"] [id$="_divAverage"] input.riTextBox {
  width: 100% !important;
  min-width: 100px !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums !important;
}

/* Letter-grade combo: stays narrow (it only needs to show "A-", "B+"
   plus the dropdown arrow). The combo ships with `overflow: hidden auto`
   on the outer div — when its inner table renders 13px taller than the
   30px combo height, the auto vertical scrollbar wedges in and renders
   ▲/▼ scroll-arrow buttons that look like spurious spinner controls
   (and hide the letter label behind the track).

   IMPORTANT: do NOT use `overflow: hidden` on `.RadComboBox` — the
   open-dropdown panel (`div.rcbSlide` containing the list of grades)
   is rendered as a positioned-absolute CHILD of the combo, so a
   `overflow: hidden` on the parent clips the entire grade list and
   the dropdown becomes unusable.

   Instead: clamp the inner table height to 30px (so its content no
   longer overflows the combo box) AND visually hide any residual
   webkit scrollbar via `::-webkit-scrollbar { display: none }`. The
   parent overflow can stay at the Telerik default. */
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) [id*="MarksEditInternalControl"] [id$="_divNonAverage"] .RadComboBox {
  height: 30px !important;
  width: 80px !important;
  /* explicitly DO NOT set overflow — would clip the open dropdown */
}
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) [id*="MarksEditInternalControl"] [id$="_divNonAverage"] .RadComboBox::-webkit-scrollbar,
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) [id*="MarksEditInternalControl"] [id$="_divNonAverage"] .RadComboBox::-webkit-scrollbar-button {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) [id*="MarksEditInternalControl"] [id$="_divNonAverage"] .RadComboBox > table {
  height: 30px !important;
  width: 100% !important;
}
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) [id*="MarksEditInternalControl"] [id$="_divNonAverage"] .RadComboBox > table tbody,
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) [id*="MarksEditInternalControl"] [id$="_divNonAverage"] .RadComboBox > table tr {
  height: 30px !important;
}
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) [id*="MarksEditInternalControl"] [id$="_divAverage"] span.riSingle.RadInput::-webkit-scrollbar,
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) [id*="MarksEditInternalControl"] [id$="_divAverage"] span.riSingle.RadInput.RadInput_Silk::-webkit-scrollbar,
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) [id*="MarksEditInternalControl"] [id$="_divAverage"] span.riSingle.RadInput::-webkit-scrollbar-button,
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) [id*="MarksEditInternalControl"] [id$="_divAverage"] span.riSingle.RadInput.RadInput_Silk::-webkit-scrollbar-button {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* §13.1.b — REMOVED: Cormorant italic on letter combo input.
   Per latest design direction, all dropdowns in the portal use the
   unified Status-select treatment (Inter regular 14px, applied
   globally in §10.1a above). No per-page combo typography override. */

/* Ensure the grade cells get enough horizontal room. The TD column width
   is auto-sized; this hint pushes Quarter through Work Habit cells to a
   minimum width that fits 96px input + 6px gap + 80px combo + 10px gap +
   ~30px status dots = ~222px. */
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) [id*="MarksEditInternalControl"] [id*="_gvMarks"] tr.RowStyle > td:not(:first-child),
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) [id*="MarksEditInternalControl"] [id*="_gvMarks"] tr.AlternatingRowStyle > td:not(:first-child) {
  min-width: 230px;
}


/* §13.2 — GRADES & TEACHER REFLECTION TABLE FRAMING.
   Both tables share the gvMarks suffix. Wrap each in a card frame
   (rounded border + soft shadow), promote the THEAD with a navy uppercase
   header style + 2px gold underline, italicize the Topic column in
   Cormorant for editorial polish, and zebra subsequent data rows. */

/* Card frame on each gvMarks grid. */
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) table[id$="_gvMarks"] {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid var(--line, #e3e8ee) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(10, 37, 64, 0.05) !important;
  margin: 0 0 18px 0 !important;
}

/* Header row (first <tr>): navy uppercase labels, gold 2px underline. */
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) table[id$="_gvMarks"] > tbody > tr:first-child > td,
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) table[id$="_gvMarks"] > tbody > tr:first-child > th {
  background: #fdfcf8 !important;          /* warm cream */
  color: var(--school-navy, #0a2540) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.6px !important;
  padding: 11px 14px !important;
  border-bottom: 2px solid var(--school-gold, #c9a86a) !important;
  vertical-align: middle !important;
}

/* Cell padding + separators. */
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) table[id$="_gvMarks"] > tbody > tr > td {
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--line, #e3e8ee) !important;
  border-right: 1px solid var(--line, #e3e8ee) !important;
  vertical-align: middle !important;
}
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) table[id$="_gvMarks"] > tbody > tr > td:last-child {
  border-right: none !important;
}
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) table[id$="_gvMarks"] > tbody > tr:last-child > td {
  border-bottom: none !important;
}

/* First column (Topic) — Cormorant Garamond italic + warm bg. */
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) table[id$="_gvMarks"] > tbody > tr:not(:first-child) > td:first-child {
  background: #fdfcf8 !important;
  color: var(--school-navy, #0a2540) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1px !important;
}

/* Zebra-stripe data cells (skip header, skip topic column). */
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) table[id$="_gvMarks"] > tbody > tr:nth-child(even) > td:not(:first-child) {
  background: #fcfdfe !important;
}


/* §13.3 — LEGEND IMAGES.
   The legend at the bottom of the grade grid renders as 4 raw <img>
   elements directly inside `.CustomMarksGridCSS`, with text nodes
   between them ("- The grade has been saved …"). Without an explicit
   wrapping element we can't make a true card strip via CSS alone, but
   we can polish the imgs (round them, give consistent size + spacing)
   and add visual breathing room above the whole legend area. */
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) .CustomMarksGridCSS > img[id$="_imgIsSavedInStudentMarks"],
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) .CustomMarksGridCSS > img[id$="_imgIsNotSavedInStudentMarks"],
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) .CustomMarksGridCSS > img[id$="_imgIsAverageOverwritten"],
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) .CustomMarksGridCSS > img[id$="_imgIsAverageNonConvertable"] {
  width: 11px !important;
  height: 11px !important;
  border-radius: 2px !important;
  vertical-align: middle !important;
  margin: 0 6px 0 18px !important;
  box-shadow: 0 0 0 1px rgba(10, 37, 64, 0.05);
}
/* The first legend img marks the start of the legend strip — give it
   extra top spacing and remove the leading left margin. */
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) .CustomMarksGridCSS > img[id$="_imgIsSavedInStudentMarks"] {
  margin-left: 0 !important;
}


/* §13.4 — REMOVED: Status select pill restyle. Individual entry
   controls (selects, inputs) should keep the unified portal-wide
   appearance from §10. Re-styling a single dropdown breaks consistency
   across pages that share the same control type. */


/* §13.5 — SAVE BUTTON (primary action — gold accent).
   Page renders 2 Save buttons (top + bottom action rows) plus a
   Save & Next. Treat Save as the gold primary action; leave the
   navy Save & Next / Previous / Next styles inherited from the
   global button rule.

   Specificity: the global §9 navy submit-button rule is
     input[type="submit"]:not(.rigActionButton):not(.rltbActionButton)
       :not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext)
       :not(.rgPageLast):not(#__never__)
   = (1,7,1). We replicate the same :not() chain on a
   :has()-scoped + value-attribute-matched selector so the rule
   attribute-class chain plus the :has() pseudo pushes past it.  */
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) input[type="submit"][value="Save"]:not(.rigActionButton):not(.rltbActionButton):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(#__never__) {
  background-color: var(--school-gold, #c9a86a) !important;
  background-image: none !important;
  background: var(--school-gold, #c9a86a) !important;
  border: 1px solid var(--school-gold, #c9a86a) !important;
  color: var(--school-navy, #0a2540) !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  box-shadow: 0 1px 2px rgba(10, 37, 64, 0.08) !important;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease !important;
}
body:has(table[id$="_dlHeadings_ctl01_gvMarks"]) input[type="submit"][value="Save"]:not(.rigActionButton):not(.rltbActionButton):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(#__never__):hover {
  background-color: var(--school-gold-dark, #b08e54) !important;
  background: var(--school-gold-dark, #b08e54) !important;
  border-color: var(--school-gold-dark, #b08e54) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.ButtonFloat.listActions a::after,
#ActionsRight .ButtonFloat.listActions a::after,
.RadDockZone .ButtonFloat.listActions a::after {
  border: none !important;
  transform: translateY(-50%) !important;
  opacity: 1 !important;
}

/* FIX 2 — heavy dark underline below the "Quick Actions" title.
   The title div inside the textDisplayWrapper card slice is emitted
   with class .control-header, and production gives control-headers a
   1.5px dark border-bottom. Inside the Quick Actions card this reads
   as a harsh black bar. Soften it to the standard hairline. Scoped to
   the right-column wrapper only, so page-level control-headers keep
   their existing treatment. */
#ActionsRight [id*="textDisplayWrapper" i] .control-header,
.RadDockZone [id*="textDisplayWrapper" i] .control-header {
  border-bottom: 1px solid var(--line) !important;
  padding-bottom: 8px !important;
}



/* FIX 3 — labels sit high against the icon halos.
   The tile and row anchors are 36px/32px blocks whose single text line
   (~17px) hugs the top edge, while the icon and halo pseudos center at
   top:50%. The label therefore rides ~8px above the icon's midline.
   Flex-center the anchors: absolutely-positioned pseudos (icon, halo)
   are not flex items, so they are unaffected. The :link/:visited
   variants are required to outrank the base file's display:block rules
   of equal selector form. */
.ButtonFloat.listActions a,
.ButtonFloat.listActions a:link,
.ButtonFloat.listActions a:visited,
.ButtonFloat.quickAction a,
.ButtonFloat.quickAction a:link,
.ButtonFloat.quickAction a:visited {
  display: flex !important;
  align-items: center !important;
}