@charset "UTF-8";
/* ------------------------------------------------------------------------------------------------- *
 * -------------------------------                   ----------------------------- *
 * -------------------------------     Design Stylesheets      ----------------------------- *
 * -------------------------------    (ergaenzt Basis-Styles)    ----------------------------- *
 * -------------------------------                   ----------------------------- *
 * ------------------------------------------------------------------------------------------------- *
 * ------------------------------------------------------------------------------------------------- *
 * -------------------------------   Allgemeines / CustomElements  ------------------------------- */

input {background-color: transparent;}

h1 {font: var(--font-header);}
h2 {font: var(--font-large);}
h3 {font: var(--font-medium);}
h4 {font: var(--font-normal); font-weight: bold;}

button {
  border: none;
  background-color: transparent;
  color: currentColor;
  --icon-size: 16px;
  cursor: pointer;
}

.tmplControlBar button {
  background-color: var(--color-toolbar-button);
  color: var(--color-toolbar-font);
}

button.invisible, button.invisible:hover {
  background: none;
}


/* TODO mit CK-Editor 5 evtl entfernen. Ist für Fullscreen mit CKE4 nötig (der penner zerschießt und alle klassen bis zum html-element */
html[class=""] > body > div[class=""] fp-menu-controller,
html[class=""] > body > div[class=""] fp-sidebar,
html[class=""] > body > div[class=""] fp-async-content {
  display: none;
}

fp-modal, fp-dialog {top:30px;} /* wir brauchen einen initialen "top"-wert - sonst nutzt das position:absolute nix und das Modal drückt die ganze App nach oben*/

fp-view-wrapper, fp-expander, fp-tab-container {
  --default-padding: var(--width-componentpadding);
}

fp-chip {
  --padding-format-horz: 1px; /* in chips wird kein input-padding mehr benötigt */
}

fp-format-taskid { display: inline; } /* Es ist nur eine Zahl, das sollte inline sein */
fp-tab-container::part(divider),
fp-expander::part(divider) {
  margin: 0 0 -1px 0;
  opacity: 0;
  transition: opacity 200ms;
  border-color: var(--color-default-border);
  border-style: solid;

}
fp-tab-container[isopen]::part(divider),
fp-expander[isopen]::part(divider) {
  opacity: 1;
}

fp-field[has-widgets][editable] fp-format-string[textarea="true"] {
  border-right: var(--border-right-input, var(--border-input));
  box-sizing: border-box;
  width: calc(100% - 10px);
}

pf-richtext-editor {
  display: block;
  min-height: 100px; /* das Flackern etwas reduzieren*/
  min-width: 350px;
  height: 100%; /* die iframe-variante*/
  text-overline: auto; /* wenn jemand per hand resized, damit es nicht kaputt aussieht, sondern zumindest scrollbars hat*/
}

pf-richtext-editor[inline] {
  height: var(--height-by-rows, 100%);
  overflow: auto;
  resize: vertical; /* die non-iframe-variante*/
  border-bottom-left-radius: var(--border-radius-input);
  border-bottom-right-radius: 2px;
}

pf-richtext-editor[inline] .cke_editable{
  min-height: 100%;
  padding: 1px var(--padding-input-horz);
  box-sizing: border-box;
  color: var(--color-main-font)
}

pf-richtext-editor[mini-toolbar] {
}

pf-richtext-editor[toolbar-disabled] {
  border-top-left-radius: var(--border-radius-input);
  border-top-right-radius: var(--border-radius-input);
  min-width: unset;
  width: 100%;
  resize:vertical;
}

div[data-jml-inputtype="textarea"] label.integrated.output-label{
  position: relative;
}

fp-field [slot="widgets"].toolbar {
  position: relative;
  flex-grow: 1;
  /*min-height: 55px;*/
}
/* INLINE-Variante */
fp-field [slot="widgets"] > .cke,
fp-field [slot="widgets"] .cke_inner,
fp-field [slot="widgets"] .cke_top,
/* IFRAME-Variante */
pf-richtext-editor > .cke,
pf-richtext-editor > .cke .cke_inner,
pf-richtext-editor > .cke .cke_top {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-toolbar-font);
}
pf-richtext-editor > .cke .cke_top {
  border-bottom: var(--border-input, 1px solid currentColor);
}
pf-richtext-editor > .cke .cke_maximized .cke_top {
  background: var(--color-toolbar-back);
}

fp-field .cke_toolgroup,
fp-field .cke_combo {
  margin-bottom: 0;
}

/*fp-field::part(label) {*/
/*  --color-input-label: var(--color-primary-for-text);*/
/*}*/


#global-resize-handle {
  color: var(--color-primary-darker);
  border-right: 8px solid currentColor;
  border-bottom: 8px solid currentColor;
  border-bottom-right-radius: var(--handleRadius, 4px);
  /*background-color: rgba(200,200,0,0.25);*/
  opacity: 0.5;
  transition: opacity 500ms, color 500ms allow-discrete;
}

@starting-style { /* <-- and this line */
  #global-resize-handle.show {
    opacity: 0;
  }
}

#global-resize-handle::before,
#global-resize-handle::after {
  content: '';
  display: block;
  height: 8px;
  width: 8px;
  border-radius: 4px;
  background-color: currentColor;
  position: absolute;
}
#global-resize-handle::before {
  top:-4px;
  right:-8px;
}
#global-resize-handle::after {
  bottom:-8px;
  left:-4px;
}

#global-resize-handle.tr { transform: rotate(-90deg); }
#global-resize-handle.tl { transform: rotate(-180deg); }
#global-resize-handle.bl { transform: rotate(90deg); }

#global-resize-handle:hover {
  color: var(--color-primary-lighter);
  opacity: 1;
}

div.replacedummyplugin {
  height: auto;
  width: auto;
  min-width: 320px;
  transform: translateX(-50px);
}

div.replacedummyplugin > iframe {
  min-height: 400px;

}

fp-async-list {
  display: block; min-height: 1px; /* sonst lädt es sich nie */
}

fp-ellipsis[line-clamp] {
  word-break: break-word; /* wenn es nicht anders geht, brechen wir auch innerhalb eines Wortes um*/
}

fp-expander, fp-tab-container {
  --bar-height: var(--height-toolbar);
  --color-button-border: transparent;
}

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

.selection fp-tab-container {
  --bar-border-bottom: 1px solid var(--color-default-border);
}
fp-expander #box-content{
  padding: 15px 0;
}

output > :is(fp-format-duration, fp-format-datetime, fp-format-date, fp-format-select) {
  display: inline;
}

.opacity05 {opacity: 0.5;}

.keyboard-user fp-expander[tabindex]:focus,
.keyboard-user input.jmlButton:focus,
.keyboard-user fp-field.active,
.keyboard-user fp-field:focus-within,
.keyboard-user .smartInput:focus-within {
  outline: 3px solid var(--color-primary);
}

html {
  --field-info-tooltip-display: unset;
  --field-info-below-display: none;
}
.touch-user,
.keyboard-user {
  --field-info-tooltip-display: none;
  --field-info-below-display: block;
  & fp-option-list { --option-height: 48px; --expander-width: 48px; } /* normalerweise 32px (ohne description) https://m3.material.io/foundations/designing/structure#dab862b1-e042-4c40-b680-b484b9f077f6 */
}

fp-field:not([editable]) {
  --color-input-border: var(--color-shade-3); /* sehr schwache Linienfarbe*/
  --color-input-font: var(--color-input-label); /* sehr schwache Linienfarbe*/
  --color-accent: var(--color-input-font-readonly); /* sehr schwache Linienfarbe*/
}
.l > fp-field:not([editable]) {
  --color-input-border: transparent;
}

div.jml_input_readonly.ro-transparent,
fp-field[readonly].ro-transparent {
    --color-input-background: transparent;
    --border-input: 0 none transparent;
    --border-left-input: 0 none transparent;
    --border-right-input: 0 none transparent;
    --border-top-input: 0 none transparent;
    --border-bottom-input: 0 none transparent;
}

.d > output,
.d > fp-limited-content > :is(span, p) > output[data-jml-inputtype="textarea"],
.d > :is(span, p) > output{
  display: inline-flex;
  align-items: center;
  width: 100%;
  position: relative;
  padding: var(--padding-input-vert) 0;
  --color-input-background: var(--color-shade-1);
  font: var(--font-input);
}

.d > output > :is(span, section),
.d > :is(span, p) > output > :is(span,section){
  padding-left: var(--padding-input-horz);
}

:is(fp-field, button, a, input).input-compact {
  --icon-size: 16px;
  --height-input: 24px;
  --font-input: var(--font-normal);
  --font-button: var(--font-normal);
  --font-weight-button: 400;
  --padding-input-horz: 2px;
  --padding-input-vert: 1px;
}
button.input-compact, input[type=button].input-compact.jmlButtonField, input[type=submit].input-compact.jmlButtonField {
  --font-input: var(--font-small);
  font:  var(--font-small);
}

fp-field:not([editable]),
.d > output,
.d > div.richtexteditor,
.d > fp-limited-content > span > output[data-jml-inputtype="textarea"] {
  --color-input-font: var(--color-main-font);
  --color-input-border: var(--color-shade-3);
  --color-input-background: var(--color-shade-1);
}

fp-field.jmlActionLabel {
  --border-input: 0 none;
  --border-top-input: 0 none;
  --border-right-input: 0 none;
  --border-bottom-input: 0 none;
  --border-left-input: 0 none;
  --color-input-font: var(--color-card-font, #333);
  color: var(--color-card-font, #333);
  --font-input: var(--font-menu);

  font: var(--font-menu);
  --color-input-background: transparent;
  --padding-input-horz: 0;
}
fp-field.jmlActionLabel::part(label) {
  opacity: 1;
}
fp-field.jmlActionLabel [slot="widgets"] {
  display: none;
}

fp-field[editable],
.d > output,
.d > div.richtexteditor,
.d > fp-limited-content > span > output[data-jml-inputtype="textarea"],
.listcontrol .jml-tree-navigator, .tmplControlBar .jml-tree-navigator  {
  --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);

  /* nur min-, denn Adressfelder können schonmal höher sein*/
  min-height: var(--height-input);
  background-color: var(--color-input-background);
  color: var(--color-input-font);
  box-sizing: border-box;
  /*overflow: hidden; /* wenn fp-field>.flexcontainer position:relative hat wird overflow:hidden zum Problem */
}

.d > output[data-jml-inputtype="addressfield"],
.d > output[data-jml-inputtype="currencyfield"],
.d > output[data-jml-inputtype="textfield"],
.d > output[data-jml-inputtype="textarea"]{
  padding-left: var(--padding-input-horz);
}
.d > output[data-jml-inputtype="textarea"] {
  padding-right: var(--padding-input-horz);
}

.listcontrol .jml-tree-navigator, .tmplControlBar .jml-tree-navigator{
  /* inhalte sind vertical mittig ausgerichtet, deshalb nur flex oder inline-flex erlaubt */
  display: flex;
  padding: 0 var(--padding-input-horz);
  width: 100px; /* Minimalgröße, der wächst schon noch ;) */
  flex-grow: 1;
  align-items: center;
}

.tmplControlBar .location fp-field{
  min-width: 100px;
  font: var(--font-normal);
  --padding-input-horz: 2px;
}

fp-field.switchfield {
  min-width: 64px;
}

fp-address-form {
  background-color: var(--color-input-background);
  color: var(--color-input-font);
}

fp-field.vertical[multiple] {
  --layout: column;
  --align: right;
}
fp-field[type=duration] {
  text-align: right;
}
fp-field.textarea{
  --align: flex-start; /* oben */
  /*resize: both;*/
  /*overflow: hidden; !* sonst geht der resizer nicht *!*/
  border-bottom-right-radius: min(4px, var(--border-radius-input, 0));
}
fp-field.textarea.richtextarea-headless {
  --layout: column;
  --align: normal;
}
.offd > fp-limited-content > output[data-jml-inputtype="textarea"]{
  padding-top: 4px; /* platz für das integrierte Label */
}

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

fp-field.priorityfield{
  padding-top: 0;
  padding-bottom: 0;
}
fp-field.tablefield{
  padding: 0 2px;
  --align: flex-start; /* Damit das schwebende Label auch oben herausragt*/
}

fp-field.tablefield fp-format-table{
  margin: 2px 4px 4px 4px;
  border-radius: 3px;
  overflow: hidden;
}

fp-field[label].tablefield fp-format-table{
  margin-top: 6px;
}

fp-field.selectbar {
  padding: 0;
}

fp-field.selectbar[size="5"] {min-width: 70px;}
fp-field.selectbar[size="6"] {min-width: 84px;}
fp-field.selectbar[size="7"] {min-width: 98px;}
fp-field.selectbar[size="8"] {min-width: 112px;}
fp-field.selectbar[size="9"] {min-width: 126px;}
fp-field.selectbar[size="10"] {min-width: 140px;}

/*fp-format-table { <- irgendwie mist*/
/*  overflow: auto;*/
/*  max-height: 400px;*/
/*}*/

fp-format-entity {
  font-size: inherit;
  --icon-size: 16px;
  width: auto;
  max-width: 100%;
}

body.debugmode fp-format-entity:not([lck]) {
  outline: 2px solid red;
  &::after {
    content: 'NO LCK';
    background: red;
    color: white;
  }
}

td.hoverme {
  cursor: pointer;
}

fp-field:not([multiple]) fp-format-entity {
  width: 100%;
}

fp-field[editable]:not([multiple]) fp-format-entity {
  cursor: text;
}

fp-format-entity.entity-icon{
	width:auto;
	--icon-size: 16px;
}

td.l output,
td.l fp-field:not([editable]){
  --padding-input-horz: 0px;
}

fp-format-entity[caption=none]:not(.imgXX, [iconstyle]){ --icon-size: 32px;
  contain: size layout style; /* paint kann vorkommen (Overlay-Icons)*/
  contain-intrinsic-size: auto var(--icon-size) auto var(--icon-size);
}
td.l > fp-format-entity[caption=none]:not(.imgXX),
td.l > output > fp-format-entity[caption=none]:not(.imgXX){ --icon-size: 24px; width: var(--icon-size); height: var(--icon-size); } /** weniger layout-Arbeit für den Browser */
td.d > output > fp-format-entity[caption=none]:not(.imgXX){ --icon-size: var(--height-input-button);}

p.smallhint fp-format-entity { --icon-size: 12px;}

fp-modal > fp-frame {
  display: block;
  min-width: min(90vh, 960px);
}
fp-modal.action-gui-items > fp-frame {
  min-width: min(90vh, 300px);
}
table.jmlActionGuiItems {
  width: 100%;
}

fp-modal.popup-select {
  background-color: var(--color-main-background);
  min-width: 320px;
  min-height: 320px;
  max-width: 960px;
  max-height: max(70vh, 720px);
  height: 800px;
}

@media all and (min-width: 1000px) {
  fp-modal.popup-select {
    background-color: var(--color-main-background);
    min-width: 800px;
    min-height: 600px;
    max-width: none;
  }
}

@media all and (min-width: 1400px) {
  fp-modal.popup-select {
    min-width: 1100px;
  }
}

div.hint[slot=widgets]:not([hiddenaction]),
fp-field [slot=widgets]:not(.toolbar):not([hiddenaction]) {
  background-color: var(--color-input-button-back);
  transition: background-color 100ms;
  color: var(--color-input-button-font);
  width: var(--height-input-button);
  height: var(--height-input-button);
  border-radius: var(--border-radius-input-button);
  margin-left: 1px;
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
}

fp-field.textarea [slot=widgets]:not([hiddenaction]),
fp-field.textarea::part(info){
  margin-top: var(--padding-input-vert); /* nach oben sorgen wir für einen Abstand, falls wir etwa in einer textarea liegen*/
}
fp-field.selectbar [slot=widgets]:not([hiddenaction]) {
  margin-left: 2px;
  margin-right: 2px;
}
fp-field.richtextarea [slot=widgets]:not([hiddenaction]) {
  --height-input-button: 24px;
  --border-radius-input-button: 8px;
  min-height: 28px;
}

fp-field[multiple] input[slot=embedded-widget-view] {
  border: 2px solid var(--chip-color, currentColor);
  border-left-width: 4px;
  border-right-width: 4px;
  border-radius: calc(var(--height-input-button) / 2);
  background-color: var(--color-input-background);
  font-size: 86%;
  color: var(--color-input-font);
  box-shadow: 1px 1px 1px inset rgba(0, 0, 0, 0.3);
}

/** falls ein anderes widget-elemtent links vom default gehovert wird, ist das efault auch grau.
  Problem: CSS kann nicht nach "rechts gucken", d.h. das hovern über widgets nach dem default, markieren auch das default-widget :(
  Workaround: nächste regel
 */
div.hint:hover[slot=widgets]:hover ~ [default][slot=widgets],
fp-field:hover [slot=widgets]:hover ~ [default][slot=widgets] {
  background-color: var(--color-input-button-back);
  color: var(--color-input-button-font);
}

/* Defaults hovern automatisch, wenn es sich um das letzte widget handelt. Siehe oben.*/
div.hint:hover[default][slot=widgets]:last-child,
fp-field:hover [default][slot=widgets]:last-child,
div.hint[slot=widgets]:hover,
fp-field [slot=widgets]:not(.toolbar):hover {
  cursor: pointer;
  background-color: var(--color-shade-3);
  color: var(--color-shade-3-contrast);
}

fp-field [slot=widgets],
div.hint[slot=widgets] fp-inline-svg,
fp-field [slot=widgets] fp-inline-svg {
  --icon-size: calc(var(--height-input-button) - 4px);
}

div.hint[slot=widgets] fp-inline-svg:not(.jmlImageOverlay),
fp-field [slot=widgets] fp-inline-svg:not(.jmlImageOverlay) {
  width: var(--icon-size);
  height: var(--icon-size);
}

fp-inline-svg > svg:not[width]{
  height: var(--icon-size, 100%);
  width:  var(--icon-size, 100%);
}
fp-inline-svg > svg[width]{
  height: var(--icon-size, initial);
  width:  var(--icon-size, initial);
}

fp-inline-svg > svg {
  vertical-align:top;
}
fp-inline-svg img {
  object-fit: contain;
}

fp-option-matrix.color-picker {
  --font-size: 9px;
  --line-height: var(--height-input);
  --button-height: var(--height-input);
  color: #FFF;
}

fp-file-upload input {
  padding: var(--width-componentpadding);
}

/* Quicksearch in dialogen */
form.quicksearch {
  --field-info-below-display: block;
  --field-info-tooltip-display: none;
}
form.quicksearch fp-expander:not(:has(.quicksearch-hit)) {
  display: none;
}

form.quicksearch .dialog-row {
  transition: height 300ms;
}
form.quicksearch :is(.dialog-row, .dialog-sublist):not(.quicksearch-hit) {
  height: 0;
  padding: 0;
  overflow: hidden;
}

form.quicksearch .dialog-tr:not(.quicksearch-hit) {
  display: none;
}

form.quicksearch .dialog-row.quicksearch-hit {
  height: auto;
}

form.quicksearch .dialog-row .d {
  transition: opacity 300ms, transform 300ms;
  opacity: 0;
}
form.quicksearch .dialog-row.quicksearch-hit .d {
  transition: opacity 300ms, transform 300ms;
  opacity: 1;
}
form.quicksearch .dialog-row.quicksearch-hit .d.quicksearch-hit {
  opacity: 1;
  transform: scale(1);
}

.callinfo .buttons > a.jmlAction,
.page-actions > a.jmlAction,
input::file-selector-button,
fp-menu-notification:last-of-type:first-of-type::part(button), /* nur wenn es die einzige Notification ist, hat sie ihren eigenen Button */
fp-menu-notification-group::part(button),
fp-modal > button,
.calcontroller button,
.jml_dialogButtons button,
button.mi-selection-status,button.mi-selectall-button,
button.typebutton, button.typesubmit,
input[type=button], input[type=submit], .jmlButtonField, .jmlButtonField.smartInput, .calNavButton, .calendarnav select  {
  border-radius: var(--border-radius-button, 3px);
  border: var(--width-button-border) solid var(--color-button-border);
  color: var(--color-button-font);
  background-color: var(--color-button-back);
  box-shadow: var(--shadow-button);
  box-sizing: border-box;
  font: var(--font-button, var(--font-normal));
  font-weight: var(--font-weight-button, 600);
  letter-spacing: 0.5px;
  height: var(--height-input);
  min-width: var(--height-input);
  line-height: var(--height-input);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /*padding-left: var(--border-radius-button, 3px);*/
  /*padding-right: var(--border-radius-button, 3px);*/
  --icon-size: 16px;
  -webkit-appearance: button;
}

.jml_dialogButtons .jmlButtonField {
  padding-left: var(--border-radius-button, 3px);
  padding-right: var(--border-radius-button, 3px);
  margin-right: 4px;
}

.compact-button{
  --height-input: 24px;
  --icon-size: 16px;
  --border-radius-button: 12px;
  --font-weight-button: 400;
  height: var(--height-input);
  min-width: var(--height-input);
  line-height: var(--height-input);
  border-radius: var(--border-radius-button, 3px);
}

:is(button, input[type=button], input[type=submit], .jmlButtonField).w100, .d > button.jmlButtonField{
  width: 100%;
  text-align: center;
}

.callinfo .buttons > a.jmlAction,
.page-actions > a.jmlAction {
  padding: 2px 5px;
  margin:4px;
}

/*div.jml_dialogButtons button,*/
/*div.jml_dialogButtons input[type=button],*/
/*div.jml_dialogButtons .jmlButtonField{*/
/*  margin-left: var(--width-componentspacing);*/
/*  font: var(--font-normal);*/
/*  font-weight: 600;*/
/*  letter-spacing: 0.5px;*/
/*  padding: 0 var(--width-componentspacing);*/
/*}*/

.jmlButtonField,
.input-occured .jmlButtonField.visible-if-input-occured {
  display: inline-flex;
  align-items: center;
}
.jmlButtonField.visible-if-input-occured {
  display: none;
}
.jmlButtonField.jmlButtonStrech{
  width:100%;
  text-align: center;
}

button[disabled], input[type=button][disabled], .jmlButtonField[disabled] {
  filter: contrast(50%) saturate(50%);
  cursor: not-allowed;
}

button:first-child, input[type=button]:first-child, .jmlButtonField:first-child {
  margin-left: 0;
}

fp-avatar-initials {
  font-size: 32px;
}
fp-avatar-initials.company-placeholder{
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 40%, 100% 100%, 0 100%, 0 40%);
  line-height: 2.4em;
  align-items: baseline;
}

fp-fab {
  --button-color: var(--color-toolbar-button);
  --button-size: 48px;
  height: var(--button-size);
  min-width: var(--button-size);
}

fp-fab > fp-inline-svg {
  object-fit: contain;
  vertical-align: baseline;
  height: calc(var(--button-size) / 2);
  width: calc(var(--button-size) / 2);
}

fp-fab > fp-inline-svg svg {
  display: block;
}

fp-fab.global-actions{
  --button-left: 20px;
  --button-bottom: 48px;
}

.dialog-fab-container fp-fab.primary-actions, .list-fab-container fp-fab.primary-actions{
  position: relative;
  height: 0;
  overflow: visible;
  top: -23px;
  /*left: -8px;*/
  min-width: 50%;
  --button-size: 24px;
  --button-left: 0;
  --button-bottom: auto;
  --button-position: absolute;
  --button-z-index:1;
  --button-shadow: none;
}

button.flat,
input[type=button].flat, .jmlButtonField.flat {
  color: inherit;
  background-color: transparent;
  --shadow-button: none;
  --color-button-raised-font: var(--color-primary);
  --color-button-raised-back: var(--color-shade-3);
}

button.accent,
input[type=button].accent, .jmlButtonField.accent {
  color: var(--color-accent-contrast);
  background-color: var(--color-accent);
}
fp-fab.accent {
  --button-color: var(--color-accent);
  color: var(--color-accent-contrast);
}
fp-fab.accent > fp-inline-svg {
  --color-action-primary: var(--color-accent-contrast);
  --color-action-secondary: rgb(from var(--color-accent-contrast) r g b / calc(alpha / 2)) ;
}
fp-fab.accent-inverted {
  --button-color: var(--color-accent-contrast);
  color: var(--color-accent);
}
fp-fab.accent-inverted > fp-inline-svg {
  --color-action-primary: var(--color-accent);
  --color-action-secondary: var(--color-accent);
}

button.alert,
input[type=button].alert, .jmlButtonField.alert {
  color: #FFF;
  background-color: var(--color-status-red);
}

.buttonarea  .jmlButtonField.alert:last-of-type {
  float: right;
}

@keyframes button-busy {
  0%  { background-image: linear-gradient(to right, var(--color-tint-50) 0%, var(--color-tint-0125) 100%); }
  10% { background-image: linear-gradient(to right, var(--color-tint-0125) 0%, var(--color-tint-50) 10% , var(--color-tint-0125) 100%);}
  20% { background-image: linear-gradient(to right, var(--color-tint-0125) 0%, var(--color-tint-50) 20% , var(--color-tint-0125) 100%);}
  30% { background-image: linear-gradient(to right, var(--color-tint-0125) 0%, var(--color-tint-50) 30% , var(--color-tint-0125) 100%);}
  40% { background-image: linear-gradient(to right, var(--color-tint-0125) 0%, var(--color-tint-50) 40% , var(--color-tint-0125) 100%);}
  50% { background-image: linear-gradient(to right, var(--color-tint-0125) 0%, var(--color-tint-50) 50% , var(--color-tint-0125) 100%);}
  60% { background-image: linear-gradient(to right, var(--color-tint-0125) 0%, var(--color-tint-50) 60% , var(--color-tint-0125) 100%);}
  70% { background-image: linear-gradient(to right, var(--color-tint-0125) 0%, var(--color-tint-50) 70% , var(--color-tint-0125) 100%);}
  80% { background-image: linear-gradient(to right, var(--color-tint-0125) 0%, var(--color-tint-50) 80% , var(--color-tint-0125) 100%);}
  90% { background-image: linear-gradient(to right, var(--color-tint-0125) 0%, var(--color-tint-50) 90% , var(--color-tint-0125) 100%);}
  100% {background-image: linear-gradient(to right, var(--color-tint-0125) 0%, var(--color-tint-50) 100%);}
}

button.jml-submit-button-clicked, input.jml-submit-button-clicked {
  pointer-events: none;
  animation: button-busy 1s linear infinite;
}

button.primary,
input[type=button].primary, .jmlButtonField.primary {
  color: var(--color-primary-contrast);
  --color-action-primary: var(--color-primary-contrast);
  --color-action-secondary: var(--color-primary-contrast);
  background-color: var(--color-primary);
}
fp-fab.primary {--button-color: var(--color-primary);color: var(--color-primary-contrast);}

.callinfo .buttons > a.jmlAction:hover,
.page-actions > a.jmlAction:hover,
button.jmlButton.raised, button.jmlButton:not(.invisible):hover, button.jmlButton:focus,
fp-menu-notification::part(button):hover,
fp-menu-notification-group::part(button):hover,
input[type=button].raised, input[type=button]:hover, .jmlButtonField.raised, .jmlButtonField:hover {
  box-shadow: var(--shadow-button-raised);
  color: var(--color-button-raised-font);
  background-color: var(--color-button-raised-back);
  --color-action-primary: var(--color-button-raised-font);
  --color-action-secondary: var(--color-button-raised-font);
}

button fp-inline-svg, button fp-inline-svg svg {
  height: var(--icon-size, 18px);
}
button fp-inline-svg.buttonicontext {
  margin-right: 4px;
}
fp-line-chart[class=preview] {
  --a-line-delay: 0;
  --a-point-delay: 0;
  --a-delay-step-size: 0;
  --animation-duration: 0;
  --column-width: 30px;
  --connection-size: 1px;
  --x-axis-offset: 20px;
  --left-measure-line-start: 30px;
  --left-text-offset: 45px;
  --font-size: 10px;
  --left-axis-end: 23px;
  --left-axis-start: 85px;
  --left-width: 65px;
  --left-viewport-width: 20px;
  --row-amount: 6;
  --left-rect-color: transparent;

  margin-left: 1px;
  height: 240px;
}


/*fp-line-chart.preview {*/
/*  height:480px;*/
/*  width: 300%;*/
/*  transform: scale(0.33);*/
/*  transform-origin: top left;*/
/*}*/

/** ungestylte Links */
.infobox_content a:not([class]) {
  text-decoration: underline;
  color: var(--color-primary-for-text);
}

td.d > button {
  width: 100%;
}

th, td {text-align: inherit;}
body.debugmode th, body.debugmode td {
  border: 1px solid fuchsia !important;
}

body.debugmode div.dialog-row {
  border: 1px solid darkslategray !important;
}
body.debugmode div.dialog-row > .d {
  border: 1px solid darkolivegreen !important;
}

.actionLoadingMessageContainer span {
  display: inline-block;
  text-align: center;
  font-size: 40px;
  color: #F3F3F3;
}

.actionLoadingMessageContainer span.actionLoadingMessageProgress {
  margin-top: -48px;
  font-size: 20px;
  height: 60px;
  width: 60px;
}

.actionLoadingMessageContainer span.actionLoadingMessage {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.125);
}

/* Standardicongröße bei 6.0 und kleiner ist 32px*/

td.l > .jmlImageContainer > img,
td.l > .jmlImageContainer > svg,
td.l > a > .jmlImageContainer,
td.l > .jmlImageContainer{
  height: var(--icon-size);
  width: var(--icon-size);
}

/* --- generelle klassen --- */

.img8  {--icon-size: 8px; }
.img9  {--icon-size: 9px; }
.img10 {--icon-size: 10px; }
.img12 {--icon-size: 12px; }
.img16 {--icon-size: 16px; }
.img20 {--icon-size: 20px; }
.img24 {--icon-size: 24px; }
.img32 {--icon-size: 32px; }
.img48 {--icon-size: 48px; }
.img64 {--icon-size: 64px; }
.img128 {--icon-size: 128px; }
.img256{--icon-size: 256px; }

img.img8  , fp-inline-svg.img8  ,
img.img9  , fp-inline-svg.img9  ,
img.img10 , fp-inline-svg.img10 ,
img.img12 , fp-inline-svg.img12 ,
img.img16 , fp-inline-svg.img16 ,
img.img20 , fp-inline-svg.img20 ,
img.img24 , fp-inline-svg.img24 ,
img.img32 , fp-inline-svg.img32 ,
img.img48 , fp-inline-svg.img48 ,
img.img64 , fp-inline-svg.img64 ,
img.img128 , fp-inline-svg.img128 ,
img.img256, fp-inline-svg.img256
{
  height: var(--icon-size);
  width: var(--icon-size);
}

.imgDisabel {
  filter: grayscale(1) opacity(0.4);
}

.jmlImageContainer {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  width: auto;
  overflow: visible;
}

.dialog-row .d > .jmlImageContainer {
  margin-top: calc((var(--height-input) - var(--icon-size,var(--height-input))) / 2);
}

fp-inline-svg.jmlImageContainer {
  width: var(--icon-size, auto);
  height: var(--icon-size, auto);
}

fp-inline-svg.jmlImageContainer.appicon {
  --icon-size: 220px;
  display: block;
  margin: auto;
  max-height: 80px;
}

.jmlImageContainer>img.treeNodeImage {
  min-width: 32px;
  max-width: none;
  min-height: 12px;
  max-height: 32px;
  height: 32px;
  width: 32px;
}

.jmlImageContainer>img.width12,
.jmlImageContainer.width12>img {
  min-width: 12px;
  max-width: none;
  min-height: 12px;
  max-height: 12px;
  height: 12px;
  width: 12px;
}

.jmlImageContainer>img.width16 ,
.jmlImageContainer.width16 > img{
  min-width: 16px;
  max-width: none;
  min-height: 12px;
  max-height: 16px;
  height: 16px;
  width: 16px;
}

.jmlImageContainer>img.width24,
.jmlImageContainer.width24 > img{
  min-width: 24px;
  max-width: none;
  min-height: 12px;
  max-height: 24px;
  height: 24px;
  width: 24px;
}

.jmlImageContainer>img.width32,
.jmlImageContainer.width32 > img {
  min-width: 32px;
  max-width: none;
  min-height: 12px;
  max-height: 32px;
  height: 32px;
  width: 32px;
}

.jmlImageContainer>img.width48,
.jmlImageContainer.width48>img {
  min-width: 48px;
  max-width: none;
  min-height: 12px;
  max-height: 48px;
  height: 48px;
  width: 48px;
}

.jmlImageContainer>img.width50,
.jmlImageContainer.width50 >img{
  min-width: 50px;
  max-width: none;
  min-height: 12px;
  max-height: 50px;
  height: 50px;
  width: 50px;
}

.jmlImageContainer>img.width64 ,
.jmlImageContainer.width64>img {
  min-width: 64px;
  max-width: none;
  min-height: 12px;
  max-height: 64px;
  height: 64px;
  width: 64px;
}

.jmlImageContainer>img.width80,
.jmlImageContainer.width80>img {
  min-width: 80px;
  max-width: none;
  min-height: 12px;
  max-height: 80px;
  height: 80px;
  width: 80px;
}

.jmlImageContainer>img.width96,
.jmlImageContainer.width96>img {
  min-width: 96px;
  max-width: none;
  min-height: 12px;
  max-height: 96px;
  height: 96px;
  width: 96px;
}

.jmlImageContainer>img.width128,
.jmlImageContainer.width128>img {
  min-width: 128px;
  max-width: none;
  min-height: 12px;
  max-height: 128px;
  height: 128px;
  width: 128px;
}

.jmlImageContainer>img.width160 ,
.jmlImageContainer.width160>img {
  min-width: 128px;
  max-width: none;
  min-height: 12px;
  max-height: 160px;
  height: 160px;
  width: 160px;
}

fp-inline-svg.width256,
.jmlImageContainer>img.width256,
.jmlImageContainer.width256 >img{
  min-width: 256px;
  max-width: none;
  min-height: 12px;
  max-height: 256px;
  height: 256px;
  width: 256px;
}
fp-format-entity.avatar::part(icon){
  border-radius: 50%;
  overflow: hidden;
}

fp-format-entity::part(iconOverlay),
fp-format-entity::part(iconOverlayC),
fp-format-entity::part(iconOverlaySE),
fp-format-entity::part(iconOverlaySW),
fp-format-entity::part(iconOverlayNW),
fp-format-entity::part(iconOverlayNE){
  position: absolute;
  object-fit: contain;
  --icon-size: 66%;
  width: 66%;
  height: 66%;
}
fp-format-entity.no-overlay::part(iconOverlay),
fp-format-entity.no-overlay::part(iconOverlayC),
fp-format-entity.no-overlay::part(iconOverlaySE),
fp-format-entity.no-overlay::part(iconOverlaySW),
fp-format-entity.no-overlay::part(iconOverlayNW),
fp-format-entity.no-overlay::part(iconOverlayNE){
  display:none;
}

.jmlImageOverlay {
  position: absolute;
  object-fit: contain;
  --icon-size: 66%;
  width: 66%;
  height: 66%;
}

.at-detail .jmlImageOverlay {
  position: absolute;
  object-fit: contain;
  bottom: -35%;
  right: -35%;
  --icon-size: 75%;
  width: 75%;
  height: 75%;
}

.jmlImageContainer.avatar > .jmlImageOverlay,
.forumIconContainer .jmlImageOverlay {
  --icon-size: 50%;
  width: 50%;
  height: 50%;
}

.jmlImageOverlaySE, fp-format-entity::part(iconOverlaySE) {
  bottom: -10%;
  right: -10%;
}

.jmlImageOverlayNE, fp-format-entity::part(iconOverlayNE) {
  top: -10%;
  right: -10%;
}
.jmlImageOverlayC, fp-format-entity::part(iconOverlayC) {
  top: 25%;
  left: 25%;
  bottom: auto;
  right: auto;
  --icon-size: 50%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background-color: #FFF;
}

.jmlImageOverlaySW, fp-format-entity::part(iconOverlaySW) {
  bottom: -10%;
  left: -10%;
}

.jmlImageOverlayNW, fp-format-entity::part(iconOverlayNW) {
  top: -10%;
  left: -10%;
}

.selection .hover,
.selection .selectable:hover {
  background-color: var(--color-default-hover);
}

.selection {
  display: flex;
  flex-direction: column;
  transition: opacity 200ms;
  opacity: 1;
  overflow: auto;
}

.selection.empty {
  opacity: 0;
  transition: opacity 300ms;
}

.selection.loading {
  opacity: 0.5;
  overflow: hidden;
  min-height: 4px;
}

.selection .message {
  flex-basis: var(--height-toolbar);
  line-height: var(--height-toolbar);
  align-items: center;
}

.selection .faytResultHeader {
  text-align: center;
  flex-basis: var(--height-toolbar);
  line-height: var(--height-toolbar);
  align-items: center;
}

.selection .selectable {
  flex-basis: var(--height-toolbar);
  line-height: var(--height-toolbar); /* <-- für einfache Texte */
  cursor: default;
  align-items: center;
  padding-bottom: 2px;
}

.selection .inactive .hover pf-entitylink,
.selection .inactive pf-entitylink:hover,
.selection .inactive pf-entitylink,
.selection .inactive .hover,
.selection .inactive:hover,
.selection .inactive {
  cursor: default;
  opacity: 0.75;
  /*background-color: transparent;*/
}

.selection .createaction button {
  white-space: nowrap;
}

.selection .createaction {
  padding: var(--default-padding, 8px);
}

.selection .selectable.countryFlag {
  padding-left: 25px;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: 0 50%;
}

.selection .selectable.countryFlag.DE {
  background-image: url(../legacygeneral/flags/de.svg);
}

.selection .selectable.countryFlag.AT {
  background-image: url(../legacygeneral/flags/at.svg);
}

.selection .selectable.countryFlag.CH {
  background-image: url(../legacygeneral/flags/ch.svg);
}

.selection .selectable.countryFlag.LI {
  background-image: url(../legacygeneral/flags/li.svg);
}

  /* >>>>> Besondere Klassen per Cololabel + IdKey <<<< */


/* Ticket */

.hascl67Container .jmlImageOverlay {
  right: -22%;
  top: -10%;
}


/** Calendar */

.hascl59Container .jmlImageOverlay {
  right: -5%;
  top: -12%;
}


/** Issue */

.hascl79Container .jmlImageOverlay {
  right: -5%;
  top: -12%;
}

/** Phonecalls */

.phonecallIcons .jmlImageOverlay {
  position: absolute;
  object-fit: contain;
  bottom: -10%;
  right: -10%;
  --icon-size: 66%;
  width: 50%;
  height: 50%;
}

.callinfo .phonecallIcons fp-format-entity {
  padding-left: 0;
}

table .phonecallCountTable{
  width:100%;
}



.systemMessage {
  padding: 2px 2px 2px 2px;
  margin: auto;
  color: #FFF;
  text-align: center;
  font-size: 20px;
  line-height: 25px;
  height: 30px;
  background-color: var(--color-status-blue);
  transition: all 1s;
  overflow: hidden;
  border-radius: 3px;
}

fp-menu-controller .systemMessage {
  font: var(--font-small);
  max-width: 310px;
  height: auto;
  max-height:40px;
}

fp-menu-controller .systemMessage .restarttime {
  font: var(--font-xsmall);
}

.systemMessage.hide {
  opacity: 0;
  height: 0;
  padding: 0 10px;
}

.systemMessage button,
.systemMessage a {
  margin: 3px 3px 3px 0;
  float: right;
  background-color: transparent;
  border: 1px solid #FFF;
  color: #fff;
  height: 24px;
  font-size: 13px;
  cursor: pointer;
}

.systemMessage a {
  display: inline-block;
  padding: 0 6px;
  line-height: 24px;
}

.adminmodeWarning {
  background-color: #AA0000;
  height: auto;
}

.clickable {
  cursor: pointer;
}

.nodisplay {
  display: none;
}

.center {
  text-align: center !important;
}

.right {
  text-align: right !important;
}

.left {
  text-align: left !important;
}

.bottom {
  vertical-align: bottom !important;
}

.top {
  vertical-align: top !important;
}

.middle {
  vertical-align: middle !important;
}

.white {
  color: white;
  border-color: white;
  background-color: white;
}

.grey {
  color: var(--color-shade-6, #909090);
}

.darkgrey {
  color: #666;
}

.statusgreen {
  color: var(--color-status-green);
}

.green {
  color: var(--color-status-green)
}

fp-field.green [slot="input"] {
  --color-input-font: var(--color-status-green);
  color: var(--color-status-green);
}

.blue {
  color: var(--color-status-blue);
}

span.header {
  padding-bottom: 1px;
  padding-top: 12px;
  height: 20px;
  color: #003366;
}


/* ------------- flashCam (Dateien per Webcam schiessen und hochladen) ----------- */

div.flashCameraContainer {
  height: 160px;
}


/* ------------------------------------------------------------------- */


/*                GuiObjects               */


/* ------------------------------------------------------------------- */

td.segmentheaderright {
  text-align: right;
}


/* ------------------------------- Wizardnavi --------------------------------- */

#menutab {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  font-weight: normal;
}

#menutab ul {
  list-style-type: none;
  margin: 0 0 10px 0;
  padding-left: 0;
}

#menutab ul li {
  display: inline-block;
  height: 25px;
}

#menutab ul li a,
#menutab span.inactivelink {
  margin: 0;
  padding: 2px 8px 0 8px;
  text-decoration: none;
  font-size: 11px;
  color: #000;
  line-height: 24px;
}

#menutab span.inactivelink {
  color: #CCC;
}

#menutab ul li:hover {
  background-color: #999;
  color: #DDD;
}

#menutab ul li a:active {
  color: #DDD;
}

.menutabvisited {
  color: #000;
  background-color: #EEE;
}

.menutabactive {
  margin: 0 0 0 0;
  color: #FFFFFF;
  background-color: #CCC;
  /*var(--color-main-font); */
  text-decoration: none;
}


/* ------------------------------- erste navigation ende --------------------------------- */


/* --- charts ----------------------------------------------*/


/* die chartbox muss als bezugselement immer um das chart gelegt werden!
*
* Die Chartbox ist sozusagen Mutter aller Chartelemente
*/

div.chartbox {
  position: relative;
  width: 100%;
  height: 40px;
  text-align: left;
}

div.chartbox.horizontalBarChart {
  height: 16px;
}

td.chart,
th.chart {
  position: relative;
  padding: 0;
}

th.chart .chartheaderbox,
td.chart .chartbox {
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
}

div.chartbox_margin {
  margin: 6px 0;
}

div.chartbox60 {
  position: relative;
  width: 100%;
  height: 60px;
  text-align: left;
  background-color: var(--color-main-background);
  border-bottom: 5px solid var(--color-main-background);
  border-top: 5px solid var(--color-main-background);
}

div.hzbs {
  float: left;
}

.horizontalBarChartLayer .hzbs {
  height: 16px;
}

div.progresschart {
  position: relative;
  width: 100%;
  height: 14px;
  padding: 3px 0 3px 0;
}

div.datevalue100 {
  position: relative;
  width: 100%;
  height: 100px;
  text-align: left;
}

fp-menu-item div.chartheaderbox div.timegridcaption {
  font-size: 8px; margin-top: 0;
}
fp-menu-item div.chartheaderbox {
  height: 8px;
}
/* Kacheln die nur 1 Einheiten hoch sind (via Wildcardselector)*/
fp-menu-item[size$="x1"] div.datevalue100{
  height: 48px;
}
/* Kacheln die nur 2 Einheiten hoch sind (via Wildcardselector)*/
fp-menu-item[size$="x2"] div.datevalue100{
  height: 120px;
}

fp-menu-item[size$="x2"] .miElementListContainer:first-child:last-child div.datevalue100{
  height: 160px;
}

div.chartheaderbox {
  position: relative;
  width: 100%;
  height: 20px;
  text-align: center;
  overflow: visible;
}

ul.chartlegendbox,
div.chartlegendbox {
  width: auto;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  list-style: none;
  padding: 0;
}

ul.chartlegendbox li {
  display: inline-block;
  margin-right: 10px;
  white-space: nowrap;
  vertical-align: super;
}

table.leftarea ul.chartlegendbox li,
#report ul.chartlegendbox li {
  display: list-item;
}

.chartlegendbox p {
  line-height: 14px;
  margin-left: 15px;
}

.chartIcon {
  width: 14px;
  height: 12px;
  border: 1px solid #999;
  margin: 0 2px 0 0;
  vertical-align: middle;
  text-align: left;
  position: relative;
  display: inline-block;
  overflow: hidden;
  background-color: var(--color-card-background);
}

.chartIcon div {
  position: absolute;
  border-bottom: 0 solid transparent;
}

div.projectHistoryChart {
  position: relative;
  width: 100%;
  height: 100px;
  text-align: left;
}

div.timegridbox,
div.timegridbox60 {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}


/* manchmal liegt ne Tabelle drumherum, wenn es Achsenbeschriftung gibt */

table.w100 {width: 100%;}
table.lh1em{line-height: 1em;}

table.charttable {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  background-color: transparent;
}

col.chartYAxis {
  width: 20px;
}

table.charttable td.cyal,
table.charttable td.cyar,
table.charttable td.main {
  padding: 4px 0 6px 0;
}

table.charttable td.mainheader {
  padding: 0 0 0 0;
  border-width: 0;
}

table.charttable td.chl {
  text-align: center;
  vertical-align: bottom;
  padding: 0 0 2px 0;
  border-width: 0;
}

table.charttable td.chr {
  text-align: center;
  vertical-align: bottom;
  padding: 0 0 2px 0;
  border-width: 0;
}

td.cyal {
  text-align: right;
  border-width: 0;
}

td.main {
  text-align: center;
  border-width: 0;
  background-color: transparent;
}

td.cyar {
  text-align: left;
  border-width: 0;
}

div.boxchart div.yaxispart,
div.boxchartcaptions div.yaxispart {
  width: 2px;
  position: relative;
  float: none;
  margin-top: -1px;
  /*um die border zu kompensieren*/
}

td.cyal div.yaxispart {
  border-top: 1px solid black;
  border-right: 1px solid black;
  margin-left: 16px;
}

td.cyar div.yaxispart {
  border-top: 1px solid black;
  border-left: 1px solid black;
  margin-right: 16px;
}

div.boxchart div.axiscaption {
  width: 15px;
  letter-spacing: 0;
  /*height:1px;*/
  font-size: 7px;
  top: -4px;
  overflow: hidden;
  position: absolute;
}

td.cyar div.axiscaption {
  left: 2px;
}

td.cyal div.axiscaption {
  right: 2px;
}


/*popups*/

div.chartbox div.info {
  position: absolute;
  width: 100%;
  height: 18px;
  margin-top: 5px;
}

div.chartbox div.info div.infocontent {
  display: none;
  position: absolute;
  left: 3px;
  top: -3px;
  background-color: var(--color-main-font);
  z-index: 2;
}

div.chartbox:hover div.info div.infocontent {
  display: block;
}

div.chartbox div.info div.infocontent table {
  position: relative;
  top: -2px;
  left: -2px;
  background-color: #EEEEEE;
  z-index: 3;
  border: 0 none;
}

div.chartbox div.info div.infocontent td {
  border: 0 none;
  white-space: nowrap;
}


/*popups neu*/

div.popuplayer {
  position: absolute;
  width: 100%;
  height: 100%;
}

div.popuplayer div.popupanchor {
  display: none;
  position: absolute;
  width: 0;
  height: 0;
  z-index: 28;
}

div.popuplayer:hover div.popupanchor {
  display: block;
}

div.popupsensor {
  border: 0 none;
  width: 100%;
  height: 100%;
  /*top: 0 ;*/
  position: relative;
}

div.popupsensor div.popupanchor {
  display: none;
  position: absolute;
  width: 0;
  top: -6px;
  left: 0;
  height: 0;
}

div.popupsensor:hover div.popupanchor {
  display: block;
}

div.popupanchor div.popupcontent {
  position: absolute;
  left: 3px;
  top: 0;
  z-index: 29;
}

div.popupanchor div.popupcontent table {
  position: relative;
  top: -2px;
  left: -2px;
  background-color: #EEEEEE;
  z-index: 30;
  border: 0 none;
}

div.popupanchor div.popupcontent table.vac {
  background-color: #FFFFCC;
  line-height: 12px;
  font-size: 10px;
}

div.popupanchor div.popupcontent td {
  border: 0 none;
  white-space: nowrap;
}


/* Inhalte von BalkenSegmenten */

div.timegridcaption span.barcontent {
  line-height: 10px;
}


/* BackgroundLayer */

div.backgroundlayer {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
}

div.backgroundlayer img {
  width: 100%;
  height: 100%;
}


/* ImageLayer*/

div.imagelayer {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  text-align: center;
}

div.imagelayer img {
  vertical-align: middle;
}


/* BARCHART */


/*   der Rahmen in dem die Balken liegen */

div.barchart {
  position: absolute;
  width: 100%;
  top: 50%;
  /* soll vertikal Zentriert sein */
  /*margin-top:9px;*/
  border: 0 solid;
  height: 1px;
  overflow: visible;
  left: 0;
  right: 0;
}


/*   die einzelnen Balkensegmente */

div.barchart div.caption {
  margin-top: 1px;
}


/* Floating Barsegment */

div.barchart div.fbs {
  position: relative;
  height: 12px;
  /* zwölf pixel dick */
  top: -6px;
  /* also 6px nach oben */
  float: left;
  Overflow: visible;
  padding: 0;
  vertical-align: middle;
  line-height: 11px;
  font-size: 10px;
}

div.fbs a {
  line-height: 11px;
  font-size: 10px;
}


/* Horizontal Barsegment*/

div.barchart div.hzbs {
  position: absolute;
  height: 24px;
  top: -14px;
  white-space: nowrap;
  overflow: hidden;
  padding: 0;
  vertical-align: middle;
  line-height: 24px;
  font-size: 10px;
  background-color: var(--bar-color);
  text-shadow: 0 0 4px var(--bar-color);
}

div.barchart div.hzbs.phase,
div.barchart div.hzbs:hover,
div.barchart div.hzbs:last-of-type {
  overflow: visible;
}

div.barchart div.hzbs.light {
  color: #000;
}
div.barchart div.hzbs.dark {
  color: #FFF;
}

div.horizontalBarChart div.hzbs {
  height: 12px;
  top: -6px;
}

div.hzbs[onclick]:hover {
  cursor: pointer;
  box-shadow: var(--shadow-button-raised);
}

div.barchart div.hzbs .barcontent {
  line-height: 24px;
  font-size: 12px;
  font-weight: 600;
  position: relative;
  top: 0;
}


div.hzbs .barcontent > fp-inline-svg,
div.hzbs .barcontent > img {
  --icon-size: 16px;
  margin: 4px;
  vertical-align: top;
}

div.barchart div.now {
  min-width: 1px;
  background-color: var(--color-accent);
  padding: 4px 0;
  margin-top: -4px;
  box-shadow: var(--shadow-cards);
}

div.barchart div.div,
div.barchart div.event_neutral {
  background-color: #CCC;
  min-width: 2px;
  border-bottom: 1px solid #999;
  text-shadow: 0 0 1px #999;
  color: #FFF;
}

div.barchart div.event_green {
  background-color: #97CB82;
  border-bottom: 1px solid #4E7A3D;
  color: #FFF;
  text-shadow: 0 0 1px #4E7A3D;
  min-width: 2px;
}

div.barchart div.event_red {
  min-width: 2px;
  background-color: #BA8888;
  color: #FFF;
  border-bottom: 1px solid #803737;
  text-shadow: 0 0 1px #803737;
}

div.barchart div.warn {
  min-width: 2px;
  background-color: var(--color-status-orange);
  color: #FFF;
  border-bottom: 1px solid var(--color-status-red);
}

div.barchart div.hr {
  background-color: #BFDFFF;
  min-width: 2px;
  color: #333;
  border-bottom: 1px solid #4e7aff;
  text-shadow: 0 0 1px #BFDFFF;
}

div.barchart div.add fp-inline-svg {
  color: var(--color-accent-contrast);
  background: var(--color-accent);
  border-radius: 50%;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.25);
  width:24px;
  height:24px;
  --icon-size: 24px;
  padding: 2px;
  margin-top: -3px;
  margin-left: -3px;
}

div.barchart div.vd {
  /*background-color: #F0F195 !important;*/
  background-color: var(--color-tint-vacation);
  min-width: 2px;
  color: #333;
  border-bottom: 1px solid #A0A145;
  text-shadow: 0 0 1px var(--color-tint-vacation);
}

div.chartbox div.todos {
  background-color: #73A7D0;
  min-width: 2px;
  border-bottom: 1px solid var(--color-main-font);
  font-size: 10px;
  color: #FFF;
  margin-right: 0;
}

div.chartbox div.greenprojects {
  background-color: #97CB82;
  min-width: 2px;
  color: #FFF;
  border-bottom: 1px solid #4E7A3D;
  text-shadow: 0 0 1px #4E7A3D;
  font-size: 10px;
  margin-right: 0;
}

div.chartbox div.yellowprojects {
  background-color: var(--color-status-yellow);
  min-width: 2px;
  color: #333;
  border-bottom: 1px solid #E29120;
  text-shadow: 0 0 1px #ECCB7C;
  font-size: 10px;
  margin-right: 0;
}

div.chartbox div.redprojects {
  background-color: #BA8888;
  min-width: 2px;
  color: #FFF;
  border-bottom: 1px solid #803737;
  text-shadow: 0 0 1px #803737;
  font-size: 10px;
  margin-right: 0;
}

div.barchart div.ex,
div.barchart div.extern {
  background-color: #9FC7FD;
  min-width: 2px;
  color: #FFF;
  border-bottom: 1px solid #6090BB;
  text-shadow: 0 0 1px #6090BB;
}

div.barchart div.vrd {
  background-color: #A1D5D1;
  min-width: 2px;
  border-bottom: 1px solid #A0A145;
  text-shadow: 0 0 1px #A0A145;
}

div.barchart div.vrd_selected {
  background-color: #FFB754;
  min-width: 2px;
  border-bottom: 1px solid #A0A145;
  text-shadow: 0 0 1px #A0A145;
}

div.barchart div.ev {
  background-color: #99e4c9;
  min-width: 2px;
  color: #333;
  border-bottom: 1px solid #009479;
  text-shadow: 0 0 1px #99e4c9;
}

div.barchart div.wp {
  background-color: #dfc7a7;
  min-width: 2px;
  color: #333;
  border-bottom: 1px solid #bb6c18;
  text-shadow: 0 0 1px #dfc7a7;
}

div.barchart div.ov {
  background-color: #bce0ae;
  min-width: 2px;
  border-bottom: 1px solid #6C8F5D;
  text-shadow: 0 0 1px #6C8F5D;
  color: #333;
}

div.barchart div.sick {
  /*background-color: #E9D1D1;*/
  background-color: var(--color-tint-sick);
  min-width: 2px;
  border-bottom: 1px solid #998181;
  text-shadow: 0 0 1px #998181;
  color: #333;
}

div.barchart div.holiday {
  /*background-color: #FEDFB9*/
  background-color: var(--color-tint-holiday);
  min-width: 2px;
  border-bottom: 1px solid #6C8F5D;
  text-shadow: 0 0 1px #6C8F5D;
  color: #333;
  top: 12px;
}

div.barchart div.birthday {
  background-color: var(--color-tint-birthday);
  min-width: 2px;
  width: 6.6%;
  border-bottom: 1px solid #6C8F5D;
  text-shadow: 0 0 1px #6C8F5D;
  color: #333;
  top: -38px;
}

div.barchart div.vdempty {
  background-color: #F0F0F0;
  min-width: 2px;
  border-bottom: 1px solid #A0A0A0;
  text-shadow: 0 0 1px #A0A0A0;
  color: #333;
}

div.barchart div.w,
div.barchart div.create {}


/* PROGRESS */

div.smallProgressChart {
  position: relative;
  width: 100%;
  height: 15px;
  text-align: left;
}

div.barchart div.bar {
  position: relative;
  height: 12px;
  float: left;
  Overflow: hidden;
}

div.barchart div.bar img {
  width: 100%;
  height: 12px;
}

div.barchart div.done {
  background-color: #ECCB7C;
  position: relative;
  height: 12px;
  float: left;
  Overflow: hidden;
}

div.barchart div.done img {
  width: 100%;
  height: 12px;
}

div.barchart div.undone {
  background-color: #EEEEEE;
  position: relative;
  height: 12px;
  float: left;
  Overflow: hidden;
}

div.barchart div.undone img {
  width: 100%;
  height: 12px;
}

div.barchart div.empty {
  position: relative;
  height: 12px;
  float: left;
  Overflow: hidden;
}

div.barchart div.image {
  position: relative;
  height: 1px;
  Overflow: visible;
  text-align: center;
}

div.barchart div.image img {
  position: relative;
  top: -18px;
}


/* MILESTONE */

div.milestoneChartLayer {
  position: absolute;
  width: 100%;
  /*margin-top:9px;*/
  border: 0 solid;
  /*height: 100%;*/
  overflow: visible;
  left: 0;
  top: 6px;
}

.chartheaderbox div.milestoneChartLayer {
  height: 7px;
  top: 12px;
}

div.milestoneActions {
  text-align: right;
}

div.milestoneChartLayer div.milestoneHeaderImage,
div.milestoneChartLayer div.milestoneLineImage {
  font-size: 10px;
  height: 16px;
  line-height: 16px;
  overflow: visible;
  position: relative;
  vertical-align: middle;
  top: 0;
  z-index: 0;
}

div.milestoneChartLayer div.milestoneHeaderImage {
  cursor: pointer;
}

div.milestoneChartLayer div.milestoneHeaderImage:hover,
div.milestoneChartLayer div.milestoneLineImage:hover {
  z-index: 1;
}

div.milestoneChartLayer div.milestoneHeaderImage .barcontent img {
  height: 32px;
  width: 32px;
  left: -16px; /* die halbe breite nach links schieben*/
  top: -10px;
  position: relative;
  transition: all 0.25s;
}

div.milestoneChartLayer div.milestoneLineImage .barcontent img {
  height: 16px;
  width: 16px;
  left: 0;
  top: 0;
  position: relative;
  transition: all 0.25s;
}

/*div.milestoneChartLayer div.milestoneHeaderImage:hover .barcontent img {*/
/*  height: 32px;*/
/*  width: 32px;*/
/*  left: -8px;*/
/*  top: -8px;*/
/*}*/


/* BOXCHART */

div.boxchart {
  position: absolute;
  width: 100%;
  margin-top: 0;
  border: 0 solid;
  height: 100%;
  overflow: visible;
}

div.boxchartcaptions {
  position: absolute;
  width: 100%;
  margin-top: 8px;
  border: 0 solid;
  height: 1px;
  overflow: visible;
}

div.boxchart div,
div.boxchartcaptions div {
  position: absolute;
  height: 12px;
  /*float:left;*/
  Overflow: visible;
  padding: 0;
  vertical-align: middle;
  line-height: 8px;
  font-size: 8px;
  text-align: center;
  min-width: 1px;
}

div.boxchart div.popup {
  padding: 2px;
  position: relative;
  top: -12px;
  height: 10px;
  left: 1px;
  border: 1px solid #000;
  background-color: #EEEEEE;
  /*z-index: 20;*/
  display: none;
  font-size: 10px;
  clear: both;
}

div.block-5:hover div.popup {
  display: block;
  z-index: 20;
}

div.block-4:hover div.popup {
  display: block;
  z-index: 20;
}

div.block-3:hover div.popup {
  display: block;
  z-index: 20;
}

div.block-2:hover div.popup {
  display: block;
  z-index: 20;
}

div.block-1:hover div.popup {
  display: block;
  z-index: 20;
}

div.block-0:hover div.popup {
  display: block;
  z-index: 20;
}

div.block0:hover div.popup {
  display: block;
  z-index: 20;
}

div.block1:hover div.popup {
  display: block;
  z-index: 20;
}

div.block2:hover div.popup {
  display: block;
  z-index: 20;
}

div.block3:hover div.popup {
  display: block;
  z-index: 20;
}

div.block4:hover div.popup {
  display: block;
  z-index: 20;
}

div.block5:hover div.popup {
  display: block;
  z-index: 20;
}

div.blockvacation:hover div.popup {
  display: block;
  z-index: 20;
}

div.boxchart div.boxsegment {
  border: 1px solid #ccc;
  background-color: #DDD;
  font-size: 8px;
}

div.boxchart div.block {
  background-color: #73A7D0;
  border-top: 1px solid var(--color-main-font);
  border-bottom: 1px solid var(--color-main-font);
}

div.boxchart div.box_grey_line,
.chartIcon div.box_grey_line {
  border-bottom: 1px solid #000;
  border-top: 1px solid #D3D3D3;
}

div.boxchart div.box_grey_line_dashed,
.chartIcon div.box_grey_line_dashed {
  border-bottom: 1px solid #000;
  border-top: 1px dashed #D3D3D3;
}


/* aktivitätsdiagramm nur linie */

div.boxchart div.box_palette_line1,
.chartIcon div.box_palette_line1 {
  border-bottom: 0 solid #CCC;
  border-top: 1px solid #e68205;
}

div.boxchart div.box_palette_line2,
.chartIcon div.box_palette_line2 {
  border-bottom: 0 solid #CCC;
  border-top: 1px solid #578fc7;
}

div.boxchart div.box_palette_line3,
.chartIcon div.box_palette_line3 {
  border-bottom: 0 solid #CCC;
  border-top: 1px solid #87c34b;
}

div.boxchart div.box_palette_line4,
.chartIcon div.box_palette_line4 {
  border-bottom: 0 solid #CCC;
  border-top: 1px solid #9f9f6f;
}

div.boxchart div.box_palette_line5,
.chartIcon div.box_palette_line5 {
  border-bottom: 0 solid #CCC;
  border-top: 1px solid #ff66ff;
}


/* aktivitätsdiagramm nur linie */

div.boxchart div.box_ad_line,
.chartIcon div.box_ad_line {
  border-bottom: 0 solid #CCC;
  border-top: 1px solid #4e7a3d;
}


/* krankheitsdiagramm ausgemalt transparent*/

div.boxchart div.box_pink_filled,
.chartIcon div.box_pink_filled {
  border-bottom: 1px solid #CCC;
  border-top: 1px solid #998181;
  background-image: url(../legacygeneral/bar_background_pink_50pct.png);
}

.box_clickbl_trans {
  background-color: rgba(192, 192, 192, 0.1);
  opacity: 0.1;
  /*background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);*/
}

.box_clickbl_trans:hover {
  background-color: rgba(192, 192, 192, 0.5);
  opacity: 0.5;
  /*background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);*/
}


/* krankheitsdiagramm ausgemalt*/

div.boxchart div.box_pink_filled_opaque,
.chartIcon div.box_pink_filled_opaque {
  border-bottom: 1px solid #CCC;
  border-top: 1px solid #998181;
  background-image: url(../legacygeneral/bar_background_pink_opaque.png);
}


/* Urlaubsdiagramm ausgemalt*/

div.boxchart div.box_yellow_filled_opaque,
.chartIcon div.box_yellow_filled_opaque {
  border-bottom: 1px solid #CCC;
  border-top: 1px solid #A0A145;
  background-image: url(../legacygeneral/bar_background_brightyellow_opaque.png);
}


/* Urlaubsdiagramm ausgemalt transparent*/

div.boxchart div.box_yellow_filled,
.chartIcon div.box_yellow_filled {
  border-bottom: 1px solid #CCC;
  border-top: 1px solid #A0A145;
  background-image: url(../legacygeneral/bar_background_brightyellow_50pct.png);
}


/* aktivitätsdiagramm ausgemalt transparent*/

div.boxchart div.box_ad_filled,
.chartIcon div.box_ad_filled {
  border-bottom: 1px solid #CCC;
  border-top: 0 solid #6c8f5d;
  background-image: url(../legacygeneral/bar_background_green_50pct.png);
  /*background-color:#97cb82;
  opacity: 0.75;
  filter: alpha(opacity=75);*/
}


/* aktivitätsdiagramm ausgemalt*/

div.boxchart div.box_ad_filled_opaque,
.chartIcon div.box_ad_filled_opaque {
  border-bottom: 1px solid #CCC;
  border-top: 1px solid #6c8f5d;
  background-color: var(--color-status-green);
  /*background-image: url(../legacygeneral/bar_background_green_opaque.png);*/
  /*background-color:#97cb82;
  opacity: 0.75;
  filter: alpha(opacity=75);*/
}

/* Kalendereintrag-Symbol unter meine Kollegen */
.cal-detail{
  vertical-align: bottom;
}

/* termindiagramm ausgemalt transparent */

div.boxchart div.box_calentry_filled,
.chartIcon div.box_calentry_filled {
  border-bottom: 1px solid #CCC;
  border-top: 1px solid #87a87a;
  background-image: url(../legacygeneral/bar_background_brightgreen_50pct.png);
  /*background-color:#97cb82;
  opacity: 0.75;
  filter: alpha(opacity=75);*/
}


/* termindiagramm ausgemalt*/

div.boxchart div.box_calentry_filled_opaque,
.chartIcon div.box_calentry_filled_opaque {
  border-bottom: 1px solid #CCC;
  border-top: 1px solid #87a87a;
  background-image: url(../legacygeneral/bar_background_brightgreen_opaque.png);
  /*background-color:#97cb82;
  opacity: 0.75;
  filter: alpha(opacity=75);*/
}

div.boxchart div.box_red_filled_opaque,
.chartIcon div.box_orange_filled_opaque {
  border-bottom: 1px solid #FF8787;
  border-top: 1px solid #BC0000;
  background-color: var(--color-status-red);
  /*background-image: url(../legacygeneral/bar_background_red_opaque.png);*/
}


/* Projektaktivitätendiagramm ausgemalt*/

div.boxchart div.box_orange_filled_opaque,
.chartIcon div.box_orange_filled_opaque {
  border-bottom: 1px solid #CCC;
  border-top: 1px solid #cc9243;
  background-image: url(../legacygeneral/bar_background_orange_opaque.png);
}


/* Projektaktivitätendiagramm ausgemalt transparent*/

div.boxchart div.box_orange_filled,
.chartIcon div.box_orange_filled {
  border-bottom: 1px solid #CCC;
  border-top: 1px solid #cc9243;
  background-image: url(../legacygeneral/bar_background_orange_50pct.png);
}


/* Projekttermindiagramm ausgemalt*/

div.boxchart div.box_brightorange_filled_opaque,
.chartIcon div.box_brightorange_filled_opaque {
  border-bottom: 1px solid #CCC;
  border-top: 1px solid #d8bb72;
  background-image: url(../legacygeneral/bar_background_brightorange_opaque.png);
}


/* Platz zwischen den Balken */

div.boxchart div.box_pr_filled,
.chartIcon div.box_pr_filled {
  border-bottom: 1px solid #CCC;
  border-top: 1px solid #e29120;
  background-image: url(../legacygeneral/bar_background_yellow_50pct.png);
  /*background-color:#eccb7c;
  opacity: 0.75;
  filter: alpha(opacity=75);*/
}


/* Fortschrittsdiagramm */

div.boxchart div.space {
  background-color: transparent;
  border-bottom: 1px solid #CCC;
  border-top: 0 solid #e29120;
  /*opacity: 0.75;
  filter: alpha(opacity=75);*/
}


div.boxchart div.box_blue {
  background-color: #1c6eb0;
  border-bottom: 1px solid rgba(91, 127, 245, 0.29);
  border-top: 1px solid #082549;
}

/* eskalierende Färbung */

div.boxchart div.block-5 {
  background-color: #DD4040;
  border-bottom: 1px solid var(--color-main-font);
  border-top: 1px solid #9a809a;
}

div.boxchart div.block-4 {
  background-color: #ce4a50;
  border-bottom: 1px solid var(--color-main-font);
  border-top: 1px solid #9a809a;
}

div.boxchart div.block-3 {
  background-color: #c25761;
  border-bottom: 1px solid var(--color-main-font);
  border-top: 1px solid #9a809a;
}

div.boxchart div.block-2 {
  background-color: #b46675;
  border-bottom: 1px solid var(--color-main-font);
  border-top: 1px solid #9a809a;
}

div.boxchart div.block-1 {
  background-color: #a67388;
  border-bottom: 1px solid var(--color-main-font);
  border-top: 1px solid #9a809a;
}

div.boxchart div.block-0 {
  background-color: #9a809a;
  border-bottom: 1px solid var(--color-main-font);
  border-top: 1px solid #9a809a;
}

div.boxchart div.block0 {
  background-color: #33d573;
  border-bottom: 1px solid var(--color-main-font);
  border-top: 1px solid #33d573;
}

div.boxchart div.block1 {
  background-color: #2bda67;
  border-bottom: 1px solid var(--color-main-font);
  border-top: 1px solid #33d573;
}

div.boxchart div.block2 {
  background-color: #21e258;
  border-bottom: 1px solid var(--color-main-font);
  border-top: 1px solid #33d573;
}

div.boxchart div.block3 {
  background-color: #01ee40;
  border-bottom: 1px solid var(--color-main-font);
  border-top: 1px solid #119966;
}

div.boxchart div.block4 {
  background-color: #00f926;
  border-bottom: 1px solid var(--color-main-font);
  border-top: 1px solid #33d573;
}

div.boxchart div.block5 {
  background-color: #00FF50;
  border-bottom: 1px solid var(--color-main-font);
  border-top: 1px solid #22BB66;
}

div.boxchart div.asNeeded {
  background-color: #c1ebaa;
  border-bottom: 1px solid var(--color-main-font);
  border-top: 1px solid #9B5;
}

div.boxchart div.transparent {
  background-color: transparent;
  border-bottom: 1px solid var(--color-main-font);
  border-top: 1px solid #AAA;
}

div.boxchart div.blockvacation {
  /*background-color: #F0F195 !important;*/
  background-color: var(--color-tint-vacation);
  border-bottom: 1px solid var(--color-tint-vacation);
  border-top: 1px solid var(--color-tint-vacation);
}


/* geplante Aktivitaeten */

div.barchart div.dailygrid {
  position: absolute;
  border-width: 1px;
  border-style: solid;
}

div.barchart div.ce_done,
.chartIcon div.ce_done {
  border-color: #87a87a;
  background-color: #97cb82;
}

div.barchart div.ce_undone_grey,
.chartIcon div.ce_undone_grey {
  border-color: #999;
  background-color: #CCC;
}

div.barchart div.ce_undone_red,
.chartIcon div.ce_undone_red {
  border-color: #9a807a;
  background-color: #A64348;
  margin-left: -1px;
  /* wegen der border */
}

div.boxchart div.w {
  min-width: 0;
}


/* GANTTCHART*/

.stateSummary,
.progressSummary {
  display: inline-block;
  font-family: "Tahoma", Arial, sans-serif;
  height: 32px;
  min-width: 32px;
  line-height: 16px;
  border-radius: 16px;
  white-space: nowrap;
  vertical-align: middle;
  position: relative;
  z-index: 0; /* <- neuer Z-kontext *!*/
  max-width: 120px; /* bei mehr abstand gibts ne lücke zwischen icon und label*/
}

.progressSummary svg {
  height: 100%;
  width: 100%;
}

.stateIcon,
.stateIconOverwritten {
  display: inline-block;
  border-radius: 50%;
  height: var(--icon-size);
  width: var(--icon-size);
  text-align: center;
  position: relative;
  vertical-align: top;
}

.stateIcon svg,
.stateIconOverwritten svg{
  height: 100%;
  width: 100%;
}

/* Normales State-Icon */
.stateIcon { --icon-size: 32px; }
/* Relevanter State bei ueberschriebenem state*/
.stateSummaryOverwritten .stateIcon { --icon-size: 24px; }
/* Ueberschriebener State bei ueberschriebenem state*/
.stateSummaryOverwritten { --icon-size: 16px;}

span.stateIconOverwritten {
  width: 16px;
  height: 16px;
  --icon-size: 16px;
  position: absolute;
  top: 16px;
  left: 12px;
}

.stateSummaryColor0 .stateName {
  background-color: #999999;
  color: #FFF;
}

.stateSummaryColor60 .stateName {
  background-color: var(--color-status-red);
  color: #FFF;
}

.stateSummaryColor61 .stateName {
  background-color: var(--color-status-green);
  color: #FFF;
}

.stateSummaryColor62 .stateName {
  background-color: var(--color-status-yellow);
  color: #FFF;
}

.stateIconColor0 {
  background-color: #999999;
  color: #FFF;
}

.stateIconColor60 {
  background-color: var(--color-status-red);
  color: #FFF;
}

.stateIconColor61 {
  background-color: var(--color-status-green);
  color: #FFF;
}

.stateIconColor62 {
  background-color: var(--color-status-yellow);
  color: #FFF;
}

.stateName {
  display: inline-block;
  height: 32px;
  float: right;
  line-height: 32px;
  font-size: 10px;
  border: none;
  margin: 0 0 0 14px;
  padding: 0 4px 0 16px;
  border-radius: 0 16px 16px 0;
  width: 80px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}
td.l .stateName {
  margin: 0 0 0 14px;
}
.stateSummaryOverwritten .stateName {
  border-radius: 0 16px 16px 16px;
}


/*
.stateName::after{position:absolute; top:100%; right:0px; width:0; height:0; content:''; border-width:13px; border-style:solid;}
.stateNameColor0::after{  border-color: #F9F9F9 transparent transparent transparent; }
.stateNameColor60::after{  border-color: #e34a1b transparent transparent transparent; }
.stateNameColor61::after{  border-color: #569450 transparent transparent transparent; }
.stateNameColor62::after{  border-color: #e6cc34 transparent transparent transparent; }
*/

.progressSummary {
  background-color: transparent;
  width: 32px;
}

.l .progressSummary.progressInherited {
  opacity: 0.5;
}

.progressSummary .progressIcon {
  display: inline-block;
  text-align: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #FFF;
}

.progressSummary .progressIcon10 {
  letter-spacing: -1px;
  margin-left: -1px;
}

fp-progress-chart.progressIcon {
  --background-color: #999;
}

fp-progress-chart.progressIcon {
  --chart-color: #e6cc34;
}

fp-progress-chart.progressIcon {
  --text-color: #FFFFFF;
}

fp-progress-chart.progressIcon5Progress {
  --chart-color: #e6cc34;
}

fp-progress-chart.progressIcon6Progress {
  --chart-color: #e6cc34;
}

fp-progress-chart.progressIcon7Progress {
  --chart-color: #e6cc34;
}

fp-progress-chart.progressIcon8Progress {
  --chart-color: #e6cc34;
}

fp-progress-chart.progressIcon9Progress {
  --chart-color: #e6cc34;
}

fp-progress-chart.progressIcon10 {
  --background-color: #569450;
}

fp-progress-chart.progressIcon10 {
  --chart-color: transparent;
}

.barchart div.hzbs.background-timeframe{
  height: 40px;
  top: -20px;
}

.chartheaderbox .barchart div.hzbs.background-timeframe{
  height: 20px;
  top: -10px;
}

.sse.info .chart{
  width: 600px;
  transform: scale(0.5);
  transform-origin: top right;
  margin-left: auto;
  border: 1px solid var(--color-default-border);
}


.currentphaseSymbol {
  display: inline-block;
  height: 32px;
  width: 32px;
  border-radius: 50%;
  background-image: url(../../gui/modules/project/chart_projectphase_back.svg);
  background-position: center center;
  background-size: 24px;
  background-repeat: no-repeat;
  /*box-shadow: 0px 1px 1px rgba(100, 100, 100, 0.5);*/
  vertical-align: middle;
}

div.phase .projectphase {
  height: 80px;
  top: -37px;
  position: relative;
  border-style: solid;
  border-width: 0 1px;
  overflow: hidden;
  text-overflow: ellipsis;
}

div.phase.forGlobalList .projectphase {
  height: 8px;
  top: 6px;
  border-top-width: 3px;
}

div.phaseOpenStart .projectphase {
  border-left-width: 0;
}

div.phaseOpenEnd .projectphase {
  border-right-width: 0;
}

div.phase .projectphaseHeader1 {
  height: 6px;
  top: 6px;
  border-top-width: 0;
  border-bottom-width: 0;
  transform: skewX(45deg);
  left: 3px;
}

div.phase .projectphaseHeader2 {
  height: 6px;
  border-top-width: 0;
  border-bottom-width: 0;
  transform: skewX(-45deg);
  top: 6px;
  left: 3px;
}

div.phase .projectphaseHeader3 {
  height: 25px;
  border-top-width: 0;
  border-bottom-width: 0;
  top: 6px;
  background-position: 0 -5px;
}

div.phase .barcontent .phaseLabel {
  height: auto;
  font: var(--font-xsmall);
  top: -18px;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%;
  display: inline-block;
  box-sizing: border-box;
  padding: 1px 4px;
  background-color: var(--color-shade-none);
  border-radius: 10px;
}


/*
div.phaseHead .projectphase .pph{
  height: 50%;
  width:100%;
  top:50%;
  margin-top:16px;
}
*/

div.ganttchart {
  position: absolute;
  width: 100%;
  top: 50%;
  height: 32px;
  margin-top: -12px;
  border: 0 solid;
  overflow: visible;
}

div.ganttchart .planStone {
  display: block;
  height: 16px;
  top: 0;
  border-right: 1px solid #1c6eb0;
  position: absolute;
}

div.ganttchart .planStone .milestonesegment span {
  display: block;
  width: 16px;
  height: 16px;
  margin-top: -10px;
  margin-left: -8px;
  background-image: url(../modules/project/milestone_chart_assigned_neutral.svg);
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: center center;
}

.milestonesegment img,
.milestonesegment span {
  transition: all 0.25s;
}

.milestonesegment.mark img,
.milestonesegment.mark span {
  transform: scale(1.125);
}

div.ganttchart .planStoneStart {
  margin-left: -2px;
}

div.ganttchart .planStoneEnd {
  margin-left: 0;
}

div.ganttchart div.minmax {
  /* die Minmaxklammer, oberer Teil */
  position: absolute;
  height: 9px;
  /*6px;*/
  overflow: hidden;
  top: 6px;
  /*background: rgba(64, 64, 64, 0.125);*/
  border-top: 0 solid var(--color-shade-9);
  border-left: 2px solid var(--color-shade-9);
  border-right: 2px solid var(--color-shade-9);
  border-bottom: 2px solid var(--color-shade-9);
  margin-left: -2px;
  border-radius: 4px 4px 0 0;
}

div.ganttchart div.minmax.containschildren {
  /* unterer Teil*/
  border-top: 2px solid var(--color-shade-9);
  border-left: 2px solid var(--color-shade-9);
  border-right: 2px solid var(--color-shade-9);
  border-bottom: 2px solid transparent;
  background: none;
  height: 8px;
  margin-left: -2px;
  margin-right: -2px;
  top: 16px;
  border-radius: 0 0 0 0;
}

div.ganttchart div.minmax.containschildren .popupsensor {
  /* unterer Teil*/
  border-left: 8px solid #666;
  border-right: 8px solid #666;
  border-bottom: 8px solid transparent;
  border-top: 0 solid #666;
  border-radius: 0 0 0 0;
  height: 0;
  width: auto;
}

div.ganttchart div.optimark {
  border-right: 1px solid #666;
  height: 8px;
  top: 8px;
  width: 0;
  position: absolute;
}

div.ganttchart div.minmax.overflowleft,
div.ganttchart div.minmax.overflowleft .popupsensor {
  border-left-color: transparent;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

div.ganttchart div.minmax.overflowright,
div.ganttchart div.minmax.overflowright .popupsensor {
  border-right-color: transparent;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

div.ganttchart div.minmax.minmaxerror.containschildren .popupsensor,
div.ganttchart div.minmax.minmaxerror {
  border-color: #990000;
}

div.ganttchart div.minmax.minmaxerror.containschildren .popupsensor,
div.ganttchart div.minmax.minmaxerror.containschildren {
  border-bottom-color: transparent;
}

div.ganttchart div.criticalpath {
  border-color: #333;
}

div.ganttchart div.minmax.criticalpath,
div.ganttchart div.minmax.criticalpath div.popupsensor {
  border-top-color: #333;
  border-left-color: #333;
  border-right-color: #333;
}


/* planbalken, oberhalb der mitte: -12px; */

div.ganttchart div.p {
  /* p  wie Plan */
  position: absolute;
  height: 6px;
  overflow: visible;
  top: 9px;
  background: #CCC;
  opacity: 0.83;
  transition: all 0.5s;
}

.card_project .subheader div.ganttchart .barcontent {
  display: none;
}

.card_project table.project tr.subheader .chartbox {
  height: 16px;
}

div.ganttchart div.p div.popupsensor {
  height: 32px;
  top: -18px;
}

div.ganttchart span.barcontent {
  display: block;
  height: 32px;
}

div.ganttchart .ganttsegment {
  height: 100%;
  display: block;
}

div.ganttchart span.barcontent .ganttPlanContent {
  display: block;
  position: absolute;
  height: 14px;
  z-index: 20000;
  text-align: center;
  padding-top: 10px;
  line-height: 14px;
  font-size: 10px;
}

div.ganttchart span.barcontent:hover {
  /*background-color: #EEE;*/
}

div.ganttchart span.barcontent .ganttPlanContentStart {
  /*background-image: url(../modules/project/standard/ganttstart.svg);*/
  width: 30%;
  min-width: 16px;
  right: 70%;
  background-position: left center;
  /*background-color: yellow;*/
}

div.ganttchart span.barcontent .ganttPlanContent .dep {
  /*opacity: 0.5;*/
  transition: background-size 0.1s;
  display: inline-block;
  height: 32px;
  background-repeat: no-repeat;
  background-size: 32px 32px;
  position: absolute;
  top: -2px;
  line-height: 32px;
  text-shadow: 0 0 1px #FFF;
  text-align: left;
  color: #2b81c5;
}

div.ganttchart span.barcontent .ganttPlanContentEnd .dep {
  background-image: url(../modules/project/dep_anim_pre.svg);
  background-position: -32px center;
  /* die rechte seite des hintergrundbildes ist statisch */
  background-size: 48px 16px;
  width: 16px;
  right: -8px;
}

div.ganttchart.markpre span.barcontent .ganttPlanContentEnd .dep,
div.ganttchart:hover span.barcontent .ganttPlanContentEnd .dep {
  right: -16px;
  transition: background-size 0.5s;
}


/* ende des hover und start der nachfolger bekommen "out"-Symbol */

div.ganttchart.marksuc span.barcontent .ganttPlanContentStart .dep,
div.ganttchart:hover span.barcontent .ganttPlanContentEnd .dep {
  background-image: url(../modules/project/dep_anim_pre.svg);
  background-size: 72px 24px;
  background-position: 0 center;
  /* die linke seite des hintergrundbildes ist statisch */
  opacity: 1;
  width: 24px;
}

div.ganttchart span.barcontent .ganttPlanContentStart .dep {
  background-image: url(../modules/project/dep_anim_pre.svg);
  background-position: -32px center;
  /* die rechte seite des hintergrundbildes ist statisch */
  background-size: 48px 16px;
  width: 16px;
  left: -8px;
}

div.ganttchart.marksuc span.barcontent .ganttPlanContentStart .dep,
div.ganttchart:hover span.barcontent .ganttPlanContentStart .dep {
  left: -16px;
  transition: background-size 0.5s;
}

div.ganttchart.markpre span.barcontent .ganttPlanContentEnd .dep,
div.ganttchart:hover span.barcontent .ganttPlanContentStart .dep {
  background-image: url(../modules/project/dep_anim_pre.svg);
  background-size: 72px 24px;
  background-position: 0 center;
  /* die linke seite des hintergrundbildes ist statisch */
  opacity: 1;
  width: 24px;
}

div.ganttchart span.barcontent .ganttPlanContentStart .planType {
  display: block;
  position: absolute;
  top: 1px;
  height: 10px;
  width: 16px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 8px 8px;
  left: 0;
}

div.ganttchart span.barcontent .ganttPlanContentBrutto .planType {
  /*display: block;*/
  vertical-align: text-bottom;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 12px 12px;
  margin-left: 0;
}

div.ganttchart span.barcontent .ganttPlanContentBrutto .planType.error,
div.ganttchart span.barcontent .ganttPlanContentBrutto .planType.fixed {
  padding-left: 12px;
  margin-left: -6px;
}

div.ganttchart span.barcontent .ganttPlanContentEnd .planType {
  display: block;
  position: absolute;
  top: 1px;
  height: 10px;
  width: 16px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 8px 8px;
  right: 0;
}

div.ganttchart span.barcontent .ganttPlanContent .fixed .planLabel {
  font-weight: bold;
}

div.ganttchart span.barcontent .ganttPlanContent .planType.unrestricted {
  background-image: url(../modules/project/ganttPlanInfinite.svg);
}

div.ganttchart span.barcontent .ganttPlanContent .planType.calculated {
  /* wir sparen uns das symbol fuer "berechnet"
  background-image: url(../modules/project/standard/ganttPlanCalculated.svg);
  */
}

div.ganttchart span.barcontent .ganttPlanContent .planType.fixed {
  background-image: url(../modules/project/ganttPlanFixed.svg);
}

div.ganttchart span.barcontent .ganttPlanContent .planType.error {
  background-image: url(../modules/project/ganttPlanFixedError.svg);
}

div.ganttchart span.barcontent .ganttPlanContentBrutto {
  left: 30%;
  right: 30%;
}

div.ganttchart span.barcontent .ganttPlanContentEnd {
  /*background-image: url(../modules/project/standard/ganttend.svg);*/
  width: 30%;
  min-width: 16px;
  background-position: right center;
  left: 70%;
}

div.ganttchart div.icon {
  /* icon */
  position: absolute;
  height: 12px;
  overflow: visible;
  top: -12px;
}

div.ganttchart div.icon span {
  /* bildunterschrift*/
  font-size: 7px;
  line-height: 0;
  padding: 0;
  margin: 0;
}


/* nun die "ist-daten" */

div.ganttchart div.w {
  position: absolute;
  top: -16px;
  height: 12px;
  overflow: hidden;
}


/*hier beommt jeder bereich seine eigene faerbung */

div.chartbox div.pse {}

div.chartbox div.pw {
  background-color: transparent;
}

div.chartbox div.e {
  background-color: var(--color-status-red, #E00000);
  min-width: 2px;
}

div.chartbox div.forecastRed {
  background-color: #FF7722;
  min-width: 2px;
}

div.chartbox div.ep {
  background-color: #eca041;
  min-width: 2px;
}

div.chartbox div.g {
  background-color: #73b92d;
  min-width: 2px;
}

div.chartbox div.forecastGreen {
  background-color: #afe765;
  min-width: 2px;
}

div.chartbox div.work {
  min-width: 2px;
  position: absolute;
  top: 9px;
  height: 6px;
  overflow: hidden;
}

div.chartbox div.grey {
  background-color: #EEE;
  border-bottom: 1px solid #CCC;
}

div.chartbox div.workForecast {
  background-color: #afe765;
  border-bottom: 1px solid #689655;
}

div.chartbox div.workDone {
  background-color: #53b636;
  /*#569450;*/
  border-bottom: 1px solid #4e7a3d;
}

div.chartbox div.workWarn {
  background-color: #fad24b;
  border-bottom: 1px solid #e2a857;
}

div.chartbox div.workForecastError {
  background-color: #dbb0b0;
  border-bottom: 1px solid #9d4b4b;
}

div.chartbox div.workDoneError {
  background-color: #ba8888;
  border-bottom: 1px solid #803737;
}

div.ganttchart div.p img,
div.ganttchart div.w img {
  width: 100%;
  height: 12px;
}

div.ganttchart div.icon img.pd_in {
  border: 0 none;
  position: absolute;
  right: 0;
  top: 3px;
  cursor: pointer;
}

div.ganttchart div.icon span.pd_in {
  border: 0 none;
  position: absolute;
  right: 3px;
  top: 2px;
}

div.ganttchart div.icon img.pd_out {
  cursor: pointer;
  border: 0 none;
  position: relative;
  left: 0;
  top: 3px;
}


/* TIMEGRID (das Zeitraster im Hintergrund */

div.timegrid,
div.timegridsmall,
div.timegridlight,
div.timegridcaption {
  position: relative;
  float: left;
  font: var(--font-small);
  border-left: 1px solid #BBB;
  margin-left: -1px;
}

th.timegridcaption {
  font: var(--font-small);
  text-align: center;
}

div.timegrid,
div.timegridsmall,
div.timegridlight {
  opacity: 0.5;
}

div.timegrid[part="2"] {
  opacity: 1;
}

div.timegrid[weekend="true"] {
  background-color: #F1F1DD;
}

div.timegrid[holiday="true"] {
  /*background-color: #FEDFB9*/
  background-color: var(--color-tint-holiday);
}

div.timegrid[holidayhalf="true"] {
  background-image: url("../legacygeneral/cal_holidayhalf.gif");
  background-position: center;
}

div.timegrid[marked="true"],
div.timegridcaption[marked="true"] {
  font-weight: bold;
  margin-left: 0;
  overflow: visible;
}

div.timegrid[part="2"] {
  border-color: #6090BB;
  border-left: 1px dashed #6090BB;
}

div.timegridcaption[part="2"] {
  border-right: 0 none;
  margin-left: 0;
}

div.timegrid[lastone="true"],
div.timegridcaption[lastone="true"] {
  border-right: 0 none;
}

div.timegrid[firstone="true"],
div.timegridcaption[firstone="true"] {
  border-left: 0 none;
}

div.timegrid[part="1"],
div.timegridcaption[part="1"] {
  margin-left: 0;
}

div.timegridbox div.timegrid,
div.timegridbox div.timegridcaption {
  height: 100%;
  overflow: hidden;
}

div.timegridbox60 div.timegrid,
div.timegridbox60 div.timegridcaption {
  height: 60px;
  overflow: hidden;
}

div.chartbox60 div.timegrid {
  border-color: #DDD
}

div.hourgridbox {
  height: 100%;
  overflow: hidden;
}

div.hourgridbox div.timegrid {
  margin-top: 0;
  height: 30px;
  overflow: visible;
  position: relative;
  border-right: 1px solid;
  border-left: 0;
  border-color: #999;
}

div.hourgridbox div.timegridlight {
  margin-top: 0;
  height: 30px;
  overflow: visible;
  position: relative;
  border-right: 1px solid;
  border-left: 0;
  border-color: #CCE;
}

div.hourgridbox div.timegridsmall {
  margin-top: 6px;
  height: 10px;
  overflow: visible;
  position: relative;
  border-right: 1px solid white;
  border-left: 0;
}

div.hourgridbox div.timegridcaption {
  margin-top: 6px;
  height: 20px;
  overflow: visible;
  position: relative;
  border-right: 1px solid transparent;
  border-left: 0;
}

div.hourgridbox div.timegridcaption div,
div.hourgridbox div.timegridsmall div {
  position: relative;
  /*top: -13px;*/
  height: 20px;
  overflow: visible;
  font-size: 9px;
  text-align: left;
}

div.linebreak {
  height: 0;
  overflow: hidden;
  position: relative;
  clear: both;
}


/* --- Charts Ende -------------------------------------*/

th.roleicon {
  color: #000;
  background-color: #CCC;
  text-align: center;
  vertical-align: middle;
  padding: 2px;
}

div.videopreshow a {
  display: inline-block;
  border: 1px solid #999999;
  margin-left: 52px;
  padding-right: 5px;
  padding-left: 5px;
  float: right;
  font-size: 12px;
  background-color: #f0f0f0;
}

div.videopreshow {
  width: 560px;
  margin-left: 20px;
}

div.videopreshowiframe {
  margin-top: 20px;
}

p.videopreshowdesc {
  margin-top: 20px;
  font-size: 12px;
  font-weight: normal;
}

p.videopreshowsubtitle {
  margin-top: 10px;
  font-size: 10px;
  font-weight: normal;
}

table.fullwidth {
  width: 100%;
}

span.bigscore {
  font-size: 20px;
}

tr.LHeader {
  font-weight: bold;
  background-color: #B7D4EB;
}

img.infohintimage {
  margin-bottom: -2px;
  padding-left: 3px;
}

.imagePreshowGallery {
  z-index: 10;
  padding-right: 128px;
}

.imagePreshowGallery .imagePreshowGalleryHeader {
  float: left;
  width: 0;
  height: 0;
  overflow: visible;
  font-size: 8px;
  color: #999;
}

.imagePreshowGallery .galleryItem {
  display: inline-block;
  height: 128px;
  line-height: 128px;
  overflow: visible;
  position: relative;
  padding-top: 10px;
  /*left: -64px; /* "zentrieren" */
  /*background-color:red;*/
}

.imagePreshowGallery .galleryItem a {
  display: inline-block;
  width: 128px;
  line-height: 128px;
  text-align: right;
  background-color: transparent;
  position: relative;
}

.imagePreshowGallery .galleryItem img {
  border: 2px solid white;
  box-shadow: 1px 1px 2px #333;
  vertical-align: middle;
  position: relative;
  transform: perspective( 100px) rotateY( 10deg) scale(0.9);
  /*-moz-transform: perspective( 100px ) rotateY( -10deg ) scale(0.9);*/
  /* irgendwelche anderen Divs koennen in chrome verschwinden, wenn das hier aktiv ist :( -webkit-transform: perspective( 100 ) rotateY( -10deg ) scale(0.9);*/
  transition: all 0.3s;
  max-height: 100px;
  max-width: 100px;
}

.imagePreshowGallery .galleryItem0 a,
.imagePreshowGallery .galleryItem0 a img {
  z-index: 20;
}

.imagePreshowGallery .galleryItem1 a,
.imagePreshowGallery .galleryItem1 a img {
  z-index: 19;
}

.imagePreshowGallery .galleryItem2 a,
.imagePreshowGallery .galleryItem2 a img {
  z-index: 18;
}

.imagePreshowGallery .galleryItem3 a,
.imagePreshowGallery .galleryItem3 a img {
  z-index: 17;
}

.imagePreshowGallery .galleryItem4 a,
.imagePreshowGallery .galleryItem4 a img {
  z-index: 16;
}

.imagePreshowGallery .galleryItem a:hover {
  z-index: 121;
  background-color: transparent;
}

.imagePreshowGallery .galleryItem:hover img {
  z-index: 121;
  box-shadow: 4px 4px 8px #333;
}

.at-detail {
  --icon-size: 16px;
  display: inline-block;
  height:var(--icon-size);
  width:var(--icon-size);
  padding: 2px;
  line-height: calc(var(--icon-size) - 2px); /* iconsize - padding */
  border-radius: calc(var(--icon-size) / 2 + 2px);
  margin-right: 4px;
}

.at-detail.ci, .at-detail.co {
  margin-left: 4px;
  margin-top: 2px;
  margin-bottom: 2px;
}

.at-detail.dark { color: #FFF;}
.at-detail.light { color: #000;}

/*.at-detail.ci::before, .at-detail.co::before {*/
/*  display: inline-block;*/
/*  height:22px;*/
/*  width:22px;*/
/*  margin-left: -5px;*/
/*  margin-top: -5px;*/
/*  border-radius: 13px;*/
/*  position: absolute;*/
/*  content: '';*/
/*}*/
/*.at-detail.ci::before {*/
/*  border: 2px solid #00f926;*/
/*}*/

/*.at-detail.co::before {*/
/*  border: 2px solid red;*/
/*}*/

.at-detail > fp-inline-svg{
  vertical-align: text-bottom;
}

.actionLoadingMessageContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99998;
  background-color: rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 1;
  will-change: opacity;
  transition: opacity 500ms, transform 250ms ;
  transform: none;
  transform-origin: bottom right;
}

@keyframes toBottomRightCorner {
  0% {
    transform: translate3d(-40vw, -40vh,0) scale(1);
  }
  100% {
    transform: translate3d(0,0,0) scale(0.5);
  }
}

.actionLoadingMessageContainer.minimized {
  /* 100px / 100vw */
  top: 75vh;
  left: 75vw;
  width: 20vw;
  height: 20vh;
  border-radius: 20px;
  animation: toBottomRightCorner;
  animation-duration: 600ms;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  animation-fill-mode: forwards;
}


.actionLoadingMessageContainer.actionLoadingMessageDisabled {
  opacity: 0;
}

.fileaccessthumb .actionLoadingMessageSpinner {
  margin-left: auto;
  margin-right: auto;
  margin-top: 8px;
}

.actionLoadingMessageSpinner {
  z-index: 99999;
  border: 8px solid var(--color-accent-contrast);
  border-radius: 50%;
  border-top: 8px solid var(--color-accent);
  width: 60px;
  height: 60px;
  animation: spin 1.2s linear infinite;
}

div.tmplSidebar {
  background-color: var(--color-toolbar-back);
  flex-shrink: 0;
  z-index: 300;
}

fp-sidebar {
  min-width: var(--width-sidebar);
  max-width: 90vw;
  background-color: var(--color-toolbar-back);
  height: 100%;
  z-index: 900;
  /* ab 940 liegen custom-dialog-fenster*/
  --color: var(--color-toolbar-font);
  padding-top: env(safe-area-inset-top, 0);
  overflow: clip; /** manchmal gibt es seltsame layoutshifts, die die ganze App nach links verschieben */
  --dialog-row-indent: 0px;
}
fp-sidebar.open {
  z-index: 1006; /* über dem Hauptmenü */
  overflow: visible;
}
fp-sidebar.open.docked {
  z-index: 1106; /* sogar über dem geöffneten Hauptmenü */
}

fp-sidebar.backdrop-filter-support.open:not(.docked)::part(backdrop) {
  /*backdrop-filter: var(--disable-backdrop-filter, blur(2px));*/
}

fp-sidebar .jml_formTiles{
  --tile-width-size3: min(97%, 340px);
  --tile-width-size2: min(97%, 340px);
  --tile-width-create: min(97%, 340px);
}

fp-sidebar .jml_formTiles.may-float .jml-tiles-body:first-child:last-child {
  justify-content: center;
}

.tmplSidebar .home {
  text-align: center;
  height: var(--width-sidebar);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.style-scope.fp-sidebar > fp-sidebar-panel,
fp-sidebar > fp-sidebar-panel {
  background-color: var(--color-main-background);
  margin-top: calc(-1 * env(safe-area-inset-top, 0));
}
.style-scope.fp-sidebar > fp-sidebar-panel > fp-tab-container,
fp-sidebar > fp-sidebar-panel > fp-tab-container {
  height: calc(100% - var(--height-topmenu1));
  overflow: scroll;
  --bar-background: var(--color-shade-1);
}

fp-sidebar > fp-sidebar-panel > div ,
fp-sidebar > fp-sidebar-panel > pf-dialog-view ,
fp-sidebar > fp-sidebar-panel > fp-tab-container {
  /*opacity: 0;*/
}

fp-sidebar > fp-sidebar-panel.selected > div ,
fp-sidebar > fp-sidebar-panel.selected > pf-dialog-view ,
fp-sidebar > fp-sidebar-panel.selected > fp-tab-container{
  /* animation name dur fn delay repeat direction*/
  /*animation: fadein 0.2s ease-in 0.1s 1 forwards;*/
}

fp-sidebar > fp-sidebar-panel.selected > pf-dialog-view {
  min-height: 68px; /* sp hat der Search-container keine Scrollbalken*/
}

fp-sidebar .docktoggle {
  --stroke: 2px;
  position: absolute;
  top: 16px;
  right: 15px;
  width: 32px;
  height: 24px;
  opacity: 1;
  z-index: 100;
  overflow: visible;
  transition: all 200ms;
  color: var(--color-menu1-font);
  cursor: pointer;
}

fp-sidebar .docktoggle::after {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 8px;
  border: var(--stroke) solid var(--color-menu1-font);
  border-radius: var(--stroke);
  display: block;
  content: '';
  box-shadow: 0 0 1px 2px var(--color-menu1-back);
  transition: all 200ms;
}

fp-sidebar .docktoggle::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border: var(--stroke) solid var(--color-menu1-font);
  border-radius: var(--stroke);
  width: 18px;
  display: block;
  content: '';
  transition: all 200ms;
}

fp-sidebar.docked .docktoggle {
}

fp-sidebar.docked .docktoggle::after {
  box-shadow: none;
}
fp-sidebar.docked .docktoggle::before {
  width: 14px;
}
fp-sidebar .docktoggle fp-inline-svg {
  height: 12px;
  width: 12px;
  /*padding: 1px;*/
  background: var(--color-menu1-back);
  border-radius: 10%;
  margin-top: 7px;
  margin-left: 13px;
  position: absolute;
  z-index: 1;
  /*border: 1px solid currentColor;*/
  opacity: 0;
  transform: rotateZ(90deg);
  transition: all 300ms;
  transition-timing-function: cubic-bezier(0.5, -0.5, 0.5, 1.5);
}

fp-sidebar.docked .docktoggle fp-inline-svg {
  opacity: 1;
  transform: rotateZ(0deg);
}

fp-sidebar > fp-sidebar-panel .globalActions {
  margin: 0;
}

fp-sidebar .docktoggle:hover,
fp-sidebar .docktoggle.active {
  opacity: 1;
}

fp-sidebar pf-dialog-view.searchpopup > form {
  display: flex;
  align-items: baseline;
}


body.pwa {

}

div.flexContainer {
  min-width: 1px; /* <- irgendwie nötig, sonst wird es zu groß. Ja, zu GROß!*/
  display: grid;
  /* Achtung: die Namen sind die Namen der Tabellenlinien, nicht die der Spalten!
   *    [left] 64px [main] 1fr [right] 64px [end]
   * [menu]-+----------+-----------+-----------+
   *        |          |           |           |
   * [main] +----------+-----------+-----------+
   *        |          |           |           |
  */
  grid-template-columns: [left] 80px [main] minmax(0, 1fr) [right] minmax(var(--width-sidebar, 64px), max-content) [end];
  grid-template-rows: [menu] calc(var(--height-topmenu1) + var(--height-topmenu2)) [main] auto [footer] var(--height-footer) [end];
  height: 100%;
  position: relative; /* <- Kind-Elemente orientieren sich an diesem Container */
}

body.menu-contextbar-classic div.flexContainer {
  /* Geht bei Safari nicht: */
  /* bei der klassischen Menüleiste benötigen wir eine flexiblere Gridreihe, die mitwachsen kann (minmax mit max-content) */
  grid-template-rows: [menu] minmax(calc(var(--height-topmenu1) + var(--height-topmenu2)), max-content) [main] auto [footer] var(--height-footer) [end];
}

body.menu-contextbar-classic[transition-class="detailmanager"] div.flexContainer::before,
body.menu-contextbar-navigation[transition-class="detailmanager"] div.flexContainer::before {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--color-menu2-back, transparent);
  content: '';
  grid-column: left / right;
  grid-row: menu;
}

body.pwa-setup > div.flexContainer {
  display: none;
}

body > div.flexContainer {
  background-image: var(--user-background-image-lq);
  background-size: cover;
  background-position: center;
}
body.pageReady > div.flexContainer {
  /* wir lassen das lq hinten dran, für die Ladezeit des hq-Bildes (kein weißes Flackern) */
  background-image: var(--user-background-image), var(--user-background-image-lq);
  transition: filter 1s;
}

body.pageReady:has(fp-dialog[focussed][revealed]) > div.flexContainer {
  filter: contrast(0.75);
}

/* Standardverteilung
   Syntax grid-column bzw grid-row: Linker Tabellenlinie, rechter Tabellenlinie
   bzw: Obere Tabllenlinie underer Tabellenlinie

   [left] 64px [main] 1fr [right] 64px [end]
     |           |          |           |
     |  (=== tmplMenu ===)  |     SB    |
*/
div.flexContainer > #tmplContent{ grid-column: left / right;  grid-row: main;

}
div.flexContainer > #tmplMenu{    grid-column: left / right;  grid-row: menu;      }
div.flexContainer > .tmplFooter{  grid-column: left / right;  grid-row: footer;    }
div.flexContainer > fp-sidebar{   grid-column: right;         grid-row: menu / end;
}

/* Kleine Displays: Das Menü und die Sidebar wandern in den footer, spart gleichzeitig Breite und Höhe */
@media (orientation: portrait) and (max-width: 500px), (orientation: landscape) and (max-height: 500px){/*mobile*/

  body, body.mobile-device {
    --width-sidebar: 64px;
    --height-topmenu1: 64px;
    --height-footer:64px;
  }

  div.flexContainer > #tmplContent{ grid-column: left / end; grid-row: menu / footer; }
  div.flexContainer .tmplCenter.tmplContent:not(.dmContent) .boxarea:first-child {
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  div.flexContainer .tmplCenter.tmplContent:not(.dmContent) .tmplWorkarea fp-view-wrapper:not([fullscreen]){
    margin-top: env(safe-area-inset-top, 0);
    margin-bottom: env(safe-area-inset-bottom, 0);
  }
  div.flexContainer .tmplCenter.tmplContent:not(.dmContent) .boxarea:last-child {
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  div.flexContainer > #tmplMenu{    grid-column: left; grid-row: footer; z-index: 1005;
    background-color: var(--color-footer-back);
    padding-left: env(safe-area-inset-left);
    padding-bottom: env(safe-area-inset-bottom);
  }
  div.flexContainer > #tmplMenu [slot="logo"], div.flexContainer > #tmplMenu [slot="menu-bar"] {
    display: none;
  }
  fp-menu-controller::part(menu-item hamburger) {width: 100%;}
  fp-menu-controller::part(menu-item hamburger):hover {background-color: rgba(255, 255, 255, 0.2);}
  fp-menu-controller::part(sub-menu) {width: 100vw;}
  .tmplMenuTop {text-align: center;}

  /*div.flexContainer > #tmplMenu:focus-within {z-index: 900000;}*/

  div.flexContainer > .tmplFooter{
    grid-column: main; grid-row: footer;
    --color-footer-back: var(--color-menu1-back);
    --color-footer-font: var(--color-menu1-font);
    background-color: var(--color-footer-back);
    padding-bottom: env(safe-area-inset-bottom);
    & > .pfFooter {
      box-shadow: none;
    }
  }
  div.flexContainer > fp-sidebar{   grid-column: right; grid-row: footer;
    --color-footer-back: var(--color-menu1-back);
    --color-footer-font: var(--color-menu1-font);
    background: var(--color-footer-back);
    --color: var(--color-footer-font);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);

  }
  div.flexContainer > fp-sidebar:not(.open){
    padding-top:0;
  }

  div.flexContainer > fp-sidebar.open {
    z-index: 1005;
    position: relative;
    /* 100vh statt 80, wenn nicht iOS oder Android URL-Leiste wäre (die liegt überm avatar) :( */
    top: calc(var(--height-footer) - 85vh);
    height: 85vh;
    /* jetzt nochmal modern, für browser, die dvh unterstützen*/
    top: calc(var(--height-footer) - 100dvh);
    height: 100dvh;
  }

  body.pwa div.flexContainer > fp-sidebar.open{
    position: relative;
    top: calc(var(--height-footer) - 100vh);
    height: 100vh;
  }
  body { --height-topmenu1: var(--height-footer);}
  .pfFooter { justify-content: stretch; }
  .footerButton {flex: 1;}

  .jmlMenu .current {display: none !important;}

}
/* bestimmte footer-buttons können wir uns bei der displaygröße nicht leisten*/
@media (orientation: portrait) and (max-width: 500px) {/*mobile*/
  .footerButton.footerButtonBulletin {display: none;}
}

div.pwa-loading {
  position:relative;
  left: 50%;
  top: 50%;
  margin-left: -128px;
  margin-top: -128px;
  height: 256px;
  width: 256px;
  background: rgba(0,0,0,0.25);
  color: #FFF;
  border-radius: 4px;
}

div.pwa-loading svg {
  height: 256px;
  width: 256px;
  --icon-size: 256px;
}

/* diese Klasse und das hier unten werden auch bei Mailimport benutzt !?!??!*/

div.flexContainer div.flexColumnItem {
  flex: 1 1;
  overflow: hidden;
  position: relative
}

div.flexContainer div.flexColumnItem div.fadeOverflow {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 45%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}

div.tmplMenu {
  height: auto;
  /*position:relative;*/
  /*z-index: 900; !* popups müssen über 900 liegen, für content-styles im normalen inhalt muss z-index unter 900 liegen*!*/
}

.notTop fp-frame.tmplContent {
  box-shadow: inset 0 1px 5px -2px rgba(0, 0, 0, 0.5);
}

fp-async-content.tmplFooter {
  z-index: 100;
  overflow-x: visible;
}

form.liste table.listbody p {
  margin: 0;
}

form.liste table.listbody {
  width: 100%;
}

form.liste table.listbody thead.jmlColumnCaptions th,
form.liste table.listbody tbody.jmlColumnCaptions td {
  border: none;
}

form.liste table.listbody .last {
  padding-right: 15px!important;
}

img.filecenterthumb {
  width: 100%;
}

#borderContainer {
  width: 100%;
  height: 100%;
}

tr.grayedout {
  color: #ddd;
}

table.listbody tr.LLine_top td{
  background-color:var(--color-table-back);
  border-top: 1px solid #ddd;
}

table.listbody tr.LLine_bot td{
  background-color:var(--color-table-back);
  border-bottom: 1px solid #ddd;
}


tr.LSummary{
  background-color:#E5F4FF;
  color: var(--color-status-grey, grey);
}


tr.linedthrough {
  text-decoration: line-through;
}

tr.LPassive {
  text-decoration: line-through;
  color: var(--color-status-red, #E00000);
}

tr.LInhereted {
  color: grey;
}

td.red {
  color: var(--color-status-red, #E00000);
}

td.big {
  font: var(--font-medium);
}

td.bigcenterred,  .dialog td.d.bigcenterred {
  font: var(--font-medium)  !important;
  text-align: center !important;
  font-weight: bold;
  color: var(--color-status-red, #E00000);
}

td.verybigcenterred, .dialog td.d.verybigcenterred {
  text-align: center !important;
  font-weight: bold;
  color: var(--color-status-red, #E00000);
  font-size: 64px;
}

td.bigcenter {
  text-align: center !important;
  font-weight: bold;
}

#MailAECButton {
  position: absolute;
  top: 3px;
  right: 20px;
  opacity: 0.75;
}

fp-tab-page:hover #MailAECButton{
  opacity: 0.25;
}

fp-tab-page:hover #MailAECButton:hover,
#MailAECButton:hover {
  opacity: 1;
}

iframe.MailContent {
  border: 0;
  width: 100%;
  overflow-x: hidden;
}

details {
  margin-top: 8px;
}

summary {
  font-size: 1.1em;
  font-weight: bold;
  padding: 4px 0;
  transition: background 200ms;
}

details.warn summary {
  background: rgba(255, 100, 100, 0.125);
}

summary:hover {
  background: rgba(0, 0, 0, 0.125);
}

.is-fallback {
  opacity: 0.75;
}

#ticketprocesspreshow .smartInputTA.rte {
  margin: 8px;
}

pf-richtext-editor p,
.smartInputTA.rte p,
.pfHtmlMailContent p {
  margin: 1em 0 1em 0;
  line-height: 1.5;
}

pf-richtext-editor p:first-child,
.smartInputTA.rte p:first-child,
.pfHtmlMailContent p:first-child {
  margin-top: 0;
}

td.bigbold,
td input.bigbold {
  font-size: 15px;
  font-weight: bold;
}

.clickable:hover {
  cursor: pointer;
}

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

.opacity50 {
  opacity: 0.5;
}

.avatar {
  --icon-size: 32px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  height: var(--icon-size);
  width: var(--icon-size);
  object-fit: cover;
}
.avatarOverlay {
  border-radius: 50%;
}

.avatar.missing {
  border-radius: 0;
  --icon-size: 24px;
  padding: 4px;
}

.pf_formNavigationList .avatar {
  height: 32px;
  width: 32px;
}


/* FORUM - NEWS */

table.news {
  width: 100%;
}

div.newsthumb img {
  height: 100px !important;
}

iframe.externalnews {
  width: 100%;
}


/* Magazine */

.listbody.magazine .jmlTableRows tr:hover {
  background: transparent;
}

form.jml_formList table.listbody.magazine .jmlTableRows td.l {
  padding: 10px 10px;
  background-color: var(--color-card-background);
}

div.publicpage {
  padding: 0 16px;
}

div.publicpage>.wiki {
  margin-bottom: 32px;
}

.news span.readmore {
  padding: 0 8px;
  display: inline-block;
  font-weight: bold;
  color: var(--color-main-font);
  opacity: 0.5;
  font-style: italic;
  transition: color 1s;
}

.news:hover span.readmore {
  color: var(--color-main-font);
}


/* Top FullSize */

div.news {
  font-family: Calibri, Helvetica, sans-serif;
  color: var(--color-main-font);
  border-bottom: 1px solid #CCC;
}

div.news div.newsimage_standard {
  float: left;
  height: 210px;
  width: 300px;
  margin-left: 0;
  margin-right: 10px;
  position: relative;
}

div.news div.newsimage_standard .img {
  height: 100%;
  width: 100%;
  background-position: center;
  background-size: cover;
}

div.news div.newsimage_standard .caption {
  height: 30px;
  line-height: 30px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.125) 45%, rgba(0, 0, 0, 0.5) 100%);
  /* W3C */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: #FFF;
  font-size: 16px;
  padding: 40px 10px 0 10px;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

div.news div.newsimage_standard a {
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-repeat: no-repeat;
  background-position: 4px 4px;
  background-image: url(../legacygeneral/status_black_fullscreen.svg);
}

div.news h1 {
  color: var(--color-main-header);
  margin: 10px 0 5px;
  font-size: 32px;
  line-height: 36px;
}

div.news h2 {
  color: #226699;
  margin-top: 0;
  font-size: 14px;
  line-height: 16px;
}

div.news p.teaser {
  color: var(--color-main-font);
  font-size: 20px;
  line-height: 24px;
}

div.news .withImage p.teaser {
  padding-left: 320px;
}

div.news div.mainContent {
  margin-top: 12px;
  font-size: 16px;
  line-height: 22px;
}

div.news p.comments {
  color: #808080;
  font-size: 14px;
  line-height: 24px;
  height: 26px;
  padding-top: 12px;
}

div.news p.comments .info {
  padding-left: 20px;
  padding-top: 1px;
  margin-right: 10px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 16px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

div.news p.comments .infoAuthor {
  background-image: url(../legacygeneral/status_none_work.svg);
}

div.news p.comments .infoDate {
  background-image: url(../legacygeneral/status_none_date.svg);
}

div.news p.comments .infoComments {
  background-image: url(../legacygeneral/status_none_alert.svg);
}

div.news p.comments .infoUrl {
  background-image: url(../legacygeneral/status_none_world.svg);
  max-width: 400px;
}


/* Top News */

div.news div.headarea.withImage {
  min-height: 210px;
  position: relative;
}

div.newsTop div.headarea.withImage {
  min-height: 410px;
}

div.newsTop div.newsimage_standard {
  height: 400px;
  width: 600px;
}

div.newsTop div.newsimage_standard .caption {
  font-size: 20px;
  padding-bottom: 5px;
}

div.newsTop .withImage p.teaser {
  padding-left: 620px;
}

div.newsTop h1 {
  font-size: 42px;
  line-height: 50px;
}


/* PreShow News */

div.newspreshow img {
  height: 100%;
}


/* Header 4 Postings News */

div.newsheader4postings img {
  height: 100%;
}

div.newsheader4postings h1 {
  white-space: normal;
  color: var(--color-main-header);
  margin: 20px 0 5px;
  font-size: 24px;
  line-height: 32px;
  font-weight: bold;
}

div.newsheader4postings h2 {
  white-space: normal;
  color: #ee7000;
  margin-top: 0;
  font-size: 10px;
  line-height: 12px;
  display: inline;
  text-transform: uppercase;
  font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", Arial, Helvetica, sans-serif;
}

div.newsheader4postings h3 {
  white-space: normal;
  color: #333;
  font-size: 14px;
  line-height: 16px;
  font-weight: normal;
  margin: 10px 0 30px;
}

div.newsheader4postings p.comments {
  white-space: normal;
  color: #808080;
  font-size: 10px;
}


/* ENDE FOREN - NEWS */

div.colorlbarea {
  width: 5px;
  height: 100%;
  float: left;
}

.floatright {
  float: right;
}

div.floatright {
  padding: 0;
  margin-top: -8px;
  margin-right: -14px;
}


/*.imgpreshowright{width:5px; height: 100%; float:right; } */

hr {
  border-top: 1px solid #999;
  height: 1px;
  border-left: none;
  border-right: none;
  border-bottom: none;
}

.oneliner {
  height: 1.2em;
  line-height: 1.2em;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}

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

span.projectid {
  font: var(--font-small);
  color: var(--color-main-font);
}

span.customer_big {
  font-size: 12px;
  line-height: 14px;
  font-weight: bold;
  color: var(--color-main-font);
}

.infohint p{
  padding: var(--width-componentpadding);
}


/* --- LOGIN --- */

.jml_formDialog#loginIframe,
.jml_formDialog#loginIframe .jml_dialogButtons,
.jml_formDialog#loginIframe .jml_dialogTbodyStandard {
  background: transparent;
  border: 0 none;
}

body.pwa .tmplWorkarea > .logindialog form.jml_formDialog,
body.popup .tmplWorkarea > .logindialog form.jml_formDialog{
  min-height: auto !important;
}

body.pwa .tmplWorkarea > .logindialog > a,
body.popup .tmplWorkarea > .logindialog > a {
  margin-left: var(--width-componentspacing, 12px);
}

body.pwa .tmplWorkarea > .logindialog ,
body.popup .tmplWorkarea > .logindialog {
  width: 500px;
  margin: env(safe-area-inset-top, 20px) auto env(safe-area-inset-bottom, 20px);
  --form-padding: var(--width-componentspacing);
}

body.pwa .tmplWorkarea > .logindialog table.dialog,
body.popup .tmplWorkarea > .logindialog table.dialog{
  width: 100%;
}

body.pwa .tmplWorkarea > .logindialog fp-view-wrapper,
body.popup .tmplWorkarea > .logindialog fp-view-wrapper {
  margin-bottom: 20px;
}
body.pwa .tmplWorkarea > .logindialog .avatar,
body.popup .tmplWorkarea > .logindialog .avatar{
  height: 128px;
  width: 128px;
}

@media (max-width: 500px) { /*mobile*/
  body.pwa .tmplWorkarea > .logindialog,
  body.popup .tmplWorkarea > .logindialog {
    width: 100vw;
  }
  body.pwa .tmplWorkarea > .logindialog fp-view-wrapper,
  body.popup .tmplWorkarea > .logindialog fp-view-wrapper {
    margin: 0;
  }

}

.tmplWorkarea > .logindialog .ms-signin {
  margin-right: auto;
  margin-left: auto;
  margin-top: 30px;
  display: block;
  width: 163px;
  height: 53px;
  background-repeat: no-repeat;
}

.tmplWorkarea > .logindialog .jmlButton.ms-signin {
  margin: 0;
  background-position: center;
  width: 100%;
  height: 44px;
}

.tmplWorkarea > .logindialog .ms-signin.de {
  background-image: var(--ms-signin-de);
}

.tmplWorkarea > .logindialog .ms-signin.en {
  background-image: var(--ms-signin-en);
}

/* WIKI Preshow*/

.wiki.wiki-preview {
  padding: 0 20px 0 20px !important;
  width: 200% !important;
  max-width: none !important;
  box-shadow: none !important;
  transform: scale(0.5);
  transform-origin: top left;
  box-sizing: border-box;
  text-align: left;
  max-height: 320px;
  overflow: hidden;
  opacity: 0.7;
  filter: var(--disable-backdrop-filter, blur(.7px));
}

.wiki-preview fp-expander, .wiki-preview .jmlAction {display: none;}

.wiki-stats {
  width: 100%;
  position: absolute;
  bottom: 6px;
}

.wiki-stats td{
  text-align: left;
  padding: 0 10px;
}

/* WIKI Page */

div.wikijasperheader {
  background-color: #f6f6f6;
  padding: 10px;
}

table.wikidialog {
  width: 100%;
}

.wiki {
  margin-top: 0;
  padding-top: 0;
  width: 100%;
  overflow: auto;
}

a.wikiheaderedit img {
  width: 24px;
  vertical-align: text-bottom !important;
}

.wiki {
  font-size: 14px;
  background-color: var(--color-card-background);
}

.wiki code {
  padding: var(--width-componentpadding);
  border-radius: var(--width-componentpadding);
  color: var(--color-primary-for-text);
}

.wiki mark.w {
  background-color: white;
  font-weight: bold;
  font-style: italic;
}

.wiki tr.w>td {
  border: 1px solid black;
  padding: 5px 10px 5px 10px;
}

.wiki h1.w {
  color: var(--color-primary);
  font-weight: normal;
  border-bottom: 1px solid;
  margin-bottom: 10px;
  padding-top: 25px;
  font-size: 1.8em;
  clear: both;
}

.wiki :is(h1, h2, h3, h4).w:first-of-type {
  clear: none; /* neben der obersten Überschrift, darf gefloatet werden */
}

.wiki h2.w {
  color: var(--color-primary);
  font-weight: bold;
  border-bottom: 1px solid;
  margin-bottom: 5px;
  padding-top: 8px;
  font-size: 1.3em;
  clear: both;
}

.wiki h3.w {
  color: var(--color-primary);
  font-weight: bold;
  padding-top: 5px;
  font-size: 1.2em;
  clear: both;
}

.wiki h4.w {
  opacity: .7;
  color: var(--color-primary);
  font-weight: bold;
  padding-top: 5px;
  font-size: 1.2em;
  clear: both;
}

.wiki h5.w {
  color: var(--color-primary);
  font-weight: bold;
  padding-top: 5px;
  font-size: 1.1em;
  clear: both;
}

.wiki h6.w {
  color: var(--color-primary);
  font-weight: normal;
  padding-top: 5px;
  clear: both;
}

.wiki a.w {
  text-decoration: none;
}

.wiki p.w {
  margin-top: 0;
  margin-bottom: 0.5em;
  line-height: 1em;
}

.wiki tr.w>th {
  color: #002b63;
  font-size: 12px;
  background-color: var(--color-shade-4);
  font-weight: bold;
  border: 1px solid black;
  padding: 5px 10px 5px 10px;
}

.wiki tr.wikitable {
  padding-top: 4px;
}

.wiki th.wikitable {
  color: #036;
  padding: 3px;
  font-size: 12px;
  font-weight: bold;
  border-bottom: 3px solid #DEDEDE;
}

.wiki table.wikitable {
  margin: 20px 0;
  width: 100%;
  border-top: 1px solid #DEDEDE;
  border-bottom: 1px solid #DEDEDE;
  border-left: 1px solid #DEDEDE;
  border-right: 1px solid #DEDEDE;
}

.wiki a.newlink {
  text-decoration: none;
  color: var(--color-status-red);
}

.wiki a.w.internal {
  text-decoration: none;
  color: var(--color-primary-for-text);
}

.wiki a.w.wikilink {
  background-repeat: no-repeat;
  background-position-x: right;
  color: var(--color-primary-for-text);
  background-position-y: center;
  background-position: right center;
  background-attachment: scroll;
  padding-right: 14px;
  background-color: transparent;
  background-size: 12px 12px;
}

a.w.external {
  background-image: url("../modules/wiki/wikilink_external.png");
}

a.w.relative {
  background-image: url("../modules/wiki/wikilink_relative.png");
}

.wiki li.w {
  margin-left: 15px;
}

.wiki table.wikiimage {
  max-width: 156px;
  background-color: white;
  padding: 0;
  margin: 2px;
}

.wiki table.wikiimage td {
  border: 0 none;
  background-color: white;
  padding: 0;
  margin: 2px;
}

.wiki table.noframe_r {
  max-width: 156px;
  float: right;
  border: 0;
}

.wiki table.wikiimage_r {
  max-width: 160px;
  float: right;
}

.wiki table.wikiimage_l {
  max-width: 160px;
  float: left;
}

.wiki table.wikiimage_n {
  max-width: 160px;
  float: none;
}

.wiki table.wikiimage_c {
  max-width: 256px;
  text-align: center;
}

.wiki td.wikiimgdesc {
  font: var(--font-small);
  padding: 0;
  margin: 0;
  color: #404040;
  border: none;
}


/* WIKI Inhaltsverzeichnis */

.wiki .wikitoc {
  border: 0 none;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.25);
  background-color: var(--color-card-background);
  color: var(--color-card-font);
}


/* Small Screeen und Mobilgeraete */

@media (max-width: 1000px) {
  .wiki .wikitoc {
    width: 100%;
    margin: 0 0 10px 0;
  }
}


/* so etwa ab 1024er Monitoren, diese Regeln */

@media (min-width: 1001px) {
  .wiki .wikitoc {
    float: right;
    margin: 0 0 10px 10px;
    width: 300px;
  }
}


/* so etwa ab 1600er Monitoren, diese Regeln */
.viewFrame.wikidialog {
  position: relative;
}

.wiki .wikitoc h1 {
  color: var(--color-primary);
  font-size: 14px;
  margin: 5px;
  padding: 0 0 0 10px;
  border-bottom: 0 solid;
  font-weight: normal;
}

.wiki .wikitoc h2 {
  color: var(--color-primary);
  font-size: 14px;
  margin: 5px;
  padding: 0 0 0 20px;
  border-bottom: 0 solid;
  font-weight: normal;
  opacity: .9;
}

.wiki .wikitoc h3 {
  opacity: .8;
  color: var(--color-primary);
  font-size: 14px;
  margin: 5px;
  padding: 0 0 0 30px;
  border-bottom: 0 solid;
  font-weight: normal;
}

.wiki .wikitoc h4 {
  opacity: .75;
  color: var(--color-primary);
  font-size: 14px;
  margin: 5px;
  padding: 0 0 0 40px;
  border-bottom: 0 solid;
  font-weight: normal;
}

.wiki .wikitoc h5 {
  opacity: .7;
  color: var(--color-primary);
  font-size: 14px;
  margin: 5px;
  padding: 0 0 0 50px;
  border-bottom: 0 solid;
  font-weight: normal;
}

.wiki .wikitoc h6 {
  opacity: .6;
  color: var(--color-primary);
  font-size: 14px;
  margin: 5px;
  padding: 0 0 0 60px;
  border-bottom: 0 solid;
  font-weight: normal;
}

.wiki .wikitoc a {
  padding: 0 0 0 0;
}

.wiki span.wikisearch {
  color: var(--color-status-red);
}

.wiki div.wikifolder {
  border: 1px solid black;
  border-collapse: collapse;
}

.wiki .wikifolder>table {
  border: 1px solid black;
  background-color: white;
}

.wiki .wikifolder>td {
  border: 1px solid black;
  padding: 5px 10px 5px 10px;
}

.wiki .wikifolder>th {
  border: 1px solid black;
  padding: 5px 10px 5px 10px;
}

.wiki div.wikifile {
  border: 1px solid black;
  border-collapse: collapse;
}

.wiki .wikifile>table {
  border: 1px solid black;
  background-color: white;
}

.wiki .wikifile>td {
  border: 1px solid black;
  padding: 5px 10px 5px 10px;
}

.wiki .wikifile>th {
  border: 1px solid black;
  padding: 5px 10px 5px 10px;
}

.wiki table.w {
  border: 1px solid black;
  background-color: white;
  border-collapse: collapse;
}

.wiki table.w td {
  border: 1px solid black;
  padding: 5px 10px 5px 10px;
}

.wiki table.w th {
  border: 1px solid black;
  padding: 5px 10px 5px 10px;
}

.wiki .wikireport {
  padding: var(--width-componentspacing);
  border: 4px solid var(--color-tint-contrast-0125);
}

.wiki .wikireport > :is(pf-dialog-view, pf-list-view) {
  display: block;
}

.wiki .wikireport .tmplNaviTable {
  display: none;
}

.wiki .wikireport.wikireportPassive td.iaall * {
  display: none;
}


/* -------------------------------   Campaign            ----------------------------- */

.campaignStatus {
  line-height: 20px;
  font-size: 18px;
  font-weight: bold;
}

.campaignStatusWaiting {
  font-size: 14px;
  line-height: 16px;
  color: #AAA;
  font-weight: normal;
}

.campaignStatusClosed,
.campaignStatusRunningGreen {
  color: grey;
}

.campaignStatusRunningRed {
  color: #e34a1b;
}

.campaignStatusRunningYellow {
  color: #f1a129;
}

/* Timesheet (nutzt finrec-klasse mit)*/
.card_timesheet table.timesheet-roles td{
  text-align:center;
}
.card_timesheet.card_financerecord .watermark {
  right: 2px;
  top: 20px;
  transform: rotate(20deg);
}

.card_timesheet p.expRecPurpose{
  height: 40px;
  max-height: 40px;
  font-size: 10px;
  line-height: 10px;
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  margin:8px 0 16px 0;
}


/* -------------------------------   Calculation            ----------------------------- */

table.calculationpreshow {
  width: 240px;
}

tr.calculationpreshowheader {
  background-color: rgb(149, 149, 149);
  color: white;
}

.pfmenu1 .jmlMenuItem .jmlMenuCaption,
.tundra .pfmenu1 .jmlMenuItem>span {
  font-size: 12px;
  font-weight: normal;
  padding: 0 10px;
}

.jmlMenuPopupItem img,
.jmlMenuButtonItem img {
  vertical-align: middle;
}

.pfMenu2 .jmlMenuItem {
  line-height: 20px;
  /* Nur damit der Expander dahinter nicht den Click fängt*/
  z-index: 2;
}

.pfMenu2 .jmlMenuButtonItem img {
  display: none;
}

.jmlMenu .jmlMenuInputItem form {
  line-height: 14px;
  padding: 24px 4px 0 4px;
}

.jmlMenu .jmlMenuInputItem input {
  font-size: 12px;
}

.jmlMenu .jmlMenuInputItem .searchterm {
  width: 85px;
  text-align: left;
}


/* --- Reportheader/Footer --------------------------------- */

img.reportheader,
img.reportfooter {
  display: none;
}


/* --- Ende Reportheader/Footer --------------------------------- */


/* --- popup selectlist genua ---------------------- */

/*.popup-select-dialog { wir machen das nicht, da es das Widget stört, welches sich um alles kümmern soll }*/

/* --- Ende popup selectlist template ---------------------- */

/* --- Farben --------------------------------------------- */

/* WORKDAY */

.vacation,
.vacationov,
.vacationLine,
.vacationspec {
  background-color: var(--color-tint-vacation);
  --chip-color: var(--color-tint-vacation);
  --color-tr-lodd: var(--color-tint-vacation);
  --color-tr-leven: var(--color-tint-vacation);
  --color-table-group: var(--color-tint-vacation);
}

.vacationPartial {
  /* background-color: #FEFED4; */
  background: repeating-linear-gradient(135deg, transparent, transparent 4px, var(--color-tint-vacation) 4px, var(--color-tint-vacation) 8px);
  --chip-color: var(--color-tint-vacation);
}

.holidayvacation {
  /* background-color: #FEFED4; */
  background-image: url("../legacygeneral/cal_holidayvacation.gif");
  background-position: center;
}

.vacationRequest {
  background-color: var(--color-tint-vacation-request);
  --color-tr-lodd: var(--color-tint-vacation-request);
  --color-tr-leven: var(--color-tint-vacation-request);
  --color-table-group: var(--color-tint-vacation-request);
}

.vacationRequestPartial {
  background-color: #cbf3f0;
}

.vacationRequestActive {
  background-color: #a1d5d1;
  background-image: url("embed/vacOverview_active.gif");
}

.holiday,
.holidayLine,
.bmlf_calendar td.bmlf-cal-day.holiday {
  background-color: var(--color-tint-holiday);
  --chip-color: var(--color-tint-holiday);
  --color-table-group: var(--color-tint-holiday);
  --color-tr-lodd: var(--color-tint-holiday);
  --color-tr-leven: var(--color-tint-holiday);
}

.holidayPartial {
  background: repeating-linear-gradient(135deg, transparent, transparent 4px, var(--color-tint-holiday) 4px, var(--color-tint-holiday) 8px);
}

.redbg {
  background-color: var(--color-status-red);
  --color-table-group: var(--color-status-red);
  --color-tr-lodd: var(--color-status-red);
  --color-tr-leven: var(--color-status-red);
}

.workday {
  background-color: transparent;
}
.weekend {
  background-color: var(--color-tint-weekend);
  --chip-color: var(--color-tint-weekend);
  --color-table-group: var(--color-tint-weekend);
  --color-tr-lodd: var(--color-tint-weekend);
  --color-tr-leven: var(--color-tint-weekend);
}

.weekend > .grouped, .obsolete > .grouped, .sick > .grouped, .sickLine > .grouped, .redbg > .grouped   {
  --color-table-group: transparent;
}

.obsolete {
  background-color: var(--color-tint-contrast-0125);
  --chip-color: var(--color-tint-contrast-0125);
  --color-table-group: var(--color-tint-contrast-0125);
  --color-tr-lodd: var(--color-tint-contrast-0125);
  --color-tr-leven: var(--color-tint-contrast-0125);
}

.sick, .sickLine {
  background-color: var(--color-tint-sick);
  --chip-color: var(--color-tint-sick);
  --color-table-group: var(--color-tint-sick);
  --color-tr-lodd: var(--color-tint-sick);
  --color-tr-leven: var(--color-tint-sick);
}

.paymentRelationHighlight {
  background-color: var(--color-tint-mark-bg-4);
}

.workersummary {
  background-color: var(--color-card-background);
}

.workersummarybottom {
  background-color: var(--color-table-separator);
  line-height: 1px;
}

.sickPartial {
  /*background-color: #E9D1D1;*/
  background: repeating-linear-gradient(135deg, transparent, transparent 4px,var(--color-tint-sick) 4px, var(--color-tint-sick) 8px);
}
.potentielleVacation{
  font-style: italic;
}


/* REVENUE */

.income {
  background-color: #EECE8A;
}

.incomeForecast {
  background-color: #FDE7B9;
}

.expenses {
  background-color: #C4D1DE;
}

.expensesForecast {
  background-color: #E6E6E6;
}

.draft {
  background-color: #f7ffb1;
}

.templateproject,
.templateproject.leven,
.templateproject.lodd {
  /*background-color: #FEDFB9*/
  background-color: var(--color-tint-holiday);
}

.templatetask ,
.templatetask.leven ,
.templatetask.lodd {
  background-color: #e0ac6e;
}

.templatetaskcollection ,
.templatetaskcollection.leven ,
.templatetaskcollection.lodd {
  background-color: #cd8837;
}

.templatefontsize9.richtexteditor {
  font-size: 9pt;
}

.templatefontsize10.richtexteditor {
  font-size: 10pt;
}

.templatefontsize11.richtexteditor {
  font-size: 11pt;
}


/* POLL */

.polloption_selected {
  /*background-color: #EECE8A;*/
  background-image: url(embed/polloption_selected.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}


/* CRM */

.crmDirectionIcon {
  height: 16px;
  width: 16px;
  vertical-align: middle;
}

hr.crmLastContact {
  border-collapse: collapse;
  border-top: 1px solid #999;
  border-left: 0 solid #999;
  border-right: 0 solid #999;
  border-bottom: 0 solid #999;
}

.crm_open {
  background-color: #EECE8A;
}

.crm_close {
  background-color: #E6E6E6;
}

.crm_open_heavy {
  background-color: var(--color-status-red);
}

.ontour {
  background-color: var(--color-tint-extern);
  --chip-color: var(--color-tint-extern);
}

.birthday {
  background-color: var(--color-tint-birthday);
  --chip-color: var(--color-tint-birthday);
}

.listarea tr.milestone {
  background-color: #CCC;
}
/*
.weekend,
.bmlf_calendar td.bmlf-cal-day.weekend {
  background-color: #F7F7DD;
}
*/
.red {
  color: var(--color-status-red, #E00000);
}

.orange {
  color: #ff8040;
}

.yellow {
  color: #d2c204;
}

.tableheadercolor {
  color: var(--color-main-font);
}

.center {
  text-align: center;
}

.holidayRight {
  /*background-color: #FEDFB9*/
  background-color: var(--color-tint-holiday);
  text-align: right;
}

.weekendRight {
  background-color: #F1F1DD;
  text-align: right;
}

.sumrow {
  background-color: #BFDFFF;
}

/*CALENDARENTRY*/

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

.calendarEntryParticipants li {
  white-space: nowrap;
  display: inline-block;
  margin-right: 10px;
}

.calendarEntryParticipants li img {
  margin-left: 2px;
}

.calendarEntryParticipants li.cepwithmail {
  width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 14px;
  margin-top: 2px;
}

.calendarEntryParticipants li.cepwithmail span.smallhint {
  margin-left: 2px;
}

div.diskspace {
  color: #73A7D0;
  font: var(--font-small);
  text-align: right;
}

div.diskspace_orange {
  color: #ECCB7C;
  font: var(--font-small);
  text-align: right;
}

div.diskspace_red {
  color: #C00000;
  font: var(--font-small);
  text-align: right;
}


/* --- Ende Farben --------------------------------------------- */


/* --- Styles --------------------------------------------- */

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

.monospace:not(fp-field) {
  font-family: Consolas, Courier, Monospace, monospace;
}
fp-field.monospace {
  --font-input: Consolas, Courier, Monospace, monospace;
}

.floatL {
  float: left;
  margin-right: 30px;
}

.floatR {
  float: right;
  margin-right: 2px;
}

.reportbar {
  color: var(--color-accent-contrast);
  background: linear-gradient(to top, transparent 30%, var(--color-primary) 30%, var(--color-primary) 72%, transparent 72%) center;
}

.reportbarred {
  background-image: url(embed/bg_barred.gif);
  background-repeat: repeat-x;
  background-position: center;
  color: #000;
}

.rbadded {
  background-image: url(embed/bg_bar_added.gif);
  background-repeat: repeat-x;
  background-position: center;
  color: #000;
}

.rbnadded {
  background-image: url(embed/bg_bar_nadded.gif);
  background-repeat: repeat-x;
  background-position: center;
  color: #000;
}

.rbplanned {
  background-image: url(embed/bg_bar_planned.gif);
  background-repeat: repeat-x;
  background-position: center;
  color: #000;
}

.rb10 {
  background-image: url(embed/rb10.gif);
  background-repeat: repeat-x;
  background-position: center;
}

.rb30 {
  background-image: url(embed/rb30.gif);
  background-repeat: repeat-x;
  background-position: center;
}

.rb50 {
  background-image: url(embed/rb50.gif);
  background-repeat: repeat-x;
  background-position: center;
}

.rb70 {
  background-image: url(embed/rb70.gif);
  background-repeat: repeat-x;
  background-position: center;
}

.rb90 {
  background-image: url(embed/rb90.gif);
  background-repeat: repeat-x;
  background-position: center;
}

.rb100 {
  background-image: url(embed/rb100.gif);
  background-repeat: repeat-x;
  background-position: center;
}

.rb110 {
  background-image: url(embed/rb110.gif);
  background-repeat: repeat-x;
  background-position: center;
}

.rb130 {
  background-image: url(embed/rb130.gif);
  background-repeat: repeat-x;
  background-position: center;
}

.rb150 {
  background-image: url(embed/rb150.gif);
  background-repeat: repeat-x;
  background-position: center;
}

.rb170 {
  background-image: url(embed/rb170.gif);
  background-repeat: repeat-x;
  background-position: center;
}

.rb190 {
  background-image: url(embed/rb190.gif);
  background-repeat: repeat-x;
  background-position: center;
}

/* --- Ende Styles --------------------------------------------- */

.adw_add {
  color: green;
  font-weight: bold;
}

.adw_add {
  font-weight: bold;
  border: 2px solid #369;
}

.adw_add input {
  color: green;
  background-size: 12px;
  background-image: url(../legacygeneral/status_blue_high.svg);
  background-repeat: no-repeat;
  background-position: left;
}

.adw_red {
  font-weight: bold;
  border: 2px solid #369;
}

.adw_red input {
  margin: 0;
  color: var(--color-status-red);
  background-size: 12px;
  background-image: url(../legacygeneral/status_blue_low.svg);
  background-repeat: no-repeat;
  background-position: left;
}

.adw_del {
  font-weight: bold;
  border: 2px solid #369;
}

.adw_del input {
  color: var(--color-status-red);
  background-size: 12px;
  background-image: url(../legacygeneral/status_blue_del.svg);
  background-repeat: no-repeat;
  background-position: left;
}

div.jml_input.adw_orig {
  border: none;
  box-shadow: 0 1px 2px -1px #999
}

.adw_orig input {
  color: #404040;
}

div.jml_input.adw_ro {
  border: none;
  box-shadow: 0 1px 2px -1px #999
}

.adw_ro input {
  color: #999999;
}

div.jml_input.adw_emp {
  color: green;
  border: none;
  box-shadow: 0 1px 2px -1px #999
}

div.jml_input.adw_new {
  color: green;
  font-weight: bold;
  border: 2px solid #369;
  box-shadow: 0 1px 2px -1px #999
}

td.bigicon .jmlAction .jmlActionIcon > fp-inline-svg,
td.bigicon .jmlAction .jmlActionIcon > fp-inline-svg > svg{
  --icon-size: 32px;
}

td.bigicon .jmlAction .jmlActionIcon > fp-inline-svg {
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.125);
}

td.adw_p_odd > div,
td.adw_p_even > div {
  width: 200px;
}

.adw_d_odd {
  border-right: 4px solid #c0c0c0;
  text-align: left !important;
  position: relative;
  padding-right: 30px !important;
  padding-left: 20px !important;
}

.adw_d_even {
  border-right: 4px solid #808080;
  text-align: left !important;
  position: relative;
  padding-right: 30px !important;
  padding-left: 20px !important;
}

.adw_d_even a {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translatey(-50%);
}

.adw_d_odd a {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translatey(-50%);
}

.adw_tr .adw_inp {
  --padding-input-horz: 2px;
}

.adw_tr .typeicon {
  padding-left: 6px;
  vertical-align: top;
}
.adw_summary_projecttime > td.d,
.adw_summary_worktime > td.d,
.adw_summary_saldo > td.d,
td.d.adw_inp {
  padding: 0 2px;
}
.adw_tr_odd {
  background-color: var(--color-shade-1);
}
.adw_tr_odd .adw_inp {
  background-color: var(--color-shade-2);
}

.adw_tr_even {
  background-color: var(--color-shade-none);
}
.adw_tr_even .adw_inp {
  background-color: var(--color-shade-1);
}

.adw_tr_space2sum{
  background-color: var(--color-shade-none);
}

.adw_tr_space2sum hr{
  padding: 1px;
  border-top: 4px solid var(--color-shade-2);
  border-bottom: 5px solid var(--color-shade-1);
  border-radius: 5px;
}

.adw_desc {
  color: grey;
  text-align: right;
  border: 0 solid #c0c0c0;
  font-size: 0.8em;
  background-color: transparent;
}

.adw_desc textarea {
  color: grey;
}

.adw_desc_changed textarea {
  color: var(--color-secondary);
  border: 1px solid var(--color-secondary);
}

tr.adw_tr:hover .adw_inp {
  background-color: var(--color-default-hover);
}

.adw_day {
  /*color: var(--color-secondary);*/
  font-size: 1em !important;
  font-weight: normal;
}

.adw_date {
  /*color: var(--color-secondary);*/
  font-size: 0.8em;
  font-weight: bold;
  padding-left: 5px;
  padding-right: 5px;
}

.adw_day_free {
  font-size: 1em !important;
  font-weight: normal;
}

.adw_date_free {
  font-size: 0.8em;
  font-weight: bold;
  padding-left: 5px;
  padding-right: 5px;
}

.adw_weekend {
  color: var(--color-status-red) !important;
}

.adw_refdate {
  box-sizing: border-box;
  border-bottom: 4px solid #2981c8 !important
}

.td .adw_template {
  border-right: 0 solid #369;
}

.adw_template input {
  background-color: transparent !important;
  border: 0;
}

.adw_sum {
  font-weight: bold;
  border-top: 0 solid grey;
  border-bottom: 0;
  border-right: 0;
  border-left: 0;
  text-align: right;
}

.adw_sumh{
  min-width: 60px;
}

.adw_sum,
.adw_saldo_l {
  padding: 0;
}


/*.adw_vreset{padding: 2px 5px !important; }*/

.adw_vreset {
  background: var(--color-shade-4);
}

._adw_saldo_ok {
  background-color: #80ff80;
  color: var(--color-status-green);
  font-size: 1.0em;
  font-weight: bold;
  border-top: 0 solid grey;
}

.adw_saldo_ok {
  font-size: 1.0em;
  font-weight: bold;
  border-top: 0 solid green;
  color: var(--color-status-green);
  border-bottom: 0;
  border-right: 0;
  border-left: 0;
  text-align: right;
  padding: 0 !important;
  background-color: transparent;
}

.adw_saldo_ok input {
  color: var(--color-status-green);
  background-size: 16px;
  background-image: url(../legacygeneral/status_green_ok.svg);
  background-repeat: no-repeat;
  background-position: center;
}

.smartInput.adw_saldo_h,
.smartInput.adw_saldo_l {
  background-color: transparent;
  border-top: 3px solid red;
  border-bottom: 0;
  border-right: 0;
  border-left: 0;
  text-align: right;
}

.smartInput.adw_saldo_h input,
.smartInput.adw_saldo_l input {
  font-size: 1.0em;
  font-weight: bold;
}

.adw_saldo_l input {
  color: var(--color-status-red);
}

.adw_saldo_h input {
  color: var(--color-status-green);
}

.adw_workday_overview td {
  border-bottom: solid 1px var(--color-default-border);
}

.adw_workday_overview td:nth-child(1) {
  text-align: left !important;
  font-size: 1em !important;
  padding-left: 42px !important;
}

.adw_workday_overview td:nth-child(2) {
  text-align: left !important;
  font-size: 1em !important;
  padding-left: 20px !important;
}

.adw_workday_overview td:nth-child(3) {
  text-align: left !important;
  font-size: 1em !important;
  padding-left: 10px !important;
}

/*.adw_summary_projecttime td {*/
/*  border-top: solid 1px #e4e4e4;*/
/*  background: #fafafa;*/
/*  !*padding: 2px 5px !important;*!*/
/*}*/

/*.adw_summary_projecttime .adw_sum {*/
/*  background: #fafafa !important;*/
/*}*/

/*.adw_summary_saldo .adw_saldo_l {*/
/*  background: #fafafa !important;*/
/*}*/

/*.adw_summary_saldo .adw_sum {*/
/*  background: #fafafa !important;*/
/*}*/

/*.adw_summary_saldo td {*/
/*  background: #fafafa;*/
/*  !*padding: 2px 5px !important;*!*/
/*}*/

/*.adw_summary_worktime td:first-child {*/
/*  background: #fafafa !important;*/
/*}*/

/*.adw_summary_worktime td:nth-child(2) {*/
/*  background: #fafafa !important;*/
/*}*/

/*.adw_summary_worktime td {*/
/*  background: #fff !important;*/
/*  !*padding: 2px 5px !important;*!*/
/*}*/



.actionBig {
  font-size: 1.5em;
}

.actionRed {
  color: var(--color-status-red) !important;
}

.actionButton,
a.actionButton {
  height: 18px;
  line-height: 20px;
  vertical-align: middle;
  margin-top: 35px;
  text-align: center;
  padding: 2px 6px;
  font-size: 1em;
  border: 1px solid #c0c0c0;
  border-radius: 4px;
  background: #f7f7f7;
  color: #333;
}

.actionButton:hover {
  background: #6db3f2;
}

.actionButton img,
a.actionButton img {
  height: 16px;
  vertical-align: top;
}

.actionBigButton {
  height: 28px;
  line-height: 48px;
  padding: 5px 15px;
}

.actionBigButton:hover {
  background: #6db3f2;
  /* color: white; */
}

.actionBigButton img {
  height: 16px;
}

.pseudobutton,
.jmlButtonField .jmlAction,
.jmlButtonField a.jmlAction11{
  display: flex;
  white-space: nowrap;
  align-items: center;
  height: 100%;
  padding-left: var(--width-componentpadding);
  padding-right: var(--width-componentpadding);
}

.firstSteps button.jmlButton{
  display: flex;
  flex-direction: row-reverse;
  white-space: nowrap;
  text-align: left;
  width: 100%;
  height: 100px;

  & img{
    height: 100px;
    width: 100px;
    --icon-size: 100px;
  }
}

.copyTimeButton .jmlButton{
  width: 24px;
  height: 24px;
}
.copyTimeButton a{
  flex-direction: row-reverse;
}
.copyTimeButton .jmlButton .jmlActionIcon{
  --icon-size: 16px;
}

.boxsegmentcontent .pseudobutton {
  display: block;
  text-align: left;
  line-height: 24px;
}

.boxsegmentcontent .pseudobuttonactive {
  background-color: var(--color-default-hover);
}

.pseudobutton:hover,
.jmlButtonField .jmlAction:hover {}

.boxarea .active {}

td.d.back-green  , td.l.back-green  { background-color: var(--color-status-green); }
td.d.back-yellow , td.l.back-yellow { background-color: var(--color-status-yellow); }
td.d.back-orange , td.l.back-orange { background-color: var(--color-status-orange); }
td.d.back-red    , td.l.back-red    { background-color: var(--color-status-red); }

.dialog-row > .d.back-green  { border-radius: 4px; background-color: var(--color-status-green);  outline: 4px solid var(--color-status-green); }
.dialog-row > .d.back-yellow { border-radius: 4px; background-color: var(--color-status-yellow); outline: 4px solid var(--color-status-yellow); }
.dialog-row > .d.back-orange { border-radius: 4px; background-color: var(--color-status-orange); outline: 4px solid var(--color-status-orange); }
.dialog-row > .d.back-red    { border-radius: 4px; background-color: var(--color-status-red);    outline: 4px solid var(--color-status-red); }

td.capacity_critical {
  background-color: #990000 !important;
  color: white !important;
  text-align: center !important;
}

td.capacity_ok {
  background-color: green !important;
  color: white !important;
  text-align: center !important;
}

td.capacity_warning {
  background-color: #ff8040 !important;
  color: white !important;
  text-align: center !important;
}

td.capacity_hint {
  background-color: #c0c0c0!important;
  color: white !important;
  text-align: center !important;
}

td.capacity_values {
  background-color: #91c8ff!important;
  color: black !important;
  text-align: center !important;
}

fp-sidebar [slot='buttons-below'] {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-content: center;
  padding-bottom: var(--width-componentspacing, 12px);
  text-align: center;
  --icon-size: 24px;
}

fp-sidebar [slot='buttons-below'] > span {
  display: inline-block;
  height: var(--width-sidebar);
  width: var(--width-sidebar);
}

fp-sidebar > fp-sidebar-panel img.avatar-back {
  width: 100%;
  height: 200px;
  object-fit: cover;
  margin-bottom: 35px;
}

fp-sidebar > fp-sidebar-panel img.avatar:not(.jmlImage) {
  height: 160px;
  width: 160px;
  position: absolute;
  top: 20px;
  left: 50%;
  margin: auto auto auto -80px;
  object-fit: cover;
}

fp-sidebar > fp-sidebar-panel fp-fab.avatar-edit{
  position: absolute;
  top: 160px;
  right: 8px;
  --button-size: 32px;
}

@media (max-height: 800px) {
  fp-sidebar > fp-sidebar-panel img.avatar-back {
    height: 100px;
  }
  fp-sidebar > fp-sidebar-panel img.avatar:not(.jmlImage) {
    margin: auto;
    height: 80px;
    width: 80px;
    position: absolute;
    top: 10px;
    left: 10px;
    object-fit: cover;
  }

  fp-sidebar > fp-sidebar-panel fp-fab.avatar-edit{
    position: absolute;
    top: 60px;
    right: 8px;
    --button-size: 32px;
  }
}

fp-sidebar > fp-sidebar-panel.selected {
  display: flex;
  flex-direction: column;
}

fp-sidebar > fp-sidebar-panel>h1 {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin: 0;
  padding-right: 15px;
  padding-left: 15px;
  padding-top: env(safe-area-inset-top, 0);
  text-align: left;
  height: var(--height-topmenu1);
  background-color: var(--color-menu1-back);
  font: var(--font-large);
  color: var(--color-menu1-font);
}

fp-sidebar > fp-sidebar-panel>.scroll {
  overflow: auto;
  position: absolute;
  top: calc(var(--height-topmenu1) + env(safe-area-inset-top, 0));
  bottom: 0;
  left: 0;
  width: 100%;
}

fp-sidebar > fp-sidebar-panel[selected]>.scroll {
  will-change: transform;
  /* <- auf eigenes Layer setzen für flüssiges scrollen*/
}

fp-tab-page .addtionalActions,
fp-tab-page .globalActions {
  margin: 15px;
}

fp-tab-page .addtionalAction {
  display: flex;
}

fp-tab-page div.addtionalActions .addtionalAction span {
  flex: 1;
  display: flex;
  align-items: center;
  border-radius: 5px;
  padding-left: 4px;
  margin-right: 4px;
}

fp-tab-page div.addtionalActions .addtionalAction {
  height: 32px;
  padding-bottom: 4px;
}

fp-tab-page .addtionalAction:last-child {
  border-bottom: 2px solid rgba(0, 0, 0, 0.2);
}

fp-tab-page .globalAction:last-child {
  border-bottom: 2px solid rgba(0, 0, 0, 0.2);
}
fp-sidebar > fp-sidebar-panel .globalAction:last-child {
  border-bottom: none;
}

fp-sidebar div.globalAction, fp-sidebar > fp-sidebar-panel .addtionalAction:last-child{
  border-bottom: none;
}

fp-sidebar h2 {
  font: var(--font-medium);
  color: var(--color-menu1-back-hover);
  border-bottom: solid 1px var(--color-sidebar-border);
  padding-bottom: 15px;
}


/* --- Ende Omnipraesenter Header --------------------------- */


/* --- Ende Footer ----------------------------------- */


/* --- Dialog --------------------------------------------- */

table.dialog {
  white-space: normal;
}

body.debugmode table.dialog td {
  border: 1px solid fuchsia !important;
}

.jml_formDialog .dialog-row {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: flex-start; /* Fields sind oben ausgerichtet, da manche unten dran noch Meldungen zeigen*/
  flex-wrap: wrap;
  padding-top: var(--width-spacing-dialog-fieldset-vert, 8px);
  padding-left: var(--width-spacing-dialog-fieldset-horz, 8px);
  padding-right: var(--width-spacing-dialog-fieldset-horz, 8px);
  gap: var(--width-spacing-dialog-fieldset-vert, 8px);
}
.jml_formDialog .dialog-row:last-child {
  padding-bottom: var(--width-spacing-dialog-fieldset-vert, 8px);
}

.dialog-row:has(input.jml_input[type="hidden"]) {
  padding: 0;
}

.jml_formDialog .dialog-row,
.jml_formDialog .dialog-sublist{
  margin: 0 var(--dialog-row-indent, 12px);
}

.jml_formDialog .jml_dialogTbodyStandard .dialog-row:first-child {
  margin-top: 8px;
}

.jml_formDialog .dialog-row .d{
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 200px; /* wenn  zu viele Felder in der Zeile sind, dass keine 200px zustande kommen, bricht es um. GUT! */
}
.jml_formDialog .dialog-row .d.ll { /* leading-label benötigt mehr Breite */
  flex-basis: 300px;
}

.jml_formDialog .dialog-row .d.empty{
  /* keine künstlichen Abstände auf kleinen Displays */
  display: var(--display-of-empty-dialog-cell, initial);
}

/* Bestimmte inputs, die alleine in der Zeile stehen sollten nicht auf die Volle Breite gehen: */
.jml_formDialog .dialog-row .d:first-child:last-child:has(
    fp-field.currencyfield,
    fp-field.date-field,
    fp-field.priorityfield,
    fp-format-string[unit]) {
  flex-grow: 0;
}

.jml_formDialog .dialog-row .d.flex-actionbutton{ flex-grow: 0; flex-basis: max-content;}
.jml_formDialog .dialog-row .d.flex-tiny{ flex-grow: 0; flex-basis: max-content; min-width: 80px;}
/* wie tiny, aber mit Erlaubnis zum Wachsen */
.jml_formDialog .dialog-row .d.flex-small{ flex-grow: 1; flex-basis: max-content; min-width: 80px;}
.jml_formDialog .dialog-row .d.flex-no-grow{ flex-grow: 0; }
.jml_formDialog .dialog-row .d.flex-no-grow-150{ flex-grow: 0; flex-basis: 150px;}
.jml_formDialog .dialog-row .d.flex-no-grow-250{ flex-grow: 0; flex-basis: 250px;}
.jml_formDialog .dialog-row .d.flex-grow-2{ flex-grow: 2; }
.jml_formDialog .dialog-row .d.flex-grow-3{ flex-grow: 3; }

/*@media(max-width: 500px) {*/
/*  .jml_formDialog .dialog-row .d.flex-no-grow{ flex-basis: max-content; !* nicht breiter als nötig *! }*/
/*}*/

.jml_formDialog .dialog-row .d > label:not(:empty) {
  display: inline-block;
  padding: var(--padding-input-vert) var(--padding-input-horz);
  font: var(--font-small);
  color: var(--color-input-label);
  /*background: var(--color-primary-shade-3);*/
  border-radius: 8px;
}

/* Ein freistehendes Label in einem eigentlich "label-above"-Kontext muss wohl eine Überschrift sein*/
.jml_formDialog .dialog-row .d.la > label:not(:empty) {
  font-weight: bold;
}

.jml_formDialog .dialog-row .d.ll {
  display: flex;
  align-items: center;
}
.jml_formDialog .dialog-row .d.ll > label:not(:last-child) {
  width: 120px;
  text-align: right;
}
.jml_formDialog .dialog-row .d.ll:first-child > label {
  flex-shrink: 0;
}
.jml_formDialog .dialog-row .d.ll > fp-field {
  flex-grow: 1;
}
.jml_formDialog .dialog-row .d:focus-within {
  /*border: 1px solid rgb(from currentColor r g b / 80%);*/
}
.jml_formDialog .dialog-row .d:focus-within > label {
  /*color: currentColor;*/
}

.jml_formDialog .dialog-sublist {
  border: 1px solid var(--color-input-border);
  border-radius: var(--border-radius-input);
  padding: var(--width-spacing-dialog-fieldset-vert, 8px) var(--width-spacing-dialog-fieldset-horz, 8px);
  margin: 0 calc(var(--dialog-row-indent, 12px) - 1px);
  margin-top: 20px;
  /*background: var(--color-input-background);*/
}

.jml_formDialog .dialog-sublist .dialog-sublist-column{
  display: flex;
  flex-direction: column;
  gap: calc(var(--width-spacing-dialog-fieldset-vert, 4px) / 2);
}

.jml_formDialog .dialog-sublist .dialog-sublist-column > .d:empty {display: none;}

.jml_formDialog .dialog-sublist h3{
  margin-top: calc(-6px - var(--width-spacing-dialog-fieldset-vert, 8px));
  margin-bottom: 10px;
  font: var(--font-small);
  line-height: 10px;
  font-weight: bold;
  background-color: var(--color-shade-1);
  width: max-content;
}

.jml_formDialog .gui-group table.dialog {
  margin: 10px 10px 10px 28px;
}
.jml_formDialog .centered-dialog table.dialog {
  margin: 10px auto;
}

fp-dialog[mode="content"] .jml_formDialog {min-width: min(85vw, 480px);}



table.jmlActionGuiItems {
  min-width: 200px;
}

@media (min-width: 600px) {
  table.dialogSize1 {  min-width: 100px;}
  table.dialogSize2 {  min-width: 200px;}
  table.dialogSize3 {  min-width: 300px;}
  table.dialogSize4 {  min-width: 400px;}
  table.dialogSize5 {  min-width: 500px;}
  table.dialogSize6,
  table.dialogSize7,
  table.dialogSize8,
  table.dialogSize9,
  table.dialogSize10 {
    min-width: 600px;
  }
}
/* Spalten */

col.dialog-column-1 { width: 160px; }
col.dialog-column-2 { width: 160px; }
col.dialog-column-3 { width: 120px; }
col.dialog-column-4 { width: 160px; }
col.dialog-column-5 { width: 120px; }
col.dialog-column-6 { width: 160px; }

@media screen and (min-width: 1300px) {
  fp-view-wrapper.dialog col.dialog-column-1 { width: 200px; }
}
/* Dialogzelle */

td.d {
  padding: 4px 10px 4px 2px;
}

.mobile-device td.d{
  vertical-align: bottom;
}

table.dialog-mobile,
fp-expander table.dialog-mobile {
  margin-left:10%;
  width: 80%;
  margin-right: auto;
}

@media screen and (max-width: 500px) {/*mobile*/
  col.dialog-column-1 { width: 80px; }
  col.dialog-column-2 { width: 160px; }
  col.dialog-column-3 { width: 80px; }
  col.dialog-column-4 { width: 160px; }
  col.dialog-column-5 { width: 80px; }
  col.dialog-column-6 { width: 160px; }

  td.d {
    padding: 4px 6px 4px 2px;
  }

  fp-expander table.dialog {
    margin: 4px;
  }

  table.dialog-mobile,
  fp-expander table.dialog-mobile {
    margin-left:5%;
    width: 90%;
    margin-right: auto;
  }
}

@media screen and (max-width: 399px) {
  col.dialog-column-1 { width: 80px; }
  col.dialog-column-2 { width: 100px; }
  col.dialog-column-3 { width: 80px; }
  col.dialog-column-4 { width: 100px; }
  col.dialog-column-5 { width: 80px; }
  col.dialog-column-6 { width: 100px; }

  td.d {
    padding: 4px 3px 4px 1px;
  }
}

/*td.d:last-child,*/

td.d.nopadding,
td.d.nopaddingright {
  padding: 2px 2px 2px 2px;
}

td.valigntop {
  vertical-align: top;
}

td.maxheight {
  height: 100%;
}

.jml_dialogTbodyStandard tr {
  height: 30px;
}

.detailmanager td.tmplWorkarea>div.boxarea .boxsegmentcontent {
  padding: 0;
}

fp-tab-container.subview iframe.jriframe,
.box_dialog iframe.jriframe,
.box_dialog div.finrechtml div.iframe {
  height: calc(100vh - 240px);
  /*min-height: 1207px; /* wer hat SO einen Monitor?!?*/
  /* bei großen leftareas siehts sonst doof aus */
  /*width: 906px;*/
  /*border: 1px solid;*/
  /*align: center;*/
  /*box-shadow: 2px 2px 4px #666;*/
  /*margin: 10px;*/
  width: 100%;
  border: 0;
}

.box_dialog div.finrechtml iframe.jriframe,
.box_dialog div.finrechtml div.iframe {
  width: 906px;
}

.box_dialog div.finrechtml div.iframe img {
  max-height: 1207px;
  max-width: 906px;
}

iframe.jriframe span {
  font-family: sans-serif !important;
}

div.butpdfdraft {
  padding: 5px 0 0 10px;
  width: 906px;
}

div.finrecshowtab {
  background: none repeat scroll 0 0 #F2F2F2;
  padding: 20px;
}

div.finrecshowtab div.butpdfdraft {
  width: 906px;
  height: 40px;
  text-align: right;
}

.dialog td.label {
  text-align: right;
}

.dialog td.label,
.dialog label {
  font: var(--font-input-label);
}
.dialog td.label:not(.center, .left),
.dialog td:not(.center, .left) label {
  padding: 1px 5px 1px 2px
}

.dialog .areaheader label,
.dialog .label.labelbig label{
  --font-input-label: var(--font-medium);
  font: var(--font-input-label);
  font-weight: bold;
}

.dialog .label.labelbig {
  font-weight: bold;
}

.dialog td.label img {
  line-height: 14px;
  vertical-align: text-bottom;
  height: 16px;
  width: auto;
}

.dialog td.addinfo {
  cursor: default;
  max-width: 429px;
  /* This is magic I (max-width:400px + padding-left:4px + padding-right:24px + border-right:1px ) */
}

.dialog td.addinfo span.addinfocontent {
  display: block;
  font-size: 10px;
  text-align: left;
  padding: 4px 4px 4px 24px;
  margin-top: -15px;
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  float: left;
  /* This is border magic */
}

.dialog td.addinfo span.addinfocontent:hover {
  transition: all 0.8s ease-in 0.0s;
  max-width: 2000px;
}

.dialog td.addinfo span.addinfoindividual {
  background: url("../form/base/addinfo_pers.svg") no-repeat left center;
}

.dialog td.addinfo span.warn {
  color: #f76419;
}


/* --- Ende Dialog --------------------------------------------- */
/* ----------------- reportdialoge -------------------------*/
/* ----------------- ende reportdialoge --------------------*/

div.projectNavigationBox {
  padding: 2px;
}

div.projectNavigationBox div {
  white-space: nowrap;
}

div.projectNavigationBox div.inner {
  padding: 0 2px 2px 4px;
}

div.projectNavigationBox div.inner div {
  overflow: hidden;
  text-overflow: ellipsis;
}

div.projectNavigationBox .jmlImage:first-child {
  width: 16px;
  height: 16px;
  vertical-align: text-bottom;
  margin-right: 6px;
}

div.projectNavigationBox a {
  text-decoration: none !important;
}

div.projectNavigationBox a.denied {
  color: #555555 !important;
}


/* --- Testaccount request --------------------------------- */

#request td {
  padding-top: 5px;
  padding-bottom: 5px;
}


/* --- Popup-Hilfe---------------------------------- */

.configpopup table.dialog {
  min-width: 0;
}

.tundra #helppopupdiv.jml_formDialog p {
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);
}

.tundra #helppopupdiv.jml_formDialog p strong {
  color: rgba(0, 0, 0, 1);
  font-size: 13px;
}

.tundra #helppopupdiv.jml_formDialog div.about {
  padding-left: 4px;
}


/* --- Stopwatch -------------------------------------- */


/* Dunkelblau     Blau     Hellblau */


/*  var(--color-main-font);    #73A7D0;     #D9ECFF; */


/*table.stopwatch{
  height:auto;
  width:auto;
  height:38px;
  border: 3px solid #73A7D0;
  background-color: #FFF;
  margin: 2px 0px 0px 0px;
  table-layout:fixed;
  border-spacing:0px;
} */

span.stopwatchbig {
  padding: 2px 7px 2px 7px;
  display: block;
}

img.swinline {
  margin-bottom: -1px;
  margin-top: 1px;
}

table.stopwatch {
  table-layout: fixed;
  border-spacing: 0;
}

table.stopwatch td.swleft {
  padding: 0 0 0 2px;
  width: 1px;
}

table.stopwatch td.swcenter {
  padding: 0 1px 0 0;
  vertical-align: middle;
  text-align: center;
}

table.stopwatch td.swright {
  width: 10px;
  padding: 0 2px 0 0;
  vertical-align: middle;
  text-align: right;
}

span.stopwatch {
  min-width: 32px;
  line-height: 28px;
  display: inline-block;
  text-align: left;
  /* gegen "Zappeln" der Uhrzeit */
}

span.stopwatch.containsHours {
  min-width: 60px;
}

div.swstopper {
  display: inline;
  padding-left: 20px;
  padding-top: 4px;
  margin-left: 5px;
  background-image: url(../entityaction/general_action_stopwatch_start.svg);
  background-repeat: no-repeat;
}

div.swstopper:hover {
  background-image: url(../entityaction/general_action_stopwatch_stop.svg);
  background-repeat: no-repeat;
  cursor: pointer;
}


/* --- Allgemeine preshow in einem Boxsegment --------------------------------- */


/*   Dunkelblau     Blau      Hellblau     */


/*  var(--color-main-font);     #73A7D0;     #D9ECFF;     */

.dialogpreshow {
  margin: 0;
  padding: 0 0 0 0;
  color: #000000;
  font-size: 11px;
}

.visitenkarte h1 {
  color: var(--color-main-font);
  font-size: 14px;
  font-weight: bold;
  margin: 0;
  padding: 0;
}

.visitenkarte h2 {
  color: var(--color-main-font);
  font-size: 12px;
  margin: 0;
  padding: 0;
}

.visitenkarte a {
  color: var(--color-main-font);
}

.visitenkarte a.grey {
  color: #888;
}

.visitenkarte {
  margin: 0;
  padding: 4px;
  font-size: 11px;
  cursor: default;
  height: 100%;
  box-sizing: border-box;
  min-width: calc(var(--width-leftarea) - 8px);
  /*box-shadow: 1px 1px 2px #333;*/
}

a.loading, .visitenkarte.loading{
  filter: var(--disable-backdrop-filter, blur(0.5px));
  opacity: 0.75;
  pointer-events: none;
}

@keyframes loadingannotation {
    0% {transform: scaleX(0.2); transform-origin: 1%; }
   50% {transform: scaleX(0.1); transform-origin: 50%; }
  100% {transform: scaleX(0.2);transform-origin: 100%;}
}
a.loading::after, .visitenkarte.loading::after{
  display: block;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--color-accent);
  transform-origin: 2%;
  animation-duration: 500ms;
  animation-timing-function: linear;
  animation-name: loadingannotation;
  animation-iteration-count:infinite;
}

.visitenkarte img.avatar {
  height: 32px;
  width: 32px;
}

.visitenkarteLabeled {
  position: relative;
  padding-left: 10px;
  width: 234px;
}

.visitenkarte_big {
  width: 100%;
  border-bottom: 0 solid #E2DEDE;
  border-right: 0 solid #E2DEDE;
  border-left: 0 solid #E9E9E9;
  border-top: 0 solid #E9E9E9;
}

.tmplLeftarea .visitenkarte {
  border-color: #fff;
}

.visitenkarte .header {
  font: var(--font-small);
  line-height: 10px;
  margin: 0;
  padding: 0;
  min-height: 24px;
}

.visitenkarte .header h1 {
  color: var(--color-main-font);
  font-size: 14px;
  margin: 0;
  padding-bottom: 2px;
}


/* --- workloadpopup --- */

table.workloadDailyReport {
  font-size: 12px;
  line-height: 20px;
  width: 100%;
}

table.workloadDailyReportPopup {
  font-size: 12px;
  line-height: 20px;
  width: auto;
  background-color: #F9F9F9;
}

table.workloadDailyReport th {
  font-size: 14px;
  color: #003366;
  font-weight: bold;
  white-space: nowrap;
  text-align: center;
  border: 0;
}

table.workloadDailyReport td.wdr_amount,
table.workloadDailyReport td.wdr_action {
  width: 30px;
  padding: 0 5px;
  text-align: right;
}

table.workloadDailyReport td.wdr_summary {
  font-size: 10px;
  color: #003366;
  white-space: nowrap;
  text-align: center;
  font-weight: bold;
  border-top: 1px solid #CCC;
}

table.workloadDailyReportPopup td span.wdr_project {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  max-width: 500px;
}

table.workloadDailyReport td span.wdr_amount {
  font-weight: bold;
  white-space: nowrap;
}


/* --- FORUM --- */

span.forumlastpostinfo {
  line-height: 16px;
  color: var(--color-main-font);
  font-weight: bold;
  white-space: nowrap;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}

span.forumlastpostinfo img {
  vertical-align: bottom;
  margin-right: 2px;
  width: 16px;
  height: 16px;
}

table.forumrecord {
  width: 100%;
}

table.forumposition {
  width: 100%;
  margin-top: 1px;
}

.forumposition tr.status,
td.forum_img,
td.forum_attach {
  /* background-color: #ddd; */
}

.forumposition tr.status {
  font: var(--font-small);
  color: #369;
}

td.forum_content,
td.forum_img,
td.forum_attach {
  padding-top: 2px;
  padding-bottom: 2px;
}

td.forum_attach {
  width: 140px;
  padding: 0 5px;
}

td.forum_img {
  width: 128px;
  text-align: center;
}

td.forum_img img {
  max-width: 128px;
  max-height: 64px;
}

td.forum_content {
  padding-left: 5px;
}

div.forum_status {
  color: #003366;
  font: var(--font-small);
  white-space: nowrap;
  height: 12px;
  margin-bottom: 2px;
  text-align: left;
}

table.listbody tr.pfForumCluster {
  text-align: left !important;
}

table.listbody tr.pfForumCluster strong {
  font-size: 14px;
}

table.listbody tr.pfForumCluster td.treestructure {
  padding: 5px;
}

table.listbody tr.pfForumCluster td.treestructurecaption {
  line-height: 12px;
  color: var(--color-main-header);
}

table.listbody tr.pfForum {
  height: 32px;
}

td.typeColumn {}

div.pollData div.descr {
  margin: 8px 0 8px 8px;
  max-height: 54px;
  max-width: 234px;
  overflow: hidden;
}

.postcountoverlay {
  vertical-align: middle;
  position: relative;
}

.postcountoverlay span.topic {
  display: inline-block;
  position: absolute;
  /* vertikal zentrieren */
  top: 50%;
  height: 0;
  line-height: 0;
  /* horz zentrieren*/
  left: 1px;
  width: 100%;
  text-align: center;
}

.postcountoverlay span.topic {
  color: #EEF;
  text-shadow: 1px 1px 2px #036;
  font-size: 15px;
  font-weight: bold;
}

.postcountoverlay span.poll {
  display: none;
}

td.calendarpolllist {}

td.calendarpolllist span:last-child {
  display: block;
  margin-top: 3px;
  max-height: 24px;
  max-width: 234px;
  line-height: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}

td.newPostNotificator {
  vertical-align: top;
}

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

div.newPostNotificatorRibbon {
  height: 50px;
  width: 50px;
  position: absolute;
  top: -2px;
  right: -1px;
  /*border: 1px solid red;*/
  overflow: hidden;
  text-align: center;
}

div.newPostNotificator span.newPostNotificatorCaption {
  display: inline-block;
  width: 75px;
  margin-top: 5px;
  height: 16px;
  text-align: center;
  font-size: 16px;
  line-height: 18px;
  color: #000;
  font-weight: bold;
  transform: rotate(45deg);
  box-shadow: 0 0 3px #999;
  background: linear-gradient(-45deg, #f9c667 20%, #f79621 80%);
  /* W3C */
}

.boxsegment .page_lastPost {
  min-height: 130px;
  padding: 10px;
}

.boxsegment .page_lastPost>table {
  margin: auto;
}


/* --- Kosten / Reisekosten --------------------------------- */

.card_reminder h1 {
  text-align: center;
  color: #666;
}

.card_reminder p.countdown {
  font-size: 24px;
  line-height: 26px;
  text-align: center;
  font-weight: bold;
  color: #000;
  margin: 5px 0 0 0;
}

.card_reminder p.countdownactive {
  color: #990000;
}

.card_reminder p.countdownsent {
  color: var(--color-main-font);
}

.card_reminder p.countdownpending {
  color: #009900;
}

.card_reminder p.target {
  font: var(--font-small);
  line-height: 10px;
  text-align: center;
  color: #000;
}


/* --- Kosten / Reisekosten --------------------------------- */

.card_trip {
  padding-top: 6px;
  min-height: 48px;
  position: relative;
}

.card_trip .expRecPurpose {
  margin-bottom: 6px;
}

.jml-tile .card_trip .expRecStatus {
  text-align: center;
  position: absolute;
  top: 30px;
  width: 80%;
  /* Zentrum eher links*/
}

.card_trip .expRecBillable {
  text-align: right;
}

.card_trip .expenseRecordStatus {
  transform: none;
}

.jml-tile .pf-ps-maincontent,
.jml-tile .card_trip {
  height: 100%;
}

.jml-tile .card_trip {
  padding-left: 6px;
  padding-right: 6px;
}

.jml-tile .card_trip .expensePositionBillingStatus {
  position: absolute;
  bottom: 4px;
  left: 6px;
  right: 6px;
  width: calc(100% - 12px);
}


/* --- Issuepreshow --------------------------------- */

.card_issue .logo {
  float: left;
}

.logoright {
  float: right;
}

.card_issue h1 {
  font-size: 12px;
  line-height: 16px;
  font-weight: bold;
  padding: 10px 0 10px 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card_issue p {
  margin: 2px;
}

.card_issue .details {
  max-height: 140px;
  overflow: hidden;
  font-size: 13px;
  line-height: 15px;
  margin-top: 4px;
  text-overflow: ellipsis;
}

.card_issue .attributes {
  text-align: center;
  margin-top: 10px;
  padding-top: 5px;
}

.card_issue p.attr {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 2px;
  margin: 2px;
  background-position: 3px;
  background-repeat: no-repeat;
  display: inline-block;
  border-radius: 14px;
  height: 20px;
  color: var(--color-card-font);
  font-weight: bold;
  font-size: 14px;
  line-height: 18px;
  border:2px solid currentColor;
  --icon-size: 16px;
}

.card_issue p.attr fp-inline-svg {
  vertical-align: text-bottom;
}

.card_issue_new {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-around;
  padding: 4px;
  height: 100%;
}

.card_issue_new .details {
  min-height: 20%;
  opacity: 0.9;
  position: relative;
  max-height: 97px;
}

  /* --- CRMActivity --------------------------------- */

table.card_crmactivity_header {
  width: 100%;
  border-bottom: 1px dashed var(--color-main-font) !important;
}

tr.card_crmactivity_header {
  border-bottom: 1px dashed var(--color-main-font) !important;
}

td.card_crmactivity_header_center {
  padding-left: 3px;
  width: 80%;
  text-align: left;
}

td.card_crmactivity_header_right {
  width: 1%;
  text-align: right;
}

.card_crmactivity h1 {
  font-size: 12px;
  line-height: 16px;
  font-weight: bold;
  padding: 0 0 3px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card_crmactivity h2 {
  font-size: 10px;
  font-weight: normal;
  padding: 0 0 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card_crmactivity p {
  margin: 2px;
}

.card_crmactivity .details {
  max-height: 78px;
  overflow: hidden;
  font-size: 11px;
  line-height: 13px;
  margin-top: 4px;
}


/* --- Workdaypreshow --------------------------------- */


/* Dunkelblau     Blau     Hellblau */


/*  var(--color-main-font);    #73A7D0;   #D9ECFF; */

.workdaystatusbox {
  padding: var(--default-padding);
}

.workdaystatusbox button {
  margin-top: var(--default-padding);
  width: 100%;
}

.workdaystatusbox table {
  width: 100%;
  padding-left: 2px;
  padding-right: 2px;
  /*background-color: #D9ECFF;*/
}

.workdaystatusbox table.statusbox {
  width: 100%;
  border-bottom: 1px solid var(--color-main-font) !important;
}

.workdaystatusbox th {
  color: var(--color-main-font);
  font-weight: normal;
}

.workdaystatusbox th:first-child,
.workdaystatusbox td:first-child{
  padding-left:  var(--width-componentpadding);
}

.workdaystatusbox th:last-child,
.workdaystatusbox td:last-child{
  padding-right:  var(--width-componentpadding);
}

.workdaystatusbox td.errorbox {
  text-align: center;
  vertical-align: middle;
  height: 44px;
  margin: 0;
  padding: 0;
  line-height: 40px;
}

.workdaystatusbox td.additionalwarning {
  width: 100px;
  padding-left: 6px;
  --icon-size: 32px;
}

.workdaystatusbox td.additionalwarning fp-inline-svg{
  --icon-size: 16px;
}

.boxsegment .workdaystatusbox td.attendance {
  color: var(--color-main-font);
  font-weight: normal;
}

.workdaystatusbox img.float,
td.infocol img.float {
  margin: 0 2px 0 2px;
  vertical-align: middle;
  float: left;
}

.workdaystatusbox img {
  margin: 0 2px 0 2px;
  vertical-align: middle;
}

.workdaystatusbox .jmlAction img {
  width: 24px;
  height: 24px;
}

.workdaystatusbox div.sick,
.workdaystatusbox div.vacation,
.workdaystatusbox div.holiday,
td.infocol div.sick,
td.infocol div.vacation,
td.infocol div.holiday {
  margin: 2px 0;
  height: 16px;
}

.workdaystatusbox div.sick,
td.infocol div.sick {
  /*background-color: #E9D1D1*/
  background-color: var(--color-tint-sick);
}

.workdaystatusbox div.vacation,
td.infocol div.vacation {
  /*background-color: #F0F195;*/
  background-color: var(--color-tint-vacation);
}

.workdaystatusbox div.holiday,
td.infocol div.holiday {
  /*background-color: #FEDFB9*/
  background-color: var(--color-tint-holiday);
}

.workdaystatusbox span.error {
  font-weight: bold;
  font-size: 26px;
  color: var(--color-status-red);
}

.workdaystatusbox span.estimated {
  font-weight: bold;
  font-size: 26px;
  color: #73A7D0;
}


/* --- Filepreshow --------------------------------- */

table.preshowdetails {
  color: #999999;
  font-size: 10px;
}

.card_file {
  font-size: 12px;
  padding: 4px;
  color: var(--color-card-font);
  position: relative;
}

.dark .card_file,
.page-background .card_file,
.jml-imagetile .card_file {
  color: #FFF;
  font-weight: bold;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.75);
}

.card_file fieldset {
  color: var(--color-card-header);
  font: var(--font-small);
  border: 1px solid #999;
  padding: 2px;
  line-height: 16px;
  margin: 0 0 5px 0;
}

.card_file fieldset a {
  color: var(--color-primary);
  font: var(--font-small);
  line-height: 16px;
}

.card_file fieldset a:hover {
  text-decoration: underline;
}

.card_file fieldset legend {
  color: var(--color-card-header);
  margin-left: 4px;
}

.fileps_mimetype {
  position: absolute;
  top: 120px;
  left: 4px;
  right: 4px;
  height: 32px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fileps_linkicon h1 {
  padding-top: 3px;
  margin-top: 0 !important;
}

.fileps_filesize {
  text-align: right;
  margin-bottom: 5px;
  margin-top: 5px;
}

.fileps_details {
  /*text-align: left;
  position: absolute;
  top: 160px;
  left: 4px;
  right: 4px;
  height: 32px;
  overflow: hidden;
  text-overflow: ellipsis;*/
}

.fileps_thumb {
  text-align: center;
  padding-top: 16px;
}

.fileps_thumb a {
  display: inline-block;
  cursor: pointer;
  width: 64px;
  height: 64px;
  margin: 0 auto;
  text-align: center;
  line-height: 64px;
  font-size: 32px;
  border-radius: 50%;
  background-color: rgba(120, 120, 120, 0.25);
  color: #FFF;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.fileps_thumb a:hover {
  background-color: rgba(80, 80, 80, 0.5);
}

.fileps_path {
  color: #999999;
  font-size: 10px;
  max-height: 32px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jml-imagetile .fileps_thumb {
  visibility: hidden;
}

.fileps_cre {
  text-align: right;
}

.fileps_w {
  text-align: right;
  bottom: 0;
  right: 0;
}

.fileps_vers {
  /*white-space: nowrap;
  position: absolute;
  bottom: 0;
  left: 0;*/
}

.fileps_flexhori{
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}


/* --- Ticketpreshow --------------------------------- */

.ticketUnderlayContainer .jmlImageOverlay {
  border-radius: 50%;
  border: 1px solid #FFF;
  margin-top: -1px;
  margin-left: -1px;
  background: #FFF;
  position: absolute;
  bottom: auto;
  top: 25%;
  right: auto;
  left: 25%;
  width: 50% !important;
  height: 50% !important;
}

.card_ticket {
  /* Breite der visitenkarten ist 240px - insgesamt!*/
  background-color: var(--color-card-background);
  background-repeat: no-repeat;
  padding: 0;
  position: relative;
}

.card_ticket p {
  font-size: 10px;
  line-height: 12px;
  color: var(--color-main-font);
  margin-top: 0;
}

.card_ticket p.smallhint {
  /* genau 4 Zeilen Text + tiefe Buchstaben wie g,q,y*/
  line-height: 11px;
  max-height: 44px;
  overflow: hidden;
  text-align: right;
  position: relative;
  padding: 0;
}

.card_ticket hr {
  border: 0;
  border-top: 1px dashed #cccccc;
}


/* CRM Big Preshow für die Vorgänge */

.crmbps_content {
  overflow: hidden;
  max-height: 100px;
  margin-top: 5px;
}


/* Standardpreshow */

.card_ticket table.ticketps_main {
  width: 100%;
  table-layout: fixed;
  margin: 0;
  position: relative;
}

.card_ticket table.ticketps_main.extended {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  margin-bottom: 6px;
}

.ticketps_main .row1 td {
  height: 50px;
  vertical-align: top;
  padding-top: 4px;
}

.ticketps_main .row2 td {
  height: 40px;
  vertical-align: middle;
}

.ticketps_main .row3 td {
  height: 52px;
  vertical-align: bottom;
}

.ticketps_main.with-sla .row3 td {
  height: 38px;
  vertical-align: bottom;
}

.card_ticket table.ticketps_main tr:last-child td {
  padding-bottom: 2px;
}

.ticketps_typ {
  width: 8px;
  position: absolute;
  top: 0;
  left: 0;
  height: 154px;
}

.jml-tile .hiddenInTiles,
.jml-tile .ticketps_typ,
.jml-tile .ticketps_main h2 {
  display: none;
}

.jml-tile .content .flexContainer {
  margin: 5px;
}

.card_ticket .entityps td:first-child {
  padding-left: 8px;
}

.ticketps_main td:first-child {
  padding-left: 8px;
}

.ticketps_main td:last-child {
  padding-right: 4px;
}

.ticketps_id {
  opacity: 0.75;
  font-size: 11px;
  line-height: 12px;
  padding-bottom: 8px;
}

.ticketps_cre,
.ticketps_w {
  opacity: 0.75;
  font-size: 10px;
  line-height: 10px;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 50%;
}

.ticketps_cre {
  padding-right: 20px;
  text-align: left;
}

.ticketps_respInt,
.ticketps_respExt {
  color: var(--color-card-header);
  display: block;
}

.ticketps_workInt,
.ticketps_workExt {
  display: block;
  color: #569450;
  white-space: nowrap;
  font-weight: bold;
}

.ticketps_w {
  padding-right: 4px;
  padding-left: 16px;
  text-align: right;
}

.ticketps_cat {
  font-size: 10px;
  line-height: 13px;
  color: var(--color-main-font);
}

.ticketps_project {
  color: var(--color-main-font);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
}

.ticketps_finrec {
  color: var(--color-main-font);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  padding: 6px 0 0 0;
}

.ticketps_finrec h2 img.intextline {
  margin-bottom: -2px;
}

.visitenkarte .ps_info-row,
.visitenkarte .ps_categories {
  display: inline;
  font-size: 10px;
  line-height: 16px;
  text-align: left;
}

.visitenkarte .ps_info-row {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 16px;
}

.visitenkarte .ps_categories h5 {
  margin: 0 0 0 -4px;
  font: var(--font-small);
}

.visitenkarte .ps_categories .cat {
  background-color: var(--color-shade-2);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
  padding: 0 2px;
  margin-right: 3px;
  border-radius: 4px;
  height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticketps_wd {
  color: var(--color-shade-4);
  font-size: 10px;
  margin-top: 15px;
}

.ticketps_ub {
  display: inline-block;
  height: 12px;
  width: 16px;
  text-align: center;
  float: right;
}

.ticketps_ub span {
  display: inline-block;
  position: relative;
  top: -2px;
  width: 16px;
  height: 16px;
  background-size: 16px;
  background-position: center center;
  background-repeat: no-repeat;
  /*border-radius:50%;*/
  background-color: transparent;
}

.ticketps_ub_obs span {
  background-image: url("../legacygeneral/status_none_eye.svg");
}

.ticketps_ub_wait span {
  background-image: url("../legacygeneral/status_none_wait.svg");
}

.ticketps_ub_ur span {
  background-image: url("../legacygeneral/status_unread.svg");
}

.ticketps_separator {
  height: 52px;
  top: 50px;
  left: 0;
  width: 100%;
  text-align: center;
  overflow: hidden;
  position: absolute;
  z-index: 0;
}

.ticketps_separator div.statusArrow {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -21px;
  margin-left: -21px;
  height: 28px;
  width: 28px;
  border: 3px solid #FFF;
  box-shadow: 0 0 0 1px var(--color-tint-contrast-25);
  padding: 1px;
  border-radius: 50%;
  background: #FFF;
  transform: rotate(-45deg);
}

.ticketps_separator div.statusArrowLeft {
  border-top-left-radius: 0;
}

.ticketps_separator div.statusArrowRight {
  border-bottom-right-radius: 0;
}

.ticketps_separator > fp-inline-svg,
.ticketps_separator span.jmlImageContainer {
  position: absolute;
  left: 50%;
  top: 50%;
  --icon-size: 32px;
  margin-top: -20px;
  margin-left: -20px;
  border: 1px transparent;
  padding: 1px;
  border-radius: 50%;
  background: transparent;
}

.ticketps_separatorline {
  stroke-width: 1px;
  stroke: var(--color-tint-contrast-25);
  fill: transparent;
}

.visitenkarte .ticketps_main h2,
.ticketps_stateSummary {
  color: var(--color-main-font);
  font-size: 16px;
  line-height: 22px;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticketps_stateSummary {
  font-size: 20px;
  line-height: 22px;
}

.visitenkarte .ticketps_main h2 {
  margin: 0;
}

.card_ticket .ticketps_stateSummary td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  color: var(--color-shade-none-contrast);
}

.card_ticket .ticketps_stateSummary td.escalationInfo {
  white-space: nowrap;
}

.card_ticket .ticketps_stateSummary td:last-child {
  text-align: right;
  white-space: normal;
}

.card_ticket .ticketps_stateSummary td[colspan="2"] {
  text-align: left;
  white-space: normal;
}

.card_ticket .ticketps_stateSummary td.usercomment[colspan="2"] .card_ticket .ticketps_stateSummary td.usercomment {
  white-space: normal;
  text-align: right;
}

.ticketps_img {
  text-align: left;
  padding-left: 10px;
  position: relative;
  top: -40px;
}

.card_ticket .ticketps_stateSummary td.ticketps_age,
.card_ticket .ticketps_stateSummary td.ticketps_ageok {
  color: var(--color-status-red);
}

.ticketps_age td:last-child {
  text-align: right;
}

.ticketps_age .due {
  font-size: 50%;
}

.card_ticket .ticketps_ageok {
  color: var(--color-main-font);
}

.ticketps_ageok td:last-child {
  text-align: right;
}

.card_ticket .ticketps_age .responseQM {
  display: inline-block;
  text-align: center;
  border: 1px solid var(--color-status-red);
  width: 20px;
  height: 20px;
  font-size: 16px;
  line-height: 20px;
  border-radius: 50%;
  margin: 2px 4px;
}

.ticketps_bot {
  border-bottom: 1px solid #cccccc;
  height: 1px;
}


/* BIG Preshow für Tickets*/

.ticketbps {
  color: var(--color-main-font);
}

.ticketbps_table {
  width: 100%;
  margin-top: 5px;
}

.ticketbps_tr {}

.ticketbps_tdright {
  width: 50%;
  text-align: right;
  font-size: 10px;
}

.ticketbps_tdleft {
  font-size: 11px;
}

.ticketbps_field {
  color: var(--color-main-font);
  opacity: .7;
}

.ticketbps_value {}

.ticketbps_subject {
  font-weight: bold;
  font-size: 12px;
  margin-top: 5px;
  padding-bottom: 5px;
  border-bottom: 1px dashed #cccccc;
}

.ticketbps_content {
  overflow: hidden;
  max-height: 160px;
  margin-top: 5px;
}

.ticketps_slaInfo td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  color: var(--color-main-font);
  opacity: .8;
  font-size: 11px;
  line-height: 12px;
  height: 14px;
}


/* SLA-CHART */

div.slaChart {
  height: var(--chart-height, 24px);
  overflow: hidden;
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  width: 80px;
  margin-right: 1px;
}

table.w100 .slaChart,
td.l .slaChart{
  --chart-height: 32px;
  width: auto;
  display: block;
  margin: auto;
}

td.d .slaChart,
td.l .slaChart{
  --chart-height: 16px;
  width: 100%;
}

.sse.info .slaChart{
  --chart-height: 32px;
  width: 140px;
  display: block;

}

.jmlTableSpaceCaption .slaChart{
  --chart-height: 24px;
  width: 140px;
}

.ticketps_slaInfo .slaChart {
  --chart-height: 14px;
  width: 80px;
}

div.slaChart .bar {
  position: absolute;
  height: calc(var(--chart-height) - 6px);
  left: 5px; /** Abstand für den Positions-marker */
  right: 5px;
  top: 6px;
}

div.slaChart .segment {
  position: absolute;
  height: calc(var(--chart-height) - 9px);
  border-left: 0;
  border-right: 0;
  border-top-width: 0;
  border-bottom-width: 3px;
  border-style: solid;
  bottom: 0;
}

div.slaChart .segment:first-child {
  border-left: 1px;
}

div.slaChart .segment div {
  height: 101%; /* gegen Rundungsfehler */
}

div.slaChart .part {
  border-left: 0 none;
}

div.slaChart .future div {
  opacity: 0.125;
}

.ticketps_slaInfo div.slaChart .future div {
  display: none;
}


div.slaChart .positionMarker,
div.slaChart .estimationMarker {
  border-top: 4px solid currentColor;
  border-left: 3px solid transparent;
  margin-left: -3.5px;
  border-right: 3px solid transparent;
  border-bottom: 4px solid currentColor;
  background-color: transparent;
  width: 1px;
  height: calc(var(--chart-height) - 10px);
  position: absolute;
  top:-4px;
}

div.slaChart .positionMarker::after,
div.slaChart .estimationMarker::after {
  content: '';
  width: 0;
  height: 100%;
  border-left: 1px solid currentColor;
}

div.slaChart .estimationMarker {
  opacity: 0.5;
}
div.slaChart .estimationMarker::after {
  border-left: 1px dashed currentColor;
}


div.slaChart .zeroMarker {
  border: 1px solid currentColor;
  background-color: currentColor;
  width: 0;
  height: var(--chart-height);
  padding: 2px 0;
  margin-top:-4px;
  margin-left:-1px;
  position: absolute;
}


/* --- IMPopup/Reminder/IMProcessPreshow --------------------------------- */

@media (min-width: 720px) {
  #imPopupModal {
    min-width: 720px;
  }
}

#impopup.outer {
  padding: 0;
  border-top: solid 1px #ccc;
  margin: 0;
  min-width: 500px;
}

#impopup.impopup,
#ticketprocesspreshow.impopup {
  background-image: url(../entity/im_watermark.svg);
  background-repeat: no-repeat;
  background-position: right 15px bottom;
  background-size: 148px;
}

#impopup.reminder,
#ticketprocesspreshow.reminder {
  background-image: url(../entity/reminder_watermark.svg);
  background-repeat: no-repeat;
  background-position: right bottom 10px;
  background-size: 158px;
}

#ticketprocesspreshow.impopup,
#ticketprocesspreshow.reminder {
  background-color: var(--color-card-background);
}

#impopup div.subject,
#ticketprocesspreshow.outer div.subject {
  margin-top: 15px;
  margin-bottom: 25px;
  font-size: 24px;
  font-style: normal;
  font-weight: 300;
  line-height: 28px;
  color: var(--color-main-font);
}

#impopup div.content,
#ticketprocesspreshow.outer div.content {
  font: 12px monospace;
  margin: 25px 0 15px 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

#impopup div.entityTitle {
  max-width: 500px;
}

#ticketprocesspreshow.outer div.entityTitle {
  max-width: 1100px;
}

#impopup div.entityTitle h1.entityTitleLabel {
  color: var(--color-main-font);
  font-size: 20px;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 28px;
  margin: 0;
  letter-spacing: 0;
  font-style: normal;
  font-weight: 300;
  max-width: 460px;
}

#ticketprocesspreshow.outer div.entityTitle h1.entityTitleLabel {
  color: var(--color-main-font);
  font-size: 20px;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 28px;
  margin: 0;
  letter-spacing: 0;
  font-style: normal;
  font-weight: 300;
  max-width: 1000px;
}

#impopup div.entityTitle span.entityTitleImage,
#ticketprocesspreshow.outer div.entityTitle span.entityTitleImage {
  display: inline-block;
  margin-right: 8px;
  line-height: 26px;
  float: left;
}

#impopup div.entityTitle span.entityTitleImage img,
#ticketprocesspreshow.outer div.entityTitle span.entityTitleImage img {
  vertical-align: text-bottom;
  width: 24px;
  height: 24px;
}

#impopup td.label,
#ticketprocesspreshow.outer td.label {
  width: 10%;
}

#impopup td.labeldate,
#ticketprocesspreshow.outer td.labeldate {
  width: 10%;
  text-align: right;
}

#impopup td.valuedate,
#ticketprocesspreshow.outer td.valuedate {
  padding-left: 35px;
  text-align: right;
  width: 18%;
  white-space: nowrap;
}

#impopup ul.jml_dialogButtons {
  text-align: right;
  list-style: none;
  padding: 0 0;
  margin: 0 0 10px 0;
  display: flex;
  width: 100%;
  align-items: center;
}

#impopup ul.jml_dialogButtons li.button {
  border-top: 1px solid #CCC;
  border-right: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
  border-left: 1px solid #CCC;
  border-radius: var(--border-radius-input);
  height: var(--height-input-button);
  padding: 5px;
  cursor: pointer;
}

#impopup ul.jml_dialogButtons li.left {
  margin-left: 0;
}

#impopup ul.jml_dialogButtons li.split {
  margin-right: auto;
}

#ticketprocesspreshow.outer ul.jml_dialogButtons {
  margin: 10px 0;
}

fp-field.select-appearance-optionbutton,
button.jmlButtonField.button-appearance-optionbutton{
  border-radius: 3px;
  text-align: left;
  font: var(--font-normal);
  padding-left: var(--padding-input-horz);
  justify-content: flex-start;
}
fp-field.select-appearance-optionbutton,
#impopup ul.jml_dialogButtons fp-field {
  min-width: 160px;
  --color-input-background: var(--color-button-back);
  --color-input-font: var(--color-button-font);
  cursor: pointer;
  border: 0 none;
}
#impopup ul.jml_dialogButtons fp-field {
  border-radius: calc(var(--height-input));
  font-weight: var(--font-weight-button, 600);
}
fp-field.select-appearance-optionbutton:hover,
#impopup ul.jml_dialogButtons fp-field:hover {
  --color-input-background: var(--color-button-raised-back);
  --color-input-font: var(--color-button-raised-font);
}

/* --- Ticketprocesspreshow --------------------------------- */

pf-list-view > form > .ticket-summary fp-tab-container.boxsegment ,
pf-list-view > .ticket-summary fp-tab-container.boxsegment {
  /*--height-toolbar: 28px;*/
  /*--color-toolbar-back: var(--color-shade-2);*/
  margin: var(--width-componentspacing);
}

pf-list-view > .ticket-summary fp-tab-container.boxsegment fp-tab-page {
  max-height: none;
  margin: var(--width-componentspacing, 12px);
  margin-bottom: 0;
  box-sizing: border-box;
}

pf-list-view > .ticket-summary .infodialog-content img{
    max-width: 75vw;
    max-height: 40vh;
    object-fit: contain;
}

.ticket-sideview .left-col pf-list-view > .ticket-summary .infodialog-content img{
    max-width: 30vw;
    max-height: 30vh;
    object-fit: contain;
}

#ticketprocesspreshow {
  padding: 0;
}

#ticketprocesspreshow .im-content {
  padding: var(--width-componentspacing);
}

#ticketprocesspreshow.intern {
  margin: 0;
  background: transparent;
  border-width: 1px 0 0 0;
}

#ticketprocesspreshow ul.jml_dialogButtons {
  text-align: right;
  list-style: none;
  padding: 0 0;
  margin: 0;
  font: var(--font-normal);
  color: var(--color-main-header);
}

#ticketprocesspreshow fp-tab-container{
  --bar-background: var(--color-card-background);
  --bar-color: var(--color-card-font);
}

#ticketprocesspreshow fp-tab-page{
  background: var(--color-card-background);
  color: var(--color-card-font);
}

#ticketprocesspreshow ul.jml_dialogButtons .jmlAction img,
#impopup ul.jml_dialogButtons .jmlAction img {
  width: 18px;
  height: 18px;
}

.popupPrint #ticketprocesspreshow div.preshowaccount.ticket,
.popupPrint #ticketprocesspreshow div.preshowaccount {
  margin-top: 0;
}

#ticketprocesspreshow div.preshowaccount.ticket,
#ticketprocesspreshow div.preshowaccount {
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 2px 2px 2px 2px;
  font-size: 24px;
  font-style: normal;
  font-weight: 300;
  line-height: 28px;
}

#ticketprocesspreshow span.jmlImageContainer {
  margin-right: 8px;
}

#ticketprocesspreshow .attacharea span.jmlImageContainer {
  margin-right: 3px;
}

#ticketprocesspreshow .attacharea .ticketpps_attach span.jmlActionIcon {
  margin-right: 3px;
}

#ticketprocesspreshow .attacharea .ticketpps_attach a.jmlAction10 img {
  vertical-align: bottom;
}

#ticketprocesspreshow div.ticket {
  background-image: url(../entity/ticket.svg);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 32px;
}

#ticketprocesspreshow div.sms {
  background-image: url(../entity/message_intern.svg);
  background-repeat: no-repeat;
  background-position: left center;
  padding: 2px 2px 2px 32px;
}

#ticketprocesspreshow div.internal {
  background-image: url(../entity/message_intern.svg);
  background-repeat: no-repeat;
  background-position: left center;
  padding: 2px 2px 2px 32px;
}

#ticketprocesspreshow div.mail {
  background-image: url(../entity/mail.svg);
  background-repeat: no-repeat;
  background-position: left center;
  padding: 2px 2px 2px 32px;
}

#ticketprocesspreshow ul.jml_dialogButtons li,
#impopup ul.jml_dialogButtons li {
  display: inline;
  margin-left: 5px;
}

#ticketprocesspreshow ul.jml_dialogButtons li.left {
  margin-left: 0;
}

#ticketprocesspreshow ul.jml_dialogButtons li.split {
  margin-right: 40px;
}

#ticketprocesspreshow ul.jml_dialogButtons li>a,
#impopup ul.jml_dialogButtons li>a {
  padding: 2px 5px;
}

/*#ticketprocesspreshow ul.preshowactions li>a:hover,*/
/*#impopup ul.preshowactions li>a:hover {*/
/*  border-top: 1px solid #DDD;*/
/*  border-right: 1px solid #AAA;*/
/*  border-bottom: 1px solid #999;*/
/*  border-left: 1px solid #DDD;*/
/*  padding: 5px;*/
/*}*/

.ticketpps_date {
  padding-left: 15px;
  text-align: right;
  width: 110px;
  white-space: nowrap;
}

.ticketpps_label_date {
  width: 100px;
  text-align: right;
}

.ticketpps_label {
  padding-right: 15px;
  width: 40px;
  text-align: right;
}

.ticketpps_type {
  margin-bottom: 5px;
  margin-top: 10px;
  line-height: 24px;
}

.ticketpps_attach {
  display: inline-flex;
  min-width: 160px;
  padding-right: 8px;
  font: var(--font-small);
}

.ticketpps_attach  a{flex-basis: 100%;}

.ticketpps_content {
  font: 12px monospace;
}

div.attacharea~div.attacharea {
  border-left: 1px solid #ccc;
  padding-left: 5px
}

div.attacharea {
  margin-bottom: 15px;
  display: inline-block;
}

div.attacharea .ticketpps_attach img.jmlImage {
  height: 24px;
}

div.attacharea .ticketpps_attach a.fileaccesslink {
  line-height: 24px;
}

div.attacharea .ticketpps_type img {
  height: 24px;
  vertical-align: middle;
  margin-right:2px;
}

.ticketpps_img {
  float: right;
  margin-top: -42px;
}

.mail_conrel {
  line-height: 16px;
  margin-right: 5px;
}

.mail_conrel img {
  vertical-align: top;
  height: 16px;
  width: 16px;
}

.page_container {
  position: fixed;
  bottom: 40px;
  left: 0;
  width: 100%;
  z-index: 10;
  opacity: 0;
  animation: fadein 0.2s ease-in 0.25s 1 forwards;
  pointer-events: none;
}

.page_container>div {
  display: inline-block;
  width: 50%;
}

.page_container .next {
  text-align: left;
}

.page_container .previous {
  text-align: right;
}

.page_container a.jmlAction {
  display: inline-block;
  height: 24px;
  opacity: 0.6;
  background-color: #7a7a83;
  color: white;
  transition: opacity 0.3s ease-out;
  overflow: hidden;
  white-space: nowrap;
  line-height: 24px;
  pointer-events: auto;
}




.page_container a.jmlAction.inaktiv,
.page_container a.jmlAction.inaktiv:hover {
  opacity: 0.15;
}

.page_container a.jmlAction:hover {
  opacity: 1;
}

.page_container .next>a.jmlAction {
  margin: 0 0 0 1px;
  border-radius: 0 12px 12px 0;
  direction: rtl;
}

.page_container .previous>a.jmlAction {
  margin: 0 0 0 auto;
  border-radius: 12px 0 0 12px;
}

.page_container .next>a.jmlAction>.jmlActionLabel {
  margin-left: 8px;
}

.page_container .previous>a.jmlAction>.jmlActionLabel {
  margin-right: 8px;
}

.page_container .next>a.jmlAction>.jmlActionIcon {
  margin: 0 14px 0 6px;
}

.page_container .previous>a.jmlAction>.jmlActionIcon {
  margin: 0 6px 0 14px;
}

.page_container a.jmlAction>.jmlActionLabel,
.page_container a.jmlAction>.jmlActionIcon {
  display: inline-block;
}

.page_container a.jmlAction>.jmlActionIcon>img {
  margin: 0;
}

.page_container a.jmlAction>.jmlActionLabel {
  opacity: 0;
  max-width: 0;
  transition: opacity 0.1s, max-width 0.3s ease-out;
}

.page_container a.jmlAction:hover>.jmlActionLabel {
  opacity: 1;
  max-width: 150px;
  transition: opacity 0.2s 0.2s, max-width 0.3s ease-out;
}

.page_container a.jmlAction.inaktiv:hover>.jmlActionLabel {
  opacity: 0;
  max-width: 0;
}

.page_container a.jmlAction>.jmlImageContainer {
  margin: 0;
}

/* --- SysConfig Preshow ---- */

div.sysconfigps_outer {
  background-color: var(--color-card-background);
  padding: 10px 0;
  height: 80px;
  background-repeat: no-repeat;
  background-position: bottom right;
  background-image: url(../detailmanager/config/back.svg);
  position: relative;
}

div.sysconfigps_logo {
  position: absolute;
}

div.sysconfigps_content {
  left: 8px;
  position: relative;
  top: 48px
}

div.sysconfigps_outer h2 {
  font-size: 12px;
  margin: 4px 8px;
  color: var(--color-card-header);
}

div.sysconfigps_outer h1 {
  font-size: 18px;
  line-height: 24px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 8px;
  color: var(--color-main-font);
}

div.sysconfigps_version {
  position: absolute;
  bottom: 4px;
  left: 6px;
}


/* --- HolidayCalendar Preshow ---- */

div.holcalps_outer {
  height: 88px;
  background-repeat: no-repeat;
  background-position: 167px 18px;
  background-image: url(../holidaycalendar/ps_watermark.svg);
  position: relative;
}

div.holcalps_outer>h1 {
  font-size: 22px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 10px;
  margin-top: 10px;
  color: var(--color-main-font);
}

div.holcalps_inner {
  margin-left: 10px;
  margin-top: 20px;
}

div.holcalps_inner span {
  font-size: 12px;
  margin-left: 2px;
}

div.holcalps_inner_img {
  line-height: 35px;
  height: 40px;
  float: left;
  display: inline;
}

div.holcalps_inner_img img {
  vertical-align: middle;
}

div.holcalps_inner h1 {
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: -2px 0;
  color: var(--color-main-font);
}


/* --- Benutzergruppe ---- */

.card_benutzergruppe h2.grouptype {
  font-size: 10px;
  line-height: 16px;
  color: var(--color-card-font);
  font-weight: normal;
}

.card_benutzergruppe h2.grouptype .jmlImageContainer {
  float: left;
}

.card_benutzergruppe h1 {
  font-size: 16px;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 0 0;
  padding-bottom: 20px;
  font-weight: bold;
  color: #ebb507;
}

.card_benutzergruppe p {
  margin: 0;
  padding: 5px 0 5px 0;
  line-height: 16px;
  font-size: 12px;
  color: var(--color-card-font);
}

.card_benutzergruppe h2.stats {
  line-height: 16px;
  font-size: 12px;
  color: #555;
  border-top: 1px solid #999;
  border-right: 1px solid #999;
  border-left: 1px solid #999;
  height: 3px;
  margin: 10px 0 0 0;
  padding: 0 5px;
  overflow: visible;
}

.card_benutzergruppe h2.stats span {
  background-color: white;
  display: inline-block;
  position: relative;
  top: -8px;
  left: 0;
  padding: 0 3px;
  letter-spacing: 1px;
}

.card_benutzergruppe h2.stats span.countm,
.card_benutzergruppe h2.stats span.countp {
  float: right;
  padding-left: 20px;
  background-repeat: no-repeat;
  background-position: 2px 0;
}

.card_benutzergruppe h2.stats span.countp {
  background-image: url(../form/base/base_checkbox_readonly_checked.png);
}

.card_benutzergruppe h2.stats span.countm {
  background-image: url(embed/relation2crm.png);
}

.card_benutzergruppe p.members {
  /*  border-bottom: 1px solid #999;
  border-right: 1px solid #999;
  border-left: 1px solid #999;*/
}


/* --- Forum ---- */

.card_forumrecord .pollData {
  font-size: 10px;
  line-height: 14px;
}

.card_forumrecord .header {
  line-height: 16px;
  font-size: 11px;
}

.card_forumrecord .header img {
  vertical-align: text-bottom;
  width: 16px;
  height: 16px;
  margin: 0 3px;
}

.card_forumrecord .title img {
  width: 32px;
  height: 32px;
}

.card_forumrecord .header a {
  line-height: 16px;
}

.card_forumrecord .header .title {
  height: 32px;
  width: 100%;
}

.card_forumrecord .header .title td:first-child {
  width: 1px;
}

.card_forumrecord .postcountoverlay {
  float: left;
  margin-right: 3px;
}

.card_forumrecord .header .title h1 {
  line-height: 16px;
  font-size: 16px;
  font-weight: bold;
  vertical-align: middle;
}


/* --- Visitenkarte--------------------------------- */

.card_customer table.header {
  width: 100%;
  table-layout: fixed;
  /*height:32px;*/
}

.card_customer table.header td,
.card_customer table.header td.name h1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  line-height: 18px;
  margin: 0;
  padding: 0;
}

.card_customer table.header td.name h1.passive::after {
  content: '';
  height: 16px;
  width: 16px;
  position: fixed;
  display: inline-block;
  margin-left: -4px;
  margin-top: -4px;
  background: url(../legacygeneral/status_red_x.svg) no-repeat center;
  background-size: contain;
}

.card_customer table.header td h1 a {
  font-family: 'Calibri', 'Helvetica', sans-serif;
  color: var(--color-card-header);
  font-size: 18px;
}

.card_customer table.header td.nextCheck {
  width: 32px;
  text-align: center;
}

.card_customer table.header td.name {
  width: auto;
  text-align: center;
}

.card_customer table.header td.name p.division {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 12px;
  text-align: center;
  margin-top: -2px;
}

.card_customer table.header td.name .path {
  font: var(--font-small);
  letter-spacing: 1px;
  padding: 0 2px;
}

.card_customer table.header td.icons {
  width: 22px;
  text-align: center;
  line-height: 10px;
}

.card_customer table.header td.icons p {
  width: 100%;
  text-align: right;
}

.card_customer table.header td.icons img {
  width: 22px;
  height: 22px;
}

.card_customer table.header td.icons .custoid {
  color: var(--color-card-font);
  font-size: 8px;
}

.card_customer .mainContact {
  text-align: center;
}

.card_customer .mainContact .picture {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  margin-top: 4px;
}

.card_customer .mainContact .picture img {
  max-height: 128px;
  max-width: 200px;
}

.card_customer .address {
  font-size: 12px;
  line-height: 14px;
  font-family: Franklin Gothic Medium, verdana, sans-serif;
  color: var(--color-card-font);
  opacity: 0.8;
  margin: auto;
  padding-top: 2px;
  text-align: center;
  width: 95%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.addressdetailed img {
  float: left;
  height: 16px;
  width: 16px;
}

.addressdetailed span {
  display: block;
  text-align: left;
  line-height: 12px;
  margin-left: 27px;
  padding-top: 2px;
  opacity: 0.8;
}

#preshowcustomer .mail_conrel {
  opacity: 0.8;
}

.evaluationArea {
  margin: 0 0 4px 0;
}

table.vc_line {
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 16px;
  color: white;
  font-weight: bold;
}

.bigpreview-info-card table.vc_line{
  font: var(--font-subheader, var(--font-header, var(--font-normal)));
}

tr.vc_customer_line {
  background-color: #4182b7;
}

tr.vc_contractor_line {
  background-color: #e4c62e;
}

tr.vc_sales_line {
  background-color: #65b765;
}

tr.vc_salesamount_line {
  background-color: #ea8a8a;
}

tr.vc_contact_line {
  background-color: #f3f3f3;
}

.vc_sla_line tr {
  background-color: #f5c200;
}

.card_customer .companyicon {
  float: right;
  width: 0;
  height: 0;
  overflow: visible;
}

.card_customer .companyicon img {
  float: right;
  width: auto;
  max-width: 64px;
  max-height: 32px;
}

.card_customer,
.card_crmkontakt {
  position: relative;
}

.card_customer h2,
.card_crmkontakt h2 {
  color: var(--color-main-font);
  font-size: 12px;
  font-weight: bold;
  margin: 0;
  padding: 0;
}

.card_crmkontakt .adresse {
  text-align: right;
  line-height: 12px;
  font-size: 11px;
  padding: 10px 4px 0 0;
  min-height: 64px;
  margin: 0;
}

.card_crmkontaktNew .adresse {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: right;
  font: var(--font-small);
  padding: 20px 8px 8px 8px;
  height: 80px;
  margin: 0;
}

.card_crmkontakt .adresse td {
  vertical-align: bottom;
}

.card_crmkontakt .adresse td:first-child {
  text-align: left;
}

.card_crmkontakt .adresse img.jmlImage {
  height: 12px;
  width: 12px;
}

.card_customer .adresse a,
.card_crmkontakt .adresse a {
  color: inherit;
}

.card_crmkontakt .toparea {
  height: 200px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}

.card_crmkontakt .toparea-with-background {
  background-color: #333;
}

.card_crmkontakt .toparea-with-background .adresse {
  color: #000;
  text-shadow: 0 0 3px #FFF;
  /*background-color: rgba(255,255,255,0.5);*/
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 60%);
}

.card_crmkontakt .contactstats {
  position: absolute;
  top: 0;
  left: 0;
  padding-inline: 4px;
}

.card_crmkontakt .orgastats {
  position: absolute;
  top: 0;
  right: 0;
  padding-inline: 4px;
}

.card_crmkontakt .contactstats .jmlImageContainer,
.card_crmkontakt .orgastats .jmlImageContainer {
  background: #FFF;
  padding: 4px;
  margin: 1px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-block;
}

.card_crmkontakt .contactstats .jmlImageContainer img,
.card_crmkontakt .orgastats .jmlImageContainer img {
  height: 16px;
  width: 16px;
  object-fit: contain;
}

.card_crmkontakt .picture {
  padding: 8px 8px 2px 0;
  float: left;
  height: 64px;
  position: relative;
}

.card_crmkontaktNew .picture>span,
.card_crmkontaktNew .picture a,
.card_crmkontaktNew .picture div.lightbox {
  display: inline-block;
  padding: 0;
  position: absolute;
  left: 50%;
  top: 20px;
  margin-left: -50px;
}

.card_crmkontakt .picture img {
  border: 2px solid #FFF;
  background-color: #FFF;
  overflow: hidden;
  max-height:64px;
  max-width: 128px;
  object-fit: cover;
}

.card_crmkontakt .companyicon a{
  display: inline-block;
  padding: 0;
  position: absolute;
  right:4px;
  top: 4px;
}

.card_crmkontakt .companyicon  fp-inline-svg,
.card_crmkontakt .companyicon img {
  border: 2px solid #FFF;
  background-color: #FFF;
  overflow: hidden;
  height: 24px;
  max-width: 64px;
  object-fit: contain;
}

.card_crmkontakt .maincontactEditLink {
  font-size: 8px;
  float: right;
}

.card_syncsetting {
  background: var(--color-card-background) linear-gradient(to top, #FFFFFF 0%, #EAEAEA 100%);
}

.card_syncsetting .syncdata {
  float: right;
}

.card_syncsetting h1,
h1.syncsettingHeader {
  margin-top: 5px;
  line-height: 12px;
  margin-bottom: 5px;
}

h1.syncsettingHeader {
  margin-top: 10px;
  margin-bottom: 2px;
}

.passiveStamp {
  border: 3px dashed red;
  margin-left: 20px;
  padding: 3px;
  opacity: 0.75;
  color: var(--color-status-red);
  font-size: 16px;
  font-weight: bold;
  display: inline-block;
  transform: rotate(10deg);
}

.card_syncsetting .descr {
  margin-bottom: 4px;
}

.card_syncsetting {
  color: var(--color-card-font);
}

.card_syncsetting strong {
  color: #666;
  font-weight: normal;
}

.card_syncsetting .syncdata img {
  padding: 0 1px 1px 1px;
}

h1.connectiondata {
  color: var(--color-main-font);
  margin-bottom: 5px;
}

table.connectiondata {
  width: 100%;
  border-collapse: separate;
  border-spacing: 3px;
}

table.connectiondata td.field {
  width: 170px !important;
  text-align: right;
  color: var(--color-main-font);
  opacity: .7;
}

table.connectiondata tr {
  height: 20px;
}

table.connectiondata td.value span {
  background-color: var(--color-input-background);
  cursor: text;
  border-top: 1px solid var(--color-input-button-back);
  border-right: 1px solid var(--color-input-button-back);
  border-bottom: 1px solid var(--color-input-button-back);
  border-left: 1px solid var(--color-input-button-back);
  padding: 1px 3px !important;
  display: inline-block;
  width: 100%;
}

table.connectiondata td.pass {
  font-style: italic;
}


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

table.psbar {
  width: 100%;
  table-layout: fixed;
  padding: 0;
  margin: 4px 0 2px 0;
  text-align: center;
  line-height: 4px;
}

tr.psbar_header td {
  font: var(--font-small);
  opacity: 0.75;
  padding-top: 2px;
}

td.psbar_header {
  font: var(--font-small);
  padding-top: 2px;
  padding-left: 4px;
  text-align: left;
}

tr.psbar_values td {
  padding: 1px;
}

td.psbar_v1,
td.psbar_v2 {
  font-size: 18px;
  font-weight: bold;
  line-height: 20px;
  opacity: 0.8;
}

td.psbar_v3 {
  width: 5%;
}

td.psbar_vdate,
td.psbar_vnumber {
  font-size: 14px;
  font-weight: normal;
  line-height: 16px;
}

td.psbar_info {
  text-align: right;
  padding-right: 4px;
  font-size: 12px;
  font-weight: normal;
  color: #777;
  line-height: 14px;
}

td.psbar_info_small {
  text-align: right;
  padding-right: 4px;
  font-size: 11px;
  color: #777;
  font-weight: normal;
  line-height: 12px;
}

td.psbar_vdue {
  color: var(--color-status-red) !important;
}

td.psbar_vpart {
  color:  var(--color-status-blue) !important;
}

td.psbar_vinfo {
  color: grey;
}


/* --- Preshow Project -------------------------------- */

.card_projectfolder {
  position: relative;
  height: 180px;
  padding: 10px 0;
}

.card_projectfolder .picture {
  text-align: center;
}
.card_projectfolder .picture img {
  max-width: var(--width-leftarea);
  max-height: 80px;
}

.card_projectfolder table.statistics {
  position: absolute;
  top: 8px;
  right: 8px;
}

.card_projectfolder table.statistics td {
  vertical-align: bottom;
  font-size: 16px;
  line-height: 16px;
}

.card_projectfolder table.statistics td:first-child {
  font-size: 12px;
  line-height: 14px;
  opacity: 0.8;
}

.card_projectfolder p.description {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  max-height: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card_projectfolder .customerpreshow {
  bottom: 10px;
  position: absolute;
}

.jml-imagetile .card_projectfolder .customerpreshow {
  bottom: 10px;
}

.card_projectfolder .background {
  background-size: cover;
  background-repeat: no-repeat;
}

.card_projectfolder a {
  color: inherit;
}

.card_projectfolder .header {
  padding-top: 6px;
}

.card_projectfolder .header h1 {
  padding-left: 32px;
  background-image: url(../entity/projectfolder.svg);
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: 4px 4px;
  font-size: 16px;
  line-height: 2;
}

.card_projectfolder .header h1 .path {
  font-size: 8px;
  line-height: 12px;
  margin-bottom: -10px;
}

.card_projectfolder fp-chart-pie {
  height: 80px;
  width: 80px;
  margin: auto;
}

.card_projectfolder fp-chart-data {
  background-color: currentColor;
}


.card_project table.header {
  table-layout: fixed;
  border-spacing: 0;
}

.card_project table.header td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0;
  vertical-align: middle;
}

.card_project table.header td.path {
  height: 11px;
  font: var(--font-small);
  line-height: 11px;
  color: #666;
}

.card_project table.header td.name {
  height: 18px;
  font-size: 16px;
  line-height: 18px;
}

.card_project table.header td.links {
  width: 54px;
  text-align: right;
  vertical-align: top;
  padding: 3px 0;
}

.card_project table.header td.typeicon {
  width: 34px;
  text-align: left;
  vertical-align: middle;
}

.card_project table.pps_status {
  width: 100%;
  padding: 0;
  margin: 0;
  text-align: center;
  line-height: 4px;
}

.card_project tr.pps_statusheader {
  font: var(--font-small);
  color: var(--color-secondary-for-text);
}

.card_project tr.pps_statusvalues td {
  /*border-top: 3px solid #2073b5;
  border-bottom: 3px solid #2073b5;*/
  /*color: #999999;*/
  color: var(--color-secondary-for-text);
  font-size: 22px;
  font-weight: bold;
  line-height: 24px;
  padding: 1px;
}

.card_project td.pps_status {}

.card_project td.pps_fortschritt {
  width: 25%;
}

.card_project td.pps_fortschritt100 {
  color: #008800;
}

.card_project td.pps_prio {
  width: 25%;
}

.card_project td.pps_priotop {
  color: var(--color-status-red);
  width: 25%;
}

.card_project table.header td.links img {
  width: 24px;
  height: auto;
  vertical-align: middle;
}

.card_project table.header td.pid {
  font-size: 12px;
  line-height: 24px;
  padding-top: 6px;
  text-align: center;
  font-family: 'courier new', monospace;
  font-weight: bold;
  color: var(--color-shade-6);
}

.card_project table.header td.pid .taskId {
  color: var(--color-main-header);
  border-left: 1px solid var(--color-main-header);
  padding-left: 2px;
  margin-left: 2px;
}

.card_project table.header td.pid div.draftstatus {
  position: relative;
  top: -10px;
  width: 80%;
  margin: auto;
  font-size: 16px;
  /* war mal 20, aber die freien Status erlauben laengere Bezeichnungen*/
  line-height: 18px;
  padding: 2px;
  opacity: 0.8;
  text-shadow: 0 0 3px var(--color-main-background);
  background-color: var(--color-card-background);
  border: 2px dashed;
  transform: rotate(-5deg);
}

.card_project table.header td.pid div.draftstatusClosed span {
  font-size: 14px;
}

.card_project table.header td.pid div.draftstatusDraft {
  color: #EE6600;
  border-color: #EE6600;
}

.card_project table.header td.pid div.draftstatusDraftReady {
  color: #999;
  border-color: #999;
}

.card_project table.header td.pid div.draftstatusTemplate {
  color: #EECC33;
  border-color: #EECC33;
}

.card_project table.header td.pid div.draftstatusClosed {
  color: var(--color-main-font);
  border-color: var(--color-main-font);
  line-height: 18px;
  opacity: 0.5;
  margin-top: 20px;
}

.card_project table.header td.pid .openDraftToDo ul {
  padding: 0 0 0 16px;
  margin: 2px;
}

.card_project table.header td.pid .openDraft {
  white-space: normal;
  font-size: 12px;
  line-height: 14px;
  font-weight: normal;
}

.card_project table.header td.pid .openDraftToDo {
  color: #EE6600;
  background-color: #FFFAEE;
  border: 1px solid #EE6600;
}

.card_project table.header td.pid .openDraftReady {
  color: #999;
  border: 1px solid #999;
  background-color: #FFF;
}

.card_project span.header {
  font-size: 24px;
}

.card_project div.mainproject {
  margin: 1px 0;
  padding: 1px 0;
}

.card_project div.info,
.card_issue div.info {
  background: linear-gradient(to bottom, #48a3ec 0%, #378ed5 100%);
  /* W3C */
  /*padding: 2px 2px 2px 2px;*/
  color: #000080;
  margin-Bottom: 4px;
}

.card_project div.info.warning,
.card_issue div.info.warning {
  background: linear-gradient(to bottom, #e5d05b 0%, #e5cd47 100%);
  /* W3C */
  color: #333;
}

.card_project .warnSummary,
.card_issue .warnSummary {
  padding: 0;
}

.card_project .warnSummary li,
.card_issue .warnSummary li {
  padding: 3px 0 3px 26px;
  color: inherit;
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: 4px top;
  list-style: none;
  line-height: 12px;
  font-size: 11px;
}

.card_project .warnSummary li.warnItemInfo,
.card_issue .warnSummary li.warnItemInfo {
  background-image: url(../overlay/noti_info.svg);
}

.card_project .warnSummary li.warnItemYellow,
.card_issue .warnSummary li.warnItemYellow {
  background-image: url(../overlay/noti_warn.svg);
}

.card_project .warnSummary li.warnItemRed,
.card_issue .warnSummary li.warnItemRed {
  background-image: url(../overlay/noti_alert.svg);
  color: #900;
}

.card_project .warnSummary a,
.card_issue .warnSummary a {
  color: inherit;
}

.card_project div.mainproject[closed=true] {
  background-image: url(../legacygeneral/locked_inherit.png);
  background-position: bottom center;
  background-repeat: no-repeat;
}

.card_project div.projectclosed {
  background-image: url(../legacygeneral/locked_inherit.png);
  background-position: top right;
  background-repeat: no-repeat;
}

.card_project div.task {
  margin-left: 5px;
  padding-left: 5px;
  border: 0 none;
  border-color: var(--color-main-font);
}

.card_project {

  & div.details {
    margin-top: 3px;
    font: var(--font-small);
  }

  & div.details img {
    margin-bottom: -3px;
    margin-right: 1px;
  }

  & table.plan-table {
    width: 96%;
    margin: 8px auto;
    font: var(--font-normal);

    & td {
      padding:0;
      height: 20px;
    }

    & tr.subheader {
      color: var(--color-primary-for-text);
    }
    & tr.subheader:not(:first-child) td{
      padding-top: 8px;
    }

    & tr.details td:first-child {
      padding-left:0px;
    }
    & .pctge {
      width: 32px;
      text-align: center;
      font: var(--font-small);

      & span{
        display: inline-block;
        height: 16px;
        line-height: 16px;
        border-radius: 8px;
        padding: 0 4px;
        background: var(--color-card-font);
        color: var(--color-card-background);
      }

      & span.red {color: #FFF; background: var(--color-status-red);}
      & span.grey {color: #FFF; background: var(--color-status-grey);}
      & span.green {color: #FFF; background: var(--color-status-green);}
      & span.yellow {color: #FFF; background: var(--color-status-yellow);}
      & span.orange {color: #FFF; background: var(--color-status-orange);}
    }
    & .of {
      padding: 0 0 0 2px;
    }

    & tr.details .value {
      text-align: right;
      width: 32px;
    }
    & tr.details .label {
      padding-left:4px;
    }
  }
}

/*.card_project h1.mainproject {*/
/*  color: var(--color-main-font);*/
/*  font-size: 12px;*/
/*  font-style: normal;*/
/*  font-variant: normal;*/
/*  font-weight: bold;*/
/*  margin-bottom: 0;*/
/*  margin-top: 2px;*/
/*  text-decoration: none;*/
/*  width: 100%;*/
/*}*/

/*.card_project h1.workingTime {*/
/*  color: var(--color-main-font);*/
/*  font-size: 11px;*/
/*  font-style: normal;*/
/*  font-variant: normal;*/
/*  font-weight: bold;*/
/*  margin-bottom: 0;*/
/*  margin-top: 0;*/
/*  margin-left: 0;*/
/*  text-decoration: none;*/
/*  width: 100%;*/
/*}*/

/*.card_project h1.task {*/
/*  color: #000;*/
/*  font-size: 11px;*/
/*  font-style: normal;*/
/*  font-variant: normal;*/
/*  font-weight: bold;*/
/*  text-align: left;*/
/*  margin-bottom: 0;*/
/*  margin-top: 3px;*/
/*  text-decoration: none;*/
/*}*/

/*.card_project th {*/
/*  color: #FFFFFF;*/
/*  font-size: 12px;*/
/*  padding-bottom: 5px;*/
/*  padding-top: 5px;*/
/*  padding-left: 0;*/
/*  text-align: left;*/
/*  font-weight: bold;*/
/*  height: 20px;*/
/*  border-bottom: 1px solid #FFFFFF;*/
/*}*/

/*.card_project td.multi {*/
/*  padding-left: 0;*/
/*  vertical-align: top;*/
/*}*/

/*.card_project td {*/
/*  padding-left: 2px;*/
/*  font-weight: normal;*/
/*  padding-top: 5px;*/
/*  padding-bottom: 5px;*/
/*  vertical-align: middle;*/
/*}*/

/*.card_project td.mainproject {*/
/*  color: #000000;*/
/*  padding-left: 2px;*/
/*  text-align: left;*/
/*  vertical-align: bottom;*/
/*  font-weight: normal;*/
/*  padding-top: 0;*/
/*  padding-bottom: 0;*/
/*  vertical-align: top;*/
/*}*/

/*.card_project td.right {*/
/*  !*background-color: #FFFFFF;*!*/
/*  padding-left: 2px;*/
/*  text-align: right;*/
/*  font-weight: normal;*/
/*  padding-top: 5px;*/
/*  padding-bottom: 5px;*/
/*}*/

/*.card_project td.areaheader {*/
/*  !*background-color: #E6E6E6;*!*/
/*  background-color: transparent;*/
/*  color: #73A7D0;*/
/*  font-size: 12px;*/
/*  padding-left: 2px;*/
/*  text-align: left;*/
/*  font-weight: bold;*/
/*  padding-top: 5px;*/
/*  padding-bottom: 0;*/
/*  vertical-align: top;*/
/*}*/

/*.card_project td.areaheaderright {*/
/*  !*   background-color: #E6E6E6;*/
/*   background-color: transparent;*!*/
/*  color: #73A7D0;*/
/*  font-size: 12px;*/
/*  padding-left: 2px;*/
/*  text-align: right;*/
/*  font-weight: bold;*/
/*  padding-top: 5px;*/
/*  padding-bottom: 0;*/
/*  vertical-align: top;*/
/*}*/

/*.card_project h2 {*/
/*  margin-top: 14px;*/
/*}*/

/*.card_project table.project tr td {*/
/*  margin: 0;*/
/*  padding: 0;*/
/*  font: var(--font-small);*/
/*  line-height: 10px;*/
/*}*/

/*.card_project table.project tr.subheader td.pctge,*/
/*.card_project table.project tr td.pctge {*/
/*  text-align: right;*/
/*  width: 48px;*/
/*  color: var(--color-main-header);*/
/*  font: var(--font-normal);*/
/*  font-weight: normal;*/
/*  line-height: 18px;*/
/*  padding-top: 8px;*/
/*  vertical-align: top;*/
/*}*/

/*.card_project table.project tr.subtitle td.label,*/
/*.card_project table.project tr.subtitle td.label a {*/
/*  color: var(--color-shade-6);*/
/*}*/

/*.card_project table.project tr.details td.label {*/
/*  text-align: left;*/
/*  padding-top: 0;*/
/*  padding-right: 3px;*/
/*  padding-left: 6px;*/
/*  padding-bottom: 2px;*/
/*}*/

/*.card_project table.project tr.subheader span.value {*/
/*  color: var(--color-main-font);*/
/*  white-space: nowrap;*/
/*  float: right;*/
/*}*/

/*.card_project table.project tr td.value {*/
/*  color: #666;*/
/*  white-space: nowrap;*/
/*}*/

/*.card_project table.project tr td.value:last-child {*/
/*  padding-right: 0;*/
/*}*/

/*.card_project table.project tr td.label:first-child {*/
/*  padding-left: 0;*/
/*}*/

/*.card_project table.project tr.subheader td.value,*/
/*.card_project table.project tr.subheader td.label {*/
/*  color: var(--color-main-header);*/
/*  font: var(--font-normal);*/
/*  height: 20px;*/
/*  line-height: 18px;*/
/*  vertical-align: top;*/
/*  padding: 8px 0 0 0;*/
/*  text-align: left;*/
/*}*/

/*.card_project table.project tr.subheader .chartbox {*/
/*  float: right;*/
/*  width: 50%;*/
/*}*/

/*.card_project input.button {*/
/*  margin-left: 3px;*/
/*  margin-top: 3px;*/
/*  margin-bottom: 3px;*/
/*}*/

/*.card_project div.details {*/
/*  margin-top: 3px;*/
/*  font: var(--font-small);*/
/*}*/

/*.card_project div.details img {*/
/*  margin-bottom: -3px;*/
/*  margin-right: 1px;*/
/*}*/

/* --- BigPreshow -------------------------------- */

.big-preview table.headerarea{
  vertical-align: top;
  width: 100%;
  font: var(--font-small);
}

.milestone-statistic .timestream1{
  background-color: var(--color-shade-1);
}
.milestone-statistic .timestream2{
	background-color: var(--color-tint-mark-bg-2);
}
.milestone-statistic .timestream3{
	background-color: var(--color-tint-mark-bg-3);
}
.milestone-statistic .timestream4{
	background-color: var(--color-tint-mark-bg-4);
}
.milestone-statistic .timestream5{
	background-color: var(--color-tint-mark-bg-5);
}


.big-preview tr.headerrow td.headerrow{
  vertical-align: top;
  text-align: left;
  background-color: var(--header-background);
  color: var(--header-color);
  font: var(--font-small);
  margin-right: 25px !important;
  padding-right:10px;
  border-right: 2px solid white;
}

.big-preview td.datewarning{
  vertical-align: middle;
  text-align: center;
  color: red;
  width:25px;
  font-weight: bold;
}

.big-preview td.progressname{
  text-align: right;
  width:120px;
  padding-right:9px;
  color: var(--header-color);
}

.big-preview td.progresssummary{
  vertical-align: center;
  text-align: right;
  width:280px;
}

.big-preview td.dateprewarning{
  vertical-align: middle;
  text-align: center;
  color: green;
  width:25px;
  font-weight: bold;
}


.big-preview tr.datarow td.datarow{
  vertical-align: top;
  font: var(--font-small);
  line-height: 12px;
}

.big-preview td.resultbar{
  text-align: right;
  padding-left: 4px;
  font: var(--font-small);
  line-height: 10px;
  height: 10px;
  max-height: 10px;
}



.big-preview td.resultsummary{
  text-align: right;
  font: var(--font-small);
}

.big-preview td.result_ok{
  text-align: left;
  color:green;
  font-weight: bold;
  width: 30px;
  padding-left: 6px;
}

.big-preview td.result_x{
  text-align: left;
  color:red;
  font-weight: bold;
  padding-left: 6px;
  width: 30px;

}


.big-preview td.resulticon{
  text-align: right;
  height: 10px;
  font: var(--font-small);
}

/* --- Preshow Salesprocess -------------------------------- */

.card_salesprocess {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.card_salesprocess table {
  width: 100%;
  padding:0;
  color: var(--color-card-font);;
}

.card_salesprocess td {
  /*background-color: #D9ECFF;*/
  color: var(--color-card-font);
  padding-left: 2px;
  padding-top: 5px;
  padding-bottom: 5px;
  vertical-align: middle;
}

.card_salesprocess table.pps {
  background-image: url(../modules/salesprocess/bgstatus.svg);
  background-position: top, center;
  background-repeat: no-repeat;
}

.card_salesprocess h1.pps_value {
  color: white;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  margin: 0 0 5px 0;

}

.card_salesprocess span.pps_workflow {
  text-align: center;
  color: var(--color-card-font);
  font: var(--font-small);
  margin-top: 4px;
}

.card_salesprocess td.pps_probability {
  text-align: left;
  color: var(--color-card-font);
  font: var(--font-medium);
  vertical-align: bottom;
  width: 20%;
}

.card_salesprocess td.pps_probability100 {
  color: #008800;
  width: 20%;
}

.card_salesprocess td.pps_date {
  text-align: right;
  vertical-align: bottom;
  color: var(--color-card-font);
  font: var(--font-small);
  width: 20%;
}

td.tdpps_ok {
  color: var(--color-status-green);
  text-align: right;
}

td.tdpps_notok {
  color: var(--color-status-red);
  text-align: right;
  text-decoration: line-through;
}

.card_salesprocess td.pps_laststage {
  color: white;
  font-size: 10px;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  height: 18px;
}

.card_salesprocess td.pps_stage {
  color: white;
  font-size: 12px;
  text-align: center;
  font-weight: bold;
  height: 46px;
  padding-top: 14px;
}

.card_salesprocess td.pps_nextstage {
  color: white;
  font-size: 10px;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  height: 18px;
  padding-top: 8px;
  margin-bottom: 12px;
}

.card_salesprocess img.pps_image {
  height: 20px;
  width: 20px;
}

.card_salesprocess h1.pps_run {
  color: #1c6eb0;
  font-size: 20px;
  font-style: normal;
  font-weight: bold;
  margin-top: 2px;
  text-align: center;
}

.card_salesprocess h1.pps_ok {
  color: #569450;
  font-size: 20px;
  font-style: normal;
  font-weight: bold;
  margin-top: 2px;
  text-align: center;
}

.card_salesprocess h1.pps_notok {
  color: #e34a1b;
  font-size: 20px;
  font-style: normal;
  font-weight: bold;
  text-decoration: line-through;
  margin-top: 2px;
  text-align: center;
}


/* --- Preshow PlannedActivity / Calendarentry -------------------------------- */

div.card_ressource {
  background-color: white;
  padding: 4px;
  height: 100px;
}

div.card_calendarentry {
  padding: 0;
  border: 0;
}

div.leftbarbgcolor {
  padding: 8px;
  background-image: url(../modules/organizer/css_ce_preshow.png);
}

div.cepreshow_s {
  /*padding: 4px 4px 4px 44px;*/
  /*background-image: url(../modules/organizer/css_ce_preshow_s.png);*/
  /*height: 24px;*/
}

div.card_calendarentry .cep_dow {
  float: left;
  width: 26px;
  height: 24px;
  margin: 4px 8px 0 0;
  padding: 4px 3px 4px 3px;
  text-align: center;
  line-height: 24px;
  font-weight: bold;
  font-size: 18px;
}

div.card_calendarentry .cep_1date {
  height: 24px;
  margin: 4px 4px 0 4px;
  padding: 4px;
  line-height: 24px;
  font-size: 18px;
  color: #444;
}

div.card_calendarentry .cep_2dates {
  height: 28px;
  margin: 4px 4px 0 4px;
  padding: 2px;
  line-height: 14px;
  font-size: 15px;
  color: #222;
}

div.card_calendarentry .cep_time {
  width: 28px;
  margin: 3px 1px 1px 3px;
  float: left;
}

div.card_calendarentry .h {
  font-size: 11px;
  display: inline-block;
  text-align: right;
  width: 14px;
  padding-right: 1px;
  line-height: 11px;
  vertical-align: top;
}

div.card_calendarentry .m {
  font-size: 8px;
  display: inline-block;
  text-decoration: underline;
  width: 9px;
  vertical-align: top;
  line-height: 10px;
}

div.card_calendarentry .cep_2dates .h {
  font-size: 15px;
  display: inline-block;
  width: auto;
  margin-left: 5px;
  line-height: 14px;
  vertical-align: top;
}

div.card_calendarentry .cep_2dates .m {
  font-size: 11px;
  display: inline-block;
  text-decoration: underline;
  width: 9px;
  vertical-align: top;
  line-height: 11px;
  margin-left: 0;
}

div.card_calendarentry .cep_main {
  padding: 4px 4px;
  min-height: 30px;
  line-height: 16px;
  font-size: 14px;
}

div.card_calendarentry .cep_main h1 {
  color: var(--color-main-font);
  font-family: 'Paprika', 'Comic Sans MS', Arial, sans-serif;
  text-align: center;
  font-size: 13px;
  line-height: 15px;
  margin: 5px 0;
  font-weight: normal;
}

div.card_calendarentry .cep_description {
  max-height: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 4px 8px 16px;
  color: var(--color-main-font);
  /*font-family: 'Paprika', 'Comic Sans MS', Arial, sans-serif;*/
}

div.card_calendarentry .cep_location {
  background-image: url("embed/base_ce_location.svg");
  background-position: left 1px top 4px;
  padding: 4px 4px 8px 16px;
  background-size: 16px;
  background-repeat: no-repeat;
  opacity: 0.75;
}

div.entry4me, h1.entry4me {  color: var(--color-status-blue, #277cbf);}

div.card_calendarentry .cep_participant {
  background-image: url("embed/base_ce_participant.svg");
  background-position: left 1px top 4px;
  padding: 4px 4px 8px 16px;
  background-size: 16px;
  background-repeat: no-repeat;
  opacity: 0.75;
}

.bmlf_calendarBigEntry h1 .t {
  font-size: 75%;
}


/* --- Capacity-------------------------------- */

td.cap_budget {
  font-size: 12px;
  color: #277cbf;
  padding: 1px;
  text-align: center;
}

td.cap_count {
  font-size: 20px;
  color: #277cbf;
  padding: 4px;
  font-weight: bold;
  text-align: center;
}

td.cap_date {
  font-size: 11px;
  color: #277cbf;
  text-align: center;
}

td.cap_header {
  font-size: 10px;
  font-weight: bold;
  color: #2d5899;
  text-align: center;
  border-bottom: 3px solid #2d5899;
}

td.cap_headerbig {
  color: #2d5899;
  font-size: 14px;
  text-align: left;
  font-weight: bold;
  border-bottom: 3px solid #2d5899;
}

td.cap_label {
  color: grey;
  text-align: center;
}

td.cap_value {
  color: #277cbf;
  text-align: center;
}

td.cap_error {
  color: var(--color-status-red);
}

td.cap_ok {
  color: var(--color-status-green);
}

span.cap_observed {
  background-color: #FFBD84;
}

span.cap_time {
  background-color: var(--color-worker-cap-time);
}

.cap.cap-red .bmlf_hCaption {
  color: var(--color-status-red);
}

.cap.cap-green .bmlf_hCaption {
  color: var(--color-status-green);
}

.ea-phonepreview {
  position: relative;
  perspective: 500px;
}

.ea-phonepreview .phone {
  border: 3px solid #111;
  width: 140px;
  height: 240px;
  margin: 5px auto auto;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.ea-phonepreview .phone::before {
  content: '';
  background: #111;
  text-align: center;
  font-size: 14px;
  display: block;
  height: 12px;
  line-height: 10px;
  width: 12px;
  border-radius: 6px;
  left: 50%;
  margin-left:-6px;
  margin-top:2px;
  position: relative;
}

.ea-phonepreview .phone::after {
  content: '';
  text-align: center;
  letter-spacing: 7px;
  font-family: "Roboto Condensed", Arial, "Tahoma", sans-serif;
  background: #111;
  display: block;
  height: 4px;
  position: absolute;
  bottom: 2px;
  width: 40%;
  left: 30%;
  font-size: 14px;
  font-weight: bold;
  border-radius: 2px;
}

.ea-phonepreview .phone h3 {
  padding: 20px 0 4px 0;
  margin-top: -16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  cursor: default;
}

.ea-phonepreview .phone h3::before {
  content: '≡';
  display: inline-block;
  padding: 0 3px;
}

.ea-phonepreview .phone p {
  font-size: 10px;
  margin: 10px;
  cursor: default;
}

.ea-phonepreview .phone .fab {
  position: absolute;
  bottom: 36px;
  right: 10px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  font-size: 24px;
  width: 32px;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  cursor: default;
}

.ea-phonepreview .phone .fab:hover {
  transform: translate3d(0, 1px, 0);
}


/* --- Preshow Urlaubsantrag -------------------------------- */
div.card_vacation {
  position: relative;
  height: 200px;
  box-sizing: border-box;
  padding-top: 8px;
}

div.card_vacation .watermark{
  top: unset;
  bottom: 15px;
  right: 18px;
  transform: rotate(-10deg);
  transform-origin: top left;
  font: var(--font-small);
  color: var(--color-status-grey);
  text-align: center;
  opacity: 0.5
}

div.card_vacation.state3 .watermark,
div.card_vacation.state6 .watermark { color: var(--color-status-green);}

div.card_vacation.state4 .watermark,
div.card_vacation.state7 .watermark { color: var(--color-status-red);}

div.card_vacation.state2 .watermark,
div.card_vacation.state5 .watermark { color: var(--color-status-yellow);}


div.card_vacation fp-inline-svg.background {
  position:absolute;
  --icon-size: 64px;
  top: 8px;
  left: 8px;
}
div.card_vacation table.details {
  width: 200px;
  margin-left: auto;
  margin-right: 0;
  border-spacing: 3px;
  border-collapse: separate;
  font: var(--font-normal);
}
div.card_vacation strong{
  display: block;
  text-align: center;
  font: var(--font-medium);
  font-weight: bold;
  padding: 12px 0;
}
div.card_vacation .description {
  padding: 0 8px;
  text-align: left;
  max-height: 36px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  line-height: 12px;
  position: absolute;
  bottom: 14px;
}

  /* --- Preshow FinanceRecord -------------------------------- */

div.card_financerecord,
div.card_issuelist,
div.card_campaign,
div.card_forumrecord,
div.card_capacity,
div.card_planrecord,
div.card_wikipage,
div.card_message {
  position: relative;
  overflow: hidden;
  text-overflow: clip;
}

.jml-tile div.card_capacity,
.jml-tile div.card_planrecord {
  background-color: var(--color-card-background, #DDD);
  border-radius: 4px;
  margin: 0 4px;
  height: calc(100% - 4px);
}
div.card_forumrecord .topicDetails {

  max-height: 180px;
}

div.card_forumrecord .author {
  max-height: 32px;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  line-height: 100%;
  margin-bottom: 8px;
  padding: 0 4px;
}

div.card_forumrecord .author .avatar {
  float: left;
  margin-right: 4px;
}

div.card_capacity .head {
  display: flex;
  font: var(--font-medium);
  align-items: center;
  padding: 0 4px;
  border-radius: 3px;
}

div.card_capacity .head > *:nth-child(2) {
  flex-grow: 1;
  padding-left: 4px;
}

div.card_capacity .head span:last-child {
  text-align: right;
}

div.card_capacity .pf-ps-maincontent{
  min-height: 0;
}

.pf-ps-maincontent .watermark,
.card_financerecord .watermark,
.card_campaign .watermark,
.card_issuelist .watermark,
.card_forumrecord .watermark,
.card_capacity .watermark,
.card_planrecord .watermark,
.card_wikipage .watermark,
.card_crmkontakt .watermark,
.card_customer .watermark,
.card_vacation .watermark,
.card_message .watermark {
  position: absolute;
  right: -4px;
  top: 15px;
  padding: 4px;
  color: var(--color-card-font);
  border: 3px dotted currentColor;
  opacity: 0.25;
  font-family: monospace;
  font-size: 20px;
  font-weight: bold;
  transform: rotate(30deg);
}

.card_campaign .watermark,
.card_issuelist .watermark,
.card_financerecord .watermark{
  top: 19px;
  right: 100px;
}

.card_crmkontakt .watermark {
  right: 10px;
  color: var(--color-accent);
  opacity: 0.75;
  font-size: 30px;
}

#ticketprocesspreshow .watermark {
  position: absolute;
  top: 20%;
  padding: 4px;
  color: var(--color-card-font);
  opacity: 0.25;
  font-family: monospace;
  font-size: 100px;
  font-weight: bold;
  transform: rotate(25deg);
  width: 100%;
  text-align: center;
}
@media (min-width: 1921px) {
  #ticketprocesspreshow .watermark {
    font-size: 130px;
  }
}

.card_financerecord .finrecfiles {
  border-collapse: collapse;
  width: 100%;
}

.card_financerecord .finrecfiles tr {
  height: 18px;
  color: #999;
}

.card_financerecord .finrecfiles tr.file {
  color: var(--color-main-header);
}

.card_financerecord .finrecfiles tr:hover {
  background-color: var(--color-default-hover);
}

.card_financerecord .finrecfiles td {
  border: 0 none;
  padding: 2px 4px;
  text-align: left;
  font-size: 10px;
}

.card_financerecord .finrecfiles td.type,
.card_financerecord .finrecfiles td.date {
  width: 1px;
  white-space: nowrap;
  padding-right: 5px;
}

.card_financerecord .finrecfiles td.icon {
  background: url(../filetypes/acrobat.svg) no-repeat right 2px center;
  background-size: 16px;
  filter: grayscale(1) opacity(0.5);
}

.card_financerecord .finrecfiles tr.file td.icon {
  text-align: right;
  background-image: url(../filetypes/acrobat.svg);
  filter: none;
}

.card_financerecord .finrecfiles .invisible,
.card_financerecord .finrecfiles .invisible .dijitButtonNode {
  border: none;
  box-shadow: none;
  width: 20px;
  padding: 0;
  margin: 0;
  height: 18px;
}


/* --- Preshow FinanceArticle -------------------------------- */

.card_financearticle { min-height: 100px;}
.card_financearticle .financearticle-description{
  margin: auto;
  padding: 8px;
  width: 98%;
  background: var(--color-shade-1);
  border: 1px solid var(--color-shade-3);
  border-radius: 8px;
  box-sizing: border-box;
  min-height:80px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: stretch;
  font: var(--font-normal);
  overflow: hidden;
}

.card_financearticle .financearticle-image img {
  max-height: 200px;
  width: 100px;
  object-fit: contain;
  overflow: hidden;
  border-radius: 4px;
  margin-right: 8px;
}

.card_financearticle .financearticle-image p{
  max-height: 200px;
  flex: 1;
  text-align: left;
  flex-basis: 100px;
}

/* --- Preshow DatevAccountingExport -------------------------------- */
div.card_datevexport {
  position: relative;
  height: 200px;
  box-sizing: border-box;
  padding: 0;
}

div.card_datevexport .watermark {
  top: unset;
  bottom: 118px;
  right: 87px;
  transform: rotate(350deg);
  transform-origin: top left;
  text-align: center;
  opacity: 0.5
}

.datevexport_watermark {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 2px;
  transform: rotate(-10deg);
  border: 2px dashed;
  padding: 0 3px;
  white-space: nowrap;
}

div.card_datevexport .watermark.stateD,
.datevexport_watermark.stateD {
  color: var(--color-status-grey);
}

div.card_datevexport .watermark.stateP,
.datevexport_watermark.stateP {
  color: var(--color-status-yellow);
}

div.card_datevexport .watermark.stateS,
.datevexport_watermark.stateS {
  color: var(--color-status-green);
}

div.card_datevexport .watermark.stateF,
.datevexport_watermark.stateF {
  color: var(--color-status-red);
}

/* --- Travelcosts / expenses -------------------------------- */

td .expPosBillableAmount {
  font-size: 1.5em;
}

.expensePositionBillingStatus {
  line-height: 10px;
  font-size: 12px;
  white-space: nowrap;
  width: 100%;
}

.expensePositionBillingStatus .project {
  padding-left: 10px;
  background-image: url(../modules/finance/billing_project.png);
  background-position: left center;
  background-size: 8px 8px;
  background-repeat: no-repeat;
}

.expensePositionBillingStatus .customer {
  padding-left: 10px;
  background-image: url(../modules/finance/billing_customer.png);
  background-position: left center;
  background-size: 8px 8px;
  background-repeat: no-repeat;
}

.expensePositionBillingStatus .worker {
  padding-left: 10px;
  background-image: url(../modules/finance/billing_worker.png);
  background-size: 8px 8px;
  background-position: left center;
  background-repeat: no-repeat;
}

.expensePositionBillingStatus td {
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 150px;
  line-height: 18px;
}

.expensePositionBillingStatus img {
  height: 16px;
  width: 16px;
}

.expensePositionBillingStatus td:last-child {
  text-align: right;
  padding-left: 2px;
}

.expensePositionBillingStatus .labelBillable3 {
  /** wird nicht abgerechnet*/
  opacity: 0.4;
}

.expensePositionBillingStatus .labelBillable0 {
  /** OMG ungeklaehrt!*/
  color: var(--color-status-red);
}

.expensePositionBillingStatus .labelBillDone {
  /** Erledigt */
  color: var(--color-status-green);
}

.expenseRecordStatus {
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2px;
  line-height: 16px;
  transform: rotate(5deg);
  border: 2px dashed;
  padding: 0 3px;
  white-space: nowrap;
}

.expenseRecordStatusScan {
  color: #999;
  border-color: #999;
}

.expenseRecordStatusScanAlert {
  color: #C93;
  border-color: #C93;
}

.expenseRecordStatusDraft {
  color: #999;
  border-color: #999;
}

.expenseRecordStatusDraftAlert {
  color: #C93;
  border-color: #C93;
}

.expenseRecordStatusToApprove {
  color: #999;
  border-color: #999;
}

.expenseRecordStatusToApproveAlert {
  color: #D30;
  border-color: #D30;
}

.expenseRecordStatusRejected {
  color: #D30;
  border-color: #D30;
}

.expenseRecordStatusRejected {
  color: #D30;
  border-color: #D30;
}

.expenseRecordStatusToBill {
  color: #36C;
  border-color: #36C;
}

.expenseRecordStatusBilled {
  color: #3C3;
  border-color: #3C3;
}

table.miExpenseSummary td.miElementLeft {
  font-size: 20px;
  text-align: right;
  min-width: 30px;
}

table.miExpenseSummary p.miElementMainCaption {
  text-align: left;
  overflow: visible;
}

.miExpenseSummary .total {
  font: var(--font-small);
  line-height: 12px;
  float: right;
  display: inline-block;
  height: 0;
  overflow: visible;
  text-align: right;
}

table.miMyExpenseRecordSummary {
  table-layout: fixed;
  overflow: visible;
}

table.miMyExpenseRecordSummary col.miRightColumn {
  width: 70px;
}

table.miMyExpenseRecordSummary td.miElementRight {
  font-size: 20px;
  text-align: center;
  padding: 0;
}


/* --- Terminal CheckInOut -------------------------------- */

input.active {
  color: #003366;
  font-weight: bold;
  font-size: 12px;
}

input.passive {
  color: #000000;
  font-size: 12px;
}

input.scanner {
  width: 20px;
  margin: -2px;
  color: white;
  background-color: white;
  font-weight: bold;
  border: 0;
}

table.welcomeMaintable {
  position: relative;
}

td.terminalbg {
  background-repeat: no-repeat;
  background-image: url(embed/rfidbg.jpg);
  background-position: center top;
}

td.terminalbg table {
  float: left;
  left: auto;
  top: auto;
}

td.terminalbg div.carousel {
  padding: 150px 0 0 0;
}


/* --- Ende Terminal CheckInOut -------------------------------- */


/* --- Tickets ----------------------------------------------*/

td.ticket_or {
  color: #999;
  font-weight: bold;
}

td.ticket_td {
  color: #999;
  font-weight: bold;
}

td.ticket_nr {
  color: #333;
  font-weight: bold;
}

td.ticket_wr {
  color: #C00;
  font-weight: bold;
}

hr.ticket {
  border-color: #F6F6F6;
  margin: 1px;
}

td.ticketStateColumn {
  vertical-align: top;
  text-align: center;
  padding-bottom: 5px;
}

td.ticketContentColumn {
  vertical-align: top;
}

td div.ticketdescr {
  font-size: 10px;
  line-height: 15px;
  font-weight: bold;
  color: var(--color-primary);
  /*color: #003366;*/
  margin-top: 1px;
}

td div.ticketcontent {
  max-height: 400px;
  overflow: hidden;
  padding-right: 16px;
}

td div.ticketcontent:hover {
  max-height: 400px;
  overflow: auto;
  padding-right: 0;
}

th.ticketContentColumn {
  vertical-align: top;
}

div.tpicontent {
  overflow: hidden;
  max-height: 100px;
}


/* --- Tickets Ende ----------------------------------------------*/


/* --- Vacation History --------------------------------- */

#history_Vac {
  width: 400px;
  margin: 0 auto;
  padding: 2px;
}

#history_Vac th {
  height: 22px;
  padding: 0 2px 0 2px;
}

#history_Vac td {
  margin-top: 0;
  padding: 0 2px 0 6px;
  vertical-align: middle;
}

#history_Vac tr.lodd {
  height: 100%;
}

#history_Vac tr.leven {
  height: 100%;
}


/* --- Ende VacationHistory --------------------------------- */


/* --- RevenueImport --------------------------------- */

.revimpbooked {
  color: #009000;
}

.revimpbooked span.smallhint {
  color: #009000;
}


/* --- Ende RevenueImport --------------------------------- */


/* --- GlobalSearch --------------------------------- */

div.dialogpreshow div.gsps_outer {
  background-repeat: no-repeat;
  background-position: 162px 36px;
  background-image: url(../globalsearch/ps_watermark.svg);
  position: relative;
  height: 100px;
}

div.dialogpreshow div.gsps_searchterm {
  float: left;
  font-size: 14px;
  font-weight: bold;
  color: var(--color-main-font);
  margin-left: 10px;
  margin-top: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 150px;
}

div.dialogpreshow div.gsps_resultcount {
  float: right;
  font-size: 26px;
  font-weight: bold;
  color: var(--color-main-font);
  margin-top: 20px;
  margin-right: 10px;
  width: 74px;
  text-align: right;
}

div.dialogpreshow div.gsps_resultcount img.intextline {
  margin-bottom: 2px;
}

div.dialogpreshow div.gsps_resultinfo {
  display: inline;
  margin-right: 10px;
  white-space: nowrap;
}

div.dialogpreshow div.gsps_resultinfocontainer {
  clear: both;
  padding: 15px 10px 0 10px;
}

td div.glssubj {
  font-weight: bold;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 99%;
  display: inline-block;
  position: relative;
}

td div.glsdetail {
  font-size: 11px;
  margin-top: -2px;
  margin-bottom: 2px;
}

td div.glsinfo {
  color: var(--color-main-font);
  font: var(--font-small);
  margin-top: 2px;
}

td.issue div.glsinfo img {
  /*vertical-align: text-top;*/
}

td.ticket div.glssubj span {
  font-weight: normal;
  margin-top: 2px;
}

td.ticket div.glssubj div.subtitle>span {
  float: left;
}

td.ticket div.glssubj div.subtitle span.fr {
  float: right;
}

td.ticket div.glssubj hr {
  border: 0;
  border-top: 1px dashed #cccccc;
  margin: 2px 0;
}

td.ticket div.glssubj div.subtitle {
  margin-bottom: 2px;
}

td.ticket div.glsinfo {
  margin-bottom: 2px;
}

td.financerecord span.number {
  float: left;
}

td.financerecord span.worker {
  float: right;
  font-weight: normal;
}


/* --- Ende GlobalSearch --------------------------------- */


/* --- Offene Punkte / Issues --------------------------------- */

tr.issuedone {
  color: #888;
}

.issuedone span.smallhint {
  color: #888;
}

td div.issuedescr {
  font-size: 10px;
  line-height: 15px;
}

span.issueworkername {
  font-size: 7pt;
  line-height: 9px;
}

ul.issuelist {
  list-style-type: none;
  padding-left: 2px;
}

ul.issuelist li.issue {
  position: relative;
  padding-left: 14px;
  padding-right: 4px;
  font: var(--font-small);
  line-height: 16px;
}

ul.issuelist li.issuedone {
  color: #888;
}

ul.issuelist li.issue img {
  position: absolute;
  left: 0;
  height: 14px;
}

.card_campaign,
.card_issuelist {
  background-color: var(--color-card-background);
  padding: 4px;
}

table.oplsummary {
  width: 100%;
  border-spacing: 3px;
  border: solid #036;
  border-width: 0 1px 1px 1px;
}

table.oplsummary th {
  font-weight: bold;
}

.card_campaign div.info,
.card_issuelist div.info {
  min-height: 50px;
}

.card_campaign hr,
.card_issuelist hr {
  border: 0;
  border-top: 1px dashed #cccccc;
}

.card_campaign h1,
.card_issuelist h1 {
  margin-bottom: 4px;
}

.card_campaign div.descr,
.card_issuelist div.descr {
  margin-bottom: 4px;
  max-height: 48px;
  overflow: hidden;
}

.card_campaign div.oplicon,
.card_issuelist div.oplicon {
  float: right;
  padding-left: 2px;
}

.card_campaign div.ilpsdissues,
.card_issuelist div.ilpsdissues {
  color: #888888;
  font-weight: bold;
}

.card_campaign div.particip,
.card_issuelist div.particip {
  font-size: 11px;
  color: var(--color-main-font);
}

.card_campaign li.issue,
.card_issuelist li.issue {
  padding: 2px 0;
}

.archived {
  background-color: #EEE;
}

.archived h1,
.archived div.particip,
.archived div.ilpsdissues {
  color: #666;
}


/* --- Ende Offene Punkte / Issues --------------------------------- */


/* --- Nachrichten --------------------------------- */

table.mailaccnav img.intextline {
  margin-bottom: -2px;
}

table.listbody.mailaccnav .l.count {
  font-weight: bold;
  text-align: center;
  width: 20px;
  color: white;
}

table.listbody.mailaccnav .l.count.unread {
  background-image: url(../legacygeneral/status_unread.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px;
  padding: 0 4px 0 3px;
}


/* --- Ende Nachrichten --------------------------------- */

div.pseudobutton#suppOn {
  cursor: pointer;
}

div.pseudobutton#suppOn img {
  margin-bottom: -4px;
  margin-top: -2px;
}

div.pseudobutton#mail {
  padding: 0;
  font-size: 10px;
  text-align: center;
  width: 100px;
  color: #003366;
  cursor: pointer;
}


a.aktuell {
  background-color: var(--color-default-hover);
}

/* ------------------------------- Uebersichtsnavigation ende--------------------------------- */


/* -------------------------------- Unternavigation ende ---------------------------------------------*/


/* --------------- Projectfacts EntityRelation Styles -------------- */

table.relationboxactionheader {
  width: 100%;
}

div.entityrelationselectlist {
  width: auto;
  height: 400px;
  overflow: scroll;
}

div.relationboxaction {
  text-align: center;
  border: 1px;
}

div.relationBoxAdder {
  height: 16px;
  --icon-size: 16px;
  padding: 1px;
  text-align: right;
}

div.relationBoxAdder img, div.relationBoxAdder fp-inline-svg {
  vertical-align: top;
  max-height: 16px;
  width: 20px;
  height: 16px;
}

ul.entityrelation {
  padding: 0 !important;
  width: 100%;
  margin: 0 auto;
  min-height: 0;
  border-bottom: 1px dashed var(--color-main-font);
}

li.entityrelation {
  height: 20px;
  color: #003366;
  list-style: none;
  margin: 0;
  /* background-image: url(../img/entitiLIBack.png); */
}

li.entityrelation:hover {}

li.entityrelation img {
  margin-bottom: -4px;
}

a.relationlink {
  text-decoration: none;
  margin-right: -30px;
  /* Trick, damit das actionicon immer genug Platz hat */
}

li.entityrelation span.projectparents {
  font: var(--font-small);
  color: var(--color-main-font);
  white-space: nowrap;
}

li.entityrelation span.projectname {
  white-space: nowrap;
}

div.snoozeBoxAdder {
  height: 16px;
  padding: 1px;
  text-align: right;
  display: inline;
}


/* --- DOJO Overrides ------------------------------------------ */

.tundra #dojoEditor.dijitDialog {
  box-shadow: 1px 1px 4px #333;
  border: 0 none;
}

.tundra #dojoEditor.dijitDialog.dijitDialogFocused {
  overflow: visible;
  /* manche Popups werden sonst abgeschnitten*/
}

.tundra #dojoEditor.dijitDialog.dijitDialogFocused {
  transition: width 0.5s, height 0.5s;
  /* Vorsicht: DragDropPerformance!!! */
}

.tundra #dojoEditor .dijitDialogPaneContent {
  padding: 0;
  border-top: 0;
  max-height: 90vh;
  overflow: auto;
}

.tundra .dijitDialog .dijitDialogTitleBar {
  cursor: move;
  line-height: 20px;
  background-image: none;
}

.tundra .dijitDialog .dijitDialogCloseIcon {
  top: 8px;
}

.dijitDialogUnderlay {
  background-color: #556677;
  opacity: 0.25;
}

.dijitColorPalette .dijitColorPaletteSwatch {
  height: 12px;
  width: 14px;
}


/* --- ENDE - DOJO Overrides ------------------------------------------ */

.dialog td.labelsms {
  color: var(--color-main-font);
  background: url('../modules/message/css_sms.png') no-repeat bottom;
}


/*Auswahlbox Dateien*/

div.fileaccessbox {
  padding: 10px;
}

.icscards {
  background-color: var(--color-tint-contrast-0125);
  padding: var(--width-componentspacing);
}

.icscards > li:not(:first-child) {
  margin-top: 10px;
}

.icscard {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


/* MENUDESCRIPTIONS */

div.workerIconBar {
  height: 34px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
}

.pfHrVacMD>div.workerIconBar {
  height: 34px;
  text-align: left;
  margin: 10px 0;
  white-space: nowrap;
  background-color: var(--color-toolbar-back);;
  border-radius: 4px;
}

.pfHrVacMD .cancelEmpty,
.pfHrVacMD .vacationEmpty,
.pfHrVacMD .bookEmpty {
  opacity: 0.25;
}

.workerIconBar .count {
  display: inline-block;
  width: 40px;
  height: 34px;
  line-height: 34px;
  font-size: 30px;
  font-weight: bold;
  text-align: right;
  vertical-align: middle;
  white-space: normal;
  color: var(--color-card-font);
  overflow: hidden;
  text-overflow: clip;
}


/* --- ------------------------------------------ */

.workerIconBar .label {
  padding-left: 1px;
  display: inline-block;
  width: 70px;
  height: 24px;
  line-height: 12px;
  font-size: 10px;
  text-align: left;
  vertical-align: middle;
  white-space: normal;
  color: var(--color-card-font);
}

.workerIconBar .pics {
  display: inline-block;
  max-height: 34px;
  text-align: left;
  vertical-align: top;
  white-space: normal;
}

.workerIconBar .pics img {
  vertical-align: middle;
  width: 32px;
  height: auto;
  text-align: center;
}

.workerIconBar .pics .photo {
  display: block;
  float: left;
  height: 32px;
  width: 32px;
  line-height: 30px;
  vertical-align: top;
  overflow: hidden;
  border: 1px solid #F6F6F6;
  background: linear-gradient(135deg, #eae9d7 0%, #ffffff 100%);
  /* W3C */
}

.workerIconBar .pics .icon {
  display: block;
  float: left;
  height: 16px;
  width: 16px;
  vertical-align: top;
}


/* jmlUpdateDialog / onChangeRefresh */


/* Der Ausgangszustand fast unsichtbar und blau */

.jmlUpdated {
  outline: rgba(30, 80, 120, 0.1) solid thick;
}


/* Einblenden */

.jmlUpdated1 {
  transition: all 0.5s;
  outline: rgba(30, 80, 120, .9) solid thick;
}


/* Und ausblenden */

.jmlUpdated2 {
  transition: all 2s;
  outline: rgba(30, 80, 120, 0) solid thick;
}

span.pollscore {
  font-size: 16px;
  font-style: oblique;
  font-weight: bold;
  display: inline-block;
  padding: 2px 0 4px 0;
}

span.membercount {
  display: inline-block;
  width: 15px;
}

.pfHrCompany {
  background-color: var(--color-card-background);
  width: 180px;
  max-height: 100px;
  text-align: center;
  font-size: 14px;
  display: block;
  margin: 2px;
  box-shadow: 1px 1px 3px var(--color-shade-dark-4);
  border: 1px solid var(--color-main-background);
}

.pfHrCompanyImage img {
  height: 64px;
  margin-top: 8px;
  max-width: 120px;
  object-fit: contain;
}

.pfHrCompanyName {
  display: block;
  line-height: 22px;
  color: var(--color-main-header);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

div.hrCustomerSpecialContactNoBr {
  white-space: nowrap;
  display: inline;
}

div.hrCustomerSpecialContact {
  background-color: white;
  width: 90px;
  height: 100px;
  text-align: center;
  font-size: 10px;
  display: inline-block;
  margin: 2px;
  box-shadow: 1px 1px 3px #999999;
  border: 1px solid #CCC;
}

div.hrCustomerSpecialContact span {
  display: block;
  height: 18px;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
}

div.hrCustomerSpecialContact img {
  max-height: 64px;
  max-width: 70px;
  vertical-align: middle;
}

div.hrCustomerSpecialContact .relation {
  color: #666;
}

div.hrCustomerSpecialContact .relationImage {
  height: 64px;
  line-height: 64px;
  overflow: visible;
  text-align: center;
}

tr.txtblockoverwritten span.contentassistcode {
  color: #888;
  text-decoration: line-through;
}

div.contentassist_helpbox>div {
  width: 97%;
}

div.contentassist_helpbox textarea {
  width: 100%;
  height: 200px;
}

.cbowide {
  width: 200px;
}


/** Footerzeile */

.vacationReportYearSummary {
  border-bottom: 1px solid #999;
}


/** Headerzeile */

.vacationReportYearTitle .year {
  font-size: 20px;
}

.vacationReportYearTitle .claimSummary {
  color: var(--color-main-font);
  font-size: 11px;
  line-height: 13px;
}

.vacationReportYearTitle table {
  width: 100%;
}

.vacationReportYearTitle td.titleCaption {}

.vacationReportYearTitle td.summaryCaption {
  width: 800px;
}

.vacationReportYearTitle td.summaryCaption table {
  width: 800px;
  color: var(--color-main-font);
}

.vacationReportYearTitle td.summaryCaption table tr.summaryLabels td {
  text-align: center;
  font-size: 11px;
  line-height: 12px;
  width: 100px;
  vertical-align: top;
}

.vacationReportYearTitle td.summaryCaption table tr.summaryValues td {
  text-align: center;
  font-size: 17px;
  line-height: 30px;
  width: 100px;
}

.vacationReportYearTitle td.summaryCaption table tr.summaryValues td:last-child {
  font-weight: bold;
}

.vacationReportYearTitle .irrelevant,
tr.irrelevant td,
td.irrelevant {
  opacity: 0.6;
  /*text-decoration:line-through;*/
}

.vacationReportYearTitle .initWarning {
  font-weight: bold;
  color: #DD6600;
}

tr.vacrephr {
  background: #fefefe;
}

tr.vacrepinit {
  background: var(--color-shade-1);
  font-weight: bold;
  border-top: 1px solid #999;
}

tr.vacrepdum {
  background: var(--color-shade-1);
}

tr.vacrepsum {
  background-color: white;
  padding: 0;
  color: black;
}

tr.vacrepsum h2,
tr.vacrephr h2 {
  margin-top: 12px;
  margin-bottom: 12px;
}

form.jml_formList table.listbody .jmlTableRows td.expensemeal {
  text-align: right;
  padding-right: 10px;
  padding-left: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px;
}

td.expensemealOther {
  background-color: rgba(74, 151, 225, 0.24);
  background-image: url(../entity/expense.svg);
}

td.expensemealExact {
  background-color: #4db1ff;
  background-image: url(../entity/expense.svg);
}

td.expensemealRefund {
  background-color: #CCCCCC;
}

td.expensemealRefundError {
  background-color: #f1a129;
  background-image: url(../entity/expense.svg);
}

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

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

.prevlist .jmlImageContainer {
  margin-right: 4px;
  width: 24px;
}

td.previouslyopenedTitle {
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 250px;
  white-space: nowrap;
}

span.abcscoresales {
  font-weight: bold;
  color: #5da45d;
  font-size: 14px !important;
}

span.abcscorebigsales {
  font-weight: bold;
  font-size: 18px !important;
  color: #5da45d;
}

span.abcvaluebigsales {
  font-weight: bold;
  color: #5da45d;
  font-size: 12px !important;
}

span.abcvaluesales {}

span.abcscorecontractor {
  font-weight: bold;
  color: #d7b828;
  font-size: 14px !important;
}

span.abcscorebigcontractor {
  font-weight: bold;
  font-size: 18px !important;
  color: #d7b828;
}

span.abcvaluebigcontractor {
  font-weight: bold;
  color: #d7b828;
  font-size: 12px !important;
}

span.abcscorecustomer {
  font-weight: bold;
  color: #3d79ac;
  font-size: 14px !important;
}

span.abcscorebigcustomer {
  font-weight: bold;
  font-size: 18px !important;
  color: #3d79ac;
}

span.abcvaluebigcustomer {
  font-weight: bold;
  color: #3d79ac;
  font-size: 12px !important;
}

.crmAssignmentCounter {
  font-size: 14px;
  font-weight: bold;
  line-height: 24px;
  display: inline-block;
  height: 24px;
  min-width: 60px;
}

.crmAssignmentCounter img {
  height: 24px;
  width: auto;
  vertical-align: top;
  margin-right: 2px;
  margin-left: 8px;
}

form.thumbs td.l {
  vertical-align: top;
}

div.thumb {
  margin: 8px;
  padding: 2px;
  float: left;
  cursor: pointer;
  height: 140px;
}

div.thumblong {
  height: auto;
}

div.thumbsmall {
  height: 48px;
}

div.thumbsmall .visitenkarte {
  height: 48px;
}

div.thumbrelation {
  height: 144px;
  margin: 6px;
  padding: 4px;
  background-color: #F9F9E9;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

div.thumbrelation.thumblong {
  height: 200px;
}

div.thumb .visitenkarte {
  cursor: pointer;
  max-height: 140px;
  overflow: hidden;
  transition: all 0.25s;
  position: relative;
  z-index: 400;
  top: 0;
}

div.thumblong .visitenkarte {
  max-height: 190px;
}

div.thumbrelation .visitenkarte {
  max-height: 160px;
}

div.thumb:hover .visitenkarte {
  max-height: 240px;
  z-index: 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  top: -3px;
}

div.thumblong:hover .visitenkarte {
  max-height: 300px;
}

div.thumbrelation:hover .visitenkarte {
  max-height: 430px;
}

div.thumblast,
div.thumb:hover {
  background-color: var(--color-menu1-back-hover);
}

form.thumbs tr.lodd,
form.thumbs tr.leven {
  background-color: #f1f0ef;
}

/* pf6 statistic */
div.statisticgroup {
  padding: 8px;
}

fp-expander.statistic{
  display: block;
  box-shadow: var(--shadow-cards);
  background-color: var(--color-card-background);
  color: var(--color-card-font);
  --color-toolbar-back: transparent;
  --color-toolbar-font: currentColor;
  font: var(--font-large);
  height: auto;
  margin-top: 8px;
}


table.statistictable {
  font: var(--font-medium);
}

table.statistictable.horz-bars,
table.statistictable.pie-chart
{
  width: 100%;
}

table.statistictable.vert-bars td,
table.statistictable.vert-bars th {
  text-align: center;
  padding: 0 8px;
}

table.statistictable .stat-label,
table.statistictable .stat-pct,
table.statistictable .stat-value {
  padding-right: 4px;
  text-align: right;
}

div.statsbar {
  height: 16px;
  font-size: 14px;
  line-height: 16px;
}

.vert-bars .stat-bar{
  height: 80px;
  vertical-align: bottom;
  border-bottom: 1px solid var(--color-main-font);
}
.vert-bars .stat-pct {
  font: var(--font-normal);
}

.vert-bars div.statsbar{
  width: 40px;
  display: inline-block;
}

div.statsbar-pct {
  width:48px;
  padding-right: 2px;
}

/* pf5 Statistic */
td.statisticarea {
  background-color: #89afde;
  color: white;
  font-size: 14px;
  padding-left: 2px;
  text-align: left;
  font-weight: bold;
}

td.statisticcriteria {
  background-color: #c7d8ec;
  color: #103d76;
  font-size: 12px;
  padding-left: 2px;
  text-align: left;
  font-weight: bold;
}

table.textOverflow {
  table-layout: fixed;
}

span.abcscore {
  font-weight: bold;
  color: #DD6600;
}

table.textOverflow td,
table.textOverflow div,
table.textOverflow p {
  overflow: hidden;
  text-overflow: ellipsis;
}

div.customerpreshowbuttons a img {
  vertical-align: baseline;
}

span.bigscore {
  font-size: 24px;
  color: var(--color-primary);;
  font-weight: bold;
}

table.bigtextarea {
  width: 100%;
}

td.bigtextarea {
  width: 100%;
}


/* --- BIGPRESHOWAREA --- */

div.bigpreshow {
  overflow: auto;
  padding-top: 6px;
  padding-right: 15px;
  padding-left: 65px;
  background-color: var(--color-card-background);
  min-height: 600px;
}

div.showarea {
  margin-top: 0;
  padding-top: 0;
  width: 100%;
  margin-bottom: 12px;
}

div.showareaheader {
  padding-top: 0;
  color: var(--color-primary-for-text);
  border-bottom: 1px solid currentColor;
  font: var(--font-small);
  font-weight: bold;
  line-height: 16px;
  display: flex;
  align-items: center;
}
div.showareaheader a:first-child {
  flex: 1
}

div.showareafooter {
  margin-top: 0;
  padding-top: 0;
  font: var(--font-small);
  font-weight: normal;
}

a.showareaadd {
  float: right;
}

div.showareaheader img {
  width: 16px;
  height: 16px;
}

div.showarea .listbody {
  border: 0 none;
}

.ps_listicon img{
  width: 24px;
  height: 24px;
}

td.bigpreshowright div.showarea td.ps_listicon {
  width: 24px;
}

td.bigpreshowright div.showarea td.ps_listcont {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
td.ps_listcont .jml_dialogChangeInfo {
  width: auto;
  text-align: left;
}

td.bigpreshowright div.showarea table.listbody {
  table-layout: fixed;
}

span.bps_header_cf {
  font-weight: bold;
  font-size: 14px;
  /*float: right;*/
  color: var(--color-main-font);
}

tr.bps_detailheader td.customfieldheader {
  padding: 4px;
  border-right: 2px solid transparent;
}

.bigpreshow > fp-expander {
  --color-toolbar-back: transparent;
}

.bigpreshow > fp-expander > .d {
  display: grid;
  padding: var(--width-componentspacing);
  gap: var(--width-componentspacing);
  grid-template-columns: repeat(auto-fit, 300px);
  grid-auto-rows: auto;
}
.bigpreshow > fp-expander > .d {
  & output {
    grid-column: span 2;
  }
  & fp-ellipsis {
    grid-column: span 4;
  }
}
.bps_detailheader img {
  width: 16px;
  height: 16px;
}

.imgsummarybox img {
  width: 24px;
  height: 24px;
}

.miElementList .newsimage_small,
.miElementList .newsimage_standard {
  max-height: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: justify;
  padding: 2px 0 4px 0;
}
.miElementList .newsimage_standard {
  max-height: 200px;
}

.miElementList .newsimage_small strong,
.miElementList .newsimage_standard strong {
  line-height: 1.5;
}

.miElementList .newsimage_small img {
  float: left;
  height: 64px;
  max-height: 64px;
  vertical-align: middle;
  width: 64px;
  max-width: 64px;
  object-fit: cover;
  margin:0 6px 0 0;
}

.miElementList .newsimage_standard img {
  float: left;
  height: 100px;
  max-height: 100px;
  vertical-align: middle;
  width: 200px;
  max-width: 200px;
  object-fit: cover;
  margin:0 6px 0 0;
}

/* Menükachel-inhalte ab version 2022.0 */
.md-summary {
  width: 100%;
  table-layout: fixed;
  font: var(--font-normal);
  white-space:nowrap
}
/**/
.md-summary td {padding:2px 0; height: 24px;}

/* die Iconspalte (bzw Iconspalten bei einem collapsed summary) */
.md-summary td:first-child,
.md-summary.c td:nth-child(3){ width: 26px;}

/* Icons haben eine Safezone von 2px, die wir bei der Ausrichtung des icons natürlich ignorieren möchten */
.md-summary td:first-child > .jmlImageContainer,
.md-summary.c td:nth-child(3) > .jmlImageContainer{ margin-left: -2px; margin-top: -12px; position: absolute;}

/* die Beschriftung */
.md-summary.s td:nth-child(2){ overflow: hidden; text-overflow: ellipsis; }

/* die Counterspalte  */
.md-summary.s td:last-child { text-align: right; font: var(--font-medium); font-weight: 400; width: 40px;}
/* die Valuespalte */
.md-summary.s.v td:last-child{ text-align: right; font: var(--font-medium); font-weight: 400; width: 60px;}

/* die Counter/ Valuespalten bei einem collapsed summary */
.md-summary.c td:nth-child(2),
.md-summary.c td:nth-child(4){ text-align: left; font: var(--font-medium); font-weight: 400;}



.imgstatisticbox {
  font-size: 8px;
  font-weight: normal;
  line-height: 5px;
  padding-bottom: 4px;
  color: #2d5899;
  width: 100%;
  text-align: center;
}

.imgstatisticbox img {
  width: 24px;
  height: 24px;
}

div.grouphint {
  color: var(--color-input-label, currentColor);
}

fp-inline-svg.listentitystatus,
img.listentitystatus {
  --icon-size: 12px;
  width: 12px;
  height: 12px;
  margin-left: 2px;
}

fp-inline-svg.listentitystatus svg {
  height: 100%;
  width: 100%;
}

div.colleagues {
  font-size: 14px;
}

div.colleagues table.colleagues {
  width: 100%;
}

div.colleagues fp-inline-svg,
div.colleagues img {
  width: 16px;
  height: 16px;
  vertical-align: text-bottom;
}
div.colleagues fp-inline-svg svg {height: 100%; width: 100%;}

div.colleagues .daysheader {
  vertical-align: middle;
  line-height: 16px;
  font-size: 12px;
  text-align: center;
}

table.colleagues-small .daysheader,
table.colleagues-small td {
  font-size: 10px;
}

table.colleagues-small .daysheader,
table.colleagues .daysheader-today {
  font-weight: bold;
}

div.colleaguesLegend .legende fp-inline-svg,
div.colleaguesLegend .legende img {
  width: 16px;
  height: 16px;
  margin: 2px;
}

div.colleaguesLegend .legende td {
  padding-right: 6px;
  vertical-align: middle;
  font-size: 10px;
}

table.statusbox img {
  width: 16px;
  height: 16px;
}


/* FavListenPopup*/

.pfFavContainer {
  width: 370px;
  background-color: var(--color-shade-3);
}

.unreadChatGroupItem {
  width: 160px;
  height: 64px;
  text-align: left;
  position: relative;
  padding: 2px 2px 2px 70px;
  cursor: pointer;
  border-bottom: 1px solid #F3F3F3;
}

.unreadChatGroupItem:last-child {
  border-bottom: 0 none;
}

.unreadChatGroupItem:hover {
  background-color: #EEE;
}

.unreadChatGroupItem .head {
  font-weight: 300;
  border-radius: 50%;
  background-color: rgb(103, 58, 183);
  background-position: center;
  background-size: cover;
  color: white;
  position: absolute;
  text-align: center;
}

.unreadChatGroupItem .head1of1 {
  top: 8px;
  left: 8px;
  width: 48px;
  height: 48px;
  line-height: 46px;
  font-size: 36px;
}

.unreadChatGroupItem .headOf2 {
  width: 32px;
  height: 32px;
  line-height: 30px;
  font-size: 28px;
}

.unreadChatGroupItem .head1of2 {
  top: 6px;
  left: 6px;
}

.unreadChatGroupItem .head2of2 {
  top: 28px;
  left: 28px;
}

.unreadChatGroupItem .headOf3 {
  width: 24px;
  height: 24px;
  line-height: 22px;
  font-size: 20px;
}

.unreadChatGroupItem .head1of3 {
  top: 12px;
  left: 18px;
}

.unreadChatGroupItem .head2of3 {
  top: 32px;
  left: 6px;
}

.unreadChatGroupItem .head3of3 {
  top: 32px;
  left: 30px;
}

.unreadChatGroupItem .headOf4 {
  width: 24px;
  height: 24px;
  line-height: 22px;
  font-size: 20px;
}

.unreadChatGroupItem .head1of4 {
  top: 10px;
  left: 6px;
}

.unreadChatGroupItem .head2of4 {
  top: 10px;
  left: 30px;
}

.unreadChatGroupItem .head3of4 {
  top: 34px;
  left: 6px;
}

.unreadChatGroupItem .head4of4 {
  top: 34px;
  left: 30px;
}

.unreadChatGroupItem h2,
.unreadChatGroupItem h4 {
  margin: 16px 0 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.unreadChatGroupItem h2 {
  margin: 18px 0 0 0;
}

.unreadChatGroupItem h4 {
  margin: -2px 0 0 0;
  font-size: 12px;
  font-weight: normal;
}

.unreadChatGroupItem .unreadCounter {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  line-height: 24px;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background-color: rgb(103, 58, 183);
  color: white;
  position: absolute;
  text-align: center;
  top: 4px;
  right: 4px;
}


/* --- Entity Relation Overview Items --------------------------------- */

table.erov {
  width: 100%;
}

tr.erov {}

td.erovl {}

td.erovr {
  width: 20%;
  text-align: right;
}

span.erovr {
  color: var(--color-main-font);
  font-size: 16px;
  font-weight: bold;
}

.entityps {
  height: 20px;
  line-height: 20px;
  /*border-top: 1px dashed grey;*/
  display: flex;
  padding: 2px 4px;
}

.visitenkarte .entityps {
  padding: 2px 0;
}

.entityCollection .entityps {
  width: auto;
  display: inline-flex;
  margin-right: 4px;
}

.entityps .td.img {
  width: 16px;
  padding-right: 3px;
  text-align: left;
}

.entityps .td.details {
  width: 32px;
  padding-left: 3px;
  text-align: right;
}

.entityps.small .td.img img:not(.img24) {
  width: 16px;
  height: 16px;
}

.entityps .td.img {
  display: flex;
  align-items: center;
}

.entityps .td.content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-grow: 1;
}

.entityps .td.details {
  /*padding-left: 3px;*/
  /*width: 32px;*/
  /*text-align: right;*/
}

.entityps .td.details .progressSummary {
  width: 16px;
  height: 16px;
  min-width: 16px;
}

.entityps .td.progressSummary.progressInherited {
  opacity: 1;
}

td.observercolumn,
tr.pbservercolumn {
  text-align: center;
}

td.observercolumn .jmlAction img,
tr.pbservercolumn .jmlAction img {
  width: 24px;
  height: 24px;
}

table.workerprofile {
  padding: 16px 0 0 20px;
  box-sizing: border-box;
}

table.workerprofile td.label.areaheader {
  padding: 10px 0 6px 0;
}

table.workerprofile td.label.areaheaderbig {
  font-size: 16px;
  font-weight: bold;
  line-height: 24px;
  padding-bottom: 14px;
  text-align: left;
}

table.workerprofile td.label.areaheaderbig img {
  vertical-align: middle;
}

table.workerprofile td.skillentry {
  width: 100px;
  height: 28px;
  white-space: nowrap;
}

table.workerprofile td.skillentry img {
  width: 24px;
  vertical-align: middle;
}

table.workerprofile td.cventry {
  max-width: 150px;
}

table.workerprofile td.mentorlable {
  width: 1px;
}

.crmprio_vh {
  font-size: 18px;
  color: #ff0000;
}

.crmprio_h {
  font-size: 15px;
  color: #ff0000;
}

.crmprio_m {
  color: #808080;
}

.crmprio_l {
  color: #008000;
}

.crmprio_d {
  color: #4658f9;
}

td.l.prio, .prio {
  font-weight: bold;
  text-align: center;
}

.prio9 {
  font-size: 18px;
  color: var(--color-status-red);
}

.prio8 {
  font-size: 16px;
  color: var(--color-status-red);
}

.prio7 {
  font-size: 16px;
  color: var(--color-status-orange);
}

.prio6 {
  font-size: 16px;
  color: var(--color-status-orange);
}

.prio5 {
  font-size: 14px;
  color: inherit; opacity: 0.9;
}

.prio4 {
  font-size: 14px;
  opacity: 0.8;
}

.prio3 {
  font-size: 12px;
  opacity: 0.7;
}

.prio2 {
  font-size: 12px;
  opacity: 0.7;
}

.prio1 {
  font-size: 12px;
  opacity: 0.7;
}

td.salesfunnel {
  width: 300px;
}

svg.salesfunnelsvg {
  margin-top: -2px;
  text-align: center;
}

div.salesfunnelsvg {
  font-size: 16px;
  width: 300px;
  height: 30px;
  color: white;
  margin-top: -50px;
  padding-top: 15px;
  font-weight: bold;
  text-align: center;
}

nobr.salesfunnelamount {
  font-size: 1.5em;
}

td.ms_centerheader {
  color: var(--color-main-font);
  font-size: 12px;
  font-weight: bold;
  background: #d1d1d1;
  text-align: center;
}

span.ms_dayheader {
  color: var(--color-main-font);
  font-size: 18px;
  font-weight: bold;
}

span.ms_dayheader_red {
  color: var(--color-status-red);
  font-size: 18px;
  font-weight: bold;
}

table.signature {
  width: 90%;
  margin-top: 50px;
  margin-left: 10px;
  margin-right: 10px;
}

td.signatureleft {
  font-size: 12px;
  color: #b5b5b5;
  font-weight: bold;
  text-align: left;
  border-top: 1px solid #DEDEDE;
  padding-top: 20px;
}

td.signaturecenter {
  width: 50%;
}

td.signatureright {
  font-size: 12px;
  color: #b5b5b5;
  font-weight: bold;
  text-align: right;
  padding-left: 25px;
  border-top: 1px solid #DEDEDE;
  padding-top: 20px;
}

.html5cam {
  width: 100%;
  padding: var(--width-componentspacing);
  box-sizing: border-box;
}

.html5cam .buttonbar {
  white-space: nowrap;
  overflow: visible;
  display: flex;
}

.html5cam button {
  font-size: 10px;
  transition: all 0.5s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 150px;
  flex: 1;
}

.html5cam button.activate {
  width: 150px;
  font-weight: bold;
}

.html5cam button.take {
  width: 50px;
}

.html5cam button.upload {
  width: 50px;
}

.html5cam.step1 button.activate {
  width: 50px;
  font-weight: normal;
}

.html5cam.step1 button.take {
  width: 150px;
  font-weight: bold;
}

.html5cam.step1 button.upload {
  width: 50px;
  font-weight: normal;
}

.html5cam.step2 button.activate {
  width: 80px;
  font-weight: bold;
}

.html5cam.step2 button.take {
  width: 50px;
  font-weight: normal;
}

.html5cam.step2 button.upload {
  width: 120px;
  font-weight: bold;
}

.html5cam canvas {
  transition: all 2s;
  width: 250px;
}

.html5cam.step1 canvas {
  opacity: 0.1;
}

.html5cam.step2 canvas {
  opacity: 1;
  transform: rotate(-5deg) scale(0.8);
  padding: 8px 8px 20px 8px;
  border: 2px solid #CCC;
}

.html5cam div.video {
  position: relative;
  min-height: 180px;
}

.html5cam .video video {
  width: 250px;
  background-image: url(../modules/crm/nophoto.png);
  background-repeat: no-repeat;
  background-position: center 3px;
}

.html5cam .video .circle {
  display: none;
  position: absolute;
  width: 176px;
  height: 176px;
  border-radius: 50%;
  border: 4px dotted rgba(200, 200, 200, 0.5);
  left: 50%;
  top: 50%;
  margin-left: -90px;
  margin-top: -90px;
}

.html5cam.step1 .video .circle {
  display: block;
}

.publicpage .app-logo fp-inline-svg{
  max-height: 60px;
  min-width: var(--height-topmenu1);
  max-width: 160px;
  width: max-content;
  height: var(--height-topmenu1);
  object-fit: contain;
  vertical-align: bottom;
}

/* WORKFLOWS */

.workflowpreshow .boxsegmentcontent {
  padding-top: 4px;
}

.workflowpreshow h1 {
  text-align: center;
  margin-top: 4px;
  margin-bottom: 4px;
}

.workflowChart {
  display: flex;
  max-width: 80%;
}

.workflowChart .workflowStep {
  /*display: inline-block;*/
  /*padding:1px;*/
  width: 80px;
  /*flex: 1 1 auto;*/
  text-align: center;
}

.workflowChart .workflowStep {
  overflow: hidden;
  text-overflow: ellipsis;
}

.workflowChart .workflowStepOmit:after {
  width: 30px;
  line-height: 40px;
  content: '\2026';
  font-size: 10px;
  font-weight: bold;
  text-align: center;
}

.workflowChart .workflowStep span {
  font: var(--font-small);
  white-space: nowrap;
}

.workflowStep .workflowStepNumber {
  font-weight: bold;
  text-align: right;
}

.workflowTargetNumber {
  font-weight: bold;
}

.workflowStep .workflowStepActions {
  text-align: right;
}

.workflowStep .workflowStepIcon,
.workflowTargetStep .workflowStepIcon {
  text-align: center;
}

.workflowStep .workflowStepIcon fp-inline-svg,
.workflowStep .workflowStepIcon img {
  width: 32px;
  height: 32px;
  vertical-align: middle;
  background-color: #999;
  color: #FFF;
  border-radius: 50%;
  padding: 4px;
}

.workflowStepProject.mainStep .workflowStepIcon  fp-inline-svg,
.workflowStepProject.mainStep .workflowStepIcon img {
  background-color: var(--color-primary);
  color: var(--color-primary-contrast);
}

.workflowStepTicket.mainStep .workflowStepIcon fp-inline-svg,
.workflowStepSales.mainStep .workflowStepIcon  fp-inline-svg,
.workflowStepTicket.mainStep .workflowStepIcon img,
.workflowStepSales.mainStep .workflowStepIcon img {
  background-color: var(--color-shade-1);
  color:var(--color-shade-1-contrast);
}

.workflowTargetStep .workflowStepIcon  fp-inline-svg,
.workflowTargetStep .workflowStepIcon img {
  vertical-align: middle;
}

.toastcontainer {
  position: absolute;
  bottom: 40px;
  left: 30px;
  z-index: 100000;
  width: 0;
  overflow: visible;
}

.toastcontainer .toast {
  display: block;
  position: relative;
  margin: 4px;
  background-color: rgba(100, 100, 100, 0.75);
  border-radius: 4px;
  padding: 4px 12px;
  color: #FFF;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  max-height: 300px;
  width: clamp(25vw, 400px, 75vw);
  transition: transform 250ms, opacity 250ms, margin 300ms, background-color 250ms;
  transition-delay: 0ms, 0ms, 200ms;
}

.toastcontainer .toast.clear-all {
  display: none;
}

.toastcontainer.many .toast.clear-all {
  display: block;
  background-color: var(--color-card-background);
  text-align: right;
}

.toastcontainer .toast.feedb_error {
  background-color: #ff3019;
  /* Old browsers */
  border: 1px solid #900;
}

.toastcontainer .toast.feedb_warn {
  background-color: #fb9d23;
  /* Old browsers */
  border: 1px solid #da881e;
}

.toastcontainer .toast.feedb_success {
  background-color: #219e14;
  /* Old browsers */
  border: 1px solid #42873b;
}

.toastcontainer .toastMessage {
  max-height: inherit;
  overflow: auto;
  box-sizing: border-box;
  padding: 4px; /* <- gegen unnötige Scrollbars */
  display: flex;
  align-items: center;
  --color-action-primary: #FFF;
  --color-action-secondary: rgba(255, 255, 255, 0.75);
}

.toastcontainer .toastMessage span:first-child {
  flex-grow: 1;
}

.toastcontainer .toast-close:hover {
  cursor: pointer;
}

.toastcontainer .toast-close {
  position: absolute;
  right: -4px;
  top: -4px;
  background: url('../actiondescriptor/cancel.svg') no-repeat;
  height: 24px;
  width: 24px;
}

.toastcontainer .toast-close.auto-close svg {
  height: 24px;
  width: 24px;
}

@keyframes unloading-circle{
  from {
    stroke-dashoffset: 5;
  }
  to {
    stroke-dashoffset: 95;
  }
}

.toastcontainer .toast-close.auto-close svg circle{
  stroke: var(--color-accent);
  stroke-dasharray: 100;  /* <= 2 * PI * 12px */
  stroke-width: 4px;
  transform: rotateZ(-90deg);
  transform-origin: center;
  fill: transparent;
  animation-timing-function: linear;
  animation-name: unloading-circle;
  stroke-dashoffset: 100;
}

.toastcontainer .toast .toastAction {
  display: inline-block;
  font-size: 22px;
  margin-left: 4px;
  cursor: pointer;
}

.toastcontainer .toast .toastAction::before {
  content: '|';
}

.toastcontainer .toast .toastAction  fp-inline-svg,
.toastcontainer .toast .toastAction img {
  display: inline-block;
  height: 24px;
  width: 24px;
  margin: 0 4px;
  vertical-align: middle;
}

@media (min-width: 768px) {
  .toastcontainer .toast {
    font-size: 18px;
    line-height: 24px;
    padding: 10px 20px;
  }
}

@media (max-width: 500px) {/*mobile*/
  /*CKE Overrides*/
  pf-richtext-editor {min-width: unset;}
  fp-field .cke_combo_text {width: auto; font-size: 11px; padding-left: 6px;}
  fp-field .cke_combo_open {margin: 1px 6px;}
  fp-field a.cke_combo_button,
  fp-field a.cke_combo_button:hover {padding: 0;}
  fp-field .cke_toolbar {height: 28px;}
  /* Snackbar */
  .toastcontainer .toast {
    margin: 0;
    border-radius: 0;
    width: 100vw;
    box-sizing: border-box;
    overflow:hidden;
    font-size: 16px;
    line-height: 20px;
    padding-top: 40px;
    padding-top: calc(20px + env(safe-area-inset-top, 20px));
    padding-right: 64px;
    padding-bottom: 20px;
    max-height: 50vh;
    display: block;
  }

  .toastcontainer .toastMessage {
    max-height: inherit;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    --color-action-primary: #FFF;
    --color-action-secondary: rgba(255,255,255,0.75);
  }

  .toastcontainer {
    position: absolute;
    bottom: auto;
    top:0;
    left: 0;
    right: 0;
    z-index: 100000;
  }

  .toastcontainer .toast-close {
    position: absolute;
    right: 20px;
    top: 20px;
    top: calc(20px + env(safe-area-inset-top, 20px));
    background-size: cover;
  }

  .toastcontainer .toast .toastAction {
    border-top: 2px solid currentColor;
    padding:12px 0;
    margin-top:12px;
  }
  .toastcontainer .toast .toastAction::before {
    content: '';
  }
}

.toastcontainer .toast.toastHidden {
  transform: translate3d(-100px, 0, 0);
  opacity: 0;
  margin-top: -30px;
}

.approverlist .approver {
  display: inline-block;
  height: 56px;
  width: 56px;
  padding: 4px;
  position: relative;
}

.approverlist {
  --comment-color: #666;
  display:flex;
}

.approverlist .comment.ok {
  --comment-color: #569450;
}

.approverlist .comment {
  display: inline-block;
  border: 3px solid var(--comment-color);
  color: var(--comment-color);
  border-radius: 8px;
  border-bottom-left-radius: 0;
  position: relative;
  padding: 6px 10px;
  left: 8px;
  top: 4px;
  vertical-align: top;
}

.approverlist .comment p {
  padding: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 12px;
  font-size: 10px;
}

.approverlist .comment p.limited {
  max-height: 36px;
  max-width: 100px;
}

.approverlist .comment::before {
  display: inline-block;
  content: '';
  position: absolute;
  bottom: -3px;
  left: -12px;
  border-right: 6px solid var(--comment-color);
  border-bottom: 6px solid var(--comment-color);
  border-top: 6px solid transparent;
  border-left: 6px solid transparent;
}

.approverlist .approver  fp-inline-svg,
.approverlist .approver img {
  height: 56px;
  width: 56px;
  object-fit: cover;
  border-radius: 50%;
  overflow: hidden;
}

.approverlist .approver.empty.su  fp-inline-svg,
.approverlist .approver.empty.su img {
  filter: contrast(0.3) grayscale(0.5) brightness(1.5);
}


/*.approverlist .approver.empty{*/


/*background: url(../legacygeneral/standard/status_none_work.svg) no-repeat;*/


/*background-size: cover;*/


/*}*/

.approverlist .approver.empty::after,
.approverlist .approver.nok::after,
.approverlist .approver.ok::after {
  content: '';
  display: block;
  height: 32px;
  width: 32px;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  bottom: -2px;
  right: -2px;
}

.approverlist .approver.empty::after {
  background-image: url(../overlay/status_qm_yellow.svg);
}

.approverlist .approver.nok::after {
  background-image: url(../overlay/status_x_red.svg);
}

.approverlist .approver.ok::after {
  background-image: url(../overlay/status_ok_green.svg);
}

td.faded .jmlImageContainer {
  filter: contrast(0.3) grayscale(0.5) brightness(1.5);
}


/* Die neuen preshows. Es gibt bisher keinen Container,
  die einzelnen Elemente lassen sich einfach übereinander
  stapeln */

.pf-ps-header,
.pf-ps-maincontent,
.pf-ps-detailcontent {
  /*width: 300px; mal ohne versuchen*/
}

.visitenkarte.extacc {
  padding: 0;
  width: 100%;
  border: 0;
}

.visitenkarte.extacc .pf-ps-header,
.visitenkarte.extacc .pf-ps-maincontent,
.visitenkarte.extacc .pf-ps-detailcontent {
  width: 100%;
}
.preview-card.page-background > .pf-ps.pf-ps-header.pf-ps-header-opaque{
  text-shadow: none;
}

.preview-card-main {
  border: 3px solid var(--color-card-header-background, transparent);
  box-sizing: border-box;
}

.preview-card.page-background > .pf-ps.pf-ps-header.pf-ps-header-opaque,
.pf-ps-header {
  height: 48px;
  display: flex;
  flex-direction: row;
  position: relative;
  z-index: 2;
  color: var(--color-main-header);
}
.preview-card .pf-ps-header {
  --color-card-header-background: unset;
  background-color: var(--color-card-header-background, transparent);
  border-bottom: 2px solid var(--color-card-header-background, #CCC);
}

.pf-ps-header.dark { --color-main-header: var(--color-shade-light-2); }
.pf-ps-header.dark.twilight { --color-main-header: var(--color-shade-light-none); }
.pf-ps-header.light.twilight { --color-main-header: var(--color-shade-dark-none); }
.pf-ps-header.light { --color-main-header: var(--color-shade-dark-1); }

.page-background .pf-ps-header {
  box-shadow: none;
}

.pf-ps-icon,
.pf-ps-eao {
  width: 48px;
  flex-shrink: 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pf-ps-icon[onclick] {
  cursor: pointer;
}

.pf-ps-icon::before{
  display: block;
  content: '';
  background: transparent;
  border-radius: 50%;
  position: absolute;
  margin: 6px;
  height: 36px;
  width: 36px;
  transition: background-color 200ms;
}


.pf-ps-icon[onclick]:hover::before {
  background-color: var(--color-button-raised-back);
}

.pf-ps-header:is(.light, .dark, .twilight) .pf-ps-icon::before{
  background-color: var(--color-card-background, #FFF);
}

/*.pf-ps-icon .jmlImageContainer:first-child {*/
/*  !*position: absolute;*!*/
/*  !*transition: top 400ms, left 400ms;*!*/
/*  !* filter: drop-shadow(-1px 0px 0px #FFF) drop-shadow(0px 1px 0px #FFF) drop-shadow(1px 0px 0px #FFF) drop-shadow(0px -1px 0px #FFF); *!*/
/*  filter: drop-shadow(-2px 0px 0px #FFF) drop-shadow(0px 2px 0px #FFF) drop-shadow(2px 0px 0px #FFF) drop-shadow(0px -2px 0px #FFF);*/
/*}*/
/*.dark > .pf-ps-icon .jmlImageContainer:first-child {*/
/*  filter: drop-shadow(-2px 0px 0px rgba(0,0,0,0.125))*/
/*    drop-shadow(0px 2px 0px rgba(0,0,0,0.125))*/
/*    drop-shadow(2px 0px 0px rgba(0,0,0,0.125))*/
/*    drop-shadow(0px -2px 0px rgba(0,0,0,0.125));*/
/*}*/

.pf-ps-icon > fp-inline-svg,
.pf-ps-icon > img {
  max-height: 32px;
  max-width: 32px;
}

.pf-ps-header .pf-ps-image {
  display: none;
}

.pf-ps-header .pf-ps-caption {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
}

.pf-ps-header .pf-ps-caption * {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pf-ps-header .pf-ps-caption .sur {
  height: 12px;
  line-height: 12px;
  font-size: 10px;
  padding-top: 4px;
}

.pf-ps-header .pf-ps-caption .main {
  height: 18px;
  line-height: 18px;
  font-size: 14px;
}

.pf-ps-header .pf-ps-caption .sub {
  height: 12px;
  line-height: 12px;
  font-size: 10px;
}
/* LowDpi-Screens: Da sind sur und sub nur krümelig. Deshalb 1px mehr: */
@media (resolution < 100dpi) {
  .pf-ps-header .pf-ps-caption .sur,
  .pf-ps-header .pf-ps-caption .sub{
    font-size: 11px;
  }
}

.pf-ps-header:not(.twilight) .pf-ps-caption .sur,
.pf-ps-header:not(.twilight) .pf-ps-caption .sub {
  opacity: 0.75;
}

.pf-ps-maincontent {
  min-height: 200px;  /* Wegen Kachelansichten benötigen wir schon eine gewisse Größe */
  position: relative; /* Manche Previews richten Inhalte im Maincontent absolut aus (wiki)*/
  overflow: hidden;
}

pf-detailmanager .pf-ps-maincontent{
  height: auto;
  min-height: 100px; /* Hier können wir ggf etwas Platz sparen */
  max-height: 300px;
}

.preview-card-details {
  display: block;
  height: auto;
  margin-top: var(--dm-padding-sidebar, 4px);
}
.preview-card-details:empty {
  display: none;
}

.fp-tooltip-popup .pf-ps-maincontent,
.box.headless.preview-card .pf-ps-maincontent {
  height: auto;
  min-height: 200px;
  overflow: hidden;
}

.icscards .pf-ps-maincontent {
  height: 0;
}

td.l>.pf-ps-header,
td.l>.pf-ps-maincontent {
  box-shadow: 0 1px 2px var(--color-shade-4);
}

.pf-ps-maincontent .pf-ps-imagecontainer{
  position: relative;
}
.pf-ps-imagecontainer .pf-ps-image {
  border: 2px solid white ;
  border-radius: 50%;
}

.imaged-preview-card-description {
  font: var(--font-medium);
  font-weight: bold;
  padding: 8px;
  height: 100%;
  min-height: 200px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

fp-entity,
pf-entitylink {
  --entitylink-padding-hrz: 4px;
  --entitylink-padding-vrt: 8px;
}

pf-entitylink .pf-entitylink-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}


.selection .selectable fp-entity,
.selection .selectable pf-entitylink {
  --entitylink-padding-hrz: 4px;
  --entitylink-padding-vrt: 10px;
  padding: 4px 0;
}

.selection fp-tab-page {
  max-height: calc(30vh - var(--bar-height, 32px) - 2px);
}

.fp-entity,
.pf-entitylink, pf-entitylink {
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 34px;
  transition: background 200ms;
  text-decoration: none;
  color: inherit;
  text-align: left;
}

fp-sidebar pf-entitylink.lastused {
  --entitylink-padding-vrt: 12px;
  font: var(--font-normal);
  height: 40px;
}

fp-format-entity[onclick]:hover,
.fp-format-entityy[onclick]:hover,
pf-entitylink:hover,
.pf-entitylink:hover {
  cursor: pointer;
  background-color: var(--color-default-hover, rgba(128,128,128,0.125));
}

.selectable > pf-entitylink:hover {
  /* kein doppltes Einfäben nötig */
  background-color: transparent;
}

fp-entity .icon,
.pf-entitylink .icon {
  width: 24px;
  height: 24px;
  --icon-size: 24px;
  padding: var(--entitylink-padding-vrt) var(--entitylink-padding-hrz);
  flex-grow: 0;
}
pf-entitylink {--icon-size: 24px;}

fp-entity      .icon > fp-inline-svg:not(.jmlImageOverlay),
pf-entitylink  .icon > fp-inline-svg:not(.jmlImageOverlay),
.pf-entitylink .icon > fp-inline-svg:not(.jmlImageOverlay),
fp-entity      .icon > svg:not(.jmlImageOverlay),
pf-entitylink  .icon > svg:not(.jmlImageOverlay),
.pf-entitylink .icon > svg:not(.jmlImageOverlay),
fp-entity      .icon > img:not(.jmlImageOverlay),
pf-entitylink  .icon > img:not(.jmlImageOverlay),
.pf-entitylink .icon > img:not(.jmlImageOverlay) {
  --icon-size: 20px;
  height: 20px;
  width: 20px;
  margin: 2px;
}
pf-entitylink {--icon-size: 20px;}

.split-signature pf-entitylink  .icon > fp-inline-svg:not(.jmlImageOverlay),
.split-signature pf-entitylink  .icon > svg:not(.jmlImageOverlay),
.split-signature pf-entitylink  .icon > img:not(.jmlImageOverlay){
  --icon-size: 24px;
  height: 24px;
  width: 24px;
}
.split-signature pf-entitylink {--icon-size: 24px;}
.split-signature fp-format-entity {--icon-size: 20px;}
/*.split-signature fp-format-entity:is([sur-caption], [manual-sur-caption]):not([sur-caption = "disabled"]) {--icon-size: 32px;}*/
.split-signature fp-format-entity:is([sur-caption], [manual-sur-caption]):not([sur-caption = "disabled"])::part(icon) {
  --icon-size: 24px;
  margin-right: 10px;
}
.split-signature fp-format-entity:is([sur-caption], [manual-sur-caption]):not([sur-caption = "disabled"])::part(caption) {
  font-weight: bold;
  font-size: 14px;
  line-height: 17px;
  white-space: nowrap;
  color: var(--color-card-header);
}
.split-signature fp-format-entity:is([sur-caption], [manual-sur-caption]):not([sur-caption = "disabled"])::part(sur) {
  font: var(--font-small);
  line-height: 1;
  color: var(--color-card-font);
}
.statistictable fp-format-entity{
  width: 100%;
  text-align: left;
}
.statistictable fp-format-entity::part(icon){
  margin-right: 5px;
  --icon-size: 20px;
}
fp-entity .caption,
pf-entitylink .caption,
.pf-entitylink .caption {
  padding: var(--entitylink-padding-vrt) var(--entitylink-padding-hrz);
  font: var(--font-normal);
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}

fp-entity .sub,
pf-entitylink .sub,
.pf-entitylink .sub,
fp-entity .sur,
pf-entitylink .sur,
.pf-entitylink .sur {
  font: var(--font-xsmall);
  line-height: 8px;
  text-align: left;
  opacity: 0.75;
}

fp-entity .sub,
fp-entity .sur{
  position: absolute;
}


fp-entity .sur,
pf-entitylink .sur,
.pf-entitylink .sur {
  top: 2px;
}

fp-entity .sub,
pf-entitylink .sub,
.pf-entitylink .sub {
  bottom: 2px;
}

.box.preview-card .pf-ps {
  max-width: var(--width-leftarea);
  min-width: calc(var(--width-leftarea) - 12px);
}

.worker-avatar {
  position: relative;
}

.worker-avatar .avatar-anno{
  position: absolute;
  bottom: 20px;
  right: 50%;
  margin-right: -32px;
}

.upload-widget-view {
  --color-toolbar-back: transparent;
}

.upload-widget-view .preview{
  min-width: 200px;
  min-height: 200px;
  height: 200px;
  margin: 4px 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  font: var(--font-large);
}



.upload-widget-view .preview img{
  max-width: 200px;
  max-height: 100px;
}


.upload-widget-view input[type=file] {
  width: 1px;
  height: 1px;
}

.pinboard.size3 {
  --tile-height: 290px;
  --tile-width: 320px;
  /*--tile-border-radius: 4px;*/
}

.pinboard .pin {
  height: 100%;
  padding: 6px 8px 6px 8px;
  box-sizing: border-box;
}

.pinboard .pin>div {
  /* reset der Farben */
  --color-card-background: var(--color-card-background-initial);
  --color-card-font: var(--color-card-font-initial);
  background-color: var(--color-card-background);
  color: var(--color-card-font);
  box-shadow: var(--shadow-cards);
}

.pinboard .pin .pf-ps-maincontent {
  height: 200px;
}

.favs4menu .pin.bookmark {
  box-sizing: border-box;
}

.favs4menu .pin.bookmark.image {
  background-size: cover;
  background-color: #CCC;
  background-blend-mode: multiply;
}

.favs4menu .pin.bookmark.image > div {
  background: transparent;
  box-shadow: none;
}

.test-help {
  background: var(--color-shade-2);
  padding:8px;
}
.test-help h2{
  padding: 0 var(--width-componentpadding, 8px);
  font: var(--font-medium);
  font-weight: bold;
}
.test-help .globalAction .jmlAction.firststeps-poster {
  flex-direction: row-reverse;
  line-height: 1.2;
}

.test-help .globalAction .jmlAction.firststeps-poster .jmlActionIcon {
  width: auto;
}

.test-help .globalAction .jmlAction.firststeps-poster .jmlActionIcon > img,
.test-help .globalAction .jmlAction.firststeps-poster .jmlActionIcon > .jmlImageContainer{
  height: 100px;
  width: 100px;
  --icon-size: 100px;
}

.test-help div.globalAction {
  height: auto;
  padding: 4px;
  border-bottom: 0 none;

}
.test-help div.globalAction a {
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  background-color: var(--color-shade-none);
}

@media all and (orientation: landscape){
  .welcome-popup > .content{
    min-height: 50vh;
    max-height: 800px;
    aspect-ratio: 16/9;
  }
}
@media all and (orientation: portrait){
  .welcome-popup > .content {
    min-width: 50vh;
    max-width: 800px;
    aspect-ratio: 9/16;
  }
}
.welcome-popup > .content {
  display: flex;
  align-content: center;
  justify-content: center;
  flex-direction: column;
  padding: 20%;
  box-sizing: border-box;
  font: var(--font-large);
  position: relative;
  color: #FFF;
  --color-input-font: #FFF;
  --color-input-label: #FFF;
  --color-input-background: transparent;
  --color-input-border: transparent;
  text-shadow: 1px 1px 1px #000;
}

.welcome-popup > .content p {
  margin-bottom: 20px;
}

.welcome-popup > .content fp-field.switchfield {
  width: 240px;
  display: block;
}
.welcome-popup > .content button {
  width: 200px;
  --height-input: 32px;
}

.welcome-popup > .content h2{
  font: var(--font-header);
}

.welcome-popup > .content form {
  font: var(--font-normal);
  display: flex;
  justify-content: space-between;

}
.welcome-popup > .content form > div {
  width:300px;
  text-align: right;
}

.welcome-popup > .jmlImageContainer.back {
  --icon-size: 100%;
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: visible;
}


.status-chip-bar{
	display: flex;
  padding-top: 2px;
  justify-content: flex-end;
}

.status-chip{
  --icon-size: 24px;
  color: #FFF;
  padding:3px;
  margin:1px;
  height: var(--icon-size);
  line-height: var(--icon-size);
  width:120px;
  border-radius: 10px;
  font-weight:bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jml-tile .status-chip{
  --icon-size: 20px;
  /*flex-shrink: 1;*/
  /*flex-basis: 100px;*/
  padding:0 6px 0 2px;
  margin:1px 2px;
  width:auto;
  font-size:9px;
  border-radius: 6px;
  font-weight:normal;
}


.status-chip > fp-inline-svg,
.status-chip > .jmlImageContainer > .jmlImage,
.status-chip > .jmlImageContainer{
  height: var(--icon-size);
  width: var(--icon-size);
}

/* Widget-Popups sollen im z-index hoch liegen.
Ausnahme: die Popup-Select-List. die spawnt nämlich den filter-dialog!
Und wenn der auch auf 2500 liegen würde würden dessen
Widgets wieder nicht gehen ach herrje. */
fp-popup.widget, fp-modal.widget:not(.popup-select) {
  z-index: 2500;
}

/** für safari 13, solange die host-regeln der webcomponente ignoriert werden */
fp-popup[hide] { max-height: 1px; }

fp-popup .faytloading {
  /*display: none;*/
  position: absolute;
  top: -31px;
  left: 6px;
  padding: 0;
  color: var(--color-main-font);
}

@keyframes indeterminate-scale-1 {
  0% { transform: translate3d(-50%, 0, 0) scale(0.1, 1); }
  50% { transform: translate3d(0, 0, 0) scale(0.4, 1); }
  100% { transform: translate3d(50%, 0, 0) scale(0.1, 1); }
}

fp-popup .selection span.loader {
  display: none;
}

fp-popup .selection.loading span.loader {
  display: block;
  height: 4px;
  width: 100%;
  will-change: left;
  content: '';
  background: var(--color-accent);
  border-radius: 0 0 10px 10px;
  animation: indeterminate-scale-1 2s infinite;
  animation-timing-function: linear;
}

.callinfo.missed_in   {  --color-callinfo-state: var(--color-status-red);}
.callinfo.missed_out   {  --color-callinfo-state: var(--color-status-orange);}
.callinfo.finished_in {  --color-callinfo-state: var(--color-status-green);}
.callinfo.finished_out {  --color-callinfo-state: var(--color-status-blue);}
.callinfo.handled  {  --color-callinfo-state: var(--color-status-green);}
.callinfo.active   {  --color-callinfo-state: var(--color-status-green);}
.callinfo.ringing  {  --color-callinfo-state: #7CB342;}

.sidebarSeparator{
  /*border-bottom:1px solid var(--color-default-border);*/
  background-color:var(--color-default-border);
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
  padding:14px 0 14px 0;
}

.callinfo {
  box-sizing: border-box;
  border-bottom: 1px solid var(--color-default-border);
  border-left: 4px solid var(--color-callinfo-state, transparent);
  display: flex;
  padding:4px 0 4px 8px;
  align-items: center;
}

.callinfo.active, .callinfo.ringing {
  flex-direction: column;
}

.callinfo .ci-avatar {
  width: 80px;
  text-align: center;
  --icon-size: 64px;
}

.callinfo .ci-avatar.ci-avatar::before,
.callinfo .ci-avatar.ci-avatar::after,
.callinfo .ci-avatar img,
.callinfo .ci-avatar fp-inline-svg {
  height: var(--icon-size);
  width: var(--icon-size);
  border: 4px solid var(--color-callinfo-state);
  border-radius: 50%;
  object-fit: cover;
  overflow: hidden;
}
.callinfo .data {
  width: 100%;
  padding: var(--width-componentspacing);
  padding-bottom: 0;
  box-sizing: border-box;
}
.callinfo .state-badge {
  color: var(--color-callinfo-state);
}

.callinfo .buttons {
  padding-top: 2px;
  text-align: right;
}
.callinfo.active .data,
.callinfo.ringing .data {
  text-align: center;
  font: var(--font-medium);
}

.callinfo.active .data .big,
.callinfo.ringing .data .big {
  font: var(--font-large);
}
.callinfo.active .data .smallhint,
.callinfo.ringing .data .smallhint {
  font: var(--font-normal);
}

.callinfo.active .ci-avatar,
.callinfo.ringing .ci-avatar {
  width: auto;
  padding: 20px 0 12px 0;
  --icon-size: 96px;
}

.callinfo.ringing .ci-avatar::before {
  position: absolute;
  display: block;
  content: '';
  height: var(--icon-size);
  width: var(--icon-size);
  margin-bottom: calc(-1 * var(--icon-size));
  border-width: 4px;
  border-style: double;
  /*background-color: var(--color-callinfo-state);*/
  animation-duration: 1000ms;
  animation-timing-function: linear;
  animation-name: call-ripple;
  animation-iteration-count: infinite;
  background-color: var(--color-callinfo-state);
}

.callinfo.ringing .ci-avatar::after {
  position: absolute;
  display: block;
  content: '';
  height: var(--icon-size);
  width: var(--icon-size);
  margin-top: calc(-1 * var(--icon-size) - 12px);
  border-width: 4px;
  border-style: double;
  /*background-color: var(--color-callinfo-state);*/
  animation-duration: 1000ms;
  animation-delay: 300ms;
  animation-timing-function: linear;
  animation-name: call-ripple;
  animation-iteration-count: infinite;
}

.callinfo.ringing .ci-avatar img {
  position: relative; z-index: 1;
}

@keyframes call-ripple {
  0% { transform: scale(1); opacity:1; }
  25% {transform: scale(1.2); opacity:0.8; }
  60% {transform: scale(1.3); opacity:0.3; }
  100% {transform: scale(1.4); opacity:0; }
}

.debug-only { display: none; }
body.debugmode .debug-only { display: initial; }

 .debug-button {
  background-color: #3a7479;
  color: white;
}

body.debugmode code.debug {
  max-height: 50vh;
  overflow: scroll;
  font-size: 10px;
  background: #333;
  color: #EEE;
}

code.debug {
  max-height: 0;
  overflow: hidden;
  display: none;
}

.ms-signin-button.jmlButtonField {
  --icon-size: auto;
  height: 48px;
  background-color: transparent;
}

.ms-signin-button.jmlButtonField > fp-inline-svg {
  width: 127px;
}

.pwa-guide {
  max-width: 80vw;
  font-size: medium;
}

.pwa-setup-modal img.appicon {
  height: 32px;
  width: 32px;
  border-radius: 4px;
}

.tmpEllipsies{
  max-width: 800px;
  overflow: hidden;
}

span.hide{
  visibility: hidden;
}

span.display-none, output.display-none{
  display: none;
}

fp-format-entity[caption=none].orpiSidebar {
  --icon-size: 20px;
  padding: 2px;
  margin: 2px 4px;
  display: inline-block;
  height: var(--icon-size);
  width: var(--icon-size);
  line-height: calc(var(--icon-size) - 0px);
}
.orcBool{
  display: flex;
  justify-content: space-between;
}

  /** mobile - default erst bild, dann text */
.pwa-guide img.guide {
  width: 100%;
  height: auto;
}
@media (orientation: landscape) {
  /** mobile - landscape: bild fließt rechts, hälfte des platzes */
  .pwa-guide img.guide {
    width: 50%;
    float: right;
  }
}

@media (min-width: 560px) {
  /** großer bildschirm: modal beschränken, bild fließt rechts */
  .pwa-guide {
    width: 550px;
  }

  .pwa-guide img.guide {
    width: 240px; float: right;
  }

  .pwa-guide p {
    min-height: 160px;
  }
}

.enumIconTextSeparator fp-inline-svg{
  margin-right: 5px;
}

@keyframes theme-change-animate-new-viewo {
  from { clip-path: circle(0px at 50%); }
  to { clip-path: circle(200vw at 50%); }
}
@keyframes theme-change-animate-old-viewo {
  from { opacity: 1; }
  to { opacity: 0.5; }
}
@keyframes theme-change-animate-new-view {
  /*from { opacity: 0; }*/
  /*to { opacity: 1; }*/
}
@keyframes theme-change-animate-old-view {
  from { clip-path: circle(120vw at 50%); }
  to { clip-path: circle(0px at 50%); }
}

body.animate-theme-change {
  view-transition-name: animate-theme-change;
}

::view-transition-old(animate-theme-change),
::view-transition-new(animate-theme-change) {
  animation-duration: 1s;
  mix-blend-mode: normal;
}
::view-transition-old(animate-theme-change) {
  animation-name: theme-change-animate-old-view;
  z-index: 999999;
}
::view-transition-new(animate-theme-change) {
  animation-name: theme-change-animate-new-view;
}

@keyframes tile-clicked-animate-old-view {
  from { transform: scale(1); }
  to { transform:  scale(2); }
}

div.bmlf_calendarEntry.fastnavEventTarget,
pf-entitylink.fastnavEventTarget,
tr.fastnavEventTarget .visitenkarte,
div.jml-tile.fastnavEventTarget,
.updateing .box.headless.preview-card{
  view-transition-name: dm-card;
}

::view-transition-group(dm-card) {
  animation-duration: 500ms;
}

::view-transition-old(dm-card),
::view-transition-new(dm-card) {
  z-index: 9999999;
  height: 100%;
  width: 100%;
}



table.ibox{
	width:100%;
	font: var(--font-input-label);
	text-align:right;
    font-size: var(--font-medium);
}

tr.iboxheader{
  border-bottom-style: solid;
  border-bottom-width: thin;
}
tr.iboxsum{
  border-top-style: double;
}


td.iboxsumval, td.iboxheaderval, td.iboxdataval{
  text-align:right;
}

td.iboxsumdetail, td.iboxheaderdetail, td.iboxdatadetail{
  text-align:right;
  color: var(--color-secondary-for-text);
}

div.cardwithmargin {
  margin-left: 5px;
  margin-right: 5px;
}

button.debug-button:active {
  background-color: var(--color-action-primary);
}