/*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;
}
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.8);
    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;
}
/*rlapp specials - start*/
.main-color {
    color: #c81600;
}
div.rl-divider{
    border-bottom: 2px solid #c81600;
    height:0px;
    width:100%;
    margin-bottom: max(1em, 10px);
    box-sizing: border-box;
}
div.rlapp-page{
    background-color: white;
    padding: 20px;
    max-width:1000px;
    margin: 0 auto;
}
img.header-img{
    height:1.5em;
    vertical-align: middle;
}
#upload-form{
    padding: 1em;
    background-color:#ffe8e6;
    border-radius: 8px;
}

div.upload-fs-container{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-bottom:20px;
}
div.upload-fs-container > fieldset {
    flex-grow: 1;
    border: 1px solid #c81600; 
    border-radius: 8px;
}
div.upload-fs-container > fieldset > legend {
    color: #c81600;   
}
div.captcha-text {
    margin: 1em 0;
}
div.captcha-container {
    display:flex;
    gap:1em;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;    
}
img.loader-small{
    height:2em;
    vertical-align: middle;
}
progress.ttl {
    width:100%;
    color:#c81600;
    height:0.5em;
    border-radius: 0.25em;
    background: none;
    background-color:lightgray;
    border:none;        
}
progress.ttl::-moz-progress-bar {
    background: #c81600;
}
progress.ttl::-webkit-progress-value {
    background: #c81600;
}

/*rlapp specials - end*/
#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;
    padding: 20px;
    /*flex: 1;*/
    overflow: auto;
    background-color: #666666;
    height: calc(100% - 40px);
}
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: #c81600/*#2f769c*/;
    color:white;
    border-radius: 8px;
}
button.dialog:hover, input.dialog[type=submit]:hover, input.dialog[type=button]:hover {
    background-color: #b31500/*#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 */
}

textarea.process-log {
    padding:10px;  
    margin-bottom: max(1em, 10px);
    background-color: floralwhite;
    font-family: monospace;
    width:100%;
    box-sizing: border-box;
    height:20em;
}

@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 {
    
}
div.csv-desc{
    margin-bottom: 1em;
}
div.csv-desc > div{
    margin-top:0.2em;
    color:gray;
    font-size: 90%;
}

@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;
    }
}