.moreCoreEdit, .moreCore_NumberInput, 
.multiSelect_root, 
.searchSelect_root, 
.moreCoreRadioGroup_root,
.moreCoreColorPicker, 
.hintbox,
.moreCoreMenuRoot{
    font-size: 1rem;
}

.moreCoreEdit textarea{
    border-style:solid;
}

.moreCoreEdit.multilang button#multilangButton{
    border-radius:inherit;
    background-color:var(--complimentary);
    color:var(--complimentaryText);
}
.moreCoreEdit.multilang #mainRow {
    border-top-right-radius: var(--round);
    border-bottom-right-radius: var(--round);
}
/* moreCore: Symbol für ungültig ausgefüllte Controls */
.moreCore_ValidationMsgError {
    color: var(--warning);
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertikal zentrieren*/
}

    .moreCore_ValidationMsgError::before {
        content: '\f06a';
        font-family: var(--fontawesome);
        font-weight:bold;
        font-size: 1.1em;
        margin-right: 0.2em;
    }
/* Node in der Hinweise für ungültig ausgefüllte Controls stehen */
div.moreCore_ErrorMsgNode {
    display: flex;
    justify-content: center;
}

    div.moreCore_ErrorMsgNode.show {
        margin: 0 var(--paddingYSmall) 0 0;
    }

/* Input node for Edit in HTML mode */

.moreCoreEdit .html-input-node {
    min-height: 5em;
}


.loadingBar {
    height: 12px;
    width: 100%;
}
/* NAVIGATION & SIDEBAR */
#sidebar {
    top: 0;
    max-height: calc(100vh - var(--marginTopbar));
    margin-top: var(--marginTopbar);
    z-index: 18;
    width: 300px;
    box-shadow: 2px 0px 8px 2px var(--mediumTransparent);
    overflow: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
#sidebar #stickySection {
    box-shadow: 0px 0px 12px -4px var(--darkTransparent);
    padding-top: var(--paddingY);
    z-index: 1;
    max-height:78vh; /* #linksection + #stickysection sollten maximal 100 ergeben!*/
    /*min-height:*/
    overflow-y:auto;
}

    #sidebar #stickySection .sidebarNavigationHeader {
        margin-top: 0;
        margin-bottom: 0;
        padding: 8px 0 0 16px;
        padding-bottom: var(--paddingY);
    }


    #sidebar .sidebarPinButton.pinned {
        /*box-shadow: 0 0 0 2px var(--primary);*/
        background-color: var(--complimentary);
        color: var(--complimentaryText);
    }



    #sidebar #linkSection {
        flex: 1;
        overflow-y: auto;
        min-height: max(150px, 20vh); /* % viewport height - Rest sollte für den Stickycontainer benutzt werden! */
        margin-top: var(--paddingY);
        /*--selectedColor: var(--primary);*/
    }


    #sidebar .profilePicContainer {
        width: 2.7em;
        height: 2.7em;
        position: absolute;
        right: var(--paddingX);
    }
    #sidebar .userInfoContainer {
        margin-bottom: var(--paddingXSmall);
    }
        #sidebar .userInfoContainer.loading {
            position: relative;
            pointer-events: none;
        }#sidebar .userInfoContainer.loading > * {
        opacity:0.6;
    }
    #sidebar .userInfoContainer .profilePicContainer img.profilePic {
        top: unset;
        left: unset;
        right: unset;
        bottom: unset;
        position: relative;
        height: 100%;
        width: 100%;
        outline: 2px solid var(--secondary);
        outline-offset: -1px;
        pointer-events: none;
    }

#sidebar .userInfoContainer:hover {
    /*outline: 2px solid var(--primary);*/
}

#sidebar .userInfoContainer:hover .profilePicContainer img.profilePic {
    outline-color: var(--complimentary);
}
    #sidebar #linkSection .linkItem.selected > a
    {
        pointer-events: none;
        --selectedColor: var(--primary);
        background-color:var(--selectedColor);
        box-shadow: inset 0px -2px 0px 0px var(--selectedColor), inset 0px 2px 0px 0px var(--selectedColor);
    }
    #sidebar #linkSection .linkItem > a span{
        margin-left:0.8ch;
    }

    #sidebar #linkSection .linkItem.selected > a span { /* sonst funktionieren ggf. fa-icons nimmer ? */
        font-weight: normal;
    }
        #sidebar #linkSection .linkItem.selected > a *:is(i, span)
        {
            color: var(--primaryText);
        }

        #sidebar #linkSection .linkItem > a.mds-button-base {
            position: relative;
            padding-left: var(--paddingY) !important;
        }


    #sidebar #linkSection .linkItem > a .sidebarLinkIcon {
        color: var(--secondary);
        min-width:2.5ch;
        max-width:3.5ch;
        /*overflow:hidden;*/
    }
    #sidebar #linkSection .linkItem.selected .sidebarLinkIcon{

    }

    #sidebar #linkSection .linkItem > .subEntry {
        display: none;
        /*background-color: var(--accentThemeTransparent);*/
        /*box-shadow: inset 4px 0px var(--accentThemeTransparent);*/
        display: flex;
        color: var(--accentThemeD4);
        /*font-size: 0.9em;*/
        padding: var(--paddingSmall);
        padding-left: 1em;
        align-items: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex-wrap: nowrap;
        width: 100%;
        --linkColor: var(--accentThemeTransparent);
    }
    #sidebar #linkSection .linkItem > .subEntry > a > i{
        color: var(--accentThemeD3);
    }
        #sidebar #linkSection .linkItem > .subEntry.selected {
            /*box-shadow: inset 4px 0px var(--primary);*/
        }

        #sidebar #linkSection .linkItem > .subEntry > a {
            min-width: 10ch;
            flex: 1;
            border-top-left-radius: var(--round);
            border-bottom-left-radius: var(--round);
            padding: var(--paddingSmall);
            overflow: hidden;
            text-overflow: ellipsis;
            position:relative;
        }

            /*#sidebar #linkSection .linkItem > .subEntry > a::before {
                content: '';
                position: absolute;
                z-index: 1;
                inset: 0;
                pointer-events: none;
                box-shadow: inset 2px 0px var(--linkColor);
            }*/

        #sidebar #linkSection .linkItem > .subEntry.dirty > a::before {
            font-family: var(--fontawesome);
            font-weight: bold;
            content: '\f069';
            margin-right: 0.4em;
            color: var(--complimentaryThemeD4);
        }

        #sidebar #linkSection .linkItem > .subEntry.selected > a {
            pointer-events: none;
            background-color: var(--accentThemeTransparent);
        }

            #sidebar #linkSection .linkItem > .subEntry > a:only-child {
                border-top-right-radius: var(--round);
                border-bottom-right-radius: var(--round);
            }

            #sidebar #linkSection .linkItem > .subEntry > a > i {
                margin-right: 0.4em;
            }

            #sidebar #linkSection .linkItem > .subEntry > #closeBtn {
            
                background-color: transparent;
                border-radius: 0px;
                border-top-right-radius: var(--round);
                border-bottom-right-radius: var(--round);
            }
        #sidebar #linkSection .linkItem > .subEntry.selected > #closeBtn {
            background-color: var(--mediumTransparent);
        }
     
    #sidebar #linkSection a:hover .sidebarLinkIcon, #sidebar #linkSection a.selected .sidebarLinkIcon {
        /*color: var(--selectedColor);
        text-shadow: 1px 1px var(--dark);*/
        color:inherit;

    }

    /* NEUE SIDEBAR */
#dynamicSidebar {
    --animationSpeed: 2s; /* Achtung: das Timing wird im JS überschrieben, damit Timeouts etc dort führend sind*/
    --animationDelay:1s; /* und immer zusammen passen! */
    --animationSpeedShort:1s;
    --collapsedSidebarWidth: 40px;
    --openSidebarWidth: 300px;
    --collapsedItemWidth: var(--collapsedSidebarWidth);
    --currentWidth:var(--collapsedSidebarWidth);
    top: 0;
    height: calc(100vh - var(--marginTopbar));
    height: calc(100dvh - var(--marginTopbar)); /* dvh nimmt bei mobilen Browsern dynamische UI-Elemente in die Rechnung rein */
    margin-top: var(--marginTopbar);
    z-index: 18;
    width: var(--collapsedSidebarWidth);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: fixed;
    transition: var(--animationSpeed) ease-in-out width;
    box-shadow: -1px 0px 7px 2px var(--darkTransparent);
    background-color: var(--brighter);
    line-height:1.15;
}

.darkTheme #dynamicSidebar {
    background-color: var(--darkThemeBG);
    box-shadow: -4px 0px 8px 2px var(--mediumTransparent), 1px 0px var(--mediumDark);
}
.darkTheme #dynamicSidebar > #verticalContainer {
    background-color: var(--darkThemeBG);
}

.darkTheme  #dynamicSidebar .item,
.darkTheme #dynamicSidebar .link .label {
    color: var(--brightText);
}

#dynamicSidebar #mainLogoContainer{
    display:flex;
    justify-content:center;
}
#dynamicSidebar #topBar_logoContainer {
    flex-grow:1;
    justify-content: center;
    & img
    {
        transform: scale(0.85);
        max-width:100%;
    }
    
}

#dynamicSidebar .highlightedArea {
}

.darkTheme #dynamicSidebar .highlightedArea {
    background-color: var(--mediumDarkThemeBG);
}

#topBar_layout > #menu_btn {
    display: none;
}
@media screen and (max-width: 1080px) {
    #topBar_layout > #menu_btn {
        display: flex;
    }
    #dynamicSidebar {
        --collapsedItemWidth: 40px;
        --collapsedSidebarWidth: 0px;
        --openSidebarWidth: min(400px, 85vw);
    }

    #dynamicSidebar:not(.show){
        box-shadow:none;
    }

    /* Aufklappsymbol wächst mobil auf die ganze Breite, Symbol soll aber rechts bleiben */
        #dynamicSidebar #controlContainer #expanderContainer {
            flex-grow: 1;
            text-align: right;
            justify-content: end;
        }
        /* eigentlich brauchen wir den Container gar nicht. Weg damit. */
        #dynamicSidebar #controlContainer{
            display:none;
        }
}

#dynamicSidebar #expanderIcon{
    transition-property:transform;
    transition-duration:var(--animationSpeed);
    transition-timing-function:ease-in-out;
    transform:rotate(0deg);
}

#dynamicSidebar.show:not(.collapsing) #expanderIcon{
    transform:rotate(180deg);
}

#dynamicSidebar #controlContainer {
    gap: 0;
    flex-direction:row-reverse;
}

#dynamicSidebar #scrollingContainer{
    overflow-y:auto;
    flex-grow:1;
    overflow-x:clip;
    max-width:100%;
}

#dynamicSidebar #sidebar_content_top{
    max-height:299vh; /* braucht eine Maximalhöhe für die Animation*/
    line-height:initial;
}

#dynamicSidebar a {
    text-decoration: none;
}
    #dynamicSidebar.show:not(.collapsing) {
        width: var(--openSidebarWidth);
        --currentWidth: var(--openSidebarWidth);
    }


#dynamicSidebar > #verticalContainer {
   overflow-y:auto;
   overflow-x:clip;
   max-width:100%;
}
#dynamicSidebar .link {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-items: center;
    gap: var(--paddingXSmall);
    text-decoration: none;
    align-items: center;
    width: 100%;
    line-height: 1.3;
}

    #dynamicSidebar .collapsedWidth {
        width: var(--collapsedItemWidth);
    }

     #dynamicSidebar .dynamicWidth {
        width: var(--currentWidth);
    }
        #dynamicSidebar .dynamicWidth.animated {
            transition: var(--animationSpeed) ease-in-out width;
        }

#dynamicSidebar *:is(.link, #logoutContainer) .icon {
    width: var(--collapsedItemWidth);
    min-width: var(--collapsedItemWidth); /* ohne gehts nicht richtig*/
    padding: var(--paddingXSmall);
    color: var(--secondary);
    transition-duration: var(--transitionDurationLong);
    transition-property: color;
    order: 1;
    font-size: 1.1rem;
    text-align: center;
    justify-content: center;
}
#dynamicSidebar .link .icon i {
    transform: scale(0.8);
    transition-duration: var(--animationSpeedShort);
    transition-property: transform;
}
#dynamicSidebar *:is(.link, #logoutContainer):hover .icon {
    color: var(--accentThemeD4);
    transition-duration: var(--transitionDurationShort);
}
.darkTheme #dynamicSidebar *:is(.link, #logoutContainer):hover .icon {
    color: var(--accentThemeD1);
}

.subsitutionActive #dynamicSidebar #userInfoContainer {
    /*background-color: var(--userSubstitutionColor);
    color: var(--userSubstitutionColorContrasting);*/
    /* funktioniert nicht, zu unauffällig... */
}

#dynamicSidebar .label {
    text-align: left;
    white-space: nowrap;
    justify-content: end;
    text-overflow: ellipsis;
}
#dynamicSidebar .link .label {
    flex-grow: 1;
    color: var(--dark);
    /*display: none;*/
    opacity: 0;
    transition: var(--animationSpeedShort) opacity;
    transition-delay: var(--animationDelay);
    order: 1;
    pointer-events: none;
}

#dynamicSidebar .link.selected {
    background-color: var(--accentTheme);
    color: var(--accentThemeTxt);
    pointer-events: none;
}

#dynamicSidebar .link.clicked{
    background-color:var(--accentThemeTransparent);
    pointer-events:none;
}
ric
#dynamicSidebar.clicked .link:not(.clicked) {
    opacity:0.4;
    transition:var(--transitionDurationLong) opacity;
}#dynamicSidebar.clicked .item:has(.link:not(.clicked)) .subentryContainer {
    height:0;
}

#dynamicSidebar .link.selected > *:is(.label, .icon){
    background-color:var(--accentTheme);
    color: var(--accentThemeTxt)!important;
}

#dynamicSidebar.show .link .icon i {
    transform: scale(1);
}

#dynamicSidebar:not(.show) .link.hasSubentries .icon {
    position: relative;
    left: calc(-0.5 * var(--paddingXSmall));
    /*transform: translateX(calc(-1 * var(--paddingXSmall)));*/
}

    #dynamicSidebar:not(.show) .link.hasSubentries .icon:after {
        /*font-family: var(--fontawesome);
        content: '\f055';*/
        border-radius: 20em;
        padding: 0.1em;
        content: attr(data-subentrycount);
        font-weight: bold;
        color: var(--accentThemeL2txt);
        background-color: var(--accentThemeL2);
        /*outline: 1px solid currentColor;*/
        box-shadow:-1px -1px 2px var(--dark);
        position: absolute;
        font-size: 0.6em;
        min-width: 3ch;
        min-height: 3ch;
        right: calc(-0.5 * var(--paddingXSmall));
        bottom: 0em;
        display: flex;
        justify-content: center;
        align-items: center;
        /*transform: translateY(-50%);*/
    }


#dynamicSidebar.show .link .label {
    display: block;
    opacity: 1;
    /*pointer-events: all;*/
}
#dynamicSidebar.show.opening .link .label {
    opacity: 0;
}
#dynamicSidebar.show.collapsing .link .label {
    transition-delay: 0s;
    opacity: 0;
}

#dynamicSidebar.show .showOnCollapse {
    opacity: 0;
    transition: var(--animationSpeedShort) opacity;
    transition-delay: var(--animationDelay);
}
#dynamicSidebar.show.collapsing .showOnCollapse {
    opacity: 1;
}
#dynamicSidebar.show.opening .showOnCollapse {
    opacity: 0;
}
#dynamicSidebar .collapseV.fadeOnCollapse {
    transition-property: opacity, transform, max-height;
}
#dynamicSidebar .collapseV {
    max-width: 100%;
    overflow-x: clip;
}

#dynamicSidebar:not(.show) .collapseV {
    max-height: 0px !important;
    transition: var(--animationSpeedShort);
    transition-property: transform, max-height;
    transition-duration: var(--animationSpeedShort);
    transform: scale(0.9, 0.2) translateY(-20%);
    overflow-y: clip;
    white-space: nowrap;
}

#dynamicSidebar.show:not(.opening, .collapsing) .collapseV {
    transform: scale(1) translateY(0);
    /*max-height: inherit; *//* wir wissen es nicht, die Animation ist zum Scheitern verurteilt eigentlich...*/
    overflow-y: auto;
}


#dynamicSidebar.opening .collapseV {
    transform: scale(1) translateY(0);
    max-height: 100vh;
}

#dynamicSidebar.show.collapsing .collapseV {
    transform: scale(0.9, 0.2) translateY(-20%);
    white-space: nowrap;
}

    #dynamicSidebar .fadeOnCollapse {
        opacity: 0;
        /*display:none;*/
        transition: var(--animationSpeedShort) opacity;
        transition-delay: var(--animationDelay);
    }
    #dynamicSidebar.show.collapsing .fadeOnCollapse {
        opacity:0;
        transition-delay:0s;
    }
    #dynamicSidebar.show.opening .fadeOnCollapse {
        opacity:0;
    }
    #dynamicSidebar.show .fadeOnCollapse {
        /*display:block;*/
        opacity: 1;
    }

    #dynamicSidebar > #verticalContainer {
        height: 100%;
        width: var(--openSidebarWidth);
        display: flex;
        flex-direction: column;
        background-color: var(--brighter);
        overflow-y: auto;
        overflow: clip;
    }

    #dynamicSidebar > #sidebarOverlay {
        position: fixed;
        width: 100%;
        height: 100%;
        inset: 0;
        background-color: var(--darkTransparent);
        opacity: 0;
        transition: var(--animationSpeed) opacity;
        pointer-events: none;
        z-index: -1;
    }

     #dynamicSidebar.show:not(.pinned, .collapsing) > #sidebarOverlay{
        opacity:1;
        pointer-events:all;
    }



    #dynamicSidebar.pinned .pinButton {
        /*box-shadow: 0 0 0 2px var(--primary);*/
        background-color: var(--complimentary);
        color: var(--complimentaryText);
    }

#dynamicSidebar #userInfoContainer {
}

    #dynamicSidebar #userInfoContainer:hover {
    }

    #dynamicSidebar #userInfoContainer #userLink {
        overflow: hidden;
        min-width: var(--collapsedItemWidth); /* damit der Hoverlink so breit bleibt dass das User-Symbol sichtbar ist!*/
    }

    #dynamicSidebar #userInfoContainer #username {
        font-weight:bold;
    }
    #dynamicSidebar #userInfoContainer #userDisplayname {
        white-space:nowrap;
        text-overflow:ellipsis;
        overflow:hidden;
    }

  
    #dynamicSidebar #userInfoContainer #substituteUsernameContainer {
        display:none;
    }
#dynamicSidebar.subsitutionActive #userInfoContainer #substituteUsernameContainer {
    display: inline-block;
}

        #dynamicSidebar #userInfoContainer #substituteUsernameContainer #substituteUsername {
            color: var(--complimentaryThemeD4);
            font-weight:bold;
        }
#dynamicSidebar.subsitutionActive #userInfoContainer #username {
    opacity:0.5;
}
#dynamicSidebar.subsitutionActive #userInfoContainer #substitutionPrefix {
    opacity: 0.5;
}



#dynamicSidebar #logoutContainer{

}

#dynamicSidebar .link #userAvatar {
    /*transform: scale(1);*/
    font-size: 1.7rem;
}


        #dynamicSidebar #userAvatar > #placeholder > img.profilePic {
            position: absolute;
            inset: 0;
            z-index: 2;
            height: 100%;
            width: 100%;
            outline: 1px solid var(--darkTransparent);
            outline-offset: -1px;
            pointer-events: none;
        }
        #dynamicSidebar #userAvatar > #placeholder {
            position: relative;
        }

    

    #dynamicSidebar #userInfoContainer:hover #userAvatar {
        
    }
    #dynamicSidebar .item{
        position:relative;
        max-width:100%;
    }
        #dynamicSidebar .item .subentryContainer {
            display: flex;
            font-size: 0.95em;
            flex-direction: column;
            gap: 0.2em;
            white-space: nowrap;
            text-overflow: ellipsis;
            max-width: 100%;
            overflow: clip;
            --currentHeight: 0px;
            height: 0px;
            position: relative;
            transition: var(--animationSpeed) ease-out height;
            --linkColor: transparent;
        }
#dynamicSidebar.collapsing .item .subentryContainer {
    height: 0px;
}
#dynamicSidebar.show .item .subentryContainer {
    height: var(--currentHeight);
}
#dynamicSidebar .item .subentryContainer > .subEntry {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    position: relative;
    margin-right: 0.1em;
    margin-left: 1em;
    max-width:calc(100% - 1em);
    text-overflow:ellipsis;
    overflow:clip;
}#dynamicSidebar .item .subentryContainer > .subEntry:first-child {
    margin-top:0.2em;
}#dynamicSidebar .item .subentryContainer > .subEntry:last-child {
    margin-bottom:0.7em;
}
#dynamicSidebar .item .subentryContainer > .subEntry.selected {
    pointer-events:none;
    background-color:var(--accentThemeTransparent);
}
    #dynamicSidebar .item .subentryContainer > .subEntry > .link {
        flex-grow: 1;
        color: var(--accentThemeD4);
        padding: var(--paddingSmall);
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display:block; /* sonst funktioniert ellipsis nicht, lustig*/
    }
.darkTheme #dynamicSidebar .item .subentryContainer > .subEntry > .link {
   
    color: var(--accentThemeD1);
    
}

.darkTheme #dynamicSidebar .item .subentryContainer > .subEntry.selected > .link {
   
    color: var(--accentThemeL1);
    
}
#dynamicSidebar .item .subentryContainer > .subEntry.selected > #closeBtn {
    pointer-events:all;
}

#dynamicSidebar .item .subentryContainer > .subEntry.dirty > .link::before {
    font-family: var(--fontawesome);
    font-weight: bold;
    content: '\f069';
    margin-right: 0.2em;
    color: var(--complimentaryTheme);
}

#dynamicSidebar .subentryContainer > .collapsedSubEntry{
    position:absolute;
    top:0;
    left:0;
    background-color:transparent;
}
    #dynamicSidebar .subentryContainer > .collapsedSubEntry::before {
        /*font-family: var(--fontawesome);*/
        /*content: '\f111';*/
        content: attr(data-subentryCount);
        font-size: 0.6em;
        font-weight: bold;
        color: var(--complimentaryThemeD2);
        padding:1em;
        border-radius:20em;
    }

#dynamicSidebar .subentryContainer.modal {
    position: absolute;
    box-shadow: var(--boxShadowLargeMedium);

}

/* Startnavigation */
.NavigationTile {
    --txtColor: var(--dark);
    flex: 1;
    flex-basis: 10em;
    transition: var(--transitionDurationLong) opacity;
}

    .NavigationTile > #outerClickContainer {
        --bgColor: var(--tertiary);
        min-width: 95px;
        height: 95px;
        line-height: 1.1;
        padding: var(--paddingY) var(--paddingY);
        line-break: auto;
        transition: transform var(--mds-hover-transition-out) ease-out !important;
        /*overflow:clip;*/ /* nicht clippen: box-shadow verschwindet sonst*/
        border-radius: var(--round);
    }

    .NavigationTile > #outerClickContainer.directColor {
        background-color: var(--bgColor);
        color: var(--txtColor);
    }
@media screen and (max-width: 800px) {
    .NavigationTile {
        flex-shrink: 0;
        flex-basis: 45%;
        min-width: 95px;
        font-size: 1.2rem;
    }

        .NavigationTile > #outerClickContainer {
            height:5em;
            min-height: 5em !important;
            max-height: 7.5em !important;
            min-width: 100% !important;
        }
}
.darkTheme > #outerClickContainer,
.darkTheme #outerClickContainer.directColor {
    background-color: var(--mediumDarkThemeBG);
    outline: 2px solid var(--bgColor);
    outline-offset: -2px;
    color: var(--brightText);
}

    .NavigationTileContainer {
        justify-content: space-between;
        gap: 0.7em;
    }


    .NavigationTile > #outerClickContainer:hover,
    .NavigationTile.clicked > #outerClickContainer {
        outline: 2px solid var(--dark);
        /*transform: scale(1.05);*/ /* irgendwie bissl too much... */
        transform: translate(-0.2em, -0.2em);
    } 
    .NavigationTile > #outerClickContainer:hover:active{
        transform: translate(-0.05em, -0.05em);
        transition-duration:calc(0.5 * var(--transitionDurationLong));
    }

    
.NavigationTileContainer.clicked .NavigationTile:not(.clicked) {
    opacity: 0.6;
}

.darkTheme .NavigationTile > #outerClickContainer:hover {
    outline: 2px solid var(--bgColor);
}

    .NavigationTile #innerContainer {
        flex-direction: column;
        min-height: 100%;
        max-height: 110%;
        /*overflow:clip;*/ /* nicht clippen, weil sonst das transform beim hover abgeschnitten ist*/
    }

        .NavigationTile #innerContainer #labelNode {
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.3;
        }

    .NavigationTile #outerClickContainer {
        position: relative;
    }

        .NavigationTile #outerClickContainer::after { /* erweitern um einen drop-shadow*/
            box-shadow: var(--boxShadowMediumDark);
            transition: opacity var(--transitionDurationLong);
            opacity: 0;
            content: '';
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            position: absolute;
        }
.darkTheme .NavigationTile #outerClickContainer::after {
    box-shadow: 0px 2px 6px 0px var(--bgColor), inset 0px 0px 8px var(--bgColor);
    mix-blend-mode: color-dodge;
}

.NavigationTile #outerClickContainer:hover::after { /* erweitern um einen drop-shadow*/
    opacity: 1;
}


.NavigationTile i {
    transition: transform var(--transitionDurationLong) ease-out;
}

    .NavigationTile > #outerClickContainer:hover i {
        transform: scale(1.2);
    }

    .NavigationTile i.profilePic {
        position: relative;
    }

    .NavigationTile img {
        position: absolute;
        top: -10%;
        left: -10%;
        right: 0;
        bottom: 0;
        width: 120%;
        height: 120%;
        pointer-events: none;
        outline: 2px solid;
        outline-offset: -1px;
    }

    /* ================= */

    /* GENERIC DIALOG */
    .GenericDialog .w3-modal {
        padding-top: calc(2 * var(--paddingY));
        /*display:flex!important;
        flex-direction:column;
        justify-content:center;*/ /* vielleicht ned so schlau, wenn DLG wirklich mal mehr als 100vh hoch ist??*/
    }



    .GenericDialog .genericdialog {
        max-height: calc(100% - 1em);
        /*overflow: clip;*/ /* nicht clippen, damit floating menu drüber kann! */
        display: flex;
        flex-flow: column;
        border-radius: var(--round);
    }

        .GenericDialog .genericdialog.vgrowing {
            max-height: unset;
            overflow: unset;
        }

    .GenericDialog .w3-modal-content {
        filter: opacity(1);/* FIXT EIN PROBLEM MIT FLOATING MENU! warum? keine Ahnung!*/
    }

    .GenericDialog .genericdialog #content {
        flex: 1;
        overflow: auto;
        /*box-shadow:*/ /*inset 0px 12px 8px -12px var(--mediumTransparent),*/ /*inset 0px -12px 8px -12px var(--mediumTransparent);*/
    }

    .GenericDialog .genericdialog .w3-row {
    }

    .GenericDialog .overflow-visible {
        overflow: visible !important;
    }

    .GenericDialog div[data-dojo-attach-point=textNode],
    .GenericDialog div[data-dojo-attach-point=subTitleNode],
    .GenericDialog div[data-dojo-attach-point=bottomSubTitleNode] {
        user-select: text;
    }
.GenericDialog .headerBar {
    overflow: clip; /* zwecks abgerundeter Ecken wärs, aber so schrumpft die Titelleiste manchmal in der Höhe! */
    overflow-y: visible; /* damit sollts gehn...*/
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    z-index:1; /* damit box-shadow über dem content bleibt... komisch dass es das braucht*/
}

    .GenericDialog .headerBar button {
        padding: var(--padding);
        color: var(--currentTextcolor);
        background-color: var(--currentBackgroundColor);
        border-radius: 0;
    }
        .GenericDialog .headerBar button[data-dojo-attach-point=topCloseBtn] {
            border-top-right-radius:inherit;
        }

    .GenericDialog .genericdialog #bottomActionContainer {
        width: 100%;
        background-color: var(--secondaryThemeL4);
        border-bottom-left-radius: inherit;
        border-bottom-right-radius:inherit;
    }

    .darkTheme .GenericDialog .genericdialog #bottomActionContainer {
        background-color: var(--secondaryThemeD5)
    }

    .GenericDialog .genericdialog #bottomActionContainer *:is(#left, #right) {
        row-gap: var(--paddingY);
        column-gap: var(--paddingX);
        overflow:clip;
    }

    .GenericDialog .genericdialog #bottomActionContainer *:is(#left, #menu) {
        /* der unwichtigere der beiden Container*/
        flex: 1;
    }

    .GenericDialog .genericdialog #bottomActionContainer #right {
        flex-direction: row-reverse;
    }

    /*für icons margin left auf den Button: */
    .GenericDialog .genericdialog #bottomActionContainer *:is(#left, #right) > button > *:nth-child(n+2) {
        margin-left: 0.4em;
    }

    .GenericDialog .genericdialog #bottomActionContainer *:is(#left, #right) > button {
        min-width: 100px;
        /*margin-left: var(--paddingX);*/
    }

.GenericDialog .genericdialog #bottomActionContainer #menu > button.icongrid {
    gap: 2px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
   /* padding: var(--paddingSmall);*/
    justify-content:center;
    color:var(--currentTextcolor, var(--dark));
    .darkTheme &
{
    color: var(--currentTextcolor, inherit);
}
}
    .GenericDialog .genericdialog #bottomActionContainer #menu > button.icongrid > .iconContainer {
        font-size: 1rem;
       /* width: calc(49% - var(--paddingYSmall));*/
        /*color:var(--dark);*/
       
    }.GenericDialog .genericdialog #bottomActionContainer #menu > button.icongrid > .iconContainer > i {
        border: 1px solid var(--currentTextcolor, initial);
        padding: 2px;
        border-radius:var(--roundest);
        /*opacity:0.8;*/
    }
/* Animation */
.GenericDialog > .w3-modal {
    transition-property: opacity, backdrop-filter;
    transition-duration: var(--transitionDurationLong);
    opacity: 1;
    background-color: var(--darkTransparent);
}

        .GenericDialog > .w3-modal.w3-show.outfade {
            backdrop-filter: blur(0px);
            opacity: 0;
        }

        .GenericDialog > .w3-modal .w3-modal-content.genericdialog {
            --sizeFactor: 1;
            opacity: 1;
            transform: scale(var(--sizeFactor), var(--sizeFactor));
            transition-duration: var(--transitionDurationLong);
            transition-property: transform, opacity;
            max-height: calc(100vh - calc(4 * var(--paddingY)));
            max-height: calc(100dvh - calc(4 * var(--paddingY)));
        }

    .darkTheme .GenericDialog > .w3-modal .w3-modal-content.genericdialog {
        box-shadow: 0px 1px 4px 2px var(--brightTransparent);
        outline: 2px solid var(--brightTransparent);
    }

    .GenericDialog > .w3-modal.w3-show.outfade .w3-modal-content.genericdialog {
        --sizeFactor: 0.95;
        opacity: 0;
    }

    .GenericDialog > .w3-modal .w3-modal-content.genericdialog:has(.floatingContainer) {
        transform: unset;
    }

.GenericDialog.fullsize .genericdialog.w3-modal-content {
    width: 100%!important;
    max-height:unset;
    height:100vh!important;
    height:100dvh!important;
}
.GenericDialog.fullsize > .w3-modal {
    padding-top: 0!important;
}
    @media (min-width: 800px) {
    .GenericDialog.smaller .genericdialog.w3-modal-content {
        width: 700px;
        margin: auto;
    }

    .GenericDialog.smaller > .w3-modal{
        padding-top:calc(4 * var(--paddingY));
    }
   
}@media (max-width: 799px) {
    .GenericDialog.smaller .genericdialog.w3-modal-content {
        width: 100%;
    }
    
}@media (min-width: 993px) {  
    .GenericDialog.larger .genericdialog.w3-modal-content {
        width: 100%;
    }
}@media (min-width: 1200px) {

    .GenericDialog.larger .genericdialog.w3-modal-content {
        width: 1100px;
        margin: auto;
    }
}
    
    /* das ist die Action-Bar unten im Dlg, die hat keinen eindeutigen Bezeichner...*/
    .darkTheme .GenericDialog .genericdialog > .w3-container {
        background-color: var(--mediumDarkThemeBG);
    }

    /* FILTERPANEL */
    

    .filterPanel {
        display: flex;
        flex-flow: column;
/*        gap: 1em;*/    
    width:100%;
        --maxOptionWidth: 85ch;
    }


@media (max-width: 799px) {
    .filterPanel {
        
        --maxOptionWidth: 100%;
    }
}

    .darkTheme .filterPanel .w3-input {
    }

    .filterPanel #mainSplitContainer {
        /*display: flex;
        flex-direction: column;
        gap: 1em;
        align-items:start;*/
    }

    .filterPanel #hiddenSectionsControlContainer {
        display: flex;
        flex-direction: column;
        gap: 0.5em;
        border: 1px solid var(--tertiary);
        border-radius: var(--round);
        padding: var(--paddingSmall);
    }

        .filterPanel #hiddenSectionsControlContainer #hiddenSectionsSelectorContainer {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5em;
            max-width: 25ch;
            overflow: hidden;
        }

            .filterPanel #hiddenSectionsControlContainer #hiddenSectionsSelectorContainer > button {
                max-width: 22ch;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }


.darkTheme .filterPanel #hiddenSectionsSelectorContainer .mds-button-base {
    background-color: var(--transparent);
}

    .filterPanel .filterPanelSection #sectionControlContainer #btnMovePrevious,
    .filterPanel .filterPanelSection #sectionControlContainer #btnMoveNext {
        display: none;
    }

    .filterPanel .filterPanelSection.collapsed #infoTextContainer {
        display: none;
    }

    .filterPanel .filterPanelSection.moveable:not(:first-child) #sectionControlContainer #btnMovePrevious,
    .filterPanel .filterPanelSection.moveable:not(:last-child) #sectionControlContainer #btnMoveNext {
        display: unset;
    }

    .filterPanel #sectionsContainer,
    .filterPanel #collapsedSectionsContainer {
        display: flex;
        flex-wrap: wrap;
        gap: 0.8em;
        /*align-items: start;*/ /*Mit start werden die Container oben angeordnet. Ohne wachsen sie alle auf gleiche Höhe */
    }
    /* wichtig: die Gap-Value hier platzieren, damit das 12er-Raster das abzieht*/
    .filterPanelSection.w3-col {
        --subtractValue: 0.8em;
    }
    /* filtersection, wenn sie in einem Filterpanel enthalten ist - ggf. könnte es auch sections ohne Panel geben, aber unwahrscheinlich */
    .filterPanel .filterPanelSection {
        /*border: 1px solid var(--medium);
        border-radius: var(--round);
        padding: var(--padding);
        background-color:var(--brightTransparent);*/
        margin-bottom: 0;
        min-width: 40ch;
        flex-grow: 1;
    }

.filterPanel #sectionsContainer > .filterPanelSection {

    background-color: rgba(255,255,255,0.4);
    box-shadow: var(--boxShadowSection);
    padding: var(--padding);
    border-radius: var(--round);
    overflow: visible !important;

    .darkTheme &
{
    background-color: var(--darkTransparent);
    color: var(--brightText);
    outline: 2px solid var(--mediumTransparent);
    transition: var(--transitionDurationLong, 1s) color;
    &:hover
    {
        /*outline-color: var(--mds-bright-transparent);*/
        color: var(--veryBright);
    }
}
}

.GenericDialog .filterPanel #sectionsContainer > .filterPanelSection {
    box-shadow: none;
    border: 1px solid var(--medium);
    background-color: var(--mediumBrightTransparent);
    /*padding: var(--paddingSmall);*/
    --maxOptionWidth: 100%;
    width:100%;
}
        .filterPanel .filterPanelSection.w3-col {
            flex-grow: unset;
        }


.filterPanel.invisibleSections #sectionsContainer > .filterPanelSection {
    padding: 0;
    border: 0;
    box-shadow: none;
    background-color: transparent;
    & #headerTitle {
                       display: none;
                   }


.darkTheme & {
    
    outline: none;
}
}

.filterPanelSection #headerTitle {
    margin-top: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.filterPanelSection.collapsed #headerTitle {
    margin-bottom: 0;
}


        .filterPanelSection #filterOptionsContainer {
            gap: 0.5em;
            display: flex;
            /* flex-wrap: wrap;*/
            flex-direction: column;
            /*overflow: hidden;*/ /* wegen Searchselects nicht hidden!!*/
        }

            .filterPanelSection #filterOptionsContainer .filterOptionRoot {
                flex-basis: 40%;
                flex-grow: 1;
                min-width: 5ch;
                max-width: var(--maxOptionWidth, 85ch);
            }

    .filterOptionRoot input {
        /*border-top-right-radius: var(--round);
        border-bottom-right-radius: var(--round);*/
    }
    .filterOptionRoot.invalid{
        border-color:var(--warning);
    }

    .filterOptionRoot.selected {
        background-color: var(--secondary);
        color: var(--secondaryText);
        --currentBackgroundColor: var(--secondary);
        --currentTextcolor: var(--secondaryText);
    }

    .filterOptionRoot.deselected {
        /*    color: var(--secondaryThemeL4txt);
    --currentTextcolor: var(--secondaryThemeL4txt);
*/ background-color: var(--mediumTransparent);
    }

    .darkTheme .filterOptionRoot.deselected input:not(:focus) {
        /*color: var(--dark);*/
    }

    .filterPanel .filterOptionRoot[data-option-type=infotext] {
        border: 0px;
        background-color: transparent;
    }

    .filterPanel .filterOptionRoot .optionContainer {
        /*border-radius:inherit;*/
        /*background-color:var(--mediumTransparent);*/
        /*overflow:clip;*//* geht nicht, die Option kann ein Multiselect sein*/
    }


        .filterPanel .filterOptionRoot .optionContainer .selectbutton {
            border-radius: inherit;
            padding: var(--padding);
        }

        .filterPanel .filterOptionRoot .optionContainer > .label {
            text-wrap: balance;
            flex-grow: 1; /* vgl inputContainer: der darf mehr wachsen!*/
            min-width:5ch;
        }

        .filterPanel .label {
            word-break: keep-all;
        }



    .filterPanel .filterOptionRoot.mandatory .optionContainer > .label {
        padding-left: var(--paddingX);
    }

    .filterPanel .filterOptionRoot:not(.mandatory) .optionContainer:not(#toggle) > .label {
        padding-left: 0; /* bei nicht verpflichtenden wird der Selectbutton angezeigt, kein Padding-L nötig*/
    }

.filterOptionRoot #inputContainer {
    flex-grow: 6;
    width: unset;
    min-width: 10ch;
    border-top-right-radius: inherit;
    border-bottom-right-radius: inherit;
    flex-basis: 25ch; /* flex versucht das Element auf mindestens diese Breite zu halten*/
    background-color: var(--brightInput);
    .darkTheme &
        {
            background-color: var(--darkThemeBG);
        }
    }

.filterOptionRoot #infoTxt {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}
.filterOptionRoot #text {
    overflow:clip;
}
.filterOptionRoot #color #inputContainer {
    align-content: center;
    margin-right:var(--paddingXSmall);
}
.filterOptionRoot #multiline #warningNode {
    display: none;
    align-self: center;
}

.filterOptionRoot #multiline > div:not(#inputContainer) {
    /* die beschriftete flex-Zeile mit Select, Label und Warnsymbol überhalb vom Multiinput - Inhalt mittig ausrichten */
   align-items:center;
}
.filterOptionRoot #multiline > #inputContainer {
    border-bottom-right-radius: inherit;
    overflow: clip;
    border-bottom-left-radius: inherit;
}
.filterOptionRoot[data-option-type=multilinetext] #warningNode {
    display: none;
}
.filterOptionRoot[data-option-type=multilinetext].invalid #multiline #warningNode {
    display: flex;
}

.filterOptionRoot #multiline > span {
}
    
    .filterOptionRoot #multiline textarea {
        border:0;
        border-radius:inherit;
    }
     .filterOptionRoot #dateTime input {
        border:0;
    }

.filterOptionRoot #text #inputContainer,
.filterOptionRoot #text #inputContainer input {
    width: inherit;
}


    .filterOptionRoot .multiSelect_root div#outerContainer,
    .filterOptionRoot .searchSelect_root div#outerContainer {
        border: 0;
    }

    .filterOptionRoot .multiSelect_root div#dropdownContainer,
    .filterOptionRoot .searchSelect_root div#dropdownContainer {
        right: -1px !important;
        width: unset !important;
    }

    .filterOptionRoot .multiSelect_root div#buttonsContainer,
    .filterOptionRoot .multiSelect_root div#innerContainer,
    .filterOptionRoot .optionContainer > select[data-dojo-attach-point=select_Input],
    .filterOptionRoot .searchSelect_root div#innerContainer,
    .filterOptionRoot .searchSelect_root div[data-dojo-attach-point=closeDropdownBtn] {
        border-top: 0;
        border-radius: 0;
        border-top-right-radius: var(--round);
    }

        .filterOptionRoot .multiSelect_root div#innerContainer input,
        .filterOptionRoot .searchSelect_root div#innerContainer input {
            border-radius: 0;
        }

    .filterOptionRoot .multiSelect_root div[data-dojo-attach-point=openDropdownBtn],
    .filterOptionRoot .multiSelect_root div#contentLine,
    .filterOptionRoot .multiSelect_root div#contentLine > div,
    .filterOptionRoot .optionContainer > select[data-dojo-attach-point=select_Input],
    .filterOptionRoot .searchSelect_root div[data-dojo-attach-point=openDropdownBtn],
    .filterOptionRoot .searchSelect_root div#contentLine,
    .filterOptionRoot .searchSelect_root div#outerContainer {
        border-top-right-radius: var(--round);
        border-bottom-right-radius: var(--round);
    }
    /* FILETRANSFER / FILEUPLOAD */
    .fileUploadRow {
        gap: 1em;
    }

        .fileUploadRow .singleElement {
            flex-basis: 90%;
        }

        .fileUploadRow .halfElement {
            flex-basis: 40ch;
            flex-grow: 9999;
        }

        .fileUploadRow #fileNameContainer {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            align-self: end;
        }

        .fileUploadRow #removeButtonContainer {
            text-align: center;
            align-self: end;
            padding: var(--paddingYSmall) 0;
            flex-grow: 1;
        }


    .Control_FileTransfer_Uploader .customFileInput {
        font-weight: bold;
    }

        .Control_FileTransfer_Uploader .customFileInput.true {
        }

    .Control_FileTransfer_Uploader .file1 {
        overflow: unset;
        top: 0;
        left: 0;
        font-size: 1rem; /*16px;*/
    }

        .Control_FileTransfer_Uploader .file1.hidden {
            position: absolute;
            overflow: hidden;
            top: 0;
            left: 0;
            opacity: 0;
            font-size: 100px;
            cursor: pointer;
            /*pointer-events:none;*/
        }

    .Control_FileTransfer_Uploader .progressBar {
        width: 300px;
    }

    .Control_FileTransfer_Uploader .progressStatus {
        min-width: 4ch;
        max-width: 40px;
        padding-right: var(--w3PaddingSmallX); /*8px;*/
        position: relative;
    }

        .Control_FileTransfer_Uploader .progressStatus::before {
            content: ""; /*check*/
            font-family: var(--fontawesome); /*"Font Awesome 5 Free";*/
            font-weight: bold;
            /*position: absolute;*/
            top: 0px;
            right: 0px;
            left: 0px;
            pointer-events: none;
            user-select: none;
        }

        .Control_FileTransfer_Uploader .progressStatus.uploadERROR::before {
            content: "\f00d"; /*times*/
        }

        .Control_FileTransfer_Uploader .progressStatus.uploadOK::before {
            content: "\f00c"; /*check*/
        }

    .Control_FileTransfer_Uploader #inputContainer {
        position: static;
    }

        .Control_FileTransfer_Uploader #inputContainer #inputButton {
            position: absolute;
            /*left:-100%;
    transform:translateX(100%);*/
            inset: 0;
            width: 100%;
            pointer-events: none;
        }

        .Control_FileTransfer_Uploader #inputContainer:hover {
            cursor: pointer;
        }

            .Control_FileTransfer_Uploader #inputContainer:hover #inputButton {
                background-color: var(--tertiary);
            }

        .Control_FileTransfer_Uploader #inputContainer .file1 {
            opacity: 0.1;
            padding: var(--paddingSmall);
            isolation: isolate;
        }
    /* LOGINFORM */
    .loginForm .userInfoContainer {
        margin-top: var(--paddingY);
        margin-bottom: var(--paddingY);
    }

    .loginForm #cbRememberLogin:focus input {
        color: red;
    }
    .loginForm #messageContainer {
        font-weight:600;
        font-size:1.2em;
        padding:var(--padding);
    }

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

    /* SIMPLE FILE UPLOAD SIMPLEFILEUPLOAD */
    .simpleFileUploadRoot {
        position: relative;
    }
    /* HINTBOX */
    .hintbox {
        position: relative;
        display: inline-block;
        width: 100%;
        --inputPaddingRight: var(--paddingX);
    }

        .hintbox #dropdownContainer {
            position: absolute;
            border: 1px solid var(--medium);
            background-color: var(--veryBright);
            border-top: none;
            z-index: 99;
            top: 100%;
            left: 0;
            right: 0;
            max-height: 300px;
            overflow: auto;
            border-bottom-left-radius: var(--round);
            border-bottom-right-radius: var(--round);
            /*box-shadow: var(--boxShadowSmallLight);*/
        }
         .hintbox:has(button.hintboxInlinebutton) #dropdownContainer {
           right:var(--round);
        }

    .darkTheme .hintbox #dropdownContainer {
        background-color: var(--dark);
    }

    .hintbox .hintbox-items {
        max-height: 200px;
        overflow-y: auto;
    }

    .hintbox-items > .item > .label {
        display: block;
    }

    .hintbox-items > .item > .secondaryLabel {
        line-height: 1.2;
        opacity: 0.8;
    }

    .hintbox-items.disabled div {
        opacity: 0.3;
        pointer-events: none;
        user-select: none;
        line-height: 1.3;
    }

    .hintbox-items > .item {
        padding: 10px;
        cursor: pointer;
        background-color: var(--veryBright);
        border-bottom: 1px solid var(--medium);
        color: var(--veryDark);
        transition-duration: var(--transitionDurationLong);
        transition-property: background-color;
        .darkTheme & {
                         background-color: var(--dark);
                         color:var(--brightText);
                     }
    }.hintbox-items > .item:last-child {
       border-bottom:0px;
    }

     .hintbox #bottomActionContainer{
         
     }



    .hintbox-active {
        background-color: var(--primary) !important;
        color: var(--primaryText) !important;
    }

    .hintbox.plaintextValue {
        /*background-color: purple;*/
        /*outline: 2px solid purple;*/
    }

.hintbox .hintboxInlinebutton {
    border-radius:0;
}
/*.darkTheme .hintbox .hintboxInlinebutton {
    background-color: var(--complimentaryTheme);
    color: var(--complimentaryThemeTxt);
}
*/
.hintbox.plaintextValue input {
    color: var(--accentThemeD2);
}

        .hintbox.plaintextValue .inputRow::before {
            content: '\f246'; /* Cursor für rote Eingaben */
            font-family: var(--fontawesome); /*"Font Awesome 5 Free";*/
            color: var(--secondary);
            font-weight: bold;
            vertical-align: middle;
            padding: var(--paddingSmall);
        }

    .hintbox .searchIcon {
        position: absolute;
        margin: 10px 5px;
        right: 2px
    }

    .hintbox input {
        padding-right: var(--inputPaddingRight);
        background-color:transparent;
        .darkTheme &
{
    background-color: transparent;
}
    }

    .hintbox .inputRow {
        position: relative;
        display: flex;
        flex-flow: row;
        align-items: center;
    }

.hintbox #inputContainer {
    position: relative;
}
.hintbox #inputWrapper {
    position: relative;
    isolation: isolate;
    overflow:clip;
}

.hintbox #innerInputContainer {
        padding-left: var(--paddingXSmall);
/*        padding-right: var(--paddingXSmall);*/        
        display: flex;
        flex-flow: row;
        align-items: stretch;
        /*gap: 0.4em;*/
        background-color: transparent; /*var(--brightInput);*/
    }
.hintbox #inputUnderlay {
    background-color:var(--brightInput);
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index:-1;
}
.hintbox #progressOverlay {
    pointer-events: none;
    position: absolute;
    inset: -1px; /* bei manchen Styles fehlt sonst oben 1px. kapier i ned*/
    opacity: 0.6;
    --rightPadding: 0px;
    width: calc(100% - var(--rightPadding));
    z-index:-1;
}

    /* SELECTBOX */
    .selectbox {
        position: relative;
        display: inline-block;
        width: 100%;
    }

        .selectbox select[disabled], .selectbox select.disabled {
            opacity: 0.6;
        }

    .selectbox-items {
        position: absolute;
        border: 1px solid var(--mds-light-gray);
        background-color: #fff;
        border-bottom: none;
        border-top: none;
        z-index: 99;
        top: 100%;
        left: 0;
        right: 0;
    }

        .selectbox-items div, option.selectbox-items {
            padding: 10px;
            cursor: pointer;
            background-color: #fff;
            border-bottom: 1px solid var(--mds-light-gray);
            color: black;
        }

            .selectbox-items div:hover, option.selectbox-items:hover {
                background-color: var(--mds-gray-transparent);
            }

    .selectbox-active {
        background-color: var(--primary) !important;
        color: var(--primaryText) !important;
    }


    /*merge - fehler - weiß noch nicht was das ist*/
    /*background-color: rgba(236,103,7,0.15) !important;
    color: #ffffff;
}*/


    /* ----------------- moreCore/UI/DateTimeInput ------------------------------START */
    .DateTimeInput_container {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

        .DateTimeInput_container > #combineContainer {
            background-color: var(--brightInput);
            overflow: hidden;
            .darkTheme & {
                             /*background-color:var(--darkThemeBG)*/
                         }
        }

    .DateTimeInput_DateInputContainer {
        /*margin-right: 1em;*/

        flex-grow: 9999; /* das Date darf viel mehr wachsen als das Time. Das Time bricht daher früher um in seine eigene Zeile */
        flex-basis: 25ch;
    }

    .DateTimeInput_DateInput {
    }

    .DateTimeInput_container > #combineContainer.border *:is(.DateTimeInput_TimeInput, .DateTimeInput_DateInput) input {
        background-color: transparent;
    }

    .DateTimeInput_TimeInputContainer {
        flex-grow: 1;
        /*margin-left: -1px;*/
    }

    .DateTimeInput_TimeInput {
    }

    .DateTimeInput_container > #combineContainer.border *:is(.DateTimeInput_TimeInput, .DateTimeInput_DateInput) input.w3-input.border {
        border: 0; /* kein eigener Rahmen mehr, sondern... */
    }

    .DateTimeInput_container > #combineContainer.border .DateTimeInput_DateInputContainer {
        outline: 1px solid var(--borderColor); /* einen Rahmen hinfaken, der über dem tatsächlichen Rahmen liegt */
    }
    /* ----------------- moreCore/UI/DateTimeInput ------------------------------END */
    /* ----------------- moreCore/UI/CheckBox ------------------------------START */
    .moreCoreCheckBox {
    }

    .moreCoreCheckBox:has(.inputContainer.toggleButton){
        display:inline-block;
    }
        .moreCoreCheckBox:has(.inputContainer.toggleButton) .moreCoreCheckBox_mainContainer {
            background-color: var(--mediumTransparent);
            padding: var(--paddingSmall);
            border-radius: var(--round);
            display: flex;
            justify-content: center;
            outline: 2px solid transparent; /* var(--uncheckedColor);*/
            outline-offset: -2px;
            transition-property: background-color;
            transition-duration: var(--transitionDurationLong);
        }

        .moreCoreCheckBox.checked:has(.inputContainer.toggleButton) .moreCoreCheckBox_mainContainer {
            background-color: var(--accentThemeTransparent);
            padding: var(--paddingSmall);
            outline-color: var(--checkedColor);
        }
        /*.w3-input:focus, input:focus {
    outline: 2px dashed var(--medium);
    outline-offset: -1px;
    border-radius: inherit;
}
*/ .moreCoreCheckBox:not(:has(.inputContainer.disabled, .inputContainer.toggleButton, .inputContainer.radio)):focus {
            outline: 2px dashed var(--mediumTransparent);
            outline-offset: 1px;
            border-radius: var(--round);
        }

        .moreCoreCheckBox .checkboxNode {
            padding-right: var(--paddingSmall);
            width: 1.1em;
            /*display: flex;*/
        }

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

    .moreCoreCheckBox_mainContainer {
        display: flex;
        align-items: center;
        user-select: none;
        /*margin: 0.2em auto;*/
    }

    .moreCoreCheckBox .inputContainer {
        position: relative;
    }
    /* native styles ------------------- start*/
    .moreCoreCheckBox label {
        /*padding-right: 2.4em;*/
        /*padding-left: 0.75em;*/
        align-self: center;
    }

    /* native styles ------------------- end*/
    /* default custom moreCore Styles ----start*/

    .moreCoreCheckBox .inputContainer input {
        -moz-appearance: none;
        -webkit-appearance: none;
        -ms-appearance: none;
        appearance: none;
        display: block;
        /*float: right;*/
        /*margin-right: -2em;*/ /* um das nachfolgende Label samt Pseudo-Icon darüber zu rücken*/
        /*margin-top: -0.4em;*/
        visibility: hidden;
        /*width: 1.55em;*/
        /*height: 1.55em;*/
        /*z-index: 2;*/
        /*height: 0.2em;*/
        /*width: 0.2em;*/
        position: relative;
        /*right: 0;*/
    }

    .moreCoreCheckBox .inputContainer.left label.right,
    .moreCoreCheckBox .inputContainer.right label.left {
        display: none;
    }

    .moreCoreCheckBox .inputContainer.left input {
        margin-left: 0.4em;
    }


    .moreCoreCheckBox label.custom {
        text-decoration: none;
        display: inline-block;
        font-size: 1em;
        position: relative;
        /*margin-bottom: 3px;*/
    }


    .moreCoreCheckBox {
        --currentIconContent:'';
        --currentIconFontWeight:'';
        --currentIconColor:unset;
        --checked: '\f058';
        --checkedColor: var(--accentThemeD2);
        --hoverColor: var(--accentThemeD1);
        --checkedFontWeight: bold;
        --unchecked: '\f111';
        --uncheckedColor: var(--dark);
        --uncheckedFontWeight: normal;
        --tristate: '\f042';
        --tristateColor: var(--accentThemeD2);
        --bgColor:transparent;
        --txtColor:inherit;

        .darkTheme &
{
    --uncheckedColor: var(--medium);
    --checkedColor: var(--accentThemeD1);
    --hoverColor: var(--accentThemeL1);
}

    }

    /* wenn icon rechts und label 'left', dann label wachsen lassen*/
.moreCoreCheckBox.iconRight label.left,
.moreCoreCheckBox.iconRight .inputContainer:has(label.left){
    flex-grow:1;
}


.moreCoreCheckBox.checked .inputContainer label {
    .darkTheme &
{
    font-weight: var(--checkedFontWeight);
}
}    /* Hovereffekt */
    .moreCoreCheckBox .inputContainer input::before,
    .moreCoreCheckBox .inputContainer input::after,
    .moreCoreCheckBox .inputContainer label {
            transition-duration: var(--transitionDurationLong);
            transition-property: color;
        }

.moreCoreCheckBox:hover .inputContainer:not(.disabled, .toggleButton) input::before,
.moreCoreCheckBox.iconRight:hover .inputContainer:not(.disabled, .toggleButton) input::after,
.moreCoreCheckBox:hover .inputContainer:not(.disabled, .toggleButton) label {
    transition-duration: var(--transitionDurationShort);
    color: var(--hoverColor);
}
.moreCoreCheckBox:hover:has(.inputContainer.toggleButton:not(.disabled)) .moreCoreCheckBox_mainContainer {
    transition-duration: var(--transitionDurationShort);
    background-color: var(--mediumDarkTransparent);
}
.moreCoreCheckBox.checked:hover:has(.inputContainer.toggleButton:not(.disabled)) .moreCoreCheckBox_mainContainer {
    transition-duration: var(--transitionDurationShort);
    background-color: var(--mediumDarkTransparent);
}

        .moreCoreCheckBox:has(.inputContainer:not(.disabled)),
        .moreCoreCheckBox .inputContainer:not(.disabled) *:is(label, input) {
            cursor: pointer;
        }

            .moreCoreCheckBox:has(.inputContainer.disabled):focus,
            .moreCoreCheckBox .inputContainer.disabled *:is(label, input):focus {
                cursor: not-allowed;
            }

            .moreCoreCheckBox .inputContainer.disabled,
            .moreCoreCheckBox .inputContainer.disabled *:is(label, input) {
                pointer-events: none;
                cursor: default;
            }

            .moreCoreCheckBox .inputContainer > input {
                isolation: isolate;
            }

            /* Pseudoelement mit dem eigentlichen Icon */
            .moreCoreCheckBox .inputContainer input::before,
            .moreCoreCheckBox .inputContainer input::after {
                -moz-osx-font-smoothing: grayscale;
                -webkit-font-smoothing: antialiased;
                font-family: var(--fontawesome); /*"Font Awesome 5 Free";*/
                margin-right: 0.4em;
                content: var(--currentIconContent);
                color:var(--currentIconColor);
                font-weight:var(--currentIconFontWeight);
                display: inline-block;
                /*width: 1.5em;*/
                font-size: 1.5em;
                text-align: center;
                z-index: 1;
                visibility: visible;
            }

            .moreCoreCheckBox.iconRight .inputContainer input::before{
                content:unset!important;
            }
            .moreCoreCheckBox:not(.iconRight) .inputContainer input::after{
                content:unset!important;
                margin-right:0;
                margin-left:0.4em;
            }.moreCoreCheckBox .inputContainer input::after{
                margin-right:0;
                margin-left:0.4em;
            }

.moreCoreCheckBox.checked .inputContainer input::before,
.moreCoreCheckBox.checked.iconRight .inputContainer input::after {
    --currentIconContent: var(--checked);
    --currentIconColor: var(--checkedColor);
    --currentIconFontWeight: var(--checkedFontWeight);
}

.moreCoreCheckBox:not(.checked) .inputContainer input::before,
.moreCoreCheckBox:not(.checked).iconRight .inputContainer input::after {
    --currentIconContent: var(--unchecked);
    --currentIconColor: var(--uncheckedColor);
    --currentIconFontWeight: var(--uncheckedFontWeight);
}

.moreCoreCheckBox.tristate .inputContainer {
}

    .moreCoreCheckBox.tristate .inputContainer input::before,
    .moreCoreCheckBox.tristate.iconRight .inputContainer input::after {
        --currentIconContent: var(--tristate);
        --currentIconFontWeight: bold;
        --currentIconColor: var(--tristateColor);
        transform: rotate(40deg);
    }
            /*.moreCoreCheckBox .inputContainer.tristate input::after {
            position: absolute;
            z-index: 2;
            top: 0;
            content: var(--tristate);*/ /*asterisk*/
            /*color: var(--brighter);
            font-weight: bold;
            transform: translateX(-100%) scale(0.75);
            position: absolute;
        }*/
            .moreCoreCheckBox .inputContainer:is(.toggle, .toggleButton) {
                --checked: '\f205';
                --unchecked: '\f204';
                --uncheckedFontWeight: bold;
            }
.moreCoreCheckBox .inputContainer:is(.radio) {
    --checked: '\f192';
    /*--checkedColor: currentColor;*/
    --checkedColor: var(--accentTheme);
   
}

            .moreCoreCheckBox .inputContainer.disabled *:is(label, input) {
                /*color: var(--medium);*/
                opacity: 0.6;
                pointer-events: none;
                --checkedColor: var(--secondary);
                --uncheckedColor: var(--secondary);
                --tristateColor: var(--secondary);
                /*pointer-events: none;*/ /* Hinweis: damit geht der custom cursor auch nicht mehr */
            }



    /* default custom moreCore Styles ----end*/

    /* ----------------- moreCore/UI/CheckBox ------------------------------END */

    /* ----------------- moreCore/UI/RadioGroup ------------------------------START */

.moreCoreRadioGroup_root{
    width:100%;
    display:flex;
    flex-direction:column;

}
    .moreCoreRadioGroup_root #scrollContainer {
        display: flex;
        flex-direction: column;
        flex-shrink:1;
        min-height:2em;
    }

    .moreCoreRadioGroup_root #itemContainer {
/*        border-color:var(--borderColor);
        background-color:var(--brightInput);*/
        overflow-y:auto;

    }
        .moreCoreRadioGroup_root #itemContainer > .item {
            border-radius: var(--round);
            padding: 0 var(--paddingXSmall);
            font-size:0.95em;
            transition-property:background-color;
            transition-duration:var(--transitionDurationLong);
            background-color:transparent;
        }

            .moreCoreRadioGroup_root #itemContainer > .item:has(.moreCoreCheckBox.checked) {
                background-color: var(--mediumTransparent);
                transition-duration: var(--transitionDurationShort);
            }


    .moreCoreRadioGroup_root.invalid #itemContainer {
        box-shadow: 0px 0px 3px -1px var(--warning), inset 0px 0px 2px -1px var(--warning);
        outline: 1px solid var(--warning);
        outline-offset: -1px;
    }
    .moreCoreRadioGroup_root #itemContainer.horizontal {
        display:flex;
        flex-direction:row;
        
        max-width:100%;
        flex-wrap:wrap;
    }
        .moreCoreRadioGroup_root #itemContainer.horizontal > .item {
            flex-basis: 25%;
            max-width: 45ch;
            white-space: nowrap;
            overflow: clip;
        }

/* vv ALT vv*/
.moreCoreRadiogroup_rootNode {
    /*domNode*/
    --moreCoreRadiogroup_customContent_selected: "\f111"; /*circle*/
    --moreCoreRadiogroup_customColor_selected: black;
    --moreCoreRadiogroup_borderColor_default: black;
    --moreCoreRadiogroup_customColor_disabled: gray;
}

    .moreCoreRadiogroup_mainLabel {
        /*label of the group*/
    }

    .moreCoreRadiogroup_inputsContainer {
        /*container of all inputs*/
        flex-grow: 1;
    }

    .moreCoreRadiogroup_input {
        /*always set*/
    }

    .moreCoreRadiogroup_singleInputContainer {
        flex-grow: 1;
        margin-top: 4px;
    }

        .moreCoreRadiogroup_singleInputContainer:hover {
            background: var(--darkTransparent);
        }

    .moreCoreRadiogroup_inputLabel {
        /*always set*/
        margin-left: 0.5em;
        margin-right: 1.3em;
        line-height: 2.5;
    }

    .moreCoreRadiogroup_customInput {
        /*set if isCustomStyleEnabled*/
        -moz-appearance: initial;
        visibility: hidden;
        position: relative;
        cursor: pointer;
    }

    .moreCoreRadiogroup_customInputLabel {
        /*set if isCustomStyleEnabled*/
        cursor: pointer
    }

    .moreCoreRadiogroup_customInput:before {
        visibility: visible;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        font-family: var(--fontawesome); /*"Font Awesome 5 Free";*/
        font-style: normal;
        font-weight: normal;
        font-size: 24px;
        color: var(--moreCoreRadiogroup_borderColor_default);
        text-transform: none !important;
        content: '\f111';
        height: 24px;
        width: 24px;
        line-height: 24px;
        position: absolute;
        text-align: center;
        left: 0;
        top: 0;
    }

    .moreCoreRadiogroup_customSelected:before {
        font-weight: bold;
        content: var(--moreCoreRadiogroup_customContent_selected);
        color: var(--primary);
    }

    .moreCoreRadiogroup_customInput_disabled:before {
        color: var(--moreCoreRadiogroup_customColor_disabled);
        cursor: not-allowed;
    }

    .moreCoreRadiogroup_customInputLabel_disabled {
        color: var(--moreCoreRadiogroup_customColor_disabled);
    }

    /* ----------------- moreCore/UI/RadioGroup ------------------------------END */


    /* TICKETFINDER */
    .ticketFinderRoot .GenericDialog .hintbox {
    }

    /*------------------ moreCore staticTable -------------------------------- START*/
    .moreCore_staticTable_th,
    .staticTable th.sticky {
        position: sticky;
        z-index: 2;
    }

    .staticTable {
        user-select: text;
        --rowColor: transparent;
        --colBG: var(--transparent);
        --colTXT: unset;
        --borderOffsetX: 0px;
        --borderOffsetY: 0px;
        --borderGrowth: 0px;
        --actionColumnWidth: 10ch; /* hm. das sollte im JS dynamisch ermittelt werden... */
        font-size: 0.8em;
        /*line-height: 1.2;*/
        table-layout: auto;
    }

        table.fixedLayout {
            table-layout: fixed;
        }

    table.vTop td {
        vertical-align: top;
    }

table.vBottom td {
    vertical-align: bottom;
}

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

    .staticTable tr {
        border-bottom: 1px solid var(--tertiary);
        --colBG: var(--rowColor);
    }

    .staticTable.searchActive tr:not(.staticTable_thead) {
        display: none;
    }

    .staticTable.searchActive:has(tr.show) tbody tr {
        display: none;
    }

    .staticTable.searchActive:has(tr.show) tr.show {
        opacity: 1;
        display: table-row;
    }

    .staticTable {
        --indexColWidth: 5ch;
    }

        .staticTable th.indexColumn {
            padding-left: var(--paddingXSmall) !important;
            width: var(--indexColWidth);
        }

        .staticTable td.indexColumn {
            outline: 2px;
            text-align: left;
            padding-left: var(--paddingXSmall) !important;
            background-color: var(--secondary);
            color: var(--secondaryText);
            --cellShadow: 2px 0px 3px -1px var(--darkTransparent)
        }

        .staticTable td.noEntries {
            text-align: center;
            font-style: italic;
            color: var(--secondaryThemeL1);
            user-select: none;
        }

        .staticTable tr.staticTable_thead {
            line-height: 1.5em;
        }

            .staticTable tr.staticTable_thead th {
                overflow: hidden;
                text-overflow: ellipsis;
                vertical-align:bottom;
            }

            .staticTable tr.staticTable_thead:last-child {
                border-bottom: 3px solid var(--complimentaryThemeD1);
                box-shadow: 0px 2px 4px var(--darkTransparent);
                z-index: 1;
            }

        .staticTable tr td {
            background-color: var(--colBG, var(--rowColor));
            color: var(--colTXT);
            --cellShadow: 0px 0px transparent;
            box-shadow: var(--cellShadow);
            .darkTheme &
{
/*    background-color: var(--mediumTransparent); */
    color: var(--brightText);
    text-shadow:0px 0px 1.5px var(--darker); /* für den Fall dass der Hintergrund trotzdem noch sehr hell wäre */
    /*filter: drop-shadow(0px 0px 0.01px var(--colBG));*/
    --bgColorDark: color-mix(in lab, var(--colBG) 70%, var(--dark));
    --bgColorDark: hsl(from var(--colBG) h s calc(l * 0.8) / 30%);
    background-color: var(--bgColorDark);
}
        }

        .staticTable tr.bordered.bottom-left,
        .staticTable tr.bordered.bottom-right,
        .staticTable tr.bordered.bottom {
            --borderOffsetY: -2px;
        }

        .staticTable tr.bordered.top,
        .staticTable tr.bordered.top-right,
        .staticTable tr.bordered.top-left {
            --borderOffsetY: 2px;
        }

            .staticTable tr.bordered.top-left td:first-child,
            .staticTable tr.bordered.bottom-left td:first-child,
            .staticTable tr.bordered.left td:first-child {
                --borderOffsetX: 4px;
            }

        .staticTable tr.bordered.inset {
            --borderGrowth: 4px;
        }

        .staticTable tr.bordered.right td:last-child,
        .staticTable tr.bordered.bottom-right td:last-child,
        .staticTable tr.bordered.top-right td:last-child {
            --borderOffsetX: -2px;
        }

        .staticTable tr.bordered {
            --rowColor: var(--mediumTransparent);
            --colBG: transparent;
        }

            /* bei bordered wird die Hintergrundfarbe stattdessen als "Rahmen" dargestellt */
            .staticTable tr.bordered td {
                /*background-color: unset;*/
                /*color: unset;*/
                --cellShadow: inset var(--borderOffsetX) var(--borderOffsetY) 0 var(--borderGrowth) var(--rowColor);
                vertical-align: unset; /* w3 stellt sonst alles auf top */
            }


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

        .staticTable .overflowContainer.table_dropdown {
            position: relative;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .staticTable .overflowContainer.clickable:hover,
        .staticTable .overflowContainer.clickable.table_dropdown.clicked {
            cursor: pointer;
            outline: 2px solid var(--primary);
            outline-offset: 2px;
            /*font-weight: bold;*/
            border-radius: var(--round);
        }

        /* Set SearchSelect overflowContainer to visible if in StaticTable */

        .employmentStatusFinder .staticTable .searchSelectColumn {
            overflow: visible;
        } 

        .employmentStatusFinder .staticTable .selectable .label {
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .employmentStatusFinder .finderContainer #bottomContainer #resultSection {
            overflow: visible;
        }

        @media screen and (max-width: 900px) {
            
            .employmentStatusFinder .staticTable.responsiveTable.fixedLayout .overflowContainer {
                overflow: visible;
            }

            .employmentStatusFinder .staticTable .selectable .label {
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .employmentStatusFinder table.responsiveTable tr:not(.table_groupHeader) {
                overflow: visible;
            }

            .employmentStatusFinder table.responsiveTable {
                overflow: visible;
            }

            .employmentStatusFinder #bottomContainer #resultSection {
                overflow: visible;
            }
        }

        .staticTable th.sticky {
        }

        .staticTable td.clickable {
            cursor: pointer;
            /*position:relative;*/
        }


            .staticTable td.clickable::before {
            }

            .staticTable td.clickable.hover,
            .staticTable td.clickable:hover {
                /*box-shadow: inset 0px 0px 0px 200px var(--mediumTransparent);*/

                background-color: var(--mediumTransparent);
                outline: 2px solid var(--medium);
                outline-offset: -4px;
                /*border-radius: var(--round);*/
                /*position:absolute;
            content: '';
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;*/
            }

        .staticTable tr.clickable {
            cursor: pointer;
        }

            .staticTable tr.clickable.hover td,
            .staticTable tr.clickable:hover td {
                /* den womöglich bestehenden box-shadow erweitern um einen zweiten, deshalb per Variable! */
                box-shadow: var(--cellShadow), inset 0px 0px 0px 200px var(--mediumTransparent);
            }

        .staticTable td div.table_dropdown_content {
            position: absolute;
            background-color: var(--bright);
            border: 1px solid var(--dark);
            min-width: 10ch;
            max-width: 70ch;
            overflow: auto;
            box-shadow: 0px 8px 16px 0px var(--darkTransparent);
            z-index: 1;
            padding: 5px;
            margin-bottom: 10px;
            border-radius: var(--round);
            line-height: 1.1;
        }


        .staticTable .table_groupHeader {
            background-color: var(--mediumTransparent);
            font-weight: bold;
        }

.staticTable tr.table_multilineSpacer {
    visibility:hidden;
}
.staticTable tr.table_multilineSpacer > td{
    padding:0;
    height:2px;
    visibility:hidden;
}

.staticTable .highlight > td {
    /* hm. nicht ganz das richtige*/
    /*outline-width: 3px;
        outline-style: solid;
        outline-color: transparent;
        outline-offset: -3px;
        animation-name: staticTableRowhighlight;
        animation-duration: 0.6s;
        animation-iteration-count: 12;
        animation-timing-function: ease-in-out;
        animation-direction: alternate;
        margin-top: 2px;*/
}

    @keyframes staticTableRowhighlight {
        from {
            outline-color: transparent;
            background-color: transparent;
        }

        to {
            outline-color: var(--primary);
            background-color: var(--brightTransparent);
        }
    }

.staticTable th.actionsColumn {
    width: var(--actionColumnWidth);
    max-width: calc(2*var(--actionColumnWidth));
    /*opacity: 0;*/
}

.staticTable td.actionsColumn *:is(.disabled, .w3-disabled) {
    opacity:0.3;
}

.staticTable td.actionsColumn {
    color: initial; /* Farbe zurücksetzen, könnte von einem Formatter sonst überschrieben worden sein */
    .darkTheme & {
                     color:var(--brightText);
                 }
    /*position:relative;
    transition-duration: var(--transitionDurationLong);
    transition-property: background-color, transform;
    transition-timing-function:ease-out;*/
    /*background-color: var(--complimentaryThemeTransparent);*/
    /*vertical-align: middle;*/
}

        /*.staticTable td.actionsColumn:hover{
    transform:scale(1.5);
    position:absolute;
    background-color:var(--bright);
    
}*/

        .staticTable td.actionsColumn > .actionsContainer {
            gap: 0.5em;
            /*justify-content: center;*/
            width:fit-content;
            /*color: var(--complimentaryThemeD5);*/
        }

            .staticTable td.actionsColumn > .actionsContainer > i {
            }



/*um overflow im static table zu ueberschreiben*/
.staticTableForceDisableOverflow table.staticTable {
    overflow: unset !important;
}

    .staticTableForceDisableOverflow table.staticTable div.overflowContainer {
        overflow: unset !important;
    }

    /* FINDERBASE, FINDERVIEWBASE */
.finderContainer, .agendaViewBase_Root {
    min-height: 5rem;
}

        .finderContainer #topContainer {
            margin-bottom: 1em;
        }

            .finderContainer #topContainer #filterContainer {
                margin-bottom: 1em;
            }

            .finderContainer #topContainer #mainButtonsContainer {
                display: flex;
                flex-flow: row;
                gap: 1em;
                margin-bottom: 1em;
            }

        .finderContainer #submitButton {
        }

            .finderContainer #submitButton::before {
                font-family: var(--fontawesome);
                font-weight: bold;
                content: '\f002';
                margin-right: 0.4em;
            }

        .finderContainer #newButton {
        }

            .finderContainer #newButton::before {
                font-family: var(--fontawesome);
                font-weight: bold;
                content: '\f055';
                margin-right: 0.4em;
            }

        .finderContainer #reloadButton {
        }

            .finderContainer #reloadButton::before {
            }

        .finderContainer #bottomContainer {
        }

            .finderContainer #bottomContainer::before {
            }

            .finderContainer #bottomContainer #resultSection {
                /* komplette Ergebnissection (exklusive Error-Container) */
            }

        .finderContainer #pagingContainerBottom,
        .finderContainer #pagingContainerTop {
            padding: var(--paddingSmall);
        }

        .finderContainer #pagingButtonsContainerTop,
        .finderContainer #pagingButtonsContainerBottom{
            text-align:center;

        }

        .finderContainer #pagingContainerTop #pagingButtons {
            min-width: 20ch;
        }

            .finderContainer #pagingContainerTop #pagingButtons {
                padding-left: var(--paddingXSmall);
                padding-right: var(--paddingXSmall);
            }

        .finderContainer #pagingContainerTop {
            margin-bottom: 1em;
        }

        .finderContainer .spacer{
            color:var(--medium);
        }

        .finderContainer #pagingContainerBottom {
            margin-top: 1em;
        }

        .finderContainer #bottomContainer #errorContainer

        .finderPaging {
            /*margin: var(--w3PaddingY);*/
            padding: var(--w3PaddingY);
        }



    .finderPaging div[data-dojo-attach-point=pagingContainer] {
        flex: 1;
    }

    .finderPaging div[data-dojo-attach-point=reloadContainer] {
    }

        .finderPaging div[data-dojo-attach-point=reloadContainer] button[data-dojo-attach-point=btnReloadPage] {
            background-color: var(--secondary);
            color: var(--secondaryText);
            margin: var(--w3PaddingY);
        }

    button.pagingButton {
        /*border: 1px solid var(--secondary);*/
        border: 0px;
        background-color: var(--tertiary);
        color: var(--tertiaryText)!important;
        margin: 2px;
        border-radius: var(--round);

    }

        button.pagingButton.selected {
            background-color: var(--primary);
            border-color: var(--primary);
            color: var(--primaryText)!important;
            pointer-events: none;
            font-weight: bold;
        }

    .finderPaging[data-dojo-attach-point=bottomPagingSection] {
        justify-content: center;
        display: flex;
        flex-flow: row;
        align-content: center;
    }

table.responsiveTable td {
    word-wrap: break-word;
}

    @media screen and (max-width: 900px) {
        table.responsiveTable {
            table-layout: auto;
        }

            table.responsiveTable th,
            table.responsiveTable thead {
                border: none;
                clip: rect(0 0 0 0);
                height: 1px;
                margin: 0px;
                overflow: hidden;
                padding: 0;
                position: absolute;
                width: 1px;
                text-overflow: ellipsis;
            }

            table.responsiveTable tr {
                border-bottom: 1px solid var(--tertiary);
                border-top: 2px solid var(--tertiary);
                display: block;
                margin-bottom: 6px;
                font-size: 1rem;
            }

            table.responsiveTable td {
                border-bottom: 1px solid var(--tertiary);
                display: block;
                text-align: left; /*right;*/
                width: 100% !important;
                /*min-height: 2.634em;*/ /*???*/
            }

                /* */
                table.responsiveTable td:not(.actionsColumn)::before {
                    content: attr(data-label);
                    float: none; /*left;*/
                    color: var(--secondary);
                    /*font-size-adjust: 0.4; geht nur im Firefox*/
                    font-size: 0.75em;
                    max-width: 45ch;
                    display: block;/* inline-block;*/
                    margin-bottom: 0.2em;
                    word-wrap: normal;
                    white-space: break-spaces;
                }

        .staticTable.responsiveTable.fixedLayout .overflowContainer {
            /* wichtig: overflow-Content muss jetzt umbrechen können, sonst schrumpft die Zelle nicht ordentlich */
            white-space: normal;
            overflow: hidden;
            
        }
    }
    /*------------------ moreCore staticTable -------------------------------- END*/
    /* FILEDASHBOARD */
    /*.dashboardTile .filesSection h4::after {
    content:var(--row-count);
    margin-right:0.4em;
}
*/

    .fileDashboardRoot .tilesContainer {
    }

        .fileDashboardRoot .tilesContainer button.btnCloseError{

        } .darkTheme .fileDashboardRoot .tilesContainer button.btnCloseError{
              background-color:var(--complimentaryTheme);
        }

        .fileDashboardRoot .tilesContainer .dashboardTileOuter {
            display: inline-block;
        }

        .fileDashboardRoot .tilesContainer .dashboardTile.innerContent {
            padding-right: var(--paddingX);
            padding-left: var(--paddingX);
            height: 100%;
            --txtColor: inherit;
            --bgColor: var(--mediumTransparent);
            margin-bottom:0;
            color: var(--txtColor);
            background-color: var(--bgColor);
            overflow:unset; /* sonst kann dropdown von searchselect nicht overflowen... */
        }



    .darkTheme .fileDashboardRoot .tilesContainer .dashboardTile.innerContent,
    .tabContainer .fileDashboardRoot .tilesContainer .dashboardTile.innerContent {
        background-color: var(--brightTransparent);
        color: unset;
        outline: 2px solid var(--bgColor);
        outline-offset: -2px;
    }
.darkTheme .fileDashboardRoot .tilesContainer .dashboardTile.innerContent {
    background-color: var(--mediumDarkThemeBG);
}


    .dashboardTile .tableContainer {
        max-height: 20em;
        overflow: hidden;
        overflow-y: auto;
        /*box-shadow: inset 3px 4px 4px -3px var(--darkTransparent);*/
    }

    .dashboardTile table {
        /*border: 1px solid var(--tertiary);*/
        border-collapse: collapse; /*separate;*/
        /*padding: var(--paddingSmall);*/
        width: 100%;
        border-spacing: var(--paddingYSmall);
        /* margin-top: var(--paddingY);*/
        /*margin-bottom: var(--paddingY);*/
    }

        .dashboardTile table.filesTable td[data-col-name="emailBtnContainer"] {
            text-align: right;
            width: min-content;
        }

        .dashboardTile > .description {
            /*color:red;*/
            margin-bottom: 0.5em;
        }

    .dashboardTile > .heading {
        /*color:blue;*/
    }

    .dashboardTile table th {
    }

    .dashboardTile table td:has(*) {
        padding: var(--paddingSmall);
        border-radius: inherit;
    }

        .dashboardTile table td .colTitle {
            font-weight: bold;
            width: 100%;
        }

        .dashboardTile table td .colDescription {
            font-size: 0.9em;
            padding-top: 0;
        }



    .dashboardTile table tr {
        outline: 1px solid var(--tertiary);
        outline-offset: -1px;
        padding: var(--paddingSmall);
        border-radius: var(--round);
    }

        .dashboardTile table tr.new {
            position: relative;
            border-top-left-radius:0px;
            border-bottom-left-radius:0px;
            box-shadow: inset 3px 0px var(--primary);
        }

            /*.dashboardTile table tr.new::after {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 3px;
                height: 100%;
                background-color: var(--primary);
                pointer-events: none;
            }*/

            .dashboardTile table tr.new.downloadable {
                outline-width: 3px;
                outline-style: solid;
                outline-color: transparent;
                outline-offset: -3px;
                animation-name: filerowhighlight;
                animation-duration: 0.6s;
                animation-iteration-count: 12;
                animation-timing-function: ease-in-out;
                animation-direction: alternate;
            }

    @keyframes filerowhighlight {
        from {
            outline-color: transparent;
            background-color: transparent;
        }

        to {
            outline-color: var(--primary);
            background-color: var(--brightTransparent);
        }
    }

    .dashboardTile table tr.new td.new {
        min-height: 2em;
        text-align: center;
        pointer-events: none;
        height: 3em;
        padding: 0;
        background-color: var(--mediumTransparent);
    }

        .dashboardTile table tr.new td.new.waiting {
        }


    .dashboardTile table tr.new.error td.message {
        opacity: 1;
        color: var(--warning);
    }

    .dashboardTile table tr.downloadable {
        /*position:relative;*/
        /*cursor:pointer;*/
    }
        /*    .dashboardTile table tr.downloadable::before {
        content: attr(data-download-info);
        position: absolute;
        top: 50%;
        right: 2em;
        transform: translateY(-50%);
        opacity: 1;
        pointer-events: none;
        opacity: 0.3;
        transition: opacity 0.15s;
        user-select:none;
    }
*/

        .dashboardTile table tr.downloadable td div.colTitle.colored {
        }

            .dashboardTile table tr.downloadable td div.colTitle.colored::before {
                content: '\f111'; /* fa-circle*/
                font-family: var(--fontawesome); /*"Font Awesome 5 Free";*/
                font-weight: bold;
                color: var(--symbol-color); /* Variable wird direkt als Element-Style gesetzt und bekommt daher den Wert */
                margin-right: 0.4em;
            }


        .dashboardTile table tr.downloadable td.colDlInfo {
            vertical-align: bottom;
            text-align: right;
            white-space: nowrap; /* normale Umbrüche gehen*/
        }

        .dashboardTile table tr.downloadable .colDlInfo::after {
            content: '\f56d';
            font-family: var(--fontawesome); /*"Font Awesome 5 Free";*/
            font-weight: bold;
            /*position: absolute;*/
            opacity: 0.8;
            transition: opacity 0.15s;
            pointer-events: none;
            margin-left: 0.4em;
        }

        .dashboardTile table tr.downloadable:hover .colDlInfo::after {
            transition-duration: var(--transitionDurationShort);
            opacity: 1;
        }

        .dashboardTile table tr.downloadable:hover {
            /*background-color: var(--darkTransparent);*/
        }


    .dashboardTile .filtersection, .dashboardTile .filesSection {
        /* margin-top: var(--paddingY);
    margin-bottom: var(--paddingY);*/
        position: relative;
    }


        .dashboardTile .filtersection .buttonRow {
            width: 100%;
            text-align: center;
        }

        .dashboardTile .filtersection .animationContainer {
            position: absolute;
            bottom: -1px;
            left: 0;
            border-bottom-left-radius: var(--round);
            border-bottom-right-radius: var(--round);
            height: 1.5em;
            width: 100%;
            /*background-color: red;*/
            pointer-events: none;
        }

            .dashboardTile .filtersection .animationContainer > div {
                position: relative;
                height: 100%;
                width: 100%;
                /*background-color: red;*/
                pointer-events: none;
            }

    .dashboardTile table tr.empty td {
        text-align: center;
    }

    .dashboardTile table tr.empty {
        color: var(--tertiary);
    }


.multiSelect_root .item {
    flex-wrap: nowrap;
    gap: var(--paddingXSmall);
    padding: var(--paddingSmall);
    /*max-width: 400px;*/
    text-overflow: ellipsis;
    overflow: hidden;
}
        .multiSelect_root .item.colored {
            border-left: 8px solid var(--bgColor, var(--bright));
            margin-bottom:var(--paddingYSmall);
            /*border-left: 4px solid hsl(from var(--bgColor, var(--bright)) h s l / 50% );*/
        }

.darkTheme .multiSelect_root .item.colored {
    --bgColorDark: hsl(from var(--bgColor) h s calc(l * 0.8) / 50%);
    border-left-color:var(--bgColorDark);
}

    .multiSelect_root .label:not(:empty) {
        /*padding-left: var(--paddingX);*/
        margin-right: var(--paddingX);
    }

.multiSelect_root #outerInputWrapper {
    flex: 1;
    position: relative;
    background-color:var(--brightInput);
}
.multiSelect_root #outerInputWrapper > .w3-input {
    background-color:transparent;
}

*:is(.multiSelect_root, .searchSelect_root) #scrollContainer {
    overscroll-behavior: contain;
}
*:is(.multiSelect_root, .searchSelect_root) #dropdownContainer > #innerContainer {
    border: 1px solid var(--medium);
    background-color: var(--brightInput);
    overflow: clip;
    border-bottom-left-radius: var(--round);
    border-bottom-right-radius: var(--round);
    border-top-right-radius: var(--round);
    .darkTheme &
{
    background-color: var(--darkThemeBG);
}
}

*:is(.multiSelect_root, .searchSelect_root) #dropdownContainer .item.selected {
    background: var(--mediumTransparent);
    /*outline:2px solid var(--medium);*/
}

.multiSelect_root #dropdownContainer .groupLabel {
    font-weight:bold;
    font-size:1.05em;
    padding-left:0;
    /*border-bottom:1px solid var(--medium);*/
}
.multiSelect_root #dropdownContainer .groupLabel i:not(.invisible) {
    padding-left: 10px;
}
.multiSelect_root #dropdownContainer button#btnShowSelected.active {
    background-color:var(--primary);
    color:var(--primaryText);
}
    .multiSelect_root #dropdownContainer .groupLabel.colored {
    background-color:var(--bgColor, var(--mediumTransparent));
}
.multiSelect_root #dropdownContainer .groupLabel.colored.darkBG {
    color:var(--bright);
    --hoverColor:var(--brightTransparent);
}
.multiSelect_root #dropdownContainer .groupLabel > i{
    width:1.5em;
    max-width:1.5em;
    min-width:1.5em;
    overflow:clip;
}
.multiSelect_root #dropdownContainer .groupLabel > .label > hr{
    margin:0;
}


.hintbox #inputWrapper:has(button.hintboxInlinebutton) {
    border-top-right-radius: var(--round);
    border-bottom-right-radius: var(--round);
    overflow: clip;
}
*:is(.multiSelect_root, .searchSelect_root) #outerContainer
{
    border-top-right-radius: var(--round);
    border-bottom-right-radius: var(--round);
    overflow: clip;
    /*background-color: var(--brightInput);*/
    .darkTheme &
    {
        /*background-color: var(--darkThemeBG);*/
    }
}

*:is(.multiSelect_root, .searchSelect_root, .moreCoreEdit.multilang):not(.readonly) #dropdownButton,
.hintbox #inputWrapper button.hintboxInlinebutton
{
    background-color: var(--complimentaryTheme);
    color: var(--complimentaryThemeTxt);
}

/* ab dem zweiten Inlinebutton kleinen Schattenwurf als optische Trennung: */
    .hintbox #inputWrapper button.hintboxInlinebutton:not(:first-child) {
        box-shadow: -2px 0px 6px -3px var(--darkTransparent);
    }



*:is( .moreCoreEdit:not(.multilang), .selectbox, .moreCore_NumberInput, .moreCore_TimeInput, .moreCore_DateInput).invalid *[data-dojo-attach-point=inputNodeContainer] > *:is(textarea, input, select),
.moreCoreEdit.multilang.invalid #mainRow[data-dojo-attach-point=inputContainer],
*:is(.multiSelect_root, .searchSelect_root).invalid #outerContainer,
*:is(.moreCore_DateTimeInput).invalid #combineContainer,
*:is(.emailRecipientInput_root).invalid #rowContainer,
.moreCoreColorPicker.invalid *:is(#bgContainer, #txtContainer),
*:is(.hintbox).invalid #inputWrapper {
    --borderColor: var(--warning);
    box-shadow: 0px 0px 3px -1px var(--warning), inset 0px 0px 2px -1px var(--warning);
}
*:is(.multiSelect_root, .searchSelect_root, .moreCoreEdit.multilang) #selectInfoContainer {
    padding-left: 0.4em;
    padding-right: 0.4em;
    white-space: nowrap;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    background-color: var(--brightInput);
}

*:is(.multiSelect_root, .searchSelect_root) #outerInput {
   
}
*:is(.multiSelect_root, .searchSelect_root) #outerInputWrapper:has(.valueDisplay) #outerInput {
   opacity:0;
}
*:is(.multiSelect_root, .searchSelect_root) #outerInputOverlay {
   overflow:clip;
   position:absolute;
   inset:0;
   pointer-events:none;
   gap:2px;
}
*:is(.multiSelect_root, .searchSelect_root) #outerInputOverlay.crowded {
   flex-wrap:wrap;
   max-height:2.2lh;

}
    *:is(.multiSelect_root, .searchSelect_root) #outerInputOverlay > .valueDisplay.darkBG {
        --bgColor: var(--bright);
    }
    *:is(.multiSelect_root, .searchSelect_root) #outerInputOverlay.crowded > .valueDisplay {
        /*content-visibility: hidden;*/
        max-height:1lh;
        min-width: 0.7lh;
        max-width: 10ch;
        font-size: 0.6em;
        flex-basis: 6ch;
        flex-grow: 1;
        flex-shrink: 1;
    }

.multiSelect_root.singleSelect #outerInputOverlay > .valueDisplay {
    --bgColor: transparent;
}
    *:is(.multiSelect_root, .searchSelect_root) #outerInputOverlay > .valueDisplay {
        --bgColor: var(--mediumTransparent);
        --txtColor: var(--darker);
        background-color: var(--bgColor);
        color: var(--txtColor);
        border-radius: var(--roundest);
        padding: 0.05em 0.3em;
        font-size: 0.90em;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: clip;
        min-width: 1em;
        flex-shrink: 1;
        .darkTheme &
{
    --bgColorDark: hsl(from var(--bgColor) h s calc(l * 0.8) / 50%);
    background-color: var(--bgColorDark);
    --txtColor: var(--brighter);
}

}


.multiSelect_root.singleSelect #outerInputOverlay > .valueDisplay {
    font-size: 1em;
    padding: var(--paddingY);
    border-radius: 0;
    flex-grow: 1;
    
    body:not(.darkTheme) &
{
    --bgColor: var(--brightInput);
}
}

.darkTheme .multiSelect_root #selectInfoContainer {
    /*background-color: var(--brightInput);*/
}
*:is(.moreCoreEdit.multilang) #selectInfoContainer.complete {
    display:none; /* bei Multilang ausblenden, wenn alles gewählt */
}

*:is(.multiSelect_root, .searchSelect_root, .moreCoreEdit.multilang) .secondaryLabel {
    opacity: 0.8;
}

*:is(.multiSelect_root, .searchSelect_root, .moreCoreEdit.multilang) #selectInfo {
    border-radius: var(--roundest);
    padding: 0.4em;
    background-color: var(--secondary);
    color: var(--secondaryText);
    font-size:var(--w3Small);
}
*:is(.multiSelect_root, .searchSelect_root) #selectInfoContainer.complete #selectInfo {
    outline: 1px solid var(--success);
    outline-offset: -1px;    
}


.moreCoreColorPicker {
    /*display: inline-block;*/ /* dann nimmt er nicht immer 100% Breite von selber*/
    display: block; /* ... aber besser wärs, damit der umliegende Container sich drum kümmern kann */
}

    .moreCoreColorPicker #colorPartsContainer {
        flex-grow: 1;
        max-width: 40ch;
    }

    .moreCoreColorPicker label.iconContainer{
        padding:var(--paddingSmall);
        padding-right:0;
    }

    .moreCoreColorPicker #bgContainer,
    .moreCoreColorPicker #txtContainer {
        border-radius: var(--round);
        border: 1px solid var(--borderColor);
        background-color: var(--bright);
        color:var(--dark);
        overflow:clip;

        .darkTheme &
{
    background-color: var(--brightTransparent);
    color:inherit;
}
    }
    .moreCoreColorPicker #bgContainer.empty,
    .moreCoreColorPicker #txtContainer.empty {
        --stripe1Color: var(--mediumDarkTransparent);
        --stripe2Color: var(--mediumBrightTransparent);
        --stripe1Width: 8px;
        --smooth1to2: 2px;
        --smooth2to1: 2px;
    }
        .moreCoreColorPicker .empty *:is(#inputBG, #inputTXT){
            opacity: 0.5;
        }
    .moreCoreColorPicker #inputNodeContainer {
        justify-content:flex-end;
    }
    .moreCoreColorPicker #inputBG,
    .moreCoreColorPicker #inputTXT {
        border-radius: 0;
        border: 0;
        padding: 2px;
        cursor: pointer;
        background-color: transparent;
        align-self: center;
    }
    .moreCoreColorPicker #inputBG + button,
    .moreCoreColorPicker #inputTXT + button{
        border-radius:0;
    }
.moreCoreColorPicker #previewContainer,
.moreCoreColorPicker #previewContainerSingle {
    color: initial; /* initiale Farbe, wenn sonst nix is */
    padding: 1px; /* damit die Outline Platz hat!*/
}
.darkTheme .moreCoreColorPicker #previewContainer,
.darkTheme .moreCoreColorPicker #previewContainerSingle {
    color: var(--brightText);
}
.moreCoreColorPicker #previewNode {
    color: var(--colorTXT, inherit);
    background-color: var(--colorBG, var(--bright));
    min-width: 12ch;
    height: 100%;
    align-content: center;
    border-radius: var(--roundest);
    outline-offset: -1px;
    outline: 2px solid currentColor;
    overflow: clip;
    white-space: nowrap;
    text-overflow: clip;
}
    .moreCoreColorPicker #previewNode.darkBG {
        color: var(--colorTXT, var(--bright));
    } 
    .darkTheme .moreCoreColorPicker #previewNode:not(.darkBG) {
        color: var(--colorTXT, var(--dark));
    }
.moreCoreColorPicker #previewNodeSingle {
    color: var(--colorTXT, inherit);
    text-shadow: 0px 0px 1px var(--dark);
    background-color: var(--color, var(--mediumTransparent));
    min-width: 4ch;
    height: 100%;
    align-content: center;
    border-radius: var(--roundest);
    outline: 2px solid currentColor;
    outline-offset: -1px;
    overflow: clip;
    white-space: nowrap;
    text-overflow: clip;
}
        .moreCoreColorPicker #previewNodeSingle.darkBG {
            color: var(--bright);
        }

.darkTheme .moreCoreColorPicker #previewNode {
    --bgColorDarkTheme: color-mix(in lab, var(--colorBG, var(--bright)) 70%, var(--dark));
    /*background-color: var(--bgColorDarkTheme, var(--dark));*/
}

    .passwordChangeForm_Root {
    }
  
   
    /* The message box is shown when the user clicks on the password field */
    .passwordChange_messageNode {
        /*background: #f1f1f1;*/
        /*color: #000;*/
        position: relative;
        /*padding: var(--padding);*/
        /*margin-top: 10px;*/
    }




    .passwordChangeForm_Root .passwordChange_messageNode p {
        padding-bottom: var(--paddingYSmall);
        /*font-size: 14px;*/
    }   
    
    /* Add a green text color and a checkmark when the requirements are right */
    .passwordChangeForm_Root .criterion.valid {
        color: var(--w3Green);
    }

        .passwordChangeForm_Root .criterion.valid:before {
            position: relative;
            /*left: -35px;*/
            content: "\f00c";
            font-family: var(--fontawesome); /*"Font Awesome 5 Free";*/
            margin-right: 0.3em;
            font-weight: bold;
        }

.passwordChangeForm_Root.minCriteriaChecked .criterion.invalid:not(.mandatory){
    opacity:0.6;
    color:var(--secondary);
}
/* Add a red text color and an "x" when the requirements are wrong */
.passwordChangeForm_Root .criterion.invalid {
    color: var(--warning);
}

        .passwordChangeForm_Root .criterion.invalid:before {
            position: relative;
            /*left: -35px;*/
            content: "\f00d";
            font-family: var(--fontawesome); /*"Font Awesome 5 Free";*/
            font-weight: bold;
            margin-right: 0.3em;
        }

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

    .table_dropdown_content {
        position: absolute;
        background-color: #bfbfbf;
        border: 1px solid black;
        min-width: 160px;
        max-width: 600px;
        overflow: auto;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        padding: 5px;
        margin-bottom: 10px;
    }

    .table_groupHeader {
        background-color: #999999;
    }
    /*.tab { /*  ?????? */
    /*
    height: 40px;
    width: 250px;
    border-radius: 10px 10px 0px 0px;
    background-color: red;
    position: relative;
}*/
    .arrow {
        border-color: transparent transparent #FFF #FFF;
        border-style: solid;
        border-width: 23px 23px 23px 23px;
        height: 0;
        width: 0;
        position: absolute;
        bottom: 0px;
        right: -43px;
    }

    .NestedTable_tabLabel {
        text-align: center;
        height: 30px;
        padding: 5px;
        font-weight: bold;
        width: 300px;
        border-radius: 5px 10px 0px 0px;
        position: relative;
        display: inline-block;
        margin-right: 28px;
        transition: all 0.3s;
    }

    .NestedTable_tabLabel_arrow {
        border-color: #FFF #FFF transparent transparent;
        border-style: solid;
        border-width: 14px 14px 14px 14px;
        height: 0;
        width: 0;
        position: absolute;
        bottom: 0px;
        right: -24px;
        transition: all 0.3s;
    }

    .NestedTable_tabLabel_selected {
        opacity: 1;
    }

    .NestedTable_tabLabel_not_selected {
        opacity: 0.4;
    }
    /* WIZARDVIEW */
    .wizardView {
        --borderColor: var(--secondary);
        --borderWidth: 2px;
        --borderWidthThin: 1px;
        --selectedColor: var(--primary);
        --validColor: var(--w3Green);
        /*    --paddingX: var(--paddingX);
    --paddingXSmall: var(--paddingXSmall);
    --paddingY: var(--paddingY);
    --paddingYSmall: var(--paddingYSmall);
    --padding: var(--paddingY) var(--paddingX);
    --paddingSmall: var(--paddingYSmall) var(--paddingXSmall);
*/
    }

        .wizardView #bottomNavBar,
        .wizardView #topNavBar {
            gap:1em;
        }
        .wizardView #chapterNavButtonContainer {
            gap: 0.4em;
            flex-grow: 1;
            overflow-x: auto;
            flex-wrap:nowrap;
        } 
        
        .wizardView #pagecontainer {
            min-height:8em;
        }
        .wizardView .navRow {
            border-top: var(--borderWidthThin) solid var(--borderColor);
            border-bottom: var(--borderWidthThin) solid var(--borderColor);
            padding-top: var(--paddingY);
            padding-bottom: var(--paddingY);
            width: 100%;
        }

            .wizardView .navButton:is(.previous, .next){
                white-space:nowrap;
            }
            
            .wizardView .navButton:is(.previous, .next).selectable{
                
            }

        .wizardView .navRow .chapterNavButton {
            /*margin-left: 0.4em;
            margin-right: 0.4em;*/
            max-width: 35ch;
            padding: var(--paddingSmall);
            background-color: var(--mediumTransparent);
            overflow: clip;
            text-overflow: ellipsis;
        }

           /* .wizardView .navRow .topNavButton {
                display: flex;
                flex-direction: column;
                justify-content: end;
            }*/
                /*.wizardView .navButton.previous, 
            .wizardView .navRow .topNavButton:first-child{
                margin-left:0;
            }*/
        .wizardView .navRow .chapterNavButton .title {
            font-size: 1.1em;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

                .wizardView .navRow .chapterNavButton .summary {
                    font-size: 0.8em;
                    margin-top: 0.2em;
                    margin-bottom: 0.2em;
                    text-align:left;
                    line-height:1.2;
                }

            .wizardView .navRow .chapterNavButton.valid .title::before {
                content: '\f00c'; /* fa-check*/
                font-family: var(--fontawesome); /*"Font Awesome 5 Free";*/
                color: var(--validColor);
                margin-right: 0.4em;
                font-weight: bold;
            }

        .wizardView .navRow .chapterNavButton.inactive, .wizardView .navButton.inactive {
            opacity: 0.5;
            cursor: not-allowed;
            background-color: transparent;
            pointer-events: none;
        }

            .wizardView .navRow .chapterNavButton.selectable {
                transition-duration: var(--transititionDurationLong);
                transition-property: background-color;
                opacity: 1;
            }

                .wizardView .navRow .chapterNavButton.selectable:not(.selected):hover {
                    /*font-weight:bold;*/
                    background-color: var(--darkTransparent);
                    cursor: pointer;
                    transition-duration: var(--transititionDurationShort);
                }

.darkTheme .wizardView .navRow .chapterNavButton.selectable:not(.selected):hover {
    /*font-weight:bold;*/
    background-color: var(--brightTransparent);
}

.wizardView .navRow .chapterNavButton.selected {
    /*outline: var(--borderWidth) solid var(--selectedColor);
        outline-offset: -2px;*/
    box-shadow: inset 0px calc(-1 * var(--borderWidth)) var(--selectedColor);
    background-color: var(--mediumTransparent);
}

    .wizardView .navRow .chapterNavButton.selected .title {
        font-weight: bold;
    }

    .wizardView .wizardPage > .content {
        /*border: var(--borderWidth) solid var(--borderColor);*/
        width: 100%;
    }
    /* RESOURCEPICKER */
    .resourcePicker {
        --baseFontSize: 1rem;
        --sizeBaseUnit: 60px; /* Basiseinheit für die Kastln, multipliziert mit Höhe und Breite drunter */
        --heightFactor: 1; /* Seitenverhältnis Breite */
        --widthFactor: 2.5; /* Seitenverhältnis Höhe */
        --selectedColor: var(--primary); /* vom Benutzer gewählt (oder vorausgewählt)*/
        --selectedColorTxt: var(--primaryText); /* vom Benutzer gewählt (oder vorausgewählt)*/
        --occupiedColor: var(--warning); /* wenns belegt ist */
        --occupiedColorTxt: var(--primaryText); /* wenns belegt ist */
        --blockedColor: transparent; /*var(--w3PaleRed); */ /* blockierte Gruppe */
        --blockedColorTxt: inherit;
        --itemDefaultColor: transparent; /*var(--mediumTransparent);*/ /* Standardfarbe */
        --itemSelectableColor: var(--mediumTransparent); /*var(--accentThemeL4);*/
        --spacing: 2px; /* Abstand der Tabellenzellen - führt effektiv zu Abstand vertikal unter der Gruppe und horizontal zwischen Spalten */
        --itemGap: 0px; /* Abstand zwischen den Kastln zum Klicken. ACHTUNG: bei unterschiedlichen Höhen alignen sich Items nicht mehr! */
        --itemBorderWidth: 1px; /* Rahmen um die Kastln*/
        --itemBorderColor: var(--medium); /* Farbe des Rahmens */
        --layoutBorderWidth: 2px;
        --layoutBorderColor: var(--secondary);
        --groupDefaultColor: var(--secondary);
        --groupDefaultTxtColor: var(--veryBright);
        --tooltipColor: var(--w3Blue);
        --tooltipTxtColor: white;
        --tooltipBorderColor: var(--brightTransparent);
        --maxHeight: unset;

        .darkTheme &
        {
            --occupiedColor: color-mix(in lab, var(--warning) 70%, var(--dark));
        }
    }
        /* div das den table-Tag enthält*/
        .resourcePicker .tableContainer {
            max-height: var(--maxHeight);
            width: max-content;
            overflow: auto; /* sticky header geht besser ohne overflow, lustig...*/
        }
        /* die eigentliche Table*/
        .resourcePicker table {
            font-size: var(--baseFontSize);
            /*border-collapse:collapse;*/
            border-spacing: var(--spacing);
            width: 100%;
        }

            .resourcePicker table tbody {
                vertical-align: top;
            }
            /* DEBUG */
            .resourcePicker table tr.contentrow {
                /*border: 1px solid red;*/
                /*background-color: palegoldenrod;*/
            }

                .resourcePicker table tr.contentrow td:nth-child(2n) {
                    /*background-color: paleturquoise;*/
                }

        .resourcePicker .headrow {
            position: sticky;
            top: 0;
            z-index: 5;
            box-shadow: 0px 2px 4px var(--darkTransparent);
            font-weight: normal;
        }
        /* Spalte, in der die einzelnen Items landen*/
        .resourcePicker .resourceContainer {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            gap: var(--itemGap);
            /*box-shadow: inset var(--itemBorderWidth) 0px var(--itemBorderColor), inset calc(-1 * var(--itemBorderWidth)) 0px var(--itemBorderColor);*/
            /*border-left: var(--itemBorderWidth) solid var(--itemBorderColor);*/
            /*border-right: var(--itemBorderWidth) solid var(--itemBorderColor);*/
            /*border-top: var(--itemBorderWidth) solid var(--itemBorderColor);*/
            outline: var(--itemBorderWidth) solid var(--itemBorderWidth);
            outline-offset: calc( -1 * var(--itemBorderWidth) );
            max-width: 100%;
            width: 100%;
        }
        /* sowohl Gruppenkopf als auch die items sind einmal horizontal unterteilt, damit tooltip-Button und Inhalt nebeneinander Platz haben */
        .resourcePicker .splitContainer {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: stretch;
            position: relative;
            height: 100%;
        }

        .resourcePicker .groupHead > .splitContainer > .mainContainer {
            flex: 1;
            pointer-events: none;
        }

        .resourcePicker .mobileHeader.clickableTooltip, .resourcePicker .groupHead.clickableTooltip {
            cursor: pointer;
            transition: var(--mds-hover-transition-out);
            transition-property: box-shadow;
        }

        .resourcePicker .groupHead.clickableTooltip {
            position: relative;
        }
        /* Table-Head-Spalte mit dem Gruppendeskriptor */
        .resourcePicker .groupHead, 
        .resourcePicker .mobileHeader {
            /*white-space: pre-line;*/
            /*border-bottom: var(--layoutBorderWidth) solid var(--layoutBorderColor);*/
            /*vertical-align: bottom;*/
            outline: var(--layoutBorderWidth) solid var(--layoutBorderColor);
            outline-offset: calc( -1 * var(--layoutBorderWidth) );
            background-color: var(--groupDefaultColor);
            color: var(--groupDefaultTxtColor);
            padding: var(--layoutBorderWidth);
        }

.resourcePicker .groupHead {
    max-width: calc(var(--widthFactor) * var(--sizeBaseUnit)); /* nicht bei mobile!*/
    min-width: calc(var(--widthFactor) * var(--sizeBaseUnit));
}
        /*.resourcePicker .groupHead:nth-child(n + 2) {
        border-left: var(--layoutBorderWidth) solid var(--layoutBorderColor);
    }*/
        /* klickbares Item */
        .resourcePicker .item {
            background: var(--itemDefaultColor);
            /*width: 100%;*/ /*calc(var(--widthFactor) * var(--sizeBaseUnit));*/
            height: calc(var(--heightFactor) * var(--sizeBaseUnit));
            border-bottom: var(--itemBorderWidth) solid var(--itemBorderColor);
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            justify-content: center;
            position: relative;
        }
            .resourcePicker .item.disabled {
                --stripe1Color: var(--mediumBrightTransparent);
                --stripe2Color: var(--itemDefaultColor);
                --stripe1Width: 10px;
                --stripe2Width: var(--stripe1Width, 6px);
                --smooth1to2: 1px;
                --smooth2to1: 1px;
                --angle: -35deg;
                background-image: repeating-linear-gradient(var(--angle), var(--stripe1Color) 0px, var(--stripe1Color) var(--stripe1Width), var(--stripe2Color) calc(var(--stripe1Width) + var(--smooth1to2)), var(--stripe2Color) calc(var(--stripe1Width) + var(--stripe2Width)), var(--stripe1Color) calc(var(--stripe1Width) + var(--stripe2Width) + var(--smooth2to1)));

                .darkTheme &
                {
                            --stripe1Color: var(--mediumTransparent);
                }
            }
        /* die items dürfen ja eigentlich nicht overflowen, aber weils Tooltips gibt, müssen wir doch trennen: */
        .resourcePicker .mainContainer {
            overflow: hidden;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            /*padding: var(--paddingSmall);*/
        }

        .resourcePicker .overflowContainer {
            overflow: visible;
            position: absolute;
            top: calc(100% - 3px);
            z-index: 3;
        }

        .resourcePicker .groupHead > .overflowContainer {
            overflow: visible;
            position: absolute;
            top: 100%;
            z-index: 3;
        }

        .resourcePicker .groupHead.customColor {
            /*box-shadow: inset calc( 2 * var(--layoutBorderWidth)) calc( -2 * var(--layoutBorderWidth) ) var(--bgColor);*/
            background-color: var(--bgColor);
        }

        .resourcePicker .mainLabel {
            text-align: center;
            font-weight: bold;
        }

        .resourcePicker .groupHead .secondaryLabel, .resourcePicker .item .secondaryLabel {
            font-size: 0.8em;
            text-align: center;
            font-weight: normal;
            /* mit flex und min-height funkt adjustHeightFactor nicht...*/
            /*flex: 1;*/
            /*min-height: 0;*/
            opacity: 0.8;
        }

        .resourcePicker .item {
            height:unset;
        }

            .resourcePicker .item.selectable {
                cursor: pointer;
                transition: var(--mds-hover-transition-out);
                transition-property: box-shadow;
                background-color: var(--itemSelectableColor);
            }

                .resourcePicker .item.selectable:hover {
                    transition: var(--mds-hover-transition-in);
                    box-shadow: inset 0 0 100px var(--darkTransparent);
                }

    .darkTheme .resourcePicker .item.selectable:hover {
        box-shadow: inset 0 0 100px var(--brightTransparent);
    }

    .resourcePicker .item.disabled .mainContainer {
        pointer-events: none;
        opacity: 0.6;
    }

    .resourcePicker .item.invisible {
        pointer-events: none;
        opacity: 0 !important;
    }

    .resourcePicker .item.occupied {
        background-color: var(--occupiedColor);
        color: var(--occupiedColorTxt);
    }

    .resourcePicker .item.selected {
        color: var(--selectedColorTxt);
        border-bottom-color: var(--selectedColor);
        position: relative;
    }

        .resourcePicker .item.selected:before {
            content: '';
            position: absolute;
            pointer-events: none;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            background: var(--selectedColor);
        }

        .resourcePicker .item.selected.disabled:before {
            opacity: 0.3;
        }

        .resourcePicker .item.selected.first:before {
            position: absolute;
            pointer-events: none;
            content: '\f0d7'; /* caret-down*/
            font-family: var(--fontawesome); /*"Font Awesome 5 Free";*/
            font-weight: bold;
            bottom: 0;
            width: 100%;
            margin-left: var(--paddingXSmall);
        }

        .resourcePicker .item.selected.between:before {
            position: absolute;
            pointer-events: none;
            content: '\f2d1'; /* fa-window-minimize*/ /*'\f142'; */ /* ellipsis-v */
            font-family: var(--fontawesome); /*"Font Awesome 5 Free";*/
            font-weight: bold;
            transform: rotate(90deg);
            top: 50%;
            width: 100%;
            margin-left: var(--paddingXSmall);
        }

        .resourcePicker .item.selected.last:before {
            position: absolute;
            pointer-events: none;
            content: '\f0d8';
            font-family: var(--fontawesome); /*"Font Awesome 5 Free";*/
            font-weight:bold;
            top: 0;
            width: 100%;
            margin-left: var(--paddingXSmall);
        }

    .resourcePicker .blockedGroup, .resourcePicker .emptyGroup:after, .resourcePicker .resourceContainer.emptyGroup.expanded:after {
        /*transform: rotate(0deg);*/ /* führt zu falschem Layout... */
        writing-mode: vertical-lr;
        background-color: var(--blockedColor);
        color: var(--blockedColorTxt);
        height: 100%;
        display: flex;
        font-size: 1.2em;
        /*justify-content: center;*/
        align-items: center;
        padding: var(--padding);
        pointer-events: none;
        opacity: 0.6;
        height: max-content;
        content: attr(emptyLabel);
    }

    .resourcePicker .emptyGroup:after {
        font-size: 1em;
        opacity: 0.3;
    }

    .resourcePicker .emptyGroup:after {
    }
    /* Tooltip text */
    .resourcePicker .tooltiptext {
        /*visibility: hidden;*/
        display: none;
        background-color: var(--tooltipColor);
        color: var(--tooltipTxtColor);
        text-align: left;
        font-weight: normal;
        font-size: 0.9em;
        padding: var(--padding);
        border-radius: var(--round);
        box-shadow: 1px 2px 4px var(--darkTransparent);
        outline: var(--layoutBorderWidth) solid var(--tooltipBorderColor);
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 3;
        left: calc(-2 * var(--round));
        top: calc(100% + 10px);
    }
    /* Show the tooltip text when you mouse over the tooltip container */
    .resourcePicker .showTooltip .tooltiptext {
        display: block;
        /*white-space:nowrap;*/ /* zu extrem... */
        min-width: calc(var(--widthFactor) * var(--sizeBaseUnit));
    }
        /* das kleine Dreieck, das am Tooltip die Herkunft markiert*/
        .resourcePicker .showTooltip .tooltiptext:after {
            content: '';
            position: absolute;
            left: var(--round);
            top: -6px;
            border-top: none;
            border-right: 15px solid transparent;
            border-left: 15px solid transparent;
            border-bottom: 10px solid var(--tooltipColor);
        }

    .resourcePicker .tooltipIcon.showTooltip {
        outline: var(--layoutBorderWidth) solid var(--tooltipColor);
        outline-offset: calc(-1 * var(--layoutBorderWidth));
        background-color: var(--tooltipColor);
        color: var(--tooltipTxtColor);
        cursor: pointer;
    }

.resourcePicker .tooltipIcon, .resourcePicker .expanderButton {
    padding: var(--paddingSmall);
    /*position: absolute;
        left: 0;
        z-index: 1;*/
    border-radius: var(--round);
    transition-property: background-color;
    transition-duration: var(--transitionDurationLong);
    cursor: pointer;
    position: relative;
    background-color: inherit;
    color:inherit;
}

    .resourcePicker .tooltipIcon:hover, .resourcePicker .expanderButton:hover {
        background-color: var(--brightTransparent);
        transition-duration: var(--transitionDurationShort);
    }

.darkTheme .resourcePicker .tooltipIcon:hover, .darkTheme .resourcePicker .expanderButton:hover {
    background-color: var(--darkTransparent);
}

    .resourcePicker .mobileHeader .expanderButton {
        display: none;
    }

    .resourcePicker .mobileHeader {
        display: none;
    }
    .resourcePicker .mobileHeader > .mainContainer {
        opacity:0.6;
    }

    @media screen and (max-width: 900px) {
        .resourcePicker table {
            table-layout: auto;
            width: 100%;
        }

        /* standardmäßig: Container ist collapsed*/
        .resourcePicker .resourceContainer .item {
            display: none;
        }

        /* Expander anzeigen wenn ein Platzhalter vorhanden oder Items vorhanden:*/
        .resourcePicker .resourceContainer[emptylabel] .mobileHeader .expanderButton,
        .resourcePicker .resourceContainer.hasItems .mobileHeader .expanderButton {
            display: block;
        }

        .resourcePicker .resourceContainer.hasItems .mobileHeader > .mainContainer {
            opacity: 1;
        }

        .resourcePicker .resourceContainer.expanded .item {
            display: block;
        }

        .resourcePicker .emptyGroup:after {
            display: none;
        }

        /* wenne in einer Gruppe nix drin ist: ausgrauen, dann sieht mans auch ohne aufklappen gelich*/
        .resourcePicker .resourceContainer.emptyGroup .mobileHeader {
            opacity: 0.6;
        }

        /* überschreiben, dass das Pseudoelement vertikal im Picker drinsteht */
        .resourcePicker .resourceContainer.emptyGroup.expanded:after {
            writing-mode: initial;
            justify-content: center;
        }


        .resourcePicker .mobileHeader {
            display: block !important;
            background-color: var(--groupDefaultColor);
            width: 100%;
            text-align: center;
            color: var(--groupDefaultTxtColor);
            display: contents;
            /*font-weight: bold;*/
            position: sticky;
            top: 0;
            z-index: 5;
            box-shadow: 0px 2px 4px var(--darkTransparent);
        }

        .resourcePicker table thead {
            border: none;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: 0px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
        }

        .resourcePicker table tr {
            border-bottom: 1px solid var(--tertiary);
            border-top: 2px solid var(--tertiary);
            display: block;
            margin-bottom: 6px;
        }

        .resourcePicker table td {
            border-bottom: 1px solid var(--tertiary);
            display: block;
            text-align: right;
            width: 100% !important;
        }

        .resourceContainer .itemsContainer {
            width: 100%;
            display: flex;
            align-content: center;
        }

        /*.resourcePicker table .resourceContainer::before {
                content: attr(groupLabel);
                background-color: var(--groupDefaultColor);
                width: 100%;*/ /*calc(var(--widthFactor) * attr(widthfactor) * var(--sizeBaseUnit));*/
        /*float: left;*/
        /*text-align: center;
                padding: var(--padding);
                color: var(--groupDefaultTxtColor);
                display: contents;
                font-weight: bold;
                position: sticky;
                top: 0;
                z-index: 5;
                box-shadow: 0px 2px 4px var(--darkTransparent);*/
        /*font-size: 0.8em;*/
        /*}*/

        /* wenns einen Tooltip gibt, dann hover-Effekt im Pseudo-Gruppenkopf: */
        .resourcePicker table .resourceContainer.clickableTooltip::after {
            content: '';
            position: sticky;
            top: 0;
        }

            .resourcePicker table .resourceContainer.clickableTooltip::after:hover {
            }

        .resourcePicker .blockedGroup {
            /*transform: rotate(0deg);*/ /* führt zu falschem Layout... */
            writing-mode: unset;
            justify-content: center;
        }

        .resourcePicker .tableContainer {
            width: unset;
        }
    }
    /* SELECTENTITYDIALOG */
    .selectEntityDialog {
        --selectedColor: var(--primary);
        --selectedColorTxt: var(--primaryText);
    }

        .selectEntityDialog #verticalContainer #descriptionContainer {
            padding: var(--padding);
        }

        .selectEntityDialog #verticalContainer pre#treeDescription {
            font-family: inherit;
            margin: 0;
            line-height: 1.2;
        }

    .genericdialog #content #progressContainer {
    }

    .selectEntityDialog button.dlgSubmitCount::after, .selectEntityDialog span#itemCountLabel::after {
        content: attr(itemcount);
        margin-left: 0.4em;
    }

    .selectEntityDialog button#spacer {
        flex: 1;
        visibility: hidden;
        opacity: 0;
        margin-left: 0 !important;
        flex-basis: 0px;
        overflow: visible;
        pointer-events: none;
        padding: 0 !important;
    }

    .selectEntityDialog button#deselectAll, .selectEntityDialog button#createNew, .selectEntityDialog button#selectNone {
       /* margin-left: 0 !important;
        margin-right: var(--paddingX) !important;*/
    }

        .selectEntityDialog button#createNew::before {
            content: '\f055';
            font-weight: bold;
            font-family: var(--fontawesome);
            margin-right: 0.4em;
        }

    .selectEntityDialog div.selectableItem {
        width: 100%;
        background-color: var(--mediumTransparent);
        border-bottom: 1px solid var(--medium);
        display: flex;
        flex-flow: row;
        align-items: center;
        padding: var(--paddingY);
    }

    .selectEntityDialog .selectableItem #rightContainer {
        max-width: 40%;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: right;
        white-space: nowrap;
        line-height: 1.2;
    }

        .selectEntityDialog .selectableItem #rightContainer .itemType {
            opacity: 0.6;
            text-transform: uppercase;
            font-weight: bold;
        }

        .selectEntityDialog .selectableItem #rightContainer .sourceTreename {
            opacity: 0.6;
            font-size: 0.8em;
        }

    .selectEntityDialog div.selectableItem > #labelContainer {
        overflow:clip;
        display: flex;
        flex-flow: column;
        justify-content: center;
        flex: 1;
        flex-basis: 10ch;
        position: relative;
    }

    .selectEntityDialog .itemContainer#selectedItems div.selectableItem > #labelContainer #sourceTree {
    }

    .selectEntityDialog div.selectableItem.selected {
        background-color: var(--selectedColor);
        color: var(--selectedColorTxt);
    }

.selectEntityDialog div.selectableItem > #labelContainer > div#label {
    /*white-space: nowrap;*/ /* geht nur wenn labelcontainer begrenzt wird (overflow oder width...)*/
    text-wrap: balance;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: bold;
}

    .selectEntityDialog div.selectableItem > #labelContainer > div#secondarylabel {
        line-height: 1.1em;
        font-size: 0.8em;
        margin-bottom: 0.4em;
        opacity:0.8;
    }

    .selectEntityDialog.multiselectable div.selectableItem::before {
        content: '\f111';
        font-family: var(--fontawesome); /*"Font Awesome 5 Free";*/
        margin-right: 0.6em;
    }

    .selectEntityDialog.multiselectable div.selectableItem.selected::before {
        content: '\f058';
        font-weight: bold;
    }

    .selectEntityDialog #filterContainer {
        outline: 2px solid var(--primary);
        margin-bottom: 2px;
    }

    .selectEntityDialog input#simpleSearch {
        border: 0px;
        width: 100%;
    }
    .darkTheme .selectEntityDialog input#simpleSearch {
        background-color:var(--dark)
    }

    .selectEntityDialog input#simpleSearch, .selectEntityDialog .filterPanel {
        box-shadow: 0px -2px 3px 0px var(--darkTransparent) /*, 0px 3px 3px 0px var(--darkTransparent)*/;
        z-index: 2;
    }

    .selectEntityDialog .filterPanel {
        padding: var(--padding);
    }

    .selectEntityDialog #verticalContainer {
        display: flex;
        flex-flow: column;
    }

.selectEntityDialog #resultContainer, .selectEntityDialog #noResultContainer {
    box-shadow: inset 0px 4px 4px -4px var(--darkTransparent);
    min-height: 2em;
    overflow: auto;
    /* flex-shrink: 1; */
    /*flex-basis: 0;*/ /* damit bleibt zwar der Rest des SED-Dialogs sichtbar, aber die Results wachsen nicht mehr...*/
}
.selectEntityDialog #resultContainer {
    min-height: 10em; /*weniger macht sogar bei 0 Ergebnissen eigentlich keinen Sinn...*/
}

    .selectEntityDialog #tabContainer {
        align-items: flex-end;
        flex-wrap: nowrap;
        justify-content: space-between;
        display: flex;
        flex-flow: row;
        border-bottom: 2px solid var(--medium);
        z-index: 1;
    }

    .selectEntityDialog #descriptionContainer {
        background-color: var(--selectedColor);
        color: var(--selectedColorTxt);
        padding: var(--paddingSmall);
    }

    .selectEntityDialog #tabContainer #leftContainer {
        column-gap: 1em;
    }

    .selectEntityDialog #tabContainer #rightContainer button:last-child {
        margin-right: 0.8em;
    }

    .selectEntityDialog #tabContainer #leftContainer button:first-child {
        margin-left: 0.8em;
    }

    .selectEntityDialog #tabContainer button.treebutton {
        position: relative;
        user-select: none;
        cursor: pointer;
        padding: var(--paddingSmall);
        max-width: 25ch;
        word-wrap: anywhere;
        outline:none; /* Achtung, ego2024-Style schmeißt sonst auf tertiary-Buttons eine outline */
        /*box-shadow:1px 2px 3px 0px var(--mediumTransparent);*/
    }

    .selectEntityDialog #tabContainer button > .label {
        /* container, der text und icon enthält */
        display: flex;
        align-items: center;
        gap: 0.4em;
        flex-wrap: nowrap;
    }

        .selectEntityDialog #tabContainer button > .label > #text {
            /* Hauptbeschriftung */
            flex: 1;
        }

        .selectEntityDialog #tabContainer button > .label > #iconContainer {
        }

    .selectEntityDialog #tabContainer #warningIcon {
        display: none;
    }

    .selectEntityDialog #tabContainer button.invalidRule {
        color: var(--warning);
    }

        .selectEntityDialog #tabContainer button.invalidRule #warningIcon {
            display: block;
        }

    .selectEntityDialog #tabContainer button > .rulesLabel {
        /* Beschriftung von Regeln (min/max) */
        line-height: 1.05;
        font-size: 0.8em;
        text-align: left;
    }

    .selectEntityDialog #rulesLabelContainer {
        padding: var(--padding);
        border: 1px solid var(--medium);
        background-color: var(--mediumTransparent);
        border-radius: var(--round);
        /*margin-bottom: var(--paddingY);*/
        gap: 0.4em;
    }

        .selectEntityDialog #rulesLabelContainer.invalidRule {
            color: var(--warning);
            background-color: var(--warningBG);
        }

        .selectEntityDialog #rulesLabelContainer #rulesWarningIconContainer {
            display: none;
        }

        .selectEntityDialog #rulesLabelContainer.invalidRule #rulesWarningIconContainer {
            display: block;
        }

    .selectEntityDialog #tabContainer button.treebutton.selected > .label, .selectEntityDialog #tabContainer #btnShowSelection.selected {
        /*font-weight: bold;*/
    }

    .selectEntityDialog #tabContainer button.treebutton.selected {
        background-color: var(--selectedColor);
        color: var(--selectedColorTxt);
    }

    .selectEntityDialog #tabContainer #leftContainer button.treebutton.selected {
        cursor: default;
        pointer-events: none;
        outline: 4px solid var(--selectedColor);
    }

    .selectEntityDialog button.treebutton {
        border-top-left-radius: var(--round);
        border-top-right-radius: var(--round);
    }

    .selectEntityDialog .spacer {
        color: var(--medium);
    }
    /*addressWizard*/
    .addressWizard {
    }

        .addressWizard .plz {
            /*margin-left: 29px;*/
        }

        .addressWizard .checkboxSpacing {
            /*margin-top: 21px;*/
        }

        .addressWizard .collapsed .body {
            /*display: none;*/
        }

    @media screen and (max-width: 600px) {

        .addressWizard .plz {
            margin-left: 0;
        }

        .addressWizard .checkboxSpacing {
            /*margin-top: 0;*/
        }
    }

    .addressWizard .deleteBtn {
        /*background-color: #ffffff;*/
    }
    /* MainCatalogs */
    .mainCatalogsRoot {
    }

        .mainCatalogsRoot .editorContainer {
            display: none;
            overflow: visible;
        }

        .mainCatalogsRoot .mainCatalogSection {
        }

            .mainCatalogsRoot .mainCatalogSection #catalogEditContainer {
                min-height: 20px;
            }
    /* ================================ */
    /* TABCONTAINER / TABBING */
    .tabContainer {
        margin-bottom: 4em;
    }



        .tabContainer > #verticalContainer > #tabRowContainer {
            padding-left: var(--paddingX);
            padding-right: var(--paddingX);
            & > #contextTabRow

        {
            column-gap: 0.5em;
            row-gap: 2px;
            min-width: 4em;
            flex-wrap: nowrap;
            align-items: flex-end;
            justify-content: flex-end;
            align-content: flex-start;
            flex-flow: wrap-reverse;
            position: relative;
            overflow: hidden;
            padding-top: var(--paddingY);
        }
        }

            .tabContainer > #verticalContainer > #tabRowContainer > #tabRow {
                column-gap: 0.4em;
                row-gap: 1px;
                flex: 1;
                flex-wrap: nowrap;
                align-items: end;
                padding-top: 8px;
                padding-left: 2px; /* sonst schneidet overflow hidden die outline vom aktiven Tab weg...*/
                overflow: hidden;
                
            }

                .tabContainer > #verticalContainer > #tabRowContainer > #tabRow.tabOverflow {
                }

                .tabContainer > #verticalContainer > #tabRowContainer > #tabRow > .tab {
                    white-space: nowrap;
                    transition-property:transform;
                    transition-duration:calc(0.5 * var(--transitionDurationLong));
                    transition-timing-function:ease-out;
                }
                .tabContainer > #verticalContainer > #tabRowContainer > #tabRow > .tab._new {
                    transform:translateX(var(--paddingX));
                }

                .tabContainer > #verticalContainer > #tabRowContainer > #tabRow.tabOverflow > .tab {
                }

.tabContainer #tabSwitchContainer {
    white-space: nowrap;
    display: block !important;
}
        .tabContainer #tabSwitchContainer .contextButton{
            border-bottom-left-radius:0;
            border-bottom-right-radius:0;
        }

.tabContainer #tabRow.tabOverflow #tabSwitchContainer {
    display: block !important;
    margin-left: calc(1* var(--paddingX))
}


        .tabContainer > #verticalContainer > #tabRowContainer > #tabRow.tabOverflow > .tab.active + .tab:not(.detachable) {
            margin-left: var(--paddingX);
        }

        .tabContainer > #verticalContainer > #tabRowContainer > #tabRow.tabOverflow > .tab.detachable:not(.active):not(.previouslyActive) {
            display: none;
        }

        .tabContainer > #verticalContainer > #tabRowContainer > #tabRow.tabOverflow.minimal > .tab:not(.active) {
            display: none;
        }

        /* Contextabs sind eigentlich nur noch schwebende Ellipsen-Buttons */
        .tabContainer #tabRowContainer #bottomContainer,
        .tabContainer #fixedBottomContainer,
        .tabContainer #contextTabRow {
            --tabColor: var(--primary);
            color: var(--primaryText);
        }

            .tabContainer > #fixedBottomContainer.brightColor {
                color: var(--dark);
            }

.tabContainer > #verticalContainer > #tabRowContainer .tab {
    background-color: var(--primary); /*var(--tabColor);*/
    color: var(--primaryText);
}

.tabContainer > #verticalContainer #contextTabRow .contextButton {
    border-radius: var(--round);
    margin-bottom: 2px;
    /*background-color: var(--primary);*/
    background-color: var(--tabColor);
    /*color: var(--primaryText);*/
    color: inherit;
}

.tabContainer > #verticalContainer > #tabRowContainer > #tabRow > .tab { /* gilt nur für die RICHTIGEN Tabs */
    --tabColor: transparent;
    /* box-shadow: 0px -2px var(--tabColor);*/
    /*box-shadow: 0px -2px var(--tertiary);*/
    /*transition-property:transform;*/
    /*transition-duration: var(--w3AnimationDuration);*/
}

.tabContainer > #verticalContainer > #tabRowContainer > #tabRow > .tab .spinner {
    opacity: 0;
    pointer-events: none;
    transition-duration: var(--transitionDurationShort);
    transition-property: opacity;
    animation-play-state: paused;
    /*color: var(--secondary);*/
    vertical-align: sub;
    overflow: hidden;
    width: 0;
    /*margin-right: 0.2em;*/
}

.tabContainer > #verticalContainer > #tabRowContainer > #tabRow > .tab.busy .spinner {
    opacity: 0.8;
    width: unset;
    animation-play-state: running;
    transition-duration: var(--mds-hover-transition-out);
    /*margin-left:0.4em;*/
    margin-right: 0.4em;
}

    .tabContainer > #verticalContainer > #tabRowContainer > #tabRow > .tab.dirty .pageSelector:before {
        font-family: var(--fontawesome);
        font-weight: bold;
        content: '\f069'; /* asterisk */
        margin-right: 0.4em;
        /*margin-right:0.4em;*/
    }

    .tabContainer > #verticalContainer > #tabRowContainer > #tabRow > .tab.active.dirty .pageSelector:before {
        color: var(--complimentaryTheme);
        /*margin-right:0.4em;*/
    }

.tabContainer > #verticalContainer > #tabRowContainer > #tabRow > .tab {
    border-top-left-radius: var(--round);
    border-top-right-radius: var(--round);
    background-color: var(--tertiary);
    color: var(--tertiaryText);
    position: relative;
    display:flex;
    flex-direction:row;
    align-items:stretch;
}

    .tabContainer > #verticalContainer > #tabRowContainer > #tabRow > .tab:not(.active) {
        box-shadow: 0px -2px var(--tabColor);
    }

        .tabContainer > #verticalContainer > #tabRowContainer > #tabRow > .tab:not(.active)::after {
            position: absolute;
            content: '';
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            pointer-events: none;
            z-index: 1;
            box-shadow: inset 0px -4px 4px -4px var(--darkTransparent);
        }

    .tabContainer > #verticalContainer > #tabRowContainer > #tabRow > .tab.active {
        --tabColor: var(--primary);
        outline: 3px solid var(--tabColor);
        outline-offset:-1px;
        /*outline: 2px solid var(--primary);*/
        background-color: var(--tabColor);
        /*background-color: var(--primary);*/
        color: var(--primaryText);
        z-index: 2;
    }

        .tabContainer > #verticalContainer > #tabRowContainer > #tabRow > .tab.active.brightColor {
            color: var(--dark);
        }
.darkTheme .tabContainer > #verticalContainer > #tabRowContainer > #tabRow > .tab.active.brightColor {
    color: var(--darker);
}

        .tabContainer > #verticalContainer > #tabRowContainer > #tabRow > .tab > .pageSelector:only-child {
            border-top-right-radius: var(--round);
        }

.tabContainer > #verticalContainer > #tabRowContainer > #tabRow > .tab > .pageSelector {
    /*border-top-right-radius: var(--round);*/
    border: 0;
    border-style: none;
    border-top-left-radius: var(--round);
    background-color: transparent;
    /* Beschriftung des Tabs begrenzen */
    min-width:4ch;
    max-width: var(--maxTabWidth, 28ch);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding: var(--paddingSmall);
}
.tabContainer > #verticalContainer > #tabRowContainer > #tabRow.tabOverflow > .tab > .pageSelector {
    max-width: 28ch;
}

.tabContainer > #verticalContainer > #tabRowContainer > #tabRow > .tab.active > .pageSelector {
    pointer-events: none;
    cursor: default;
    /*font-weight: bold;*/
    background-color: var(--tabColor);
    /* background-color: var(--primary); */ /* essentials*/
    /*color: var(--primaryText);*/
    color: inherit;
}

        .tabContainer > #verticalContainer > #tabRowContainer > #tabRow > .tab.disabled > .pageSelector {
            pointer-events: none;
            opacity: 0.6;
        }

        .tabContainer > #verticalContainer > #tabRowContainer > #tabRow > .tab > .closeBtn {
            cursor: pointer;
            /*border-top-right-radius: var(--round);*/
            border-top-right-radius: var(--round);
            background-color: var(--brightTransparent);
            color: var(--tertiaryText);
        }

        .tabContainer > #verticalContainer > #tabRowContainer > #tabRow > .tab:last-child {
            margin-right: 0.8em;
        }

.tabContainer > #verticalContainer > #tabRowContainer > #tabRow > .tab:first-child {
    /*margin-left: 0.8em;*/
}


.tabContainer > #verticalContainer > #tabRowContainer > #contextTabRow > .contextEntry#topMenuBtn {
    position: relative;
}

.tabContainer > #verticalContainer > #tabRowContainer > #contextTabRow #topMenuContainer {
    position: absolute;
    display: flex;
    flex-direction: column;
    right: 0;
    background: var(--bright);
    z-index: 100;
}

        .tabContainer > #fixedBottomContainer {
            position: fixed;
            bottom: 0;
            left: var(--sidebarWidth);
            right: 0;
            z-index: 1;
            pointer-events: none;
        }

        .tabContainer > #fixedBottomContainer {
            gap: 0.4em;
        }

            .tabContainer > #fixedBottomContainer.hidden .contextEntry,
            .tabContainer > #fixedBottomContainer.hidden .contextEntry button {
                pointer-events: none;
            }
            /*        .tabContainer #fixedBottomContainer:not(.hidden) {
            opacity: 0.65;
            transition-duration: 0.5s;
            transition-delay: 1s;
            transition-property: opacity;
        }

    .tabContainer #fixedBottomContainer:not(.hidden):hover{
        opacity:1;
        transition-delay:0;
    }
*/
            .tabContainer > #fixedBottomContainer .contextEntry {
                border-radius: var(--rounder);
            }

                .tabContainer > #fixedBottomContainer .contextEntry:not(.disabled) {
                    box-shadow: var(--boxShadowSmallLight);
                }

                .tabContainer > #fixedBottomContainer .contextEntry button {
                    height: 3rem;
                    min-width: 3rem;
                    pointer-events: all;
                    align-items: center;
                    justify-content: center;
                    display: flex;
                    padding: var(--padding);
                    border-radius: inherit;
                    color: inherit;
                    background-color: var(--tabColor);
                }

                    .tabContainer > #fixedBottomContainer .contextEntry button > i {
                        font-size: 1.2em;
                    }

.tabContainer > #verticalContainer > #containerClasp {
    --containerColor: var(--primary);
    /*border-top: 1px solid var(--tertiary);*/
    border-left: 1px solid var(--tertiary);
    border-right: 1px solid var(--tertiary);
    box-shadow: inset 0px 2px var(--containerColor);
    /*box-shadow: inset 0px 2px var(--primary);*/
    min-height: var(--round);
    border-top-left-radius: var(--round);
    border-top-right-radius: var(--round);
    background-color: var(--mediumTransparent);
    padding-top: 2px;
    overflow: hidden;
    /*        position: sticky;
        top: calc(40px + var(--marginTopbar));
*/
}

    .tabContainer > #verticalContainer > #containerClasp button#btnPrimaryMenu:not(:has(.icongrid)) {
        padding: var(--padding);
    }
    .tabContainer > #verticalContainer > #containerClasp button#btnPrimaryMenu {
        display: flex;
        gap: var(--paddingXSmall);
        flex-wrap: nowrap;
        justify-content: center;
        color: inherit;
        --currentTextcolor: currentColor;
        align-items: center;
    }
        .tabContainer > #verticalContainer > #containerClasp button#btnPrimaryMenu > .icongrid {
            gap: 2px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            /* padding: var(--paddingSmall);*/
            justify-content: center;
            align-items: center;
            min-height: 1.3lh;
}


.tabContainer > #verticalContainer > #containerClasp button#btnPrimaryMenu > .icongrid > .iconContainer {
    display: flex;
    align-items:center;
}
    .tabContainer > #verticalContainer > #containerClasp button#btnPrimaryMenu > .icongrid > .iconContainer > i {
        font-size: 0.85em;
        border: 1px solid var(--currentTextcolor, initial);
        padding: 3px;
        border-radius: var(--roundest);
        line-height: 1.4;
        width: 1.4lh;
        /* width: calc(49% - var(--paddingYSmall));*/
        /*color:var(--dark);*/
    }

.tabContainer > #verticalContainer > #containerClasp > #actionBar {
    --actionBarColor: var(--primaryTransparent);
    background-color: var(--actionBarColor);
    margin-bottom: var(--paddingY);
    display: flex;
}

    .tabContainer > #verticalContainer > #containerClasp > #actionBar #actionBarButtonsContainer {
        display: flex;
        column-gap: 2px;
        row-gap: 8px;
        overflow-x: auto;
    }

    .tabContainer > #verticalContainer > #containerClasp > #actionBar .contextButton {
        background-color: var(--transparent);
        /*color:var(--accentThemeD5);*/
        padding: var(--padding);
        height: 100%;
    }

        .tabContainer > #verticalContainer > #containerClasp > #actionBar .contextButton.disabled {
            pointer-events: none;
            opacity: 0.3;
        }

    .tabContainer > #verticalContainer > #containerClasp > #actionBar .action.menuBtn {
        float: right;
        height: 100%;
        display: flex;
        align-items: stretch;
    }

    .tabContainer > #verticalContainer > #contentNode {
        padding: var(--padding);
        background-color: var(--mediumTransparent);
        border-left: 1px solid var(--tertiary);
        border-right: 1px solid var(--tertiary);
        border-bottom: 1px solid var(--tertiary);
        /*background-color: white;*/
        border-bottom-left-radius: var(--round);
        border-bottom-right-radius: var(--round);
    }

    .staticTable tr, .staticTable thead, .staticTable tbody {
        width: 100%
    }

.tabContainer *:is(#fixedBottomContainer, #tabRowContainer, #actionBar) i.labelIcon {
    margin-right: 0.4em;
}


.darkTheme .tabContainer > #verticalContainer > #contentNode,
.darkTheme .tabContainer > #verticalContainer > #containerClasp {
    background-color: var(--darkTransparent);
}

.darkTheme .tabContainer > #verticalContainer > #tabRowContainer > #tabRow .tab:not(.active) .pageSelector.mds-button-base {
    color: var(--dark); /* initial führt in FF und Chrome zu unterschiedlichen Ergebnissen! */
}
    /* PAGESTACK */
.pageStack {
    --bgColor: var(--tertiary);
    --txtColor: var(--tertiaryText);
    --tabColor: var(--primary);
    --tabColorTxt: var(--primaryText);
    max-width:100%;
}

    .pageStack > #verticalContainer > #tabRowContainer > #tabSwitchContainer {
        display: none!important;
    }

    .pageStack > #verticalContainer > #tabRowContainer.tabOverflow > #tabSwitchContainer {
        display: block!important;
        margin-left: var(--paddingX);
        align-self: end;
    }

    .pageStack > #verticalContainer > .containerClasp {
        min-height: max(var(--round), 2px);
        max-width:100%;
        box-shadow: inset 0px 2px var(--containerColor);
        --containerColor: var(--primary);
        background-color: transparent;
        border-top-right-radius: var(--round);
        border-top-left-radius: var(--round);
        border: 1px solid var(--medium);
        border-bottom-width: 0px;
        border-top-width:0px;
    }

    .pageStack > #verticalContainer > #tabRowContainer {
        display: flex;
        flex-wrap:nowrap;
        /* justify-content: space-between;*/
        gap: var(--paddingX);
        overflow: clip;
        max-width:100%;
        /*max-width: calc(100% - 2 * var(--paddingXSmall));*/
    }


        .pageStack > #verticalContainer > #tabRowContainer > #tabRow {
            display: flex;
            flex-direction: row;
            flex-flow: wrap-reverse;
            gap: var(--paddingXSmall);
            padding-top: 2px; /* zwecks Outline bei selektiertem Tab*/
            flex-grow: 1; /* Tab-Switchcontainer muss rechts schweben*/
            padding: 0 var(--paddingXSmall);
        }
        .pageStack > #verticalContainer > #tabRowContainer > #tabRow > .tab {
            flex-grow: 1;
            min-width: 10ch;
            max-width:51%;
            border-radius: 0;
            overflow: clip;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            border-top-right-radius: var(--round);
            border-top-left-radius: var(--round);
            position:relative;
        }
            .pageStack > #verticalContainer > #tabRowContainer > #tabRow > .tab:first-child {
            }
            .pageStack > #verticalContainer > #tabRowContainer > #tabRow > .tab:last-child {
               
            }

            .pageStack > #verticalContainer > #tabRowContainer > #tabRow > .tab:not(.selected)::after {
                position: absolute;
                content: '';
                inset: 0;
                pointer-events: none;
                z-index: 1;
                box-shadow: inset 0px -4px 4px -4px var(--darkTransparent);
            }
    .pageStack > #verticalContainer > #tabRowContainer > #tabRow > .tab > button.pageSelector {
                border-radius: inherit;
                background-color: var(--bgColor);
                color: var(--txtColor);
                display: block;
                width: 100%;
                height: 100%;
                padding: var(--paddingSmall);
            }
            .pageStack > #verticalContainer > #tabRowContainer > #tabRow > .tab.selected > button.pageSelector {
                box-shadow: none;
            }

        .pageStack > #verticalContainer > #tabRowContainer.tabOverflow > #tabRow > .tab {
            display: none;
        }

            .pageStack > #verticalContainer > #tabRowContainer.tabOverflow > #tabRow > .tab:after {
                content: '';
                width: calc(2* var(--round));
                height: calc(100% + 1* var(--round));
                border-radius: var(--round);
                box-shadow: 3px 0px var(--secondaryThemeL4);
                position: absolute;
                right: -10px;
                z-index: -1;
            }

            .pageStack > #verticalContainer > #tabRowContainer.tabOverflow > #tabRow > .tab:before {
                content: '';
                width: calc(2* var(--round));
                height: calc(100% + 1* var(--round));
                border-radius: var(--round);
                box-shadow: 4px 0px var(--secondaryThemeL3);
                position: absolute;
                right: -4px;
                z-index: -1;
            }

            .pageStack > #verticalContainer > #tabRowContainer > #tabRow > .tab.selected {
                pointer-events: none;
                display:block;
                --bgColor: var(--tabColor);
                --txtColor: var(--tabColorTxt);
                outline: 3px solid var(--tabColor);
                outline-offset:-1px;
                z-index:2;
            }

        .pageStack > #verticalContainer > #tabRowContainer > #tabRow > .tab .spinner {
            display: none;
            margin-right: 0.4em;
        }



        .pageStack > #verticalContainer > #tabRowContainer > #tabRow > .tab.busy .spinner {
            display: inline-block;
        }

@media screen and (max-width: 799px) {
    .pageStack > #verticalContainer > #tabRowContainer {
        display: flex;
        flex-direction: column;
        flex-flow:column;
        align-items:stretch;
        padding: 0 0;
    }

        .pageStack > #verticalContainer > #tabRowContainer > #tabSwitchContainer {
            display: none!important;
        } 

        .pageStack > #verticalContainer > #tabRowContainer > #tabRow {
            flex-direction: column;
            max-width: 100%;
            gap: 0px;
            outline: 2px solid var(--containerColor);
            /*padding-right:0px;*/
        }
            .pageStack > #verticalContainer > #tabRowContainer > #tabRow > .tab {
                display: block;
                margin:0px!important;
                box-shadow:none;
                max-width:100%;
                /*outline: 2px solid var(--tabColor);*/
            }
        .pageStack > #verticalContainer > #tabRowContainer > #tabRow > .tab:not(:first-child) {
            border-radius: 0;
        }
                .pageStack > #verticalContainer > #tabRowContainer > #tabRow > .tab.selected {
                    margin:2px !important;
                    padding:0;
                }.pageStack > #verticalContainer > #tabRowContainer > #tabRow > .tab.selected:last-child {
                    
                }
            .pageStack > #verticalContainer > #tabRowContainer > #tabRow > .tab > button.pageSelector {
                
                
            }
             .pageStack > #verticalContainer > #tabRowContainer > #tabRow > .tab:not(.selected) > button.pageSelector {
                box-shadow: inset 0px -0.4em 0.5em -0.2em var(--darkTransparent);
                
            }

    .pageStack > #verticalContainer > .containerClasp {
        min-height: var(--round);
        box-shadow: none;
        border-top:2px solid var(--containerColor);
        border-top-right-radius:0;
        border-top-left-radius: 0;
    }
}


.pageStack > #verticalContainer > #contentNode.noPadding {
    padding: 0;
    min-height: 2em;
}
    .pageStack > #verticalContainer > #contentNode {
        border-radius: var(--round);
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border: 1px solid var(--medium);
        border-top-width:0px;
        padding: var(--padding);
        max-width:100%;
        overflow:visible; /* weil auto sonst ggf. absolut positionierte dropdowns abschneidet */
        min-height:2em;
    }

            .pageStack > #verticalContainer > #contentNode > * {
                border-radius: 0;
                border-width:0px;
            }


        /* FLOATING CONTAINER*/
.floatingContainer {
    --minMargin: 20px;
    --mouse-x: 0;
    --mouse-y: 0;
    --offsetX: 0px;
    --offsetY: 0px;
    display: none;
    position: fixed;
    margin: 0;
    color: var(--dark);
    cursor: default;
    /*margin-left:-20px;
    margin-right:-20px;*/
    left: 0;
    top: 0;
    /* The following line is responsible for all the magic */
    transform: translateX(calc(min(var(--mouse-x), calc(100vw - 100% - var(--minMargin))) + var(--offsetX))) translateY(calc(min(calc(var(--mouse-y) + (-1 * var(--scrollY))), calc(100vh)) + var(--offsetY)));
    /* weiteres von mds ... */
    --scrollY: 0px;
    z-index: 2;
    font-size: 1rem;
    font-family: var(--font);
    color: initial;
    font-weight: initial;
    line-height: initial;
    min-width: 10ch;
    max-width: calc(100vw - calc(5* var(--paddingX)));
}

    .floatingContainer.fixedOnElement{
        /*position:absolute;*/
    }

        .floatingContainer.verticalUp {
            transform: translateX(calc(min(var(--mouse-x), calc(100vw - 100% - var(--minMargin))) + var(--offsetX))) translateY(calc( -1 * var(--scrollY)));
            top: unset;
            bottom: 0;
            margin-top:unset;
            margin-bottom: var(--paddingX);
        }

        .floatingContainer > .mainContainer {
        }

        .floatingContainer .floatingTooltip {
            text-align: initial;
            --offsetX: 0;
            --offsetY: 0;
            color: initial;
            font-size: initial;
            max-width: 40ch;
            margin-top: var(--paddingXSmall);
            overflow: hidden;
            border: 1px solid var(--medium);
            background-color: var(--brighter);
            border-radius: var(--round);
            box-shadow: var(--boxShadowSmallMedium);
        }


    .floatingTooltip {
        font-size: 1rem;
    }

        .floatingTooltip #iconContainer {
            padding-right: 0;
        }

        .floatingTooltip > .mainContainer {
            line-height: 1.2;
            white-space: normal;
        }

        .floatingTooltip > .subtitleContainer {
            line-height: 1.2;
            white-space: normal;
        }
    /* MENU */
    .moreCoreMenuRoot {
        cursor: default;
        min-width: 27ch;
        max-width: 40ch;
        margin-top: var(--paddingXSmall);
        overflow: hidden;
        border: 1px solid var(--medium);
        background-color: var(--brighter);
        border-radius: var(--round);
        box-shadow: var(--boxShadowSmallMedium);
    }

.darkTheme .moreCoreMenuRoot {
    background-color: var(--dark);
    color: var(--brightText);
}


        .moreCoreMenuRoot > div {
            overflow: hidden;
        }

            .moreCoreMenuRoot > div:not(.w3-hide):first-child {
                border-radius: inherit;
            }

        .moreCoreMenuRoot #entryContainer {
            display: flex;
            flex-flow: column;
            --iconWidth: 0em;
        }

            .moreCoreMenuRoot #entryContainer.hasIcons {
                --iconWidth: 1.2em;
            }

        .moreCoreMenuRoot #topBar {
            /*font-size:0.9rem;*/
            border-bottom: 1px solid var(--secondaryThemeL2);
            padding: var(--paddingSmall);
            font-weight: bold;
            background-color: var(--accentTheme);
            color: var(--accentThemeTxt);
            border-bottom-left-radius: 0px;
            border-bottom-right-radius: 0px;
        }

            .moreCoreMenuRoot #topBar button {
                background-color: var(--mediumBrightTransparent);
                /*outline: 1px solid var(--accentThemeL3);*/
            }

        .moreCoreMenuRoot div.heading {
            padding: var(--paddingSmall);
            color: var(--secondaryTheme);
            text-align: left;
            cursor: default;
            font-size: 0.85em;
            font-weight: bold;
            /*margin-bottom: 0.5em;*/
            margin-top: 0.5em;
            position: relative;
        }



.darkTheme .moreCoreMenuRoot div.heading {
    color: var(--medium);
}

            .moreCoreMenuRoot div.heading:after {
                /*content: '';
            position:absolute;
            inset: 100% 0;
            border-bottom:1px solid currentColor;*/
            }

.moreCoreMenuRoot div.path {
    text-align: left;
    color: var(--secondaryTheme);
    font-size: 0.7em;
    margin-left: 1em;
    font-style: italic;
}

.darkTheme .moreCoreMenuRoot div.path{
    color: var(--medium);
}

.moreCoreMenuRoot .groupContainer:first-child {
    /*padding-top: var(--paddingYSmall);*/
    margin-top: 0;
    border-top: 0px;
}

        .moreCoreMenuRoot .groupContainer:not(:first-child):not(:has(.heading)) {
            margin-top: 0.5em;
        }

        .moreCoreMenuRoot .groupContainer:not(:last-child) {
            padding-bottom: 0.5em;
            /*margin-bottom:0.5em;*/
            border-bottom: 1px solid var(--secondaryThemeL2);
        }

        .moreCoreMenuRoot .groupContainer .moreCoreMenuRoot .groupContainer:not(:first-child) {
            border-top: 1px solid var(--secondaryThemeL3);
            /*margin-top: var(--paddingY);*/
        }

        .moreCoreMenuRoot button.menuEntry {
            border: none;
            padding: var(--paddingXSmall) var(--paddingY);
            text-align: left;
            display: flex;
            flex-flow: row;
            align-items: center;
            flex-wrap: nowrap;
            background-color: transparent;
            position: relative;
            width: 100%;
            color:var(--dark);
        }
         .moreCoreMenuRoot button.menuEntry.colored:has(.icon) > .icon {
           
        }
            .moreCoreMenuRoot button.menuEntry.colored:not(:has(.icon)) > span {
                color: var(--coloration, var(--dark));
            }

.darkTheme .moreCoreMenuRoot button.menuEntry {
    color: var(--brightText);
}

            .moreCoreMenuRoot button.menuEntry:not(.disabled) {
                cursor: pointer;
            }

            .moreCoreMenuRoot button.menuEntry > span {
                max-width: 25ch;
            }
        /* .moreCoreMenuRoot button.menuEntry:not(.headingChanged):not(:first-child):after {
            content: '';
            position: absolute;
            border-bottom: 1px solid var(--secondaryThemeL3);
            left: calc(2* var(--paddingX));
            right: calc(2* var(--paddingX));
            top: -1px;
            height: 1px;
        }*/
        .moreCoreMenuRoot .groupIcon {
            margin-right: 0.5em;
            opacity:0.7;
        }
        .moreCoreMenuRoot button .icon {
            min-width: var(--iconWidth);
            margin-right: 0.4em;
            color:var(--coloration, var(--mediumDark));
            /*max-width:var(--iconWidth);*/
            /*overflow:hidden;*/
        }  .darkTheme .moreCoreMenuRoot button .icon {
            color:var(--medium);
            /*max-width:var(--iconWidth);*/
            /*overflow:hidden;*/
        }

        .moreCoreMenuRoot button .icon-right {
            margin-left: auto;
            /*max-width:var(--iconWidth);*/
            /*overflow:hidden;*/
} 
        /* ACHTUNG: :has muss in manchen Browsern aktiviert werden und ist noch recht neu (Stand 2022)*/
        /* Layout prüfen, falls das verwendet werden soll */
        /*
    .moreCoreMenuRoot #entryContainer:has(button) span:only-child {
        margin-left:var(--iconWidth);
    }
    */
        .moreCoreMenuRoot button.menuEntry.disabled {
            cursor: default;
        }

        .moreCoreMenuRoot button.menuEntry.selected {
            cursor: default;
            color: var(--accentThemeD4);
            background-color: var(--accentThemeTransparent);
            font-weight: bold;
        }
    /* EXPANDER SECTIONS */
    .moreCoreExpandableSection {
        --animationDuration: var(--transitionDurationLong);
    }

        .moreCoreExpandableSection.sectionBG {
            border: none;
            padding: 0;
        }

        .moreCoreExpandableSection #headerContainer {
            position: relative;
            isolation: isolate;
        }

            .moreCoreExpandableSection #headerContainer #progressContainer {
                position: absolute;
                inset: 0;
                margin: var(--paddingY);
                opacity: 0.6;
                /*background-color: lime;*/
                border-radius: var(--round);
                z-index: -1;
            }
        .moreCoreExpandableSection > #headerContainer > div > *:is(h1, h2, h3, h4, h5){
            text-align:left;
        }
        .moreCoreExpandableSection.small > #headerContainer > div > *:is(h1, h2, h3, h4) {
            display: none;
        }

        .moreCoreExpandableSection.medium > #headerContainer > div > *:is(h1, h2, h3, h5, h6 ) {
            display: none;
        }

        .moreCoreExpandableSection.large > #headerContainer > div > *:is(h3, h4, h5, h6 ) {
            display: none;
        }

        .moreCoreExpandableSection > #headerContainer > #counter {
            background-color: var(--mediumDarkTransparent);
            border-radius: var(--round);
            padding: var(--paddingSmall);
            font-size: 0.8em;
            font-weight:700;
        }
           

        .moreCoreExpandableSection > #headerContainer {
            border-top-left-radius: inherit;
            border-top-right-radius: inherit;
        }

        .moreCoreExpandableSection:not(.expanded) > #headerContainer {
            border-radius: inherit;
        }      

        .moreCoreExpandableSection > #headerContainer > div > * > #expanderIcon {
            transition: transform var(--animationDuration) ease;
        }

        .moreCoreExpandableSection:not(:default) /*, .moreCoreExpandableSection:not(:default) #headerContainer*/ {
            transition-property: opacity, color, border-color;
            transition-duration: var(--animationDuration);
        }

        .moreCoreExpandableSection > #headerContainer {
            transition-property: background-color, box-shadow;
            user-select: none;
            /*transition-duration: var(--transitionDurationLong);*/
        }
        /* wenn Inhalt leer (Expander hat nix erhalten)*/
        .moreCoreExpandableSection._emptyChild {
            color: var(--warning);
            background-color: var(--warningBG);
            outline: 2px solid var(--warning);
            outline-offset: 2px;
        }

        .moreCoreExpandableSection #wrapper {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows var(--animationDuration);
        }
        .moreCoreExpandableSection.expanded > #wrapper {
            grid-template-rows: 1fr;
        }
        .moreCoreExpandableSection > #wrapper #innerContent {
            padding:var(--padding);
        }
            .moreCoreExpandableSection > #wrapper #innerContent.flush {
                padding: 0;
            }

        .moreCoreExpandableSection > #wrapper > .expandingContent {
            opacity: 0;
            padding: 0;
        }

        .moreCoreExpandableSection:not(.expanded) > #wrapper > .expandingContent {
            overflow: hidden;
        }

        .moreCoreExpandableSection > #wrapper > .expandingContent.animate {
            transition-property: opacity;
            transition-duration: var(--animationDuration);
            pointer-events: none;
            opacity: 0;
            overflow: hidden;
        }

        .moreCoreExpandableSection.expanded > #wrapper > .expandingContent.animate {
            transition-duration: var(--animationDuration);
        }

        .moreCoreExpandableSection.expanded > #wrapper > .expandingContent {
            opacity: 1;
            box-shadow: inset 0px 3px 3px -3px var(--darkTransparent);
        }
        /* EMPTY: es ist wirklich nix von Interesse im Expander */
        .moreCoreExpandableSection.empty:not(.expanded) > #headerContainer {
            /*opacity:0.6;*/
            /*color:var(--medium);*/
        }

            .moreCoreExpandableSection.empty:not(.expanded) > #headerContainer > div > * > #expanderIcon {
                /*opacity:0;*/
            }

        .moreCoreExpandableSection.empty:not(.expanded) {
            border-color: var(--mediumBright);
        }
        /* WARNING: es fehlen Angaben (quasi mandatory) oder sonst irgend ein Problem */
        .moreCoreExpandableSection.warning > #headerContainer {
            background-color: var(--warningBG);
            color: var(--warning);
        }

        .moreCoreExpandableSection.warning {
            border-color: var(--warning);
            .darkTheme & {
                             border-color: var(--warning);
                         }
        }

            .moreCoreExpandableSection.warning > #headerContainer > #headerTxt > *:is(h2, h3, h4, h5, h6)::after {
                content: '\f071';
                color: var(--warning);
                font-family: var(--fontawesome);
                font-weight: bold;
                float: right;
            }

        .moreCoreExpandableSection.hidden {
            display: none;
        }

        .moreCoreExpandableSection.default.expanded > #headerContainer {
            background-color: var(--brightTransparent);
            /*color:var(--accentThemeL4txt);*/
        }
        /* HAS CONTENT: es ist Inhalt im Expander. der Bereich ist ausgefüllt, es ist etwas von Interesse drin. */
        .moreCoreExpandableSection:is(.hasContent, .highlight):not(.expanded) {
            border-color: var(--accentTheme);
        }

        .moreCoreExpandableSection:is(.hasContent, .highlight) > #headerContainer {
            background-color: var(--accentThemeTransparent);
            /*color:var(--accentThemeL4txt);*/
        }
        /* CHECKED: der Bereich ist "erfolgreich ausgefüllt" (zB. für Abschnitte in Formularen) */
        .moreCoreExpandableSection.checked {
            outline: 1px solid var(--accentThemeD1);
            outline-offset: -1px;
        }

            .moreCoreExpandableSection.checked > #headerContainer {
                background-color: var(--accentThemeTransparent);
                /*color: var(--accentThemeL5txt);*/
            }

                .moreCoreExpandableSection.checked > #headerContainer > #headerTxt > *:is(h2, h3, h4, h5, h6)::after {
                    content: '\f00c';
                    margin-left: 0.5em;
                    color: var(--accentThemeD1);
                    font-family: var(--fontawesome);
                    font-weight: bold;
                    float: right;
                }

    .agendaView .show {
        z-index: 10;
    }

    .agendaView #topContainer {
        display: flex;
        flex-flow: column;
        align-items: center;
    }

    .agendaViewCard {
        background-color: var(--mds-blue);
    }

        .agendaViewCard header {
            background-color: var(--mds-gray);
        }

        .agendaViewCard div {
            background-color: var(--mds-light-gray-transparent);
        }

    .agendaView .animateTr {
        animation-name: groupHeaderAnimation;
        animation-duration: 1s;
        animation-iteration-count: 3;
        animation-timing-function: ease-in-out;
    }

    @keyframes groupHeaderAnimation {

        to {
            background-color: var(--mds-dark-transparent);
        }
    }

    .agendaView .datePicker {
    }

    .datePicker {
        --inactive: var(--secondary);
        --weekendTxt: var(--w3Red);
        --baseFontSize: 1rem;
        --popupFontSize: 0.9em;
        --calendarFontSize: 0.9em;
        --baseSizeUnit: 32px; /* Basiseinheit für Tage und Menüs, multipliziert mit Höhen und Breiten */
        --heightFactor: 1; /* Seitenverhältnis Breite */
        --widthFactor: 1.1; /* Seitenverhältnis Höhe */
        --menuHeightFactor: 0.9; /* Höhenmultiplikator für Menüleiste oben */
        --todayColor: var(--complimentaryTheme); /* Farbe die 'heute' markiert */
        --todayColorTxt: var(--complimentaryThemeTxt); /* Farbe die 'heute' markiert */
        --selectedColor: var(--primary); /* vom Benutzer gewählt (oder vorausgewählt)*/
        --selectedColorTxt: var(--primaryText); /* vom Benutzer gewählt (oder vorausgewählt)*/
        --weekendColor: var(--warning); /* Wochenend-Markierungen */
        --borderWidth: 2px;
        --currentBackgroundColor:var(--medium);
    }

    .datePicker {
        font-size: var(--baseFontSize);
        width:fit-content;
    }

/*        .datePicker > div {
            display: grid;
            grid-template-columns: repeat(7, 20px [col-start]);
        }
*/
        .datePicker *:has(table) {
            /*border-collapse: collapse;*/
            width:100%;
            min-width:15rem;
            overflow-x:auto;
        }.datePicker table {
            /*border-collapse: collapse;*/
            table-layout: fixed;
            width:100%;
        }

        .datePicker tr {
            height: 5px; /* die Höhe von tr wächst sowieso mit dem Inhalt. Ohne height können die tds aber nicht auf 100% wachsen!*/
            min-height: 5px;
        }

        .datePicker td {
            height: 100%;
        }

        .datePicker.popupActive .daySelectorCell {
            opacity: 0.6;
            pointer-events: none;
            width: 14%;
            min-width: calc( 12px * var(--widthFactor));
        }

        .datePicker .daySelector {
            min-height: calc(var(--baseSizeUnit) * var(--heightFactor));
            /*min-width: calc( 12px * var(--widthFactor));*/
            width:100%;
            font-size: var(--calendarFontSize);
        }

            .datePicker .daySelector.inactive, .datePicker .daySelector.othermonth {
                pointer-events: none;
                opacity: 0.5;
            }

            .datePicker .daySelector.today {
                /*font-weight: bold;*/
                /*outline: var(--borderWidth) solid var(--todayColor);*/
                /*background-color: var(--todayColor);*/
                /*outline-offset: calc(-1 * var(--borderWidth));*/
                /*box-shadow: inset 0px calc(1 * var(--borderWidth)) var(--todayColor);*/
                border-radius: calc(1 * var(--round));
                --currentBackgroundColor: var(--todayColor);
            }

                .datePicker .daySelector.today .daySelectorLabel {
                }

                    .datePicker .daySelector.today .daySelectorLabel > #dayNo {
                        border-radius: var(--roundest);
                        outline: 1px solid var(--todayColor);
                        padding:1px;
                        background-color: var(--todayColor);
                        color: var(--todayColorTxt);
                        font-weight: bold;
                    }
            /* Tage im Kalender, die nicht mehr zum gewählten Monat gehören: */
            .datePicker .daySelector.othermonth {
                visibility: hidden;
            }

            .datePicker .daySelector.selected {
                font-weight: bold;
                /*outline: var(--borderWidth) solid var(--selectedColor);*/
                background-color: var(--selectedColor);
                --currentBackgroundColor: var(--selectedColor);
                color: var(--selectedColorTxt);
            }
        /* im Agendaview-Mode: Tageslabel immer nach oben links rücken. Die Icons darunter stehen im Mittelpunkt*/
        .datePicker .daySelectorIconContainer {
            display: none;
        }

        .datePicker.agendamode .daySelectorIconContainer {
            display: flex;
            gap: 0.3em;
            flex-wrap: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            font-size: 0.9em;
            /*color: var(--dark);*/
        }
            .datePicker.agendamode .daySelectorIconContainer .appointmentIconContainer{
                position:relative;
            }

                .datePicker.agendamode .daySelectorIconContainer .appointmentIconContainer.multiple::after {
                    display:block;
                }
                .datePicker.agendamode .daySelectorIconContainer .appointmentIconContainer::after {
                    display: none;
                    content: attr(entryCount);
                    position: absolute;
                    color: var(--dark);
                    left: 50%;
                    bottom: 0em;
                    border-radius: var(--roundest);
                    padding: 0.05em 0.2em;
                    line-height: 1.1;
                    font-size: 0.7em;
                    background: rgba(255,255,255,0.8);
                }

.darkTheme .datePicker.agendamode .daySelectorIconContainer .appointmentIconContainer::after {
    background: rgba(0,0,0,0.6);
    color:var(--brightText);
}

                
                
                .datePicker .daySelectorCell .daySelectorIconContainer i {
            text-shadow: 1px 1px 0px var(--dark);
        }


        .datePicker .daySelectorCell .daySelector.selected .daySelectorIconContainer i {
            color: var(--selectedColorTxt);
        }

        .datePicker.agendamode .daySelectorCell {
            vertical-align: top;
        }

            .datePicker.agendamode .daySelectorCell .daySelector, .datePicker.agendamode .daySelectorCell.selected .daySelector, .datePicker.agendamode .daySelectorCell.today .daySelector {
                border-right: 1px solid var(--currentBackgroundColor);
                border-top: 1px solid var(--currentBackgroundColor);
                justify-content: start;
            }

        .datePicker.agendamode .daySelectorLabel {
            text-align: left;
            font-size: 0.7em;
            margin-left: 2px;
        }

        .datePicker button {
            /*border: 0px;*/
        }

            .datePicker button:hover {
                /*border: 0px;*/
                /*box-shadow: rgba(136,136,136, 0.2) 0px 0px 0px 100px inset;*/
            }

        .datePicker table input[type=button] {
            /*background-color: initial;
        width: 100%;*/
        }

        .datePicker #menuContainer {
            gap: 0.2em;
            position: relative;
            /*z-index:1;*/
        }

            .datePicker #menuContainer button {
                background-color: var(--tertiary);
                height: calc(var(--menuHeightFactor) * var(--baseSizeUnit));

                .darkTheme &{
                                background-color:var(--mediumDark);
                            }
            }

        .datePicker .daySelectorCell {
        }

        .datePicker.showEntries .daySelectorCell .daySelector {
            justify-content: start;
        }

        .datePicker.showEntries .daySelectorCell {
            border-bottom: 1px solid var(--tertiary);
        }

            .datePicker.showEntries .daySelectorCell:not(:first-child) {
                border-left: 1px solid var(--tertiary);
            }

        .datePicker.popupActive .daySelectorCell {
            opacity: 0.6;
            pointer-events: none;
        }

        .datePicker .daySelectorCell .daySelector {
            display: flex;
            flex-direction: column;
            justify-content: center;
            border-radius: calc(1 * var(--round));
        }

        .datePicker #monthMenuButton {
            flex-grow: 1;
        }

        .datePicker #yearMenuButton {
            flex-grow: 0.5;
        }

        .datePicker #monthMenuButton, .datePicker #yearMenuButton {
            position: relative;
            border-radius: 0;
        }

        .datePicker #previousMonthButton {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        .datePicker #nextMonthButton {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        .datePicker #monthMenuButton.show, .datePicker #yearMenuButton.show {
            background-color: var(--selectedColor);
            color: var(--selectedColorTxt);
            z-index:1;
        }

            .datePicker #monthMenuButton.show:hover, .datePicker #yearMenuButton.show:hover {
                /*box-shadow:none;*/
            }

        .datePicker #monthMenuButton:before, .datePicker #yearMenuButton:before {
            margin-right: 0.4em;
            font-family: var(--fontawesome); /*"Font Awesome 5 Free";*/
            font-weight: bold;
            content: '\f0d7'; /* caret down */
        }

        .datePicker #monthMenuButton.show:before, .datePicker #yearMenuButton.show:before {
            content: '\f0d8'; /* caret up */
        }

        .datePicker #yearselectorPopup.show, .datePicker #monthselectorPopup.show {
            display: flex;
            z-index:1;
        }

        .datePicker #monthselectorPopup, .datePicker #yearselectorPopup {
            position: absolute;
            background-color: var(--bright);
            display: none;
            /*width: 200px;*/
            flex-direction: column;
            font-size: var(--popupFontSize);
            /*top:0;*/
            left: 0;
            width: 100%;
            max-height: calc(18 * var(--baseFontSize));
            overflow-y: auto;
            font-weight: normal;
            cursor: default;
            .darkTheme &
{
    background-color: var(--mediumDark);
}
        }

            .datePicker #monthselectorPopup .monthSelect,
            .datePicker #yearselectorPopup .yearSelect {
                text-align: center;
                background-color: var(--bright);
                border: 0px;
                padding: var(--paddingSmall);
                border-radius: var(--round);
            }

                .datePicker #yearselectorPopup .yearSelect.currentvalue::before,
                .datePicker #monthselectorPopup .monthSelect.currentvalue::before {
                    content: '\f274'; /* calendar-check */ /* '\f00c'; /* check */
                    font-family: var(--fontawesome);
                    font-weight: bold;
                    margin-right: 0.4em;
                }

                .datePicker #yearselectorPopup .yearSelect.current,
                .datePicker #monthselectorPopup .monthSelect.current {
                    outline: var(--borderWidth) solid var(--todayColor);
                    /*background-color: var(--todayColor);*/
                    outline-offset: calc(-2 * var(--borderWidth));
                }

                .datePicker #yearselectorPopup .yearSelect.selected,
                .datePicker #monthselectorPopup .monthSelect.selected {
                    background-color: var(--selectedColor);
                    color: var(--selectedColorTxt);
                    pointer-events: none;
                    font-weight: bold;
                }

        .datePicker .weekend {
            /*font-weight: bold;*/
            color: var(--weekendTxt);
            --currentBackgroundColor: var(--weekendTxt);
            /*width: 30px!important; LH*/
        }

        .datePicker .default:hover {
        }

        .datePicker .weekdaysRow .header {
            color: var(--secondary);
            /*font-weight: bold;*/
            /*width: 30px!important; LH*/
            text-align: center;
            padding: var(--paddingSmall);
        }

        .datePicker table tr td {
            text-align: center;
        }

        .datePicker table td:first-child {
            /*padding-left: 0;*/
        }
        /*
        .datePicker table td div:hover {
            box-shadow: rgba(136,136,136, 0.2) 0px 0px 0px 100px inset;
        }
        */
        .datePicker td {
            border: 0px;
        }

    /* PROGRESSBAR */

    .moreCoreProgressbarRoot {
        --animationDuration: 100ms;
        --progress: 0%;
        --progressLabel: 0%;
        /* isolation:isolate;*/
        border-radius: var(--round);
        height: 100%;
        position: relative;
    }

        .moreCoreProgressbarRoot dialog#modalContainer {
            min-width: min(55rem, 95vw);
            width: min(55rem, 100vw);
            max-height: 30rem;
            min-height: 2rem;
            overflow: hidden;
            position: relative;
        }

        .moreCoreProgressbarRoot #modalContainer #dialogContent {
            border-radius: inherit;
        }

        .moreCoreProgressbarRoot #modalButtonsContainer {
            /* der untere Container mit dem Schließenbutton darin */
            background-color: var(--secondaryThemeL4);
            .darkTheme & {
                             background-color: var(--secondaryThemeD4);
                         }
        } 
        
        .moreCoreProgressbarRoot #barContainer {
            border-radius: inherit;
            min-height: 12px;
            max-width: 100%;
            /*overflow:hidden;*/
            overflow-x: clip;
            overflow-y: visible;
            margin-bottom: var(--paddingY);
        }
        /* Messagecontainer unterhalb platzieren, wenn nicht modal: */
        .moreCoreProgressbarRoot > #messageContainer {
            border: 1px solid var(--accentThemeL1);
            border-top: 0;
            border-radius: inherit;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            margin-top: 0 !important;
            padding: var(--paddingSmall);
            min-width: min-content;
            max-width: var(--progress) !important;
            overflow: hidden;
            transition: var(--animationDuration) max-width ease-out;
        }

            .moreCoreProgressbarRoot > #messageContainer > * {
                margin: 0 !important;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }

        .moreCoreProgressbarRoot #dialogContent > #barContainer {
            min-height: 18px;
        }

        .moreCoreProgressbarRoot #noResponseOverlay {
            opacity: 0;
            background-color: var(--mediumTransparent);
            font-size: 1.1em;
            color: var(--secondary);
            position: absolute;
            inset: 0;
            z-index: 5;
            border-radius: inherit;
            pointer-events: none;
            /*backdrop-filter:blur(2px);*/
            transition: 0s opacity;
            overflow: hidden;
        }

        .moreCoreProgressbarRoot.noResponse #noResponseOverlay {
            opacity: 1;
            transition-duration: 1s;
        }

        .moreCoreProgressbarRoot #barContainer > #bar {
            height: 100%;
            min-height: inherit;
            transition-property: width;
            width: var(--progress);
            transition-duration: var(--animationDuration);
            transition-timing-function: ease-out;
            border-radius: inherit;
            position: relative;
        }

            .moreCoreProgressbarRoot #barContainer > #bar > #progressLabel {
                position: absolute;
                z-index: 1;
                display: block;
                color: inherit;
                background-color: inherit;
                border-radius: var(--rounder);
                border-top-left-radius: 0px;
                left: 100%;
                top: calc(100% + 2px);
                padding: var(--paddingSmall);
                min-width: 4ch;
                text-align: center;
                /*color:red;
            border:2px solid blue;
            background-color:purple;*/
                transition-property: transform, opacity;
                transition-duration: 0.2s;
            }

        .moreCoreProgressbarRoot #dialogHeader {
        }

        .moreCoreProgressbarRoot #dialogContent > #barContainer {
        }

            .moreCoreProgressbarRoot #dialogContent > #barContainer > #bar > #progressLabel {
                background-color: inherit;
                top: 50%;
                transform: translateX(-100%) translateY(-50%);
                padding: var(--paddingSmall);
                min-width: unset;
                text-align: center;
                padding: unset;
                background-color: transparent;
                border-radius: 0;
                font-size: 85%;
                /*color:red;
            border:2px solid blue;
            background-color:purple;*/
                transition-property: unset;
            }

        .moreCoreProgressbarRoot.null > #barContainer > #bar > #progressLabel {
            color: var(--secondaryText);
            background-color: var(--secondary);
        }

        .moreCoreProgressbarRoot.full > #barContainer > #bar > #progressLabel {
            color: var(--complimentaryText);
            background-color: var(--complimentary);
        }

        .moreCoreProgressbarRoot.leftLabel #barContainer > #bar > #progressLabel {
            border-radius: inherit;
            border-top-right-radius: 0px;
            transform: translateX(calc(-101% - 2px));
        }

        .moreCoreProgressbarRoot #messageContainer > *:not(:last-child) {
            color: var(--darkTransparent);
            .darkTheme & {
                             color:var(--brightTransparent);
                         }
        }

        .moreCoreProgressbarRoot #messageContainer > p::before {
            content: '\f111';
            font-weight: bold;
            font-family: var(--fontawesome);
            color: var(--mediumTransparent);
            margin-right: 0.5em;
        }

        .moreCoreProgressbarRoot #messageContainer > *:not(:last-child)::before, .moreCoreProgressbarRoot.full #messageContainer > p::before {
            content: '\f00c';
            color: var(--primary);
        }


.entityView_Root.standalone.displayFrame {
    border-radius: var(--round);
}
    .entityView_Root.standalone.displayFrame > .entityView {
        padding: var(--paddingSmall);
        background-color: var(--mediumTransparent);
    }
    .entityView_Root.standalone.displayFrame > #frameContainer_Top {
        display:block;
    }
.entityView_Root > #frameContainer_Top {
    background: var(--accentThemeTransparent);
    padding: var(--padding);
    border-radius: inherit;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow:0px 2px 6px -4px var(--darkTransparent);
    display:none;
}
.entityView_Root > #frameContainer_Top > #frameActionbar {
    display: flex;
    gap: 0.5em;
}
    .entityView_Root > #frameContainer_Top > #frameActionbar > button{
        display:flex;
        gap:0.4em;
        align-items:center;
    }

.entityView {
    --bgColor: unset;
    --txtColor: unset;
    display: flex;
    flex-direction: row;
    gap: 0.5em;
    flex-wrap: wrap;
    align-items: start; /* damit Items in einer Zeile sich oben ausrichten und nicht auf gleiche Höhe wachsen*/
    user-select: text;
}

/* ENTITYVIEW */
/* nutzt eigene Tags: 
    attr > label + value
    box > label + value 
    flex > label + value
    sowie exps, expl, expm > label + content die vom Skript zu Expandern konvertiert werden */
.entityView > * {
    width:100%;
    /*margin:2px;*/
}

.entityView.tabbed {
    border: 1px solid var(--medium);
    border-radius:var(--round);
    /*background-color:var(--mediumTransparent);*/
    padding: var(--padding);
}

    .entityView *:is(flex, box, attr) {
        background-color: var(--bgColor);
        color: var(--txtColor);
        padding: var(--paddingSmall);
        border-radius: var(--round);
    }

.darkTheme .entityView *:is(flex, box, attr) {
    background-color: transparent;
    /*color: unset;*/
    position: relative;
    isolation: isolate;
}
    .darkTheme .entityView *:is(flex, box, attr, button) {
        --bgColorDarkTheme: color-mix(in lab, var(--bgColor) 70%, var(--dark));
        background-color: var(--bgColorDarkTheme);
    }.darkTheme *:is(flex, box, attr)::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        z-index: 1;
        background-color: transparent;
        outline:1px solid var(--txtColor);
        pointer-events:none;
        opacity:0.6;
    }

/* Pseudoelemente ausblenden, falls sie nicht schon ersetzt worden sind! */
.entityView *:is(expl, exps, expm){
    display:none;
}

    .entityView label.entityViewLabel {
        display: block;
        font-size: 0.8em;
        opacity: 0.6;
        /*color: var(--mediumDark);*/
        /*font-weight:bold;*/
        line-height: 1.2;
    }

        .entityView label.entityViewLabel + value {
            display: block;
            margin-left: 0.4em;
            word-wrap: break-word;
            min-height: 1.2em;
        }


    .entityView spacer {
        height:0;
        margin: 0.5em 0;
        display:block;
    }.entityView > spacer {
         margin:0,
    }

.entityView > hr {
    margin: 0.4em;
    border-color: var(--mediumBright);
}
    
    .entityView flex {
        display:inline-block;
        width:unset;
        min-width:6em;
        margin-right:1em;
    }
.entityView mccb { /* morecore Checkbox*/
    display: inline-block;
    width: unset;
    min-width: 6em;
    max-width: 20em;
    margin-right: 1em;
    padding: 0 var(--paddingXSmall);
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    align-self: center;
}

    .entityView mccb[data-readonly="false"] {
        background-color: var(--tertiary);
        padding: var(--paddingSmall);
        border-radius: var(--round);
        filter: drop-shadow(1px 1px 1px var(--darkTransparent));
        pointer-events: none;
        & > .moreCoreCheckBox
{
    pointer-events: all;
}
.darkTheme &

{
    filter: drop-shadow(1px 1px 0px var(--brightTransparent));
    color:var(--dark);
}
    }
    .entityView mccb.readonly[data-readonly] {
        padding: var(--paddingSmall);
        --cbColor: currentColor;
        filter: none;
        /*background-color:var(--mediumBright);*/
        border-radius: var(--round);
        outline: 0px solid var(--cbColor);
        padding: var(--padding);

        & > div
{
    display: flex;
    align-items: stretch;
    border-radius: var(--round);
    overflow: clip;
    outline: 0px solid var(--medium);
    outline-offset: -1px;
    font-size: 0.8em;
    background-color: var(--mediumTransparent);
    color: var(--mediumBright);
}
& > div > i {
    padding: var(--paddingSmall);
    font-size: 0.8em;
    display: grid;
    justify-content: center;
    align-content: center;
}

& > label {
    margin-left: var(--paddingXSmall);
}

    }

.entityView mccb.readonly[data-value="true"] {
    --cbColor: var(--w3Green);
}
.entityView mccb.readonly[data-value="false"] {
    --cbColor: var(--w3Red);
}
.entityView mccb.readonly[data-value="true"] > div > i.yes {
    background-color: var(--cbColor);
    color: var(--brighter);
    font-size: 1.2em;
    min-width: 2.5rem;
    border-radius: inherit;
}
.entityView mccb.readonly[data-value="false"] > div > i.no {
    background-color: var(--cbColor);
    color: var(--brighter);
    font-size: 1.2em;
    min-width: 2.5rem;
    border-radius: inherit;
}

.entityView mccb[data-readonly="true"] {
    
    .darkTheme &
{
    color: var(--brightTxt);
}
    }

.entityView *:is(h1, h2, h3, h4, h5, h6).entityView {
    background-color: var(--bgColor);
    color: var(--txtColor);
    border-radius: var(--round);
    padding: var(--paddingSmall);
}

.entityView *:is(h1, h2, h3, h4, h5, h6).entityView + *:is(h1, h2, h3, h4, h5, h6).entityView{
    margin-top:0;
}

    .entityView box > value {
        line-height:1.2;
        margin-left:0;
    }
.entityView box > label.entityViewLabel {
    margin-bottom: 0.4em;
}

    .entityView clear {
        width:100%;
        height:0px;
        /* macht ein Element über die ganze Breite und damit eine neue Zeile fürs Darauffolgende*/
    }
    
    .entityView attr{
        display:block;
    }

.entityView box {
    background-color: var(--mediumTransparent);
    border-radius: var(--round);
    border: 1px solid var(--medium);
    padding: 0.4em;
    display: block;
    white-space: pre-wrap; /* white-space wie ein pre */
}

.entityView table {
    width: 100%;
    border-spacing: 2px;
    font-size: 0.85em;
    --bgColor: var(--mediumTransparent);
    .darkTheme &
{
    --bgColor: var(--mediumDarkTransparent);
}


    & tr > td {
        border-radius: var(--round);
        padding: var(--paddingSmall);
    }

        & tr > td.default {
            background-color: var(--bgColor);
            color: var(--txtColor);
            .darkTheme &
{
    --bgColorDark: color-mix(in lab, var(--bgColor) 70%, var(--dark));
    --bgColorDark: hsl(from var(--bgColor) h s calc(l * 0.8) / 60%);
    background-color: var(--bgColorDark);
}
                  }

        & tr > th.default {
            background-color: var(--accentThemeTransparent);
            border-radius: var(--round);
            padding: var(--padding);
            font-weight:bold;
        }
    }

@media screen and (max-width: 900px) {
    .entityView table.responsiveTable {
        & tr > td

{
    border-radius: 0;
    
}
    }
}

.entityView .entityViewEditorContainer {
    box-shadow: var(--boxShadowSmallLight);
}

.entityView button.entityViewAction {
    width: unset;
    padding: var(--padding);
    background-color: var(--tertiary);
    --bgColor: var(--tertiary);
    --txtColor: var(--tertiaryText);
    color: var(--txtColor);
    /*outline: 2px solid var(--bgColor);
    outline-offset: -1px;*/
}

.entityView table *:is(td, th) > div.wrapper {
    display: flex;
    gap: var(--paddingYSmall);
    float: right;
}
.entityView table *:is(td, th) > mccb[data-readonly="true"]:only-child {
    padding: 0;
    margin:0;
    display:flex;
    justify-content:center;
    flex-wrap:nowrap;
}.entityView table *:is(td, th) > div.wrapper > mccb[data-readonly="true"] {
    padding: 0;
}
    .entityView table *:is(td, th) > div.wrapper > button.entityViewAction {
        padding: var(--paddingSmall);
    }

.entityView table *:is(td, th):has( button.entityViewAction ) {
    /* wenn direkt in der Tabellenzeile auch ein Button drin ist, dann die Zeile flexxen, Button rechts, Inhalt links. Oder so*/
    display:flex;
    align-items: center;
    justify-content: space-between;
}


.entityView button.entityViewAction:not(.disabled, *.unavailable, *.w3-disabled) {
    background-color: var(--bgColor, var(--tertiary));
    color: var(--txtColor);
    outline: none;
    filter: drop-shadow(1px 1px 1px var(--darkTransparent));
    .darkTheme &

    {
        filter: drop-shadow(1px 1px 0px var(--brightTransparent));
    }
}

    .entityView button.entityViewAction:is(.disabled, *.unavailable, *.w3-disabled) {
        background-image: repeating-linear-gradient(-35deg, var(--mediumTransparent) 0px, var(--mediumTransparent) 6px, var(--brightTransparent) 7px, var(--brightTransparent) 13px, var(--mediumTransparent) 14px);
        background-color: var(--tertiary);
        color: var(--tertiaryText);
        filter:none;
    }

    .entityView button.entityViewAction.large {
        font-size: 1.25rem;
    }


    .entityView button.entityViewAction.small {
        padding: var(--paddingSmall);
    }



    .entityView button.entityViewAction.tertiary {
        --bgColor: var(--tertiary);
        --txtColor: var(--tertiaryText);
    }
    .entityView button.entityViewAction.secondary {
        --bgColor: var(--secondary);
        --txtColor: var(--secondaryText);
    }
    .entityView button.entityViewAction.complimentary {
        --bgColor: var(--complimentaryTheme);
        --txtColor: var(--complimentaryText);
    }
    .entityView button.entityViewAction.primary {
        --bgColor: var(--primary);
        --txtColor: var(--primaryText);
    }

    .entityView button.entityViewAction.customBG {
    }
        .entityView button.entityViewAction.customBG.darkBG:not(.disabled, *.unavailable, *.w3-disabled) {
            --txtColor: var(--bright);

            .darkTheme &
            {
                --txtColor: var(--brightText);
            }
        }
    .entityView button.entityViewAction.unavailable {
        pointer-events: none;
    }

    /* jeder Button der ein data-targetcb hat gehört ausgeblendet:*/
.entityView button.entityViewAction[data-targetcb] {
    /*pointer-events: none;*/
    visibility: hidden;
    padding: 0;
    height: 0;
    width: 0;
    position:absolute;
}

    .entityView button.entityViewAction:has(flex){
        gap:0.5em;
        text-align:left;
        display: flex;
        flex-direction:row-reverse;
        align-items:center;
        justify-content:center;
        padding: var(--paddingSmall);
        & > flex {
                   padding:0;
                   margin-right:0;
                   cursor:inherit;
                   pointer-events:none;
                   outline:none;
                   background-color:transparent;
                   --bgColor:transparent;

                   &::after, &::before{
                               outline:none;
                               background-color:transparent;
                           }
               }
}

.entityView button.entityViewAction:has(box) {
    gap: 0.5em;
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    padding: var(--paddingSmall);
    background-color: var(--mediumBright) !important;
    border: 1px solid var(--medium);
    padding: 0.4em;
    .darkTheme &
{
    background-color: var(--mediumDarkTransparent) !important;
    --txtColor: var(--brightText);
}
    & > box
{
    flex-grow: 1;
    cursor: inherit;
    pointer-events: none;
    outline: none;
    padding: 0;
    border: none;
    background-color: transparent;
    --bgColor: transparent;
    &::after, &::before

{
    outline: none;
    background-color: transparent;
}
               }
    }



/* WEB DASHBOARD*/

.dashboardHome{


}

    .dashboardHome.editMode .grid-stack-item {
        outline:2px dashed var(--medium);
        outline-offset:-3px;        
    }
    .dashboardHome .grid-stack-item-content {
        border: 1px solid var(--mediumDarkTransparent);
        border-radius: var(--round);
        box-shadow: var(--boxShadowSection);
        background-color:var(--brightTransparent);
        overflow-y:clip;
        max-height:100%;
        .darkTheme &
{
    background-color: var(--darkTransparent);
    border-color:var(--mediumTransparent);
}
    }
        .dashboardHome .grid-stack-item-content > .widgetContainer {
            max-height: 100%;
            display: flex;
            flex-direction: column;
        }


    .dashboardHome #gridstackContainer{

    }


        .dashboardHome #gridstackContainer .grid-stack {
            
        }

            .dashboardHome #gridstackContainer .grid-stack.coloredGridContainer {
                position: relative;
                border-radius: var(--round);
                --bgColor: transparent;
                box-shadow: var(--boxShadowSection);
                background-color: transparent;
            }

            .dashboardHome #gridstackContainer .grid-stack.coloredGridContainer::before {
                background-color: var(--bgColor);
                content: '';
                position: absolute;
                inset: 0;
                pointer-events: none;
                opacity: 0.3;
                border-radius: inherit;
            }

.darkTheme .dashboardHome #gridstackContainer .grid-stack.coloredGridContainer::before {
    background-color: transparent;
    outline: 2px solid var(--bgColor);
    box-shadow:inset 0px 0px 3em var(--bgColor);
}
        .dashboardHome #gridstackContainer .contentContainer {
            padding: var(--paddingSmall);
            padding-top:var(--paddingY);
            flex:1;
            overflow:auto;
            color:initial;
            .darkTheme & {
                             color:var(--brightText);
                             color-scheme:dark;
                         }
        }
.dashboardHome #gridstackContainer .topContainer {
    display: flex;
    /*position:sticky;
            top:0;*/
    flex-direction: row;
    flex-wrap: nowrap;
    padding: var(--paddingSmall);
    background-color: var(--accentThemeTransparent);
    /* margin-bottom:1em;*/
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    box-shadow: 0px 1px 4px var(--darkTransparent);
    z-index: 1;
    .darkTheme &

{
    color: var(--brightText);
}
        }
            .dashboardHome #gridstackContainer .topContainer > .titleContainer {
                padding: var(--paddingSmall);
                flex-grow: 1;
                font-weight: 600;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: clip;
                min-width: 0;
            }
            .dashboardHome #gridstackContainer .topContainer > .actionsContainer {
                display: flex;
                flex-wrap: nowrap;
                gap: 0.5em;
            }

.dashboardHome .topContainer > .actionsContainer .mds-button-base {
    background-color: var(--brightTransparent);
    color: inherit;
}
.dashboardHome .topContainer > .actionsContainer .deleteBtn {
    background-color:var(--warning);
}

.dashboardHome .topContainer > .actionsContainer *:is(.deleteBtn, .settingsBtn) {
    display: none;
}
            
    .dashboardHome.editMode .topContainer > .actionsContainer *:is(.deleteBtn, .XXXXsettingsBtnXXXXX){
        display:block;
    } 
    
.dashboardWidgetSelect_Root{

} 
    
.dashboardWidgetSelect_Root #widgetListContainer {
        flex-basis:30ch;
        min-height:10ch;
} 
.dashboardWidgetSelect {
    /*min-width:20ch;
    max-width: 50ch;*/
    border-radius: var(--round);
    border: 1px solid var(--medium);
    padding:var(--padding);
}
.dashboardWidgetSelect.selected {
            outline: 2px solid var(--accentTheme);
            outline-offset: -1px;
            background-color: var(--accentThemeTransparent);
        }

/* USER SUBSTITUTION */

.userSubstitutionForm {

}
.userSubstitutionForm #sectionInput > * {
        max-width: 60ch;
        display:flex;
        flex-direction:column;
        justify-content:center;
}

/*MultiLangEdit*/
.translations-form-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    border-radius: var(--rounder);
    background-color: var(--secondaryThemeL5);
    outline: 0.5px solid var(--darkTransparent);
    filter: drop-shadow(0px 0px 8px var(--darkTransparent));
    font-size: 0.9rem;
    max-height: 49vh;
    overflow: clip;
}

    .translations-form-container > #mainContainer {
        flex-shrink: 1;
        overflow: auto;
    }

    .translations-form-container .translations-form-languages-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 4em;
        padding: 0 var(--paddingX);
    }

    /*.translations-form-container .translations-form-input-container {
    display: flex;
    gap: 1em;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
}*/

    .translations-form-container .translations-form-input-label-container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0.5em;
    }

    .translations-form-container .translations-form-input-label {
        text-align: center;
        overflow: clip;
        text-overflow: ellipsis;
        flex-shrink: 9999;
        flex-grow: 1;
    }

    .translations-form-container .translateButton {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0.5em;
        padding: var(--padding);
    }

    .translations-form-container .button-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 0;
        right: 10px;
    }

translations-form-container .source-language-label {
    text-align: center;
}

.translations-form-container .translations-form-table {
    border-spacing: var(--paddingXSmall);
}
    .translations-form-container .translations-form-table .tableHeader {
        font-size: 0.85em;
        font-weight: normal;
        color: var(--secondary);
        text-align: left;
    }
        .translations-form-container .translations-form-table .tableHeader > th {
            font-weight: normal;
            padding: var(--paddingSmall);
        }

.translations-form-container .formActionContainer > .formActionButton {
    padding: var(--padding);
    min-width:15ch;
}


.translations-form-container .translations-form-top-container {
    background-color: var(--secondaryTheme);
    color: var(--secondaryText);
    border-top-left-radius: var(--round);
    border-top-right-radius: var(--round);
    padding: var(--paddingSmall);
}

.translations-form-container .formActionContainer {
    background-color: var(--secondaryThemeL4);
    display: flex;
    gap: var(--paddingX);
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    background-color: var(--secondaryThemeL4);
    border-bottom-left-radius: var(--round);
    border-bottom-right-radius: var(--round);
    padding: var(--paddingSmall);
}

.darkTheme .translations-form-container .formActionContainer {
    background-color: var(--secondaryThemeD4);
    color: var(--secondaryThemeD4txt);
}

.darkTheme .translations-form-container .translations-form-top-container {
    background-color: var(--secondaryThemeD4);
    color: var(--secondaryThemeD4txt);
}

.darkTheme .translations-form-container {
    background-color: var(--darkThemeBG);
    color: var(--brightText);
    box-shadow: 0px 1px 4px 2px var(--brightTransparent);
    outline: 2px solid var(--brightTransparent);
    filter: drop-shadow(0px 0px 8px rgba(var(--rgbC0), 0.4));
}



.translations-form-container .translations-form-input-tablerow > .col1{

}
.translations-form-container .translations-form-input-tablerow > .col2{
    text-align:center;
}
.translations-form-container .translations-form-input-tablerow > .col3 {
    text-align: center;
    min-width:35ch;
}
.translations-form-container .translations-form-input-tablerow > .col4 {
    text-align: center;
}

.translations-form-container .checkbox-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

/*Html Plaintext Edit*/

.plaintext-edit-container {
    width: 100%;
    height: fit-content;
    max-height: 90vh;
}

.html-editor-pagestack .sceditor-container {
    height: 70vh !important;
}

.html-editor-pagestack .plainttext-edit {
    min-height: 70vh;
    max-height: 70vh;
    overflow: scroll;
}

.moreCoreEdit .html-input-node {
    overflow: auto;
    max-height: 4lh;
}



.moreCoreEdit .html-edit-container {
    background-color: var(--veryBright);
}

body.darkTheme .moreCoreEdit .html-edit-container{
    /* nachempfunden nach dem scEditor dark theme siehe editor-theme_dark_square.min.css */
    background-color: var(--darkThemeBG);
    color: var(--brightText);
}

.translations-form-container .html-input-node {
    text-align: start;
}
/* HTML EDITOR / SC EDITOR SCEDITOR */
.htmlEditor_root{
    min-height:8em;
}