.primary {
  color: var(--theme-primary);
}

.primaryShade {
  color: var(--theme-primary-shade);
}

.secondary {
  color: var(--theme-secondary);
}

.default {
  color: var(--theme-primary);
}

.badge-default {
  background-color: var(--theme-primary);
  color: white;
}

/* background image on all pages */
/* .page-content {
  background-image: url('/system/_src/_img/whitewaves.png');
  background-position: top;
  background-position-y: -800px;
  background-attachment: fixed;  
  background-repeat: no-repeat;
} */

/* make panel slightly translucent and add a blur effect like glassmorphism */
/* .panel {
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(5px);
} */

.fad {
  padding: 0 2px 0 2px;
}

.hta-custom-logo {
  display: none;
  /* fade in when it appears */
  animation: fadeIn 0.5s ease-in-out; 

}
/* fade out it when it disappears */
.hta-custom-logo.fade-out {
  animation: fadeOut 0.5s ease-in-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.nav-function-hidden .hta-custom-logo {
  display: block;
  margin-left: -25px;
  margin-right: 9px;
}

.mobile-view-activated .hta-custom-logo {
  display: block;
  transition: none;
  margin-left: -10px;
  margin-right: 9px;
}

.nav-filter {
  margin: 0;
  opacity: 1;
  height: 60px;
  visibility: visible;
  -webkit-transform: scale(0.3);
  transform: scale(1);
}
.nav-filter input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}
/* Dash board styles */

.dashboard-well {
  position: relative;
  padding: 10px;
  border-radius: 10px;
  background-color: rgba(244, 244, 244, 1);
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
}

.mod-skin-dark:not(.mod-skin-light) .dashboard-well {
  background-color: rgba(10, 10, 10, 0.6);
}

code {
  background-color: rgba(3, 18, 45, 0.75);
  color:#fff;
  border-radius: 10px;
  padding: 10px;
  font-family: monospace;
  font-size: 14px;
  overflow-x: auto;
}

/* ==========================================================================
   Modern Pre & Code Block Styles
   ========================================================================== */

pre {
  background: linear-gradient(145deg, #1e1e2e 0%, #2d2d3f 100%);
  color: #e4e4e7;
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  margin: 1rem 0;
  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', 'Cascadia Code', Consolas, 'Courier New', monospace;
  font-size: 0.85rem;
  line-height: 1.7;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  position: relative;
  tab-size: 4;
  -moz-tab-size: 4;
  white-space: pre;
  word-break: normal;
  word-wrap: normal;
}

pre::before {
  content: '';
  position: absolute;
  top: 0.875rem;
  left: 1rem;
  display: flex;
  gap: 0.375rem;
}

/* Scrollbar styling for pre blocks */
pre::-webkit-scrollbar {
  height: 6px;
}

pre::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 3px;
}

pre::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

pre::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Inline code (not inside pre) */
:not(pre) > code {
  background-color: rgba(0, 173, 103, 0.08);
  color: #00875a;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.875em;
  font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
  border: 1px solid rgba(0, 173, 103, 0.15);
}

/* Code inside pre blocks */
pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
  border: none;
  font-size: inherit;
  line-height: inherit;
}

/* Dark mode adjustments */
.mod-skin-dark:not(.mod-skin-light) pre {
  background: linear-gradient(145deg, #0d0d14 0%, #1a1a28 100%);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.mod-skin-dark:not(.mod-skin-light) :not(pre) > code {
  background-color: rgba(0, 173, 103, 0.12);
  color: #4ade80;
  border-color: rgba(0, 173, 103, 0.2);
}

/* ------------------- begin dashboard posts: wells + audience info ------------------- */

/* Section well — each tag/section group is a visible bordered card. */
.hh-section-well {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 6px 6px 0;
  background: #fff;
}
.mod-skin-dark:not(.mod-skin-light) .hh-section-well {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: none;
}

/* Section name shown as a header at the top of a section's well. Curator
   toggle ("Show name") in the sections editor; on by default. */
/* --- Section header treatment -------------------------------------------
   The heading was already large, centred and uppercase, but size alone does
   not stop the eye — an EDGE does. Three things do the work, none of them
   adding chrome:
     1. a full-width rule under the title (the scroll-stop marker),
     2. a stronger well border + more gap, so sections read as separate
        objects rather than one continuous white field,
     3. a little more air above the title.
   The old text-shadow is dropped: at 40px uppercase it muddied the letterforms
   rather than lifting them off the page.

   ALIGNMENT IS ONE LINE. Change --hh-section-align below to `center` to put
   the titles and rules back to centred; nothing else needs to move. */
:root { --hh-section-align: left; }

.hh-section-well {
  border-color: rgba(0, 0, 0, 0.14);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 16px rgba(0, 0, 0, 0.05);
}
.hh-section-well--titled { padding-top: 4px; }

/* The rule runs the full width of this padded box, so its ends line up with
   the post wells below rather than floating in the middle of the card. */
.hh-section-head {
  text-align: var(--hh-section-align);
  padding: 10px 18px 0;
}
.hh-section-well .hh-section-title {
  margin: 0;
  padding-top: 4px;
  text-align: var(--hh-section-align);
  text-transform: uppercase;
  font-size: clamp(20px, 6vw, 40px);
  font-family: Roboto, sans-serif;
  letter-spacing: 0.02em;
  text-shadow: none;
  word-break: break-word;
}
.hh-section-rule {
  display: block;
  width: 100%;
  height: 3px;
  margin: 10px 0 2px;
  border-radius: 2px;
  /* Same source as .sticky-menu .menu-button's default fill, so an untinted
     section's rule always matches its untinted button — including on skins
     where --theme-primary is not green. */
  background: var(--theme-primary, #00AD67);
}

/* The rule takes the colour of this section's STICKY MENU BUTTON, so the
   button you click and the section you land on agree. PHP resolves which
   variant applies (see NewsClass::sectionAccentColor) — including the
   staff-only default of "info" blue, which is why a staff-only section gets a
   blue button AND a blue rule. Values are copied from .menu-button--<variant>
   above — keep the two lists in step.
   `light` is the one exception: that button is near-white (#f1f3f5) and would
   be invisible as a 3px rule, so it uses the button's BORDER colour instead. */
.hh-section-well--primary   .hh-section-rule { background: #007bff; }
.hh-section-well--secondary .hh-section-rule { background: #6c757d; }
.hh-section-well--success   .hh-section-rule { background: #28a745; }
.hh-section-well--danger    .hh-section-rule { background: #dc3545; }
.hh-section-well--warning   .hh-section-rule { background: #ffc107; }
.hh-section-well--info      .hh-section-rule { background: #17a2b8; }
.hh-section-well--light     .hh-section-rule { background: #ced4da; }
.hh-section-well--dark      .hh-section-rule { background: #343a40; }

.mod-skin-dark:not(.mod-skin-light) .hh-section-well {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}

/* Per-post well — bordered box around an individual post. Removed when the
   post's "hide well" checkbox is set (.hh-post-nowell keeps spacing only). */
.hh-post-well {
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 8px;
  padding: 16px 18px;
  background: rgba(0, 0, 0, 0.015);
  height: 100%;
}
.mod-skin-dark:not(.mod-skin-light) .hh-post-well {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.02);
}
.hh-post-nowell {
  border: 0;
  padding: 0;
  background: transparent;
}

/* Staff portal audience info — plain, lightened, informational text (replaces
   the old coloured audience info). Right-aligned so it sits where the audience info used to.
   The "why you see this" bits (a group you're in, your own name) are bolder. */
.hh-aud-info {
  text-align: right;
  font-size: 11px;
  line-height: 1.5;
  margin: 2px 0 12px;
  color: rgba(0, 0, 0, 0.45);
}
.hh-aud-info .hh-aud-line { }
.hh-aud-info .hh-aud-label {
  font-weight: 600;
  color: rgba(0, 0, 0, 0.55);
}
.hh-aud-info .hh-aud-mine {
  font-weight: 700;
  color: rgba(0, 0, 0, 0.72);
}
.mod-skin-dark:not(.mod-skin-light) .hh-aud-info { color: rgba(255, 255, 255, 0.45); }
.mod-skin-dark:not(.mod-skin-light) .hh-aud-info .hh-aud-label { color: rgba(255, 255, 255, 0.6); }
.mod-skin-dark:not(.mod-skin-light) .hh-aud-info .hh-aud-mine { color: rgba(255, 255, 255, 0.85); }

/* Audience info — render every targeted audience as a small chip. */
.hh-audience-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin: 2px 0 12px;
}
.hh-audience-info-item {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  padding: 2px 10px;
  border-radius: 999px;
  color: rgb(0, 122, 71);
  background: rgba(0, 173, 103, 0.12);
  border: 1px solid rgba(0, 173, 103, 0.28);
  white-space: nowrap;
}
.mod-skin-dark:not(.mod-skin-light) .hh-audience-info-item {
  color: #6ee7a8;
  background: rgba(0, 173, 103, 0.16);
  border-color: rgba(0, 173, 103, 0.35);
}
/* Staff portal: external/family audience info render SOLID HH green (front-end family
   portals keep the lighter tone above). */
.hh-audience-info--solid .hh-audience-info-item {
  color: #fff;
  background: var(--hta-green, #00AD67);
  border-color: var(--hta-green, #00AD67);
}
/* Staff portal external/family audience info INSIDE the combined blue+green row. It can't
   inherit --solid (that would also recolor the sibling blue staff audience info), so it
   carries its own solid-green modifier. Placed after the base .hh-audience-info-item
   rule so it wins on equal specificity. */
.hh-audience-info-item--external {
  color: #fff;
  background: var(--hta-green, #00AD67);
  border-color: var(--hta-green, #00AD67);
}
.mod-skin-dark:not(.mod-skin-light) .hh-audience-info-item--external {
  color: #fff;
  background: var(--hta-green, #00AD67);
  border-color: var(--hta-green, #00AD67);
}
/* Staff-group audience info — HH info blue, distinct from the green external audience info. The
   group the VIEWER belongs to (.hh-audience-info-mine) is SOLID blue to signal "this is
   why you see this post"; the rest stay light blue. */
.hh-audience-info-item--staff {
  color: #0b5cad;
  background: rgba(0, 102, 204, 0.12);
  border-color: rgba(0, 102, 204, 0.30);
}
.hh-audience-info-item--staff.hh-audience-info-mine {
  color: #fff;
  background: var(--hta-blue, #0066CC);
  border-color: var(--hta-blue, #0066CC);
}
.mod-skin-dark:not(.mod-skin-light) .hh-audience-info-item--staff {
  color: #8fbdf0;
  background: rgba(0, 102, 204, 0.22);
  border-color: rgba(0, 102, 204, 0.42);
}
/* Staff audience info + external audience info now share ONE .hh-audience-info flex row
   (built in NewsClass::staffPortalAudienceInfoHTML), so they wrap together and can
   never overlap. Green external audience info come first, then light-blue non-member
   groups, then highlighted member groups, then — when the viewer is
   individually named — their own name audience info furthest right. */
/* My/All audience-view toggle (staff portal, permission holders only). */
.hh-staff-audview-toggle {
  display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 13px;
}
.hh-staff-audview-toggle .hh-staff-audview-label { color: #6c757d; font-weight: 600; }
.hh-staff-audview-toggle a {
  padding: 3px 12px; border-radius: 999px; text-decoration: none;
  border: 1px solid rgba(0, 173, 103, 0.35); color: rgb(0, 122, 71);
}
.hh-staff-audview-toggle a.active {
  background: var(--hta-green, #00AD67); color: #fff; border-color: var(--hta-green, #00AD67);
}

/* Campus buttons live INSIDE the audience-view row — one mutually-exclusive
   scope selector (My / All / a campus), so they read as peers of My+All but
   stay visually distinct (blue) from the green audience choices. */
.hh-staff-audview-toggle { flex-wrap: wrap; }
.hh-staff-audview-toggle a.hh-campus-btn {
  border-color: rgba(15, 111, 207, 0.35);
  color: rgb(15, 90, 168);
}
.hh-staff-audview-toggle a.hh-campus-btn.active {
  background: var(--hta-blue, #0F6FCF); color: #fff; border-color: var(--hta-blue, #0F6FCF);
}

/* Division narrower — sits INLINE at the end of the same row, after the campus
   buttons, separated by a divider. Only rendered once a campus is picked. */
.hh-campus-division-filter {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-left: 4px; padding-left: 12px; border-left: 1px solid rgba(0, 0, 0, 0.15);
}
.mod-skin-dark:not(.mod-skin-light) .hh-campus-division-filter { border-left-color: rgba(255, 255, 255, 0.18); }
.hh-campus-division-filter a {
  padding: 3px 12px; border-radius: 999px; text-decoration: none; font-size: 12px;
  border: 1px solid rgba(0, 0, 0, 0.18); color: rgba(0, 0, 0, 0.6);
}
.mod-skin-dark:not(.mod-skin-light) .hh-campus-division-filter a {
  border-color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.7);
}
.hh-campus-division-filter a.active {
  background: rgba(0, 0, 0, 0.75); color: #fff; border-color: rgba(0, 0, 0, 0.75);
}

/* "View as" read-only preview banner (system/administration/view_as.php). */
.hh-viewas-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fff7e6; border: 1px solid #f0c568; color: #6b4a08;
  border-radius: 8px; padding: 10px 16px; margin-bottom: 18px; font-size: 14px;
}
.hh-viewas-banner .hh-viewas-eye { font-size: 16px; }
.hh-viewas-banner .hh-viewas-simdate {
  padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.06); font-size: 12px;
}
.hh-viewas-banner .hh-viewas-datebar {
  display: flex; align-items: center; gap: 6px; margin: 0;
  font-size: 12px;
}
.hh-viewas-banner .hh-viewas-datebar label { margin: 0; font-weight: 600; }
.hh-viewas-banner .hh-viewas-datebar input[type="date"] {
  border: 1px solid #f0c568; border-radius: 6px; padding: 2px 8px;
  background: #fff; color: #6b4a08; font-size: 12px;
}
.hh-viewas-banner .hh-viewas-today {
  color: #6b4a08; text-decoration: underline; font-size: 12px;
}
.hh-viewas-banner .hh-viewas-exit {
  margin-left: auto; font-weight: 600; text-decoration: none; color: #6b4a08;
  border: 1px solid #f0c568; border-radius: 999px; padding: 2px 12px;
}

/* HTA branded content authored in the dashboard editor — must match the
   editor's own preview (system/administration/dashboard/_css/dashboard.css).
   Without these the saved <a class="hh-btn-green"> renders as a plain link on
   the live portals. */
.hh-btn-green {
  display: inline-block;
  /* Built-in spacing so adjacent buttons don't touch and curators don't have to
     hand-pad them with spaces/NBSPs (HTML collapses runs of spaces). Matches
     the editor (_css/dashboard.css). */
  margin: 4px 5px;
  background: #00ad67;
  color: #fff !important;
  padding: 8px 18px;
  border-radius: 4px;
  text-decoration: none !important;
  font-weight: 600;
  transition: background 0.15s;
}
.hh-btn-green:hover,
.hh-btn-green:focus { background: #008e54; color: #fff !important; text-decoration: none !important; }

/* "Links at the top of this post" — generated from a post's toplink flags. A
   row of small audience info links that jump to the flag's in-body marker. */
.hh-post-toplinks { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; }
.hh-post-toplink {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  padding: 5px 12px;
  border-radius: 999px;
  text-decoration: none;
  color: #00a161;
  background: rgba(0, 173, 103, 0.08);
  border: 1px solid rgba(0, 173, 103, 0.35);
}
.hh-post-toplink:hover,
.hh-post-toplink:focus { background: #00a161; color: #fff; text-decoration: none; }
.mod-skin-dark:not(.mod-skin-light) .hh-post-toplink { color: #6ee7a8; background: rgba(0, 173, 103, 0.12); }

/* Blank lines a curator typed in the editor (empty <p></p>) collapse to nothing
   in plain HTML — give them a line box so the spacing matches the editor. Scoped
   to :empty so legacy <p>&nbsp;</p> and real paragraphs are untouched. */
.news-body p:empty::before { content: "\00a0"; }

/* Horizontal rule as a real, visible divider (the browser default 1px hairline
   barely showed). Kept in sync with the editor's .ProseMirror hr. */
.news-body hr {
  border: 0;
  border-top: 3px solid rgba(0, 0, 0, 0.25);
  margin: 18px 0;
}
.mod-skin-dark:not(.mod-skin-light) .news-body hr { border-top-color: rgba(255, 255, 255, 0.3); }

/* Responsive video embeds — both Vimeo ([data-vimeo-video], the dashboard
   editor's Vimeo node) and YouTube ([data-youtube-video], TipTap's Youtube
   extension) serialize as a wrapper div around a fixed 640x360 iframe. Make
   them fluid + 16:9 so they don't overflow on mobile. */
.news-body [data-vimeo-video],
.news-body [data-youtube-video] {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 16 / 9;
  margin: 14px 0;
}
.news-body [data-vimeo-video] iframe,
.news-body [data-youtube-video] iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  border-radius: 6px;
}

/* GLightbox: images in a post body are auto-wrapped in <a class="glightbox">
   at render time (see _smart_footer.php). Per-post galleries are scoped by the
   .news-body[data-post-id] anchor's data-gallery. This rule is just the hover
   affordance; GLightbox ships its own overlay/zoom CSS. */
.news-body a.glightbox { display: inline-block; cursor: zoom-in; line-height: 0; }
.news-body a.glightbox img { transition: filter 0.15s ease; }
.news-body a.glightbox:hover img { filter: brightness(0.92); }

.hh-grey-box {
  background: #f4f5f7;
  border-left: 4px solid #00ad67;
  padding: 12px 16px;
  margin: 10px 0;
  border-radius: 0 4px 4px 0;
}
.mod-skin-dark:not(.mod-skin-light) .hh-grey-box {
  background: rgba(255, 255, 255, 0.04);
  border-left-color: #00ad67;
}

/* ------------------- end dashboard posts: wells + audience info ------------------- */

/* ------------------- begin sticky menu ------------------- */

.sticky-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: sticky;
  margin: 0px;
  top: 6px;
  z-index: 952;
  transform: translateX(-10px);
  padding: 10px 10px 5px 10px;
  width: calc(100% + 20px); /* 16px extra on each side */
  margin: 0px 0px 15px 0px; /* Adjust margin to match width change */
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(2) blur(10px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
}

.mod-skin-dark:not(.mod-skin-light) .sticky-menu {
  background-color: rgba(10, 10, 10, 0.6);
}

.top-menu-fixed-width {
  margin-bottom: 5px;
  padding-right: 5px;
}

.sticky-menu-container {
  margin: 0px; /* Center the menu */
}

.sticky-submenu {
  position: relative;
  padding: 22px 10px 5px 10px;
  margin: 0px 5px 5px 0px;
  border-radius: 10px;
  background-color: rgba(244, 244, 244, 1);
  cursor: pointer;
  flex-shrink: 0;
  /* Size transitions happen via CSS classes */
  transition: 
    width 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
    max-width 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
    flex-basis 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* FLIP position animation - applied temporarily via JS */
.sticky-submenu.sliding {
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.mod-skin-dark:not(.mod-skin-light) .sticky-submenu {
  background-color: rgba(10, 10, 10, 0.6);
}

.sticky-submenu.open {
  width: 100%;
  flex-basis: 100%;
  max-width: 100%;
}

.sticky-submenu:not(.open) {
  flex-basis: auto;
  max-width: 24%;
}

.sticky-submenu .menu-buttons {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: none;
  opacity: 0;
  transform: translateY(-5px);
  transition: 
    opacity 0.25s ease,
    transform 0.25s ease;
}

.sticky-submenu .menu-buttons.open {
  display: flex;
}

/* Buttons visible - on page load or after animation */
.sticky-submenu .menu-buttons.visible,
.sticky-submenu.open .menu-buttons.open:not(.animating-buttons) {
  opacity: 1;
  transform: translateY(0);
}

/* Keep buttons hidden during expand animation */
.sticky-submenu .menu-buttons.animating-buttons {
  opacity: 0;
  transform: translateY(-5px);
}

@media screen and (max-width: 768px) {
  .sticky-menu {
    position: relative;
  }
}

.sticky-menu .menu-button {
  margin: 3px;
  padding: 7px;
  line-height: 8px;

  font-size: 12px;
  font-weight: 700;
  /* text-transform: uppercase; */
  text-decoration: none;
  text-align: center;

  color: #fff;
  background: var(--theme-primary);
  border: 2px solid var(--theme-primary);
  border-radius: 3px;

  transition: all 0.1s ease;
}

.mod-skin-dark:not(.mod-skin-light) .sticky-menu .menu-button {
  color: #fff !important;
}

.mod-skin-dark:not(.mod-skin-light) .sticky-menu .menu-button:hover {
  color: rgb(0 161 97) !important;
  background-color: transparent;
  border: 2px solid rgb(0 161 97);
  border-radius: 3px;
}

.mod-skin-dark:not(.mod-skin-light) .menu-button.active {
  color: rgb(0 161 97) !important;
  background-color: transparent;
  border: 2px solid rgb(0 161 97);
  border-radius: 3px;
}

.sticky-menu .menu-icon {
  margin: 3px;
  padding: 2px;

  width: 26px;
  height: 26px;
  text-align: center;

  color: #fff;
  background: rgb(0 161 97);
  border: 2px solid rgb(0 161 97);
  border-radius: 100%;

  transition: all 0.1s ease;
}

.sticky-menu .menu-icon:hover {
  color: rgb(0 161 97);
  background-color: transparent;
  border: 2px solid rgb(0 161 97);
  border-radius: 100%;
}

.menu-button.active {
  color: rgb(0 161 97);
  background-color: transparent;
  border: 2px solid rgb(0 161 97);
  border-radius: 3px;
}

.sticky-menu .section-name {
  font-size: 14px;
  font-weight: 700;
  color: rgb(0 161 97);
  position: absolute;
  top: 3px;
}

.top-menu-fixed-width .menu-button {
  padding: 4px;
  display: block;
  border-radius: 100%;
  width: 25px;
  height: 25px;
}

.top-menu-fixed-width .menu-button:hover {
  border-radius: 100%;
}

/* smoothly animate scroll */
html {
  scroll-behavior: smooth;
}

/* a with id */
.news-body a[id] {
  scroll-margin-top: 180px; /* height of your sticky menu + a little extra */
}

/* Section / audience wells are the scroll targets for the sticky-menu
   buttons (sec-{id} on family portals, aud-{id}-sec-{id} on staff). Keep
   them clear of the sticky menu when scrolled to. */
[id^="sec-"],
[id^="aud-"] {
  scroll-margin-top: 180px;
}

/* Flat (parent/student) menu: section buttons in a single wrapping row,
   no expandable groups. Buttons keep their existing green styling. The
   grouped menu's asymmetric top padding (room for a section-name label)
   would otherwise sit these buttons slightly low, so center them. */
.sticky-menu--flat {
  gap: 2px;
  padding-top: 7px;
  padding-bottom: 7px;
}

.sticky-menu--flat .menu-button {
  line-height: 1;
  vertical-align: middle;
}

/* Per-section / per-flag Bootstrap colour variants for sticky-menu buttons.
   Resting = filled variant colour; hover/active = outline. Default (no
   modifier) keeps the theme green from the base .menu-button rule above. */
.sticky-menu .menu-button--primary   { background:#007bff; border-color:#007bff; color:#fff; }
.sticky-menu .menu-button--secondary { background:#6c757d; border-color:#6c757d; color:#fff; }
.sticky-menu .menu-button--success   { background:#28a745; border-color:#28a745; color:#fff; }
.sticky-menu .menu-button--danger    { background:#dc3545; border-color:#dc3545; color:#fff; }
.sticky-menu .menu-button--warning   { background:#ffc107; border-color:#ffc107; color:#212529; }
.sticky-menu .menu-button--info      { background:#17a2b8; border-color:#17a2b8; color:#fff; }
.sticky-menu .menu-button--light     { background:#f1f3f5; border-color:#ced4da; color:#212529; }
.sticky-menu .menu-button--dark      { background:#343a40; border-color:#343a40; color:#fff; }
/* Flag sub-links read as nested items under their section (smaller). */
.sticky-menu .menu-button--subflag { font-size: 11px; font-weight: 600; padding: 5px 9px; }
.sticky-menu .menu-button--primary:hover,   .sticky-menu .menu-button--primary.active   { background:transparent; color:#007bff; border-color:#007bff; }
.sticky-menu .menu-button--secondary:hover, .sticky-menu .menu-button--secondary.active { background:transparent; color:#6c757d; border-color:#6c757d; }
.sticky-menu .menu-button--success:hover,   .sticky-menu .menu-button--success.active   { background:transparent; color:#28a745; border-color:#28a745; }
.sticky-menu .menu-button--danger:hover,    .sticky-menu .menu-button--danger.active    { background:transparent; color:#dc3545; border-color:#dc3545; }
.sticky-menu .menu-button--warning:hover,   .sticky-menu .menu-button--warning.active   { background:transparent; color:#a9820a; border-color:#ffc107; }
.sticky-menu .menu-button--info:hover,      .sticky-menu .menu-button--info.active      { background:transparent; color:#17a2b8; border-color:#17a2b8; }
.sticky-menu .menu-button--light:hover,     .sticky-menu .menu-button--light.active     { background:transparent; color:#495057; border-color:#ced4da; }
.sticky-menu .menu-button--dark:hover,      .sticky-menu .menu-button--dark.active      { background:transparent; color:#343a40; border-color:#343a40; }

/* Staff: audience group heading above that audience's section wells. */
.hh-aud-group-title {
  font-size: 18px;
  font-weight: 700;
  margin: 18px 2px 12px 2px;
}

/* ------------------- end sticky menu ------------------- */

.btn-header .tooltip {
  margin-top: 7px;
}

.btn-header > :first-child > a {
  /* normal anchor pointer */
  cursor: pointer !important;
}

.separator {
  display: flex;
  align-items: center;
  text-align: center;
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #000;
}

.separator:not(:empty)::before {
  margin-right: 0.25em;
}

.separator:not(:empty)::after {
  margin-left: 0.25em;
}

.sched-course a {
  color: black !important;
}

.tooltip-inner {
  background-color: white !important;
  color: #18889c !important;
  /* remove border */
  /* border: none !important; */
  border-color: white !important;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.45) !important;
  /* lessen padding */
  padding: 10px !important;
}

.btn-header .tooltip-inner {
  /* stop wrapping text */
  white-space: nowrap !important;
  word-break: keep-all !important;
}

.avatar-image {
  /* add green glow */
  box-shadow: 0 0 10px #00ad67;
}
.profile-image {
  background-position: center 25%; /* Adjust this value to focus on the desired part of the image */
  background-size: cover;
  background-repeat: no-repeat;
}

.page-logo-link img {
  height: 35px;
}

.pace {
  z-index: 2000;
}
.fixed-top {
  z-index: 1500;
}

tr.selected {
  border-color: #92d5e0 !important;
  background-color: #92d5e0 !important;
}

.table-hover > tbody > tr:hover {
  /* a nice transluscent gray */
  background-color: rgba(30, 30, 30, 0.05) !important;
}

.mod-skin-dark:not(.mod-skin-light) .table-hover > tbody > tr:hover {
  color: white;
}

.breadicon {
  margin-right: 5px !important;
  margin-left: 5px !important;
}

.well {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15) !important;

  border: 0px;
  box-shadow: 0 1px 1px #ececec;
  -webkit-box-shadow: 0 1px 1px #ececec;
  -moz-box-shadow: 0 1px 1px #ececec;
  position: relative;
}

.well-simple {
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
  padding: 4px;
  border: 0px solid #ddd;
  box-shadow: 0 1px 1px #ececec;
  -webkit-box-shadow: 0 1px 1px #ececec;
  -moz-box-shadow: 0 1px 1px #ececec;
  display: inline-block;
}

/* .art-height {
  height: 100vh;
  padding: 0px;
  margin: 0px;
}
@media (max-width: 768px) {
  .art-height {
    height: 50vh;
  }
} */
.btn-round {
  border-radius: 30px;
}

/* add centered background image with green overlay */
.art-area {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: overlay;
  min-height: 700px;
}
/* 
.justify-content-center {
  justify-content: center;
}
.align-items-bottom {
  align-items: flex-end;
} */

/* show case well with rounded borders and white blur bg */
.glass-well {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.274);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  margin: 20px;
  color: white;
  z-index: 902;
}

.glass-bg {
  background-color: rgba(0, 0, 0, 0.194);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: white;
  width: 50px; /* Adjust as needed */
  height: 50px; /* Should be the same as width */
  border-radius: 50%; /* This creates the circle shape */
  display: flex; /* Center the icon */
  justify-content: center; /* Center the icon horizontally */
  align-items: center; /* Center the icon vertically */
}

/* force equal width and height of the icon inside */

.smart-form header {
  border-radius: 10px 10px 0px 0px;
}

.smart-form footer {
  border-radius: 0px 0px 10px 10px;
}

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 1);
}

.navbar-dark .navbar-nav .nav-item .active {
  font-weight: bold;
}
.main-nav-bar {
  background: rgba(0, 140, 0, 0.7);
  border-bottom: 0px;
  padding: 0px;
}

#header > div.mainMenuHover:hover {
  color: black !important;
  background-color: rgba(0, 88, 0, 0.5);
}
#header > div.mainMenuHover > span {
  cursor: default !important;
}

body.smart-style-6 #header::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

body.smart-style-6 .page-footer {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background: rgba(0, 140, 0, 0.7);
  height: 50px;
  padding: 14px 5px 0;
  border-top: 0px;
  width: 100%;
  position: absolute;
  display: block;
}

.dropdown-menu > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  color: white;
}

.dropdown-menu > li > a:hover {
  /* color: black; */
  /* background-color: rgba(0, 88, 0, 0.5) !important; */
}
.dropdown-menu {
  margin-top: 0px !important;
  /* background: rgba(0, 140, 0, 0.7); */
  z-index: 1000;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border: 0px;
  padding-top: 0px;
  padding-bottom: 10px;
  border-radius: 0px 0px 10px 10px;
}

.hta-loader {
  width: 100%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  position: absolute; /*or fixed*/
  left: 50%;
  top: 50%;
  text-align: center;
}

#left-panel {
  top: 49px;
  bottom: 50px;
  padding-top: 0px;
}

.dt-toolbar {
  padding: 5px !important;
  padding-top: 0px !important;
  border-bottom: 0px;
  display: inline-block;
  width: 100%;
}

.dt-left {
  float: left;
  position: relative;
}

.dt-right {
  float: right;
  position: relative;
  text-align: right;
}

.dt-toolbar-footer {
  padding: 0px 10px;
  border-top: 0px;
  display: inline-block;
  width: 100%;
}

/* DataTables pagination - align page links with dark mode */
.mod-skin-dark:not(.mod-skin-light) .dataTables_wrapper .dataTables_paginate .page-link {
  background-color: transparent !important;
  border-color: transparent !important;
  color: rgba(243, 244, 246, 0.85) !important;
}

.mod-skin-dark:not(.mod-skin-light) .dataTables_wrapper .dataTables_paginate .page-link:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

.mod-skin-dark:not(.mod-skin-light) .dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-radius: 999px !important;
  color: #ffffff !important;
}

.mod-skin-dark:not(.mod-skin-light) .dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
  background-color: transparent !important;
  color: rgba(148, 163, 184, 0.7) !important;
}

/* on mobile, hide .dt-toolbar .dt-right */
@media (max-width: 768px) {
  .dt-toolbar .dt-right {
    display: none;
  }
}

.profile-pic > img {
  top: 10px !important;
}

/* 
888b     d888                                  .d8888b.                    888                          
8888b   d8888                                 d88P  Y88b                   888                          
88888b.d88888                                 Y88b.                        888                          
888Y88888P888  .d88b.  88888b.  888  888       "Y888b.   888  888 .d8888b  888888 .d88b.  88888b.d88b.  
888 Y888P 888 d8P  Y8b 888 "88b 888  888          "Y88b. 888  888 88K      888   d8P  Y8b 888 "888 "88b 
888  Y8P  888 88888888 888  888 888  888            "888 888  888 "Y8888b. 888   88888888 888  888  888 
888   "   888 Y8b.     888  888 Y88b 888      Y88b  d88P Y88b 888      X88 Y88b. Y8b.     888  888  888 
888       888  "Y8888  888  888  "Y88888       "Y8888P"   "Y88888  88888P'  "Y888 "Y8888  888  888  888 
                                                              888                                       
                                                         Y8b d88P                                       
                                                          "Y88P"                                         */

/* Hide when the body does NOT have .nav-function-minify */
body:not(.nav-function-minify) .hidden-nav-function-maximize {
  display: none;
}

.name-part {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 4px; /* Adds space between inline spans */
}

/* 
888     888                                        888               888      8888888b.                            888          
888     888                                        888               888      888   Y88b                           888          
888     888                                        888               888      888    888                           888          
888     888 88888b.   .d88b.  888d888 8888b.   .d88888  .d88b.   .d88888      888   d88P 8888b.  88888b.   .d88b.  888 .d8888b  
888     888 888 "88b d88P"88b 888P"      "88b d88" 888 d8P  Y8b d88" 888      8888888P"     "88b 888 "88b d8P  Y8b 888 88K      
888     888 888  888 888  888 888    .d888888 888  888 88888888 888  888      888       .d888888 888  888 88888888 888 "Y8888b. 
Y88b. .d88P 888 d88P Y88b 888 888    888  888 Y88b 888 Y8b.     Y88b 888      888       888  888 888  888 Y8b.     888      X88 
 "Y88888P"  88888P"   "Y88888 888    "Y888888  "Y88888  "Y8888   "Y88888      888       "Y888888 888  888  "Y8888  888  88888P' 
            888           888                                                                                                   
            888      Y8b d88P                                                                                                   
            888       "Y88P"                                                                                                     */

.panel-heading {
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}
.panel {
  border-radius: 10px;
}

.panel-primary > .panel-heading {
  color: #fff;
  background: #00ad67;
  border-color: #00ad67;
}

.panel-primary {
  border-color: #00ad67;
}

.panel-secondary > .panel-heading {
  color: #fff;
  background: #4babbb;
  border-color: #4babbb;
}

.panel-secondary {
  border-color: #4babbb;
}

/* 
88888b.   .d88b.  888  888  888 .d8888b     
888 "88b d8P  Y8b 888  888  888 88K         
888  888 88888888 888  888  888 "Y8888b.    
888  888 Y8b.     Y88b 888 d88P      X88    
888  888  "Y8888   "Y8888888P"   88888P'    
                                           */

.equal {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding-bottom: 18px;
}

.equal .panel {
  width: 100%;
  height: 100%;
}

.equal .panel-body {
  padding-bottom: 0px;
}

.lg-backdrop.in {
  opacity: 0.8 !important;
}

.slide-modal .modal-body {
  padding: 2px;
}

.slide-modal .modal-header {
  padding: 10px;
}

.slide-preview {
  border-radius: 10px;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.08), 0 0 6px rgba(0, 0, 0, 0.05);
  transition: 0.3s transform cubic-bezier(0.155, 1.105, 0.295, 1.12), 0.3s box-shadow,
    0.3s -webkit-transform cubic-bezier(0.155, 1.105, 0.295, 1.12);
  cursor: pointer;
}

.slide-preview:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
}

/* This element defines the size the iframe will take.
   In this example we want to have a ratio of 16/9 */
.aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 61%;
}

/* Adjust the iframe so it's rendered in the outer-width and outer-height of it's parent */
.aspect-ratio iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

/* 
888                                                  .d888  .d888                  888         
888                                                 d88P"  d88P"                   888         
888                                                 888    888                     888         
88888b.   .d88b.  888  888  .d88b.  888d888 .d88b.  888888 888888 .d88b.   .d8888b 888888      
888 "88b d88""88b 888  888 d8P  Y8b 888P"  d8P  Y8b 888    888   d8P  Y8b d88P"    888         
888  888 888  888 Y88  88P 88888888 888    88888888 888    888   88888888 888      888         
888  888 Y88..88P  Y8bd8P  Y8b.     888    Y8b.     888    888   Y8b.     Y88b.    Y88b.       
888  888  "Y88P"    Y88P    "Y8888  888     "Y8888  888    888    "Y8888   "Y8888P  "Y888       */

.hovereffect {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: pointer;
}

.hovereffect img {
  display: block;
  position: relative;
  -webkit-transition: all 0.4s linear;
  transition: all 0.4s linear;
}

.hovereffect .overlay {
  background: linear-gradient(rgba(0, 140, 0, 0.9) 0%, rgba(255, 255, 255, 0) 100%);

  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  /* opacity: 0; */
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.hovereffect:hover .overlay {
  opacity: 0;
}

.hovereffect h1 {
  text-transform: uppercase;
  font-weight: bolder;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 17px;
  background: rgba(0, 0, 0, 0.6);
  -ms-transform: translatey(0);
  -webkit-transform: translatey(0);
  transform: translatey(0);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  padding: 10px;
}

.hovereffect .info {
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
  font-weight: normal;
  margin: 0%;
}

.hovereffect:hover .info {
  opacity: 0;
}

.hovereffect:hover h1 {
  -webkit-transform: translatey(-100px);
  -ms-transform: translatey(-100px);
  transform: translatey(-100px);
}
.hovereffect:hover h1 {
  -webkit-transform: translatey(-100px);
  -ms-transform: translatey(-100px);
  transform: translatey(-100px);
}

.hovereffect:hover .info {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

/* 
 888                   d8b          
 888                   Y8P          
 888                                
 888  .d88b.   .d88b.  888 88888b.  
 888 d88""88b d88P"88b 888 888 "88b 
 888 888  888 888  888 888 888  888 
 888 Y88..88P Y88b 888 888 888  888 
 888  "Y88P"   "Y88888 888 888  888 
                   888              
              Y8b d88P              
               "Y88P"                */

#login_button {
  text-align: center;
  display: flex;
  justify-content: center;
}

.google {
  font-size: 1.5em;
  margin: 5px 5px;
  /* padding-right: 1em; */
}

.google img {
  float: left !important;
  margin-left: auto;
  width: 38px;
}

/* 
8888888888       888 888       .d8888b.           888                        888                  
888              888 888      d88P  Y88b          888                        888                  
888              888 888      888    888          888                        888                  
8888888 888  888 888 888      888         8888b.  888  .d88b.  88888b.   .d88888  8888b.  888d888 
888     888  888 888 888      888            "88b 888 d8P  Y8b 888 "88b d88" 888     "88b 888P"   
888     888  888 888 888      888    888 .d888888 888 88888888 888  888 888  888 .d888888 888     
888     Y88b 888 888 888      Y88b  d88P 888  888 888 Y8b.     888  888 Y88b 888 888  888 888     
888      "Y88888 888 888       "Y8888P"  "Y888888 888  "Y8888  888  888  "Y88888 "Y888888 888     
*/

.fc .table-bordered {
  border: 1px solid #ddd3 !important;
}

.fc-v-event .fc-event-main {
  color: inherit !important;
  height: 100%;
}

a.fc-event:hover {
  color: #333;
}

.fc .fc-list-event-title a {
  color: inherit !important;
}

.mod-skin-dark:not(.mod-skin-light) {
  --fc-page-bg-color: #000;
}

.fc-day-grid-event .fc-time {
  display: block;
}

.fc-day-grid-event .fc-content {
  padding: 0.25rem 0.5rem;
}

.fc-popover .fc-header {
  padding: 0.5rem 0.75rem;
}

.fc-more-popover .fc-event-container {
  padding: 0.5rem;
}

.fc-popover .fc-header .fc-title {
  font-weight: bold;
}

.fc-toolbar h2 {
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
}

.fc-day-top.fc-other-month {
  opacity: 1;
}

.fc-other-month {
  background-image: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.02) 25%,
    transparent 25%,
    transparent 50%,
    rgba(0, 0, 0, 0.02) 50%,
    rgba(0, 0, 0, 0.02) 75%,
    transparent 75%,
    transparent
  );
  background-color: #fafcfd;
  background-size: 1rem 1rem;
}

.fc-head-container thead tr {
  background-image: linear-gradient(to top, #f2f2f2 0, #fafafa 100%);
}

@media only screen and (max-width: 768px) {
  .fc-day-grid-event .fc-time {
    display: inline;
  }

  .fc-toolbar {
    flex-direction: column;
  }

  .fc-toolbar h2 {
    font-size: 1.125rem;
    font-weight: 500;
  }

  .fc-toolbar .fc-left {
    order: 1;
  }

  .fc-toolbar .fc-right {
    order: 2;
  }

  .fc-toolbar .fc-center {
    order: 3;
  }

  .fc-toolbar > div:not(:empty):not(:first-child) {
    margin-top: 0.5rem;
  }
}

/* 
8888888b.                                                                   .d8888b.                           888 888 
888   Y88b                                                                 d88P  Y88b                          888 888 
888    888                                                                 Y88b.                               888 888 
888   d88P 888d888 .d88b.   .d88b.  888d888 .d88b.  .d8888b  .d8888b        "Y888b.    .d8888b 888d888 .d88b.  888 888 
8888888P"  888P"  d88""88b d88P"88b 888P"  d8P  Y8b 88K      88K               "Y88b. d88P"    888P"  d88""88b 888 888 
888        888    888  888 888  888 888    88888888 "Y8888b. "Y8888b.            "888 888      888    888  888 888 888 
888        888    Y88..88P Y88b 888 888    Y8b.          X88      X88      Y88b  d88P Y88b.    888    Y88..88P 888 888 
888        888     "Y88P"   "Y88888 888     "Y8888   88888P'  88888P'       "Y8888P"   "Y8888P 888     "Y88P"  888 888 
                                888                                                                                    
                           Y8b d88P                                                                                    
                            "Y88P"                                                                                     
*/

.progress-wrap {
  position: fixed;
  right: 20px;
  bottom: 62px;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  box-shadow: inset 0 0 0 6px rgba(0, 173, 103, 0.7);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}
.progress-wrap.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.progress-wrap::after {
  position: absolute;
  content: '';
  -webkit-mask: url(/system/images/honu.svg) no-repeat 50% 50%;
  mask: url(/system/images/honu.svg) no-repeat 50% 50%;
  -webkit-mask-size: cover;
  text-align: center;
  line-height: 46px;
  font-size: 24px;
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  z-index: 1;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}
.progress-wrap:after {
  background-color: rgb(0, 173, 103);
}

.progress-wrap:hover::after {
  opacity: 0;
}
.progress-wrap::before {
  position: absolute;
  content: '';

  -webkit-mask: url(/system/images/honu.svg) no-repeat 50% 50%;
  mask: url(/system/images/honu.svg) no-repeat 50% 50%;
  -webkit-mask-size: cover;
  mask-size: cover;
  text-align: center;
  line-height: 46px;
  font-size: 24px;
  opacity: 0;
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: inline-block;
  z-index: 2;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

.progress-wrap::before {
  background-color: rgb(0, 173, 103);
}
.progress-wrap:hover::before {
  opacity: 1;
}
.progress-wrap svg path {
  fill: none;
}
.progress-wrap svg.progress-circle path {
  stroke: rgb(0, 173, 103);
  stroke-width: 8;
  box-sizing: border-box;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

/* 
88888888888 .d88888b.   .d8888b.   .d8888b.  888      8888888888 .d8888b.  
    888    d88P" "Y88b d88P  Y88b d88P  Y88b 888      888       d88P  Y88b 
    888    888     888 888    888 888    888 888      888       Y88b.      
    888    888     888 888        888        888      8888888    "Y888b.   
    888    888     888 888  88888 888  88888 888      888           "Y88b. 
    888    888     888 888    888 888    888 888      888             "888 
    888    Y88b. .d88P Y88b  d88P Y88b  d88P 888      888       Y88b  d88P 
    888     "Y88888P"   "Y8888P88  "Y8888P88 88888888 8888888888 "Y8888P"  
                                                                           
*/

.cubeToggle {
  --dur: 0.3s;
  --timing: cubic-bezier(0.3, 1.7, 0.6, 0.6);
  --offColor: #565656;
  --onColor: #1a1a1a;
  font-size: 20px;
  transform: translate(-23px, 9px);
}

.toggleTab {
  position: absolute;
  left: -75px;
  bottom: 75px;
  border-radius: 16px;
  padding: 4em 4em 3.5em 10em;
  box-shadow: #aaa 0px 0px 20px 0px;
  background-color: white;
  transition: all 0.3s ease-out;
}

.surface .label-text {
  top: calc(100% + 0.5em);
  line-height: 0.8em;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  color: rgb(0, 0, 0);
}

/* Fix padding problem on smart admin for condense tables and collapsible responsive */
.table-condensed.table > tbody > tr > .dtr-control,
.table-condensed.table > tbody > tr > .dtr-control,
.table-condensed.table > tfoot > tr > .dtr-control,
.table-condensed.table > tfoot > tr > .dtr-control,
.table-condensed.table > thead > tr > .dtr-control,
.table-condensed.table > thead > tr > .dtr-control {
  padding: 5px 30px !important;
}

/* turn DT class button green */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before {
  background-color: #00ad67 !important;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
  top: auto !important;
  margin-top: 0px !important;
}

.tabToggler {
  transform: translate(-20px, -55px);
  cursor: pointer;
  color: #00ad67;
  rotate: 90deg;
  width: 100px;
  position: absolute;
  text-align: center;
}
.tabToggler-label {
}

#tabToggler {
  visibility: hidden;
}

/* 
                   .d8888b.                d8b 888            888      
                  d88P  Y88b               Y8P 888            888      
                  Y88b.                        888            888      
88888b.  888  888  "Y888b.   888  888  888 888 888888 .d8888b 88888b.  
888 "88b `Y8bd8P'     "Y88b. 888  888  888 888 888   d88P"    888 "88b 
888  888   X88K         "888 888  888  888 888 888   888      888  888 
888 d88P .d8""8b. Y88b  d88P Y88b 888 d88P 888 Y88b. Y88b.    888  888 
88888P"  888  888  "Y8888P"   "Y8888888P"  888  "Y888 "Y8888P 888  888 
888                                                                    
888                                                                    
888                                                                     */

/* 2016-03-18 Switch Toggle */
.pxSwitch {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 34px;
}

.pxSwitch input {
  display: none;
}

.pxSlider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ca2222;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 34px;
}

.pxSlider:before {
  position: absolute;
  content: '';
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .pxSlider {
  background-color: #00ad67;
}

input:focus + .pxSlider {
  box-shadow: 0 0 1px #18889c;
}

input:checked + .pxSlider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(55px);
}

.pxSlider:after {
  content: 'NO';
  color: white;
  display: block;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  font-size: 10px;
  font-family: Verdana, sans-serif;
}

input:checked + .pxSlider:after {
  content: 'YES';
}

/* Accessible variant (add `hh-switch` to the label): the legacy switch hides its checkbox with display:none, so
   keyboard and screen-reader users can't reach it and a `required` one can't be focused. Here the real checkbox
   stays on top of the slider, transparent but focusable; the slider shows the focus / invalid state. */
.pxSwitch.hh-switch input {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.pxSwitch.hh-switch input:focus-visible + .pxSlider {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #18889c;
}
/* the slider is already red when off, so the invalid state is a separate ring (and the message beneath) */
.was-validated .pxSwitch.hh-switch input:invalid + .pxSlider {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #be2d2d;
}
.was-validated .pxSwitch.hh-switch input:invalid:focus-visible + .pxSlider {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #18889c, 0 0 0 9px #be2d2d;
}

/* -------------------------------- */
/* switch more standardized */

.pxSwitch-standard {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 25px;
}

.pxSwitch-standard input {
  display: none;
}

.pxSlider-standard {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #dfdfdf;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 34px;
}

.pxSlider-standard:before {
  position: absolute;
  content: '';
  height: 21px;
  width: 21px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .pxSlider-standard {
  background-color: #18889c;
}

input:focus + .pxSlider-standard {
  box-shadow: 0 0 1px #18889c;
}

input:checked + .pxSlider-standard:before {
  -webkit-transform: translateX(19px);
  -ms-transform: translateX(19px);
  transform: translateX(35px);
}

.pxSlider-standard:after {
  content: 'NO';
  color: rgb(53, 53, 53);
  display: block;
  position: absolute;
  transform: translate(-5%, -50%);
  top: 50%;
  left: 50%;
  font-size: 10px;
  font-family: Verdana, sans-serif;
}

input:checked + .pxSlider-standard:after {
  color: white;
  transform: translate(-95%, -50%);
  content: 'YES';
}

.fas {
  /* margin-right: 10px; */
  font-size: 18px;
}

/* 
 .d8888b.           888                    888          888               8888888888 888                
d88P  Y88b          888                    888          888               888        888                
Y88b.               888                    888          888               888        888                
 "Y888b.    .d8888b 88888b.   .d88b.   .d88888 888  888 888  .d88b.       8888888    888888 .d8888b     
    "Y88b. d88P"    888 "88b d8P  Y8b d88" 888 888  888 888 d8P  Y8b      888        888   d88P"        
      "888 888      888  888 88888888 888  888 888  888 888 88888888      888        888   888          
Y88b  d88P Y88b.    888  888 Y8b.     Y88b 888 Y88b 888 888 Y8b.          888        Y88b. Y88b.    d8b 
 "Y8888P"   "Y8888P 888  888  "Y8888   "Y88888  "Y88888 888  "Y8888       8888888888  "Y888 "Y8888P Y8P 
 */

.green {
  color: rgb(0, 173, 103);
}

.red {
  color: #b94846;
}

.blue {
  color: #3986ac;
}

/* Dark mode: the red and blue helpers are too dim on a dark panel (2.9:1 and 3.7:1); these are 5.6:1 and 5.4:1 */
.mod-skin-dark:not(.mod-skin-light) .red {
  color: #df8787;
}

.mod-skin-dark:not(.mod-skin-light) .blue {
  color: #5aa5c9;
}

.yellow {
  color: #f99406;
}

.orange {
  color: #ff8600;
}

.orangeDark {
  color: #cc8400;
}

.black {
  color: #000;
}

.pink {
  color: #e5a3ad;
}

.darkBlue {
  color: #1b31de;
}

.darkGreen {
  color: #2c8f21;
}
.purple {
  color: #551a8b;
}
.brown {
  color: #663300;
}
.fbBlue {
  color: #3b5998;
}
.cadetBlue {
  color: #669999;
}
.skyBlue {
  color: #87ceeb;
}
.fontWhite {
  color: #fff;
}

.tdBGRed {
  text-decoration: line-through;
}

.center {
  text-align: center;
}

.hidden {
  display: none;
}

.tdNoWrap {
  white-space: nowrap;
}

.saSideMenuItem {
  background: #ffa3a4;
}

/* FONTS */
.fontItalic {
  font-style: italic;
}

.fontBold {
  font-weight: bold;
}

.fontUnderline {
  text-decoration: underline;
}

.fontStrike {
  text-decoration: line-through;
}

.font10 {
  font-size: 10px;
}

.font12 {
  font-size: 12px;
}

.font13 {
  font-size: 13px;
}

.font15 {
  font-size: 15px;
}

.font20 {
  font-size: 20px;
}

.font25 {
  font-size: 25px;
}

.font30 {
  font-size: 30px;
}

.font40 {
  font-size: 40px;
}

.font50 {
  font-size: 50px;
}

.list-unstyled li hr {
  height: 0.01em;
}

.w100 {
  width: 100%;
}

.w50 {
  width: 50%;
}

.invisible {
  display: none;
}

.dispBlock {
  display: block;
}

.noBC {
  margin-top: -12px;
}

/* .hScrollDiv {
  overflow-x: auto;
} */

/* Margins */
.margin-ntop-5 {
  margin-top: -5px !important;
}
.margin-ntop-10 {
  margin-top: -10px !important;
}
.margin-ntop-20 {
  margin-top: -20px !important;
}
.margin-ntop-30 {
  margin-top: -30px !important;
}
.margin-top-5 {
  margin-top: 5px;
}
.margin-top-10 {
  margin-top: 10px;
}

/* Header Buttons */
.mmFirstButton {
  margin-top: -20px !important;
}
.mmMiddelButton {
  margin-left: -15px !important;
  margin-top: -20px !important;
}

/* Input Sizes */
.iSize100 {
  width: 100px;
}

.iSize150 {
  width: 150px;
}

.iSize200 {
  width: 200px;
}

.iSize220 {
  width: 220px;
}

.iSize250 {
  width: 250px;
}

.iSize300 {
  width: 300px;
}

.iSize400 {
  width: 400px;
}

.iSize500 {
  width: 100%;
  max-width: 500px;
}
/* Input Sizes */

/* Heights */
.iHeight5 {
  height: 5px;
}

.iHeight10 {
  height: 10px;
}

.iHeight15 {
  height: 15px;
}

/* Background Table Colors */
.bgTDLRed {
  background: #ffa3a4;
}

.bgTDLGreen {
  background: #a4ffab;
}
/* Background Table Colors */

.studProfileCards {
  font-weight: bold;
  font-style: italic;
}

.cursorExpand {
  cursor: row-resize;
}

.cursorPoint {
  cursor: pointer;
}

/* Case Transforms */
.caseUpper {
  text-transform: uppercase;
}

.caseLower {
  text-transform: lowercase;
}

.caseFirstUp {
  text-transform: capitalize;
}

/* BEGIN Rotate */
.rotateMe90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.rotateMe270 {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}
/* END Rotate */

/* BEGIN Responsive iFrame: For Google Cal 2015-02-24*/

.responsive-iframe-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.responsive-iframe-container iframe,
.vresponsive-iframe-container object,
.vresponsive-iframe-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* END Responsive iFrame: For Google Cal 2015-02-24*/

/* BEGIN Steps Tracker */

ol.progtrckr li.progtrckr-done {
  color: black;
  border-bottom: 4px solid yellowgreen;
}
ol.progtrckr li.progtrckr-todo {
  color: silver;
  border-bottom: 4px solid silver;
}

ol.progtrckr li.progtrckr-owner {
  color: red;
  border-bottom: 4px solid red;
}

ol.progtrckr li:after {
  content: '\00a0\00a0';
}
ol.progtrckr li:before {
  position: relative;
  bottom: -2.5em;
  float: left;
  left: 50%;
  line-height: 1em;
}
ol.progtrckr li.progtrckr-done:before {
  content: '\2713';
  color: white;
  background-color: yellowgreen;
  height: 1.2em;
  width: 1.2em;
  line-height: 1.2em;
  border: none;
  border-radius: 1.2em;
}
ol.progtrckr li.progtrckr-todo:before {
  content: '\039F';
  color: silver;
  background-color: #f5f5f5;
  font-size: 1.5em;
  bottom: -1.6em;
}
ol.progtrckr li.progtrckr-owner:before {
  content: '\039F';
  color: red;
  background-color: #f5f5f5;
  font-size: 1.5em;
  bottom: -1.6em;
}
/* END Steps Tracker */

/* BEGIN Steps Tracker */

.mainTracker-done {
  color: black;
  border-bottom: 4px solid yellowgreen;
}
.mainTracker-todo {
  color: silver;
  border-bottom: 4px solid silver;
}

.mainTracker-owner {
  color: red;
  border-bottom: 4px solid red;
}

.mainTrackerStyle {
  /*border-right: 1px solid black;*/
}
/* END Steps Tracker */

/* Bring Widget Icons down */
.widgetIcoDown {
  /* padding-top: 7px; */
}

/* BEGIN MCenter */
.toVScroll {
  width: 100%;
  max-height: 200px;
  overflow: scroll;
}

.toLabelField {
  font-style: italic;
  font-weight: bold;
  font-size: 16px;
  text-decoration: underline;
}

.smartFormLabel {
  font-style: italic;
  font-weight: bold;
  font-size: 12px;
}
/* END MCenter */

/* Forms */
.form-group:last-child,
.form-group:only-child {
  margin-bottom: 1.5rem;
}

.help-block {
  display: block;
  margin-bottom: 0.325rem;
}

/* disabled or read only form fields in dark mode */
.select2-container--default.select2-container--disabled .select2-selection--single,
  .select2-container--default.select2-container--disabled
  .select2-selection--multiple,
.form-control:disabled,
.form-control[readonly],
.custom-file-label:disabled,
.custom-file-label[readonly] {
  cursor: not-allowed;
  opacity: .5 !important;
}

fieldset.pxForm1 div.form-group label {
  display: block;
  font-size: 14px;
}

/* Autogrow on forms */
/* Needed for autogrow to work correctly */
textarea.form-group {
  position: relative;
}

fieldset.pxForm2 div.form-group label,
table.form {
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-weight: 300;
  font-size: 14px;
}

.pxFormReq {
  color: red;
}

.pxFormNote {
  font-weight: normal;
  font-style: italic;
  color: red;
}

.pxFormNoteSm {
  font-weight: normal;
  font-style: italic;
  color: #b94846;
  font-size: 14px;
}

.pxFormNoteSmallNormal {
  font-weight: normal;
  font-style: italic;
  color: #008516;
  font-size: 12px;
}
/* END Forms */

/* Date Picker */
.hhDatePicker {
  /* */
}
/* END Date Picker */

/* BEGIN Bigger Radio Buttons */
/* Customize the label (the container) */
.hhRadioContainer {
  display: inline-block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.hhRadioContainer input {
  position: absolute;
  opacity: 0;
}

/* Create a custom radio button */
.hhRadioCheckmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #ccc;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.hhRadioContainer:hover input ~ .hhRadioCheckmark {
  background-color: #6c6c6c;
}

/* When the radio button is checked, add a blue background */
.hhRadioContainer input:checked ~ .hhRadioCheckmark {
  background-color: #18889c;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.hhRadioCheckmark:after {
  content: '';
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.hhRadioContainer input:checked ~ .hhRadioCheckmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.hhRadioContainer .hhRadioCheckmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}
/* END Bigger Radio Buttons */

.wmsFullLogo {
  width: 100%;
  margin-top: -10px;
}

.wmsPushNotif {
  margin-left: 100px;
}

@media (max-width: 1347px) {
  .hidden-mm-xs {
    display: none !important;
  }
  .visible-mm-xs {
  }
}

@media (min-width: 1348px) {
  .hidden-mm-xs {
  }
  .visible-mm-xs {
    display: none !important;
  }
}

@media only screen and (max-width: 440px) {
  .resetLCBtn {
    margin-bottom: 1em;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1603px) {
  .resetLCBtn {
    margin-bottom: 1em;
  }
}

/* fancy checkboxes begin -------------------> */

/* Customize the label (the container) */
.containerCB {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding-top: 3px;
}

/* Hide the browser's default checkbox */
.containerCB input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border: 1px solid #ccc;
}

/* On mouse-over, add a grey background color */
.containerCB:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.containerCB input:checked ~ .checkmark {
  background-color: #18889c;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: '';
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.containerCB input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.containerCB .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* end fancy checkboxes -------------------> */

a {
  color: #02a106;
  text-decoration: none;
}

a:hover {
  color: #025106;
  text-decoration: none;
}

.ajax-notifications {
  background-color: rgba(0, 0, 0, 0.04) !important;
  height: 420px;
  border: none;
}

.ajax-notifications .alert > :first-child {
  margin: -10px 0px 0px 0px;
}
.ajax-notifications .alert.alert-transparent hr {
  margin: 10px;
}
.ajax-notifications .alert.alert-transparent h4 {
  font-weight: 400;
  font-size: 1.2em;
}

.ajax-notifications .alert.alert-transparent h4 a {
  padding-left: 10px;
}

.breadcrumb {
  padding: 8px 20px;
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
  .ajax-notifications {
    height: 305px;
  }
}

.error {
  background-color: red;
  color: white;
  text-align: center;
  font-size: 14px;
  padding: 10px;
  font-weight: bold;
}
.error a {
  color: white;
  text-decoration: underline;
}

/* Student schedule grid -----------------------> */
#sched-grid-main {
  width: 100%;
}
#sched-grid-main .sched-grid-container {
  display: grid;
  grid-template-columns: [hours] 60px [Monday] auto [Tuesday] auto [Wednesday] auto [Thursday] auto [Friday] auto;
  grid-template-rows: auto 1px;
  grid-gap: 0;
  padding: 0 0 30px 0;
  line-height: 7px;
}
#sched-grid-main .sched-grid-container > div {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
}
.subcontainer {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 0;
  padding: 10px;
}
.subcontainer > div,
.sched-course {
  text-align: center;
  /* transparent border */
  margin: 5px;
  line-height: normal;
}
.virtual-link-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  padding: 3px 10px;
  background-color: #333;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-decoration: none !important;
}
.sched-course .virtual-link-badge,
.sched-course .virtual-link-badge:hover,
.sched-course .virtual-link-badge:focus {
  color: #fff !important;
}
.virtual-link-badge:hover,
.virtual-link-badge:focus {
  background-color: #111;
  color: #fff !important;
  text-decoration: none !important;
}
.sched-overlap-left {
  width: 47%;
  justify-self: left;
}
.sched-overlap-right {
  width: 47%;
  justify-self: right;
}
.sched-overlap-three-left {
  width: 31%;
  justify-self: left;
}
.sched-overlap-three-center {
  width: 31%;
  justify-self: center;
}
.sched-overlap-three-right {
  width: 31%;
  justify-self: right;
}
.sched-grid-header {
  line-height: normal;
  text-align: center;
}
.sched-grid-header,
.sched-grid-hours {
  font-weight: bold;
  text-transform: uppercase;
}
.sched-grid-min,
.sched-grid-hours {
  padding: 0 !important;
}
.sched-grid-hours {
  text-align: left;
}
.sched-grid-header {
  font-size: 16px;
  letter-spacing: 2px;
  padding: 0 5px !important;
}
.sched-grid-header > p {
  padding-top: 3px;
  padding-bottom: 3px;
  width: 100%;
}
.sched-grid-header > p.mobile {
  display: none;
}
.sched-grid-header > p.desktop {
  display: block;
}
@media screen and (max-width: 800px) {
  #sched-grid-main .sched-grid-container {
    display: grid;
    grid-template-columns: [hours] 0% [Monday] auto [Tuesday] auto [Wednesday] auto [Thursday] auto [Friday] auto;
    grid-template-rows: auto 1px;
    grid-gap: 0;
    padding: 0 0 30px 0;
  }
  .sched-grid-header > p.mobile {
    display: block;
  }
  .sched-grid-header > p.desktop {
    display: none;
  }
  .sched-grid-hours,
  .sched-grid-min {
    display: none !important;
  }
  .sched-grid-container > div {
    text-align: center;
    padding: 5px 5px;
    word-break: break-word;
  }
}
@media screen and (max-width: 600px) {
  .sched-overlap-left {
    width: 100%;
    height: 50%;
    font-size: xx-small;
    align-self: start;
  }
  .sched-overlap-right {
    width: 100%;
    height: 50%;
    font-size: xx-small;
    align-self: end;
  }
  .sched-overlap-three-left,
  .sched-overlap-three-center,
  .sched-overlap-three-right {
    font-size: xx-small;
  }
  .breadicon {
    font-size: 15px;
    vertical-align: middle;
    margin-right: 5px;
  }
  .bcTakeover {
    display: none !important;
  }
  #bookmark-star {
    display: none;
  }
}

/* Color coding classes - see class_subject_master */
.class-language-arts {
  background-color: #fea3aa88 !important; /* salmon */
  border-color: #fea3aa !important;
  color: #000 !important;
  z-index: 0;
}
.class-language-arts a,
.class-language-arts a:hover {
  color: #000 !important;
}
.class-social-studies {
  background-color: #f8b88b88 !important; /* tan */
  border-color: #f8b88b !important;
  color: #000 !important;
  z-index: 0;
}
.class-social-studies a,
.class-social-studies a:hover {
  color: #000 !important;
}
.class-math {
  background-color: #faf88488 !important; /* yellow */
  border-color: #faf884 !important;
  color: #000 !important;
  z-index: 0;
}
.class-math a,
.class-math a:hover {
  color: #000 !important;
}
.class-science {
  background-color: #baed9188 !important; /* green */
  border-color: #baed91 !important;
  color: #000 !important;
  z-index: 0;
}
.class-science a,
.class-science a:hover {
  color: #000 !important;
}
.class-advisory {
  background-color: #b2cefe88 !important; /* blue */
  border-color: #b2cefe !important;
  color: #000 !important;
  z-index: 0;
}
.class-advisory a,
.class-advisory a:hover {
  color: #000 !important;
}
.class-electives {
  background-color: #f2a2e888 !important; /* pink-purple */
  border-color: #f2a2e8 !important;
  color: #000 !important;
}
.class-electives a,
.class-electives a:hover {
  color: #000 !important;
}
.class-club {
  background-color: darkred !important;
  border-color: darkred !important;
  color: #fff !important;
  z-index: 0;
}

.class-club a,
.class-club a:hover {
  color: #fff !important;
}
.class-counselor {
  background-color: #9fe0d888 !important; /* teal */
  border-color: #9fe0d8 !important;
  color: #000 !important;
  z-index: 0;
}
.class-counselor a,
.class-counselor a:hover {
  color: #000 !important;
}
.class-lunch {
  background-color: #dddddd88 !important; /* grey */
  border-color: #ddd !important;
  color: #000 !important;
  z-index: 0;
}
.class-lunch a,
.class-lunch a:hover {
  color: #000 !important;
}

/* Elementary school only */
.class-default {
  background-color: #b2cefe88 !important; /* blue */
  border-color: #b2cefe !important;
  color: #000 !important;
}
/* High school only */
.class-physical-education {
  background-color: #f2e4ab88 !important; /* gold */
  border-color: #f2e4ab !important;

  color: #000;
}
.class-physical-education a,
.class-physical-education a:hover {
  color: #000;
}
.class-health {
  background-color: #d0e2d388 !important; /* pale green */
  border-color: #d0e2d3 !important;

  color: #000;
}
.class-health a,
.class-health a:hover {
  color: #000;
}
.class-concentration {
  /* pink-purple, same as electives */
  background-color: #f2a2e888 !important;
  border-color: #f2a2e8 !important;

  color: #000 !important;
}
.class-concentration a,
.class-concentration a:hover {
  color: #000 !important;
}

@media print {
  #header,
  .page-footer,
  #left-panel,
  .fas,
  #profilePhotoUpload,
  #changeProfilePhotoModal,
  .progress-wrap {
    display: none;
  }

  #ribbon .breadcrumb,
  #breadcrumb {
    margin-left: 0;
    padding-left: 0;
  }

  html,
  body,
  div,
  span,
  applet,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  a,
  abbr,
  acronym,
  address,
  big,
  cite,
  code,
  del,
  dfn,
  em,
  img,
  ins,
  kbd,
  q,
  s,
  samp,
  small,
  strike,
  strong,
  sub,
  sup,
  tt,
  var,
  b,
  u,
  i,
  center,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td,
  article,
  aside,
  canvas,
  details,
  embed,
  figure,
  figcaption,
  footer,
  header,
  hgroup,
  menu,
  nav,
  output,
  ruby,
  section,
  summary,
  time,
  mark,
  audio,
  video {
    border: 0;
    font: inherit;
    vertical-align: baseline;
  }
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  menu,
  nav,
  section {
    display: block;
  }
  body {
    line-height: 1;
  }
  ol,
  ul {
    list-style: none;
  }
  blockquote,
  q {
    quotes: none;
  }
  blockquote:before,
  blockquote:after,
  q:before,
  q:after {
    content: none;
  }
  table {
    border: 1px solid #000;
    border-collapse: collapse;
  }
  th,
  td,
  tr {
    border: 1px solid #000;
    padding: 5px;
  }
  a[href]:after {
    content: none !important;
  }
  input,
  textarea {
    border: none;
    margin: 10px 0;
    padding: 0;
    overflow: visible;
    width: 100%;
  }
}

/* BEGIN RFA Unordered file list styles */
ul.fileList {
  padding-left: 13px;
  list-style: none;
}
ul.fileList li {
  padding-bottom: 5px;
}
/* END RFA Unordered file list styles */

.dataTables_empty {
  font-size: 14px;
  color: rgb(120, 120, 120) !important;
}

/* remove bootstrap margin-left and margin-right on .row */
/* .row {
    margin-left: 0px;
    margin-right: 0px;
}

.panel {
  margin-left: -14px;
  margin-right: -14px;
} */

.smart-timeline {
  position: relative;
}

.smart-timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.smart-timeline-list:after {
  content: ' ';
  background-color: #eee;
  position: absolute;
  display: block;
  width: 2px;
  top: 0;
  left: 95px;
  bottom: 0;
  z-index: 1;
}

.smart-timeline-list li {
  position: relative;
  margin: 0;
  padding: 15px 0;
}

.smart-timeline-icon {
  background: #007622;
  color: #fff;
  border-radius: 50%;
  position: absolute;
  width: 32px;
  height: 32px;
  line-height: 28px;
  font-size: 14px;
  text-align: center;
  left: 80px;
  top: 10px;
  z-index: 100;
  padding: 2px;
}

.smart-timeline-icon > img {
  height: 32px;
  width: 32px;
  border-radius: 50%;
  margin-top: -2px;
  margin-left: -2px;
  border: 2px solid #00ad67;
}

.smart-timeline-time {
  float: left;
  width: 70px;
  text-align: right;
}

.smart-timeline-time > small {
  font-style: italic;
}

.smart-timeline-content {
  margin-left: 123px;
}

.tree {
  min-height: 20px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.tree li {
  list-style-type: none;
  margin: 0;
  padding: 5px;
  position: relative;
}
.tree ul ul li span:hover {
  background: rgba(0, 0, 0, 0.015);
}
.tree li:after,
.tree li:before {
  content: '';
  left: -20px;
  position: absolute;
  right: auto;
}
.tree li:before {
  border-left: 1px solid #999;
  bottom: 50px;
  height: 100%;
  top: -11px;
  width: 1px;
  -webkit-transition: 'border-color 0.1s ease 0.1s';
  -moz-transition: 'border-color 0.1s ease 0.1s';
  -o-transition: 'border-color 0.1s ease 0.1s';
  transition: 'border-color 0.1s ease 0.1s';
}
.tree li:after {
  border-top: 1px solid #999;
  height: 20px;
  top: 18px;
  width: 25px;
}
.tree li span {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border: 1px dotted #999;
  border-radius: 5px;
  display: inline-block;
  padding: 3px 8px;
  text-decoration: none;
  -webkit-transition: color 0.2s ease 0.1s, background-color 0.2s ease 0.1s, border-color 0.3s ease 0.2s;
  -moz-transition: color 0.2s ease 0.1s, background-color 0.2s ease 0.1s, border-color 0.3s ease 0.2s;
  -o-transition: color 0.2s ease 0.1s, background-color 0.2s ease 0.1s, border-color 0.3s ease 0.2s;
  transition: color 0.2s ease 0.1s, background-color 0.2s ease 0.1s, border-color 0.3s ease 0.2s;
}
.tree li.parent_li > span {
  cursor: pointer;
  padding: 7px;
}
.tree > ul > li::after,
.tree > ul > li:before {
  border: 0;
}
.tree li:last-child::before {
  height: 30px;
}
.tree li.parent_li > span:hover,
.tree li.parent_li > span:hover + ul li span {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid #94a0b4;
  color: #000;
}
.tree > ul {
  padding-left: 0;
}
.tree ul ul {
  padding-left: 34px;
  padding-top: 10px;
}
.tree li.parent_li > span:hover {
  background-color: #008500;
  border: 1px solid #007600;
  color: #fff;
}
.tree li.parent_li > span:hover + ul li::before {
  border-left-color: #009406;
}
.tree li.parent_li > span:hover + ul li::after {
  border-top-color: #009406;
}
.tree li.parent_li > span:hover + ul li span {
  border: 1px solid #00a937;
  color: #000;
}
.tree .fa.icon-minus-sign:before {
  content: '\f056' !important;
}
.tree .fa.icon-plus-sign:before {
  content: '\f055' !important;
}

a[target]:not(.btn) {
  font-weight: 500;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
  text-decoration: none !important;
}

.header-btn[data-class='mobile-nav-on'] {
  border-color: #ffffff2b;
  background-color: #ffffff2b;
  background-image: -webkit-gradient(linear, left bottom, left top, from(#ffffff2b), to(#ffffff2b));
  background-image: linear-gradient(to top, #ffffff2b, #ffffff2b);
  color: #fff;
}

/*  
888b    888        d8888 888     888 8888888 .d8888b.         d8888 88888888888 8888888 .d88888b.  888b    888 
8888b   888       d88888 888     888   888  d88P  Y88b       d88888     888       888  d88P" "Y88b 8888b   888 
88888b  888      d88P888 888     888   888  888    888      d88P888     888       888  888     888 88888b  888 
888Y88b 888     d88P 888 Y88b   d88P   888  888            d88P 888     888       888  888     888 888Y88b 888 
888 Y88b888    d88P  888  Y88b d88P    888  888  88888    d88P  888     888       888  888     888 888 Y88b888 
888  Y88888   d88P   888   Y88o88P     888  888    888   d88P   888     888       888  888     888 888  Y88888 
888   Y8888  d8888888888    Y888P      888  Y88b  d88P  d8888888888     888       888  Y88b. .d88P 888   Y8888 
888    Y888 d88P     888     Y8P     8888888 "Y8888P88 d88P     888     888     8888888 "Y88888P"  888    Y888                                                                                                           
*/

.nav-menu li > ul li > ul li a > .badge {
  color: #fff;
  background-color: #cacaca29;
  border: 1px solid #505050;
}

.nav-menu li.active {
  width: 270px;
}

.nav-footer-text {
  color: rgba(255, 255, 255, 0.7);
  margin-top: 45px;
}

.nav-title {
  color: rgba(255, 255, 255, 0.4);
}

.list-filter-active .nav-title {
  display: list-item !important;
}

.nav-menu li a {
  color: rgba(255, 255, 255, 0.8);
}

.nav-menu li a .dl-ref.label {
  color: rgba(255, 255, 255, 0.8);
}

.nav-menu li > ul li a {
  color: rgba(255, 255, 255, 0.8);
}

.nav-menu li > ul li a > .badge,
.nav-menu li > ul li > ul li a > .badge {
  color: #fff;
  background-color: #c139fd;
}

.nav-menu li > ul li > ul li a {
  color: rgba(255, 255, 255, 0.8);
}

.nav-long-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 145px;
  display: block !important;
}

.nav-wrapper {
  display: flex; /* so child <ul> are side by side */
}

body:not(.nav-function-minify) .nav-menu {
  flex: 0 0 270px;
}

body.nav-function-minify .nav-menu {
  flex: 0 0 75px;
}

.nav-menu {
  transition: transform 0.3s ease, opacity 0.3s ease;
  /* If you want them to layer above each other, you can use z-index. */
  z-index: 1;
}

/* The main menu is at X=0 by default. */
.menu-main-active {
  /* transform: translateX(0); */
  opacity: 1;
}

/* Slide main menu out to the left. */
.menu-main-slideout {
  transform: translateX(-20%);
  opacity: 0;
  pointer-events: none;
}

/* Sub menu is “offscreen right” by default. */
.menu-sub-inactive {
  transform: translateX(-80%);
  opacity: 0;
  pointer-events: none;
}

/* Slide sub menu in to X=0. */
.menu-sub-active {
  transform: translateX(-100%);
  opacity: 1;
}

/* SubContext menu arrow indicator (points right like iOS) */
.has-subcontext > a {
  display: flex !important;
  align-items: center;
}

.has-subcontext > a .nav-link-text {
  flex: 1;
}

.subcontext-arrow {
  margin-left: auto;
  opacity: 0.7;
  font-size: 0.9em;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.has-subcontext > a:hover .subcontext-arrow {
  opacity: 1;
  transform: translateX(3px);
}

/* No transition class for instant state changes */
.nav-main.no-transition,
.nav-sub.no-transition {
  transition: none !important;
}

/* Nav wrapper starts hidden, fades in after JS determines correct state */
.nav-wrapper.nav-initializing {
  opacity: 0;
}

.nav-wrapper.nav-ready {
  opacity: 1;
  transition: opacity 0.25s ease-in-out;
}

/* Nested slide-over panels (menu.php): forward slides in from the right,
   Back slides in from the left. */
.nav-sub.hh-panel-forward > li { animation: hh-panel-in-right .25s ease-out both; }
.nav-sub.hh-panel-back > li { animation: hh-panel-in-left .25s ease-out both; }
@keyframes hh-panel-in-right { from { opacity: 0; transform: translateX(24px); } }
@keyframes hh-panel-in-left { from { opacity: 0; transform: translateX(-24px); } }
@media (prefers-reduced-motion: reduce) {
  .nav-sub.hh-panel-forward > li, .nav-sub.hh-panel-back > li { animation: none; }
}

/* Generic menu icon: a small dot instead of the paper (menu.php / menu sync). */
.nav-menu i.hh-menu-dot {
  font-size: .45rem !important;
  opacity: .75;
  text-align: center;
}

/* Staff: way back to HonuHub Classic, pinned above the menu. */
.nav-menu li.hh-classic-link > a {
  margin: .35rem .75rem .5rem;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 6px;
  background: rgba(255, 255, 255, .08);
  font-weight: 500;
}
.nav-menu li.hh-classic-link > a:hover { background: rgba(255, 255, 255, .18); }
.nav-function-minify .nav-menu li.hh-classic-link > a { margin: .35rem .25rem; }

/* Instant reveal without fade (for same-subcontext navigation) */
.nav-wrapper.nav-ready-instant {
  opacity: 1;
  transition: none;
}

/* SubContext header styling (back button) */
.subcontext-header a {
  display: flex !important;
  align-items: center;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 0.5rem;
}

.subcontext-header a i {
  margin-right: 0.5rem;
}

.badge.badge-icon {
  background-color: #c139fd;
  color: #fff;
  -webkit-box-shadow: 0 0 0 1px #fff;
  box-shadow: 0 0 0 1px #fff;
}

.header-btn[data-class='mobile-nav-on'] {
  border-color: #a1a1a18f;
  background-color: #7676762b;
  background-image: -webkit-gradient(linear, left bottom, left top, from(#ffffff2b), to(#ffffff2b));
  background-image: linear-gradient(to top, #ffffff2b, #ffffff2b);
  color: #252525;
}

.nav-function-hidden:not(.nav-function-top) .page-header [data-class='nav-function-hidden'] {
  background: #00ad67;
  border-color: #00ad67 !important;
  -webkit-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.37);
  box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.37);
  color: #fff !important;
}

.btn-switch.active:after {
  background: rgba(85, 206, 95, 0.3);
  color: #55ce5f;
}

.header-btn[data-class='mobile-nav-on'] {
  border-color: #00ad67;
  background-color: #00ad67;
  background-image: -webkit-gradient(linear, left bottom, left top, from(#ffffff2b), to(#ffffff2b));
  background-image: linear-gradient(to top, #ffffff2b, #ffffff2b);
  color: #fff;
}

/* 
888    888          888 d8b      888                         .d8888b.           888                    88888888888                         888          
888    888          888 Y8P      888                        d88P  Y88b          888                        888                             888          
888    888          888          888                        888    888          888                        888                             888          
8888888888  .d88b.  888 888  .d88888  8888b.  888  888      888        888  888 88888b.   .d88b.           888   .d88b.   .d88b.   .d88b.  888  .d88b.  
888    888 d88""88b 888 888 d88" 888     "88b 888  888      888        888  888 888 "88b d8P  Y8b          888  d88""88b d88P"88b d88P"88b 888 d8P  Y8b 
888    888 888  888 888 888 888  888 .d888888 888  888      888    888 888  888 888  888 88888888          888  888  888 888  888 888  888 888 88888888 
888    888 Y88..88P 888 888 Y88b 888 888  888 Y88b 888      Y88b  d88P Y88b 888 888 d88P Y8b.              888  Y88..88P Y88b 888 Y88b 888 888 Y8b.     
888    888  "Y88P"  888 888  "Y88888 "Y888888  "Y88888       "Y8888P"   "Y88888 88888P"   "Y8888           888   "Y88P"   "Y88888  "Y88888 888  "Y8888  
                                                   888                                                                        888      888              
                                              Y8b d88P                                                                   Y8b d88P Y8b d88P              
                                               "Y88P"                                                                     "Y88P"   "Y88P"               
                                                                                                                                                         */

.cubeToggle {
  --dur: 0.3s;
  --timing: cubic-bezier(0.3, 1.7, 0.6, 0.6);
}

.surface,
.cube__front,
.cube__left,
.cube__top {
  background-color: var(--offColor);
}

.surface,
.surface span {
  display: block;
}

.surface,
.cube {
  transform-style: preserve-3d;
}

.surface {
  box-shadow: 0 0 1em transparent;
  transition: all var(--dur) ease-out;
  cursor: pointer;
  margin: auto;
  position: relative;
  transform: rotateX(45deg) rotateZ(-45deg) translateY(-0.5em);
  width: 4em;
  height: 2em;
  -webkit-tap-highlight-color: transparent;
}

.cube,
.cube span,
.label-text {
  position: absolute;
  left: 0;
}

.cube,
.cube span {
  top: 0;
}

.cube__front,
.cube__left,
.cube__top,
.cube__reflection {
  height: 2em;
  width: 2em;
}

.cube__front,
.cube__left,
.cube__top {
  transition: background-color var(--dur) ease-out, transform var(--dur) var(--timing);
}

.cube__front {
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
  transform: rotateX(-90deg);
  transform-origin: 50% 100%;
}

.cube__left {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
  transform: rotateY(-90deg);
  transform-origin: 0 50%;
}

.cube__top {
  transform: translateZ(2em);
}

.cube__reflection {
  background-color: #000;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%, 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%, 0 100%);
  opacity: 0.04;
  transform: rotate(45deg) scale(0.707);
  transform-origin: 0 0;
  transition: clip-path var(--dur) var(--timing), -webkit-clip-path var(--dur) var(--timing);
}

.cube:nth-child(2) {
  transform: translate(2em, 0);
}

.cube:nth-child(2) .cube__front {
  transform: rotateX(-90deg) scaleY(0.25);
}

.cube:nth-child(2) .cube__left {
  transform: rotateY(-90deg) scaleX(0.25);
}

.cube:nth-child(2) .cube__top {
  transform: translateZ(0.5em);
}

.cubeToggle input[type='checkbox'] {
  position: fixed;
  visibility: hidden;
  top: -1.5em;
  left: -1.5em;
}

.cubeToggle input[type='checkbox']:checked + .surface {
  box-shadow: 0 0 1em var(--onColor);
}

.cubeToggle input[type='checkbox']:checked + .surface,
.cubeToggle input[type='checkbox']:checked + .surface .cube__front,
.cubeToggle input[type='checkbox']:checked + .surface .cube__left,
.cubeToggle input[type='checkbox']:checked + .surface .cube__top {
  background-color: var(--onColor);
}

.cubeToggle input[type='checkbox']:checked + .surface .cube__front {
  transform: rotateX(-90deg) scaleY(0.25);
}

.cubeToggle input[type='checkbox']:checked + .surface .cube__left {
  transform: rotateY(-90deg) scaleX(0.25);
}

.cubeToggle input[type='checkbox']:checked + .surface .cube__top {
  transform: translateZ(0.5em);
}

.cubeToggle input[type='checkbox']:checked + .surface .cube__reflection {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 67% 100%, 0 33%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 67% 100%, 0 33%);
}

.cubeToggle input[type='checkbox']:checked + .surface .cube:nth-child(2) .cube__front {
  transform: rotateX(-90deg);
}

.cubeToggle input[type='checkbox']:checked + .surface .cube:nth-child(2) .cube__left {
  transform: rotateY(-90deg);
}

.cubeToggle input[type='checkbox']:checked + .surface .cube:nth-child(2) .cube__top {
  transform: translateZ(2em);
}

/* disallow select text on .tabToggler-label */
.tabToggler-label {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* swal2 */
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
  background-color: #00a865 !important;
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm:focus {
  box-shadow: 0 0 0 3px rgba(0, 168, 101, 0.5) !important;
}

.bootstrapWizard {
  display: block;
  list-style: none;
  padding: 0;
  position: relative;
  width: 100%;
}

.bootstrapWizard a:active,
.bootstrapWizard a:focus,
.bootstrapWizard a:hover {
  text-decoration: none;
}

.bootstrapWizard li {
  display: block;
  float: left;
  width: 10%;
  text-align: center;
  padding-left: 0;
}

.bootstrapWizard li:before {
  border-top: 3px solid #55606e;
  content: '';
  display: block;
  font-size: 0;
  overflow: hidden;
  position: relative;
  top: 11px;
  right: 1px;
  width: 100%;
  z-index: 1;
}

.bootstrapWizard li:first-child:before {
  left: 50%;
  max-width: 50%;
}

.bootstrapWizard li:last-child:before {
  max-width: 50%;
  width: 50%;
}

.bootstrapWizard li.complete .step {
  background: #0aa66e;
  padding: 1px 6px;
  border: 3px solid #55606e;
}

.bootstrapWizard li .step i {
  font-size: 10px;
  font-weight: 400;
  position: relative;
  top: -1.5px;
}

.bootstrapWizard li .step {
  background: #b2b5b9;
  color: #fff;
  display: inline;
  font-size: 15px;
  font-weight: 700;
  padding: 7px 13px;
  border: 3px solid transparent;
  border-radius: 50%;
  line-height: normal;
  position: relative;
  text-align: center;
  z-index: 2;
  transition: all 0.1s linear 0s;
}

.bootstrapWizard li.active .step,
.bootstrapWizard li.active.complete .step {
  background: #0091d9;
  color: #fff;
  font-weight: 700;
  padding: 7px 13px;
  font-size: 15px;
  border-radius: 50%;
  border: 3px solid #55606e;
}

.bootstrapWizard li .title {
  display: block;
  font-size: 13px;
  line-height: 15px;
  max-width: 100%;
  position: relative;
  table-layout: fixed;
  text-align: center;
  top: 20px;
  word-wrap: break-word;
}

/* shrink fonts size on mobile */
@media (max-width: 680px) {
  .bootstrapWizard li .title {
    font-size: 8px;
  }
}

/* shrink fonts size on mobile */
@media (max-width: 500px) {
  .bootstrapWizard li .title {
    font-size: 7px;
  }
}

.header-icon {
  cursor: pointer !important;
}

/* wiki */
/* 
888       888 d8b 888      d8b 
888   o   888 Y8P 888      Y8P 
888  d8b  888     888          
888 d888b 888 888 888  888 888 
888d88888b888 888 888 .88P 888 
88888P Y88888 888 888888K  888 
8888P   Y8888 888 888 "88b 888 
888P     Y888 888 888  888 888  */

.wiki-menu ul {
  list-style-position: inside;
  list-style-type: none;
  padding: 0;
}

.wiki-form .input-group {
  margin: 0 auto;
  width: 95%;
  flex-wrap: nowrap;
}


.foldericon {
  margin-right: 7px;
  margin-left: -24px;
}

.hr-thick {
  border: 2px solid #ccc;
  margin-bottom: 30px;
  clear: both;
}

.hr-thin {
  border: 1px solid #ccc;
  margin-bottom: 30px;
  clear: both;
}

#gBody span,
h1 {
  letter-spacing: normal !important;
}

#rejection {
  display: none;
}

#rejection {
  display: none;
}

.wiki-vote-btn.active[data-vote="up"] {
  background-color: #dff0d8;
  border-color: #5cb85c;
  color: #3c763d;
}

.wiki-vote-btn.active[data-vote="down"] {
  background-color: #f2dede;
  border-color: #d9534f;
  color: #a94442;
}

.mobile-text {
  display: none;
}

@media screen and (max-width: 600px) {
  .mobile-text {
    display: inline-block;
  }

  #gBody img {
    max-width: 100% !important;
    height: auto !important;
  }

  #gBody span {
    display: inline !important;
  }
}

/* Add: highlight style */
.wiki-highlight {
  background: #fff59d;
  padding: 0 2px;
}

.results-link {
  font-weight: normal !important;
}

.wiki-icon {
  float: left;
  position: relative;
  width: 40px;
  height: 32px;
  border: 1px solid #ccc;
  border-left: none;
}

.wiki-list {
  width: 100%;
}

.wiki-list td {
  line-height: 1.6;
  font-size: 14px;
  vertical-align: top;
  padding: 5px 0;
  border-bottom: 1px solid #77777733;
}

.wiki-folder-icon {
  border-radius: 15px;
}

.wiki-folder-icon img {
  width: 90%;
  max-width: 150px;
  margin-top: 15px;
  transition: 1s ease;
}

.wiki-folder-icon img:hover,
.wiki-folder-glyph:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  transition: 1s ease;
}

.wiki-folder-icon p {
  text-align: center;
  font-family: RobotoDraft, Roboto, sans-serif;
  color: rgb(115, 115, 115);
}

.wiki-folder-glyph {
  color: #f1d592;
  width: 90%;
  max-width: 150px;
  font-size: 90px;
  transition: 1s ease;
}
.results-link {
  font-weight: normal !important;
  word-wrap: normal;
}

/* Commenting out for now, making wiki text white on a light background,
not applicable to dark mode because background stays light */
/*#gBody {
  color: #fff !important;
}

#gBody span p {
  color: #fff !important;
}

#gBody p {
  color: #fff !important;
}*/

/*  
Canvas sign in buttons
*/
.canvas-signin-btn {
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  background-color: #ffffff;
  text-decoration: none;
  font-size: 25px;
  /* font-weight: 900; */
  margin: 2px 2px;
  width: 275px;
  color: rgb(87, 87, 87);
  text-align: right;
  padding: 0.6em;
  padding-right: 1em;
}

.mod-skin-dark:not(.mod-skin-light) .canvas-signin-btn {
  background-color: rgba(10, 10, 10, 0.6);
}

.canvas-signin-btn img {
  float: left !important;
  margin-left: auto;
  width: 38px;
}

/* 
PayPal button 
Prevent from showing on four lines on smaller resolutions
*/
.pp-btn {
  min-width: 10rem;
}

/* 
  Select2 Bootstrap Validation Integration
  Handles both single and multiple select states with validation icons
*/

/* ====================================
   INVALID STATE STYLING
   ==================================== */

/* Border colors for invalid state */
.was-validated .select2-hidden-accessible:invalid + .select2-container .select2-selection,
.select2-hidden-accessible.is-invalid + .select2-container .select2-selection {
  border-color: #be2d2d !important;
}

/* Single select - invalid state with icon */
.was-validated .select2-hidden-accessible:invalid + .select2-container .select2-selection--single,
.select2-hidden-accessible.is-invalid + .select2-container .select2-selection--single {
  padding-right: calc(1.47em + 1rem) !important;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMicgaGVpZ2h0PScxMicgZmlsbD0nbm9uZScgc3Ryb2tlPScjQmUyZDJkJyB2aWV3Qm94PScwIDAgMTIgMTInPjxjaXJjbGUgY3g9JzYnIGN5PSc2JyByPSc0LjUnLz48cGF0aCBzdHJva2UtbGluZWpvaW49J3JvdW5kJyBkPSdNNS44IDMuNmguNEw2IDYuNXonLz48Y2lyY2xlIGN4PSc2JyBjeT0nOC4yJyByPScuNicgZmlsbD0nI0JlMmQyZCcgc3Ryb2tlPSdub25lJy8+PC9zdmc+');
  background-repeat: no-repeat;
  background-position: right calc(0.3675em + 0.25rem) center;
  background-size: calc(0.735em + 0.5rem) calc(0.735em + 0.5rem);
}

/* Multiple select - invalid state with icon */
.was-validated .select2-hidden-accessible:invalid + .select2-container .select2-selection--multiple,
.select2-hidden-accessible.is-invalid + .select2-container .select2-selection--multiple {
  padding-right: calc(1.47em + 1rem) !important;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMicgaGVpZ2h0PScxMicgZmlsbD0nbm9uZScgc3Ryb2tlPScjQmUyZDJkJyB2aWV3Qm94PScwIDAgMTIgMTInPjxjaXJjbGUgY3g9JzYnIGN5PSc2JyByPSc0LjUnLz48cGF0aCBzdHJva2UtbGluZWpvaW49J3JvdW5kJyBkPSdNNS44IDMuNmguNEw2IDYuNXonLz48Y2lyY2xlIGN4PSc2JyBjeT0nOC4yJyByPScuNicgZmlsbD0nI0JlMmQyZCcgc3Ryb2tlPSdub25lJy8+PC9zdmc+');
  background-repeat: no-repeat;
  background-position: right calc(0.3675em + 0.25rem) top calc(0.375rem + 4px);
  background-size: calc(0.735em + 0.5rem) calc(0.735em + 0.5rem);
}

/* ====================================
   VALID STATE STYLING
   ==================================== */

/* Border colors for valid state */
.was-validated .select2-hidden-accessible:valid[required] + .select2-container .select2-selection,
.select2-hidden-accessible.is-valid + .select2-container .select2-selection {
  border-color: #3986ac !important;
}

/* Single select - valid state with icon */
.was-validated .select2-hidden-accessible:valid[required] + .select2-container .select2-selection--single,
.select2-hidden-accessible.is-valid + .select2-container .select2-selection--single {
  padding-right: calc(1.47em + 1rem) !important;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc4JyBoZWlnaHQ9JzgnIHZpZXdCb3g9JzAgMCA4IDgnPjxwYXRoIGZpbGw9JyMzOTg2QUMnIGQ9J00yLjMgNi43M0wuNiA0LjUzYy0uNC0xLjA0LjQ2LTEuNCAxLjEtLjhsMS4xIDEuNCAzLjQtMy44Yy42LS42MyAxLjYtLjI3IDEuMi43bC00IDQuNmMtLjQzLjUtLjguNC0xLjEuMXonLz48L3N2Zz4=');
  background-repeat: no-repeat;
  background-position: right calc(0.3675em + 0.25rem) center;
  background-size: calc(0.735em + 0.5rem) calc(0.735em + 0.5rem);
}

/* Multiple select - valid state with icon */
.was-validated .select2-hidden-accessible:valid[required] + .select2-container .select2-selection--multiple,
.select2-hidden-accessible.is-valid + .select2-container .select2-selection--multiple {
  padding-right: calc(1.47em + 1rem) !important;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc4JyBoZWlnaHQ9JzgnIHZpZXdCb3g9JzAgMCA4IDgnPjxwYXRoIGZpbGw9JyMzOTg2QUMnIGQ9J00yLjMgNi43M0wuNiA0LjUzYy0uNC0xLjA0LjQ2LTEuNCAxLjEtLjhsMS4xIDEuNCAzLjQtMy44Yy42LS42MyAxLjYtLjI3IDEuMi43bC00IDQuNmMtLjQzLjUtLjguNC0xLjEuMXonLz48L3N2Zz4=');
  background-repeat: no-repeat;
  background-position: right calc(0.3675em + 0.25rem) top calc(0.375rem + 4px);
  background-size: calc(0.735em + 0.5rem) calc(0.735em + 0.5rem);
}

/* ====================================
   FOCUS STATE STYLING
   ==================================== */

/* Invalid focus state */
.was-validated .select2-hidden-accessible:invalid + .select2-container.select2-container--focus .select2-selection,
.select2-hidden-accessible.is-invalid + .select2-container.select2-container--focus .select2-selection,
.was-validated .select2-hidden-accessible:invalid + .select2-container.select2-container--open .select2-selection,
.select2-hidden-accessible.is-invalid + .select2-container.select2-container--open .select2-selection {
  border-color: #be2d2d !important;
  box-shadow: 0 0 0 0.2rem rgba(190, 45, 45, 0.25) !important;
}

/* Valid focus state */
.was-validated .select2-hidden-accessible:valid[required] + .select2-container.select2-container--focus .select2-selection,
.select2-hidden-accessible.is-valid + .select2-container.select2-container--focus .select2-selection,
.was-validated .select2-hidden-accessible:valid[required] + .select2-container.select2-container--open .select2-selection,
.select2-hidden-accessible.is-valid + .select2-container.select2-container--open .select2-selection {
  border-color: #3986ac !important;
  box-shadow: 0 0 0 0.2rem rgba(57, 134, 172, 0.25) !important;
}

/* ====================================
   DROPDOWN ARROW ADJUSTMENTS
   ==================================== */

/* Adjust dropdown arrow position for single selects with validation icons */
.was-validated
  .select2-hidden-accessible:invalid
  + .select2-container
  .select2-selection--single
  .select2-selection__arrow,
.was-validated
  .select2-hidden-accessible:valid[required]
  + .select2-container
  .select2-selection--single
  .select2-selection__arrow,
.select2-hidden-accessible.is-invalid + .select2-container .select2-selection--single .select2-selection__arrow,
.select2-hidden-accessible.is-valid + .select2-container .select2-selection--single .select2-selection__arrow {
  right: calc(1.47em + 1rem) !important;
}

/* ====================================
   FEEDBACK TEXT COMPATIBILITY
   ==================================== */

/* Ensure validation feedback text displays correctly */
.was-validated .select2-hidden-accessible:invalid ~ .invalid-feedback,
.was-validated .select2-hidden-accessible:invalid ~ .invalid-tooltip,
.select2-hidden-accessible.is-invalid ~ .invalid-feedback,
.select2-hidden-accessible.is-invalid ~ .invalid-tooltip {
  display: block;
}

.was-validated .select2-hidden-accessible:valid[required] ~ .valid-feedback,
.was-validated .select2-hidden-accessible:valid[required] ~ .valid-tooltip,
.select2-hidden-accessible.is-valid ~ .valid-feedback,
.select2-hidden-accessible.is-valid ~ .valid-tooltip {
  display: block;
}

/* ====================================
   SELECT2 CHOICE STYLING (TAGS)
   ==================================== */

/* Style selected items/tags in multiple select */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: rgb(4, 159, 93);
  border-color: rgb(0, 122, 72);
  color: rgb(255, 255, 255);
  padding: 0 5px;
  margin: 3px 5px 3px 0;
}

/* Style remove button on tags */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: rgb(255, 255, 255);
  margin-right: 5px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: rgb(255, 255, 255);
  opacity: 0.8;
}

/* ====================================
   DISABLED STATE
   ==================================== */

/* Ensure disabled selects don't show validation styling */
.was-validated .select2-hidden-accessible:disabled + .select2-container .select2-selection,
.select2-hidden-accessible.is-invalid:disabled + .select2-container .select2-selection,
.select2-hidden-accessible.is-valid:disabled + .select2-container .select2-selection {
  background-image: none !important;
  border-color: #ced4da !important;
}

/* ====================================
   CLEAR SELECTION BUTTON
   ==================================== */

/* Adjust clear button position when validation icons are present */
.was-validated .select2-hidden-accessible:invalid + .select2-container .select2-selection__clear,
.was-validated .select2-hidden-accessible:valid[required] + .select2-container .select2-selection__clear,
.select2-hidden-accessible.is-invalid + .select2-container .select2-selection__clear,
.select2-hidden-accessible.is-valid + .select2-container .select2-selection__clear {
  right: calc(1.47em + 1.5rem) !important;
}

/* 
  Stepper Component Styling
  Responsive horizontal stepper with dynamic sizing
*/

/* ====================================
   CSS VARIABLES
   ==================================== */

:root {
  --stepper-circle-size: clamp(1rem, 4vw, 2.5rem);
  --stepper-spacing: clamp(0.1rem, 1.5vw, 0.4rem);
}

/* ====================================
   BASE STEPPER CONTAINER
   ==================================== */

.hh-stepper {
  display: flex;
  overflow-x: hidden;
  overflow-y: hidden;
  padding-bottom: 1rem;
  padding-left: 0;
  padding-right: 0;
}

/* ====================================
   STEPPER ITEM BASE STYLES
   ==================================== */

.hh-stepper__item {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: center;
  min-width: clamp(60px, 12vw, 100px);
  position: relative;
}

/* Link styling - remove default anchor styles */
.hh-stepper__item a,
.hh-stepper__item a:hover,
.hh-stepper__item a:visited,
.hh-stepper__item a:active,
.hh-stepper__item a:focus {
  text-decoration: none;
  color: #444;
}

/* Circle/number indicator */
.hh-stepper__item:before {
  content: '';
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--stepper-circle-size);
  height: var(--stepper-circle-size);
  border-radius: 50%;
  background-color: lightgrey;
  opacity: 1;
  margin: 0 auto 0.5rem;
  font-size: clamp(0.75rem, 2.5vw, 1.2rem);
  color: #444;
  font-weight: bold;
  flex-shrink: 0;
}

/* Connecting line between steps */
.hh-stepper__item:not(:last-child):after {
  content: '';
  position: relative;
  top: calc(var(--stepper-circle-size) / 2);
  width: calc(100% - var(--stepper-circle-size) - calc(var(--stepper-spacing) * 2));
  left: calc(50% + calc(var(--stepper-circle-size) / 2 + var(--stepper-spacing)));
  height: 2px;
  background-color: #e0e0e0;
  order: -1;
}

/* ====================================
   STEPPER TEXT CONTENT
   ==================================== */

.hh-stepper__title {
  font-weight: bold;
  font-size: clamp(0.55rem, 2.8vw, 1rem);
  margin-bottom: 0.25rem;
  padding: 0 0.1rem;
  word-wrap: break-word;
  hyphens: auto;
  line-height: 1.2;
}

.hh-stepper__desc {
  color: grey;
  font-size: clamp(0.45rem, 2vw, 0.7rem);
  padding-left: var(--stepper-spacing);
  padding-right: var(--stepper-spacing);
  word-wrap: break-word;
  hyphens: auto;
  line-height: 1.3;
}

/* ====================================
   STEP NUMBERS
   ==================================== */

.hh-stepper__item.step1:before {
  content: '1';
}
.hh-stepper__item.step2:before {
  content: '2';
}
.hh-stepper__item.step3:before {
  content: '3';
}
.hh-stepper__item.step4:before {
  content: '4';
}
.hh-stepper__item.step5:before {
  content: '5';
}
.hh-stepper__item.step6:before {
  content: '6';
}

/* ====================================
   STEPPER STATES
   ==================================== */

/* Complete state - step finished */
.hh-stepper__item.complete:before {
  background-color: green;
  color: #fff;
  opacity: 1;
}

.hh-stepper__item.complete:after,
.hh-stepper__item.optional:after {
  background-color: green;
}

/* Active state - current step */
.hh-stepper__item.active:before {
  background-color: #0080ff;
  color: #fff;
  opacity: 1;
}

.hh-stepper__item.active:after {
  background-color: #e0e0e0;
}

/* Inactive state - future steps */
.hh-stepper__item.inactive:before {
  background-color: lightgrey;
  color: #444;
  opacity: 0.6;
}

.hh-stepper__item.inactive:after {
  background-color: #e0e0e0;
}

/* Past incomplete state - skipped or failed steps */
.hh-stepper__item.past.incomplete:before {
  background-color: red;
  color: #fff;
  opacity: 0.6;
}

.hh-stepper__item.past.incomplete:after {
  background-color: #e0e0e0;
}

/* ====================================
   RESPONSIVE BREAKPOINTS
   ==================================== */

/* Mobile optimizations - iPhone SE and similar small screens */
@media (max-width: 640px) {
  :root {
    --stepper-circle-size: 1.25rem;
    --stepper-spacing: 0.1rem;
  }

  .hh-stepper {
    padding: 0 0 0.5rem 0;
  }

  .hh-stepper__item {
    min-width: 45px;
  }

  .hh-stepper__item:before {
    font-size: 0.65rem;
    margin-bottom: 0.25rem;
  }

  .hh-stepper__title {
    font-size: 0.55rem;
    margin-bottom: 0.15rem;
    padding: 0 0.05rem;
  }

  .hh-stepper__desc {
    font-size: 0.45rem;
  }
}

/* iPhone SE (375px width) specific */
@media (max-width: 375px) {
  :root {
    --stepper-circle-size: 1.15rem;
  }

  .hh-stepper__item {
    min-width: 42px;
  }

  .hh-stepper__item:before {
    font-size: 0.6rem;
  }

  .hh-stepper__title {
    font-size: 0.5rem;
  }

  .hh-stepper__desc {
    font-size: 0.42rem;
  }
}

/* Very small screens - ultra compact */
@media (max-width: 360px) {
  :root {
    --stepper-circle-size: 1.1rem;
  }

  .hh-stepper__item {
    min-width: 40px;
  }

  .hh-stepper__item:before {
    font-size: 0.58rem;
  }

  .hh-stepper__title {
    font-size: 0.48rem;
  }

  .hh-stepper__desc {
    font-size: 0.4rem;
    line-height: 1.2;
  }
}

/* ==========================================================================
   Main Search (Header Search Bar)
   ========================================================================== */

.main-search-container {
  position: relative;
  min-width: 280px;
}

.main-search-input {
  border-radius: 12px;
  padding-right: 38px;
}

/* Search input wrapper for clear button positioning */
.search .app-forms .search-input-wrapper {
  position: relative !important;
  width: 100%;
  display: block;
}

.search .app-forms .search-input-wrapper input#main-search-input {
  padding-right: 36px !important;
  width: 100%;
}

#main-search-clear {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 24px !important;
  height: 24px !important;
  display: none !important;
  align-items: center;
  justify-content: center;
  border: none !important;
  background: rgba(0, 0, 0, 0.08) !important;
  border-radius: 50% !important;
  cursor: pointer;
  color: var(--theme-fusion-700);
  font-size: 12px;
  transition: background 120ms ease, color 120ms ease;
  padding: 0 !important;
  z-index: 5;
  margin: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

#main-search-clear.show {
  display: flex !important;
}

#main-search-clear:hover {
  background: rgba(0, 0, 0, 0.15) !important;
  color: var(--theme-danger-700);
}

.mod-skin-dark #main-search-clear,
[data-theme="dark"] #main-search-clear {
  background: rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.7);
}

.mod-skin-dark #main-search-clear:hover,
[data-theme="dark"] #main-search-clear:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  color: var(--theme-danger-500);
}

/* Placeholder visibility fix for dark mode */
#main-search-input::placeholder {
  color: rgba(0, 0, 0, 0.5);
  opacity: 1;
}

.mod-skin-dark #main-search-input::placeholder,
[data-theme="dark"] #main-search-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
  opacity: 1;
}

.main-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 12px;
  right: 12px;
  z-index: 1050;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  padding: 8px 18px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  transition: opacity 120ms ease;
}

.main-search-results.msr-hidden {
  display: none;
  opacity: 0;
}

.msr-group + .msr-group {
  margin-top: 10px;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.msr-heading {
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #666;
  margin-bottom: 6px;
}

.msr-item {
  width: 100%;
  border: 0;
  background: #f8f9fa;
  border-radius: 10px;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms ease, box-shadow 120ms ease;
  display: block;
  color: #222;
}

.msr-item + .msr-item {
  margin-top: 6px;
}

.msr-item:hover,
.msr-item:focus,
.msr-item.is-active {
  background: #e6f4ea;
  box-shadow: inset 0 0 0 1px #8bc48a;
  outline: none;
}

.msr-item-inner {
  display: flex;
  gap: 10px;
  align-items: center;
}

.msr-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: #eef2f7;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.msr-avatar-empty {
  background-image: linear-gradient(135deg, #f5f7fb 0%, #e9eef5 100%);
}

.msr-body {
  flex: 1;
  min-width: 0;
}

.msr-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 4px 10px;
  font-size: 12px;
  color: #444;
}

.msr-meta-grid > div {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  align-items: center;
  background: #f1f3f6;
  border-radius: 6px;
  padding: 4px 6px;
}

.msr-label {
  font-weight: 600;
  color: #556;
}

.msr-value {
  font-weight: 600;
  color: #0b1f0f;
}

.msr-line {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
}

.msr-title {
  font-weight: 700;
  font-size: 14px;
  color: #0a1f0f;
}

.msr-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(var(--theme-rgb-fusion), 0.08);
  color: var(--theme-fusion-400);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.msr-pill-green {
  background: rgba(var(--theme-rgb-success), 0.12);
  color: var(--theme-success-600);
}

.msr-pill-blue {
  background: rgba(var(--theme-rgb-primary), 0.12);
  color: var(--theme-primary-600);
}

.msr-pill-purple {
  background: rgba(var(--theme-rgb-info), 0.12);
  color: var(--theme-info-600);
}

.msr-pronouns {
  font-size: 12px;
  font-weight: 400;
  color: var(--theme-fusion-400);
  margin-left: 2px;
}

.msr-meta {
  font-size: 12px;
  color: var(--theme-fusion-300);
}

.msr-empty,
.msr-error,
.msr-loading {
  padding: 10px;
  text-align: center;
  color: var(--theme-fusion-400);
  background: rgba(var(--theme-rgb-fusion), 0.03);
  border-radius: 8px;
}

/* Clickable links within search results */
.msr-link {
  color: var(--theme-primary-600);
  text-decoration: none;
  transition: color 120ms ease;
}

.msr-link:hover {
  color: var(--theme-primary-700);
  text-decoration: underline;
}

/* Takeover buttons row */
.msr-takeover-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.msr-takeover-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}

.msr-takeover-btn i {
  font-size: 11px;
}

.msr-takeover-parent {
  background: rgba(var(--theme-rgb-info), 0.1);
  color: var(--theme-info-600);
  border: 1px solid rgba(var(--theme-rgb-info), 0.3);
}

.msr-takeover-parent:hover {
  background: rgba(var(--theme-rgb-info), 0.18);
  color: var(--theme-info-700);
  text-decoration: none;
}

.msr-takeover-student {
  background: rgba(var(--theme-rgb-primary), 0.1);
  color: var(--theme-primary-600);
  border: 1px solid rgba(var(--theme-rgb-primary), 0.3);
}

.msr-takeover-student:hover {
  background: rgba(var(--theme-rgb-primary), 0.18);
  color: var(--theme-primary-700);
  text-decoration: none;
}

.msr-takeover-staff {
  background: rgba(var(--theme-rgb-fusion), 0.1);
  color: var(--theme-fusion-600);
  border: 1px solid rgba(var(--theme-rgb-fusion), 0.3);
}

.msr-takeover-staff:hover {
  background: rgba(var(--theme-rgb-fusion), 0.18);
  color: var(--theme-fusion-700);
  text-decoration: none;
}

/* Read-only "View as" — visually distinct (amber) from the takeover actions
   above, since it carries none of their account-switch risk. */
.msr-takeover-view {
  background: rgba(var(--theme-rgb-warning), 0.1);
  color: var(--theme-warning-700);
  border: 1px solid rgba(var(--theme-rgb-warning), 0.3);
}

.msr-takeover-view:hover {
  background: rgba(var(--theme-rgb-warning), 0.18);
  color: var(--theme-warning-800);
  text-decoration: none;
}

/* Count indicator in section headings */
.msr-count {
  font-weight: 400;
  font-size: 11px;
  color: var(--theme-fusion-300);
  margin-left: 4px;
}

/* Load More button styles */
.msr-load-more {
  width: 100%;
  border: 1px dashed rgba(var(--theme-rgb-fusion), 0.25);
  background: rgba(var(--theme-rgb-fusion), 0.02);
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 8px;
  text-align: center;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--theme-primary-600);
  transition: background-color 120ms ease, border-color 120ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.msr-load-more:hover:not(:disabled),
.msr-load-more.is-active {
  background: rgba(var(--theme-rgb-primary), 0.08);
  border-color: rgba(var(--theme-rgb-primary), 0.4);
  outline: none;
}

.msr-load-more:disabled {
  cursor: not-allowed;
  opacity: 0.7;
  color: var(--theme-fusion-300);
}

.msr-load-more i {
  font-size: 14px;
}

/* Dark mode styles for main search results - uses SmartAdmin dark mode colors */
.mod-skin-dark:not(.mod-skin-light) .main-search-results {
  background: #26272b;
  border-color: rgba(0, 0, 0, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  color: #d5d9df;
}

.mod-skin-dark:not(.mod-skin-light) .msr-group + .msr-group {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.mod-skin-dark:not(.mod-skin-light) .msr-heading {
  color: #d5d9df;
}

.mod-skin-dark:not(.mod-skin-light) .msr-item {
  background: #37393e;
  color: #d5d9df;
}

.mod-skin-dark:not(.mod-skin-light) .msr-item:hover,
.mod-skin-dark:not(.mod-skin-light) .msr-item:focus,
.mod-skin-dark:not(.mod-skin-light) .msr-item.is-active {
  background: rgba(var(--theme-rgb-success), 0.15);
  box-shadow: inset 0 0 0 1px rgba(var(--theme-rgb-success), 0.4);
}

.mod-skin-dark:not(.mod-skin-light) .msr-avatar {
  background-color: #303136;
  border-color: rgba(255, 255, 255, 0.08);
}

.mod-skin-dark:not(.mod-skin-light) .msr-avatar-empty {
  background-image: linear-gradient(135deg, #37393e 0%, #26272b 100%);
}

.mod-skin-dark:not(.mod-skin-light) .msr-meta-grid {
  color: #d5d9df;
}

.mod-skin-dark:not(.mod-skin-light) .msr-meta-grid > div {
  background: rgba(255, 255, 255, 0.05);
}

.mod-skin-dark:not(.mod-skin-light) .msr-label {
  color: rgba(255, 255, 255, 0.6);
}

.mod-skin-dark:not(.mod-skin-light) .msr-value {
  color: #ffffff;
}

.mod-skin-dark:not(.mod-skin-light) .msr-title {
  color: #ffffff;
}

.mod-skin-dark:not(.mod-skin-light) .msr-meta {
  color: var(--theme-success-400);
}

.mod-skin-dark:not(.mod-skin-light) .msr-pill {
  background: rgba(255, 255, 255, 0.1);
  color: #d5d9df;
}

.mod-skin-dark:not(.mod-skin-light) .msr-pronouns {
  color: rgba(255, 255, 255, 0.6);
}

.mod-skin-dark:not(.mod-skin-light) .msr-empty,
.mod-skin-dark:not(.mod-skin-light) .msr-error,
.mod-skin-dark:not(.mod-skin-light) .msr-loading {
  background: rgba(255, 255, 255, 0.03);
  color: #d5d9df;
}

.mod-skin-dark:not(.mod-skin-light) .msr-load-more {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.03);
  color: var(--theme-primary-200);
}

.mod-skin-dark:not(.mod-skin-light) .msr-load-more:hover:not(:disabled) {
  background: rgba(var(--theme-rgb-primary), 0.12);
  border-color: rgba(var(--theme-rgb-primary), 0.5);
}

/* ==========================================================================
   Learning Coach / Profile Photo Styles
   ========================================================================== */

/* Profile photo container with hover overlay */
.lc-profile-photo-container,
.lc-photo-container {
  position: relative;
  display: inline-block;
}

/* Large profile photo (profile page) */
.lc-profile-photo {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  border: 3px solid #e0e0e0;
}

/* Thumbnail photo (account settings) */
.lc-photo-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #e0e0e0;
}

/* Hover overlay for photo upload */
.photo-upload-overlay,
.lc-photo-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
}

.photo-upload-overlay {
  padding: 8px;
  border-radius: 0 0 8px 8px;
}

.lc-photo-overlay {
  padding: 4px;
  border-radius: 0 0 8px 8px;
  font-size: 11px;
}

.lc-profile-photo-container:hover .photo-upload-overlay,
.lc-photo-container:hover .lc-photo-overlay {
  opacity: 1;
}

.lc-photo-overlay:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* Student card in LC profile */
.student-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.student-photo {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 50%;
  margin-right: 15px;
}

/* ==========================================================================
   Image Cropper Modal Styles
   ========================================================================== */

.img-container {
  max-height: 400px;
  min-height: 200px;
  background-color: #f8f9fa;
  overflow: hidden;
}

#cropperImage {
  display: block;
  max-width: 100%;
}


/* Callout boxes are INSET by default — running edge to edge made them read as
   another full-width band and they got lost against the post. The editor's
   "full width" toggle adds --full to opt back out. */
.hh-grey-box { margin-left: 24px; margin-right: 24px; }
.hh-grey-box.hh-grey-box--full { margin-left: 0; margin-right: 0; }
@media (max-width: 640px) {
  .hh-grey-box { margin-left: 8px; margin-right: 8px; }
}


/* A post arrived at via a shared link — flashes briefly so the reader can see
   which one they were sent to. */
.hh-post-deeplinked {
  animation: hhDeepLinkFlash 2.4s ease-out 1;
}
@keyframes hhDeepLinkFlash {
  0%   { box-shadow: 0 0 0 3px rgba(0, 173, 103, 0.55); }
  70%  { box-shadow: 0 0 0 3px rgba(0, 173, 103, 0.35); }
  100% { box-shadow: 0 0 0 3px rgba(0, 173, 103, 0); }
}

/* Shared-link target not on this page (expired, or not in this reader's feed). */
.hh-deeplink-missing {
  background: #fff7e6; border: 1px solid #f0c568; color: #6b4a08;
  border-radius: 8px; padding: 10px 16px; margin: 0 0 14px; font-size: 14px;
}


/* Excluded audiences in the reader's audience-info block. The positive chips
   are solid; these are outlined and struck through, because they name people
   the post was deliberately NOT sent to — the opposite meaning, so they must
   not merely be a different shade of the same chip. */
.hh-audience-info--excluded { margin-top: 3px; }
.hh-audience-info--excluded .hh-audience-info-item {
    background: transparent;
    color: #b02a37;
    border: 1px dashed rgba(220, 53, 69, 0.5);
    text-decoration: line-through;
}
.hh-audience-info--excluded::before {
    content: 'Not sent to';
    display: inline-block;
    margin-right: 5px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    opacity: 0.7;
}
.mod-skin-dark:not(.mod-skin-light) .hh-audience-info--excluded .hh-audience-info-item {
    color: #ff8b96;
    border-color: rgba(255, 139, 150, 0.45);
}

/* Bootstrap's contextual table classes (.table-danger/.table-success/.table-secondary) are
   hardcoded light-mode colors with no dark variant, so they render as washed-out pale blocks
   against a dark theme. Re-tint them as subtle overlays on the existing dark background instead. */
.mod-skin-dark:not(.mod-skin-light) .table-danger,
.mod-skin-dark:not(.mod-skin-light) .table-danger > th,
.mod-skin-dark:not(.mod-skin-light) .table-danger > td {
    background-color: rgba(220, 53, 69, 0.28);
}
.mod-skin-dark:not(.mod-skin-light) .table-success,
.mod-skin-dark:not(.mod-skin-light) .table-success > th,
.mod-skin-dark:not(.mod-skin-light) .table-success > td {
    background-color: rgba(40, 167, 69, 0.28);
}
.mod-skin-dark:not(.mod-skin-light) .table-secondary,
.mod-skin-dark:not(.mod-skin-light) .table-secondary > th,
.mod-skin-dark:not(.mod-skin-light) .table-secondary > td {
    background-color: rgba(255, 255, 255, 0.08);
}

/* register/index.php's instructions/mahalo content comes from the enrollment_instructions DB
   table (whatever a content editor pasted into it) with no sanitization. A stored inline
   white-space/width style on a heading was forcing a wide unwrapped line, which cascaded a
   too-wide box up through the flex row/col chain on narrow viewports. Force anything in here
   to wrap and respect the container regardless of what's embedded in the stored HTML. */
.hh-reg-instructions,
.hh-reg-instructions * {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Portal Routing: a menu link to a page on the other server (classic <-> new). */
.hh-cross-server {
  margin-left: 4px;
  font-size: 0.75em;
  opacity: 0.65;
  vertical-align: 1px;
}
a:hover .hh-cross-server { opacity: 1; }

/* Accordion children (main menu and inside panels): a light indent instead of
   lining up under the parent's text, and less right padding, so long names
   ("Admin Approved Absence") get room instead of wrapping to three lines. */
body:not(.nav-function-minify) .nav-menu > li > ul > li > a {
  padding-left: 2.75rem;
  padding-right: 1rem;
}
.subcontext-arrow {
  flex: none;
  margin-left: .5rem;
}

/* The menu's scrollbar: slim, and its space always kept, so opening an
   accordion that makes the menu scroll doesn't squeeze every row narrower. */
.primary-nav {
  scrollbar-gutter: stable;
}
.primary-nav::-webkit-scrollbar { width: 6px; }
.primary-nav::-webkit-scrollbar-track { background: transparent; }
.primary-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .25); border-radius: 3px; }
.primary-nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .4); }
@supports not selector(::-webkit-scrollbar) {
  .primary-nav { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; }
}

/* Stacked table rows on small screens.
   Opt in by adding `hh-stack-sm` to the `.table-responsive` wrapper. At <768px each row becomes a
   small block (name, then buttons, then status), the header row is hidden and the table no longer
   scrolls sideways. Used by the family/student document upload pages. */
@media (max-width: 767.98px) {
  .hh-stack-sm table,
  .hh-stack-sm tbody,
  .hh-stack-sm tr,
  .hh-stack-sm td { display: block; width: 100% !important; }
  .hh-stack-sm thead { display: none; }
  .hh-stack-sm tr { padding: .5rem 0; border-bottom: 1px solid rgba(128, 128, 128, .25); }
  .hh-stack-sm td { border: 0 !important; padding: .25rem .5rem !important; text-align: left !important; }
  .hh-stack-sm td .d-flex { justify-content: flex-start !important; }
  .hh-stack-sm .custom-file { flex: 1 1 100%; max-width: none !important; }
}

/* Form action row: primary button + Clear Form + "(*) Denotes a required field" note.
   Wrap them in `.hh-form-actions`. Desktop: buttons left, note right (as before).
   Phones (<576px): buttons stack full width, note sits right-aligned underneath. */
.hh-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1rem 0; }
.hh-form-actions .help-block { margin: 0 0 0 auto; }
@media (max-width: 575.98px) {
  .hh-form-actions .btn { flex: 1 1 100%; white-space: normal; }
  .hh-form-actions .help-block { flex: 1 1 100%; margin: 0; text-align: right; }
}

/* Valid styling only for REQUIRED fields.
   Bootstrap marks every passing field green after a submit attempt — including optional
   fields left blank, which reads as "done". Optional text boxes keep their normal look
   (select2 boxes are handled above by limiting their :valid rules to [required]). */
.was-validated .form-control:valid:not([required]) {
  border-color: #E5E5E5;
  padding-right: 0.875rem;
  background-image: none;
}
.was-validated .form-control:valid:not([required]):focus {
  border-color: #00AD67;
  box-shadow: 0 0 0 0.2rem transparent;
}
.mod-skin-dark:not(.mod-skin-light) .was-validated .form-control:valid:not([required]) {
  border-color: rgba(0, 0, 0, 0.35);
}
.mod-skin-dark:not(.mod-skin-light) .was-validated .form-control:valid:not([required]):focus {
  border-color: rgba(var(--theme-rgb-primary), 0.7);
}

/* Unchecked radio / checkbox outline: the theme's borders are ~2:1 (light, #adb5bd on white) and
   ~1.3:1 (dark, #37393e on the panel) — below the 3:1 WCAG asks for form-control boundaries.
   Checked / disabled / validation states use more specific theme rules and are unaffected. */
.custom-control-label::before { border-color: #8a8d91; }
.mod-skin-dark:not(.mod-skin-light) .custom-control-label::before { border-color: rgba(255, 255, 255, 0.55); }

/* Radios / checkboxes after a submit attempt (`.was-validated`).
   1) The theme turns the label TEXT green (#2e8b57) for every "valid" control. That is ~3.4:1 on the
      dark panel (text needs 4.5:1) and it colours both options of a group, so the text stays normal.
   2) Like text boxes (above), only REQUIRED controls get the valid ring; an optional group keeps its
      normal look. Invalid (red) styling is unchanged. */
.was-validated .custom-control-input:valid ~ .custom-control-label { color: inherit; }

.was-validated .custom-control-input:valid:not([required]) ~ .custom-control-label::before {
  border-color: #8a8d91;
}
.was-validated .custom-control-input:valid:not([required]):checked ~ .custom-control-label::before {
  border-color: rgb(0, 122, 73);
  background-color: rgb(0, 148, 88);
}
.was-validated .custom-control-input:valid:not([required]):focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem transparent;
}
.was-validated .custom-control-input:valid:not([required]):focus:not(:checked) ~ .custom-control-label::before {
  border-color: rgb(0, 199, 118);
}
.mod-skin-dark:not(.mod-skin-light) .was-validated .custom-control-input:valid:not([required]) ~ .custom-control-label::before {
  border-color: rgba(255, 255, 255, 0.55);
}
.mod-skin-dark:not(.mod-skin-light) .was-validated .custom-control-input:valid:not([required]):checked ~ .custom-control-label::before {
  border-color: rgba(var(--theme-rgb-primary), 1);
  background-color: rgba(var(--theme-rgb-primary), 0.8);
}

/* Panel header: the icon circle + title sit in a flex row, and flex items shrink by default, so a long title
   squeezed the icon box (28px -> 16px) and the icon spilled over the text. Keep the icon its full size.
   On phones let a long title wrap instead of being cut off with an ellipsis (the h2 has an inline
   width:70%, hence !important). */
.panel-hdr h2 .icon-stack { flex-shrink: 0; }
@media (max-width: 575.98px) {
  .panel-hdr h2 { width: auto !important; flex: 1 1 auto; min-width: 0; }
  .panel-hdr h2 .title-text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.35;
    padding: 0.5rem 0;
  }
}

/* Error TEXT colour. The theme uses #d45f5f for validation messages and the labels of invalid radios/checkboxes:
   ~3.75:1 on white and ~4.0:1 on the dark panel, under the 4.5:1 minimum for small text. Darker red in light
   mode, lighter red in dark mode (both >= 4.5:1). Borders/rings keep the theme red (3:1 is enough for those).
   `.hh-match-error` = the live "…don't match" line under a Confirm Phone/Email field (toggled by the page's JS). */
.invalid-feedback,
.hh-match-error,
.was-validated .custom-control-input:invalid ~ .custom-control-label,
.custom-control-input.is-invalid ~ .custom-control-label,
.was-validated .form-check-input:invalid ~ .form-check-label,
.form-check-input.is-invalid ~ .form-check-label {
  color: #be2d2d;
}
.mod-skin-dark:not(.mod-skin-light) .invalid-feedback,
.mod-skin-dark:not(.mod-skin-light) .hh-match-error,
.mod-skin-dark:not(.mod-skin-light) .was-validated .custom-control-input:invalid ~ .custom-control-label,
.mod-skin-dark:not(.mod-skin-light) .custom-control-input.is-invalid ~ .custom-control-label,
.mod-skin-dark:not(.mod-skin-light) .was-validated .form-check-input:invalid ~ .form-check-label,
.mod-skin-dark:not(.mod-skin-light) .form-check-input.is-invalid ~ .form-check-label {
  color: #e57373;
}

.hh-match-ok {
  color: #17794a;
}
.mod-skin-dark:not(.mod-skin-light) .hh-match-ok {
  color: #5fbf88;
}

/* Hint text / "(*) Denotes a required field" legend. The theme sets `.help-block` to rgb(69,104,93) in every skin:
   ~6.2:1 on white (fine) but only 2.41:1 on the dark panel (#26272b). Same hue, lighter, in dark mode = 5.4:1.
   The live "…match / don't match" line keeps its own error colour (.hh-match-error above). */
.mod-skin-dark:not(.mod-skin-light) .help-block:not(.hh-match-error) {
  color: #76a696;
}

/* Dark mode: the dark skin's own `.form-control` border rule (same specificity, loaded later) beats the theme's
   validation border, so an invalid text box had NO red border (and a valid required one no green) — only the
   small icon and message marked it. Restore the validation borders (and focus rings) in dark mode. */
.mod-skin-dark:not(.mod-skin-light) .was-validated .form-control:invalid,
.mod-skin-dark:not(.mod-skin-light) .form-control.is-invalid {
  border-color: #d45f5f;
}
.mod-skin-dark:not(.mod-skin-light) .was-validated .form-control:invalid:focus,
.mod-skin-dark:not(.mod-skin-light) .form-control.is-invalid:focus {
  border-color: #d45f5f;
  box-shadow: 0 0 0 0.2rem rgba(212, 95, 95, 0.25);
}
.mod-skin-dark:not(.mod-skin-light) .was-validated .form-control:valid[required],
.mod-skin-dark:not(.mod-skin-light) .form-control.is-valid {
  border-color: #2e8b57;
}
.mod-skin-dark:not(.mod-skin-light) .was-validated .form-control:valid[required]:focus,
.mod-skin-dark:not(.mod-skin-light) .form-control.is-valid:focus {
  border-color: #2e8b57;
  box-shadow: 0 0 0 0.2rem rgba(46, 139, 87, 0.25);
}

/* Contact card: an icon badge beside a short message and a person's name / email (interview page counselor) */
.hh-contact-card { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; margin: 0 0 1.5rem; border: 1px solid rgba(0, 0, 0, .1); border-left: 4px solid #00AD67; border-radius: .5rem; }
.hh-contact-card p { margin: 0; }
.hh-contact-card p + p { margin-top: .25rem; }
.hh-contact-icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: rgba(0, 173, 103, .12); color: #00AD67; font-size: 1.25rem; }
.mod-skin-dark:not(.mod-skin-light) .hh-contact-card { border-color: rgba(255, 255, 255, .12); border-left-color: #00AD67; }
.mod-skin-dark:not(.mod-skin-light) .hh-contact-icon { background: rgba(0, 173, 103, .2); }

/* Card table: on phones (<768px) each row of a `.hh-card-table` (or of any table inside a `.hh-card-wrap`, for tables whose
   classes come from a helper, e.g. DataTables) becomes a card, with every cell labelled by its `data-label`.
   The header row stays in the DOM, visually hidden, so screen readers still get the column names; give the table
   role="table" and its parts role="rowgroup/row/columnheader/cell" so the semantics survive display:block. */
@media (max-width: 767.98px) {
  :is(.hh-card-table, .hh-card-wrap table), :is(.hh-card-table, .hh-card-wrap table) tbody { display: block; width: 100% !important; }
  :is(.hh-card-table, .hh-card-wrap table) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  :is(.hh-card-table, .hh-card-wrap table) tr { display: block; margin-bottom: .75rem; padding: .5rem .75rem; border: 1px solid rgba(0, 0, 0, .1); border-radius: .5rem; }
  :is(.hh-card-table, .hh-card-wrap table) td { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .4rem 0; border: 0; text-align: right; white-space: normal !important; }
  :is(.hh-card-table, .hh-card-wrap table) td::before { content: attr(data-label); flex: 0 0 38%; font-weight: 600; text-align: left; }
  /* no zebra / hover tint on a card */
  :is(.hh-card-table, .hh-card-wrap table) tr, :is(.hh-card-table, .hh-card-wrap table) tr:hover { background-color: transparent !important; }
  /* a cell marked .hh-card-action is the card's call to action: no label, button across the card */
  :is(.hh-card-table, .hh-card-wrap table) td.hh-card-action { display: block; padding-top: .6rem; text-align: center; }
  :is(.hh-card-table, .hh-card-wrap table) td.hh-card-action::before { display: none; }
  :is(.hh-card-table, .hh-card-wrap table) td.hh-card-action:empty { display: none; }
  :is(.hh-card-table, .hh-card-wrap table) td.hh-card-action .btn { display: block; width: 100%; }
}
.mod-skin-dark:not(.mod-skin-light) :is(.hh-card-table, .hh-card-wrap table) tr { border-color: rgba(255, 255, 255, .12); }

/* Detail card: a few labelled facts (date, time, place...) in a grid, each with a small icon badge.
   Markup: <dl class="hh-detail-card"><div class="hh-detail"><span class="hh-detail-icon"><i ...></i></span><div><dt>Label</dt><dd>Value</dd></div></div>...</dl> */
.hh-detail-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem 1.5rem; margin: 0 0 1.5rem; padding: 1.25rem; border: 1px solid rgba(0, 0, 0, .1); border-left: 4px solid #00AD67; border-radius: .5rem; }
.hh-detail { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.hh-detail-icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(0, 173, 103, .12); color: #00AD67; }
.hh-detail dt { margin: 0; font-size: .8rem; font-weight: 600; opacity: .75; }
.hh-detail dd { margin: 0; overflow-wrap: anywhere; }
.mod-skin-dark:not(.mod-skin-light) .hh-detail-card { border-color: rgba(255, 255, 255, .12); border-left-color: #00AD67; }
.mod-skin-dark:not(.mod-skin-light) .hh-detail-icon { background: rgba(0, 173, 103, .2); }