/* =========================================================
   Faculti Property Services - external-facing MERCStream pages (AB#285)
   Agent portal, agent reports, password pages, error page, drive-by.
   Loaded after the MercAgents theme stylesheet by AgentInterface.master
   (every page on it except Login, which has its own login.css) and by
   the stand-alone drive-by pages.
   Tokens are from the Fai Design System (colors_and_type.css).
   ========================================================= */

@font-face { font-family: "Season Sans";  src: url("fonts/SeasonSans-Regular.woff2") format("woff2");  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Season Sans";  src: url("fonts/SeasonSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Season Serif"; src: url("fonts/SeasonSerif-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --brand-primary:        #411C76;
  --brand-primary-hover:  #5A3396;
  --brand-primary-subtle: rgba(65, 28, 118, 0.08);
  --brand-light:          #E3D9FA;
  --brand-gradient:       linear-gradient(135deg, #432275 0%, #24163C 100%);

  --btn-primary:          #FF7800;
  --btn-primary-hover:    #E86800;

  --color-bg:             #F0F0F0;
  --color-surface:        #FFFFFF;
  --color-border:         #E3D9FA;
  --color-border-subtle:  #F0F0F0;

  --fg-1: #000000;
  --fg-2: #411C76;
  --fg-3: #6B5F7E;

  --color-success: #16A34A;
  --color-warn:    #D97706;
  --color-danger:  #DC2626;

  --font-display: "Season Serif", "Times New Roman", Times, Georgia, serif;
  --font-body:    "Season Sans", Arial, Helvetica, sans-serif;

  --shadow-sm: 0 1px 2px  rgba(65, 28, 118, 0.06);
  --shadow-md: 0 2px 8px  rgba(65, 28, 118, 0.08);
  --shadow-xl: 0 8px 40px rgba(65, 28, 118, 0.12);
  --focus-ring: 0 0 0 3px rgba(67, 34, 118, 0.08);
}

/* ---------- page: white card on the brand gradient ---------- */
html:root {
  background: var(--brand-gradient) !important;   /* not "fixed": that leaves pages taller than one screen unpainted below the fold */   /* replaces the grey page + drop-shadow column image */
  min-height: 100%;
}
:root body {
  background: transparent !important;
  margin: 0 !important;
  padding: 40px 16px 32px !important;
  box-sizing: border-box;
  font-family: var(--font-body) !important;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-1);
}
:root .main-wrapper {
  width: 780px !important;
  max-width: 100%;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 36px 0 40px !important;
  box-sizing: border-box;
  background: var(--color-surface) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: var(--shadow-xl);
  font-family: var(--font-body) !important;
}
:root .main-wrapper > div[style*="height:60px"] { display: none; }   /* legacy spacer under the form */
:root .main-wrapper td,
:root .main-wrapper th,
:root .main-wrapper input,
:root .main-wrapper select,
:root .main-wrapper textarea,
:root .main-wrapper button { font-family: var(--font-body) !important; }

/* ---------- brand block: Faculti lockup + product name ----------
   #logo (chevron) only shows on some pages and #logo2 (MERC STREAM wordmark) on all of them,
   so the lockup is drawn once, on #logo2, and the chevron block is dropped. */
:root #logo { display: none !important; }
:root #logo2 {
  width: auto !important;
  height: auto !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  float: none !important;
  text-align: center;
}
:root #logo2 img { display: none !important; }
:root #logo2::before {
  content: "";
  display: block;
  height: 64px;
  background: url("images/faculti-ps-logo-indigo.png") center / contain no-repeat;
}
:root #logo2::after {
  content: "MERCStream";
  display: block;
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.2;
  color: var(--brand-primary);
}

/* ---------- content ---------- */
:root .main-wrapper { font-size: 14px; color: var(--fg-1); }
:root .main-wrapper p,
:root .main-wrapper li,
:root .main-wrapper td,
:root .main-wrapper label,
:root .main-wrapper span { font-size: 14px; line-height: 1.5; }

:root .main-wrapper h1,
:root h1#ctl00_pageTitle {
  margin: 0 0 16px;
  font-family: var(--font-display) !important;
  font-size: 32px !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.2;
  color: var(--brand-primary) !important;
}
:root .main-wrapper h2 {
  font-family: var(--font-display) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1.2;
  color: var(--brand-primary) !important;
}
:root .main-wrapper h3,
:root .main-wrapper h4 {
  margin: 20px 0 8px;
  font-family: var(--font-body) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.2;
  color: var(--fg-1) !important;
}
:root .main-wrapper a { color: var(--brand-primary); text-underline-offset: 2px; }
:root .main-wrapper a:hover { color: var(--brand-primary-hover); }
:root .main-wrapper b,
:root .main-wrapper strong { font-weight: 600; }

/* panels */
:root .panel {
  border-radius: 0 !important;
  border: 1px solid var(--color-border) !important;
  background-image: none !important;
  box-shadow: none;
  padding: 24px !important;
  box-sizing: border-box;
}
:root .panel.low-focus,
:root .panel.wizard { background-color: var(--color-bg) !important; border-color: var(--color-border-subtle) !important; }
:root .panel.high-focus { background-color: var(--brand-light) !important; border-color: var(--brand-light) !important; color: var(--fg-2) !important; }
:root .panel.red,
:root #ctl00_errorDisplay { background-color: #FFFFFF !important; border: 1px solid var(--color-danger) !important; border-left-width: 4px !important; color: var(--fg-1) !important; }
:root .panel.red h1, :root .panel.red h2, :root .panel.red h3 { color: var(--color-danger) !important; }

/* form controls */
:root .main-wrapper input[type="text"],
:root .main-wrapper input[type="password"],
:root .main-wrapper input[type="email"],
:root .main-wrapper input[type="number"],
:root .main-wrapper select,
:root .main-wrapper textarea {
  padding: 7px 10px;
  box-sizing: border-box;
  font-size: 14px;
  color: var(--fg-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
:root .main-wrapper input[type="text"]:focus,
:root .main-wrapper input[type="password"]:focus,
:root .main-wrapper select:focus,
:root .main-wrapper textarea:focus { border-color: var(--brand-primary) !important; box-shadow: var(--shadow-md), var(--focus-ring); }
:root .main-wrapper input[type="checkbox"],
:root .main-wrapper input[type="radio"] { accent-color: var(--brand-primary); }

/* buttons: secondary by default; the step-forward / submit action is the one orange CTA */
:root .main-wrapper input[type="submit"],
:root .main-wrapper input[type="button"],
:root .main-wrapper button {
  width: auto !important;
  min-width: 88px;
  height: auto !important;
  padding: 9px 18px !important;
  margin-left: 8px;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1.2 !important;
  color: var(--brand-primary);
  background: var(--color-surface) !important;
  background-image: none !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
:root .main-wrapper input[type="submit"]:hover,
:root .main-wrapper input[type="button"]:hover,
:root .main-wrapper button:hover { background: var(--color-bg) !important; }
:root .main-wrapper input.nextButton,
:root .main-wrapper input[type="submit"][value="Submit"],
:root .main-wrapper input[type="submit"][value="Save"],
:root .main-wrapper input[type="submit"][value="Finish"] {
  color: #FFFFFF !important;
  background: var(--btn-primary) !important;
  border-color: var(--btn-primary) !important;
}
:root .main-wrapper input.nextButton:hover,
:root .main-wrapper input[type="submit"][value="Submit"]:hover,
:root .main-wrapper input[type="submit"][value="Save"]:hover,
:root .main-wrapper input[type="submit"][value="Finish"]:hover { background: var(--btn-primary-hover) !important; border-color: var(--btn-primary-hover) !important; }
:root .main-wrapper input[disabled],
:root .main-wrapper input.aspNetDisabled { color: var(--fg-3) !important; background: var(--color-bg) !important; border-color: var(--color-border-subtle) !important; cursor: default; opacity: 0.7; }

/* tables / grids */
:root .main-wrapper table.grid th,
:root .main-wrapper .RadGrid .rgHeader {
  background: var(--color-surface) !important; background-image: none !important;
  color: var(--fg-3) !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.05em;
  border: 0 !important; border-bottom: 1px solid var(--color-border) !important;
}
:root .main-wrapper .RadGrid { border: 1px solid var(--color-border) !important; border-radius: 0 !important; }
:root .main-wrapper .RadGrid .rgRow td,
:root .main-wrapper .RadGrid .rgAltRow td { border-color: var(--color-border-subtle) !important; background-image: none !important; }
:root .main-wrapper .RadGrid .rgAltRow td { background-color: var(--color-surface) !important; }

/* ---------- footer: quiet text on the gradient, instead of the teal bar image ---------- */
:root .form-footer {
  position: static !important;
  width: auto !important;
  height: auto !important;
  left: auto !important;
  margin: 24px auto 0 !important;
  padding: 0 !important;
  background: none !important;
  text-align: center;
}
:root .form-footer p,
:root .form-footer #lhs {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72) !important;
  text-align: center !important;
}
:root .contactdetails:empty,
:root .contactdetails:has(.wrapper:empty) { display: none; }

@media print {
  html:root { background: #FFFFFF !important; }
  :root body { padding: 0 !important; }
  :root .main-wrapper { box-shadow: none; width: auto !important; }
  :root .form-footer p, :root .form-footer #lhs { color: var(--fg-3) !important; }
}

/* stand-alone drive-by pages: content sits straight in the form, and panels use a legacy blue gradient */
:root .main-wrapper form { width: 600px; max-width: calc(100% - 48px); margin-left: auto !important; margin-right: auto !important; }
:root .panel.feedback,
:root .panel.gradient-sky-blue { background: var(--color-bg) !important; background-image: none !important; border-color: var(--color-border-subtle) !important; }
:root .panel + .panel { margin-top: 12px; }
:root .panel label { font-weight: 600; color: var(--fg-2); font-size: 14px !important; }
:root .panel.address label { display: block; margin-bottom: 2px; font-size: 11px !important; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-3); }
:root .main-wrapper textarea { width: 100%; max-width: 100%; }

/* ---------- wizard forms (table.field_table + Telerik RadInput / RadPicker) ----------
   Telerik sizes its inputs with an inline 8pt font and a fixed ~20px box; give rows and fields room. */
:root .main-wrapper table.field_table { width: 100% !important; border-collapse: separate; border-spacing: 0 8px; }
:root .main-wrapper table.field_table td { padding: 0 8px 0 0 !important; vertical-align: middle; height: auto !important; }
:root .main-wrapper table.field_table td:first-child { width: 42%; }
:root .main-wrapper table.field_table .label { font-size: 14px !important; color: var(--fg-1); }
:root .main-wrapper table.field_table .label[style*="bold"] { font-weight: 600 !important; color: var(--fg-2); }
/* weekly marketing report group headings ("Publication 1"): the page pulls them 25px left of the form */
:root .main-wrapper table.field_table .LabelField { left: 0 !important; font-weight: 600; color: var(--brand-primary); }
:root .main-wrapper table.field_table td.LabelTD:has(> .LabelField) { padding-top: 14px !important; }

:root .main-wrapper .RadInput,
:root .main-wrapper .RadPicker { height: auto !important; vertical-align: middle; }
:root .main-wrapper .RadInput { width: 240px !important; max-width: 100%; }
:root .main-wrapper .RadPicker { width: 240px !important; max-width: 100%; }
:root .main-wrapper .RadInput input.riTextBox,
:root .main-wrapper .RadPicker input.riTextBox {
  height: 34px !important;
  width: 100% !important;
  padding: 0 10px !important;
  box-sizing: border-box;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  line-height: 32px;
  color: var(--fg-1) !important;
  background: var(--color-surface) !important;
  background-image: none !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
}
:root .main-wrapper .RadInput input.riFocused,
:root .main-wrapper .RadInput input.riTextBox:focus,
:root .main-wrapper .RadPicker input.riTextBox:focus { border-color: var(--brand-primary) !important; box-shadow: var(--shadow-md), var(--focus-ring); }
:root .main-wrapper .RadInput input.riError { border-color: var(--color-danger) !important; background-image: none !important; }
:root .main-wrapper .RadPicker .rcTable { width: 100% !important; }
:root .main-wrapper .RadPicker .rcTable td { padding: 0 !important; }
:root .main-wrapper .RadPicker .rcCalPopup,
:root .main-wrapper .RadPicker .rcTimePopup { margin-left: 6px; }
:root .main-wrapper table.field_table select { height: 34px; width: 240px; max-width: 100%; padding: 0 8px; }
:root .main-wrapper table.field_table textarea { width: 100%; min-height: 90px; }

/* validation + required markers */
:root .main-wrapper span[style*="color:Red" i],
:root .main-wrapper .validator,
:root .main-wrapper .error { color: var(--color-danger) !important; font-size: 13px; }

/* required rows carry a hidden validator under the field, so align to the top and give labels the field's line box */
:root .main-wrapper table.field_table { width: calc(100% - 4px) !important; margin: 0; }
:root .main-wrapper table.field_table td { vertical-align: top !important; }
:root .main-wrapper table.field_table td:first-child .label { display: inline-block; line-height: 34px; }
:root .main-wrapper table.field_table span[style*="visibility:hidden" i] { display: none; }

/* ---------- file upload block (wizard step 3, drive-by upload, invoice uploads) ---------- */
:root .uploaderframe {
  width: auto !important;
  margin: 12px 0 0 !important;
  padding: 20px !important;
  box-sizing: border-box;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
}
:root .uploaderframe > div { width: auto !important; }
:root .uploaderframe .UploadSuccess {
  margin: 12px 0 !important; padding: 10px 14px !important; border-radius: 0 !important;
  background: #F0FDF4 !important; border: 1px solid var(--color-success) !important; border-left-width: 4px !important;
}
:root .uploaderframe .UploadSuccess span { color: #166534 !important; }
:root .main-wrapper div[id$="PanelFileUpload"] { margin-left: 0 !important; }   /* inline 15px indent pushes the block out of line with the panel above */
:root .dropzone1 {
  width: auto !important;
  box-sizing: border-box;
  margin: 0 0 16px !important;
  background: var(--brand-primary-subtle) !important;
  border: 1px dashed var(--brand-primary) !important;
  border-radius: 0 !important;
  transition: background-color 150ms ease;
}
:root .dropzone1:hover,
:root .dropzone1.ruDropZoneHover { background: var(--brand-light) !important; }
:root .dropzonespan {
  width: auto !important;
  font-family: var(--font-display) !important;
  font-size: 24px !important;
  color: var(--brand-primary) !important;
  text-transform: none;
}
:root .ChooseFiles { width: auto !important; font-weight: 600; color: var(--fg-2); }
:root .ChooseFiles label,
:root .ChooseFiles span { font-weight: 400; color: var(--fg-1); }
:root .DivFileUploader { float: none !important; width: auto !important; margin: 0 0 10px !important; }
:root .RadUpload,
:root .RadAsyncUpload { width: 100% !important; max-width: 100%; font-family: var(--font-body) !important; font-size: 14px !important; }
:root .RadUpload .ruInputs { width: 100% !important; margin: 0 !important; padding: 0 !important; }
:root .RadUpload .ruInputs li { width: 100% !important; margin: 0 0 6px !important; font-size: 14px !important; }
:root .RadUpload .ruFileWrap { display: flex !important; align-items: center; gap: 8px; width: 100% !important; height: auto !important; }
:root .RadUpload .ruFakeInput {
  flex: 1 1 auto;
  width: auto !important;
  height: 34px !important;
  padding: 0 10px !important;
  box-sizing: border-box;
  background: var(--color-surface) !important;
  background-image: none !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
}
:root .RadUpload .ruButton {
  flex: 0 0 auto;
  position: static !important;
  min-width: 88px;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  background: var(--color-surface) !important;
  background-image: none !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  color: var(--brand-primary) !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 600;
  cursor: pointer;
}
:root .RadUpload .ruButton:hover { background: var(--color-bg) !important; }
:root .RadUpload .ruUploadProgress,
:root .RadUpload .ruFileProgress { background-image: none !important; background-color: var(--brand-primary) !important; }
:root .RadUpload .ruUploadSuccess { color: var(--color-success) !important; }
:root .RadUpload .ruUploadFailure { color: var(--color-danger) !important; }
:root .RadUpload .ruRemove { color: var(--brand-primary) !important; background-image: none !important; text-indent: 0 !important; width: auto !important; }

/* attachment list grid on the upload step uses the "Telerik" skin */
:root .main-wrapper .RadGrid_Telerik { border: 1px solid var(--color-border) !important; margin-top: 12px; }
:root .main-wrapper .RadGrid_Telerik .rgHeader {
  background: var(--color-surface) !important; background-image: none !important;
  color: var(--fg-3) !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.05em;
  border: 0 !important; border-bottom: 1px solid var(--color-border) !important; padding: 8px !important;
}
:root .main-wrapper .RadGrid_Telerik td { border-color: var(--color-border-subtle) !important; background-image: none !important; padding: 8px !important; font-size: 14px; }
:root .main-wrapper .RadGrid_Telerik .rgAltRow td { background-color: var(--color-surface) !important; }
:root .main-wrapper .RadGrid_Telerik .rgNoRecords td { color: var(--fg-3); }

/* the legacy theme pins line-height to 14px, which makes stacked lines touch at the new 14px text size */
:root .main-wrapper .panel,
:root .main-wrapper .panel div { line-height: 1.5; }

/* wizard "jump back to a step" links under the confirmation / completed steps */
:root [id$="_pnlOptionsMenu"] > div { padding: 5px 0; }
:root [id$="_pnlOptionsMenu"] > div + div { border-top: 1px solid var(--color-border); }
:root [id$="_pnlOptionsMenu"] a { font-weight: 600; text-decoration: none; }
:root [id$="_pnlOptionsMenu"] a:hover { text-decoration: underline; }

/* =========================================================
   INVOICE UPLOADS, DRUG / TEST REPORTS, DESKTOP APPRAISAL
   Stand-alone Telerik RadWizard pages built on app_themes/External.css
   (.external-container > .wizardHeader + .RadWizard + .wizardFooter).
   ========================================================= */
:root .external-container {
  width: 780px !important;
  max-width: 100%;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box;
  background: var(--color-surface) !important;
  border: 0 !important;
  box-shadow: var(--shadow-xl);
  font-family: var(--font-body) !important;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-1);
}
:root body > form { margin: 0; }
:root .external-container,
:root .external-container td,
:root .external-container th,
:root .external-container input,
:root .external-container select,
:root .external-container textarea,
:root .external-container button,
:root .external-container .RadWizard,
:root .external-container .RadWizard * { font-family: var(--font-body) !important; }

/* header: dark photo + white chevron -> Faculti lockup + product name */
:root .wizardHeader {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 36px 0 20px !important;
  background: var(--color-surface) !important;
  background-image: none !important;
  border: 0 !important;
  text-align: center;
}
:root .wizardHeader img {
  content: url("images/faculti-ps-logo-indigo.png");
  height: 64px !important;
  width: auto !important;
  margin: 0 !important;
}
:root .wizardHeader::after {
  content: "MERCStream";
  display: block;
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.2;
  color: var(--brand-primary);
}

/* wizard frame */
:root .external-container .RadWizard {
  width: auto !important;
  margin: 0 !important;
  padding: 0 40px 28px !important;
  box-sizing: border-box;
  background: var(--color-surface) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--fg-1) !important;
  font-size: 14px !important;
}

/* step strip: flat segments instead of the sprite chevrons */
:root .external-container .rwzBreadCrumb {
  display: flex !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  list-style: none;
  border: 0 !important;
  background: none !important;
  overflow: visible !important;
}
:root .external-container .rwzBreadCrumb .rwzLI {
  flex: 1 1 0;
  float: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 2px 0 0 !important;
  padding: 0 !important;
  background: none !important;
}
:root .external-container .rwzBreadCrumb .rwzLI:last-child { margin-right: 0 !important; }
:root .external-container .rwzBreadCrumb .rwzLink {
  display: block !important;
  width: auto !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  box-sizing: border-box;
  background: var(--brand-light) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--brand-primary) !important;
  text-align: center;
  text-decoration: none !important;
  line-height: 34px !important;
  transition: background-color 150ms ease, color 150ms ease;
}
:root .external-container .rwzBreadCrumb .rwzLink::before,
:root .external-container .rwzBreadCrumb .rwzLink::after,
:root .external-container .rwzBreadCrumb .rwzLI::before,
:root .external-container .rwzBreadCrumb .rwzLI::after { display: none !important; content: none !important; }
:root .external-container .rwzBreadCrumb .rwzImage,
:root .external-container .rwzBreadCrumb .rwzIcon { display: none !important; }
:root .external-container .rwzBreadCrumb .rwzText {
  display: inline !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 600;
  line-height: 34px !important;
}
:root .external-container .rwzBreadCrumb .rwzSelected .rwzLink { background: var(--brand-primary) !important; color: #FFFFFF !important; }
:root .external-container .rwzBreadCrumb .rwzDisabled .rwzLink { background: var(--color-bg) !important; color: var(--fg-3) !important; cursor: default; }
:root .external-container .rwzBreadCrumb .rwzLI:not(.rwzDisabled):not(.rwzSelected) .rwzLink:hover { background: var(--brand-primary-subtle) !important; }

/* progress bar */
:root .external-container .rwzProgressBar {
  height: 4px !important;
  margin: 0 0 16px !important;
  background: var(--color-bg) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden;
}
:root .external-container .rwzProgress {
  display: block;
  height: 4px !important;
  margin: 0 !important;
  background: var(--brand-primary) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
}

/* step content */
:root .external-container .rwzContentWrapper { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
:root .external-container .rwzContent {
  margin: 0 !important;
  padding: 24px !important;
  box-sizing: border-box;
  width: auto !important;
  background: var(--color-bg) !important;
  border: 0 !important;
  color: var(--fg-1) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
:root .external-container .rwzStep { width: auto !important; margin: 0 !important; padding: 0 !important; color: var(--fg-1) !important; font-size: 14px !important; }
:root .external-container .rwzStep span,
:root .external-container .rwzStep label,
:root .external-container .rwzStep p,
:root .external-container .rwzStep li,
:root .external-container .rwzStep td,
:root .external-container .rwzStep div { font-size: 14px; line-height: 1.5; }
:root .external-container .rwzStep [style*="#1d2127" i] { color: var(--fg-1) !important; }
:root .external-container .rwzStep span[style*="font-size:Large" i] { font-size: 18px !important; font-weight: 600; }

:root .external-container h1 {
  margin: 0 0 12px !important;
  padding: 0 !important;
  font-family: var(--font-display) !important;
  font-size: 32px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: var(--brand-primary) !important;
  text-align: center;
  border: 0 !important;
  background: none !important;
}
:root .external-container h2 { font-family: var(--font-display) !important; font-size: 24px !important; font-weight: 400 !important; color: var(--brand-primary) !important; }
:root .external-container h3,
:root .external-container h4 { font-family: var(--font-body) !important; font-size: 18px !important; font-weight: 600 !important; color: var(--fg-1) !important; }
:root .external-container hr { border: 0; border-top: 1px solid var(--color-border); margin: 12px 0; }
:root .external-container a { color: var(--brand-primary); text-underline-offset: 2px; }
:root .external-container a:hover { color: var(--brand-primary-hover); }
:root .external-container b,
:root .external-container strong { font-weight: 600; }

/* field blocks */
:root .external-container .inputWapper { width: auto !important; box-sizing: border-box; border-color: var(--color-border) !important; }
:root .external-container .inputWapper label { display: block; margin: 0 0 6px; font-size: 13px !important; font-weight: 600; color: var(--fg-2); }   /* AB#296: no !important - the pages set the heading green (completed) / red (invalid ABN) inline */
:root .external-container .inputWapper label[style*="#333"] { color: var(--fg-2) !important; }   /* the pages' "reset" colour, mapped back to the theme */
:root .external-container .inputWapper [style*="color:Red" i] { color: var(--color-danger) !important; }
:root .external-container input[type="text"],
:root .external-container input[type="email"],
:root .external-container input[type="number"],
:root .external-container select,
:root .external-container textarea {
  min-height: 34px;
  padding: 6px 10px !important;
  box-sizing: border-box;
  font-size: 14px !important;
  color: var(--fg-1) !important;
  background: var(--color-surface) !important;
  background-image: none !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
:root .external-container input[type="text"]:focus,
:root .external-container select:focus,
:root .external-container textarea:focus { border-color: var(--brand-primary) !important; box-shadow: var(--shadow-md), var(--focus-ring); }
:root .external-container .RadInput,
:root .external-container .RadPicker { height: auto !important; }
:root .external-container .RadInput input.riTextBox,
:root .external-container .RadPicker input.riTextBox { height: 34px !important; line-height: 32px; padding: 0 10px !important; }
:root .external-container input[type="checkbox"],
:root .external-container input[type="radio"] { accent-color: var(--brand-primary); }

/* wizard buttons: Next / Finish is the CTA, Previous / Cancel are secondary */
:root .external-container .rwzNav { margin: 16px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; height: auto !important; overflow: hidden; }
:root .external-container .rwzNav .rwzLI { margin: 0 0 0 8px !important; padding: 0 !important; height: auto !important; }
:root .external-container .rwzButton {
  min-width: 96px;
  height: 38px !important;
  padding: 0 20px !important;
  box-sizing: border-box;
  background: var(--color-surface) !important;
  background-image: none !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--brand-primary) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 36px !important;
  text-shadow: none !important;
  cursor: pointer;
  transition: background-color 150ms ease;
}
:root .external-container .rwzButton .rwzText { color: inherit !important; font-size: 14px !important; font-weight: 600 !important; line-height: inherit !important; padding: 0 !important; margin: 0 !important; float: none !important; }
:root .external-container .rwzButton:hover { background: var(--color-bg) !important; }
:root .external-container .rwzButton.rwzNext,
:root .external-container .rwzButton.rwzFinish {
  background: var(--btn-primary) !important;
  border-color: var(--btn-primary) !important;
  color: #FFFFFF !important;
}
:root .external-container .rwzButton.rwzNext:hover,
:root .external-container .rwzButton.rwzFinish:hover { background: var(--btn-primary-hover) !important; border-color: var(--btn-primary-hover) !important; }
:root .external-container .rwzButton[disabled],
:root .external-container .rwzButton.rwzDisabled { opacity: 0.55; cursor: default; }

/* footer: teal image bar -> quiet card footer */
:root .wizardFooter {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 16px 40px 24px !important;
  background: var(--color-surface) !important;
  background-image: none !important;
  border: 0 !important;
  border-top: 1px solid var(--color-border-subtle) !important;
  text-align: center;
}
:root .wizardFooter p,
:root .wizardFooter #lhs { margin: 0 !important; padding: 0 !important; float: none !important; font-size: 12px !important; line-height: 1.5 !important; color: var(--fg-3) !important; text-align: center !important; }

/* field grid: "first" + "date" blocks pair up as two columns, everything else spans the row */
:root .external-container .rwzStep .inputWapper {
  display: inline-block;
  vertical-align: top;
  float: none !important;
  position: static !important;
  width: 100% !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
}
/* only a "first" block that is directly followed by a "date" block forms a two-column pair; unpaired blocks span the row */
:root .external-container .rwzStep .inputWapper.first:has(+ .inputWapper.date),
:root .external-container .rwzStep .inputWapper.first + .inputWapper.date { width: calc(50% - 12px) !important; }
:root .external-container .rwzStep .inputWapper.first:has(+ .inputWapper.date) { margin-right: 20px !important; }
:root .external-container .rwzStep .inputWapper.single,
:root .external-container .rwzStep .inputWapper.upload,
:root .external-container .rwzStep .inputWapper.attachments { display: block; }
:root .external-container .rwzStep .inputWapper[style*="display:none" i],
:root .external-container .rwzStep .inputWapper[style*="display: none" i] { display: none !important; }

/* controls fill their block (Telerik writes inline pixel widths) */
:root .external-container .rwzStep .inputWapper .RadDropDownList,
:root .external-container .rwzStep .inputWapper .RadPicker,
:root .external-container .rwzStep .inputWapper .RadInput,
:root .external-container .rwzStep .inputWapper .RadComboBox,
:root .external-container .rwzStep .inputWapper > input[type="text"],
:root .external-container .rwzStep .inputWapper > textarea { width: 100% !important; max-width: 100%; box-sizing: border-box; }
:root .external-container .rwzStep .RadInputMultiline textarea,
:root .external-container .rwzStep textarea { width: 100% !important; min-height: 110px; resize: vertical; }
:root .external-container .RadPicker .rcTable { width: 100% !important; }
:root .external-container .RadPicker .rcTable td { padding: 0 !important; vertical-align: middle; }
:root .external-container .RadPicker .rcCalPopup { margin-left: 8px; }

/* Silk drop-down list -> flat field */
:root .external-container .RadDropDownList .rddlInner {
  display: block;
  height: 34px !important;
  padding: 0 34px 0 10px !important;
  box-sizing: border-box;
  background: var(--color-surface) !important;
  background-image: none !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--fg-1) !important;
  line-height: 32px !important;
}
:root .external-container .RadDropDownList .rddlFakeInput { height: 32px !important; line-height: 32px !important; padding: 0 !important; font-size: 14px !important; color: var(--fg-1) !important; }
:root .external-container .RadDropDownList .rddlIcon { top: 9px !important; right: 10px !important; }
:root .external-container .RadDropDownList.rddlFocused .rddlInner,
:root .external-container .RadDropDownList:focus .rddlInner { border-color: var(--brand-primary) !important; box-shadow: var(--shadow-md), var(--focus-ring) !important; }

/* drop-down popups are rendered at the end of <body>, outside .external-container */
:root .rddlPopup { border: 1px solid var(--color-border) !important; border-radius: 0 !important; background: var(--color-surface) !important; box-shadow: var(--shadow-md) !important; font-family: var(--font-body) !important; }
:root .rddlPopup .rddlItem { padding: 6px 10px !important; font-family: var(--font-body) !important; font-size: 14px !important; color: var(--fg-1) !important; background-image: none !important; border-radius: 0 !important; }
:root .rddlPopup .rddlItemHovered { background: var(--color-bg) !important; color: var(--fg-1) !important; }
:root .rddlPopup .rddlItemSelected { background: var(--brand-light) !important; color: var(--brand-primary) !important; }

/* Telerik internals that the blanket rules above must not touch */
:root .external-container input.rdfd_,
:root .main-wrapper input.rdfd_ { min-height: 0 !important; height: 1px !important; width: 1px !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; }
:root .external-container .p-icon,
:root .main-wrapper .p-icon,
:root .rddlPopup .p-icon { font-family: "WebComponentsIcons" !important; color: var(--brand-primary); }
:root .external-container .RadDropDownList .rddlSelect { position: absolute; top: 0; right: 0; width: 34px; height: 34px; line-height: 34px; text-align: center; background: none !important; border: 0 !important; }
:root .external-container .RadDropDownList .rddlInner { position: relative; }

/* drop zones on the RadWizard pages (class names differ in case from the agent wizard: DropZone1 / DropZone2) */
:root .external-container .DropZone1 {
  width: auto !important;
  box-sizing: border-box;
  margin: 0 0 16px !important;
  background: var(--brand-primary-subtle) !important;
  border: 1px dashed var(--brand-primary) !important;
  border-radius: 0 !important;
  transition: background-color 150ms ease;
}
:root .external-container .DropZone1:hover { background: var(--brand-light) !important; }
:root .external-container .DropZone2 {
  width: auto !important;
  font-family: var(--font-display) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  color: var(--brand-primary) !important;
}
:root .external-container .rwzStep .RadUpload { margin-top: 4px; }

/* uploaded-file rows: one line - status dot, file name, Remove. (.ruUploadProgress is also the file-name holder,
   so it must not carry a fill once the upload has finished.) */
:root .RadUpload li.ruFileLI { display: flex !important; align-items: center; gap: 8px; width: 100% !important; margin: 0 0 8px !important; padding: 8px 10px !important; box-sizing: border-box; background: var(--color-surface) !important; border: 1px solid var(--color-border) !important; text-align: left !important; }
:root .RadUpload li.ruFileLI .radIcon { flex: 0 0 auto; margin: 0 !important; }
:root .RadUpload li.ruFileLI .ruFileWrap { flex: 1 1 auto; width: auto !important; min-width: 0; }
:root .RadUpload li.ruFileLI .ruUploadProgress,
:root .RadUpload li.ruFileLI .ruFileProgress { display: block; width: auto !important; max-width: 100%; padding: 0 !important; background: none !important; background-color: transparent !important; color: var(--fg-1) !important; font-size: 14px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root .RadUpload li.ruUploadSuccess .ruUploadProgress { color: var(--fg-1) !important; }
:root .RadUpload li.ruUploadFailure .ruUploadProgress { color: var(--color-danger) !important; }
:root .RadUpload li.ruFileLI .ruButton.ruRemove,
:root .RadUpload li.ruFileLI .ruButton.ruCancel { flex: 0 0 auto; display: inline-block !important; min-width: 0 !important; height: auto !important; padding: 2px 10px !important; font-size: 13px !important; line-height: 1.5 !important; border: 0 !important; background: none !important; color: var(--brand-primary) !important; text-decoration: underline; text-underline-offset: 2px; }
:root .RadUpload li.ruFileLI .ruButton.ruRemove::before,
:root .RadUpload li.ruFileLI .ruButton.ruCancel::before { color: var(--brand-primary) !important; }

/* a block that holds a file upload always takes the full row */
:root .external-container .rwzStep .inputWapper:has(.RadUpload) { display: block; width: 100% !important; margin-right: 0 !important; }
:root .external-container .RadUpload .ruButton.ruBrowse { white-space: nowrap; min-width: 120px; text-align: center; line-height: 32px !important; }

/* =========================================================
   AGENT PROPERTY AUDIT (ContractSummary.aspx)
   Bootstrap 4 + DataTables page; content sits in form > main.container.
   ========================================================= */
:root body > form > main.container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 40px 48px 48px;
  box-sizing: border-box;
  background: var(--color-surface);
  box-shadow: var(--shadow-xl);
  font-family: var(--font-body) !important;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-1);
}
:root main.container,
:root main.container td,
:root main.container th,
:root main.container input,
:root main.container textarea,
:root main.container select,
:root main.container button,
:root main.container .btn { font-family: var(--font-body) !important; }
:root main.container > .container { max-width: none; padding: 0; }

/* the chevron is hot-linked from the production site: replace it with the local Faculti lockup */
:root main.container img[src*="headernew" i] {
  content: url("images/faculti-ps-logo-indigo.png");
  width: 220px !important;
  height: auto !important;
}

:root main.container h1,
:root main.container h2,
:root main.container h3 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  line-height: 1.2;
  color: var(--brand-primary) !important;
  text-decoration: none !important;
}
:root main.container h1 { font-size: 42px; margin-bottom: 8px; }
:root main.container h2 { font-size: 32px; }
:root main.container h3 { font-size: 24px; margin: 36px 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border); }
:root main.container h4,
:root main.container h5 { font-family: var(--font-body) !important; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--fg-2); margin-top: 20px; }
:root main.container .bigger { font-size: 18px; font-weight: 600; }
:root main.container .bold,
:root main.container b,
:root main.container strong { font-weight: 600; }
:root main.container hr { border-top: 1px solid var(--color-border); }
:root main.container a { color: var(--brand-primary); text-underline-offset: 2px; }
:root main.container a:hover { color: var(--brand-primary-hover); }

:root main.container .row.linePadding { padding-top: 12px; padding-bottom: 12px; margin: 0; border-bottom: 1px solid var(--color-border-subtle); }
:root main.container .row.linePadding .col:first-child { color: var(--fg-3); padding-left: 0; }
:root main.container .row.linePadding .col:last-child { font-weight: 600; }

:root main.container input[type="radio"],
:root main.container input[type="checkbox"] { accent-color: var(--brand-primary); }
:root main.container label { font-weight: 400; }
:root main.container textarea,
:root main.container input[type="text"],
:root main.container .form-control {
  width: 100%;
  padding: 8px 10px;
  font-size: 14px;
  color: var(--fg-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none;
}
:root main.container textarea:focus,
:root main.container .form-control:focus { border-color: var(--brand-primary) !important; box-shadow: var(--shadow-md), var(--focus-ring) !important; }

/* DataTables */
:root main.container table.dataTable,
:root main.container table.display { width: 100% !important; border-collapse: collapse !important; border: 1px solid var(--color-border) !important; font-size: 14px; }
:root main.container table.dataTable thead th,
:root main.container table.display thead th {
  padding: 8px 10px !important;
  background: var(--color-surface) !important; background-image: none !important;
  border: 0 !important; border-bottom: 1px solid var(--color-border) !important;
  color: var(--fg-3) !important; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
}
:root main.container table.dataTable tbody td,
:root main.container table.display tbody td { padding: 8px 10px !important; border: 0 !important; border-top: 1px solid var(--color-border-subtle) !important; background: var(--color-surface) !important; }
:root main.container table.dataTable tbody tr:hover td { background: var(--color-bg) !important; }
:root main.container table.dataTable.no-footer { border-bottom: 1px solid var(--color-border) !important; }
:root main.container .dataTables_wrapper .dataTables_info,
:root main.container .dataTables_wrapper .dataTables_filter,
:root main.container .dataTables_wrapper .dataTables_length { font-size: 13px; color: var(--fg-3); }
:root main.container .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: 0 !important; border: 1px solid transparent !important; background: none !important; color: var(--brand-primary) !important; }
:root main.container .dataTables_wrapper .dataTables_paginate .paginate_button.current { border-color: var(--color-border) !important; background: var(--brand-light) !important; }

/* Bootstrap primary button = the CTA */
:root main.container .btn { border-radius: 0 !important; font-size: 15px; font-weight: 600; padding: 12px 28px; box-shadow: none !important; }
:root main.container .btn-primary { background: var(--btn-primary) !important; border-color: var(--btn-primary) !important; color: #FFFFFF !important; }
:root main.container .btn-primary:hover,
:root main.container .btn-primary:focus { background: var(--btn-primary-hover) !important; border-color: var(--btn-primary-hover) !important; }

/* =========================================================
   DRIVE-BY FILE UPLOAD (AgentDriveByInterfaceFileUpload.aspx)
   ========================================================= */

/* The "Simple" skin renders uploaded-file rows as a bare <li> (no ruFileLI class), so match rows by
   what they contain rather than by class. The file-name holder must never carry a fill. */
:root .RadUpload .ruUploadProgress,
:root .RadUpload .ruFileProgress {
  background: none !important;
  background-color: transparent !important;
  color: var(--fg-1) !important;
}
:root .RadUpload .ruInputs > li:has(> .ruFileWrap > .ruUploadProgress) {
  display: flex !important;
  align-items: center;
  gap: 8px;
  width: 100% !important;
  margin: 0 0 8px !important;
  padding: 8px 10px !important;
  box-sizing: border-box;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  text-align: left !important;
}
:root .RadUpload .ruInputs > li:has(> .ruFileWrap > .ruUploadProgress) .ruFileWrap { flex: 1 1 auto; width: auto !important; min-width: 0; }
:root .RadUpload .ruInputs > li:has(> .ruFileWrap > .ruUploadProgress) .ruUploadProgress {
  display: block; width: auto !important; max-width: 100%; padding: 0 !important;
  font-size: 14px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
:root .RadUpload .ruInputs > li .ruButton.ruRemove,
:root .RadUpload .ruInputs > li .ruButton.ruCancel {
  flex: 0 0 auto;
  display: inline-block !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 2px 10px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  border: 0 !important;
  background: none !important;
  color: var(--brand-primary) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* upload row: label + note above, control underneath, all left aligned (was a 2-column table, right-aligned) */
:root .main-wrapper table#TABLE1,
:root .main-wrapper table#TABLE1 > tbody,
:root .main-wrapper table#TABLE1 > tbody > tr,
:root .main-wrapper table#TABLE1 > tbody > tr > td { display: block; width: 100% !important; text-align: left !important; padding: 0 !important; }
:root .main-wrapper table#TABLE1 p { margin: 0 0 10px !important; white-space: normal !important; color: var(--fg-3); font-size: 13px !important; line-height: 1.5; }
:root .main-wrapper table#TABLE1 p label { display: block; margin: 0 0 2px; color: var(--fg-2); font-size: 14px !important; }
:root .main-wrapper table#TABLE1 p br { display: none; }
:root .main-wrapper table#TABLE1 .RadUpload { width: 100% !important; }

/* existing attachments panel */
:root .panel.existingfiles p { margin: 0 0 6px !important; }
:root .panel.existingfiles p:empty { display: none; }
:root .panel.existingfiles a { font-weight: 600; }

/* "Continue…" is this page's step-forward action */
:root .main-wrapper input[type="submit"][value^="Continue"],
:root .main-wrapper input[type="submit"][id$="btnSubmitDescription"] {
  color: #FFFFFF !important;
  background: var(--btn-primary) !important;
  border-color: var(--btn-primary) !important;
}
:root .main-wrapper input[type="submit"][value^="Continue"]:hover,
:root .main-wrapper input[type="submit"][id$="btnSubmitDescription"]:hover { background: var(--btn-primary-hover) !important; border-color: var(--btn-primary-hover) !important; }
:root .main-wrapper #cancelButton { margin-left: 0 !important; }

/* legacy vendor credit in the footer (already commented out of the master page) */
:root .form-footer #rhs { display: none !important; }

/* drive-by questionnaire: each yes/no row is <p><select/><span>question</span></p>. Long questions used to drop
   under the drop-down; lay the row out so the text wraps beside it instead. */
:root .main-wrapper p:has(> select):has(> span) { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 10px !important; }
:root .main-wrapper p:has(> select):has(> span) > select { flex: 0 0 auto; min-width: 72px; }
:root .main-wrapper p:has(> select):has(> span) > span { flex: 1 1 auto; min-width: 0; padding-top: 7px; line-height: 1.5; }
:root .main-wrapper .panel select { max-width: 100%; box-sizing: border-box; }
:root .main-wrapper p:has(> select):has(> span) { height: auto !important; min-height: 36px; overflow: visible !important; margin-bottom: 12px !important; }
:root .main-wrapper p:has(> select):has(> span) > span { line-height: 20px !important; padding-top: 8px; }
/* the question labels carry inline height:24px + font-size:Medium, which pins them to one line and lets a second line spill out */
:root .main-wrapper p:has(> select):has(> span) > span { height: auto !important; font-size: 14px !important; }
:root .main-wrapper .panel span[style*="font-size:Medium" i] { font-size: 14px !important; height: auto !important; }

/* =========================================================
   Found by full-page captures in Chrome
   ========================================================= */

/* The page gradient was 'fixed' to the viewport, so on pages taller than one screen the area below the first
   screen-height had no background (white) and the white footer text vanished. Paint the whole document instead. */
html:root {
  background: var(--brand-gradient) !important;
  background-attachment: scroll !important;
  min-height: 100%;
}

/* plain asp:GridView tables (inline '#5D7B9D' header, '#F7F6F3' alternate rows), e.g. valuation attachments */
:root .main-wrapper table.Attachments,
:root .main-wrapper table[id*="GridView"] { width: 100% !important; border: 1px solid var(--color-border) !important; border-collapse: collapse !important; color: var(--fg-1) !important; font-size: 14px; }
:root .main-wrapper table.Attachments tr[style*="5D7B9D" i],
:root .main-wrapper table[id*="GridView"] tr[style*="5D7B9D" i] { background-color: var(--color-surface) !important; color: var(--fg-3) !important; }
:root .main-wrapper table.Attachments th,
:root .main-wrapper table[id*="GridView"] th {
  padding: 8px 10px !important; text-align: left;
  border-bottom: 1px solid var(--color-border) !important;
  color: var(--fg-3) !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.05em;
}
:root .main-wrapper table.Attachments th a,
:root .main-wrapper table[id*="GridView"] th a { color: var(--fg-3) !important; text-decoration: none; }
:root .main-wrapper table.Attachments td,
:root .main-wrapper table[id*="GridView"] td { padding: 8px 10px !important; border-top: 1px solid var(--color-border-subtle) !important; }
:root .main-wrapper table.Attachments tr[style*="F7F6F3" i],
:root .main-wrapper table.Attachments tr[style*="White" i],
:root .main-wrapper table[id*="GridView"] tr[style*="F7F6F3" i],
:root .main-wrapper table[id*="GridView"] tr[style*="White" i] { background-color: var(--color-surface) !important; color: var(--fg-1) !important; }

/* read-only comment boxes: an empty one is just a stray white rectangle, a filled one should read as text not as a field */
:root .main-wrapper textarea[readonly]:placeholder-shown,
:root .main-wrapper textarea[readonly]:empty { display: none; }
:root .main-wrapper textarea[readonly] { background: transparent !important; border-color: var(--color-border-subtle) !important; resize: none; }

/* =========================================================
   Second round of fixes found by full-page Chrome captures
   ========================================================= */

/* Page gradient: <html> is only one viewport tall, so a gradient painted there TILES down a long page (visible seam).
   <body> is as tall as the content, so paint it there; <html> just carries the gradient's end colour as a fallback. */
html:root { background: #24163C !important; background-image: none !important; }
:root body {
  background: var(--brand-gradient) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  min-height: 100vh;
}

/* validation messages: always the danger colour, never floated over a neighbouring field */
:root .main-wrapper span[id*="alidator"],
:root .main-wrapper span[id*="Required"],
:root .external-container span[id*="alidator"],
:root .external-container span[id*="Required"],
:root .external-container .validator { color: var(--color-danger) !important; font-size: 12px !important; font-weight: 400 !important; }
:root .external-container .inputWapper .validator,
:root .external-container .inputWapper span[id*="alidator"] {
  position: static !important;
  float: none !important;
  display: block;
  margin: 4px 0 0 !important;
  text-align: left !important;
  line-height: 1.4 !important;
}
:root .external-container .inputWapper span[id*="alidator"][style*="hidden" i],
:root .external-container .inputWapper .validator[style*="hidden" i],
:root .external-container .inputWapper span[id*="alidator"][style*="none" i] { display: none; }

/* agent wizard field table: every control the same width, whatever inline width Telerik wrote */
:root .main-wrapper table.field_table .RadInput,
:root .main-wrapper table.field_table .RadPicker,
:root .main-wrapper table.field_table select,
:root .main-wrapper table.field_table textarea,
:root .main-wrapper table.field_table .RadInput textarea { width: 300px !important; max-width: 100%; box-sizing: border-box; }
:root .main-wrapper table.field_table .RadInput input.riTextBox,
:root .main-wrapper table.field_table .RadInput textarea.riTextBox { width: 100% !important; }
:root .main-wrapper table.field_table td:first-child { width: 36%; }

/* RadWizard pages: a block holding a drop-down stays half width (it never needs the full row) */
:root .external-container .rwzStep .inputWapper.first:has(.RadDropDownList) { width: calc(50% - 12px) !important; }

/* The legacy theme pins html/body to height:100%, so the body box (and the gradient painted on it) was exactly one
   viewport tall while the content ran on below it. Let both grow with the content. */
html:root,
:root body { height: auto !important; }
:root body { min-height: 100vh !important; }

/* plain (non-Telerik) text boxes in the agent wizard field table get the same width as everything else */
:root .main-wrapper table.field_table input[type="text"]:not(.riTextBox),
:root .main-wrapper table.field_table input.ProcessTextArea:not(.riTextBox) { width: 300px !important; max-width: 100%; height: 34px; box-sizing: border-box; }