/* ------------------------------------------------------------------------------------------------- */
/* -------------------------------                   ----------------------------- */
/* -------------------------------    Basis Listen und Dialoge   ----------------------------- */
/* -------------------------------                   ----------------------------- */
/* ------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------- */
/* -------------------------------   TEMPLATE            ----------------------------- */

body {
  background-color: var(--color-main-background);
}

/* IOS DisplayCutout enthält Uhrzeit und Symbole in weiß. Ios mag hier kein gradient anzeigen - nehmen wir halt nen schatten*/
@media (orientation: portrait) {
  body.pwa .flexContainer { /* DAS IST KEIN FEHLER, IntelliJ irrt sich hier*/
    /*noinspection CssNegativeValue*/
    box-shadow: inset 0 env(safe-area-inset-top, 0) 20px -12px  rgba(0, 0, 0, 0.6);
  }
}
.lodd {
  background-color: var(--color-tr-lodd, transparent);
}

fp-frame#tmplContent {
  flex:1;
   /* keinen z-index hier: aus diesem context kann dann keiner mehr ausbrechen z-index: 99;*/
  min-height: 1px; /* <- min-height, da sonst zu groß - JA ZU GROSS!*/
}

div.tmplContentTable {
  /* Zeile mit 2 Elementen (Leftarea und Hauptcontent).
     Die Zeile nimmt sich soviel Höhe wie der Container zulässt,
     die beiden Elemente strechen sich auf diese Höhe
  */
  display: flex;
  flex-direction: row;
  height: 100%;
  align-items: stretch;
}

div.boxarea div.box.entityActionBar {
  margin-bottom: 0;
  --color-button-raised-back: var(--color-toolbar-button-hover);
  --color-button-raised-font: currentColor;
}

  /* Hauptueberschrift und labels*/

.jmlListBody {
  overflow: initial; /* <- wichtig für den sticky header */
  /* padding gegen unnötige scrollbalken!*/
  padding-top: 2px;
  padding-bottom: 8px;
}

.dialog td.label {
  color: var(--color-card-font);
}

.legendgroup,
.filter-summary {
  opacity: .75;
  font: var(--font-small);
  line-height: 1.5;
  padding: var(--width-componentpadding);
  padding-top: 0;
  --icon-size: 12px;
}
.legendgroup h3,
.filter-summary h3 {
  font: var(--font-normal);
  margin:2px 0;
}
.legendgroup ul  {
  list-style: none;
}
.legendgroup ul li {
  display: inline-block;
  --icon-size: 16px;
}

.legendgroup .legendCaption {
  display: inline-block;
  width: 100px;
}

@media print {
  .filter-summary {
    opacity: 1;
  }
}

.pf_formNavigationList .filter-summary {
  display: none;
}

fp-tab-container.subview {
  border: 1px solid var(--color-default-border);
}

fp-tab-container.subview fp-tab-page {
  border-top: 1px solid var(--color-default-border);
}

/* Das sollte die einzige non-Standard Scrollbar sein */
.tmplContentTable>.boxarea { scrollbar-width: thin; }
.tmplContentTable>.boxarea::-webkit-scrollbar { width: 8px; }
.tmplContentTable>.boxarea::-webkit-scrollbar-track {background-color: var(--color-scrollbar-track);}
.tmplContentTable>.boxarea::-webkit-scrollbar-track-piece {}
.tmplContentTable>.boxarea::-webkit-scrollbar-thumb {
  background-color: var(--color-scrollbar-handle);
  width: 8px;
  /*border: 1px solid var(--color-scrollbar-track);*/
  border-radius: 8px;}       /* 5 */


.tmplContentTable>.boxarea {
  /* etwas extraplatz für den scrollbalken*/
  min-width: calc(var(--width-leftarea) + var(--width-componentspacing, 12px));
  margin-right: -6px;
  flex-grow: 0;
  flex-shrink: 0;
  padding: var(--width-componentspacing, 12px);
  padding-right: 0;
  padding-bottom: 64px;
  overflow-x: hidden;
  overflow-y: auto;
}

.tmplContentTable>.boxarea .box {
  width: var(--width-leftarea, 200px);
}
.tmplContentTable>.boxarea:last-child {
  /* der darf etwas wachsen wenn nötig (mein Tag)*/
  flex-grow: 2;
  /*padding: var(--width-componentspacing, 12px);*/
  padding-left: 0;
  padding-right: var(--width-componentspacing, 12px);
  margin-right: 0;
  flex-basis: 100px; /* klein ist besser als weißraum */
}

div.tmplWorkarea,
div.tmplWorkareaTestAccWiz {
  /* der darf echt richtig wachsen (ist ja der Haupt-Content)*/
  flex-grow: 3;
  overflow: hidden; /* wir scrollen immer noch nicht*/
  display: flex;
  flex-direction: column;
}

.leftarea-open div.tmplWorkarea:not(:first-child) {
  margin-left: var(--width-componentspacing, 12px);
  padding-left: 2px; /* für den Schatten */
}

/* Minimum aspect ratio */
@media (min-aspect-ratio: 16/9) {
  div.tmplWorkarea {
    /*flex-wrap: wrap;*/
  }
}

/* Scrollverhalten auf desktop und tablets:
   Die view selbst scrollt nicht, sondern der Content
   (das Form in der Mitte etwa kümmert sich darum)
   So bleibt die Toolbar stehen und das Zeug um das Form herum auch (Buttons etc)
*/


/* VIEW-CONTAINER: kein scrollen. Aber height als Referenzwert für Kindelemente*/

div.tmplWorkarea .viewFrame {
  width: auto;
  flex-basis: auto;
  flex-shrink: 2;
  flex-grow: 0; /* über den inhalt hinaus möchten wir erstmal nicht wachsen*/
  max-height: calc(100% - 2 * var(--width-componentspacing, 12px) - 2px);
  --header-font: var(--font-normal);
  --header-background: var(--color-primary);
  --header-color: var(--color-primary-contrast);
  --header-height: var(--height-toolbar);
  --content-height: unset;
  background: var(--color-shade-1);
  overflow: auto;
  margin: var(--width-componentspacing, 12px);
  margin-left: 0; /* fest, wegen scrollbarer leftarea hat unser parent bereits das padding */
  margin-bottom: 0;
}

div.tmplWorkarea:first-child .viewFrame {
  margin-left: var(--width-componentspacing, 12px);
}

/* Wenn das mit der maximal benötigten höhe passt, können wir als Flexbasis auch "soviel wie geht" nehmen*/
@supports (max-height: min(1px,2px)) {
  div.tmplWorkarea .viewFrame:not([fullscreen]) {
    /* je nachdem was zuerst eintritt (min)
    a) benötigte höhe
    b) Zur Verfügung stehende Höhe minus abstand minus 2px extra
    */
    max-height: min(var(--content-height, 9999px), calc(100% - 2 * var(--width-componentspacing, 12px) - 2px));
    flex-basis: auto;
  }
  /* Listen bekommen etwas extra-Raum für etwaige Scrollbars (horizontale Scrollbars gibts hier häufiger) */
  div.tmplWorkarea .viewFrame.list-frame:last-of-type:first-of-type:not([fullscreen]) {
    max-height: min(calc(var(--content-height, 9999px) + 20px), calc(100% - 2 * var(--width-componentspacing, 12px) - 2px));
    flex-basis: auto;
  }
}

div.tmplWorkarea .viewFrame:last-of-type{
  margin-bottom: var(--width-componentspacing, 12px);
}

div.tmplWorkarea .viewFrame:not([minimized]) {
  /* Neu: Wir wollen mindestens mal ein drittel der Bildschirmhöhe (aber maximal die benötigte Höhe) */
  /* TODO bei der neueberechnung der content-height wirkt sich diese Regel leider aus,
      d.h. solange die Höhe < 30vh, kann die Componente nur wachsen (bis zu einem refresh)*/
  min-height: min(var(--content-height, 140px), 30vh);
}

/** Buttons in der Fensterleiste sind transparent */
.viewFrame > button[slot="header-buttons-right"] {
  border: none;
  box-shadow: none;
  transition: transform 250ms;
}
[slot="header-buttons-right"].button-close:hover,
.dmCloseTab:hover {
  transform: rotate(90deg);
}


/** Closebutton in der Fensterleiste ist nur außerhalb von DMs erlaubt*/
.dmContainer button.button-close[slot=header-buttons-right] { display: none;}


/* Wenn nur eine einzige Komponente vorhanden ist, macht es keinen Sinn diese zu minimieren*/
div.tmplWorkarea .viewFrame:first-of-type:last-of-type:not([minimized]) .button-minimize {
  display: none;
}

div.tmplWorkarea fp-tab-container.boxsegment {
  flex-basis: auto;
  flex-shrink: 2;
  flex-grow: 0; /* über den inhalt hinaus möchten wir erstmal nicht wachsen*/
  margin: var(--width-componentspacing, 12px);
  margin-bottom: 0;
  background: var(--color-card-background);
  box-shadow: var(--shadow-cards);
}

div.tmplWorkarea .right-col .viewFrame{
  margin-left: 0;
}

/** quickCreate sind bereits optimiert, sie dürfen nicht weiter shrinken*/
div.tmplWorkarea fp-view-wrapper.quickCreate {
  flex-shrink: 0;
  flex-basis: auto; /* sonst wird das schonmal abartig groß */
}

/** Infodialoge könnten auch mal länger sein, sie shrinken mit 1 und sind limitiert*/
div.tmplWorkarea fp-view-wrapper.info-dialog {
  flex-shrink: 1;
  max-height: 300px;
}

.infodialog-content {
  padding: var(--width-componentspacing);
  min-height: 100%;
  overflow: hidden; /* <- falls da mal eine tabelle mit "align='left'" drin landet (Gegenstand des Tickets) */
}

.infodialog-content a,
.infodialog-content a:visited,
.infodialog-content a:active,
.infodialog-content a:link{
  text-decoration: underline;
  color: #6666FF;
  /* Ab v84 kann das auch Chrom/Edge: */
  all: revert;
}

div.tmplWorkarea .viewFrame.list-frame {
  flex-shrink: 1; /* die hauptkomponente soll langsamer shrinken als der rest*/
}

fp-modal.popup-select div.tmplWorkarea .viewFrame.list-frame {
  height: 100%;
}

div.tmplWorkarea .viewFrame.message-preview {
  min-height: 50%;
  flex-basis: 50%;
  flex-grow: 1;
}

.boxsegment.ticket-summary fp-tab-page {
  max-height: 20vh;
}

div.ticket-sideview {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
}

div.ticket-sideview > div{
  display: flex;
  flex-direction: column;
}

div.ticket-sideview .left-col{
  flex-basis: 35%;
  max-width: 50%;
}
div.ticket-sideview .right-col{
  flex-basis: 65%;
  flex-shrink: 1;
  max-width: 75%;
}

div.tmplWorkarea .viewFrame[fullscreen] {
  position: fixed;
  margin:0;
  top:0;left:0;right:0; bottom:var(--height-footer); /* Platz für footer wg. mobile layouts*/
  max-height: none;
  z-index: 999;
}

div.tmplWorkarea .viewFrame[minimized] {
  height: 32px;
  min-height: 32px;
  flex-grow: 0;
  flex-basis: 32px;
  overflow:hidden;
}

div.tmplWorkarea .viewFrame > button {
  --color-button-font: currentColor;
  --color-button-back: transparent;
  --color-button-raised-back: transparent;
  --color-button-raised-font: currentColor;
}

/* VIEW: */
pf-list-view.loading form{
  transition: all 100ms;
}

/* loading */
pf-list-view.loading.loading-1 form{
  opacity: 0.5;
}

/* processing */
pf-list-view.loading.loading-2 form{
  opacity: 0;
}

/* displaying (wurde ersetzt) */
pf-list-view.loading.loading-3 form{
  opacity: 1;
}


div.tmplWorkarea .viewFrame > pf-dialog-view,
div.tmplWorkarea .viewFrame > pf-list-view {
  height: 100%;
  display: contents; /*  flexen können wir leider nicht, dann geht das scrollen nicht mehr richtig*/
}

fp-dialog > pf-list-view {
  height: 100%;
  display: flex;
  flex-direction: column;
}

td.borderTopSingleLine {
  border-top-style: solid;
  border-top-width: thin;
}

td.borderBottomSingleLine {
  border-bottom-style: solid;
  border-bottom-width: thin;
}

td.borderTopDoubleLine {
  border-top-style: double;
}

td.borderBottomDoubleLine {
  border-bottom-style: double;
}



  /* INHALT der View in der Höhe beschränken*/
div.tmplWorkarea .viewFrame > pf-dialog-view .jml_formDialog,
div.tmplWorkarea .viewFrame > pf-list-view .jml_formList,
div.tmplWorkarea .viewFrame > pf-list-view .jml_formCalendar,
div.tmplWorkarea .viewFrame > pf-list-view .jml_formTiles {
  height: auto;
  /*min-height: 100%; <- dann können wir immer scrollen :(  und flexen können wir leider auch nicht, dann geht das scrollen nicht mehr richtig */
  display: flex;
  flex-direction: column;
  /* alle Elemente in diesem Stapel sollten gleich breit sein -> strech*/
  align-items: stretch;
}

div.tmplWorkarea .viewFrame > pf-list-view .jml_formCalendar{
  min-height: unset;
}

div.tmplWorkarea .viewFrame > pf-dialog-view .groups,
div.tmplWorkarea .viewFrame > pf-list-view .bmlf_calendar_month,
div.tmplWorkarea .viewFrame > pf-list-view .bmlf_calendar_team,
div.tmplWorkarea .viewFrame > pf-list-view .bmlf_calendar_team_rotated,
.viewFrame > pf-list-view .jmlListBody {
  overflow: initial; /*viewFrame soll scrollen - nicht wir!*/
  padding-top: 8px;
  padding-bottom: 8px;
  flex-grow: 1; /* damit die Buttons nicht "in der mitte des Dialogs" schweben*/
}

.dmContent  > div.tmplWorkarea {
  /*padding-left: 0;*/
  margin-left: var(--width-componentspacing, 12px);
}

.tmplListFooter {
  position: relative;
}

/* Sticky toolbars ab 600 px*/
@media (min-height: 600px) {

  /* Sonderregel, falls nur ein eintiges View-Frame in der Workarea steckt
    (die komplizierte Regel verhindert, dass auch forms in einem Modal erwischt werden)
   */
  fp-dialog > pf-list-view > form,
  fp-frame#tmplContent div.tmplWorkarea .viewFrame:first-of-type:last-of-type > pf-list-view > form.jml_formList,
  fp-frame#tmplContent div.tmplWorkarea .viewFrame:first-of-type:last-of-type > pf-dialog-view > form.jml_formDialog {
    min-height: 100px; /* Es reicht vollkommen eine kleine Notgröße zu haben */
  }



  div.tmplDialogControlButtons,
  div.tmplControlBarNotEmpty {
    position: sticky; /* sticky geht nicht mit x/y gleichzeitig */
    top: 0;
    left: 0;
    z-index: 10; /* Bild-Overlays gehen bis zu 3*/
  }


  table.listbody thead.sticky-header,
  table.listbody tbody.sticky-header {
    position: sticky;
    z-index: 5; /* Listeninhalte haben manchmal selbst einen z-index von 1 oder 2...*/
    background-color:  var(--color-quickfilter-back);
    box-shadow: 0 2px 2px -1px rgba(0,0,0,0.125);
  }

  .jml_formTiles .jml-tiles-columnheader{
    position: sticky;
    top: calc(var(--height-toolbar) - 2px);
    background-color:  var(--color-quickfilter-back);
    width: 100%;
    height: calc(100% - 4px);
    z-index: 1;
    box-shadow: 0 2px 2px -1px rgba(0,0,0,0.125);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .jml_formTiles .jml-tiles-table .cell-summary{
    position: sticky;
    margin: 0 1px;
    bottom: 24px; /* Pagenav */
  }

  .jml_formTiles .jml-tiles-rowheader{
    position: sticky;
    left: 0;
    background-color:  var(--color-quickfilter-back);
    width: 100%;
    height: calc(100% - 4px);
    z-index: 1;
    box-shadow: 2px 0 2px -1px rgba(0,0,0,0.125);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .jml_formTiles .jml-tiles-columnheader.jml-tiles-rowheader {
    box-shadow: none;
    z-index: 2;
  }

  table.bmlf_calendar:not(.bmlf_calendarWholeDay) thead{
    position: sticky;
    top: calc(var(--height-toolbar) - 2px);
    z-index: 5;
    background-color:  var(--color-quickfilter-back);
    box-shadow: 0 2px 2px -1px rgba(0,0,0,0.125);
  }

  .page-actions,
  .jml_formDialog .buttonarea,
  fp-dialog .filterbutton,
  .tmplListFooter {
    position: sticky;
    bottom: 0;
    left: 0;
    z-index: 5;
    background: var(--color-quickfilter-back);
    color: var(--color-quickfilter-font);
  }
}


.tmplListFooter .floating-action-button{
  position: absolute;
  right: 10px;
  bottom: 40px;
  --icon-size: 64px;
  color: var(--color-accent);
  border-radius: 50%;
}
.tmplListFooter .floating-action-button::before{
  content: '';
  background: var(--color-accent-contrast);
  height: 52px;
  width: 52px;
  top: 6px;
  left: 6px;
  box-shadow: 0 2px 7px rgba(0,0,0,0.5);
  border-radius: 50%;
  position: absolute;
  display: block;
}



/* Scrollverhalten auf screens mit kleinerer Breite:
  Leftarea kann nach links herausgeschoben werden (inklusive snapping)
*/
@media screen and (max-width: 760px) {
  div.tmplCenter.leftarea-open{ /*:not(:first-child) {*/
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
  }

  div.tmplCenter > div.boxarea  {
    scroll-snap-align: start;
  }

  div.tmplWorkarea {
    min-width: calc(100vw - 16px);
    scroll-snap-align: start;
  }
}

/* Scrollverhalten auf screens mit kleinerer Höhe
   Die view selbst scrollt!!!
   (das Form in der Mitte darf so groß werden wie es möchte)
   So scrollt alles: die Toolbar und das Zeug um das Form herum auch (Buttons etc)
*/
@media screen and (max-height: 899px), screen and (max-width: 499px), print {
  /* Mobile
  tmplCenter scrollt horz, wg leftarea
  WORKAREA: darf scrollen - View-Frames dagegen nicht*/

  div.tmplWorkarea {
    overflow: auto; /* ab dieser größe scrollt die Workarea*/
    display: block;
  }

  div.tmplWorkarea .portal-menu {
    overflow: initial;
    height: auto;
  }

  div.tmplWorkarea .viewFrame:not([fullscreen]) {
    overflow: initial;
    max-height: none;
  }

  div.tmplWorkarea .viewFrame:first-of-type:last-of-type:not([fullscreen]) {
    overflow: auto;
    max-height: calc(100% - 2 * var(--width-componentspacing, 12px) - 2px);
  }

  /* View sollte sich am Inhalt Orientieren (der Container scrollt ja nun)*/
  div.tmplWorkarea .viewFrame > pf-dialog-view,
  div.tmplWorkarea .viewFrame > pf-list-view{
    min-width: fit-content;
    height: auto;
  }

  /* INHALT der View nicht in der Höhe beschränken*/
  div.tmplWorkarea .viewFrame > pf-dialog-view .jml_formDialog,
  div.tmplWorkarea .viewFrame > pf-list-view .jml_formList,
  div.tmplWorkarea .viewFrame > pf-list-view .jml_formTiles {
    height: auto;
    overflow: initial;
  }

    /* Bereich im Inhalt muss NICHT mehr scrollen
    und darf sich ungehindert ausbreiten */
  div.tmplWorkarea .viewFrame > pf-dialog-view .groups,
  div.tmplWorkarea .viewFrame > pf-list-view .bmlf_calendar_month,
  div.tmplWorkarea .viewFrame > pf-list-view .bmlf_calendar_team,
  div.tmplWorkarea .viewFrame > pf-list-view .bmlf_calendar_team_rotated,
  div.tmplWorkarea .viewFrame > pf-list-view .jmlListBody {
    overflow: initial;
    flex-shrink: 0;
    min-height: unset;
    max-height: unset;
    max-width: unset;
    box-shadow: none;
  }
  .jmlListBody {
    overflow: initial; /* wichtig für den sticky-header! */
  }
}

td.l h1 {
  margin-top: 0;
}


/*
    ------------------ Listen und dialoge -------------
*/

.viewFrame {
  border-top-width: 0;
}

.boxsegmentcontent .viewFrame {
  border: 0 none;
}

.nodatafound {
  padding: 20px;
  text-align: center;
}

.jml_formTiles .jmlListBody .nodatafound {
  padding: 0;
  height: 40px;
  margin-bottom: -40px; /* das liegt HINTER der Liste, Grid, ...*/
  font: var(--font-large);
  opacity: 0.25;
  pointer-events: none;
}

.jml_formTiles .jmlListBody .nodatafound:last-child {
  margin-bottom: 0;
}

  /* Sortierlinks in Spaltenueberschriften */

table.listbody .jmlColumnCaptions,
table.listbody .jmlColumnCaptions a,
table.listbody .jmlColumnCaptions a:active,
table.listbody .jmlColumnCaptions a:visited,
table.listbody .jmlColumnCaptions label {
  color: inherit;
  text-decoration: none;
  font: var(--font-normal);
  font-weight: var(--font-weight-column-captions, bold);
}

table.listbody .jmlColumnCaptions label {
  background-repeat: no-repeat;
  background-position: center right;
  white-space: nowrap;
}

table.listbody .jmlColumnCaptions label.sort {
  cursor: pointer;
}

table.listbody .jmlColumnCaptions label.sortAsc {
  padding-right: 12px;
  background-image: url(ascending.svg);
  font-weight: bold;
}

table.listbody .jmlColumnCaptions label.sortDesc {
  padding-right: 12px;
  background-image: url(descending.svg);
  font-weight: bold;
}

form.jml_formList table.listbody .jmlColumnCaptions tr:last-child th.rowSelectorCell,
div.jmlListBody table.listbody .jmlColumnCaptions tr:last-child th.rowSelectorCell {
  border-bottom: var(--color-toolbar-back);
}


/* Abgrenzung des Headers zum Payload */
.tundra .jml_formDialog div.dijitTitlePaneTitle,
.tundra .jml_formList div.dijitTitlePaneTitle,
.relationBoxAdder
{
  border-top: 1px solid var(--color-default-border);
}


/* Trenner und Grouping*/

table.listbody td.trenner.grouped,
table.listbody th.trenner,
table.listbody th.groupheader,
table.listbody tr.bmlf_sumrow {
  color: var(--color-main-header);
}


/** Trenner, die nicht zu einer Gruppe gehoeren */

/** Gruppe, Trenner der Gruppe und Fusszeile*/

body.debugmode table.listbody td.trenner.grouped,
body.debugmode table.listbody th.trenner.grouped{
  background: red;
}

table.listbody td.grouped,
table.listbody th.grouped{
  background-color: var(--color-table-group);
}

table.listbody th.groupheader.active {
  border-top: 2px solid var(--color-table-separator);
  font: var(--font-small);
}
table.listbody th.groupheader.group-start  { border-top-left-radius: 12px;}
table.listbody th.groupheader.group-end    { border-top-right-radius: 12px;}
table.listbody th.groupheader.switch-start { border-top-left-radius: 4px;}
table.listbody th.groupheader.switch-end   { border-top-right-radius: 4px;}

table.listbody th.group-start,
table.listbody td.l.group-start{
  border-left: 2px solid var(--color-table-separator);
  padding-left: var(--width-componentspacing);
}

table.listbody th.switch-start,
table.listbody td.l.switch-start{
  border-left: 1px solid var(--color-table-separator);
  padding-left: var(--width-componentspacing);
}

table.listbody th.group-end,
table.listbody td.l.group-end{
  border-right: 2px solid var(--color-table-separator);
  padding-right: var(--width-componentspacing);
}

table.listbody th.switch-end,
table.listbody td.l.switch-end{
  border-right: 1px solid var(--color-table-separator);
  padding-right: var(--width-componentspacing);
}

table.listbody th.groupheader {
  border-bottom: none;
  padding:1px;
  font: var(--font-normal);
  font-weight: var(--font-weight-column-captions, bold);
}

table.listbody tr.bmlf_sumrow {
  white-space: nowrap;
  background-color: var(--color-table-back);
  font-weight: bold;
}

table.bmlf_calendar .clickable > .bmlf_onDateClickcatcher:hover {
  background: var(--color-default-hover);
  cursor: pointer;
}

table.bmlf_calendar .disabled > .bmlf_dndCatcher {
  /* hier wäre ein onclick, der ist aber denied*/
  background-color: var(--color-tint-contrast-0125);
}


.bmlf_calendar th.today span ,
.bmlf_calendar tr.bmlf_calendarTeam.today td.bmlf_calendarDateHeader span {
  background: var(--color-primary);
  outline: 1px var(--color-primary);
  color:var(--color-primary-contrast);
  width: 90%;
  padding: 0 4px;
  margin: auto;
  border-radius: 10px;
}

.bmlf_calendar th.bmlf_calendarDayInMonth.today span {
  width: auto;
  padding-left: 8px;
  padding-right: 8px;
}

.bmlf_calendar th.bmlf_teamDay:hover,
.bmlf_calendar th.bmlf_teamDay:hover span {
  background: #FFD690;
  /* Old browsers */
}

.bmlf_calendar td.bmlf_calendarday {
  background-image: url(../css/embed/base_calday.png);
  /*alter Farbcode:  #D9ECFF*/
}

.bmlf_calendar tr.bmlf_calendarDayInMonth td.weekend .bmlf_onDateClickcatcher:hover {
  background: #ffdc80;
  /* Old browsers */
  cursor: pointer;
  color: #000;
  font-weight: normal;
}
.pf_formNavigationList .jmlListBody {
  padding: 0;
  overflow: visible;
}
.pf_formNavigationList .jmlTableRows>tr:first-child>td.l,
.pf_formNavigationList .jmlTableRows>tr:last-child>td.l,
div.box .boxsegmentcontent .jmlTableRows>tr:first-child>td.l,
div.box .boxsegmentcontent .jmlTableRows>tr:last-child>td.l,
.boxsegment .jml_formDialog .dijitContentPane.jml_dialogTbodyStandard,
.dijitTooltipContainer .jml_formDialog .dijitContentPane.jml_dialogTbodyStandard,
.boxsegmentcontent .jml_dialogTbodyStandard {
  box-shadow: none;
}

.viewFrame,
div.tmplControlBar,
fp-expander.tmplControlBar.dialogFilterGroup,
div.bigpreshow,
div.boxarea div.box {
  box-shadow: var(--shadow-cards);
}

div.boxarea div.box {
  background-color: transparent;
}

div.boxarea div.box div.tmplControlBar,
div.boxarea div.box .viewFrame {
  box-shadow: none;
}

.bmlf_calendarDateHeader .bmlf-cal-day {
  border-bottom: 1px solid var(--color-default-border);
}

form.jml_formList tbody.jmlTableRows .ce_error {
  background-color: var(--color-tint-red);
}

form.jml_formList td.rowSelectorCell a img.on,
div.jml_formList td.rowSelectorCell a img.on {
  margin-left: 2px;
  /*height:24px;
  width:24px;*/
}

.jml_formTiles .jml-tile.selectmeDisabled .tile-click,
table.listbody tr.selectmeDisabled {
  cursor: not-allowed;
  background: rgba(238, 238, 238, 0.52);
  /* Old browsers */
  background: linear-gradient(to bottom, rgba(240, 240, 240, 0.5) 0%, rgba(220, 220, 220, 0.5) 100%);
  /* W3C */
  color: #666;
  filter: grayscale(90%);
}

.jml_formTiles .jml-tile.selectmeDisabled,
table.listbody tr.selectmeDisabled img {
  filter: grayscale(50%);
  box-shadow: none;
}

.jml_formTiles .jml-tile.selected .tile-click,
.bmlf_calendar div.bmlf_calendarEntry.selected,
.bmlf_calendar div.bmlf_calendarBigEntry.selected,
table.listbody tr.selectme.selected {
  background-color: var(--color-selected-item);
}

.jml_formTiles .jml-tile.selectme:hover .tile-click,
.bmlf_calendar div.bmlf_calendarBigEntry.selectme:hover,
.bmlf_calendar div.bmlf_calendarEntry.selectme:hover,
table.listbody tr.selectme:hover {
  cursor: pointer;
  background-color: var(--color-selected-item-hover);
}

td.l.nopaddingright {
  text-align: right;
}

.jmlListBody table.listbody .jmlTableRows td.l.nopadding,
.jmlListBody table.listbody .jmlTableRows td.l.nopaddingright {
  padding: 0;
  /* no means NO. Nothing. Zero */
}

div.jmlListBody table.listbody .jmlTableRows td.l.rowSelectorCell {
  width: 16px;
}

div.jmlListBody table.listbody .jmlTableRows td.l.ganttchart {
  padding: 0 5px;
  overflow: hidden;
  text-align: center;
}

div.jmlListBody table.listbody .jmlColumnCaptions th.ganttchart {
  padding: 8px 5px 0 5px;
  overflow: hidden;
  text-align: center;
}

div.jmlListBody table.listbody .jmlColumnCaptions .ganttchart .chartheaderbox {
  height: 24px;
  padding-top: 4px;
}


div.jmlListBody table.listbody .jmlTableRows td.l.ganttchart .chartbox {
  height: 64px;
  margin-top: -6px;
  margin-bottom: -6px;
}

div.jmlListBody table.listbody .jmlTableRows td.l.ganttchart .chartheaderbox {
  height: 40px;
  /* Damit sich die grossen und kleinen Meilensteine nicht ber�hren*/
}

div.jmlListBody table.listbody .jmlTableRows td.trenner,
div.jmlListBody table.listbody .jmlTableRows th.trenner {
  padding: 1px;
  text-align: center;
}

div.jmlListBody table.listbody .jmlTableRows tr.ce_deleted td>span:not(.jmlActionIcon) {
  opacity: 0.5;
  text-decoration: line-through;
}

div.jmlListBody table.listbody .jmlListheader th.groupheader,
div.jmlListBody table.listbody .jmlColumnCaptions th.groupheader{
  padding: 4px;
  text-align: center;
}

.summary-page-header > tr > td{
  padding: 0 var(--width-componentpadding, 4px);
}

div.jmlListBody table.listbody td.spacer {
  padding: 10px 0 2px 0;
}

.tundra td.spacer .jmlTableSpaceCaption>h1,
.tundra td.spacer .jml_formDialog div.dijitTitlePaneTitle h1 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.tundra td.spacer .jmlTableSpaceCaption .valuefield,
.tundra td.spacer .jml_formDialog div.dijitTitlePaneTitle .valuefield {
  padding-left: 20px !important;
}

.jmlTableSpacer .jmlTableSpaceCaption {
  line-height: 20px;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  margin: 2px 15px;
}

.jmlTableSpacer .jmlTableSpaceCaption .jmlAction img {
  height: 24px;
  width: 24px;
}

td.spacer .repActDetListHead {
  padding: 2px 15px 5px;
  font: var(--font-normal);
}

td.spacer .clusterHead {
  font: var(--font-normal);
}

td.spacer .clusterHead:last-child {
  padding-bottom: 16px;
}

td.spacer .repActDetListHeadSub {
  padding: 2px 0 5px 30px;
}

td.spacer .repActDetListHead h2 {
  margin: 2px 0 2px 0;
  padding-left: 40px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 32px;
}

td.spacer .clusterHead h2 {
  margin: 2px 0 2px 0;
  padding-left: 36px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 24px;
}

td.spacer .repActDetListHead h2 span {
  float: right;
  font: var(--font-normal);
}

td.spacer .clusterHead div.clusterHeadRight {
  float: right;
}

td.spacer .clusterHeadMain h2 div.clusterHeadRight {
  font: var(--font-medium);
}

td.spacer .clusterHeadSub h2 div.clusterHeadRight {
  margin-bottom: 10px;
}

td.spacer .clusterHeadMain h2 {
  font: var(--font-large);
}

td.spacer .clusterHeadMain h2.planItem {
  line-height: 33px;
}

td.spacer .clusterHeadSub h2 {
  font: var(--font-medium);
}

div.clusterHead div.entityTitle {
  display: flex;
  flex-direction: row;
}

div.clusterHead span.entityTitleImage img {
  width: 18px;
  height: 18px;
}

div.clusterHead td:last-child {
  text-align: right;
  padding: 0 2px 0 8px;
}

div.clusterHead td:first-child {
  text-align: left;
  padding-right: 8px;
}

div.clusterHead td,
div.clusterHead h1.entityTitleLabel {
  font-size: 12px !important;
  line-height: 18px;
  /*margin-bottom: 0 !important;*/
  margin: 0 0 0 4px;
  /*justify-content: center;*/
  /*display: flex;*/
}

div.clusterHead tr:not(.current),
div.clusterHead tr:not(.current).current h1.entityTitleLabel {
  opacity: 0.8;
}

.planItem_general {
  background-image: url(../entity/expenseplanitem.svg);
}

.planItem_car {
  background-image: url(../entity/expenseplanitem_car.svg);
}

.planItem_carrent {
  background-image: url(../entity/expenseplanitem_carrent.svg);
}

.planItem_flight {
  background-image: url(../entity/expenseplanitem_flight.svg);
}

.planItem_hotel {
  background-image: url(../entity/expenseplanitem_hotel.svg);
}

.planItem_train {
  background-image: url(../entity/expenseplanitem_train.svg);
}

td.spacer .mainproject h2 {
  font-size: 22px;
  background-image: url(../entity/project_blue_structure.svg);
}

td.spacer .subproject h2 {
  font-size: 16px;
  background-image: url(../entity/project_sub.svg);
}

td.spacer .repActDetListHead .descriptionfield,
td.spacer .repActDetListHead .valuefield {
  text-align: right;
}

td.spacer .repActDetListHead .descriptionfield {
  text-align: right;
}

form.jml_formList table.listbody thead.jmlColumnCaptions th,
form.jml_formList table.listbody tbody.jmlColumnCaptions td,
div.jmlListBody table.listbody thead.jmlColumnCaptions th,
div.jmlListBody table.listbody tbody.jmlColumnCaptions td,
table.listbody .bmlf_sumrow td.trenner {
  border: none;
}


/* Listen und Dialogtitel */

.tundra .jml_formDialog div.jml_dialogTbodyHeaderOverlay {
  height: 0;
  position: relative;
  text-align: right;
  overflow: visible;
}

.tundra .jml_formDialog div.jml_dialogTbodyHeaderOverlay>div {
  height: 40px;
  font-style: normal;
  font-weight: 300;
  font-size: 21px;
  color: #666;
  display: inline-block;
  margin: 0 8px 0 8px;
  line-height: 40px;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 50%;
  overflow: hidden;
  cursor: default;
}

.tundra .jml_formDialog div.jml_dialogTbodyHeaderOverlay>div img {
  vertical-align: middle;
  /* height:24px; <- nicht gut. trifft zu viele elemente*/
  width: auto;
}

.tundra .jml_formDialog div.jml_dialogTbodyHeaderOverlay>div img.imgDialogHeader {
  margin: 5px 0 0 5px;
}

table.jmlListheader,
table.jmlDialogheader {
  table-layout: fixed;
  width: 100%;
}

div.jmlListheadertitle,
div.jmlDialogheadertitle,
th.jmlListheader,
.tundra div.boxarea div.box_dialog div.box_header {
  line-height: 40px;
  font: var(--font-header);
}

.bmlf_calendarDateHeader,
.bmlf_calendar tr.bmlf_calendarDateSubHeader th,
table.listbody th.jmlListheader {
  background: var(--color-card-background);
  color: var(--color-card-font);
}
table.listbody th.jmlListheader {
  border-bottom: 0 none;
  text-align: left;
  padding: 10px 15px;
  font: var(--font-large);
}

table.bmdf_dialogHeader {
  width: 100%;
}

div.jmlListheadertitle,
div.jmlDialogheadertitle{
  padding: 8px 0 2px 0;
  margin-bottom: var(--form-padding);
  border-bottom: 2px solid var(--color-primary);
  /*text-decoration: underline;*/
  /*text-decoration-color: var(--color-primary);*/
}

.tundra .jml_formDialog div.dijitTitlePaneTitle,
.tundra .jml_formList div.dijitTitlePaneTitle,
.tundra .jml_formList div.dijitTitlePaneTitle {
  border: 0 none;
  font-size: 21px;
  min-height: 29px;
  line-height: 28px;
  padding: 5px 10px 5px 10px;
  margin: 0;
  font-style: normal;
  font-weight: 300;
}

.tundra .jml_formDialog div.dijitTitlePaneTitleHover,
.tundra .jml_formList div.dijitTitlePaneTitleHover {
  background-color: #EEE;
}

.dijitTitlePaneTextNode {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

form.jml_formList table.listbody .last,
div.jmlListBody table.listbody .last {
  padding-right: 15px!important;
}

table.listbody {
  border-spacing: 0;
  border-collapse: separate;
  empty-cells: show;
  width: 100%;
  font: var(--font-normal);
}

table.listbody td.l,
table.listbody th {
  padding: 6px 2px; /* horizontales padding nur als minimalwert falls der bildschirm mal zu klein für die Tabelle ist*/
}

fp-async-list > .item,
table.listbody td.l,
table.listbody th {
  border-bottom: solid var(--width-tr-border, 1px) var(--color-default-border);
}


table.component-padding >tbody>tr>td:first-child,
table.component-padding >tr>td:first-child,
table.listbody td.l:first-child,
table.listbody th:first-child,
.pf_formNavigationList table.listbody th:first-child,
.pf_formNavigationList table.listbody td.l:first-child{
  padding-left: var(--width-componentpadding);
}

table.component-padding >tbody>tr>td:last-child,
table.component-padding >tr>td:last-child,
table.listbody td.l:last-child,
table.listbody th:last-child,
.pf_formNavigationList table.listbody th:last-child,
.pf_formNavigationList table.listbody td.l:last-child{
  padding-right: var(--width-componentpadding);
}

table.listbody td.l.nobr {
  white-space: nowrap;
}

table.listbody td.ignoreclick {
  cursor: default;
}

/* Ausnahmen Listenzelle*/

table.listbody td.iavis {
  padding-left: 3px;
  padding-right: 0;
  white-space: nowrap;
  text-align: right;
}

table.listbody td.iahid {
  padding-left: 0;
  padding-right: 2px;
  white-space: nowrap;
  text-align: right;
}

table.listbody td.iaall {
  padding-left: 2px;
  padding-right: 1px;
  white-space: nowrap;
}

table.listbody td.jmlMiCol {
  text-align: center;
}

.mi-selectall-button,
.mi-selection-status {
  margin: 0;
  padding: 0;
  border: 0;
  display: inline-block;
  height: 16px;
  width: 16px;
  font-size: 12px;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: transform 250ms;
  transform: rotateY(180deg);
  cursor: pointer;
}

.mi-selectall-button::after,
.mi-selection-status::after {
  display: inline-block;
  content: '✓';
  color: #666;
  opacity: 0;
  transition: opacity 0ms;
  transition-delay: 100ms;
}

th:hover .mi-selectall-button,
.selected .mi-selection-status {
  transform: rotateY(0deg);
}

th:hover .mi-selectall-button::after,
.selected .mi-selection-status::after {
  opacity: 1;
}

.jml-tile .mi-selection-status {
  margin-top: 2px;
  height: 20px;
  width: 20px;
  font-size: 15px;
}

.listarea td.nbsp {
  white-space: nowrap;
  padding-top: 0;
  padding-left: 2px;
  padding-right: 2px;
}

table.listbody td.l.separator,
table.listbody th.separator{
  padding: 0;
  width:0;
  border-right: 2px solid var(--color-shade-4);
}
table.listbody td.treestructure {
  padding: 0 1px;
}

table.listbody td.treestructureroot,
table.listbody td.treestructurenode,
table.listbody td.treestructurechild,
table.listbody td.treestructureempty,
table.listbody td.treestructurelastChild,
table.listbody td.treestructureline,
table.listbody td.treestructureleaf,
table.listbody td.treestructureorphanleaf,
table.listbody td.treestructureorphannode,
table.listbody td.treestructurecaption {
  border-left: 0 none;
  border-right: 0 none;
}

tr.mailunread {
  font-weight: bold;
}


/*Listen-NAVIGATION*/

table.navigator {
  border: 0 none;
  width: 100%;
  padding: 5px 0;
  font: var(--font-small);
  line-height: 24px;
  height: 24px;
}

table.navigator td {
  padding: 6px var(--width-componentpadding) 0 var(--width-componentpadding);
}

table.navigator td:first-child {
  width: 30%;
}

table.navigator td:last-child {
  width: 40%;
}

table.navigator .pageswitcher {
  text-align: left;
}

table.navigator .totalsize {
  text-align: center;
}

table.navigator .pagesizeswitcher {
  text-align: right;
}

a.nav {
  display: inline-block;
  cursor: pointer;
}

a.nav:hover {
  font-weight: bold;
}

a.nav.aktuell {
  font-weight: bold;
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
  min-width: 16px; /* so Breit wie Hoch */
  height: 16px; /* so Breit wie Hoch */
  line-height: 16px;
  text-align: center;
  border-radius: 8px;
}


/* DialogBody als QuickCreate*/

.quickCreate .jml_formDialog,
.subdialog .jml_formDialog {
  border: 0 none;
  background-color: transparent;
  padding: 0 0 0 0;
}


/* Dialog "dickes" label */

.dialog td.label.areaheader {
  font-weight: bold;
  text-align: left;
  font-size: 13px;
}


/* Dialog "dickes" label */

.dialog td.label.areaheaderbig {
  font-weight: bold;
  text-align: left;
  font-size: 14px;
  padding-top: 20px;
}

.dialog tr:first-child td.label.areaheaderbig {
  padding-top: 8px;
}


/*
  ------------------------------ Listenansicht "Kalender" ------------------
*/

.subPixelCursor {
  position: absolute;
  top: 0;
  border: 1px solid green;
  width: 100%;
  text-align: center;
  z-index: 10000;
  font-size: 20px;
  line-height: 24px;
  overflow: hidden;
  font-weight: bold;
}

.bmlf_calendar .subPixelCursor {
  border-width: 3px 0 0 0;
  width: 100%;
  padding-right: 60px;
  left: auto;
  right: 0;
  text-align: left;
}

.bmlf_calendar .subPixelCursor label {}

.bmlf_calendar td.bmlf_calcontroller,
.bmlf_calendar th.bmlf_calcontroller {
  white-space: normal;
  text-align: center;
}

.bmlf_calendar .calcontroller {
  vertical-align: top;
  padding: 4px 0 2px 0;
  text-align: right;
  white-space: nowrap;
}
.bmlf_month-nav {
  display: flex;
  align-items: center;
  padding-left: var(--width-componentspacing);
  font: var(--font-large);
}

.bmlf_month-nav > div.header{
  text-align: center;
  width: 100%;
}

.bmlf_calendar .calcontroller button {
  margin:1px;
  padding-left: 4px;
  padding-right: 4px;
}
.bmlf_calendar .bmlf_calcontroller .calcontroller {
  display: inline-block;
  padding: 4px 2px 2px 2px;
}

.bmlf_calendarWholeDay .bmlf_upperleft {
  vertical-align: top;
  text-align: center;
}

.bmlf_calendar .bmlf_calendarDateNav .calcontroller {
  display: flex;
}


.bmlf_calendar .bmlf_calendarDateNav .calcontroller button {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bmlf_calendar .bmlf_calendarDateNav .calcontroller button.range-start {
  flex-basis: content;
}

.bmlf_calendar .bmlf_calendarDateNav .calcontroller button.range-start::after {
  content: ' ›'
}


.bmlf_calendar .bmlf_calendarDateNav .calcontroller button:last-child {
  flex: 1;
}

.calcontroller button fp-inline-svg {
  height: 18px;
  width: 18px;
}

.bmlf_calendar .calcontroller-viewmode {
  width: 52px;
}

.bmlf_calendar table.bmlf_calendar {
  /*border-spacing: 1px;*/
  table-layout: fixed;
  border-bottom: 1px solid #EEE;
  width: 100%;
  /* Damit die Spalten gleich groß sind*/
}

.dj_trident table.bmlf_calendar {
  max-width: 80vw;
  /* hallo ie11 */
}

.bmlf_calendar div.timeScrollerDummy table.bmlf_calendar {
  border-bottom: 0;
}

.bmlf_calendar table.bmlf_calendarhour {}

.bmlf_calendar div.timeScrollerDummy {
  overflow-y: scroll;
  overflow-x: hidden;
  flex-shrink: 0;
}

.bmlf_calendar div.scrolldummy {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 20px;
  float: right;
}

.bmlf_calendar div.timeScroller {
  height: 500px;
  overflow: scroll;
  overflow-y: scroll;
  overflow-x: hidden;
  position: relative;
  /* Damit die Termine im ie7 mitscrollen */
  border-bottom: 1px solid #ccc;
}

.bmlf_calendar col.bmlf_calendarhour.left {
  width: 64px;
}

.bmlf_calendar col.bmlf_calendarhour.left1 {
  width: 20px;
}

.bmlf_calendar col.bmlf_calendarhour.left2 {
  width: 36px;
  vertical-align: middle;
}

.bmlf_calendar .bmlf_calendarhour.left1 .calcontroller,
.bmlf_calendar .bmlf_calendarhour.left2 .calcontroller {
  height: 100%;
  padding: 0 1px 1px 0;
  white-space: normal;
  text-align: left;
}

.bmlf_calendar .bmlf_calendarhour.left1 .calcontroller button {
  white-space: normal;
  height: 40px;
  margin-top: 16px;
  width: 22px;
}

.bmlf_calendar .bmlf_calendarhour.left2 .calcontroller button {
  white-space: normal;
  height: 100%;
  min-height: 56px;
  /* firefox */
  width: 22px;
}

.bmlf_calendar .bmlf_calendarhour.left1 .calcontroller button img,
.bmlf_calendar .bmlf_calendarhour.left2 .calcontroller button label {
  transform: rotate(-90deg);
  display: inline-block;
  margin-left: -20px;
  margin-right: -20px;
  cursor: inherit;
}

.bmlf_calendar col.bmlf_calendernav {
  width: 26px;
}

.bmlf_calendar div.bmlf_calendarhour {
  height: 64px;
  line-height: 18px;
  padding: 0 10px 0 0;
  text-align: right;
  display: inline-block;
  width: 45px;
  color: #999;
  font-weight: bold;
}

.bmlf_calendar div.bmlf_calendarhour:last-child {
  height: 61px;
  /*pf 4.x: 37px; */
}

.bmlf_calendar tr.bmlf_calendarDateHeader th.bmlf-cal-day,
.bmlf_calendar tr.bmlf_calendarDateHeader th.bmlf_calendarDateNav {
  height: 22px;
  padding-right: 0;
  white-space: nowrap;
}

col.bmlf_calendarhour {
  min-width: 40px;
}

td.bmlf_calendarDateHeader {
  min-width: 40px;
  text-align: right;
  padding-right: 8px;
}

.bmlf_calendar tr.bmlf_calendarDateSubHeader th {
  height: 18px;
  line-height: 14px;
  padding-left: 5px;
  padding-right: 0;
  white-space: nowrap;
}

.bmlf_calendar tr.bmlf_calendarday td.bmlf_calendarhour {
  padding: 0;
  text-align: right;
}

.bmlf_calendar tr.bmlf_calendarDateSubHeader th.bmlf_calendarhour {
  padding: 0;
}

.bmlf_calendar .bmlf_calendarDateSubHeader th.bmlf_calendarDayInMonth {
  padding-top: 3px;
  padding-left: 0;
  vertical-align: bottom;
  line-height: 12px;
  font-size: 10px;
  text-align: left;
}

.bmlf_calendar .bmlf_calendarDateSubHeader th.bmlf_calendarDayInMonth.daterow0 {
  border-top: 0 none;
  padding-top: 0;
}

.bmlf_calendar td.bmlf_calendarDayInMonth {
  padding: 1px 0 4px 0;
  height: 80px;
  vertical-align: top;
  position: relative;
}

.bmlf_calendar td.bmlf_teamDay.bmlf_dateAnchor {
    padding: 0;
    height: 32px; /* platz für 2 Termine */
    padding-bottom: 16px; /* Platz für noch einen Termin */
    vertical-align: top;
    border-top: 1px solid #DDD;
  }
  .bmlf_calendar_team_rotated td.bmlf_teamDay.bmlf_dateAnchor {
    padding-top:1px;
  }

  .bmlf_calendar .bmlf_calendarParticipant .wpic{
    overflow: hidden;
  }

  .bmlf_calendar td.bmlf_calendarday {
    height: 1533px;
    margin: 0;
    /*padding: 0;*/
    padding: 0 1px 0 0;
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.125);
  }

  .bmlf_calendar td.bmlf-cal-day {
    /*border-left: 1px solid #DDD;*/
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.125);
  }

  .bmlf_calendar th.bmlf_calcontroller {
    overflow: hidden;
    vertical-align: top;
  }

  th.bmlf_calcontroller.calcontrollerRotated {
    width: 125px;
  }

  th.bmlf_calcontroller.calcontrollerRotated .listcontrol.calcontrollerRotated{
    display: flex;
    justify-content: flex-end;
  }
  .bmlf_calendar .bmlf_calendarDateHeader th,
  th.bmlf_calendarDayInMonth {
    text-align: center;
    vertical-align: middle;
  }

  .bmlf_calendar .bmlf_calendarDateHeader th.rc,
  .bmlf_calendar .bmlf_calendarDateHeader th.lc {
    vertical-align: bottom; /* die Spaltenüberschriften sind unten ausgerichtet (da steckt oft ein rowspan drin) */
    padding-bottom: 5px;
    overflow: hidden;
  }

  .bmlf_calendar th:hover {
    overflow: visible !important;
  }

  .bmlf_calendar th>span:first-child {
    /*position:absolute;*/
    /*margin-top:-11px;*/
    padding-left: 4px;
    margin-left: 0;
    display: inline-block;
    line-height: 22px;
  }

  .bmlf_calendar th:hover span {
    position: relative;
  }

  .bmlf_calendar .today {
    font-weight: bold;
  }

  .bmlf_calendar td.bmlf_dateAnchor {
    position: relative;
    width: 100%;
    min-height: 80px;
    padding-bottom: 26px;
  }

  .bmlf_calendar tr.bmlf_calendarWholeDay .bmlf_dateAnchor {
    min-height: 0;
    padding: 0;
  }

  .bmlf_calendar td.bmlf_dateAnchor {
    /*border-left: 1px solid #CCC;*/
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.125);
  }

  .bmlf_calendar div.bmlf_dndCatcher,
  .bmlf_calendar div.bmlf_onDateClickcatcher {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /*z-index: 1;*/
  }

  .bmlf_calendar td.bmlf-cal-day {
    position: relative;
    vertical-align: top;
    padding: 0;
    padding-bottom: 16px;
  }

  .bmlf_calendar .bmlf_calendarWholeDay td.bmlf-cal-day {
    padding-top: 2px;
  }

  .bmlf_calendar .bmlf_calendarhour td.bmlf-cal-day {
    padding-bottom: 0;
  }

  .bmlf_calendar div.bmlf-cal-day {
    /* Bezugsdiv fuer die tagesuebergreifenden Termine */
    position: relative;
    height: 16px;
    width: calc(100%);
    left: 0;
    z-index: 2;
  }

  .bmlf_calendar div.bmlf_calendarDay {
    /* Bezugsdiv fuer die einzelnen Termine */
    height: 100%;
    position: relative;
    width: 100%;
    box-sizing: border-box;
  }

  .bmlf_calendar .today div.bmlf_onDateClickcatcher,
  .bmlf_calendar .today div.bmlf_calendarDay {
    box-shadow: 0 0 6px rgba(0,0,0,0.25);
    border-left: 1px solid var(--color-primary);
    border-right: 1px solid var(--color-primary);
  }
  .bmlf_calendar_team_rotated .today div.bmlf_onDateClickcatcher {
    border-top: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    border-left: 0 none;
    border-right: 0 none;
    box-shadow: none;
  }

  .bmlf_calendarWholeDay .today:not(.bmlf_teamDay) div.bmlf_onDateClickcatcher,
  .bmlf_calendarDayInMonth .today div.bmlf_onDateClickcatcher{
    border-top: 1px solid var(--color-primary);
  }

  .bmlf_calendarWholeDay tr.bmlf_calendarTeam .today.bmlf_teamDay div.bmlf_onDateClickcatcher{
    box-shadow: none;
  }
  .bmlf_calendar_team_rotated tr.bmlf_calendarTeam .today.bmlf_teamDay div.bmlf_onDateClickcatcher{
    box-shadow: 0 3px 2px -1px rgba(0,0,0,0.25);
  }

  .bmlf_calendarDayInMonth  .today div.bmlf_onDateClickcatcher,
  .bmlf_calendar .today div.bmlf_calendarDay {
    border-bottom: 1px solid var(--color-primary);
  }

  .hiddenEventHandle {
    display: inline-block;
    /*border:1px solid #ccc;*/
    width: 20px;
    height: 20px;
    margin: 2px;
    border-radius: 50%;
    background-color: black;
    position: absolute;
    /*display: none;*/
    cursor: pointer;
    z-index: 50;
    transform: scale(0);
    transition: transform 1s;
  }

  .hiddenEventHandleActiveTop,
  .hiddenEventHandleActiveBottom {
    display: inline-block;
    box-shadow: 1px 1px 3px #666;
    transform: scale(1);
    transition: transform 0.25s;
  }

  .hiddenEventHandle span.arrow {
    display: inline-block;
    margin: 2px;
    height: 16px;
    width: 16px;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(hiddenEventHandleNeutral.svg);
  }

  .hiddenEventHandleActiveTop span.arrow {
    background-image: url(hiddenEventHandleTop.svg);
  }

  .hiddenEventHandleActiveBottom span.arrow {
    background-image: url(hiddenEventHandleBottom.svg);
  }

  .tundra .bmlf_calendar .bmlf_calendarTeam .cap-summary {
    border-top: 5px solid var(--color-primary);
  }

  .tundra .bmlf_calendar .bmlf_calendarTeam .cap-relday {
    border-left: 5px solid var(--color-primary);
  }

  .tundra .bmlf_calendar .bmlf_calendarTeam .cap-free {
    background-color: var(--color-worker-cap-free);
  }

  .tundra .bmlf_calendar .bmlf_calendarTeam .cap-error {
    background-color: var(--color-worker-cap-error);
  }

  .tundra .bmlf_calendar .bmlf_calendarTeam .cap-time {
    background-color: var(--color-worker-cap-time);
  }

  .bmlf_calendar {
    --entry-title-height: 16px;
  }

  /* gross und klein*/

  .bmlf_calendar div.bmlf_calendarBigEntry,
  .bmlf_calendar div.bmlf_calendarEntry {
    padding: 0;
    box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.4);
    border-radius: 2px;
    overflow: hidden;
    position: absolute;
    transition: all 0.25s ease-in-out;
  }

  .bmlf_calendar div.bmlf_calendarBigEntry.tile-being-dragged,
  .bmlf_calendar div.bmlf_calendarEntry.tile-being-dragged {
    transform: rotateZ(2deg);
  }

  .bmlf_calendar div.bmlf_calendarEntry {
    /*overflow :hidden;*/
    cursor: default;
    background-color: var(--color-shade-none);
    /*background-image: linear-gradient(to bottom right, rgba(0,128,255, 0.02) 0%, rgba(255,128,0, 0.03)  100%);*/
  }

  .bmlf_calendar div.bmlf_calendarBigEntry[draggable]:hover,
  .bmlf_calendar div.bmlf_calendarEntry:hover {
    z-index: 10;
    box-shadow: 2px 2px 4px #333;
  }

  .bmlf_calendar div.bmlf_calendarEntry.clickable {
    cursor: pointer;
  }

  .bmlf_calendar div.bmlf_calendarEntry.selected,
  .bmlf_calendar div.bmlf_calendarBigEntry.selected {
    z-index: 1000; /* <- nicht zu hoch, dann liegt es über den Notifications*/
    overflow: visible;
    outline: 2px solid var(--color-selected-item-hover);
  }
  .bmlf_calendar div.bmlf_calendarEntry.selected:not(.selectme)::before,
  .bmlf_calendar div.bmlf_calendarBigEntry.selected:not(.selectme)::before {
    content: '';
    position: absolute;
    height: 200vh;
    width: 200vw;
    top: -100vh;
    left: -100vw;
    margin-left: 50%;
    margin-top: 20px;
    background-image: radial-gradient(circle, rgba(0,0,0,0) 80px, rgba(0,0,0,0.25) 100px);
    background-size: cover;
    background-position: center;
    transform: scale(0);
    animation: spotlightFadeOut;
    animation-delay: 0ms;
    animation-duration: 2000ms;
  }

  @keyframes spotlightFadeOut {
    0% {transform: scale(0.1); opacity: 0;  }
    20% {transform: scale(1); opacity: 1;  }
    70% {transform: scale(1); opacity: 1; }
    80% {transform: scale(4); opacity: 0; }
    100% {transform: scale(0); opacity: 0; }
  }

  .bmlf_calendar div.bmlf_calendarBigEntry {
    background-color: var(--color-shade-none);
    border-left: 0;
    height: var(--entry-title-height);
    line-height: var(--entry-title-height);
    padding: 0;
    left: 0;
    width: calc(100% - 1px); /* -1px um gerade so zu shrinken, um den Zellrahmen rechts sichtbar werden zu lassen*/
  }

  .bmlf_calendar .bmlf_cE_content>h1 {
    margin: 0;
    font-size: 11px;
    line-height: calc(var(--entry-title-height) - 1px);
    padding-top: 1px;
    padding-left: 1px;
  }

  .bmlf_calendar div.bmlf_calendarBigEntry .bmlf_cE_content>h1 {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .bmlf_calendar .bmlf_cE_content>h1 img.intextline {
    margin-bottom: -1px;
  }

  .bmlf_calendar div.bmlf_cE_colorbar {
    position: relative;
    width: 14px;
    left: 0;
    background-repeat: no-repeat;
    background-size: 12px 12px;
    background-position: 1px 1px;
    /* Standardwerte bei Terminen die zur vollen/halben Stunde beginnen*/
    top: 0;
    height: 100%;
    overflow: hidden;
  }

  .bmlf_calendar div.bmlf_cE_colorbar fp-inline-svg{
    --icon-size: var(--entry-title-height);
    margin-left: -1px;
    margin-top: -1px;
  }

  .bmlf_calendar div.bmlf_cE_colorbar.light {
    color: #000;
  }
  .bmlf_calendar div.bmlf_cE_colorbar.dark {
    color: #FFF;
  }

  p.bmlf_cE_location,
  p.bmlf_cE_parti {
    margin: 2px 0 0 0;
    padding-left: 12px;
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: left center;
    font-size: 11px;
    line-height: 11px;
    color: var(--color-main-font);
    opacity: 0.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  p.bmlf_cE_location {
    background-image: url(../css/embed/base_ce_location.svg);
  }

  p.bmlf_cE_parti {
    background-image: url(../css/embed/base_ce_participant.svg);
  }

  p.bmlf_cE_fromdate {
    text-align: right;
    padding: 0;
    margin: 0;
  }

  p.bmlf_cE_todate,
  p.bmlf_cE_type {
    padding: 0;
    margin: 0;
    text-align: right;
    height: 11px;
    line-height: 11px;
    font-size: 10px;
    color: #888;
  }

  p.bmlf_cE_type_left {
    padding: 0;
    margin: 0;
    text-align: left;
    height: 11px;
    line-height: 11px;
    font-size: 10px;
    color: #888;
  }

  table.listbody td.trenner,
  table.listbody th.trenner {
    border-bottom: 0 none;
    background-color: var(--color-default-border);
  }

  table.bmlf_calendar td.bmlf_calendarParticipant,
  table.bmlf_calendar td.bmlf_teamDay,
  table.bmlf_calendar td.bmlf_calendarDayInMonth {}

  .bmlf_calendar .bmlf_cE_content p.bmlf_cE_description {
    margin: 2px 0 0 0;
    font: var(--font-small);
    line-height: 11px;
    color: var(--color-main-font);
    opacity: 0.5;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .bmlf_calendar div.ce_error {
    background: var(--color-status-red);
    color: #FFF;
  }

  .bmlf_calendar div.ce_deleted {
    opacity: 0.5;
    background-color: var(--color-shade-2);
    color: var(--color-shade-2-contrast);
  }

  .bmlf_calendar div.ce_deleted h1 {
    text-decoration: line-through;
  }


  .bmlf_calendar div.ce_defaultplan h1 {
    font-weight: 300;
  }


  .bmlf_calendar div.ce_poll div.bmlf_cE_colorbar {
    background-image: url(../css/embed/base_ce_poll.svg);
  }

  .bmlf_calendar div.ce_vacation div.bmlf_cE_colorbar {
    background-image: url(../css/embed/base_ce_vacation.svg);
  }

  .bmlf_calendar div.ce_abs div.bmlf_cE_colorbar {
    background-image: url(../css/embed/base_ce_abs.svg);
  }

  .bmlf_calendar div.ce_sick div.bmlf_cE_colorbar {
    background-image: url(../css/embed/base_ce_sick.svg);
  }

  .bmlf_calendar div.ce_extern div.bmlf_cE_colorbar {
    background-image: url(../css/embed/base_ce_extern.svg);
  }

  .bmlf_calendar div.ce_resource div.bmlf_cE_colorbar {
    background-image: url(../css/embed/base_ce_resource.svg);
  }

  .bmlf_calendar div.ce_meeting div.bmlf_cE_colorbar {
    background-image: url(../css/embed/base_ce_meeting.svg);
  }

  .bmlf_calendar div.ce_series div.bmlf_cE_colorbar {
    background-image: url(../css/embed/base_ce_master.svg);
  }

  .bmlf_calendar div.ce_fix div.bmlf_cE_colorbar {
    background-image: url(../css/embed/base_ce_fix.svg);
  }

  .bmlf_calendar div.ce_capfix div.bmlf_cE_colorbar {
    background-image: url(../css/embed/base_ce_capfix.svg);
  }

  .bmlf_calendar div.ce_capm div.bmlf_cE_colorbar {
    background-image: url(../css/embed/base_ce_capm.svg);
  }

  .bmlf_calendar div.ce_time div.bmlf_cE_colorbar {
    background-image: url(../css/embed/base_ce_time.svg);
  }

  .bmlf_calendar div.ce_cap div.bmlf_cE_colorbar {
    background-image: url(../css/embed/base_ce_cap.svg);
  }

  .bmlf_calendar div.ce_cal div.bmlf_cE_colorbar {
    background-image: url(../css/embed/base_ce_cal.svg);
  }

  .bmlf_calendar div.ce_exception div.bmlf_cE_colorbar {
    background-image: url(../css/embed/base_ce_exception.svg);
  }

  .bmlf_calendar div.ce_exception.ce_deleted div.bmlf_cE_colorbar {
    background-image: url(../css/embed/base_ce_cancelled.svg);
  }

  .bmlf_calendar div.ce_poll div.bmlf_cE_colorbar.dark {
    background-image: url(../css/embed/base_ce_poll_white.svg);
  }

  .bmlf_calendar div.ce_vacation div.bmlf_cE_colorbar.dark {
    background-image: url(../css/embed/base_ce_vacation_white.svg);
  }

  .bmlf_calendar div.ce_abs div.bmlf_cE_colorbar.dark {
    background-image: url(../css/embed/base_ce_abs_white.svg);
  }

  .bmlf_calendar div.ce_sick div.bmlf_cE_colorbar.dark {
    background-image: url(../css/embed/base_ce_sick_white.svg);
  }

  .bmlf_calendar div.ce_extern div.bmlf_cE_colorbar.dark {
    background-image: url(../css/embed/base_ce_extern_white.svg);
  }

  .bmlf_calendar div.ce_resource div.bmlf_cE_colorbar.dark {
    background-image: url(../css/embed/base_ce_resource_white.svg);
  }

  .bmlf_calendar div.ce_meeting div.bmlf_cE_colorbar.dark {
    background-image: url(../css/embed/base_ce_meeting_white.svg);
  }

  .bmlf_calendar div.ce_series div.bmlf_cE_colorbar.dark {
    background-image: url(../css/embed/base_ce_master_white.svg);
  }

  .bmlf_calendar div.ce_fix div.bmlf_cE_colorbar.dark {
    background-image: url(../css/embed/base_ce_fix_white.svg);
  }

  .bmlf_calendar div.ce_capfix div.bmlf_cE_colorbar.dark {
    background-image: url(../css/embed/base_ce_capfix_white.svg);
  }

  .bmlf_calendar div.ce_capm div.bmlf_cE_colorbar.dark {
    background-image: url(../css/embed/base_ce_capm_white.svg);
  }

  .bmlf_calendar div.ce_time div.bmlf_cE_colorbar.dark {
    background-image: url(../css/embed/base_ce_time_white.svg);
  }

  .bmlf_calendar div.ce_cap div.bmlf_cE_colorbar.dark {
    background-image: url(../css/embed/base_ce_cap_white.svg);
  }

  .bmlf_calendar div.ce_cal div.bmlf_cE_colorbar.dark {
    background-image: url(../css/embed/base_ce_cal_white.svg);
  }

  .bmlf_calendar div.ce_exception div.bmlf_cE_colorbar.dark {
    background-image: url(../css/embed/base_ce_exception_white.svg);
  }

  .bmlf_calendar div.ce_exception.ce_deleted div.bmlf_cE_colorbar.dark {
    background-image: url(../css/embed/base_ce_cancelled_white.svg);
  }

  .bmlf_calendar div.bmlf_cE_content {
    left: 14px;
    /* weg von der colorbar */
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
  }
  .bmlf_calendar div.bmlf_cE_content .dark {
    color: #FFF;
  }
  .bmlf_calendar div.bmlf_cE_content .light {
    color: #000;
  }

  .bmlf_calendar div.bmlf_calendarBigEntry div.bmlf_cE_content {
    height: var(--entry-title-height);
  }

  .bmlf_calendar fp-tooltip.event-tooltip{
    min-width: 300px;
    max-width: 300px;
  }

  .bmlf_calendar div.bmlf_calendarActions {
    bottom: -1px;
    position: absolute;
    right: 1px;
    /* weg von der colorbar */
    text-align: right;
  }

  .bmlf_calendar div.bmlf_calendarActions .jmlActionIcon img {
    max-height: 16px;
  }

  .bmlf_calendar img.bmlf_cE_iconRight {
    position: absolute;
    right: 0;
    top: 0;
  }

  .bmlf_calendar img.bmlf_cE_iconLeft {
    left: -3px;
    position: relative;
    top: -3px;
  }

  .bmlf_calendar div.bmlf_vCaptionAnchor {
    /*Dreh und Angelpunkt unserer Rotation*/
    left: 30px;
    top: 480px;
    width: 0;
    height: 0;
    position: relative;
    transform: rotate(90deg);
  }

  .bmlf_calendar div.bmlf_vCurrentTime {
    /*Dreh und Angelpunkt unserer Rotation*/
    position: relative;
    background: var(--color-primary);
    height: 2px;
    margin-top: -1px;
  }

  .bmlf_calendar span.bmlf_vCaption {
    /*zu Rotierendes Element*/
    position: absolute;
    left: -30px;
    top: -30px;
    font-size: 45px;
    line-height: 60px;
    font-weight: bold;
    opacity: 0.10;
    white-space: nowrap;
  }

  .bmlf_calendar div.bmlf_hCaptionAnchor {
    height: 100%;
    width: 100%;
    bottom: 0;
    position: absolute;
    overflow: hidden;
  }

  .bmlf_calendar .bmlf_hCaption {
    font: var(--font-medium);
    font-weight: bold;
    position: absolute;
    color: var(--color-main-font);
    bottom: 0;
    text-align: center;
    width: 100%;
  }

  .bmlf_calenderteamnav-sep {
    width: 6px;
  }


  .bmlf_calendarTeam .bmlf_hCaption,
  .bmlf_calendarTeamRotated .bmlf_hCaption {
    font: var(--font-small);
  }

  .bmlf_calendar tr.bmlf_calendarDateSubHeader th.ltFilter,
  .bmlf_calendar tr.bmlf_calendarDateSubHeader th.gtFilter,
  .bmlf_calendar tr.bmlf_calendarDateSubHeader th.firstGtFilter {
    /*background-color: #e0e0e0 !important;*/
  }

  .bmlf_calendar td.ltFilter::before,
  .bmlf_calendar td.gtFilter::before,
  .bmlf_calendar td.firstGtFilter::before {
    position: absolute;
    content: '';
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(128, 128, 128, 0.33);
  }

  .bmlf_calendar td.bmlf_calendarParticipant {
    border-top: 1px solid #DDD;
    vertical-align: middle;
  }

  .bmlf_calendar td.bmlf_calendarParticipant>img {
    height: 48px;
    width: 48px;
    object-fit: cover;
    border-radius: 50%;
    vertical-align: middle;
  }

  .bmlf_calendar tr.bmlf_calendarDayInMonth td.weekend,
  .bmlf_calendar tr.bmlf_calendarTeam td.weekend,
  .bmlf_calendar tr.bmlf_calendarday td.weekend {
    background-color: var(--color-tint-weekend);
  }

  .bmlf_calendar tr.bmlf_calendarDayInMonth td.weekend_partial,
  .bmlf_calendar tr.bmlf_calendarTeam td.weekend_partial,
  .bmlf_calendar tr.bmlf_calendarday td.weekend_partial {
    background-position: center;
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, var(--color-tint-weekend) 5px, var(--color-tint-weekend) 10px);}

  .bmlf_calendar tr.bmlf_calendarWholeDay td.holiday,
  .bmlf_calendar tr.bmlf_calendarday td.holiday,
  .bmlf_calendar tr.bmlf_calendarTeam td.holiday,
  .bmlf_calendar tr.bmlf_calendarDayInMonth td.holiday {
    background-color: var(--color-tint-holiday);
  }

  .jml_formCalendar > .bmlf_calendar {
    display: flex;
    flex-direction: column;
  }

  .popupPrint .jml_formCalendar > .bmlf_calendar {
    display: block;
  }

  .bmlf_calendar div.timeScroller {
    border-top: 1px solid #CCC;
    flex: 1;
  }

  .bmlf_calendar div.timeScrollerDummy {
    border-bottom: 3px solid var(--color-toolbar-button);
  }


  /* ----------- Ende BaseMetaListForm.Calendar ---------------*/


  /*
    ------------------------------ Boxarea & -segmente -----------------------
  */

  div.boxarea {
    background-color: transparent;
    padding: 0 0 0 0;
    /*width:260px; /* + padding = 260px */
    min-height: 110px;
  }

  .tmplLeftarea .boxarea {
    /*position: relative;*/
    /*z-index: 99;*/
  }

  #jasperHtmlShow.boxarea,
  div#tmplRightarea.boxarea {
    width: auto;
  }

  div.tmplRightarea>div.boxarea {
    padding-left: 16px;
  }

  div.boxarea div.box {
    margin: 0 0 10px 0;
  }

  .tmplLeftarea div.boxarea div.box {
    width: 300px;
    border: 1px solid #e4e4e4;
  }

  div.boxarea div.box:first-child {
    margin-top: 0;
  }

  .tundra div.boxarea div.box .dijitTabContainerTop-tabs,
  div.boxarea div.box div.box_header {
    /*font-family: 'Source Sans Pro', 'Verdana', sans-serif;*/
    /*font-weight: 400;*/
    background: var(--color-toolbar-back);
  }

  .tundra div.boxarea div.box.headless .dijitTabContainerTop-tabs {
    padding-top: 9px;
  }

  div.boxarea div.box div.box_header {
    padding: 0 0 0 13px;
    color: var(--color-toolbar-font);
    font: var(--font-normal);
    height: var(--height-toolbar);
    line-height: 32px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
  }

  div.boxarea div.box div.box_header_clickable:hover {
    cursor: pointer;
  }

  .tundra div.boxarea div.box_dialog div.box_header {
    border: 0;
  }

  div.boxarea {
    /* position: relative; <- verhindert Popups außerhalb der Boxarea! */
    transition: margin 0ms;
    transition-delay: 0ms;
  }

  div.boxarea.switchable > .box {
    transition: transform 250ms ease-in-out;
    /* transform: translateX(0); <- erzeugt einen neuen Stacking-context :( */
  }

  .leftarea-closed div.boxarea.switchable:first-child {
    margin-left: calc(-1 * var(--width-leftarea));
    transition-delay: 0ms;
    overflow-x: hidden;
    overflow-y: hidden;
  }

  .leftarea-closed div.boxarea:first-child >.box{
    position: relative;
    z-index: 1;
    left: var(--width-leftarea);
    transform: translateX(calc(-1 * var(--width-leftarea) - 20px));
  }



  .leftarea-closed div.boxarea.switchable:first-child:hover > .box {
    transform: translateX(calc(-1 * var(--width-leftarea) - 0px));
  }

  .boxareaswitcher {
    cursor: pointer;
    display: block;
    position: absolute;
    z-index: 99;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border: 1px solid var(--color-card-font);
    border-radius: 50%;
    bottom: env(safe-area-inset-bottom, 0);
    font-size: 24px;
    opacity: 0.5;
    margin-left: 0;
    transform: translate3d(8px, -56px, 0);
    background-color: var(--color-card-background);
    transition: transform 200ms;
    /*background-image: radial-gradient(var(--color-main-font) 20%, transparent 21%),*/
    /*radial-gradient(var(--color-main-font) 20%, transparent 21%);*/
    /*background-size: 8px 8px;*/
    /*background-position: 2px 2px, 6px 6px;*/
  }

  .leftarea-closed .boxareaswitcher {
    /*transform: translateX(10px);*/
    opacity: 1;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    box-shadow: 2px 0px 4px rgba(0,0,0,0.25);
    margin-left: auto;
    z-index: 1000;
    background-color: var(--color-primary);
    border-color: transparent;
    color: var(--color-primary-contrast);
    transform: translate3d(0, -56px, 0);
  }

  .boxareaswitcher::after {
    content: '‹';
    display: inline;
  }

  .leftarea-closed > .boxareaswitcher::after {
    content: '›';
  }

  #tmplWorkarea > .boxarea:first-child {height: 100%; }
  #tmplWorkarea > .boxarea:first-child > .box {height: 100%; }
  #tmplWorkarea > .boxarea:first-child > .box > fp-tab-container{height: 100%; overflow: auto; }

  /* --- Boxen --------------------------------- */

  .box.headless .boxsegment.tabbed:not(.dijitTabContainer) {
    padding-top: 32px;
    /* so lange custom nicht fertig ist, reservieren wir Platz für die Tabs*/
  }

  span.boxsegmentcloser {
    text-align: right;
    cursor: pointer;
    float: right;
    display: inline-block;
    width: 20px;
    height: 100%;
    vertical-align: middle;
    background-image: url(closer.svg);
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.25s ease-in-out;
    transform: rotate(0deg);
  }

  .boxsegmentcloseropen span.boxsegmentcloser {
    transform: rotate(90deg);
  }

  div.box .dijitTabContainerTop-tabs {
    border-bottom: 0 none;
  }

  div.box_uploader {
    padding: 5px 1px 3px 1px;
    /* o r u l */
    margin: 0 auto 0 auto;
    color: #000;
    font-size: 11px;
    /*height:200px;*/
  }

  div.box_myday {
    min-width: 280px;
    width: 100% !important;
  }

  div.box .boxsegmentcontent {
    /*border-top:1px solid #CCC;*/
    border-top: 0 none;
    /*box-shadow: inset 0px 2px 0px -1px #CCC;*/
    /*padding-top: 2px;*/
  }

  div.box .boxsegmentcontent > .jmlButton  {
    margin: 4px;
  }

  pf-parent-css-toggle.listheader-switcher > svg,
  pf-parent-css-toggle.listheader-switcher fp-inline-svg{
    height: 24px;
    width: 24px;
    transition: all 300ms;
  }

  pf-list-view.compact .jmlViewcontroller {
    height: 0;
  }

  pf-list-view.compact .jmlViewcontroller .listcontrol {
    transform: scaleY(0);
  }

  pf-list-view.fullscreen {
    position: fixed;
    z-index: 9999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  pf-parent-css-toggle.listheader-switcher > svg .switch,
  pf-parent-css-toggle.listheader-switcher fp-inline-svg .switch,
  button fp-inline-svg .switch,
  pf-parent-css-toggle fp-inline-svg .switch{
    transition: transform 400ms;
    transition-delay: 100ms;
  }


  pf-parent-css-toggle.listheader-switcher.compact > svg .switch-a{ transform: translateX(+2px);}
  pf-parent-css-toggle.listheader-switcher.compact > svg .switch-b{ transform: translateX(-10px);}
  pf-parent-css-toggle.listheader-switcher.compact > svg .switch-c{ transform: translateX(+6px);}
  pf-parent-css-toggle.listheader-switcher.compact fp-inline-svg .switch-a{ transform: translateX(+2px);}
  pf-parent-css-toggle.listheader-switcher.compact fp-inline-svg .switch-b{ transform: translateX(-10px);}
  pf-parent-css-toggle.listheader-switcher.compact fp-inline-svg .switch-c{ transform: translateX(+6px);}

  pf-parent-css-toggle.fullscreen-switcher.fullscreen fp-inline-svg .tdown{ transform: translateY(-4px);}
  pf-parent-css-toggle.fullscreen-switcher.fullscreen fp-inline-svg .tup{ transform: translateY(4px);}
  pf-parent-css-toggle.fullscreen-switcher.fullscreen fp-inline-svg .tleft{ transform: translateX(-4px);}
  pf-parent-css-toggle.fullscreen-switcher.fullscreen fp-inline-svg .tright{ transform: translateX(4px);}

  [fullscreen] fp-inline-svg.fullscreen-switcher  .tdown{ transform: translateY(-4px);}
  [fullscreen] fp-inline-svg.fullscreen-switcher  .tup{ transform: translateY(4px);}
  [fullscreen] fp-inline-svg.fullscreen-switcher  .tleft{ transform: translateX(-4px);}
  [fullscreen] fp-inline-svg.fullscreen-switcher  .tright{ transform: translateX(4px);}

  [minimized] fp-inline-svg.minimized-switcher  .tdown{ transform: translateY(-14px);}
  [minimized] fp-inline-svg.minimized-switcher  .tup{ transform: translateY(16px);}

  .tmplListControlAreaPageContent > table {
    width: 100%;
  }

  .tmplListControlAreaPageContent .boxsegment .boxsegmentcontent {
    padding: 4px 8px;
  }

  div.box.calendarBox .boxsegmentcontent,
  div.box.entityActionBar .boxsegmentcontent {
    border-top: 0 none;
    box-shadow: none;
    padding-top: 0;
  }

  div.box_info .boxsegmentcontent {
    padding: 4px var(--width-componentpadding);
    font: var(--font-normal);
    line-height: 1.2;
    color: var(--color-card-font);
    hyphens: auto;
  }


  /** Eine einfaches Boxsegment um reinen Text anzuzeigen **/

  div.box_hint .boxsegmentcontent {
    padding: 10px 13px;
    font-size: 11px;
    line-height: 15px;
    hyphens: auto;
  }

  div.box_info ul,
  div.box_hint ul,
  ul.serviceElements {
    padding-left: 12px;
    margin-bottom: 0;
    margin-top: 4px;
  }

  ul.serviceElements img {
    max-height: 16px;
    width: auto;
  }

  .jasperdummy {
    cursor: default;
  }

  div.box_hint li {
    line-height: 16px;
    /*padding-left: 2em;*/
    /*text-indent: -2em;*/
  }
  /* In Servicehinweisen lassen wir keinen Umbruch zu, außer wenn das Freie Feld eine Mehrfachauswahl ist, denn
     in diesem Fall gehen wichtige Informationen unter (bei einer Einfachauswahl, kann man von den ersten 40 Zeichen
     schon auf den Rest schließen */
  div.box_hint li:not(.multiple) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }


  div.box_hint li a .jmlImageContainer {
    padding: 1px 0 0 0;
  }

  div.box_hint li a {
    line-height: 20px;
    padding: 4px 0 4px 0;
  }

  div.box_hint li img {
    margin-right: 2px;
  }

  div.box_info .boxsegmentcontent hr {
    border: 0;
    color: #DDD;
    background-color: #DDD;
    height: 1px;
  }

  div.box_info .jmlAction img {
    width: 16px;
    height: 16px;
  }

  div.box_info .boxsegmentcontent code {
    font-size: 11px;
    line-height: 15px;
  }

  div.box_info .boxsegmentcontent h1 {
    margin: 5px 0 3px 0;
    color: var(--color-card-font);
    font: var(--font-medium);
  }

  div.box_info .boxsegmentcontent a:not(.textlink) {
    color: #239;
    text-decoration: underline
  }

  div.box_info .boxsegmentcontent a.vacdetrep img {
    height: 12px;
    width: 12px;
    margin-bottom: 3px;
  }
  div.badbrowserwarn .boxsegmentcontent {
    background-color: #EEDD00;
  }

  div.badbrowseralert .boxsegmentcontent {
    color: #FFF;
    background-color: var(--color-admin-red);
    font-size: 13px;
  }

  div.badbrowseralert .boxsegmentcontent a,
  div.badbrowseralert .boxsegmentcontent a:visited {
    color: #FFF;
  }


  div.boxarea .box > .dijitContentPane,
  .boxsegment > .dijitContentPane
  {
    overflow: visible;
    padding: 0;
  }

  div.boxarea .box .boxsegment {
    background: var(--color-shade-1);
  }

  .preshow-card {
    box-shadow: var(--shadow-cards);
    max-width: 300px;
    min-width: var(--width-leftarea, 200px);
    background-color: var(--color-card-background);
  }

  .preshow-card.clickable:hover {
    background-color: var(--color-default-hover);
    cursor: pointer;
  }

  .preshow-card.page-background,
  div.boxarea .box .boxsegment .page-background {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    /* Damit helle flächen im hintergrund nicht die Lesbarkeit stören
     multiplizieren wir mit einem hellen grau */
    background-color: #CCC;
    background-blend-mode: multiply;
  }

  .preshow-card.page-background > .pf-ps{
    color: #FFF;
    --color-card-font: #FFF;
    --color-main-font: #FFF;
    --color-main-header: #FFF;
    --color-shade-none-contrast: #FFF;
    text-shadow: 0 0 1px rgba(0, 0, 0, 1), 0 0 5px rgba(0, 0, 0, 0.4);
  }

  div.boxarea .box .boxsegment .page-background .page-content {
    color: #FFF;
    text-shadow: 0 0 1px rgba(0, 0, 0, 1), 0 0 5px rgba(0, 0, 0, 0.4);
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5))
  }

  div.boxarea .box.scrollx .dijitContentPane form {
    overflow-x: auto;
  }

  div.rightboxfooterlink {
    text-align: right;
    padding: 5px 0 0;
    background: var(--color-shade-2);
  }

  div.rightboxfooterlink a.rightboxfooterlink {
    color: var(--color-shade-2-contrast);
  }


  /* --- Meine Kollegen heute --------------------------------------------- */

  .mycollegues .pf_formNavigationList table.listbody {
    table-layout: unset;
  }

  .mycollegues .pf_formNavigationList table.listbody td.l {
    height: 28px;
    padding: 6px 0;
    vertical-align: middle;
  }

  .mycollegues .pf_formNavigationList table.listbody td.l:first-child {
    padding: 6px 6px 6px 15px;
  }

  .mycollegues .pf_formNavigationList table.listbody td.l:last-child {
    padding: 6px 15px 6px 6px;
  }


  /* --- Navigationsliste (in Boxareas etwa) --------------------------------------------- */

  .pf_formNavigationList .leven,
  .pf_formNavigationList .lodd {
    background: transparent;
  }

  .pf_formNavigationList tr[onclick]:hover,
  table.listbody tr.LActive,
  .hoverme:hover {
    background: var(--color-default-hover);
  }

  .pf_formNavigationList table.listbody {
    table-layout: fixed;
  }

  .nobrellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pf_formNavigationList table.listbody th,
  .pf_formNavigationList table.listbody td.l {
    height: var(--height-toolbar);
    padding: 1px 4px 1px 4px;
    vertical-align: middle;
  }
  .pf_formNavigationList col.actionColumn {
    width: 20px;
  }
  .pf_formNavigationList table.listbody .jmlTableRows td.treestructure {
    padding: 1px 1px 1px 2px;
  }

  .pf_formNavigationList table.listbody .jmlTableRows td.iaall {
    padding-left: 0;
  }

  .pf_formNavigationList .jmlTableRows {
    border: none;
  }

  .pf_formNavigationList table.listbody td.l {
    border: none;
    box-shadow: none;
  }

  .pf_formNavigationList table.listbody td.smallinputright {
    text-align: right;
    font: var(--font-small);
    white-space: nowrap;
  }

  .pf_formNavigationList .small {
    line-height: 9px;
    font: var(--font-small);
  }

  .pf_formNavigationList td:first-child fp-inline-svg,
  .pf_formNavigationList td:first-child img,
  .pf_formNavigationList .treestructureIcon .treeNodeImage {
    vertical-align: middle;
    --icon-size: 20px;
    height: var(--icon-size);
    width: var(--icon-size);
  }

  .pf_formNavigationList td:first-child fp-inline-svg .jmlImageOverlay{
    --icon-size: 13px;
  }

  .pf_formNavigationList24 td:first-child fp-inline-svg,
  .pf_formNavigationList24 .treestructureIcon .treeNodeImage {
    --icon-size: 24px;
  }

  .pf_formNavigationListBig td:first-child fp-inline-svg,
  .pf_formNavigationListBig .treestructureIcon .treeNodeImage {
    --icon-size: 32px;
  }

  .pf_formNavigationList h1 {
    font-size: 12px;
    font-weight: bold;
    margin: 2px 0 2px 0;
    /*line-height: 10px;*/
  }
  .pf_formNavigationList .listbody col.jmlTreeCol {
    width: 16px;
  }

  .pf_formNavigationList .listbody .jmlTableRows td.l.treestructurecaption {
    padding-left: 16px;
  }


  /* --- Ende Navigationsliste --------------------------------------------- */


  /* --------------- Dialogkomponenten ---------- */

  div.jml_dialogButtons {flex: 1;}

  div.jml_dialogChangeInfo {
    text-align: right;
    font: var(--font-small);
    color: currentColor;
    overflow: visible;
    opacity: 0.75;
    transition: opacity 200ms;
    width: 20px;
  }
  .changeInfoContainer{
    display: flex;
    flex-direction: row-reverse;
  }

  div.jml_dialogChangeInfo:hover {
    opacity: 1;
  }

  .buttonarea div.jml_dialogChangeInfo{
    display: inline-block;
    padding: 2px 0 2px 8px;
  }


  div.jml_dialogChangeInfo fp-inline-svg{
    --icon-size: 20px;
    height: 20px;
    width: 20px;
  }

  .ajaxfieldeditor div.jml_dialogChangeInfo {
    position: absolute;
    right: 0;
    bottom: 0;
  }

  div.jml_dialogChangeInfo img {
    margin: 0 1px -1px 1px;
  }

  .td_head_center {
    width: 204px;
    font-size: 14px;
    font-weight: bold;
    color: #AB3A44;
  }

  .space_vertical {
    width: 17px;
  }

  li {
    text-align: left;
    padding: 0;
    margin: 0;
  }

  span.errorhint {
    color: #C00000;
    font-size: 10px;
    font-style: normal;
  }

  pf-dialog-view div.globalerrorhint,
  #report div.globalerrorhint,
  #dialogForm div.globalerrorhint {
    background-color: #C00000;
    font: var(--font-medium);
    color: #FFF;
    width: 100%;
    box-sizing: border-box;
    padding: 0px 8px;
  }

  div.erroricon {
    position: relative;
    width: 0;
    height: 0;
  }

  span.error,
  span.smallerror {
    color: var(--color-status-red);
  }

  div.error {
    color: var(--color-status-red);
    background-color: #EFD6C6;
  }

  span.small,
  p.small {
    font: var(--font-small);
    font-style: normal;
  }

  span.smallhint,
  p.smallhint {
    font: var(--font-small);
    font-style: normal;
    color: var(--color-shade-none-contrast); /* eine leicht abgeschwächte textfarbe */
  }

  span.big,
  p.big {
    font: var(--font-medium);
    line-height: 1.1;
  }

  span.bigbold,
  p.bigbold,
  span.bigbold label {
    font: var(--font-medium);
    line-height: 1.1;
    font-weight: bold;
  }

  span.bighint,
  p.bighint {
    font: var(--font-medium);
    line-height: 1.1;
    font-weight: bold;
    color: var(--color-primary);
  }

  p.smallhint,
  p.small {
    margin: 0;
    padding: 0;
    --icon-size: 12px;
  }
  .smallhint fp-inline-svg,
  .smallhint > svg,
  .smallhint > img,
  p.small fp-inline-svg,
  p.small > img {
    max-height: 12px;
    max-width: 16px;
    width: auto;
  }

  p.smallhint.img {
    padding-left: 18px;
  }

  p.smallhint.img>img {
    width: 16px;
    height: 16px;
    max-height: 16px;
    object-fit: contain;
    margin-left: -17px;
  }

  span.normal {
    font-size: 11px;
    font-style: normal;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: normal;
    color: #000;
  }

  span.contentassistcode {
    font-size: 10px;
    font-style: normal;
    font-family: monospace;
  }

  span.ticketInfo {
    font-size: 11px;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: var(--color-main-font);
  }


  /* --- Finanzartikel Preshow ------------------------ */

  .card_financearticle .header {
    display: inline-block;
  }


  /* --- Projekt Preshow ------------------------ */

  .visitenkarte img.ps_entityicon {
    width: 16px;
    height: 16px;
  }


  /* --- CRM Preshow ------------------------ */

  .visitenkarte .ps_crmpos {
    font: var(--font-small);
    font-style: normal;
    line-height: 10px;
    white-space: nowrap;
    overflow: hidden;
    width: 236px;
    display: inline-block;
  }


  /* --- Filter --------------------------------- */

  #filter input.dateswitcher {
    width: 60px;
    font-size: 8pt;
    font-weight: normal;
    text-align: left;
    padding-left: 6px;
    padding-right: 6px;
    margin-right: 10px;
    height: 16px;
    color: #003366;
    border-style: solid;
    border-width: 1px;
    border-top-color: #D0DCEA;
    border-left-color: #D0DCEA;
    border-bottom-color: #DEE6F0;
    border-right-color: #DEE6F0;
    background-color: white;
  }


  /* --- Liste --------------------------------- */



  /*zieht imgs kuenstlich nach unten, damit diese innerhalb der textzeile bleiben*/

  img.intextline {
    margin-bottom: -4px;
    max-height: 16px;
    max-width: 16px;
  }

  img.valignmiddle {
    vertical-align: middle;
  }

  table.listbody a:hover {
    cursor: pointer;
  }

  div.listheadertitle img {
    vertical-align: text-top;
  }

  div.listheaderquickfilter {
    /* In diesem Div befindet sich die QF-Tabelle und der ClickCatcher*/
    float: right;
    position: relative;
  }



  table.listbody td.iaall {
    padding-left: 2px;
    padding-right: 15px;
    white-space: nowrap;
    text-align: right;
    --icon-size: 20px;
  }

  tr.hoverme {
    cursor: pointer;
  }

  table.listbody td.treestructureroot,
  table.listbody td.treestructurenode,
  table.listbody td.treestructureorphannode,
  table.listbody td.treestructureleaf,
  table.listbody td.treestructurechild,
  table.listbody td.treestructureorphanleaf,
  table.listbody td.treestructurelastChild,
  table.listbody td.treestructurelastChild2,
  table.listbody td.treestructurecollapsed,
  table.listbody td.treestructureline,
  table.listbody td.treestructureempty {
    text-align: center;
    vertical-align: middle;
    border-right: 0 none;
    width: 20px;
  }

  table.listbody td.l.treestructure,
  .jml_formList table.listbody td.l.treestructure {
    background: no-repeat center center;
    padding: 0 0 0 4px;
    /* abgelehnt padding: 5px 0 5px 5px; */
  }

  .listbody col.jmlTreeCol {
    width: 24px;
    min-width: 12px; /* bei zu kleinem Fenster versucht der Browser zu stauchen */
  }

  .jml_formList table.listbody td.l.treestructurecaption {
    padding-left: 6px;
    padding-top: 2px;
    padding-bottom: 2px;
  }


  table.listbody td.treestructureroot {}

  table.listbody td.treestructurenode {}

  table.listbody td.treestructureleaf {
    width: 32px;
  }

  table.listbody td.treestructureorphannode {
    width: 25px;
    padding-left: 4px;
  }

  table.listbody td.treestructureorphanleaf {
    width: 25px;
    padding-left: 4px;
  }

  table.listbody td.treestructurechild {}

  table.listbody td.treestructurelastChild {}

  table.listbody td.treestructurelastChild2 {}

  table.listbody td.treestructurecollapsed {}

  table.listbody td.treestructureline {}

  .jmlTreeExpander {
    height: 32px;
    width: 14px;
    margin-right: 2px;
    display: inline-block;
    line-height: 32px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    position: relative;
  }

  .pageReady .jmlTreeExpander .arrow,
  .pageReady .jmlTreeExpander .number {
    opacity: 0.5;
    transition: opacity 200ms;
  }

  .jmlTreeExpander .number {
    opacity: 0;
    transition-delay: 1000ms;
    font-size: 12px;
    line-height: 14px;
    display: inline-block;
    padding: 2px;
    border-radius: 3px;
    position: absolute;
    right: 16px;
    background-color: var(--color-card-background);
    text-shadow: 0 0 2px #FFF;
  }

  table.listbody td.treestructureExpander:hover .jmlTreeExpander .arrow,
  table.listbody td.treestructureExpander:hover .jmlTreeExpander .number {
    opacity: 1;
  }

  .jmlTreeExpander .arrow {
    display: inline-block;
    width: 16px;
    height: 16px;
    transition: transform 250ms;
    background: no-repeat center center;
    background-image: url(../css/embed/treeexpander.svg);
  }

  .jmlTreeExpander > fp-inline-svg {
    opacity: 0.5;
    --icon-size: 16px;
  }

  table.listbody td.treestructureExpander:hover .jmlTreeExpanderCollapsed > fp-inline-svg {
    transform: rotate(15deg);
  }

  .jmlTreeExpanderExpanded > fp-inline-svg {
    transform: rotate(90deg);
  }

  table.listbody td.treestructureExpander:hover .jmlTreeExpanderExpanded > fp-inline-svg {
    transform: rotate(75deg);
  }

  .treestructure img.treeNodeImage {
    vertical-align: middle;
  }

  .jml_formList table.listbody td.l.treestructureIcon,
  table.listbody td.l.treestructureIcon {
    overflow: visible;
    text-align: right;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .pf_formNavigationList table.listbody td.l.treestructureIcon {
    padding-top: 2px;
    padding-bottom: 2px;
  }

  table.listbody td.treestructureExpander {
    text-align: right;
  }

  table.listbody td.treestructureIcon>.jmlImageContainer {
    margin-left: 0;
  }

  table.listbody td.treestructurecaption {
    text-overflow: ellipsis;
    overflow: hidden;
  }


  /* ----------- QuickSearch ---------------------*/

  .searching {
    background: url(../form/base/loading18.gif) no-repeat left center;
  }


  /* -----------   multiitemactionarea  ---------------*/

  div.buttonarea,form.buttonarea {
    padding: var(--width-componentpadding);
    text-align: left;
    display: flex;
    flex-direction: row;
    justify-content: stretch;
  }

  fp-inline-svg.mi-select-icon {
    margin-left: 2px;
  }

  fp-field[name="miselect"]{
    min-width: 160px;
  }

  .qfbuttonline.multiitem{
    width: 100%;
  }

  .qfbuttonline.multiitem > form {
    margin-left: auto;
  }

  div.multiitemactionarea {
    margin-left: -1px;
    margin-right: -1px;
    margin-bottom: -1px;
    position: relative;
    background-color: var(--color-card-background);
  }

  div.multiitemactionarea {
    position: relative;
    text-align: left;
    background-color: var(--color-card-background);
    width: 360px;
  }

  .miControllerHidden {
    display: none;
  }

  div.multiitemactionarea.elevated {
    z-index: 1000;
    box-shadow: 0 1px 6px 1px rgba(0, 0, 0, 0.25);
    border: 0 none;
  }

  div.multiitemactionarea .miController h1 {
    line-height: 30px;
    color: white;
    margin: 0 0 10px 0;
    padding-left: 8px;
    cursor: move;
  }

  div.multiitemactionarea .miController .jml_miAdditionalFieldsPopup {
    margin-left: auto;
    margin-right: 50px;
  }

  div.multiitemactionarea .miController .jml_miAdditionalFieldsPopup,
  div.multiitemactionarea .miController .miButtons {
    padding: 8px;
    text-align: right;
  }

  .miControllerCounterText {
    font-weight: bold;
    color: var(--color-main-font);
  }

  div.multiitemactionarea select {
    width: auto;
  }

  div.miButtons {
    text-align: right;
  }

  div.multiitemactionarea .jml_miAdditionalFieldsPopup {
    white-space: normal;
  }

  div.multiitemboxanchor {
    z-index: 998;
    overflow: visible;
    width: 100%;
    height: 1px;
    position: absolute;
    top: 0;
    left: 0;
  }

  div.hiddenmultiitembox {
    position: absolute;
    z-index: 1000;
    width: 100%;
    text-align: justify;
    white-space: normal;
    background-color: white;
    border: 1px solid black;
    padding: 4px;
    left: -2px;
    bottom: -30px;
  }

  /*.jml_miAdditionalFieldsPopup {*/
  /*  margin-top: 3px;*/
  /*  max-width: 300px;*/
  /*  min-width: 200px;*/
  /*}*/

  .jml_miAdditionalFieldsPopup label {
    margin-right: 3px;
  }

  .jml_miAdditionalFieldsPopup td {
    padding-bottom: 2px;
  }

  .jml_miAdditionalFieldsPopup fp-field.comboboxplus {
    width: 160px;
  }

  /* Drag&Drop Datei-Upload */

  div#dndUploadDivBAS div.outerDropArea {
    opacity: 0;
    position: fixed;
    top: 50%;
    left: 50%;
    height: 0;
    width: 0;
    transition: all 0.25s ease-in-out;
    z-index: 5;
  }

  .dj_ie div#dndUploadDivBAS div.outerDropArea {
    opacity: 1;
    position: relative;
    top: 0;
    left: 0;
    height: auto;
    width: auto;
  }

  div#dndUploadDivBAS div.outerDropArea div.loader {
    display: none;
    position: absolute;
    height: 128px;
    width: 128px;
    background-image: url(../detailmanager/config/back.svg);
    background-size: 128px;
    top: 50%;
    left: 50%;
    margin-top: -64px;
    margin-left: -64px;
  }

  div#dndUploadDivBAS div.outerDropArea div.loader.show {
    display: block;
  }

  div#dndUploadDivBAS div.dropArea {
    background-color: #FEFEFE;
    height: 100%;
    border: 4px lightgrey dashed;
  }

  .dj_ie div#dndUploadDivBAS div.dropArea {
    height: 140px;
    width: 240px;
  }

  div.fileUploadWindow div.dropArea {
    margin-top: 10px;
    height: 160px;
    border: 4px lightgrey dashed;
  }

  div#dndUploadDivBAS div.outerDropArea.dragging,
  div#dndUploadDivBAS div.outerDropArea.over {
    top: 10%;
    left: 10%;
    height: 80%;
    width: 80%;
    opacity: 0.8;
  }

  body.fileupload .dijitTabContainer {
    z-index: 1000 !important;
  }

  .dj_ie div#dndUploadDivBAS div.outerDropArea.dragging,
  .dj_ie div#dndUploadDivBAS div.outerDropArea.over {
    top: 0;
    left: 0;
    height: auto;
    width: auto;
    opacity: 1;
  }

  .dj_ie div#dndUploadDivBAS div.outerDropArea.dragging div.dropArea {
    border: 4px darkgrey dashed;
  }

  div.fileUploadWindow div.outerDropArea.dragging div.dropArea {
    border: 4px darkgrey dashed;
  }

  .dj_ie div#dndUploadDivBAS div.outerDropArea.over div.dropArea.over,
  div#dndUploadDivBAS div.dropArea.over,
  div.fileUploadWindow div.dropArea.over {
    border: 4px grey dashed;
  }

  div#manualUploadDiv,
  div#manualUploadDivBAS {
    text-align: center;
    vertical-align: text-bottom;
  }

  div#dndUploadDivBAS div.dojoxUploaderFileList,
  div.fileUploadWindow div.dojoxUploaderFileList {
    height: 18px;
  }

  div#dndUploadDivBAS div.dojoxUploaderFileListProgressBar,
  div.fileUploadWindow div.dojoxUploaderFileListProgressBar {
    margin-top: 2px;
    height: 5px;
    background-color: var(--color-primary);
  }

  div#dndUploadDivBAS table.dojoxUploaderFileListTable,
  div.fileUploadWindow table.dojoxUploaderFileListTable {
    display: none;
  }

  div#manualUploadDiv form,
  div#manualUploadDivBAS form {
    vertical-align: middle;
    margin-top: 10px;
  }

  .filepathnavi {
    display: block;
    padding-right: 32px;
    position: relative;
    line-height: 24px;
    height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .listcontrol.jmlListLocation {
    display: inline-block;
  }

  .jmlListLocation .filepathnavi {
    font: var(--font-medium);
  }
  .jmlListLocation .filepathnavi fp-inline-svg{
    height: 24px; width: 24px;
    vertical-align: text-bottom;
  }

  .filepathnavi .jmlImageContainer {
    vertical-align: text-top;
  }

  .jmlListheadertitle .actioneaoverview {
    position: absolute;
    top: -2px;
    right: 0;
  }


  /* Dialogzelle Header */

  .dialog td.label.areaheader {
    color: var(--color-card-header);
  }

  .jml_formDialog .buttonarea .jml_dialogButtons .jml_formList .buttonarea .buttons,
  .jml_formList .buttonarea .buttons {
    height: 25px;
  }

  .quickCreate .jml_dialogButtons {
    background: transparent;
    border: 0 none;
  }

  .visible-if-input-occured { display: none;}
  .input-occured .visible-if-input-occured { display: initial; }

  /* ------------------- Q U I C K F I L T E R -------------------  */

  div.tmplControlBar {
    background: var(--color-quickfilter-back);
    color: var(--color-quickfilter-font);
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    transition: filter 1000ms;

  }
  fp-view-wrapper {
    container-type: inline-size;
  }

  @container (min-width: 600px) {
    div.tmplControlBar {
      flex-flow: nowrap;
    }
  }

  fp-expander.gui-group.tmplControlBar,
  div.gui-group.tmplControlBar {
    background: var(--color-quickfilter-back);
    color: var(--color-quickfilter-font);
    display: block;
  }

  pf-list-view.input-occured div.tmplControlBar{
    filter: saturate(0.2);
    pointer-events: none;
    opacity: 0.5;
  }

  div.tmplControlBarNotEmpty {
    padding: 0 var(--width-componentpadding);
    min-height: var(--height-toolbar);
    box-sizing: border-box;
    /* Mindestgroeße, falls nicht leer - Achtung, kann auch mal in der Sidebar erscheinen */
    min-width: 300px;
    flex: 0 0 auto; /* wichtig: bei "flex 0" wäre die flex-basis 0%, deshalb das "auto"*/
    --icon-size: 16px;
    justify-content: flex-end; /* so sind das Kebabmenü und die Suche immer rechts am rand */
  }

  .boxarea div.tmplControlBarNotEmpty {
    min-width: 100px;
  }

  .qfbuttonline {
    display: flex;
    align-items: center;
    text-align: left;
    border: none;
    overflow: hidden;
    flex-shrink: 0;
    height: var(--height-toolbar);
  }
  .qfbuttonline.multiitem {
    height: auto;
  }
  .qfbuttonline.search {
    flex-grow: 0;
    flex-shrink: 0; /* die Suche geht beim shrinken kaputt */
    justify-content: flex-end;
  }

  .qfbuttonline.search.search-multiple {
    flex-grow: 5; /* Selectsets und co brauchen viel platz!*/
  }

  .qfbuttonline.quickfilter {
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: flex-start;
  }
  .qfbuttonline.quickfilter.location {
    flex-grow: 5; /* Unser Tree-Navigator braucht viel platz!*/
    flex-shrink: 1; /* Wenn der Pfad lang ist, darf aber gekürzt werden */
  }

  fp-inline-svg.qfbuttonlineextender {
    width: var(--icon-size, 32px);
    height: var(--icon-size, 32px);
    cursor: pointer;
  }

  /* span.qfbuttonlineextender::before {
    content: '▼';
    color: currentColor;
  } */

  .tmplControlBar .actions {
    margin: 0;
    padding-left: 0;
    height: 24px;
    text-align: right;
    overflow: visible;
    justify-content: flex-end;
  }

  .tmplControlBar .actions > svg,
  .tmplControlBar .qfbuttonline > pf-parent-css-toggle,
  .tmplControlBar .search > fp-inline-svg,
  .tmplControlBar .actions > fp-inline-svg {
    height: var(--icon-size, 32px);
    width: var(--icon-size, 32px);
    padding: 0 3px;
  }

  .tmplControlBar .actions > svg[onclick],
  .tmplControlBar .qfbuttonline > pf-parent-css-toggle,
  .tmplControlBar .search > fp-inline-svg[onclick],
  .tmplControlBar .actions > fp-inline-svg[onclick]{
    cursor: pointer;
  }

  .tmplControlBar .actions > pf-parent-css-toggle fp-inline-svg{
    height: var(--icon-size, 32px);
    width: var(--icon-size, 32px);
  }

  .qfbuttonline .qfbuttonlinebuttonactive,
    /*.tmplControlBar .qfbuttonline > .active,*/
  .tmplControlBar .qfbuttonline > pf-parent-css-toggle.listheader-switcher.normal,
  .tmplControlBar .qfbuttonline > pf-parent-css-toggle.fullscreen-switcher.fullscreen{
    color: var(--color-accent);
  }

  .qfbuttonline fp-inline-svg, .QFDropdown fp-inline-svg,
  .qfbuttonline svg, .QFDropdown svg{
  }

  .bmlfQuickSearch {
    padding: 0 0 0 12px;
    box-sizing: border-box;
  }
  .bmlfQuickSearch.bmlfQuickSearchSelectSet {
    width: 99%; /* keine sorge, das wird ggf schrumpfen */
  }


  .bmlfQuickSearch fp-field{
    min-width:100px;
    transition: min-width 300ms var(--transition-strong-ease);
  }

  @media (min-width: 1000px) {
    .bmlfQuickSearch fp-field:not([empty]) {
      min-width: 200px;
    }
  }

  .qfbuttonline .qfbuttonlinebutton {
    cursor: pointer;
    padding: 4px;
  }

  ul.QFDropdown {
    padding: 10px 0;
    margin: 0;
  }

  .tundra .qfpopup .dijitTooltipContainer {
    background: #FFF;
    /* Old browsers */
  }

  ul.QFDropdown li.emptyseparator,
  ul.QFDropdown li.separator {
    font-weight: bold;
    opacity: 1;
  }

  ul.QFDropdown li {
    list-style: none;
    width: 100%;
  }

  ul.QFDropdown li a,
  ul.QFDropdown li>span {
    padding: 4px 8px;
    font-size: 13px;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
  }

  ul.QFDropdown li.selectable:hover {
    background-color: var(--color-default-hover);
    opacity: 1;
  }

  ul.QFDropdown li.selectable.selected {
    color: var(--color-accent);
  }

  ul.QFDropdown li .jmlImageContainer img,
  ul.QFDropdown li fp-inline-svg.jmlImageContainer {
    vertical-align: middle;
    width:24px;
    height:24px;
  }

  ul.QFDropdown li .jmlImageContainer {
    padding: 0px 5px 0px 0px;
    line-height: 24px;
  }

  ul.QFDropdown li.emptyseparator {
    min-height: 4px;
    line-height: 4px;
    font-size: 4px;
    opacity: 1;
  }

  ul.QFDropdown li.separator {
    padding-top: 2px;
    white-space: nowrap;
    width: auto;
  }

  ul.QFDropdown li.separator:first-child {
    padding-top: 0px;
  }

  ul.QFDropdown a,
  ul.QFDropdown span.nav {
    white-space: nowrap;
    cursor: pointer;
  }

  .qfbuttonline .qfbuttonlinebar,
  .qfbuttonline .qfbuttonlineseparator,
  .tmplListControlButtons .controlButtonSeparator {
    font-size: 6px;
    background-color: currentColor;
    width: 1px;
  }

  .qfbuttonline { --icon-size: 24px;}
  .qfbuttonline.quickfilter .jmlImageContainer {  --icon-size: 18px; /* <- historisch gewachsen*/}

  .qfbuttonline.views .jmlImageContainer {  --icon-size: 16px; /* <- historisch gewachsen*/}

  .qfbuttonline .jmlImageContainer {
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0; /* Also icons dürfen nicht schrumpfen!*/
  }

  .qfbuttonline.actions pf-parent-css-toggle,
  .qfbuttonline.actions > .jmlImageContainer,
  .qfbuttonline.actions > :not(fp-field) .jmlImageContainer {
    --icon-size: 24px;
    width: var(--icon-size);
    height: var(--icon-size);
  }

  .qfbuttonline.actions .primary-action-button > .primary-actions {
    color: var(--color-accent);
    --icon-size: 40px;
    border-radius: 50%;
    padding: 2px 0 0 0;
    /*background-color: var(--color-quickfilter-back);*/
    /*box-shadow: 0 5px 2px -3px rgb(0,0,0,0.125);*/
  }

  .qfbuttonline.actions .primary-action-button > .primary-actions.inaktiv {
    color: rgba(128,128,128,0.5);
  }

  .qfbuttonline.actions .primary-action-button::before {
    display: block;
    content: '';
    border-radius: 50%;
    --icon-size: 32px;
    width: var(--icon-size);
    height: var(--icon-size);
    padding: 4px;
    background: linear-gradient(0deg, var(--color-shade-1) 10%, transparent 20%);
    box-shadow: 0 4px 0 -3px rgb(0,0,0,0.25);
    position: absolute;
    bottom: -4px;
  }

  .tmplListControlAreaPageContent .content .filterarea .filterbutton,
  .tmplListControlAreaPageContent .content .filterarea .filterfields {
    padding: 10px 10px 10px 10px;
  }
  .filterbutton{
    border-top: solid 1px var(--color-default-border);
    box-sizing: border-box;
    height: 50px;
  }

  .filterbutton > button, .filterbutton > input{
    margin-right: var(--width-componentspacing);
    vertical-align: middle; /*sonst sind nur manche middle */
  }

  .tmplListControlAreaPageContent .content .filterarea .filterfields {
    max-height: 50vh;
    overflow: auto;
  }

  fp-dialog .filterarea {
    height: 100%;
  }

  fp-dialog fp-tab-container.filtertabs {
    min-height: calc(100% - 50px);
  }

  fp-dialog {
    max-height: 100vh;
    max-width: 100vw;
    min-height: 100px;
    min-width: 200px;
  }
  fp-dialog[focussed] {
    /* wieder rückgängig! fp-popups tauchen nun hinter dem dialog auf :( z-index: 2500; /* gleicher Wert wie bei einem Popupselectmodal! Damit die Überdeckung richtig sortiert ist! */
  }
  fp-modal::part(modal),
  fp-dialog::part(modal) {
    border-radius: var(--border-radius-modal);
  }
  fp-modal.popup-select::part(modal){
    max-height: 90vh;
  }

  body.contains-open-menu fp-dialog:not([focussed]){
    z-index: 800; /* herunter auf 800, damit das Menü darüber liegen kann */
    transition: all 200ms;
    transform: scale(0.9);
  }

  fp-dialog, fp-view-wrapper {
    --header-padding:4px var(--width-componentpadding) 4px var(--width-componentpadding);
  }

  /* iOS */
  fp-dialog[mode="fullscreen"], fp-view-wrapper[fullscreen] {
    --header-padding: calc(4px + env(safe-area-inset-top, 0px)) var(--width-componentpadding) 4px var(--width-componentpadding);
  }
  fp-dialog[mode="fullscreen"] .buttonareaFilled{
    padding-bottom:  calc(8px + env(safe-area-inset-bottom, 0px));
  }

  body.popupDialog .jml_formDialog,
  fp-dialog[mode="fullscreen"] .jml_formDialog,
  fp-dialog[mode="container"] .jml_formDialog {
    width: auto;
  }

  fp-dialog[mode="container"] .jml_formList,
  fp-dialog[mode="container"] .jml_formFilter,
  fp-dialog[mode="container"] .jml_formDialog {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  fp-dialog[mode="container"] .jml_formList > .jmlListBody ,
  fp-dialog[mode="container"] .jml_formDialog .groups {
    overflow: auto;
  }

  body.popupDialog .jml_formDialog table.dialog,
  fp-dialog[mode="container"] .jml_formDialog table.dialog,
  fp-dialog[mode="fullscreen"] .jml_formDialog table.dialog{
    width: calc(100% - 2 * var(--width-componentpadding, 10px));
    min-width: auto;
  }

  fp-dialog pf-dialog-view {
    height: 100%;
    width: 100%;
  }

  fp-dialog fp-parent-resizeable {
    position: absolute;
    right: 0px;
    bottom: 0px;
    z-index: 100;
  }

  fp-dialog fp-parent-resizeable button {
    display: none;
  }

  body.mouse-user fp-dialog:not([mode="fullscreen"]) fp-parent-resizeable button {
    display: inline-block;
    background: transparent;
    height: 16px;
    width: 16px;
    transform: translate3d(8px, 8px, 0);
  }

  @media (min-width: 600px) {
    fp-dialog[mode="content"] {
      max-width: 80vw;
      max-height: 80vh;
    }
    /*fp-dialog.filterarea {*/
    /*  max-width: 50vw;*/
    /*  max-height: 50vh;*/
    /*}*/

    fp-dialog[mode="fullscreen"] {
      max-height: 100vh;
      max-width: 100vh;
    }

    fp-dialog[mode="content"] .jml_formDialog {
      min-width: 400px;
    }

    fp-dialog[mode="content"] .jml_formDialog > .groups {
      min-height: 120px;
    }
  }

  .jml_formFilter > fp-tab-container {
    --bar-color: var(--color-toolbar-font);
    --bar-background: var(--color-toolbar-back);
  }

  fp-modal .tmplListControlAreaPageContent .content .filterarea .filterfields{
    max-height:320px;
  }

  .tundra .dijitContentPane {
    overflow: visible;
  }

  fp-dialog .filterfields {
    padding: var(--width-componentspacing);
  }

  fp-dialog  fp-expander.filterfields {
    display: contents;
  }

  fp-dialog .filterfields .jmlFiltercontroller {
    display: grid;
    grid-template-columns: repeat(auto-fit, 230px);
    grid-auto-rows: auto;
    grid-gap: 10px;
    align-items: start;
    justify-content: left;
    padding: var(--width-componentspacing) 10px
  }


  fp-dialog .filterbutton {
    padding: var(--width-componentspacing);
    white-space: nowrap;
  }

  .jmlFilterGroupHeader {
    height: 25px;
    vertical-align: top;
    text-align: left;
  }

  .jmlFilterGroup {
    /*display: inline-block;*/
    /*margin: 5px 30px 20px 0;*/
    vertical-align: top;
  }

  .jmlFilterGroup .jmlFilterGroupHeader th,
  .legendgroup h3 {
    font: var(--font-normal);
    margin: 0;
    font-weight: bold;
  }

  .jmlFilterGroupHeader th:not(:empty):after {content: "";border-bottom: solid 1px var(--color-default-border);display: block; margin: 4px 0 2px 0;}

  .jmlFilterGroup td.f {
    width: 130px;
    padding: 2px 0;
  }

  @media screen and (min-width: 1200px) {
    .jmlFilterGroup td.f {
      width: 240px;
    }

    fp-dialog .filterfields .jmlFiltercontroller {
      grid-template-columns: repeat(auto-fit, 340px);
      min-width: 750px;
    }
  }


  .jmlFilterGroup td.f.label {
    width: 110px;
    padding: 0 8px 0 0;
    font: var(--font-input-label);
    text-align: right;
  }

  .jmlFilterGroup td.f2 {
    width: 200px;
    padding: 2px;
  }

  .zu-allgemeine-regel .jmlFilterGroup td.f img,
  .jmlFilterGroup td.f2 img {
    vertical-align: bottom;
    margin-left: 2px;
  }

  .jmlFilterGroup td.label {
    text-align: left;
    min-width: 60px;
  }


  .tmplListControlArea {
    overflow: hidden;
    margin-left: -4px;
    padding-left: 4px;
    margin-right: -4px;
    padding-right: 4px;
    border: 0px;
    border-top: 0px;
  }

  .tmplListControlArea {
  }

  .tmplListControlAreaPage {
    background: var(--color-card-background);
    color: var(--color-card-font);
    padding: 10px 0 0;
  }

  .tmplListControlArea .tmplListControlAreaPage {
    position: relative;
    margin-bottom: 8px;
    box-shadow: var(--shadow-cards);
  }

  .tmplListControlArea .controlTitle {
  }

  .tmplListControlArea .controlTitle .title {
    color: var(--color-card-header);
    font: var(--font-large);
    line-height: 1.2;
    margin: 10px;
  }

  .jml-tree-navigator {
    display: inline-flex;
    flex-direction: row;
    /*align-items: baseline;*/
    /*border: var(--border-input);*/
    font: var(--font-small);
    line-height: 16px;
  }

  .jml-tree-navigator fp-popup{
    font: var(--font-normal);
  }

  .jml-tree-navigator .path-item {
    padding: 1px 4px;
    margin: 0 2px;
    flex-shrink: 2;
    min-width: 16px; /* mindestens das icon sollte hinpassen */
    overflow: hidden;
  }
  .jml-tree-navigator .path-item.current-item {
    font-weight: bold;
  }
  .jml-tree-navigator .path-item:first-child{
    flex-shrink: 1;
  }
  .jml-tree-navigator .path-item.current-item,
  .jml-tree-navigator .path-item:last-child{
    flex-shrink: 0;
    max-width: 50%;
  }
  .jml-tree-navigator .path-item.current-item:first-child{
    max-width: none; /* wir sind das einzige path-item */
  }


  .jml-tree-navigator .child-selector {
    font: var(--font-large);
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    margin: 0;
    line-height: 16px;
    flex-basis: 16px;
    flex-shrink: 1;
    min-width: 12px;
    text-align: center;
  }

  .jml-tree-navigator .sibling-item {
    padding: 2px;
    cursor: pointer;
  }
  .jml-tree-navigator .sibling-item > span {
    line-height: 1.5;
    padding: 0 12px;
  }

  .jml-tree-navigator .sibling-item:hover {
    background: var(--color-default-hover);
  }

  .jml-tree-navigator .sibling-item.selected {
    font-weight: bold;
  }

  .jml-tree-navigator .child-selector:hover,
  .jml-tree-navigator .path-item[onclick]:hover {
    cursor: pointer;
    box-shadow: var(--shadow-button-raised);
  }

  .jml-tree-navigator .path-item:not([disabled]) {
    cursor: pointer;
  }