:root {
    --bg0: rgb(255,255,255); /* bg für "Layer 0"*/
    --bg1: rgb(245,245,245); /* bg für "Layer 1" (zb etwas dünkler, oder im darkmode bissi heller als bg0...)*/
    --bg2: rgb(240,240,240); /* bg für "Layer 2"*/
    --bg3: rgb(235,235,235); /* usw*/
    --bg4: rgb(230,230,230);
    --bg0: rgb(255,255,255); /* bg für "Layer 0"*/
    --bg1: rgb(245,245,245); /* bg für "Layer 1" (zb etwas dünkler, oder im darkmode bissi heller als bg0...)*/
    --bg2: rgb(240,240,240); /* bg für "Layer 2"*/
    --bg3: rgb(235,235,235); /* usw*/
    --bg4: rgb(230,230,230);
    --fontSizeDefault: 15px;
    --fontSizeSmall: 12px;
    --fontSizeXsmall: 10px;
    --fontSizeLarge: 18px;
    --fontSizeXlarge: 24px;
    --fontSizeXXlarge: 36px;
    --fontSizeXXXlarge: 48px;
    --fontSizeSmaller: 0.86em;
    --fontSizeXsmaller: 0.75em;
    --fontSizeLarger: 1.24em;
    --fontSizeXlarger: 1.36em;
    --buttonDefaultBG: var(--mediumTransparent);
    --buttonDefaultTXT: var(--fontColorDefault);
    --marginTopbar: 40px;
    --primary: var(--mds-green);
    --primaryText: #fff;
    --secondary: var(--mds-gray);
    --secondaryText: #fff;
    --tertiary: var(--mds-light-gray);
    --tertiaryText: #000;
    --currentColor: var(--mds-gray);
    --currentTextcolor: var(--primaryText);
    --special: var(--mds-blue);
    --specialText: #fff;
    --bright: #fff;
    --brightTransparent: var(--mds-bright-transparent);
    --mediumBrightTransparent: var(--mds-light-gray-transparent);
    --mediumTransparent: var(--mds-dark-transparent);
    --darkTransparent: var(--mds-dark-transparent);
    --mediumDarkTransparent: var(--mds-dark-transparent);
    --darkTransparent: var(--mds-dark-transparent);
    --brightInput: white;
    --warningBG: var(--w3PaleRed);
    --warningText: #fff;
    --warning: var(--w3Red);
    --warningYellow: var(--w3PaleYellow);
    --warningYellowText: var(--dark);
    --success: var(--w3Green);
    --successBG: var(--w3PaleGreen);
    --round: var(--w3Round);
    --rounder: calc(2 * var(--round));
    --roundest: 20em;
    --paddingX: var(--w3PaddingX);
    /*0.8rem;*/
    --paddingSmallX: var(--w3PaddingSmallX);
    /*0.4rem;*/
    --paddingY: var(--w3PaddingY);
    /* 0.4rem;*/
    --paddingSmallY: var(--w3PaddingSmallY);
    /*0.2rem;*/
    --padding: var(--paddingY) var(--paddingX);
    --paddingSmall: var(--paddingSmallY) var(--paddingSmallX);
    --paddingLarge: calc(1.6 * var(--paddingY)) calc(1.6 * var(--paddingX));
    --paddingLargeX: calc(1.6 * var(--paddingX));
    --paddingLargeY: calc(1.6 * var(--paddingY));
    --paddingXLarge: calc(2.2 * var(--paddingY)) calc(2.6 * var(--paddingX));
    --paddingXLargeX: calc(2.6 * var(--paddingX));
    --paddingXLargeY: calc(2.2 * var(--paddingY));
    --marginY: calc(1.1 * var(--paddingY));
    --marginX: calc(1 * var(--paddingX));
    --transparent: rgb(0, 0, 0, 0);
    --fontawesome: "Font Awesome 5 Free";
    --transitionDurationShort: 0s;
    --transitionDurationLong: 0.15s;
    --boxShadowSmallLight: 1px 3px 3px 0px var(--darkTransparent);
    --boxShadowSmallMedium: 2px 3px 6px 0px var(--darkTransparent);
    --boxShadowMediumLight: 0 2px 5px 0 rgba(0,0,0,0.12), 0 2px 10px 0 rgba(0,0,0,0.10);
    --boxShadowMediumMedium: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    --boxShadowLargeMedium: 0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19);
    --boxShadowMediumDark: 0 2px 5px 0 rgba(0,0,0,0.4),0 2px 10px 0 rgba(0,0,0,0.25);
    --boxShadowLargeDark: 0 4px 10px 0 rgba(0,0,0,0.4),0 4px 20px 0 rgba(0,0,0,0.25);
    --borderColor: var(--medium);
    --mediumBright: var(--mds-light-gray);
    --medium: var(--mds-gray);
    --mediumDark: #333;
    --dark: #222222;
    /*var(--mds-gray);*/
    --veryDark: black;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
#topBar_layout > #menu_btn{
    display:unset;
}

.hidden:not(.mds-fade) {
    visibility: hidden !important;
}

.hidden.mds-fade {
    transition-property: opacity, visibility;
    visibility: hidden;

}
/* GANZ WICHTIG: zentrale Akzentfarben, Sekundär und Tertiär!*/
/* Reihenfolge beachten: untere sind "wichtiger" wenn gleichzeitig in Benutzung*/
.tertiaryBG {
    background-color: var(--tertiary);
    color: var(--tertiaryText);
    --currentColor: var(--tertiary);
    --currentTextcolor: var(--tertiaryText);
}

.tertiaryTXT {
    color: var(--tertiary) !important;
}

.secondaryBG {
    background-color: var(--secondary);
    color: var(--secondaryText);
    --currentColor: var(--secondary);
    --currentTextcolor: var(--secondaryText);
}

.secondaryOutline {
    outline: 2px solid var(--secondary);
}

.secondaryTXT {
    color: var(--secondary) !important;
}

.accentBG, .primaryBG {
    background-color: var(--primary);
    color: var(--primaryText);
    --currentColor: var(--primary);
    --currentTextcolor: var(--primaryText);
}

.accentTransparentBG, .primaryTransparentBG {
    background-color: var(--accentThemeTransparent);
}



.accentOutline, .primaryOutline {
    outline: 2px solid var(--primary);
}

.accentTXT, .primaryTXT {
    color: var(--primary) !important;
}

.complimentaryBG {
    background-color: var(--complimentary);
    color: var(--complimentaryText);
    --currentColor: var(--complimentary);
    --currentTextcolor: var(--complimentaryText);
}

.complimentaryTXT {
    --currentTextcolor: var(--complimentary);
    color: var(--complimentary) !important;
}

.brightTransparentBG {
    background-color: var(--brightTransparent);
    /*backdrop-filter:blur(2px);*/ /* das führt manchmal dazu dass absolut positionierte Container, die drüberlappen, geblurred werden */
}

.brightOpaqueBG {
    background-color: var(--veryBright);
    color: var(--veryDark);
}

.mediumDarkBG {
    background-color: var(--mediumDark);
    color: var(--bright);
}

.mediumDarkTXT {
    color: var(--mediumDark) !important;
}

.mediumTXT {
    color: var(--medium) !important;
}

.mediumBG {
    background-color: var(--medium);
}

.mediumBrightBG {
    background-color: var(--mediumBright);
}

.mediumBrightTXT {
    color: var(--secondaryThemeL4);
}

.mediumBrightTransparentBG {
    background-color: var(--mediumBrightTransparent);
}

.mediumBrightTransparentTXT {
    color: var(--mediumBrightTransparent);
}

.mediumTransparentBG {
    background-color: var(--mediumTransparent);
}

.mediumTransparentTXT {
    color: var(--mediumTransparent);
}

.darkTransparentBG {
    background-color: var(--darkTransparent);
}

.darkTransparentTXT {
    color: var(--darkTransparent);
}
.invisible {
    visibility: hidden;
}

.transparent, .transparentBG {
    background-color: var(--transparent);
}

.highlightBG, .specialBG {
    background-color: var(--special);
    color: var(--specialText);
    --currentColor: var(--special);
    --currentTextcolor: var(--specialText);
}

/*.w3-input[type=date]{
    padding:4px;
}
*/
.mainTopBarTitleContainer {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    justify-content: center;
    font-weight: bold;
    user-select:none;
    
}

div[data-dojo-attach-point='editorFiltercontainer'] label {
    margin-top: 10px;
    display:block;
}



div.flex_row>.zal-table-action-button { /* ein zal-table-action-button der in einem div drin ist das mit flex_row klassifiziert ist */
    margin-right:8px;
}

.square {
    border-radius: 0;
}

.round {
    border-radius: var(--round);
}

.rounder {
    border-radius: calc(2 * var(--round));
}

.roundest {
    border-radius: calc(20 * var(--round));
}

.border {
    border: 1px solid var(--medium);
}

.borderTop {
    border-top: 1px solid var(--medium);
}

.borderBottom {
    border-bottom: 1px solid var(--medium);
}

.borderLeft {
    border-left: 1px solid var(--medium);
}

.borderRight {
    border-right: 1px solid var(--medium);
}

.tertiaryBorder {
    border: 1px solid var(--tertiary);
}

.secondaryBorder {
    border: 1px solid var(--secondary);
}

.darkBorder {
    border: 1px solid var(--dark);
}

.brightBorder {
    border: 1px solid var(--bright);
}

.primaryBorder, .accentBorder {
    border: 1px solid var(--primary);
}

.thick:is(.border, .primaryBorder, .tertiaryBorder, .secondaryBorder, .darkBorder, .brightBorder) {
    border-width: 2px;
}

.hoverDark, .hoverBright,
.hoverTxtBright, .hoverTxtDark,
.hoverPrimary, .hoverTxtPrimary,
.hoverComplimentary, .hoverTxtComplimentary {
    cursor: pointer;
    --hoverColor: var(--medium);
    transition: var(--transitionDurationLong);
}
.hoverDark {
    --hoverColor: var(--darkTransparent);
}

.hoverTxtDark {
    --hoverColor: var(--dark);
}

.hoverBright {
    --hoverColor: var(--brightTransparent);
}

.hoverTxtBright {
    --hoverColor: var(--bright);
}

.hoverPrimary {
    --hoverColor: var(--accentThemeTransparent);
}

.hoverTxtPrimary {
    --hoverColor: var(--primary);
}

.hoverComplimentary {
    --hoverColor: var(--complimentaryThemeTransparent);
}

.hoverTxtComplimentary {
    --hoverColor: var(--complimentary);
}


.hoverBright:hover, .hoverBright.hover,
.hoverDark:hover, .hoverDark.hover,
.hoverPrimary:hover, .hoverPrimary.hover,
.hoverComplimentary:hover, .hoverBright.hover {
    transition: var(--transitionDurationShort);
    --hoverBoxShadow: inset 0 0 0 500px var(--hoverColor);
    box-shadow: var(--hoverBoxShadow);
    cursor: pointer;
}

.hoverTxtBright:hover, .hoverTxtBright.hover,
.hoverTxtDark:hover, .hoverTxtDark.hover,
.hoverTxtPrimary:hover, .hoverTxtPrimary.hover,
.hoverTxtComplimentary:hover, .hoverTxtComplimentary.hover {
    transition: var(--transitionDurationShort);
    cursor: pointer;
    color: var(--hoverColor);
}

.backdropblur {
    backdrop-filter: blur(2px);
}

.blur {
    filter: blur(2px);
}

.noInteraction {
    pointer-events: none;
}

.noMargin {
    margin: 0;
}

.noPadding {
    padding: 0;
}
.hover-to-reveal-child {
}

.hover-to-reveal-child > * {
    display: none;
}
.hover-to-reveal-child:hover > * {
    display: unset;
}

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

.italic {
    font-style: italic;
}

.bold {
    font-weight: bold;
}

.underlined {
    text-decoration: underline;
}

.strikethrough {
    text-decoration: line-through;
}
    
.padding
{
    padding: var(--padding);
}

.paddingLeft {
    padding-left: var(--paddingX);
}

.paddingRight {
    padding-right: var(--paddingX);
}

.paddingSmallLeft {
    padding-left: var(--paddingXSmall);
}

.paddingSmallRight {
    padding-right: var(--paddingXSmall);
}

.paddingSmall {
    padding: var(--paddingSmall);
}

.padding-X {
    padding-left: var(--paddingX);
    padding-right: var(--paddingX);
}

.padding-Y {
    padding-top: var(--paddingY);
    padding-bottom: var(--paddingY);
}

.paddingSmall-X {
    padding-left: var(--paddingXSmall);
    padding-right: var(--paddingXSmall);
}

.paddingSmall-Y {
    padding-top: var(--paddingYSmall);
    padding-bottom: var(--paddingYSmall);
}

/* GANZ WICHTIG: zentrale Akzentfarben, Sekundär und Tertiär!*/
/* Reihenfolge beachten: untere sind "wichtiger" wenn gleichzeitig in Benutzung*/

.tertiaryBG {
    background-color: var(--tertiary);
    color: var(--tertiaryText);
    --currentColor: var(--tertiary);
    --currentTextcolor: var(--tertiaryText);
}

.tertiaryTXT {
    color: var(--tertiary);
}

.secondaryBG {
    background-color: var(--secondary);
    color: var(--secondaryText);
    --currentColor: var(--secondary);
    --currentTextcolor: var(--secondaryText);
}

.secondaryTXT {
    color: var(--secondary);
}

.accentBG, .primaryBG, .accentcolor {
    background-color: var(--primary);
    color: var(--primaryText);
    --currentColor: var(--primary);
    --currentTextcolor: var(--primaryText);
}

.accentTXT, .primaryTXT {
    color: var(--primary);
}

.complimentaryBG {
    background-color: var(--complimentary);
    color: var(--complimentaryText);
    --currentColor: var(--complimentary);
    --currentTextcolor: var(--complimentaryText);
}

.complimentaryTXT {
    color: var(--complimentary);
}

.brightTransparentBG {
    background-color: var(--brightTransparent);
}

.mediumBrightTransparentBG {
    background-color: var(--mediumBrightTransparent);
}

.mediumTransparentBG {
    background-color: var(--mediumTransparent);
}

.darkTransparentBG {
    background-color: var(--darkTransparent);
}

.highlightBG, .specialBG {
    background-color: var(--special);
    color: var(--specialText);
    --currentColor: var(--special);
    --currentTextcolor: var(--specialText);
}

.highlightTXT, .specialTXT {
    color: var(--special);
}


.sectionBG {
    background-color: var(--mds-white-transparent);
    box-shadow: 0px 2px 5px var(--mds-dark-transparent);
    border-radius: 4px;
    padding: var(--w3Padding);
    margin-bottom: var(--w3MarginY);
    /*backdrop-filter:blur(2px);*/
}



    .sectionBG.center {
        display: flex;
        justify-content: center;
    }

    .sectionBG .sectionBG {
        border: 1px solid var(--medium);
        box-shadow: none;
    }
    body:has(.w3-main > .w3-content){
        background-color:rgba(222,225,235,0.2);
    }
    body .w3-main > .w3-content{
        background-color:white;
    }
.w3-main > .w3-content::before {
    content: '';
    position: fixed;
    background-color: white;
    pointer-events: none;
    z-index: -1;
    left: calc(50% - 490px - var(--paddingX));
    right: calc(50% - 490px - var(--paddingX));
    top: 0;
    bottom: 0;
    box-shadow: -60px 0px 60px -10px var(--mediumTransparent), 0px 0px 6px var(--mediumTransparent), 60px 0px 60px -10px var(--mediumTransparent);
}
.w3-main > .w3-content {
     
}
pre{
    background-color:var(--mediumTransparent);
    padding:var(--paddingYSmall);
    margin:0;
}
textarea, textarea.resizeNone {
    display: block;
    resize: none;
}

    textarea.resizeV {
        resize: vertical;
    }

    textarea.resizeH {
        resize: horizontal
    }

    textarea.resize {
        resize: both;
    }

    textarea.w3-input {
        border: 1px solid #ccc;
    }
label.w3-disabled {
    opacity: 0.6;
}
.mds-border.accentcolor,
.mds-border-orange.accentcolor {
    border-color: var(--primary);
}

.highlightContainer {
    animation-duration: 0.6s;
    animation-fill-mode: both;
    animation-name: highlightcontainer;
    animation-iteration-count:6;
    outline:4px solid var(--primary);
    animation-direction:alternate;
}

@keyframes highlightcontainer {
    0%, 20% {
        background-color: rgba(255,255,100,0.2);
    }

    80%, 100% {
        background-color: rgba(255,255,0,0.8);
    }
}


.infoBG {
    background-color: var(--w3PaleBlue);
    color: var(--dark);
    --currentTextcolor: var(--dark);
    outline: 1px solid var(--w3LightBlue);
    padding: 2px;
    border-radius: var(--round);
    line-height: 1.4;
    .darkTheme &

{
    background-color: transparent;
    box-shadow: inset 0px 0px 6em -3em var(--w3PaleBlue);
    color: inherit;
}

}

.infoBG:not(.big, .large) {
    font-size: var(--w3SmallFont);
    margin: var(--padding);
}

.infoBG:not(.noIcon, td, tr) {
    display: flex;
    align-items: center;
}

.infoBG:not(.noIcon, button, td, tr)::before {
    content: '\f05a';
    font-family: var(--fontawesome);
    font-weight: bold;
    padding: var(--paddingSmall);
    color: var(--w3LightBlue);
    align-self: flex-start;
    font-size: 1.2em;
    height: 2lh;
    align-content: center;
    display: flex;
    /* Chrome braucht noch mehr: */
    flex-direction: row;
    align-items: center;
}

.infoBG.border {
    border-color: var(--w3LightBlue);
    outline: none;
}

.warningYellowBG.border {
    border-color: var(--w3Amber);
    outline: none;
}

.warningYellowBG:not(.noIcon, button, td, tr) {
    display: flex;
    align-items: center;
}

    .warningYellowBG:not(.noIcon, button, td, tr)::before {
        content: '\f12a'; /*'\f27a'; <- comment-alt, info-circle -> '\f06a';*/
        font-family: var(--fontawesome);
        font-weight: bold;
        padding: var(--paddingSmall);
        color: var(--w3Amber);
        align-self: flex-start;
        font-size: 1.2em;
        height: 2lh;
        align-content: center;
        display: flex;
        /* Chrome braucht noch mehr: */
        flex-direction: row;
        align-items: center;
    }

.warningBG {
    color: var(--warning);
    background-color: var(--warningBG) !important;
    outline: 1px solid var(--warning);
}

    .warningBG:is(p, div, span, textarea) {
        padding: 2px;
        border-radius: var(--round);
    }

    .warningBG.border {
        outline: none;
        border-color: var(--warning);
    }

    .warningBG:not(.noIcon, button, tr, td) {
        display: flex;
        align-items: center;
    }

    .warningBG:not(.noIcon, button, td, tr)::before {
        content: '\f071';
        font-family: var(--fontawesome);
        font-weight: bold;
        padding: var(--paddingSmall);
        /*color: var(--warningYellow);*/
        align-self: flex-start;
        font-size: 1.2em;
        align-content: center;
        display: flex;
        /* Chrome braucht noch mehr: */
        flex-direction: row;
        align-items: center;
        height: 2lh;
    }

.warningTXT {
    color: var(--warning) !important;
}


.propertiesTable {
    width: 100%;
    border-collapse: collapse;
}

/*.propertiesTable tr:hover {
    box-shadow: inset 0 0 0 500px rgba(0, 0, 0, 0.1);
    outline:2px solid var(--tertiary);
}
*/
.propertiesTable th {
    border-bottom: 1px solid black;
    padding-left: 4px;
    text-align: left;
}

.propertiesTable input.w3-input {
    margin-top: 0px !important;
}

.propertiesTable td {
    padding-left: 4px;
}

.substitutionActive {
    --primary: var(--mds-yellow);
    --primaryText: var(--dark);
    background: repeating-linear-gradient( 45deg, #ff690022, #ff690022 20px, rgba(255,255,255,0) 20px, rgba(255,255,255,0) 40px );
    background-attachment: fixed;
}

.propertiesTable tr.ping {
    background-color: unset;
}
.propertiesTable tr.pong:not(.w3-pale-red) {
    background-color: var(--mediumBrightTransparent);
}
.propertiesTable {
    --originMarkingColor: var(--complimentaryThemeL3);
}
    .propertiesTable tr.propRow.inactive:first-of-type td {
        padding-top:12px;
    }
    .propertiesTable tr.propRow.inactive td {
       background-color:var(--medium);
       color:var(--brighter);
      
    }
    
    
    .propertiesTable tr.propRow.origin td:first-child {
        box-shadow: inset 8px 0px var(--originMarkingColor);
        padding-left: 12px;
    }
    .propertiesTable tr.propRow.origin td:last-child {
        box-shadow: inset -8px 0px var(--originMarkingColor);
        padding-right: 12px;
    }
    .propertiesTable tr.propRow.origin td.helptext {
        box-shadow: inset 8px 0px var(--originMarkingColor), inset -8px 0px var(--originMarkingColor);
        padding-right: 12px;
        padding-left: 12px;
    }/*
.propertiesTable tr.propRow.origin td.helptext {
    display: none;

}*/

.propertiesTable td.helptext {
    padding: var(--paddingSmall);
    color: black; /*var(--secondary);*/
    font-style: italic;
    font-size:0.9em;
}
    .propertiesTable td.helptext > span {
        opacity: 0.7;
    }

.propertiesTable select[disabled=true],
.propertiesTable textarea[disabled=true],
.propertiesTable input[disabled=true]{
    color:black;
}

.propertiesTable .propRow.bottom{
    border-bottom: 1px solid var(--tertiary);
}

.propertiesTable .propRow.w3-pale-red.bottom {
    border-color: var(--warning);
}
.propertiesTable td.helptext span::before {
    content: '\f05a';
    font-family: "Font Awesome 5 Free";
    margin-right: 0.4em;
    font-weight: bold;
    font-style: normal;
}

.propertiesTable .hintbox  .w3-disabled[data-dojo-attach-point=outerInput] {
    opacity: 1;
}

.assistentWorkamountTable{
    border-collapse:collapse;
}
.assistentWorkamountTable tr.mandatoryMissing {
    outline:1px solid var(--warning);
    background-color:var(--w3PaleRed);
    border-radius:var(--round);
}

.assistentWorkamountTable tr.mandatoryMissing input{
    background-color:var(--warning);
    color: var(--warningText);
}

.assistentWorkamountTable tr::after {
    content: 'h';
    position: relative;
    top: 2em; /* magic number... wird nicht ewig gut gehen*/
}


    .materialTable {
        width: 100%;
    }

    .assistentWorkamountTable td,
    .flatrateTable td,
    .materialTable td {
        vertical-align: middle;
        text-align: end;
    }

    .materialTable .customItem td {
        vertical-align: bottom;
        text-align: center;
    }


    .flatrateTable input,
    .materialTable input,
    .assistentWorkamountTable input{
        width: 70px;
    }

.materialTable .centerContainer {
    display: flex;
    flex-flow:column;
    align-items: center;
}

.offlineDataCount{
font-size:0.9em;
}

.offlineDataCount :first-child{
    font-weight:bold;
    font-size:1.1em;
}

#mainContent.offline {
    background: repeating-linear-gradient( 45deg, #eee, #eee 40px, rgba(255,255,255,0) 40px, rgba(255,255,255,0) 80px );
    background-attachment: fixed;
}

/* LabourReview */
.labourreviewtbl {

}

    .labourreviewtbl table {
        border-collapse:collapse;
        width:100%;
    }

    .labourreviewtbl th {

    }

    .labourreviewtbl .colHead{
        
    }

    .labourreviewtbl table.executerTable td.empty {
        border: 0px;
        /*background-color:red;*/
    }

    .labourreviewtbl .colHead,
    .labourreviewtbl th {
        font-weight: bold;
        text-align: left;
        background-color: var(--tertiary);
        /*background-color:red;*/
    }

    .labourreviewtbl .sum {
        font-weight:bold;
        background-color:var(--mediumBrightTransparent);
    }

.labourreviewtbl table.executerTable td.dayHeading {
    text-align: center;
    font-weight: bold;
    font-size: 1.5em;
    border: 0px;
    padding-bottom:0.2em;
}

    .labourreviewtbl table td {
        border-top: 1px solid var(--tertiary);
        padding: var(--paddingSmall);
    }
    .labourreviewtbl table.executerTable td,
    .labourreviewtbl th {
        border: 1px solid var(--tertiary);
        padding: var(--paddingSmall);
    }

.itemclass.selected {
    /*outline: 2px solid var(--secondary);*/
    /*outline-offset: -2px;*/
    box-shadow: inset 0px 3px 0 1px var(--tertiary);
    opacity: 1;
    font-weight:bold;
}

.inventoryPropRow {

}

.maintenanceTaskRow {
    
}



.maintenanceTaskRow label,
.inventoryPropRow .label {
    color: var(--secondary);
    font-size: 0.8em;
}

.maintenanceTaskRow div,
.inventoryPropRow .value {
    /*color: black;*/
    font-weight:bold;
}

.entityView{
    font-size:1rem;
}

    .entityView > * {
        margin-top: 0.5em;
    }

    .entityView label {
        color: var(--secondary);
        font-size: 0.8em;
    }


    .entityView pre {
        white-space: break-spaces;
    }

        .entityView label + *:is(p, div) {
            margin-top:0em;
            /*color: black;*/
            font-weight: bold;
            min-height:1em;
        }

/* LOGINFORM */
.loginForm .userInfoContainer {
    margin-top: var(--paddingY);
    margin-bottom: var(--paddingY);
}

#profilePicDlg {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

    #profilePicDlg .profilePicContainer {
        /*padding:var(--paddingSmall);*/
        /*background-color:var(--tertiary);*/
        display: flex;
        flex-flow: column;
        justify-content: center;
    }

    #profilePicDlg .deleteIcon {
        margin-right: 0.4em;
    }

    #profilePicDlg img.profilePic {
        border: 2px solid var(--tertiary);
        max-height: 20rem;
    }

    #profilePicDlg .profilePicContainer {
        position: relative;
        cursor: pointer;
    }

        #profilePicDlg .profilePicContainer::after {
            font-family: var(--fontawesome); /*"Font Awesome 5 Free";*/
            content: '\f07c'; /* Folder-Open */
            color: white;
            font-weight: bold;
            font-size: 3em;
            display: flex;
            flex-flow: column;
            justify-content: center;
            text-align: center;
            position: absolute;
            height: 100%;
            width: 100%;
            background-color: var(--mediumTransparent);
            pointer-events: none;
            opacity: 0;
            transition: opacity var(--mds-hover-transition-out) ease-out;
        }

        #profilePicDlg .profilePicContainer:hover::after {
            opacity: 1;
        }

        #profilePicDlg .profilePicContainer img.changed {
            border-color: var(--primary);
        }

        #profilePicDlg .profilePicContainer img {
            min-width: 12rem;
        }

        #profilePicDlg .profilePicContainer.empty img {
            min-height: 15rem;
            min-width: 12rem;
            visibility: hidden;
        }

        #profilePicDlg .profilePicContainer.empty::before {
            content: '\f2bd'; /*user-circle*/
            color: var(--mediumTransparent);
            font-family: var(--fontawesome); /*"Font Awesome 5 Free";*/
            font-size: 3em;
            pointer-events: none;
            display: flex;
            flex-flow: column;
            justify-content: center;
            text-align: center;
            border: 2px solid var(--mediumTransparent);
            position: absolute;
            height: 100%;
            width: 100%;
        }

        #profilePicDlg .profilePicContainer.empty {
            /*background-color:red;*/
        }

    #profilePicDlg .hidden {
        visibility: hidden;
        pointer-events: none;
        position: absolute;
        opacity: 0;
        bottom: -100%;
    }

.loginForm .profilePic::after {
    content: '\f303'; /*pencil-alt*/
    color: white; /*var(--brightTransparent);*/
    background-color: var(--mediumTransparent);
    font-family: var(--fontawesome); /*"Font Awesome 5 Free";*/
    pointer-events: none;
    opacity: 0;
    z-index: 10;
    position: absolute;
    top: -25%;
    width: 150%;
    left: -25%;
    height: 150%;
    border-radius: 50%;
    text-align: center;
    font-size: 0.75em;
    line-height: 2; /* damit Icon halbwegs mittig, is aber nicht die schönste Lösung... */
    transition: opacity var(--mds-hover-transition-out) ease-out;
}

.loginForm .profilePic {
    margin-right: 0.4em;
    position: relative;
    transition: transform var(--mds-hover-transition-out) ease-out;
    cursor: pointer;
}

    .loginForm .profilePic img.profilePic {
        position: absolute;
        z-index: 5;
    }

    .loginForm .profilePic:hover {
        transform: scale(1.1);
    }

        .loginForm .profilePic:hover::after {
            opacity: 1;
        }

.maintenanceTaskHome_Root .tabulator-table .taskStatusLabel{
    padding:calc(0.5 * var(--round));
    border-radius:var(--round);
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:clip;
    margin-bottom:var(--round);
}

.maintenanceTaskForm .executerTable {
    /*border: 1px solid var(--mediumBright);*/
    border-spacing: var(--paddingY);
    /*border-collapse:collapse;*/
    table-layout: fixed;
    width: 99%;
    text-align: left;
}
    .maintenanceTaskForm .executerTable tr.myExecution{
        outline:2px solid var(--primary);
        font-weight:bold;
    }
    .maintenanceTaskForm .executerTable tr {
        outline: 1px solid var(--mediumBright);
    }

    .maintenanceTaskForm .executerTable tr.myExecution td {
        /*border-left: 4px solid var(--primary);*/
        border-color:transparent;
    }
    .maintenanceTaskForm .executerTable td {
        /*border-bottom: 1px solid var(--mediumBright);
        border-top: 1px solid var(--mediumBright);*/
        padding: var(--paddingSmall);
        vertical-align:top;
    }
        .maintenanceTaskForm .executerTable td pre.executerHistory {
            font-family: inherit;
            font-size: 0.85em;
            font-weight:normal;
            max-width: 100%;
            /*overflow: auto;*/
            white-space: break-spaces;
            margin:0;
            line-height:1.3;
        }


.taskApproval_Root .staticTable td {
    letter-spacing: -0.1px;
    word-wrap: break-word; /* PLATZ!! wir haben KEINEN PLATZ */
}
.taskApproval_Root .staticTable  th[data-colname="select"],
.taskApproval_Root .staticTable  td[data-colname="select"]::before /* mobile Ansicht */
{
    font-family:var(--fontawesome);
    font-weight:normal;
}
.taskApproval_Root .staticTable  th[data-colname="markings"]{
    font-family:var(--fontawesome);
    
}

.taskApproval_Root .staticTable td[data-colname="markings"] i,
.taskApproval_Root .staticTable td[data-colname="select"] i{
    margin:0.4em;
}
.taskApproval_Root .staticTable td[data-colname="task"],
.taskApproval_Root .staticTable td[data-colname="occurrence"],
.taskApproval_Root .staticTable td[data-colname="fachbereich"] {
    word-wrap: anywhere;
}