@charset "utf-8";



#popup {
    background-color: #f8f8f8;
    display: inline-block;
    position: absolute;
    width: 300px;
    z-index: 160;
    max-height: calc(100% - 4px);
    overflow-y: auto;
    box-shadow: rgba(0,0,0,0.4) 2px 2px 15px;
    border-radius: 8px;
    transition: all 0.2s;
}

#popup .titel {
    background-color: #488925;
    color: #fff;
    padding: 16px;
    margin-top: 0px;
}

#popup .titel .xknopf {
    float: right;
    width: 16px;
    cursor: pointer;
    opacity: 0.8;
}

#popup .titel .xknopf:hover {
    opacity: 1.0;
}

#popup .titel input {
    width: calc(100% - 16px);
    background-color: #488925;
    color: #fff;
    border: 1px solid #69c637;
}

#popup .popupbereich {
    padding: 8px;
    text-align: center;
    border-bottom: 1px dashed #c1c1c1;
}

#popup .popupbereich.links {
    text-align: left;
}

#popup .nurbildknopf {
    border: 1px solid #dbdbdb;
    padding: 2px;
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
}

#popup .nurbildknopf:hover {
    border: 1px solid #488925;   
}

#popup .nurbildknopf.auswahl {
    border: 1px solid #488925;    
}

#popup .nurbildknopf img {
    width: 32px;
}


    
#benachrichtigung_parent {
    width: 100%;
    top: 85%;
    text-align: center;
    position: absolute;
    z-index: 120;
}    


#benachrichtigung {
    background-color: #f8fff5;
    border: 2px solid #489816;
    color: #247a42;
    display: none;
    padding: 16px;
    font-weight: bold;
    text-align: left;
    box-shadow: 0px 3px 12px 0px rgb(0 0 0 / 45%);
    border-radius: 4px;
}   




#overlay {
    background: #fbfbfb;
    width: 40%;
    min-width: 300px;
    padding: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    box-shadow: 12px 0px 16px rgba(0, 0, 0, 0.3);
    z-index: 101;
}   

@media screen and (max-width: 600px), screen and (max-height: 900px){
    #overlay {
        margin-left: 44px;
    }
}   

#overlay .overlaytitel {
    background-color: #488925;
    color: #fff;
    padding: 16px;
    margin: 0px;
    font-size: 16px;
}   

#overlay .overlaytitel .xknopf {
    float: right;
    width: 16px;
    cursor: pointer;
}   

#overlay .overlaybereich {
    padding: 16px;
}