:root {
    --brightText: #ccc;
    --brightInput: rgb(255,255,255,0.3);
    --darkInput: rgb(0,0,0,0.3);
    --fontColorDefault: var(--dark);
    --fontSizeDefault: 15px;;
    --bg0: rgb(255,255,255); /* bg für "Layer 0"*/
    --bg1: rgb(245,245,245); /* bg für "Layer 1" (zb etwas dünkler, oder im darkmode bissi heller als bg0...)*/
    --bg2: rgb(240,240,240); /* bg für "Layer 2"*/
    --bg3: rgb(235,235,235); /* usw*/
    --bg4: rgb(230,230,230);
}
.dark-theme {
    --brightText: #ccc;
    --brightInput: rgb(255,255,255,0.1);
    --darkInput: rgb(0,0,0,0.3);
    --darkThemeBG: #1d1d1f;
    --mediumDarkThemeBG: #2e2e33;
    --darkTransparent: rgba( 0,0,0, 0.3);
    --mediumDarkTransparent: rgba( var(--rgbSL1), 0.3);
    --brightTransparent: rgba(255,255,255, 0.2);
    --warningBG: rgba(222,0,0,0.2);
    color-scheme: light dark; /* bei aktiviertem Darkmode dann beides erlauben, damit light-dark() in CSS funktioniert */
}

html.dark-theme {
    --fontColorDefault: var(--brightText, #ccc);
    --bg0: var(--darkThemeBG);
    --bg1: hsl(from var(--mediumDarkThemeBG) h s calc(l * 1.05));
    --bg2: hsl(from var(--mediumDarkThemeBG) h s calc(l * 1.1));
    --bg3: hsl(from var(--mediumDarkThemeBG) h s calc(l * 1.15));
}
:root {
    /*Achtung: Farben werden ggf. von Theme.css überschrieben! */
    --marginTopbar: 45px;
    --primary: var(--mds-orange);
    --primaryText: #fff;
    --complimentary: var(--mds-green);
    --primaryText: #fff;
    --secondary: var(--mds-gray);
    --secondaryText: #fff;
    --tertiary: var(--mds-light-gray);
    --tertiaryText: #000;
    --currentColor: var(--mds-gray);
    --currentTextcolor: var(--primaryText);
    --special: var(--mds-blue);
    --specialText: #fff;
    --bright: #fff;
    --mediumBright: var(--mds-light-gray);
    --medium: var(--mds-gray);
    --dark: #222222; /*var(--mds-gray);*/
    --veryDark: black;
    --brightTransparent: var(--mds-bright-transparent);
    --mediumBrightTransparent: var(--mds-light-gray-transparent);
    --mediumTransparent: var(--mds-dark-transparent);
    --darkTransparent: var(--mds-dark-transparent);
    /*Achtung: Farben werden ggf. von Theme.css überschrieben! */
    /* ab hier ergänzende Variablen :*/
    --warning: var(--w3Red);
    --warningBG: var(--w3PaleRed);
    --warningText: #fff;
    --round: var(--w3Round);
    --rounder: calc( 2 * var(--round) );
    --roundest: 50%; /*calc( 20 * var(--round) );*/
    --paddingX: var(--w3PaddingX); /*0.8rem;*/
    --paddingSmallX: var(--w3PaddingSmallX);
    --paddingY: var(--w3PaddingY);
    --paddingSmallY: var(--w3PaddingSmallY);
    --padding: var(--paddingY) var(--paddingX);
    --paddingSmall: var(--paddingSmallY) var(--paddingSmallX);
    --paddingLarge: calc(1.6 * var(--paddingY)) calc(1.6 * var(--paddingX));
    --paddingLargeX: calc(1.6 * var(--paddingX));
    --paddingLargeY: calc(1.6 * var(--paddingY));
    --paddingXLarge: calc(2.2 * var(--paddingY)) calc(2.6 * var(--paddingX));
    --paddingXLargeX: calc(2.6 * var(--paddingX));
    --paddingXLargeY: calc(2.2 * var(--paddingY));
    --marginY: calc(1.1 * var(--paddingY));
    --marginX: calc(1 * var(--paddingX));
    --transparent: rgb(0,0,0,0);
    --fontawesome: "Font Awesome 5 Free";
    --boxShadowSmallLight: 1px 2px 4px -2px var(--darkTransparent);
    --boxShadowSmallMedium: 2px 3px 6px 0px var(--darkTransparent);
    --font: 'Trebuchet MS', Arial;
}

html, body {
    --fontFamilyDefault: Catamaran, Verdana;
    font-size:var(--fontSizeDefault);
    font-family: var(--fontFamilyDefault);
    background-image: url("../Scripts/ServicePortal/img/bg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

body {
    height: 100%;
}

button {
    border: 1px solid var(--mds-gray);
    padding: var(--w3Padding);
}
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
    accent-color: var(--primary);
}

.bg0 {
    background-color: var(--bg0);
}

.bg1 {
    background-color: var(--bg1);
}

.bg2 {
    background-color: var(--bg2);
}
.sp_standbyColor {
    outline: 4px solid var(--mds-light-gray);
}

.dark-theme .sp_standbyColor {
    background-color: var(--mediumDarkThemeBG) !important;
    outline-color: var(--darkThemeBG);
}

.dark-theme .mds-light-gray {
    background-color: var(--mds-gray);
}

.dark-theme .mds-gray {
    background-color: var(--mediumDarkThemeBG);
}

.dark-theme .bright-theme-override,
.dark-theme .sp_comment .expandableContainer.bright-theme-override,
.dark-theme .sp_comment.customColor .expandableContainer.bright-theme-override,
.dark-theme .bright-theme-override .sp_comment .expandableContainer,
.dark-theme .bright-theme-override .sp_comment.customColor .expandableContainer,
.dark-theme .bright-theme-override .sp_textArea.editing {
    color: black;
    background-color: var(--brightText);
}

html.dark-theme, body.dark-theme {
    background-color: var(--darkThemeBG);
    background-image: url("../Scripts/ServicePortal/img/bg_dark.png");
    color: var(--brightText);
}

.dark-theme .mds-text-black {
    color: var(--brightText) !important;
}

.dark-theme .mds-orange {
    color: white !important;
}

.dark-theme .mds-border-gray {
    /*border-color: var(--mds-light-gray);*/
}

.dark-theme .w3-modal-content > .mds-light-gray {
    background-color: var(--mediumDarkThemeBG);
    color: var(--brightText);
}

.dark-theme button.mds-bg-light-gray {
    color: var(--brightText);
}

.dark-theme .mds-text-black .mds-text-hover-bright:hover {
    color: white !important;
}

.dark-theme .mds-gray {
    background-color: var(--mediumDarkThemeBG);
    color: var(--brightText);
}

.dark-theme .mds-bg-gray {
    color: var(--brightText);
}


/*.dark-theme .sp_comment .controlNode,*/ /* Controlnode-Buttons*/
.dark-theme .sp_comment .ticketStatusContainer .button { /* statusselect ist sonst unleserlich*/
    color: black;
}

/* überschreiben, dass bei Lesezeichen die Textfarbe zu dunkel (=unleserlich) wird */
.dark-theme .sp_comment.customColor .expandableContainer {
    background-color: var(--darkInput);
    color: var(--brightText);
}

.dark-theme .sp_comment .fa-undo, /* ganz gezielt der Undo-Button beim Statusselect. Schöner gehts nicht... */
.dark-theme .sp_comment .w3-button { /* buttons fürs Abschicken und Entwurfspeichern*/
    color: var(--brightText);
}

.dark-theme input {
    background-color: var(--brightInput);
    color: white;
}

.dark-theme .mds-select {
    background-color: var(--brightInput);
    color:var(--dark);
}

.sp_thin {
    font-weight: 200;
}

.sp_medium {
    font-weight: 500;
}

.sp_bold {
    font-weight: 600;
}

.sp_topNav {
    z-index: 11;
    display: flex;
    flex-flow: row;
    background-color: white;
}

.dark-theme .sp_topNav {
    background-color: var(--darkThemeBG);
    color: var(--brightText);
}

.sp_topNavAccount {
    align-items: flex-end;
    height: 65px;
    flex-wrap: nowrap !important;
    background-color: white;
}

.dark-theme .sp_topNavAccount {
    background-color: var(--darkThemeBG);
    color: var(--brightText);
}


.dark-theme .responsiveTable .mds-bg-white,
.dark-theme .sp_create .mds-bg-white,
.dark-theme .responsiveTable .mds-bg-light-gray {
    background-color: var(--darkTransparent);
}

.sp_textArea.editing {
    background-color: white;
}

.dark-theme .show-in-bright-theme {
    display: none;
}

.show-in-dark-theme,
.dark-theme .bright-theme-override .show-in-dark-theme {
    display: none;
}


.dark-theme .show-in-dark-theme {
    display: unset;
}

.dark-theme .sp_textArea.editing {
    background-color: var(--darkThemeBG); /*var(--darkInput);*/
}

.sp_textArea .ql-toolbar.ql-snow {
    border-color: var(--mds-light-gray);
    /*border-bottom: 0px solid white;*/
    color: var(--mds-gray);
    background-color: var(--mds-light-gray);
    font-size: 1rem;
    font-family: Catamaran, Verdana;
    /*box-shadow: 0px 2px 4px 0 var(--mds-dark-transparent);*/
    /*padding:0;*/
}

.sp_textArea .ql-toolbar .ql-picker-label,
.sp_textArea .ql-toolbar .ql-formats > button {
    /*padding: var(--w3Padding);*/
}

.sp_textArea .ql-snow.ql-toolbar button:hover,
.sp_textArea .ql-snow.ql-toolbar .ql-picker-label:hover,
.sp_textArea .ql-picker-item:hover {
    color: var(--mds-orange);
}

.sp_textArea .ql-picker-item:hover {
    background-color: var(--mds-light-gray-transparent);
    padding: var(--w3PaddingSmall);
}

.sp_textArea .ql-snow.ql-toolbar button:hover .ql-stroke,
.sp_textArea .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke {
    stroke: var(--mds-orange);
}

.sp_textArea .ql-snow.ql-toolbar button:hover .ql-fill {
    fill: var(--mds-orange);
}

.sp_textArea.editing .ql-container {
    border: 1px solid var(--mds-light-gray);
}

.sp_actionMenu {
    background-color: white;
    z-index: 10;
    padding-top: 52px;
    height: 100%;
    width: 210px;
    position: relative;
    z-index: 4;
    border-right: 1px solid var(--mds-light-gray);
    display: flex;
    flex-flow: column;
}

.dark-theme .sp_actionMenu {
    background-color: var(--darkThemeBG);
    border-right: 1px solid var(--mds-gray);
}

.sp_menuBar {
    z-index: 10;
    box-shadow:var(--boxShadowSmallLight)
}

.dark-theme .sp_menuBar input {
    background-color: var(--darkInput);
    color: var(--brightText);
}

.dark-theme .sp_menuBar {
    color: black;
}

    .dark-theme .sp_menuBar .w3-white,
    .dark-theme .sideNav.w3-white,
    .dark-theme .mds-popup.w3-white,
    .dark-theme .w3-dropdown-content {
        background-color: var(--darkThemeBG);
        color: var(--brightText);
        border-color: var(--mds-gray);
    }



.dark-theme .mds-hover-dark:hover {
    color: white;
}

/*.dark-theme .mds-hover-orange:hover{
        color:white;
    }*/

h1 {
    font-size: 24px;
}



h2 {
    font-size: 20px;
}

.bold {
    font-weight: bold;
}

div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.fa-rotate-45 {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.w3-disabled {
    cursor: default;
    pointer-events: none;
}

.w3-modal {
    z-index: 20;
    backdrop-filter: blur(2px);
}

.w3-modal-content {
    position: absolute;
    left: 0;
    right: 0;
}

.w3-panel.mds-border {
    margin-top: 16px;
}

.w3-container {
    padding-top: unset;
    padding-bottom: unset;
}

.w3-input.w3-border {
    height: 35px !important;
    margin-top: 3px !important;
}

.w3-padding-x {
    padding-left: 16px;
    padding-right: 16px;
}

.w3-padding-y {
    padding-top: 8px;
    padding-bottom: 8px;
}

p.w3-padding.w3-large {
    padding: 4px 8px 3px 8px !important;
    margin-top: 0px;
    margin-bottom: 0px;
}

.w3-padding.w3-left, .w3-padding-x.w3-left {
    /*padding-right:0px!important;
            */
}

.w3-bar-item {
    user-select: none;
}

input.w3-padding.mds-border {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}

span.ql-formats button:hover, span.ql-picker-label:hover {
    background-color: var(--mds-light-gray);
}

.sp-entry label {
    font-size: 9pt;
}

.mds-disable-hover {
    pointer-events: none;
}

.w3-ripple.mds-gray:active {
    background-color: var(--mds-light-gray);
    opacity: 1;
}

.mds-text-hover-orange:hover {
    color: var(--mds-orange);
    transition: var(--mds-hover-transition-out);
}


.mds-nopadding {
    padding-right: 0px;
    padding-left: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}



.mds-nomargin {
    margin-right: 0px;
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.mds-nomargin_h {
    margin-right: 0px;
    margin-left: 0px;
}

.mds-nomargin_v {
    margin-top: 0px;
    margin-bottom: 0px;
}

.mds-menu-pane-v {
    width: 30px;
}

.mds-symbol {
}

.mds-innerborder-orange {
    outline: 3px solid var(--mds-orange);
    outline-offset: -6px;
}

    .mds-innerborder-orange.dashed {
        outline-style: dashed;
    }

.mds-panel-small {
}

.mds-panel-medium {
    height: 50px;
}

.mds-paragraph-small {
    margin-top: 8px;
    margin-bottom: 8px;
    white-space: nowrap;
}

.mds-negative-margin-y {
    margin-top: -1px;
    margin-bottom: -1px;
}

.mds-negative-margin-x {
    margin-left: -1px;
    margin-right: -1px;
}

.mds-button-bright {
    background-color: rgba(255,255,255,0.15);
    box-shadow: none;
    margin-top: 0px;
    transition: var(--mds-hover-transition-out);
}


.mds-button-dark {
    background-color: rgba( 0, 0, 0, 0.2);
    box-shadow: none;
    margin-top: 0px;
    cursor: pointer;
    transition: var(--mds-hover-transition-out);
}

.mds-button-light-gray {
    background-color: var(--mds-light-gray);
    box-shadow: none;
    margin-top: 0px;
    cursor: pointer;
    transition: var(--mds-hover-transition-out);
}

.mds-noborder {
    border: 0px;
}

.mds-border-right {
    border-right: 1px solid var(--mds-light-gray);
}

.mds-border-left {
    border-left: 1px solid var(--mds-light-gray);
}

.mds-border-vertical {
    border-right: 1px solid var(--mds-light-gray);
    border-left: 1px solid var(--mds-light-gray);
}

.mds-border-horizontal {
    border-top: 1px solid var(--mds-light-gray);
    border-bottom: 1px solid var(--mds-light-gray);
}

.mds-tag {
    border-radius: 15px;
    padding-left: 10px;
    padding-right: 10px;
    margin: 5px;
}

.w3-table-all th {
    font-weight: bold;
}

.mds-bottomline-link {
    padding-bottom: 5px;
    padding-top: 28px;
}

.mds-strong-shadow {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.9);
}

.mds-light-shadow:hover {
    box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.4) !important;
}

.mds-card {
    padding-top: 0px !important;
    border-top: 0px solid #7b7b81;
    box-shadow: none !important;
}



.mds-border-top {
    border-top: 1px solid var(--mds-light-gray);
}

.mds-border-bottom {
    border-bottom: 1px solid var(--mds-light-gray);
}

.mds-border {
    border: 1px solid var(--mds-light-gray);
    /*margin-top: -1px;*/
}

.mds-border-transparent {
    border-color: rgba(255,255,255,0);
}



.sp-wikilink {
    background-color: rgba(189,189,194,0.15);
}


select.mds-hover-bright:hover, select.mds-hover-bright.hover {
}


.dark-theme select > option {
    /* muss explizit gesetzt sein, sonst inheritet es im Darkmode von irgendwo weißen Text auf weißem Grund */
    background-color: var(--darkThemeBG);
    color: var(--brightText);
}


.mds-highlight-green {
    box-shadow: inset 2px -2px 0px 0px #77bb00;
}

.mds-highlight-yellow {
    box-shadow: inset 2px -2px 0px 0px #dcd00c;
}

.mds-highlight-orange {
    box-shadow: inset 2px -2px 0px 0px #ec6707;
}

.searchInputBox, .mds-select {
    box-shadow: inset 0 0 0 2px var(--mds-light-gray);
    background-color: white;
}

    .mds-select.mds-hover-bright:hover {
        box-shadow: inset 0 0 0 2px rgba(123,123,129,0.15);
        background-color: white;
    }

.mds-popup {
    position: absolute;
    background-color: white;
    left: 0px;
    top: 44px;
    z-index: 1;
    display: none;
}

.w3-dropdown-hover > .mds-button-small, .w3-dropdown-click > .mds-button-small {
    margin-top: 0px !important;
}

.mds-tab {
    margin-top: 3px !important;
    padding-left: 8px;
    height: 29px !important;
    vertical-align: middle;
}

.memberEntry-margin-20 {
    margin-top: 20px !important;
}

.mds-quickaction {
    width: 250px;
}

.mds-expandable {
    max-height: 260px;
    overflow: hidden;
    position: relative;
}

.mds-expanded {
    height: unset;
    position: relative;
}

.mds-toggle {
    bottom: 0px;
    left: 0px;
    width: 100%;
    transition-duration: var(--mds-hover-transition-out);
}

table.listViewTable {
    line-height: 1.2;
    --hoverColor: var(--mds-gray-transparent);
    --rowColor: var(--mds-light-gray);
    isolation:isolate;
    position:relative;
}


.listViewTable .tableHeadRow {
    background-color:transparent;
    color: var(--mds-light-gray-text);
    border-radius: var(--round);
    overflow: clip;
    font-size: 1.1em;
    backdrop-filter: blur(6px);
}
    .listViewTable .tableHeadRow > tr,
    .listViewTable .tableHeadRow > th {
        background-color: var(--brightTransparent);
    }


.dark-theme .listViewTable .tableHeadRow > th {
    background-color: var(--darkTransparent);
    color: var(--fontColorDefault)
}
.listViewTable thead {
    position: sticky;
    top: 0px;
    z-index: 1;
}
.listViewTable td:first-child,
.listViewTable th:first-child {
    border-top-left-radius:var(--round);
    border-bottom-left-radius:var(--round);
}
.listViewTable td:last-child,
.listViewTable th:last-child {
    border-top-right-radius:var(--round);
    border-bottom-right-radius:var(--round);
}


.listViewTable th.colorstrip,
.listViewTable td.colorstrip{
    width:1em;
}

.listViewTable .tableHeadRow th,
.listViewTable .tableHeadRow td{
    padding-top:var(--paddingLargeY);
    padding-bottom:var(--paddingLargeY);
}
.listViewTable tr {
    border-radius: var(--round);
    overflow: clip;
    background-color:transparent;
    --hoverColor: hsl(from var(--rowColor) h s 70 / 20%);
    --bgColorDarkTheme: hsl(from var(--rowColor) h calc(s * 0.7)) calc(l*0.7);
    box-shadow: inset 0px -1px 0px 0px var(--rowColor), var(--boxShadowSmallLight);
}
    .listViewTable tr td.useColumnColor {
        background-color: var(--columnColor, var(--mds-gray-transparent));
        --columnColorDarkTheme: hsl(from var(--columnColor, var(--mds-gray-transparent)) h calc(s*.7) calc(l*0.8))
    }
    
    .dark-theme .listViewTable tr td.useColumnColor {
        /*background-color:var(--columnColorDarkTheme, var(--mds-gray-transparent));*/
    }
    .listViewTable tr td {
        background-color: var(--mds-light-gray-transparent);
        cursor: pointer;
        transition-property: box-shadow;
        transition-duration: var(--mds-hover-transition-out);
        box-shadow: inset 0 0 100px 100px transparent;
    }.dark-theme .listViewTable tr td:not(.useColumnColor) {
        background-color: var(--darkTransparent);
        
    }
.dark-theme table.listViewTable tr {
    --hoverColorDarkTheme: hsl(from var(--hoverColor) h s l / 10% );
    --rowColorDarkTheme: hsl(from var(--rowColor) h calc(s * 0.7) calc(l * 0.8) );
/*    box-shadow: inset 0px -1px 0px 0px var(--rowColorDarkTheme), var(--boxShadowSmallLight);
*/}
.dark-theme table.listViewTable tr:hover td {
    /*box-shadow: inset 0 0 100px 100px var(--hoverColorDarkTheme, var(--hoverColor));*/
}

table.listViewTable tr:hover td {
    box-shadow: inset 0 0 100px 100px var(--hoverColor);
    transition-duration: var(--mds-hover-transition-in);
}

.listViewTable.w3-hoverable tbody tr:hover {
    background-color: transparent;
}

.listViewTable a {
    text-decoration: none;
}

    .listViewTable a:hover {
        text-decoration: none;
    }

.listView_gradient {
    position: absolute;
    opacity: 0.5;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-image: linear-gradient(to bottom, rgba(123,123,129,0), var(--mds-light-gray));
    height: 30px;
    pointer-events: none;
}


.listView{
    display:flex;
    flex-direction:column;
    height:100%;
}

.listView .listViewContent{
    flex-grow:1;
    overflow-y:auto;
    min-height:10em;
}
    .listView #scrollingTableNode {
        /* overflow-y: auto;*/
        padding: var(--padding);
    }
    .listViewTable span.iconContainer > i:not(:first-child){
        margin-left:0.4em;
    }

.SPstartPage {
}

.SPstartPage > #filterPanelsContainer {
}
    .SPstartPage > #filterPanelsContainer > * {
    }

    .SPstartPage > #filterPanelsContainer .StartPanel {
        padding: var(--paddingY) var(--paddingSmallX);
        flex-grow: 999;
    }
    
    
    
    .filterPanel {
       height:100%;
        min-width: 450px;
    }

.FilterPanel select {
    border: 1px solid var(--mds-light-gray);
}

    .sideNav {
        z-index: 4;
        display: none;
        flex-flow: column;
    }


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

}

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


    .FilterPanel {
        overflow-y: visible;
        height: unset;
    }
}

.itemPanelsSplit{
    gap:1em;
    width:100%;
    flex-wrap:wrap;
}

.itemPanelsSplit .itemLeftPanels{
    flex-basis:60%;
    flex-grow:3;
}
.itemPanelsSplit > .itemRightPanels{
    flex-basis:30%;
    padding-left:0;
    flex-grow:1;
}

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


    .itemPanelsSplit {
        display: flex;
        flex-direction: column;
    }
    .itemRightPanels {
        padding-left: 0px;
        
    }

    .sideNav {
        width: 400px;
    }
}

@media screen and (min-width: 993px) {
    .itemPanelsSplit {
        display: flex;
        flex-direction: row;
    }


        .itemPanelsSplit > .itemLeftPanels {
            min-width:600px;
        }
        .itemPanelsSplit > .itemRightPanels {
            min-width:550px;
            max-width:unset;
        }

    .itemRightPanels {
        max-width: 600px;
        padding-left: 16px;
    }

    .sideNav {
        width: 210px;
    }
}


/* allgemeine tablelen styles. wird vor allem für listviews verwendet*/
/*beisst sich aber mit Selectentitydialog!*/
table {
    /*border: 1px solid #ccc; */
    border-color: var(--mds-light-gray);
    /*border-collapse: collapse;*/
    margin: 0;
    padding: 0;
    table-layout: fixed;
    width: 100%;
    border-spacing: 0px var(--paddingSmallY);
}

    table tr {
        background-color: #fff;
        /*border: 1px solid var(--mds-light-gray); */ /* nicht gut für selectentitydialog  */
        border-color: var(--mds-light-gray);
        padding: 0px;
    }

    table th,
    table td {
        padding: 8px;
        text-align: left;
    }


/*responsive tabellen bei kleinen bildschirmgrößen*/
@media screen and (max-width: 600px) {

    .FilterPanel {
        overflow-y: visible;
        height: unset;
    }

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

    .responsiveTable table tr {
        border-bottom: 1px solid var(--mds-light-gray);
        border-top: 2px solid var(--mds-light-gray);
        display: block;
        margin-bottom: 6px;
    }

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

        .responsiveTable table td::before {
            content: attr(data-label);
            float: left;
            opacity: 0.5;
        }
   
}

.flex_row_start {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;
}

.flex_row_stiff div:nth-child(n) {
    white-space: nowrap;
    flex: 1;
}

/*ChannelMenu*/
.channelMenuItemContainer {
    max-height: 500px; /*ab diesem grenzwert wird gescrollt*/
    overflow-y: auto;
    /*width: 350px;*/ /*@TODO: horizontales scrollen funkt rein wenn hier eine BReite angegeben wird??? beim Projektmenü funktionierts...*/
}



/*ProjectMenu*/
.projectMenuItemContainer {
    max-height: 400px; /*ab diesem grenzwert wird gescrollt*/
    overflow-y: auto; /* scroll */
}

.channelHeadline {
    margin: 20px 10px 15px 10px;
    color: var(--mds-orange);
    text-align: center;
    border-top: 1px solid var(--mds-orange);
    line-height: 1px;
}

    .channelHeadline span {
        background: white;
        padding: 0 10px;
    }

    .channelHeadline.mds-light-gray span {
        background: var(--mds-light-gray);
        color: white;
        font-weight: bold;
    }

    .channelHeadline.mds-gray span {
        background: var(--mds-gray);
        color: white;
    }

    .channelHeadline.mds-text-light-gray {
        color: var(--mds-light-gray);
        border-color: var(--mds-light-gray);
    }

    .channelHeadline.mds-text-gray {
        color: var(--mds-gray);
        border-color: var(--mds-gray);
    }

    .channelHeadline.mds-light-gray, .channelHeadline.mds-gray {
        border-color: white;
    }

.dark-theme .channelHeadline span {
    background-color: var(--darkThemeBG);
}

.dark-theme .channelHeadline {
    background-color: var(--darkThemeBG);
    color: var(--brightText);
    border-color: var(--mds-light-gray);
}

.mds-new-element {
    background-color: var(--mds-orange-transparent);
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-6px);
    }

    20%, 40%, 60%, 80% {
        transform: translateX(6px);
    }
}

.mds-shake {
    animation-duration: 0.8s;
    animation-fill-mode: both;
    animation-name: shake;
}

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


.mds-hover-info {
    /*position:relative;*/
    /*overflow:visible;*/
}



.dark-theme .w3-modal-content {
    background-color: var(--darkThemeBG);
}

.dark-theme .listViewTable tr.mds-light-gray {
    color: var(--brightText);
}

.mds-hover-info-content {
    position: absolute;
    display: none;
    border: 2px solid var(--mds-light-gray);
    z-index: 10;
    box-shadow: 0 0 0px 2000px rgba(0, 0, 0, 0.3);
    width: 70ch;
    white-space: normal;
    text-align: left;
}

.sp_tooltip_100p .mds-hover-info-content {
    left: 0;
    width: 100%;
}

.globalSearchRoot pre {
    margin-top: 0.4em;
    margin-bottom: 0.4em;
}

.globalSearchRoot ul {
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 0;
    margin-top: 0;
}

.mds-hover-info:hover .mds-hover-info-content {
    display: block;
}

.mds-hover-info:hover {
    z-index: 20;
}


.sp-transparent-fade {
    transition-duration: 1s;
    transition-property: opacity;
}

    .sp-transparent-fade.delay {
        transition-delay: 1s;
    }

    .sp-transparent-fade.slow.delay {
        transition-delay: 1.5s;
    }

    .sp-transparent-fade.slow {
        transition-duration: 1.5s;
        transition-property: opacity;
    }

    .sp-transparent-fade.fast {
        transition-duration: 0.5s;
        transition-property: opacity;
    }

    .sp-transparent-fade.sp-transparent {
        opacity: 0;
    }

.sp-transparent.no-fade {
    opacity: 0;
}

/* post-it style für aufgabenpanel */

.mds-postit {
    box-shadow: 0 10px 10px 2px rgba(0,0,0,0.3);
    word-break: break-word;
    /* das richtige Postit-Gelb wär schöner */
    background-color: rgba(220,208,12,0.15);
    min-height: 100px;
}

.mds-postit-head {
    /* leichte Dunklerfärbung */
    background-color: rgba(123,123,129,0.15);
}

.mds-postit-content {
    padding: 16px;
}

.postit {
    color: #333;
    position: relative;
    max-width: 400px;
    margin: 0 auto;
    margin-top: -32px;
    padding: 20px;
    box-shadow: 0 10px 10px 2px rgba(0,0,0,0.3);
    word-break: break-word;
}

.postit-yellow {
    background: #eae672;
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    transform: rotate(2deg);
}

.pin {
    background-color: #aaa;
    display: block;
    height: 32px;
    width: 2px;
    position: relative;
    left: 50%;
    top: -16px;
    z-index: 1;
}

    .pin:after {
        background-color: #ec6707; /*mds-orange*/
        background-image: radial-gradient(25% 25%, circle, hsla(0,0%,100%,.3), hsla(0,0%,0%,.3));
        border-radius: 50%;
        box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.1), inset 3px 3px 3px hsla(0,0%,100%,.2), inset -3px -3px 3px hsla(0,0%,0%,.2), 23px 20px 3px hsla(0,0%,0%,.15);
        content: '';
        height: 12px;
        left: -5px;
        position: absolute;
        top: -10px;
        width: 12px;
    }


    .pin:before {
        background-color: hsla(0,0%,0%,0.1);
        box-shadow: 0 0 .25em hsla(0,0%,0%,.1);
        content: '';
        height: 24px;
        width: 2px;
        left: 0;
        position: absolute;
        top: 8px;
        transform: rotate(57.5deg);
        -moz-transform: rotate(57.5deg);
        -webkit-transform: rotate(57.5deg);
        -o-transform: rotate(57.5deg);
        -ms-transform: rotate(57.5deg);
        transform-origin: 50% 100%;
        -moz-transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -o-transform-origin: 50% 100%;
    }

.sp_comment.draft .mainBar,
.sp_status_bar.draft {
    /*background: repeating-linear-gradient( 45deg, var(--mds-orange-transparent), var(--mds-orange-transparent) 20px, rgba(255,255,255,0) 20px, rgba(255,255,255,0) 40px );*/
    /*background: repeating-linear-gradient( 45deg, var(--mds-orange), var(--mds-orange) 0.3em, var(--mds-light-gray) 0.3em, var(--mds-light-gray) 2em );*/
    /*background-color: var(--mds-orange-transparent);*/
    /*background: repeating-linear-gradient( 45deg, var(--mds-orange-transparent), var(--mds-orange-transparent) 0.3em, rgba(255,255,255,0) 0.3em, rgba(255,255,255,0) 2em );*/
    outline: 2px dashed var(--mds-orange);
    outline-offset: -1px;
    position: relative;
}

.sp_status_bar .counter,
.listViewTable .counter {
    font-family: 'Inconsolata', monospace;
    position: relative;
    color:hsl(from var(--rowColor, var(--fontColorDefault)) h calc(s*0.9) calc(l*0.5))
}
.dark-theme .listViewTable .counter {
    color: hsl(from var(--rowColor, black) h calc(s*0.6) clamp(60, l, 90));
}

.sp_status_bar {
    box-shadow: 0px 2px 0px 0px var(--mds-gray-transparent);
}

    .sp_status_bar .counter .overlay {
        position: absolute;
        padding: var(--w3Padding);
        left: 0;
        top: 0;
        bottom: 0;
        pointer-events: none;
        opacity: 0.4;
        user-select: none;
        /*color:var(--mds-light-gray);*/
    }
/*.sp_comment.draft .mainBar::after {*/
/*background: repeating-linear-gradient( 45deg, var(--mds-orange), var(--mds-orange) 0.3em, var(--mds-light-gray) 0.3em, var(--mds-light-gray) 2em );*/
/*pointer-events: none;
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }*/

.sp_comment.draft .expandableContainer,
#ServicePortal_Main_MainForm_0.draft,
.sp_textContainer.draft {
    background: repeating-linear-gradient( 45deg, var(--mds-orange-transparent), var(--mds-orange-transparent) 20px, rgba(255,255,255,0) 20px, rgba(255,255,255,0) 40px );
    /*background-attachment: fixed;*/
}

#ServicePortal_Main_MainForm_0.locked{

}

#mainContent.locked{
    outline: 4px solid var(--mds-gray);
    outline-offset:-4px;
    background-color:rgba(0,0,0,0.05);
}
/*.dark-theme .sp_textContainer.draft {
    background: var(--mds-orange-transparent);
}
*/
.sp_panel .noEntries {
    text-align: center;
    background-color: var(--mds-light-gray-transparent);
    border-bottom: 1px solid var(--mds-gray);
    user-select: none;
}

    .sp_panel .noEntries span, .sp_panel span.noEntries {
        font-style: italic;
        opacity: 0.6;
        padding: var(--w3Padding);
    }

    .sp_panel .noEntries .w3-button {
        margin-bottom: var(--w3PaddingY);
        padding: var(--w3PaddingSmall);
    }

.dark-theme .sp_panel .mds-bg-light-gray {
    background-color: var(--darkTransparent);
}


.dark-theme .sp_panel .controlNode .mds-bg-light-gray {
    background-color: var(--mds-gray-transparent); /* dunklerer Hintergrund als eigentlich angegeben */
    color: black;
}

.dark-theme .sp_panel .controlNode .mds-bg-gray {
    background-color: var(--mds-dark-transparent);
    /*color:black;*/
}

.dark-theme .mds-bg-gray.mds-hover-bright:hover,
.dark-theme .mds-bg-light-gray.mds-hover-bright:hover {
    color: white;
}

.dark-theme .mds-bg-light-gray.mds-hover-dark:hover,
.dark-theme .mds-bg-light-gray.mds-hover-dark.hover {
    box-shadow: inset 0 0 0 500px var(--mds-dark-transparent);
}

/* nochmal klarmachen, dass orange orange und gelb gelb bleiben soll!*/
.dark-theme .sp_panel .mds-orange {
    background-color: var(--mds-orange);
}

.dark-theme .sp_panel .mds-yellow {
    background-color: var(--mds-yellow);
}

.dark-theme .sp_treeContainer.mds-bg-light-gray {
    background-color: var(--darkTransparent);
}

.sp_textPanelExpander {
    /*box-shadow: 0px -4px 8px var(--mds-gray);*/
    position: relative;
    user-select: none;
}

    .sp_textPanelExpander .expanderButton,
    .sp_textPanelExpander .shrinkerButton {
        padding: var(--w3Padding);
        background: linear-gradient( var(--transparent), var(--mds-light-gray));
        position: absolute;
        bottom: 100%;
        text-shadow: 0px 0px 2px white;
    }

    .sp_textPanelExpander .shrinkerContainer {
        margin-top: 3em;
    }

.dark-theme .sp_textPanelExpander .expanderButton,
.dark-theme .sp_textPanelExpander .shrinkerButton {
    background: linear-gradient( var(--transparent), var(--mds-gray));
}
/*.sp_textPanelExpander::before{
    content: '';
    bottom: 100%;
    left: 0;
    right:0;
    height:4em;
    background: linear-gradient(var(--transparent), white);

}
*/
.w3-animate-bottom, .w3-animate-top, .w3-animate-left {
    animation-timing-function: ease-out;
    animation-duration: 1s;
}

.sp_userChannelTable {
    border-bottom: 1px solid var(--mds-gray);
    width: unset;
    border-collapse: separate;
    table-layout: inherit;
    background-color: var(--mds-light-gray-transparent);
}

    .sp_userChannelTable td.matrix {
        /*border: 1px solid var(--mds-gray);*/
        min-width: 4rem;
        max-width: 4rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.85em;
        text-align: center;
        vertical-align: middle;
        /*border-bottom: 1px solid var(--mds-gray);*/
        user-select: none;
    }

        .sp_userChannelTable td.matrix.mds-orange,
        .sp_userChannelTable td:not(.w3-disabled).matrix:hover,
        .sp_userChannelTable .matrix:hover i.small {
            font-size: 1em;
        }

    .sp_userChannelTable .matrix i.small {
        font-size: 0.7em;
    }

    .sp_userChannelTable tr {
        background-color: transparent;
    }


    .sp_userChannelTable tbody tr {
        outline: 2px solid var(--transparent);
        outline-offset: -1px;
        transition-property: outline-color;
        transition-duration: var(--mds-hover-transition-out);
    }

        .sp_userChannelTable tbody tr:not(.emptyRow):hover {
            outline-color: var(--mds-gray);
            transition-duration: var(--mds-hover-transition-in);
        }

    .sp_userChannelTable thead td {
        text-align: center;
        /*font-weight: bold;*/
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        background-color: var(--mds-gray);
        color: white;
        outline: 1px solid var(--mds-gray); /* zum "Ausfüllen" von den nicht collapsden Zellen */
        width: 8em;
        user-select: none;
        /*position:relative;*/
    }

        .sp_userChannelTable thead td.tooltip > div::after {
            content: '\f0eb';
            font-family: "Font Awesome 5 Free";
            opacity: 0.5;
            padding-left: 0.4em;
        }

    .sp_userChannelTable .mds-hover-info {
        /*position: absolute;*/
        /*top: 0;
        left: 0;
        right: 0;
        bottom: 0;*/
    }

    .sp_userChannelTable thead {
        position: sticky;
        top: 0em;
        z-index: 5;
        box-shadow: 0px 2px 3px 0px var(--mds-dark-transparent);
    }

        .sp_userChannelTable thead .corner {
            /*background-color:transparent;*/
            /*box-shadow:unset;*/
            padding: 0;
            position: relative;
            overflow: visible;
        }

    .sp_userChannelTable .corner .buttonContainer {
        position: absolute;
        left: -1px;
        top: -1px;
        bottom: -1px;
        background-color: transparent;
        display: flex;
    }

    .sp_userChannelTable td.saveCol, .sp_userChannelTable td.deleteCol {
        text-align: right;
        padding-top: 0px;
        padding-bottom: 0px;
    }


    .sp_userChannelTable td.channelTitle {
        min-width: 15ch;
        max-width: 25ch;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
        font-size: inherit;
    }

    .sp_userChannelTable td.corner {
        min-width: 30ch;
    }

    .sp_userChannelTable td.emptyRow, tr.emptyRow {
        height: 1px;
        background-color: var(--mds-light-gray);
        padding: 0;
    }

    .sp_userChannelTable .sectionSelect {
        min-width: 15ch;
    }

.sp_comment .sp_select {
    color: black;
}

.sp_panel .sp_select.editmode .button,
.sp_memberpanel .sp_select.editmode .button {
    border: 1px solid var(--mds-gray);
}

.sp_lockedInfo{
    background-color:rgba(255,0,0,0.25);
}

.sp_lockedInfo .text,
.sp_privateInfo .text,
.sp_draftInfo .text {
    flex: 1;
    margin-left: 0.6em;
    display: flex;
    flex-flow: column;
}

.sp_userInfoDialogRoot .absence {
    border-width: 2px;
}

    .sp_userInfoDialogRoot .absence .infoText {
        line-height: 1.15;
    }
.sp_entry i.customMarkingIcon{
    margin-right:var(--paddingSmallX);
}

.sp_discussionpanelRoot .sp_userInfoLabelRoot,
.floatingContainer .sp_userInfoLabelRoot {
    background-color:var(--mds-gray-transparent);
}

.sp_comment .sp_userInfoLabelRoot, .sp_topNavAccount .sp_userInfoLabelRoot.absent {
    
}

.sp_userInfoLabelRoot {
    border-radius: var(--w3Round);
    display: inline-block;
    padding: var(--w3PaddingSmall);
    outline-offset: -2px;
}
.sp_userInfoLabelRoot i.additionalIcon {
    margin-right:var(--paddingSmallX);
}

    .sp_userInfoLabelRoot:hover,
    .sp_userInfoLabelRoot.hover {
        
    }

    .sp_userInfoLabelRoot.online {
        outline: 2px solid var(--mds-green) !important;
    }

    .sp_userInfoLabelRoot.absent {
        outline: 2px solid var(--w3Pink);
        /*box-shadow:inset 2px 0px var(--w3Pink);*/
        /*position: relative;*/
    }

/*.sp_userInfoLabelRoot.absent::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;*/
/*background-color:var(--w3Pink);*/
/*outline: 4px inset var(--w3Pink);
        opacity: 0.3;
        pointer-events: none;
border-radius: var(--w3Round);
}
*/

    .sp_userInfoLabelRoot #profilePicContainer {
        position: relative;
        height: 1.5em;
        width: 1.5em;
        margin-right: 0.4em;
    }
    .sp_userInfoLabelRoot #imgContainer {
        border-radius: 200em;
        overflow: clip;
        position: absolute;
        /*inset: -1px;*/
        inset: clamp(-4px, -2%, -1px);
    }
        .sp_userInfoLabelRoot #imgContainer img {
            height:100%;
            width:100%;
            object-fit: cover;
        }


.sp_topNavAccount [data-dojo-attach-point="profilePicContainer"] {
    position:relative;
}
.sp_topNavAccount #imgContainer {
    border-radius: 200em;
    overflow: clip;
    position: absolute;
    inset: -1px;
    overflow-clip-margin: 0.5em;
}
    .sp_topNavAccount #imgContainer .profilePic {
        height: 1.1em;
        width: 1.1em;
    }

.dark-theme .sp_main .private {
    background: var(--mds-yellow-transparent);
}

.sp_main .private {
    background-color: var(--mds-yellow-transparent);
    background: repeating-linear-gradient( 45deg, var(--mds-yellow-transparent), var(--mds-yellow-transparent) 30px, rgba(255,255,255,0) 30px, rgba(255,255,255,0) 40px );
}

.sp_htmlView_Root .ql-container {
    font-family:Roboto, var(--fontFamilyDefault), Arial, sans-serif;
}
.sp_htmlView_Root .ql-container:has(.floatingContainer:not(.w3-hide)) {
    overflow:visible;
}

.sp_htmlView_Root .sp-mention,
.sp_htmlView_Root .sp-wikilink {
    padding: 0px 3px 1px 3px;
    background-color: var(--statusColor, var(--mds-gray-transparent));
    border-radius: var(--round);
    font-weight: 500;
    border-bottom: 1px solid var(--secondary);
    text-decoration: none;
    cursor: pointer;
    transition: var(--mds-hover-transition-out) background-color, color;
    position:relative;
}

.sp_htmlView_Root .floatingContainer {
    position: absolute;
    top: 60%;
    left: 50%;
    min-width:50px;
    width: max-content;
    max-width: 400px;
    overflow: clip;
    z-index: 9;
    font-size: var(--fontSizeDefault);
    font-family: var(--fontFamilyDefault);
    color: var(--fontColorDefault);
}
    .sp_htmlView_Root .floatingContainer > .innerContainer {
        white-space: nowrap;
    }


.dark-theme .sp-wikilink.customColor, .dark-theme .sp-mention.customColor {
    background-color: var(--mds-gray-transparent);
    background-color: hsl( from var(--statusColor) h s l / 60%);
}

.sp-wikilink::after { /* bissl too much */
    /*font-family: "Font Awesome 5 Free";
    content: '\f35a';
    margin-left: 0.2em;
    font-weight: bold;
    font-size: 0.7em;*/
}

.sp-mention:hover,
.sp-wikilink:hover {
    background-color: #ec6707;
    background-color: hsl(from var(--statusColor, #ec6707) h s calc(l * 1.1));
    color: white;
    transition-duration: var(--mds-hover-transition-in);
}

.sp_mentionsSelector_Root {
    --posTop: 0px;
    --posLeft: 0px;
    position: absolute;
    z-index: 9;
    top: calc(2ch + var(--posTop));
    left: calc(1ch + var(--posLeft));
    min-width: 250px;
    max-width: 400px;
    overflow: clip;
    padding: var(--paddingSmall);
    font: var(--fontFamilyDefault);
    color: var(--fontColorDefault);
    font-size: var(--fontSizeDefault);
}

    .sp_mentionsSelector_Root #progressContainer{
        position:absolute;
        bottom:1px;
        left:0;
        right:0;
        height:var(--paddingY);
    }

    .sp_mentionsSelector_Root > #container {
        position: relative;
        outline: 1px solid var(--tertiary);
    }
    .sp_mentionsSelector_Root #topContainer {
        padding: var(--paddingSmall);
        background-color: var(--tertiary);
        color: var(--tertiaryText);
        border-bottom:1px solid var(--secondary);
    }


    .sp_mentionsSelector_Root #currentTerm {
        margin: 0;
        /*margin: calc(-1 * var(--paddingSmallY)) calc(-1 * var(--paddingSmallX));*/
        padding: var(--paddingSmall);
        padding: 0;
        line-break: anywhere;
    }

    .sp_mentionsSelector_Root #resultContainer {
        position: relative;
        max-height: 10em;
        overflow-y: auto;
        overflow-x: clip;
        display: flex;
        flex-direction: column;
        gap: var(--paddingSmallY);
        background-color: var(--bg1);
       /* box-shadow: inset 0px 4px 8px -8px var(--dark);*/
        padding: var(--paddingSmallY);
    }
        .sp_mentionsSelector_Root #resultContainer > button {
            border: 0;
            width: 100%;
            text-align: left;
            padding: var(--paddingSmall);
            cursor: pointer;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
            .sp_mentionsSelector_Root #resultContainer > button > .label {
                display: block;
                font-weight: bold;
                line-break: anywhere;
            }
            .sp_mentionsSelector_Root #resultContainer > button > .secondaryLabel {
                font-size: 0.8em;
                display: block;
            }
    .sp_mentionsSelector_Root #resultContainer > button.selected {
        background-color:var(--primary);
        color:var(--primaryText);
    }

.tabulator-row.tabulator-selectable {
    transition-property: background-color;
    transition-duration: var(--mds-hover-transition-out);
}

    .tabulator-row.tabulator-selectable:hover {
        background-color: var(--mds-gray-transparent) !important;
        transition-duration: var(--mds-hover-transition-in);
    }

.tabulator-row.tabulator-selected {
    background-color: var(--mds-orange) !important;
    color: white !important;
}

.tabulator-row {
    border-bottom: 1px solid black !important;
    /*min-height: 40px !important;*/
    font-size: 15px !important;
}

.tabulator-cell.tabulator-editing {
    height: unset !important;
}

.tabulator-cell, .tabulator-col {
    border-right: none !important;
}

.tabulator .tabulator-tableHolder .tabulator-table {
    color: black;
}

.dark-theme .tabulator .tabulator-tableHolder .tabulator-table {
    color: var(--brightText);
    background-color: transparent;
}

.dark-theme .tabulator-row, .dark-theme .tabulator, .dark-theme .tabulator-row:nth-child(2n) {
    background-color: transparent;
}

.dark-theme .tabulator-editing input {
    background-color: var(--brightInput) !important;
    color: white !important;
}

.ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
#top_login_info img.profilePic, #login_info img.profilePic {
    position: absolute;
    top: -25%;
    left: -25%;
    right: 0;
    bottom: 0;
    width: 150%;
    height: 150%;
    pointer-events: none;
}

#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;
   /* outline: 2px solid var(--mds-gray);*/
}

img.circle, img.round {
    object-fit: cover;
    border-radius: 50%;
}
    .loginForm .profilePic img.profilePic {
        position: absolute;
        z-index: 5;
    }

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

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





.progressBar, .loadingBar {
    position: relative;
    --durationModifier: 0s;
}

    .progressBar::after,
    .loadingBar::after {
        content: '';
        position: absolute;
        border-radius: inherit;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        height: 100%;
        background-color: var(--progressBarColor, var(--complimentary));
        animation-name: progressBar;
        animation-duration: calc(2s + var(--durationModifier));
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
    }


@keyframes progressBar {
    0% {
        opacity: 1;
        width: 0;
    }

    60% {
        opacity: 1;
    }

    90% {
        opacity: 0;
        width: 100%;
    }

    100% {
        opacity: 0;
    }
}

@keyframes progressBarEx {
    0% {
        opacity: 0;
        right: 100%;
        left: 0;
        /*width:unset;*/
        /* brauchts nicht - in Chrome führts sogar zu Anzeigefehlern!*/
    }

    30% {
        left: 0;
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    60% {
        right: 0;
    }



    90% {
        left: 100%;
        opacity: 0;
    }

    100% {
    }
}