@charset "UTF-8";
@import 'fonts.css'; /* Enthält alle Font-Informationen und lädt sie */
/* Lädt die Icon-Codes als Varibalen */
@import 'app.css';
@import url("open-iconic/font/css/open-iconic-bootstrap.min.css");
:root {
  /* Standard Farbwerte und Einstellungen */
  --white: #fff;
  --black: #222;
  /* hnc-blau */
  --hncblau: #005CA2;
  --hncblauhover: #0067b5;
  --hncblauhell1: #57AAE9;
  --hncblauhell2: #C1E4FF;
  --hncblauhell3: #f0f9ff;
  --hncblauhell2glass: #BEE4FFAA;
  --hncblaudunkel: #003a66;
  /* hnc-orange */
  --hncorangedunkel1: #cc7000;
  --hncorange: #ff8c00;
  --hncorangehover: #ffa333;
  --hncorangehell: #ffaa00;
  --hncorangehell2: #FFE0BB;
  /* hnc-grün */
  --hncgruen: #86bb23;
  --hncgruenhell1: #a9ffd6;
  --hncgruenhell2: #ABEC32;
  /* grautöne */
  --hncblaugrau: #6c757d; /*#6c757d*/
  --graudunkel1: #8e8e8e;
  --graudunkel2: #505050;
  --dunkelgrau: #353535;
  --grau: #c8c8c8; /*#c8c8c8*/
  --hellgrau: #F6F6F6; /*#f6f6f6*/
  --hellgrau70: rgb(246,246,246,0.7);
  --hellgrau1: #ebebeb;
  --hellgrau2: #e5e5e5; /*#e5e5e5*/
  --hellgrau3: #e9ecef;
  /* weitere Farben */
  --red: #FF0000;
  --hncrot: var(--red);
  --alarm: var(--red);
  --hncrothell1: #f8d7da;
  --gruen: #10ce00;
  --dunkler: rgb(0,0,0,0.07); /* schwarz mit nur 7% Deckkraft */
  /* Standard Zuweisung der Farbwerte */
  --main-text-color: var(--black);
  --main-bg-color: var(--white);
  --button-bg-color: var(--hncblau);
  --button-bg-hover: var(--hncblauhell1);
  --button-bg-active: var(--hncorange);
  --button-bg-activehover: var(--hncorangehover);
  --button-bg-secondary: var(--white);
  --button-bg-disabled: var(--grau);
  --button-text-color: var(--white);
  --button-text-secondary: var(--hncblau);
  --button-text-hover: var(--hncblau);
  --button-text-active: var(--white);
  --button-text-disabled: var(--hncblaugrau);
  --button-icon-color: var(--white);
  --grid-border-color: var(--grau);
  --charm-bg-color: var(--dunkler);
  --charm-text-color: var(--hncblaugrau);
  --charm-bg-hover: var(--hncblauhell2);
  --charm-text-hover: var(--hncblau);
  --input-focus-color: var(--hncblauhell1);
  /*checkboxen*/
  --checkbox-bg-color: var(--white);
  --checkbox-bg-color-disabled: var(--hellgrau2);
  --checkbox-bg-color-hover: var(--hncblauhell2);
  --checkbox-color-checked: var(--hncorange);
  --checkbox-color-disabled: var(--grau);
  --checkbox-color-checked-hover: var(--hncorangehover);
  --checkbox-color-stop-hover: var(--hncblau);
  --checkbox-color-unchecked: var(--hncblau);
  --checkbox-color-stop: var(--hncorange);
  --checkbox-border-color-disabled: var(--grau);
  --checkbox-border-color: var(--grau);
  --checkbox-border-color-checked: transparent;
  /*inputfelder*/
  --input-color: var(--black);
  --input-bg-color: var(--white);
  --input-border-color: var(--grau);
  --input-bg-color-disabled: var(--hellgrau2);
  --input-color-disabled: var(--hncblaugrau);
  --placeholder-color: var(--grau);
  --selection-color: var(--white);
  --selection-bg-color: var(--hncblau);
  --alarm-color: red;
  --warn-color: var(--hncorange);
  --ok-color: var(--gruen);
  --input-bg-color-index-red: red;
  --input-bg-color-index-green: green;
  --input-bg-color-index-yellow: yellow;
  --input-bg-color-index-orange: orange;
  --input-bg-color-index-blue: blue;
  --input-bg-color-index-purple: purple;
  --input-bg-color-index-brown: brown;
  --input-bg-color-index-pink: pink;
}

/* Main Layout */
body.hnc {
  background-color: var(--white);
}

/* Kacheln */
.tile-wrapper {
  background-color: var(--hellgrau2);
}
.tile-wrapper .tile {
  background: var(--hncblau);
  color: white;
}
.tile-wrapper .tile:hover {
  background-color: var(--hncblauhell1);
}
.tile-wrapper .tile .tileimg {
  background-color: #fff;
}
.tile-wrapper .tile-notifications .tile-notification {
  background-color: var(--grau);
  color: white;
}
.tile-wrapper .tile-notifications .tile-notification.alarm.alarm-set:before, .tile-wrapper .tile-notifications .tile-notification.warn.warn-set:before, .tile-wrapper .tile-notifications .tile-notification.ok.ok-set:before {
  color: white;
}
.tile-wrapper .tile-notifications .tile-notification.alarm:before, .tile-wrapper .tile-notifications .tile-notification.warn:before, .tile-wrapper .tile-notifications .tile-notification.ok:before, .tile-wrapper .tile-notifications .tile-notification.settings:before {
  color: var(--hncblaugrau);
}
.tile-wrapper .tile-notifications .tile-notification.alarm.alarm-set {
  background-color: var(--alarm-color);
}
.tile-wrapper .tile-notifications .tile-notification.warn.warn-set {
  background-color: var(--warn-color);
}
.tile-wrapper .tile-notifications .tile-notification.ok.ok-set {
  background-color: var(--gruen);
}
.tile-wrapper .tile-notifications .tile-notification.settings {
  background-color: transparent;
}

/* Toolbar oder Charmbar über dem Grid */
.header-toolbar .e-toolbar,
.hnc-grid-container .e-toolbar,
.charmbar.e-toolbar {
  background: transparent;
}
.header-toolbar .e-toolbar .e-toolbar-items,
.hnc-grid-container .e-toolbar .e-toolbar-items,
.charmbar.e-toolbar .e-toolbar-items {
  background: transparent;
}
.header-toolbar .e-toolbar .e-toolbar-item .charm, .header-toolbar .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper,
.charmbar.e-toolbar .e-toolbar-item .charm,
.charmbar.e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper {
  /* alle Charm items */
  /* Filterbar-Toggler */
  /* Preview-Toggler */
  /* Todo-View-Toggler */
  /* Delete-Item */
}
.header-toolbar .e-toolbar .e-toolbar-item .charm button.e-split-btn, .header-toolbar .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper button.e-split-btn,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm button.e-split-btn,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper button.e-split-btn,
.charmbar.e-toolbar .e-toolbar-item .charm button.e-split-btn,
.charmbar.e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper button.e-split-btn {
  /* Der Button wird versteckt */
  opacity: 1;
}
.header-toolbar .e-toolbar .e-toolbar-item .charm button.e-control.e-btn.e-lib, .header-toolbar .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper button.e-control.e-btn.e-lib,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm button.e-control.e-btn.e-lib,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper button.e-control.e-btn.e-lib,
.charmbar.e-toolbar .e-toolbar-item .charm button.e-control.e-btn.e-lib,
.charmbar.e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper button.e-control.e-btn.e-lib {
  background: var(--charm-bg-color);
}
.header-toolbar .e-toolbar .e-toolbar-item .charm button.e-control.e-btn.e-lib .e-btn-icon, .header-toolbar .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper button.e-control.e-btn.e-lib .e-btn-icon,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm button.e-control.e-btn.e-lib .e-btn-icon,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper button.e-control.e-btn.e-lib .e-btn-icon,
.charmbar.e-toolbar .e-toolbar-item .charm button.e-control.e-btn.e-lib .e-btn-icon,
.charmbar.e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper button.e-control.e-btn.e-lib .e-btn-icon {
  color: var(--charm-text-color);
}
.header-toolbar .e-toolbar .e-toolbar-item .charm button.e-control.e-btn.e-lib:hover:not([disabled]), .header-toolbar .e-toolbar .e-toolbar-item .charm button.e-control.e-btn.e-lib:focus-visible:focus, .header-toolbar .e-toolbar .e-toolbar-item .charm button.e-control.e-btn.e-lib.e-split-btn > button.e-dropdown-btn, .header-toolbar .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper button.e-control.e-btn.e-lib:hover:not([disabled]), .header-toolbar .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper button.e-control.e-btn.e-lib:focus-visible:focus, .header-toolbar .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper button.e-control.e-btn.e-lib.e-split-btn > button.e-dropdown-btn,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm button.e-control.e-btn.e-lib:hover:not([disabled]),
.hnc-grid-container .e-toolbar .e-toolbar-item .charm button.e-control.e-btn.e-lib:focus-visible:focus,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm button.e-control.e-btn.e-lib.e-split-btn > button.e-dropdown-btn,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper button.e-control.e-btn.e-lib:hover:not([disabled]),
.hnc-grid-container .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper button.e-control.e-btn.e-lib:focus-visible:focus,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper button.e-control.e-btn.e-lib.e-split-btn > button.e-dropdown-btn,
.charmbar.e-toolbar .e-toolbar-item .charm button.e-control.e-btn.e-lib:hover:not([disabled]),
.charmbar.e-toolbar .e-toolbar-item .charm button.e-control.e-btn.e-lib:focus-visible:focus,
.charmbar.e-toolbar .e-toolbar-item .charm button.e-control.e-btn.e-lib.e-split-btn > button.e-dropdown-btn,
.charmbar.e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper button.e-control.e-btn.e-lib:hover:not([disabled]),
.charmbar.e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper button.e-control.e-btn.e-lib:focus-visible:focus,
.charmbar.e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper button.e-control.e-btn.e-lib.e-split-btn > button.e-dropdown-btn {
  background: var(--charm-bg-hover);
  background-color: var(--charm-bg-hover);
  color: var(--charm-text-hover);
}
.header-toolbar .e-toolbar .e-toolbar-item .charm button.e-control.e-btn.e-lib:hover:not([disabled]) .e-btn-icon, .header-toolbar .e-toolbar .e-toolbar-item .charm button.e-control.e-btn.e-lib:focus-visible:focus .e-btn-icon, .header-toolbar .e-toolbar .e-toolbar-item .charm button.e-control.e-btn.e-lib.e-split-btn > button.e-dropdown-btn .e-btn-icon, .header-toolbar .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper button.e-control.e-btn.e-lib:hover:not([disabled]) .e-btn-icon, .header-toolbar .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper button.e-control.e-btn.e-lib:focus-visible:focus .e-btn-icon, .header-toolbar .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper button.e-control.e-btn.e-lib.e-split-btn > button.e-dropdown-btn .e-btn-icon,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm button.e-control.e-btn.e-lib:hover:not([disabled]) .e-btn-icon,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm button.e-control.e-btn.e-lib:focus-visible:focus .e-btn-icon,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm button.e-control.e-btn.e-lib.e-split-btn > button.e-dropdown-btn .e-btn-icon,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper button.e-control.e-btn.e-lib:hover:not([disabled]) .e-btn-icon,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper button.e-control.e-btn.e-lib:focus-visible:focus .e-btn-icon,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper button.e-control.e-btn.e-lib.e-split-btn > button.e-dropdown-btn .e-btn-icon,
.charmbar.e-toolbar .e-toolbar-item .charm button.e-control.e-btn.e-lib:hover:not([disabled]) .e-btn-icon,
.charmbar.e-toolbar .e-toolbar-item .charm button.e-control.e-btn.e-lib:focus-visible:focus .e-btn-icon,
.charmbar.e-toolbar .e-toolbar-item .charm button.e-control.e-btn.e-lib.e-split-btn > button.e-dropdown-btn .e-btn-icon,
.charmbar.e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper button.e-control.e-btn.e-lib:hover:not([disabled]) .e-btn-icon,
.charmbar.e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper button.e-control.e-btn.e-lib:focus-visible:focus .e-btn-icon,
.charmbar.e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper button.e-control.e-btn.e-lib.e-split-btn > button.e-dropdown-btn .e-btn-icon {
  color: var(--charm-text-hover);
}
.header-toolbar .e-toolbar .e-toolbar-item .charm button.e-control.e-btn.e-lib:disabled .e-btn-icon, .header-toolbar .e-toolbar .e-toolbar-item .charm button.e-control.e-btn.e-lib[disabled] .e-btn-icon, .header-toolbar .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper button.e-control.e-btn.e-lib:disabled .e-btn-icon, .header-toolbar .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper button.e-control.e-btn.e-lib[disabled] .e-btn-icon,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm button.e-control.e-btn.e-lib:disabled .e-btn-icon,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm button.e-control.e-btn.e-lib[disabled] .e-btn-icon,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper button.e-control.e-btn.e-lib:disabled .e-btn-icon,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper button.e-control.e-btn.e-lib[disabled] .e-btn-icon,
.charmbar.e-toolbar .e-toolbar-item .charm button.e-control.e-btn.e-lib:disabled .e-btn-icon,
.charmbar.e-toolbar .e-toolbar-item .charm button.e-control.e-btn.e-lib[disabled] .e-btn-icon,
.charmbar.e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper button.e-control.e-btn.e-lib:disabled .e-btn-icon,
.charmbar.e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper button.e-control.e-btn.e-lib[disabled] .e-btn-icon {
  color: lightgrey;
}
.header-toolbar .e-toolbar .e-toolbar-item .charm.btn-toggle-filterbar.filterbar-is-visible button.e-control.e-btn.e-lib, .header-toolbar .e-toolbar .e-toolbar-item .charm.btn-toggle-filterbar.filterbar-is-visible button.e-control.e-btn.e-lib:focus, .header-toolbar .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-filterbar.filterbar-is-visible button.e-control.e-btn.e-lib, .header-toolbar .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-filterbar.filterbar-is-visible button.e-control.e-btn.e-lib:focus,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm.btn-toggle-filterbar.filterbar-is-visible button.e-control.e-btn.e-lib,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm.btn-toggle-filterbar.filterbar-is-visible button.e-control.e-btn.e-lib:focus,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-filterbar.filterbar-is-visible button.e-control.e-btn.e-lib,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-filterbar.filterbar-is-visible button.e-control.e-btn.e-lib:focus,
.charmbar.e-toolbar .e-toolbar-item .charm.btn-toggle-filterbar.filterbar-is-visible button.e-control.e-btn.e-lib,
.charmbar.e-toolbar .e-toolbar-item .charm.btn-toggle-filterbar.filterbar-is-visible button.e-control.e-btn.e-lib:focus,
.charmbar.e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-filterbar.filterbar-is-visible button.e-control.e-btn.e-lib,
.charmbar.e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-filterbar.filterbar-is-visible button.e-control.e-btn.e-lib:focus {
  background-color: var(--hncorange);
}
.header-toolbar .e-toolbar .e-toolbar-item .charm.btn-toggle-filterbar.filterbar-is-visible button.e-control.e-btn.e-lib:hover, .header-toolbar .e-toolbar .e-toolbar-item .charm.btn-toggle-filterbar.filterbar-is-visible button.e-control.e-btn.e-lib:focus:hover, .header-toolbar .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-filterbar.filterbar-is-visible button.e-control.e-btn.e-lib:hover, .header-toolbar .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-filterbar.filterbar-is-visible button.e-control.e-btn.e-lib:focus:hover,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm.btn-toggle-filterbar.filterbar-is-visible button.e-control.e-btn.e-lib:hover,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm.btn-toggle-filterbar.filterbar-is-visible button.e-control.e-btn.e-lib:focus:hover,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-filterbar.filterbar-is-visible button.e-control.e-btn.e-lib:hover,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-filterbar.filterbar-is-visible button.e-control.e-btn.e-lib:focus:hover,
.charmbar.e-toolbar .e-toolbar-item .charm.btn-toggle-filterbar.filterbar-is-visible button.e-control.e-btn.e-lib:hover,
.charmbar.e-toolbar .e-toolbar-item .charm.btn-toggle-filterbar.filterbar-is-visible button.e-control.e-btn.e-lib:focus:hover,
.charmbar.e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-filterbar.filterbar-is-visible button.e-control.e-btn.e-lib:hover,
.charmbar.e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-filterbar.filterbar-is-visible button.e-control.e-btn.e-lib:focus:hover {
  background-color: var(--hncorangehover);
}
.header-toolbar .e-toolbar .e-toolbar-item .charm.btn-toggle-filterbar.filterbar-is-visible button.e-control.e-btn.e-lib .e-btn-icon, .header-toolbar .e-toolbar .e-toolbar-item .charm.btn-toggle-filterbar.filterbar-is-visible button.e-control.e-btn.e-lib:focus .e-btn-icon, .header-toolbar .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-filterbar.filterbar-is-visible button.e-control.e-btn.e-lib .e-btn-icon, .header-toolbar .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-filterbar.filterbar-is-visible button.e-control.e-btn.e-lib:focus .e-btn-icon,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm.btn-toggle-filterbar.filterbar-is-visible button.e-control.e-btn.e-lib .e-btn-icon,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm.btn-toggle-filterbar.filterbar-is-visible button.e-control.e-btn.e-lib:focus .e-btn-icon,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-filterbar.filterbar-is-visible button.e-control.e-btn.e-lib .e-btn-icon,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-filterbar.filterbar-is-visible button.e-control.e-btn.e-lib:focus .e-btn-icon,
.charmbar.e-toolbar .e-toolbar-item .charm.btn-toggle-filterbar.filterbar-is-visible button.e-control.e-btn.e-lib .e-btn-icon,
.charmbar.e-toolbar .e-toolbar-item .charm.btn-toggle-filterbar.filterbar-is-visible button.e-control.e-btn.e-lib:focus .e-btn-icon,
.charmbar.e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-filterbar.filterbar-is-visible button.e-control.e-btn.e-lib .e-btn-icon,
.charmbar.e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-filterbar.filterbar-is-visible button.e-control.e-btn.e-lib:focus .e-btn-icon {
  color: var(--button-text-active);
}
.header-toolbar .e-toolbar .e-toolbar-item .charm.btn-toggle-previewbox.previewbox-is-visible button.e-control.e-btn.e-lib, .header-toolbar .e-toolbar .e-toolbar-item .charm.btn-toggle-previewbox.previewbox-is-visible button.e-control.e-btn.e-lib:focus, .header-toolbar .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-previewbox.previewbox-is-visible button.e-control.e-btn.e-lib, .header-toolbar .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-previewbox.previewbox-is-visible button.e-control.e-btn.e-lib:focus,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm.btn-toggle-previewbox.previewbox-is-visible button.e-control.e-btn.e-lib,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm.btn-toggle-previewbox.previewbox-is-visible button.e-control.e-btn.e-lib:focus,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-previewbox.previewbox-is-visible button.e-control.e-btn.e-lib,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-previewbox.previewbox-is-visible button.e-control.e-btn.e-lib:focus,
.charmbar.e-toolbar .e-toolbar-item .charm.btn-toggle-previewbox.previewbox-is-visible button.e-control.e-btn.e-lib,
.charmbar.e-toolbar .e-toolbar-item .charm.btn-toggle-previewbox.previewbox-is-visible button.e-control.e-btn.e-lib:focus,
.charmbar.e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-previewbox.previewbox-is-visible button.e-control.e-btn.e-lib,
.charmbar.e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-previewbox.previewbox-is-visible button.e-control.e-btn.e-lib:focus {
  background-color: var(--hncorange);
}
.header-toolbar .e-toolbar .e-toolbar-item .charm.btn-toggle-previewbox.previewbox-is-visible button.e-control.e-btn.e-lib:hover, .header-toolbar .e-toolbar .e-toolbar-item .charm.btn-toggle-previewbox.previewbox-is-visible button.e-control.e-btn.e-lib:focus:hover, .header-toolbar .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-previewbox.previewbox-is-visible button.e-control.e-btn.e-lib:hover, .header-toolbar .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-previewbox.previewbox-is-visible button.e-control.e-btn.e-lib:focus:hover,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm.btn-toggle-previewbox.previewbox-is-visible button.e-control.e-btn.e-lib:hover,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm.btn-toggle-previewbox.previewbox-is-visible button.e-control.e-btn.e-lib:focus:hover,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-previewbox.previewbox-is-visible button.e-control.e-btn.e-lib:hover,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-previewbox.previewbox-is-visible button.e-control.e-btn.e-lib:focus:hover,
.charmbar.e-toolbar .e-toolbar-item .charm.btn-toggle-previewbox.previewbox-is-visible button.e-control.e-btn.e-lib:hover,
.charmbar.e-toolbar .e-toolbar-item .charm.btn-toggle-previewbox.previewbox-is-visible button.e-control.e-btn.e-lib:focus:hover,
.charmbar.e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-previewbox.previewbox-is-visible button.e-control.e-btn.e-lib:hover,
.charmbar.e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-previewbox.previewbox-is-visible button.e-control.e-btn.e-lib:focus:hover {
  background-color: var(--hncorangehover);
}
.header-toolbar .e-toolbar .e-toolbar-item .charm.btn-toggle-previewbox.previewbox-is-visible button.e-control.e-btn.e-lib .e-btn-icon, .header-toolbar .e-toolbar .e-toolbar-item .charm.btn-toggle-previewbox.previewbox-is-visible button.e-control.e-btn.e-lib:focus .e-btn-icon, .header-toolbar .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-previewbox.previewbox-is-visible button.e-control.e-btn.e-lib .e-btn-icon, .header-toolbar .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-previewbox.previewbox-is-visible button.e-control.e-btn.e-lib:focus .e-btn-icon,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm.btn-toggle-previewbox.previewbox-is-visible button.e-control.e-btn.e-lib .e-btn-icon,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm.btn-toggle-previewbox.previewbox-is-visible button.e-control.e-btn.e-lib:focus .e-btn-icon,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-previewbox.previewbox-is-visible button.e-control.e-btn.e-lib .e-btn-icon,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-previewbox.previewbox-is-visible button.e-control.e-btn.e-lib:focus .e-btn-icon,
.charmbar.e-toolbar .e-toolbar-item .charm.btn-toggle-previewbox.previewbox-is-visible button.e-control.e-btn.e-lib .e-btn-icon,
.charmbar.e-toolbar .e-toolbar-item .charm.btn-toggle-previewbox.previewbox-is-visible button.e-control.e-btn.e-lib:focus .e-btn-icon,
.charmbar.e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-previewbox.previewbox-is-visible button.e-control.e-btn.e-lib .e-btn-icon,
.charmbar.e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-previewbox.previewbox-is-visible button.e-control.e-btn.e-lib:focus .e-btn-icon {
  color: var(--button-text-active);
}
.header-toolbar .e-toolbar .e-toolbar-item .charm.btn-toggle-gridview.todoview-is-active button.e-control.e-btn.e-lib, .header-toolbar .e-toolbar .e-toolbar-item .charm.btn-toggle-gridview.todoview-is-active button.e-control.e-btn.e-lib:focus, .header-toolbar .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-gridview.todoview-is-active button.e-control.e-btn.e-lib, .header-toolbar .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-gridview.todoview-is-active button.e-control.e-btn.e-lib:focus,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm.btn-toggle-gridview.todoview-is-active button.e-control.e-btn.e-lib,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm.btn-toggle-gridview.todoview-is-active button.e-control.e-btn.e-lib:focus,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-gridview.todoview-is-active button.e-control.e-btn.e-lib,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-gridview.todoview-is-active button.e-control.e-btn.e-lib:focus,
.charmbar.e-toolbar .e-toolbar-item .charm.btn-toggle-gridview.todoview-is-active button.e-control.e-btn.e-lib,
.charmbar.e-toolbar .e-toolbar-item .charm.btn-toggle-gridview.todoview-is-active button.e-control.e-btn.e-lib:focus,
.charmbar.e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-gridview.todoview-is-active button.e-control.e-btn.e-lib,
.charmbar.e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-gridview.todoview-is-active button.e-control.e-btn.e-lib:focus {
  background-color: var(--hncorange);
}
.header-toolbar .e-toolbar .e-toolbar-item .charm.btn-toggle-gridview.todoview-is-active button.e-control.e-btn.e-lib:hover, .header-toolbar .e-toolbar .e-toolbar-item .charm.btn-toggle-gridview.todoview-is-active button.e-control.e-btn.e-lib:focus:hover, .header-toolbar .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-gridview.todoview-is-active button.e-control.e-btn.e-lib:hover, .header-toolbar .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-gridview.todoview-is-active button.e-control.e-btn.e-lib:focus:hover,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm.btn-toggle-gridview.todoview-is-active button.e-control.e-btn.e-lib:hover,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm.btn-toggle-gridview.todoview-is-active button.e-control.e-btn.e-lib:focus:hover,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-gridview.todoview-is-active button.e-control.e-btn.e-lib:hover,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-gridview.todoview-is-active button.e-control.e-btn.e-lib:focus:hover,
.charmbar.e-toolbar .e-toolbar-item .charm.btn-toggle-gridview.todoview-is-active button.e-control.e-btn.e-lib:hover,
.charmbar.e-toolbar .e-toolbar-item .charm.btn-toggle-gridview.todoview-is-active button.e-control.e-btn.e-lib:focus:hover,
.charmbar.e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-gridview.todoview-is-active button.e-control.e-btn.e-lib:hover,
.charmbar.e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-gridview.todoview-is-active button.e-control.e-btn.e-lib:focus:hover {
  background-color: var(--hncorangehover);
}
.header-toolbar .e-toolbar .e-toolbar-item .charm.btn-toggle-gridview.todoview-is-active button.e-control.e-btn.e-lib .e-btn-icon, .header-toolbar .e-toolbar .e-toolbar-item .charm.btn-toggle-gridview.todoview-is-active button.e-control.e-btn.e-lib:focus .e-btn-icon, .header-toolbar .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-gridview.todoview-is-active button.e-control.e-btn.e-lib .e-btn-icon, .header-toolbar .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-gridview.todoview-is-active button.e-control.e-btn.e-lib:focus .e-btn-icon,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm.btn-toggle-gridview.todoview-is-active button.e-control.e-btn.e-lib .e-btn-icon,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm.btn-toggle-gridview.todoview-is-active button.e-control.e-btn.e-lib:focus .e-btn-icon,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-gridview.todoview-is-active button.e-control.e-btn.e-lib .e-btn-icon,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-gridview.todoview-is-active button.e-control.e-btn.e-lib:focus .e-btn-icon,
.charmbar.e-toolbar .e-toolbar-item .charm.btn-toggle-gridview.todoview-is-active button.e-control.e-btn.e-lib .e-btn-icon,
.charmbar.e-toolbar .e-toolbar-item .charm.btn-toggle-gridview.todoview-is-active button.e-control.e-btn.e-lib:focus .e-btn-icon,
.charmbar.e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-gridview.todoview-is-active button.e-control.e-btn.e-lib .e-btn-icon,
.charmbar.e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.btn-toggle-gridview.todoview-is-active button.e-control.e-btn.e-lib:focus .e-btn-icon {
  color: var(--button-text-active);
}
.header-toolbar .e-toolbar .e-toolbar-item .charm.delete-red button.e-control.e-btn.e-lib:hover:not([disabled]),
.header-toolbar .e-toolbar .e-toolbar-item .charm.delete-red button.e-control.e-btn.e-lib:focus-visible:focus, .header-toolbar .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.delete-red button.e-control.e-btn.e-lib:hover:not([disabled]),
.header-toolbar .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.delete-red button.e-control.e-btn.e-lib:focus-visible:focus,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm.delete-red button.e-control.e-btn.e-lib:hover:not([disabled]),
.hnc-grid-container .e-toolbar .e-toolbar-item .charm.delete-red button.e-control.e-btn.e-lib:focus-visible:focus,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.delete-red button.e-control.e-btn.e-lib:hover:not([disabled]),
.hnc-grid-container .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.delete-red button.e-control.e-btn.e-lib:focus-visible:focus,
.charmbar.e-toolbar .e-toolbar-item .charm.delete-red button.e-control.e-btn.e-lib:hover:not([disabled]),
.charmbar.e-toolbar .e-toolbar-item .charm.delete-red button.e-control.e-btn.e-lib:focus-visible:focus,
.charmbar.e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.delete-red button.e-control.e-btn.e-lib:hover:not([disabled]),
.charmbar.e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.delete-red button.e-control.e-btn.e-lib:focus-visible:focus {
  background: var(--alarm-color);
}
.header-toolbar .e-toolbar .e-toolbar-item .charm.delete-red button.e-control.e-btn.e-lib:hover:not([disabled]) .e-btn-icon,
.header-toolbar .e-toolbar .e-toolbar-item .charm.delete-red button.e-control.e-btn.e-lib:focus-visible:focus .e-btn-icon, .header-toolbar .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.delete-red button.e-control.e-btn.e-lib:hover:not([disabled]) .e-btn-icon,
.header-toolbar .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.delete-red button.e-control.e-btn.e-lib:focus-visible:focus .e-btn-icon,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm.delete-red button.e-control.e-btn.e-lib:hover:not([disabled]) .e-btn-icon,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm.delete-red button.e-control.e-btn.e-lib:focus-visible:focus .e-btn-icon,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.delete-red button.e-control.e-btn.e-lib:hover:not([disabled]) .e-btn-icon,
.hnc-grid-container .e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.delete-red button.e-control.e-btn.e-lib:focus-visible:focus .e-btn-icon,
.charmbar.e-toolbar .e-toolbar-item .charm.delete-red button.e-control.e-btn.e-lib:hover:not([disabled]) .e-btn-icon,
.charmbar.e-toolbar .e-toolbar-item .charm.delete-red button.e-control.e-btn.e-lib:focus-visible:focus .e-btn-icon,
.charmbar.e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.delete-red button.e-control.e-btn.e-lib:hover:not([disabled]) .e-btn-icon,
.charmbar.e-toolbar .e-toolbar-item .charm .e-split-btn-wrapper.delete-red button.e-control.e-btn.e-lib:focus-visible:focus .e-btn-icon {
  color: white;
}

/* Register */
div.e-tab.hnc-register {
  /* Der Container für den Inhalt der Tabs */
}
div.e-tab.hnc-register .e-content {
  border-left-color: var(--hellgrau2);
  background-color: var(--hellgrau);
}

div.e-tab.hnc-register .e-content .hnc-register-container .hnc-register-block .hnc-register-block-header,
article.content .hnc-register-container .hnc-register-block .hnc-register-block-header {
  background-color: var(--hellgrau70);
  border-color: var(--grid-border-color);
}
div.e-tab.hnc-register .e-content .hnc-register-container .hnc-register-block .hnc-register-block-content,
article.content .hnc-register-container .hnc-register-block .hnc-register-block-content {
  border-color: var(--grid-border-color);
}

/* Tooltip */
.e-tooltip-wrap.e-popup {
  border-color: transparent;
  background: var(--dunkelgrau);
  /* Gestaltung des Inhalts */
  /* 'Outer' ist der Wrapper für den Rahmen. Dieser Bildet einen Pfeil */
}
.e-tooltip-wrap.e-popup .e-tip-content {
  color: white;
}
.e-tooltip-wrap.e-popup .e-tip-content p .tooltip-more-link {
  color: var(--hncorange);
}
.e-tooltip-wrap.e-popup .e-arrow-tip-outer.e-tip-bottom {
  border-left-color: rgba(0, 0, 0, 0);
  border-right-color: rgba(0, 0, 0, 0);
  border-top-color: var(--dunkelgrau);
}
.e-tooltip-wrap.e-popup .e-arrow-tip-outer.e-tip-left {
  border-bottom-color: rgba(0, 0, 0, 0);
  border-right-color: var(--dunkelgrau);
  border-top-color: rgba(0, 0, 0, 0);
}
.e-tooltip-wrap.e-popup .e-arrow-tip-outer.e-tip-right {
  border-bottom-color: rgba(0, 0, 0, 0);
  border-top-color: rgba(0, 0, 0, 0);
  border-left-color: var(--dunkelgrau);
}
.e-tooltip-wrap.e-popup .e-arrow-tip-outer.e-tip-top {
  border-bottom-color: var(--dunkelgrau);
  border-right-color: rgba(0, 0, 0, 0);
  border-left-color: rgba(0, 0, 0, 0);
}

/* Input Controls */
/* Main-Menü */
.main-menu-dropdown .e-contextmenu-container ul,
.my-profile-dropdown .e-contextmenu-container ul {
  color: var(--black);
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 16px 16px rgba(0, 0, 0, 0.1);
}
.main-menu-dropdown .e-contextmenu-container ul .e-menu-item.e-selected,
.my-profile-dropdown .e-contextmenu-container ul .e-menu-item.e-selected {
  background-color: var(--hncorange);
}
.main-menu-dropdown .e-contextmenu-container ul .e-menu-item.e-selected:hover,
.my-profile-dropdown .e-contextmenu-container ul .e-menu-item.e-selected:hover {
  background-color: var(--hncorangehover);
}
.main-menu-dropdown .e-contextmenu-container ul .e-menu-item.e-focused,
.my-profile-dropdown .e-contextmenu-container ul .e-menu-item.e-focused {
  background-color: var(--hncblauhell2);
  color: var(--hncblau);
}

/* Enthält Farbvariablen und Zuweisungen */
/* Main Layout */
:root {
  /* Ersetzt Bootstrap Vorgaben */
  --bs-font-sans-serif: system-ui,-apple-system,Roboto,"Segoe UI","Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  /* HNC Standard-Werte */
  --control-borderradius: 7px;
  --control-borderradius2: 9px;
  --control-focus-offset: 0px;
  --control-focus-width: 4px;
  --control-focus-margin: calc( var(--control-focus-width) + var(--control-focus-offset) );
  --control-gap: 16px;
  --main-page-padding: 20px;
  --main-page-width: 1080px;
}

body.hnc {
  font-family: Roboto;
  width: 100%;
  height: 100vh;
  margin: 0;
}
body.hnc #app {
  width: 100%;
  height: 100%;
}
body.hnc .e-control { /* überschreibt Bootstrap */
  font-family: Roboto;
}

/* FOCUS allgemein */
button.e-control:focus-visible:focus,
.tiles .tile-wrapper:focus-visible {
  outline: var(--control-focus-width) solid var(--input-focus-color) !important;
  outline-offset: var(--control-focus-offset) !important;
  box-shadow: none;
  z-index: 100;
  position: relative;
}

.e-control:focus:not(:focus-visible), .e-control *:focus:not(:focus-visible) {
  outline: 0;
}

/* Kacheln */
div.tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
div.tiles .tile-wrapper {
  display: flex;
  background-color: var(--hellgrau2);
  max-width: 162px;
  min-width: 162px;
  border-radius: 11px;
  position: relative;
}
div.tiles .tile-wrapper a:hover {
  text-decoration: none;
}
div.tiles .tile-wrapper .tile {
  display: flex;
  border-radius: 11px;
  position: relative;
  margin: 0px;
  min-width: 162px;
  height: 162px;
  text-align: center;
  vertical-align: central;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 200ms;
}
div.tiles .tile-wrapper .tile:hover .label {
  font-size: 1.2em;
  -webkit-line-clamp: 5;
  /*text-align: center;*/
  transition: all 100ms ease 1000ms;
  bottom: 10px;
  line-height: 1.1;
}
div.tiles .tile-wrapper .tile:hover .tileimg,
div.tiles .tile-wrapper .tile:hover .tileicon {
  opacity: 0.2;
  transition: all 300ms ease 1000ms;
}
div.tiles .tile-wrapper .tile .tileicon {
  font-size: 60px;
}
div.tiles .tile-wrapper .tile .tileimg {
  position: absolute;
  top: 29%;
  left: 29%;
  width: 42%;
  height: 42%;
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}
div.tiles .tile-wrapper .tile .label {
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  hyphens: auto;
  font-size: 0.8rem;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
div.tiles .tile-wrapper .tile-notifications {
  display: flex;
  flex-direction: column;
}
div.tiles .tile-wrapper .tile-notifications .tile-notification {
  min-width: 18px;
  text-align: center;
  border-radius: 6px;
  transition: 100ms;
  position: absolute;
  right: -10px;
  height: 22px;
  width: 0;
  font-size: 15px;
  line-height: 18px;
  padding: 0;
  background-color: var(--grau);
  color: white;
  display: none;
  border: 2px solid white;
}
div.tiles .tile-wrapper .tile-notifications .tile-notification.alarm:after, div.tiles .tile-wrapper .tile-notifications .tile-notification.warn:after, div.tiles .tile-wrapper .tile-notifications .tile-notification.ok:after, div.tiles .tile-wrapper .tile-notifications .tile-notification.settings:after {
  font-family: "hnc_main_icons";
  font-size: 15px;
  margin-right: 0;
  margin-left: 5px;
}
div.tiles .tile-wrapper .tile-notifications .tile-notification.alarm {
  top: 10px;
}
div.tiles .tile-wrapper .tile-notifications .tile-notification.alarm.alarm-set {
  display: inline-flex;
  width: auto;
  padding: 0 7px;
}
div.tiles .tile-wrapper .tile-notifications .tile-notification.alarm:after {
  content: "\e937";
}
div.tiles .tile-wrapper .tile-notifications .tile-notification.warn {
  top: 37px;
}
div.tiles .tile-wrapper .tile-notifications .tile-notification.warn.warn-set {
  display: block;
  width: auto;
  padding: 0 7px;
}
div.tiles .tile-wrapper .tile-notifications .tile-notification.warn:after {
  content: "\ea4a";
  font-size: 15px;
}
div.tiles .tile-wrapper .tile-notifications .tile-notification.ok {
  /* inaktiv im aktuellen Design */
  /* top: 70px; */
  display: none;
}
div.tiles .tile-wrapper .tile-notifications .tile-notification.ok:after {
  content: "\e99d";
}
div.tiles .tile-wrapper .tile-notifications .tile-notification.settings {
  /* inaktiv im aktuellen Design */
  /* bottom: 10px; */
  display: none;
}
div.tiles .tile-wrapper .tile-notifications .tile-notification.settings:after {
  content: "\e980";
}
div.tiles .tile-wrapper.special .tile:before {
  content: "";
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  right: 5px;
  border: 3px solid var(--white);
  border-radius: inherit;
  pointer-events: none;
}
div.tiles .tile-wrapper.special .tile .label {
  bottom: 10px;
}

/* Toolbar oder Charmbar über dem Grid */
.header-toolbar .e-toolbar,
.hnc-grid-container .e-toolbar,
.hnc-grid-container .e-toolbar.e-spacer-toolbar,
.charmbar.e-toolbar {
  border-width: 0;
  /*min-height: 60px;*/
  padding-bottom: 10px;
  padding-top: 4px; /* Platz nach oben für Focus-Rahmen */
}
.header-toolbar .e-toolbar .e-toolbar-items,
.hnc-grid-container .e-toolbar .e-toolbar-items,
.hnc-grid-container .e-toolbar.e-spacer-toolbar .e-toolbar-items,
.charmbar.e-toolbar .e-toolbar-items {
  gap: 10px;
  width: 100%;
  position: inherit;
}
.header-toolbar .e-toolbar .e-toolbar-items .e-toolbar-item,
.hnc-grid-container .e-toolbar .e-toolbar-items .e-toolbar-item,
.hnc-grid-container .e-toolbar.e-spacer-toolbar .e-toolbar-items .e-toolbar-item,
.charmbar.e-toolbar .e-toolbar-items .e-toolbar-item {
  padding: 0;
  margin: var(--control-focus-margin);
  /* links bündig mit grid */
  /* rechts bündig mit grid */
  /* alle Buttontexte ausblenden */
}
.header-toolbar .e-toolbar .e-toolbar-items .e-toolbar-item > *,
.hnc-grid-container .e-toolbar .e-toolbar-items .e-toolbar-item > *,
.hnc-grid-container .e-toolbar.e-spacer-toolbar .e-toolbar-items .e-toolbar-item > *,
.charmbar.e-toolbar .e-toolbar-items .e-toolbar-item > * {
  text-overflow: clip;
}
.header-toolbar .e-toolbar .e-toolbar-items .e-toolbar-item:first-child,
.hnc-grid-container .e-toolbar .e-toolbar-items .e-toolbar-item:first-child,
.hnc-grid-container .e-toolbar.e-spacer-toolbar .e-toolbar-items .e-toolbar-item:first-child,
.charmbar.e-toolbar .e-toolbar-items .e-toolbar-item:first-child {
  /*margin-left: var(--control-focus-margin) !important;*/
}
.header-toolbar .e-toolbar .e-toolbar-items .e-toolbar-item:last-child,
.hnc-grid-container .e-toolbar .e-toolbar-items .e-toolbar-item:last-child,
.hnc-grid-container .e-toolbar.e-spacer-toolbar .e-toolbar-items .e-toolbar-item:last-child,
.charmbar.e-toolbar .e-toolbar-items .e-toolbar-item:last-child {
  /*margin-right: var(--control-focus-margin) !important;*/
}
.header-toolbar .e-toolbar .e-toolbar-items .e-toolbar-item:has(.seperate-left),
.hnc-grid-container .e-toolbar .e-toolbar-items .e-toolbar-item:has(.seperate-left),
.hnc-grid-container .e-toolbar.e-spacer-toolbar .e-toolbar-items .e-toolbar-item:has(.seperate-left),
.charmbar.e-toolbar .e-toolbar-items .e-toolbar-item:has(.seperate-left) {
  padding-left: 16px !important;
  border-left: 1px dotted lightgrey;
}
.header-toolbar .e-toolbar .e-toolbar-items .e-toolbar-item.e-spacer,
.hnc-grid-container .e-toolbar .e-toolbar-items .e-toolbar-item.e-spacer,
.hnc-grid-container .e-toolbar.e-spacer-toolbar .e-toolbar-items .e-toolbar-item.e-spacer,
.charmbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-spacer {
  cursor: auto;
}
.header-toolbar .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text,
.header-toolbar .e-toolbar .e-toolbar-items .e-toolbar-item .charm button.e-btn text,
.hnc-grid-container .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text,
.hnc-grid-container .e-toolbar .e-toolbar-items .e-toolbar-item .charm button.e-btn text,
.hnc-grid-container .e-toolbar.e-spacer-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text,
.hnc-grid-container .e-toolbar.e-spacer-toolbar .e-toolbar-items .e-toolbar-item .charm button.e-btn text,
.charmbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text,
.charmbar.e-toolbar .e-toolbar-items .e-toolbar-item .charm button.e-btn text {
  display: none;
  /*Button mit Text als Option
  font-size: 14px;
  color: var(--charm-text-color);
  margin-left: 8px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;*/
}
.header-toolbar .e-toolbar .e-toolbar-items .e-toolbar-item button.e-control.e-btn.e-lib,
.hnc-grid-container .e-toolbar .e-toolbar-items .e-toolbar-item button.e-control.e-btn.e-lib,
.hnc-grid-container .e-toolbar.e-spacer-toolbar .e-toolbar-items .e-toolbar-item button.e-control.e-btn.e-lib,
.charmbar.e-toolbar .e-toolbar-items .e-toolbar-item button.e-control.e-btn.e-lib {
  width: auto;
  max-width: 40px;
  /* Button mit Text als Option
  min-width: 100px;
  max-width: 150px;*/
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 24px;
  line-height: 24px;
  /*text-align: center;*/
  border-radius: var(--control-borderradius);
  box-shadow: none;
  border: 0;
  /*margin-right: 10px;*/
  padding: 0 8px;
  overflow: hidden;
  /*transition: max-width 50ms ease 0ms;*/
  /* deaktivierte Buttons */
}
.header-toolbar .e-toolbar .e-toolbar-items .e-toolbar-item button.e-control.e-btn.e-lib text,
.hnc-grid-container .e-toolbar .e-toolbar-items .e-toolbar-item button.e-control.e-btn.e-lib text,
.hnc-grid-container .e-toolbar.e-spacer-toolbar .e-toolbar-items .e-toolbar-item button.e-control.e-btn.e-lib text,
.charmbar.e-toolbar .e-toolbar-items .e-toolbar-item button.e-control.e-btn.e-lib text {
  display: none; /* Text des Buttons nicht anzeigen */
}
.header-toolbar .e-toolbar .e-toolbar-items .e-toolbar-item button.e-control.e-btn.e-lib .e-btn-icon,
.hnc-grid-container .e-toolbar .e-toolbar-items .e-toolbar-item button.e-control.e-btn.e-lib .e-btn-icon,
.hnc-grid-container .e-toolbar.e-spacer-toolbar .e-toolbar-items .e-toolbar-item button.e-control.e-btn.e-lib .e-btn-icon,
.charmbar.e-toolbar .e-toolbar-items .e-toolbar-item button.e-control.e-btn.e-lib .e-btn-icon {
  display: flex;
  justify-content: center;
  font-size: 30px;
  height: 30px;
  margin: 0;
  vertical-align: middle;
  line-height: 30px;
  width: 30px;
  min-width: 24px;
}
.header-toolbar .e-toolbar .e-toolbar-items .e-toolbar-item button.e-control.e-btn.e-lib:disabled, .header-toolbar .e-toolbar .e-toolbar-items .e-toolbar-item button.e-control.e-btn.e-lib[disabled],
.hnc-grid-container .e-toolbar .e-toolbar-items .e-toolbar-item button.e-control.e-btn.e-lib:disabled,
.hnc-grid-container .e-toolbar .e-toolbar-items .e-toolbar-item button.e-control.e-btn.e-lib[disabled],
.hnc-grid-container .e-toolbar.e-spacer-toolbar .e-toolbar-items .e-toolbar-item button.e-control.e-btn.e-lib:disabled,
.hnc-grid-container .e-toolbar.e-spacer-toolbar .e-toolbar-items .e-toolbar-item button.e-control.e-btn.e-lib[disabled],
.charmbar.e-toolbar .e-toolbar-items .e-toolbar-item button.e-control.e-btn.e-lib:disabled,
.charmbar.e-toolbar .e-toolbar-items .e-toolbar-item button.e-control.e-btn.e-lib[disabled] {
  cursor: not-allowed;
}
.header-toolbar .e-toolbar .e-toolbar-items .e-toolbar-item button.e-control.e-btn.e-lib.e-dropdown-btn,
.hnc-grid-container .e-toolbar .e-toolbar-items .e-toolbar-item button.e-control.e-btn.e-lib.e-dropdown-btn,
.hnc-grid-container .e-toolbar.e-spacer-toolbar .e-toolbar-items .e-toolbar-item button.e-control.e-btn.e-lib.e-dropdown-btn,
.charmbar.e-toolbar .e-toolbar-items .e-toolbar-item button.e-control.e-btn.e-lib.e-dropdown-btn {
  /* Der Button wird nach links über den eigentlichen Button verschoben */
  /*position: absolute;*/
  display: none;
}
.header-toolbar .e-toolbar .e-toolbar-items .e-toolbar-item .notification:after,
.hnc-grid-container .e-toolbar .e-toolbar-items .e-toolbar-item .notification:after,
.hnc-grid-container .e-toolbar.e-spacer-toolbar .e-toolbar-items .e-toolbar-item .notification:after,
.charmbar.e-toolbar .e-toolbar-items .e-toolbar-item .notification:after {
  content: " ";
  background-color: var(--hncorange);
  width: 16px;
  height: 16px;
  position: absolute;
  top: -6px;
  right: -6px;
  border: 2px solid white;
  border-radius: 8px;
}
.header-toolbar .e-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator),
.hnc-grid-container .e-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator),
.hnc-grid-container .e-toolbar.e-spacer-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator),
.charmbar.e-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator) {
  padding-left: 0;
  padding-right: 0;
  /*padding-bottom: 10px;*/
}

/* Register */
div.e-tab.hnc-register {
  /* Der Container für den Inhalt/Page (rechter Bereich) der Tabs */
  /* Die Tabs/Register */
  /* Speziell für vertikale Tabs */
}
div.e-tab.hnc-register .e-content {
  height: 100%;
  max-height: 100%;
  overflow: auto;
  border-left-width: 0;
  border-left-style: solid;
  border-radius: var(--control-borderradius2);
  /* Für Create-Edit-Forms im Register-Content */
}
div.e-tab.hnc-register .e-content .e-item > form,
div.e-tab.hnc-register .e-content .e-item > div:first-child {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
div.e-tab.hnc-register .e-content:has(.hnc-register-container) {
  overflow: hidden;
}
div.e-tab.hnc-register .e-tab-header {
  /* Enthält die einzelnen Tab-Zeilen */
}
div.e-tab.hnc-register .e-tab-header .e-toolbar-items {
  gap: 0;
  /* Für die Indikatoren */
}
div.e-tab.hnc-register .e-tab-header .e-toolbar-items .e-toolbar-item,
div.e-tab.hnc-register .e-tab-header .e-toolbar-items .e-toolbar-item.e-active {
  /* Items haben immer einen Rahmen mit Radius */
  /* Das verhindert springen wenn bei nested */
  border-radius: var(--control-borderradius);
  border-width: 0;
  border-color: transparent;
  position: relative;
}
div.e-tab.hnc-register .e-tab-header .e-toolbar-items .e-toolbar-item .e-tab-wrap,
div.e-tab.hnc-register .e-tab-header .e-toolbar-items .e-toolbar-item .e-tab-wrap:hover,
div.e-tab.hnc-register .e-tab-header .e-toolbar-items .e-toolbar-item.e-active .e-tab-wrap,
div.e-tab.hnc-register .e-tab-header .e-toolbar-items .e-toolbar-item.e-active .e-tab-wrap:hover {
  height: auto;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  border-radius: calc(var(--control-borderradius) - 1px);
  padding: 0;
  /*overflow: hidden;*/
}
div.e-tab.hnc-register .e-tab-header .e-toolbar-items .e-toolbar-item .e-text-wrap,
div.e-tab.hnc-register .e-tab-header .e-toolbar-items .e-toolbar-item.e-active .e-text-wrap {
  padding: 0 10px;
  height: 30px;
}
div.e-tab.hnc-register .e-tab-header .e-toolbar-items .e-toolbar-item .e-text-wrap,
div.e-tab.hnc-register .e-tab-header .e-toolbar-items .e-toolbar-item .e-tab-text,
div.e-tab.hnc-register .e-tab-header .e-toolbar-items .e-toolbar-item.e-active .e-text-wrap,
div.e-tab.hnc-register .e-tab-header .e-toolbar-items .e-toolbar-item.e-active .e-tab-text {
  color: var(--hncblau);
  font-family: Roboto;
  font-size: 1rem;
  text-transform: none;
}
div.e-tab.hnc-register .e-tab-header .e-toolbar-items .e-toolbar-item div.tab-item-count,
div.e-tab.hnc-register .e-tab-header .e-toolbar-items .e-toolbar-item.e-active div.tab-item-count {
  border-radius: 4px;
  width: auto;
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  margin-left: 10px;
  background: #f3f3f3;
  color: black;
  font-size: 0.8em;
  line-height: 24px;
}
div.e-tab.hnc-register .e-tab-header .e-toolbar-items .e-toolbar-item.nested,
div.e-tab.hnc-register .e-tab-header .e-toolbar-items .e-toolbar-item.e-active.nested {
  margin-left: 1em; /* Tab einrücken */
}
div.e-tab.hnc-register .e-tab-header .e-toolbar-items .e-toolbar-item .e-tab-wrap:hover {
  background-color: var(--hncblauhell2);
}
div.e-tab.hnc-register .e-tab-header .e-toolbar-items .e-toolbar-item.e-active .e-tab-wrap {
  background-color: var(--hncorange);
}
div.e-tab.hnc-register .e-tab-header .e-toolbar-items .e-toolbar-item.e-active .e-tab-wrap .e-text-wrap,
div.e-tab.hnc-register .e-tab-header .e-toolbar-items .e-toolbar-item.e-active .e-tab-wrap .e-tab-text {
  color: var(--white);
}
div.e-tab.hnc-register .e-tab-header .e-toolbar-items .e-toolbar-item.e-active .e-tab-wrap:hover {
  background-color: var(--hncorangehover);
}
div.e-tab.hnc-register .e-tab-header .e-toolbar-items .e-toolbar-item.e-active .e-tab-wrap:hover .e-text-wrap,
div.e-tab.hnc-register .e-tab-header .e-toolbar-items .e-toolbar-item.e-active .e-tab-wrap:hover .e-tab-text {
  color: var(--white);
}
div.e-tab.hnc-register .e-tab-header .e-toolbar-items .e-toolbar-item.e-active div.tab-item-count {
  display: none;
}
div.e-tab.hnc-register .e-tab-header .e-toolbar-items .e-toolbar-item .e-tab-wrap:before {
  content: "";
  position: absolute;
  left: 0;
}
div.e-tab.hnc-register .e-tab-header .e-toolbar-items .e-toolbar-item:not(.nested) .e-tab-wrap:before {
  /* nur der Punkt vorm Tab */
  left: 0;
  height: 4px;
  width: 4px;
  border: 0;
  border-radius: 0;
  background-color: var(--grau);
  transform: translateY(-50%);
  top: 50%;
}
div.e-tab.hnc-register .e-tab-header .e-toolbar-items .e-toolbar-item.nested .e-tab-wrap:before {
  /* Tree-Style-L */
  left: -4px;
  height: 50%;
  width: 6px;
  border-bottom-left-radius: 3px;
  border-left: 1px solid var(--grau);
  border-bottom: 1px solid var(--grau);
}
div.e-tab.hnc-register .e-tab-header .e-toolbar-items .e-toolbar-item.nested:not(.e-active) + .nested .e-tab-wrap:before {
  /* Tree-Style-L-L */
  height: 92%;
  transform: translateY(-14px);
}
div.e-tab.hnc-register .e-tab-header .e-toolbar-items .e-toolbar-item.has-nested-active .e-tab-wrap {
  background-color: var(--hncorangehover);
  border-bottom-right-radius: 0;
}
div.e-tab.hnc-register .e-tab-header .e-toolbar-items .e-toolbar-item.has-nested-active .e-tab-wrap .e-text-wrap,
div.e-tab.hnc-register .e-tab-header .e-toolbar-items .e-toolbar-item.has-nested-active .e-tab-wrap .e-tab-text {
  color: var(--white);
}
div.e-tab.hnc-register .e-tab-header .e-toolbar-items .e-toolbar-item.e-active.nested .e-tab-wrap {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
div.e-tab.hnc-register .e-tab-header .e-toolbar-items .e-toolbar-item.e-active.nested .e-tab-wrap:before {
  content: none;
}
div.e-tab.hnc-register .e-tab-header .e-toolbar-items .e-toolbar-item.semi-active.nested:not(.nested-last) .e-tab-wrap {
  border-radius: 0;
  border-left: 1px dotted var(--hncorange);
  border-right: 1px dotted var(--hncorange);
}
div.e-tab.hnc-register .e-tab-header.e-vertical {
  max-width: 30%;
  padding-right: 10px;
  padding-left: 7px; /* Platz für Focus-Rahmen */
  margin-left: -7px; /* Platz für Focus-Rahmen */
  padding-top: 7px; /* Platz für Focus-Rahmen */
  margin-top: -7px; /* Platz für Focus-Rahmen */
}
div.e-tab.hnc-register .e-tab-header.e-vertical:before {
  border-width: 0;
}

div.e-tab.hnc-register.e-focused > .e-tab-header .e-toolbar-item .e-tab-wrap:focus {
  outline: var(--control-focus-width) solid var(--input-focus-color);
  outline-offset: var(--control-focus-offset);
  border-color: transparent;
  background-color: var(--hncblauhell2);
  border-color: var(--hncblauhell2);
}

div.e-tab.hnc-register .e-content .hnc-register-container,
article.content .hnc-register-container {
  flex: 1 1 auto;
  overflow: auto; /*Darf nicht auto sein wegen sticky header */
  padding: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  align-content: flex-start;
}
div.e-tab.hnc-register .e-content .hnc-register-container .hnc-register-block,
article.content .hnc-register-container .hnc-register-block {
  min-width: 600px;
  max-width: 600px;
  border-radius: var(--control-borderradius);
  /* box-shadow: 0 0 10px var(--dunkler); kein Schatten */
  display: flex;
  flex-direction: column;
  margin-top: 1em;
  /* Blöcke mit Tabellen haben keine max-width und immer volle Breite */
}
div.e-tab.hnc-register .e-content .hnc-register-container .hnc-register-block .hnc-register-block-header,
article.content .hnc-register-container .hnc-register-block .hnc-register-block-header {
  /*backdrop-filter: blur(2px);*/
  height: 0;
  display: flex;
  align-items: center;
  padding-left: 10px;
  border-width: 0;
  border-style: solid;
  border-top-left-radius: var(--control-borderradius);
  border-top-right-radius: var(--control-borderradius);
  position: sticky;
  top: 2px;
  z-index: 500;
}
div.e-tab.hnc-register .e-content .hnc-register-container .hnc-register-block .hnc-register-block-header label,
article.content .hnc-register-container .hnc-register-block .hnc-register-block-header label {
  font-size: 14px;
  line-height: 1;
  background-color: var(--hncblau);
  color: white;
  margin-left: 0;
  /*padding-top: 0.1em; /*um den font vertikal zu zentrieren und den Whitespace auszugleichen*/
  padding: 4px 8px;
  border-radius: var(--control-borderradius);
}
div.e-tab.hnc-register .e-content .hnc-register-container .hnc-register-block .hnc-register-block-content,
article.content .hnc-register-container .hnc-register-block .hnc-register-block-content {
  display: flex; /* Damit zwischen den Controls ein gap (Abstand) entsteht */
  flex-direction: column; /* Elemente untereinander */
  gap: var(--control-gap); /* Der Abstand zwischen den Controls (default 10px) */
  padding: 10px;
  border-width: 1px;
  border-style: solid;
  /*border-top: 0;*/
  border-bottom-left-radius: var(--control-borderradius);
  border-bottom-right-radius: var(--control-borderradius);
  border-top-left-radius: var(--control-borderradius);
  border-top-right-radius: var(--control-borderradius);
  flex: 1;
  /* Abstand zum nächsten Control hinzufügen, außer das letzte im Container */
}
div.e-tab.hnc-register .e-content .hnc-register-container .hnc-register-block .hnc-register-block-content hr,
article.content .hnc-register-container .hnc-register-block .hnc-register-block-content hr {
  margin: 0.4em 0;
}
div.e-tab.hnc-register .e-content .hnc-register-container .hnc-register-block .hnc-register-block-content .hnc-flex-row,
div.e-tab.hnc-register .e-content .hnc-register-container .hnc-register-block .hnc-register-block-content .hnc-flex-column,
article.content .hnc-register-container .hnc-register-block .hnc-register-block-content .hnc-flex-row,
article.content .hnc-register-container .hnc-register-block .hnc-register-block-content .hnc-flex-column {
  /* Abstand für nebeneinander gesetzte Controls */
  gap: var(--control-gap);
  /* Ein Suffix wie zB Prozent, Tege etc wird hinter dem Control angezeigt und nach unten positioniert */
  /* TODO: Allgemeingültige Lösung finden. zB: Suffix-Parameter in den HNC-Controls */
}
div.e-tab.hnc-register .e-content .hnc-register-container .hnc-register-block .hnc-register-block-content .hnc-flex-row .hnc-control-suffix,
div.e-tab.hnc-register .e-content .hnc-register-container .hnc-register-block .hnc-register-block-content .hnc-flex-column .hnc-control-suffix,
article.content .hnc-register-container .hnc-register-block .hnc-register-block-content .hnc-flex-row .hnc-control-suffix,
article.content .hnc-register-container .hnc-register-block .hnc-register-block-content .hnc-flex-column .hnc-control-suffix {
  align-self: flex-end;
  margin-bottom: 5px;
}
div.e-tab.hnc-register .e-content .hnc-register-container .hnc-register-block .hnc-register-block-content .hnc-control-wrapper:not(:last-child),
article.content .hnc-register-container .hnc-register-block .hnc-register-block-content .hnc-control-wrapper:not(:last-child) {
  /*                        margin-bottom: calc( var(--control-focus-offset) + var(--control-focus-width));
                          margin-right: calc( var(--control-focus-offset) + var(--control-focus-width));
  */
}
div.e-tab.hnc-register .e-content .hnc-register-container .hnc-register-block:has(.e-grid), div.e-tab.hnc-register .e-content .hnc-register-container .hnc-register-block.full-width-block,
article.content .hnc-register-container .hnc-register-block:has(.e-grid),
article.content .hnc-register-container .hnc-register-block.full-width-block {
  max-width: unset;
  width: 100%;
}
div.e-tab.hnc-register .e-content .hnc-register-container .hnc-register-block.has-label .hnc-register-block-content,
article.content .hnc-register-container .hnc-register-block.has-label .hnc-register-block-content {
  padding-top: 20px;
}
div.e-tab.hnc-register .e-content .hnc-register-toolbox,
article.content .hnc-register-toolbox {
  padding: 10px;
  /*position: sticky;
  bottom: 1px;
  z-index: 501;*/ /* Einer mehr als der Block-Header */
  margin-top: auto; /* automatisch ganz unten in flexbox */
}
div.e-tab.hnc-register .e-content .hnc-register-toolbox .create-edit-buttons,
article.content .hnc-register-toolbox .create-edit-buttons {
  display: flex;
  gap: 10px;
}

/* Tooltip */
.e-tooltip-wrap.e-popup {
  border-radius: var(--control-borderradius);
  opacity: 1;
  box-shadow: rgba(0, 0, 0, 0.2) 0 2px 4px;
  /*	margin-left: -8px; */
  border-width: 0;
  /* Position korrigieren jenachdem welcher Pfeil vorhanden ist */
  /* Gestaltung des Inhalts */
  /* Position des Pfeil-Wrappers bleibt original */
  /* To customize the arrow tip at bottom */
  /* To customize the arrow tip at top */
  /* To customize the arrow tip at left */
  /* To customize the arrow tip at right */
  /* 'Outer' ist der Wrapper für den Rahmen. Dieser Bildet einen Pfeil */
  /* Der innere Teil des Pfeils wird komplett ausgeblendet */
}
.e-tooltip-wrap.e-popup .e-tooltip-close {
  display: none;
}
.e-tooltip-wrap.e-popup:has(.e-tip-left) {
  transform: translate3d(-4px, 0, 0); /* etwas nach links */
}
.e-tooltip-wrap.e-popup:has(.e-tip-bottom) {
  transform: translate3d(-8px, 18px, 0); /* etwas runter */
}
.e-tooltip-wrap.e-popup .e-tip-content {
  display: flex;
  padding: 0;
}
.e-tooltip-wrap.e-popup .e-tip-content p {
  margin: 4px 8px;
  cursor: pointer;
}
.e-tooltip-wrap.e-popup .e-tip-content p .tooltip-plain-header {
  font-size: 1.1em;
  font-weight: 700;
  text-decoration: underline;
}
.e-tooltip-wrap.e-popup .e-tip-content p .tooltip-more-link {
  margin-left: 5px;
}
.e-tooltip-wrap.e-popup .e-arrow-tip.e-tip-bottom {
  transform: translateX(3px);
}
.e-tooltip-wrap.e-popup .e-arrow-tip-outer.e-tip-bottom {
  border-left-width: 8px;
  border-left-style: solid;
  border-right-width: 8px;
  border-right-style: solid;
  border-top-width: 8px;
  border-top-style: solid;
}
.e-tooltip-wrap.e-popup .e-arrow-tip-outer.e-tip-left {
  border-bottom-width: 8px;
  border-bottom-style: solid;
  border-right-width: 8px;
  border-right-style: solid;
  border-top-width: 8px;
  border-top-style: solid;
}
.e-tooltip-wrap.e-popup .e-arrow-tip-outer.e-tip-right {
  border-bottom-width: 8px;
  border-bottom-style: solid;
  border-top-width: 8px;
  border-top-style: solid;
  border-left-width: 8px;
  border-left-style: solid;
}
.e-tooltip-wrap.e-popup .e-arrow-tip-outer.e-tip-top {
  border-bottom-width: 8px;
  border-bottom-style: solid;
  border-right-width: 8px;
  border-right-style: solid;
  border-left-width: 8px;
  border-left-style: solid;
}
.e-tooltip-wrap.e-popup .e-arrow-tip-inner.e-tip-bottom,
.e-tooltip-wrap.e-popup .e-arrow-tip-inner.e-tip-top,
.e-tooltip-wrap.e-popup .e-arrow-tip-inner.e-tip-left,
.e-tooltip-wrap.e-popup .e-arrow-tip-inner.e-tip-right {
  display: none;
}

/* My-Profile-Menu */
#my-profile button.my-profile-dropdown .e-btn-icon {
  margin: 0;
  width: auto;
  font-size: 2em;
}

.my-profile-dropdown .e-contextmenu-container ul {
  text-align: left;
  font-size: 16px;
  backdrop-filter: blur(30px);
  box-shadow: 0 16px 16px rgba(0, 0, 0, 0.1);
}
.my-profile-dropdown .e-contextmenu-container ul li .e-icons {
  left: -6px;
}
.my-profile-dropdown .e-contextmenu-container ul .e-menu-item.e-menu-caret-icon {
  padding-left: 36px;
  padding-right: inherit;
}
.my-profile-dropdown .e-contextmenu-container ul .e-menu-item .e-caret::before {
  content: "\e765";
}
.my-profile-dropdown .e-contextmenu-container ul #LogoutCommand.e-menu-item .e-menu-icon {
  float: left;
}

/* Main-Menü */
.main-menu-dropdown.e-dropdown-btn:focus {
  box-shadow: none;
}
.main-menu-dropdown .e-contextmenu-container ul {
  max-height: 50vh;
  overflow: auto;
  font-size: 16px;
  backdrop-filter: blur(30px);
  box-shadow: 0 16px 16px rgba(0, 0, 0, 0.1);
}
.main-menu-dropdown .e-contextmenu-container ul .e-menu-item {
  height: auto;
  padding: 5px 15px;
}
.main-menu-dropdown .e-contextmenu-container ul .e-menu-item.e-menu-caret-icon {
  padding-right: 30px;
}
.main-menu-dropdown .e-contextmenu-container ul .e-menu-item.e-focused {
  outline: 0 solid #dee2e6;
  outline-offset: 0;
}

/* Nav-Items */
.nav-item {
  font-size: 0.9rem;
}
.nav-item a {
  color: var(--hncblaugrau);
  border-radius: var(--control-borderradius);
  height: 60px;
  width: 60px;
  display: flex;
  align-items: center;
  line-height: 3.75rem;
  border: 0 solid var(--grau);
  justify-content: center;
}
.nav-item a.active {
  background-color: var(--hncorange);
  color: white;
}
.nav-item a.active:hover, .nav-item a.active:focus-visible {
  background-color: var(--hncorangehover);
  color: white;
}
.nav-item a .nav-icon {
  font-size: 50px;
}
.nav-item a .nav-icon.hover-icon {
  display: none;
}
.nav-item a:hover, .nav-item a:focus {
  background-color: var(--hncblauhell2);
  color: var(--hncblau);
  /* Icon wechseln falls es zwei gibt */
}
.nav-item a:hover .hover-icon, .nav-item a:focus .hover-icon {
  display: block;
}
.nav-item a:hover .default-icon, .nav-item a:focus .default-icon {
  display: none;
}
.nav-item a:focus-visible {
  outline: var(--control-focus-width) solid var(--input-focus-color) !important;
  outline-offset: var(--control-focus-offset) !important;
  box-shadow: none;
  z-index: 100;
  position: relative;
}

div [role=region]:focus {
  outline: var(--control-focus-width) solid var(--input-focus-color);
  outline-offset: var(--control-focus-offset);
}

/* HNC Controls */
.hnc-control-wrapper .e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(:has([readonly])),
.hnc-control-wrapper .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(:has([readonly])) {
  border-color: var(--input-border-color);
}
.hnc-control-wrapper .e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(:has([readonly])):hover,
.hnc-control-wrapper .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(:has([readonly])):hover {
  background: var(--hncblauhell2);
  border-color: var(--hncblauhell1);
}
.hnc-control-wrapper label {
  /* Damit Label nicht mehrzeilig werden */
  /* Wenn Label länger als Inputfeld, wird gedottet */
  white-space: nowrap;
  text-overflow: ellipsis; /* dotten */
  width: 100%;
}

/* HNC Input / Textbox */
.hnc-textbox-wrapper .e-input-group,
.hnc-textbox-wrapper .e-input-group.e-control-wrapper,
.hnc-datepicker-wrapper .e-input-group,
.hnc-datepicker-wrapper .e-input-group.e-control-wrapper,
.hnc-timepicker-wrapper .e-input-group,
.hnc-timepicker-wrapper .e-input-group.e-control-wrapper,
.hnc-datetimepicker-wrapper .e-input-group,
.hnc-datetimepicker-wrapper .e-input-group.e-control-wrapper {
  border-radius: var(--control-borderradius);
  background-color: var(--input-bg-color); /* Diese Farbe ist sichtbar, da Input-Feld transparent */
  overflow: visible; /*Damit das Floatinglabel sichtbar bleibt*/
  /* Buttons eines Readonyl Inputfeldes mit Selection-Icon */
  /* Icons innerhalb des Feldes */
}
.hnc-textbox-wrapper .e-input-group:has(input[readonly]), .hnc-textbox-wrapper .e-input-group:has(input[disabled]),
.hnc-textbox-wrapper .e-input-group.e-control-wrapper:has(input[readonly]),
.hnc-textbox-wrapper .e-input-group.e-control-wrapper:has(input[disabled]),
.hnc-datepicker-wrapper .e-input-group:has(input[readonly]),
.hnc-datepicker-wrapper .e-input-group:has(input[disabled]),
.hnc-datepicker-wrapper .e-input-group.e-control-wrapper:has(input[readonly]),
.hnc-datepicker-wrapper .e-input-group.e-control-wrapper:has(input[disabled]),
.hnc-timepicker-wrapper .e-input-group:has(input[readonly]),
.hnc-timepicker-wrapper .e-input-group:has(input[disabled]),
.hnc-timepicker-wrapper .e-input-group.e-control-wrapper:has(input[readonly]),
.hnc-timepicker-wrapper .e-input-group.e-control-wrapper:has(input[disabled]),
.hnc-datetimepicker-wrapper .e-input-group:has(input[readonly]),
.hnc-datetimepicker-wrapper .e-input-group:has(input[disabled]),
.hnc-datetimepicker-wrapper .e-input-group.e-control-wrapper:has(input[readonly]),
.hnc-datetimepicker-wrapper .e-input-group.e-control-wrapper:has(input[disabled]) {
  background: var(--input-bg-color-disabled);
  color: var(--input-color-disabled);
}
.hnc-textbox-wrapper .e-input-group input,
.hnc-textbox-wrapper .e-input-group input.e-input,
.hnc-textbox-wrapper .e-input-group.e-control-wrapper input,
.hnc-textbox-wrapper .e-input-group.e-control-wrapper input.e-input,
.hnc-datepicker-wrapper .e-input-group input,
.hnc-datepicker-wrapper .e-input-group input.e-input,
.hnc-datepicker-wrapper .e-input-group.e-control-wrapper input,
.hnc-datepicker-wrapper .e-input-group.e-control-wrapper input.e-input,
.hnc-timepicker-wrapper .e-input-group input,
.hnc-timepicker-wrapper .e-input-group input.e-input,
.hnc-timepicker-wrapper .e-input-group.e-control-wrapper input,
.hnc-timepicker-wrapper .e-input-group.e-control-wrapper input.e-input,
.hnc-datetimepicker-wrapper .e-input-group input,
.hnc-datetimepicker-wrapper .e-input-group input.e-input,
.hnc-datetimepicker-wrapper .e-input-group.e-control-wrapper input,
.hnc-datetimepicker-wrapper .e-input-group.e-control-wrapper input.e-input {
  border-radius: var(--control-borderradius);
  background: none; /* Das Input-Feld selbst bleibt transparent */
  color: var(--input-color);
  border: 0; /*1px solid var(--grau);*/
  padding-left: 8px;
}
.hnc-textbox-wrapper .e-input-group input::placeholder,
.hnc-textbox-wrapper .e-input-group input.e-input::placeholder,
.hnc-textbox-wrapper .e-input-group.e-control-wrapper input::placeholder,
.hnc-textbox-wrapper .e-input-group.e-control-wrapper input.e-input::placeholder,
.hnc-datepicker-wrapper .e-input-group input::placeholder,
.hnc-datepicker-wrapper .e-input-group input.e-input::placeholder,
.hnc-datepicker-wrapper .e-input-group.e-control-wrapper input::placeholder,
.hnc-datepicker-wrapper .e-input-group.e-control-wrapper input.e-input::placeholder,
.hnc-timepicker-wrapper .e-input-group input::placeholder,
.hnc-timepicker-wrapper .e-input-group input.e-input::placeholder,
.hnc-timepicker-wrapper .e-input-group.e-control-wrapper input::placeholder,
.hnc-timepicker-wrapper .e-input-group.e-control-wrapper input.e-input::placeholder,
.hnc-datetimepicker-wrapper .e-input-group input::placeholder,
.hnc-datetimepicker-wrapper .e-input-group input.e-input::placeholder,
.hnc-datetimepicker-wrapper .e-input-group.e-control-wrapper input::placeholder,
.hnc-datetimepicker-wrapper .e-input-group.e-control-wrapper input.e-input::placeholder {
  color: var(--placeholder-color);
}
.hnc-textbox-wrapper .e-input-group input::selection,
.hnc-textbox-wrapper .e-input-group input.e-input::selection,
.hnc-textbox-wrapper .e-input-group.e-control-wrapper input::selection,
.hnc-textbox-wrapper .e-input-group.e-control-wrapper input.e-input::selection,
.hnc-datepicker-wrapper .e-input-group input::selection,
.hnc-datepicker-wrapper .e-input-group input.e-input::selection,
.hnc-datepicker-wrapper .e-input-group.e-control-wrapper input::selection,
.hnc-datepicker-wrapper .e-input-group.e-control-wrapper input.e-input::selection,
.hnc-timepicker-wrapper .e-input-group input::selection,
.hnc-timepicker-wrapper .e-input-group input.e-input::selection,
.hnc-timepicker-wrapper .e-input-group.e-control-wrapper input::selection,
.hnc-timepicker-wrapper .e-input-group.e-control-wrapper input.e-input::selection,
.hnc-datetimepicker-wrapper .e-input-group input::selection,
.hnc-datetimepicker-wrapper .e-input-group input.e-input::selection,
.hnc-datetimepicker-wrapper .e-input-group.e-control-wrapper input::selection,
.hnc-datetimepicker-wrapper .e-input-group.e-control-wrapper input.e-input::selection {
  background-color: var(--selection-bg-color);
  color: var(--selection-color);
}
.hnc-textbox-wrapper .e-input-group input.e-input[readonly][readonlyforselection] ~ span.e-input-group-icon,
.hnc-textbox-wrapper .e-input-group.e-control-wrapper input.e-input[readonly][readonlyforselection] ~ span.e-input-group-icon,
.hnc-datepicker-wrapper .e-input-group input.e-input[readonly][readonlyforselection] ~ span.e-input-group-icon,
.hnc-datepicker-wrapper .e-input-group.e-control-wrapper input.e-input[readonly][readonlyforselection] ~ span.e-input-group-icon,
.hnc-timepicker-wrapper .e-input-group input.e-input[readonly][readonlyforselection] ~ span.e-input-group-icon,
.hnc-timepicker-wrapper .e-input-group.e-control-wrapper input.e-input[readonly][readonlyforselection] ~ span.e-input-group-icon,
.hnc-datetimepicker-wrapper .e-input-group input.e-input[readonly][readonlyforselection] ~ span.e-input-group-icon,
.hnc-datetimepicker-wrapper .e-input-group.e-control-wrapper input.e-input[readonly][readonlyforselection] ~ span.e-input-group-icon {
  background: var(--hncblau);
  color: var(--white);
  /* Clear-Button hovert rot */
}
.hnc-textbox-wrapper .e-input-group input.e-input[readonly][readonlyforselection] ~ span.e-input-group-icon:hover,
.hnc-textbox-wrapper .e-input-group.e-control-wrapper input.e-input[readonly][readonlyforselection] ~ span.e-input-group-icon:hover,
.hnc-datepicker-wrapper .e-input-group input.e-input[readonly][readonlyforselection] ~ span.e-input-group-icon:hover,
.hnc-datepicker-wrapper .e-input-group.e-control-wrapper input.e-input[readonly][readonlyforselection] ~ span.e-input-group-icon:hover,
.hnc-timepicker-wrapper .e-input-group input.e-input[readonly][readonlyforselection] ~ span.e-input-group-icon:hover,
.hnc-timepicker-wrapper .e-input-group.e-control-wrapper input.e-input[readonly][readonlyforselection] ~ span.e-input-group-icon:hover,
.hnc-datetimepicker-wrapper .e-input-group input.e-input[readonly][readonlyforselection] ~ span.e-input-group-icon:hover,
.hnc-datetimepicker-wrapper .e-input-group.e-control-wrapper input.e-input[readonly][readonlyforselection] ~ span.e-input-group-icon:hover {
  background: var(--hncblauhell2);
  color: var(--hncblau);
}
.hnc-textbox-wrapper .e-input-group input.e-input[readonly][readonlyforselection] ~ span.e-input-group-icon.e-clear:hover,
.hnc-textbox-wrapper .e-input-group.e-control-wrapper input.e-input[readonly][readonlyforselection] ~ span.e-input-group-icon.e-clear:hover,
.hnc-datepicker-wrapper .e-input-group input.e-input[readonly][readonlyforselection] ~ span.e-input-group-icon.e-clear:hover,
.hnc-datepicker-wrapper .e-input-group.e-control-wrapper input.e-input[readonly][readonlyforselection] ~ span.e-input-group-icon.e-clear:hover,
.hnc-timepicker-wrapper .e-input-group input.e-input[readonly][readonlyforselection] ~ span.e-input-group-icon.e-clear:hover,
.hnc-timepicker-wrapper .e-input-group.e-control-wrapper input.e-input[readonly][readonlyforselection] ~ span.e-input-group-icon.e-clear:hover,
.hnc-datetimepicker-wrapper .e-input-group input.e-input[readonly][readonlyforselection] ~ span.e-input-group-icon.e-clear:hover,
.hnc-datetimepicker-wrapper .e-input-group.e-control-wrapper input.e-input[readonly][readonlyforselection] ~ span.e-input-group-icon.e-clear:hover {
  background: var(--red);
  color: var(--white);
}
.hnc-textbox-wrapper .e-input-group .e-input-group-icon,
.hnc-textbox-wrapper .e-input-group.e-control-wrapper .e-input-group-icon,
.hnc-datepicker-wrapper .e-input-group .e-input-group-icon,
.hnc-datepicker-wrapper .e-input-group.e-control-wrapper .e-input-group-icon,
.hnc-timepicker-wrapper .e-input-group .e-input-group-icon,
.hnc-timepicker-wrapper .e-input-group.e-control-wrapper .e-input-group-icon,
.hnc-datetimepicker-wrapper .e-input-group .e-input-group-icon,
.hnc-datetimepicker-wrapper .e-input-group.e-control-wrapper .e-input-group-icon {
  background-color: var(--hncblau);
  border-left-color: var(--input-border-color);
  color: var(--white);
  /* Das letzte Icon im Control bekommt rechts einen Border-Radius*/
}
.hnc-textbox-wrapper .e-input-group .e-input-group-icon:last-child,
.hnc-textbox-wrapper .e-input-group.e-control-wrapper .e-input-group-icon:last-child,
.hnc-datepicker-wrapper .e-input-group .e-input-group-icon:last-child,
.hnc-datepicker-wrapper .e-input-group.e-control-wrapper .e-input-group-icon:last-child,
.hnc-timepicker-wrapper .e-input-group .e-input-group-icon:last-child,
.hnc-timepicker-wrapper .e-input-group.e-control-wrapper .e-input-group-icon:last-child,
.hnc-datetimepicker-wrapper .e-input-group .e-input-group-icon:last-child,
.hnc-datetimepicker-wrapper .e-input-group.e-control-wrapper .e-input-group-icon:last-child {
  border-bottom-right-radius: calc(var(--control-borderradius) - 1px);
  border-top-right-radius: calc(var(--control-borderradius) - 1px);
}
.hnc-textbox-wrapper .e-input-group .e-input-group-icon:focus,
.hnc-textbox-wrapper .e-input-group.e-control-wrapper .e-input-group-icon:focus,
.hnc-datepicker-wrapper .e-input-group .e-input-group-icon:focus,
.hnc-datepicker-wrapper .e-input-group.e-control-wrapper .e-input-group-icon:focus,
.hnc-timepicker-wrapper .e-input-group .e-input-group-icon:focus,
.hnc-timepicker-wrapper .e-input-group.e-control-wrapper .e-input-group-icon:focus,
.hnc-datetimepicker-wrapper .e-input-group .e-input-group-icon:focus,
.hnc-datetimepicker-wrapper .e-input-group.e-control-wrapper .e-input-group-icon:focus {
  box-shadow: 0 0 0 4px var(--input-focus-color);
  z-index: 1;
}
.hnc-textbox-wrapper:not(.readonly-for-selection):has(input[readonly]),
.hnc-datepicker-wrapper:not(.readonly-for-selection):has(input[readonly]),
.hnc-timepicker-wrapper:not(.readonly-for-selection):has(input[readonly]),
.hnc-datetimepicker-wrapper:not(.readonly-for-selection):has(input[readonly]) {
  cursor: default;
  user-select: none;
  pointer-events: none;
}
.hnc-textbox-wrapper .e-input-group.e-input-focus:not(.e-success):not(.e-error):not(.e-warning),
.hnc-datepicker-wrapper .e-input-group.e-input-focus:not(.e-success):not(.e-error):not(.e-warning),
.hnc-timepicker-wrapper .e-input-group.e-input-focus:not(.e-success):not(.e-error):not(.e-warning),
.hnc-datetimepicker-wrapper .e-input-group.e-input-focus:not(.e-success):not(.e-error):not(.e-warning) {
  box-shadow: 0 0 0 4px var(--input-focus-color);
  border-radius: var(--control-borderradius);
}
.hnc-textbox-wrapper.hnc-color-index-red .e-input-group,
.hnc-datepicker-wrapper.hnc-color-index-red .e-input-group,
.hnc-timepicker-wrapper.hnc-color-index-red .e-input-group,
.hnc-datetimepicker-wrapper.hnc-color-index-red .e-input-group {
  background-color: var(--input-bg-color-index-red);
}
.hnc-textbox-wrapper.hnc-color-index-green .e-input-group,
.hnc-datepicker-wrapper.hnc-color-index-green .e-input-group,
.hnc-timepicker-wrapper.hnc-color-index-green .e-input-group,
.hnc-datetimepicker-wrapper.hnc-color-index-green .e-input-group {
  background-color: var(--input-bg-color-index-green);
}
.hnc-textbox-wrapper.hnc-color-index-yellow .e-input-group,
.hnc-datepicker-wrapper.hnc-color-index-yellow .e-input-group,
.hnc-timepicker-wrapper.hnc-color-index-yellow .e-input-group,
.hnc-datetimepicker-wrapper.hnc-color-index-yellow .e-input-group {
  background-color: var(--input-bg-color-index-yellow);
}
.hnc-textbox-wrapper.hnc-color-index-orange .e-input-group,
.hnc-datepicker-wrapper.hnc-color-index-orange .e-input-group,
.hnc-timepicker-wrapper.hnc-color-index-orange .e-input-group,
.hnc-datetimepicker-wrapper.hnc-color-index-orange .e-input-group {
  background-color: var(--input-bg-color-index-orange);
}
.hnc-textbox-wrapper.hnc-color-index-blue .e-input-group,
.hnc-datepicker-wrapper.hnc-color-index-blue .e-input-group,
.hnc-timepicker-wrapper.hnc-color-index-blue .e-input-group,
.hnc-datetimepicker-wrapper.hnc-color-index-blue .e-input-group {
  background-color: var(--input-bg-color-index-blue);
}
.hnc-textbox-wrapper.hnc-color-index-purple .e-input-group,
.hnc-datepicker-wrapper.hnc-color-index-purple .e-input-group,
.hnc-timepicker-wrapper.hnc-color-index-purple .e-input-group,
.hnc-datetimepicker-wrapper.hnc-color-index-purple .e-input-group {
  background-color: var(--input-bg-color-index-purple);
}
.hnc-textbox-wrapper.hnc-color-index-brown .e-input-group,
.hnc-datepicker-wrapper.hnc-color-index-brown .e-input-group,
.hnc-timepicker-wrapper.hnc-color-index-brown .e-input-group,
.hnc-datetimepicker-wrapper.hnc-color-index-brown .e-input-group {
  background-color: var(--input-bg-color-index-brown);
}
.hnc-textbox-wrapper.hnc-color-index-pink .e-input-group,
.hnc-datepicker-wrapper.hnc-color-index-pink .e-input-group,
.hnc-timepicker-wrapper.hnc-color-index-pink .e-input-group,
.hnc-datetimepicker-wrapper.hnc-color-index-pink .e-input-group {
  background-color: var(--input-bg-color-index-pink);
}

.hnc-textbox-wrapper:has(.hnc-textbox-maxlength-info) textarea {
  padding-bottom: calc(1em + 4px) !important;
}
.hnc-textbox-wrapper:has(.hnc-textbox-maxlength-info) .hnc-textbox-maxlength-info {
  position: absolute;
  bottom: 1px;
  left: 6px;
  background: ffffff5e;
  line-height: 1;
  font-size: smaller;
  backdrop-filter: blur(3px);
  display: none;
}
.hnc-textbox-wrapper:has(.hnc-textbox-maxlength-info):has(textarea:focus) .hnc-textbox-maxlength-info {
  display: block;
}

.hnc-datepicker-wrapper .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-error):not(.e-warning) {
  box-shadow: 0 0 0 4px var(--input-focus-color);
}

.hnc-buttongroup-wrapper .e-btn-group label {
  overflow: visible;
  width: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* Modale und Dialoge */
.modal .modal-dialog .modal-content {
  background-color: transparent;
  box-shadow: 0 16px 16px rgba(0, 0, 0, 0.5);
  border: 0;
  overflow: hidden;
}
.modal .modal-dialog .modal-content .modal-header {
  background-color: var(--hncblau);
  padding: 1em;
}
.modal .modal-dialog .modal-content .modal-header .modal-title {
  color: white;
  font-size: 16px;
  font-weight: 500;
}
.modal .modal-dialog .modal-content .modal-body.e-dlg-content {
  padding: 1em;
  background-color: white;
}
.modal .modal-dialog .modal-content .modal-footer {
  background-color: white;
}
.modal .modal-dialog .modal-content .modal-footer .hnc-control-wrapper {
  margin: 0;
}

.e-dialog {
  background-color: transparent;
  box-shadow: 0 16px 16px rgba(0, 0, 0, 0.5);
  border: 0;
  overflow: hidden;
}
.e-dialog .e-dlg-header-content {
  background-color: var(--hncblau);
  padding: 1em;
}
.e-dialog .e-dlg-header-content .e-dlg-header {
  color: white;
  font-size: 20px;
}
.e-dialog .e-dlg-header-content + .e-dlg-content {
  padding-top: 0; /* überschreibt gezielt bootstrap padding */
}
.e-dialog .e-dlg-content {
  background-color: var(--white);
  padding: 0;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  /*height: 80vh;*/
}
.e-dialog .e-dlg-content > div:not(.hnc-dlg-buttons) {
  margin: 1em 1em 2em 1em;
}
.e-dialog .e-dlg-content div.hnc-form-wrapper:has(.hnc-control-wrapper) {
  display: flex;
  flex-direction: column;
  gap: var(--control-gap);
}
.e-dialog .e-dlg-closeicon-btn {
  display: none;
}

.hnc-register-toolbox,
.hnc-dlg-buttons,
.hnc .e-calendar .e-footer-container {
  background-color: var(--hellgrau3);
  padding: 1em;
  border-top: 1px solid var(--grid-border-color);
  display: flex;
  justify-content: end;
  align-items: center;
  gap: var(--control-gap);
}
.hnc-register-toolbox button,
.hnc-dlg-buttons button,
.hnc .e-calendar .e-footer-container button {
  min-width: 140px;
  min-height: 36px;
  padding: 0.4em 2em;
  font-weight: normal;
  line-height: 1;
}
.hnc-register-toolbox .hnc-btn-secondary button,
.hnc-dlg-buttons .hnc-btn-secondary button,
.hnc .e-calendar .e-footer-container .hnc-btn-secondary button {
  background-color: transparent;
  color: var(--hncblau);
}
.hnc-register-toolbox .hnc-btn-secondary button:hover,
.hnc-dlg-buttons .hnc-btn-secondary button:hover,
.hnc .e-calendar .e-footer-container .hnc-btn-secondary button:hover {
  background-color: var(--button-bg-hover);
  border-color: var(--button-bg-hover);
  color: var(--white);
}

.hnc-dlg-infotext {
  background-color: var(--hncblauhell1);
  color: var(--black);
  padding: 10px 10px 10px 30px;
  position: sticky;
  top: 10px;
  margin: 1em;
  hyphens: auto;
  z-index: 1;
  border-radius: var(--control-borderradius);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}
.hnc-dlg-infotext:before {
  content: "\e9a5";
  font-family: "hnc:main_icons";
  color: var(--hncorangehell);
  position: absolute;
  left: 12px;
  font-size: 1.4em;
  top: 6px;
}

/* Login ListBox */
.hnc-control-wrapper.hnc-listbox-wrapper .e-listbox-container {
  border-radius: var(--control-borderradius2);
  overflow: hidden;
  border-color: var(--grid-border-color);
  max-height: 250px;
  display: flex;
  flex-direction: column;
}
.hnc-control-wrapper.hnc-listbox-wrapper .e-listbox-container .e-list-wrap {
  overflow: auto;
  flex: 1;
}
.hnc-control-wrapper.hnc-listbox-wrapper span.listbox-context:not(lastofchild) {
  margin-right: 10px;
}
.hnc-control-wrapper.hnc-listbox-wrapper li.e-list-item.e-selected {
  background-color: var(--hncorange);
  color: var(--white);
}
.hnc-control-wrapper.hnc-listbox-wrapper li.e-list-item:hover:not(.e-selected):not(.e-disabled) {
  background-color: var(--hncblauhell2);
  color: var(--hncblau);
}

.hnc-login-page .hnc-dlg-buttons {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  gap: var(--control-gap);
}
.hnc-login-page .hnc-dlg-buttons button {
  /* padding: 0.4em 2em;
  font-weight: bold;*/
}
.hnc-login-page .hnc-dlg-buttons button[disabled] {
  background-color: grey;
  cursor: not-allowed;
}
.hnc-login-page .hnc-dlg-buttons .hnc-btn-secondary button {
  background-color: var(--white);
  color: var(--hncblau);
}
.hnc-login-page .hnc-dlg-buttons .hnc-btn-secondary button:hover:not([disabled]) {
  background-color: var(--button-bg-hover);
  border-color: var(--button-bg-hover);
  color: var(--white);
}

/* Wird im CreateEdit verwendet, wenn ein Datensatz deaktiviert wurde */
.hnc-inaktiv-hinweis {
  background-color: var(--hncorange);
  color: white;
  border-radius: 10px;
  padding: 3px 10px;
  margin-top: 10px;
}

/* hnc grid Preview Container */
.hnc-grid-container .hnc-grid-preview {
  display: none;
}
.hnc-grid-container .hnc-grid-preview h2, .hnc-grid-container .hnc-grid-preview h3, .hnc-grid-container .hnc-grid-preview h4 {
  text-transform: none;
  font-family: inherit;
  font-weight: normal;
  margin-bottom: 2px;
}
.hnc-grid-container .hnc-grid-preview .hnc-preview-component {
  position: relative;
  padding-top: 0.5em;
}
.hnc-grid-container .hnc-grid-preview .hnc-preview-component.hnc-preview-component-bool {
  padding-bottom: 0.5em;
}
.hnc-grid-container .hnc-grid-preview .hnc-preview-component p {
  margin-bottom: 0.5em;
  white-space: pre-wrap;
}
.hnc-grid-container .hnc-grid-preview .hnc-preview-component:not(:first-of-type):before {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  border-top: 1px solid var(--graudunkel1);
}
.hnc-grid-container .hnc-grid-preview .field-label {
  font-weight: 600;
}
.hnc-grid-container .hnc-grid-preview .field-label.field-bool {
  display: flex;
  align-items: center;
  font-weight: bold;
}
.hnc-grid-container .hnc-grid-preview .field-label.field-bool span.label {
  white-space: nowrap;
}
.hnc-grid-container .hnc-grid-preview .field-label.field-bool span.spacer {
  flex-grow: 1;
  height: 1px;
  margin: 0 8px;
  opacity: 0.2;
  border-top: 2px dotted;
  background: url("data:image/svg+xml;utf8,<svg width='10' height='4' xmlns='http://www.w3.org/2000/svg'><circle cx='2' cy='2' r='1' fill='gray'/></svg>") repeat-x;
  background-size: 10px 4px;
}
.hnc-grid-container .hnc-grid-preview .field-label.field-bool span.value-true {
  white-space: nowrap;
  color: green;
  font-size: larger;
}
.hnc-grid-container .hnc-grid-preview .field-label.field-bool span.value-false {
  white-space: nowrap;
  color: red;
  font-size: larger;
}

/* Eigentlich Teil der TopBar.css. Hier hin ausgelagert damit die Variable kompiliert wird. */
.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: "\e976";
}

/* Haupt-Stylesheet */
/* gehörte zum Blazor-Template und sollte in die Main übernommen werden */
/* Design der Cards in den Views */
/* HNC Card für die App */
.hnc-cardlist-container {
  flex-grow: 1;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--control-gap);
  padding: 0 var(--control-gap) 0 0;
}

.hnc-card {
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  font-family: Roboto, sans-serif;
  background-color: var(--white);
  border-radius: var(--control-borderradius);
  box-shadow: var(--shadow);
  border: 1px solid var(--grau);
  /*transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;*/
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  min-width: 0;
}
.hnc-card.teilnehmer .card-footer, .hnc-card.unterweisungsthema .card-footer, .hnc-card.document .card-footer {
  display: grid;
  grid-template-columns: auto auto 140px;
  justify-content: space-between;
  align-items: center;
  gap: var(--control-gap);
}
.hnc-card .hnci-main-icons.icon-pfeil_alternative {
  transition: transform 0.3s ease-in-out;
}
.hnc-card.collapsed .card-body-wrapper {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.1s ease-in-out;
}
.hnc-card.collapsed .hnci-main-icons.icon-pfeil_alternative {
  transform: rotate(0);
}
.hnc-card.collapsed .card-header h3 {
  white-space: nowrap;
}
.hnc-card.new-added {
  border: 2px solid var(--hncgruen);
  order: -1;
}

.card-header {
  padding: var(--control-gap) var(--control-gap) var(--control-gap) calc(var(--control-gap) * 1.5);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.card-header .header-informations {
  min-width: 0;
}
.card-header h3 {
  color: var(--black);
  font-size: 21px;
  font-weight: 700;
  margin: 0;
  position: relative;
  line-height: 1.2;
  /*white-space: nowrap;*/
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-header h3 i {
  position: relative;
  font-size: 30px;
  color: var(--grau);
  margin-left: 4px;
  top: 7px;
}
.card-header h3 i.status-icon {
  margin-left: 0;
  margin-right: 4px;
  top: 5px;
}
.card-header .subline {
  color: var(--graudunkel1);
  font-size: 15px;
  margin: 0;
  line-height: 1;
}
.card-header .tagline {
  display: flex;
  gap: 12px;
  margin-top: calc(var(--control-gap) / 2);
}
.card-header .tagline .tagline-tag {
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.card-header .tagline .tagline-tag i.hnci-main-icons {
  color: var(--hncblaugrau);
  font-size: 14px;
  cursor: pointer;
}
.card-header .tagline .tagline-tag.edited-indicator {
  background: var(--grau);
}
.card-header .tagline .tagline-tag.internal-badge {
  background-color: var(--hncblauhell2);
  border: 1px solid var(--hncblau);
  color: var(--hncblau);
}
.card-header .header-toolbar .e-toolbar {
  padding: 0;
}
.card-header .header-toolbar .e-toolbar .e-toolbar-items.e-toolbar-multirow {
  flex-wrap: nowrap;
  margin: 0;
}

.card-body-wrapper {
  max-height: 500px;
  transition: max-height 0.5s ease-in-out;
  overflow: auto;
  display: flex;
  flex-direction: row;
}
.card-body-wrapper .card-body {
  padding: calc(var(--control-gap) * 2) calc(var(--control-gap) * 1.5);
  display: grid;
  grid-template-columns: min-content minmax(0, 160px) 1fr;
  grid-auto-rows: minmax(0, 1fr);
  gap: var(--control-gap);
  flex-grow: 1;
  border-top: 1px solid var(--grau);
}
.card-body-wrapper .card-body p.card-text {
  white-space: pre-wrap;
}
.card-body-wrapper .card-body .label {
  font-weight: bold;
}
.card-body-wrapper .card-body i {
  font-size: 24px;
}
.card-body-wrapper .card-body .signature-wrapper {
  grid-column: 4;
  grid-row: 1/span 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.card-body-wrapper .card-body .image-preview-wrapper {
  grid-column: 4;
  grid-row: 1/span 4;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-width: 200px;
  border-radius: var(--control-borderradius);
  overflow: hidden;
}

.hnc-card.unterweisungsthema .card-body,
.hnc-card.patchnotes .card-body {
  display: block;
  max-height: 2000px;
  position: relative;
}

.card-footer {
  padding: calc(var(--control-gap) / 2) var(--control-gap) calc(var(--control-gap) / 2) calc(var(--control-gap) * 1.5);
  background: var(--dunkler);
  border-top: 1px solid var(--grau);
  /* Styles for the inline checkboxes area used by DocumentCard */
  /*.document-checkboxes {
      display: flex;
      gap: 12px;
      align-items: center;*/
  /* allow wrapping on small screens */
  /*flex-wrap: wrap;
  }*/
  /* Ensure Hnc checkbox wrappers align nicely inside the footer */
  /* Slightly smaller label text in footer to match compact layout */
}
.card-footer div.footertext {
  display: flex;
  font-size: 15px;
  color: var(--graudunkel1);
  gap: var(--control-gap);
}
.card-footer .document-checkboxes .hnc-checkbox-wrapper {
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
}
.card-footer .document-checkboxes label {
  font-size: 0.9rem;
  margin: 0;
}
.card-footer .btn-sign {
  min-width: 140px;
  grid-column: 3;
}
.card-footer .btn-sign.btn-signed {
  background-color: transparent;
  color: var(--charm-text-color);
  grid-column: 3;
}
.card-footer .btn-sign.btn-signed button {
  border-color: var(--charm-text-color);
  background-color: transparent;
  color: var(--charm-text-color);
}
.card-footer .btn-sign.btn-signed button:hover {
  border-color: var(--charm-text-hover);
  background-color: var(--charm-bg-hover);
  color: var(--charm-text-hover);
}

/* Status-Indicator */
.hnc-card.status:before {
  content: "";
  height: 100%;
  width: calc(var(--control-gap) - 1px);
  /* min-width: 14px; */
  position: absolute;
  border-radius: var(--control-borderradius) 0 0 var(--control-borderradius);
  border: 1px solid transparent;
  top: -1px;
  left: calc(0px - var(--control-gap) - 1px);
  box-sizing: content-box;
  overflow: hidden;
}

.hnc-card.status {
  margin-left: var(--control-gap);
}
.hnc-card.status.status-ok, .hnc-card.status.status-offen, .hnc-card.status.status-abgeschlossen, .hnc-card.status.status-faellig, .hnc-card.status.status-alarm, .hnc-card.status.status-warn, .hnc-card.status.status-info {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.hnc-card.status.status-info {
  border-color: var(--hncblau);
}
.hnc-card.status.status-info .status-badge {
  background-color: var(--hncblau);
}
.hnc-card.status.status-info:before {
  background-color: var(--hncblau);
}
.hnc-card.status.status-info h3 i.hnci-main-icons.status-icon {
  color: var(--hncblau);
}
.hnc-card.status.status-ok, .hnc-card.status.status-abgeschlossen {
  border-color: var(--hncgruen);
}
.hnc-card.status.status-ok .status-badge, .hnc-card.status.status-abgeschlossen .status-badge {
  background-color: var(--hncgruen);
}
.hnc-card.status.status-ok:before, .hnc-card.status.status-abgeschlossen:before {
  background-color: var(--hncgruen);
}
.hnc-card.status.status-ok h3 i.hnci-main-icons.status-icon, .hnc-card.status.status-abgeschlossen h3 i.hnci-main-icons.status-icon {
  color: var(--hncgruen);
}
.hnc-card.status.status-warn, .hnc-card.status.status-offen {
  border-color: var(--hncorange);
}
.hnc-card.status.status-warn .status-badge, .hnc-card.status.status-offen .status-badge {
  background-color: var(--hncorange);
}
.hnc-card.status.status-warn:before, .hnc-card.status.status-offen:before {
  background-color: var(--hncorange);
}
.hnc-card.status.status-warn h3 i.hnci-main-icons.status-icon, .hnc-card.status.status-offen h3 i.hnci-main-icons.status-icon {
  color: var(--hncorange);
}
.hnc-card.status.status-alarm, .hnc-card.status.status-faellig {
  border-color: var(--red);
}
.hnc-card.status.status-alarm .status-badge, .hnc-card.status.status-faellig .status-badge {
  background-color: var(--red);
}
.hnc-card.status.status-alarm:before, .hnc-card.status.status-faellig:before {
  background-color: var(--red);
}
.hnc-card.status.status-alarm h3 i.hnci-main-icons.status-icon, .hnc-card.status.status-faellig h3 i.hnci-main-icons.status-icon {
  color: var(--red);
}

/* Package card styles for About -> ThirdParty tab */
.hnc-cardlist-header {
  width: 100%;
  padding: calc(var(--control-gap) / 2) 0;
}
.hnc-cardlist-header h3 {
  margin: 0 0 calc(var(--control-gap) / 2) 0;
  color: var(--black);
  font-size: 20px;
  font-weight: 700;
}

/* package cards container: one package per line */
.hnc-package-cards {
  display: grid;
  gap: calc(var(--control-gap));
  /* one package per line as requested */
  grid-template-columns: 1fr;
  align-items: start;
  width: 100%;
  margin-top: calc(var(--control-gap) / 2);
}

/* package cards reuse the .hnc-card base but add tuned paddings and visuals */
.hnc-card.package-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--white);
  border: 1px solid var(--grau);
  border-radius: var(--control-borderradius);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

/* make package card headers and bodies consistent with existing card styles */
.hnc-card.package-card .hnc-card-header,
.hnc-card.package-card .card-header {
  /* reuse the same layout as .card-header */
  padding: var(--control-gap) var(--control-gap) var(--control-gap) calc(var(--control-gap) * 1.5);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.hnc-card.package-card .hnc-card-header h3,
.hnc-card.package-card .card-header h3 {
  color: var(--black);
  font-size: 21px;
  font-weight: 700;
  margin: 0;
  position: relative;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* package card body uses the same padding as other cards */
.hnc-card.package-card .hnc-card-body,
.hnc-card.package-card .card-body-wrapper .card-body {
  padding: calc(var(--control-gap) * 2) calc(var(--control-gap) * 1.5);
  display: block;
  border-top: 1px solid var(--grau);
}

.package-details {
  margin: 0;
  padding: 0;
  list-style: none;
}

.package-details dt {
  font-size: 0.78rem;
  color: var(--graudunkel1, #6c757d);
  margin-top: calc(var(--control-gap) / 2);
  font-weight: 600;
}

.package-details dd {
  margin: 0 0 calc(var(--control-gap) / 2) 0;
  font-size: 0.95rem;
  color: var(--text-primary, #212529);
  word-break: break-word;
}

/* small responsive tweak: single column on small screens */
@media (max-width: 600px) {
  .hnc-package-cards {
    grid-template-columns: 1fr;
  }
  .hnc-card.package-card .hnc-card-header h3 {
    font-size: 0.95rem;
  }
}
/* Design der Toolbat und Charms */
.e-toolbar {
  overflow: visible;
}

/* Design der Inputs, Buttons und andere Controls */
/* für alle DIVs mit HNC-Controls */
.hnc .hnc-control-flex-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--control-gap);
}
.hnc .hnc-control-flex-wrapper h2 {
  font-size: 16px;
  color: var(--hncblaugrau);
}
.hnc .hnc-control-flex-wrapper h2:not(:has(.info-popover-wrapper)) * {
  color: var(--hncblaugrau);
}
.hnc .hnc-control-flex-wrapper h2:not(first-element) {
  border-top: 1px solid var(--input-border-color);
  margin-top: var(--control-gap);
  padding-top: calc(var(--control-gap) * 2);
}

/* Der Floating-Button */
.hnc .e-fab.e-btn {
  min-height: 60px;
  border-radius: var(--control-borderradius);
  border: 0;
  padding: 0 20px;
  z-index: 999;
}
.hnc .e-fab.e-btn .e-btn-icon {
  font-size: 2em;
}
.hnc .e-fab.e-btn:focus-visible:focus {
  position: absolute;
}
.hnc .e-fab.e-btn.e-primary {
  background: linear-gradient(to right, var(--hncblauhell1), var(--hncblau));
}
.hnc article.content:has(button.e-fab.fab-visible) > div {
  padding-bottom: 80px !important;
}
.hnc article.content:has(button.e-fab.fab-visible ~ button.e-fab.fab-visible) > div {
  padding-bottom: 160px !important;
}
.hnc article.content:has(button.e-fab.fab-visible ~ button.e-fab.fab-visible ~ button.e-fab.fab-visible) > div {
  padding-bottom: 240px !important;
}

/* Burgermenu Icon in der Topbar */
#topbar .navbar-toggler .e-btn-icon {
  font-size: 48px;
}

/* Checkbox */
.hnc {
  /* hover */
  /* disabled */
  /* Focus */
}
.hnc .e-checkbox-wrapper,
.hnc .e-css.e-checkbox-wrapper {
  /* Basis Gestaltung */
  /* Icon Standards */
  /* Checked */
  /* unbestimmt / indeterminate */
}
.hnc .e-checkbox-wrapper .e-frame,
.hnc .e-css.e-checkbox-wrapper .e-frame {
  font-family: "hnc_main_icons";
  background-color: var(--checkbox-bg-color);
  height: 18px;
  width: 18px;
  margin: 0;
  border: 0; /* border ist Teil des Icons selbst */
}
.hnc .e-checkbox-wrapper .e-frame:before,
.hnc .e-css.e-checkbox-wrapper .e-frame:before {
  content: "\e954"; /* immer unchecked wenn nicht anderes zugewiesen */
  color: var(--checkbox-color-unchecked);
  font-size: 18px;
  line-height: 18px;
  font-weight: normal;
}
.hnc .e-checkbox-wrapper .e-check:before,
.hnc .e-css.e-checkbox-wrapper .e-check:before {
  content: "\e952";
  color: var(--checkbox-color-checked);
}
.hnc .e-checkbox-wrapper .e-stop:before,
.hnc .e-css.e-checkbox-wrapper .e-stop:before {
  content: "\e953";
  color: var(--checkbox-color-stop);
}
.hnc .e-checkbox-wrapper label,
.hnc .e-css.e-checkbox-wrapper label {
  /* Damit der Focus-Rahmen zu sehen ist */
  overflow: visible;
}
.hnc .e-checkbox-wrapper:hover .e-frame,
.hnc .e-css.e-checkbox-wrapper:hover .e-frame {
  background-color: var(--checkbox-bg-color-hover);
}
.hnc .e-checkbox-wrapper:hover .e-frame.e-check,
.hnc .e-css.e-checkbox-wrapper:hover .e-frame.e-check {
  background-color: var(--checkbox-bg-color);
}
.hnc .e-checkbox-wrapper:hover .e-frame.e-check:before,
.hnc .e-css.e-checkbox-wrapper:hover .e-frame.e-check:before {
  color: var(--checkbox-color-checked-hover);
}
.hnc .e-checkbox-wrapper:hover .e-frame.e-stop:before,
.hnc .e-css.e-checkbox-wrapper:hover .e-frame.e-stop:before {
  color: var(--checkbox-color-stop-hover);
}
.hnc .e-checkbox-wrapper.e-checkbox-disabled .e-frame,
.hnc .e-css.e-checkbox-wrapper.e-checkbox-disabled .e-frame {
  background: var(--checkbox-bg-color-disabled);
}
.hnc .e-checkbox-wrapper.e-checkbox-disabled .e-frame.e-check,
.hnc .e-css.e-checkbox-wrapper.e-checkbox-disabled .e-frame.e-check {
  background: var(--checkbox-bg-color);
}
.hnc .e-checkbox-wrapper.e-checkbox-disabled .e-frame:before,
.hnc .e-css.e-checkbox-wrapper.e-checkbox-disabled .e-frame:before {
  color: var(--checkbox-color-disabled);
}
.hnc .e-checkbox-wrapper .e-checkbox:focus + .e-frame,
.hnc .e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame,
.hnc .e-checkbox-wrapper .e-checkbox:active + .e-frame,
.hnc .e-css.e-checkbox-wrapper .e-checkbox:active + .e-frame {
  /* Standard deaktivieren */
  /* box-shadow: 0 0 0 4px var(--input-focus-color); */
  box-shadow: none;
}
.hnc .e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-stop, .hnc .e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check,
.hnc .e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-stop,
.hnc .e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check,
.hnc .e-checkbox-wrapper .e-checkbox:active + .e-frame.e-stop,
.hnc .e-checkbox-wrapper .e-checkbox:active + .e-frame.e-check,
.hnc .e-css.e-checkbox-wrapper .e-checkbox:active + .e-frame.e-stop,
.hnc .e-css.e-checkbox-wrapper .e-checkbox:active + .e-frame.e-check {
  background: var(--checkbox-bg-color);
}
.hnc .e-checkbox-wrapper.e-wrapper:has(input:focus) {
  box-shadow: 0 0 0 4px var(--input-focus-color);
  border-radius: 4px;
  padding-right: 2px;
}

/* switch */
.hnc {
  --switch-height: 24px;
}
.hnc .e-switch-wrapper {
  min-width: 50px;
  height: var(--switch-height);
}
.hnc .e-switch-wrapper .e-switch-inner {
  border: 1px solid var(--graudunkel1);
  background: white;
}
.hnc .e-switch-wrapper .e-switch-on {
  background: white;
}
.hnc .e-switch-wrapper .e-switch-inner.e-switch-active {
  border: 1px solid var(--hncgruen);
}
.hnc .e-switch-wrapper .e-switch-handle {
  background: var(--graudunkel1);
  height: var(--switch-height);
  width: var(--switch-height);
  left: 0;
}
.hnc .e-switch-wrapper .e-switch-handle.e-switch-active {
  background: var(--hncgruen);
  left: 100%;
  margin-left: calc(0px - var(--switch-height));
}
.hnc .e-switch-wrapper .e-switch-handle.e-switch-active:after {
  content: "\e99f";
  color: white;
  font-family: "hnc_main_icons";
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}
.hnc .e-switch-wrapper:hover .e-switch-inner.e-switch-active .e-switch-on {
  background-color: white;
}
.hnc .e-switch-wrapper:hover .e-switch-handle.e-switch-active {
  background: var(--hncgruenhell2);
}

/*#region Icons */
.hnc .e-input-group .e-input-group-icon,
.hnc .e-input-group-icon.e-input-eye:after,
.hnc .e-input-group-icon.e-clear:after,
.hnc .e-input-group-icon.e-search:after,
.hnc .e-input-group-icon.has-selector:after,
.hnc .e-input-group-icon.e-date-icon:before,
.hnc .e-input-group-icon.e-time-icon:before {
  font-family: "hnc_main_icons";
  font-size: 20px;
}
.hnc .e-input-group.e-control-container.e-control-wrapper.e-input-password-visible .e-input-eye::after {
  content: "\e933" !important; /*eye*/
}
.hnc .e-input-group.e-control-container.e-control-wrapper.e-input-password-invisible .e-input-eye::after {
  content: "\e934" !important; /*eye-slash*/
}
.hnc .e-input-group.e-control-container.e-control-wrapper .has-selector::after {
  content: "\ea28" !important; /*three dots*/
}
.hnc .e-input-group.e-control-container.e-control-wrapper .e-clear::after {
  content: "\e958" !important; /*x*/
}
.hnc .e-input-group.e-control-container.e-control-wrapper .e-search::after {
  content: "\e958" !important; /*x*/
}
.hnc .e-input-group.e-control-container.e-control-wrapper .e-date-icon:before {
  content: "\e9ae" !important;
}
.hnc .e-input-group.e-control-container.e-control-wrapper .e-time-icon:before {
  content: "\e957" !important;
}

/*#endregion */
/* bootstrap listbox*/
.hnc .e-listbox-container:not(.e-listboxtool-container):not(.e-sortableclone) {
  border-radius: var(--control-borderradius);
  overflow: hidden;
}

/* popup Kalender Date-Picker*/
.hnc .e-calendar .e-content td.e-selected span.e-day {
  background: var(--hncorange);
}
.hnc .e-calendar .e-content td.e-today span.e-day {
  background: var(--white);
  box-shadow: 0 0 0 2px var(--hncblau);
  color: var(--hncblau);
}
.hnc .e-calendar .e-content td.e-selected.e-today span.e-day {
  background: var(--hncorange);
}
.hnc .e-calendar .e-content td:hover span.e-day {
  background: var(--hncblauhell2);
}
.hnc .e-calendar .e-content td.e-selected:hover span.e-day {
  background: var(--hncorangehover);
}
.hnc .e-calendar .e-header .e-prev:hover,
.hnc .e-calendar .e-header .e-next:hover {
  background: var(--hncblauhell2);
}
.hnc .e-calendar .e-header .e-prev:hover .e-icons:before,
.hnc .e-calendar .e-header .e-next:hover .e-icons:before {
  color: var(--hncblau);
}
.hnc .e-calendar .e-footer-container button.e-btn.e-flat.e-primary {
  background-color: var(--button-bg-color);
}
.hnc .e-calendar .e-footer-container button.e-btn.e-flat.e-primary.e-today:hover {
  background-color: var(--button-bg-hover);
}
.hnc .e-datetimepicker.e-popup .e-list-parent.e-ul .e-list-item.e-active {
  background-color: var(--hncorange);
  color: var(--white);
}
.hnc .e-datetimepicker.e-popup .e-list-parent.e-ul .e-list-item.e-hover {
  background-color: var(--hncblauhell2);
  color: var(--hncblau);
}
.hnc .e-datetimepicker.e-popup .e-list-parent.e-ul .e-list-item.e-active.e-hover {
  background-color: var(--hncorangehover);
  color: var(--white);
}

/* Design der Upload DragnDrop Area */
/* File-/Image-Uploader */
.hnc-control-wrapper.hnc-fileupload-wrapper .hnc-droparea-wrapper {
  background-color: white;
  border-radius: var(--control-borderradius);
  overflow: hidden;
  border: 1px solid var(--input-border-color);
  padding: var(--control-gap);
  margin-right: var(--control-gap);
  margin-bottom: var(--control-gap);
  position: relative;
}
.hnc-control-wrapper.hnc-fileupload-wrapper .cam-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
  top: 0;
  left: 0;
  z-index: 200;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}
.hnc-control-wrapper.hnc-fileupload-wrapper .cam-wrapper video.video-stream,
.hnc-control-wrapper.hnc-fileupload-wrapper .cam-wrapper img.photo-capture-preview {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  border-radius: var(--control-borderradius);
  border: 0;
  background: var(--hellgrau);
}
.hnc-control-wrapper.hnc-fileupload-wrapper .cam-wrapper .hnc-button-wrapper {
  z-index: 100;
  margin: var(--control-gap);
  min-width: 140px;
}
.hnc-control-wrapper.hnc-fileupload-wrapper .cam-wrapper.cam-wrapper-hidden {
  z-index: -100;
}
.hnc-control-wrapper.hnc-fileupload-wrapper .cam-wrapper.cam-wrapper-stream video.video-stream {
  display: block;
}
.hnc-control-wrapper.hnc-fileupload-wrapper .cam-wrapper.cam-wrapper-stream .hnc-btn-apply,
.hnc-control-wrapper.hnc-fileupload-wrapper .cam-wrapper.cam-wrapper-stream .hnc-btn-again {
  display: none;
}
.hnc-control-wrapper.hnc-fileupload-wrapper .cam-wrapper.cam-wrapper-preview img.photo-capture-preview {
  display: block;
}
.hnc-control-wrapper.hnc-fileupload-wrapper .cam-wrapper.cam-wrapper-preview .hnc-btn-capture {
  display: none;
}
.hnc-control-wrapper.hnc-fileupload-wrapper .hnc-droparea {
  border: 2px dashed var(--input-border-color);
  border-radius: var(--control-borderradius);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5%;
  color: black;
}
.hnc-control-wrapper.hnc-fileupload-wrapper .hnc-droparea:has(img.file-browser-preview), .hnc-control-wrapper.hnc-fileupload-wrapper .hnc-droparea:has(video.file-browser-preview), .hnc-control-wrapper.hnc-fileupload-wrapper .hnc-droparea:has(div.file-browser-preview) {
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
}
.hnc-control-wrapper.hnc-fileupload-wrapper .hnc-droparea .subtext {
  color: var(--grau);
}
.hnc-control-wrapper.hnc-fileupload-wrapper .hnc-droparea i.hnci-main-icons {
  font-size: 40px;
  color: var(--grau);
}
.hnc-control-wrapper.hnc-fileupload-wrapper .hnc-droparea.e-upload-drag-hover {
  border-color: var(--hncblau);
  background: var(--hncblauhell2);
  color: var(--hncblau);
}
.hnc-control-wrapper.hnc-fileupload-wrapper .hnc-droparea.e-upload-drag-hover i.hnci-main-icons,
.hnc-control-wrapper.hnc-fileupload-wrapper .hnc-droparea.e-upload-drag-hover .subtext {
  color: var(--hncblauhell1);
}
.hnc-control-wrapper.hnc-fileupload-wrapper .hnc-droparea img {
  width: clamp(100px, 33%, 50%);
  max-height: 150px;
  object-fit: contain;
  border-radius: var(--control-borderradius);
  margin: var(--control-gap);
  border: 1px solid var(--hncblau);
}
.hnc-control-wrapper.hnc-fileupload-wrapper .hnc-droparea video {
  width: clamp(100px, 33%, 50%);
  max-height: 150px;
  border-radius: var(--control-borderradius);
  margin: var(--control-gap);
  border: 1px solid var(--hncblau);
}
.hnc-control-wrapper.hnc-fileupload-wrapper .hnc-droparea div.preview {
  /*width: clamp(100px,33%,50%);*/
  max-height: 150px;
  margin: var(--control-gap);
  text-align: center;
}
.hnc-control-wrapper.hnc-fileupload-wrapper .hnc-droparea div.preview i.hnci-main-icons {
  font-size: 120px;
}
.hnc-control-wrapper.hnc-fileupload-wrapper .e-upload.e-control-wrapper {
  font-family: Roboto;
  border: 0;
}
.hnc-control-wrapper.hnc-fileupload-wrapper .e-upload.e-control-wrapper .e-file-select-wrap {
  padding: 0;
  text-align: center;
  /* standard input-control verstecken */
}
.hnc-control-wrapper.hnc-fileupload-wrapper .e-upload.e-control-wrapper .e-file-select-wrap .e-file-select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.hnc-control-wrapper.hnc-fileupload-wrapper .e-upload.e-control-wrapper .e-file-drop {
  display: none;
}
.hnc-control-wrapper.hnc-fileupload-wrapper .e-upload.e-control-wrapper .e-file-select-wrap button.e-upload-browse-btn {
  display: inline-flex;
  align-items: center;
  margin: 2px 0 calc(var(--control-gap) / 2) 0;
}
.hnc-control-wrapper.hnc-fileupload-wrapper .e-upload.e-control-wrapper .e-file-select-wrap button.e-upload-browse-btn:before {
  content: "\e970";
  font-family: "hnc_main_icons";
  margin-right: 0.5em;
  font-size: 16px;
  line-height: 16px;
  margin-bottom: 4px;
}
.hnc-control-wrapper.hnc-fileupload-wrapper .e-upload.e-control-wrapper .e-file-select-wrap button.e-upload-browse-btn:hover {
  background-color: var(--button-bg-hover);
  color: var(--white);
  border-color: var(--button-bg-hover);
}
.hnc-control-wrapper.hnc-fileupload-wrapper .hnc-btn-cam {
  margin-bottom: 4px;
}
.hnc-control-wrapper.hnc-fileupload-wrapper .file-info-wrapper {
  margin: var(--control-gap) 0;
  width: clamp(100px, 33%, 50%);
  overflow-wrap: anywhere;
}
.hnc-control-wrapper.hnc-fileupload-wrapper .file-info-wrapper button.hnc-btn-remove {
  background-color: white;
  color: var(--alarm);
  border-color: var(--alarm);
  width: 100%;
  margin-top: 8px;
}
.hnc-control-wrapper.hnc-fileupload-wrapper .file-info-wrapper button.hnc-btn-remove .e-btn-icon {
  font-size: 1.5em;
}
.hnc-control-wrapper.hnc-fileupload-wrapper .file-info-wrapper button.e-upload-browse-btn {
  display: none !important;
}
.hnc-control-wrapper.hnc-fileupload-wrapper .file-info-wrapper button.hnc-btn-upload {
  width: 100%;
  margin-top: 8px;
}

/* Design des Barcode-Readers */
.hnc .hnc-barcodereader-wrapper .modal-content {
  background: var(--hellgrau3);
  padding: 0 !important;
}
.hnc .hnc-barcodereader-wrapper .modal-body {
  background: var(--hellgrau3);
  padding: 0 0 var(--control-gap) 0 !important;
  display: flex;
  gap: var(--control-gap);
  flex-direction: row;
  flex-wrap: wrap;
}
.hnc .hnc-barcodereader-wrapper .modal-body div:has(video) {
  order: -2;
  width: 100%;
  background-color: white;
  padding: var(--control-gap);
  border-bottom: 1px solid var(--grau);
}
.hnc .hnc-barcodereader-wrapper .modal-body video {
  border-radius: var(--control-borderradius);
  height: 100%;
}
.hnc .hnc-barcodereader-wrapper .modal-body div[data-action] {
  order: -1;
}
.hnc .hnc-barcodereader-wrapper .modal-body button {
  background: var(--hncblau);
  color: var(--white);
  margin: 0 !important;
  border: 1px solid transparent !important;
}
.hnc .hnc-barcodereader-wrapper .modal-body button:hover {
  background-color: var(--button-bg-hover);
  border-color: var(--button-bg-hover);
}
.hnc .hnc-barcodereader-wrapper .modal-body button[data-action=closeButton] {
  order: -1;
  margin-left: var(--control-gap) !important;
  background-color: white;
  color: var(--hncblau);
  border-color: var(--hncblau) !important;
}
.hnc .hnc-barcodereader-wrapper .modal-body button[data-action=closeButton]:hover {
  background-color: var(--button-bg-hover);
  border-color: var(--button-bg-hover) !important;
  color: white;
}

/* Design der Topbar und breadcrumbs */
/* Breadcrumbs in Topbar */
.breadcrumb {
  margin-bottom: 0;
  margin-top: 5px;
  line-height: 1;
  flex-wrap: nowrap;
  max-width: calc(100vw - 160px);
}
.breadcrumb .breadcrumb-item {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px 4px;
}
.breadcrumb .breadcrumb-item:last-child, .breadcrumb .breadcrumb-item:first-child {
  flex: 0 0 auto;
  white-space: nowrap;
}

.breadcrumb .breadcrumb-item a {
  color: white;
  padding: 2px 5px;
}

.breadcrumb .breadcrumb-item:has(a) {
  margin-left: -4px;
}
.breadcrumb .breadcrumb-item:has(a):after {
  content: "\e956";
  font-family: "hnc_main_icons";
}

.breadcrumb .breadcrumb-item:has(a):hover {
  background-color: var(--hncblauhell1);
  border-radius: 4px;
}

.breadcrumb .breadcrumb-item a:hover {
  text-decoration: none;
}

.breadcrumb .breadcrumb-item.active {
  color: white;
  text-decoration-color: var(--hncorange);
  text-decoration-thickness: 2px;
}

.breadcrumb .breadcrumb-item + .breadcrumb-item {
  padding-left: 1em;
}

.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: white;
  content: "\e976";
  font-family: "hnc_main_icons";
  font-size: 0.5em;
  padding-top: 0.7em;
  padding-right: 2em; /* 2em, also doppelt als left weil font nur 0.5em */
}

@media (max-width: 500px) {
  .breadcrumb {
    display: none;
  }
}
/* Design der Topbar und breadcrumbs */
.hnc {
  /* Style for the card wrapper to position the badge and handle clicks */
  /* Card content styling */
}
.hnc .module-launcher-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--control-gap);
  /*padding: 20px;*/
  justify-content: flex-start;
  /*font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";*/
}
.hnc .module-card {
  width: 100%;
  height: 100%;
  color: white;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #005CA2;
  align-items: center;
  padding: 0px 10px;
  box-sizing: border-box;
  border-radius: 10px; /* Added for rounded corners */
}
.hnc .module-card-wrapper:hover .module-card {
  /*transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);*/
  background-color: var(--hncblauhell1);
}
.hnc .module-card-wrapper:hover .module-card span.hnci-main-icons {
  opacity: 0.2;
  transition: all 300ms ease 1000ms;
}
.hnc .module-card-wrapper:hover .module-card div.module-title {
  font-size: 1.2em;
  -webkit-line-clamp: 5;
  transition: all 100ms ease 1000ms;
  bottom: 10px;
  line-height: 1.1;
}
.hnc .module-card-wrapper {
  position: relative;
  width: 180px;
  height: 180px;
  cursor: pointer; /* Add pointer cursor to indicate it's clickable */
}
.hnc .module-card .card-main-content {
  text-align: center;
}
.hnc .module-card .module-icon {
  font-size: 110px; /* Large icon */
  width: 110px; /* Ensure consistent width */
  height: 110px; /* Ensure consistent height */
  line-height: 140px; /* Vertically center the icon glyph */
  display: inline-block; /* Make width and height effective */
  text-align: center;
  color: white;
}
.hnc .module-card .module-title {
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: white;
  width: 100%;
  align-self: flex-end; /* Pushes title to the bottom */
  line-height: 16px;
}
.hnc .module-count-container {
  position: absolute;
  top: 15px;
  right: -10px;
  display: flex;
  gap: 4px; /* Space between multiple badges */
  z-index: 10;
  background: var(--hncblauhell2);
  border: 1px solid var(--hncblau);
  border-radius: var(--control-borderradius);
  outline: 3px solid white;
  padding: 1px 4px;
  line-height: 1;
  color: var(--hncblau);
}
.hnc .module-count-container .module-count-up {
  border-right: 1px solid transparent;
  padding-right: 4px;
  border-image-source: linear-gradient(to bottom, transparent 0%, transparent 10%, var(--hncblau) 10%, var(--hncblau) 90%, transparent 90%, transparent 100%);
  border-image-slice: 1;
  padding-right: 4px;
}
.hnc .module-count-container .module-count-up,
.hnc .module-count-container .module-count-down {
  display: flex;
}
.hnc .module-count-container .module-count-up:before,
.hnc .module-count-container .module-count-down:after {
  font-family: "hnc_main_icons";
  display: inline-block;
}
.hnc .module-count-container .module-count-up:before {
  content: "\e9f0";
  transform: rotate(180deg);
}
.hnc .module-count-container .module-count-down:after {
  content: "\e9f0";
}

/* Design der Topbar und breadcrumbs */
.info-popover-wrapper {
  position: relative;
  /*display: inline-block;*/
  /*margin-bottom: 4px;*/
}

.popover-trigger {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  user-select: none;
  font-weight: 600;
  /*color: var(--hncblau);
  font-size: 12px;*/
  margin-left: calc(var(--control-borderradius) / 1.3);
}

.no-margin-left {
  margin-left: 0;
}

.info-icon {
  font-size: inherit;
  display: inline-block;
  text-align: center;
  color: var(--hncblaugrau);
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}

.popover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 1040;
}

.popover-container {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 12px;
  width: 300px;
  z-index: 1050;
  background-color: var(--black);
  color: var(--white);
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
  opacity: 0.9;
  padding: var(--control-gap);
  z-index: 1050;
}

.popover-container::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px;
  border-style: solid;
  border-color: #2c3e50 transparent transparent transparent;
}

.popover-container::before {
  content: "\e958";
  font-family: "hnc_main_icons";
  position: absolute;
  right: 4px;
  top: 4px;
  font-size: 12px;
  line-height: 12px;
}

.popover-body {
  font-size: 12px;
  line-height: 1.2;
  text-align: left;
  font-weight: normal;
}

.popover-body p,
.popover-body p * {
  margin-top: 0;
  margin-bottom: 0.25rem;
  /*color: white !important;*/
}

.popover-container.align-left {
  transform: translateX(calc(-100% + 20px));
}

.popover-container.align-left::after {
  left: calc(100% - 20px);
}

.popover-container.align-right {
  transform: translateX(-20px);
}

.popover-container.align-right::after {
  left: 20px;
}

.popover-container.placement-bottom {
  bottom: auto;
  top: 100%;
  margin-bottom: 0;
  margin-top: 12px;
}

.popover-container.placement-bottom::after {
  top: auto;
  bottom: 100%;
  border-color: transparent transparent var(--black) transparent;
}

/* Design der Syncfusion Messages */
.hnc {
  /* Basiert auf SfMessages 
      unterstützt werden Normal, Success, Info, Warning and Error
  */
  /* Toast-Messages */
}
.hnc .e-message {
  border-radius: var(--control-borderradius);
  border-width: 2px;
}
.hnc .e-message:not(last-child) {
  margin-bottom: 20px;
}
.hnc .e-message.e-normal, .hnc .e-message.e-info {
  background-color: var(--hncblauhell2);
  border-color: var(--hncblau);
  color: var(--black);
}
.hnc .e-message.e-normal .e-msg-icon, .hnc .e-message.e-info .e-msg-icon {
  color: var(--hncblau) !important;
}
.hnc .e-message.e-normal .e-msg-icon:before, .hnc .e-message.e-info .e-msg-icon:before {
  content: "\e9a6";
}
.hnc .e-message.e-success {
  background-color: var(--hncgruenhell1);
  border-color: var(--hncgruen);
  color: var(--black);
}
.hnc .e-message.e-success .e-msg-icon {
  color: var(--hncgruen) !important;
}
.hnc .e-message.e-success .e-msg-icon:before {
  content: "\e99e";
}
.hnc .e-message.e-warning {
  background-color: var(--hncorangehell2);
  border-color: var(--hncorange);
  color: var(--black);
}
.hnc .e-message.e-warning .e-msg-icon {
  color: var(--hncorange) !important;
}
.hnc .e-message.e-warning .e-msg-icon:before {
  content: "\ea4a";
}
.hnc .e-message.e-error {
  background-color: var(--hncrothell1);
  border-color: var(--hncrot);
  color: var(--black);
}
.hnc .e-message.e-error .e-msg-icon {
  color: var(--hncrot) !important;
}
.hnc .e-message.e-error .e-msg-icon:before {
  content: "\e937";
}
.hnc .e-message .e-msg-icon:before {
  font-family: hnc_main_icons;
  font-size: 24px;
}
.hnc .e-toast-container.e-toast-bottom-right {
  bottom: 100px;
  right: 50px;
}
.hnc .e-toast-container .e-toast {
  border-radius: 7px;
  border: 2px solid black;
  margin: 10px 0 0 0;
}
.hnc .e-toast-container .e-toast .e-toast-message .e-toast-content {
  color: black;
  font-size: 14px;
  font-weight: normal;
  padding: 20px 30px 20px 60px;
}
.hnc .e-toast-container .e-toast.e-toast-danger .e-toast-content:before, .hnc .e-toast-container .e-toast.e-toast-success .e-toast-content:before, .hnc .e-toast-container .e-toast.e-toast-warning .e-toast-content:before, .hnc .e-toast-container .e-toastt.e-toast-info .e-toast-content:before {
  font-family: "hnc_main_icons";
  position: absolute;
  left: 20px;
  top: 14px;
  font-size: 24px;
}
.hnc .e-toast-container .e-toast.e-toast-danger {
  background-color: var(--hncrothell1);
  border-color: var(--red);
}
.hnc .e-toast-container .e-toast.e-toast-danger .e-toast-content:before {
  content: "\e937";
  color: var(--red);
}
.hnc .e-toast-container .e-toast.e-toast-success {
  background-color: var(--hncgruenhell1);
  border-color: var(--hncgruen);
}
.hnc .e-toast-container .e-toast.e-toast-success .e-toast-content:before {
  content: "\e99e";
  color: var(--hncgruen);
}
.hnc .e-toast-container .e-toast.e-toast-warning {
  background-color: var(--hncorangehell1);
  border-color: var(--hncorange);
}
.hnc .e-toast-container .e-toast.e-toast-warning .e-toast-content:before {
  content: "\ea4a";
  color: var(--hncorange);
}
.hnc .e-toast-container .e-toast.e-toast-info {
  background-color: var(--hncblauhell2);
  border-color: var(--hncblau);
}
.hnc .e-toast-container .e-toast.e-toast-info .e-toast-content:before {
  content: "\e9a6";
  color: var(--hncblau);
}
.hnc .e-toast-container .e-blazor-toast-close-icon {
  display: none;
}

/* Design der Tabs und Register */
.hnc-tab-container {
  display: flex;
}
.hnc-tab-container .hnc-tab-wrapper {
  flex: 1 1 100%;
  width: 100%;
  position: relative;
}
.hnc-tab-container .hnc-tab-wrapper.has-config-button {
  padding-right: 16px;
}
.hnc-tab-container .hnc-tab-wrapper .e-tab .e-tab-header .e-toolbar-item {
  height: 42px;
  border: 0;
}
.hnc-tab-container .hnc-tab-wrapper .e-tab .e-tab-header .e-toolbar-item.e-active {
  background: var(--hncorange);
  border-radius: var(--control-borderradius) var(--control-borderradius) 0 0;
}
.hnc-tab-container .hnc-tab-wrapper .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text {
  color: white;
}
.hnc-tab-container .hnc-tab-wrapper .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
  height: 42px;
  color: var(--graudunkel1);
  border: 0;
}
.hnc-tab-container .hnc-tab-wrapper .e-tab .e-tab-header .e-toolbar-item .e-text-wrap {
  height: 42px;
}
.hnc-tab-container .hnc-tab-wrapper .e-tab .e-tab-header .e-toolbar-item .e-tab-text {
  font-family: Roboto;
  font-size: 20px;
}
.hnc-tab-container .hnc-tab-wrapper .e-tab-header:before {
  border-color: var(--grid-border-color);
}
.hnc-tab-container .hnc-tab-wrapper .e-tab-header .e-hscroll:not(.e-scroll-device) {
  padding: 0;
}
.hnc-tab-container .hnc-tab-wrapper .e-tab .e-content {
  padding-top: 20px;
}
.hnc-tab-container .hnc-tab-wrapper .e-tab .e-content h2 {
  font-size: 16px;
  color: var(--hncblaugrau);
}
.hnc-tab-container .hnc-tab-wrapper .e-tab .e-content h2:not(:has(.info-popover-wrapper)) * {
  color: var(--hncblaugrau);
}
.hnc-tab-container .hnc-tab-wrapper .e-tab .e-content h2:not(first-element) {
  border-top: 1px solid var(--input-border-color);
  margin-top: var(--control-gap);
  padding-top: calc(var(--control-gap) * 2);
}
.hnc-tab-container .hnc-tab-wrapper .e-toolbar-items.e-hscroll {
  overflow: auto;
  width: 100%;
  position: relative;
}
.hnc-tab-container .hnc-tab-wrapper .e-toolbar-items.e-hscroll .e-scroll-nav {
  height: calc(100% - 1px);
  z-index: 10;
  width: 50px;
  border-radius: 0;
}
.hnc-tab-container .hnc-tab-wrapper .e-toolbar-items.e-hscroll .e-scroll-nav .e-icons {
  display: none;
}
.hnc-tab-container .hnc-tab-wrapper .e-toolbar-items.e-hscroll .e-scroll-nav.e-scroll-left-nav {
  background-image: linear-gradient(to left, transparent 0%, white 100%, white 100%);
}
.hnc-tab-container .hnc-tab-wrapper .e-toolbar-items.e-hscroll .e-scroll-nav.e-scroll-right-nav {
  background-image: linear-gradient(to right, transparent 0%, white 100%, white 100%);
}
.hnc-tab-container .hnc-tab-wrapper .e-toolbar-items.e-hscroll .e-scroll-nav.e-overlay {
  opacity: 0;
}
.hnc-tab-container .hnc-tab-wrapper .e-toolbar-items.e-hscroll::-webkit-scrollbar {
  display: none;
}
.hnc-tab-container .hnc-tab-wrapper .hnc-tab-config-content {
  position: absolute;
  top: 1px;
  right: 0;
}
.hnc-tab-container .hnc-tab-wrapper .hnc-tab-config-content button {
  padding: 0;
}
.hnc-tab-container .hnc-tab-wrapper .hnc-tab-config-content .hnci-main-icons {
  font-size: 40px;
}
.hnc-tab-container .hnc-tab-wrapper.has-config-button .e-toolbar-items.e-hscroll {
  width: 100%;
}

.hnc-tab-content {
  display: flex;
  flex-direction: column;
  gap: var(--control-gap);
  /*padding: var(--control-gap); DevOps7914 */
}
.hnc-tab-content .hnc-flex-row {
  gap: var(--control-gap);
  flex-wrap: wrap;
}

.hnc-tab-container .hnc-tab-wrapper .hnc-grid-container .e-content {
  padding-top: 0 !important;
}

/* Design der Dialoge */
.hnc .e-dialog .e-footer-content {
  background-color: var(--hellgrau3);
  padding: 1em;
  border-top: 1px solid var(--grid-border-color);
  display: flex;
  justify-content: end;
  gap: var(--control-gap);
}
.hnc .e-dialog .e-footer-content button.e-btn.e-flat {
  min-width: 140px;
  min-height: 36px;
  padding: 0.4em 2em;
  font-weight: normal;
  line-height: 1;
  margin: 0;
}
.hnc .e-dialog .e-footer-content button.e-btn.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info) {
  background-color: transparent;
  color: var(--hncblau);
  border-color: var(--hncblau);
}
.hnc .e-dialog .e-footer-content button.e-btn.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info):hover {
  background-color: var(--button-bg-hover);
  border-color: var(--button-bg-hover);
  color: white;
}
.hnc .e-dialog .e-footer-content button.e-btn.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info).e-primary {
  background: var(--hncblau);
  color: white;
}
.hnc .e-dialog .e-footer-content button.e-btn.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info).e-primary:hover {
  background-color: var(--button-bg-hover);
  border-color: var(--button-bg-hover);
}
.hnc .e-dialog .e-footer-content button[disabled].e-btn.e-flat {
  background-color: var(--button-bg-disabled);
  color: var(--button-text-disabled);
}
.hnc .e-dialog .e-footer-content .hnc-btn-secondary button {
  background-color: white;
  color: var(--hncblau);
}
.hnc .e-dialog .e-footer-content .hnc-btn-secondary button:hover {
  background-color: var(--button-bg-hover);
  border-color: var(--button-bg-hover);
  color: var(--white);
}
.hnc .e-dlg-overlay,
.hnc .modal-overlay {
  background-color: rgba(0, 0, 0, 0.74);
  backdrop-filter: blur(5px);
}

/* Bootstrap Icon-Set */