﻿/* moreCore: Symbol für ungültig ausgefüllte Controls */
/*.moreCore_ValidationMsgError{
    color: var(--warning);
    display:flex;
    flex-direction:column;
    justify-content:center;*/ /* vertikal zentrieren*/
    /*align-items: center;
}*/
/*    .moreCore_ValidationMsgError::before {
        content: '\f06a';
        font-family:"FontAwesome";
        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(--paddingXSmall) 0 0;
}*/

.moreCore_ErrorMsgNode {
    display: inline-block;
}
/* NAVIGATION & SIDEBAR */
.w3-bar-item.mds-button-base::before {
    content: "\f105 "; /* caret right*/
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    opacity: 0;
    margin-left: -0.7ch;
    margin-right: 0.8ch;
    transition: opacity var(--mds-hover-transition-out), margin-left var(--mds-hover-transition-out);
}

.w3-bar-item.mds-button-base{
    position:relative;
}

    .w3-bar-item.mds-button-base.noCaret:hover::before{
        opacity:0;
    }

    .w3-bar-item.mds-button-base:hover::before {
        transition: opacity var(--mds-hover-transition-in), margin-left var(--mds-hover-transition-out);
        opacity: 0.9;
        margin-left: 0;
        margin-right: 0.8ch;
    }

.w3-bar-item .sidebarLinkIcon {
    opacity: 0;
    transition: opacity var(--mds-hover-transition-out), left var(--mds-hover-transition-out);
    margin-left: 1ch;
    position: absolute;
    left: -1ch;
    top: 50%;
    transform: translateY(-50%);
}

.w3-bar-item.mds-button-base:hover .sidebarLinkIcon {
    opacity: 0.8;
    left:-0.3ch;
}

/* Startnavigation */
.NavigationTile > div {
    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;
}

.NavigationTile > div:hover {
    outline: 2px solid var(--dark);
    /*transform: scale(1.05);*/ /* irgendwie bissl too much... */
    transform: translate(-0.2em, -0.2em);
}

.NavigationTile .mds-hover-bright {
    position:relative;
}

.NavigationTile .mds-hover-bright::after { /* erweitern um einen drop-shadow*/
    box-shadow: 0.2em 0.2em 0.8em 0 var(--dark);
    transition: opacity var(--mds-hover-transition-out);
    opacity: 0;
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
}

.NavigationTile .mds-hover-bright:hover::after { /* erweitern um einen drop-shadow*/
    opacity: 1;
}


.NavigationTile i {
    transition: transform var(--mds-hover-transition-out) ease-out;
}

.NavigationTile > div:hover i {
    transform: scale(1.2);
}

/* ================= */

/* GENERIC DIALOG */
.GenericDialog .w3-modal-content{
    /*border-radius: var(--round);*/
}

/* FILTERPANEL */
.sectionBG .filterPanel:not(:last-child) {
    border-bottom: 1px solid var(--tertiary);
}

/* FILETRANSFER / FILEUPLOAD */
.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::after {
    content: ""; /*check*/
    font-family: "Font Awesome 5 Free";
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    pointer-events: none;
    user-select: none;
}
.Control_FileTransfer_Uploader .progressStatus.uploadERROR::after {
    content: "\f00d"; /*times*/
}
.Control_FileTransfer_Uploader .progressStatus.uploadOK::after {
    content: "\f00c"; /*check*/
}

/* HINTBOX */
.hintbox {
    position: relative;
    display: inline-block;
    width: 100%;
}

.hintbox-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;
}
    .hintbox-items div {
        padding: 10px;
        cursor: pointer;
        background-color: #fff;
        border-bottom: 1px solid var(--mds-light-gray);
        color: black;
    }
    .hintbox-items div:hover {
        background-color:var(--mds-gray-transparent) ;
    }
.hintbox-active {
    background-color: var(--primary)!important;
    color: var(--primaryText)!important;
}

/* SELECTBOX */


.selectbox {
    position: relative;
    display: inline-block;
    width: 100%;
}

.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;
}

/* CHECKBOX */
.moreCoreCheckBox {

}


.moreCoreCheckBox .checkboxNode {
    padding-right: var(--paddingSmall);
    width: 1.1em;
    /*display: flex;*/
}

.moreCoreCheckBox .label {
    padding-left:var(--paddingX);
}


/*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-content: center;
}
.DateTimeInput_DateInputContainer {
    margin-right: 1em;
    width: 100%;

}
.DateTimeInput_DateInput{

}
.DateTimeInput_TimeInputContainer{
    width: 120px;
}
.DateTimeInput_TimeInput{

}
/* ----------------- moreCore/UI/DateTimeInput ------------------------------END */

/* ----------------- moreCore/UI/CheckBox ------------------------------START */
.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;*/
    cursor: pointer;
    align-self:center;
}

/* native styles ------------------- end*/
/* default custom moreCore Styles ----start*/

.moreCoreCheckBox .inputContainer:not(.custom) input {
    height: 1.55em;
    width: 1.55em;
    margin-right: 0.4em;
}

.moreCoreCheckBox .inputContainer.custom input {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    display: block;
    visibility: hidden;
    cursor: pointer;
    position: relative;
}

    .moreCoreCheckBox .inputContainer.custom input::before {
        visibility: visible;
    }

.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;
        cursor: pointer;
        display: inline-block;
        font-size: 1em;
        position: relative;
    }


.moreCoreCheckBox {
    --moreCoreCheckBox_customContent_checked: '\f00c';
    --moreCoreCheckBox_customBorderColor_checked: var(--dark);
    --moreCoreCheckBox_customColor_checked: var(--dark);
    --moreCoreCheckBox_customBgColor_checked: "";
    --moreCoreCheckBox_customContent_unchecked: '';
    --moreCoreCheckBox_customBorderColor_unchecked: var(--dark);
    --moreCoreCheckBox_customColor_unchecked: var(--dark);
    --moreCoreCheckBox_customBgColor_unchecked: "";
    --moreCoreCheckBox_customContent_tristate: '\f069';
    --moreCoreCheckBox_customBorderColor_tristate: var(--dark);
    --moreCoreCheckBox_customColor_tristate: var(--dark);
    --moreCoreCheckBox_customBgColor_tristate: '';
    /*---toggle-style-----*/
    --moreCoreCheckBox_toggleStyleContent_on: "\f205";
    --moreCoreCheckBox_toggleStyleColor_on: var(--dark);
    --moreCoreCheckBox_toggleStyleContent_off: "\f204";
    --moreCoreCheckBox_toggleStyleColor_off: var(--medium);
}

/* Pseudoelement mit dem eigentlichen Icon */
    .moreCoreCheckBox .inputContainer.custom input::before {
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        font-family: FontAwesome;
        border: 1px solid black;
        margin-right: 0.4em;
        content: '';
        display: inline-block;
        height: 1.55em;
        width: 1.55em;
        line-height: 1.4em;
        text-align: center;
        vertical-align: bottom;
    }


    .moreCoreCheckBox .inputContainer.checked input::before {
        content: var(--moreCoreCheckBox_customContent_checked);
        border-color: var(--moreCoreCheckBox_customBorderColor_checked);
        border-width: 2px;
        color: var(--moreCoreCheckBox_customColor_checked);
        background-color: var(--moreCoreCheckBox_customBgColor_checked);
    }

    .moreCoreCheckBox .inputContainer.unchecked input::before {
        content: var(--moreCoreCheckBox_customContent_unchecked);
        border-color: var(--moreCoreCheckBox_customBorderColor_unchecked);
        border-width: 1px;
        color: var(--moreCoreCheckBox_customColor_unchecked);
        background-color: var(--moreCoreCheckBox_customBgColor_unchecked);
    }
    .moreCoreCheckBox .inputContainer.tristate input::before {
        content: var(--moreCoreCheckBox_customContent_tristate); /*asterisk*/
        border-width: 2px;
        border-color: var(--moreCoreCheckBox_customBorderColor_tristate);
        color: var(--moreCoreCheckBox_customColor_tristate);
        background-color: var(--moreCoreCheckBox_customBgColor_tristate);
    }



    .moreCoreCheckBox .inputContainer.toggleStyle_on input::before {
        content: var(--moreCoreCheckBox_toggleStyleContent_on);
        border-color: transparent;
        border: 0;
        color: var(--moreCoreCheckBox_toggleStyleColor_on);
        background-color: transparent;
        font-size: 1.4em;
        margin-top:1px; /* wirkt sonst einfach nicht mittig, obwohl es korrekt ausgerichtet wäre */
    }

    .moreCoreCheckBox .inputContainer.toggleStyle_off input::before {
        content: var(--moreCoreCheckBox_toggleStyleContent_off);
        border-color: transparent;
        border: 0;
        color: var(--moreCoreCheckBox_toggleStyleColor_off);
        background-color: transparent;
        font-size: 1.4em;
        margin-top: 1px; /* wirkt sonst einfach nicht mittig, obwohl es korrekt ausgerichtet wäre */
    }

    .moreCoreCheckBox .inputContainer.disabled label {
        color: var(--medium);
        cursor: not-allowed;
        /*pointer-events: none;*/ /* Hinweis: damit geht der custom cursor auch nicht mehr */
    }

    .moreCoreCheckBox .inputContainer.disabled input::before {
        color: var(--medium);
        border-color: var(--medium);
        border-width: 1px;
    }



/* default custom moreCore Styles ----end*/

/* ----------------- moreCore/UI/CheckBox ------------------------------END */

/* ----------------- moreCore/UI/RadioGroup ------------------------------START */
.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*/
}
.moreCoreRadiogroup_input {
    /*always set*/
}
.moreCoreRadiogroup_singleInputContainer {
}
.moreCoreRadiogroup_inputLabel {
    /*always set*/
    margin-left: 0.5em;
    margin-right: 1.3em;
}

.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: FontAwesome;
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    color: var(--moreCoreRadiogroup_borderColor_default);
    text-transform: none !important;
    content: '\f1db';
    height: 24px;
    width: 24px;
    line-height: 24px;
    position: absolute;
    text-align: center;
    left: 0;
    top: 0;
}

.moreCoreRadiogroup_customSelected::before {
    font-weight: normal;
    content: var(--moreCoreRadiogroup_customContent_selected);
    color: var(--moreCoreRadiogroup_customColor_selected);
}

.moreCoreRadiogroup_customInput_disabled::before {
    color: var(--moreCoreRadiogroup_customColor_disabled);
    cursor: not-allowed;
}
.moreCoreRadiogroup_customInputLabel_disabled {
    color: var(--moreCoreRadiogroup_customColor_disabled);
}

/* ----------------- moreCore/UI/RadioGroup ------------------------------END */

/*------------------------number input ----------------------------------START*/
.numberInputContainer {
    align-items: center;
    width: 100%;
}

/*------------------------number input ----------------------------------END*/


/*------------------ moreCore staticTable -------------------------------- START*/
.moreCore_staticTable_th,
.staticTable th.sticky {
    position: sticky;
    z-index: 2;
}

.staticTable {
    user-select: text;
    --rowColor: var(--mediumTransparent);
    --colBG: var(--transparent);
    --colTXT: unset;
    --borderOffsetX: 0px;
    --borderOffsetY: 0px;
    --borderGrowth: 0px;
}

    .staticTable tr {
        border-bottom: 1px solid;
    }

    .staticTable .topRow {
        border-top: 5px solid var(--secondary);
    }

    .staticTable tr td {
        background-color: var(--colBG);
        color: var(--colTXT);
    }

    .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 {
        --colBG: var(--rowColor);
    }

        /* bei bordered wird die Hintergrundfarbe stattdessen als "Rahmen" dargestellt */
        .staticTable tr.bordered td {
            background-color: unset;
            color: unset;
            box-shadow: inset var(--borderOffsetX) var(--borderOffsetY) 0 var(--borderGrowth) var(--colBG);
            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);
    }

    .staticTable th.sticky {
    }

    .staticTable td.clickable {
        cursor: pointer;
        /*position:relative;*/
    }


        .staticTable td.clickable::before {
        }

        .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 {
            box-shadow: 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);
    }

    .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);
    }
}

/* FINDERBASE, FINDERVIEWBASE */

.finderPaging {
    margin: var(--w3PaddingY);
    padding: var(--w3PaddingY);
}



    .finderPaging div[data-dojo-attach-point=pagingContainer] {
        flex: 1;
        padding: var(--w3PaddingY);
    }

    .finderPaging div[data-dojo-attach-point=reloadContainer] {
        padding: var(--w3PaddingY);
    }

        .finderPaging div[data-dojo-attach-point=reloadContainer] button[data-dojo-attach-point=btnReloadPage] {
            background-color: var(--secondary);
            color: var(--secondaryText);
            margin: var(--w3PaddingY);
        }

    .finderPaging button.pagingButton {
        border: 1px solid var(--secondary);
        background-color: var(--tertiary);
        color: var(--tertiaryText);
        margin: 2px;
        border-radius: var(--round);
    }

        .finderPaging button.pagingButton.selected {
            background-color: var(--primary);
            border-color: var(--primary);
            color: var(--primaryText);
            pointer-events: none;
            font-weight: bold;
        }

    .finderPaging[data-dojo-attach-point=bottomPagingSection] {
        justify-content: center;
        display: flex;
        flex-flow: row;
        align-content: center;
    }



@media screen and (max-width: 900px) {
    .responsiveTable table.staticTable {
        table-layout: auto;
    }

        .responsiveTable table.staticTable thead {
            border: none;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: 0px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
        }

        .responsiveTable table.staticTable tr {
            border-bottom: 1px solid var(--tertiary);
            border-top: 2px solid var(--tertiary);
            display: block;
            margin-bottom: 6px;
        }

        .responsiveTable table.staticTable td {
            border-bottom: 1px solid var(--tertiary);
            display: block;
            text-align: right;
            width: 100% !important;
        }

            .responsiveTable table.staticTable td::before {
                content: attr(data-label);
                float: left;
                color: var(--tertiary);
                font-size-adjust: 0.4;
            }
}
/*------------------ moreCore staticTable -------------------------------- END*/
/* FILEDASHBOARD */
/*.dashboardTile .filesSection h4::after {
    content:var(--row-count);
    margin-right:0.4em;
}
*/

.fileDashboardRoot .tilesContainer {
}

    .fileDashboardRoot .tilesContainer .dashboardTileOuter {
        display: inline-block;
        /*margin-left:var(--paddingX);*/
        /*border: var(--paddingY) solid var(--transparent);*/ /* ein bisschen ein gap faken...*/
        padding-right: var(--paddingXSmall);
        padding-bottom: var(--paddingXSmall);
    }

    .fileDashboardRoot .tilesContainer .dashboardTile.innerContent {
        padding-right: var(--paddingX);
        padding-left: var(--paddingX);
        height: 100%;
    }

.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;
    padding: var(--paddingSmall);
    width: 100%;
    /* margin-top: var(--paddingY);*/
    /*margin-bottom: var(--paddingY);*/
}

.dashboardTile > .description {
    /*color:red;*/
    margin-bottom: 0.5em;
}

.dashboardTile > .heading {
    /*color:blue;*/
}

.dashboardTile table th {
    border-bottom: 1px solid var(--tertiary);
    padding: var(--paddingSmall);
}

.dashboardTile table tr:not([data-row-type=secondary]) {
    border-top: 1px solid var(--tertiary);
}

.dashboardTile table tr.new {
    position: relative;
}

    .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: "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;
    }

    .dashboardTile table tr.downloadable .colDlInfo::after {
        content: '\f56d';
        font-family: "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: 0s;
        opacity: 1;
    }

    .dashboardTile table tr.downloadable:hover {
        /*background-color: var(--darkTransparent);*/
    }

.dashboardTile table td .colTitle {
    font-weight: bold;
    width: 100%;
}

.dashboardTile table td .colDescription {
    font-size: 0.9em;
    padding-top: 0;
}

.dashboardTile table td {
    padding: var(--paddingSmall);
}

.dashboardTile .filtersection, .dashboardTile .filesSection {
    padding: var(--padding);
    /*padding-bottom:0;*/
    margin-top: var(--paddingY);
    border: 1px solid var(--tertiary);
    margin-bottom: var(--paddingY);
    border-radius: var(--round);
    background-color: var(--brightTransparent);
    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);
}


/*-------------------------Occurrence----------------------------------------*/
.occurrenceFormRoot {
    min-height: 25em;
    user-select: none;
}

    .occurrenceFormRoot .searchSelect_groupLabel {
        font-weight: bold;
    }

        .occurrenceFormRoot .searchSelect_groupLabel hr {
            border-color: var(--secondary);
        }

    .occurrenceFormRoot .propertiesTable {
        width: 100%;
    }

    .occurrenceFormRoot .OccurrenceForm_CommentContainer {
        /*margin-bottom: 32px;*/ /* warum? */
    }

    .occurrenceFormRoot .propertiesTable {
        border-collapse: collapse;
        font-size: 0.9em;
        --secondaryBorderColors: var(--tertiary);
        --mainBorderColors: var(--secondary);
        border-top: 1px solid var(--secondaryBorderColors);
    }

        .occurrenceFormRoot .propertiesTable thead {
            font-weight: bold;
            font-size: 1.2em;
        }

            .occurrenceFormRoot .propertiesTable thead th,
            .occurrenceFormRoot .propertiesTable thead td {
                border-bottom: 1px solid var(--mainBorderColors);
            }

        .occurrenceFormRoot .propertiesTable tr.propRow td {
            padding: var(--w3PaddingSmall);
            border-color: var(--secondaryBorderColors);
            border-style: solid;
            border-width: 0px;
        }

            .occurrenceFormRoot .propertiesTable tr.propRow td:first-child {
                border-left-width: 1px;
            }

            .occurrenceFormRoot .propertiesTable tr.propRow td:last-child {
                border-right-width: 1px;
            }

        .occurrenceFormRoot .propertiesTable tr.mandatoryMissing {
            /*outline: 2px solid var(--warning);*/
            /*outline-offset: -1px;*/
            color: var(--warning);
            background-color: var(--w3PaleRed);
            box-shadow: inset 4px -2px 0px 0px var(--warning);
        }

        .occurrenceFormRoot .propertiesTable tr.ping {
            background-color: unset;
        }

        .occurrenceFormRoot .propertiesTable tr.pong:not(.mandatoryMissing) {
            background-color: var(--secondaryThemeL4);
        }

        .occurrenceFormRoot .propertiesTable td.helptext {
            padding: var(--paddingSmall);
            opacity: 1;
            color: var(--secondaryThemeD2);
            font-style: italic;
            font-size: 0.9em;
        }

        .occurrenceFormRoot .propertiesTable tr.rowBottom td {
            border-bottom: 1px solid var(--secondaryBorderColors);
        }

        .occurrenceFormRoot .propertiesTable tr.mandatoryMissing.rowBottom td {
            border-color: var(--warning);
        }

        .occurrenceFormRoot .propertiesTable td.helptext span::before {
            content: '\f05a';
            font-family: "Font Awesome 5 Free";
            margin-right: 0.4em;
            font-weight: bold;
            font-style: normal;
        }

/* MULTISELECT */
.multiSelect_root {
}

    .multiSelect_root .item {
        flex-wrap: nowrap;
        max-width: 400px;
        text-overflow: ellipsis;
        overflow: hidden;
    }