#overlay {
    position: fixed;
    top: 16px;
    left: 16px;
    bottom: 16px;
    right: 16px;
    z-index: 110;
    padding: 0px;
    margin: 0px;
    background-color: #e8e8e8;
    border-radius: 8px;
    transition: all 0.3s;
    font-family: sans-serif;
}



#overlay.arbeitet {
    filter: blur(5px);
    transform: scale(0.95);
    pointer-events: none;
}



#overlay .overlay_menu {
    background-color: #d28615;
    color: #fff;
    padding: 8px;
    border-radius: 8px 8px 0px 0px;
}



#overlay .overlay_menu_links {
    text-align: left;
    padding: 0px;
    margin: 0px;
    width: calc(50% - 5px);
    display: inline-block;
}



#overlay .overlay_menu_rechts {
    text-align: right;
    padding: 0px;
    margin: 0px;
    width: 50%;
    display: inline-block;
}



#overlay .overlay_menu .overlay_menu_knopf {
    background-color: #d28615;
    color: #fff;
    padding: 8px;
    margin: 4px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 20px;
    display: inline-block;
    transition: all 0.2s;
}



#overlay .overlay_menu .overlay_menu_knopf:hover {
    background-color: #e69316;
}



#overlay .overlay_menu .overlay_menu_knopf.overlay_zum_nav_knopf {
    display: none;
}



#overlay .overlay_nav {
    background-color: #fff;
    color: #151515;
    margin: 8px 0px 8px 8px;
    border-radius: 8px;
    overflow-y: scroll;
    overflow-x: hidden;
    height: calc(100% - 79px);
    display: inline-block;
    vertical-align: top;
    width: 265px;
    opacity: 1.0;
    position: relative;
    transition: all 0.2s;
}



#overlay .overlay_nav.oben {
    padding-top: 55px;
}



#overlay .overlay_inhalt {
    background-color: #f3f3f3;
    color: #151515;
    padding: 8px;
    margin: 8px;
    border-radius: 8px;
    overflow-y: scroll;
    overflow-x: hidden;
    height: calc(100% - 95px);
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 311px);
    opacity: 1.0;
    transition: all 0.2s;
}

table input, table select, table textarea, table .checkbox {
    margin-bottom: 0 !important;
}


#overlay .overlay_inhalt table {
    border-collapse: collapse;
}

#overlay .overlay_inhalt table tr {
    border-bottom: 1px solid #d6d6d6;
}

#overlay .overlay_nav .overlay_nav_eintrag {
    padding: 16px;
    border-top: 0px solid #7c7c7c;
    border-bottom: 1px solid #7c7c7c;
    cursor: pointer;
    background-color: #fff;
    color: #1a1a1a;
    background-position: center center;
    background-size: cover;
    transition: background-color 0.3s;
}



#overlay .overlay_nav .overlay_nav_eintrag.neu.oben {
    position: absolute;
    width: 100%;
    top: 0;
}



#overlay .overlay_nav .overlay_nav_eintrag span {
    vertical-align: middle;
}



#overlay .overlay_nav .overlay_nav_eintrag:hover {
    background-color: #fff4e4;
}



#overlay .overlay_nav .overlay_nav_eintrag.overlay_nav_dragbar {
    cursor: grab;
}



#overlay .overlay_nav .overlay_nav_eintrag.aktiv {
    background-color: #fff4e4;
}



#overlay .overlay_nav hr {
    margin: 32px 0px 0px 0px;
    border: none;
    border-bottom: 1px solid #7c7c7c;
}



#overlay .overlay_nav .overlay_nav_drop_bereich {
    padding: 0px;
    margin: 0px;
    transition: height 0.2s;
    height: 0px;
}



#overlay .overlay_nav.overlay_nav_drag_and_drop_laufend hr {
    border-bottom: 0px solid #7c7c7c;
}



#overlay .overlay_nav.overlay_nav_drag_and_drop_laufend .overlay_nav_eintrag {
    border-top: 1px solid #7c7c7c;
}



#overlay .overlay_nav.overlay_nav_drag_and_drop_laufend .overlay_nav_drop_bereich {
    height: 16px;
}



#overlay .spalte {
    display: inline-block;
    vertical-align: top;
    border-top: 8px solid #d28615;
    border-radius: 8px;
    padding: 8px;
    margin: 4px;
    background-color: #fff;
    min-width: 200px;
}

#overlay .viertel.spalte {
    width: calc(25% - 40px);
}

#overlay .halbe.spalte {
    width: calc(50% - 40px);
}

#overlay .ganze.spalte {
    width: calc(100% - 42px);
}

#overlay h2 {
    margin-top: 0px;
    margin-bottom: 16px;
}

#overlay .spalte h3 {
    margin-bottom: 16px;
}



@media (max-width: 1000px){
    
    #overlay {
        top: 2px;
        left: 2px;
        bottom: 2px;
        right: 2px;
    }
    
    #overlay .overlay_menu .overlay_menu_knopf.overlay_zum_nav_knopf {
        display: inline-block;
    }
    
    #overlay .overlay_nav {
        width: 0px;
        opacity: 0.0;
        margin: 8px 0px 8px 0px;
    }
    
    #overlay .overlay_nav.sichtbar {
        width: calc(100% - 30px);
        opacity: 1.0;
        padding: 8px;
        margin: 8px;
    }
    
    #overlay .overlay_inhalt {
        width: 0px;
        opacity: 0.0;
        padding: 8px 0px 8px 0px;
        margin: 8px 0px 8px 0px;
    }
    
    #overlay .overlay_inhalt.sichtbar {
        width: calc(100% - 37px);
        opacity: 1.0;
        padding: 8px;
        margin: 8px;
    }
    
    #overlay .viertel.spalte {
        width: calc(50% - 40px);
    }

    #overlay .halbe.spalte {
        width: calc(100% - 24px);
    }
    
}



@media (max-width: 500px){
    
    #overlay .viertel.spalte {
        width: calc(100% - 24px);
    }
    
}