/**
 * Base style overrides.
 * Overrides legacy (core.css, style.css, bootstrap.css) with design-system tokens.
 * COLOR_REPLACEMENT_MAP.md is the source of truth for colors, font family, and roles.
 *
 * Import order (load this last after legacy bundle and neumo tokens):
 * 1. ~/Assets/Styles/themes/default/css/bundle
 * 2. ~/Assets/Styles/neumo-rebranding/tokens/fonts.css
 * 3. ~/Assets/Styles/neumo-rebranding/tokens/branded.css
 * 4. ~/Assets/Styles/neumo-rebranding/base-overrides.css (this file; includes scoped #error-block rules at EOF)
 *
 * Conflicting legacy rules are commented out in core.css, style.css, bootstrap.css
 * so !important is not required.
 *
 * Tenant themes that load an extra style.css after the bundle: mirror substantive edits in
 * parallel theme folders when needed — see .cursor/rules/theme-css-parity.mdc
 */

/* ========== 1. Typography (map: All text = --font-family---font-families-default) ========== */
*,
*::before,
*::after {
  font-family: var(--font-family---font-families-default, "Source Sans 3");
}

html,
body {
  font-family: var(--font-family---font-families-default, "Source Sans 3");
}

h1 {
  color: var(--color-neutral-darkest, #121212);
  font-family: var(--font-families-default, "Source Sans 3", sans-serif);
  font-size: var(--font-size-2xl, 1.5rem);
  font-style: normal;
  font-weight: var(--font-weights-bold, 700);
  margin: 0;
  line-height: 1.2;
}

/* Legacy theme sets #cartHearderBlock-left to 28px; element+id beats #cartHearderBlock-left alone */
h1#cartHearderBlock-left {
  font-size: var(--font-size-2xl, 1.5rem);
}

/* h2–h6: bundle loads bootstrap.css after core.css, so Bootstrap heading rules win unless reset here.
   Sizes align with legacy core.css; line-height overrides Bootstrap h1,h2,h3 { line-height: 0 }. */
h2 {
  color: var(--color-neutral-darkest, #121212);
  font-family: var(--font-families-default, "Source Sans 3", sans-serif);
  font-size: var(--font-size-lg, 1.125rem);
  font-style: normal;
  font-weight: var(--font-weights-regular, 400);
  margin: 0;
  line-height: var(--line-heights-md, 1.5);
}

h3 {
  color: var(--color-neutral-darkest, #121212);
  font-family: var(--font-families-default, "Source Sans 3", sans-serif);
  font-size: var(--font-size-sm, 0.9375rem);
  font-style: normal;
  font-weight: var(--font-weights-regular, 400);
  margin: 0;
  line-height: var(--line-heights-md, 1.5);
}

h4 {
  color: var(--color-neutral-darkest, #121212);
  font-family: var(--font-families-default, "Source Sans 3", sans-serif);
  font-size: var(--font-size-xs, 0.875rem);
  font-style: normal;
  font-weight: var(--font-weights-regular, 400);
  margin: 0;
  line-height: var(--line-heights-md, 1.5);
}

h5 {
  color: var(--color-neutral-darkest, #121212);
  font-family: var(--font-families-default, "Source Sans 3", sans-serif);
  font-size: var(--font-size-2xs, 0.8125rem);
  font-style: normal;
  font-weight: var(--font-weights-regular, 400);
  margin: 0;
  line-height: var(--line-heights-md, 1.5);
}

h6 {
  color: var(--color-neutral-darkest, #121212);
  font-family: var(--font-families-default, "Source Sans 3", sans-serif);
  font-size: var(--font-size-3xs, 0.75rem);
  font-style: normal;
  font-weight: var(--font-weights-regular, 400);
  margin: 0;
  line-height: var(--line-heights-md, 1.5);
}

/* h2–h6: bootstrap after core in bundle */
h2 {
  color: var(--color-neutral-darkest, #121212);
  font-family: var(--font-families-default, "Source Sans 3", sans-serif);
  font-size: var(--font-size-lg, 1.125rem);
  font-style: normal;
  font-weight: var(--font-weights-regular, 400);
  margin: 0;
  line-height: var(--line-heights-md, 1.5);
}

h3 {
  color: var(--color-neutral-darkest, #121212);
  font-family: var(--font-families-default, "Source Sans 3", sans-serif);
  font-size: var(--font-size-sm, 0.9375rem);
  font-style: normal;
  font-weight: var(--font-weights-regular, 400);
  margin: 0;
  line-height: var(--line-heights-md, 1.5);
}

h4 {
  color: var(--color-neutral-darkest, #121212);
  font-family: var(--font-families-default, "Source Sans 3", sans-serif);
  font-size: var(--font-size-xs, 0.875rem);
  font-style: normal;
  font-weight: var(--font-weights-regular, 400);
  margin: 0;
  line-height: var(--line-heights-md, 1.5);
}

h5 {
  color: var(--color-neutral-darkest, #121212);
  font-family: var(--font-families-default, "Source Sans 3", sans-serif);
  font-size: var(--font-size-2xs, 0.8125rem);
  font-style: normal;
  font-weight: var(--font-weights-regular, 400);
  margin: 0;
  line-height: var(--line-heights-md, 1.5);
}

h6 {
  color: var(--color-neutral-darkest, #121212);
  font-family: var(--font-families-default, "Source Sans 3", sans-serif);
  font-size: var(--font-size-3xs, 0.75rem);
  font-style: normal;
  font-weight: var(--font-weights-regular, 400);
  margin: 0;
  line-height: var(--line-heights-md, 1.5);
}

/* Shopping cart page (#userInformation): theme used 13px table / 15px subtotal / 19px price — align with body md + tokens */
#userInformation,
#userInformation #preOrder {
  font-size: var(--font-size-md, 1rem);
  line-height: var(--line-heights-md, 1.5);
}

#userInformation #profileNav,
#userInformation #profileNav a {
  font-size: var(--font-size-md, 1rem);
  line-height: var(--line-heights-md, 1.5);
}

#userInformation #cartHearderBlock-right,
#userInformation #cartHearderBlock-right label,
#userInformation #clearShoppingCartLink {
  font-size: var(--font-size-md, 1rem);
  line-height: var(--line-heights-md, 1.5);
}

#userInformation .cartHearderBlock {
  height: 80px;
  line-height: 80px;
}

#userInformation .shopping-cart-action {
  font-size: var(--font-size-md, 1rem);
  line-height: var(--line-heights-md, 1.5);
}

#userInformation .shoppingcart-table,
#userInformation .shoppingcart-table td,
#userInformation .shoppingcart-table th {
  font-size: var(--font-size-md, 1rem);
  line-height: var(--line-heights-md, 1.5);
}

/* Cart row price cell — Neumo purple ring spinner (replaces ajax-loader_circle-orange_big.gif) */
.cartItemUpdating {
  position: relative;
  background: none !important;
  background-image: none !important;
  min-height: 2.75rem;
  vertical-align: middle;
}

.cartItemUpdating::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.1875rem;
  height: 2.1875rem;
  margin: -1.09375rem 0 0 -1.09375rem;
  box-sizing: border-box;
  border: 3px solid var(--color-primary-200, #e8dff9);
  border-top-color: var(--color-primary-600, #6b4cb8);
  border-radius: 50%;
  animation: neumo-loader-spin 0.75s linear infinite;
  pointer-events: none;
  z-index: 1;
}

#userInformation #subTotalBlock {
  font-size: var(--font-size-md, 1rem);
  line-height: var(--line-heights-md, 1.5);
}

#userInformation #subtotalText {
  font-weight: var(--font-weights-semibold, 600);
}

#userInformation #priceText {
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: var(--font-weights-semibold, 600);
  line-height: var(--line-heights-md, 1.5);
}

#userInformation #noItemsBlock {
  font-size: var(--font-size-md, 1rem);
  line-height: var(--line-heights-md, 1.5);
}

#userInformation #checkoutBtnBlock .btn {
  font-size: var(--font-size-md, 1rem);
  line-height: var(--line-heights-md, 1.5);
}

/* ========== 2. Default text / body (map: Body/default text, font for All text) ========== */
html,
body {
  color: var(--color-neutral-800, #343944);
  background: var(--color-neutral-lightest, #fff);
}

.container,
.container-fluid,
#page-block,
.content-wrapper,
.main-content,
.panel-body,
.table td,
.table th,
.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="url"],
input[type="color"],
select,
textarea,
label {
  color: var(--color-neutral-800, #343944);
}

/* ========== 2b. Input text normalization – map source of truth ========== */
/* Font: map "All text" = --font-family---font-families-default. Body/default = normal weight. */
/* Colors: map Body/default text = --color-neutral-800; Muted/placeholder = --color-neutral-600 (AA on white). */
.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="url"],
input[type="color"],
select,
textarea {
  font-family: var(--font-family---font-families-default, "Source Sans 3");
  font-weight: normal;
  font-size: var(--font-size-md, 1rem);
  line-height: var(--line-heights-md, 1.5);
  color: var(--color-neutral-800, #343944);
}

/* Normalize all input box sizes: same height, padding, border-radius, border */
.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="url"],
select,
textarea,
#SearchText,
#nameSearchText {
  box-sizing: border-box;
  min-height: 2.5rem;
  padding: 0.5rem;
  border: 1px solid var(--color-neutral-300, #d5d7db);
  border-radius: var(--border-radius-xs, 4px);
}

/* Calendar/date inputs: same box size as other text inputs */
.calendarctrl,
.limitlesscalendarctrl {
  box-sizing: border-box;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-neutral-300, #d5d7db);
  border-radius: var(--border-radius-xs, 4px);
}

/* jQuery UI datepicker: when input is disabled, match trigger to disabled state (JS also sets datepicker("option","disabled")) */
.calendarctrl:disabled + .ui-datepicker-trigger,
.limitlesscalendarctrl:disabled + .ui-datepicker-trigger,
.calendarctrl.ui-datepicker-disabled + .ui-datepicker-trigger,
.limitlesscalendarctrl.ui-datepicker-disabled + .ui-datepicker-trigger {
  opacity: 0.45;
  cursor: not-allowed !important;
  pointer-events: none;
  filter: grayscale(1);
}

button.ui-datepicker-trigger {
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  line-height: 0;
  vertical-align: middle;
  cursor: pointer;
}

button.ui-datepicker-trigger img {
  display: block;
  vertical-align: middle;
}

button.ui-datepicker-trigger:focus,
img.ui-datepicker-trigger[role="button"]:focus {
  outline: 2px solid var(--color-primary-600, #7c4ccd);
  outline-offset: 2px;
}

button.ui-datepicker-trigger:disabled,
img.ui-datepicker-trigger[role="button"][aria-disabled="true"] {
  cursor: not-allowed;
}

img.ui-datepicker-trigger[role="button"] {
  cursor: pointer;
}

/* jQuery UI datepicker popup (#ui-datepicker-div): default body text, today = primary, hover = primary bg + white (loads after jquery-ui theme) */
#ui-datepicker-div.ui-datepicker {
  font-family: var(--font-family---font-families-default, "Source Sans 3"), sans-serif;
}

#ui-datepicker-div .ui-datepicker-calendar th {
  color: var(--color-neutral-800, #343944);
  font-weight: 600;
}

#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-default {
  color: var(--color-neutral-darkest, #121212);
  background-color: var(--color-neutral-lightest, #fff);
  background-image: none !important;
  border: 1px solid transparent;
  font-weight: normal;
  border-radius: var(--border-radius-xs, 4px);
}

#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-other-month a.ui-state-default {
  color: var(--color-neutral-600, #6b7280);
  opacity: 1;
}

#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-default.ui-state-highlight {
  color: var(--color-primary-700, #562c9e);
  background-color: var(--color-neutral-lightest, #fff);
  background-image: none !important;
  border-color: var(--color-primary-300, #d5c1f4);
  font-weight: var(--font-weights-bold, 700);
}

#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-default.ui-state-hover,
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-default.ui-state-focus {
  color: var(--color-neutral-lightest, #fff) !important;
  background-color: var(--color-primary-600, #7c4ccd) !important;
  background-image: none !important;
  border-color: var(--color-primary-600, #7c4ccd) !important;
  font-weight: 600;
}

#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-default.ui-state-highlight.ui-state-hover,
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-default.ui-state-highlight.ui-state-focus {
  font-weight: var(--font-weights-bold, 700);
}

#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-default.ui-state-active {
  color: var(--color-neutral-lightest, #fff);
  background-color: var(--color-primary-700, #562c9e);
  background-image: none !important;
  border-color: var(--color-primary-700, #562c9e);
  font-weight: 600;
}

#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-default.ui-state-active.ui-state-hover,
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-default.ui-state-active.ui-state-focus {
  color: var(--color-neutral-lightest, #fff) !important;
  background-color: var(--color-primary-600, #7c4ccd) !important;
  border-color: var(--color-primary-600, #7c4ccd) !important;
}

/* Unselectable days (min/max, etc.): same text color as normal days — override jQuery UI .ui-state-disabled opacity */
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-unselectable.ui-state-disabled,
#ui-datepicker-div .ui-datepicker-calendar td.ui-state-disabled {
  opacity: 1 !important;
}

#ui-datepicker-div .ui-datepicker-calendar td.ui-state-disabled span.ui-state-default {
  color: var(--color-neutral-darkest, #121212);
  opacity: 1 !important;
  background-color: var(--color-neutral-100, #ebecee);
  background-image: none !important;
  cursor: default !important;
  font-weight: normal;
  border-radius: var(--border-radius-xs, 4px);
}

#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-other-month.ui-state-disabled span.ui-state-default {
  color: var(--color-neutral-600, #6b7280);
  background-color: var(--color-neutral-100, #ebecee);
}

textarea {
  min-height: 4rem;
  resize: vertical;
}

/* Labels (radio, checkbox, select, etc.) – same family, weight, size, map body color */
label,
.form-group label,
input[type="radio"] + label,
input[type="checkbox"] + label,
label:has(input[type="radio"]),
label:has(input[type="checkbox"]),
.form-control + label,
label + .form-control {
  font-family: var(--font-family---font-families-default, "Source Sans 3");
  font-weight: normal;
  font-size: var(--font-size-md, 1rem);
  line-height: var(--line-heights-md, 1.5);
  color: var(--color-neutral-800, #343944);
}

/* Placeholder – muted text = --color-neutral-600 (AA on white); same family and size */
::placeholder,
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  font-family: var(--font-family---font-families-default, "Source Sans 3");
  font-weight: normal;
  font-size: var(--font-size-md, 1rem);
  color: var(--color-neutral-600, #6b7280);
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  font-family: var(--font-family---font-families-default, "Source Sans 3");
  font-weight: normal;
  font-size: var(--font-size-md, 1rem);
  color: var(--color-neutral-600, #6b7280);
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  font-family: var(--font-family---font-families-default, "Source Sans 3");
  font-weight: normal;
  font-size: var(--font-size-md, 1rem);
  color: var(--color-neutral-600, #6b7280);
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  font-family: var(--font-family---font-families-default, "Source Sans 3");
  font-weight: normal;
  font-size: var(--font-size-md, 1rem);
  color: var(--color-neutral-600, #6b7280);
}

/* Name search input: match other search inputs; override legacy #nameSearchText 12px italic placeholder */
#nameSearchText {
  font-family: var(--font-family---font-families-default, "Source Sans 3") !important;
  font-weight: normal !important;
  font-size: var(--font-size-md, 1rem) !important;
  line-height: 1.5 !important;
  color: var(--color-neutral-800, #343944) !important;
}

#nameSearchText::placeholder,
#nameSearchText::-webkit-input-placeholder,
#nameSearchText::-moz-placeholder,
#nameSearchText:-ms-input-placeholder {
  font-family: var(--font-family---font-families-default, "Source Sans 3") !important;
  font-weight: normal !important;
  font-size: var(--font-size-md, 1rem) !important;
  font-style: normal !important;
  color: var(--color-neutral-600, #6b7280) !important;
  opacity: 1;
}

/* Main search field: same as name search (tenant/theme loads after this file; placeholder can pick up italic/serif) */
#SearchText.searchctrl,
#SearchText {
  font-family: var(--font-family---font-families-default, "Source Sans 3") !important;
  font-style: normal !important;
  font-weight: normal !important;
}

#SearchText::placeholder,
#SearchText::-webkit-input-placeholder,
#SearchText::-moz-placeholder,
#SearchText:-ms-input-placeholder {
  font-family: var(--font-family---font-families-default, "Source Sans 3") !important;
  font-weight: normal !important;
  font-size: var(--font-size-md, 1rem) !important;
  font-style: normal !important;
  color: var(--color-neutral-600, #6b7280) !important;
  opacity: 1;
}

/* .clearable is added by JS; combined selectors beat tenant #id-only rules for placeholder font */
#advanced-search input.searchctrl.clearable,
#searchpanel input.searchctrl.clearable {
  font-family: var(--font-family---font-families-default, "Source Sans 3") !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-size: var(--font-size-md, 1rem) !important;
  line-height: var(--line-heights-md, 1.5) !important;
  color: var(--color-neutral-800, #343944) !important;
}

#advanced-search input.searchctrl.clearable::placeholder,
#advanced-search input.searchctrl.clearable::-webkit-input-placeholder,
#advanced-search input.searchctrl.clearable::-moz-placeholder,
#advanced-search input.searchctrl.clearable:-ms-input-placeholder,
#searchpanel input.searchctrl.clearable::placeholder,
#searchpanel input.searchctrl.clearable::-webkit-input-placeholder,
#searchpanel input.searchctrl.clearable::-moz-placeholder,
#searchpanel input.searchctrl.clearable:-ms-input-placeholder {
  font-family: var(--font-family---font-families-default, "Source Sans 3") !important;
  font-weight: normal !important;
  font-size: var(--font-size-md, 1rem) !important;
  font-style: normal !important;
  color: var(--color-neutral-600, #6b7280) !important;
  opacity: 1;
}

/* Main doc search: input#SearchText beats tenant input.searchctrl; line-height on pseudo avoids WebKit metric drift */
#advanced-search input#SearchText.searchctrl::placeholder,
#advanced-search input#SearchText.searchctrl::-webkit-input-placeholder,
#advanced-search input#SearchText.searchctrl::-moz-placeholder,
#advanced-search input#SearchText.searchctrl:-ms-input-placeholder,
#searchpanel input#SearchText.searchctrl::placeholder,
#searchpanel input#SearchText.searchctrl::-webkit-input-placeholder,
#searchpanel input#SearchText.searchctrl::-moz-placeholder,
#searchpanel input#SearchText.searchctrl:-ms-input-placeholder,
#advanced-search input#SearchText.searchctrl.clearable::placeholder,
#advanced-search input#SearchText.searchctrl.clearable::-webkit-input-placeholder,
#advanced-search input#SearchText.searchctrl.clearable::-moz-placeholder,
#advanced-search input#SearchText.searchctrl.clearable:-ms-input-placeholder,
#searchpanel input#SearchText.searchctrl.clearable::placeholder,
#searchpanel input#SearchText.searchctrl.clearable::-webkit-input-placeholder,
#searchpanel input#SearchText.searchctrl.clearable::-moz-placeholder,
#searchpanel input#SearchText.searchctrl.clearable:-ms-input-placeholder {
  font-family: var(--font-family---font-families-default, "Source Sans 3") !important;
  font-weight: normal !important;
  font-size: var(--font-size-md, 1rem) !important;
  font-style: normal !important;
  font-variant: normal !important;
  line-height: var(--line-heights-md, 1.5) !important;
  color: var(--color-neutral-600, #6b7280) !important;
  opacity: 1;
}

/* ========== 2c. Radio and checkbox – map colors (primary for selected, neutral borders) ========== */
input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--color-primary-600, #7c4ccd);
}

input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: 2px solid var(--color-primary-300, #d5c1f4);
  outline-offset: 2px;
}

/* ========== 2c2. Search panel (#searchpanel) – flex layout, no floats, height grows with content ========== */
#advanced-search {
  min-height: min-content;
}

#searchpanel {
  float: none;
  display: flow-root;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  /* Contain content and establish height: block formatting context so nothing “floats outside” */
  height: auto;
  min-height: min-content;
  max-height: none;
  overflow: visible;
}

/* When inside a flex parent, size to content and do not shrink below content height */
#advanced-search > #searchpanel {
  flex: 0 0 auto;
  min-height: min-content;
}

/* Clear any remaining floats inside panel so height wraps content */
#searchpanel::after {
  content: "";
  display: table;
  clear: both;
}

#searchpanel ul,
#searchpanel ul ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Tenant style.css (loads after this file) sets #searchpanel ul li { display: inline-block } with the same specificity as #searchpanel ul > li, so it wins and flattens the panel. Scope under #advanced-search so flex layout always wins. */
#advanced-search #searchpanel ul {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--spacing-md, 1rem);
  padding: var(--spacing-md, 1rem);
}

#advanced-search #searchpanel ul > li {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--spacing-md, 1rem);
  min-width: 0;
  flex-shrink: 0;
  width: 100%;
}

/* Title row: department name + certification text */
#advanced-search #searchpanel ol.title {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm, 0.75rem) var(--spacing-lg, 1.25rem);
  margin: 0;
}

#advanced-search #searchpanel ol.title li {
  display: block !important;
}

#advanced-search #searchpanel ol.title li h1 {
  display: block;
  margin: 0;
  font-size: var(--font-size-2xl, 1.5rem);
}

#searchpanel-curDeptText {
  margin: 0;
  min-width: 0;
}

#searchpanel-recdet-text {
  margin: 0;
  padding: 0;
  font-family: var(--font-family---font-families-default, "Source Sans 3");
  font-size: var(--font-size-md, 1rem);
  font-weight: normal;
  line-height: var(--line-heights-md, 1.5);
  color: var(--color-neutral-800, #343944);
}

a.closeSearchCallOutBox {
  margin-right: 20px !important;
  margin-top: 15px !important;
  background: none !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  min-width: 1.25rem;
  min-height: 1.25rem;
  padding: 0 !important;
  position: relative;
  /* Above sibling .searchCallOutText (position:absolute) for hit-testing */
  z-index: 1;
}

a.closeSearchCallOutBox::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: var(--color-primary-700, #562c9e);
  -webkit-mask-image: url("../../icons/x.svg");
  mask-image: url("../../icons/x.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

a.closeSearchCallOutBox:hover {
  background: none !important;
}

a.closeSearchCallOutBox:hover::before {
  background-color: var(--color-primary-800, #3b2270);
}

/* Search row: input, button, Recent Searches, More Options, then date/party partial on own row */
#advanced-search #searchpanel ol.searchcontrol {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  /* Tight column gap so input sits closer to search button (legacy .searchctrl had 16px margin-right) */
  gap: 0.375rem 0.125rem;
  /* Theme uses margin-left 35px; remove horizontal inset only — avoid margin:0 shorthand (can interact badly with flex + tenant CSS) */
  margin-top: 8px;
  margin-bottom: 0;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#searchpanel ol.searchcontrol > li {
  /* Beat #searchpanel ul ol li { display: inline-block } when tenant stylesheet loads last */
  display: block !important;
}

/* First li: search input – can grow but don’t collapse */
#searchpanel ol.searchcontrol > li:first-child {
  flex: 1 1 auto;
  min-width: 120px;
  max-width: 500px;
}

/* Override legacy #searchpanel .searchctrl { margin-right: 16px } only on main search field */
#searchpanel ol.searchcontrol > li:first-child .searchctrl {
  margin-right: 0 !important;
}

/* Second li: search button – fixed size */
#searchpanel ol.searchcontrol > li:nth-child(2) {
  flex-shrink: 0;
}

/* Third li: expcol (Recent Searches, More/Less Options) – don’t shrink */
#searchpanel ol.searchcontrol > li:nth-child(3) {
  flex: 1 0 auto;
  min-width: 0;
}

/* Fourth li: party/date partial – full width on next row to avoid overlap */
#searchpanel ol.searchcontrol > li:nth-child(4) {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  overflow: visible;
  order: 10;
}

/* Clear legacy floats inside search panel fourth li (party/date partial) so they don’t collapse layout */
#searchpanel ol.searchcontrol > li:nth-child(4) .bordered > div {
  float: none !important;
}

/* Party/name search partial: column layout, align with first row (match .searchctrl width), consistent spacing */
#searchpanel ol.searchcontrol > li:nth-child(4) .searchtypecontrol {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md, 1rem);
  align-items: flex-start;
  width: 100%;
  max-width: 485px;
}

#searchpanel ol.searchcontrol > li:nth-child(4) .searchtypecontrol .searchctrl {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Party radios container: enough height/padding so content is not clipped */
#searchpanel ol.searchcontrol > li:nth-child(4) .bordered.party-radios,
#searchpanel ol.searchcontrol > li:nth-child(4) .bordered {
  height: auto !important;
  min-height: 2.75rem;
  width: 100% !important;
  max-width: 485px;
  box-sizing: border-box;
  padding: var(--spacing-sm, 0.75rem) var(--spacing-md, 1rem);
  display: flex;
  align-items: center;
}

#searchpanel ol.searchcontrol > li:nth-child(4) .bordered.party-radios .party-radios-inner,
#searchpanel ol.searchcontrol > li:nth-child(4) .bordered > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-md, 1rem);
  width: 100%;
}

#searchpanel ol.searchcontrol > li:nth-child(4) .bordered label {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2xs, 0.25rem);
  margin: 0;
  cursor: pointer;
  font-size: var(--font-size-md, 1rem);
  line-height: var(--line-heights-md, 1.5);
  color: var(--color-neutral-800, #343944);
}

#searchpanel ol.searchcontrol > li:nth-child(4) .bordered input[type="radio"] {
  margin: 0;
  accent-color: var(--color-primary-600, #7c4ccd);
}

#searchpanel .expcol {
  /* Legacy used padding-left 80px; zero horizontal indent only */
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
}

/* Three toolbar links: no padding, margin 0 2px, bold, vertical align with icons */
#searchpanel .expcol a {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0;
  margin: 0 2px;
  font-family: var(--font-family---font-families-default, "Source Sans 3");
  font-size: var(--font-size-md, 1rem);
  line-height: var(--line-heights-md, 1.5);
  font-weight: 600;
  text-decoration: none;
  min-height: 1.5em;
}

#searchpanel .expcol a.recentsearches,
#searchpanel .expcol a.morelink,
#searchpanel .expcol a.lesslink {
  padding-left: 1.25rem;
  color: var(--color-primary-700, #562c9e) !important;
}

#searchpanel .expcol a.recentsearches:hover,
#searchpanel .expcol a.recentsearches:focus,
#searchpanel .expcol a.morelink:hover,
#searchpanel .expcol a.morelink:focus,
#searchpanel .expcol a.lesslink:hover,
#searchpanel .expcol a.lesslink:focus {
  color: var(--color-primary-800, #3d1d7a) !important;
}

#searchpanel #reset-search {
  padding-left: 1.25rem;
  color: var(--color-danger-600, #d12828) !important;
}

#searchpanel #reset-search.hidden {
  display: none;
}

#searchpanel #reset-search:hover,
#searchpanel #reset-search:focus {
  color: var(--color-danger-700, #a81f1f) !important;
}

/* Replace float with flex alignment where "push right" was used */
li#searchpanel-searchinstruction-block {
  float: none !important;
  margin-left: auto;
}

#searchpanel .rightFloatList {
  float: none !important;
  margin-left: auto;
}

/* More Options panel – stack below searchpanel, no float overlap */
#searchmorepanel {
  float: none;
  display: block;
  width: 100%;
  margin: 0;
  min-height: min-content;
  overflow: visible;
  box-sizing: border-box;
}

/* TenantConfig DateRange Name="ApplicationDate": theme used relative top/left to pack columns; overlaps Search Options row under Neumo */
/*#searchmorepanel #ApplicationDate,
#searchmorepanel #ApplicationDate.active {
  position: static !important;
  top: auto !important;
  left: auto !important;
}*/

#additionalpartytypes .multiselect {
  height: 90px;
}

#searchmorepanel .date-range-control input[type="text"],
#searchmorepanel #additionaldaterange input[type="text"] {
  width: 93px;
}

#searchmorepanel .date-range-control,
#searchmorepanel #additionaldaterange {
  width: 255px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  #searchmorepanel .date-range-control,
  #searchmorepanel #additionaldaterange {
    width: 245px;
  }
}

.moreoptionsR {
  margin-right: 30px !important;
}

#searchmorepanel td {
  vertical-align: top;
  overflow: auto;
}

/* input + trigger + message: message appended after trigger (see SearchViewModel.validate errorPlacement) */
#searchmorepanel .date-field-wrap,
.search-options-container .date-field-wrap {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
  vertical-align: middle;
  max-width: min(100%, 24rem);
  flex: 0 1 auto;
  min-width: 0;
}

#searchmorepanel .date-field-wrap .ui-datepicker-trigger,
.search-options-container .date-field-wrap .ui-datepicker-trigger {
  flex: 0 0 auto;
  vertical-align: middle;
}

#searchmorepanel .date-field-wrap label.error,
#searchmorepanel .date-field-wrap span.error,
#searchmorepanel #additionaldaterange .date-field-wrap label.error,
#searchmorepanel #additionaldaterange .date-field-wrap span.error,
.search-options-container .date-field-wrap label.error,
.search-options-container .date-field-wrap span.error {
  display: inline-block !important;
  margin-left: 0 !important;
  max-width: 14rem;
  min-width: 0;
  flex: 1 1 6rem;
  vertical-align: middle;
  line-height: 1.3;
  white-space: normal;
}

#searchmorepanel .date-field-wrap span.error:empty,
#searchmorepanel #additionaldaterange .date-field-wrap span.error:empty,
.search-options-container .date-field-wrap span.error:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 0 !important;
  max-width: 0 !important;
  overflow: hidden;
}

/* Filter / More Options panel: section titles use h4; bootstrap h4 is 14px — align with body & searchtypecontrol-title (1rem) */
#searchmorepanel h4 {
  font-family: var(--font-family---font-families-default, "Source Sans 3");
  font-size: var(--font-size-md, 1rem);
  font-weight: 600;
  line-height: 1.4; 
  color: var(--color-neutral-800, #343944);
  margin: 0 0 var(--spacing-xs, 0.5rem);
}

/* Island corners / township grid (SearchFormControl): legacy #9C9A99 on #CCCCCC fails WCAG; axe may flag as graphical text */
#searchmorepanel .gridcell {
  color: var(--color-neutral-darkest, #121212);
  font-weight: var(--font-weights-semibold, 600);
}

#searchmorepanel .gridheader {
  color: var(--color-neutral-800, #343944);
  font-weight: var(--font-weights-semibold, 600);
  font-size: var(--font-size-sm, 0.9375rem);
  line-height: 1.2;
}

/* Land-corner “i” badges: 10px white on legacy #6D9AC7 / orange fails 4.5:1 */
#searchmorepanel .corner,
#searchmorepanel .inactive-corner {
  background-color: var(--color-primary-700, #562c9e);
}

#searchmorepanel .active-corner {
  background-color: #a94900;
}

#searchmorepanel .gridicon {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.95);
}

/* Lucene row: plain “Search Criteria Using” text + AND/OR labels — same size as inputs/labels (not inherited small table text) */
#searchmorepanel #searchluceneoptions .bordered,
#searchmorepanel #searchluceneoptions .bordered ul,
#searchmorepanel #searchluceneoptions .bordered li,
#searchmorepanel #searchluceneoptions .bordered div {
  font-size: var(--font-size-md, 1rem);
  line-height: 1.5;
  color: var(--color-neutral-800, #343944);
}

#searchmorepanel #searchluceneoptions .bordered label {
  font-size: var(--font-size-md, 1rem);
  font-weight: 600;
}

/* AND/OR radios: not .searchctrl (485px width blocked the OR control from focus/click) */
#searchmorepanel #searchluceneoptions .search-lucene-option-radio {
  width: auto;
  max-width: none;
  margin: 0 0.35rem 0.2rem 0;
  vertical-align: middle;
  flex-shrink: 0;
}

#searchmorepanel #searchluceneoptions .bordered label[for*="MatchAll"],
#searchmorepanel #searchluceneoptions .bordered label[for*="MatchAny"] {
  display: inline-block;
  margin-right: 0.5rem;
  white-space: nowrap;
}

/* ========== 2d. Search type control – bar 100%, help icon inside at end (map: borders, bg, body text) ========== */
#advanced-search #searchpanel ol.searchtypecontrol {
  display: block !important;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#searchpanel ol.searchtypecontrol > li,
#searchpanel ol.searchtypecontrol > .searchCallOutPlaceHolder {
  display: block !important;
  width: 100%;
}

.searchtypecontrol .bordered {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--color-neutral-300, #d5d7db);
  border-radius: var(--border-radius-xs, 4px);
  background-color: var(--color-neutral-lightest, #fff);
  padding: var(--spacing-sm, 0.75rem) var(--spacing-md, 1rem);
}

.searchtypecontrol .bordered > .searchtypecontrol-content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs, 0.25rem);
}

.searchtypecontrol .bordered .searchtypecontrol-title {
  font-family: var(--font-family---font-families-default, "Source Sans 3");
  font-weight: 600;
  font-size: var(--font-size-md, 1rem);
  color: var(--color-neutral-800, #343944);
  line-height: var(--line-heights-md, 1.5);
}

.searchtypecontrol .bordered > .searchtypecontrol-content > .searchtypecontrol-radios {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--spacing-md, 1rem) var(--spacing-xl, 1.5rem);
}

/* Nested span (e.g. ng-show) – keep its radio labels in a single row with same gap */
.searchtypecontrol .bordered .searchtypecontrol-radios > span {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--spacing-md, 1rem) var(--spacing-xl, 1.5rem);
}

.searchtypecontrol .bordered > .searchcalloutoggle {
  flex-shrink: 0;
  margin-left: var(--spacing-sm, 0.75rem);
}

/* Search callout toggle icon: use dark token on light bar (opposite of light) */
a.searchcalloutoggle {
  background-image: none !important;
  background-color: transparent !important;
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
  min-height: 1.5rem;
  margin-bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* Match ::before icon; avoids “transparent text” contrast flags on empty icon control */
  color: var(--color-neutral-800, #343944);
  text-indent: -9999px;
  overflow: hidden;
}

a.searchcalloutoggle::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-neutral-800, #343944);
  -webkit-mask: url("../../icons/info.svg") no-repeat center;
  mask: url("../../icons/info.svg") no-repeat center;
  -webkit-mask-size: 1rem;
  mask-size: 1rem;
  pointer-events: none;
}

a.searchcalloutoggle:hover::before,
a.searchcalloutoggle:focus::before {
  background-color: var(--color-primary-600, #7c4ccd);
}

.searchtypecontrol .bordered label {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2xs, 0.25rem);
  margin: 0;
  cursor: pointer;
  font-family: var(--font-family---font-families-default, "Source Sans 3");
  font-weight: normal;
  font-size: var(--font-size-md, 1rem);
  line-height: var(--line-heights-md, 1.5);
  color: var(--color-neutral-800, #343944);
}

.searchtypecontrol .bordered input[type="radio"] {
  margin: 0;
  flex-shrink: 0;
}

/* Search callout placeholder: keep in flow so it does not overlap Search by bar or form */
.searchCallOutPlaceHolder {
  margin: 0;
  display: block;
  width: 100%;
  position: relative;
  min-height: 0;
}

.searchCallOutBox {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: var(--spacing-2xs, 0.25rem);
}

/* ========== 2b. Kiosk Home buttons – plain text style, primary-700 ========== */
#kioskHomeForm {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin: 20px 0 0 0;
}

/* Image button (homeIcon.png): strip all native chrome, recolor PNG to primary-700 */
#kioskHomeForm input[type="image"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 20px;
  height: 20px;
  cursor: pointer;
  filter: brightness(0) saturate(100%) invert(20%) sepia(89%) saturate(893%) hue-rotate(253deg) brightness(87%);
}

/* Submit button ("Kiosk Home" text): strip all native chrome, render as plain text */
#kioskHomeForm input[type="submit"],
#kiosk-home {
  -webkit-appearance: none !important;
  appearance: none !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: var(--color-primary-700, #562c9e) !important;
  font-size: inherit !important;
  font-weight: 600 !important;
  cursor: pointer;
  line-height: inherit;
}

#kioskHomeForm input[type="image"]:hover,
#kioskHomeForm input[type="image"]:focus {
  filter: brightness(0) saturate(100%) invert(14%) sepia(94%) saturate(700%) hue-rotate(258deg) brightness(80%) !important;
}

#kioskHomeForm input[type="submit"]:hover,
#kioskHomeForm input[type="submit"]:focus,
#kiosk-home:hover,
#kiosk-home:focus {
  color: var(--color-primary-800, #3d1d7a) !important;
}

/* ========== 3. Links ========== */
a {
  color: var(--color-primary-700, #562c9e);
}

a:hover,
a:focus {
  color: var(--color-primary-800, #3d1d7a);
}

/* ListControl TagName="a" → <button type="button" class="ref-link-as-link …"> (action, not navigation); styled like text links */
button.ref-link-as-link {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: left;
  width: 100%;
  max-width: 100%;
  white-space: normal;
  word-wrap: break-word;
  color: var(--color-primary-700, #562c9e);
  cursor: pointer;
}

button.ref-link-as-link:hover,
button.ref-link-as-link:focus {
  color: var(--color-primary-800, #3d1d7a);
}

button.ref-link-as-link:focus-visible {
  outline: 2px solid var(--color-primary-300, #d5c1f4);
  outline-offset: 2px;
}

/* Search history bubble (HistoryAnchorLayoutControl): former <a href>; navigation via ViewSearchHistoryBubble.js */
#searchHistoryBlock button.search-history-nav {
  font-size: 15px;
}

#searchHistoryBlock ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

#searchHistoryBlock li {
  margin: 0;
  padding: 0;
}

/* ========== 3b. Search results toolbar – single row, full width, hidden until search complete ========== */
#search-results-panel #top-toolbar.hidden {
  display: none;
}

#search-results-panel #top-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-evenly;
  gap: var(--spacing-sm, 0.75rem) var(--spacing-md, 1rem);
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-family---font-families-default, "Source Sans 3");
  font-size: var(--font-size-md, 1rem);
  line-height: var(--line-heights-md, 1.5);
  color: var(--color-neutral-800, #343944);
}

#search-results-panel #top-toolbar .searchForm-header-ctrl {
  margin: 0;
  flex-shrink: 0;
}

/* Toolbar labels: semibold, same color as body */
#search-results-panel #top-toolbar strong,
#search-results-panel #top-toolbar label,
#search-results-panel #top-toolbar .searchForm-header-ctrl strong {
  font-weight: 600;
  font-size: inherit;
  color: var(--color-neutral-800, #343944);
}

/* Toolbar values (count, dropdown, page info): normal weight */
#search-results-panel #top-toolbar #total-records,
#search-results-panel #top-toolbar .far-right-number-label,
#search-results-panel #top-toolbar select.pagedropdown,
#search-results-panel #top-toolbar select.SortColumnDropDown {
  font-weight: normal;
  color: var(--color-neutral-800, #343944);
}

/* Toolbar links keep primary color */
#search-results-panel #top-toolbar a {
  color: var(--color-primary-700, #562c9e);
  font-weight: normal;
}

#search-results-panel #top-toolbar a:hover,
#search-results-panel #top-toolbar a:focus {
  color: var(--color-primary-800, #3d1d7a);
}

/* Recolor toolbar PNG icons (download-icon.png, cart-icon.png) to primary-700 (#562c9e).
   brightness(0) collapses to black; remaining filters rotate to the target purple. */
#search-results-panel #top-toolbar img[alt="Export Results"],
#search-results-panel #top-toolbar img[alt="Add all to cart"] {
  width: 22px;
  height: 22px;
  vertical-align: middle;
  filter: brightness(0) saturate(100%) invert(20%) sepia(89%) saturate(893%) hue-rotate(253deg) brightness(87%);
}
#search-results-panel #top-toolbar img[alt="Export Results"]:hover,
#search-results-panel #top-toolbar img[alt="Add all to cart"]:hover {
  filter: brightness(0) saturate(100%) invert(14%) sepia(94%) saturate(700%) hue-rotate(258deg) brightness(80%);
}

/* Bold text for Export Results and Add All to Cart links */
#search-results-panel #top-toolbar strong a {
  font-weight: 700 !important;
}

#search-results-panel #top-toolbar #pageListBlock {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--spacing-2xs, 0.25rem);
  width: auto;
  min-width: 0;
}

#search-results-panel #top-toolbar #pageListBlock label {
  white-space: nowrap;
  margin: 0;
}

#search-results-panel #top-toolbar #sort-columns-control {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--spacing-2xs, 0.25rem);
}

#search-results-panel #top-toolbar #sort-columns-control label {
  white-space: nowrap;
  margin: 0;
}

#search-results-panel #top-toolbar .searchForm-header-ctrl.far-right-number-label,
#search-results-panel #top-toolbar #pagesCount {
  margin-left: 0;
  padding: 0;
  float: none;
  flex-shrink: 0;
}

#search-results-panel #execution-time.hidden {
  display: none;
}

#search-results-panel #execution-time {
  margin: 0;
  font-family: var(--font-family---font-families-default, "Source Sans 3");
  font-size: var(--font-size-md, 1rem);
  line-height: var(--line-heights-md, 1.5);
  font-style: italic;
  font-weight: normal;
  color: var(--color-neutral-800, #343944);
}

#no-matches-message {
  font-family: var(--font-family---font-families-default, "Source Sans 3");
  font-size: var(--font-size-md, 1rem);
  line-height: var(--line-heights-md, 1.5);
  font-weight: normal;
}

/* ========== 4. Tables ========== */
/* Search results: gray shows on the table element (not only #results-table wrapper) — DT_bootstrap also sets thead/td rows */
#results-table table {
  background-color: var(--color-neutral-lightest, #fff) !important;
}

/* Unified header row background (overrides legacy #orderReceipt, .table-header, DT_bootstrap table.table thead) */
table thead,
table thead th,
table.table thead,
table.table thead th,
#orderAccountPaymentContent table thead,
#orderAccountPaymentContent table thead th,
#orderReceipt table thead,
#orderReceipt table thead th,
.tableresult > thead > tr > th,
.result-table > thead > tr > th,
.table-header,
#documentSummaryArea .tableBorder tr:first-child th,
#documentSummaryArea .tableBorder thead th {
  background: var(--color-neutral-300, #d5d7db) !important;
  color: var(--color-neutral-darkest, #121212);
}

/* DataTables sortable headers: replace legacy bg-image sort icons with new icon set (caret-up/caret-down) */
/* Use full background shorthand + higher specificity so this wins over DT_bootstrap when it loads after */
table.table thead .sorting,
table.table thead .sorting_asc,
table.table thead .sorting_desc,
table.table thead .sorting_asc_disabled,
table.table thead .sorting_desc_disabled,
.result-table table.table thead .sorting,
.result-table table.table thead .sorting_asc,
.result-table table.table thead .sorting_desc,
.result-table table.table thead .sorting_asc_disabled,
.result-table table.table thead .sorting_desc_disabled {
  background: var(--color-neutral-300, #d5d7db) !important;
  background-image: none !important;
  padding-right: 20px;
  position: relative;
}
table.table thead .sorting::after,
table.table thead .sorting_asc::after,
table.table thead .sorting_desc::after,
table.table thead .sorting_asc_disabled::after,
table.table thead .sorting_desc_disabled::after,
.result-table table.table thead .sorting::after,
.result-table table.table thead .sorting_asc::after,
.result-table table.table thead .sorting_desc::after,
.result-table table.table thead .sorting_asc_disabled::after,
.result-table table.table thead .sorting_desc_disabled::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  /* Below z-index:1 bubbles/overlays; equal “1” vs kofileInfoBuble caused table to paint on top */
  z-index: 0;
  background-color: var(--color-neutral-darkest, #121212);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
table.table thead .sorting::after,
table.table thead .sorting_desc::after,
.result-table table.table thead .sorting::after,
.result-table table.table thead .sorting_desc::after {
  -webkit-mask-image: url("../../icons/caret-down.svg");
  mask-image: url("../../icons/caret-down.svg");
}
table.table thead .sorting_asc::after,
.result-table table.table thead .sorting_asc::after {
  -webkit-mask-image: url("../../icons/caret-up.svg");
  mask-image: url("../../icons/caret-up.svg");
}
table.table thead .sorting_asc_disabled::after,
.result-table table.table thead .sorting_asc_disabled::after {
  -webkit-mask-image: url("../../icons/caret-up.svg");
  mask-image: url("../../icons/caret-up.svg");
  opacity: 0.45;
}
table.table thead .sorting_desc_disabled::after,
.result-table table.table thead .sorting_desc_disabled::after {
  -webkit-mask-image: url("../../icons/caret-down.svg");
  mask-image: url("../../icons/caret-down.svg");
  opacity: 0.45;
}

.table-bordered th,
.table-bordered td,
table tbody td,
tbody + tbody {
  border-color: var(--color-neutral-400, #b7bcc3);
}

/* Row hover: light primary tint (Neumo tokens); target cells so legacy bootstrap td/th colors lose */
.table tbody tr:hover,
.table-hover tbody tr:hover {
  background-color: var(--color-primary-100, #f3f0fa);
}

.table tbody tr:hover > td,
.table tbody tr:hover > th,
.table-hover tbody tr:hover > td,
.table-hover tbody tr:hover > th,
.table-striped tbody tr:hover > td,
.table-striped tbody tr:hover > th {
  background-color: var(--color-primary-100, #f3f0fa) !important;
  cursor: pointer;
}

/* Search results: keyboard focus on whole document row before row action controls */
#searchresult .result-table tbody tr.document-row:focus {
  outline: none;
}

#searchresult .result-table tbody tr.document-row:focus-visible {
  outline: 2px solid var(--color-primary-300, #d5c1f4);
  outline-offset: -2px;
}

#searchresult .result-table tbody tr.document-row:focus-visible > td {
  background-color: var(--color-primary-50, #f5f0fc);
}

#shoppingcartResultBlock img.cart-preview-thumbnail:focus-visible {
  outline: 2px solid var(--color-primary-300, #d5c1f4);
  outline-offset: 2px;
}

/* Striped tables: selected/open row (bootstrap .selectedRow) – match hover tint */
.table-striped > tbody > tr.selectedRow > td {
  background-color: var(--color-primary-100, #f3f0fa) !important;
}

.table td,
.table th {
  color: var(--color-neutral-darkest, #121212);
}

.table a,
.table button.ref-link-as-link {
  color: var(--color-primary-700, #562c9e);
}

.table a:hover,
.table button.ref-link-as-link:hover {
  color: var(--color-primary-800, #3d1d7a);
}

/* Pagination – current page (PagingControl: span.activePage). Legacy bootstrap sets all li > span to #fbfbfb and
   .activePage used invalid background-color:none, so the selected page stayed gray. */
.paging_bootstrap.pagination ul > li > span.activePage,
.pagination ul > li > span.activePage {
  background: var(--color-primary-300, #d5c1f4) !important;
  background-color: var(--color-primary-300, #d5c1f4) !important;
  border: 1px solid var(--color-primary-500, #8b6fd9) !important;
  color: var(--color-primary-1000, #160a30) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  cursor: default !important;
}

/* Pagination nav: replace DT_bootstrap pagenation.png with Assets/icons SVGs (mask on purple chip).
   Keep same box model as DT_bootstrap (28×24, margin 0, float left) so controls stay in original position. */
.pagination .first a,
.pagination .prev a,
.pagination .next a,
.pagination .last a {
  float: left !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 24px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: var(--color-primary-600, #6b4cb8) none no-repeat center !important;
  box-shadow: none !important;
  text-indent: 0;
  overflow: hidden;
  color: var(--color-neutral-lightest, #fff) !important;
  line-height: normal !important;
}

.pagination .first a:hover,
.pagination .first a:focus,
.pagination .prev a:hover,
.pagination .prev a:focus,
.pagination .next a:hover,
.pagination .next a:focus,
.pagination .last a:hover,
.pagination .last a:focus {
  background: var(--color-primary-700, #562c9e) none no-repeat center !important;
}

.pagination .prev a {
  -webkit-mask-image: url("../../icons/arrow-left.svg");
  mask-image: url("../../icons/arrow-left.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1rem 1rem;
  mask-size: 1rem 1rem;
}

.pagination .next a {
  -webkit-mask-image: url("../../icons/arrow-right.svg");
  mask-image: url("../../icons/arrow-right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1rem 1rem;
  mask-size: 1rem 1rem;
}

.pagination .first a {
  -webkit-mask-image: url("../../icons/arrow-line-left.svg");
  mask-image: url("../../icons/arrow-line-left.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1rem 1rem;
  mask-size: 1rem 1rem;
}

.pagination .last a {
  -webkit-mask-image: url("../../icons/arrow-line-right.svg");
  mask-image: url("../../icons/arrow-line-right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1rem 1rem;
  mask-size: 1rem 1rem;
}

.pagination li.disabled.first a,
.pagination li.disabled.prev a,
.pagination li.disabled.next a,
.pagination li.disabled.last a,
.pagination .first.disabled a,
.pagination .prev.disabled a,
.pagination .next.disabled a,
.pagination .last.disabled a {
  opacity: 0.38 !important;
  cursor: not-allowed !important;
  pointer-events: none;
  /* Disable sprite “disabled” tiles from DT_bootstrap */
  background: var(--color-primary-600, #6b4cb8) none no-repeat center !important;
}

/* ========== 5. Buttons (color map: primary = brand-dark, secondary = neutral/primary-600) ========== */
/* No gradients: bootstrap + legacy theme use background-image linear-gradient on .btn / titleBtnClr */
.btn,
.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled],
input[type="submit"],
input[type="button"],
input[type="reset"],
button.btn,
.titleBtnClr,
.titleBtnClr:hover,
.titleBtnClr:focus,
.titleBtnClr:active,
.defaultBtnClr,
.defaultBtnClr:hover,
.defaultBtnClr:focus,
.defaultBtnClr:active {
  background-image: none !important;
  filter: none !important;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: var(--color-brand-dark, #0a1128);
  border-color: var(--color-brand-dark, #0a1128);
  color: var(--color-neutral-lightest, #fff);
}

/* Shopping cart checkout — primary-700 purple (not brand-dark navy) */
#checkoutBtnBlock .btn.btn-primary,
#checkoutBtnBlock input.btn-primary {
  background-color: var(--color-primary-700, #562c9e);
  border-color: var(--color-primary-700, #562c9e);
  color: var(--color-neutral-lightest, #fff);
}

#checkoutBtnBlock .btn.btn-primary:hover,
#checkoutBtnBlock .btn.btn-primary:focus,
#checkoutBtnBlock input.btn-primary:hover,
#checkoutBtnBlock input.btn-primary:focus {
  background-color: var(--color-primary-800, #3b2270);
  border-color: var(--color-primary-800, #3b2270);
  color: var(--color-neutral-lightest, #fff);
}

#checkoutBtnBlock .btn.btn-primary:active,
#checkoutBtnBlock input.btn-primary:active,
#checkoutBtnBlock .btn.btn-primary.active {
  background-color: var(--color-primary-800, #3b2270);
  border-color: var(--color-primary-800, #3b2270);
  color: var(--color-neutral-lightest, #fff);
}

.btn-orange,
.btn-orange:hover,
.btn-orange:focus {
  background: var(--color-brand-dark, #0a1128);
  background-image: none;
  border-color: var(--color-brand-dark, #0a1128);
  color: var(--color-neutral-lightest, #fff);
}

/* Default / secondary button */
.btn-default,
.btn,
.btn:hover,
.btn:focus {
  background-color: var(--color-neutral-200, #edeeef);
  border-color: var(--color-neutral-400, #b7bcc3);
  color: var(--color-neutral-800, #343944);
}

.btn:hover,
.btn:focus {
  background-color: var(--color-neutral-300, #d5d7db);
}

.btn:active,
.btn.active {
  background-color: var(--color-neutral-400, #b7bcc3);
}

/* Dialog title bar button style (modal primary) */
.titleBtnClr,
.titleBtnClr:hover,
.titleBtnClr:focus {
  background: var(--color-neutral-900, #242831);
  background-image: none;
  color: var(--color-neutral-lightest, #fff);
}

/* Secondary / default dialog button */
.defaultBtnClr,
.defaultBtnClr:hover,
.defaultBtnClr:focus {
  background: var(--color-neutral-400, #b7bcc3);
  background-image: none;
  border-color: var(--color-neutral-400, #b7bcc3);
  color: var(--color-neutral-darkest, #121212);
}

.btn-inverse,
.btn-inverse:hover,
.btn-inverse:focus {
  background: var(--color-neutral-900, #242831);
  background-image: none;
  border-color: var(--color-neutral-900, #242831);
  color: var(--color-neutral-lightest, #fff);
}

/* InfoBox / error modal Close — bootstrap .btn-inverse sets gradients + hover color:#000; ID wins */
input#infobox_Close.btn.btn-inverse,
input#infobox_Close.btn.btn-inverse:active {
  background: var(--color-primary-700, #562c9e) !important;
  background-image: none !important;
  border-color: var(--color-primary-700, #562c9e) !important;
  color: var(--color-neutral-lightest, #fff) !important;
  text-shadow: none !important;
  filter: none !important;
}
input#infobox_Close.btn.btn-inverse:hover,
input#infobox_Close.btn.btn-inverse:focus {
  background: var(--color-primary-800, #3b2270) !important;
  background-image: none !important;
  border-color: var(--color-primary-800, #3b2270) !important;
  color: var(--color-neutral-lightest, #fff) !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Sign out confirmation (LogOutConfirmationDialog) — Yes is <button.titleBtnClr>; bootstrap .btn can override neutral titleBtnClr */
button#logoutOk.btn.titleBtnClr,
button#logoutOk.btn.titleBtnClr:active {
  background: var(--color-primary-700, #562c9e) !important;
  background-image: none !important;
  border-color: var(--color-primary-700, #562c9e) !important;
  color: var(--color-neutral-lightest, #fff) !important;
  text-shadow: none !important;
  filter: none !important;
}
button#logoutOk.btn.titleBtnClr:hover,
button#logoutOk.btn.titleBtnClr:focus {
  background: var(--color-primary-800, #3b2270) !important;
  background-image: none !important;
  border-color: var(--color-primary-800, #3b2270) !important;
  color: var(--color-neutral-lightest, #fff) !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Register popup (RegistrationDialog) — Create */
input#create_new_user.btn.titleBtnClr,
input#create_new_user.btn.titleBtnClr:active {
  background: var(--color-primary-700, #562c9e) !important;
  background-image: none !important;
  border-color: var(--color-primary-700, #562c9e) !important;
  color: var(--color-neutral-lightest, #fff) !important;
  text-shadow: none !important;
  filter: none !important;
}
input#create_new_user.btn.titleBtnClr:hover,
input#create_new_user.btn.titleBtnClr:focus {
  background: var(--color-primary-800, #3b2270) !important;
  background-image: none !important;
  border-color: var(--color-primary-800, #3b2270) !important;
  color: var(--color-neutral-lightest, #fff) !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Register modal (RegistrationDialog #userRegister): typed text + placeholders vs field background (Fancybox/legacy grays). */
#userRegister input[type="text"],
#userRegister input[type="password"],
#userRegister input[type="email"],
.fancybox-inner #userRegister input[type="text"],
.fancybox-inner #userRegister input[type="password"],
.fancybox-inner #userRegister input[type="email"] {
  color: var(--color-neutral-darkest, #121212) !important;
  background-color: var(--color-neutral-lightest, #fff) !important;
  border-color: var(--color-neutral-400, #bfc3c9) !important;
}

#userRegister input::placeholder,
#userRegister input::-webkit-input-placeholder,
#userRegister input::-moz-placeholder,
#userRegister input:-ms-input-placeholder,
.fancybox-inner #userRegister input::placeholder,
.fancybox-inner #userRegister input::-webkit-input-placeholder,
.fancybox-inner #userRegister input::-moz-placeholder,
.fancybox-inner #userRegister input:-ms-input-placeholder {
  color: var(--color-neutral-700, #4f5562) !important;
  opacity: 1 !important;
}

/* Register modal: popup.css .contactArea input uses #9c9a9c on #efefef (fails AA); higher specificity + same tokens as above. */
#userRegister .contactArea input[type="text"],
#userRegister .contactArea input[type="password"],
#userRegister .contactArea input[type="email"],
.fancybox-inner #userRegister .contactArea input[type="text"],
.fancybox-inner #userRegister .contactArea input[type="password"],
.fancybox-inner #userRegister .contactArea input[type="email"] {
  color: var(--color-neutral-darkest, #121212) !important;
  background-color: var(--color-neutral-lightest, #fff) !important;
  border-color: var(--color-neutral-400, #bfc3c9) !important;
}

#userRegister .contactArea input::placeholder,
#userRegister .contactArea input::-webkit-input-placeholder,
#userRegister .contactArea input::-moz-placeholder,
#userRegister .contactArea input:-ms-input-placeholder,
.fancybox-inner #userRegister .contactArea input::placeholder,
.fancybox-inner #userRegister .contactArea input::-webkit-input-placeholder,
.fancybox-inner #userRegister .contactArea input::-moz-placeholder,
.fancybox-inner #userRegister .contactArea input:-ms-input-placeholder {
  color: var(--color-neutral-700, #4f5562) !important;
  opacity: 1 !important;
}

/* Register modal: jQuery validate labels + server/captcha messages (popup.css used color:red / 12px). */
#creatnewUser label.error,
#userRegister #creatnewUser label.error,
.fancybox-inner #creatnewUser label.error {
  color: var(--color-danger-800, #9a1c1c) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
}

#userRegister #registerDuplicateEmailMessage,
#userRegister .registerDuplicateEmailMessage,
#userRegister #invalidCaptchaMessage,
#userRegister .invalidCaptchaMessage {
  color: var(--color-danger-800, #9a1c1c) !important;
  font-size: 0.875rem;
}

#userRegister #regMessage {
  color: var(--color-neutral-800, #343944) !important;
  font-size: 0.875rem;
}

/* reCAPTCHA chrome outside iframe (Privacy / Terms row). */
#userRegister #captcha .rc-anchor-pt a,
.fancybox-inner #userRegister #captcha .rc-anchor-pt a {
  color: var(--color-neutral-800, #343944) !important;
}

#userRegister #captcha .rc-anchor-pt a:hover,
.fancybox-inner #userRegister #captcha .rc-anchor-pt a:hover {
  color: var(--color-neutral-darkest, #121212) !important;
}

/* Sign In modal (LoginDialog #userSignInBlock): typed text + placeholders (same as Register; Fancybox/legacy grays). */
#userSignInBlock input[type="text"],
#userSignInBlock input[type="password"],
#userSignInBlock input[type="email"],
.fancybox-inner #userSignInBlock input[type="text"],
.fancybox-inner #userSignInBlock input[type="password"],
.fancybox-inner #userSignInBlock input[type="email"] {
  color: var(--color-neutral-darkest, #121212) !important;
  background-color: var(--color-neutral-lightest, #fff) !important;
  border-color: var(--color-neutral-400, #bfc3c9) !important;
}

#userSignInBlock input::placeholder,
#userSignInBlock input::-webkit-input-placeholder,
#userSignInBlock input::-moz-placeholder,
#userSignInBlock input:-ms-input-placeholder,
.fancybox-inner #userSignInBlock input::placeholder,
.fancybox-inner #userSignInBlock input::-webkit-input-placeholder,
.fancybox-inner #userSignInBlock input::-moz-placeholder,
.fancybox-inner #userSignInBlock input:-ms-input-placeholder {
  color: var(--color-neutral-700, #4f5562) !important;
  opacity: 1 !important;
}

#userSignInBlock .contactArea input[type="text"],
#userSignInBlock .contactArea input[type="password"],
#userSignInBlock .contactArea input[type="email"],
.fancybox-inner #userSignInBlock .contactArea input[type="text"],
.fancybox-inner #userSignInBlock .contactArea input[type="password"],
.fancybox-inner #userSignInBlock .contactArea input[type="email"] {
  color: var(--color-neutral-darkest, #121212) !important;
  background-color: var(--color-neutral-lightest, #fff) !important;
  border-color: var(--color-neutral-400, #bfc3c9) !important;
}

#userSignInBlock .contactArea input::placeholder,
#userSignInBlock .contactArea input::-webkit-input-placeholder,
#userSignInBlock .contactArea input::-moz-placeholder,
#userSignInBlock .contactArea input:-ms-input-placeholder,
.fancybox-inner #userSignInBlock .contactArea input::placeholder,
.fancybox-inner #userSignInBlock .contactArea input::-webkit-input-placeholder,
.fancybox-inner #userSignInBlock .contactArea input::-moz-placeholder,
.fancybox-inner #userSignInBlock .contactArea input:-ms-input-placeholder {
  color: var(--color-neutral-700, #4f5562) !important;
  opacity: 1 !important;
}

#userSignInBlock #userSignIn label.error,
.fancybox-inner #userSignInBlock #userSignIn label.error {
  color: var(--color-danger-800, #9a1c1c) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
}

/* Forgot Password modal (#forgotPasswordBlock): popup.css .contactArea + validate/server messages (same pattern as Register/Sign In). */
#forgotPasswordBlock input[type="text"],
#forgotPasswordBlock input[type="password"],
#forgotPasswordBlock input[type="email"],
.fancybox-inner #forgotPasswordBlock input[type="text"],
.fancybox-inner #forgotPasswordBlock input[type="password"],
.fancybox-inner #forgotPasswordBlock input[type="email"] {
  color: var(--color-neutral-darkest, #121212) !important;
  background-color: var(--color-neutral-lightest, #fff) !important;
  border-color: var(--color-neutral-400, #bfc3c9) !important;
}

#forgotPasswordBlock input::placeholder,
#forgotPasswordBlock input::-webkit-input-placeholder,
#forgotPasswordBlock input::-moz-placeholder,
#forgotPasswordBlock input:-ms-input-placeholder,
.fancybox-inner #forgotPasswordBlock input::placeholder,
.fancybox-inner #forgotPasswordBlock input::-webkit-input-placeholder,
.fancybox-inner #forgotPasswordBlock input::-moz-placeholder,
.fancybox-inner #forgotPasswordBlock input:-ms-input-placeholder {
  color: var(--color-neutral-700, #4f5562) !important;
  opacity: 1 !important;
}

#forgotPasswordBlock .contactArea input[type="text"],
#forgotPasswordBlock .contactArea input[type="password"],
#forgotPasswordBlock .contactArea input[type="email"],
.fancybox-inner #forgotPasswordBlock .contactArea input[type="text"],
.fancybox-inner #forgotPasswordBlock .contactArea input[type="password"],
.fancybox-inner #forgotPasswordBlock .contactArea input[type="email"] {
  color: var(--color-neutral-darkest, #121212) !important;
  background-color: var(--color-neutral-lightest, #fff) !important;
  border-color: var(--color-neutral-400, #bfc3c9) !important;
}

#forgotPasswordBlock .contactArea input::placeholder,
#forgotPasswordBlock .contactArea input::-webkit-input-placeholder,
#forgotPasswordBlock .contactArea input::-moz-placeholder,
#forgotPasswordBlock .contactArea input:-ms-input-placeholder,
.fancybox-inner #forgotPasswordBlock .contactArea input::placeholder,
.fancybox-inner #forgotPasswordBlock .contactArea input::-webkit-input-placeholder,
.fancybox-inner #forgotPasswordBlock .contactArea input::-moz-placeholder,
.fancybox-inner #forgotPasswordBlock .contactArea input:-ms-input-placeholder {
  color: var(--color-neutral-700, #4f5562) !important;
  opacity: 1 !important;
}

#forgetPasswordForm label.error,
#forgotPasswordBlock label.error,
.fancybox-inner #forgotPasswordBlock label.error,
.fancybox-inner #forgetPasswordForm label.error {
  color: var(--color-danger-800, #9a1c1c) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
}

#forgotPasswordBlock #forgotPasswordMessage.error,
.fancybox-inner #forgotPasswordBlock #forgotPasswordMessage.error {
  color: var(--color-danger-800, #9a1c1c) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
}

#forgotPasswordBlock #forgotPasswordMessage.success,
.fancybox-inner #forgotPasswordBlock #forgotPasswordMessage.success {
  color: var(--color-neutral-800, #343944) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
}

#forgotPasswordBlock #resendemail a,
.fancybox-inner #forgotPasswordBlock #resendemail a {
  color: var(--color-primary-700, #562c9e) !important;
}

#forgotPasswordBlock #resendemail a:hover,
#forgotPasswordBlock #resendemail a:focus,
.fancybox-inner #forgotPasswordBlock #resendemail a:hover,
.fancybox-inner #forgotPasswordBlock #resendemail a:focus {
  color: var(--color-neutral-darkest, #121212) !important;
}

/* Sign out Cancel — solid gray secondary (flat, no gradient) */
button#logoutCancel.btn.btn-inverse,
button#logoutCancel.btn.btn-inverse:active {
  background: var(--color-neutral-700, #4f5562) !important;
  background-image: none !important;
  border-color: var(--color-neutral-700, #4f5562) !important;
  color: var(--color-neutral-lightest, #fff) !important;
  text-shadow: none !important;
  filter: none !important;
}
button#logoutCancel.btn.btn-inverse:hover,
button#logoutCancel.btn.btn-inverse:focus {
  background: var(--color-neutral-800, #343944) !important;
  background-image: none !important;
  border-color: var(--color-neutral-800, #343944) !important;
  color: var(--color-neutral-lightest, #fff) !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Sign In dialog (#userSignInBlock): same control height as other Fancybox primaries (Cancel missed dialog-holder .titleBtnClr-only sizing) */
#userSignInBlock .creatAccountSigin .btn,
#userSignInBlock .creatAccountSigin .btn.titleBtnClr,
#userSignInBlock .creatAccountSigin .btn.btn-inverse {
  box-sizing: border-box;
  min-height: 2.5rem;
  padding: 0.5rem 1.25rem !important;
  font-weight: 600;
  border-radius: var(--border-radius-xs, 4px);
}
#userSignInBlock .creatAccountSigin .btn.titleBtnClr,
#userSignInBlock .creatAccountSigin button[type="submit"].titleBtnClr {
  background: var(--color-primary-600, #6640C2);
  border-color: var(--color-primary-600, #6640C2);
  color: var(--color-neutral-lightest, #fff);
}
#userSignInBlock .creatAccountSigin .btn.titleBtnClr:hover,
#userSignInBlock .creatAccountSigin .btn.titleBtnClr:focus,
#userSignInBlock .creatAccountSigin button[type="submit"].titleBtnClr:hover,
#userSignInBlock .creatAccountSigin button[type="submit"].titleBtnClr:focus {
  background: var(--color-primary-700, #562c9e);
  border-color: var(--color-primary-700, #562c9e);
  color: var(--color-neutral-lightest, #fff);
}
#userSignInBlock .creatAccountSigin .btn.btn-inverse,
#userSignInBlock .creatAccountSigin #user-signin-cancel {
  background: var(--color-neutral-600, #6B7280);
  border-color: var(--color-neutral-600, #6B7280);
  color: var(--color-neutral-lightest, #fff);
}
#userSignInBlock .creatAccountSigin .btn.btn-inverse:hover,
#userSignInBlock .creatAccountSigin .btn.btn-inverse:focus,
#userSignInBlock .creatAccountSigin #user-signin-cancel:hover,
#userSignInBlock .creatAccountSigin #user-signin-cancel:focus {
  background: var(--color-neutral-700, #4f5562);
  border-color: var(--color-neutral-700, #4f5562);
  color: var(--color-neutral-lightest, #fff);
}

/* Breadcrumb home icon – new icon set (Assets/icons/home-1.svg = house shape), purple token */
.icon-home {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  background-color: var(--color-primary-600, #7c4ccd);
  -webkit-mask: url("../../icons/home-1.svg") no-repeat center;
  mask: url("../../icons/home-1.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
#profileNav .homeIcon a {
  display: inline-block;
  line-height: 0;
}
#profileNav .homeIcon a:hover .icon-home,
#profileNav .homeIcon a:focus .icon-home {
  background-color: var(--color-primary-700, #562c9e);
}

.btn-warning,
.btn-warning:hover,
.btn-warning:focus {
  background: var(--color-warning-600, #d26e16);
  background-image: none;
  border-color: var(--color-warning-600, #d26e16);
  color: var(--color-neutral-lightest, #fff);
}

.btn-danger,
.btn-danger:hover,
.btn-danger:focus {
  background: var(--color-danger-600, #d12828);
  background-image: none;
  border-color: var(--color-danger-600, #d12828);
  color: var(--color-neutral-lightest, #fff);
}

.btn-success,
.btn-success:hover,
.btn-success:focus {
  background: var(--color-success-600, #088556);
  background-image: none;
  border-color: var(--color-success-600, #088556);
  color: var(--color-neutral-lightest, #fff);
}

.btn-info,
.btn-info:hover,
.btn-info:focus {
  background: var(--color-primary-600, #6b4cb8);
  background-image: none;
  border-color: var(--color-primary-600, #6b4cb8);
  color: var(--color-neutral-lightest, #fff);
}

/* Search button: use brand-dark, remove legacy bg image */
.searchbutton {
  background-color: var(--color-brand-dark, #0a1128) !important;
  color: var(--color-neutral-lightest, #fff);
  border: 0;
}

/* input.searchbutton: inputs don't support ::before; use white icon so bg stays dark */
input.searchbutton {
  border-radius: var(--border-radius-xs, 4px);
  background-image: url("../../icons/magnifying-glass-white.svg") !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.25rem;
  color: var(--color-neutral-lightest, #fff);
  font-size: 0;
  text-indent: -9999px;
}

/* If the SVG is dark, make it white so it’s visible on brand-dark */
/* SVG is dark (#121212); make it white on brand-dark button */

/* a/button.searchbutton: icon via ::before */
a.searchbutton,
button.searchbutton {
  position: relative;
  background-image: none !important;
}

a.searchbutton::before,
button.searchbutton::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: currentColor;
  -webkit-mask: url("../../icons/magnifying-glass.svg") no-repeat center;
  mask: url("../../icons/magnifying-glass.svg") no-repeat center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
  pointer-events: none;
}

/* ========== 6. Modals and dialogs ========== */
.modal-header,
.dialog-title.titleBtnClr,
.ui-dialog .ui-dialog-titlebar,
.ui-widget-header {
  background: var(--color-neutral-900, #242831);
  border-color: var(--color-neutral-900, #242831);
  color: var(--color-neutral-lightest, #fff);
  font-family: var(--font-family---font-families-default, "Source Sans 3"), sans-serif;
  font-size: var(--font-size-md, 1rem);
  line-height: var(--line-heights-md, 1.5);
}

.modal-header .modal-title {
  font-size: var(--font-size-md, 1rem);
  line-height: var(--line-heights-md, 1.5);
}

.modal-body,
.ui-dialog .ui-dialog-content {
  background: var(--color-neutral-lightest, #fff);
  font-family: var(--font-family---font-families-default, "Source Sans 3"), sans-serif;
  font-size: var(--font-size-md, 1rem);
  line-height: var(--line-heights-md, 1.5);
}

.modal-body label,
.ui-dialog label {
  color: var(--color-neutral-darkest, #121212);
  font-size: var(--font-size-md, 1rem);
  line-height: var(--line-heights-md, 1.5);
}

.modal-footer {
  background: var(--color-neutral-100, #f5f5f5);
  border-top-color: var(--color-neutral-300, #d5d7db);
  font-family: var(--font-family---font-families-default, "Source Sans 3"), sans-serif;
  font-size: var(--font-size-md, 1rem);
  line-height: var(--line-heights-md, 1.5);
}

/* Fancybox (Dialog, InfoBox / errors, Sign Out) — md overrides popup.css .poptitletxt 18px + style.css .dialog-content bold */
/* popup.css .dialog-title-left { float:left } + removed fixed height — parent collapsed; flex contains title text */
.fancybox-inner .dialog-title.titleBtnClr.poptitletxt {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 2.75rem;
  padding: 0.65rem 2.5rem 0.65rem 1rem !important;
  height: auto !important;
}

.fancybox-inner .dialog-title.titleBtnClr,
.fancybox-inner .dialog-title .dialog-title-left {
  font-family: var(--font-family---font-families-default, "Source Sans 3"), sans-serif;
  font-size: var(--font-size-md, 1rem) !important;
  line-height: var(--line-heights-md, 1.5) !important;
}

.fancybox-inner .dialog-title .dialog-title-left {
  float: none !important;
  width: 100%;
  font-weight: 600;
}

.fancybox-inner .dialog-content.kofile-dialog-popup-box,
.fancybox-inner .dialog-content.kofile-dialog-popup-box p,
.fancybox-inner .dialogPopup,
.fancybox-inner .dialogPopup p,
.fancybox-inner .contactArea,
.fancybox-inner .contactArea > li:not(.dialog-buttons) {
  font-family: var(--font-family---font-families-default, "Source Sans 3"), sans-serif;
  font-size: var(--font-size-md, 1rem) !important;
  line-height: var(--line-heights-md, 1.5) !important;
  font-weight: normal !important;
}

/* Sign out dialog — was reusing #previewFooterButtons + .fright on Yes; center copy and actions */
.fancybox-inner #logoutDialogBlock #logoutDialogFooter,
.fancybox-inner #logoutDialogBlock #logoutDialogFooter p {
  text-align: center;
}

.fancybox-inner #logoutDialogBlock #logoutDialogFooter {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 1rem 1.25rem 1.25rem !important;
}

.fancybox-inner #logoutDialogBlock #logoutDialogFooter p {
  margin: 0 0 1rem;
  color: var(--color-neutral-800, #343944);
}

.fancybox-inner #logoutDialogBlock .logout-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}

.fancybox-inner #logoutDialogBlock .logout-dialog-actions .btn {
  float: none !important;
  margin: 0 !important;
  border-radius: var(--border-radius-xs, 4px);
  min-height: 2.5rem;
  padding: 0.5rem 1.25rem !important;
  font-weight: 600;
}

/* Fancybox — Order / Print pre-confirmation kiosk (#dialog-content-holder): Neumo card + neutral header */
.fancybox-skin:has(#dialog-content-holder) {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

#dialog-content-holder.dialog-content {
  box-sizing: border-box;
  overflow: hidden;
  border-radius: var(--border-radius-lg, 12px);
  border: 1px solid var(--color-neutral-300, #d5d7db);
  background: var(--color-neutral-lightest, #fff);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

/* Fancybox close — replace sprite (black circle); align with neutral title bar */
.fancybox-skin:has(#dialog-content-holder) .fancybox-close {
  top: 0.5rem !important;
  right: 0.5rem !important;
  width: 2rem !important;
  height: 2rem !important;
  background: transparent !important;
  background-image: none !important;
  opacity: 1 !important;
  border-radius: var(--border-radius-full, 9999px);
}

.fancybox-skin:has(#dialog-content-holder) .fancybox-close::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1rem;
  height: 1rem;
  margin: -0.5rem 0 0 -0.5rem;
  background-color: var(--color-neutral-lightest, #fff);
  -webkit-mask: url("../../icons/x.svg") no-repeat center;
  mask: url("../../icons/x.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.fancybox-skin:has(#dialog-content-holder) .fancybox-close:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

.fancybox-skin:has(#dialog-content-holder) .fancybox-close:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.95);
  outline-offset: 2px;
}

.fancybox-inner #dialog-content-holder .dialog-title.titleBtnClr.radiusTop {
  background: var(--color-neutral-900, #242831) !important;
  background-image: none !important;
  border-color: var(--color-neutral-900, #242831) !important;
  color: var(--color-neutral-lightest, #fff) !important;
  border-radius: var(--border-radius-lg, 12px) var(--border-radius-lg, 12px) 0 0 !important;
  text-shadow: none !important;
}

.fancybox-inner #dialog-content-holder .dialog-title .dialog-title-left {
  color: var(--color-neutral-lightest, #fff) !important;
}

.fancybox-inner #dialog-content-holder .kofile-dialog-popup-box {
  background: var(--color-neutral-lightest, #fff) !important;
  color: var(--color-neutral-darkest, #121212);
}

.fancybox-inner #dialog-content-holder .dialogPopup.orderConfirmationKiosk,
.fancybox-inner #dialog-content-holder .dialogPopup.printConfirmationKiosk {
  background: transparent !important;
  color: inherit;
}

.fancybox-inner .orderConfirmationKiosk,
.fancybox-inner .printConfirmationKiosk {
  padding: 1rem 1.25rem 2rem !important;
  background-color: transparent !important;
}

.fancybox-inner .orderConfirmationKiosk ul table tbody tr,
.fancybox-inner .printConfirmationKiosk ul table tbody tr {
  border-color: var(--color-neutral-300, #d5d7db) !important;
}

.fancybox-inner .orderConfirmationKiosk ul table tbody tr th,
.fancybox-inner .orderConfirmationKiosk ul table tbody tr td,
.fancybox-inner .printConfirmationKiosk ul table tbody tr th,
.fancybox-inner .printConfirmationKiosk ul table tbody tr td {
  color: var(--color-neutral-darkest, #121212);
  font-size: var(--font-size-md, 1rem);
  line-height: var(--line-heights-md, 1.5);
}

.fancybox-inner #dialog-content-holder .orderConfirmationKiosk .bold-text,
.fancybox-inner #dialog-content-holder .printConfirmationKiosk .bold-text {
  color: var(--color-neutral-darkest, #121212);
}

.fancybox-inner .orderConfirmationKiosk input[type="text"],
.fancybox-inner .printConfirmationKiosk input[type="text"] {
  box-sizing: border-box;
  width: 100% !important;
  height: auto !important;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem !important;
  border: 1px solid var(--color-neutral-400, #b7bcc3);
  border-radius: var(--border-radius-xs, 4px);
  background: var(--color-neutral-lightest, #fff);
  color: var(--color-neutral-darkest, #121212);
  font-size: var(--font-size-md, 1rem);
  font-weight: normal !important;
}

.fancybox-inner .orderConfirmationKiosk input[type="text"]:focus,
.fancybox-inner .printConfirmationKiosk input[type="text"]:focus {
  outline: none;
  border-color: var(--color-primary-600, #6b4cb8);
  box-shadow: 0 0 0 1px var(--color-primary-600, #6b4cb8);
}

.fancybox-inner .orderConfirmationKiosk input[type="text"]::placeholder,
.fancybox-inner .printConfirmationKiosk input[type="text"]::placeholder {
  color: var(--color-neutral-600, #6b7280);
}

.fancybox-inner .orderConfirmationKiosk #orderConfirmationKiosk-or-text,
.fancybox-inner .printConfirmationKiosk #orderConfirmationKiosk-or-text {
  margin: 0.75rem 0 !important;
  display: block;
  text-align: center;
  color: var(--color-neutral-600, #6b7280);
  font-weight: 600;
}

.fancybox-inner #dialog-content-holder .orderConfirmationKiosk a#emailOrderReceiptKiosk {
  color: var(--color-primary-700, #562c9e);
  text-decoration: none;
  font-weight: 600;
}

.fancybox-inner #dialog-content-holder .orderConfirmationKiosk a#emailOrderReceiptKiosk:hover,
.fancybox-inner #dialog-content-holder .orderConfirmationKiosk a#emailOrderReceiptKiosk:focus {
  color: var(--color-primary-800, #3b2270);
  text-decoration: underline;
}

/* Kiosk: global .titleBtnClr is neutral-900 — primary = purple; Close uses :not(#btnClose) so it never picks up purple */
.fancybox-inner #dialog-content-holder .orderConfirmationKiosk input[type="submit"].btn.titleBtnClr,
.fancybox-inner #dialog-content-holder .printConfirmationKiosk input[type="submit"].btn.titleBtnClr,
.fancybox-inner #dialog-content-holder input.btn.titleBtnClr:not(#btnClose),
.fancybox-inner #dialog-content-holder button.btn.titleBtnClr {
  background: var(--color-primary-700, #562c9e) !important;
  background-image: none !important;
  border: 1px solid var(--color-primary-700, #562c9e) !important;
  color: var(--color-neutral-lightest, #fff) !important;
  border-radius: var(--border-radius-xs, 4px);
  padding: 0.5rem 1.25rem !important;
  font-weight: 600;
  text-shadow: none !important;
  min-height: 2.5rem;
}

.fancybox-inner #dialog-content-holder .orderConfirmationKiosk input[type="submit"].btn.titleBtnClr:hover,
.fancybox-inner #dialog-content-holder .orderConfirmationKiosk input[type="submit"].btn.titleBtnClr:focus,
.fancybox-inner #dialog-content-holder .printConfirmationKiosk input[type="submit"].btn.titleBtnClr:hover,
.fancybox-inner #dialog-content-holder .printConfirmationKiosk input[type="submit"].btn.titleBtnClr:focus,
.fancybox-inner #dialog-content-holder input.btn.titleBtnClr:not(#btnClose):hover,
.fancybox-inner #dialog-content-holder input.btn.titleBtnClr:not(#btnClose):focus,
.fancybox-inner #dialog-content-holder button.btn.titleBtnClr:hover,
.fancybox-inner #dialog-content-holder button.btn.titleBtnClr:focus {
  background: var(--color-primary-800, #3b2270) !important;
  border-color: var(--color-primary-800, #3b2270) !important;
  color: var(--color-neutral-lightest, #fff) !important;
}

/* Kiosk Close — same gray treatment as Sign out Cancel (#logoutCancel) */
.fancybox-inner #dialog-content-holder input#btnClose.btn.titleBtnClr[type="button"] {
  background: var(--color-neutral-700, #4f5562) !important;
  border: 1px solid var(--color-neutral-700, #4f5562) !important;
  color: var(--color-neutral-lightest, #fff) !important;
}

.fancybox-inner #dialog-content-holder input#btnClose.btn.titleBtnClr[type="button"]:hover,
.fancybox-inner #dialog-content-holder input#btnClose.btn.titleBtnClr[type="button"]:focus {
  background: var(--color-neutral-800, #343944) !important;
  border-color: var(--color-neutral-800, #343944) !important;
  color: var(--color-neutral-lightest, #fff) !important;
}

/* Order confirmation (internet / #orderConfirmation — not kiosk): theme #kofile-orderConfirmation #EDEDED wins over .kofile-dialog-popup-box */
.fancybox-inner #dialog-content-holder #kofile-orderConfirmation.kofile-dialog-popup-box {
  background: var(--color-neutral-lightest, #fff) !important;
  color: var(--color-neutral-darkest, #121212);
}

.fancybox-inner #dialog-content-holder #orderConfirmation {
  background: transparent !important;
  box-sizing: border-box;
  padding: 1rem 1.25rem 1.25rem;
  font-size: var(--font-size-md, 1rem);
  line-height: var(--line-heights-md, 1.5);
}

.fancybox-inner #dialog-content-holder #orderConfirmation ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fancybox-inner #dialog-content-holder #orderConfirmation table,
.fancybox-inner #dialog-content-holder #orderConfirmation #orderTable {
  width: 100%;
  background-color: var(--color-neutral-lightest, #fff) !important;
  border-collapse: collapse;
}

.fancybox-inner #dialog-content-holder #orderConfirmation table thead th,
.fancybox-inner #dialog-content-holder #orderConfirmation #orderTable thead th {
  background: var(--color-neutral-300, #d5d7db) !important;
  color: var(--color-neutral-darkest, #121212);
  font-weight: 600;
  text-align: left;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-neutral-300, #d5d7db);
  font-size: var(--font-size-md, 1rem);
}

.fancybox-inner #dialog-content-holder #orderConfirmation table tbody th,
.fancybox-inner #dialog-content-holder #orderConfirmation table tbody td,
.fancybox-inner #dialog-content-holder #orderConfirmation #orderTable tbody th,
.fancybox-inner #dialog-content-holder #orderConfirmation #orderTable tbody td {
  color: var(--color-neutral-800, #343944);
  padding: 0.5rem 0.75rem;
  border-color: var(--color-neutral-300, #d5d7db);
  background: var(--color-neutral-lightest, #fff) !important;
  vertical-align: top;
  font-size: var(--font-size-md, 1rem);
  line-height: var(--line-heights-md, 1.5);
}

.fancybox-inner #dialog-content-holder #orderConfirmation tr {
  border-color: var(--color-neutral-300, #d5d7db);
}

.fancybox-inner #dialog-content-holder #orderConfirmation #trouble-print-block {
  margin-top: 1rem;
  text-align: right;
  float: none;
}

.fancybox-inner #dialog-content-holder #orderConfirmation .dialog-buttons {
  margin-top: 1rem;
  text-align: right;
}

.fancybox-inner #dialog-content-holder #orderConfirmation input.btn.titleBtnClr[type="button"],
.fancybox-inner #dialog-content-holder #orderConfirmation input.btn.titleBtnClr[type="submit"] {
  background: var(--color-primary-700, #562c9e) !important;
  background-image: none !important;
  border: 1px solid var(--color-primary-700, #562c9e) !important;
  color: var(--color-neutral-lightest, #fff) !important;
  border-radius: var(--border-radius-xs, 4px);
  padding: 0.5rem 1.25rem !important;
  font-weight: 600;
  text-shadow: none !important;
  min-height: 2.5rem;
}

.fancybox-inner #dialog-content-holder #orderConfirmation input.btn.titleBtnClr[type="button"]:hover,
.fancybox-inner #dialog-content-holder #orderConfirmation input.btn.titleBtnClr[type="button"]:focus,
.fancybox-inner #dialog-content-holder #orderConfirmation input.btn.titleBtnClr[type="submit"]:hover,
.fancybox-inner #dialog-content-holder #orderConfirmation input.btn.titleBtnClr[type="submit"]:focus {
  background: var(--color-primary-800, #3b2270) !important;
  border-color: var(--color-primary-800, #3b2270) !important;
}

/* ========== 7. Header and nav bar ========== */
/* Header background left as legacy – do not override */
/* Header text uses default body color (not link purple) */

#nav {
  border-bottom: 5px solid var(--color-primary-300, #d5c1f4);
}

#header a,
#header .headertext,
header a,
header .headertext,
.headertext,
nav ul li a,
.big-nav ul li a {
  color: var(--color-neutral-800, #343944);
}

#header a:hover,
#header a:focus,
header a:hover,
header a:focus,
nav ul li a:hover,
.big-nav ul li a:hover {
  color: var(--color-neutral-800, #343944);
}

#header nav ul li.selected > a,
#header .big-nav ul li.selected > a,
#header li.selectedsub a,
header nav ul li.selected > a,
header .big-nav ul li.selected > a,
header li.selectedsub a,
nav ul li.selected > a,
.big-nav ul li.selected > a,
li.selectedsub a {
  background: none;
  color: var(--color-primary-1000, #160A30) !important;
}

nav ul li + li,
.big-nav ul li + li {
  border-left-color: rgba(255, 255, 255, 0.2);
}

/* ========== 8. Error / validation states ========== */
.error,
.validationError,
.text-red,
.field-validation-error,
#CustomerName-error {
  color: var(--color-danger-600, #d12828);
  font-size: 12px;
}

/* ========== 9. Queue titles ========== */
.orderCount,
.indexCount,
.captureCount {
  color: var(--color-neutral-darkest, #121212);
}

/* ========== 9b. Cart summary – cart item count ========== */
#cartSummary .cartItemCount,
#CartItemCount,
#InboxItemsCount {
  background-color: var(--color-primary-100, #f7f5ff);
  border: 1px solid var(--color-primary-300, #d5c1f4);
  color: var(--color-brand-dark, #0a1128);
}

/* ========== 9c-alt. View Inbox popup (Items partial in #inboxResultBlock / #viewInboxItemsBubble) ========== */
#viewInboxItemsBubble.kofileInfoBuble {
  border-color: var(--color-neutral-400, #b7bcc3) !important;
  border-width: 1px !important;
  border-radius: var(--border-radius-lg, 12px);
  box-shadow: 0 4px 24px rgba(10, 17, 40, 0.12);
}

/* kofile-infobubble.css — arrowRight pseudo-elements (overrides margin-left from theme) */
.arrowRight:before,
.arrowRight:after {
  margin-left: -1px;
  top: 12px;
}

#viewInboxItemsBubble .arrowRight:before,
#viewInboxItemsBubble .arrowRight:after {
  border-left-color: var(--color-neutral-lightest, #fff);
}

#viewInboxItemsBubble #inboxResultBlock {
  font-family: var(--font-family---font-families-default, "Source Sans 3"), sans-serif;
  color: var(--color-neutral-darkest, #121212);
}

#viewInboxItemsBubble #CustomerNameBlock,
#viewInboxItemsBubble #EmailAddressBlock {
  margin-bottom: var(--spacing-sm, 0.75rem);
}

/* Scope to caption labels only — jQuery Validate uses <label id="CustomerName-error" class="error"> which must stay danger-colored */
#viewInboxItemsBubble #CustomerNameBlock label.bold-text,
#viewInboxItemsBubble #EmailAddressBlock .email-address-label label {
  color: var(--color-neutral-darkest, #121212);
  font-weight: 600;
}

#viewInboxItemsBubble #CustomerName,
#viewInboxItemsBubble #EmailAddress {
  width: 100%;
  max-width: 28rem;
  box-sizing: border-box;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--color-neutral-400, #b7bcc3);
  border-radius: var(--border-radius-sm, 6px);
  font-family: inherit;
  font-size: var(--font-size-md, 1rem);
  line-height: var(--line-heights-md, 1.5);
  background: var(--color-neutral-lightest, #fff);
}

/* Error border: #CustomerName rule above wins over global .input-validation-error (higher specificity on shorthand border-color) */
#viewInboxItemsBubble #CustomerName.input-validation-error,
#viewInboxItemsBubble #CustomerName.error,
#viewInboxItemsBubble #EmailAddress.input-validation-error,
#viewInboxItemsBubble #EmailAddress.error {
  border-color: var(--color-danger-600, #d12828) !important;
}

#viewInboxItemsBubble #EmailAddress {
  max-width: 100%;
}

/* Empty + required makes :invalid; bootstrap uses red glow on :focus:invalid — use brand focus instead */
#viewInboxItemsBubble #CustomerName:focus,
#viewInboxItemsBubble #CustomerName:focus:invalid,
#viewInboxItemsBubble #CustomerName:focus:invalid:focus,
#viewInboxItemsBubble #EmailAddress:focus,
#viewInboxItemsBubble #EmailAddress:focus:invalid,
#viewInboxItemsBubble #EmailAddress:focus:invalid:focus {
  color: var(--color-neutral-darkest, #121212) !important;
  border-color: var(--color-primary-500, #8b6fd9) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px var(--color-primary-200, #e8dff9) !important;
  -webkit-box-shadow: 0 0 0 2px var(--color-primary-200, #e8dff9) !important;
  -moz-box-shadow: 0 0 0 2px var(--color-primary-200, #e8dff9) !important;
}

/* jQuery validate: danger border + focus ring when invalid (matches global .input-validation-error:focus) */
#viewInboxItemsBubble #CustomerName.input-validation-error:focus,
#viewInboxItemsBubble #CustomerName.error:focus,
#viewInboxItemsBubble #EmailAddress.input-validation-error:focus,
#viewInboxItemsBubble #EmailAddress.error:focus {
  border-color: var(--color-danger-600, #d12828) !important;
  box-shadow: 0 0 0 2px var(--color-danger-600, #d12828) !important;
  -webkit-box-shadow: 0 0 0 2px var(--color-danger-600, #d12828) !important;
  -moz-box-shadow: 0 0 0 2px var(--color-danger-600, #d12828) !important;
}

#viewInboxItemsBubble .reset-and-same-actions-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0;
  margin: var(--spacing-xs, 0.5rem) 0 var(--spacing-sm, 0.75rem);
}

#viewInboxItemsBubble .reset-and-same-action {
  height: auto;
  min-height: 1.5rem;
  padding: 0.25rem 0.75rem;
  color: var(--color-primary-700, #562c9e) !important;
  border-right: 1px solid var(--color-neutral-300, #d5d7db) !important;
  cursor: pointer;
  font-weight: 600;
  font-size: var(--font-size-md, 1rem);
  font-family: inherit;
}

#viewInboxItemsBubble .reset-and-same-action:last-child {
  border-right: none !important;
}

#viewInboxItemsBubble .reset-and-same-action:hover,
#viewInboxItemsBubble .reset-and-same-action:focus {
  color: var(--color-primary-800, #3d1d7a) !important;
  text-decoration: underline;
}

/* Table header – replace legacy gray + white + text-shadow */
#viewInboxItemsBubble #viewInboxTable thead tr.table-header th,
#viewInboxItemsBubble #viewInboxTable thead .table-header th {
  background: var(--color-neutral-300, #d5d7db) !important;
  color: var(--color-neutral-darkest, #121212) !important;
  text-shadow: none !important;
  font-weight: 600;
  font-size: var(--font-size-sm, 0.875rem);
  border: 0;
  padding: 0.5rem 0.4rem;
  vertical-align: middle;
}

#viewInboxItemsBubble #viewInboxTable {
  margin-top: var(--spacing-sm, 0.75rem);
  border-collapse: collapse;
}

#viewInboxItemsBubble #viewInboxTable tbody > tr {
  border-top: 1px solid var(--color-neutral-300, #d5d7db);
}

#viewInboxItemsBubble #viewInboxTable tbody td {
  padding: 0.5rem 0.35rem;
  vertical-align: top;
  color: var(--color-neutral-darkest, #121212);
}

#viewInboxItemsBubble #viewInboxTable tbody td:last-child {
  vertical-align: middle;
  text-align: center;
  width: 2.75rem;
}

#viewInboxItemsBubble #viewInboxTable tbody tr.selectedRow > td {
  background-color: var(--color-primary-100, #f3f0fa) !important;
}

/* Order type column: vertical stack with breathing room */
#viewInboxItemsBubble .orderTypeBlock {
  text-align: left;
}

#viewInboxItemsBubble .innerOrderTypeBlock {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-sm, 0.75rem);
  text-align: left;
  min-width: 10rem;
  max-width: 20rem;
}

#viewInboxItemsBubble .innerOrderTypeBlock select.orderTypeList {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--color-neutral-400, #b7bcc3);
  border-radius: var(--border-radius-sm, 6px);
  font-family: inherit;
  font-size: var(--font-size-sm, 0.875rem);
  background: var(--color-neutral-lightest, #fff);
  color: var(--color-neutral-darkest, #121212);
}

#viewInboxItemsBubble .innerOrderTypeBlock label.orderTypeDesc {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  color: var(--color-neutral-800, #343944);
}

#viewInboxItemsBubble .innerOrderTypeBlock input.comment {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--color-neutral-400, #b7bcc3);
  border-radius: var(--border-radius-sm, 6px);
  font-family: inherit;
  font-size: var(--font-size-sm, 0.875rem);
}

#viewInboxItemsBubble .email-doc-checkbox label {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-neutral-800, #343944);
}

#viewInboxItemsBubble .email-doc-actions a {
  color: var(--color-primary-700, #562c9e);
  font-weight: 600;
  font-size: var(--font-size-sm, 0.875rem);
  text-decoration: none;
}

#viewInboxItemsBubble .email-doc-actions a:hover,
#viewInboxItemsBubble .email-doc-actions a:focus {
  color: var(--color-primary-800, #3d1d7a);
  text-decoration: underline;
}

#viewInboxItemsBubble .email-doc-actions a.select-all {
  border-right: 1px solid var(--color-neutral-300, #d5d7db);
  padding-right: 0.35rem;
  margin-right: 0.35rem;
}

/* Remove row: a.iconDeleteYellow — x-circle + danger (replaces DT_bootstrap close-yellow.png); shopping cart + DataTables */
a.iconDeleteYellow {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 1.25rem !important;
  height: 1.25rem !important;
  min-width: 1.25rem;
  box-sizing: border-box;
  background: none !important;
  background-image: none !important;
  vertical-align: middle;
  position: relative;
  text-decoration: none;
}

a.iconDeleteYellow::before {
  content: "";
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  background-color: var(--color-danger-600, #d12828);
  -webkit-mask-image: url("../../icons/x-circle.svg");
  mask-image: url("../../icons/x-circle.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

a.iconDeleteYellow:hover::before,
a.iconDeleteYellow:focus::before {
  background-color: var(--color-danger-800, #9e1f1f);
}

/* Action column: cart — top-align remove control with row; results tables — keep vertical center */
#shoppingCart #cartItemGenericDetails td:has(> a.iconDeleteYellow) {
  vertical-align: top;
}

.result-table td:has(> a.iconDeleteYellow),
table.table tbody td:has(> a.iconDeleteYellow) {
  vertical-align: middle;
}

/* Inbox bubble + shopping cart (#userInformation): boxed control + plain X (search/DataTables keep global x-circle) */
#viewInboxItemsBubble a.iconDeleteYellow,
#userInformation #shoppingCart a.iconDeleteYellow {
  display: inline-flex !important;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8px;
  padding-left: 4px;
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem;
  box-sizing: border-box;
  background: none !important;
  background-image: none !important;
  border: none;
  border-radius: 100%;
  vertical-align: top;
  position: relative;
}

#viewInboxItemsBubble a.iconDeleteYellow::before,
#userInformation #shoppingCart a.iconDeleteYellow::before {
  width: 1rem;
  height: 1rem;
  background-color: var(--color-danger-600, #d12828);
  -webkit-mask-image: url("../../icons/x.svg");
  mask-image: url("../../icons/x.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

#viewInboxItemsBubble a.iconDeleteYellow:hover,
#userInformation #shoppingCart a.iconDeleteYellow:hover {
  background: var(--color-danger-100, #fde8e8) !important;
  border: 1px solid var(--color-danger-600, #d12828);
}

#viewInboxItemsBubble a.iconDeleteYellow:focus-visible,
#userInformation #shoppingCart a.iconDeleteYellow:focus-visible {
  outline: 2px solid var(--color-primary-600, #6b4cb8);
  outline-offset: 2px;
}

/* Inbox dialog footer – match Bootstrap .modal-footer + Sign In–style primary/secondary buttons */
#viewInboxItemsBubble #kofileBubbleFooter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  margin-top: var(--spacing-sm, 0.75rem);
  padding: var(--spacing-sm, 0.75rem) 0;
  border-top: 1px solid var(--color-neutral-300, #d5d7db);
  background: var(--color-neutral-100, #f5f5f5);
  color: var(--color-neutral-darkest, #121212);
  text-align: left;
  box-sizing: border-box;
}

/* Base: pill buttons (anchors), no pipe separators */
#viewInboxItemsBubble #kofileBubbleFooter a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0.4rem 1rem !important;
  margin: 0 !important;
  border: 1px solid transparent !important;
  border-left: 1px solid transparent !important;
  border-radius: var(--border-radius-sm, 6px);
  font-family: var(--font-family---font-families-default, "Source Sans 3"), sans-serif;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600 !important;
  line-height: 1.25;
  text-decoration: none !important;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Clear Inbox – left; margin-right:auto pushes Cancel + Submit to the right */
#viewInboxItemsBubble #kofileBubbleFooter .widget-kofileinfobubble-clear-inbox,
#viewInboxItemsBubble #kofileBubbleFooter #clearInboxBtn {
  float: none;
  margin-right: auto !important;
  background: var(--color-neutral-lightest, #fff) !important;
  border-color: var(--color-neutral-400, #b7bcc3) !important;
  color: var(--color-danger-600, #d12828) !important;
}

#viewInboxItemsBubble #kofileBubbleFooter .widget-kofileinfobubble-clear-inbox:hover,
#viewInboxItemsBubble #kofileBubbleFooter .widget-kofileinfobubble-clear-inbox:focus,
#viewInboxItemsBubble #kofileBubbleFooter #clearInboxBtn:hover,
#viewInboxItemsBubble #kofileBubbleFooter #clearInboxBtn:focus {
  background: var(--color-danger-100, #fde8e8) !important;
  border-color: var(--color-danger-600, #d12828) !important;
  color: var(--color-danger-700, #b32020) !important;
}

/* Cancel – same secondary as Sign In modal */
#viewInboxItemsBubble #kofileBubbleFooter .widget-kofileinfobubble-cancel {
  background: var(--color-neutral-600, #6b7280) !important;
  border-color: var(--color-neutral-600, #6b7280) !important;
  color: var(--color-neutral-lightest, #fff) !important;
}

#viewInboxItemsBubble #kofileBubbleFooter .widget-kofileinfobubble-cancel:hover,
#viewInboxItemsBubble #kofileBubbleFooter .widget-kofileinfobubble-cancel:focus {
  background: var(--color-neutral-700, #4f5562) !important;
  border-color: var(--color-neutral-700, #4f5562) !important;
  color: var(--color-neutral-lightest, #fff) !important;
}

/* Submit – primary purple like #userSignInBlock Sign In */
#viewInboxItemsBubble #kofileBubbleFooter #submitInboxBtn,
#viewInboxItemsBubble #kofileBubbleFooter .widget-kofileinfobubble-submit {
  background: var(--color-primary-600, #6640c2) !important;
  border-color: var(--color-primary-600, #6640c2) !important;
  color: var(--color-neutral-lightest, #fff) !important;
}

#viewInboxItemsBubble #kofileBubbleFooter #submitInboxBtn:hover,
#viewInboxItemsBubble #kofileBubbleFooter #submitInboxBtn:focus,
#viewInboxItemsBubble #kofileBubbleFooter .widget-kofileinfobubble-submit:hover,
#viewInboxItemsBubble #kofileBubbleFooter .widget-kofileinfobubble-submit:focus {
  background: var(--color-primary-700, #562c9e) !important;
  border-color: var(--color-primary-700, #562c9e) !important;
  color: var(--color-neutral-lightest, #fff) !important;
}

#viewInboxItemsBubble #kofileBubbleFooter #clearInboxBtn[disabled],
#viewInboxItemsBubble #kofileBubbleFooter #submitInboxBtn[disabled],
#viewInboxItemsBubble #kofileBubbleFooter a[disabled="disabled"] {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

#viewInboxItemsBubble .email-send-btn:not(.email-send-btn-disabled) {
  color: var(--color-primary-700, #562c9e);
  font-weight: 600;
}

/* ========== 9c. Search nav – Recent Searches, More/Less Options (Assets/icons, brand color) ========== */
a.recentsearches {
  background-image: none !important;
  background-color: transparent !important;
  padding-left: 22px;
  position: relative;
  color: var(--color-primary-700, #562c9e) !important;
}

a.recentsearches:hover,
a.recentsearches:focus {
  color: var(--color-primary-800, #3d1d7a) !important;
}

a.recentsearches::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url("../../icons/arrow-clockwise.svg") no-repeat center;
  mask: url("../../icons/arrow-clockwise.svg") no-repeat center;
  -webkit-mask-size: 1rem;
  mask-size: 1rem;
  pointer-events: none;
}

a.morelink,
a.lesslink {
  background-image: none !important;
  background-color: transparent !important;
  padding-left: 22px;
  position: relative;
  color: var(--color-primary-700, #562c9e) !important;
}

a.morelink:hover,
a.morelink:focus,
a.lesslink:hover,
a.lesslink:focus {
  color: var(--color-primary-800, #3d1d7a) !important;
}

a.morelink::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url("../../icons/plus-circle-1.svg") no-repeat center;
  mask: url("../../icons/plus-circle-1.svg") no-repeat center;
  -webkit-mask-size: 1rem;
  mask-size: 1rem;
  pointer-events: none;
}

a.lesslink::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url("../../icons/minus-circle-1.svg") no-repeat center;
  mask: url("../../icons/minus-circle-1.svg") no-repeat center;
  -webkit-mask-size: 1rem;
  mask-size: 1rem;
  pointer-events: none;
}

/* Reusable add/remove row icons (replace legacy plus-icon.png / minus-icon.png in HTML) */
.icon-plus-circle,
.icon-minus-circle {
  display: inline-block;
  width: 1.125rem;
  height: 1.125rem;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-plus-circle {
  -webkit-mask-image: url("../../icons/plus-circle-1.svg");
  mask-image: url("../../icons/plus-circle-1.svg");
}
.icon-minus-circle {
  -webkit-mask-image: url("../../icons/minus-circle-1.svg");
  mask-image: url("../../icons/minus-circle-1.svg");
}

/* ========== 10. Table action icons (mail, email, favourites, refund) – use Assets/icons ========== */
/* Print & cart in result rows: legacy PNGs (DT_bootstrap.css). */
/* Remove legacy background images; use SVG icons from Assets/icons with mask */
a.iconDelivery,
a.iconEmail,
.table-striped tbody > tr:nth-child(2n+1) > td a.iconDelivery,
.table-striped tbody > tr:nth-child(2n+1) > td a.iconEmail {
  background-image: none !important;
  background-color: var(--color-neutral-600, #6b7280) !important;
  -webkit-mask: url("../../icons/envelope.svg") no-repeat center;
  mask: url("../../icons/envelope.svg") no-repeat center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}

a.iconDelivery:hover,
a.iconEmail:hover,
.table-striped tbody > tr:nth-child(2n+1) > td a.iconDelivery:hover,
.table-striped tbody > tr:nth-child(2n+1) > td a.iconEmail:hover {
  background-color: var(--color-brand-dark, #0a1128) !important;
}

/* iconPrint, iconPrinter, iconCart: rolled back – use legacy PNGs from DT_bootstrap.css (result table) */

a.iconFavourites,
.table-striped tbody > tr:nth-child(2n+1) > td a.iconFavourites {
  background-image: none !important;
  background-color: var(--color-neutral-600, #6b7280) !important;
  -webkit-mask: url("../../icons/plus-circle-1.svg") no-repeat center;
  mask: url("../../icons/plus-circle-1.svg") no-repeat center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}

a.iconFavourites:hover,
.table-striped tbody > tr:nth-child(2n+1) > td a.iconFavourites:hover {
  background-color: var(--color-brand-dark, #0a1128) !important;
}

a.iconRefund,
.table-striped tbody > tr:nth-child(2n+1) > td a.iconRefund {
  background-image: none !important;
  background-color: var(--color-neutral-600, #6b7280) !important;
  -webkit-mask: url("../../icons/arrow-counter-clockwise.svg") no-repeat center;
  mask: url("../../icons/arrow-counter-clockwise.svg") no-repeat center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}

a.iconRefund:hover,
.table-striped tbody > tr:nth-child(2n+1) > td a.iconRefund:hover {
  background-color: var(--color-brand-dark, #0a1128) !important;
}

/* ========== 10b. Queue action buttons ========== */
.icon-admin-key,
.icon-plus-custom,
.icon-running-man-custom,
.icon-refresh-custom {
  background-color: var(--color-brand-dark, #0a1128);
}

/* ========== 11. Table running man / detail icon ========== */
.iconredirectorder,
.iconRedirectOrderSummary {
  background-color: var(--color-neutral-darkest, #121212);
}

/* ========== 12. Show more / show less row ========== */
.toggleGroupButton,
.toggleGroupButtonCapture,
.grouped-toggle-row td {
  color: var(--color-primary-600, #6640c2);
}

/* ========== 13. Footer ========== */
#footer,
footer {
  background: var(--color-neutral-lightest, #fff);
  color: #555555;
  font-size: 11px;
  font-weight: 400;
  line-height: 27px;
  padding: 1.25rem 0;
}

#footerinner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  background: none;
  min-width: 0;
  height: auto;
  float: none;
}

.footer-left,
#footerinner .fleft {
  color: #555555;
}

.footer-right,
#footerinner .fright {
  color: #555555;
}

.footer-neumo-logo {
  height: 18px;
  width: auto;
  vertical-align: middle;
  margin-left: 0.25em;
}

#footer a,
footer a {
  color: var(--color-primary-700, #562c9e);
}

#footer a:hover,
footer a:hover {
  color: var(--color-primary-800, #3d1d7a);
}

/* ========== 14. Input error state ========== */
.input-validation-error,
input.error,
input:focus.input-validation-error,
input.error:focus,
input.text-box.single-line.input-validation-error,
input.text-box.single-line.error,
input.text-box.single-line:focus.input-validation-error,
input.text-box.single-line.error:focus {
  border-color: var(--color-danger-600, #d12828);
}

.input-validation-error:focus,
input.error:focus,
input.text-box.single-line.input-validation-error:focus,
input.text-box.single-line.error:focus {
  box-shadow: 0 0 0 2px var(--color-danger-600, #d12828);
}

/* ========== 15. Borders and dividers ========== */
hr,
.border,
.table-bordered {
  border-color: var(--color-neutral-300, #d5d7db);
}

/* Muted / placeholder text */
.text-muted,
.placeholder,
::placeholder {
  color: var(--color-neutral-600, #6b7280);
}

/* Success state */
.text-success,
.success {
  color: var(--color-success-600, #088556);
}

/* ========== 16. Document presentation tabs (Property Records, Plats, etc.) ========== */
/* Expand/collapse row icon – use plus (collapsed) / minus (expanded) alternate circle style */
td.expand-document-tabs {
  background-image: none !important;
  /* Let background match the row (striped/non-striped); do not force transparent */
  position: relative;
}
td.expand-document-tabs::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  background-color: var(--color-primary-600, #7c4ccd);
  -webkit-mask: url("../../icons/plus-circle-1.svg") no-repeat center;
  mask: url("../../icons/plus-circle-1.svg") no-repeat center;
  -webkit-mask-size: 24px 24px;
  mask-size: 24px 24px;
  pointer-events: none;
}
td.expand-document-tabs:hover::before {
  background-color: var(--color-primary-700, #562c9e);
}
tr.expanded td.expand-document-tabs::before {
  -webkit-mask-image: url("../../icons/minus-circle-1.svg");
  mask-image: url("../../icons/minus-circle-1.svg");
}
tr.expanded td.expand-document-tabs:hover::before {
  background-color: var(--color-primary-700, #562c9e);
}

/* Expand/contract ALL rows – icon + "ALL" (tbody td + document grid thead th; th needs .result-table path to beat unified thead th background/color) */
td.expand-all-rows,
td.contract-all-rows,
.result-table > thead > tr > th.expand-all-rows,
.result-table > thead > tr > th.contract-all-rows {
  background-image: none !important;
  cursor: pointer;
  color: var(--color-primary-700, #562c9e);
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
}
td.expand-all-rows:hover,
td.contract-all-rows:hover,
.result-table > thead > tr > th.expand-all-rows:hover,
.result-table > thead > tr > th.contract-all-rows:hover {
  color: var(--color-primary-800, #3d1d7a);
}
td.expand-all-rows::before,
td.contract-all-rows::before,
.result-table > thead > tr > th.expand-all-rows::before,
.result-table > thead > tr > th.contract-all-rows::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 28px;
  height: 28px;
  background-color: var(--color-primary-700, #562c9e);
  -webkit-mask: url("../../icons/plus-circle-1.svg") no-repeat center / 28px 28px;
  mask: url("../../icons/plus-circle-1.svg") no-repeat center / 28px 28px;
  margin-right: 4px;
  pointer-events: none;
}
td.expand-all-rows:hover::before,
td.contract-all-rows:hover::before,
.result-table > thead > tr > th.expand-all-rows:hover::before,
.result-table > thead > tr > th.contract-all-rows:hover::before {
  background-color: var(--color-primary-800, #3d1d7a);
}
td.contract-all-rows::before,
.result-table > thead > tr > th.contract-all-rows::before {
  -webkit-mask-image: url("../../icons/minus-circle-1.svg");
  mask-image: url("../../icons/minus-circle-1.svg");
}
td.expand-all-rows::after,
td.contract-all-rows::after,
.result-table > thead > tr > th.expand-all-rows::after,
.result-table > thead > tr > th.contract-all-rows::after {
  content: "ALL";
  display: inline-block;
  vertical-align: middle;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.04em;
}

/* themes/default/css/style.css — .tabs-content a.newSearchRefLink (and siblings) use black/#666 !important */
.tabs-content a.propertyAddressLink,
.tabs-content a.legalDescriptionLink,
.tabs-content a.newSearchRefLink,
.tabs-content a.additionalPartiesRefLink,
.tabs-content a.marginalRefLink {
  color: var(--color-primary-700, #562c9e) !important;
}

.tabs-content a.propertyAddressLink:hover,
.tabs-content a.propertyAddressLink:focus,
.tabs-content a.legalDescriptionLink:hover,
.tabs-content a.legalDescriptionLink:focus,
.tabs-content a.newSearchRefLink:hover,
.tabs-content a.newSearchRefLink:focus,
.tabs-content a.additionalPartiesRefLink:hover,
.tabs-content a.additionalPartiesRefLink:focus,
.tabs-content a.marginalRefLink:hover,
.tabs-content a.marginalRefLink:focus {
  color: var(--color-primary-800, #3d1d7a) !important;
}

.tabs-content button.ref-link-as-link {
  color: var(--color-primary-700, #562c9e) !important;
  font-weight: 600 !important;
}

.tabs-content button.ref-link-as-link:hover,
.tabs-content button.ref-link-as-link:focus {
  color: var(--color-primary-800, #3d1d7a) !important;
}

/* Same classes on grid (no .tabs-content): anchors + ListControl <button class="ref-link-as-link …"> */
#searchresult a.newSearchRefLink,
#searchresult a.propertyAddressLink,
#searchresult a.legalDescriptionLink,
.result-table a.newSearchRefLink,
.result-table a.propertyAddressLink,
.result-table a.legalDescriptionLink,
#searchresult button.ref-link-as-link.newSearchRefLink,
#searchresult button.ref-link-as-link.propertyAddressLink,
#searchresult button.ref-link-as-link.legalDescriptionLink,
.result-table button.ref-link-as-link.newSearchRefLink,
.result-table button.ref-link-as-link.propertyAddressLink,
.result-table button.ref-link-as-link.legalDescriptionLink {
  color: var(--color-primary-700, #562c9e) !important;
}

#searchresult a.newSearchRefLink:hover,
#searchresult a.newSearchRefLink:focus,
#searchresult a.propertyAddressLink:hover,
#searchresult a.propertyAddressLink:focus,
#searchresult a.legalDescriptionLink:hover,
#searchresult a.legalDescriptionLink:focus,
.result-table a.newSearchRefLink:hover,
.result-table a.newSearchRefLink:focus,
.result-table a.propertyAddressLink:hover,
.result-table a.propertyAddressLink:focus,
.result-table a.legalDescriptionLink:hover,
.result-table a.legalDescriptionLink:focus,
#searchresult button.ref-link-as-link.newSearchRefLink:hover,
#searchresult button.ref-link-as-link.newSearchRefLink:focus,
#searchresult button.ref-link-as-link.propertyAddressLink:hover,
#searchresult button.ref-link-as-link.propertyAddressLink:focus,
#searchresult button.ref-link-as-link.legalDescriptionLink:hover,
#searchresult button.ref-link-as-link.legalDescriptionLink:focus,
.result-table button.ref-link-as-link.newSearchRefLink:hover,
.result-table button.ref-link-as-link.newSearchRefLink:focus,
.result-table button.ref-link-as-link.propertyAddressLink:hover,
.result-table button.ref-link-as-link.propertyAddressLink:focus,
.result-table button.ref-link-as-link.legalDescriptionLink:hover,
.result-table button.ref-link-as-link.legalDescriptionLink:focus {
  color: var(--color-primary-800, #3d1d7a) !important;
}

/* Preview: legacy #documentSummaryArea / #summaryBlock use --color-brand-dark (navy) on these controls */
#documentSummaryArea .propertyAddressLink,
#documentSummaryArea .legalDescriptionLink,
#documentSummaryArea .newSearchRefLink,
#documentSummaryArea .marginalRefLink,
#documentSummaryArea a.propertyAddressLink,
#documentSummaryArea a.legalDescriptionLink,
#documentSummaryArea a.newSearchRefLink,
#documentSummaryArea a.marginalRefLink,
#documentSummaryArea button.ref-link-as-link.propertyAddressLink,
#documentSummaryArea button.ref-link-as-link.legalDescriptionLink,
#documentSummaryArea button.ref-link-as-link.newSearchRefLink,
#documentSummaryArea button.ref-link-as-link.marginalRefLink,
#documentSummaryArea button.ref-link-as-link.additionalPartiesRefLink,
#summaryBlock a.newSearchRefLink,
#summaryBlock a.propertyAddressLink,
#summaryBlock a.legalDescriptionLink,
#summaryBlock a.marginalRefLink,
#summaryBlock a.additionalPartiesRefLink,
#summaryBlock button.ref-link-as-link.newSearchRefLink,
#summaryBlock button.ref-link-as-link.propertyAddressLink,
#summaryBlock button.ref-link-as-link.legalDescriptionLink,
#summaryBlock button.ref-link-as-link.marginalRefLink,
#summaryBlock button.ref-link-as-link.additionalPartiesRefLink,
#preview_summarymarginal_content button.ref-link-as-link,
#preview_summarymarginal_content [role="button"].marginalRefLink,
#preview_summarymarginal_content [role="button"].propertyAddressLink,
#preview_summarymarginal_content [role="button"].legalDescriptionLink,
#preview_summarymarginal_content [role="button"].newSearchRefLink,
#preview_summarymarginal_content [role="button"].additionalPartiesRefLink,
#preview_summarymarginal_content [role="button"].documentRemarksLink,
#summaryBlock ul.newSearchRefLink li {
  color: var(--color-primary-700, #562c9e) !important;
}

#documentSummaryArea .propertyAddressLink:hover,
#documentSummaryArea .propertyAddressLink:focus,
#documentSummaryArea .legalDescriptionLink:hover,
#documentSummaryArea .legalDescriptionLink:focus,
#documentSummaryArea .newSearchRefLink:hover,
#documentSummaryArea .newSearchRefLink:focus,
#documentSummaryArea a.propertyAddressLink:hover,
#documentSummaryArea a.propertyAddressLink:focus,
#documentSummaryArea a.legalDescriptionLink:hover,
#documentSummaryArea a.legalDescriptionLink:focus,
#documentSummaryArea a.newSearchRefLink:hover,
#documentSummaryArea a.newSearchRefLink:focus,
#documentSummaryArea button.ref-link-as-link.propertyAddressLink:hover,
#documentSummaryArea button.ref-link-as-link.propertyAddressLink:focus,
#documentSummaryArea button.ref-link-as-link.legalDescriptionLink:hover,
#documentSummaryArea button.ref-link-as-link.legalDescriptionLink:focus,
#documentSummaryArea button.ref-link-as-link.newSearchRefLink:hover,
#documentSummaryArea button.ref-link-as-link.newSearchRefLink:focus,
#documentSummaryArea button.ref-link-as-link.marginalRefLink:hover,
#documentSummaryArea button.ref-link-as-link.marginalRefLink:focus,
#documentSummaryArea button.ref-link-as-link.additionalPartiesRefLink:hover,
#documentSummaryArea button.ref-link-as-link.additionalPartiesRefLink:focus,
#summaryBlock a.newSearchRefLink:hover,
#summaryBlock a.newSearchRefLink:focus,
#summaryBlock a.propertyAddressLink:hover,
#summaryBlock a.propertyAddressLink:focus,
#summaryBlock a.legalDescriptionLink:hover,
#summaryBlock a.legalDescriptionLink:focus,
#summaryBlock a.marginalRefLink:hover,
#summaryBlock a.marginalRefLink:focus,
#summaryBlock a.additionalPartiesRefLink:hover,
#summaryBlock a.additionalPartiesRefLink:focus,
#summaryBlock button.ref-link-as-link.newSearchRefLink:hover,
#summaryBlock button.ref-link-as-link.newSearchRefLink:focus,
#summaryBlock button.ref-link-as-link.propertyAddressLink:hover,
#summaryBlock button.ref-link-as-link.propertyAddressLink:focus,
#summaryBlock button.ref-link-as-link.legalDescriptionLink:hover,
#summaryBlock button.ref-link-as-link.legalDescriptionLink:focus,
#summaryBlock button.ref-link-as-link.marginalRefLink:hover,
#summaryBlock button.ref-link-as-link.marginalRefLink:focus,
#summaryBlock button.ref-link-as-link.additionalPartiesRefLink:hover,
#summaryBlock button.ref-link-as-link.additionalPartiesRefLink:focus,
#preview_summarymarginal_content button.ref-link-as-link:hover,
#preview_summarymarginal_content button.ref-link-as-link:focus,
#preview_summarymarginal_content button.ref-link-as-link:focus-visible,
#preview_summarymarginal_content [role="button"].marginalRefLink:focus-visible,
#preview_summarymarginal_content [role="button"].propertyAddressLink:focus-visible,
#preview_summarymarginal_content [role="button"].legalDescriptionLink:focus-visible,
#preview_summarymarginal_content [role="button"].newSearchRefLink:focus-visible,
#preview_summarymarginal_content [role="button"].additionalPartiesRefLink:focus-visible,
#preview_summarymarginal_content [role="button"].documentRemarksLink:focus-visible {
  color: var(--color-primary-800, #3d1d7a) !important;
}

#preview_summarymarginal_content button.ref-link-as-link:focus-visible,
#preview_summarymarginal_content [role="button"].marginalRefLink:focus-visible,
#preview_summarymarginal_content [role="button"].propertyAddressLink:focus-visible,
#preview_summarymarginal_content [role="button"].legalDescriptionLink:focus-visible,
#preview_summarymarginal_content [role="button"].newSearchRefLink:focus-visible,
#preview_summarymarginal_content [role="button"].additionalPartiesRefLink:focus-visible,
#preview_summarymarginal_content [role="button"].documentRemarksLink:focus-visible {
  outline: 2px solid var(--color-primary-300, #d5c1f4);
  outline-offset: 2px;
}

/* Department tabs in search form use #dept-tab-collection (no .tab-headers class); document tabs use .tab-headers */
/* Entire tab row / strip background and line under tabs use primary-1000 */
.result-table tbody > tr[data-expanded=true] > td > div:first-of-type {
  border-bottom: 4px solid var(--color-primary-1000, #2d1b69);
}

#dept-tab-collection {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Each department tab – folder-tab shape: rounded top corners + diagonal/notched right edge */
#dept-tab-collection li.slides-list,
#nav #dept-tab-collection li.slides-list {
  position: relative;
  margin-bottom: 0;
  border-radius: 0;
  background: var(--brand-neumo-navy, #0A1128) !important;
  background-image: none !important;
  padding: 0;
  height: 35px;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: bottom;
  box-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.12),
    0 1px 0 rgba(0, 0, 0, 0.15);
}

#dept-tab-collection li:not(.selected):hover,
#nav #dept-tab-collection li:not(.selected):hover {
  background:
    linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)),
    var(--brand-neumo-navy, #0A1128) !important;
}

#dept-tab-collection li a,
#nav #dept-tab-collection li a {
  display: inline-block;
  padding: 6px 10px;
  min-height: 27px;
  height: 100%;
  font-size: 15px;
  font-weight: normal;
  text-decoration: none;
  color: var(--color-neutral-lightest, #fff) !important;
  box-sizing: border-box;
}

#dept-tab-collection li.selected,
#nav #dept-tab-collection li.selected {
  background: var(--color-primary-300, #d5c1f4) !important;
  background-image: none !important;
  z-index: 1;
  box-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.15),
    0 2px 0 rgba(0, 0, 0, 0.1);
}

#dept-tab-collection li.selected a,
#nav #dept-tab-collection li.selected a {
  color: var(--color-primary-1000, #160A30) !important;
  font-weight: bold;
}

/* Small white corner triangle on each department tab */
/* Omit z-index so .kofileInfoBuble (z-index:1) stays above this corner clip */
#dept-tab-collection li.slides-list::after,
#nav #dept-tab-collection li.slides-list::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 10.5px;
  height: 10.5px;
  background-color: var(--color-neutral-lightest, #fff);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  pointer-events: none;
}

/* Document tabs (.tab-headers) – keep existing block style */
.tab-headers li {
  background: var(--color-primary-1000, #2d1b69);
}

.tab-headers li a,
.tab-headers li a div {
  color: var(--color-neutral-lightest, #fff) !important;
}

.tab-headers li a div {
  background: var(--color-primary-1000, #2d1b69);
  background-image: none;
}

.tab-headers li.selected {
  background: var(--color-primary-300, #d5c1f4);
}

/* Same as #dept-tab-collection li.selected: dark text on primary-300 (white on #d5c1f4 fails AA) */
.tab-headers li.selected a,
.tab-headers li.selected a div {
  color: var(--color-primary-1000, #160a30) !important;
}

.tab-headers li.selected a div {
  background: var(--color-primary-300, #d5c1f4);
  background-image: none;
}

/* Slider chrome: page bg in the strip; tab fill stays on #dept-tab-collection li */
.slides-wrapper {
  background: var(--color-neutral-lightest, #fff);
}

.slider-container {
  background: var(--color-neutral-lightest, #fff);
}

#slides-prev-icon {
  background: var(--color-primary-1000, #2d1b69);
  position: relative;
  background-image: none;
  margin-left: 2px;
}

/* Rounded disc + caret (caret-up.svg rotated) — ~20% smaller than 1.75rem / 1.25rem */
#slides-prev-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background-color: var(--color-neutral-lightest, #fff);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  pointer-events: none;
}

#slides-prev-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  width: 1.4rem;
  height: 1.4rem;
  background-color: var(--color-primary-1000, #2d1b69);
  -webkit-mask: url("../../icons/caret-up.svg") no-repeat center;
  mask: url("../../icons/caret-up.svg") no-repeat center;
  -webkit-mask-size: 1rem;
  mask-size: 1rem;
  pointer-events: none;
}

#slides-prev-icon:hover::before {
  background-color: var(--color-primary-300, #d5c1f4) !important;
}

#slides-prev-icon:hover::after {
  background-color: var(--color-primary-1000, #2d1b69) !important;
}

#slides-prev-icon.disabled-slide-nav::before {
  opacity: 0.5;
}

#slides-prev-icon li {
  background: none;
}

#slides-nxt-icon {
  position: relative;
  background: var(--brand-neumo-navy, #0A1128);
  background-image: none;
}

/* Rounded disc + caret (caret-up.svg rotated) — ~20% smaller */
#slides-nxt-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background-color: var(--color-neutral-lightest, #fff);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  pointer-events: none;
}

#slides-nxt-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  width: 1.4rem;
  height: 1.4rem;
  background-color: var(--color-primary-1000, #2d1b69);
  -webkit-mask: url("../../icons/caret-up.svg") no-repeat center;
  mask: url("../../icons/caret-up.svg") no-repeat center;
  -webkit-mask-size: 1rem;
  mask-size: 1rem;
  pointer-events: none;
}

#slides-nxt-icon:hover::before {
  background-color: var(--color-primary-300, #d5c1f4) !important;
}

#slides-nxt-icon:hover::after {
  background-color: var(--color-primary-1000, #2d1b69) !important;
}

#slides-nxt-icon li {
  background: none;
}

/* ========== 16b. .loader (AjaxManager / preview thumbnails) – purple tokens, replaces orange GIF from inline styles ========== */
@keyframes neumo-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

.loader {
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-color: var(--color-neutral-lightest, #fff) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box;
  gap: 1.125rem;
  /* Smooth card corners (centered modal + inline overrides) */
  border-radius: var(--border-radius-lg, 12px) !important;
  overflow: hidden;
}

/* Top-fixed strip loader (Ajax to body): keep flush to top, round bottom only */
body > div.loader {
  border-radius: 0 0 var(--border-radius-lg, 12px) var(--border-radius-lg, 12px) !important;
}

/* Spinner first, then “Powered by” + logo (flex item order) */
.loader::after {
  content: "";
  display: block;
  order: 1;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  box-sizing: border-box;
  border: 4px solid var(--color-primary-200, #e8dff9);
  border-top-color: var(--color-primary-600, #6b4cb8);
  border-radius: 50%;
  animation: neumo-loader-spin 0.75s linear infinite;
}

.loader__branding {
  order: 2;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.loader__powered-by {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-neutral-600, #6b7280);
  line-height: 1;
  flex-shrink: 0;
}

.loader__neumo-logo {
  display: block;
  width: 62px;
  height: auto;
  max-height: 12px;
  flex-shrink: 0;
}

/* Allow room for spinner + branding when inline height is tight */
.loader:has(.loader__branding) {
  min-height: 6.25rem !important;
  height: auto !important;
}

/* Preview: static wrapper (relative breaks .sideview); z-index on modal / .sideview */
#preview-dialog-container {
  position: static;
}

.no-scrollable .modal-container {
  z-index: 10001;
}

#preview-dialog.sideview {
  z-index: 10001;
}

/* ========== 16c. Preview #preview-dialog-container .loadIndicator – same ring as .loader (replaces orange GIF in preview-dialog.css) ========== */
#preview-dialog-container .loadIndicator {
  position: relative;
}

#preview-dialog-container .loadIndicator::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background-color: rgba(255, 255, 255, 0.75);
  pointer-events: none;
}

/* Spinner via ::after for bubbles / #single-image-container only; #preview-dialog uses markup (spinner + Powered by + logo, same as .loader) */
#preview-dialog-container .loadIndicator:not(#preview-dialog)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.75rem;
  height: 2.75rem;
  margin: -1.375rem 0 0 -1.375rem;
  z-index: 21;
  box-sizing: border-box;
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border: 4px solid var(--color-primary-200, #e8dff9);
  border-top-color: var(--color-primary-600, #6b4cb8);
  border-radius: 50%;
  animation: neumo-loader-spin 0.75s linear infinite;
  pointer-events: none;
}

#preview-dialog.loadIndicator::after {
  content: none !important;
  display: none !important;
}

#preview-dialog.loadIndicator .preview-dialog-loader-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 21;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: 1.125rem;
  pointer-events: none;
}

#preview-dialog.loadIndicator .preview-dialog-loader-spinner {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  box-sizing: border-box;
  border: 4px solid var(--color-primary-200, #e8dff9);
  border-top-color: var(--color-primary-600, #6b4cb8);
  border-radius: 50%;
  animation: neumo-loader-spin 0.75s linear infinite;
}

/* ========== Preview dialog only: roll back to old background-image icons ========== */
/* Footer actions: DOM order = tab order (primary, then Cancel); flex replaces float:right reversal */
#preview-dialog-container #preview-footer-buttons ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.625rem;
  list-style: none;
  margin: 0;
  padding: 0;
  float: none;
}

#preview-dialog-container #preview-footer-buttons ul li {
  float: none;
  padding-left: 0;
}

/* Preview footer buttons: shared typography + Add to Cart (primary-600) / Cancel (neutral-600) */
#preview-dialog-container #preview-footer-buttons .btn,
#preview-dialog-container #preview-footer-buttons input[type="button"] {
  color: var(--color-neutral-lightest, #FFF);
  font-family: var(--font-family---font-families-default, "Source Sans 3");
  font-size: var(--font-size---font-size-sm, 15px);
  font-style: normal;
  font-weight: var(--font-weight---font-weights-bold, 720);
  background-image: none;
}

#preview-dialog-container #preview-footer-buttons .btn.titleBtnClr,
#preview-dialog-container #preview-footer-buttons input.titleBtnClr {
  background: var(--color-primary-600, #6640C2);
  border-color: var(--color-primary-600, #6640C2);
}
#preview-dialog-container #preview-footer-buttons .btn.titleBtnClr:hover,
#preview-dialog-container #preview-footer-buttons input.titleBtnClr:hover,
#preview-dialog-container #preview-footer-buttons .btn.titleBtnClr:focus,
#preview-dialog-container #preview-footer-buttons input.titleBtnClr:focus {
  background: var(--color-primary-700, #562c9e);
  border-color: var(--color-primary-700, #562c9e);
}

#preview-dialog-container #preview-footer-buttons #cancel,
#preview-dialog-container #preview-footer-buttons .btn-inverse {
  background: var(--color-neutral-600, #6B7280);
  border-color: var(--color-neutral-600, #6B7280);
}
#preview-dialog-container #preview-footer-buttons .btn-inverse:hover,
#preview-dialog-container #preview-footer-buttons .btn-inverse:focus {
  background: var(--color-neutral-700, #4f5562);
  border-color: var(--color-neutral-700, #4f5562);
}

/* Orange → purple: active tab underline and selected toolbar button (new token) */
#preview-dialog-container #previewHeaderTabs li.active {
  border-bottom-color: var(--color-primary-600, #7c4ccd);
}

/* Prev/Next Doc: neutral-800 beats global `a { color: primary-700 }` + explicit span (Knockout/Angular text node) */
#preview-dialog-container #previewHeaderNav.tabsRight {
  color: var(--color-neutral-800, #343944);
}

#preview-dialog-container #previewHeaderNav a,
#preview-dialog-container #previewHeaderNav a span {
  color: var(--color-neutral-800, #343944) !important;
}

#preview-dialog-container #previewHeaderNav a:hover:not(.previewNavDisabled),
#preview-dialog-container #previewHeaderNav a:focus:not(.previewNavDisabled) {
  color: var(--color-primary-700, #562c9e) !important;
}

/* Disabled must stay above 3:1 on light chrome; neutral-400 on #f3f4f6 fails scans */
#preview-dialog-container #previewHeaderNav a.previewNavDisabled,
#preview-dialog-container #previewHeaderNav a.previewNavDisabled span {
  color: var(--color-neutral-700, #4f5562) !important;
  cursor: default;
}

#preview-dialog-container #ctrl-buttons .btnselected {
  box-shadow: inset 0 0 0 2px var(--color-primary-600, #7c4ccd);
}

#preview-dialog-container .separator {
  background: transparent url("../themes/default/images/preview-separator.png") no-repeat center !important;
  -webkit-mask: none !important;
  mask: none !important;
}

/* Per-icon PNGs; row offsets for selected/disabled only (hover = row 1 + purple ring in block below) */
#preview-dialog-container a.movefirst,
#preview-dialog-container .movefirst {
  background: transparent url("../themes/default/images/preview-first.png") no-repeat 0 0 !important;
}

#preview-dialog-container a.previous,
#preview-dialog-container .previous {
  background: transparent url("../themes/default/images/preview-previous.png") no-repeat 0 0 !important;
}

#preview-dialog-container a.next,
#preview-dialog-container .next {
  background: transparent url("../themes/default/images/preview-next.png") no-repeat 0 0 !important;
}

#preview-dialog-container a.movelast,
#preview-dialog-container .movelast {
  background: transparent url("../themes/default/images/preview-last.png") no-repeat 0 0 !important;
}

/* Highlighted nav: each has its own image (first/previous/next/last) */
#preview-dialog-container .first-highlighted {
  background: transparent url("../themes/default/images/preview-first-highlighted.png") no-repeat 0 0 !important;
}

#preview-dialog-container .previous-highlighted {
  background: transparent url("../themes/default/images/preview-previous-highlighted.png") no-repeat 0 0 !important;
}

#preview-dialog-container .next-highlighted {
  background: transparent url("../themes/default/images/preview-next-highlighted.png") no-repeat 0 0 !important;
}

#preview-dialog-container .last-highlighted {
  background: transparent url("../themes/default/images/preview-last-highlighted.png") no-repeat 0 0 !important;
}

#preview-dialog-container a.rotateleft,
#preview-dialog-container .rotateleft {
  background: transparent url("../themes/default/images/preview-rotate-left.png") no-repeat 0 0 !important;
}

#preview-dialog-container a.rotateright,
#preview-dialog-container .rotateright {
  background: transparent url("../themes/default/images/preview-rotate-right.png") no-repeat 0 0 !important;
}

#preview-dialog-container a.zoomin,
#preview-dialog-container .zoomin {
  background: transparent url("../themes/default/images/preview-zoom-in.png") no-repeat 0 0 !important;
}

#preview-dialog-container a.zoomout,
#preview-dialog-container .zoomout {
  background: transparent url("../themes/default/images/preview-zoom-out.png") no-repeat 0 0 !important;
}

#preview-dialog-container a.fitwidth,
#preview-dialog-container .fitwidth {
  background: transparent url("../themes/default/images/preview-fit-width.png") no-repeat 0 0 !important;
}

#preview-dialog-container a.fitheight,
#preview-dialog-container .fitheight {
  background: transparent url("../themes/default/images/preview-fit-height.png") no-repeat 0 0 !important;
}

#preview-dialog-container a.fit,
#preview-dialog-container .fit {
  background: transparent url("../themes/default/images/preview-fit.png") no-repeat 0 0 !important;
}

#preview-dialog-container a.imagemoveleft,
#preview-dialog-container .imagemoveleft,
#preview-dialog-container a.imagemoveright,
#preview-dialog-container .imagemoveright,
#preview-dialog-container a.imagemovetop,
#preview-dialog-container .imagemovebottom {
  background: transparent url("../themes/default/images/preview-rotate-right.png") no-repeat 0 0 !important;
}

#preview-dialog-container a.singledoc,
#preview-dialog-container .singledoc {
  background: transparent url("../themes/default/images/preview-singledoc.png") no-repeat 0 0 !important;
}

#preview-dialog-container a.multidoc,
#preview-dialog-container .multidoc {
  background: transparent url("../themes/default/images/preview-multidoc.png") no-repeat 0 0 !important;
}

/* Sprite states: selected / disabled use rows 2–3; hover stays row 1 — row 2 (0 -39px) embeds orange borders in PNG */
#preview-dialog-container #ctrl-buttons .previewbt:not(.disabled):hover:not(.btnselected) {
  background-position: 0 0 !important;
  box-shadow: 0 0 0 2px var(--color-primary-600, #7c4ccd);
}

#preview-dialog-container .btnselected {
  background-position: 0 -78px !important;
}

#preview-dialog-container #ctrl-buttons .disabled,
#preview-dialog-container .previewbt.disabled {
  background-position: 0 -117px !important;
}

/* Prev Doc / Next Doc arrows (if inside preview dialog) */
#preview-dialog-container .sideview-icon {
  background: url("../themes/default/images/lightboxview.png") no-repeat 1px 2px !important;
}

#preview-dialog-container .lightbox-icon {
  background: url("../themes/default/images/sideview.png") no-repeat 0px 0px !important;
}

/* Keep existing icon styling when view-toggle is upgraded from div to button */
#preview-dialog > div.titleBtnClr.radiusTop.poptitletxt > button.dialog-title-right {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: content-box;
  display: block;
  border: none;
  background-color: transparent;
  padding: 0;
  margin: 0;
  line-height: 0;
}

#preview-dialog > div.titleBtnClr.radiusTop.poptitletxt > button.dialog-title-right:focus,
#preview-dialog > div.titleBtnClr.radiusTop.poptitletxt > button.dialog-title-right:focus-visible {
  outline: 2px solid var(--color-neutral-lightest, #fff);
  outline-offset: 2px;
}

/* Preview dialog: keep old icon look on hover/selected (no mask, no brand fill) */
#preview-dialog-container .previewbt:not(.disabled):hover,
#preview-dialog-container .btnselected {
  -webkit-mask: none !important;
  mask: none !important;
  background-color: transparent !important;
}
#preview-dialog-container .disabled {
  -webkit-mask: none !important;
  mask: none !important;
  background-color: transparent !important;
  opacity: 0.5;
}

.orange-bold-text {
  color: var(--color-primary-700, #562c9e);
  font-weight: var(--font-weights-bold, 700);
}

/* ========== Legacy #FF8500 → primary-700 (tenant bundles, inline styles, deployed theme copies) ========== */
/* No literal #FF8500 in default/48999 bundles; attribute selectors target inline style="" only. */
[style*="color:"][style*="#FF8500"],
[style*="color:"][style*="#ff8500"] {
  color: var(--color-primary-700, #562c9e) !important;
}

[style*="fill"][style*="#FF8500"],
[style*="fill"][style*="#ff8500"] {
  fill: var(--color-primary-700, #562c9e) !important;
}

[style*="stroke"][style*="#FF8500"],
[style*="stroke"][style*="#ff8500"] {
  stroke: var(--color-primary-700, #562c9e) !important;
}

[style*="background"][style*="#FF8500"],
[style*="background"][style*="#ff8500"] {
  background-color: var(--color-primary-700, #562c9e) !important;
  background-image: none !important;
}

[style*="border"][style*="#FF8500"],
[style*="border"][style*="#ff8500"] {
  border-color: var(--color-primary-700, #562c9e) !important;
}

[style*="outline"][style*="#FF8500"],
[style*="outline"][style*="#ff8500"] {
  outline-color: var(--color-primary-700, #562c9e) !important;
}

/* ========== Standalone + embedded error UI (#error-block; load order: tokens → legacy bundle → this file) ========== */

.error-wrapper {
  padding-top: 5%;
  height: calc(90% - 27px);
}

/* Standalone Views/Error/*.cshtml: full-height column so #footer sits at bottom like _Layout; scroll when content exceeds viewport. */
html.error-page {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}

html.error-page body {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 0;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  overflow-x: hidden;
}

html.error-page .error-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  padding-top: 3vh;
  box-sizing: border-box;
}

html.error-page #footer {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}

.error-wrapper #error-block.error-page-block,
#error-block.error-page-block {
  width: 90%;
  max-width: 560px;
  margin: 5% auto auto;
  padding: 2.75rem 2.25rem 3rem;
  box-sizing: border-box;
  text-align: center;
  background: #fff;
  border: 1px solid #d8d8d8;
  border-top: 5px solid var(--color-primary-600, #7c4ccd);
  border-radius: 0;
}

.error-page-text {
  color: #5c5f63;
  font-family: var(--font-family---font-families-default, "Source Sans 3"), "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

#error-block h2 {
  color: #121212;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 1rem;
}

#error-block b {
  color: #121212;
  font-weight: 600;
}

#error-block .errorIcon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 auto 1.75rem;
}

#error-block .errorIcon-badge {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--color-primary-600, #7c4ccd);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(18, 18, 18, 0.08);
}

#error-block .errorIcon-badge img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  vertical-align: middle;
  filter: brightness(0) invert(1);
}

#error-block .error-code-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  box-sizing: border-box;
  font-size: 1.75rem;
  font-weight: var(--font-weights-bold, 700);
  letter-spacing: 0.04em;
  line-height: 1;
  color: #fff;
  background: var(--color-primary-600, #7c4ccd);
  box-shadow: 0 2px 10px rgba(18, 18, 18, 0.08);
}

#error-block a.error-page-link:link,
#error-block a.error-page-link:visited,
#error-block a.error-page-link:hover,
#error-block a.error-page-link:focus,
#error-block a.error-page-link:active {
  color: var(--color-primary-700, #562c9e);
  text-decoration-line: none;
}

#error-block a.error-page-link:focus {
  outline: 2px solid var(--color-primary-300, #d5c1f4);
  outline-offset: 2px;
}

#previewHeaderNav a.previewNavDisabled {
    color: var(--color-primary-700, #562c9e);
    opacity: 0.5;
}

#reportproblem-default-text {
    color: var(--color-primary-700, #562c9e);
    opacity: 0.5;
}

/* Report a Problem — equal-size Cancel / Submit (Dialog.js adds .dialog-buttons; preview uses subDialog <a>) */
#kofile-reportaproblemdialog .dialog-buttons ol {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

#kofile-reportaproblemdialog .dialog-buttons ol > li.fright {
  float: none;
  margin-left: 0;
}

#kofile-reportaproblemdialog #reportaproblemSubmitBtn,
#kofile-reportaproblemdialog #reportaproblemCancelBtn {
  min-width: 7.5rem;
  width: 7.5rem;
  max-width: 100%;
  box-sizing: border-box;
  height: 40px;
  min-height: 40px;
  line-height: 1.2;
}

#reportaproblemdialog.kofileSubDialog .subDialogFooter {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

#reportaproblemdialog.kofileSubDialog .subDialogFooter > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 7.5rem;
  width: 7.5rem;
  max-width: 100%;
  box-sizing: border-box;
  text-align: center;
  height: 40px;
  min-height: 40px;
  line-height: 1.2;
}

/* Help header menu: .menu-help-tap on #ulHelp; wins over tenant header ul li ul { display:none } so submenu links stay :visible for focus */
header ul li#help > ul#ulHelp.menu-help-tap {
  display: block !important;
}

header ul li#help ul#ulHelp.menu-help-tap li a:focus,
header ul li#help ul#ulHelp.menu-help-tap li a:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
  background-color: transparent;
}