/*
  Theme Name: Born Free
  Author: Story & Koci
  Description: Custom theme
  Version: 0.0.1
*/

.search-button {
  display: flex;
  width: 120px;
  height: 36px;
  padding: 10px 16px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  background: var(--color-brand-500);
  box-shadow: 0px 0px 0px 1px rgba(10, 13, 18, 0.18) inset, 0px -2px 0px 0px rgba(10, 13, 18, 0.05) inset, 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  color: var(--color-base-white);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 150% */
}

.email-enquiry-button,
.frm_style_formidable-style.with_frm_style .frm_compact .frm_dropzone.dz-clickable .dz-message, .frm_style_formidable-style.with_frm_style input[type=submit], .frm_style_formidable-style.with_frm_style .frm_submit input[type=button], .frm_style_formidable-style.with_frm_style .frm_submit button, .frm_form_submit_style, .frm_style_formidable-style.with_frm_style .frm-edit-page-btn {
  display: flex;
  width: 204px;
  height: 44px;
  padding: 10px 16px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  background: var(--color-brand-500);
  box-shadow: /* 0px 1px 2px 0px rgba(16, 24, 40, 0.05), */ 0px -2px 0px 0px rgba(10, 13, 18, 0.05) inset /*, 0px 0px 0px 1px rgba(10, 13, 18, 0.18) inset */;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  color: var(--color-base-white);
}

.email-enquiry-input {
  display: flex;
  width: 100%;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border-radius: 8px;
  border: 1px solid var(--color-grey-blue-300);
  background: var(--color-grey-blue-50);
  color: var(--color-blue-muted);
}

.email-enquiry-textarea {
  display: flex;
  width: 100%;
  height: 94px;
  padding: 8px 16px 62px 16px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--color-grey-blue-300);
  background: var(--color-grey-blue-50);
  color: var(--color-blue-muted);
}

body.pagelayer-body {
  background-color: var(--color-page-background);
  color: var(--color-page-text);
}

/* Pagelayer sometimes forces text color (e.g. #525252ff / #292929). Keep it theme-aware. */
body.pagelayer-body p,
body.pagelayer-body strong,
body.pagelayer-body b,
body.pagelayer-body em {
  color: var(--color-page-text) !important;
}

body.pagelayer-body h1,
body.pagelayer-body h2,
body.pagelayer-body h3,
body.pagelayer-body h4,
body.pagelayer-body h5,
body.pagelayer-body h6 {
  color: var(--color-blue-title) !important;
}

/* Pastel highlight helpers (theme-aware via CSS variables) */
.bf-pastel-blue-bg { background-color: var(--bf-pastel-blue-bg) !important; }
.bf-pastel-blue-border { border-color: var(--bf-pastel-blue-border) !important; }
.bf-pastel-blue { background-color: var(--bf-pastel-blue-bg) !important; border: 1px solid var(--bf-pastel-blue-border) !important; }

.bf-pastel-green-bg { background-color: var(--bf-pastel-green-bg) !important; }
.bf-pastel-green-border { border-color: var(--bf-pastel-green-border) !important; }
.bf-pastel-green { background-color: var(--bf-pastel-green-bg) !important; border: 1px solid var(--bf-pastel-green-border) !important; }

.bf-pastel-yellow-bg { background-color: var(--bf-pastel-yellow-bg) !important; }
.bf-pastel-yellow-border { border-color: var(--bf-pastel-yellow-border) !important; }
.bf-pastel-yellow { background-color: var(--bf-pastel-yellow-bg) !important; border: 1px solid var(--bf-pastel-yellow-border) !important; }

.bf-pastel-pink-bg { background-color: var(--bf-pastel-pink-bg) !important; }
.bf-pastel-pink-border { border-color: var(--bf-pastel-pink-border) !important; }
.bf-pastel-pink { background-color: var(--bf-pastel-pink-bg) !important; border: 1px solid var(--bf-pastel-pink-border) !important; }

.bf-pastel-purple-bg { background-color: var(--bf-pastel-purple-bg) !important; }
.bf-pastel-purple-border { border-color: var(--bf-pastel-purple-border) !important; }
.bf-pastel-purple { background-color: var(--bf-pastel-purple-bg) !important; border: 1px solid var(--bf-pastel-purple-border) !important; }

/* Some plugins force #333 on controls/icons; in dark mode this becomes unreadable. */
html[data-theme="dark"] .wpdt-c .btn-default {
  color: var(--color-page-text) !important;
}

html[data-theme="dark"] body.pagelayer-body i {
  color: var(--color-page-text) !important;
}

/* DataTables / TableTools buttons */
body.pagelayer-body .DTTT_button,
body.pagelayer-body .DTTT_button:hover,
body.pagelayer-body .DTTT_button:active,
body.pagelayer-body .DTTT_button:focus {
  color: var(--color-page-text) !important;
}

/* wpDataTables: make simple table container surface follow theme */
body.pagelayer-body .wpdt-c.wpDataTableContainerSimpleTable {
  background-color: var(--bf-wpdt-surface-bg) !important;
}

/* wpDataTables: theme-friendly header + rows (pastel accent + theme surface) */
body.pagelayer-body .wpDataTablesWrapper table.wpDataTable,
body.pagelayer-body .wpdtSimpleTable.wpDataTable {
  background-color: var(--bf-wpdt-surface-bg) !important;
  color: var(--bf-wpdt-body-text) !important;
}

body.pagelayer-body .wpDataTablesWrapper table.wpDataTable > thead > tr > th,
body.pagelayer-body .wpDataTablesWrapper table.wpDataTable > tfoot > tr > th,
body.pagelayer-body .wpdtSimpleTable.wpDataTable > thead > tr > th,
body.pagelayer-body .wpdtSimpleTable.wpDataTable > tfoot > tr > th,
/* wpDataTables sometimes uses these selector paths */
body.pagelayer-body .wpdt-c .wpDataTablesWrapper table.wpDataTable thead th,
body.pagelayer-body .wpdt-c .wpDataTablesWrapper table.wpDataTable tfoot th {
  color: var(--bf-wpdt-header-text) !important;
  border: 1px solid var(--bf-wpdt-border) !important;
  background-color: var(--bf-wpdt-header-bg) !important;
  background: var(--bf-wpdt-header-bg) none !important;
}

body.pagelayer-body .wpDataTablesWrapper table.wpDataTable > thead > tr > th:hover,
body.pagelayer-body .wpdtSimpleTable.wpDataTable > thead > tr > th:hover,
body.pagelayer-body .wpdt-c .wpDataTablesWrapper table.wpDataTable thead th:hover {
  background-color: var(--bf-wpdt-header-bg) !important;
  background: var(--bf-wpdt-header-bg) none !important;
}

/* Keep the same header background for DataTables sorting states. */
body.pagelayer-body .wpDataTablesWrapper table.wpDataTable > thead > tr > th.sorting,
body.pagelayer-body .wpDataTablesWrapper table.wpDataTable > thead > tr > th.sorting_asc,
body.pagelayer-body .wpDataTablesWrapper table.wpDataTable > thead > tr > th.sorting_desc,
body.pagelayer-body .wpDataTablesWrapper table.wpDataTable > thead > tr > th.sorting_asc_disabled,
body.pagelayer-body .wpDataTablesWrapper table.wpDataTable > thead > tr > th.sorting_desc_disabled,
body.pagelayer-body .wpDataTablesWrapper table.wpDataTable > thead > tr > th.sorting_disabled,
body.pagelayer-body .wpdt-c .wpDataTablesWrapper table.wpDataTable thead th.sorting,
body.pagelayer-body .wpdt-c .wpDataTablesWrapper table.wpDataTable thead th.sorting_asc,
body.pagelayer-body .wpdt-c .wpDataTablesWrapper table.wpDataTable thead th.sorting_desc,
body.pagelayer-body .wpdt-c .wpDataTablesWrapper table.wpDataTable thead th.sorting_asc_disabled,
body.pagelayer-body .wpdt-c .wpDataTablesWrapper table.wpDataTable thead th.sorting_desc_disabled,
body.pagelayer-body .wpdt-c .wpDataTablesWrapper table.wpDataTable thead th.sorting_disabled {
  background-color: var(--bf-wpdt-header-bg) !important;
  background: var(--bf-wpdt-header-bg) none !important;
  color: var(--bf-wpdt-header-text) !important;
}

/* SimpleTables: do override cell background so it doesn't hard-code to white (#fff).
   (We keep "normal" wpDataTables cell styling alone so rule-based highlights can work.) */
body.pagelayer-body .wpdtSimpleTable.wpDataTable > tbody > tr > td,
body.pagelayer-body .wpdtSimpleTable.wpDataTable > tbody > tr > th {
  background-color: transparent !important;
  color: var(--bf-wpdt-body-text) !important;
  border-color: var(--bf-wpdt-border) !important;
}

/* Zebra striping at the row level only (cells may still override via their own backgrounds). */
body.pagelayer-body .wpDataTablesWrapper table.wpDataTable > tbody > tr.even,
body.pagelayer-body .wpDataTablesWrapper table.wpDataTable > tbody > tr:nth-child(even) {
  background-color: var(--bf-wpdt-surface-bg);
}

body.pagelayer-body .wpDataTablesWrapper table.wpDataTable > tbody > tr.odd,
body.pagelayer-body .wpDataTablesWrapper table.wpDataTable > tbody > tr:nth-child(odd) {
  background-color: var(--bf-wpdt-row-odd-bg);
}

/* Normal wpDataTables often sets zebra striping on TDs (e.g. odd td { ... !important }, even td { ... }).
   We neutralize those defaults so the row-level zebra works, but avoid overriding inline-styled cells. */
body.pagelayer-body .wpDataTablesWrapper table.wpDataTable tr.odd td:not([style*="background"]),
body.pagelayer-body .wpDataTablesWrapper table.wpDataTable tr.even td:not([style*="background"]),
body.pagelayer-body .wpDataTablesWrapper table.wpDataTable tr.odd th:not([style*="background"]),
body.pagelayer-body .wpDataTablesWrapper table.wpDataTable tr.even th:not([style*="background"]) {
  background-color: inherit;
}

/* wpDataTables skin can force zebra backgrounds at the TD level (e.g. .wpdt-c.wdt-skin-light ... tr.odd td { background-color: #f5f5f5; }).
   We keep zebra on the TR and force default TD backgrounds to inherit it (while not touching inline-styled cells). */
body.pagelayer-body .wpdt-c.wdt-skin-light .wpDataTablesWrapper table.wpDataTable tr.odd td:not([style*="background"]),
body.pagelayer-body .wpdt-c.wdt-skin-light .wpDataTablesWrapper table.wpDataTable tr.odd td.sorting_1:not([style*="background"]),
body.pagelayer-body .wpdt-c.wdt-skin-light .wpDataTablesWrapper table.wpDataTable tr.even td:not([style*="background"]),
body.pagelayer-body .wpdt-c.wdt-skin-light .wpDataTablesWrapper table.wpDataTable tr.even td.sorting_1:not([style*="background"]) {
  background-color: inherit;
}

/* wdt-skin-light also applies hover backgrounds at the TD level (e.g. tr.odd:hover > td { background-color: #e8e8e8; }). */
body.pagelayer-body .wpdt-c.wdt-skin-light .wpDataTablesWrapper table.wpDataTable tr.odd:hover > td:not([style*="background"]),
body.pagelayer-body .wpdt-c.wdt-skin-light .wpDataTablesWrapper table.wpDataTable tr.odd:hover > td.sorting_1:not([style*="background"]),
body.pagelayer-body .wpdt-c.wdt-skin-light .wpDataTablesWrapper table.wpDataTable tr.even:hover > td:not([style*="background"]),
body.pagelayer-body .wpdt-c.wdt-skin-light .wpDataTablesWrapper table.wpDataTable tr.even:hover > td.sorting_1:not([style*="background"]) {
  background-color: var(--bf-wpdt-header-bg);
}

/* wpDataTables sometimes shades the sorting column (e.g. tr.even td.sorting_1 { background-color: #f8f8f8; }).
   Keep it consistent with the row zebra. */
body.pagelayer-body .wpDataTablesWrapper table.wpDataTable tr.even td.sorting_1:not([style*="background"]),
body.pagelayer-body .wpdt-c .wpDataTablesWrapper table.wpDataTable tr.even td.sorting_1:not([style*="background"]) {
  background-color: inherit;
}
body.pagelayer-body .wpDataTablesWrapper table.wpDataTable tr.even:hover > td:not([style*="background"]) {
  background-color: var(--bf-wpdt-header-bg);
}

body.pagelayer-body .wpDataTablesWrapper table.wpDataTable tr.odd td:not([style*="background"]) {
  background-color: inherit;
}

body.pagelayer-body .wpDataTablesWrapper table.wpDataTable tr.odd:hover > td:not([style*="background"]) {
  background-color: var(--bf-wpdt-header-bg);
}


/* wpDataTables sometimes forces odd-row TD backgrounds (e.g. #FFF9C3 !important).
   Keep zebra striping consistent by inheriting the TR background. */
body.pagelayer-body .wpdt-c .wpDataTablesWrapper table.wpDataTable tr.odd td:not([style*="background"]),
body.pagelayer-body .wpdt-c .wpDataTablesWrapper table.wpDataTable tr.odd td.sorting_1:not([style*="background"]),
body.pagelayer-body .wpdt-c .wpDataTablesWrapper table.wpDataTable tr.odd th:not([style*="background"]) {
  background-color: inherit;
}

/* wpDataTables hover (plugin sets hard-coded colors like #54B1DD !important). Use theme-friendly hover accent.
   Keep inline-styled cells untouched so rule-based highlights can still apply. */
body.pagelayer-body .wpdt-c .wpDataTablesWrapper table.wpDataTable tr.odd:hover > td:not([style*="background"]),
body.pagelayer-body .wpdt-c .wpDataTablesWrapper table.wpDataTable tr.odd:hover > td.sorting_1:not([style*="background"]),
body.pagelayer-body .wpdt-c .wpDataTablesWrapper table.wpDataTable tr.even:hover > td:not([style*="background"]),
body.pagelayer-body .wpdt-c .wpDataTablesWrapper table.wpDataTable tr.even:hover > td.sorting_1:not([style*="background"]) {
  background-color: var(--bf-wpdt-header-bg);
}

/* wpDataTables pagination current button (plugin uses hard-coded colors like #E4D22C !important). */
body.pagelayer-body .wpDataTablesWrapper .dataTables_paginate .paginate_button.current,
body.pagelayer-body .wpDataTablesWrapper .dataTables_paginate .paginate_button.current:hover,
body.pagelayer-body .wpdt-c .wpDataTablesWrapper .dataTables_paginate .paginate_button.current,
body.pagelayer-body .wpdt-c .wpDataTablesWrapper .dataTables_paginate .paginate_button.current:hover {
  background-color: var(--bf-wpdt-header-bg) !important;
  background: var(--bf-wpdt-header-bg) none !important;
  color: var(--bf-wpdt-header-text) !important;
  border-color: var(--bf-wpdt-border) !important;
}

/* SimpleTables: override plugin zebra striping (e.g. tr.even { background-color: #eee; }) */
body.pagelayer-body .wpdtSimpleTable.wpDataTable > tbody > tr.even,
body.pagelayer-body .wpdtSimpleTable.wpDataTable > tbody > tr:nth-child(even) {
  background-color: var(--bf-wpdt-surface-bg) !important;
}

body.pagelayer-body .wpdtSimpleTable.wpDataTable > tbody > tr.odd,
body.pagelayer-body .wpdtSimpleTable.wpDataTable > tbody > tr:nth-child(odd) {
  background-color: var(--bf-wpdt-row-odd-bg) !important;
}

/* Mosaic plugin/theme overrides */
body.pagelayer-body .mosaic-wrap {
  color: var(--color-page-text) !important;
}

body.pagelayer-body .mosaic-muted {
  color: var(--color-page-text) !important;
  opacity: 0.8;
}

body.pagelayer-body .mosaic-table thead th {
  background: var(--bf-wpdt-header-bg) none !important;
  background-color: var(--bf-wpdt-header-bg) !important;
  color: var(--bf-wpdt-header-text) !important;
  border-color: var(--bf-wpdt-border) !important;
}

body.pagelayer-body .mosaic-table tbody tr:nth-child(2n) {
  background-color: var(--bf-wpdt-row-odd-bg) !important;
}

body.pagelayer-body .mosaic-table th,
body.pagelayer-body .mosaic-table td {
  border-bottom: 1px solid var(--bf-wpdt-border) !important;
}

/* CSV Comparator / Biomesight plugin overrides */
body.pagelayer-body .csv-comparator-card {
  background: var(--bf-wpdt-surface-bg) !important;
}

body.pagelayer-body .biomesight-wrap {
  color: var(--color-page-text) !important;
}

body.pagelayer-body .csv-upload-area {
  border-color: var(--color-grey-blue-300) !important;
  background: var(--bf-wpdt-surface-bg) !important;
}

body.pagelayer-body .csv-upload-text {
  color: var(--color-page-text) !important;
}

body.pagelayer-body .summary-card {
  background: linear-gradient(135deg, var(--bf-wpdt-surface-bg) 0%, var(--bf-pastel-blue-bg) 100%) !important;
  border: 1px solid var(--color-grey-blue-300) !important;
}

body.pagelayer-body .summary-card-label {
  color: var(--color-page-text) !important;
  opacity: 0.8;
}

body.pagelayer-body .biomesight-table td {
  border-bottom: 1px solid var(--bf-wpdt-border) !important;
}

body.pagelayer-body .biomesight-table {
  background: var(--bf-wpdt-surface-bg) !important;
  color: var(--color-page-text) !important;
}

body.pagelayer-body .biomesight-table tbody tr:nth-child(even) {
  background: var(--bf-pastel-blue-bg) !important;
}

body.pagelayer-body .biomesight-table tbody tr:hover {
  background: var(--bf-wpdt-header-bg) !important;
}

/* Theriome plugin overrides */
body.pagelayer-body .theriome-wrap {
  color: var(--color-page-text) !important;
}

body.pagelayer-body .theriome-upload-name,
body.pagelayer-body .theriome-controls label {
  color: var(--color-page-text) !important;
}

body.pagelayer-body .theriome-status {
  color: var(--color-page-text) !important;
  opacity: 0.85;
}

body.pagelayer-body .theriome-bar-graph {
  background: var(--bf-wpdt-surface-bg) !important;
  border: 1px solid var(--bf-wpdt-border) !important;
}

body.pagelayer-body .theriome-btn.secondary {
  background: var(--bf-wpdt-surface-bg) !important;
  color: var(--color-page-text) !important;
  border-color: var(--color-grey-blue-300) !important;
}

body.pagelayer-body .theriome-table {
  background: var(--bf-wpdt-surface-bg) !important;
  color: var(--color-page-text) !important;
}

body.pagelayer-body .theriome-table thead th {
  background: var(--bf-wpdt-header-bg) !important;
  color: var(--bf-wpdt-header-text) !important;
  border-bottom: 1px solid var(--bf-wpdt-border) !important;
}

body.pagelayer-body .theriome-table tbody td {
  border-bottom: 1px solid var(--bf-wpdt-border) !important;
}

body.pagelayer-body .theriome-table tbody tr:nth-child(2n+1) {
  background: var(--bf-pastel-blue-bg) !important;
}

body.pagelayer-body .theriome-input {
  border: 1px solid var(--color-grey-blue-300) !important;
  background: var(--bf-wpdt-surface-bg) !important;
  color: var(--color-page-text) !important;
}

body.pagelayer-body .theriome-file {
  border: 1px dashed var(--color-grey-blue-300) !important;
  background: var(--bf-wpdt-surface-bg) !important;
  color: var(--color-page-text) !important;
}

body.pagelayer-body .theriome-bar-label {
  color: var(--color-page-text) !important;
}

body.pagelayer-body .theriome-table {
  border: 1px solid var(--bf-wpdt-border) !important;
}

body.pagelayer-body .theriome-bar-track {
  background: var(--bf-wpdt-surface-bg) !important;
  border: 1px solid var(--bf-wpdt-border) !important;
}

body.pagelayer-body .req-bar-track {
  background: var(--bf-wpdt-surface-bg) !important;
}

body.pagelayer-body .theriome-bar-fill {
  color: var(--color-base-white) !important;
}

/* Oligoscan Processor plugin (theme-aware colors only) */
body.pagelayer-body .oligoscan-processor-wrap {
  --osp-bg: var(--color-page-background);
  --osp-card: var(--bf-wpdt-surface-bg);
  --osp-border: var(--bf-wpdt-border);
  --osp-text: var(--color-page-text);
  --osp-muted: rgba(74, 97, 120, 0.78);
  --osp-primary: var(--color-brand-500);
  --osp-primary-2: #7198bf;
  --osp-success: #33c38e;
  --osp-error: #ff6767;
  --osp-shadow: var(--shadow-shadow-lg);
  --osp-spinner-track: rgba(10, 13, 18, 0.18);
}

html[data-theme="dark"] body.pagelayer-body .oligoscan-processor-wrap {
  --osp-muted: rgba(198, 211, 230, 0.75);
  --osp-primary-2: #84b9e3;
  --osp-spinner-track: rgba(255, 255, 255, 0.25);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] body.pagelayer-body .oligoscan-processor-wrap {
    --osp-muted: rgba(198, 211, 230, 0.75);
    --osp-primary-2: #84b9e3;
    --osp-spinner-track: rgba(255, 255, 255, 0.25);
  }
}

/* Override the plugin's remaining hard-coded colors so light theme remains readable. */
body.pagelayer-body .oligoscan-processor-wrap .osp-btn {
  background: var(--osp-card) !important;
  color: var(--osp-text) !important;
  border-color: var(--osp-border) !important;
}

body.pagelayer-body .oligoscan-processor-wrap .osp-btn:hover {
  background: var(--osp-primary) !important;
  border-color: var(--osp-primary) !important;
  color: var(--color-base-white) !important;
}

body.pagelayer-body .oligoscan-processor-wrap .osp-btn--primary {
  color: var(--color-base-black) !important;
}

body.pagelayer-body .oligoscan-processor-wrap .osp-spinner {
  border-color: var(--osp-spinner-track) !important;
  border-top-color: var(--osp-primary) !important;
}

/* Oligoscan Processor options panel background (theme-aware) */
body.pagelayer-body .osp-options {
  background: var(--color-page-background) !important;
}

/* wpif-mp plugin (theme-aware colors only) */
body.pagelayer-body .wpif-mp-wrap {
  color: var(--color-page-text) !important;
}

body.pagelayer-body .wpif-mp-card {
  background-color: var(--bf-wpdt-surface-bg) !important;
  border-color: var(--bf-wpdt-border) !important;
  box-shadow: var(--shadow-shadow-sm);
}

body.pagelayer-body .wpif-mp-field input,
body.pagelayer-body .wpif-mp-field select {
  border-color: var(--color-grey-blue-300) !important;
  background-color: var(--bf-wpdt-surface-bg) !important;
  color: var(--color-page-text) !important;
}

/* wpif-mp: increase contrast in light theme by using a whiter field background */
html[data-theme="light"] body.pagelayer-body .wpif-mp-field input,
html[data-theme="light"] body.pagelayer-body .wpif-mp-field select {
  background-color: var(--color-base-white) !important;
}

@media (prefers-color-scheme: light) {
  html[data-theme="system"] body.pagelayer-body .wpif-mp-field input,
  html[data-theme="system"] body.pagelayer-body .wpif-mp-field select {
    background-color: var(--color-base-white) !important;
  }
}

body.pagelayer-body .wpif-mp-btn {
  background-color: var(--color-brand-500) !important;
  color: var(--color-base-white) !important;
}

body.pagelayer-body .wpif-mp-btn.secondary {
  background-color: var(--color-grey-blue-600) !important;
}

body.pagelayer-body .wpif-mp-btn.ghost {
  background-color: var(--color-grey-blue-200) !important;
  color: var(--color-page-text) !important;
}

body.pagelayer-body .wpif-mp-kpi {
  background-color: var(--bf-pastel-blue-bg) !important;
  color: var(--color-page-text) !important;
}

body.pagelayer-body .wpif-mp-picker {
  background-color: var(--bf-wpdt-surface-bg) !important;
  border-color: var(--bf-wpdt-border) !important;
}

html[data-theme="light"] body.pagelayer-body .wpif-mp-picker {
  background-color: var(--color-base-white) !important;
}

@media (prefers-color-scheme: light) {
  html[data-theme="system"] body.pagelayer-body .wpif-mp-picker {
    background-color: var(--color-base-white) !important;
  }
}

body.pagelayer-body .wpif-mp-table th,
body.pagelayer-body .wpif-mp-table td {
  border-bottom-color: var(--bf-wpdt-border) !important;
}

body.pagelayer-body .wpif-mp-warn {
  background-color: var(--bf-pastel-yellow-bg) !important;
  border-color: var(--bf-pastel-yellow-border) !important;
  color: var(--color-page-text) !important;
}

body.pagelayer-body .wpif-mp-ok {
  background-color: var(--bf-pastel-green-bg) !important;
  border-color: var(--bf-pastel-green-border) !important;
  color: var(--color-page-text) !important;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .wpdt-c .btn-default {
    color: var(--color-page-text) !important;
  }

  html[data-theme="system"] body.pagelayer-body i {
    color: var(--color-page-text) !important;
  }
}

/* Formidable (and similar) label variables */
html[data-theme="dark"] .with_frm_style {
  --label-color: var(--color-page-text);
}

html[data-theme="dark"] .frm_style_formidable-style.with_frm_style .frm_description {
  color: var(--color-page-text) !important;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .with_frm_style {
    --label-color: var(--color-page-text);
  }

  html[data-theme="system"] .frm_style_formidable-style.with_frm_style .frm_description {
    color: var(--color-page-text) !important;
  }
}

body.pagelayer-body a#pn-button {
  color: var(--color-base-white);
}

body.pagelayer-body #aside-nav a,
body.pagelayer-body #top-nav a {
  color: var(--color-blue-muted);
}

body.pagelayer-body #top-nav a.text-blue-white,
body.pagelayer-body #top-nav a:not(.hhl):hover {
  color: var(--color-blue-white);
}

body.pagelayer-body #top-nav #top-nav-submenu a:hover {
  color: var(--color-blue-muted);
}

.hhl {
	color: var(--color-blue-muted) !important;
}

.hhl:hover {
	color: var(--color-brand-500) !important;
}
.protocol-menu-link,
.mobile-top-menu-link {
  margin-right: 0 !important;
  max-width: 100%;
}

.protocol-menu-row,
.mobile-top-menu-row {
  column-gap: 0.5rem;
  max-width: 100%;
  overflow: hidden;
}

.brand-row {
  --logo-gap: 16px;
  --logo-size: 70px;
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
}

@media (min-width: 1280px) {
  .brand-row {
    padding-top: 15px;
  }
}

.brand-left {
  display: none;
}

.brand-logo {
  width: var(--logo-size);
  height: var(--logo-size);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  position: absolute;
  left: 0;
}

@media (min-width: 1280px) {
  .brand-logo {
    left: 5px;
  }
}

.brand-spacer {
  display: none;
}

.brand-title {
  width: 100%;
  text-align: center;
  /* padding-left: calc(var(--logo-size) + var(--logo-gap)); */
  /* padding-right: calc(var(--logo-size) + var(--logo-gap)); */
  box-sizing: border-box;
  margin: 0 auto;
  margin-left: 30px;
}

.pagelayer-image img {
  display: inline-block;
}

.search-result a.bg-brand-500,
.search-result a.bg-brand-500:visited,
.search-result a.bg-brand-500:hover,
.search-result a.bg-brand-500:active {
  color: #ffffff !important;
}

.bf-topnav-active {
  background-color: var(--color-grey-blue-200);
}

/* Theme switcher */
.bf-theme-switcher {
  position: relative;
}

.bf-theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--color-grey-blue-200);
  background: var(--color-grey-blue-50);
  color: var(--color-blue-muted);
  font-weight: 700;
}

.bf-theme-btn:hover {
  background: var(--color-grey-blue-200);
}

.bf-theme-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 180px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--color-grey-blue-300);
  background: var(--color-grey-blue-50);
  z-index: 50;
}

.bf-theme-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 10px;
  border-radius: 10px;
  color: var(--color-blue-muted);
  font-weight: 700;
  background: transparent;
  border: 0;
}

.bf-theme-option:hover {
  background: var(--color-grey-blue-200);
}

.bf-theme-option[aria-checked="true"] {
  background: var(--color-grey-blue-200);
}

.bf-theme-mobile {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bf-theme-mobile-label {
  color: var(--color-blue-muted);
  font-weight: 700;
}

.bf-theme-mobile-options {
  display: flex;
  gap: 10px;
}

.bf-theme-chip {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--color-grey-blue-200);
  background: var(--color-grey-blue-50);
  color: var(--color-blue-muted);
  font-weight: 700;
}

.bf-theme-chip.is-active,
.bf-theme-chip[aria-pressed="true"] {
  background: var(--color-grey-blue-200);
}

html {
  color-scheme: light;
  --color-page-background: var(--color-base-white);
  --color-page-text: var(--color-blue-muted);
  --color-grey-blue-10: #f3f7fe;

  /* Pastel highlight palette (light theme) */
  --bf-pastel-blue-bg: #ebf7ff;
  --bf-pastel-blue-border: #cbebff;
  --bf-pastel-green-bg: #EAF8EF;
  --bf-pastel-green-border: #C6EACC;
  --bf-pastel-yellow-bg: #FFF7DF;
  --bf-pastel-yellow-border: #F2E1AA;
  --bf-pastel-pink-bg: #FFEAF2;
  --bf-pastel-pink-border: #F6C5D7;
  --bf-pastel-purple-bg: #F2ECFF;
  --bf-pastel-purple-border: #D9CBFF;

  /* wpDataTables palette defaults (uses the pastel blue accent) */
  --bf-wpdt-surface-bg: var(--color-grey-blue-50);
  --bf-wpdt-border: var(--color-grey-blue-300);
  --bf-wpdt-header-bg: var(--bf-pastel-blue-border);
  --bf-wpdt-header-text: var(--color-blue-title);
  --bf-wpdt-row-odd-bg: var(--bf-pastel-blue-bg);
  --bf-wpdt-body-text: var(--color-page-text);
}

/* Dark mode variables */
html[data-theme="dark"] {
  color-scheme: dark;

  --color-nav-background: #0b1220;
  --color-top-nav-background: #0b1220;
  --color-footer-background: #0b1220;
  --color-default-border: #22304a;

  --color-page-background: #0b1220;
  --color-page-text: var(--color-blue-muted);

  /* Pastel highlight palette (dark theme) */
  --bf-pastel-blue-bg: #13223A;
  --bf-pastel-blue-border: #1F3556;
  --bf-pastel-green-bg: #12281F;
  --bf-pastel-green-border: #1F3B2E;
  --bf-pastel-yellow-bg: #2A2212;
  --bf-pastel-yellow-border: #3F3318;
  --bf-pastel-pink-bg: #2C1820;
  --bf-pastel-pink-border: #452431;
  --bf-pastel-purple-bg: #231A33;
  --bf-pastel-purple-border: #35274D;

  --color-grey-blue-50: #111b2d;
  --color-grey-blue-200: #22304a;
  --color-grey-blue-300: #2f3f5c;

  --color-blue-muted: #c6d3e6;
  --color-blue-title: #f1f6ff;

  --color-blue-close: #6aa4d8;
  --color-brand-500: #6aa4d8;
}

html[data-theme="system"] {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    color-scheme: dark;

    --color-nav-background: #0b1220;
    --color-top-nav-background: #0b1220;
    --color-footer-background: #0b1220;
    --color-default-border: #22304a;

    --color-page-background: #0b1220;
    --color-page-text: var(--color-blue-muted);

    /* Pastel highlight palette (dark theme) */
    --bf-pastel-blue-bg: #13223A;
    --bf-pastel-blue-border: #1F3556;
    --bf-pastel-green-bg: #12281F;
    --bf-pastel-green-border: #1F3B2E;
    --bf-pastel-yellow-bg: #2A2212;
    --bf-pastel-yellow-border: #3F3318;
    --bf-pastel-pink-bg: #2C1820;
    --bf-pastel-pink-border: #452431;
    --bf-pastel-purple-bg: #231A33;
    --bf-pastel-purple-border: #35274D;

    --color-grey-blue-50: #111b2d;
    --color-grey-blue-200: #22304a;
    --color-grey-blue-300: #2f3f5c;

    --color-blue-muted: #c6d3e6;
    --color-blue-title: #f1f6ff;

    --color-blue-close: #6aa4d8;
    --color-brand-500: #6aa4d8;
  }
}

@media (max-width: 450px) {
  .pagelayer-table { overflow-x: auto; max-width: 100%; }
  .pagelayer-table-holder { width: 100% !important; max-width: 100%; }
  .pagelayer-table td, .pagelayer-table th, .pagelayer-table a{
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
  }
  .pagelayer-table table{ max-width: 100%; }
}

.submenu-toggle {
  margin-left: 20px;
}

@media (min-width: 1280px) {
  #aside-nav #mmb-menu {
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .protocol-menu-row .submenu-toggle,
  .mobile-top-menu-row .submenu-toggle {
    justify-self: end;
  }
}

@media (max-width: 1279px) {
  body.bf-menu-open #aside-nav {
    position: fixed;
    top: var(--wp-admin--admin-bar--height, 0px);
    left: 0;
    right: 0;
    z-index: 65;
    background: var(--color-nav-background);
    height: var(--bf-nav-height, 112px);
  }
  #aside-nav #mmb {
    position: fixed;
    top: calc(
      var(--wp-admin--admin-bar--height, 0px) +
      (var(--bf-nav-height, 112px) - var(--bf-mmb-height, 32px)) / 2
    );
    right: 12px;
    z-index: 70;
    background: var(--color-nav-background);
    border: 1px solid var(--color-default-border);
    border-radius: 10px;
  }
  #aside-nav {
    position: static;
    z-index: auto;
  }

  #aside-nav #mmb-menu {
    position: fixed;
    top: calc(var(--bf-mmb-top, 0px) + var(--bf-mmb-height, 0px) + 8px) !important;
    bottom: auto !important;
    left: 0;
    right: 0;
    z-index: 60;
    max-height: calc(var(--bf-viewport-height, 100dvh) - var(--bf-mmb-top, 0px) - var(--bf-mmb-height, 0px) - 8px) !important;
    height: calc(var(--bf-viewport-height, 100dvh) - var(--bf-mmb-top, 0px) - var(--bf-mmb-height, 0px) - 8px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body.bf-menu-open #aside-nav #mmb-menu {
    top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--bf-nav-height, 112px)) !important;
    max-height: calc(var(--bf-viewport-height, 100dvh) - var(--wp-admin--admin-bar--height, 0px) - var(--bf-nav-height, 112px)) !important;
    height: calc(var(--bf-viewport-height, 100dvh) - var(--wp-admin--admin-bar--height, 0px) - var(--bf-nav-height, 112px));
  }
  .protocol-menu-link,
  .mobile-top-menu-link {
    /* padding-right: 5rem; */
    min-width: 0;
  }

  .protocol-menu-row,
  .mobile-top-menu-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    /* column-gap: 1.25rem; */
    align-items: center;
  }
}