html{   
    margin:0;
    padding: 0;
    height: 100vh;
}
body {
    margin:0;
    padding: 0;
    font-family: Arial;
    background-color: #4d4d4d;    
    height: 100vh;
    /*webkit hack*/
    height: -webkit-fill-available;
}
#header {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    z-index: 1000;
    box-sizing: border-box;
    padding: 10px;
    background: #79a548;
    color: rgba(255,255,255,0.75);
    margin:0;
    height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#footer{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    height:10%;
    width:100%;
    z-index: 1000;
    box-sizing: border-box;
    padding: 10px;
    background: #79a548;
    /*color rgb(121, 165, 72)*/
}
div.header-bar{
    /*display:table;*/
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;    
    width:100%;
    box-sizing: border-box;
    overflow: hidden;
}
div.header-logo{    
    flex: 0 0 60px;    
    width:60px;
    vertical-align: middle;
}
.header-logo img{
    opacity: 0.75;
    height: 40px;
}
div.header-title {
    flex: 1 1 auto;
    font-size:2em;
    vertical-align: middle;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-wrap: nowrap;
}

div.header-mmenu-container {
    flex: 1 1 auto; 
    min-width: 80px;
    height:40px;
    overflow:hidden;
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end; 
    box-sizing: border-box;
    gap: 16px;
}

div.header-mmenu {   
    vertical-align: middle;
    text-align: right;     
    overflow: hidden;   
    white-space: nowrap;
    line-height: 40px;
}
div.header-mmenu a {   
    font-size: 25px;
    cursor: pointer;
    color:rgba(255,255,255,0.7);
    text-decoration: none;        
}
div.header-mmenu a:hover {  
    color:white;          
}

div.navmenu{
    margin:0;    
    display:table-cell;
    width:34px;
    text-align:center;
    vertical-align: middle;
}
img.navmenu, img.navmenu-logout, img.navmenu-dropdown {
    width:28px;
    height:28px;
    opacity: 0.7;
}
img.navmenu:hover{
    opacity: 1;
    background-color: #26823b;
    border-radius: 50%;
    border: 2px solid #26823b;
}
img.navmenu-logout:hover{
    opacity: 1;
    background-color: red;
    border-radius: 50%;
    border: 2px solid red;
}
img.navmenu-dropdown:hover{
    opacity: 1;
    /*background-color: #26823b;*/
}
img.navmenu-sel{
    width:28px;
    height:28px;
    opacity: 0.3;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
    text-decoration: none !important;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {   
    transition: max-height 0.2s linear;    
    background-color:#4d7558;
    min-width: 160px;
    max-width: 100vw;   
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1000;
    overflow-y: hidden;
    position: fixed;
    top:60px;
    right:0px;
    max-height:0px;
    display:block;
}
.dropdown-content-show {    
    /*transition: max-height 0.2s linear;*/    
    max-height:calc(100vh - 61px);    
}
/* Links inside the dropdown */
.dropdown-content a {
    color: rgba(255,255,255,0.7);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown-content hr{
    margin: 0;
    padding: 0;
    height:1px;
    border:none;
    background-color: rgba(255,255,255,0.4);
}
.dropdown-content div{
    font-family: monospace;
    padding: 4px;
    color: rgba(200,200,200, 0.7);
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    color: white;
    background-color: #326566;
}

#main {
    position:fixed;
    top:60px;
    left:0px;
    width:100%;
    z-index: 2;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    display: flex;   
    height: calc(100% - 60px);    
}

#main-container {
    z-index: 2;
    margin:0;
    padding: 0;
    flex: 1;
    height:100%;
    overflow: hidden;      
}
#nav-container {
    color:#4c7458;
    box-sizing: border-box;
    padding:10px 20px;
    margin:0;
    overflow: hidden;
    background-color: #b4d095;
    width:100%;
    height:40px;
    white-space: nowrap;
}
#page-container {
    z-index: 2;
    box-sizing: border-box;
    margin:0;
    flex:1;
    overflow: auto;
    background-color: white;
    height: calc(100% - 40px);
}
#start-page-container {
    z-index: 2;
    box-sizing: border-box;
    margin:0;
    overflow: auto;
    background-color: white;
    height: calc(100% - 40px);
}

#landing-image {
    min-height: 100vh;
    width: 100%;
    /*Das Bild gehört Peter Meyer*/
    background:url("../img/PMeyer_NW_LimkerStrang.JPG") no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}


#header-container {
  max-width: 80%;
  margin: 0 auto;
  text-align: justify;
  background-color: rgba(255, 255, 255, 0.7);
  color: black;
  padding: 15px;
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  position: relative;
}


#landing-main-text {
    padding: 0% 2% 0% 2%;
    box-sizing: border-box;
    flex-grow:1;
    overflow: auto;
}

#kachel-container{
    display: flex;
    flex-wrap: wrap;
    justify-content:space-around;
    width: 100%;
    padding: 0% 5% 0% 5%;
    margin: 0;
    box-sizing: border-box;
}
.kachel {
    flex:1 1 200px;
    margin: 0.5em 1em 0.5em 1em;
    text-align: center;
    padding: 0.8em;
    height: 1.5em;
    
    background-color:#005484;
    color:white;
    font-size:1.5rem;
    box-shadow: 6px 6px 10px 4px #9a9996;
}

#karten-button-container{
    display: flex;
    justify-content:space-around;
    width: 40%;
    min-height: 10vh;
    padding: 0% 5% 5% 5%;
    margin: 0;
    box-sizing: border-box;
}


#Footer{
    min-height: 40vh;
    width:100vw;
    /*background-color: #79a548;*/
    background-color: #00674A;
    color:white;
    padding: 2% 5% 0% 5%;
    box-sizing: border-box;
    flex-grow:1;
    overflow: auto;
    align-items: center; 
    display: flex; 
    flex-direction: column;
}

/*Menuleiste*/
.menu{
    font-size:1.25rem; 
    box-sizing: border-box; 
    text-decoration: none; 
    line-height:1.75rem;
}
.menu-list{
    list-style: none;
    box-sizing: border-box;
}
.menu-item{
    display:block; 
    padding: 1rem 1rem 1rem 0rem; 
    text-decoration: none;
    color:#4a4a4a;
}

/*Daschboard*/
#big-container{
    display:grid; 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: 1fr 1fr; 
    gap:20px; 
    margin: 0;
    min-height: 100vh;
    overflow: auto;
}

.small-container{
    display:flex; 
    flex-direction: column; 
    justify-content:center; 
    align-items: center; 
    padding: 20px; 
    /*background-color: #DCECDE; /*#f0f0f0;*/
    box-sizing: border-box;
    border-radius: 10px;
}

.chart-area{
    width:100%; 
    height:400px; 
    display:flex; 
    justify-content: center; 
    align-items: center;
    font-size: 18px;
    position: relative;
    border:solid #01549A 1px;
}

.chart-area:hover .chart-area-text{
    opacity:1;
}

.chart-area:hover .image{
    opacity:0;
}

.chart-area-text{
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-color: #01549A;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align:justify;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    font-size:0.8em;
}

/*Datenportal*/
.cell-Tabelle1_A1{ background-color:#afd095; border-top-width:NaNcm; border-top-style:solid; border-top-color:#00000a; border-left-width:NaNcm; border-left-style:solid; border-left-color:#00000a; border-bottom-width:NaNcm; border-bottom-style:solid; border-bottom-color:#00000a; border-right-width:NaNcm; border-right-style:solid; border-right-color:#00000a; padding-left:0.182cm; padding-right:0.191cm; padding-top:0.097cm; padding-bottom:0.097cm; }
.cell-Tabelle1_A2{ background-color:#ffffff; padding-left:0.182cm; padding-right:0.191cm; padding-top:0.097cm; padding-bottom:0.097cm; border-left-width:NaNcm; border-left-style:solid; border-left-color:#00000a; border-right-style:none; border-top-style:none; border-bottom-width:NaNcm; border-bottom-style:solid; border-bottom-color:#00000a; }
.cell-Tabelle1_A6{ background-color:#afd095; padding-left:0.182cm; padding-right:0.191cm; padding-top:0.097cm; padding-bottom:0.097cm; border-left-width:NaNcm; border-left-style:solid; border-left-color:#00000a; border-right-width:NaNcm; border-right-style:solid; border-right-color:#00000a; border-top-style:none; border-bottom-width:NaNcm; border-bottom-style:solid; border-bottom-color:#00000a; }
.cell-Tabelle1_B2{ background-color:#ffffff; padding-left:0.182cm; padding-right:0.191cm; padding-top:0.097cm; padding-bottom:0.097cm; border-left-width:NaNcm; border-left-style:solid; border-left-color:#00000a; border-right-width:NaNcm; border-right-style:solid; border-right-color:#00000a; border-top-style:none; border-bottom-width:NaNcm; border-bottom-style:solid; border-bottom-color:#00000a; }
.table-Tabelle2{ width:55vw; margin-left:0.314cm; margin-top:0cm; margin-bottom:0cm; margin-right:auto;writing-mode:horizontal-tb; direction:ltr;}
.cell-Tabelle2_A1{ background-color:#afd095; vertical-align:middle; padding-left:0.173cm; padding-right:0.191cm; padding-top:0.097cm; padding-bottom:0.097cm; border-left-width:NaNcm; border-left-style:solid; border-left-color:#000001; border-right-style:none; border-top-width:NaNcm; border-top-style:solid; border-top-color:#000001; border-bottom-width:NaNcm; border-bottom-style:solid; border-bottom-color:#000001; }
.cell-Tabelle2_A2{ background-color:transparent; vertical-align:middle; padding-left:0.173cm; padding-right:0.191cm; padding-top:0.097cm; padding-bottom:0.097cm; border-left-width:NaNcm; border-left-style:solid; border-left-color:#000001; border-right-style:none; border-top-style:none; border-bottom-width:NaNcm; border-bottom-style:solid; border-bottom-color:#000001; }
.cell-Tabelle2_B1{ background-color:#afd095; border-top-width:NaNcm; border-top-style:solid; border-top-color:#000001; border-left-width:NaNcm; border-left-style:solid; border-left-color:#000001; border-bottom-width:NaNcm; border-bottom-style:solid; border-bottom-color:#000001; border-right-width:NaNcm; border-right-style:solid; border-right-color:#000001; vertical-align:middle; padding-left:0.173cm; padding-right:0.191cm; padding-top:0.097cm; padding-bottom:0.097cm; }
.cell-Tabelle2_B2{ background-color:transparent; vertical-align:middle; padding-left:0.173cm; padding-right:0.191cm; padding-top:0.097cm; padding-bottom:0.097cm; border-left-width:NaNcm; border-left-style:solid; border-left-color:#000001; border-right-width:NaNcm; border-right-style:solid; border-right-color:#000001; border-top-style:none; border-bottom-width:NaNcm; border-bottom-style:solid; border-bottom-color:#000001; }
.cell-Tabelle2_B4{ background-color:transparent; padding-left:0.173cm; padding-right:0.191cm; padding-top:0.097cm; padding-bottom:0.097cm; border-left-width:NaNcm; border-left-style:solid; border-left-color:#000001; border-right-width:NaNcm; border-right-style:solid; border-right-color:#000001; border-top-style:none; border-bottom-width:NaNcm; border-bottom-style:solid; border-bottom-color:#000001; }
.cell-Tabelle2_B5{ background-color:transparent; padding-left:0.173cm; padding-right:0.191cm; padding-top:0.097cm; padding-bottom:0.097cm; border-left-width:NaNcm; border-left-style:solid; border-left-color:#000001; border-right-width:NaNcm; border-right-style:solid; border-right-color:#000001; border-top-style:none; border-bottom-width:NaNcm; border-bottom-style:solid; border-bottom-color:#000001; }
    

button.dialog, input.dialog[type=submit], input.dialog[type=button] {
    box-sizing: border-box !important;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    padding: 12px;
    margin: 8px 0 !important;
    border: none !important;
    cursor: pointer;
    font-size: 110%;
    text-decoration: none !important;
    background-color: #005456;
    color:white;
}
button.dialog:hover, input.dialog[type=submit]:hover, input.dialog[type=button]:hover {
    background-color: #25509d;
}
button.dialog:focus, input.dialog[type=submit]:focus, input.dialog[type=button]:focus {
    text-decoration: none !important;
    border: none !important;
}
button.dialog::-moz-focus-inner, input.dialog[type=submit]::-moz-focus-inner, input.dialog[type=button]::-moz-focus-inner {
    border: none !important;
}
button.dialog:disabled, input.dialog[type=submit]:disabled, input.dialog[type=button]:disabled {
    background-color: #404040 !important;
    color: gray !important;
    cursor: not-allowed;
}
button.dialog:disabled:hover, input.dialog[type=submit]:disabled:hover, input.dialog[type=button]:disabled:hover {
    background-color: #404040 !important;
}
.ok {
    background-color: #4CAF50 !important;
    color: white !important;
}
.ok:hover {
    background-color: #71c174 !important;
}
.cancel {
    background-color: #F44336 !important;
    color: white !important;
}
.cancel:hover {
    background-color: #f66055 !important;
}
input.dialog[type=text], input.dialog[type=password] {
    padding: 5px;
    margin-top: 5px;
    margin-bottom: 15px;
    width:100%;
    box-sizing: border-box;
}
div.dialog {
    position: absolute;
    top: 100px;
    left: calc(50vw - 512px);   
    background: #f8f9fa;
    padding:2em;
    width: 1024px;  
    max-height: calc(100% - 110px);  
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    box-sizing: border-box;
    overflow:auto;
    animation: fadeInAnimation ease 0.4s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

#loaderDiv {
    width:200px;
    margin:0 auto;
    display: none;
}
#errorMsg {
    color:red;
    margin-bottom: 10px;
}
#msgstack {
    /*let clicks go through to underlaying elements*/
    pointer-events: none;
    z-index: 100;
    position: fixed;
    right: 0;
    bottom: 0;
    width:400px;
    max-height: calc(100vh - 300px);
    min-height:300px;
    /*background-color: rgba(200,200,200,0.5);*/
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    flex-wrap: nowrap;
}
.stack-msg {
    pointer-events: auto;
    box-sizing: border-box;
    width:380px;
    max-height: 0;
    margin: 0;
    margin-bottom: 10px;
    margin-right: 20px;
    padding: 8px;
    background-color: #fff2e6;
    color: #804000;
    border:2px solid rgba(200,200,200,0.5);
    -webkit-transition: height 0.3s ease-in-out;
    -moz-transition: height 0.3s ease-in-out;
    -o-transition: height 0.3s ease-in-out;
    transition: max-height 0.3s ease-in-out;
    overflow-y: auto;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
button.stack-msg-closer {
    box-sizing: border-box !important;
    -webkit-appearance: none;   
    margin: 0 !important;
    border: none !important;
    cursor: pointer;
    text-decoration: none !important;   
    color:white;    
    float:right;   
    background: none;    
    width:22px;
    height:22px;
    line-height:16px;
    border-radius:50%;
    padding: 0;
    overflow: hidden;
    background-color: gray;
    text-align: center;
}

button.stack-msg-closer:hover {
    background-color: #2f769c;
}


div.dialogBackgroud {
    z-index: 1010;
    display: none;
    position: fixed;
    top: 0px;
    right:0px;
    width: 100vw;
    height: 100%;
    height: -webkit-fill-available;
    background-color: rgba(0,0,0,0.6);    
}
div.dialog {
    border-radius: 6px;
    width:80vw;
    margin-top: 40px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    background: white;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    max-height: calc(100% - 50px);
    overflow-y: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
div.dialogContent {
    flex-grow: 3;
    /*max-height: calc(100% - 200px);*/
    width:100%;
    overflow:auto;
    box-sizing: border-box;
    margin:0;
    padding:0;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                          supported by Chrome, Edge, Opera and Firefox */
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

div.tab-outer {
    overflow: hidden;
    height: 100%;
    margin:0;
    padding:5px;
    background: gray;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
div.tab-header {
    flex-shrink: 0;
    overflow: hidden;    
    flex-direction: row;
    flex-wrap: wrap;
    display: flex;
    gap: 0;
    /*background: white;*/
}
div.tab-header > div {
    font-size: 105%;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    /*border-right: 4px solid gray; 
    border-top: 4px solid gray;*/
    cursor: pointer;
    padding: 6px 12px;
    margin-top:1px;
    margin-right:4px;
    background: lightgray;
    /*background-image: linear-gradient(white, black);*/
}
div.tab-header > div:hover {
    text-decoration: underline;
}
div.tab-container {
    background: white;    
    overflow: hidden;
    flex-grow: 1;   
    box-sizing: border-box;
    padding:10px;
}
div.tab-container > div {
   max-height: 100%;
   height:100%;   
}

#side-nav {
    
}

@media only screen and (min-width:600px) and (max-width:1024px) /*, (max-height:800px)*/ {
    
    .dropdown-content {
        height:calc(100vh - 61px);
    }
    
    div.editDialog {
        width:90vw;
    }

    div.dialog {
        background: white;
        padding:2em;
        width: 100vw;
        top:60px;
        left:0px;       
        max-height: calc(100% - 60px);
        height:  calc(100% - 60px);
        box-shadow: none;
    }

    div.home-main{
        width:100%;
    }
    div.home-background{
        width:100%;
        height:100%;
        background-image: none;
    }

    #page-container{
        padding: 0px;
        background:white;        
    }
    
    #fade-out{
        display:none;
    }
    
    div.header-mmenu {
        display:none;
    }
}

@media only screen and (max-width: 599px) {
    
    #side-nav{
        display: none;
    }
    
    .dropdown-content {
        width:100vw;
    }
    
    div.editDialog {
        margin:0px;       
        width:100vw;
        height:100%;
        max-height:100%;
        border-radius: 0px;
        box-sizing: border-box;
    }

    div.dialog {
        background: white;
        padding:10px;
        width: 100vw;
        top:60px;
        left:0px;       
        max-height: calc(100% - 60px);
        height:  calc(100% - 60px);
        box-shadow: none;        
    }

    div.home-main {
        padding: 0 10px;
        width:100%;
    }
    div.home-background{
        width:100%;
        height:100%;
        background-image: none;
    }
    div.home-welcome-container {
        text-align: center;
        display:block;
    }

    a.modul{
        color:#519a62 !important;
        text-decoration: none !important;
        font-weight:bold !important;
        font-size: 1.2em !important;
    }

    #page-container{
        padding: 0px;
        background:white;        
    }

    #fade-out{
        display:none;
    }
    
    #show-hide-toolbar{        
        display:block;
    }    
    
    #sidebar{
        display:none;
    }
    
    span.show-hide-tb-space{
        width:15px;
        display:inline-block;
    }
    
    div.header-mmenu {
        display:none;
    }
    
    .kachel{
        flex: 1 1 100%;
        margin: 0.5em 0;
    }
    
    .spalten-layout {
        flex-direction: column;
        align-items: center;
      }

      .text-spalte, .bild-spalte {
        max-width: 90%;
      }
}