/* ------------------------------------------------------------------------------------------------- */
/* -------------------------------                   ----------------------------- */
/* -------------------------------    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;
}

.legendgroup,
.filter-summary {
  opacity: .75;
  font: var(--font-small);
  line-height: 1.5;
  padding: var(--width-componentpadding);
  padding-top: 0;
  --icon-size: 12px;
}

:is(.legendgroup, .filter-summary) :is(fp-format-date) {
  display: inline-block;
}

.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: calc(-1 * var(--width-componentspacing, 12px));
  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;
  gap: 6px;
}

div.tmplWorkarea.row {
  flex-direction: row;
  flex-wrap: nowrap;
}

div.tmplWorkarea.row fp-view-wrapper {
  flex-grow: 1;
}

  div.tmplWorkarea.row .boxarea {
    flex-basis: 400px;
  }

  .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*/
  .dmContainer .dm-stack-card-loading,
  div.tmplWorkarea .viewFrame::part(header) {
    --font-header: var(--font-subheader);
    /*--header-background: var(--color-primary);*/
    --header-color: var(--color-primary-for-text);
    --header-height: var(--height-toolbar);
  }
  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);
    --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*/
  div.tmplWorkarea .viewFrame:not([fullscreen]) {
    max-height: 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: unset;
    flex-basis: auto;
  }
  div.tmplWorkarea .viewFrame.dialog:last-of-type:first-of-type:not([fullscreen]) {
    max-height: unset;
    flex-basis: auto;
  }
  div.tmplWorkarea .viewFrame:last-of-type{
    margin-bottom: var(--width-componentspacing, 12px);
  }

  /* Infoboxen und so */
  div.tmplWorkarea .viewFrame:not([minimized]) {
    min-height: min(100px, 30vh);
    flex-basis: min-content;
  }
  /* echte Listen und Dialoge */
  div.tmplWorkarea .viewFrame:is(.dialog, .list-frame):not([minimized]) {
    /* Wir wollen mindestens mal ein drittel der Bildschirmhöhe, und nicht weniger als 400 px */
    min-height: max(400px, 30vh);
  }

  /** Buttons in der Fensterleiste sind transparent */
  .viewFrame > button[slot="header-buttons-right"] {
    border: none;
    box-shadow: none;
  }
  [slot="header-buttons-right"].button-close > fp-inline-svg {
    transition: transform 250ms;
  }
  [slot="header-buttons-right"].button-close:hover > fp-inline-svg{
    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*/
  }

  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%;
    --width-componentspacing: 0px;
  }

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

  div.ticket-sideview .left-col{
    flex-basis: 30%;
    max-width: 50%;
  }
  div.ticket-sideview .right-col{
    flex-basis: 70%;
    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*/
    bottom: 0; /* wir sitzen in einem Grid - kein Footerabstand mehr nötig */
    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;
    --stroke-width: 0.2;
  }

  /* 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.125;
  }

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

  :is(pf-dialog-view, pf-list-view) {
    --componentview-sidepanel-left-column: 0;
    --componentview-sidepanel-right-column: 0;
    --componentview-toolbar-row: 0;
    --componentview-footer-row: 0;

    display: grid;
    gap: 1px;
    max-height: 100%;
    overflow: hidden;
    grid-template-columns: var(--componentview-sidepanel-left-column, min-content) 1fr var(--componentview-sidepanel-right-column, min-content);
    grid-template-rows: min-content 1fr min-content min-content;
    grid-template-areas:
              "toolbar             toolbar       toolbar"
              "sidepanel-left      content       sidepanel-right"
              "sidepanel-left  content-footer    sidepanel-right"
              "footer              footer        footer";
  }

  [has-sidepanel-left]:is(pf-dialog-view, pf-list-view) {
    --componentview-sidepanel-left-column: 320px;
  }

[has-sidepanel-left]:is(pf-dialog-view, pf-list-view) .sidepanel-left-switcher button svg path.sidepanelswitcher-line,
[has-sidepanel-left]:is(pf-dialog-view, pf-list-view) .sidepanel-left-switcher button svg path.sidepanelswitcher-angular{
  transition: transform 1000ms var(--transition-overshoot-ease) 100ms;
  transform: rotate(0) translateX(0px);
  transform-origin: 20px 16px;
}

.hide-side-panel-left[has-sidepanel-left]:is(pf-dialog-view, pf-list-view) .sidepanel-left-switcher button svg path.sidepanelswitcher-line {
  transform: translateX(-6px);
}
.hide-side-panel-left[has-sidepanel-left]:is(pf-dialog-view, pf-list-view) .sidepanel-left-switcher button svg path.sidepanelswitcher-angular{
  transform: rotate(180deg);
}

  [has-sidepanel-right]:is(pf-dialog-view, pf-list-view) {
    --componentview-sidepanel-right-column: 320px;
  }


[has-sidepanel-right]:is(pf-dialog-view, pf-list-view) .sidepanel-right-switcher button svg path.sidepanelswitcher-line,
[has-sidepanel-right]:is(pf-dialog-view, pf-list-view) .sidepanel-right-switcher button svg path.sidepanelswitcher-angular{
  transition: transform 1000ms var(--transition-overshoot-ease) 100ms;
  transform: rotate(0) translateX(0px);
  transform-origin: 12px 16px;
}
.hide-side-panel-right[has-sidepanel-right]:is(pf-dialog-view, pf-list-view) .sidepanel-right-switcher button svg path.sidepanelswitcher-line {
  transform: translateX(6px);
}
.hide-side-panel-right[has-sidepanel-right]:is(pf-dialog-view, pf-list-view) .sidepanel-right-switcher button svg path.sidepanelswitcher-angular{
  transform: rotate(-180deg);
}

[has-toolbar]:is(pf-dialog-view, pf-list-view) {
    --componentview-toolbar-row: var(--height-toolbar, 40px);
  }
  [has-footer]:is(pf-dialog-view, pf-list-view) {
    --componentview-footer-row: var(--height-toolbar, 40px);
  }

  /* Ab <- 1600px -> soll es schön sein. Da bleibt für die Toolbar in einem DM nur 1500px */
@container toolbar (min-width: 890px) {
  .qfbuttonline.sidepanel-left-switcher,
  .qfbuttonline.sidepanel-right-switcher {
    min-width: var(--height-footer);
    box-sizing: border-box;
    & .qfbuttonlineseparator {display: none;}
  }

  .qfbuttonline.sidepanel-left-switcher {
    justify-content: flex-end;
    flex-basis: var(--componentview-sidepanel-left-column);
    border-right: 1px solid var(--color-input-border);
    margin-left: calc(var(--width-componentpadding) * -1);
  }

  .qfbuttonline.sidepanel-right-switcher {
    justify-content: flex-start;
    flex-basis: var(--componentview-sidepanel-right-column);
    border-left: 1px solid var(--color-input-border);
    margin-right: calc(var(--width-componentpadding) * -1);
  }
}

:is(pf-dialog-view, pf-list-view) {
  & > .tmplControlBar { grid-area: toolbar;}
  & > .tmplListFooter { grid-area: content-footer;}
  & > .sidepanel-left { grid-area: sidepanel-left; }
  & > .sidepanel-right { grid-area: sidepanel-right; }
  & > :is(form, .jml_formDialog, .jml_formList, .jml_formTiles, .jml_formCalendar) {
    grid-area: content;
    overflow: auto;
    max-height: 100%;
    max-width: 100%;
  }
}

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

fp-dialog > pf-list-view {
  min-width: min(60vw, 600px);
}

col.actionColumn.eao-column {
  width: 32px;
}

:is(.sidepanel-left, .sidepanel-right):not(:empty) {
  overflow: auto;
  box-sizing: border-box;

  & fp-view-wrapper {
    width: 100%;
    height: 100%;
  }

  & > fp-expander {
    margin: var(--width-componentspacing);
    padding: var(--width-componentpadding);
    background-color: var(--color-card-background);
    height: auto;
  }

  & .popup-select-preview {
    padding: var(--width-componentspacing);

    & h3 {
      font: var(--font-normal);
      font-weight: var(--font-weight-column-captions);
    }
  }
}

.sidepanel-right:not(:empty) {
  border-left: 1px solid var(--color-input-border);
  width: var(--componentview-sidepanel-right-column, auto);
}

.sidepanel-left:not(:empty) {
  border-right: 1px solid var(--color-input-border);
  width: var(--componentview-sidepanel-left-column, auto);
}

.sidepanel-backdrop {display: none;}

:is(pf-dialog-view, pf-list-view).hide-side-panel-left {
  --componentview-sidepanel-left-column: 0px !important;
  & > .sidepanel-left {
    display: none;
  }
}

:is(pf-dialog-view, pf-list-view).hide-side-panel-right {
  --componentview-sidepanel-right-column: 0px !important;
  & > .sidepanel-right {
    display: none;
  }
}

:is(pf-dialog-view, pf-list-view):is([has-sidepanel-left],[has-sidepanel-right]) .tmplListFooter{
  border-top: 1px solid var(--color-input-border);
}

@media (max-width: 500px) {

  [has-sidepanel-left]:is(pf-dialog-view, pf-list-view) {  --componentview-sidepanel-left-column: 0px;  }
  [has-sidepanel-right]:is(pf-dialog-view, pf-list-view) {  --componentview-sidepanel-right-column: 0px;  }

  .sidepanel-left:not(:empty),
  .sidepanel-right:not(:empty) {
    border-right: 0 none;
    width: 0;
    position: relative;
    z-index: 99;
    overflow: visible;

  }

  .sidepanel-left > *,
  .sidepanel-right > *{
    background-color: var(--color-card-background);
    box-shadow: 0 0 10px rgba(0,0,0,0.25);
    position: absolute;
    width: 80vw;
    top: 0; bottom: 0;
    transform: translateX(0);
    transition: transform 200ms var(--transition-overshoot-ease) 100ms;
  }
  .sidepanel-left > * {left: 0; right: unset;}
  .sidepanel-right > * {right: 0; left: unset;}

  :is(pf-dialog-view, pf-list-view).hide-side-panel-left .sidepanel-left {
    display: block;
    & > * {transform: translateX(-80vw);}
    & > .sidepanel-backdrop {transform: translateX(-100vw);}
  }
  :is(pf-dialog-view, pf-list-view).hide-side-panel-right .sidepanel-right {
    display: block;
    & > * {transform: translateX(80vw);}
    & > .sidepanel-backdrop {display: block; transform: translateX(100vw);}
  }

  .sidepanel-backdrop {
    display: block;
    background: rgba(100,100,100,0.5);
    width: 100vw;
  }
}

  /*div.tmplWorkarea .viewFrame > :is(pf-dialog-view, pf-list-view)*/
  /*!*, fp-dialog > :is(pf-dialog-view, pf-list-view)*!*/
  /*{*/
  /*  min-height: 100%;*/
  /*  max-height: 100%;*/
  /*  overflow: auto;*/
  /*  !*display: contents; !*  flexen können wir leider nicht, dann geht das scrollen nicht mehr richtig*!*/
  /*  !* ts-next *!*/
  /*  display: grid;*/
  /*  grid-template-columns: var(--componentview-sidepanel-left-column) minmax(min(90vw, 620px, 100%), 1fr) var(--componentview-sidepanel-right-column);*/
  /*  grid-template-rows: minmax(min-content, var(--componentview-toolbar-row)) 1fr var(--componentview-footer-row);*/
  /*}*/

  /*div.tmplWorkarea .viewFrame > :is(pf-dialog-view, pf-list-view) .tmplControlBar,*/
  /*fp-dialog > :is(pf-dialog-view, pf-list-view) .tmplControlBar{*/
  /*  grid-column-start: 1;*/
  /*  grid-column-end: 4;*/
  /*  grid-row: 1;*/
  /*}*/
  /*div.tmplWorkarea .viewFrame > :is(pf-dialog-view, pf-list-view) .tmplListFooter,*/
  /*fp-dialog > :is(pf-dialog-view, pf-list-view) .tmplListFooter{*/
  /*  grid-column-start: 1;*/
  /*  grid-column-end: 4;*/
  /*  grid-row: 3;*/
  /*}*/

  /*div.tmplWorkarea .viewFrame > :is(pf-dialog-view, pf-list-view) .sidepanel,*/
  /*fp-dialog > :is(pf-dialog-view, pf-list-view) .sidepanel {*/
  /*  overflow: auto;*/
  /*  position:sticky;*/
  /*  top: var(--height-toolbar);*/
  /*  height: max-content;*/
  /*  max-height: 100%;*/
  /*}*/

  /*div.tmplWorkarea .viewFrame > :is(pf-dialog-view, pf-list-view) .sidepanel-left,*/
  /*fp-dialog > :is(pf-dialog-view, pf-list-view) .sidepanel-left{*/
  /*  grid-column: 1;*/
  /*  grid-row: 2;*/
  /*}*/
  /*div.tmplWorkarea .viewFrame > :is(pf-dialog-view, pf-list-view) .sidepanel-right,*/
  /*fp-dialog > :is(pf-dialog-view, pf-list-view) .sidepanel-right{*/
  /*  grid-column: 3;*/
  /*  grid-row: 2;*/
  /*}*/

  /*div.tmplWorkarea .viewFrame > :is(pf-dialog-view, pf-list-view) > form,*/
  /*fp-dialog > :is(pf-dialog-view, pf-list-view) > form{*/
  /*  grid-row: 2;*/
  /*  grid-column: 2;*/
  /*}*/

  /* 2024.1
  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;
  }
  .sidepanel-left > pf-list-view .jml_formCalendar,
  .sidepanel-right > pf-list-view .jml_formCalendar{
    overflow: hidden;

    &  > .bmlf_calendar.bmlf_calendar_week {
      max-height: 100%;
    }
  }

  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 {
    margin-left: var(--width-componentspacing, 12px);
  }

  .dmContainer.maximize .dmContent  > div.tmplWorkarea {
    margin: 0;
    padding: 0;

    & .viewFrame:first-of-type:last-of-type{
      margin: 0;
      padding: 0;
      max-height: none;
    }
  }

  .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 *!*/
    /*  height: max-content;*/
    /*}*/



    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);
      top:0;
    }

    .jml_formTiles .jml-tiles-columnheader{
      position: sticky;
      top: 0; /*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: 0;
    }

    .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: 0; /*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,*/
    form .buttonarea.buttonareaFilled,
    .jml_formDialog .buttonarea.buttonareaFilled,
    .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;
  }

  @keyframes mobile-dm-sidepane {
    to {
      transform-origin: right;
      transform: translateX(200px);
    }
  }


  /* Scrollverhalten auf screens mit kleinerer Breite:
    Leftarea kann nach links herausgeschoben werden (inklusive snapping)
  */
  @media screen and (max-width: 500px) {
    /*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: center;
    }

    pf-detailmanager div.tmplWorkarea {
      min-width: unset;
      scroll-snap-align: end;
    }

    pf-detailmanager.dmContainer > div.dmContent {
      min-width: 100vw;
      inset: 0 0 0 var(--dm-width-sidebar);
    }

    pf-detailmanager.dmContainer > div.dmContent:has(.tmplWorkarea > .boxarea) {
      min-width: calc(100vw + 400px);
    }

    pf-detailmanager.dmContainer > div.dmSidepane {
      scroll-snap-align: start;
      perspective: 1000px;
    }

    pf-detailmanager.dmContainer.show-stack .dm-stack {
      min-width: max-content;
    }

    pf-detailmanager.dmContainer.show-stack .dm-stack.scrollable{
      min-width: unset;
    }

    pf-detailmanager.dmContainer.show-stack .scrollable .dm-stack-card {
      scroll-snap-align: center;
    }

    pf-detailmanager.dmContainer:not(.show-stack) .dm-stack-card {
      box-shadow: none;
    }
    .dmContainer > div.dmContent {
      z-index: 200;
    }

    fp-frame {
      overflow-x: scroll;
      overflow-y: hidden;
      scroll-snap-type: x proximity;
    }

    /*noinspection CssInvalidFunction,CssUnknownProperty*/
    @supports (animation-timeline: scroll()) {
      pf-detailmanager.dmContainer:not(.show-stack) > div.dmSidepane .dm-stack-card-top {

        /*animation: mobile-dm-sidepane 2s linear infinite;*/
        animation: mobile-dm-sidepane linear both;
        animation-timeline: scroll(x);
      }
    }
  }

  /* 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: 799px), screen and (max-width: 500px), print {
    /* Mobile
    tmplCenter scrollt horz, wg leftarea
    WORKAREA: darf scrollen - View-Frames dagegen nicht*/

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

    div.tmplWorkarea:not(.row) .portal-menu {
      overflow: initial;
      height: auto;
    }

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

    div.tmplWorkarea:not(.row) .viewFrame:first-of-type:last-of-type:not([fullscreen]) {
      overflow: auto;
      max-height: 100%;
      margin: 0;
    }

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

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

    /* Bereich im Inhalt muss NICHT mehr scrollen
    und darf sich ungehindert ausbreiten */
    div.tmplWorkarea:not(.row) > .viewFrame > pf-dialog-view .groups,
    div.tmplWorkarea:not(.row) > .viewFrame > pf-list-view .jml_formCalendar > .bmlf_calendar.bmlf_calendar_week,
    div.tmplWorkarea:not(.row) > .viewFrame > pf-list-view .bmlf_calendar_month,
    div.tmplWorkarea:not(.row) > .viewFrame > pf-list-view .bmlf_calendar_team,
    div.tmplWorkarea:not(.row) > .viewFrame > pf-list-view .bmlf_calendar_team_rotated,
    div.tmplWorkarea:not(.row) > .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! */
    }

    /* In Der Wochenansicht sind die Scrollbalken nun auch unnötig */
    div.tmplWorkarea:not(.row) > .viewFrame > pf-list-view .bmlf_calendar div.timeScroller,
    div.tmplWorkarea:not(.row) > .viewFrame > pf-list-view .bmlf_calendar div.timeScrollerDummy{
      overflow: hidden;
    }
  }

  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 th[data-column-key] label,
  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);
  }


  /* 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 td.accumulation{
    background-color: var(--color-primary-tint);
  }
  table.listbody th.accumulationSum,
  table.listbody td.accumulation.icon {
    text-align: right;
  }

  table.listbody tr.jmlColumnCaptions th.accumulationSum{
    background-color: var(--color-primary-tint);
    border-top-left-radius: 12px;
  }
  table.listbody tr.jmlColumnCaptions th.accumulationName{
    background-color: var(--color-primary-tint);
    border-top-right-radius: 12px;
    padding: 0 10px;
    --color-input-background: transparent;
    --border-top-input: 0 none;
    --border-right-input: 0 none;
    --border-bottom-input: 0 none;
    --border-left-input: 0 none;
    --border-radius-input: 0px;
    --padding-input-horz: 1px;
  }


  table.listbody th.groupheader.active {
    border-top: 2px solid var(--color-table-separator);
    font: var(--font-small);
  }
  table.listbody th.groupheader.accumulation {
    border-top: 0 none;
    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 tr.jmlColumnCaptions th.sorted {
    border-top: 2px solid var(--color-table-separator);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }

table.listbody td.sorted,
table.listbody tr.jmlColumnCaptions th.sorted{
  --color-table-separator: transparent;
  background-color: var(--color-primary-tint);
}

  table.listbody th.group-start,
  table.listbody td.l.group-start,
  table.listbody td.sorted.sorted,
  table.listbody tr.jmlColumnCaptions th.sorted.sorted {
    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,
  table.listbody td.sorted.sorted,
  table.listbody tr.jmlColumnCaptions th.sorted.sorted
  {
    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*/
    background: linear-gradient(180deg, transparent 0%, transparent 98%, rgba(128, 128, 128, 0.5) 100%) repeat;
    background-size: 64px 64px; /* keine ahnung warum 66px */
  }

  .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 {
    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;
    /*table-layout: fixed;*/
    width: 100%;
    font: var(--font-normal);
  }

table.listbody col.accumulationSum {
  width: 32px;
}

table.listbody col.accumulationName {
  min-width: 200px;
}

  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;
  }

/* -----------   ajaxFieldEdit  ---------------*/
td[alt-cell-editable]{
  outline: 1px solid transparent;
  transition: outline-color 1000ms;
}
td[alt-cell-editable]:hover{
  /*background: linear-gradient(225deg, var(--color-shade-4) 6px, transparent 6px);*/
  /*border-color: var(--color-shade-4);*/
  position: relative;
  outline: 1px solid var(--color-shade-4);
  /*box-shadow: 0 0 6px inset var(--color-accent);*/
}

body.alt-show-cell-editor td[alt-cell-editable] > button.cell-edit-button { display : none;}

td[alt-cell-editable] > button.cell-edit-button {
  float:right;
  color: var(--color-main-font);
  border: 0 solid transparent;
  background-color: transparent;
  border-radius: 3px;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.25);
  height: 24px;
  width: 24px;
  padding-top: 4px;
  padding-right: 2px;
  margin-bottom: -10px;
  font-size: 7px;
  top: 2px;
  right: 2px;
  display: none;
  position: absolute;
  transition: opacity 500ms 100ms ease allow-discrete;
  opacity: 0.1;
  background-image: url("/htdocs/gui/quickfilter/css_listcontrol_editmode.svg");
  background-size: 24px;
  filter: grayscale(100%);
  /*transform-origin: top right;*/
  /*transform: rotateX(50deg) skewX(17deg);*/
}

@starting-style { /* <-- and this line */
  td[alt-cell-editable]:hover > button.cell-edit-button {
    display: inline-block;
    opacity: 0;
  }
}

td[alt-cell-editable]:hover > button.cell-edit-button {
  display: inline-block;
  opacity: 0.75;
}
td[alt-cell-editable] > button.cell-edit-button:hover{
  opacity: 1;
  background-color: var(--color-shade-none);
}

td[clickable="true"],
td.l.clickable,
td[cell-editable],
body.alt-show-cell-editor td[alt-cell-editable] {
  background: linear-gradient(225deg, var(--color-accent) 6px, transparent 6px);
  cursor: url(../css/embed/pencil.svg) 2 32, text;
}

td[clickable="true"]:hover,
td.l.clickable:hover,
td[cell-editable]:hover,
body.alt-show-cell-editor td[alt-cell-editable]:hover{
  background: linear-gradient(225deg, var(--color-accent) 6px, transparent 10px);
  border-color: var(--color-accent) !important;
  outline: 2px solid var(--color-accent);
  box-shadow: 0 0 6px inset var(--color-accent);
}


td.l.clickDenied {
  cursor: default;
}

.ajaxCellEditHeader {
  max-width: min(80vw, 500px);
  & > fp-format-entity {
    pointer-events: none;
    --icon-size: 32px;
    font: var(--font-subheader);
    font-weight: bold;
  }
}

#ajaxCellEditForm {
  width: clamp(360px, 640px, 75vw);

  & fp-field.richtextarea {
    min-width: min(80vw, 620px);
  }

  & > div {
    padding: var(--width-componentspacing);
  }
}


.mi-selectall-button,
  .mi-selection-status {
    margin: 0;
    padding: 0;
    border: 0;
    display: inline-block;
    --height-input: 24px;
    font-size: 12px;
    background-color: var(--color-button-back);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    transition: transform 200ms var(--transition-overshoot-both), background-color 0ms 100ms;
    transform: rotateY(180deg);
    cursor: pointer;
  }

  .mi-selectall-button::after,
  .mi-selection-status::after {
    display: inline-block;
    content: '✓';
    color: var(--color-primary-contrast);
    opacity: 0;
    transition: opacity 0ms 100ms;
  }

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

  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;
    box-sizing: border-box;
  }

  .bmlf_calendar .subPixelCursor {
    border-width: 3px 1px 1px 1px;
    width: 100%;
    padding-right: 60px;
    left: auto;
    right: 0;
    text-align: left;
    overflow: visible;
    transition: top 300ms;
    transition-timing-function: var(--transition-overshoot-ease);
    /*transition-timing-function: var(--transition-emphazised-decelerate);*/
  }

  .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_week .bmlf_calendardays col.day {
    width: 16%;
  }
  .bmlf_calendar_week .bmlf_calendardays col.day.weekend {
    width: 8%;
  }

  .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 :is(.bmlf_calendarhour, .bmlf_calendarday) .background{
    position: absolute;
    opacity: 0.5;
    width: 100%;
  }
.bmlf_calendar :is(.bmlf_calendarhour, .bmlf_calendarday) .background:hover{
  opacity: 0.75;
}

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

  .bmlf_calendar div.bmlf_calendarhour {
    height: 64px;
    box-sizing: border-box;
    line-height: 18px;
    /*top: -9px;*/
    position: relative;
    margin-left: auto;
    padding: 0 10px 0 0;
    text-align: right;
    display: block;
    width: 45px;
    color: #999;
    font: var(--font-small);
    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: 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;
    position: relative;
    background: linear-gradient(180deg, transparent 0%, transparent 98%, rgba(128, 128, 128, 0.5) 100%) repeat;
    background-size: 64px 64px;
  }

  .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 4px 6px rgba(0,0,0,0.25);
    border-left: 3px solid var(--color-primary);
    border-right: 3px 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_calendarDateNav.bmlf-cal-day.today > div {
    content: '';
    display: block;
    inset: 0 0 0 0;
    height: 100%;
    box-sizing: border-box;
    padding: 1px;
    box-shadow: 0 -4px 6px rgba(0,0,0,0.25);
    border-top: 3px solid var(--color-primary);
    border-left: 3px solid var(--color-primary);
    border-right: 3px solid var(--color-primary);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background: var(--color-card-background);
  }

  .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);
  }



  /* 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;
    background-color: var(--color-bar,  var(--color-shade-none));
  }

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

  @keyframes being-touched-vertical {
    from { transform: translate3d(0, -7px,  0); }
    25% { transform: translate3d(0, 4px,  0); }
    50% { transform: translate3d(0, -2px,  0); }
    75% { transform: translate3d(0, 1px,  0); }
    to { transform: translate3d(0, 0,  0); }
  }
  .bmlf_calendar div.bmlf_calendarEntry.dnd-touched-neighbor {
    transition: none 0ms;
    animation: being-touched-vertical 150ms;
    outline: 2px solid var(--color-primary);
  }

  .bmlf_calendar div.bmlf_calendarEntry {
    /*overflow :hidden;*/
    cursor: default;
  }

  .bmlf_calendar div.bmlf_calendarBigEntry[draggable]:hover,
  .bmlf_calendar div.bmlf_calendarEntry:hover {
    z-index: 100; /* Uhrzeitlinie ist bei 99 */
    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 {
    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>h3 {
    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>h3 {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .bmlf_calendar .bmlf_cE_content>h3 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;
    background-color: var(--color-bar, transparent);
    /* 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 h3 {
    text-decoration: line-through;
  }


  .bmlf_calendar div.ce_defaultplan h3 {
    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;
    background-color: var(--color-back, rgb(from var(--color-card-background) r g b / calc(alpha / 1.4)));
  }
  .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 {
    position: absolute;
    background: linear-gradient(to bottom, transparent 0%, transparent 90%, rgb(from var(--color-primary) r g b / calc(alpha / 2)) 100%);
    height: 20px;
    margin-top: -20px;
    width: 100%;
  }
.bmlf_calendar div.bmlf_vCurrentTime.today {
  background: linear-gradient(to bottom, transparent 0%, rgb(from var(--color-primary) r g b / calc(alpha / 4)) 90%, var(--color-primary) 100%);
  z-index: 99; /* soll über den Terminen liegen*/
}

  .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;
  }
  .jml_formCalendar > .bmlf_calendar.bmlf_calendar_week {
    max-height: 1553px;
    height: 100%;
  }
  .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: 64px;
  }

  .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;
    background-color: var(--color-card-background);
  }

  .tmplLeftarea div.boxarea div.box {
    width: 300px;
  }

  div.boxarea div.box div.box_header {
    padding: 0 0 0 var(--width-componentpadding, 8px);
    color: var(--color-toolbar-font);
    font: var(--font-subheader);
    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_uploader {
    padding: 5px 1px 3px 1px;
    /* o r u l */
    margin: 0 auto 0 auto;
    color: #000;
    font-size: 11px;
    /*height:200px;*/
  }

div.boxarea div.box_myday {
    min-width: min(320px, 30%);
    width: 100% !important;
    margin: 0;
    & fp-tab-container {
      margin: 0;
    }
  }

div.box_myday pf-list-view{
  overflow: auto;
  max-height: calc(100vh - var(--height-topmenu1) - var(--height-footer) - var(--height-toolbar) - 3 * var(--width-componentspacing));
}

  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);}

  :is([fullscreen],pf-detailmanager.maximize) fp-inline-svg.fullscreen-switcher  .tdown{ transform: translateY(-4px);}
  :is([fullscreen],pf-detailmanager.maximize) fp-inline-svg.fullscreen-switcher  .tup{ transform: translateY(4px);}
  :is([fullscreen],pf-detailmanager.maximize) fp-inline-svg.fullscreen-switcher  .tleft{ transform: translateX(-4px);}
  :is([fullscreen],pf-detailmanager.maximize) 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 {
    font: var(--font-normal);
    line-height: 1.2;
    color: var(--color-card-font);
    hyphens: auto;
  }

  div.box_info .boxsegmentcontent,
  div.default-padding .boxsegmentcontent {
    padding: 4px var(--default-padding, 12px);
  }

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

  div.box_hint .boxsegmentcontent {
    padding: 10px 13px;
    font-size: var(--font-small, 11px);
    line-height: 1.2;
    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;
  }

  .preview-card {
    /*box-shadow: var(--shadow-cards);*/
    max-width: 320px;
    border-radius: 6px;
    min-width: var(--width-leftarea, 200px);
    background-color: var(--color-card-background);
  }


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

  .preview-card.page-background,
  .preview-card-mainpage-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;
  }

  .preview-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;
  }

  [action-click] {
    cursor: pointer;
  }

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

table.listbody tr.selected{
  background-color: var(--color-selected-item);
}

  .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,
  .pf_formNavigationList .treestructureIcon .treeNodeImage {
    --icon-size: 20px;
  }
  .pf_formNavigationList td:first-child fp-inline-svg,
  .pf_formNavigationList td:first-child img,
  .pf_formNavigationList .treestructureIcon .treeNodeImage {
    vertical-align: middle;
    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{
    width: 20px;
    position: relative;
  }

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

  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: var(--color-status-red);
    font-size: 10px;
    font-style: normal;
  }

  pf-dialog-view div.globalerrorhint,
  #report div.globalerrorhint,
  #dialogForm div.globalerrorhint {
    color: var(--color-status-red);
    font: var(--font-medium);
    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;
  }

  table.listbody th.l.iaall {
    padding: 0;
  }

  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 {
    padding: 0 0 0 1px;
  }

  .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: 4px;
    /*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.buttonareaFilled,form.buttonarea.buttonareaFilled {
    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 {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    gap: var(--width-componentpadding);
    padding: var(--width-componentpadding);
  }

  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: var(--height-input);
  }

  .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;
    --font-weight-button: 400;
    --color-toolbar-button: transparent;
    --color-toolbar-font: currentColor;
    --color-toolbar-button-hover: transparent;
    --color-button-raised-back: transparent;
    --color-button-raised-font: var(--color-primary-for-text);
  }
  /*fp-view-wrapper {*/
  /*  container-type: inline-size;*/
  /*  container-name: view-wrapper;*/
  /*}*/

  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 */
    container-type: inline-size; /* Die Toolbar ist ein Container dessen Größe die inneren Elemente abfragen können */
    container-name: toolbar;
  }

fp-view-wrapper > :is(.sidepanel-left, .sidepanel-right):not(:empty),
fp-dialog > :is(.sidepanel-left, .sidepanel-right):not(:empty){
  background: yellow;
  min-width: 240px;
}

/*.tmplFormContainer .sidepanel-left{*/
/*  position: sticky;*/
/*  top: 0;*/
/*}*/
/*.tmplFormContainer .sidepanel-right {*/
/*  position: sticky;*/
/*  top:0;*/
/*}*/

  .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;
  }

  pf-dialog-view .qfbuttonline.search {
    padding-right: var(--width-componentpadding);
  }

  .qfbuttonline.search:last-child {
    padding-right: 0;
  }

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

  .qfbuttonline.quickfilter {
    flex-grow: 0;
    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 */
  }
  .qfbuttonline.spacer, .qfbuttonline.quickfilter.spacer  {
    flex-grow: 1;
    flex-shrink: 1;
  }

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

  .tmplControlBar, .bmlf_calendar, th.accumulation {
    /*--height-input: 20px;*/
    --height-input-button: 16px;
    --entry-title-height: 16px;
    --height-input: 24px; /* die Navigations-Buttons orientieren sich daran */
    --padding-input-vert: 2px;
  }

  .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 fp-format-string{
    width:80px;
    transition: min-width 300ms var(--transition-strong-ease);
  }

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

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

  /* Toolbar bis 500 px spart Platz */
  @container toolbar (max-width: 700px) {
    /* Wenn die Toolbar nicht genug Platz hat, blenden wir
       die nicht aktiven Views aus. Der Nutzer kann über die
       aktive View auch auf andere Views wechseln
     */
    .qfbuttonline.views .qfbuttonlinebutton:not(.qfbuttonlinebuttonactive) {
      display: none;
    }

    fp-field[editable].date-field {
      min-width: unset; /* minimalbreite für eine sinnvolle Eingabe (platz für clear- und calendar-widget) */
    }

    /* Das Schnellsuchfeld hilft mit beim sparen*/
    .search:not(:first-child) > .bmlfQuickSearch {
      padding-left: 0;
      width: 64px;
      --padding-input-horz: 3px;
      & fp-field fp-format-string{
        width: 48px;

      }
    }
    /*  Der Nutzer kann auch über das Filter-Symbol resetten */
    .qfbuttonline.search .reset-filter {
      display: none;
    }
    /* Manche Aktionen befinden sich auch im Kebab-Menü und können in der Toolbar eingespart werden */
    .qfbuttonline.actions .redundant {
      display: none;
    }
  }

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

  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: var(--font-menu);
    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-primary);
    --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 .filterfields {
    padding: 10px 10px 10px 10px;
  }

  .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(header) ,
  fp-dialog::part(header) {
    --stroke-width: 0.5;
  }

  fp-modal:not([mode="fullscreen"])::part(modal),
  fp-dialog:not([mode="fullscreen"])::part(modal) {
    border-radius: var(--border-radius-modal);
    max-height: inherit;
    max-width: inherit;
  }

  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: 0 var(--width-componentpadding) 0 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;
  }

  .jml_formDialog .groups {
    flex-grow: 1; /* Mehr Platz als nötig? Eingabefelder sollten oben sein (also müssen Groups wachsen) */
  }

  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;
    margin-left: auto;
    margin-right: 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);
  }

  .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;
  }

  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;
    min-width: auto !important;
  }

  .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;
  }

.jmlFilterGroup .dialog-row .d{
  flex-basis: 120px;
}


@media (min-width: 600px) {

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

  fp-dialog[mode="content"] {
    max-width: 80vw; max-height: 80vh;
    & .jml_formDialog {  min-width: 400px; }
    & .jml_formDialog > .groups { min-height: 120px; }
  }
}

@media (min-width: 1024px) {
  /* ab 1024px soll auch ein dreispaltiger Dialog gut aussehen */
  fp-dialog[mode="content"] {
    & .jml_formDialog {  min-width: 500px; }
  }
}

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

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

  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: 16px;
    text-align: center;
    --height-input: 20px;
    --color-button-back: transparent;
  }

  .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;
  }

.session-menu.jml_formDialog .dialog-row .d {
  flex-basis: 150px;
}

[has-sidepanel-right]:is(pf-dialog-view, pf-list-view):has(fp-view-wrapper.project_activity)  {
  --componentview-sidepanel-right-column: 1fr;
}