@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, fp-format-priority-stars) {
  display: inline;
}

.opacity05 {opacity: 0.5;}

.debugmode {
  *:focus-within {
    outline: 1px solid cyan;
  }
}

:is(.debugmode, .keyboard-user) {
  & fp-expander[tabindex]:focus,
  & input.jmlButton:focus,
  & fp-field.active,
  & fp-field:focus-within,
  & .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-button: 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, [multiple], [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([multiple], .imgXX),
td.l > output > fp-format-entity[caption=none]:not([multiple], .imgXX){ --icon-size: 24px; width: var(--icon-size); height: var(--icon-size); display: block;} /** weniger layout-Arbeit für den Browser */
td.d > output > fp-format-entity[caption=none]:not([multiple], .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-inline-svg.avatar img {
  object-fit: cover;
}

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,
.pwa-guide 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;
  --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;
  padding-left: var(--border-radius-button, 3px);
  padding-right: var(--border-radius-button, 3px);
  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; fill: #FFF; background-color: var(--color-status-red); }
button.success,
input[type=button].success, .jmlButtonField.success {  color: #FFF; fill: #FFF; background-color: var(--color-status-green); }
button.warn,
input[type=button].warn, .jmlButtonField.warn {  color: #FFF; fill: #FFF; background-color: var(--color-status-yellow); }

.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);
  fill: 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: max(0px, 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.results {
  --selection-height: min(80vh, max(50vh, 500px));
  max-height: var(--selection-height);
}

.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 .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(var(--selection-height) - var(--bar-height, 32px) - 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;
}


tr.contractline{
  background-color: rgb(191, 223, 223);
}



/* ------------- 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: hidden; /** manchmal gibt es seltsame layoutshifts, die die ganze App nach links verschieben */
  --width-spacing-dialog-fieldset-horz:4px;
  --dialog-row-indent: 0px 0px 24px;
}
fp-sidebar::part(mobile-closer) {
  background-color: var(--color-toolbar-back);
}

fp-sidebar-button {
  display: block;
}

fp-sidebar-button.warn {
  background-color: var(--color-status-orange);
  & > fp-inline-svg { color: #FFF; }
}
fp-sidebar-button.info {
  background-color: var(--color-status-blue);
  & > fp-inline-svg { color: #FFF; }
}
fp-sidebar-button.alert {
  background-color: var(--color-status-red);
  & > fp-inline-svg { color: #FFF; }
}

fp-sidebar-button fp-inline-svg.countBadgeOverlay {
  transition: opacity 0.2s ease-in-out;
  opacity: 1;
}
fp-sidebar-button fp-inline-svg.countBadgeOverlay[text="0"] {
  opacity: 0;
}

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  .jmlEntityLoggerMessageArea {display: none;}

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

fp-sidebar > div.contentarea {
  background-color: var(--color-main-background);
  /*margin-top: calc(-1 * env(safe-area-inset-top, 0));*/
  height: 100%;
  display: flex;
  flex-direction: column;

  & > fp-async-content { flex-grow: 1;}
}
fp-sidebar > div.contentarea  fp-tab-container,
fp-sidebar > div.contentarea  > fp-async-list {
  height: 100%;
  overflow: auto;
  --bar-background: var(--color-shade-1);
}

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

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

fp-sidebar > div.contentarea.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 > div.contentarea .globalActions {
  margin: 0 0 24px 24px;
}

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

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

fp-sidebar td.l fp-format-entity {
  max-width: 300px;
}

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 [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] auto [main] 1fr [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;
}

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-max-inset-bottom, 36px);
  --form-padding: var(--width-componentspacing);

  fp-view-wrapper.viewFrame.dialog {
    min-height: 0;
  }
  pf-dialog-view {
    min-height: 300px;
  }
}

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


.sumfinpos > td {
  background-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);
  border-top: 2px dashed  #999; 
}


.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*/

.calendarEntryParticipantsGroup {

}

.calendarEntryParticipantsGroup:not(:first-child) {
  margin-top:4px
}

.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 > fp-sidebar-button fp-inline-svg.jmlImageContainer.avatar {
  /*height: calc(.75 * var(--width-sidebar));*/
  /*width: calc(.75 * var(--width-sidebar));*/
  object-fit: cover;


  & > .jmlImageOverlayNE{
    --icon-size: 66%;
    right: -15%;
    top: -15%;
  }

  & > img {
    border-radius: 50%;
    overflow: hidden;
  }
}

fp-sidebar .stopwatch.cico-empty {--color-stopwatch: var(--color-status-red); text-align: center;}
fp-sidebar .stopwatch.cico-paused {--color-stopwatch: var(--color-status-yellow); color: #000; text-align: center;}
fp-sidebar .stopwatch.sick {--color-stopwatch: var(--color-status-grey); color: #000; text-align: center;}
fp-sidebar .stopwatch.vacation {--color-stopwatch: var(--color-status-grey); color: #000; text-align: center;}
fp-sidebar .stopwatch.weekend {--color-stopwatch: var(--color-status-grey); color: #000; text-align: center;}

fp-sidebar fp-sidebar-button fp-stopwatch,
fp-sidebar fp-sidebar-button span.stopwatch{
  --color-stopwatch: unset;
  font: var(--font-small);
  display: block;
  position: relative;
  margin-top: -8px;
  white-space: nowrap;
  border-radius: 4px;
  padding-inline: 2px;
  background: var(--color-stopwatch, var(--color-status-green));
  color: #FFF;
  animation: stopwatch-running 2s infinite;
  text-align: center;
}

fp-sidebar fp-sidebar-button fp-stopwatch.containsHours::part(unit-minutes) {
    display: none;
}

fp-sidebar fp-sidebar-button svg {
  fill: currentColor;
}

fp-sidebar .dialog-row > .d > fp-tooltip-dialog {
    display: flex;
}

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;
  --height-input: 34px;
}

/*fp-sidebar [slot='buttons-below'] > span {*/
/*  display: inline-block;*/
/*  height: var(--height-input);*/
/*  width: var(--height-input);*/
/*}*/

fp-sidebar [slot='buttons-below'] > .jmlButtonField {
  margin: 8px auto auto;
  width: var(--height-input);
  height: var(--height-input);
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 0;
  font: var(--font-subheader);
  font-weight: bold;
  fill: currentColor;
}

fp-sidebar .sidebar-session-menu {
  display: flex;
  flex-direction: column;
  height: 100%;

  & > .spacer {flex: 1}
}

fp-sidebar div.avatar-area {
  position: relative;
  flex: 0;

  & .avatar-back {
    width: 100%;
    height: 200px;
    object-fit: cover;
    margin-bottom: 16px;
  }

  & .avatar:not(.jmlImage) {
    height: 160px;
    width: 160px;
    position: absolute;
    top: 20px;
    left: 50%;
    margin: auto auto auto -80px;
    object-fit: cover;
  }

  & fp-fab.avatar {
    display: grid;
    align-content: center;
    justify-content: center;
  }

  & .avatar:not(.jmlImage):hover{
    outline: 4px solid var(--color-primary);
  }

  & div.avatar-buttons{
    position: absolute;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 0 8px;
    top: 160px;
    left: 0;
    & > * {
      --button-size: 32px;
      height: var(--button-size);
    }
  }
  & fp-tooltip-dialog.jmlButtonField.avatar-button {
    right: auto;
    left: 8px;
    box-shadow: var(--button-shadow, 0px 1px 5px 2px rgba(0, 0, 0, 0.25));
  }

  /* Hinweis: CheckedOut alleine ist nicht rot, sondern nur, wenn noch keine Zeit vorliegt */
  & fp-tooltip-dialog.jmlButtonField.attendance-state-checked_out.empty{ background-color: var(--color-primary); color: var(--color-primary-contrast); }
  & fp-tooltip-dialog.jmlButtonField.attendance-state-checked_in{ background-color: var(--color-status-green); color: #FFF; }
  & fp-tooltip-dialog.jmlButtonField.attendance-state-break{ background-color: var(--color-status-yellow);  color: #000;}
}

@media (max-height: 800px) {
  fp-sidebar div.avatar-area {
    & .avatar-back {
      height: 120px;
      margin-bottom: 4px;
    }

    & .avatar:not(.jmlImage) {
      margin: auto auto auto -40px;
      height: 80px;
      width: 80px;
      position: absolute;
      /*top: 10px;*/
      /*left: 10px;*/
      object-fit: cover;
    }

    & div.avatar-buttons  {
      top: 80px;
      --button-size: 32px;
    }
  }
}

fp-sidebar > div.contentarea.selected {
  display: flex;
  flex-direction: column;
}

fp-sidebar > div.contentarea> .header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin: 0;
  padding-right: 60px;
  /*padding-top: env(safe-area-inset-top, 0);*/
  justify-content: space-between;

  height: var(--height-topmenu1);
  background-color: var(--color-menu1-back);
  color: var(--color-menu1-font);

  & > button {padding: 0; margin-left: 8px;}
  & > h1 { font: var(--font-large); flex: 1; text-align: right;}
}

fp-sidebar > div.contentarea[selected]>.scroll {
  will-change: transform;
  /* <- auf eigenes Layer setzen für flüssiges scrollen*/
}


fp-sidebar::part(mobile-closer),
fp-sidebar-button {
  width: var(--width-sidebar);
  height: var(--width-sidebar);
  border: none;
  --sidebar-slidein-offset: 50ms;
}

fp-sidebar fp-sidebar-button {
  transition: background 300ms;
  cursor: pointer;
  animation: 750ms slide-in;
  animation-fill-mode: both;
  animation-timing-function: var(--transition-overshoot-ease);
}
fp-sidebar.loaded fp-sidebar-button {
  animation: none;
}
fp-sidebar-button:nth-child(1) { animation-delay: calc(1 * var(--sidebar-slidein-offset)); }
fp-sidebar-button:nth-child(2) { animation-delay: calc(2 * var(--sidebar-slidein-offset)); }
fp-sidebar-button:nth-child(3) { animation-delay: calc(3 * var(--sidebar-slidein-offset)); }
fp-sidebar-button:nth-child(4) { animation-delay: calc(4 * var(--sidebar-slidein-offset)); }
fp-sidebar-button:nth-child(5) { animation-delay: calc(5 * var(--sidebar-slidein-offset)); }
fp-sidebar-button:nth-child(6) { animation-delay: calc(6 * var(--sidebar-slidein-offset)); }
fp-sidebar-button:nth-child(7) { animation-delay: calc(7 * var(--sidebar-slidein-offset)); }
fp-sidebar-button:nth-child(8) { animation-delay: calc(8 * var(--sidebar-slidein-offset)); }
fp-sidebar-button:nth-child(9) { animation-delay: calc(9 * var(--sidebar-slidein-offset)); }
fp-sidebar-button:nth-child(10) { animation-delay: calc(10 * var(--sidebar-slidein-offset)); }
fp-sidebar-button:nth-child(11) { animation-delay: calc(11 * var(--sidebar-slidein-offset)); }
fp-sidebar-button:nth-child(12) { animation-delay: calc(12 * var(--sidebar-slidein-offset)); }
fp-sidebar-button:nth-child(13) { animation-delay: calc(13 * var(--sidebar-slidein-offset)); }
fp-sidebar-button:nth-child(14) { animation-delay: calc(14 * var(--sidebar-slidein-offset)); }
fp-sidebar-button:nth-child(15) { animation-delay: calc(15 * var(--sidebar-slidein-offset)); }
fp-sidebar-button:nth-child(16) { animation-delay: calc(16 * var(--sidebar-slidein-offset)); }
fp-sidebar-button:nth-child(17) { animation-delay: calc(17 * var(--sidebar-slidein-offset)); }
fp-sidebar-button:nth-child(18) { animation-delay: calc(18 * var(--sidebar-slidein-offset)); }
fp-sidebar-button:nth-child(19) { animation-delay: calc(19 * var(--sidebar-slidein-offset)); }

@keyframes slide-in {
  from { translate: var(--width-sidebar) 0; }
  to { translate: 0 0; }
}

fp-sidebar fp-sidebar-button svg:hover .sbi-anim-rotate {
    transition: transform 750ms var(--transition-strong-ease);
    transform: rotate(360deg);
    transform-origin: 12px 13px;
}

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 > div.contentarea .globalAction:last-child {
  border-bottom: none;
}

fp-sidebar div.globalAction, fp-sidebar > div.contentarea .addtionalAction:last-child{
  border-bottom: none;
}

/* --- 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;
  font: var(--font-small);
  color: var(--color-input-label);
}
.jml_formDialog .dialog-row .d > label:not(:empty),
.jml_formDialog .dialog-row .d .label-padding {
  padding: var(--padding-input-vert) var(--padding-input-horz);
}


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

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;*/
}
.pf-ps-maincontent > div.visitenkarte {
  min-width: 0;
}

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

  /* Die Ticketvorschau wird mit einem iframe gerendert. Das macht bei bestimmten HTML-Inhalten Probleme,
     wenn sich das iframe in der Breite am Container orientiert nicht aber in der Höhe.
     (Horizontale Scrollbalken sind dann ganz weit unten auf der Seite versteckt)
     Um das Iframe in beiden Achsen an den Container anzupassen und das Scrollen des Inhalts in beiden Achsen
     dem Iframe zu überlassen nutzen wir "flex":
   */
  display: flex;
  flex-direction: column;
  height: 100%;
  & iframe {
    --calculatedHeight: auto;
    flex: 1 1 1%;
  }

}

@media (max-height: 600px) {
  #ticketprocesspreshow {
    /*Auf kleinen Bildschirmen ist die Höhe "soviel, wie content da ist" */
    display: block;
    & iframe {
      height:var(--calculatedHeight);
      /*flex-grow: 1;*/
      /*flex-shrink: 0;*/
      /*flex-basis: var(--calculatedHeight);*/
    }
  }
}

#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 .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);
  /*flex: 1; !* soll sich die verfügbare Höhe schnappen *!*/
  /*display: flex; !* der Inhalt (tab-page) soll das ebenfalls *!*/
  /*flex-direction: column;*/
}

#ticketprocesspreshow fp-tab-page{
  background: var(--color-card-background);
  color: var(--color-card-font);
  flex: 1; /* soll sich die verfügbare Höhe schnappen */
  display: flex; /* der Inhalt (iframe) soll das ebenfalls */
}

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

  & a, & a:visited
  {
    text-decoration: none;
    color: inherit;
  }
}

.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 fp-format-priority-stars {
  width: 74px;
}

.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 > div.draftstatus {
  position: relative;
  width: min-content;
  top: 8px;
  max-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 > div.draftstatusClosed span {
  font-size: 14px;
}

.card_project > div.draftstatusDraft {
  color: #EE6600;
  border-color: #EE6600;
}

.card_project > div.draftstatusDraftReady {
  color: #999;
  border-color: #999;
}

.card_project > div.draftstatusTemplate {
  color: #EECC33;
  border-color: #EECC33;
}

.card_project > div.draftstatusClosed {
  color: var(--color-main-font);
  border-color: var(--color-main-font);
  line-height: 18px;
  opacity: 0.5;
  margin-top: 20px;
}

.card_project > .openDraftToDo ul {
  padding: 0 0 0 16px;
  margin: 2px;
}

.card_project > .openDraft {
  white-space: normal;
  font-size: 12px;
  line-height: 14px;
  font-weight: normal;
}

.card_project > .openDraftToDo {
  color: #EE6600;
  background-color: #FFFAEE;
  border: 1px solid #EE6600;
}

.card_project > .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_board {
  & > p.smallhint { padding-left: 8px; }
}
/*.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,
.card_salesprocess h2.pps_value {
  color: white;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  margin: 0 0 5px 0;
}

.card_salesprocess h2.pps_value {
  font-size: 16px;
  margin-bottom: 1px;
}
.card_salesprocess .pps_stage p.fc {
  font-size: 8px;
  line-height:8px;
  font-weight: lighter;
}

.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: middle;
  padding-top: 20px;
  text-align: center;
  width: 20%;
  color: #65b765;
  font-weight: bold;
}

.card_salesprocess td.pps_probability100 {
  color: #008800;
}

.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 h1.pps {
  font-size: 20px;
  line-height: 20px;
  font-style: normal;
  font-weight: bold;
  margin-top: 8px;
  text-align: center;

  & .pps_image {
    height: 20px;
    width: 20px;
    vertical-align: top;
  }
}

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

.card_salesprocess h1.pps_ok {
  color: var(--color-status-green);
}

.card_salesprocess h1.pps_notok {
  color: var(--color-status-red);
}


/* --- Preshow PlannedActivity / Calendarentry -------------------------------- */

div.card_ressource {
  background-color: white;
  padding: 4px;
  height: 100px;
}

div.card_calendarentry {
  padding: 0;
  border: 0;
  & fp-inline-svg { fill: currentColor;}
}

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 {
  min-height: 30px;
  line-height: 16px;
  font: var(--font-small);
}

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);
  & > fp-inline-svg { margin-left: -17px; }
  /*font-family: 'Paprika', 'Comic Sans MS', Arial, sans-serif;*/
}

div.card_calendarentry .cep_location {
  padding: 4px 4px 8px 16px;
  background-size: 16px;
  background-repeat: no-repeat;
  opacity: 0.75;
  & > fp-inline-svg { margin-left: -17px; }
}


div.entry4me, h1.entry4me {  font-weight: bold;}

div.card_calendarentry .cep_participant {
  padding: 4px 4px 8px 16px;
  background-size: 16px;
  background-repeat: no-repeat;
  opacity: 0.75;
  & > fp-inline-svg { margin-left: -17px; }
}

.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: 20px;
  color: #999;
}

.card_financerecord .finrecfiles tr.file {
  color: var(--color-main-header);
}

.card_financerecord .finrecfiles tr.clickable:hover {
  background-color: var(--color-default-hover);
}

.card_financerecord .finrecfiles td {
  border: 0 none;
  padding: 2px 4px;
  text-align: left;
  font: var(--font-normal);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  & a, & a:visited {
    text-decoration: none;
    color:inherit;
  }
}

.card_financerecord .finrecfiles td.type,
.card_financerecord .finrecfiles td.date {
  padding-right: 5px;
}

.card_financerecord .finrecfiles td.date { width: 25%; }

.card_financerecord .finrecfiles td.icon {
  width: 16px; padding: 0;
  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 tr.file td.icon:first-child {
  background-image: none;
  padding: 0 0 0 2px;
}

.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: 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: 0;
    top:auto;
    left: 0;
    right: 0;
    z-index: 100000;
  }

  .toastcontainer .toast-close {
    position: absolute;
    right: 20px;
    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);*/
  border-top: 1px solid var(--color-card-header-background, rgba(255, 255, 255, 0.125));
  border-left: 1px solid var(--color-card-header-background, rgba(255, 255, 255, 0.125));
  border-right: 1px solid var(--color-card-header-background, rgba(0, 0, 0, 0.125));
  border-bottom: 1px solid var(--color-card-header-background, rgba(0, 0, 0, 0.125));

  box-sizing: border-box;
}

.preview-card-main[style] {
  border-width: 3px;
}

.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;
  padding: 2px;
}

.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;
  max-height: 300px;
  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;
}

.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: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: 3px 8px 8px 8px;
  box-sizing: border-box;
  overflow: clip;
}

.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);
  height:100%;
}

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

/* Alles was Lichtkanten braucht um sichtbar zu bleiben: Popups, Modale, Dialoge, usw */
fp-modal, fp-popup, .boxarea .box>*, bigpreview-info-card {
  border-top: 1px solid rgba(255, 255, 255, 0.125);
  border-left: 1px solid rgba(255, 255, 255, 0.125);
  border-right: 1px solid rgba(0, 0, 0, 0.125);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}


.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: #111;
  color: #EEE;
  font-size: 12px;
  font-family: 'Consolas', Monospace, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-basis: 20px;
  flex-shrink: 0;
}

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


/* Kleine Displays: Das Menü besteht nur noch aus Hamburger und Avatar */
@media (orientation: portrait) and (max-width: 500px), (orientation: landscape) and (max-height: 500px){/*mobile*/

  body, body.mobile-device {
    --width-sidebar: 64px;
    --holepunch-offset: min(env(safe-area-inset-top), 4px);
    --height-topmenu1: 48px; /* wegen Hole-Punch und notched Displays ist der Streifen oben eh breit genug */
  }

  div.flexContainer > #tmplContent{ grid-column: left / end; grid-row: main / end; }
  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 / end; grid-row: menu; z-index: 1005;
    background-color: var(--color-footer-back);
    margin-top: calc(-1 * var(--holepunch-offset));
  }
  div.flexContainer > fp-menu-controller#tmplMenu[open] {
    z-index: 1100;
  }

  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;
    max-height: calc(100vh - 64px);}
  .tmplMenuTop {text-align: center;}


  div.flexContainer > fp-sidebar {   grid-column: right; grid-row: menu;
    --color-footer-back: var(--color-menu1-back);
    --color-footer-font: var(--color-menu1-font);
    --color: var(--color-footer-font);
    z-index: 1005;


    /* Der "Dock-Toggle" kommt weg und der header rückt auf: */
    --sidebar-dock-toggle-display: none;
    & div.contentarea > .header {padding-right: 0;}
  }

  div.flexContainer > fp-sidebar:not(.open) {
    /* Alles damit ios die Cico-Warnung anzeigt: */
    overflow: visible;
    /* buttons erstmal ausblenden (Der Avatar ist immer sichtbar) */
    & > fp-sidebar-button:not(:first-of-type) {
      animation: none;
      display: none;
    }
    & > [slot] { display: none;}
  }

  fp-sidebar.open {
    & > fp-sidebar-button { display: block; }
    & > [slot] { display: block; }
  }


  fp-sidebar-button:first-of-type {
    height: var(--height-topmenu1);
    margin-top: calc(-1 * var(--holepunch-offset));
    display: block;
  }

  div.flexContainer > fp-sidebar.open {
    z-index: 1005;
    position: relative;
    height: 85vh;
    /* jetzt nochmal modern, für browser, die dvh unterstützen*/
    height: 100dvh;

    & fp-sidebar-button {
      animation-name: slide-in;
      animation-duration: 200ms;
      animation-fill-mode: both;
      animation-timing-function: var(--transition-overshoot-ease);
    }
  }

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

@media (orientation: portrait) and (max-width: 360px) {
  /*small mobile*/
  body, body.mobile-device {
    --width-sidebar: 48px;
  }
}
.pdfFallbackButton {
  margin: 24px auto auto auto !important;
  display: block;
  width: 150px;
  height: 280px;
  text-align: center;
}

.pdfFallbackButtonBig {
  display: block;
  width: min(450px, 80vw);
  height: auto;
  text-align: center;
  background-size: 90%;
  background-repeat: no-repeat;
  background-position: center;
  aspect-ratio: 2 / 3;
}

@media (orientation: landscape) {
  .pdfFallbackButtonBig {
    max-height: calc(95vh - 200px);
    background-size: 85%;
    width: auto;
  }
}