body {overflow-y:scroll;}
/* #login-box {position:absolute; top:20vw; left:20vw; width:50vw;} */
#login-box {margin:auto; width:50%; margin-top:10em;}
.relative-important {position:relative!important;}
.clear {clear:both;}
.liste {list-style-type: circle!important; padding-left:1em!important;}
.liste li {list-style-type: circle!important}
table ul {padding-left: 14px;}

td.js-cell-popupcontent div.popup-cellcontent {display:block; height:10em; overflow:hidden;}
.modal-size {height:62vh; overflow:scroll;} /* .modal hat in materialize eine höhe von 70% und ein top von 10% + dem modal-footer macht 62 bis 75 vh sinn */

table th input.js-column-filter {background:bisque;}
table th span{width:max-content; display:block;}
table th span.select{margin-bottom: 1em;}
.hidden {display:none;}


table.highlight thead {position: sticky; top:64px; background:#fff; box-shadow: inset -5px -2px 0px #ccc; z-index: 11;}
/*
table.highlight th {border-bottom: 4px solid #000; z-index:10;}
*/
/* .stickyhead tr th { border-bottom: 1px solid rgba(0, 0, 0, 0.12);} */

.custom-datalist-wrapper {
    position: relative;
    max-width: 300px;
}

input.custom-input {
    width: 100%;
    padding: 10px;
    font-size: 1rem;
    border: 2px solid #ccc;
    border-radius: 8px;
    outline: none;
}

.suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    background: white;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 150px;
    overflow-y: auto;
    display: none;
}

.suggestion-item {
    padding: 10px;
    cursor: pointer;
}

.suggestion-item:hover {
    background-color: #f0f0f0;
}
div#modal-edit-rs tr {
    height: 9em;
}

#modal-edit-rs #editTable tbody tr td input{
    position: relative;
    z-index: 2;
    border-bottom: 0;
}
#modal-edit-rs #editTable tbody tr td input:focus{
    box-shadow: none;
}
.btn-small.button-edit {
    margin-top:-5em;
    transition: margin-top 300ms ease-in-out;
    z-index: 1;
    position: relative;
    padding: 0;
    text-align: left;
    width: 9em;
    height:2em;
    line-height: 1;
}

/* Hover-/Selektionszustände */
table.js-selectable tbody tr.is-hover    { background:#d0efff!important; }
table.js-selectable tbody tr.is-selected { background:#c5e0ff!important; }

/* Kombination Hover + Selected */
table.js-selectable tbody tr.is-selected.is-hover { background: #aad0ff; }

/* Optional: Cursor-Hinweis */
table.js-selectable tbody tr { cursor: pointer; }


#editTable .hideinclone, #newTable .hideinclone {display:none;}
.button-edit span{}
.clear{clear:both;}
.select-btn{
    color:#555555; width: 24px;
    height: 24px;
    display: inline-block;
    transition: all 300ms ease;
}
/* .select-btn.cloud{display: block; margin:0 auto;} */
.svg-hover-icon * {
    transition: stroke 0.3s ease; /* Dauer und Art der Animation */
}
.svg-hover-icon:hover * {
    stroke: #ff781f;
}

#selection span{margin:0;}
#selection span.counter-bubble {border-radius:50%; background:#FF9800; padding:0 6px; margin:0 auto;}
#selection span.counter-bubble span {display:inline; cursor:help;}
/* #selection span.counter-rs{border-radius:50%; background:mediumblue; padding:0 6px; margin:0 auto; color:#fff; cursor:help;} */

.new-data span {
    display: block;
    float: left;
    margin-right: 1em;
}

.select-btn:hover, .select-btn:active, .select-btn:focus {
    color: #ff781f;
}
/* - rechieren, wofür das da war. Es hatte Folgen im Backend
main, footer {width:100%!important; float:left!important;}
*/