/* =========================================================
   Sierhuis klantportaal — één stylesheet voor alle pagina's
   Laadt ná CX_UI / Bootstrap 5.3 ($document.getCSS()).

   1. Tokens
   2. Basis
   3. App-shell (sidebar + main)
   4. Componenten (knoppen, chips, velden, kop, board, lege staat)
   5. Orderlijst (overzicht + mijn orders)
   6. Orderdetail
   7. Winkelwagen
   8. Modal Overwrite
   9. Responsive
   ========================================================= */
/* =========================================================
   1. Tokens
   ========================================================= */
:root {
  --groen: #00B141;
  --groen-donker: #009436;
  --groen-licht: #E5F7EC;
  --donker: #323E48;
  --nacht: #19242E;
  --grijs: #7B868C;
  --lijn: #E4E7E9;
  --bg: #F3F4F5;
  --wit: #FFFFFF;
  --zacht: #FBFCFD;
  --kop-bg: #F8FAFB;
  --rood: #F32735;
  --rood-donker: #D31F2C;
  --rood-licht: #FEE9EB;
  --oranje: #E8890C;
  --oranje-licht: #FDF3E4;
  --blauw: #1779BA;
  --blauw-licht: #E7F1F8;
  --radius: 14px;
  --radius-m: 12px;
  --radius-s: 9px;
  --schaduw: 0 1px 3px rgba(25,36,46,.06), 0 4px 16px rgba(25,36,46,.05);
  --schaduw-hover: 0 2px 6px rgba(25,36,46,.08), 0 10px 28px rgba(25,36,46,.10);
  --schaduw-plat: 0 1px 2px rgba(25,36,46,.04);
  --sidebar-breedte: 236px;
}

/* =========================================================
   2. Basis
   ========================================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: "Montserrat", -apple-system, sans-serif;
  background: var(--bg);
  color: var(--donker);
  font-size: 14px;
  line-height: 1.55;
}

.muted {
  color: var(--grijs);
  font-size: 12.5px;
}

.meta {
  color: var(--grijs);
  font-size: 11.5px;
  margin-top: 2px;
}

/* =========================================================
   3. App-shell
   ========================================================= */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar-breedte);
  z-index: 50;
  background: var(--wit);
  border-right: 1px solid var(--lijn);
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  overflow-y: auto;
}

.sidebar .merk {
  display: block;
  padding: 0 6px 4px;
}

.sidebar .merk svg {
  height: 30px;
  width: auto;
  display: block;
}

.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 24px;
}

.sidebar nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--radius-s);
  color: var(--grijs);
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.sidebar nav a:hover {
  background: var(--bg);
  color: var(--donker);
}

.sidebar nav a.actief {
  background: var(--groen-licht);
  color: var(--groen-donker);
}

.sidebar nav a svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.sidebar nav .nav-scheiding {
  height: 1px;
  background: var(--lijn);
  margin: 8px 12px;
}

.sidebar nav .nav-kop {
  padding: 14px 12px 6px;
  color: var(--grijs);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sidebar .account {
  margin-top: auto;
  border-top: 1px solid var(--lijn);
  padding-top: 14px;
}

.sidebar .account .wie {
  font-size: 12px;
  color: var(--grijs);
  padding: 0 12px;
  margin-bottom: 8px;
  word-break: break-all;
}

.sidebar .account a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--grijs);
  font-weight: 600;
  font-size: 12.5px;
  text-decoration: none;
}

.sidebar .account a:hover {
  background: var(--bg);
  color: var(--donker);
}

.main {
  margin-left: var(--sidebar-breedte);
  min-height: 100vh;
}

.wrap {
  padding: 28px 28px 60px;
  max-width: 1240px;
}

/* =========================================================
   4. Componenten
   ========================================================= */
/* ---------- Paginakop ---------- */
.pagina-kop {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.pagina-kop h1 {
  font-size: 24px;
  line-height: 1.15;
  font-weight: 800;
  margin: 0;
  color: var(--donker);
}

.pagina-kop .sub {
  color: var(--grijs);
  font-size: 13.5px;
  margin-top: 5px;
  max-width: 650px;
}

.terug {
  color: var(--grijs);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 14px;
}

.terug:hover {
  color: var(--donker);
}

/* ---------- Chips ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 99px;
  white-space: nowrap;
  background: var(--bg);
  color: var(--grijs);
}

.chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: currentColor;
}

.chip.groen {
  background: var(--groen-licht);
  color: var(--groen-donker);
}

.chip.oranje {
  background: var(--oranje-licht);
  color: var(--oranje);
}

.chip.rood {
  background: var(--rood-licht);
  color: var(--rood);
}

.chip.blauw {
  background: var(--blauw-licht);
  color: var(--blauw);
}

.chip.grijs {
  background: var(--bg);
  color: var(--grijs);
}

/* ---------- Knoppen ---------- */
.btn {
  display: inline-block;
  background: var(--groen);
  color: var(--wit);
  border: 1px solid var(--groen);
  padding: 10px 18px;
  border-radius: var(--radius-s);
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}

.btn:hover {
  background: var(--groen-donker);
  border-color: var(--groen-donker);
  color: var(--wit);
}

.btn.secundair {
  background: var(--wit);
  color: var(--donker);
  border-color: var(--lijn);
}

.btn.secundair:hover {
  background: var(--bg);
  color: var(--donker);
}

.btn.rood {
  background: var(--rood);
  border-color: var(--rood);
}

.btn.rood:hover {
  background: var(--rood-donker);
  border-color: var(--rood-donker);
}

.btn.klein {
  padding: 7px 13px;
  font-size: 12.5px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* CX/Bootstrap .btn-primary in eigen pagina's */
.btn-primary {
  background: var(--groen) !important;
  border-color: var(--groen) !important;
  color: var(--wit) !important;
}

.btn-primary:hover {
  background: var(--groen-donker) !important;
  border-color: var(--groen-donker) !important;
}

.btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-icoon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--lijn);
  background: var(--wit);
  color: var(--grijs);
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.btn-icoon svg {
  width: 15px;
  height: 15px;
}

.btn-icoon:hover {
  background: var(--bg);
  color: var(--donker);
}

.btn-icoon.gevaar:hover {
  background: var(--rood-licht);
  border-color: #F9C4C8;
  color: var(--rood);
}

/* ---------- Zoekveld ---------- */
.zoek {
  position: relative;
  margin-bottom: 18px;
  max-width: 460px;
}

.zoek input {
  width: 100%;
  padding: 11px 13px 11px 38px;
  border: 1px solid var(--lijn);
  border-radius: 10px;
  font: inherit;
  font-size: 13.5px;
  color: var(--donker);
  background: var(--wit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237B868C' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") no-repeat 12px center;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.zoek input:focus {
  outline: none;
  border-color: var(--groen);
  box-shadow: 0 0 0 3px var(--groen-licht);
}

/* ---------- Board (witte kaart met kop) ---------- */
.board {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--schaduw-plat);
  margin-bottom: 18px;
}

.board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--lijn);
}

.board-head h2 {
  font-size: 16px;
  font-weight: 800;
  margin: 0;
  color: var(--donker);
}

.board-head .sub {
  color: var(--grijs);
  font-size: 12px;
  margin-top: 1px;
}

.board-head .teller {
  color: var(--grijs);
  font-size: 12px;
  font-weight: 800;
  background: var(--bg);
  border-radius: 99px;
  padding: 3px 10px;
}

/* ---------- Lege staat ---------- */
.leeg {
  padding: 38px 18px;
  text-align: center;
  color: var(--grijs);
  font-size: 13.5px;
}

.leeg strong {
  display: block;
  color: var(--donker);
  font-size: 15px;
  margin-bottom: 4px;
}

.leeg .icoon {
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 99px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grijs);
}

.leeg .icoon svg {
  width: 24px;
  height: 24px;
}

.leeg .btn {
  margin-top: 16px;
}

.leeg-kaart {
  background: var(--wit);
  border: 1px dashed var(--lijn);
  border-radius: var(--radius-m);
}

/* ---------- Service-kaart (orderdetail) ---------- */
.service-card {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-m);
  padding: 20px 22px;
  margin-bottom: 16px;
  box-shadow: var(--schaduw-plat);
}

.service-card h2 {
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--donker);
}

.service-card p {
  color: var(--grijs);
  font-size: 13.5px;
  margin-bottom: 10px;
}

/* =========================================================
   5. Orderlijst — <a class="order-rij"> per order
   ========================================================= */
.order-lijst {
  display: flex;
  flex-direction: column;
}

.order-kolommen, .order-rij {
  display: grid;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
  grid-template-columns: 110px minmax(0, 1.1fr) minmax(0, 1.6fr) 130px 120px 130px 16px;
}

.order-kolommen {
  background: var(--kop-bg);
  border-bottom: 1px solid var(--lijn);
  padding-top: 10px;
  padding-bottom: 10px;
  color: var(--grijs);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.order-rij {
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--lijn);
  color: var(--donker);
  text-decoration: none;
  transition: background 0.15s;
}

.order-rij:last-child {
  border-bottom: none;
}

.order-rij:hover {
  background: var(--zacht);
  color: var(--donker);
}

.order-rij:hover .or-pijl {
  color: var(--groen-donker);
  transform: translateX(2px);
}

.order-rij:focus-visible {
  outline: 2px solid var(--groen);
  outline-offset: -2px;
}

.order-rij > * {
  min-width: 0;
}

.or-nummer {
  font-weight: 800;
}

.or-org, .or-titel {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.or-org {
  font-size: 13px;
}

.or-titel {
  font-weight: 700;
}

.or-titel.leeg-veld {
  color: var(--grijs);
  font-weight: 600;
}

.or-sub {
  color: var(--grijs);
  font-size: 12px;
  margin-top: 2px;
}

.or-datum, .or-levering {
  color: var(--grijs);
  font-size: 12.5px;
  font-weight: 600;
}

.order-kolommen .or-levering {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.or-pijl {
  color: #B8C0C4;
  font-weight: 800;
  transition: color 0.15s, transform 0.15s;
}

.or-label {
  display: none;
}

/* =========================================================
   6. Orderdetail
   ========================================================= */
.order-shell {
  max-width: 980px;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-m);
  padding: 12px;
  margin-bottom: 16px;
  box-shadow: var(--schaduw-plat);
}

.summary-item {
  border-right: 1px solid var(--lijn);
  padding: 5px 10px;
  min-width: 0;
}

.summary-item:last-child {
  border-right: none;
}

.summary-label {
  color: var(--grijs);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.summary-value {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Productregels */
.regel-lijst {
  border: 1px solid var(--lijn);
  border-radius: 10px;
  overflow: hidden;
}

.regel-kolommen, .regel {
  display: grid;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  grid-template-columns: minmax(0, 1.6fr) 70px minmax(0, 0.9fr) minmax(0, 1.2fr) 120px;
}

.regel-kolommen {
  background: var(--kop-bg);
  border-bottom: 1px solid var(--lijn);
  padding-top: 9px;
  padding-bottom: 9px;
  color: var(--grijs);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.regel {
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--lijn);
}

.regel:last-child {
  border-bottom: none;
}

.regel > * {
  min-width: 0;
}

.regel .line-title {
  font-weight: 800;
}

.regel .aantal {
  font-weight: 800;
}

.regel .actie {
  text-align: right;
}

.regel .muted {
  overflow-wrap: anywhere;
}

/* Drukproef */
.proof-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border-left: 4px solid var(--oranje);
}

.proof-card.klaar {
  border-left-color: var(--groen);
}

.proof-card .proof-meta {
  color: var(--oranje);
  font-size: 12.5px;
  font-weight: 800;
  margin-bottom: 4px;
}

.proof-card.klaar .proof-meta {
  color: var(--groen-donker);
}

.proof-card p {
  margin: 0;
}

/* Tijdlijn */
.timeline-card {
  background: var(--zacht);
}

.tijdlijn {
  position: relative;
  padding-left: 22px;
}

.tijdlijn::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--lijn);
}

.tl-item {
  position: relative;
  padding-bottom: 16px;
}

.tl-item:last-child {
  padding-bottom: 0;
}

.tl-item::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 3px;
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: var(--grijs);
  border: 2px solid var(--wit);
  box-shadow: 0 0 0 1px var(--lijn);
}

.tl-item.tl-klant::before {
  background: var(--blauw);
  box-shadow: 0 0 0 1px var(--blauw);
}

.tl-item.tl-admin::before {
  background: var(--groen);
  box-shadow: 0 0 0 1px var(--groen);
}

.tl-item:last-child::before {
  box-shadow: 0 0 0 4px var(--groen-licht);
}

.tl-tekst {
  font-size: 13px;
  font-weight: 700;
}

.tl-tijd {
  font-size: 11.5px;
  color: var(--grijs);
  margin-top: 1px;
}

/* =========================================================
   7. Winkelwagen — één kaart per weborder
   ========================================================= */
.cart-order {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--schaduw-plat);
  margin-bottom: 18px;
}

.cart-order-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--lijn);
}

.cart-order-kop h2 {
  font-size: 16px;
  font-weight: 800;
  margin: 0;
  color: var(--donker);
}

.cart-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-bottom: 1px solid var(--lijn);
  background: var(--zacht);
}

.cart-info > div {
  padding: 14px 18px;
  border-right: 1px solid var(--lijn);
  min-width: 0;
}

.cart-info > div:last-child {
  border-right: none;
}

.cart-info .label {
  color: var(--grijs);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.cart-info .waarde {
  font-size: 13px;
  overflow-wrap: anywhere;
}

.cart-info .leeg-veld {
  color: #A6AEB3;
  font-style: italic;
  font-size: 12.5px;
}

.cart-cols, .cart-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 70px;
  gap: 14px;
  align-items: center;
  padding: 0 18px;
}

.cart-cols {
  background: var(--kop-bg);
  border-bottom: 1px solid var(--lijn);
  padding-top: 10px;
  padding-bottom: 10px;
  color: var(--grijs);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cart-cols .rechts {
  text-align: right;
}

.cart-line {
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--lijn);
  transition: background 0.15s;
}

.cart-line:hover {
  background: var(--zacht);
}

.cart-line .line-title {
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-line .line-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 5px;
}

.cart-qty {
  justify-self: start;
  background: var(--bg);
  border-radius: 8px;
  padding: 5px 10px;
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
}

.cart-qty small {
  color: var(--grijs);
  font-weight: 700;
  font-size: 11px;
  margin-left: 2px;
}

.cart-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.cart-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  background: var(--zacht);
  border-top: 1px solid var(--lijn);
}

.cart-foot .muted b {
  color: var(--donker);
}

/* =========================================================
   8. Modal Overwrite
   Gegenereerde CX-modal (#cx_modal). HTML is niet aan te passen.

   Let op: de draggable-module van CX zet zelf inline styles op
   .modal-dialog / .modal-content (positie, margin, transform,
   width). Daarom hier GEEN !important op positie, margin, width,
   transform of overflow van die twee elementen — alleen uiterlijk,
   via de Bootstrap-variabelen. De header blijft sticky en sleepbaar.
   ========================================================= */
.modal-backdrop {
  --bs-backdrop-bg: var(--nacht);
  --bs-backdrop-opacity: .45;
}

#cx_modal {
  --bs-modal-bg: var(--bg);
  --bs-modal-color: var(--donker);
  --bs-modal-border-color: var(--lijn);
  --bs-modal-border-radius: var(--radius);
  --bs-modal-inner-border-radius: calc(var(--radius) - 1px);
  --bs-modal-box-shadow: 0 24px 64px rgba(25,36,46,.22);
  --bs-modal-header-padding: 12px 16px;
  --bs-modal-header-border-color: var(--lijn);
  --bs-modal-padding: 20px;
  font-family: "Montserrat", -apple-system, sans-serif;
}

#cx_modal .modal-content {
  box-shadow: var(--bs-modal-box-shadow);
  max-width: 100%;
}

/* Header: alleen achtergrond/kleur — display, position en cursor blijven van CX */
#cx_modal .modal-header {
  background: var(--wit);
}

#cx_modal .modal-title, #cx_modal .modal-header h1, #cx_modal .modal-header h4, #cx_modal .modal-header h5 {
  font-size: 15px;
  font-weight: 800;
  color: var(--donker);
}

#cx_modal .btn-close {
  width: 32px;
  height: 32px;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid var(--lijn);
  border-radius: 8px;
  background-color: var(--wit);
  background-size: 10px;
  opacity: 0.7;
  transition: background-color 0.15s, opacity 0.15s, border-color 0.15s;
}

#cx_modal .btn-close:hover {
  background-color: var(--rood-licht);
  border-color: #F9C4C8;
  opacity: 1;
}

#cx_modal .btn-close:focus {
  box-shadow: 0 0 0 3px var(--groen-licht);
}

/* Paragrafen → kaarten */
#cx_modal .cx_paragraph-wrapper {
  margin: 0 0 14px !important;
}

#cx_modal .cx_paragraph-wrapper > .cx_grid-col {
  padding: 0 !important;
  width: 100% !important;
}

#cx_modal .card {
  background: var(--wit) !important;
  border: 1px solid var(--lijn) !important;
  border-radius: var(--radius-m) !important;
  box-shadow: var(--schaduw-plat) !important;
  overflow: hidden;
}

#cx_modal .card-header {
  background: var(--wit) !important;
  border-bottom: 1px solid var(--lijn) !important;
  padding: 14px 18px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--donker) !important;
  border-radius: 0 !important;
}

#cx_modal .card-body {
  padding: 16px 18px !important;
}

#cx_modal .cx_fieldlines {
  margin: 0 !important;
}

/* Veldregels — label | invoer */
#cx_modal .cx_fieldline {
  display: grid !important;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 0 0 10px !important;
}

#cx_modal .cx_fieldline:last-child {
  margin-bottom: 0 !important;
}

#cx_modal .cx_fieldline > .cx_grid-col {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
}

#cx_modal .cx_control-label-left {
  text-align: left !important;
  padding: 0 !important;
}

#cx_modal .cx_label {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--donker) !important;
  padding: 0 !important;
}

#cx_modal .cx_widget {
  width: 100%;
}

#cx_modal .form-control, #cx_modal .form-select {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid var(--lijn) !important;
  border-radius: 8px !important;
  font-family: inherit !important;
  font-size: 13.5px !important;
  color: var(--donker) !important;
  background-color: var(--wit) !important;
  box-shadow: none !important;
  margin: 0 !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}

#cx_modal .form-control:focus, #cx_modal .form-select:focus {
  border-color: var(--groen) !important;
  box-shadow: 0 0 0 3px var(--groen-licht) !important;
  outline: none !important;
}

/* Maten — tegels */
#cx_modal .cx_paragraph-Maten .cx_fieldlines {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
}

#cx_modal .cx_paragraph-Maten .cx_fieldline {
  grid-template-columns: 1fr;
  gap: 4px;
  margin: 0 !important;
  background: var(--zacht);
  border: 1px solid var(--lijn);
  border-radius: 10px;
  padding: 8px 8px 9px;
  transition: border-color 0.15s, background 0.15s;
}

#cx_modal .cx_paragraph-Maten .cx_fieldline:focus-within {
  border-color: var(--groen);
  background: var(--groen-licht);
}

#cx_modal .cx_paragraph-Maten .cx_control-label-left {
  text-align: center !important;
}

#cx_modal .cx_paragraph-Maten .cx_label {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--grijs) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#cx_modal .cx_paragraph-Maten .form-control {
  text-align: center !important;
  font-weight: 800 !important;
  padding: 8px 6px !important;
}

/* Knoppenbalk */
#cx_modal .cx_btn-toolbar {
  display: flex !important;
  justify-content: flex-end !important;
  margin: 4px 0 0 !important;
}

#cx_modal .btn-toolbar {
  display: flex !important;
  gap: 10px;
  justify-content: flex-end !important;
}

#cx_modal .cx_btn-toolbar > .btn-toolbar > .btn {
  margin: 0 !important;
}

#cx_modal .btn {
  padding: 10px 20px !important;
  border-radius: var(--radius-s) !important;
  font-family: inherit !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
}

#cx_modal .btn-primary {
  background: var(--groen) !important;
  border-color: var(--groen) !important;
  color: var(--wit) !important;
}

#cx_modal .btn-primary:hover {
  background: var(--groen-donker) !important;
  border-color: var(--groen-donker) !important;
}

#cx_modal .btn-secondary, #cx_modal .btn-light, #cx_modal .btn-default {
  background: var(--wit) !important;
  border: 1px solid var(--lijn) !important;
  color: var(--donker) !important;
}

/* =========================================================
   9. Responsive
   ========================================================= */
@media (max-width: 1100px) {
  .order-kolommen, .order-rij {
    grid-template-columns: 100px minmax(0, 1fr) minmax(0, 1.4fr) 120px 120px 16px;
  }
  .order-kolommen .or-levering, .order-rij .or-levering {
    display: none;
  }
}
@media (max-width: 900px) {
  /* Sidebar wordt een balk bovenaan: logo + uitloggen, daaronder de nav */
  .sidebar {
    position: sticky;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: auto;
    bottom: auto;
    padding: 10px 14px 0;
    border-right: none;
    border-bottom: 1px solid var(--lijn);
    gap: 6px 12px;
    overflow: visible;
  }
  .sidebar .merk {
    padding: 0;
    flex-shrink: 0;
  }
  .sidebar .merk svg {
    height: 24px;
  }
  .sidebar nav {
    order: 3;
    flex: 1 0 100%;
    flex-direction: row;
    align-items: center;
    margin: 0 -14px;
    padding: 0 10px 8px;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .sidebar nav::-webkit-scrollbar {
    display: none;
  }
  .sidebar nav a {
    padding: 8px 10px;
    gap: 6px;
    white-space: nowrap;
    font-size: 13px;
  }
  .sidebar nav a svg {
    display: none;
  }
  .sidebar nav .nav-kop {
    display: none;
  }
  .sidebar nav .nav-scheiding {
    width: 1px;
    height: 20px;
    margin: 0 6px;
    flex-shrink: 0;
  }
  .sidebar .account {
    margin: 0 0 0 auto;
    border-top: none;
    padding-top: 0;
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  .sidebar .account .wie, .sidebar .account .wachtwoord-link, .sidebar .account .hulp-link {
    display: none;
  }
  .sidebar .account a {
    padding: 8px 10px;
    white-space: nowrap;
    font-size: 12px;
  }
  .main {
    margin-left: 0;
  }
  .wrap {
    padding: 20px 14px 40px;
  }
  /* Orderlijst → kaartjes */
  .order-kolommen {
    display: none;
  }
  .order-rij {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "nummer status" "titel titel" "org org" "datum levering";
    gap: 4px 12px;
    padding: 14px 16px;
  }
  .order-rij .or-nummer {
    grid-area: nummer;
  }
  .order-rij .or-status {
    grid-area: status;
    justify-self: end;
  }
  .order-rij .or-omschrijving {
    grid-area: titel;
  }
  .order-rij .or-org {
    grid-area: org;
    color: var(--grijs);
    font-size: 12.5px;
  }
  .order-rij .or-datum {
    grid-area: datum;
  }
  .order-rij .or-levering {
    grid-area: levering;
    display: block !important;
    justify-self: end;
    text-align: right;
  }
  .order-rij .or-pijl {
    display: none;
  }
  .or-label {
    display: inline;
    font-weight: 800;
  }
}
@media (max-width: 760px) {
  .pagina-kop {
    flex-direction: column;
    align-items: flex-start;
  }
  /* Orderdetail */
  .summary-grid {
    grid-template-columns: 1fr;
  }
  .summary-item {
    border-right: none;
    border-bottom: 1px solid var(--lijn);
  }
  .summary-item:last-child {
    border-bottom: none;
  }
  .proof-card {
    grid-template-columns: 1fr;
  }
  .regel-kolommen {
    display: none;
  }
  .regel {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "titel knop" "aantal knop" "kleur knop" "maten knop";
    gap: 2px 12px;
  }
  .regel .line-title {
    grid-area: titel;
  }
  .regel .aantal {
    grid-area: aantal;
    font-weight: 600;
    font-size: 12.5px;
  }
  .regel .aantal::before {
    content: "Aantal: ";
    color: var(--grijs);
  }
  .regel .kleur {
    grid-area: kleur;
  }
  .regel .maten {
    grid-area: maten;
  }
  .regel .actie {
    grid-area: knop;
  }
  /* Winkelwagen */
  .cart-info {
    grid-template-columns: 1fr;
  }
  .cart-info > div {
    border-right: none;
    border-bottom: 1px solid var(--lijn);
  }
  .cart-info > div:last-child {
    border-bottom: none;
  }
  .cart-cols {
    display: none;
  }
  .cart-line {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 8px;
  }
  .cart-qty {
    grid-column: 1;
    grid-row: 2;
  }
  .cart-actions {
    grid-column: 2;
    grid-row: 1/span 2;
  }
  .cart-foot {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .cart-foot .btn-row {
    flex-direction: column-reverse;
  }
  .cart-foot .btn {
    text-align: center;
  }
  /* Modal Overwrite */
  #cx_modal .cx_fieldline {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  #cx_modal .cx_paragraph-Maten .cx_fieldlines {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #cx_modal .btn-toolbar, #cx_modal .btn-toolbar > .btn {
    width: 100%;
    text-align: center;
  }
}
/* =========================================================
   10. CX-pagina's — standaard CrossMarx zoek- en detailschermen
   ========================================================= */
/* =========================================================
   CX-thema — Bootstrap 5.3 / CX_UI 5.1 op de huisstijl
   Geïmporteerd in styles.scss (na de tokens).

   Werkt globaal: ook modals, popovers, tooltips en dropdowns,
   die CX buiten de pagina aan <body> hangt.

   Hoe de CX-stylesheet in elkaar zit, en dus hoe dit bestand werkt:
   1. :root-variabelen (--bs-*, --cx-*). Kleur, font, randen, radius,
      links, focus. Hier gemapt → alerts, badges, bg-*, text-bg-*,
      border-*, link-*, list-group-varianten en tooltips volgen vanzelf.
   2. Componenten waar Sass de CX-blauw (#0075DB) of het grijs
      (#6c757d) hard in de eigen variabelen heeft gecompileerd.
      Die volgen :root níet en worden hieronder één voor één gezet.
   3. CX-eigen klassen met hardcoded blauw (tags, suggesties,
      toggles, wizardknoppen, voortgang).
   Niet gemapt: CX design-modus (tree, slepen, editor) — alleen
   zichtbaar voor beheerders in de layout-editor.
   ========================================================= */
/* ---------- 1. Root-variabelen ---------- */
:root,
[data-bs-theme=light] {
  /* Kleuren */
  --bs-primary: #00B141;
  --bs-primary-rgb: 0, 177, 65;
  --bs-secondary: #7B868C;
  --bs-secondary-rgb: 123, 134, 140;
  --bs-success: #009436;
  --bs-success-rgb: 0, 148, 54;
  --bs-info: #1779BA;
  --bs-info-rgb: 23, 121, 186;
  --bs-warning: #E8890C;
  --bs-warning-rgb: 232, 137, 12;
  --bs-danger: #F32735;
  --bs-danger-rgb: 243, 39, 53;
  --bs-light: #FBFCFD;
  --bs-light-rgb: 251, 252, 253;
  --bs-dark: #19242E;
  --bs-dark-rgb: 25, 36, 46;
  --bs-blue: #1779BA;
  --bs-green: #00B141;
  --bs-red: #F32735;
  --bs-orange: #E8890C;
  --bs-yellow: #E8890C;
  --bs-primary-text-emphasis: #00471A;
  --bs-primary-bg-subtle: #E5F7EC;
  --bs-primary-border-subtle: #99E0B3;
  --bs-secondary-text-emphasis: #313638;
  --bs-secondary-bg-subtle: #F3F4F5;
  --bs-secondary-border-subtle: #CACFD1;
  --bs-success-text-emphasis: #003B16;
  --bs-success-bg-subtle: #E5F7EC;
  --bs-success-border-subtle: #99D4AF;
  --bs-info-text-emphasis: #09304A;
  --bs-info-bg-subtle: #E7F1F8;
  --bs-info-border-subtle: #A2C9E3;
  --bs-warning-text-emphasis: #5D3705;
  --bs-warning-bg-subtle: #FDF3E4;
  --bs-warning-border-subtle: #F6D09E;
  --bs-danger-text-emphasis: #611015;
  --bs-danger-bg-subtle: #FEE9EB;
  --bs-danger-border-subtle: #FAA9AE;
  --bs-light-text-emphasis: #7B868C;
  --bs-light-bg-subtle: #FBFCFD;
  --bs-light-border-subtle: #E4E7E9;
  --bs-dark-text-emphasis: #323E48;
  --bs-dark-bg-subtle: #D1D3D5;
  --bs-dark-border-subtle: #A3A7AB;
  /* Tekst en achtergrond */
  --bs-font-sans-serif: "Montserrat", -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 0.875rem;
  --bs-body-line-height: 1.55;
  --bs-body-color: #323E48;
  --bs-body-color-rgb: 50, 62, 72;
  --bs-body-bg: #FFFFFF;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color: #323E48;
  --bs-emphasis-color-rgb: 50, 62, 72;
  --bs-secondary-color: #7B868C;
  --bs-secondary-color-rgb: 123, 134, 140;
  --bs-secondary-bg: #F3F4F5;
  --bs-secondary-bg-rgb: 243, 244, 245;
  --bs-tertiary-color: #A6AEB3;
  --bs-tertiary-color-rgb: 166, 174, 179;
  --bs-tertiary-bg: #FBFCFD;
  --bs-tertiary-bg-rgb: 251, 252, 253;
  --bs-heading-color: #323E48;
  --bs-highlight-bg: #FDF3E4;
  --bs-code-color: #009436;
  /* Links */
  --bs-link-color: #009436;
  --bs-link-color-rgb: 0, 148, 54;
  --bs-link-hover-color: #007E2E;
  --bs-link-hover-color-rgb: 0, 126, 46;
  /* Randen, radius, schaduw, focus */
  --bs-border-color: #E4E7E9;
  --bs-border-color-translucent: rgba(25, 36, 46, .12);
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: 12px;
  --bs-border-radius-xl: 14px;
  --bs-border-radius-xxl: 20px;
  --bs-box-shadow: 0 2px 6px rgba(25,36,46,.08), 0 10px 28px rgba(25,36,46,.10);
  --bs-box-shadow-sm: 0 1px 2px rgba(25,36,46,.04);
  --bs-box-shadow-lg: 0 24px 64px rgba(25,36,46,.22);
  --bs-focus-ring-color: rgba(0, 177, 65, .25);
  --bs-focus-ring-width: 3px;
  /* Formuliervalidatie */
  --bs-form-valid-color: #009436;
  --bs-form-valid-border-color: #00B141;
  --bs-form-invalid-color: #F32735;
  --bs-form-invalid-border-color: #F32735;
  /* CX-eigen */
  --cx-body-bg: var(--bg);
  --cx-content-bg: transparent;
  --cx-tabpanel-bg: var(--wit);
  --cx-alert-bg: var(--wit);
  --cx-link-decoration: none;
  --cx_section-paging-toolbar-bg: var(--bg);
}

/* ---------- 2. Componenten met hardcoded kleuren ---------- */
/* Knoppen — basis */
.btn {
  --bs-btn-font-family: inherit;
  --bs-btn-padding-x: 16px;
  --bs-btn-padding-y: 9px;
  --bs-btn-font-size: 13.5px;
  --bs-btn-font-weight: 700;
  --bs-btn-line-height: 1.4;
  --bs-btn-border-radius: var(--radius-s);
  --bs-btn-focus-box-shadow: 0 0 0 3px rgba(0, 177, 65, .25); /* CX zet hem op none */
  --bs-btn-disabled-opacity: .5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.btn-sm, .btn-group-sm > .btn {
  --bs-btn-padding-x: 13px;
  --bs-btn-padding-y: 7px;
  --bs-btn-font-size: 12.5px;
  --bs-btn-border-radius: 8px;
}

.btn-lg, .btn-group-lg > .btn {
  --bs-btn-padding-x: 20px;
  --bs-btn-padding-y: 12px;
  --bs-btn-font-size: 15px;
  --bs-btn-border-radius: var(--radius-m);
}

/* Gevulde varianten */
.btn-primary, .btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--groen);
  --bs-btn-border-color: var(--groen);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--groen-donker);
  --bs-btn-hover-border-color: var(--groen-donker);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #008E34;
  --bs-btn-active-border-color: #008E34;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--groen);
  --bs-btn-disabled-border-color: var(--groen);
  --bs-btn-focus-shadow-rgb: 0, 177, 65;
}

.btn-secondary, .btn-light {
  --bs-btn-color: var(--donker);
  --bs-btn-bg: var(--wit);
  --bs-btn-border-color: var(--lijn);
  --bs-btn-hover-color: var(--donker);
  --bs-btn-hover-bg: var(--bg);
  --bs-btn-hover-border-color: #D3D8DB;
  --bs-btn-active-color: var(--donker);
  --bs-btn-active-bg: var(--lijn);
  --bs-btn-active-border-color: #D3D8DB;
  --bs-btn-disabled-color: var(--grijs);
  --bs-btn-disabled-bg: var(--wit);
  --bs-btn-disabled-border-color: var(--lijn);
  --bs-btn-focus-shadow-rgb: 123, 134, 140;
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--rood);
  --bs-btn-border-color: var(--rood);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--rood-donker);
  --bs-btn-hover-border-color: var(--rood-donker);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #C21F2A;
  --bs-btn-active-border-color: #C21F2A;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--rood);
  --bs-btn-disabled-border-color: var(--rood);
  --bs-btn-focus-shadow-rgb: 243, 39, 53;
}

.btn-warning {
  --bs-btn-color: var(--nacht);
  --bs-btn-bg: var(--oranje);
  --bs-btn-border-color: var(--oranje);
  --bs-btn-hover-color: var(--nacht);
  --bs-btn-hover-bg: #C5740A;
  --bs-btn-hover-border-color: #C5740A;
  --bs-btn-active-color: var(--nacht);
  --bs-btn-active-bg: #BA6E0A;
  --bs-btn-active-border-color: #BA6E0A;
  --bs-btn-disabled-color: var(--nacht);
  --bs-btn-disabled-bg: var(--oranje);
  --bs-btn-disabled-border-color: var(--oranje);
  --bs-btn-focus-shadow-rgb: 232, 137, 12;
}

.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--blauw);
  --bs-btn-border-color: var(--blauw);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #14679E;
  --bs-btn-hover-border-color: #14679E;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #126195;
  --bs-btn-active-border-color: #126195;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--blauw);
  --bs-btn-disabled-border-color: var(--blauw);
  --bs-btn-focus-shadow-rgb: 23, 121, 186;
}

.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--nacht);
  --bs-btn-border-color: var(--nacht);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--donker);
  --bs-btn-hover-border-color: var(--donker);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--donker);
  --bs-btn-active-border-color: var(--donker);
}

/* Outline-varianten */
.btn-outline-primary, .btn-outline-success {
  --bs-btn-color: var(--groen-donker);
  --bs-btn-border-color: var(--groen);
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--groen);
  --bs-btn-hover-border-color: var(--groen);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--groen-donker);
  --bs-btn-active-border-color: var(--groen-donker);
  --bs-btn-disabled-color: var(--groen-donker);
  --bs-btn-disabled-border-color: var(--groen);
  --bs-btn-focus-shadow-rgb: 0, 177, 65;
}

.btn-outline-secondary, .btn-outline-dark, .btn-outline-light {
  --bs-btn-color: var(--donker);
  --bs-btn-border-color: var(--lijn);
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--donker);
  --bs-btn-hover-bg: var(--bg);
  --bs-btn-hover-border-color: #D3D8DB;
  --bs-btn-active-color: var(--donker);
  --bs-btn-active-bg: var(--lijn);
  --bs-btn-active-border-color: #D3D8DB;
  --bs-btn-disabled-color: var(--grijs);
  --bs-btn-disabled-border-color: var(--lijn);
}

.btn-outline-danger {
  --bs-btn-color: var(--rood);
  --bs-btn-border-color: var(--rood);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--rood);
  --bs-btn-hover-border-color: var(--rood);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--rood-donker);
  --bs-btn-active-border-color: var(--rood-donker);
}

.btn-outline-warning {
  --bs-btn-color: var(--oranje);
  --bs-btn-border-color: var(--oranje);
  --bs-btn-hover-color: var(--nacht);
  --bs-btn-hover-bg: var(--oranje);
  --bs-btn-hover-border-color: var(--oranje);
}

.btn-outline-info {
  --bs-btn-color: var(--blauw);
  --bs-btn-border-color: var(--blauw);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--blauw);
  --bs-btn-hover-border-color: var(--blauw);
}

/* Link-knoppen (Bootstrap + CX's -success/-danger/-warning/-secondary) */
.btn-link, .btn-link-success, .btn-link-danger, .btn-link-warning, .btn-link-secondary {
  --bs-btn-font-weight: 700;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: var(--grijs);
  --bs-btn-disabled-border-color: transparent;
  text-decoration: none;
}

.btn-link, .btn-link-success {
  --bs-btn-color: var(--groen-donker);
  --bs-btn-hover-color: var(--groen-donker);
  --bs-btn-active-color: var(--groen-donker);
  --bs-btn-hover-bg: var(--groen-licht);
  --bs-btn-active-bg: var(--groen-licht);
  --bs-btn-focus-shadow-rgb: 0, 177, 65;
}

.btn-link-danger {
  --bs-btn-color: var(--rood);
  --bs-btn-hover-color: var(--rood-donker);
  --bs-btn-active-color: var(--rood-donker);
  --bs-btn-hover-bg: var(--rood-licht);
  --bs-btn-active-bg: var(--rood-licht);
}

.btn-link-warning {
  --bs-btn-color: var(--oranje);
  --bs-btn-hover-color: #C5740A;
  --bs-btn-active-color: #C5740A;
  --bs-btn-hover-bg: var(--oranje-licht);
  --bs-btn-active-bg: var(--oranje-licht);
}

.btn-link-secondary {
  --bs-btn-color: var(--grijs);
  --bs-btn-hover-color: var(--donker);
  --bs-btn-active-color: var(--donker);
  --bs-btn-hover-bg: var(--bg);
  --bs-btn-active-bg: var(--bg);
}

.btn-link:hover, .btn-link:focus {
  text-decoration: none;
}

/* Wis-/sluitknop */
.btn-close {
  --bs-btn-close-focus-shadow: 0 0 0 3px rgba(0, 177, 65, .25);
  --bs-btn-close-opacity: .6;
}

/* Formulieren */
.form-control, .form-select {
  padding: 9px 12px;
  font-size: 13.5px;
  line-height: 1.45;
  border-radius: var(--bs-border-radius);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-control-sm, .form-select-sm {
  padding: 7px 10px;
  font-size: 13px;
  border-radius: var(--bs-border-radius);
}

.form-control-lg, .form-select-lg {
  padding: 11px 14px;
  font-size: 15px;
  border-radius: var(--radius-m);
}

.form-select {
  padding-right: 36px;
  background-position: right 12px center;
}

.form-select-sm {
  padding-right: 32px;
  background-position: right 10px center;
}

.form-control:focus, .form-control:focus-visible,
.form-select:focus, .form-select:focus-visible {
  border-color: var(--groen);
  box-shadow: 0 0 0 3px var(--groen-licht);
  outline: none;
}

.form-control::placeholder {
  color: #A6AEB3;
}

.form-control:disabled, .form-select:disabled, .form-control[readonly] {
  background-color: var(--bg);
}

.form-control-plaintext {
  color: var(--donker);
}

.input-group-text {
  background-color: var(--bg);
  font-size: 13px;
  color: var(--grijs);
}

.form-check-input {
  border-color: #C4CBCF;
}

.form-check-input[type=checkbox] {
  border-radius: 5px;
}

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
  background-color: var(--groen);
  border-color: var(--groen);
}

.form-check-input:focus, .form-check-input:focus-visible {
  border-color: var(--groen);
  box-shadow: 0 0 0 3px rgba(0, 177, 65, 0.25);
  outline: none;
}

.form-check-input:checked ~ .cx_custom-control-image {
  border-color: var(--groen);
}

.form-switch .form-check-input:focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2380D8A0'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked:focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.form-range::-webkit-slider-thumb {
  background-color: var(--groen);
}

.form-range::-moz-range-thumb {
  background-color: var(--groen);
}

.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(0, 177, 65, 0.25);
}

/* Kaarten — CX compileert de rand als #6c757d */
.card {
  --bs-card-border-color: var(--lijn);
  --bs-card-border-radius: var(--radius-m);
  --bs-card-inner-border-radius: calc(var(--radius-m) - 1px);
  --bs-card-cap-bg: var(--wit);
  --bs-card-cap-padding-x: 18px;
  --bs-card-cap-padding-y: 14px;
  --bs-card-spacer-x: 18px;
  --bs-card-spacer-y: 16px;
  --bs-card-bg: var(--wit);
  box-shadow: var(--schaduw-plat);
}

.card-header {
  font-size: 15px;
  font-weight: 800;
  color: var(--donker);
}

/* Tabellen: geen zebra, zachte hover (zoals de orderlijst) */
.table {
  --bs-table-border-color: var(--lijn);
  --bs-table-striped-bg: transparent;
  --bs-table-hover-bg: var(--zacht);
  --bs-table-active-bg: var(--groen-licht);
}

.table-primary {
  --bs-table-bg: var(--groen-licht);
  --bs-table-border-color: #99E0B3;
  --bs-table-striped-bg: var(--groen-licht);
  --bs-table-hover-bg: #D3F1DE;
  --bs-table-color: var(--donker);
}

/* Tabs */
.nav-tabs {
  --bs-nav-tabs-border-color: var(--lijn);
  --bs-nav-tabs-border-radius: 9px;
  --bs-nav-tabs-link-hover-border-color: transparent;
  --bs-nav-tabs-link-active-color: var(--donker);
  --bs-nav-tabs-link-active-bg: var(--wit);
  --bs-nav-tabs-link-active-border-color: var(--lijn) var(--lijn) var(--wit);
  --bs-nav-link-color: var(--grijs);
  --bs-nav-link-hover-color: var(--donker);
  --bs-nav-link-padding-x: 16px;
  --bs-nav-link-padding-y: 10px;
  --bs-nav-link-font-weight: 700;
  --bs-nav-link-font-size: 13px;
  gap: 2px;
}

.nav-link:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 177, 65, 0.25);
}

.nav-pills {
  --bs-nav-pills-border-radius: 8px;
  --bs-nav-pills-link-active-color: var(--groen-donker);
  --bs-nav-pills-link-active-bg: var(--groen-licht);
  --bs-nav-link-color: var(--grijs);
  --bs-nav-link-hover-color: var(--donker);
  --bs-nav-link-font-weight: 700;
}

/* Dropdown */
.dropdown-menu {
  --bs-dropdown-font-size: 13.5px;
  --bs-dropdown-color: var(--donker);
  --bs-dropdown-border-color: var(--lijn);
  --bs-dropdown-border-radius: 10px;
  --bs-dropdown-inner-border-radius: 9px;
  --bs-dropdown-box-shadow: var(--schaduw-hover);
  --bs-dropdown-padding-x: 6px;
  --bs-dropdown-padding-y: 6px;
  --bs-dropdown-item-padding-x: 10px;
  --bs-dropdown-item-padding-y: 7px;
  --bs-dropdown-item-border-radius: 6px;
  --bs-dropdown-link-color: var(--donker);
  --bs-dropdown-link-hover-color: var(--donker);
  --bs-dropdown-link-hover-bg: var(--bg);
  --bs-dropdown-link-active-color: var(--groen-donker);
  --bs-dropdown-link-active-bg: var(--groen-licht);
  --bs-dropdown-header-color: var(--grijs);
  --bs-dropdown-divider-bg: var(--lijn);
  box-shadow: var(--bs-dropdown-box-shadow);
}

.dropdown-item {
  border-radius: var(--bs-dropdown-item-border-radius);
  font-weight: 600;
}

/* Paginering */
.pagination {
  --bs-pagination-font-size: 13px;
  --bs-pagination-padding-x: 11px;
  --bs-pagination-padding-y: 6px;
  --bs-pagination-color: var(--donker);
  --bs-pagination-border-color: var(--lijn);
  --bs-pagination-border-radius: 8px;
  --bs-pagination-hover-color: var(--donker);
  --bs-pagination-hover-bg: var(--bg);
  --bs-pagination-hover-border-color: var(--lijn);
  --bs-pagination-focus-color: var(--donker);
  --bs-pagination-focus-bg: var(--bg);
  --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(0, 177, 65, .25);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: var(--groen);
  --bs-pagination-active-border-color: var(--groen);
  --bs-pagination-disabled-color: #A6AEB3;
  --bs-pagination-disabled-border-color: var(--lijn);
  font-weight: 700;
}

/* Voortgang, list-group, accordion, badge, alert */
.progress, .progress-stacked {
  --bs-progress-bg: var(--bg);
  --bs-progress-bar-bg: var(--groen);
  --bs-progress-border-radius: 99px;
  --bs-progress-box-shadow: none;
}

.list-group {
  --bs-list-group-border-color: var(--lijn);
  --bs-list-group-border-radius: var(--radius-m);
  --bs-list-group-action-hover-bg: var(--zacht);
  --bs-list-group-active-color: var(--groen-donker);
  --bs-list-group-active-bg: var(--groen-licht);
  --bs-list-group-active-border-color: #99E0B3;
}

.accordion {
  --bs-accordion-border-color: var(--lijn);
  --bs-accordion-border-radius: var(--radius-m);
  --bs-accordion-inner-border-radius: calc(var(--radius-m) - 1px);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(0, 177, 65, .25);
  --bs-accordion-active-color: var(--groen-donker);
  --bs-accordion-active-bg: var(--groen-licht);
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23009436' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.badge {
  --bs-badge-font-weight: 700;
  --bs-badge-border-radius: 99px;
  --bs-badge-padding-x: .7em;
  --bs-badge-padding-y: .4em;
}

.alert {
  --bs-alert-border-radius: 10px;
  font-size: 13.5px;
}

/* Tooltip en popover (hangen aan <body>) */
.tooltip {
  --bs-tooltip-bg: var(--nacht);
  --bs-tooltip-color: #fff;
  --bs-tooltip-border-radius: 6px;
  --bs-tooltip-font-size: 12px;
  --bs-tooltip-padding-x: 10px;
  --bs-tooltip-padding-y: 6px;
  --bs-tooltip-opacity: 1;
  font-family: var(--bs-body-font-family);
  font-weight: 600;
}

.popover {
  --bs-popover-font-size: 13px;
  --bs-popover-border-color: var(--lijn);
  --bs-popover-border-radius: 10px;
  --bs-popover-inner-border-radius: 9px;
  --bs-popover-box-shadow: var(--schaduw-hover);
  --bs-popover-header-bg: var(--zacht);
  --bs-popover-header-color: var(--donker);
  --bs-popover-body-color: var(--donker);
  --bs-popover-body-padding-x: 14px;
  --bs-popover-body-padding-y: 10px;
  font-family: var(--bs-body-font-family);
  box-shadow: var(--bs-popover-box-shadow);
}

/* Modals in het algemeen (#cx_modal heeft daarnaast de Modal Overwrite) */
.modal {
  --bs-modal-border-color: var(--lijn);
  --bs-modal-border-radius: var(--radius);
  --bs-modal-inner-border-radius: calc(var(--radius) - 1px);
  --bs-modal-header-border-color: var(--lijn);
  --bs-modal-footer-border-color: var(--lijn);
  --bs-modal-box-shadow: 0 24px 64px rgba(25,36,46,.22);
}

.modal-backdrop {
  --bs-backdrop-bg: var(--nacht);
  --bs-backdrop-opacity: .45;
}

/* ---------- 3. CX-eigen klassen met hardcoded blauw ---------- */
.cx_faux-link:not(.btn):not(.nav-link) {
  color: var(--groen-donker);
}

.cx_faux-link:not(.btn):not(.nav-link):hover {
  color: #007E2E;
}

a.cx_card {
  border-color: var(--groen);
  color: var(--groen-donker);
}

.cx_tag {
  color: var(--groen-donker);
  border-color: #99E0B3;
  background: var(--groen-licht);
  border-radius: 99px;
  padding: 0 9px;
  font-weight: 700;
  font-size: 12px;
}

.cx_suggestion-wrapper {
  border-color: var(--lijn);
  border-radius: 10px;
  box-shadow: var(--schaduw-hover);
}

.cx_suggestion {
  color: var(--groen-donker);
  border-color: #99E0B3;
  background: var(--groen-licht);
  border-radius: 8px;
}

.cx_suggestion.active {
  color: #fff;
  background: var(--groen);
  border-color: var(--groen);
}

.cx_input-with-suggestion .cx_suggestion.active {
  color: var(--donker);
  background-color: var(--bg);
}

.cx_toggleBtn.active .cx_icon {
  background: var(--groen);
  border-color: var(--groen);
}

.cx_toggleBtn:hover .cx_icon::before {
  border-color: var(--groen);
}

.cx_toggleBtn i {
  color: var(--groen-donker);
}

/* Wizard-/paginaknoppen (pijlvorm) */
.cx_page-button.btn-primary::after {
  border-left-color: var(--groen);
}

.cx_page-button.btn-primary:hover::after,
.cx_page-button.btn-primary:focus::after {
  border-left-color: var(--groen-donker);
}

.cx_page-button.btn-primary:active::after {
  border-left-color: #008E34;
}

.cx_progress-svg-background, .cx_progress-svg-foreground {
  stroke: var(--groen);
}

.cx_progress-percentage {
  fill: var(--groen-donker);
}

.cx_tag-editor.focus {
  border-color: var(--groen);
  box-shadow: 0 0 0 3px var(--groen-licht);
}

/* =========================================================
   CX-pagina's — layout van standaard CrossMarx-schermen
   (zoek-, detail- en bewerkschermen, tabellen, tabbladen)

   Kleuren, knoppen, velden, kaarten, dropdowns e.d. komen uit
   _cx-theme.scss. Dit bestand regelt alleen de opbouw.

   Scope:
   - #cx_content-wrapper  → de CX-pagina in de portal-layout
   - #cx_modal            → tabellen/tabbladen/werkbalken ook in de modal
                            (bv. "Selecteer een organisatie" opent een
                            zoekscherm in de modal). Kaarten en veldregels
                            in de modal regelt de Modal Overwrite.

   Niet aanraken: inline styles die CX-modules zelf zetten
   (breedtes van autosize-velden, tabelkolommen, de sticky
   tabelkop, stickybuttons, de tabbalk).
   ========================================================= */
/* =========================================================
   A. Alleen de pagina
   ========================================================= */
#cx_content-wrapper {
  /* Container: geen eigen breedte/padding, .wrap regelt dat */
  max-width: none;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  box-shadow: none;
  /* ---------- Paginatitel ---------- */
  /* ---------- Paragrafen ---------- */
  /* Paragraaf zonder kaart (bv. de velden op het accountscherm): zelfde wit vlak */
  /* Paragraaf met alleen verborgen velden (cx_hiddenmarker): niet tonen */
  /* CX nest soms een paragraaf in de card-body van de vorige: als subkaart tonen */
  /* Kaart met alleen een tabel: tabel tegen de randen */
  /* Lege kaart (bv. Telefoonnummers zonder regels) */
  /* ---------- Veldregels (detail- en bewerkscherm) ---------- */
  /* Uitleg-knopje (?) en verplicht-sterretje direct achter het label,
     i.p.v. absoluut tegen de rechterkant van de labelkolom */
  /* Invoer met knoppen ernaast (select + "bekijk"-pijl) */
  /* Zoekvelden (autosize): alleen typografie en flex, breedtes zet CX inline.
     flex-basis wint van de inline width (bv. 1015px) die niet naast de sidebar past. */
  /* ---------- Werkbalk met acties ---------- */
  /* Navigatiebalk bovenaan (terug · label · nieuw) */
  /* Verwijderen/deactiveren: rood bij hover, zodat het opvalt maar niet schreeuwt */
}
#cx_content-wrapper .cx_content-inner {
  padding: 0;
}
#cx_content-wrapper .cx_h1 {
  font-size: 24px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--donker);
  margin: 6px 0 18px;
}
#cx_content-wrapper .cx_paragraph-wrapper {
  margin: 0 0 18px;
}
#cx_content-wrapper .cx_paragraph-wrapper > .cx_grid-col {
  padding: 0;
}
#cx_content-wrapper .cx_paragraph-wrapper.cx_paragraph:not(:has(.card)) > .cx_grid-col {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-m);
  box-shadow: var(--schaduw-plat);
  padding: 16px 18px;
}
#cx_content-wrapper .cx_paragraph-wrapper:not(:has(.cx_fieldline, .card, .cx_table, .cx_btn-toolbar, .cx_tabpanel)) {
  display: none;
}
#cx_content-wrapper .card {
  overflow: hidden;
}
#cx_content-wrapper .card-header {
  font-size: 16px;
}
#cx_content-wrapper .card-body .cx_paragraph-wrapper {
  margin: 18px 0 0;
}
#cx_content-wrapper .card-body .card {
  box-shadow: none;
  --bs-card-cap-bg: var(--zacht);
}
#cx_content-wrapper .card-body .card-header {
  font-size: 14.5px;
}
#cx_content-wrapper .card-body:has(> .cx_table-wrapper) {
  padding: 0;
}
#cx_content-wrapper .card-body:not(:has(*)) {
  padding: 14px 18px;
}
#cx_content-wrapper .card-body:not(:has(*))::before {
  content: "Geen gegevens";
  color: #A6AEB3;
  font-size: 13px;
  font-style: italic;
}
#cx_content-wrapper .cx_fieldlines {
  margin-bottom: 0;
}
#cx_content-wrapper .cx_fieldline {
  margin-bottom: 0;
}
#cx_content-wrapper .cx_fieldline:not(.cx_form-group-autosize) {
  --bs-gutter-x: 0;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--bg);
  align-items: center;
}
#cx_content-wrapper .cx_fieldline:not(.cx_form-group-autosize):first-of-type {
  padding-top: 0;
}
#cx_content-wrapper .cx_fieldline:not(.cx_form-group-autosize):last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}
#cx_content-wrapper .cx_fieldline:not(.cx_form-group-autosize) > .cx_control-label-left {
  text-align: left !important; /* .text-md-end is !important in Bootstrap */
  padding: 0 16px 0 0;
}
#cx_content-wrapper .cx_fieldline:not(.cx_form-group-autosize) .cx_label {
  font-size: 11px;
  font-weight: 800;
  color: var(--grijs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
#cx_content-wrapper .cx_form-control-plaintext, #cx_content-wrapper .form-control-plaintext {
  font-size: 13.5px;
  padding-top: 0;
  padding-bottom: 0;
  min-height: 0;
}
#cx_content-wrapper .cx_fieldline .cx_form-control-plaintext {
  font-weight: 600;
}
#cx_content-wrapper .cx_fieldline .cx_form-control-plaintext:empty::before {
  content: "—";
  color: #C4CBCF;
  font-weight: 400;
}
#cx_content-wrapper .cx_a {
  font-weight: 600;
}
#cx_content-wrapper .cx_a:hover {
  text-decoration: underline;
}
#cx_content-wrapper .cx_control-label-left .cx_label {
  padding-right: 0;
}
#cx_content-wrapper .cx_control-label-left .cx_label-buttons {
  position: static;
  display: inline-flex;
  vertical-align: middle;
  margin: -4px 0 -4px 2px;
}
#cx_content-wrapper .cx_btn-explanation {
  --bs-btn-padding-x: 4px;
  --bs-btn-padding-y: 2px;
  --bs-btn-color: #A6AEB3;
  --bs-btn-hover-color: var(--groen-donker);
  --bs-btn-hover-bg: transparent;
}
#cx_content-wrapper .cx_required-mark {
  position: static;
  color: var(--rood);
  margin-left: 2px;
}
#cx_content-wrapper .cx_required-mark::after {
  display: inline;
}
#cx_content-wrapper .cx_widget-hasButtons {
  align-items: center;
  gap: 4px;
}
#cx_content-wrapper .cx_fieldline .form-select {
  max-width: 420px;
}
#cx_content-wrapper .cx_form-group-autosize > .cx_fieldline-content {
  flex: 1 1 0;
  min-width: 0;
}
#cx_content-wrapper .cx_form-group-search {
  margin-bottom: 10px;
}
#cx_content-wrapper .cx_form-group-search .cx_control-label-left {
  padding-top: 9px;
  text-align: left !important;
}
#cx_content-wrapper .cx_form-group-search .cx_label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--donker);
}
#cx_content-wrapper .cx_btn-addSearchField {
  --bs-btn-padding-x: 8px;
  margin-left: -8px;
}
#cx_content-wrapper .cx_btn-toolbar {
  margin-bottom: 14px;
}
#cx_content-wrapper .cx_btn-toolbar-navigation {
  margin: 0 0 4px;
}
#cx_content-wrapper .cx_btn-toolbar-navigation .btn {
  --bs-btn-padding-x: 8px;
  --bs-btn-padding-y: 6px;
  --bs-btn-font-size: 13px;
}
#cx_content-wrapper .cx_btn-toolbar-navigation .btn-link {
  --bs-btn-color: var(--grijs);
  --bs-btn-hover-color: var(--donker);
  --bs-btn-hover-bg: var(--bg);
}
#cx_content-wrapper .cx_btn-toolbar-navigation .cx_btn-back {
  margin-left: -8px;
}
#cx_content-wrapper .cx_btn-toolbar-navigation .btn.disabled {
  --bs-btn-disabled-color: var(--donker);
  --bs-btn-disabled-opacity: 1;
  font-weight: 800;
  padding-left: 4px;
  padding-right: 4px;
}
#cx_content-wrapper .cx_btn-toolbar-navigation .cx_btn-newRecord {
  --bs-btn-color: var(--groen-donker);
  --bs-btn-hover-color: var(--groen-donker);
  --bs-btn-hover-bg: var(--groen-licht);
}
#cx_content-wrapper .cx_btn-delete:hover {
  --bs-btn-hover-color: var(--rood);
  --bs-btn-hover-bg: var(--rood-licht);
  --bs-btn-hover-border-color: #F9C4C8;
}

/* =========================================================
   B. Pagina én modal: werkbalken, tabbladen, tabellen
   ========================================================= */
#cx_content-wrapper,
#cx_modal {
  /* Icoonknoppen (filter, voorkeuren) → zelfde als .btn-icoon */
  /* ---------- Tabbladen (zoekscherm) ---------- */
  /* .p-3 */
  /* ---------- Tabellen → zoals .order-lijst ---------- */
  /* Eerste gegevenskolom vet — ook als er een detailknop vóór staat */
  /* Knoppen in een tabelrij (detail, opslaan, stoppen, selecteren) */
  /* Rij-detailknop → pijltje zoals op de orderlijst (CX toont hem alleen bij hover) */
  /* Knoppen onder een tabel */
}
#cx_content-wrapper .btn-toolbar,
#cx_modal .btn-toolbar {
  gap: 8px;
}
#cx_content-wrapper .cx_btn-toolbar > .btn-toolbar > .btn,
#cx_content-wrapper .cx_btn-toolbar > .btn-toolbar > .cx_btn-wrapper,
#cx_modal .cx_btn-toolbar > .btn-toolbar > .btn,
#cx_modal .cx_btn-toolbar > .btn-toolbar > .cx_btn-wrapper {
  margin: 0;
}
#cx_content-wrapper .btn .cx_icon,
#cx_modal .btn .cx_icon {
  font-size: 13px;
  line-height: 1;
  margin: 0;
}
#cx_content-wrapper .cx_btn-filter, #cx_content-wrapper .cx_btn-tablePreferences,
#cx_modal .cx_btn-filter,
#cx_modal .cx_btn-tablePreferences {
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
  --bs-btn-color: var(--grijs);
  width: 32px;
  height: 32px;
}
#cx_content-wrapper .cx_tabpanel,
#cx_modal .cx_tabpanel {
  margin-bottom: 14px;
}
#cx_content-wrapper .cx_tabpanel .nav-tabs,
#cx_modal .cx_tabpanel .nav-tabs {
  border-bottom: none;
}
#cx_content-wrapper .cx_tabpanel .nav-tabs .nav-link,
#cx_modal .cx_tabpanel .nav-tabs .nav-link {
  border-bottom: none;
}
#cx_content-wrapper .cx_tabpanel .nav-tabs .nav-link:not(.active):hover,
#cx_modal .cx_tabpanel .nav-tabs .nav-link:not(.active):hover {
  background: rgba(255, 255, 255, 0.6);
}
#cx_content-wrapper .cx_tabpanel .cx_tab.active::after,
#cx_modal .cx_tabpanel .cx_tab.active::after {
  height: 2px;
}
#cx_content-wrapper .cx_tabpanel-content,
#cx_modal .cx_tabpanel-content {
  border: 1px solid var(--lijn) !important; /* .border en .border-top-0 zijn !important */
  border-radius: 0 var(--radius-m) var(--radius-m) var(--radius-m);
  box-shadow: var(--schaduw-plat);
}
#cx_content-wrapper .cx_tabpanel-content > .tab-pane,
#cx_modal .cx_tabpanel-content > .tab-pane {
  padding: 18px !important;
}
#cx_content-wrapper .cx_table-wrapper, #cx_content-wrapper .cx_persist-table,
#cx_modal .cx_table-wrapper,
#cx_modal .cx_persist-table {
  display: block;
  max-width: 100%;
}
#cx_content-wrapper .cx_table-top,
#cx_modal .cx_table-top {
  padding: 14px 18px 0;
}
#cx_content-wrapper .cx_table-top .cx_btn-toolbar:last-child,
#cx_modal .cx_table-top .cx_btn-toolbar:last-child {
  margin-bottom: 14px;
}
#cx_content-wrapper .cx_table-title,
#cx_modal .cx_table-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--donker);
  margin: 6px 16px 14px 0;
}
#cx_content-wrapper .cx_table,
#cx_modal .cx_table {
  width: 100%;
  margin: 0;
  border-top: 1px solid var(--lijn);
}
#cx_content-wrapper .cx_table > tbody > tr:last-child > *,
#cx_modal .cx_table > tbody > tr:last-child > * {
  border-bottom: none;
}
#cx_content-wrapper .cx_table thead th,
#cx_modal .cx_table thead th {
  background: var(--kop-bg);
  vertical-align: middle;
  padding: 10px 16px;
}
#cx_content-wrapper .cx_table .cx_columnheader .form-control-plaintext,
#cx_modal .cx_table .cx_columnheader .form-control-plaintext {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--grijs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0;
}
#cx_content-wrapper .cx_table .cx_columnheader[data-sorturl]:hover .form-control-plaintext,
#cx_modal .cx_table .cx_columnheader[data-sorturl]:hover .form-control-plaintext {
  color: var(--donker);
}
#cx_content-wrapper .cx_table .cx_columnheader[aria-sort] .form-control-plaintext,
#cx_modal .cx_table .cx_columnheader[aria-sort] .form-control-plaintext {
  color: var(--donker);
}
#cx_content-wrapper .cx_table td,
#cx_modal .cx_table td {
  padding: 13px 16px;
  vertical-align: middle;
}
#cx_content-wrapper .cx_table .cx_cell .form-control-plaintext,
#cx_modal .cx_table .cx_cell .form-control-plaintext {
  font-size: 13.5px;
}
#cx_content-wrapper .cx_table tr > .cx_cell-widget:first-child .form-control-plaintext,
#cx_content-wrapper .cx_table tr > .cx_cell-button:first-child + .cx_cell-widget .form-control-plaintext,
#cx_modal .cx_table tr > .cx_cell-widget:first-child .form-control-plaintext,
#cx_modal .cx_table tr > .cx_cell-button:first-child + .cx_cell-widget .form-control-plaintext {
  font-weight: 800;
}
#cx_content-wrapper .cx_table .cx_empty-columnheader, #cx_content-wrapper .cx_table .cx_empty-cell,
#cx_modal .cx_table .cx_empty-columnheader,
#cx_modal .cx_table .cx_empty-cell {
  padding: 0;
}
#cx_content-wrapper .cx_table .cx_cell-button,
#cx_modal .cx_table .cx_cell-button {
  padding: 0 6px;
  text-align: center;
}
#cx_content-wrapper .cx_table .cx_cell-button:last-child,
#cx_modal .cx_table .cx_cell-button:last-child {
  padding-right: 12px;
}
#cx_content-wrapper .cx_table .cx_cell-button:first-child,
#cx_modal .cx_table .cx_cell-button:first-child {
  padding-left: 12px;
}
#cx_content-wrapper .cx_table tr.cx_row,
#cx_modal .cx_table tr.cx_row {
  transition: background-color 0.15s;
}
#cx_content-wrapper .cx_table .cx_checkbox,
#cx_modal .cx_table .cx_checkbox {
  color: var(--groen);
}
#cx_content-wrapper .cx_table .cx_cell .btn,
#cx_modal .cx_table .cx_cell .btn {
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
  --bs-btn-hover-bg: var(--bg);
  width: 28px;
  height: 28px;
}
#cx_content-wrapper .cx_table .cx_cell .btn .cx_icon,
#cx_modal .cx_table .cx_cell .btn .cx_icon {
  font-size: 15px;
}
#cx_content-wrapper .cx_btn-rowDetails,
#cx_modal .cx_btn-rowDetails {
  --bs-btn-color: #B8C0C4;
  --bs-btn-hover-color: var(--groen-donker);
  --bs-btn-hover-bg: transparent;
  opacity: 1;
  transition: color 0.15s, transform 0.15s;
}
#cx_content-wrapper .cx_row:hover .cx_btn-rowDetails,
#cx_modal .cx_row:hover .cx_btn-rowDetails {
  color: var(--groen-donker);
  transform: translateX(2px);
}
#cx_content-wrapper .cx_table-wrapper > .cx_btn-toolbar,
#cx_modal .cx_table-wrapper > .cx_btn-toolbar {
  padding: 14px 18px 0;
  margin: 0;
  border-top: 1px solid var(--lijn);
  background: var(--zacht);
}
#cx_content-wrapper .cx_table-wrapper > .cx_btn-toolbar .btn-toolbar,
#cx_modal .cx_table-wrapper > .cx_btn-toolbar .btn-toolbar {
  padding-bottom: 14px;
}
#cx_content-wrapper .cx_table-wrapper > .cx_spacer,
#cx_modal .cx_table-wrapper > .cx_spacer {
  display: none;
}

/* =========================================================
   C. Responsive
   ========================================================= */
@media (max-width: 760px) {
  #cx_content-wrapper .cx_h1 {
    font-size: 20px;
  }
  #cx_content-wrapper .cx_fieldline:not(.cx_form-group-autosize) > .cx_grid-col {
    width: 100%;
  }
  #cx_content-wrapper .cx_fieldline:not(.cx_form-group-autosize) > .cx_control-label-left {
    padding-bottom: 2px;
  }
  #cx_content-wrapper .cx_fieldline .form-select {
    max-width: none;
  }
  #cx_content-wrapper .cx_table td, #cx_content-wrapper .cx_table thead th, #cx_modal .cx_table td, #cx_modal .cx_table thead th {
    padding-left: 12px;
    padding-right: 12px;
  }
}
/* CX zet onder 768px label en veld zelf op width: 100% (onder elkaar),
   maar de inline style op de rij houdt flex-wrap: nowrap. */
@media (max-width: 767.9px) {
  #cx_content-wrapper .cx_form-group-autosize {
    flex-wrap: wrap !important;
  }
  #cx_content-wrapper .cx_form-group-autosize > .cx_fieldline-content {
    flex: 0 0 100%;
  }
  #cx_content-wrapper .cx_form-group-search .cx_control-label-left {
    padding-top: 0;
    padding-bottom: 4px;
  }
}

/*# sourceMappingURL=main.css.map */