:root:has(input.theme-controller[value="light"]:checked),
[data-theme="light"],
:root:has(input.theme-controller[value="dark"]:checked),
[data-theme="dark"] {
  font-family: "BearingPointSans", "FS Albert", Calibri, Helvetica,
    "Trebuchet MS", Arial, sans-serif;
  --bp-primary-rgb: 41, 213, 255;
  --bp-secondary-rgb: 108, 3, 168;
  --color-primary-content: white;
  --bp-gradient: linear-gradient(
    135deg,
    rgb(var(--bp-primary-rgb)) 10%,
    rgb(var(--bp-secondary-rgb)) 90%
  );
}
:root:has(input.theme-controller[value="dark"]:checked),
[data-theme="dark"] {
  /*  --bp-secondary-rgb: 255, 72, 166;*/
}

[data-theme="light"] .navbar.optix-header,
[data-theme="dark"] .navbar.optix-header {
  background-color: rgb(var(--bp-primary-rgb));
  background-image: var(--bp-gradient);
  color: #fff;
}
html[data-theme="light"] .optix-header .navbar-start img,
html[data-theme="dark"] .optix-header .navbar-start img {
  height: 48px;
  padding: 8px 16px;
}
[data-theme="light"] .table > thead > tr,
[data-theme="dark"] .table > thead > tr {
  background-color: rgb(var(--bp-primary-rgb));
  background-image: var(--bp-gradient);
  color: #fff;
}
[data-theme="light"] .optix-datatable > thead > tr,
[data-theme="dark"] .optix-datatable > thead > tr {
  background-color: rgb(var(--bp-primary-rgb));
  background-image: var(--bp-gradient);
  color: #fff;
}

@layer utilities {
  .label {
    white-space: wrap;
  }
}