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 */

#myTable_wrapper th{
    position:relative;
    overflow:hidden;
    padding-bottom:38px;
}

#myTable_wrapper th input.js-column-filter{
    position:absolute;
    left:4px;
    right:4px;
    bottom:4px;
    display:block;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0;
    padding:0 4px;
    box-sizing:border-box;
    background:bisque;
}

#myTable_wrapper th input.js-column-filter.hidden{
    display:none;
}

table th span{width:max-content; display:block;}
table th span.select{
    width:max-content;
}

#selection .dt-column-title{
    display:grid;
    grid-template-columns:repeat(2, 24px);
    gap:4px;
    width:max-content;
    margin-bottom:1em;
    align-items:center;
    justify-items:center;
}

#selection .dt-column-title > span.select,
#selection .dt-column-title > span.counter-bubble{
    grid-column:1 / -1;
}
.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;
}

/* Dezente Zebra-Streifen für bessere Lesbarkeit */
#myTable tbody tr:nth-child(even) {
    background:#fafafa;
}

#myTable tbody tr:nth-child(odd) {
    background:#ffffff;
}

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

.col-komponenten {background-color:lightblue;}
.col-wll {background-color:lightblue;}

/* 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;
}

#myTable_wrapper #selection {overflow:visible;}
#selection span{margin:0;}
#selection span.counter-bubble {
    justify-self:center;
    border-radius:50%;
    background:#FF9800;
    padding:0 6px;
    margin:0 auto;
}
#selection span.counter-bubble span {display:inline; cursor:help;}

/* DataTables-Pagination im Materialize-Layout neutralisieren */
#myTable_wrapper .dt-paging{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:2px;
    padding:0;
    background:transparent!important;
    box-shadow:none!important;
}

#myTable_wrapper .dt-paging nav{
    width:auto;
    height:auto;
    min-height:0;
    line-height:normal;
    padding:0;
    background:transparent!important;
    box-shadow:none!important;
}

#myTable_wrapper .dt-paging nav .dt-paging-button{
    min-width:36px;
    height:36px;
    margin:0;
    padding:0 10px!important;
    border:1px solid transparent!important;
    border-radius:2px!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#555!important;
    line-height:34px;
    text-align:center;
}

#myTable_wrapper .dt-paging nav .dt-paging-button:hover,
#myTable_wrapper .dt-paging nav .dt-paging-button:focus{
    border-color:#ddd!important;
    background:#f5f5f5!important;
    color:#222!important;
}

#myTable_wrapper .dt-paging nav .dt-paging-button.current,
#myTable_wrapper .dt-paging nav .dt-paging-button.current:hover{
    border-color:#f57c00!important;
    background:#f57c00!important;
    color:#fff!important;
}

#myTable_wrapper .dt-paging nav .dt-paging-button.disabled,
#myTable_wrapper .dt-paging nav .dt-paging-button.disabled:hover{
    border-color:transparent!important;
    background:transparent!important;
    color:#aaa!important;
    cursor:default;
}

#myTable_wrapper .dt-paging nav .ellipsis{
    display:inline-block;
    min-width:24px;
    padding:0 4px;
    color:#555!important;
    line-height:36px;
    text-align:center;
}
/* #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;}
*/

.hidden-important {
    display:none!important;
}

.komponentensuchfeld {
    display: block;
    width: 40vw!important;
    height: 70px!important;
    margin: 0 auto!important;
    margin-bottom: 40px!important;
    text-align:center;
}

#js-componentlist {
    width: 674px;
    margin:0 auto;
}

#js-componentlist li [type="checkbox"] + span:not(.lever)::before {
    border:1px solid #fff;
}
#js-componentlist li [type="checkbox"]:checked + span:not(.lever)::before{
    border-right:2px solid #fff !important;
    border-bottom:2px solid #fff !important;
    border-top:0 !important;
    border-left:0 !important;
}

#js-componentlist li label{
    color:#fff;
}

.js-delete-entry{
    background:none;
    border:0;
    padding:0;
    margin:0;
    width:24px;
    height:24px;
    line-height:24px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-shadow:none;
    min-width:0;
}

.js-delete-entry i{
    color:#fff;
    font-size:18px;
    line-height:1;
}

.component-check-card{
    width:32em;
    max-width:90vw;
    margin:0 auto 2em auto;
    background:#fff;
    color:#333;
    border:1px solid #ddd;
    border-radius:6px;
    overflow:hidden;
    box-shadow:0 1px 4px rgba(0,0,0,0.12);
    text-align:left;
}

.component-check-row{
    display:grid;
    grid-template-columns: 11em 1fr 2.4em;
    align-items:center;
    min-height:2.6em;
    border-bottom:1px solid #eee;
}

.component-check-row:last-child{
    border-bottom:0;
}

.component-check-label,
.component-check-value,
.component-check-status{
    padding:0.55em 0.75em;
}

.component-check-label{
    font-weight:600;
    background:#f7f7f7;
    color:#555;
    height:100%;
    display:flex;
    align-items:center;
}

.component-check-value{
    word-break:break-word;
}

.component-check-status{
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
}

.component-check-status.is-ok::before,
.component-check-status.is-error::before{
    font-family:"Material Icons";
    font-size:20px;
    line-height:1;
}

.component-check-status.is-ok::before{
    content:"check_circle";
    color:#2e7d32;
}

.component-check-status.is-error::before{
    content:"error";
    color:#c62828;
}


@media only screen and (max-width:600px){
    .component-check-row{
        grid-template-columns: 1fr 2.4em;
    }

    .component-check-label{
        grid-column:1 / 3;
        min-height:2.2em;
    }
}