/* ------------------------------------------------------------------------------------------------- */
/* -------------------------------                                     ----------------------------- */
/* -------------------------------   Formulare, Inputfelder            ----------------------------- */
/* -------------------------------                                     ----------------------------- */
/* ------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------- */

form {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent; /* var(--color-card-background);*/
  color: var(--color-shade-3-contrast);
}

/*
  nur forms, deren größe nicht vom Inhalt abhängt, dürfen als
  container-query-Ziel für den Inhalt dienen:
  https://developer.mozilla.org/en-US/docs/Web/CSS/container-type
*/
form.jml_formDialog {
  width: 100%;
  container-name: form-element;
  container-type: inline-size;
}

form,
form .groups,
form .buttonarea {
  transition: opacity 0.5s;
  transition-delay: 1s; /* nur wenn es laenger dauert */
}

form.refreshing .groups,
form.refreshing .buttonarea {
  opacity: 0.5;
  cursor: wait;
}

.tmplWorkarea {
  --form-padding: calc(2 * var(--width-componentspacing));
}
@media (min-width: 1300px) {
  .tmplWorkarea {
    --form-padding: calc(3 * var(--width-componentspacing));
  }
}
@media (min-width: 1600px) {
  .tmplWorkarea {
    --form-padding: calc(4 * var(--width-componentspacing));
  }
}

@container form-element (max-width:640px) {
  .groups {
    --dialog-row-indent: 4px;
    --width-spacing-dialog-fieldset-horz: 8px;
  }
  pf-richtext-editor .cke_toolbox {
    white-space: normal;
  }
  pf-richtext-editor .cke_toolbar {
    float: none;
    display: inline-block;
    height: 28px;
    vertical-align: middle;
  }
  pf-richtext-editor .cke_combo_button .cke_combo_text{
    padding:0 4px;
    float: none;
  }
  pf-richtext-editor .cke_combo_button .cke_combo_open{
    display: none;
  }
}
@container form-element (max-width:500px) {
  .groups {
    --dialog-row-indent: 0;
    --display-of-empty-dialog-cell: none; /* keine künstlichen Abstände auf kleinen Displays */
  }

  .dialog-row .d.flex-no-grow{ flex-basis: max-content; /* nicht breiter als nötig */ }

  .jml_dialogButtons {
    display: inline-flex;
  }
  .jml_dialogButtons > .jmlButtonField {
    white-space: normal;
    font: var(--font-small);
    line-height: normal;
    text-overflow: ellipsis;
  }
}


.tmplWorkarea .bmdf_dialogHeader,
.tmplWorkarea .viewFrame .jmlListheader {
  padding-top: var(--form-padding, 2px)
}

.tmplWorkarea .bmdf_dialogHeader {
  padding-left: var(--form-padding, 2px);
  padding-right: var(--form-padding, 2px);
}

.tmplWorkarea .viewFrame:not([fullscreen], .fullscreen) .jml_formDialog .groups,
.viewFrame:not([fullscreen], .fullscreen) div.jml_dialogButtons
{
  /*bis 2024.1 - sind nun aber zentriert padding-left: var(--form-padding, 2px);*/
  /*padding-right: var(--form-padding, 2px);*/
  width: 100%;
  max-width: 1000px;
  margin: auto;
  box-sizing: border-box;
}

pf-detailmanager.maximize .tmplWorkarea .viewFrame .jml_formDialog .groups,
pf-detailmanager.maximize .tmplWorkarea .viewFrame .jml_formDialog div.jml_dialogButtons{
  max-width: none;
}

form.preventSubmit .jml_dialogButtons {
  opacity: 0.5;
  pointer-events: none;
}

div.richtexteditor:has(label.integrated.output-label) {
  position: relative;
  padding-top: 3px;
}
fp-ellipsis > div.richtexteditor:has(label.integrated.output-label) {
  padding-top: 12px; /* Bevor der Container unser Label abschneidet, holen wir uns etwas Platz*/
  & label.integrated.output-label {
    top: 8px;
    background: none;
  }
}

div.richtexteditor section {
  padding: var(--padding-input-vert) var(--padding-input-horz);
}

fp-ellipsis > output,
output[contains-html],
div[contains-html] {
  display: contents;
}

output[data-lineclamp="1"] {--line-clamp-value:1;}
output[data-lineclamp="2"] {--line-clamp-value:2;}
output[data-lineclamp="3"] {--line-clamp-value:3;}
output[data-lineclamp="4"] {--line-clamp-value:4;}
output[data-lineclamp="5"] {--line-clamp-value:5;}
output[data-lineclamp="6"] {--line-clamp-value:6;}
output[data-lineclamp="7"] {--line-clamp-value:7;}
output[data-lineclamp="8"] {--line-clamp-value:8;}
output[data-lineclamp="9"] {--line-clamp-value:9;}

output[data-lineclamp] {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--line-clamp-value);
  line-height: 1.2;
  transition: all 200ms 300ms;
}
output[data-lineclamp]:hover {
  line-height: 1.2;
  -webkit-line-clamp: unset;
  /* Der Container "verbraucht nach unten keinen Platz mehr (wir sehen dann alles) */
  margin-bottom: -100%;
  /* Wir müssen den Container um die hälfte der Zeilen nach oben schieben, damit die obere Kante stabil bleibt*/
  position: relative;
  z-index: 2000;
  top: calc(-0.6em * var(--line-clamp-value));
  background: var(--color-card-background-initial);
  color: var(--color-card-font-initial);
  box-shadow: var(--shadow-cards);
}



textarea {
  font-family: inherit;
  font-size: inherit;
}

.placeholder {
  font-style: italic;
  color: inherit;
  opacity: 0.4;
  font-size: 0.9em;
  text-decoration: none;
}

:-ms-input-placeholder {
  font-style: italic;
  color: inherit;
  opacity: 0.4;
  font-size: 0.9em;
  text-decoration: none;
}

::-webkit-input-placeholder {
  font-style: italic;
  color: inherit;
  opacity: 0.4;
  font-size: 0.9em;
  text-decoration: none;
}

::-moz-placeholder {
  font-style: italic;
  color: inherit;
  opacity: 0.4;
  font-size: 0.9em;
  text-decoration: none;
}

fp-expander.gui-group,
fp-expander.filter-groups {
  scroll-margin-top: 50px; /* Wenn automatisch zu dieser Gruppe gescrollt wird, lassen wir 50px Platz für eine etwaige Toolbar */
  height: auto;
  font: var(--font-medium);
  --box-overflow: none; /*ab newUI nicht mehr nötig <- Zeitmatrix-> ganzerMonat */
  --color-toolbar-back: transparent;
  --font-header: var(--font-medium);
}


fp-expander.gui-group::part(headerbar),
fp-expander.filter-groups::part(headerbar) {
  padding: 0 4px;
  margin: 2px 4px 2px 4px;
  transition: background 500ms;
  border-radius: calc(var(--height-input) / 2);
  --color-toolbar-font: var(--color-primary-for-text);
  --color-toolbar-back: var(--color-shade-1); /* wegen 'sticky' müssen die den Hintergrund verstecken */
}

/* weil die Expander 2. Ebene auch mal direkt unter einem GuiItem stehen, brauchen wir obendran etwas Abstand */
.dialog-row + fp-expander.gui-group-depth-1 {
  margin-top: var(--width-spacing-dialog-fieldset-vert, 8px);
}

fp-expander.gui-group-depth-0::part(headerbar) {position: sticky; top: 0; z-index: 2;}
fp-expander.gui-group-depth-1::part(headerbar) {position: sticky; top:var(--height-input); z-index: 1;}

/*pf-dialog-view[has-toolbar] fp-expander.gui-group::part(headerbar) {position: sticky; top: var(--height-toolbar); z-index: 1;}*/
/*pf-dialog-view[has-toolbar] fp-expander.gui-group-depth-1::part(headerbar) {position: sticky; top:calc(var(--height-toolbar) + var(--bar-height)); z-index: 1;}*/


fp-expander.gui-group-depth-0::part(headerbar),
fp-expander.filterfields {  --color-toolbar-back: var(--color-shade-2); --bar-height: var(--height-input); font: var(--font-subheader, var(--font-header, var(--font-normal)));}
fp-expander.gui-group:not(.gui-group-depth-0)::part(headerbar) {
  font: var(--font-normal);  --bar-height: calc(var(--height-input) * 0.75);
}
fp-expander.gui-group-depth-1::part(headerbar) { margin-left: 16px; }
fp-expander.gui-group-depth-2::part(headerbar) { margin-left: 32px; }
fp-expander.gui-group-depth-3::part(headerbar) { margin-left: 48px; }
/* Damit die Positionierung passt, wird das hint zusätzlich noch um 28 px verschoben. */
fp-expander.gui-group-depth-0 div.grouphint { margin-left: 34px; }
.dialog-row + fp-expander.gui-group-depth-1 div.grouphint { margin-left: 44px; }
.dialog-row + fp-expander.gui-group-depth-2 div.grouphint { margin-left: 60px; }
.dialog-row + fp-expander.gui-group-depth-3 div.grouphint { margin-left: 76px; }

fp-expander.gui-group:has(fp-field[error])::part(headerbar) {
  --color-toolbar-back: var(--color-status-red);
  --color-toolbar-font: #FFF;
}

fp-expander.gui-group::part(divider),
fp-expander.filter-groups::part(divider) {
  display: none;
}

/*geht nicht mit sticky headern fp-expander.gui-group:first-child::part(headerbar) {*/
/*  padding-top: 8px;*/
/*}*/

fp-expander:not([disabled],[background-disabled]).gui-group:focus-visible::part(headerbar),
fp-expander:not([disabled],[background-disabled]).gui-group::part(headerbar):hover,
fp-expander:not([disabled],[background-disabled]).filter-groups:focus-visible::part(headerbar),
fp-expander:not([disabled],[background-disabled]).filter-groups::part(headerbar):hover{
  --color-toolbar-back: var(--color-shade-3);
}

fp-expander.gui-group > *{
  font: var(--font-medium);
}

fp-expander.gui-group .group-summary-value {
  min-width: 150px;
  text-align: right;
  --padding-input-horz: 0;
  --chip-color: transparent;
  color: var(--color-main-font);
}

fp-expander.gui-group .group-summary-value {
  padding-left: 32px;
  padding-right: 4px;
  display: flex;
  height:100%;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  --padding-input-horz: 3px;

  & .item {
    text-align: center;
    height: min(20px, calc(var(--bar-height) - 6px));
    min-width: 24px;
    box-sizing: border-box;
    border-radius: 4px;
    overflow: hidden;
    /*border: 1px solid var(--color-input-border);*/
    background-color: var(--color-input-background);
    font: var(--font-summary-item, var(--font-small));
    transition: opacity 200ms;
    opacity: 1;
    display: flex;
    align-items: center;
    white-space: nowrap;
  }
  & .item.first {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
  }
  & .item.last {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
  }

  & .item.empty {
    display: none;
  }

  & .item > * {
    --icon-size: var(--icon-size-summary-item, 12px);
  }
  & .item > label { padding: 0 0 0 var(--padding-input-horz); font: var(--font-summary-item, var(--font-small));}
  /* Das typische fp-format: */
  & .item > [slot="input"] {padding: 0 var(--padding-input-horz);}
  /* besondere fp-formate: */
  & .item > fp-format-color {  --padding-input-horz: 0; }
  & .item > fp-format-entity {  --padding-input-horz: 0; }
  & .item > fp-format-entity::part(container) {  padding: 2px 4px; }
  & .item > fp-field {  --height-input: 28px; }
}

fp-expander.gui-group[isopen] > .group-summary-value .item {
  opacity: 0;
  pointer-events: none;
}

body.debugmode fp-expander.gui-group[isopen] > .group-summary-value .item {
  opacity: 0.75;
}

fp-expander.gui-group .group-summary-value .item:not(:has([value])) {
  opacity: 0;
  pointer-events: none;
}

/* -----------------------  infoicon htmlbuilder.makeInfoImage  ------------------------*/
div.infoicon {
  display: inline;
  position: relative;
  vertical-align: middle;
}

.jmlHintIcon {
  vertical-align: middle;
  height: 16px;
  --icon-size: 16px;
}

.smartInputElement .jmlHintIcon {
  vertical-align: top;
}

.label .jmlHintIcon {
  height: 16px;
  margin-top: -1px;
  right: -4px; /** das padding des td macht genug platz */
}

div.infoicon div.anchor {
  position: absolute;
  z-index: 39;
  top: 0;
  left: 0;
  overflow: visible;
}

div.infoicon div.anchor div.infotext {
  display: none;
  left: 0;
  top: -2px;
  position: relative;
  z-index: 40;
  text-align: left;
  white-space: nowrap;
  background-color: var(--color-shade-none);
  padding: 3px;
  border: 1px solid currentColor;
}

div.infoicon:hover div.anchor div.infotext {
  display: block
}

.jmlActionGuiItems:is(fp-modal, fp-popup) {
  margin: 8px 0;
  min-width: 240px;
}
.jmlActionGuiItems:is(fp-modal, fp-popup) .jmlButton {
  vertical-align: bottom;

}

fp-field > *[slot="input"], output > *[slot="input"] {
  /*--padding-input-horz: max(var(--padding-input-horz, 0px), calc(var(--border-radius-input, 0px) / 2));*/
  font-family: var(--font-input, inherit), sans-serif;
}

output > fp-format-selectbar::part(track),
output > fp-format-selectbar::part(highlight){
  background: transparent;
  border-radius: 0;
}

fp-field > :is(fp-format-select, fp-format-entity, fp-format-string[multiple]) {
  /** Padding:
      Oben und unten 0px - wird ja vertikal zentriert und ist somit unnötig
      Links-Rechts nehmen wir die Hälfte des InputRadius als Sicherheitsabstand,
      mindestens aber das gesetzte --input-padding
  */

  /*padding: 0 max(var(--padding-input-horz, 0px), calc(var(--border-radius-input, 0px) / 2));*/
}

fp-field > fp-format-select[multiple] {
  padding-top: var(--padding-input-vert);
  padding-bottom: 2px;
}

/* -----------   jml-select-bar  ---------------*/


fp-format-selectbar {
  --color: var(--color-main-font);
  --accent: var(--color-accent);
  border-radius: var(--border-radius-input);
  overflow: hidden;
  /* wir nehmen uns viel Höhe, der Nutzer soll kein Scharfschütze sein müssen*/
  height: calc(var(--height-input) - 4px);
  /*padding: 2px 0;*/
}

[readonly] > fp-format-selectbar {
  pointer-events: none;
}

fp-format-selectbar.htmlInput {
  border: none; padding: 0; background: transparent;
}

fp-format-priority-labels {
  display: flex;
}

/* -----------   RTEditor  ---------------*/

.richtexteditor .cke_editable_inline {
  min-height: 100px;
}

.dijitDialog .richtexteditor .cke_editable_inline {
  max-width: 610px;
  max-height: 300px;
  overflow-y: auto;
}

@media (min-width: 1000px) {
  .dijitDialog .richtexteditor .cke_editable_inline {
    max-width: 700px;
  }
}

@media (min-width: 1600px) {
  .dijitDialog .richtexteditor .cke_editable_inline {
    max-width: 800px;
  }
}

span.cke_button_icon.cke_button__emoji_icon {
  background: url(../field/button/base_button_cke_smily.svg) no-repeat;
  background-size: 16px;
}

/* -----------   hiddenactionbox  ---------------*/
fp-inline-svg.hiddenactionbutton, svg.hiddenactionbutton {
  cursor: pointer;
  vertical-align: middle;
  border: 0;
  height: 24px;
  width: 24px;
  color: inherit;
}

.hiddenactionbutton:focus {
  outline: dashed 1px rgba(0, 0, 0, 0.5);
}

.jml-tile-dark hiddenactionbutton:focus {
  outline: dashed 1px rgba(255, 255, 255, 0.5);
}

div.jmlPopupAnchor {
  display: none;
  z-index: 1999; /*Achtung  Dojo Hint-Blasen liegen auf 2000 */
  width: 0;
  height: 0;
  position: relative;
}

div.jmlPopupAnchor > .clickCatcher {
  height: 0;
  display: none;
  /* Begin Edge-workaround*/
  /*transition: height 10ms;*/
  /*transition-delay: 10ms;*/
  transform: translate3d(0,0,1px);
  /* END Edge-workaround*/
}

div.jmlPopupAnchor.open {
  display: block;
  overflow: visible;
}
div.jmlPopupAnchor.open > .clickCatcher {
  display: block;
}
div.jmlPopupAnchor.open-cc > .clickCatcher {
  transition-delay: 500ms; /* wir warten 500ms, falls ein doppelklick auf dem Button ausgeführt wird, bevor sich der cc über den button legt*/
  height: 100%;
}

div.jmlPopupAnchor .jmlPopupBox {
  overflow: hidden;
  transition: all 0s; /* sofortige auswirkung wenn zu (grundposition einnehmen, bevor animation startet) */
  transition-timing-function: ease-out;
  z-index: 10000;
}

.dj_webkit div.jmlPopupAnchor .jmlPopupBox,
.dj_chrome div.jmlPopupAnchor .jmlPopupBox {
  transform: translateZ(0); /* manchmal werden die popups abgeschnippelt (webkit-bug), wenn irgendwo anders auf der Seite 3d-Transformationen durchgeführt werden*/
}

div.jmlPopupBox {
  margin-bottom: 16px; /* wenn das popup nach oben aufgeht, sehen wir noch das input*/
  color: var(--color-card-font);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  cursor: default;
}

div.jmlPopupBox div.jmlPopupHeader {
  text-align: center;
  color: var(--color-primary-contrast);
  background-color: var(--color-primary)
}

div.jmlPopupBox div.jmlPopupHeader > h1 {
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 16px;
  line-height: 32px;
  --icon-size: 32px;
}

div.jmlPopupBox div.jmlPopupHeader > h1.FileAccessBox {
  overflow-x: hidden;
  text-overflow: ellipsis;
  padding: 4px 4px 4px 36px;
  max-width: 310px;
}

div.jmlPopupBox div.jmlPopupHeader > h1.FileAccessBox fp-format-entity{
  position:absolute;
  left: 2px;
}

div.jmlPopupBox.scrollablePopup div.jmlPopupHeader,
div.jmlPopupBox.resizeablePopup div.jmlPopupHeader {
  position: relative;
  z-index: 10;
/*   box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.8); */
}

div.jmlPopupBox .jmlPopupContent {
  padding: 0;
}

div.jmlPopupBox div.jmlPopupContent h1.jmlPopupTitle {
  background-color: var(--color-card-header);
  font-size: 14px;
  line-height: 24px;
  margin: 0 0 0 0;
  text-align: center;
}

div.jmlPopupAnchor .jmlPopupBox.scrollablePopup .jmlPopupContent {
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
  /* padding-right:14px; seit 5.14 eher schaedlich */
}

div.jmlPopupAnchor div.jmlPopupBox.resizeablePopup .jmlPopupContent {
  overflow: scroll;
  overflow-x: scroll;
  overflow-y: scroll;
  height: 260px;
  padding-right: 0;
}

.smartInputSeriesRule div.jmlPopupAnchor .jmlPopupBox {
  overflow: visible;
}

div.jmlPopupAnchor .jmlPopupBox.open /* animierte transformation wenn offen*/
{
  transition: all 90ms;
}

body.dojoMove div.jmlPopupAnchor .jmlPopupBox.open /* animierte transformation wenn offen*/
{
  transition: all 0s;
}

td.relative {
  position: relative;
}

.curly-bracket-left {
  display: block;
  position: absolute;
  top: 0;
  height: 100%;
  width: 16px;
  border: 0 solid transparent;
  border-right: 2px solid currentColor;
  border-radius: 32px;
  overflow: visible;
}

.curly-bracket-left::after{
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  left: 66%;
  margin-top: -6px;
  height: 1px;
  width: 1px;
  border: 6px solid transparent;
  border-right: 6px solid currentColor;
  border-bottom: 6px solid currentColor;
  transform-origin: center;
  transform: rotateZ(-45deg);
}

/*.curly-bracket-left::before{*/
  /*display: block;*/
  /*content: '';*/
  /*position: absolute;*/
  /*top: 50%;*/
  /*right: -20px;*/
  /*height: 25%;*/
  /*width: 16px;*/
  /*border: 0px solid transparent;*/
  /*border-left: 4px solid currentColor;*/
  /*border-top-left-radius: 8px;*/
/*}*/

  /* -----------   imageFields mit Overlay  ---------------*/
span.overlayedImg {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  line-height: 4px;
}

span.overlayedImgInner {
  position: absolute;
  display: inline-block;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  overflow: visible;
  text-align: center;
  vertical-align: middle;
  background-color: pink;
}

img.overlayedImg {
  position: absolute;
  margin: 0;
  right: 0;
  bottom: 0;
}

td.d > img.jmlFileImageField {
  position: relative;
  height: auto;
  width: 100%;
}

div.loadingworkarea {
  background-image: url("loading64.gif");
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 200px;
  vertical-align: middle;
}

table.ajaxEditor {
  min-width: 240px;
  width: clamp(240px, 80vw, 480px);
}
table.ajaxEditor tr td:first-child {
  width: 33%;
}

fp-field.comboboxPlus {
  min-width: 120px;
}

  /* ------------- Multibox (field) ----------- */
table.multibox {
  width: 100%;
}

table.multibox td {
  padding: 0 1px 0 1px;
  margin: 0;
}

/* ------------------------- FileVersionsField ------------------------- */
td > div.oneversion, td > div.manyversions {
  display: inline-block;
}

div.oneversion span {
  font: var(--font-small);
  line-height: 8px;
  letter-spacing: -1px;
  font-weight: bold;
}

div.oneversion {
  width: 16px;
  height: 16px;
  padding-top: 1px;
  padding-right: 1px;
  text-align: center;
  cursor: pointer;
  background-image: url(base_oneversion.png)
}

div.manyversions span {
  font: var(--font-small);
  line-height: 8px;
  letter-spacing: -1px;
  font-weight: bold;
}

div.manyversions {
  width: 16px;
  height: 16px;
  padding-top: 2px;
  padding-right: 2px;
  text-align: center;
  cursor: pointer;
  background-image: url(base_manyversions.png)
}

/* ------------------------- FileAccessField ------------------------- */
a.fileaccesslink:hover {
  text-decoration: underline;
  cursor: pointer;
}

a.fileaccesslink {
  cursor: pointer;
}

div.fileaccessanchor .clickCatcher {
  z-index: 100;
}

div.fileaccesspositioner {
  position: static;
  z-index: 139;
}

div.fileaccessbox {
  text-align: left;
  white-space: nowrap;
  min-height: 74px;
  background-color: var(--color-card-background);
}

ul.compact,
div.fileaccessbox ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

div.fileaccessbox span.more {
  position: absolute;
  bottom: 5px;
  right: 10px;
  font-weight: bold;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

div.fileaccessbox ul.compact li.hidden {
  visibility: hidden;
  opacity: 0;
  height: 0;
}

div.fileaccessbox li.hidden {
  visibility: visible;
  opacity: 1;
  overflow: hidden;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

div.fileaccessbox a.jmlAction11 > .jmlActionIcon > :is(img, fp-inline-svg) {
  --icon-size: 16px;
  height: var(--icon-size);
  width: var(--icon-size);
  margin-right: 4px;
}

div.fileaccessthumb {
  padding: 2px;
  width: 128px;
  color: #000;
  text-align: center;
  white-space: nowrap;
  height: 90px;
  background-color: var(--color-card-background);
  position: relative;
}

div.fileaccessthumbaudio {
  left: -2px;
  width: auto;
  top: auto;
  bottom: 100px;
  height: auto;
}

div.fileaccessthumbtext {
  font-size: 7px;
  white-space: normal;
  text-align: left;
}

div.fileaccessthumb a {
  /*display:inline-block;*/
  line-height: 90px;
}

div.fileaccessthumb img {
  max-height: 90px;
  max-width: 128px;
}

div.fileaccessthumb video {
  width: 128px;
}

div.fileaccessthumb span.lg {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url(css_cbp_search.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 4px;
}

div.videoplayer {
  height: auto;
  width: auto;
  left: 20px;
  top: 20px;
  right: 20px;
  bottom: 40px;
  position: fixed;
  z-index: 145;
  font-size: 16px;
  background: #000;
}

div.videoplayer video {
  width: 100%;
  height: 100%;
}

div.fileaccessbox strong {
  font-size: 11px;
  line-height: 18px;
}

div.fileaccessbox a {
  text-decoration: none;
  cursor: pointer;
  line-height: 24px;
}


.file-preview-container{
  container-name: file-preview-container;
  container-type: size;
  --container-size: 1;
  position:relative;
  border: 1px solid #999;
  text-align: right;
  overflow: hidden;
  border-radius: var(--border-radius-input, 0);
  height: calc(var(--container-size, 1) * 32px);
  background-color: #666;
}

.file-preview-container[style*="--container-size: 1"] {
  background-color: var(--color-input-background);
}

.file-preview-container a{
  width: 24px;
  height:24px;
  box-sizing: border-box;
  padding: 3px;
  text-align: center;
  --icon-size: 16px;
  border-radius: 12px;
  background-color: var(--color-input-background);
  color: var(--color-input-button-font);
  background-repeat: no-repeat;
  background-position: center center;
  display: inline-block;
  position:relative;
  margin: 4px 4px auto auto;
}
.file-preview-container a:hover {
  background-color: var(--color-shade-2);
  color: var(--color-shade-2-contrast);
}
  .file-preview-container a.preview {
  /*background-image: url(../field/button/base_button_detailsplus.svg);*/

}

.file-preview-container a.download {
  /*background-image: url(../field/button/base_button_note.svg);*/
}

.file-preview-container img.jmlFileImageField{
  position:absolute;
  top:5%; left: 5%;
  height: 90%;
  width: 90%;
  object-fit: contain;
  transition: transform 200ms;
  transition-timing-function: ease-out;
  cursor: pointer;
}

.file-preview-container.zoom img.jmlFileImageField{
  top:0%; left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.file-preview-container img.jmlFileImageField:hover{
  transform: scale(1.05);
}

@container file-preview-container (height < 50px){

  .file-preview-container img.jmlFileImageField{
    position: absolute;
    left: -2px;
    top: -25%;
    height: 150%;
    width: auto;
    object-fit: contain;
    cursor: pointer;
  }

  .file-preview-container img.jmlFileImageField:hover{
    transform: none;
  }

  .file-preview-container a.zoom {display: none;}
}

img.jmlFileImageFieldPopup{
  position: relative;
  width: 80vw;
  height: 80vh;
  object-fit: contain;
}

/* ------------------------------- ComboboxPlus ------------------------------- */

.comboboxplus.smartInput {
  line-height: 16px;
}

ul.cbp li .jmlImageContainer {
  vertical-align: middle;
  margin-right: 2px;
}

.selectSetField.smartInput .selectedItemsArea img.jmlImage,
.selectSetField.smartInput .cbpList img.jmlImage,
.comboboxplus.smartInput .inputContainer img.jmlImage {
  vertical-align: top; /* Top, sonst macht es merkwuerdige abstaende :( */
  margin-right: 2px;
  margin-left: 0;
  height: 16px;
  width: 16px;
}

div.cbpData {
  display: none;
  background-color: var(--color-card-background);
  white-space: pre;
  font-family: monospace;
  position: relative;
}

div.cbpList {
  /*background: #FFFFFF url(standard/base_cbo_vln.gif) repeat-y scroll 5px 2px; */
  position: relative;
  /*height:120px;*/
  /*width:200px;*/
}

p.cbpValue {
  white-space: pre; /* Umbrueche nur bei 'Backslash-N' erlaubt - bspw: addressfeld*/
}

p.cbpValueI {
  padding-left: 20px;
}

p.cbpValueI .jmlImageContainer {
  margin-left: -18px;
  margin-right: 2px;
  --icon-size: 16px;
  white-space: nowrap;
}

div.cbpSearch {
  text-align: right;
  padding: 6px 22px 4px 8px;
  background-size: 16px;
  background: transparent url(css_cbp_search.svg) no-repeat right center;
  height: 22px;
  margin: 0 2px;
}

div.cbpSearch input,
.smartInput div.cbpSearch input {
  width: 100%;
  border: 0 none;
  font-size: 12px;
  padding: 1px;
  line-height: 16px;
  height: 18px;
  background: white;
}

div.jmlPopupContent .dijitContentPane.cbpList {
  overflow: hidden;
  height: auto;
}

ul.cbp { /* Normales CBP-Dropdown */
  background-color: var(--color-card-background);
  list-style-type: none;
  height: 100%;
  padding: 0 0 0 0;
  margin: 0;
}

div.jmlPopupBox {
  background-color: var(--color-card-background);
  border-radius: 3px;
  /*probleme bei Safari: overflow: auto;*/
}

div.jmlPopupBox div.cbpList ul.cbp,
div.jmlPopupBox div.cbpList ul.cbpTreeStart { /* Alle Select-Dropdowns */
  font-size: 12px;
  margin: 0;
  /*overflow: scroll;*/
  /* damit ist rechts unten immer platz für das resize-Handle */
  /*position: relative; !*damit relative childs im ie mitscrollen*!*/
}

ul.cbpTreeStart { /* Baum-CBP-Dropdown */
  /*background: #FFFFFF url(standard/base_cbo_vln.gif) repeat-y scroll 5px 2px;*/
  list-style-type: none;
  height: 100%;
  margin: 0;
  padding: 0 0 0 0;
}

div.jmlPopupBox div.cbpList ul.cbpTreeStart { /* Baum-CBP-Dropdown */
  /*overflow: scroll;*/
  /* damit ist rechts unten immer platz für das resize-Handle */
  /*position: relative; !*damit relative childs im ie mitscrollen*!*/
  padding: 0 1px 0 0;
  /*max-height:500px;*/
}

div.cbpList ul.cbpSub {
  padding: 0 0 0 0;
  margin-left: 0;
  margin-right: -1px;
  list-style-type: none;
}

div.cbpList li.cbpclosed ul.cbpSub {
  display: none;
}

div.cbpList li.cbp {
  overflow: hidden;
}

/* FAYT - Find as you type */
p.faytValue {
  display: flex;
  flex-direction: row;
}

p.cbpValue .faytName {
  flex-grow: 1;
  max-width: 500px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

p.cbpValue .faytLabel {
  margin-left: 10px;
  width: 150px;
  max-width: 500px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: grey;
}


/* alle dropdowns */
ul.cbp li {
  cursor: pointer;
  margin-right: 0; /** 2px = kleiner hack gegen unnoetige horizontale scollbar*/
}

ul.cbpTreeStart > li p.cbpValue,
ul.cbpSub > li p.cbpValue,
ul.cbp li p.cbpValue {
  color: var(--color-main-header);
  font-size: 12px;
  line-height: 16px;
  padding-top: 4px;
  padding-bottom: 4px;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* normales dropdown */
div.cbpList ul.cbp li {
  background: no-repeat scroll 5px 2px;
  padding: 0 0 0 0;
  text-align: left;
}

div.cbpList ul.cbp li > div,
div.cbpList ul.cbp li > p {
  padding-left: 6px;
  padding-right: 6px;
  width: auto;
}

div.cbpList .selectable {
  cursor: pointer;
}

/* normales dropdown */
div.cbpList ul.cbp li.selected,
div.cbpList ul.cbpTreeStart li.selected > .selectable {
  background: no-repeat scroll 5px 2px #ffe49f;
}

/* Tree-ish Dropdown */
div.cbpList ul.cbpSub li,
div.cbpList ul.cbpTreeStart li {
  background: no-repeat scroll 5px 0;
  padding: 0 2px 0 16px; /* rechts etwas Abstand, damit erst ja kein scrollbalken erscheint*/
  margin: 0;
}

div.cbpList span.selectable {
  display: inline-block;
  line-height: 20px;
}

div.cbpList ul.cbpSub li.cbp,
div.cbpList ul.cbpTreeStart li.cbp {
  background-color: transparent;
  position: relative;
}

ul.cbp li img, ul.cbpTreeStart li img, ul.cbpSub li img {
  vertical-align: middle;
  margin: 0;
}

ul.cbp li .cboWithIcon img,
ul.cbpTreeStart li .cboWithIcon img,
ul.cbpSub li .cboWithIcon img {
  height: 16px;
  width: 16px;
}

ul.cbp li .cboWithIcon .jmlImageContainer,
ul.cbpTreeStart li .cboWithIcon .jmlImageContainer,
ul.cbpSub li .cboWithIcon .jmlImageContainer {
  margin-right: 2px;
  vertical-align: text-bottom;
}

div.cbpList ul.cbpTreeStart li.cbpopen::before,
div.cbpList ul.cbpSub li.cbpopen::before,
div.cbpList ul.cbpTreeStart li.cbpclosed::before,
div.cbpList ul.cbpSub li.cbpclosed::before {
  content: '';
  opacity: 0.5;
  display: inline-block;
  position: absolute;
  width: 12px;
  height: 22px;
  margin-left: -12px;
  background: center center no-repeat url(../../css/embed/treeexpander.svg);
  background-size: 12px;
  transform: rotate(0deg);
  transition: all 200ms;
}

div.cbpList ul.cbpTreeStart li.cbp:hover::before,
div.cbpList ul.cbpSub li.cbp::before {
  opacity: 0.9;
}

div.cbpList ul.cbpTreeStart li.cbpopen:before,
div.cbpList ul.cbpSub li.cbpopen:before {
  transform: rotate(90deg);
}

div.cbpList .remove {
  visibility: hidden;
  transform: scale(0.5);
  transition: transform 300ms cubic-bezier(0.760, 0.005, 0.250, 1.540);

  position: absolute;
  height: 16px;
  width: 16px;
  background-image: url(../field/button/base_button_clear.svg);
  border: 1px solid #666666;
  border-radius: 50%;
  right: 2px;
  top: 50%;
  margin-top: -9px;
}

div.cbpList .selected:hover > .remove {
  transform: scale(1);
  visibility: visible;
  /*background-color: white;*/
}

div.selectSetField img,
div.cbpInput img {
  vertical-align: top;
  margin: 0;
  max-height: 16px;
}
.cbpValue > fp-inline-svg {
  --icon-size: 16px;
  vertical-align: top;
}

div.cbpInput span.overlayedImg {
  vertical-align: top;
  margin: 0;
}

ul.cbpTreeStart div.expand {
  position: absolute;
  left: -22px;
  width: 25px;
  height: 100%;
  top: 0;
  background-color: #EEE;
  opacity: 0.01;
  cursor: pointer;
}

div.cbpList div.dummy,
div.cbpInput div.dummy,
div.cbpList ul .selectable,
div.cbpInput .selectable {
  width: 100%;
  text-decoration: none;
  color: #333;
  padding-left: 2px;
  padding-bottom: 2px;
  position: relative;
}

div.cbpList div.dummy .cbpValue,
div.cbpInput div.dummy .cbpValue,
div.cbpList .selectable .cbpValue,
div.cbpInput .selectable .cbpValue {
  cursor: pointer;
}

div.cbpList p.cbpDescription {
  margin: -2px 0 0 0;
  font: var(--font-small);
  line-height: 10px;
  /*font-weight: bold;*/
  color: var(--color-main-font);
}

div.cbpList .cboWithIcon p.cbpDescription {
  margin-left: 20px;
}

div.cbpList div.dummy,
div.cbpInput div.dummy {
  color: #666;
}

div.cbpList .selectable {
  transition: background 0.01s;
}

div.cbpList div.selected,
div.cbpList span.selected {
  background-color: var(--color-current-item);
  color: var(--color-main-header);
}

div.cbpList div.dummy:hover,
div.cbpList span.dummy:hover {
  background-color: rgba(0, 0, 0, 0.125);
  transition: background 0s;
}

div.cbpList .selectable:hover {
  background-color: var(--color-default-hover);
  color: #000;
  transition: background 0s;
}


div.cbpList li div.dummy:hover {
  color: #666;
  cursor: default;
}

/* annotations */
p.cbpValue.annotated {
  background: transparent;
}

p.cbpValue.annotated .annotatorAfterValue {
  display: inline-block;
  width: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
}

.cbpValue.checkedin .annotatorAfterValue {
  background-image: url(../../legacygeneral/collegue_checkedin.svg);
}

.cbpValue.ontour .annotatorAfterValue {
  background-image: url(../../legacygeneral/collegue_extern.svg);
}

.cbpValue.vacation .annotatorAfterValue {
  background-image: url(../../legacygeneral/collegue_vacation.svg);
}


.notcapassigned{
  /* text-decoration:line-through; */
  color:red !important;
  /* font-style:italic !important; */
}

.cbpValue.sick .annotatorAfterValue {
  background-image: url(../../legacygeneral/collegue_sick.svg);
}

.cbpValue.checkedout .annotatorAfterValue {
  background-image: url(../../legacygeneral/collegue_checkedout.svg);
}

div.cbpList ul.cbp .cbpValue.countryFlag {
  padding-left: 25px;
  background: no-repeat 4px 4px;
}

div.cbpList ul.cbp .cbpValue.countryFlag.DE {
  background-image: url(../../legacygeneral/flags/de.svg);
}

div.cbpList ul.cbp .cbpValue.countryFlag.AT {
  background-image: url(../../legacygeneral/flags/at.svg);
}

div.cbpList ul.cbp .cbpValue.countryFlag.CH {
  background-image: url(../../legacygeneral/flags/ch.svg);
}

div.cbpList ul.cbp .cbpValue.countryFlag.LI {
  background-image: url(../../legacygeneral/flags/li.svg);
}

/* -------------------------------- ComboboxPlusExpanded ------------------------------------- */
div.comboboxPlusExpanded {
  white-space: nowrap;
  text-align: right;
  background-color: var(--color-card-background);
  overflow: visible;
  height: auto;
  border-color: #D0DCEA #DEE6F0 #DEE6F0 #D0DCEA;
  border-style: solid;
  border-width: 1px;
  margin-top: 4px;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 4px;
  padding: 0;
}

.boxsegmentcontent div.comboboxPlusExpanded {
  border: 0 none;
  margin: 0;
}

.inputContainer .comboboxPlusExpanded {
  overflow: hidden;
}

.comboboxPlusExpanded .cbpSearch {
  margin: 0;
  background-color: #DDD;
  box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 10;
}

.comboboxPlusExpanded div.smartInputElement.cbpValue {
  display: none;
}

div.comboboxPlusExpanded div.cbpList {
  height: auto;
  width: auto;
}

div.comboboxPlusExpanded div.cbpList ul.cbpTreeStart, div.comboboxPlusExpanded div.cbpList ul.cbp {
  /* Baum-CBP-Dropdown */
  overflow: auto; /* bei 'scroll' geht ie8 in den CompatMode*/
  /* damit ist rechts unten immer platz für das resize-Handle */
  position: relative; /*damit relative childs im ie7 mitscrollen*/
  padding: 2px 5px 3px 0;
  max-height: 400px;
}

div.comboboxPlusExpanded div.cbpInput {
  display: none;
}

/* ------------------------- SelectSetfield ------------------------- */
div.selectSetField {
  text-align: right;
  margin: 0;
  padding: 0;
}

div.selectSetField_ro {
  display: inline-block;
}

div.selectSetAdder {
  display: block;
  padding-left: 0;
  padding-right: 0;
}

.selectedItemsArea .placeholder {
  position: absolute;
  display: none;
  top: 0;
  left: 0;
}

.selectSetField-empty .selectedItemsArea .placeholder {
  display: block;
}

div.selectSetField_w div.selectedItemsArea {
  text-align: left;
  /*background: #DDD url(standard/selectedItemsArea.gif) repeat-x bottom;*/
  background: #FFF url(selectedItemsArea.gif) repeat-x bottom;
  line-height: 10px; /*Damit inlineblock-elemente nur so hoch sind, wie sie müssen*/
  width: auto;
  min-height: 15px;
  padding-right: 0;
  white-space: normal;
  position: relative;
}

div.selectSetField_w div.selectedItemsArea[rows="0"] {
  min-height: 0;
}

div.selectSetField_w div.selectedItemsArea[rows="1"] {
  min-height: 15px;
}

div.selectSetField_w div.selectedItemsArea[rows="2"] {
  min-height: 30px;
}

div.selectSetField_w div.selectedItemsArea[rows="3"] {
  min-height: 45px;
}

div.selectSetField_w div.selectedItemsArea[rows="4"] {
  min-height: 60px;
}

div.selectSetField_w div.selectedItemsArea[rows="5"] {
  min-height: 75px;
}

div.selectSetField_w div.selectedItemsArea[rows="6"] {
  min-height: 90px;
}

div.selectSetField_w div.selectedItemsArea[rows="7"] {
  min-height: 105px;
}

div.selectSetField_w div.selectedItemsArea[rows="8"] {
  min-height: 120px;
}

div.selectSetField_w div.selectedItemsArea[rows="9"] {
  min-height: 135px;
}

div.selectSetField_w .cancelSelectionArea {
  transition: background 0.25s;
}

div.selectSetField_ro .selectedItem {
  display: inline-block;
  margin: 0 2px 0 1px;
}

/* In der Box fliegen container herum */
div.selectSetField .selectedItemContainer {
  display: inline-block;
  min-height: 16px;
  position: relative;
  overflow: visible;
  cursor: pointer;
  padding: 0 0 1px 1px;

}

div.selectSetField_w .selectedItemContainer .selectedItem {
  transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
  z-index: 100;
  padding: 2px;
  border-radius: 3px;
  display: inline-block;
  min-width: 20px;
  font-size: 12px;
  line-height: 16px; /* wegen icons haben wir nicht wirklich eine wahl */
  font-family: Helvetica, "Tahoma", Arial, sans-serif;
  max-height: 32px; /* 2 Zeilen müssen reichen*/
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: #EEE;
  cursor: pointer;
}

div.selectSetField_w .selectedItemContainer .selectedItem .cbpValue {
  color: #000;
  opacity: 0.9;
  text-align: center;
}

div.comboboxplus .cbpValue .cbpValueHidden,
div.selectSetField .selectedItemContainer .selectedItem .cbpValueHidden {
  background-image: url(../field/hiddenValueUnderline.svg);
  background-repeat: repeat-x;
  background-position: bottom 2px center;
}

div.comboboxplus .cbpValue .cbpValueInvalif,
div.selectSetField .selectedItemContainer .selectedItem .cbpValueInvalid {
  background-image: url(../field/invalidValueUnderline.svg);
  background-repeat: repeat-x;
  background-position: bottom 2px center;
}

div.selectSetField_w .selectedItemContainer .selectedItem:hover {
  background-color: #9cc4e6;
}

div.selectSetField_w .selectedItemContainer .selectedItem.selectedItemDnd {
  cursor: move;
}

div.selectSetField_w.containsSelectedElements .selectedItemContainer .selectedItem.selectedItemDnd {
  cursor: pointer;
}

div.selectSetField_w .selectedItemContainer .selectedItem.selectedItemDnd:hover {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

div.selectSetField_w .selectedItemContainer.isSelected .selectedItem {
  background-color: var(--color-main-font);
  color: white;
}

div.selectSetField .selectSetAdder .inputContainer .smartInputClearButton {
  top: 1px;
  transition: background 1s;
}

div.selectSetField.containsSelectedElements .selectSetAdder .inputContainer .smartInputClearButton {
  background-color: var(--color-main-font);
  background-image: url(../field/button/base_button_clear_white.svg);
}

div.selectSetField.containsSelectedElements {
  z-index: 500;
}

div.selectSetField.containsSelectedElements .cancelSelectionArea {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(200, 200, 200, 0.25);
}

div.selectSetField.containsSelectedElements .selectedItemsArea,
div.selectSetField.containsSelectedElements .selectSetAdder {
  z-index: 501;
}

div.selectSetField .dndActive {
  overflow: hidden;
}

div.selectSetField .dndActive .selectedItemContainer .selectedItem {
  transform: translateX(0px) rotateZ(0deg);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

div.selectSetField .dndActive .selectedItemContainer.selectedItemPreviewTargetRight .selectedItem {
  transform: translateX(10px) rotateZ(-2deg);
  z-index: 120;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

div.selectSetField .dndActive .selectedItemContainer.selectedItemPreviewTargetLeft .selectedItem {
  transform: translateX(-10px) rotateZ(2deg);
  z-index: 120;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

div.selectSetField .dndActive .selectedItemContainer.selectedItemPreviewTargetLeft::after,
div.selectSetField .dndActive .selectedItemContainer.selectedItemPreviewTargetRight::before {
  z-index: 99;
  display: block;
  height: 8px;
  width: 6px;
  position: absolute;
  top: 50%;
  margin-top: -4px;
  background-color: #333;
  content: " ";
}

div.selectSetField .dndActive .selectedItemContainer.selectedItemPreviewTargetRight::before {
  left: 0;
}

div.selectSetField .dndActive .selectedItemContainer.selectedItemPreviewTargetLeft::after {
  right: 0;
}

.dndHandle {
  display: inline-block;
  position: absolute;
  top: 1px;
  width: 0;
  height: 0;
  z-index: 10;
  cursor: pointer;
}

.dndActive .dndHandle {
  height: 100%;
  width: 50%;
}

.dndActive .dndLeftHandle {
  right: 50%;
  padding-left: 2px;
  z-index: 150;
}
.debugmode .dndActive .dndLeftHandle {
  background-color: rgba(0,200,0,0.7);
}

.dndActive .dndRightHandle {
  left: 50%;
  padding-right: 100px;
  z-index: 140;
}

.debugmode .dndActive .dndRightHandle {
  background-color: rgba(200,0,0,0.7);
}
/*.pfMenu.dndActive .dndRightHandle {
  padding-right: 1000px;
}*/


.pfMenu.dndActive .menuOverviewItem,
.pfMenu.dndActive .dndHandle{
  transition: transform 200ms ease-out;
}

.pfMenu .menuOverviewItem.menuOverviewItemEditable {
  overflow: visible;
}

.pfMenu.dndActive .overRight .dndHandle {
  transform: translate3d(100px, 0, 0);
}
.pfMenu.dndActive .overLeft .dndHandle {
  transform: translate3d(-100px, 0, 0);
}

div.selectSetField .selectedItemBeingDragged {
  position: relative;
  z-index: 10000;
}

div.selectSetField .selectedItemBeingDragged:hover {
  opacity: 0.1;
}

span.selectedItem div.removeHint {
  display: none;
  color: #000;
  position: absolute;
  width: 0;
  height: 0;
  overflow: visible;
}

div.selectSetField .cbIcon, div.comboboxPlus .cbIcon {
  width: 16px;
  height: 16px;
}

span.selectedItem:hover div.removeHint {
  display: block;
}

div.selectSetField_ro span.selectedItem:hover div.removeHint {
  display: none;
}

span.selectedItem div.removeHint div {
  font-weight: bold;
  position: absolute;
  z-index: 100;
  left: -23px;
  top: -4px;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid #ccc;
  padding: 2px;
  width: auto;
  background-color: #DDD;
  border-radius: 1px;
  box-shadow: 1px 1px 3px #000;
}

span.selectedItem div.removeHint:hover div {
  box-shadow: 0 0 1px #000;
  background-color: #EEE;
}

span.selectedItem div.removeHint img {
  vertical-align: bottom;
  margin-right: 2px;
}

div.selectSetField div.cbpInput {
  padding: 1px 1px 1px 1px;
  color: var(--color-main-font);
  font-size: 10px;
}

div.selectSetField div.cbpInput:hover, div.jmlmultifileadder:hover {
  background-color: #CCC;
  color: #000;
}

div.selectSetField_ro div.selectSetAdder {
  display: none !important;
}

div.selectSetAdder, div.jmlmultifileadder {
  cursor: pointer;
  border: 0 none;
}

#ajaxEditorContent div.selectSetAdder {
  padding: 1px 1px 0 1px;
  cursor: pointer;
  /*min-width:200px;*/
}

/* ------------------------- FileSizeField ------------------------- */
div.filesize1 {
  float: right;
  text-align: right;
  position: relative;
}

div.filesize2 {
  float: right;
  text-align: left;
  white-space: nowrap;
  width: 40px; /*damit auch das Wort "byte" reinpasst*/
}

/* ------------------------- DurationField ------------------------- */
.smartInputElement.onlyminutes,
.smartInputElement.onlyminutessmall,
.smartInputElement.onlyhours {
  position: relative;
}

.typetext.jml_input.right .onlyhours::before,
.typetext.jml_input.right .onlyminutessmall::before,
.typetext.jml_input.right .onlyminutes::before {
  display: inline-block;
  white-space: nowrap;
  position: absolute;
  top: 4px;
  color: #999;
}

.typetext.jml_input.right .onlyminutes::before {
  content: '0h ';
  right: 16px;
}

.typetext.jml_input.right .onlyminutessmall::before {
  content: '0h 0';
  right: 7px;
}

.typetext.jml_input.right .onlyhours::before {
  content: '00';
  right: 1px;
}

.typetext.jml_input.right .onlyhours input {
  position: relative;
  right: 13px;
}

input.busdurfld {
  background: url("base_busdurfld.png") no-repeat 4px;
}

/* ------------------------- Colorfield ------------------------- */
div.colorfield {
  white-space: nowrap;
  text-align: right;
  background-color: var(--color-card-background);
  min-width: 60px;
  padding-left: 20px;
}

div.colorfield div.colorfieldinput {
  float: left;
  width: 43px;
  border-width: 0;
  padding: 0;
}

div.colorfield input {
  width: 43px;
  border-width: 0;
  padding: 0 0 0 1px;
  font-family: Courier New, Fixed, monospace;
}

div.colorfield div.colorbox {
  border: 1px solid #ccc;
  width: 14px;
  height: 14px;
  position: absolute;
  left: 2px;
  top: 2px;
  border-radius: 2px;
}

.colorPickerWindow {
  width: 165px;
  padding: 8px;
}

div.svDiv {
  width: 165px;
  height: 165px;
  margin-left: auto;
  margin-right: auto;
}

div.svDiv div {
  width: 15px;
  height: 15px;
  float: left;
}

div.hueDiv {
  width: 165px;
  height: 12px;
  margin-top: 5px;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
}

div.hueDiv div {
  width: 2px;
  height: 12px;
  float: left;
}

span.colorfield_ro {
  white-space: nowrap;
  text-align: right;
  background-color: transparent;
  border-color: transparent;
  border-style: solid;
  border-width: 0;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-right: 1px;
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: bottom;
}

span.colorfield_ro span.colorbox {
  border: 1px solid #ccc;
  display: inline-block;
  margin: 1px;
  width: 22px;
  height: 22px;
}

span.colorfield_ro img.overlayedImg {
  position: absolute;
  margin: 0;
  right: 0;
  bottom: 0;
  height: 16px;
  width: 16px;
}

/* -------------------------------- Smart input ------------------------------------- */

/* könnte auch ein smartInput sein. Trotzdem immer normale Breite*/
input.dijitOffScreen {
  width: auto !important;
}

.typebutton > span {
  display: block;
}

.typehidden {
  display: none;
}

.smartInputElement.typehiddenVisible {
  display: flex;
}

.smartInputElement.typehiddenVisible label {
  text-align: right;
  font-size: 10px;
  line-height: 16px;
}

.smartInputElement.typehiddenVisible  label {
  width: 200px;
  flex-shrink: 1;
}

.smartInputElement.typehiddenVisible input {
  padding-left: 4px;
  display: inline-block;
  border: none;
  width: auto;
  background-color: var(--color-shade-2);
}

.smartInputElement.typehiddenVisible {
  display: flex;
  flex-direction: row;
  margin-bottom: 5px;
}

.smartInputElement.typehiddenVisible label {
  text-align: right;
  padding-right: 5px;
}

.smartInputElement.typehiddenVisible input {
}



.typecheckbox, /* Hierarchie wichtig fuer css-Gewichtung!!! */
td.d .typecheckbox,
td.f .typecheckbox {
  display: inline-block;
  min-width: 0;
}

.typecheckbox input {
  vertical-align: sub;
}

td.d .typecheckbox input {
  vertical-align: middle; /* passt nicht immer pixelgenau, sieht aber IM SCHNITT am wenigsten falsch aus */
}

.smartInput .inputContainer {
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  overflow: hidden;
  position: relative;

}

.smartInput .inputFakeContainer {
  margin: 0;
}

.smartInputTA .inputContainer {
  height: auto;
}

.smartInputTA.rte .smartInputButton img {
  top: 0;
  right: 0;
}

div.ckeUITop {
  border-top: var(--border-top-input, var(--border-input));
  border-right: var(--border-right-input, var(--border-input));
  border-bottom: var(--border-bottom-input, var(--border-input));
  border-left: var(--border-left-input, var(--border-input));
  border-radius: var(--border-radius-input);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  overflow: hidden;
  min-width: min(500px, 80vw);
}

div.ckeUITop > .cke {
  border: none;
}

div.ckeUITop .cke_top {
  border-bottom: none;
}

.smartInput.smartInputTA.rte {
  padding: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: 0;
}

.smartInput.smartInputTA.rte div.richtexteditor {
  flex:1;
}

.smartInput.smartInputTA.containsSmartInputButtons,
.smartInput.smartInputTA.containsSmartInputButtons textarea {
  min-height: 32px;
}
.smartInput.smartInputTA .texteditor {
  flex-grow: 1;
}
.smartInput.smartInputTA.containsSmartInputButtons > div {
  position: relative;
  padding-right: calc(4px + var(--height-input-button, 20px));
}

.smartInput.smartInputTA.containsSmartInputButtons .smartInputButtons {
  position: absolute;
  padding: 2px;
  top: 0;
  right: 0;
  width: var(--height-input-button, 20px);
  bottom: 0;
  border-left: 1px solid var(--color-shade-4);
}

.smartInput.smartInputTA.rte.containsSmartInputButtons .smartInputButtons {
  bottom: auto;
}

.smartInput.smartInputTA.containsSmartInputButtons .smartInputButtons .smartInputButton {
  --icon-size: calc(var(--height-input-button) - 4px);
  height: var(--height-input-button);
  width: var(--height-input-button);
  padding-top:2px;
  cursor: pointer;
  text-align: center;
  background-color: var(--color-input-button-back);
  color: var(--color-input-button-font);
  border-radius: var(--border-radius-input-button);
}

.smartInput.smartInputTA.containsSmartInputButtons .smartInputButtons .smartInputButton > fp-inline-svg {
  --icon-size: calc(var(--height-input-button) - 4px);
}

.smartInput.smartInputTA.containsSmartInputButtons .smartInputButtons .smartInputResizeButton {
  position: absolute;
  bottom: 0;
  right: 1px;
}

.innerHelper h1 {
  margin-top: 1px;
}

.smartInput .inputContainer input:not([type="hidden"]) {
  margin: 0;
  border: 0 none;
  width: 100%;
}

.strikethrough input {
  text-decoration: line-through;
}

.typefile .inputContainer input {
  --border-radius-button: 10px;
  --height-input: 20px; /** ein hack, der sich auf den upload-Button auswirkt */
}

.nonEditableTextarea .limitHeight,
.nonEditableTextarea .unlimitHeight {
  position: relative;
}

.nonEditableTextarea .unlimitHeight {
  position: relative;
  -moz-transition: max-height 2s;
  -webkit-transition: max-height 2s;
  -o-transition: max-height 2s;
  transition: max-height 2s;
}

.nonEditableTextarea .limitHeight,
.nonEditableTextarea .unlimitHeight {
  overflow: hidden;
  text-overflow: ellipsis;
}

.nonEditableTextarea .unlimitHeight {
  padding-bottom: 20px;
}

.nonEditableTextarea.rows1 .limitHeight {
  max-height: 40px
}

.nonEditableTextarea.rows2 .limitHeight {
  max-height: 80px
}

.nonEditableTextarea.rows3 .limitHeight {
  max-height: 120px
}

.nonEditableTextarea.rows4 .limitHeight {
  max-height: 160px
}

.nonEditableTextarea.rows1 .limitHeight .expander {
  top: 40px;
}

.nonEditableTextarea.rows2 .limitHeight .expander {
  top: 80px;
}

.nonEditableTextarea.rows3 .limitHeight .expander {
  top: 120px;
}

.nonEditableTextarea.rows4 .limitHeight .expander {
  top: 160px;
}

.nonEditableTextarea .unlimitHeight {
  max-height: 500px;
}

.nonEditableTextarea .expander {
  position: absolute;
  height: 20px;
  text-align: center;
  width: 100%;
  background: -moz-linear-gradient(top, rgba(250, 250, 250, 0) 0%, rgba(250, 250, 250, 1) 50%); /* FF3.6+ */
  background: -webkit-linear-gradient(top, rgba(250, 250, 250, 0) 0%, rgba(250, 250, 250, 1) 50%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(250, 250, 250, 0) 0%, rgba(250, 250, 250, 1) 50%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(250, 250, 250, 0) 0%, rgba(250, 250, 250, 1) 50%); /* IE10+ */
  background: linear-gradient(to bottom, rgba(250, 250, 250, 0) 0%, rgba(250, 250, 250, 1) 50%); /* W3C */
}

.nonEditableTextarea .limitHeight .expander {
  margin-top: -20px;
}

.nonEditableTextarea .unlimitHeight .expander {
  margin-top: 0;
}

.nonEditableTextarea .expander hr {
  margin-top: 19px;
  margin-bottom: 0;
}

.nonEditableTextarea .expander span {
  display: inline-block;
  position: relative;
  height: 13px;
  top: -15px;
  width: 30px;
}

.nonEditableTextarea .limitHeight .expander span {
  background: url(../../form/field/button/base_cbp_button.svg);
  background-position: center;
  background-repeat: no-repeat;
}

.nonEditableTextarea .unlimitHeight .expander span {
  background: url(../../form/field/button/base_button_clear.svg);
  background-position: center;
  background-repeat: no-repeat;
}

.nonEditableTextarea .expander:hover span {
  background-color: #99CCFF;
}

.smartInput textarea {
  background-color: transparent;
  width: 100%;
  /* Damit eine Scrollbar noch hinpasst, nutzen wir border-box-sizing: */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /* gegen einen unerwünschten 4px-Abstand nach unten: */
  vertical-align: bottom;
  font: var(--font-input);
}
.monospace textarea {
  font-family: 'Consolas', Monospace, monospace;
}
.no-resize textarea,
.no-resize {
  resize: none;
}

.smartInput textarea.cke_source{
  background-color: var(--color-input-background);
  color: var(--color-input-font);
}

.selectSetAdder .inputContainer > div {
  /*.smartInput .inputContainer div.jml_input {*/
  padding: 0;
  margin: 0;
  border: 0 none;
  background-color: transparent;
  white-space: nowrap;
}

.selectSetAdder .inputContainer .placeholder {
  opacity: 0.6;
}

.smartInput .inputContainer div img {
  vertical-align: middle;
  max-height: 16px;
  max-width: 16px;
  line-height: 16px;
}

.smartInputTA .inputContainer div.jml_input {
  height: auto;
}

div.cbpInput {
  display: inline-block;
}

.smartInput .inputContainer div.cbpInput {
  white-space: nowrap;
}

.smartInput .smartInputValue {
  display: block;
  width: 100%;
  height: 20px;
  font-size: 11px;
  line-height: 20px;
  padding: 0;
  cursor: pointer;
}

.smartInput.jml_input_readonly .smartInputValue {
  cursor: inherit;
}

.smartInputTA .inputContainer {
  margin-right: 18px;
}

div.smartInputButtonTA {
  position: absolute;
  top: 1px;
  right: 16px;
  width: 0;
  float: right;
  height: 0;
  overflow: visible;
}

.smartInputButton, .smartInputUnit {
  display: block;
  position: relative;
  overflow: visible;
  padding: 0;
  margin: 0;
}

/** jetzt gibt es Leute die tatsaechlich EUR oder USD schreiben wollen*/
.smartInputUnit .unit {
  font-size: 11px;
  letter-spacing: 0;
}

.smartInputUnit .unit.unit2 {
  font-size: 11px;
  letter-spacing: 0;
}

.smartInputUnit .unit.unit3 {
  font-size: 10px;
  letter-spacing: -1px;
  right: -1px;
  height: 15px;
}

.smartInputUnit .unit.unit4 {
  font-size: 9px;
  letter-spacing: 0;
  right: -1px;
  height: 14px;
}

.smartInputButton.smartInputClearButton {
  width: 16px;
  height: 16px;
  background-image: url(../field/button/base_button_clear.svg);
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer;
}

td.d .smartInput.typeradiosender,
.smartInput.typeradiosender {
  border: 0;
  height: 20px;
  width: 20px;
  padding: 2px 16px 2px 2px; /* <- platz für ein hinticon*/
  border-radius: 50%;
  display: inline-block;
  min-width: 16px;
  background: transparent;
}

td.d.center .smartInput.typeradiosender {
  padding: 2px 2px 2px 2px; /* <- kein platz für ein hinticon*/
}

.smartInput.typeradiosender-edit {
  cursor: pointer;
}

.smartInput.typeradiosender .inputContainer {
  border: 1px solid #666;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  overflow: visible;
  display: block;
  padding: 0;
  background: var(--color-input-background);
}

.smartInput.typeradiosender .inputContainer .smartInputElement.hint {
  top: 0;
  left: 22px;
  position: absolute;
}

.smartInput.typeradiosender-nonedit .inputContainer {
  border: 1px solid #CCC;
}

.smartInput.typeradiosender .inputContainer .radio-toggler {
  height: 18px;
  width: 18px;
  position: relative;
  display: block;
  padding: 0;
  margin: 0;
}
.smartInput.typeradiosender-edit .inputContainer .radio-toggler::after {
  background: var(--color-primary);
}
.smartInput.typeradiosender-edit .inputContainer .radio-toggler::before {
  display: block;
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  content: '';
  border-radius: 50%;
  background: var(--color-accent);
  transform-origin: center;
  opacity: 0;
  transition: background-color 1000ms, transform 500ms, opacity 800ms;
}

.smartInput.typeradiosender-edit.radio-unchecked .inputContainer .radio-toggler::before {
  transform: scale(0.5);
}

.smartInput.typeradiosender-edit.radio-checked .inputContainer .radio-toggler::before {
  transform: scale(2);
  background: #CCC;
}

.smartInput.typeradiosender-edit .inputContainer .radio-toggler:active::before {
  opacity: 0.5;
  transition: opacity 0ms;
}

.smartInput.typeradiosender-edit.radio-unchecked .inputContainer .radio-toggler:active::before {
  transform: scale(1);
}

.smartInput.typeradiosender-edit.radio-checked .inputContainer .radio-toggler:active::before {
  transform: scale(2);
}

.smartInput.typeradiosender .inputContainer .radio-toggler::after {
  display: block;
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  content: '';
  border-radius: 50%;
  background-color: var(--color-accent);
  transform-origin: center;
  transition: transform 250ms;
  transform: scale(0);
}

.smartInput.typeradiosender.radio-checked .inputContainer .radio-toggler::after {
  transform: scale(1);
}

.smartInput.typeradiosender-nonedit .inputContainer .radio-toggler::after {
  background: #999;
}

/* ^^^ radiosender --------  identityrelation vvv */

.smartInput.typeidentityrelation {
  padding-left: 0;
}

.smartInput.typeidentityrelation .smartInputValue,
.smartInput.typeidentityrelation .relationIcon {
  padding-left: 3px;
  cursor: default;
}

.smartInput.typeidentityrelation .inputContainer .smartInputValue:nth-child(2){
  width: auto;
}

.smartInput.typeidentityrelation .inputContainer .relationIcon:first-child {
  width: 20px;
}

.smartInput.typeidentityrelation .inputContainer .relationIcon {
  border-right: 1px solid #CCC;
}

.smartInput.typeidentityrelation .inputContainer .relationIcon:hover,
.smartInput.typeidentityrelation .inputContainer .smartInputButton:hover {
  background-color: #eee;
  transition: background 0s;
}
.smartInput.typeidentityrelation .inputContainer .relationIcon:hover {
  border-right: 1px solid #666;
}

/* ^^^ identityrelation --------  switch vvv */

td.d .smartInput.typeswitch,
.smartInput.typeswitch {
  display: inline-flex;
  align-self: center;
  align-items: center;
  width: 100%;
  height: var(--height-input);
  padding-left: 0;
  background-color: transparent;
  border: 0 none;
}

.smartInput.typeswitch label{
  flex-basis: 100%;
  flex-grow: 1;
}

.smartInput.typeswitch .inputContainer::before {
  content: '';
  display: inline-block;
  background: currentColor;
  height:4px;
  border-radius: 2px;
  position: absolute;
  opacity: 0.5;
  top: calc(var(--height-input) / 2 - 2px);
  left: calc(var(--height-input) / 2);
  width: var(--height-input);
}

.smartInput.typeswitch-edit {
  cursor: pointer;
}

.smartInput.typeswitch .inputContainer {
  /*border: var(--border-input);*/
  height: var(--height-input);
  /*border-radius: var(--border-radius-input);*/
  width: calc(var(--height-input) * 3); /* Platz für nen hint */
  overflow: visible;
  display: flex;
  align-items: center;
}


.smartInput.typeswitch .inputContainer .switch-toggler {
  height: 100%;
  flex:0;
  flex-basis: calc(var(--height-input) * 2);
  position: relative;
  top: 0;
  left: 0;
  border-radius: 9px;
  display: block;
  padding: 0;
  margin: 0;
  background: transparent;
}

.smartInput.typeswitch-edit .inputContainer .switch-toggler::before {
  display: block;
  position: absolute;
  top: -2px;
  left: -2px;
  height: calc(var(--height-input) + 4px);
  width:  calc(var(--height-input) + 4px);
  content: '';
  border-radius: 50%;
  background: var(--color-accent);
  transform-origin: center;
  opacity: 0;
  transition: background-color 1000ms, transform 500ms, opacity 800ms, left 250ms;
}

.smartInput.typeswitch-edit.switch-unchecked .inputContainer .switch-toggler::before {
  transform: scale(0.5);
}

.smartInput.typeswitch-edit.switch-checked .inputContainer .switch-toggler::before {
  background: #CCC;
}

.smartInput.typeswitch-edit .inputContainer .switch-toggler:active::before {
  opacity: 0.5;
  transition: opacity 0ms;
}

.smartInput.typeswitch-edit.switch-unchecked .inputContainer .switch-toggler:active::before {
  transform: scale(1);
}

.smartInput.typeswitch-edit.switch-checked .inputContainer .switch-toggler:active::before {
  transform: scale(2);
}

.smartInput.typeswitch .inputContainer .switch-toggler::after {
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  height: calc(var(--height-input) - 8px);
  width: calc(var(--height-input) - 8px);
  border: 1px solid #999;
  content: '';
  border-radius: 50%;
  transition: background 500ms, left 250ms;
  transform: translateX(0px);
  background: #999;
  /*box-shadow: 0px 0.5px 2px 1px rgba(0,0,0,0.3);*/
}

.smartInput.typeswitch.switch-checked .inputContainer .switch-toggler::before {
  left: calc(-2px + var(--height-input));
}

.smartInput.typeswitch.switch-checked .inputContainer .switch-toggler::after {
  left: calc(3px + var(--height-input));
}

.smartInput.typeswitch.switch-unchecked .inputContainer .switch-toggler::before {
  left: -2px;
}

.smartInput.typeswitch.switch-unchecked .inputContainer .switch-toggler::after {
  left: 3px;
}

.smartInput.typeswitch-edit.switch-checked .inputContainer .switch-toggler::after {
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
}

.smartInput.typeswitch-edit.switch-unchecked .inputContainer .switch-toggler::after {
  background: var(--color-main-background);
  border: 1px solid var(--color-accent);
}

/* ^^^ switch --------  checkboxNeu vvv */

td.d .smartInput.typecheck,
.smartInput.typecheck {
  border: 0;
  height: 20px;
  width: auto;
  background: transparent;
  padding: 2px 0;
  display: inline-block;
  margin: 0 4px 0 0;
  min-width: 20px;
}

.smartInput.typecheck-edit .check-toggler {
  cursor: pointer;
}
.smartInput.typecheck-edit.jml_input_readonly .check-toggler {
  cursor: default;
}

.smartInput.typecheck .inputContainer {
  border: var(--border-bottom-input, var(--border-input));
  height: 18px;
  width: 18px;
  border-radius: 3px;
  overflow: visible;
  display: block;
  padding: 0;
}

.smartInput.typecheck-nonedit .inputContainer {
  border: 1px solid transparent; /*rgba(128,128,128,0.2);*/
  background-color: var(--color-shade-4);
}

.smartInput.typecheck .inputContainer .check-toggler {
  height: 14px;
  width: 14px;
  position: relative;
  top: 2px;
  left: 2px;
  border-radius: 2px;
  display: block;
  padding: 0;
  margin: 0;
  background: transparent;
  transition: background-color 250ms;
}

.smartInput.typecheck-nonedit .inputContainer .check-toggler{
  cursor: default;
}

.smartInput.typecheck-edit .inputContainer .check-toggler::before {
  display: block;
  position: absolute;
  top: -3px;
  left: -3px;
  height: 20px;
  width: 20px;
  content: '';
  border-radius: 50%;
  background: var(--color-primary);
  transform-origin: center;
  opacity: 0;
  transition: background-color 1000ms, transform 500ms, opacity 800ms;
}

.smartInput.typecheck-edit.check-unchecked .inputContainer .check-toggler::before {
  transform: scale(0.5);
}

.smartInput.typecheck-edit.check-checked .inputContainer .check-toggler::before {
  transform: scale(2);
  background: #CCC;
}

.smartInput.typecheck-edit .inputContainer .check-toggler:active::before {
  opacity: 0.5;
  transition: opacity 0ms;
}

.smartInput.typecheck-edit.check-unchecked .inputContainer .check-toggler:active::before {
  transform: scale(1);
}

.smartInput.typecheck-edit.check-checked .inputContainer .check-toggler:active::before {
  transform: scale(2);
}

.smartInput.typecheck .inputContainer .check-toggler::after {
  display: block;
  position: absolute;
  top: 0;
  left: 0px;
  height: 14px;
  width: 12px;
  font-size: 14px;
  line-height: 14px;
  content: ' '; /* '✔'; <- das hier ist gruen in edge :( */
  background: transparent no-repeat 1px center;
  border-radius: 1px;
  transition: width 250ms;
  transition-delay: 100ms;
  overflow: hidden;
}

.smartInput.typecheck.check-checked .inputContainer .check-toggler::after {
  width: 12px;
}

.smartInput.typecheck.check-unchecked .inputContainer .check-toggler::after {
  width: 0;
  color: transparent
}

.smartInput.typecheck-edit.check-checked .inputContainer .check-toggler::after {
  background-image: url(../field/css_check_w.svg);
}

.smartInput.typecheck-nonedit.check-checked .inputContainer .check-toggler::after,
.smartInput.typecheck-nonedit.check-unchecked .inputContainer .check-toggler::after {
  width: 14px;
  height:14px;
  background-position: center;
}

.smartInput.typecheck-nonedit.check-checked .inputContainer .check-toggler::after {
  background-image: url(../field/css_check.svg);
}
.smartInput.typecheck-nonedit.check-unchecked .inputContainer .check-toggler::after {
}

.smartInput.typecheck-edit.check-checked .inputContainer .check-toggler {
  background: var(--color-accent);
}

.smartInput.typecheck-edit.check-unchecked .inputContainer .check-toggler {
  background: var(--color-input-background);
}

.smartInput.typecheck-edit.check-unchecked.jml_input_readonly .inputContainer .check-toggler {
  background: #EEE;
}


/* ^^^ checkboxNeu --------  texteditor vvv */
.texteditor textarea {
  padding: max(var(--padding-input-horz, 0px), calc(var(--border-radius-input, 0px) / 2));
  margin: 0;
  border: 0 none;
}

.smartInputButton .dijitButtonNode,
.smartInputButton img,
.smartInputButton fp-inline-svg {
  --icon-size: var(--height-input-button);
  height: var(--icon-size);
  width: var(--icon-size);
  padding: 0;
  margin: 0;
  border: 0 none;
  cursor: pointer;
  vertical-align: middle;
}


.smartInputUnit .unit {
  cursor: default;
  line-height: 16px;
  padding-top: 2px;
}

button.jmlPopupButton {
  background: transparent;
  border: 0 none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.jmlPopupButton .dijitButtonNode .dijitDownArrowButton,
.jmlPopupButton .dijitButtonNode .dijitDownArrowButton .dijitButtonText {
  padding: 0;
  margin: 0;
  border: 0 none;
}

.smartInputButton .dijitButtonNode .dijitDownArrowButton .dijitArrowButtonInner,
.smartInputButton .dijitButtonNode .dijitDownArrowButton .dijitArrowButtonChar,
.jmlPopupButton .dijitButtonNode .dijitDownArrowButton .dijitArrowButtonInner,
.jmlPopupButton .dijitButtonNode .dijitDownArrowButton .dijitArrowButtonChar,
.jmlPopupButton .dijitButtonNode .dijitIcon {
  display: none;
}

.jmlPopupButton .dijitButtonNode {
  background: transparent;
  border: none;
}

.jmlHasUnit {
  white-space: nowrap;
}

/* ------------------------------- Helper / Suggester ------------------------------- */

div.innerHelper ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

div.innerHelper ul li {
  padding: 0 5px 0 5px;
  cursor: pointer;
  line-height: 2.5em;
}

div.innerHelper ul li.label {
  font-weight: bold;
  cursor: default;
  line-height: 3.0em;
}

div.innerHelper ul.right li {
  text-align: right;
}

/* ------------------------- DateFieldWithSwitcher ------------------------- */

div.datefieldwithswitcher img {
  vertical-align: top;
  margin-top: 6px;
  cursor: pointer;
}

/* ------------------------- Calendarfield ------------------------- */

div.clickCatcher {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 1000;
  background-color: #999;
  cursor: default;
  opacity: 0.01;
}

div.jmlPopupBox {
  z-index: 1001;
}

div.calendarInnerDiv div.loading {
  width: 100%;
  height: 115px;
  border: 1px solid #CCC;
  background-color: var(--color-card-background);
  background-image: url("loading64.gif");
  background-repeat: no-repeat;
  background-position: center;
}

div.calendaranchor {
  position: relative;
  z-index: 10;
}

div.calendar {
  width: 220px;
}
body.touch-user .jmlPopupBox div.calendar,
body.mobile-device .jmlPopupBox div.calendar {
  width: 100%;
}

div.calendar a.close {
  font-weight: bold;
  text-align: right;
  position: absolute;
  text-decoration: none;
  color: #666;
  right: 4px;
  cursor: pointer;
}

div.calendarInnerDiv span.switch {
  font-weight: bold;
  cursor: pointer;
  vertical-align: middle;
  text-align: center;
}

div.calendarInnerDiv select {
  margin: 0 2px;
  height: 18px;
  vertical-align: middle;
}

div.calendarInnerDiv {
  /*padding: 2px 2px;*/
  text-align: center;
  min-width: 200px;
  max-width: 330px;
  min-height: 195px;
  user-select: none;
  margin-left: auto;
  margin-right: auto;
}

table.calendar {
  border: 0 solid #CCC;
  width: 100%;
}

table.calendar td {
  width: 14%;
  height: 26px;
  padding: 1px;
  text-align: center;
  border: 0 none;
  cursor: pointer;
  position: relative;
}

table.calendar tr, table.calendar tr.calendarColumnHeader {
  height: auto;
}

table.calendar td.week, table.calendar tr.calendarColumnHeader td.week {
  font-size: 66%;
  color: var(--color-main-font);
  width: auto;
  text-align: center;
  vertical-align: middle;
}

table.calendar tr:hover td.week, table.calendar tr.calendarColumnHeader:hover td.week {
  text-decoration: underline;
}

table.calendar td span {
  display: inline-block;
  height:22px;
  width: 22px;
  text-align: center;
  line-height: 23px;
  border-radius: 50%;
  padding: 0;
  transition: background-color 0.125s;
}

table.calendar td.sick {
  /*background-color: #E9D1D1 !important;*/
  background-color: var(--color-tint-sick) ;
}

table.calendar td.reservedResourceFullDay {
  background-color: var(--color-status-red) ;
}

table.calendar td.reservedResourceHourly {
  background-color: var(--color-status-orange) ;
}

table.calendar td.reservedResourcePlaned {
  background-color: var(--color-status-blue) ;
}

table.calendar td.vacation {
  /*background-color: #F0F195 !important;*/
  background-color: var(--color-tint-vacation);
}
table.calendar td.vacationRequest {
  /*background-color: #F0F195 !important;*/
  background-color: #64bad7 !important;
}

table.calendar td.weekend {
  background-color: var(--color-tint-weekend);
  color: var(--color-font-weekend);
}

table.calendar td.regular:hover::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: var(--color-default-hover);
  opacity: 0.5;
}

table.calendar td:hover span {
  background-color: var(--color-menu1-back-hover);
  color: white;
}

table.calendar td[initialDate="true"] span,
table.calendar td[initialDate="true"]:hover span {
  background-color: var(--color-primary);
  color: white;
  padding: 0;
  font-weight: bold;
}

/* Kategorie (vergangen, heute, zukunft)*/
table.calendar td[category="today"] span {
  border: 2px solid var(--color-primary);
  font-weight: bold;
}

table.calendar td[category="past"] {
}

table.calendar td[category="future"] {

}

/* Workday  */
table.calendar td[workday="empty"]:not(.weekend) {
  color: var(--color-main-font);
}

table.calendar td.othermonth {
  /*color: var(--color-card-font);*/
}

table.calendar td.othermonth > span {
  opacity: 0.5;
}

table.calendar td[workday="error"] {
  color: var(--color-status-red);
}

/* holiday  */
table.calendar td[holiday="partial"] {
  /*background-image: url("../../legacygeneral/cal_holidayhalf.gif") !important;*/
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, var(--color-tint-holiday) 5px, var(--color-tint-holiday) 10px);
  background-position: center;
}

table.calendar td[holiday="full"] {
  background-position: center;
  background-color: var(--color-tint-holiday) !important;
}

table.calendar td[vacation="partial"] {
  background-position: center;
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, var(--color-tint-vacation) 5px, var(--color-tint-vacation) 10px);
}

table.calendar td[vacation="partial"][holiday="partial"] {
  background-image: repeating-linear-gradient(-45deg, var(--color-tint-vacation), var(--color-tint-vacation) 5px, var(--color-tint-holiday) 5px, var(--color-tint-holiday) 10px);
  background-position: center;
}table.calendar td[vacation="full"][holiday="partial"] {
  background-image: repeating-linear-gradient(-45deg, var(--color-tint-vacation), var(--color-tint-vacation) 5px, var(--color-tint-holiday) 5px, var(--color-tint-holiday) 10px);
  background-position: center;
}table.calendar td[vacation="partial"][holiday="full"] {
  background-image: repeating-linear-gradient(-45deg, var(--color-tint-vacation), var(--color-tint-vacation) 5px, var(--color-tint-holiday) 5px, var(--color-tint-holiday) 10px);
  background-position: center;
}

table.calendar td.sick [holiday="partial"] {
  background-image: repeating-linear-gradient(-45deg, var(--color-tint-sick), var(--color-tint-sick) 5px, var(--color-tint-holiday) 5px, var(--color-tint-holiday) 10px);
  background-position: center;
}
table.calendar td.sick [vacation="partial"] {
  background-image: repeating-linear-gradient(-45deg, var(--color-tint-sick), var(--color-tint-sick) 5px, var(--color-tint-vacation) 5px, var(--color-tint-vacation) 10px);
  background-position: center;
}

table.calendar tr.calendarColumnHeader td {
  font-weight: bold;
}

.wadl_nextAppointments ul {
  padding: 0;
}

table.calendarnav {
  width: 100%;
  height: 36px;
  border-bottom: solid 1px var(--color-default-border);
  margin-bottom: 10px;
  background: var(--color-quickfilter-back);
  color: var(--color-quickfilter-font);
}

table.calendarnav td {
  vertical-align: middle;
}

table.calendarnav td.todayButton {
  width: 20%;
}

table.calendarnav td:first-child {
  text-align: left;
  padding-left: 3px;
  width: 12%;
}

.box table.calendarnav td:first-child {
  padding-left:  var(--width-componentpadding);
}

table.calendarnav td:last-child {
  text-align: right;
  padding-right:  var(--width-componentpadding);
  width: 12%;
}

table.calendarnav select,
.calendarnav .calNavButton {
  cursor: pointer;
  display: inline-block;
  padding: 0 4px 0 4px;
  height: 20px;
  font-size: 14px;
  line-height: 20px;
  /*color: var(--color-accent);*/
  /*background-color: transparent;*/
}

table.calendarnav select,
.calendarnav .calNavButton:active,
.calendarnav .calNavButton:hover {
  /*border:none;*/
}

.calendarnav .calNavButton.today {
  font-size: 10px;
}

.calendarnav .calNavButton img {
  width: 16px;
  height: 16px;
}

table.calendarnav td {
/*   background-color: var(--color-toolbar-back); */
  padding: 1px;
  border: 0 solid #EEE;
}

table.calendarnav select {
  font-size: 10px;
  width: auto;
  cursor: pointer;
}

.dj_gecko table.calendarnav select {
  -moz-appearance: none;
  border: 1px solid #BBB;
  padding-right: 12px;
  background-image: url("../field/button/base_cbp_button.svg");
  background-position: right;
  background-repeat: no-repeat;
}

.dj_chrome table.calendarnav select,
.dj_ie10 table.calendarnav select,
.dj_ie11 table.calendarnav select,
.dj_ie12 table.calendarnav select {
  border: 1px solid #BBB;
  /*height:16px;*/
}

table.calendarnav select::-ms-expand {
  background-color: #E9E9E9;
  border: 0 none;
}

table.calendar td.empty {
  cursor: default;
}

table.calendar td.regular {
  padding: 1px;
  text-align: center;
}

table.calendar td.invalid {
  background-image: url("cal_invalid.png");
  color: #666;
  background-repeat: no-repeat;
  background-position: center;
}

/* ------------- CalendarSeriesRule ---------------*/
div.calSerRul {
  background-color: var(--color-card-background);
  padding: 1px 5px 5px 5px;
  width: 500px;
  height: 380px;
  text-align: right;
}

div.calSerRul a.close {
  text-decoration: none;
  cursor: pointer;
  font-weight: bold;
}

div.calSerRul table {
  border-spacing: 0;
  border: 0;
  border-collapse: collapse;
}

div.calSerRul td {
  padding: 1px;
  background-color: transparent;
  text-align: left;
}

div.calSerRul td.rule {
  font-weight: bold;
  text-align: left;
  height: 25px;
  padding: 5px 0 0 0;
  font-size: 1.1em;
  vertical-align: top;
}

div.calSerRul input.interval {
  width: 21px;
  border-color: #D0DCEA #DEE6F0 #DEE6F0 #D0DCEA;
  border-style: solid;
  border-width: 1px;
  color: #003366;
  font-size: 8pt;
  font-weight: normal;
  height: 16px;
  padding-left: 2px;
  padding-right: 2px;
  text-align: left
}

/* ------------- CRM Address Field ---------------*/
div.crmAddress {
  padding: 1px 5px 5px 5px;
}

div.crmAddress > table label {
  margin-right: 5px;
}

div.crmAddress > table tr {
  height: 30px;
}

div.crmAddress > table td:nth-child(1) {
  text-align: right;
}

div.crmAddress > table td:nth-child(3) {
  text-align: right;
}

div.crmAddress input, div.crmAddress textarea {
  min-height: 20px;
  padding: 0 3px;
  width: 100%;
}

div.jmlmultifile {
  /*background-color: #FFF;
  border-style: none;
  border-width: 0px;*/
}

div.jmlmultifileadder {
  text-align: right;
  color: var(--color-main-font);
  font-size: 10px;
  vertical-align: top;
  margin: 0;
  background-color: #FFF;
  border-style: solid;
  border-width: 0 1px 1px 1px;
  border-top-color: #D0DCEA;
  border-left-color: #D0DCEA;
  border-bottom-color: #DEE6F0;
  border-right-color: #DEE6F0;
}

div.jmlmultifile.jmlmultifile_resetable {
  /*kommt alles von smartinput display: flex;
 flex-direction: row;
 flex: 1 1 100%;
border: 1px solid #e4e4e4; */
  height: 24px;
}

div.jmlmultifile .resetable {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 100%;
}

div.jmlmultifile .resetable .resetable_img {
  border-left: 1px solid #CCC;
  padding: 0 6px;
  cursor: pointer;
  height: inherit;
  display: flex;
  align-items: center;
}

div.jmlmultifile .resetable span.name {
  padding: 0 6px;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

div.jmlmultifileadder img {
  margin: 1px 1px 1px 5px;
  vertical-align: top;
}

.smartInput.jml_input_important {
  border-color: #EE7700;
  border-width: 1px;
  --border-input: 1px solid #EE7700;
  --border-left-input: 1px solid #EE7700;
  --border-right-input: 1px solid #EE7700;
  --border-top-input: 1px solid #EE7700;
  --border-bottom-input: 1px solid #EE7700;
}

.smartInput.jml_input_mandatory,
.smartInput.jml_input_mandatory:not(.typebutton, .typeswitch, .typecheck, .typeradiosender) {
  border-top: var(--border-top-input, var(--border-input));
  border-right: var(--border-right-input, var(--border-input));
  border-bottom: var(--border-bottom-input, var(--border-input));
  border-left: var(--border-left-input, var(--border-input));
  border-color: var(--color-input-mandatory, #C33333);
}

input.jml_input_readonly,
select.jml_input_readonly,
textarea.jml_input_readonly,
div.jml_input_readonly {
  background-color: var(--color-input-background);
  border: none;
  padding: 0 var(--padding-input-horz);
}

div.jml_input_readonly input.jml_input_readonly{
  background: none;
}

.smartInput.jml_input_invalid,
.smartInput.jml_input_invalid:not(.typebutton, .typeswitch, .typecheck, .typeradiosender) {
  border: 2px solid var(--color-status-red);
}

div.jml_input_invalid.jml_input_readonly {
  background-color: rgba(120,120,120,0.25);
  border-color: #888;
}

/* Ausnahmen, Abweichungen */

select.jml_input {
  min-width: 18px;
  width: 100%;
}

input.jml_input[type="checkbox"] {
  min-width: 0;
  border: none;
  padding: 0;
  height: 12px;
  width: 12px;
}

select.multiitem {
  min-width: 100px;
}

select, input {
  font-size: var(--font-normal);
}

.inputContainer .jml_input {
  text-align: inherit;
  box-sizing: border-box;
}

.inputContainer .jml_input.right {
  padding-right: 2px;
}

textarea.jml_input {
  position: relative;
  height: auto;
  width: 100%;
  padding: 1px;
  left: -2px;
}

div.remchars {
  text-align: right;
  font: var(--font-small);
  height: 11px;
  opacity: 0.5;
}

#monospace,
#monospace * {
  font-family: monospace;
}

/* ----------- Entitylogger ---------- */

.jmlEntityLoggerControl {
  /* position: relative; /* <- böse, weil es popups abschneidet:
  (Alle kindelemente die zwischen sich und dem scrollbaren DojoDialog ein
  positioniertes Element besitzen, werden abgeschnitten! */
  vertical-align: middle;
}

/* Wenn etwas angezeigt wird, brauchen wir links etwas Platz (geht aber nicht, design zerbricht) */
.jmlEntityLoggerAlert,
.jmlEntityLoggerHint {
}

.jmlEntityLoggerMessageAnchor {
  position: fixed;
  overflow: visible;
  width: 0;
  height: 0;
  z-index: 1000;
}

.jmlEntityLoggerMessageArea:not(:empty) {
  flex-shrink: 0;
  border: none;
  overflow: hidden;
  width: 100%;
  padding: var(--width-componentpadding);
}

.jmlEntityLoggerMessageArea:hover ul {
}

.jmlEntityLoggerMessageArea ul {
  position: relative;
  margin: 0;
  display: flex;
  list-style-type: none;
  padding: 0 0 0 0;
}

.jmlEntityLoggerMessageArea li {
  width: 120px;
  height: var(--height-toolbar);
  vertical-align: middle;
  display: inline-block;
  padding: 0 0;
  margin-right: 0;
  background-color: var(--color-card-background);
  box-shadow: var(--shadow-cards);
  color:var(--color-card-font);
}

.jmlEntityLoggerMessageArea li:first-child{
  width: 140px;
}
.jmlEntityLoggerMessageArea li p {
  margin: 0;
  font: var(--font-small);
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
}

.jmlEntityLoggerMessageArea li p.title {
  height: var(--height-toolbar);
  padding: 3px 3px 3px 20px;
  box-sizing: border-box;
  background-position: 5px;
  background-repeat: no-repeat;
  font-weight: bold;
}

.jmlEntityLoggerMessageArea li p.warn {
  background-image: url(entitylogger/css_warn.png);
  background-color: var(--color-status-red);
  color: #FFF;
}

.jmlEntityLoggerMessageArea li p.hint {
  background-image: url(entitylogger/css_hint.svg);
  background-color: var(--color-status-blue);
  color: #FFF;
}

.jmlEntityLoggerMessageArea li img {
  width: 48px;
  height: var(--height-toolbar);
  object-fit: cover;
}

.jmlEntityLoggerMessageArea li p.text {
  text-align: right;
  position: relative;
  top: calc(-1 * var(--height-toolbar));
  height: var(--height-toolbar);
  font-size: 12px;
  line-height: 15px;
  padding: 3px;
  box-sizing: border-box;
  margin-left: 48px;
}

.jmlEntityLoggerMessageArea li p.text strong {
  float: left;
  font-weight: bold;
  text-shadow: -1px -1px 0 #EEE;
}

/* --- Inputfelder - bei var's bitte an defaultwerte denken!--------------------------------- */

td.l > output:only-child { /* Wenn die Zelle nur ein einziges Output enthält, kann dieses auch rechtsbündig sein */
  display: block;
}

::placeholder { color: var(--color-card-header); opacity: 0.7; }


/* ERST WENN ALLE VARIABLEN GESETZT SIND KÖNNEN WIR DIE CSS-PROPERTIES SETZEN: */

.smartInput, .htmlInput, .jml_input:not(label, output, .typebutton, .typecancel, .typeswitch, .typecheck, .typeradiosender), textarea {
  background-color: var(--color-input-background);
  color: var(--color-input-font, var(--color-main-font));
  --border-input: 1px solid var(--color-input-border);
  border-top: var(--border-top-input, var(--border-input));
  border-right: var(--border-right-input, var(--border-input));
  border-bottom: var(--border-bottom-input, var(--border-input));
  border-left: var(--border-left-input, var(--border-input));
  border-radius: var(--border-radius-input);
}

.jml_input > label.integrated,
label.integrated.output-label {
  background-color: var(--color-input-background);
  display: inline-block;
  font: var(--font-input);
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  line-height: 4px; /* wir brauchen nur 4 px, um den Border des Feldes zu überdecken */
  /*left: var(--padding-input-horz);*/
  transform-origin: left top;
  padding-left: 4px;
  transform: translate(calc(var(--padding-input-horz) - 4px), -2px) scale(var(--scale-input-label-above,.75)) ;
}
label.integrated.output-label {
  display: block;
  position: absolute;
  /*background-color: transparent;*/
  color: var(--color-input-label, var(--color-input-border, currentColor));
}

.smartInput, .htmlInput {
  display: flex;
  align-items: center;
  position:relative;
  vertical-align: middle;
  min-height: var(--height-input);
  box-sizing: border-box;
  margin: 0;
  min-width: 40px;
}

.smartInput .inputContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: var(--height-input-button);
  /** Abstand rechts ist gleich wie oben ist gleich wie input höhe minus buttonhöhe durch 2*/
  padding-right: calc((var(--height-input, 0px) - var(--height-input-button, 0px))/2);
}

.smartInput.typefile .inputContainer {
  overflow: hidden;
  height: 18px;
  padding-top: 1px;
  padding-bottom: 1px;
}

.htmlInput.typetext .inputContainer {
  min-height: var(--height-input-button);
  line-height: var(--height-input-button);
}

.smartInput .inputContainer .smartInputUnit,
.smartInput .inputContainer .smartInputButton {
  text-align: center;
  width: 20px;
}

.smartInput .inputContainer .smartInputButton a {
  display: block;
  min-height: 18px;
}

.smartInput .inputContainer .smartInputElement {
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 0;
  flex-shrink: 0;
}

.smartInput .inputContainer .smartInputElement:first-child {
  flex-grow: 1;
  flex-shrink: 1;
}

.typecheck.smartInput .inputContainer .smartInputElement{
  position: absolute;
  top: -4px;
  right: -22px;
}

.smartInput .inputContainer .smartInputElement:first-child {
  width: auto;
  flex-grow: 1;
}

.smartInput .inputContainer .smartInputElement input {
  padding: 0 var(--padding-input-horz, 2px);
  box-sizing: border-box;
  font: var(--font-input);
  color: var(--color-input-font, var(--color-main-font));
}

.smartInput .inputContainer .smartInputElement input.right {
  padding-right: 2px;
}

.comboboxplus .inputContainer .jml_input {
  white-space: nowrap;
  padding-right: 2px;
}

.smartInput .inputContainer .smartInputUnit {
  width: 24px;
  min-width: 12px;
  text-align: left;
}
.smartInput .inputContainer .smartInputUnit0 {
  display: none;
}

.smartInput .inputContainer .smartInputUnit1 {
  width: 12px; /* reicht in diesem fall */
}

.smartInput .inputContainer .smartInputButton {
  background-color: var(--color-input-button-back);
  color: var(--color-input-button-font);
  width: var(--height-input-button);
  min-width: 1px;
  flex-shrink: 0;
  height: var(--height-input-button);
  border-radius: var(--border-radius-input-button);
  margin-left: 1px;
  opacity: .8;
  transition: background-color 100ms;
}

.smartInput .inputContainer .smartInputButton:last-of-type {
}

.smartInput .inputContainer .smartInputButton:hover {
  background-color: var( --color-accent);
  color: var(--color-accent-contrast);
}

.smartInputButton svg .actionPrimary,
.smartInputButton svg .actionSecondary {
  fill: currentColor;
}

.smartInput .smartInputButtons .smartInputHint,
.smartInput .inputContainer .smartInputHint {
  position: relative;
  overflow: visible;
  width: 20px;
  text-align: center;
}

.smartInput.typecheckbox .inputContainer .smartInputHint {
  border-left: none;
}

/*fp-field .smartInputHint::before,*/
/*.smartInput .smartInputButtons .smartInputHint::before,*/
/*.smartInput .inputContainer .smartInputHint::before,*/
/*label.containsHint .hint {*/
/*  content: 'i';*/
/*  color: var(--color-accent-contrast);*/
/*  background-color: var(--color-accent); !*#999;*!*/
/*  border-radius: 50%;*/
/*  display: inline-block;*/
/*  height: 14px;*/
/*  width: 14px;*/
/*  line-height: 14px;*/
/*  font-size: 12px;*/
/*  font-weight: bold;*/
/*  text-align: center;*/
/*  font-family: Consolas, Courier, Monospace, serif;*/
/*  transition: background-color 300ms;*/
/*}*/

label.containsHint .hint {
  vertical-align: text-bottom;
  --icon-size: 16px;
}

.smartInput .smartInputButtons .smartInputHint:hover::before,
.smartInput .inputContainer .smartInputHint:hover::before {
  background-color: #333333;
}

.field-hint {
  position: absolute;
  z-index: 100000;
  height: 0;
  width: 100%;
  overflow: hidden;
}

.field-hint-visible {
  overflow: visible;
}

.field-hint .hint-content {
  padding: 5px;
  transition: opacity 200ms, transform 200ms;
  opacity: 0;
  transform: scale(0);
  transform-origin: 90% bottom;
  transition-timing-function: ease-out;
  position: absolute;
  bottom: 2px;
  right: 0;
  min-width: 150px;
  background-color: #333;
  color: #FCFCFC;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  font-size: 12px;
}

.field-hint-visible .hint-content {
  opacity: 1;
  transform: scale(1);
  z-index: 10000;
}

/*fp-tooltip custom element*/

.fp-tooltip-dialog-popup,
.fp-tooltip-popup {
  position: absolute;
  z-index: 100000;
  overflow: visible;
  width: 0; height: 0;
}

.fp-tooltip-popup > div {
  background-color: var(--color-card-background);
  color: var(--color-card-font);
  border-radius: 3px;
  padding: 5px;
  overflow: hidden;
}

.fp-tooltip-dialog-popup > div,
.fp-tooltip-popup > div {
  transition: opacity 600ms, transform 200ms;
  opacity: 0;
  transform: scale(0);
  transform-origin: 90% bottom;
  transition-timing-function: cubic-bezier(0,1.4,0.5,1);
  min-width: 150px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  font-size: 12px;
}

.fp-tooltip-popup > div.left-anchored {
  transform-origin: 10% bottom;
}

.fp-tooltip-popup > div.top-anchored {
  transform-origin: 90% top;
}

.fp-tooltip-popup > div.left-anchored.top-anchored {
  transform-origin: 10% top;
}

.fp-tooltip-popup > div.dark {
  background-color: #333;
  color: #FCFCFC;
}
.fp-tooltip-popup > div.nopadding {
  padding: 0;
}

.fp-tooltip-popup > .entity-preview {
  background-color: var(--dm-color-stack-back);
}


.fp-tooltip-dialog-popup-hidden > div,
.fp-tooltip-popup-hidden > div {
  transition: opacity 500ms, transform 700ms;
}

.fp-tooltip-dialog-popup-visible > div,
.fp-tooltip-popup-visible > div {
  opacity: 1;
  transform: scale(1);
}

.smartInputButton {
  /*background-color: green;*/
}

.typefile .smartInputButton img {
  bottom: 1px;
}

.tundra .dijitDialogPaneContent .jml_dialogButtons .htmlInput {
  display: inline-block;
  vertical-align: middle;
  background-color: #FFF;
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
  padding: 1px 3px;
  margin: 0;
  min-width: 80px;
  border-radius: 1px;
  margin-right: 5px;

  -webkit-box-shadow: none; /* webkit browser*/
  -moz-box-shadow: none; /* firefox */
  box-shadow: none;

}

.tundra .dijitDialogPaneContent .jml_dialogButtons .htmlInput.defaultSettingButton {
  min-width: 20px;
}

.tundra .dijitDialogPaneContent .jml_dialogButtons .htmlInput.defaultSettingButton.controlButtonFavMod {
  background-color: #80E167;
}

.tundra .dijitDialogPaneContent .jml_dialogButtons .htmlInput.defaultSettingButton.controlButtonFavMod .dijitButtonText {
  color: white;
  font-size: 20px;
  margin-top: -2px;
}

.tundra .dijitDialogPaneContent .jml_dialogButtons .htmlInput.defaultSettingButton > span {
  padding: 0;
}

/* inputs in einer Dialogzelle dürfen auch "block" sein
   Sie sind damit so breit wie möglich, ohne über die tds zu ragen
*/
.bmlfQuickSearchInput.smartInput,
td.d .smartInput, td.d .htmlInput,
td.l .smartInput, td.l .htmlInput,
td.f .smartInput, td.f .htmlInput {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.smartInput select, .htmlInput select,
.smartInput input, .htmlInput input {
  border: 0 none;
  width: 100%;
}

.buttonarea .htmlInput {
  display: inline-block;
  vertical-align: middle;
  background-color: #FFF;
  border-style: solid;
  border-width: 1px;
  border-color: #666;
  padding: 1px 3px;
  margin: 0;
  min-width: 80px;
  border-radius: 1px;

  -webkit-box-shadow: none; /* webkit browser*/
  -moz-box-shadow: none; /* firefox */
  box-shadow: none;
}

div.buttonarea div.multiitemactionarea span#multiButtonbox .htmlInput {
  display: inline-block;
  vertical-align: middle;
  background-color: #FFF;
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
  padding: 1px 3px;
  margin: 0;
  min-width: 80px;
  border-radius: 1px;

  -webkit-box-shadow: none; /* webkit browser*/
  -moz-box-shadow: none; /* firefox */
  box-shadow: none;
}

/* Ausnahmen: */

.typetext input {
  padding: 0;
}

.typehidden {
  display: none;
}

.typecheckbox, /* Hierarchie wichtig fuer css-Gewichtung!!! */
td.d .typecheckbox,
td.f .typecheckbox {
  min-width: 0;
  border: 0 none;
  background: transparent;
  display: inline-block;
}

td.d > div.smartInputTA {
  padding: 0;
}

td.d > div.smartInputTA textarea{
  box-sizing: border-box;
}

.smartInputUnit .unit {
  font-weight: normal;
}

/* --- Inputfelder--------------------------------- */

/*.jml_dialogButtons .htmlInput.typebutton,*/
/*.boxsegment .page-actions > .jmlAction {*/
/*  !* Buttons sollten etwas aussenabstand haben...  *!*/
/*  margin: 1px 2px 1px 2px;*/
/*  padding: 0 8px;*/
/*  min-width: 20px;*/
/*  font-size: 12px;*/
/*  line-height: 25px;*/
/*  height: 25px;*/
/*  vertical-align: middle;*/
/*  border-radius: 1px;*/
/*  border-width: 1px;*/
/*  border-style: solid;*/
/*  text-align: center;*/
/*  border-color: #ccc;*/
/*  border-left-color: #D9D9D9;*/
/*  border-top-color: #D9D9D9;*/
/*  color: var(--color-toolbar-font);*/
/*  cursor: pointer;*/
/*  background: var(--color-toolbar-button);*/
/*}*/

/* ... ausser in Dialogen */
.tundra td.d .typebutton{
  margin: 1px 0 1px 0;
}

button.button:hover,
.tundra .modeadvanced .advbutton,
.boxsegment .page-actions > .jmlAction:hover,
.tundra .typesubmit input:not([disabled]):hover,
.tundra .typebutton .jmlButton:hover,
.tundra .typebutton .jmlButtonField .jmlAction:hover {
  background-color: var(--color-toolbar-button-hover);
}

.tundra .typesubmit input {
  background: transparent none;
}

.typesubmit, .typebutton {
  display: inline-block;
}

.typebutton.button_icon {
  width: 29px;
  line-height: 16px;
}

.tundra .typebutton a > .jmlActionLabel {
  flex-grow: 1;
}

.ckeContentAssist {
  z-index: 1999;
  max-height: min(400px, 50vh);
}

.ckeContentAssist ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/*
  Moderne Listviews
*/

.jmlStatisticsPage .statistic-frame {
  overflow: auto;
  padding: 12px 8px;
}

.jml-tiles-table {
  --tile-width-multiple: clamp(var(--tile-width), calc(90% / var(--number-of-columns, 1)) , calc(3 * var(--tile-width)));
  width: 100%;
}

.tmplWorkarea .viewFrame .jml-tiles-table {
  padding: 4px 0; /* scrollbalken verhindern */
  box-sizing: border-box;
  min-height: 40px; /* für die no-data-found-nachricht */
}

.jml_formTiles.dont-float .jml-tiles-table{
  width: auto;
}



/* wenn beim Splitten nur ein Ergebnis entsteht... */
.tmplWorkarea .viewFrame .jmlListBody:nth-child(2):last-child .jml-tiles-table {
  min-height: 50vh;
}

.jml-tiles-body > fp-format-entity{
  width: auto;
}


fp-popup .jmlViewcontroller {
  overflow: visible;
  width: min(100vw, 600px);
  --dialog-row-indent: 0;
  /*background-color: var(--color-main-background);*/
}

form[name="quicksetting"] .toolbar {
  --icon-size: 16px;
  display: flex;
  padding: var(--width-spacing-dialog-fieldset-horz);
  gap: var(--width-spacing-dialog-fieldset-horz);
}

.jml_miAdditionalFieldsPopup {
  width: auto;
  display: flex;
  min-height: 48px;
  gap: var(--width-componentpadding);
  align-items: center;
}

.jml_miAdditionalFieldsPopup > .listcontrol {
  min-width: 200px;
}

/*.jmlViewcontroller .listcontrol {*/
/*  transform: none; !* Vorsicht: Transforms erzeugen einen neuen Stacking-Context! *!*/
/*  transition: transform 300ms;*/
/*  transform-origin: top;*/
/*  min-width: 100px;*/
/*  min-height: 44px;*/
/*  padding: var(--width-componentspacing) 10px;*/
/*  vertical-align: top;*/
/*  display: inline-block;*/
/*}*/

.jml_miAdditionalFieldsPopup > .listcontrol,
.jmlViewcontroller .listcontrol .d{
  flex-basis: 140px;
}

.jmlViewcontroller .listcontrol-miaction {
  min-width: 200px;
}
.jmlViewcontroller .listcontrol-statistics {
  min-width: 320px;
}


fp-popup .jmlViewcontroller .listcontrol-columns{
  min-width: 320px;
  width: 100%;
  box-sizing: border-box;
}

.jmlViewcontroller .tilecontrol > label{
  font: var(--font-normal);
  font-weight: bold;
  display: block;
  border-bottom: solid 1px var(--color-default-border);
}

.jmlViewcontroller .listcontrol input[type="submit"],
.jmlViewcontroller .listcontrol button{
  vertical-align: middle;
  /*background-color: var(--color-toolbar-button);*/
  /*color: var(--color-toolbar-font);*/
  margin-left: 0;
  padding-left: 4px;
  padding-right: 4px;
}

.jmlViewcontroller .listcontrol fp-field:not(.selectbar){
  min-width: 100px;
}
.jmlViewcontroller .listcontrol fp-field:has(fp-widget-popup-select):not(.selectbar) {
  min-width: 200px;
}
.jmlViewcontroller .listcontrol fp-field[multiple] {
  min-width: 150px;
}

.jmlViewcontroller .listcontrol.tilecontrol-size fp-field {
  width: 80px;
}

.jmlViewcontroller  .listcontrol button[disabled],
.jmlViewcontroller  .listcontrol button[disabled] *{
  cursor: default;
}

.jmlViewcontroller .listcontrol button:not([disabled]):hover,
.jml_formTiles.size1 .tilecontrol-size button.size1,
.jml_formTiles.size2 .tilecontrol-size button.size2,
.jml_formTiles.size3 .tilecontrol-size button.size3 {
  background-color: var(--color-toolbar-button-hover);
  color: var(--color-toolbar-font-hover);
}

.jml_formList .listcontrol button.active,
.jml_formTiles .listcontrol button.active {
  /*background-color: #FFFFFF;*/
}

.jmlViewcontroller .tilecontrol-sorting fp-field {
  width: auto;
}
.jmlViewcontroller .tilecontrol-sorting button {
  font-size: 9px;
  font-family: monospace;
}

.jmlViewcontroller .listcontrol button:disabled{
  background: #EEE;
  color: #999;
}

.jmlViewcontroller .tilecontrol button.sort-dir-active {
  color: #000;
  font-weight: bold;
}

.jmlViewcontroller .tilecontrol-sorting {
  white-space: nowrap;
}

.jmlViewcontroller .tilecontrol-sorting .comboboxplus{
  min-width: 150px;
}

.jml_formTiles .jml-tiles-cell {
  vertical-align: top;
  text-align: center;
  min-width: 100px;
  /*border-right: 1px solid var(--color-toolbar-separator);*/
  /*border-bottom: 1px solid var(--color-toolbar-separator);*/
  position: relative;
}

.jml_formTiles.splitted .jml-tiles-cell{
  margin: 1px;
  background: var(--color-shade-2);
}

.jml_formTiles .jml-tiles-cell.left {
  /*border-left: 1px solid var(--color-toolbar-separator);*/
}
.jml_formTiles .jml-tiles-cell.top {
  /*border-top: 1px solid var(--color-toolbar-separator);*/
}

.jml-tiles-cell.left.top:last-child {
  border: none;
}

.jml_formTiles .jml-tiles-columnheader {
  text-align: center;
  font-weight: bold;
  padding-top: 4px;
  padding-bottom: 2px;
  place-self: auto;
  min-width: 75%;
  flex-direction: column;
  display: flex;
  justify-content: flex-end;
}

.jml_formTiles .jml-tiles-columnheader::after {
  content: '';
  display: block;
  width: calc(100% - 16px);
  height: 2px;
  margin: 2px;
  background-color: var(--color-primary);
}

.jml_formTiles .jml-tiles-columnheader .cbpValueI.cbpValueD .jmlImageContainer{
  --icon-size: 24px;
  margin-top: 2px;
  margin-bottom: -26px;
  margin-left: 0;
}
.jml_formTiles .jml-tiles-columnheader .cbpDescriptionI{
  padding-left: 38px;
}

.jml_formTiles .jml-tiles-rowheader{
  text-align: center;
  font-weight: bold;
  place-self: center;
}
.jml_formTiles .jml-tiles-rowheader > * {
  flex-grow: 1;
}

.jml_formTiles .jml-tiles-rowheader::after {
  content: '';
  display: block;
  height: calc(100% - 16px);
  width: 2px;
  margin-left: auto;
  margin-top: 8px;
  margin-right: 2px;
  background-color: var(--color-primary);
}


.jml_formTiles .jml-tiles-columnheader.jml-tiles-rowheader::after {
  display :none;
}

/* macht zuviel kaputt
.jml_formTiles .jml-tiles-rowheader {
  transform: rotateZ(-90deg);
  transform-origin: center;
}*/

.jml_formTiles .jml-tiles-rowheader.invalidValue,
.jml_formTiles .jml-tiles-columnheader.invalidValue {
  text-decoration: line-through;
}

.jml_formTiles td.jml-tiles-rowheader {
  text-align: left;
  padding: 0 2px 0 4px;
}

.jml_formTiles .jml-tiles-rowheader .cbpValue {
  text-align: right;
}

.jml_formTiles .jml-tiles-rowheader .cbpDescription,
.jml_formTiles .jml-tiles-columnheader .cbpDescription {
  font: var(--font-small);
}

.jml_formTiles .jml-tiles-rowheader .cbpValueI,
.jml_formTiles .jml-tiles-columnheader .cbpValueI {
  text-align: center;
}

.jml_formTiles .jml-tiles-rowheader img.jmlImage,
.jml_formTiles .jml-tiles-columnheader img.jmlImage {
  height: 24px;
  width: 24px;
  object-fit: contain;
}

.jml_formTiles .jml-tiles-rowheader .cbpValue.cbpValueI {
  padding: 30px 0 6px 0; /* platz für das icon */
  position: relative;
  width: 100%;
  display: inline-block;
  text-align: center;
  cursor: default;
  text-decoration: inherit;
}

.jml_formTiles .jml-tiles-columnheader .cbpValue.cbpValueI {
  position: relative;
  cursor: default;
}
.jml_formTiles :is(.jml-tiles-columnheader, .jml-tiles-rowheader) .cbpValue {
  max-width: 100%;
  display: flex;
  box-sizing: border-box;
}
.jml_formTiles :is(.jml-tiles-columnheader, .jml-tiles-rowheader) .cbpValue > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



.jml_formTiles .jml-tiles-cell {
  min-width: var(--tile-width-create);
  min-height: var(--tile-height-create);
}

.jml_formList .bmlf_calendarday.current-drop-target,
.jml_formTiles .jml-tiles-cell.current-drop-target {
  background-color: rgba(134, 210, 22, 0.5);
}

.jml_formList .bmlf_calendarday.current-drop-target-invalid,
.jml_formTiles .jml-tiles-cell.current-drop-target-invalid{
  background-color: rgba(0, 0, 0, 0.5);
}

.dnd-active .jml-tiles-cell.jml-tiles-body .jml-tile:not(.tile-being-dragged):not(.beeing-dragged-into) {
  transform: scale(0.8, 0.8);
  filter: brightness(0.9);
}

.dnd-active .jml-tiles-cell.jml-tiles-body .jml-tile:not(.tile-being-dragged).above {
  transform: scale(0.8, 0.8) translate3d(0px, -10px, 0);
}

.dnd-active .jml-tiles-cell.jml-tiles-body .jml-tile:not(.tile-being-dragged).before {
  transform: scale(0.8, 0.8) translate3d(-10px, 0px, 0);
}

.dnd-active .jml-tiles-cell.jml-tiles-body .jml-tile:not(.tile-being-dragged).after {
  transform: scale(0.8, 0.8) translate3d(10px, 0px, 0);
}

.dnd-active .jml-tiles-cell.jml-tiles-body .jml-tile:not(.tile-being-dragged).below {
  transform: scale(0.8, 0.8) translate3d(0px, 10px, 0);
}

.dnd-active .dnd-preview-location {
  background-color: currentColor;
  opacity: 0.25;
  pointer-events: none;
}

.dnd-active .jml-tiles-cell.jml-tiles-body .jml-tile.tile-being-dragged {
  /*background: #d0d0d0 !important;*/
  filter: brightness(1.1);
  transform: rotateZ(-2deg) scale(1.1);
  opacity: 0.75;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.75);
  position: relative;
  z-index: 1000;
}

.jml-tile.beeing-dragged-into {
  transform: scale(1);
  filter: brightness(1);
  outline: 4px solid var(--color-accent);
}
.jml-tile.beeing-dragged-into:not(.tile-being-dragged)::after {
  content: '';
  display: block;
  position:absolute;
  top: 50%;
  left: 50%;
  margin-top: -48px;
  margin-left: -48px;
  height: 36px;
  width: 36px;
  pointer-events: none;
  animation-name: drag-into-animation;
  animation-duration: 1000ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes drag-into-animation {
  0% { transform: scale(1,1);
    outline: 24px solid transparent;
    border: 16px solid var(--color-accent-contrast);
    background: var(--color-accent)
  }

  49% { transform: scale(0.6,0.6);
    outline: 24px solid var(--color-accent);
    border: 16px solid var(--color-accent-contrast);
    background: var(--color-accent-contrast)
  }

  50% { transform: scale(1,1);
    outline: 24px solid transparent;
    border: 16px solid var(--color-accent);
    background: var(--color-accent-contrast)
  }

  100% { transform: scale(0.6,0.6);
    outline: 24px solid var(--color-accent-contrast);
    border: 16px solid var(--color-accent);
    background: var(--color-accent)
  }
}

.jml_formTiles {
  --tile-width-create: 100px;
  --tile-height-create: 32px;
  --tile-width-size1: 100px;
  --tile-height-size1: 100px;
  --tile-width-size2: 200px;
  --tile-height-size2: 44px;
  --tile-width-size3: 300px;
  --tile-height-size3: 244px;
}

.jml_formTiles.dont-float {
  /* so breit wie die Spalte */
  --tile-width-create: var(--tile-width);
}

/* small mobile */
@media (max-width: 360px) {
  html {
    --tile-width-create: 100px;
    --tile-height-create: 32px;
    --tile-width-size1: 100px;
    --tile-height-size1: 100px;
  }
}

.jml_formTiles.contains-footer {
  --tile-height-size2: 72px;
}

.jml_formTiles {
  --tile-height-colheader: 40px;
  --tile-height: var(--tile-height-size1);
  --tile-width: var(--tile-width-size1);
  --tile-icon-size: 48px;
  --tile-border-radius: 4px;
  --tile-header-font: bold 10px/12px;
  --tile-header-sub-font: 10px/12px var(--font-family);
}
.jml_formTiles.size2 {
  --tile-height: var(--tile-height-size2);
  --tile-width: var(--tile-width-size2);
  --tile-icon-size: 24px;
  --tile-border-radius: 4px;
  --tile-header-font: bold 11px/14px var(--font-family);
  --tile-header-sub-font: 8px/9px var(--font-family);
}

.jml_formTiles.size3 {
  --tile-height: var(--tile-height-size3);
  --tile-width: var(--tile-width-size3);
  --tile-icon-size: 24px;
  --tile-border-radius: 4px;
  --tile-header-font: bold 14px/18px  var(--font-family);
  --tile-header-sub-font: 10px/12px var(--font-family);
}

.jml_formTiles.dont-float .jml-tiles-body,
.jml_formTiles.may-float .jml-tiles-body {
  display: flex;
  flex-flow: row wrap;
  /* Die gesamte Gruppe mittig, den Platz ausnutzend*/
  justify-content: space-evenly;
  /* Die gesamte Gruppe oben ausrichten*/
  align-content: flex-start;
  align-items: stretch;
  transform-origin: 0 50%;
  transition: transform 200ms;
  padding-bottom: 32px;
}
.jml_formTiles.may-float .jml-tiles-body {
  /* Die gesamte Gruppe links*/
  justify-content: flex-start;
}

.jml_formTiles.may-float .jml-tiles-body:first-child:last-child {
  /* Die gesamte Gruppe links ausrichten - es gibt nur eine Spalte */
  justify-content: flex-start;
}

.jml_formTiles .jml-tiles-body .infochips,
.jml_formTiles .jml-tiles-table .cell-summary {
  display: flex;
  justify-content: space-around;
  --icon-size: 16px;
}
.jml_formTiles .jml-tiles-body .infochips {
  position: absolute;
  padding: 1px;
  margin: 0;
  left:0;
  right:0;
  bottom: 0;
}

.jml_formTiles .jml-tiles-table .cell-summary {
  background: var(--color-shade-3);
  color: var(--color-shade-3-contrast);
}

.jml_formTiles .jml-tiles-body .infochips > div,
.jml_formTiles .jml-tiles-table .cell-summary > div{
  list-style: none;
  display: flex;
  align-items: center;
  flex-shrink: 1;
  flex-direction: row;
  font: var(--font-small);
  height: 20px;
  line-height: 20px;
  padding: 2px 6px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
}
.jml_formTiles .jml-tiles-body .infochips > div.empty,
.jml_formTiles .jml-tiles-table .cell-summary > div.empty {
  opacity: 0.5;
}

.jml_formTiles .jml-tiles-body .infochips > div label,
.jml_formTiles .jml-tiles-table .cell-summary > div label{
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jml_formTiles .jml-tiles-body .infochips > div fp-format-entity,
.jml_formTiles .jml-tiles-table .cell-summary > div fp-format-entity{
  --icon-size: 16px;
}


.jml_formTiles .flex-element{
  flex-basis: var(--tile-width);
  padding: 2px 2px 4px 2px;
  align-self: stretch;
  flex-grow: 0; /* <- ab jetzt simpel linksbündig */
}

.jml_formTiles .flex-element.flex-element-flat {
  padding-top: 0;
  padding-bottom: 0;
}

.jml_formTiles .flex-element.flex-element-linebreak {
  flex-basis: 100% !important;
  padding-top: 0;
  padding-bottom: 0;
  align-self: stretch;
  flex-grow: 2;
}

.jml_formTiles .flex-element.flex-element-dummy {
  height: var(--tile-height);
  flex-basis: calc(0.5 * var(--tile-width));
}

.jml_formTiles .flex-element.flex-element-create{
  opacity: 0;
  width: var(--tile-width);
  height: var(--tile-height-create);
  font: var(--font-large);
  transition: opacity 800ms;
  transition-delay: 200ms;
  transition-timing-function: cubic-bezier(0,1,0.5,1.5);
}

.favs4menu .jml_formTiles .flex-element.flex-element-create:not(:first-child){
  /* das macht bei vollen leisten scrollbars :( margin-right: calc(-1 * var(--tile-width));*/
  --tile-height-create: var(--tile-height);
  opacity: 0.1;
}

body.touch-user .jml_formTiles .flex-element.flex-element-create{
  opacity: 0.75;
}

.jml_formTiles.dnd-active .flex-element.flex-element-create{
  /* verstecken können wir das element nicht, dann flippert plötzlich alles herum*/
  pointer-events: none;
}
.jml_formTiles.dnd-active .current-drop-target .flex-element.flex-element-create{
  /* jetzt können wir das Create verstecken, nun ist ja ein Position-Dummy da */
  display: none;
}

.jml_formTiles .flex-element.flex-element-create:first-child{
  /* wenn create die einzige Kachel ist, können wir uns "klein" machen */
  width: var(--tile-width-create);
  height: var(--tile-height-create);
}

.jml_formTiles .jml-tiles-body:hover .flex-element.flex-element-create{
  opacity: 0.3;
}
.jml_formTiles .flex-element.flex-element-create:hover{
  opacity: 1 !important;
}

.jml_formTiles .flex-element.flex-element-create .jml-tile {
  background-size: calc(0.75 * var(--tile-height-create));
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  width: var(--tile-width-create);
  height: var(--tile-height-create);
  /*border-radius: 50%;*/
  border: 2px solid currentColor;
  box-sizing: border-box;
}

.ignore-undefined-var {
  --card-color: inherit;
}
.jml_formTiles .dnd-preview-location,
.jml_formTiles .jml-tile {
  /* --card-color ist inline definiert. Also alles ok hier! */
  background-color: var(--card-color, var(--color-card-background));
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  height: var(--tile-height);
  width: var(--tile-width);
  margin: auto;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 0; /* <- Neuer Stapelkontext */
  transition: height 200ms, width 200ms, background 200ms, transform 200ms;
  border-radius: var(--tile-border-radius, 4px);
}
pf-list-view.loading .jml_formTiles .jml-tile{
  pointer-events: none;
}

.jml_formTiles .jml-tile .jml-tile-back {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.jml_formTiles .jml-tile img.jml-tile-back {
  object-fit: cover;
}

.jml_formTiles .jml-tile.jml-tile-light img.jml-tile-back{
  opacity: 0.5;
  filter: contrast(0.6) brightness(1.2);
}

.jml_formTiles .jml-tile.jml-tile-dark img.jml-tile-back{
  filter: contrast(1.1) brightness(0.75);
}

.jml_formTiles .jml-tile video.jml-tile-back {
  object-fit: contain;
  background-color: #333;
}

.jml_formTiles .jml-tile .jml-tile-header {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-left: 8px; /* no icon */
  padding-right: 8px; /*no e.a.o. */
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  left: 0;
  right: 0;
  height: 44px; /*var(--tile-height-size2);*/
  color: var(--color-card-font);
  padding-top: 2px;
}

.jml_formTiles.size2.pinboard .jml-tile .jml-tile-header h1
{ white-space: normal;
  max-height: 28px;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;}

.jml_formTiles .jml-tile .jml-tile-header.has-icon {
  padding-left: calc(var(--tile-icon-size) + 8px)
}
.jml_formTiles .jml-tile .jml-tile-header.has-action {
  padding-right: 32px; /* e.a.o. */
}

/*.jml_formTiles .jml-tile.jml-tile-dark,*/
/*.jml_formTiles .jml-tile .jml-tile-header-dark,*/
/*.jml_formTiles .jml-tile-dark .jml-tile-header,*/
/*.jml_formTiles .jml-tile-dark .hiddenactionbutton*/
/*{*/
/*  --color-card-font: #FFFFFF;*/
/*}*/

/*.jml_formTiles .jml-tile.jml-tile-light,*/
/*.jml_formTiles .jml-tile .jml-tile-header-light,*/
/*.jml_formTiles .jml-tile-light .jml-tile-header,*/
/*.jml_formTiles .jml-tile-light .hiddenactionbutton*/
/*{*/
/*  --color-card-font: #333333;*/
/*}*/

.jml_formTiles .jml-tile[onclick]:not(.tile-being-dragged):hover {
  cursor: pointer;
  background-color: var(--color-default-hover);
  --color-card-font: var(--color-default-hover-contrast);
}
.jml_formTiles .jml-tile[onclick]:hover .jml-tile-header {
  --color-card-font: var(--color-default-hover-contrast);
}

.jml_formTiles .jml-tile.selected {
  background-color: var(--color-selected-item);
  --color-card-font: var(--color-default-hover-contrast);
  --color-default-hover: var(--color-selected-item-hover);
}
.jml_formTiles .jml-tile.selected .jml-tile-header {
  --color-card-font: var(--color-default-hover-contrast);
}

.jml_formTiles.size3 .jml-videotile .jml-tile-header,
.jml_formTiles.size3 .jml-imagetile .jml-tile-header {
  box-shadow: none;
  padding-bottom: 20px;
}

.jml_formTiles.size3 .jml-videotile.jml-tile-dark .jml-tile-header,
.jml_formTiles.size3 .jml-imagetile.jml-tile-dark .jml-tile-header {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 10%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0) 100%);
  text-shadow: 0 1px 4px #000;
}
.jml_formTiles.size3 .jml-videotile.jml-tile-dark .content,
.jml_formTiles.size3 .jml-imagetile.jml-tile-dark .content {
  text-shadow: 0 1px 4px #000;
}

.jml_formTiles.size3 .jml-videotile.jml-tile-light .jml-tile-header,
.jml_formTiles.size3 .jml-imagetile.jml-tile-light .jml-tile-header {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0) 100%);
}

.jml_formTiles .jml-tile-dark.jml-imagetile {
  background-color: #CCC;
}

.jml_formTiles.size2 .jml-tile .tile-icon .jmlImageContainer,
.jml_formTiles.size3 .jml-tile .tile-icon .jmlImageContainer {
  top: 6px;
  left: 5px;
  position: relative;
}

.jml_formTiles.size2 .jml-tile .tile-icon fp-format-entity,
.jml_formTiles.size3 .jml-tile .tile-icon fp-format-entity{
  margin-top: 6px;
  margin-left: 5px;
  position: relative;
  --icon-size: var(--tile-icon-size);
}

.jml_formTiles .jml-tile .tile-icon fp-inline-svg.jmlImageContainer:not(.jmlImageOverlay),
.jml_formTiles .jml-tile .tile-icon .jmlImageContainer > img:not(.jmlImageOverlay),
.jml_formTiles .jml-tile .tile-icon > fp-format-entity {
  --icon-size: var(--tile-icon-size);
  height: var(--tile-icon-size);
  width: var(--tile-icon-size);
}

.jml_formTiles .jml-tile .tile-icon fp-inline-svg.jmlImageContainer:not(.jmlImageOverlay) {
  object-fit: cover;
}

.jml_formTiles.size1 .jml-tile .tile-icon {
  height: 64px;
  padding-top: 12px;
  width: var(--tile-width);
  text-align: center;
}
.jml_formTiles.size1 .jml-imagetile .tile-icon {
  height: 16px;
  width: 16px;
  display: none;
}

.jml_formTiles.size1 .jml-tile video {
  display: none;
}

.jml_formTiles .jml-tile .tile-icon{
  width: calc(var(--tile-icon-size) + 8px);
  height: var(--tile-height-size2);
  padding-top: 4px;
  text-align: left;
  color: var(--color-card-font);
}

.jml_formTiles .jml-tile .tile-eao {
  position: absolute;
  z-index: 5;
  top: 10px;
  right: 5px;
}

.tile-eao.dark {
  color: #FFF;
}

.tile-eao.light {
  color: #333;
}
.jml_formTiles .jml-tile .tile-eao .hiddenactionbutton {
  padding-top: 1px;
}

.jml_formTiles .jml-tile .tile-eao input.jml_input[type="checkbox"] {
  background-color: #FFF;
  height: 18px;
  width: 18px;
  margin-top: 2px;
}

.jml_formTiles .jml-tile .jml-tile-header h1,
.jml_formTiles .jml-tile .jml-tile-header h2,
.jml_formTiles .jml-tile .jml-tile-header h3 {
  text-align: left;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jml_formTiles .jml-tile .jml-tile-header .surtitle,
.jml_formTiles .jml-tile .jml-tile-header .subtitle {
  font: var(--tile-header-sub-font);
  opacity: 0.75;
  padding-left: 1px; /*Bringt die kleinen Titel visuell auf Linie*/
}

.jml_formTiles .jml-imagetile .jml-tile-header .surtitle,
.jml_formTiles .jml-imagetile .jml-tile-header .subtitle {
  opacity: 1;
}

.jml_formTiles .jml-tile .jml-tile-header .surtitle {
  padding-top: 1px;
  margin-bottom: -1px;
}

.jml_formTiles .jml-tile .jml-tile-header .subtitle {
  margin-top: -1px;
}

.jml_formTiles.size1 .jml-tile .jml-tile-header .surtitle,
.jml_formTiles.size1 .jml-tile .jml-tile-header .subtitle {
  display: none;
}

.jml_formTiles .jml-tile .jml-tile-header .title {
  font: var(--tile-header-font);
}

.jml_formTiles .jml-tile .tile-click {
  cursor: pointer;
  /*background: rgba(255,0,0,0.25);*/
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.5;
}

.jml_formTiles .jml-tile .tile-click:hover {
  /*background: red;*/
}

/*warum sollten wir das title-Attribut blockieren??? -> .jml_formTiles .jml-tile[onclick] > .jml-tile-header, /* damit wir hindurch-hovern können*/
.jml_formTiles .jml-tile[onclick] > .tile-icon > fp-inline-svg[lightbox], /* damit beim click keine Lightbox aufgeht */
.jml_formTiles .jml-tile[onclick] > .content { /* damit beim click KEIN link funktioniert */
  pointer-events: none;
}

.jml_formTiles .jml-tile > .content {
  display: none;
}

.jml_formTiles .jml-imagetile,
.jml_formTiles .jml-tile .content-dark {
  color: #FFFFFF;
  --color-card-font: #FFFFFF;
}

.jml_formTiles.size3 .jml-tile > .content {
  display: block;
  text-align: left;
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden; /* <- seit 6.7, macht hoffentlich nichts kaputt */
  /*background-color: rgba(255, 255, 255, 0.125);*/
  color: var(--color-card-font, currentColor);
}
.jml_formTiles.size3 .jml-tile > .content.has-footer {
  bottom: 30px;
}
.jml_formTiles.size3 .jml-tile > .content-dummy::after {
  content: '–\A—–\A–—';
  font-size: 110px;
  display: inline-block;
  white-space: pre;
  line-height: 36px;
  margin: 24px;
  opacity: 0.25;
}


.jml_formTiles .jml-tile > .footer{
  opacity: 0;
  transition: opacity 200ms;
  position: absolute;
  bottom: 4px;
  left: 8px;
  right: 8px;
  height: 24px;
  width: auto;
  border-top: 1px solid rgba(128,128,128,0.25);
  color: var(--color-card-font);
}
.jml_formTiles.size2 .jml-tile > .footer{
  font: var(--font-small);
}

.jml_formTiles.size2 .jml-tile > .footer,
.jml_formTiles.size3 .jml-tile > .footer {
  opacity: 1;
  display: flex;
  align-items: center;
}

.jml-tile > .footer .card-footer{
  display: flex;
  justify-content: space-between;
  --icon-size: 16px;
  width: 100%;
  font: var(--font-xsmall);
  line-height: 16px;
  font-weight: bold;
}

.jml-tile > .footer .card-footer > span{
  flex-basis: auto;
  flex-grow: 1;
}

.jml-tile > .footer .card-footer .jmlImageContainer {
  vertical-align: bottom;
}

.jml_formTiles.size3 .jml-tile.jml-imagetile > .content{
  background-color: transparent;
}

/* Klassenlose paragraphs */
.jml-tile .content p:not([class]) {
  padding: 8px;
}

.jml_formTiles.size2 .jml-imagetile .jml-tile-header,
.jml_formTiles.size2 .jml-videotile .jml-tile-header {
  background: rgba(0, 0, 0, 0.4);
}

.jml_formTiles.size2 .jml-tile img.jml-tile-back,
.jml_formTiles.size2 .jml-tile video.jml-tile-back {
  filter: var(--disable-backdrop-filter, blur(3px));
}

/*.jml_formTiles.size1 .flex-element {*/
  /*flex-basis: 80px;*/
/*}*/

/*.jml_formTiles.size1 .flex-element.flex-element-dummy {*/
  /*height: 80px;*/
/*}*/



.jml_formTiles.size1 .jml-tile {
  /*background-color: var(--color-card-background);*/
}

.jml_formTiles.size1 .jml-tile .jml-tile-header {
  box-sizing: border-box;
  padding: calc(var(--tile-height) - 28px) 0 0 0;
  height: var(--tile-height);
}

.jml_formTiles.size1 .jml-tile .jml-tile-header h1 {
  font-size: 10px;
  line-height: 12px;
  min-height: 13px;
  max-height: 24px;
  text-align: center;
  /*border-radius: 6px;*/
  /*background-color: rgba(255,255,255,0.75);*/
  white-space: normal;
}

.jml_formTiles.size1 .jml-imagetile .jml-tile-header {
  border-radius: 0;
  background: rgba(0, 0, 0, 0.4);
}

.jml_formTiles.size1 .jml-tile .jml-tile-header-dark {
  /*background: rgba(0, 0, 0, 0.4);*/
}

.jml_formTiles.size1 .jml-tile .jml-tile-header .title {

}

.jml_formTiles.size1 .jml-tile .tile-eao {
  /*display: none;*/
  top: 4px;
  right: 2px;
}

.jml_formTiles.size1 .jml-imagetile .tile-icon .jmlImageContainer {
  top: 1px;
  left: 1px;
}

.jml_formTiles.size1 .jml-imagetile .tile-icon .jmlImageContainer img:not(.jmlImageOverlay) {
  width: 16px;
  height: auto;
}

/** mockup-hacks */
.jml-tile .visitenkarte {
  background: transparent;
  width: auto;
  border: 0 none;
}

.split-signature {
  display: flex; flex-direction: row;
  margin: 10px 0 8px 0;
}
.listbody tbody:first-of-type .split-signature{
  margin-top: 0;
}

/** SplitSignature */
.split-signature .sse {
  flex-grow: 0;
  box-sizing: border-box; /* manche elemente sind das von sich aus - machen wir halt alle so*/
  padding: 2px 8px 4px var(--width-componentpadding);
  min-width: 60px;
  margin: 8px 2px 2px 0;
  border-bottom: 1px solid var(--color-primary);
}

.accumulation > .split-signature .sse {
  border-bottom: 0;
  margin: 1px;
}

.accumulation > .split-signature {
  margin: 0;
  vertical-align: middle;
}

.split-signature .sse.hoverme {
  cursor: pointer;
}

.split-signature .sse.info {
  opacity: 1;
  text-align: right;
}
.split-signature .sse.details {
  font: var(--font-small);
}

.split-signature .sse:last-child {
  flex-grow: 1;
  width: auto;
  margin-right: 0;
}

.split-signature .sse.empty:last-child {
  opacity: 0.5;
}

.split-signature .sse-icon {
  padding-left: 40px;
  position: relative;
}

.split-signature .sse-icon > img,
.split-signature .sse-icon > .jmlImageContainer{
  height: 32px; width:32px;
  position: absolute;
  left: 4px;
  top: 4px;
}

.split-signature .sse .cat{
  font: var(--font-small);
  line-height: 1;
  color: var(--color-card-font);
}

.split-signature .sse .val{
  font-weight: bold;
  font-size: 14px;
  line-height: 17px;
  white-space: nowrap;
  color: var(--color-card-header);
}