* {box-sizing: border-box}

body{
    position: absolute;
    left:0px;
    margin: 0px;
    width:100%;
    height:100%;
    font-family: 'Segoe UI';
    background: black;
    overflow-y:hidden;
}

#overlay{
    display:none;
    background-color: white;
    opacity: 0.8;
    height: 30%;
    width: 30%;
    z-index: 100;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);    
    border: 5px solid mediumpurple; 
}

#overlay div{
    position: relative;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

#overlay img{
    display:block;
    position: relative;
    left:50%;
    transform:translate(-50%,0);
    margin-bottom: 15px;
}

header{
    background-color:black;
    position: relative;
    top:0px;
    left:0px;
    min-height: 150px;
    height:13%;
    width:100%;
    z-index: 100;
}

header img{
    height:80px;
    filter:drop-shadow(2px 2px 2px rgba(255,255,255,0.5))
}

header table { position: relative; float: right; top:50%; transform: translate(0,-50%); color:white;}

header a{position: absolute;top:50%; transform: translate(0,-50%);}

header h1{
    display: inline;
    position: relative;
    top:-15px;
    left:30px;
    font-family:'Segoe UI Light';
    text-decoration: none!important;
    color:purple!important;
}

header div{
    margin:0px;
    padding: 0 15px;
    position: relative;
    height:100%;
}

#form{
    color:white;
    background-color: transparent;
    position: relative;
    height:auto;
    z-index:100;
    padding: 0px 10px;
    padding-bottom: 0px;
    margin:0px;
}

#form span{ color: white;}

#form input[type=text]{    
    width:100%;
    padding:10px;
    color:white;
    background:black;
    border: 1px solid rgba(255,255,255, 0.5);
    font-weight: 600;
}

#form input[type=submit]{ float:right; }

#sidebar { width:10%; position: relative!important; float: left; min-width: 250px; border-right: 1px solid mediumpurple; overflow-y: scroll;}
#tabPanel{ height:100%; color:white; background:black; display: flex; padding:50px; }
.w3-selected { color:white; font-weight: 600; background: mediumpurple!important; }

#content{
    position: absolute;
    height: 100%;
    top:0px;
    padding-top: 200px;
    width:100%;
}

#tabPanel p, #tabPanel span, #tabPanel h2{ color: white; }

#tabPanel img{
    height:200px;
    width:200px;
}

#tabPanel input[type=text]{color:white;background: black;border:none; border-bottom: 1px solid white}
.button {display:inline-block; background: black; color:white; border: 1px solid white; padding:5px; }
.button:hover{background:white;color:black;}


#LoadingScreen{
    display: none;
    position: absolute;
    top:-21%;
    width:100%;
    height: 125.5%;
    background-color: rgba(0,0,0,0.5);
    text-align: center;
}

#LoadingScreen div{
    width:15%;
    display: none;
    top:50%;
    transform: translate(-50%,0);
    position: relative;
}

#LoadingScreen p{
    color:white;
}

/* ************************************SIDEBAR *******************

/* Style the tab 
.sidebar {
    left:0px;
    position: relative;
    float: left;  
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    width: 30%;
    max-width: 300px;
    height: 100%;
}

/* Style the buttons inside the tab 
.sidebar button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover 
.sidebar button:hover {
  background-color: #ddd;
}

/* Create an active/current "tab button" class 
.sidebar button.active {
  background-color: #ccc;
}

/* Style the tab content 
.tabcontent {
  float: left;
  padding: 30px;
  border: 1px solid #ccc;
  width: 70%;
  border-left: none;
  height: 100%;
}

/* /////////////////////// LOGIN ///////////////////////////////////*/
#loginErklär{ font-size: 0.7em; margin-bottom:15px; color:mediumpurple; display:inline-block; -moz-user-select: none; -webkit-user-select: none;}
#loginMail{ height:2.5em; width:12%; border:none; background:mediumpurple; padding:10px; color:white; font-weight: 600;}
#loginPass{ height:2.5em; width:12%; border:rgba(0, 0, 0, 0.1); position: relative; top:1px; background:mediumpurple; padding:10px; color:white;}
#loginPassVergess { text-decoration: none; color:mediumpurple; position: relative; top:15px; font-size: 0.7em; }
#loginDataProtection{ color:mediumpurple; text-decoration: none; font-size:0.7em; position:absolute;left:50%;bottom:20px;transform: translate(-50%,0) }

.w3-sidebar{
    height:100%;
    width:200px;
    background-color:#fff;
    position:fixed!important;
    z-index:1;
    overflow:auto
}
.w3-bar-block .w3-dropdown-hover,.w3-bar-block .w3-dropdown-click{ width:100% }
.w3-bar-block .w3-dropdown-hover .w3-dropdown-content,.w3-bar-block .w3-dropdown-click .w3-dropdown-content{ min-width:100% }
.w3-bar-block .w3-dropdown-hover .button,.w3-bar-block .w3-dropdown-click .button{ width:100%; text-align:left; padding:8px 16px }
.w3-bar-block .w3-bar-item{
    width:100%;
    display:block;
    padding:8px 16px;
    text-align:left;
    border:none;
    white-space:normal;
    float:none;
    outline:0;
    word-wrap: anywhere;
    word-break: break-all;
}
.w3-bar-block.w3-center .w3-bar-item { text-align:center }
.w3-bar .w3-bar-item{
    padding:8px 16px;
    float:left;
    width:auto;
    border:none;
    display:block;
    outline:0
}
.w3-black,.w3-hover-black:hover{ color:#fff!important; background-color:#000!important }
.w3-card { box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) }
.w3-hover-shadow:hover { box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19) }
.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before, .w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{
    content:""; display:table; clear:both }
.w3-container,.w3-panel{ padding:0.01em 16px }

.w3-animate-opacity { animation:opac 0.8s }
@keyframes opac { from { opacity:0 } to { opacity:1 } }

.w3-button{
    border:none;
    display:inline-block;
    padding:8px 16px;
    vertical-align:middle;
    overflow:hidden;
    text-decoration:none;
    color:inherit;
    background-color:inherit;
    text-align:center;
    cursor:pointer;
    white-space:nowrap;
}

.button:disabled{ cursor:not-allowed; opacity:0.3; }
.button:hover{ color:#000!important; background-color:#ccc!important }

/* ################################################## Modalfenster ############################################################ */

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 101; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0, 0.6); /* Black w/ opacity */
  }
  
.modal-content {
    color:white;
    background-color: mediumpurple;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid purple;
    width: 80%; /* Could be more or less, depending on screen size */
}
  
.close {
    color: white;
    float: right;
    font-size: 3em;
    position: relative;
    top:-20px;
    font-weight: bold;
}
  
.close:hover,
.close:focus { color: black; text-decoration: none; cursor: pointer; }

#htmlElems span{display:block;}

.htmlElem{display:inline-block; width: 75%;}

/* Sizable Sidebar */

#content > aside,
#content > main { padding: 10px; overflow: auto; }

#content {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

#content > aside {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
  }

#content > main {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
  }

#resize-handle
  {
    width:10px;
    flex: 0 0 auto;
    position: relative;
    box-sizing: border-box;
    height: 100%;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: black;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: black;
    cursor: ew-resize;
    user-select: none;
  }
  #resize-handle:before 
  {
    content: "";
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 100%;
    border-left-color: black;
    border-left-style: solid;
  }
  #resize-handle:after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 100%;
    border-right-color: black;
    border-right-style: solid;
  }

  /* Options window */

.slider-container {  display: flex; flex-direction: row; margin-bottom: 10px;}
.slider-container label:last-of-type{ display:flex; align-items:center; margin-left:10px; }

   /* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  
  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider { background-color: purple; }
  input:focus + .slider { box-shadow: 0 0 1px purple; }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round { border-radius: 34px; }
  .slider.round:before { border-radius: 50%; }