/*
 global gültige CSS Definitionen

 FIS3+Frontend
 Author: Michael Wallner
 Version: 1.0
 Datum: 03.04.2023
*/

/* watch:dev probe for global.css */

/* Farbschema */

.ui-panel-content-wrapper {
  overflow: hidden;
  /* border: 1px solid red; */
  background: var(--surface-white);
  color: #222222;
}


/* Color Themes */

/* default */
:root {
  /* working space  */
  --surface-white: #ffffff;
  --bg-color: var(--surface-white);
  --bg-color-dark: #f1f1f1;
  --text-color: black;
  --border-color-dark: black;
  --border-color-mid:  #c0c4cb;
  --border-color-white: var(--surface-white);
  --color-red: red;
  --color-green: green;
  --color-boku-green: #4dac26;

  /* page header  */
  --bg-color-heading: var(--surface-white);
  --text-color-heading: black;
  --bg-color-heading-link: #f1f1f1;
  --text-color-heading-link: black;

  /* side menue */
  --bg-color-menue: #f1f1f1;
  --bg-color-menue-hover: #a0a0a0;
  --text-color-menue: black;
  --text-color-menue-hover: white;

  /* Buttons */
  --bg-color-button-export: #eceff3;
  --bg-color-button-new: #eceff3;
  --bg-color-button-del: #eceff3;
  --bg-color-button-back: #eceff3;
  --text-color-button: black;
  --bg-color-button-export-hover: #e2e8f0;
  --bg-color-button-new-hover: #e2e8f0;
  --bg-color-button-del-hover: #e2e8f0;
  --bg-color-button-back-hover: #e2e8f0;
  --text-color-button-hover: black;
  --bg-color-button-disabled: #eef2f6;
  --text-color-button-disabled: #8a94a6;
  --button-border-width: 1px;
  --button-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  --button-hover-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
  --button-focus-border-color: #94a3b8;
  --button-focus-visible-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18), 0 4px 10px rgba(15, 23, 42, 0.08);
  --button-border-new: var(--border-color-mid);
  --button-border-back: var(--border-color-mid);
  --button-border-edit: var(--border-color-mid);
  --button-border-del: var(--border-color-mid);
  --button-border-export: var(--border-color-mid);
  --button-hover-border-new: var(--button-border-new);
  --button-hover-border-back: var(--button-border-back);
  --button-hover-border-edit: var(--button-border-edit);
  --button-hover-border-del: var(--button-border-del);
  --button-hover-border-export: var(--button-border-export);
  --invalid-border-accent: var(--color-red);
  --workflow-nav-shadow: 0 1px 0 var(--border-color-mid);
  --workflow-connector-color: #9ea6b2;
  --workflow-step-text: #5f5f5f;
  --workflow-step-complete-text: #5f5f5f;
  --workflow-step-active-text: var(--text-color-heading-link);
  --workflow-step-marker-border: var(--border-color-mid);
  --workflow-step-marker-bg: var(--bg-color);
  --workflow-step-marker-text: currentColor;
  --workflow-step-marker-complete-border: var(--border-color-mid);
  --workflow-step-marker-complete-bg: var(--bg-color-dark);
  --workflow-step-marker-complete-text: currentColor;
  --workflow-step-marker-active-border: #6b7280;
  --workflow-step-marker-active-bg: #6b7280;
  --workflow-step-marker-active-text: #ffffff;
  --surface-base: var(--surface-white);
  --surface-muted: #f1f1f1;
  --surface-subtle: #f8f8f8;
  --surface-alt-row: #f6f8fa;
  --surface-toolbar: #ececec;
  --surface-gradient-start: #f9fafb;
  --surface-gradient-end: #eceff3;
  --surface-header-gradient-start: #fafafa;
  --surface-header-gradient-end: #f2f4f6;
  --surface-button-gradient-start: #fafafa;
  --surface-button-gradient-end: #ececec;
  --surface-button-hover-end: #e5e7eb;
  --surface-success-gradient-start: #eef5e6;
  --surface-success-gradient-end: #e3efd4;
  --surface-info-bg: #f3f7fb;
  --surface-info-soft-bg: #f7fbfd;
  --surface-warning-bg: #fbf7ea;
  --surface-panel-gradient-start: #fcfeff;
  --surface-panel-gradient-end: #f4f8fb;
  --surface-danger-gradient-start: #fceff2;
  --surface-danger-gradient-end: #f8dfe5;
  --surface-warning-gradient-start: #fdf5eb;
  --surface-warning-gradient-end: #f8e7d3;
  --dialog-caption-gradient-start: var(--surface-header-gradient-start);
  --dialog-caption-gradient-end: var(--surface-header-gradient-end);
  --dialog-caption-text: #1f2937;
  --dialog-caption-border: #e3e9f2;
  --dialog-caption-danger-gradient-start: var(--surface-danger-gradient-start);
  --dialog-caption-danger-gradient-end: var(--surface-danger-gradient-end);
  --dialog-caption-danger-text: #7f1d1d;
  --dialog-caption-warning-gradient-start: var(--surface-warning-gradient-start);
  --dialog-caption-warning-gradient-end: var(--surface-warning-gradient-end);
  --dialog-caption-warning-text: #7c4a12;
  --dialog-caption-info-gradient-start: #eef5ff;
  --dialog-caption-info-gradient-end: #eef5ff;
  --dialog-caption-info-text: #1d4ed8;
  --pub-surface: var(--surface-base);
  --pub-surface-muted: var(--surface-subtle);
  --pub-header-gradient-start: var(--surface-header-gradient-start);
  --pub-header-gradient-end: var(--surface-header-gradient-end);
  --pub-row-even-bg: var(--surface-base);
  --pub-row-odd-bg: var(--surface-alt-row);
  --pub-toolbar-bg: var(--surface-toolbar);
  --pub-toolbar-button-gradient-start: var(--surface-button-gradient-start);
  --pub-toolbar-button-gradient-end: var(--surface-button-gradient-end);
  --pub-toolbar-button-hover-end: var(--surface-button-hover-end);
  --pub-card-meta-gradient-start: var(--surface-success-gradient-start);
  --pub-card-meta-gradient-end: var(--surface-success-gradient-end);
  --pub-card-meta-border: #d4dfc7;
  --pub-card-meta-label: #56713a;
  --pub-card-meta-text: #334155;
  --pub-list-state-loading-bg: var(--surface-info-bg);
  --pub-list-state-empty-bg: var(--surface-warning-bg);
  --pub-pagination-gradient-start: #fcfcfc;
  --pub-pagination-gradient-end: #f1f3f5;
  --font-size: 0.65em;
}

[data-theme="default"] {
  --switch-track-bg: #d6dde6;
  --switch-track-border: #8aa0bb;
  --switch-track-checked-bg: #718aa8;
  --switch-track-checked-border: #546a83;
  --switch-thumb-bg: #ffffff;
  --switch-focus-ring: #718aa8;
  --switch-check-color: #ffffff;
  --switch-cross-color: #5b6977;
}

[data-theme="bunt"] {
  /* palette */
  --color-sage: #a1be95;
  --color-sage-soft: #d9e4d3;
  --color-sage-deep: #7f9674;
  --color-honeydew: #e2dfa2;
  --color-honeydew-soft: #f1efcc;
  --color-honeydew-deep: #c7c377;
  --color-bluebell: #92aac7;
  --color-bluebell-soft: #d7e1ee;
  --color-bluebell-deep: #718aa8;
  --color-raspberry: #ed5752;
  --color-raspberry-soft: #f7cfcd;
  --color-raspberry-deep: #d94440;
  --color-invalid-accent: #d86b68;
  --surface-ivory: #f1f1f1;
  --surface-tint: #f1f1f1;
  --ink-strong: #24303a;
  --ink-soft: #5b6977;

  /* working space  */
  --surface-white: #ffffff;
  --bg-color: var(--surface-white);
  --bg-color-dark: var(--surface-ivory);
  --text-color: var(--ink-strong);
  --border-color-dark: #000000;
  --border-color-mid: #c0c4cb;
  --border-color-white: var(--surface-white);
  --color-red: var(--color-raspberry);
  --color-green: var(--color-sage-deep);
  --color-boku-green: var(--color-sage-deep);

  /* page header  */
  --bg-color-heading: var(--surface-white);
  --text-color-heading: var(--ink-strong);
  --bg-color-heading-link: #f1f1f1;
  --text-color-heading-link: #000000;

  /* side menue */
  --bg-color-menue: #f1f1f1;
  --bg-color-menue-hover: #a0a0a0;
  --text-color-menue: #000000;
  --text-color-menue-hover: #ffffff;

  /* Buttons */
  --bg-color-button-export: var(--color-bluebell-soft);
  --bg-color-button-new: var(--color-sage-soft);
  --bg-color-button-del: var(--color-raspberry-soft);
  --bg-color-button-back: var(--color-honeydew-soft);
  --text-color-button: var(--ink-strong);
  --bg-color-button-export-hover: #bfd0e2;
  --bg-color-button-new-hover: #c6d7bd;
  --bg-color-button-del-hover: #f0b5b1;
  --bg-color-button-back-hover: #e7e4b5;
  --text-color-button-hover: var(--ink-strong);
  --bg-color-button-disabled: #eef1ec;
  --text-color-button-disabled: #97a3ae;
  --surface-base: var(--surface-white);
  --surface-muted: #f1f1f1;
  --surface-subtle: #f8f8f8;
  --surface-alt-row: #f6f8fa;
  --surface-toolbar: #ececec;
  --surface-gradient-start: #f9fafb;
  --surface-gradient-end: #eceff3;
  --surface-header-gradient-start: #fafafa;
  --surface-header-gradient-end: #f2f4f6;
  --surface-button-gradient-start: #fafafa;
  --surface-button-gradient-end: #ececec;
  --surface-button-hover-end: #e5e7eb;
  --surface-success-gradient-start: #eef5e6;
  --surface-success-gradient-end: #e3efd4;
  --surface-info-bg: #f3f7fb;
  --surface-warning-bg: #fbf7ea;
  --surface-danger-gradient-start: #fceff2;
  --surface-danger-gradient-end: #f8dfe5;
  --surface-warning-gradient-start: #fdf5eb;
  --surface-warning-gradient-end: #f8e7d3;
  --dialog-caption-gradient-start: var(--surface-header-gradient-start);
  --dialog-caption-gradient-end: var(--surface-header-gradient-end);
  --dialog-caption-text: var(--ink-strong);
  --dialog-caption-border: var(--border-color-mid);
  --dialog-caption-danger-gradient-start: var(--color-raspberry-soft);
  --dialog-caption-danger-gradient-end: #f0b5b1;
  --dialog-caption-danger-text: #8f2e2b;
  --dialog-caption-warning-gradient-start: var(--color-honeydew-soft);
  --dialog-caption-warning-gradient-end: #e7e4b5;
  --dialog-caption-warning-text: #6f6a25;
  --dialog-caption-info-gradient-start: var(--color-bluebell-soft);
  --dialog-caption-info-gradient-end: #bfd0e2;
  --dialog-caption-info-text: #395774;
  --pub-surface: var(--surface-base);
  --pub-surface-muted: var(--surface-subtle);
  --pub-header-gradient-start: var(--surface-header-gradient-start);
  --pub-header-gradient-end: var(--surface-header-gradient-end);
  --pub-row-even-bg: var(--surface-base);
  --pub-row-odd-bg: var(--surface-alt-row);
  --pub-toolbar-bg: var(--surface-toolbar);
  --pub-toolbar-button-gradient-start: var(--surface-button-gradient-start);
  --pub-toolbar-button-gradient-end: var(--surface-button-gradient-end);
  --pub-toolbar-button-hover-end: var(--surface-button-hover-end);
  --pub-card-meta-gradient-start: var(--surface-success-gradient-start);
  --pub-card-meta-gradient-end: var(--surface-success-gradient-end);
  --pub-list-state-loading-bg: var(--surface-info-bg);
  --pub-list-state-empty-bg: var(--surface-warning-bg);
  --pub-pagination-gradient-start: #fcfcfc;
  --pub-pagination-gradient-end: #f1f3f5;
  --button-border-export: var(--color-bluebell);
  --button-border-new: var(--color-sage);
  --button-border-del: var(--color-raspberry);
  --button-border-back: var(--color-honeydew-deep);
  --button-border-edit: var(--button-border-back);
  --button-hover-border-export: var(--color-bluebell-deep);
  --button-hover-border-new: var(--color-sage-deep);
  --button-hover-border-del: var(--color-raspberry-deep);
  --button-hover-border-back: #b5b164;
  --button-hover-border-edit: var(--button-hover-border-back);
  --invalid-border-accent: var(--color-invalid-accent);
  --switch-track-bg: #cfd6de;
  --switch-track-border: #7b8795;
  --switch-track-checked-bg: #2f7a18;
  --switch-track-checked-border: #1e5a0f;
  --switch-thumb-bg: #ffffff;
  --switch-focus-ring: #1e5a0f;
  --switch-check-color: #ffffff;
  --switch-cross-color: #52606d;
  --font-size: 0.65em;
}

/* Blau statt Rot für RG Blinde */
[data-theme="blue"] {
  /* working space  */
  --surface-white: #ffffff;
  --bg-color: var(--surface-white);
  --bg-color-dark: #f1f1f1;
  --text-color: black;
  --border-color-dark: black;
  --border-color-mid:  #d0d4db;
  --border-color-white: var(--surface-white);
  --color-red: #45ADFE;
  --color-green: green;
  --color-boku-green: #4dac26;

  /* page header  */
  --bg-color-heading: var(--surface-white);
  --text-color-heading: black;
  --bg-color-heading-link: #f1f1f1;
  --text-color-heading-link: black;

  /* side menue */
  --bg-color-menue: #f1f1f1;
  --bg-color-menue-hover: gray;
  --text-color-menue: black;
  --text-color-menue-hover: white;

  /* Buttons */
  --bg-color-button-export: #dbe6fb;
  --bg-color-button-new: #e4f5dc;
  --bg-color-button-del: #e0eff9;
  --bg-color-button-back: #f9e6d2;
  --text-color-button: black;
  --bg-color-button-export-hover: #cfdcf7;
  --bg-color-button-new-hover: #d6efc8;
  --bg-color-button-del-hover: #d1e6f5;
  --bg-color-button-back-hover: #f3d8bc;
  --text-color-button-hover: black;
  --bg-color-button-disabled: #eef2f6;
  --text-color-button-disabled: #8a94a6;
  --surface-base: var(--surface-white);
  --surface-muted: #f1f1f1;
  --surface-subtle: #f8f8f8;
  --surface-alt-row: #f6f8fa;
  --surface-toolbar: #ececec;
  --surface-gradient-start: #f9fafb;
  --surface-gradient-end: #eceff3;
  --surface-header-gradient-start: #fafafa;
  --surface-header-gradient-end: #f2f4f6;
  --surface-button-gradient-start: #fafafa;
  --surface-button-gradient-end: #ececec;
  --surface-button-hover-end: #e5e7eb;
  --surface-success-gradient-start: #eef5e6;
  --surface-success-gradient-end: #e3efd4;
  --surface-info-bg: #f3f7fb;
  --surface-warning-bg: #fbf7ea;
  --surface-danger-gradient-start: #fceff2;
  --surface-danger-gradient-end: #f8dfe5;
  --surface-warning-gradient-start: #fdf5eb;
  --surface-warning-gradient-end: #f8e7d3;
  --dialog-caption-gradient-start: var(--surface-header-gradient-start);
  --dialog-caption-gradient-end: var(--surface-header-gradient-end);
  --dialog-caption-text: #111827;
  --dialog-caption-border: var(--border-color-mid);
  --dialog-caption-danger-gradient-start: #e0eff9;
  --dialog-caption-danger-gradient-end: #d1e6f5;
  --dialog-caption-danger-text: #075985;
  --dialog-caption-warning-gradient-start: var(--surface-warning-gradient-start);
  --dialog-caption-warning-gradient-end: var(--surface-warning-gradient-end);
  --dialog-caption-warning-text: #7c4a12;
  --dialog-caption-info-gradient-start: #e8f2ff;
  --dialog-caption-info-gradient-end: #dbeafe;
  --dialog-caption-info-text: #1d4ed8;
  --pub-surface: var(--surface-base);
  --pub-surface-muted: var(--surface-subtle);
  --pub-header-gradient-start: var(--surface-header-gradient-start);
  --pub-header-gradient-end: var(--surface-header-gradient-end);
  --pub-row-even-bg: var(--surface-base);
  --pub-row-odd-bg: var(--surface-alt-row);
  --pub-toolbar-bg: var(--surface-toolbar);
  --pub-toolbar-button-gradient-start: var(--surface-button-gradient-start);
  --pub-toolbar-button-gradient-end: var(--surface-button-gradient-end);
  --pub-toolbar-button-hover-end: var(--surface-button-hover-end);
  --pub-card-meta-gradient-start: var(--surface-success-gradient-start);
  --pub-card-meta-gradient-end: var(--surface-success-gradient-end);
  --pub-list-state-loading-bg: var(--surface-info-bg);
  --pub-list-state-empty-bg: var(--surface-warning-bg);
  --pub-pagination-gradient-start: #fcfcfc;
  --pub-pagination-gradient-end: #f1f3f5;
  --switch-track-bg: #d4dce6;
  --switch-track-border: #6f8faf;
  --switch-track-checked-bg: #1d4ed8;
  --switch-track-checked-border: #1e40af;
  --switch-thumb-bg: #ffffff;
  --switch-focus-ring: #1e40af;
  --switch-check-color: #ffffff;
  --switch-cross-color: #52657d;
  --font-size: 0.65em;
}

/* hoher Kontrast, wenig Farben */
[data-theme="kontrast"] {
  /* working space  */
  --surface-white: #ffffff;
  --bg-color: var(--surface-white);
  --bg-color-dark: #ffffff;
  --text-color: #000000;
  --border-color-dark: #000000;
  --border-color-mid: #000000;
  --border-color-white: #000000;
  --color-red: #c00000;
  --color-green: #006400;
  --color-boku-green: #006400;

  /* page header  */
  --bg-color-heading: #ffffff;
  --text-color-heading: #000000;
  --bg-color-heading-link: #000000;
  --text-color-heading-link: #ffffff;

  /* side menue */
  --bg-color-menue: #ffffff;
  --bg-color-menue-hover: #000000;
  --text-color-menue: #000000;
  --text-color-menue-hover: #ffffff;

  --bg-color-button-export: var(--surface-white);
  --bg-color-button-new: var(--surface-white);
  --bg-color-button-del: var(--surface-white);
  --bg-color-button-back: var(--surface-white);
  --text-color-button: #000000;
  --bg-color-button-export-hover: #000000;
  --bg-color-button-new-hover: #000000;
  --bg-color-button-del-hover: #000000;
  --bg-color-button-back-hover: #000000;
  --text-color-button-hover: #ffffff;
  --bg-color-button-disabled: var(--surface-white);
  --text-color-button-disabled: #4b4b4b;
  --surface-base: var(--surface-white);
  --surface-muted: #ffffff;
  --surface-subtle: #ffffff;
  --surface-alt-row: #f0f0f0;
  --surface-toolbar: #ffffff;
  --surface-gradient-start: #ffffff;
  --surface-gradient-end: #ffffff;
  --surface-header-gradient-start: #ffffff;
  --surface-header-gradient-end: #ffffff;
  --surface-button-gradient-start: #ffffff;
  --surface-button-gradient-end: #ffffff;
  --surface-button-hover-end: #000000;
  --surface-success-gradient-start: #ffffff;
  --surface-success-gradient-end: #ffffff;
  --surface-info-bg: #ffffff;
  --surface-info-soft-bg: #ffffff;
  --surface-warning-bg: #fff36a;
  --surface-panel-gradient-start: #ffffff;
  --surface-panel-gradient-end: #ffffff;
  --surface-danger-gradient-start: #ffffff;
  --surface-danger-gradient-end: #ffd9d9;
  --surface-warning-gradient-start: #fffde8;
  --surface-warning-gradient-end: #fff36a;
  --dialog-caption-gradient-start: #ffffff;
  --dialog-caption-gradient-end: #ffffff;
  --dialog-caption-text: #000000;
  --dialog-caption-border: #000000;
  --dialog-caption-danger-gradient-start: #ffffff;
  --dialog-caption-danger-gradient-end: #ffd9d9;
  --dialog-caption-danger-text: #000000;
  --dialog-caption-warning-gradient-start: #fffde8;
  --dialog-caption-warning-gradient-end: #fff36a;
  --dialog-caption-warning-text: #000000;
  --dialog-caption-info-gradient-start: #ffffff;
  --dialog-caption-info-gradient-end: #ffffff;
  --dialog-caption-info-text: #000000;
  --pub-surface: var(--surface-base);
  --pub-surface-muted: var(--surface-subtle);
  --pub-header-gradient-start: var(--surface-header-gradient-start);
  --pub-header-gradient-end: var(--surface-header-gradient-end);
  --pub-row-even-bg: var(--surface-base);
  --pub-row-odd-bg: var(--surface-alt-row);
  --pub-toolbar-bg: var(--surface-toolbar);
  --pub-toolbar-button-gradient-start: var(--surface-button-gradient-start);
  --pub-toolbar-button-gradient-end: var(--surface-button-gradient-end);
  --pub-toolbar-button-hover-end: var(--surface-button-hover-end);
  --pub-card-meta-gradient-start: var(--surface-success-gradient-start);
  --pub-card-meta-gradient-end: var(--surface-success-gradient-end);
  --pub-list-state-loading-bg: var(--surface-info-bg);
  --pub-list-state-empty-bg: var(--surface-warning-bg);
  --pub-pagination-gradient-start: #ffffff;
  --pub-pagination-gradient-end: #ffffff;
  --button-border-width: 2px;
  --button-shadow: none;
  --button-hover-shadow: none;
  --button-focus-visible-shadow: 0 0 0 2px #ffffff, 0 0 0 5px #000000;
  --button-border-new: #000000;
  --button-border-back: #000000;
  --button-border-edit: #000000;
  --button-border-del: #000000;
  --button-border-export: #000000;
  --button-hover-border-new: #000000;
  --button-hover-border-back: #000000;
  --button-hover-border-edit: #000000;
  --button-hover-border-del: #000000;
  --button-hover-border-export: #000000;
  --switch-track-bg: #ffffff;
  --switch-track-border: #000000;
  --switch-track-checked-bg: #000000;
  --switch-track-checked-border: #000000;
  --switch-thumb-bg: #ffffff;
  --switch-focus-ring: #000000;
  --switch-check-color: #ffffff;
  --switch-cross-color: #000000;
  --workflow-nav-shadow: none;
  --workflow-connector-color: #000000;
  --workflow-step-text: #000000;
  --workflow-step-complete-text: #000000;
  --workflow-step-active-text: #000000;
  --workflow-step-marker-border: #000000;
  --workflow-step-marker-bg: #ffffff;
  --workflow-step-marker-text: #000000;
  --workflow-step-marker-complete-border: #000000;
  --workflow-step-marker-complete-bg: #ffffff;
  --workflow-step-marker-complete-text: #000000;
  --workflow-step-marker-active-border: #000000;
  --workflow-step-marker-active-bg: #000000;
  --workflow-step-marker-active-text: #ffffff;
  --font-size: 0.65em;
}

button,
.button,
.btnNew,
.btnBack,
.btnEdit,
.btnDel,
.btnExport {
  appearance: none;
  -webkit-appearance: none;
  align-items: center;
  border: var(--button-border-width) solid var(--border-color-mid);
  border-radius: 8px;
  display: inline-flex;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  gap: 0.35em;
  justify-content: center;
  margin-top: 0.35em;
  margin-bottom: 0.35em;
  min-height: 26px;
  padding: 2px 9px;
  line-height: 1;
  vertical-align: middle;
  box-shadow: var(--button-shadow);
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

button .fa,
.button .fa,
.btnNew .fa,
.btnBack .fa,
.btnEdit .fa,
.btnDel .fa,
.btnExport .fa {
  line-height: 1;
  vertical-align: middle;
}

button .fa:not(.sd),
.button .fa:not(.sd),
.btnNew .fa:not(.sd),
.btnBack .fa:not(.sd),
.btnEdit .fa:not(.sd),
.btnDel .fa:not(.sd),
.btnExport .fa:not(.sd) {
  transform: translateY(1px);
}

input + button,
input + .button,
input + .btnNew,
input + .btnBack,
input + .btnEdit,
input + .btnDel,
input + .btnExport,
select + button,
select + .button,
select + .btnNew,
select + .btnBack,
select + .btnEdit,
select + .btnDel,
select + .btnExport,
textarea + button,
textarea + .button,
textarea + .btnNew,
textarea + .btnBack,
textarea + .btnEdit,
textarea + .btnDel,
textarea + .btnExport {
  margin-left: 10px !important;
}

.ie-valid + button,
.ie-valid + .button,
.ie-valid + .btnNew,
.ie-valid + .btnBack,
.ie-valid + .btnEdit,
.ie-valid + .btnDel,
.ie-valid + .btnExport,
.ie-valid-unchanged + button,
.ie-valid-unchanged + .button,
.ie-valid-unchanged + .btnNew,
.ie-valid-unchanged + .btnBack,
.ie-valid-unchanged + .btnEdit,
.ie-valid-unchanged + .btnDel,
.ie-valid-unchanged + .btnExport,
.ie-invalid + button,
.ie-invalid + .button,
.ie-invalid + .btnNew,
.ie-invalid + .btnBack,
.ie-invalid + .btnEdit,
.ie-invalid + .btnDel,
.ie-invalid + .btnExport,
.formSelect + button,
.formSelect + .button,
.formSelect + .btnNew,
.formSelect + .btnBack,
.formSelect + .btnEdit,
.formSelect + .btnDel,
.formSelect + .btnExport {
  margin-left: 10px !important;
}

input + datalist + button,
input + datalist + .button,
input + datalist + .btnNew,
input + datalist + .btnBack,
input + datalist + .btnEdit,
input + datalist + .btnDel,
input + datalist + .btnExport,
.ie-valid + datalist + button,
.ie-valid + datalist + .button,
.ie-valid + datalist + .btnNew,
.ie-valid + datalist + .btnBack,
.ie-valid + datalist + .btnEdit,
.ie-valid + datalist + .btnDel,
.ie-valid + datalist + .btnExport,
.ie-valid-unchanged + datalist + button,
.ie-valid-unchanged + datalist + .button,
.ie-valid-unchanged + datalist + .btnNew,
.ie-valid-unchanged + datalist + .btnBack,
.ie-valid-unchanged + datalist + .btnEdit,
.ie-valid-unchanged + datalist + .btnDel,
.ie-valid-unchanged + datalist + .btnExport,
.ie-invalid + datalist + button,
.ie-invalid + datalist + .button,
.ie-invalid + datalist + .btnNew,
.ie-invalid + datalist + .btnBack,
.ie-invalid + datalist + .btnEdit,
.ie-invalid + datalist + .btnDel,
.ie-invalid + datalist + .btnExport,
button + button,
button + .button,
button + .btnNew,
button + .btnBack,
button + .btnEdit,
button + .btnDel,
button + .btnExport,
.button + button,
.button + .button,
.button + .btnNew,
.button + .btnBack,
.button + .btnEdit,
.button + .btnDel,
.button + .btnExport,
.btnNew + button,
.btnNew + .button,
.btnNew + .btnNew,
.btnNew + .btnBack,
.btnNew + .btnEdit,
.btnNew + .btnDel,
.btnNew + .btnExport,
.btnBack + button,
.btnBack + .button,
.btnBack + .btnNew,
.btnBack + .btnBack,
.btnBack + .btnEdit,
.btnBack + .btnDel,
.btnBack + .btnExport,
.btnEdit + button,
.btnEdit + .button,
.btnEdit + .btnNew,
.btnEdit + .btnBack,
.btnEdit + .btnEdit,
.btnEdit + .btnDel,
.btnEdit + .btnExport,
.btnDel + button,
.btnDel + .button,
.btnDel + .btnNew,
.btnDel + .btnBack,
.btnDel + .btnEdit,
.btnDel + .btnDel,
.btnDel + .btnExport,
.btnExport + button,
.btnExport + .button,
.btnExport + .btnNew,
.btnExport + .btnBack,
.btnExport + .btnEdit,
.btnExport + .btnDel,
.btnExport + .btnExport {
  margin-left: 10px !important;
}

button:hover,
.button:hover,
.btnNew:hover,
.btnBack:hover,
.btnEdit:hover,
.btnDel:hover,
.btnExport:hover {
  box-shadow: var(--button-hover-shadow);
}

.ui-link-button {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  text-decoration: inherit;
  vertical-align: baseline;
}

.ui-link-button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.ui-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

button:focus,
.button:focus,
.btnNew:focus,
.btnBack:focus,
.btnEdit:focus,
.btnDel:focus,
.btnExport:focus {
  outline: none;
  border-color: #1d4ed8;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 5px rgba(37, 99, 235, 0.32), var(--button-hover-shadow);
}

button:focus-visible,
.button:focus-visible,
.btnNew:focus-visible,
.btnBack:focus-visible,
.btnEdit:focus-visible,
.btnDel:focus-visible,
.btnExport:focus-visible {
  border-color: #1d4ed8;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 5px rgba(37, 99, 235, 0.32), var(--button-hover-shadow);
}

button:active,
.button:active,
.btnNew:active,
.btnBack:active,
.btnEdit:active,
.btnDel:active,
.btnExport:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}

button:disabled,
.button:disabled,
.btnNew:disabled,
.btnBack:disabled,
.btnEdit:disabled,
.btnDel:disabled,
.btnExport:disabled {
  box-shadow: none;
}

.btnNew {
  border-color: var(--button-border-new);
}

.btnBack {
  border-color: var(--button-border-back);
}

.btnEdit {
  border-color: var(--button-border-edit);
}

.btnDel {
  border-color: var(--button-border-del);
}

.btnExport {
  border-color: var(--button-border-export);
}

.btnNew:hover {
  border-color: var(--button-hover-border-new);
}

.btnBack:hover {
  border-color: var(--button-hover-border-back);
}

.btnEdit:hover {
  border-color: var(--button-hover-border-edit);
}

.btnDel:hover {
  border-color: var(--button-hover-border-del);
}

.btnExport:hover {
  border-color: var(--button-hover-border-export);
}

[data-theme="tea"] {
  /* palette */
  --color-linen: #eae2d6;
  --color-linen-soft: #f6f1e8;
  --color-linen-deep: #d8ccb9;
  --color-oyster: #d5c3aa;
  --color-oyster-soft: #e9dcc9;
  --color-oyster-deep: #b79f80;
  --color-pewter: #867666;
  --color-pewter-soft: #a79a8f;
  --color-pewter-deep: #675a4d;
  --color-lemon-tea: #e1b80d;
  --color-lemon-tea-soft: #efda78;
  --color-lemon-tea-deep: #b89208;
  --color-invalid-accent: #b98646;
  --ink-strong: #3d342c;
  --ink-soft: #6b5f53;

  /* working space */
  --surface-white: var(--color-linen-soft);
  --bg-color: #ede4d7;
  --bg-color-dark: var(--color-oyster-soft);
  --text-color: var(--ink-strong);
  --border-color-dark: var(--color-pewter-deep);
  --border-color-mid: #b7a894;
  --border-color-white: var(--surface-white);
  --color-red: #a67f39;
  --color-green: var(--color-pewter);
  --color-boku-green: #8a8a5d;

  /* page header */
  --bg-color-heading: #f0e8dc;
  --text-color-heading: var(--ink-strong);
  --bg-color-heading-link: #eadfbc;
  --text-color-heading-link: var(--color-pewter-deep);

  /* side menue */
  --bg-color-menue: #ddd0bc;
  --bg-color-menue-hover: var(--color-pewter);
  --text-color-menue: var(--color-pewter-deep);
  --text-color-menue-hover: #fcfaf6;

  /* buttons */
  --bg-color-button-export: var(--color-oyster-soft);
  --bg-color-button-new: var(--color-linen);
  --bg-color-button-del: var(--color-pewter-soft);
  --bg-color-button-back: var(--color-lemon-tea-soft);
  --text-color-button: var(--ink-strong);
  --bg-color-button-export-hover: var(--color-oyster);
  --bg-color-button-new-hover: var(--color-oyster);
  --bg-color-button-del-hover: var(--color-pewter);
  --bg-color-button-back-hover: var(--color-lemon-tea);
  --text-color-button-hover: var(--ink-strong);
  --bg-color-button-disabled: #e7dfd2;
  --text-color-button-disabled: #9a8f84;

  /* surfaces */
  --surface-base: #ede4d7;
  --surface-muted: #e2d3be;
  --surface-subtle: var(--color-linen-soft);
  --surface-alt-row: #e6dac8;
  --surface-toolbar: #d8c6aa;
  --surface-gradient-start: var(--color-linen-soft);
  --surface-gradient-end: var(--color-oyster-soft);
  --surface-header-gradient-start: #f2eadf;
  --surface-header-gradient-end: #d7c7ad;
  --surface-button-gradient-start: var(--color-linen-soft);
  --surface-button-gradient-end: #d5c09c;
  --surface-button-hover-end: #d1be67;
  --surface-success-gradient-start: #e9decb;
  --surface-success-gradient-end: #d8c395;
  --surface-info-bg: #ebe2d6;
  --surface-info-soft-bg: #f3ece3;
  --surface-warning-bg: #eadb92;
  --surface-panel-gradient-start: #f3ece2;
  --surface-panel-gradient-end: #d7c5aa;
  --surface-danger-gradient-start: #d9d0c5;
  --surface-danger-gradient-end: #a99b8f;
  --surface-warning-gradient-start: #f0e7bf;
  --surface-warning-gradient-end: #dfc44f;
  --dialog-caption-gradient-start: var(--surface-header-gradient-start);
  --dialog-caption-gradient-end: var(--surface-header-gradient-end);
  --dialog-caption-text: var(--ink-strong);
  --dialog-caption-border: var(--border-color-mid);
  --dialog-caption-danger-gradient-start: var(--surface-danger-gradient-start);
  --dialog-caption-danger-gradient-end: var(--surface-danger-gradient-end);
  --dialog-caption-danger-text: #3d342c;
  --dialog-caption-warning-gradient-start: var(--surface-warning-gradient-start);
  --dialog-caption-warning-gradient-end: var(--surface-warning-gradient-end);
  --dialog-caption-warning-text: #5f4b05;
  --dialog-caption-info-gradient-start: var(--surface-info-soft-bg);
  --dialog-caption-info-gradient-end: var(--surface-info-bg);
  --dialog-caption-info-text: var(--color-pewter-deep);

  /* pub aliases */
  --pub-surface: var(--surface-base);
  --pub-surface-muted: var(--surface-subtle);
  --pub-header-gradient-start: var(--surface-header-gradient-start);
  --pub-header-gradient-end: var(--surface-header-gradient-end);
  --pub-row-even-bg: var(--surface-base);
  --pub-row-odd-bg: var(--surface-alt-row);
  --pub-toolbar-bg: var(--surface-toolbar);
  --pub-toolbar-button-gradient-start: var(--surface-button-gradient-start);
  --pub-toolbar-button-gradient-end: var(--surface-button-gradient-end);
  --pub-toolbar-button-hover-end: var(--surface-button-hover-end);
  --pub-card-meta-gradient-start: var(--surface-success-gradient-start);
  --pub-card-meta-gradient-end: var(--surface-success-gradient-end);
  --pub-list-state-loading-bg: var(--surface-info-bg);
  --pub-list-state-empty-bg: var(--surface-warning-bg);
  --pub-pagination-gradient-start: #f3ece3;
  --pub-pagination-gradient-end: #d6c39a;
  --button-border-export: var(--color-oyster);
  --button-border-new: var(--color-linen-deep);
  --button-border-del: var(--color-pewter);
  --button-border-back: var(--color-lemon-tea);
  --button-border-edit: var(--button-border-back);
  --button-hover-border-export: var(--color-oyster-deep);
  --button-hover-border-new: var(--color-oyster-deep);
  --button-hover-border-del: var(--color-pewter-deep);
  --button-hover-border-back: var(--color-lemon-tea-deep);
  --button-hover-border-edit: var(--button-hover-border-back);
  --invalid-border-accent: var(--color-invalid-accent);
  --switch-track-bg: #d8ccb9;
  --switch-track-border: #8c7b67;
  --switch-track-checked-bg: var(--color-pewter-deep);
  --switch-track-checked-border: #4d4339;
  --switch-thumb-bg: var(--color-linen-soft);
  --switch-focus-ring: var(--color-pewter-deep);
  --switch-check-color: #fff9f1;
  --switch-cross-color: #6b5f53;
  --font-size: 0.65em;
}

[data-theme="coast"] {
  /* palette */
  --color-mist: #90afc5;
  --color-mist-soft: #d9e5ee;
  --color-mist-deep: #7394ac;
  --color-stone: #336b87;
  --color-stone-soft: #7395a8;
  --color-stone-deep: #234e63;
  --color-shadow: #2a3132;
  --color-shadow-soft: #5d6768;
  --color-shadow-deep: #171b1c;
  --color-autumn: #763626;
  --color-autumn-soft: #b3877c;
  --color-autumn-deep: #5e291c;
  --color-invalid-accent: #935141;
  --ink-strong: #1f292c;
  --ink-soft: #556265;

  /* working space */
  --surface-white: #edf0ee;
  --bg-color: #e3e7e4;
  --bg-color-dark: #c7d0cf;
  --text-color: var(--ink-strong);
  --border-color-dark: var(--color-shadow);
  --border-color-mid: #95a4a5;
  --border-color-white: var(--surface-white);
  --color-red: var(--color-autumn);
  --color-green: var(--color-stone);
  --color-boku-green: #4d7d52;

  /* page header */
  --bg-color-heading: #e8ecea;
  --text-color-heading: var(--ink-strong);
  --bg-color-heading-link: #d8c4bc;
  --text-color-heading-link: var(--color-shadow);

  /* side menue */
  --bg-color-menue: #d7dfdd;
  --bg-color-menue-hover: var(--color-autumn);
  --text-color-menue: var(--color-shadow);
  --text-color-menue-hover: #f8f4f1;

  /* buttons */
  --bg-color-button-export: var(--color-mist-soft);
  --bg-color-button-new: #d8e1de;
  --bg-color-button-del: #d8b6ad;
  --bg-color-button-back: #cdb8b0;
  --text-color-button: var(--ink-strong);
  --bg-color-button-export-hover: #bfd3e1;
  --bg-color-button-new-hover: #b8c9c5;
  --bg-color-button-del-hover: #c99184;
  --bg-color-button-back-hover: #b08e85;
  --text-color-button-hover: var(--ink-strong);
  --bg-color-button-disabled: #d7dddb;
  --text-color-button-disabled: #7b8788;

  /* surfaces */
  --surface-base: #e3e7e4;
  --surface-muted: #d4dbd8;
  --surface-subtle: #eef1ef;
  --surface-alt-row: #dbe2e0;
  --surface-toolbar: #c7b0a7;
  --surface-gradient-start: #eef1ef;
  --surface-gradient-end: #d8dedd;
  --surface-header-gradient-start: #e7eceb;
  --surface-header-gradient-end: #d1b8b0;
  --surface-button-gradient-start: #ecefed;
  --surface-button-gradient-end: #ccb4ac;
  --surface-button-hover-end: #a98075;
  --surface-success-gradient-start: #dde7ea;
  --surface-success-gradient-end: #adc2ce;
  --surface-info-bg: #e4ebea;
  --surface-info-soft-bg: #eff2f0;
  --surface-warning-bg: #dcc5bf;
  --surface-panel-gradient-start: #edf0ee;
  --surface-panel-gradient-end: #d2c1bc;
  --surface-danger-gradient-start: #e3c6bd;
  --surface-danger-gradient-end: #b98778;
  --surface-warning-gradient-start: #e8d6d0;
  --surface-warning-gradient-end: #c49a8e;
  --dialog-caption-gradient-start: var(--surface-header-gradient-start);
  --dialog-caption-gradient-end: var(--surface-header-gradient-end);
  --dialog-caption-text: var(--ink-strong);
  --dialog-caption-border: var(--border-color-mid);
  --dialog-caption-danger-gradient-start: var(--surface-danger-gradient-start);
  --dialog-caption-danger-gradient-end: var(--surface-danger-gradient-end);
  --dialog-caption-danger-text: var(--color-autumn-deep);
  --dialog-caption-warning-gradient-start: var(--surface-warning-gradient-start);
  --dialog-caption-warning-gradient-end: var(--surface-warning-gradient-end);
  --dialog-caption-warning-text: var(--color-autumn-deep);
  --dialog-caption-info-gradient-start: var(--color-mist-soft);
  --dialog-caption-info-gradient-end: #bfd3e1;
  --dialog-caption-info-text: var(--color-stone-deep);

  /* pub aliases */
  --pub-surface: var(--surface-base);
  --pub-surface-muted: var(--surface-subtle);
  --pub-header-gradient-start: var(--surface-header-gradient-start);
  --pub-header-gradient-end: var(--surface-header-gradient-end);
  --pub-row-even-bg: var(--surface-base);
  --pub-row-odd-bg: var(--surface-alt-row);
  --pub-toolbar-bg: var(--surface-toolbar);
  --pub-toolbar-button-gradient-start: var(--surface-button-gradient-start);
  --pub-toolbar-button-gradient-end: var(--surface-button-gradient-end);
  --pub-toolbar-button-hover-end: var(--surface-button-hover-end);
  --pub-card-meta-gradient-start: var(--surface-success-gradient-start);
  --pub-card-meta-gradient-end: var(--surface-success-gradient-end);
  --pub-list-state-loading-bg: var(--surface-info-bg);
  --pub-list-state-empty-bg: var(--surface-warning-bg);
  --pub-pagination-gradient-start: #eef1ef;
  --pub-pagination-gradient-end: #cbb2aa;
  --button-border-export: var(--color-stone);
  --button-border-new: var(--color-shadow-soft);
  --button-border-del: var(--color-autumn);
  --button-border-back: var(--color-autumn-soft);
  --button-border-edit: var(--button-border-back);
  --button-hover-border-export: var(--color-stone-deep);
  --button-hover-border-new: var(--color-shadow);
  --button-hover-border-del: var(--color-autumn-deep);
  --button-hover-border-back: var(--color-autumn);
  --button-hover-border-edit: var(--button-hover-border-back);
  --invalid-border-accent: var(--color-invalid-accent);
  --switch-track-bg: #c7d3d0;
  --switch-track-border: #5f7277;
  --switch-track-checked-bg: var(--color-stone-deep);
  --switch-track-checked-border: var(--color-shadow-deep);
  --switch-thumb-bg: #edf0ee;
  --switch-focus-ring: var(--color-stone-deep);
  --switch-check-color: #ffffff;
  --switch-cross-color: #4f6166;
  --font-size: 0.65em;
}

[data-theme="signal"] {
  /* palette */
  --color-signal-blue: #1d4ed8;
  --color-signal-blue-soft: #dbe7ff;
  --color-signal-blue-deep: #1e40af;
  --color-signal-green: #15803d;
  --color-signal-green-soft: #dcfce7;
  --color-signal-green-deep: #166534;
  --color-signal-red: #c62828;
  --color-signal-red-soft: #fde2e2;
  --color-signal-red-deep: #991b1b;
  --color-signal-orange: #ea7a15;
  --color-signal-orange-soft: #ffe7cc;
  --color-signal-orange-deep: #c65f0d;
  --color-slate-050: #f7f8f9;
  --color-slate-100: #eef1f3;
  --color-slate-200: #dde3e7;
  --color-slate-300: #c7d0d8;
  --color-slate-500: #6b7682;
  --color-slate-700: #47515c;
  --color-slate-900: #22272f;
  --color-invalid-accent: var(--color-signal-red);
  --ink-strong: var(--color-slate-900);
  --ink-soft: var(--color-slate-500);

  /* working space */
  --surface-white: #ffffff;
  --bg-color: var(--color-slate-100);
  --bg-color-dark: var(--color-slate-200);
  --text-color: var(--ink-strong);
  --border-color-dark: var(--color-slate-900);
  --border-color-mid: var(--color-slate-300);
  --border-color-white: var(--surface-white);
  --color-red: var(--color-signal-red);
  --color-green: var(--color-signal-green);
  --color-boku-green: var(--color-signal-green);

  /* page header */
  --bg-color-heading: var(--surface-white);
  --text-color-heading: var(--ink-strong);
  --bg-color-heading-link: var(--color-slate-200);
  --text-color-heading-link: var(--color-slate-900);

  /* side menue */
  --bg-color-menue: var(--color-slate-100);
  --bg-color-menue-hover: var(--color-slate-900);
  --text-color-menue: var(--color-slate-900);
  --text-color-menue-hover: #ffffff;

  /* buttons */
  --bg-color-button-export: var(--color-signal-blue);
  --bg-color-button-new: var(--color-signal-green);
  --bg-color-button-del: var(--color-signal-red);
  --bg-color-button-back: var(--color-signal-orange);
  --text-color-button: #ffffff;
  --bg-color-button-export-hover: var(--color-signal-blue-deep);
  --bg-color-button-new-hover: var(--color-signal-green-deep);
  --bg-color-button-del-hover: var(--color-signal-red-deep);
  --bg-color-button-back-hover: var(--color-signal-orange-deep);
  --text-color-button-hover: #ffffff;
  --bg-color-button-disabled: var(--color-slate-300);
  --text-color-button-disabled: var(--color-slate-700);

  /* surfaces */
  --surface-base: #ffffff;
  --surface-muted: var(--color-slate-100);
  --surface-subtle: var(--color-slate-050);
  --surface-alt-row: #f2f4f6;
  --surface-toolbar: var(--color-slate-200);
  --surface-gradient-start: #fafbfb;
  --surface-gradient-end: var(--color-slate-100);
  --surface-header-gradient-start: #fafbfc;
  --surface-header-gradient-end: var(--color-slate-200);
  --surface-button-gradient-start: #fafbfc;
  --surface-button-gradient-end: var(--color-slate-200);
  --surface-button-hover-end: var(--color-slate-300);
  --surface-success-gradient-start: var(--color-signal-green-soft);
  --surface-success-gradient-end: #c5f3d4;
  --surface-info-bg: #edf4ff;
  --surface-info-soft-bg: #f6f9ff;
  --surface-warning-bg: var(--color-signal-orange-soft);
  --surface-panel-gradient-start: #fafbfc;
  --surface-panel-gradient-end: #edf1f4;
  --surface-danger-gradient-start: var(--color-signal-red-soft);
  --surface-danger-gradient-end: #f7c9c9;
  --surface-warning-gradient-start: #fff3e3;
  --surface-warning-gradient-end: var(--color-signal-orange-soft);
  --dialog-caption-gradient-start: var(--surface-header-gradient-start);
  --dialog-caption-gradient-end: var(--surface-header-gradient-end);
  --dialog-caption-text: var(--ink-strong);
  --dialog-caption-border: var(--border-color-mid);
  --dialog-caption-danger-gradient-start: var(--color-signal-red-soft);
  --dialog-caption-danger-gradient-end: #f7c9c9;
  --dialog-caption-danger-text: var(--color-signal-red-deep);
  --dialog-caption-warning-gradient-start: #fff3e3;
  --dialog-caption-warning-gradient-end: var(--color-signal-orange-soft);
  --dialog-caption-warning-text: var(--color-signal-orange-deep);
  --dialog-caption-info-gradient-start: #edf4ff;
  --dialog-caption-info-gradient-end: var(--color-signal-blue-soft);
  --dialog-caption-info-text: var(--color-signal-blue-deep);

  /* pub aliases */
  --pub-surface: var(--surface-base);
  --pub-surface-muted: var(--surface-subtle);
  --pub-header-gradient-start: var(--surface-header-gradient-start);
  --pub-header-gradient-end: var(--surface-header-gradient-end);
  --pub-row-even-bg: var(--surface-base);
  --pub-row-odd-bg: var(--surface-alt-row);
  --pub-toolbar-bg: var(--surface-toolbar);
  --pub-toolbar-button-gradient-start: var(--surface-button-gradient-start);
  --pub-toolbar-button-gradient-end: var(--surface-button-gradient-end);
  --pub-toolbar-button-hover-end: var(--surface-button-hover-end);
  --pub-card-meta-gradient-start: #edf4ff;
  --pub-card-meta-gradient-end: var(--color-signal-blue-soft);
  --pub-card-meta-border: #c8d8f1;
  --pub-card-meta-label: var(--color-signal-blue-deep);
  --pub-card-meta-text: var(--color-slate-700);
  --pub-list-state-loading-bg: var(--surface-info-bg);
  --pub-list-state-empty-bg: var(--surface-warning-bg);
  --pub-pagination-gradient-start: #fafbfc;
  --pub-pagination-gradient-end: #e9edf0;
  --button-border-export: var(--color-signal-blue-deep);
  --button-border-new: var(--color-signal-green-deep);
  --button-border-del: var(--color-signal-red-deep);
  --button-border-back: var(--color-signal-orange-deep);
  --button-border-edit: var(--button-border-back);
  --button-hover-border-export: var(--color-signal-blue-deep);
  --button-hover-border-new: var(--color-signal-green-deep);
  --button-hover-border-del: var(--color-signal-red-deep);
  --button-hover-border-back: var(--color-signal-orange-deep);
  --button-hover-border-edit: var(--button-hover-border-back);
  --invalid-border-accent: var(--color-invalid-accent);
  --switch-track-bg: var(--color-slate-200);
  --switch-track-border: var(--color-slate-500);
  --switch-track-checked-bg: var(--color-signal-blue-deep);
  --switch-track-checked-border: #1e3a8a;
  --switch-thumb-bg: #ffffff;
  --switch-focus-ring: var(--color-signal-blue-deep);
  --switch-check-color: #ffffff;
  --switch-cross-color: var(--color-slate-700);
  --font-size: 0.65em;
}


/* BOKU Affiliation hervorheben */
.affiliation {
  font-weight: bold !important;
  color: #4dac26 !important;
}

/* Autorenname hervorheben */
.autorHighlight {
  font-weight: bold;
}


a.top-link {
  text-decoration: none;
  color: var(--text-color-heading-link);
  cursor: pointer;
}

header a {
  text-decoration: none;
  background-color: var(--bg-color-heading-link);
  color: var(--text-color-heading-link);
  cursor: pointer;
  padding-left: 8px;
  padding-right: 8px;
}

header a:hover {
  font-weight: bold;
}


html {
  height: 100%;
}

body {
  height:100%;
  overflow: hidden;
  font-family: var(--app-font-family, 'Work Sans', Arial, Helvetica, sans-serif);
  font-size: var(--font-size) !important; /* muss Bootstrap uebersteuern */
}

@media (max-width: 900px) {
  html,
  body {
    height: auto;
    min-height: 100%;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
  }

  app-root,
  #main,
  main,
  my-pub,
  my-community,
  my-forscher,
  my-reporting,
  my-orgeinheit,
  my-landingpage,
  #mainContent,
  #pub-erfassung,
  .ui-panel,
  .ui-panel-content-wrapper,
  .ui-panel-content,
  .ui-tabview,
  .ui-tabview-panel {
    height: auto !important;
    max-height: none !important;
    min-height: 0;
  }

  #main,
  main,
  my-pub,
  my-community,
  my-forscher,
  my-reporting,
  my-orgeinheit,
  my-landingpage,
  #mainContent,
  #pub-erfassung,
  .ui-panel-content-wrapper,
  .ui-panel-content,
  .ui-tabview,
  .ui-tabview-panel {
    overflow: visible !important;
  }

  .ui-tabview-panel[hidden] {
    display: none !important;
  }
}

.ui-panel-content-wrapper {
  /* background-color: red; */
  /* border: 2px solid red; */
  overflow: hidden;
  }

.ui-panel-titlebar {
  background-color: var(--bg-color-dark) !IMPORTANT;
  border-bottom: 1px solid var(--border-color-mid) !IMPORTANT;
  /* border-color: var(--border-color-mid);*/
  color: var(--text-color) !IMPORTANT;
  font-weight: bold;
}




html body .docContent { 
  margin-top:10px !important;
  padding:12px !important;
  border:1px solid var(--border-color-mid) !important;
  background:var(--surface-subtle) !important;
  border-radius:12px !important;
}

html body .docContent br { display:none !important; }

html body .docContent > b{
  display:block !important;
  margin:0 0 10px 0 !important;
  font-size:13px !important;
  font-weight:800 !important;
  color:var(--text-color) !important;
}

html body .docContent a{
  display:flex !important;
  width:100% !important;
  box-sizing:border-box !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;

  margin-top:10px !important;
  padding:12px !important;

  border:1px solid var(--border-color-mid) !important;
  border-radius:12px !important;
  background:var(--surface-white) !important;

  color:var(--text-color) !important;
  font-weight:800 !important;
  text-decoration:none !important;

  overflow-wrap:anywhere !important;
}

html body .docContent a::after{
  display:inline-block !important;
  padding:8px 10px !important;
  border-radius:10px !important;
  background:var(--bg-color-heading-link) !important;
  border:1px solid var(--border-color-mid) !important;
  color:var(--text-color-heading-link) !important;
  font-size:13px !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}

html[lang="de" i] body .docContent a::after{
  content:"Öffnen" !important;
}

html[lang="en" i] body .docContent a::after{
  content:"Open" !important;
}