.imgContainer {
	float:left;
}

body {
	margin: 10px auto;
	max-width: 100em;
	font-family: sans-serif;
	color: #333333;
	display: grid;
	grid-template-columns: 15em auto
	/*grid-template-columns: repeat(auto-fill, 20em);
	grid-template-columns: repeat(2, 1fr);
	grid-template-areas: "head head " "nav  nav" "main main" "foot foot";*/
}

@media (min-width: 50em) {
	body {
		grid-template-columns: 19em auto;
		grid-template-rows: auto auto auto auto auto;
		grid-template-areas: "head head" "notes notes" "nav  main" "nav  main" "foot foot ";
	}
}

/* For Logo */
#block { 
    border-width: 2px; 
    border-color: #4682B4; 
    /*background-color: #E0FFFF; 
    width: 200px;*/
    width: 100%;
    text-align: center; 
    line-height:30px;
    padding:3px 0;
    float:left;
}


.containerMenu {
  /*border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  margin: 1em;*/
  padding: 0px;
  display: flex;
}

.push-right {
  margin-left: auto;
}

.item {
  /*padding: 10px;*/
  /*border: 2px solid rgba(111,41,97,.5);*/
}

header,
nav,
notes,
main,
article,
section,
aside,
footer {
	border-radius: 0px 0.5em 0.5em;
	border: 1px solid;
	padding: 10px;
	margin: 10px;
}

header {
	background: #F1F3F4;
	border-color: #d5d5d5;
	grid-area: head;
}

notes {
	background: rgb(195, 234, 239);
	border-color: rgb(34, 159, 175);
	font-size: 16px;
	padding-top: 0px;
	padding-bottom: 0px;
	grid-area: notes;
}

nav {
	background: #fffbf0;
	border-color: #e7c157;
	grid-area: nav;
}

article {
	background: #ffede0;
	border-color: #df6c20;
	grid-area: main;
}

footer {
	background: #e4ebf2;
	border-color: #8a9da8;
	grid-area: foot;
}



.navbar {
  background-color: #e5e5e5;
  height: 50px;
}

.navbar img {
  width: 150px;
  padding: 15px;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/*nav {
  float: left;
  margin: 0;
}*/

li {
  /*display: inline;*/
  padding: 5px;
}

nav a {
  text-decoration: none;
  color: #353535;
  display: inline-block;
  padding-top: 0px;
}

nav a:hover {
  color: #00b2b2;
}

nav a:active {
  font-weight: bold;
}

/*PAGES*/
body {
  font: 12px/12px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
}
.contact_form h2, .contact_form label {
  font-family:Georgia, Times, "Times New Roman", serif;
}
.form_hint, .required_notification {
  font-size: 11px;
}



/* Elements*/
textarea {
   /*background:url(textarea-background-image.png) top right no-repeat;*/ 
   background-size: 100%;
   border-radius:6px; 
   border:2px solid silver;
   outline: none; 
}

.contact_form ul {
    width:950px;
    list-style-type:none;
    list-style-position:outside;
    margin:0px;
    padding:0px;
}
.contact_form li{
    padding:12px; 
    border-bottom:1px solid #eee;
    position:relative;
}
/*.contact_form li:first-child, .contact_form li:last-child {
    border-bottom:1px solid #777;
}*/


.contact_form h2 {
    margin:0;
    display: inline;
}
.required_notification {
    color:#d45252; 
    margin:5px 0 0 0; 
    display:inline;
    float:right;
}

.contact_form input:focus, .contact_form textarea:focus { /* add this to the already existing style */
    padding-right:70px;
}

.contact_form input, .contact_form textarea { /* add this to the already existing style */
    -moz-transition: padding .25s; 
    -webkit-transition: padding .25s; 
    -o-transition: padding .25s;
    transition: padding .25s;
}

/* for required * */
.contact_form input, .contact_form textarea {
    padding-right:30px;
}
input:required, textarea:required {
    background: #fff url(../img/red_asterisk.png) no-repeat 98% center;
}

/* Tooltip */
::-webkit-validation-bubble-message {
    padding: 1em;
}



/* For fields with invalid values */
.contact_form input:focus:invalid, .contact_form textarea:focus:invalid { /* when a field is considered invalid by the browser */
    background: #fff url(../img/ic_message_warning.gif) no-repeat 98% center;
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
}
.contact_form input:invalid, .contact_form textarea:invalid { /* when a field is considered invalid by the browser */
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
}


.contact_form input:required:valid, .contact_form textarea:required:valid { /* when a field is considered valid by the browser */
    background: #fff url(../img/haken_gross.gif) no-repeat 98% center;
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}
/*.contact_form input:valid, .contact_form textarea:valid {
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}*/


/* .slideThree */
/*$activeColor: #27ae60; //green
$darkenColor: darken($activeColor, 20%);
$background: #3498db;

.slide {
  width: 80px;
  height: 26px;
  background: #333;
  margin: 20px auto;
  position: relative;
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
  &:after {
    content: 'OFF';
    color: #000;
    position: absolute;
    right: 10px;
    z-index: 0;
    font: 12px/26px Arial, sans-serif;
    font-weight: bold;
    text-shadow: 1px 1px 0px rgba(255,255,255,.15);
  }
  &:before {
    content: 'ON';
    color: $activeColor;
    position: absolute;
    left: 10px;
    z-index: 0;
    font: 12px/26px Arial, sans-serif;
    font-weight: bold;
  }
  label {
    display: block;
    width: 34px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: 3px;
    left: 3px;
    z-index: 1;
    background: #fcfff4;
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    border-radius: 50px;
    transition: all 0.4s ease;
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
  }
  input[type=checkbox] {
    visibility: hidden;
    &:checked + label {
      left: 43px;
    }
  }    
}*/
/* end .slideThree */





/*
.contact_form input[type="checkbox"] {
  display:none;
}
.contact_form input[type="checkbox"] + label {
  width: 60px;
  height: 30px;
  border-radius: 30px;
  border: 2px solid #ddd;
  background-color: #EEE;
  display: inline-block;
  content: "";
  float: left;
  margin-right: 5px;
  transition: background-color 0.5s linear;
  margin-top: 15px;
}
.contact_form input[type="checkbox"] + label:hover {
  cursor: pointer;
}
.contact_form input[type="checkbox"] + label::before {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background-color: #fff;
  display: block;
  content: "";
  float: left;
  margin-right: 5px;
  transition: margin 0.1s linear;
  box-shadow: 0px 0px 5px #aaa;
}
.contact_form input[type="checkbox"]:checked+label{
  background-color: #2b8718;
}
.contact_form input[type="checkbox"]:checked+label::before {
  margin: 0 0 0 30px;
}

.contact_form input[type="checkbox"] + label {
  position: relative;
}
.contact_form input[type="checkbox"] + label::after {
    content: "Testlabel";
    position: absolute;
    left: 70px;
    top: 5px;
}
*/

/* For hints */
.form_hint {
    background: #d45252;
    border-radius: 3px 3px 3px 3px;
    color: white;
    margin-left:8px;
    padding: 1px 6px;
    z-index: 999; /* hints stay above all other elements */
    position: absolute; /* allows proper formatting if hint is two lines */
    display: none;
}

.form_hint::before {
    content: "\25C0"; /* left point triangle in escaped unicode */
    color:#d45252;
    position: absolute;
    top:1px;
    left:-6px;
}

.contact_form input:focus + .form_hint {display: inline;}
.contact_form input:required:valid + .form_hint {background: #28921f;} /* change form hint color when valid */
.contact_form input:required:valid + .form_hint::before {color:#28921f;} /* change form hint arrow color when valid */

.contact_form input:valid + .form_hint {background: #28921f;} /* change form hint color when valid */
.contact_form input:valid + .form_hint::before {color:#28921f;} /* change form hint arrow color when valid */






optgroup {
   background-color: pink;
}

select {
   background-color: seashell; 
   width: 180px; 
   font-size: 12px; 
   font-family: inherit;
   font-weight: 300;
}



label {
   display: block; 
   padding: 1ex; 
}
.flex label { cursor: pointer }




input[type="submit"] {
   font-size: 12px; padding: 5px 12px; 
   font-family: Roboto, sans-serif;
   font-weight: 300;
   color: teal;
   border: 1px solid silver;
   background-image: linear-gradient(to top, gainsboro 0%, white 90%);
   border-radius: 20px;
}




input[type="text"],
input[type="email"],
input[type="search"] { 
  width: 100%; min-width: 100%; 
  height:35px;
  box-sizing: border-box;
  padding: 4px;
  outline: none;
}

textarea { 
  width: 100%; min-width: 100%; 
  box-sizing: border-box;
  padding: 4px;
  outline: none;
}


# Kontaktseite formatieren
.contact_form h2 {
    margin:0;
    margin-bottom:5px;
    display: inline;
}
.required_notification {
    color:#d45252; 
    margin:5px 0 0 0; 
    display:inline;
    float:right;
}



.switch {
  position: relative;
  display: inline-block;
  padding: 0ex;
}
.switch-input {
  display: none;
}
.switch-label {
  display: block;
  width: 48px;
  height: 24px;
  text-indent: +150%;
  clip: rect(0 0 0 0);
  /*color: transparent;*/
  user-select: none;
  padding: 0ex;
  white-space: nowrap;
}
.switch-label::before,
.switch-label::after {
  content: "";
  display: block;
  position: absolute;
  cursor: pointer;
}
.switch-label::before {
  width: 100%;
  height: 100%;
  background-color: #dedede;
  border-radius: 9999em;
  -webkit-transition: background-color 0.25s ease;
  transition: background-color 0.25s ease;
}
.switch-label::after {
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
  -webkit-transition: left 0.25s ease;
  transition: left 0.25s ease;
}
.switch-input:checked + .switch-label::before {
  background-color: #89c12d;
}
.switch-input:checked + .switch-label::after {
  left: 24px;
}



.select-css {
    display: block;
    font-size: 12px;
    font-family: sans-serif;
    font-weight: 700;
    color: #444;
    line-height: 1.3;
    padding: .6em 1.4em .5em .8em;
    width: 100%;
    max-width: 100%; 
    box-sizing: border-box;
    margin: 0;
    border: 1px solid #aaa;
    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    border-radius: .5em;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2300B27C%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
      linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
    display: none;
}
.select-css:hover {
    border-color: #888;
}
.select-css:focus {
    border-color: #aaa;
    box-shadow: 0 0 1px 3px rgba(40, 208, 31, .7);
    box-shadow: 0 0 0 3px -moz-mac-focusring;
    color: #222; 
    outline: none;
}
.select-css option {
    font-weight:normal;
}

[list]::-webkit-calendar-picker-indicator {
    display: none;
  }


#tablelist {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#tablelist td, #tablelist th {
  border: 1px solid #ddd;
  padding: 8px;
}

#tablelist tr:nth-child(even){background-color: #f2f2f2;}

#tablelist tr:hover {background-color: #ddd;}

#tablelist th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}




#tablelist2 {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#tablelist2 td, #tablelist2 th {
  border: 1px solid #ddd;
  padding: 8px;
}

#tablelist2 tr:nth-child(even){background-color: #f2f2f2;}

#tablelist2 tr:hover {background-color: #ddd;}

#tablelist2 th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
}


#tablelist2 tr.sticky {
	top: 0;
	position: sticky;
	position: -webkit-sticky;
	z-index: 2;
	padding-bottom: 1px;
}

/*
table
red: warning
yellow: notice
green: ok
*/
table.green,
table.yellow,
table.red
{
	background-color: f3f3f3;
	margin-bottom: 10px;
}
table.popuptable table.green td,
table.popuptable table.yellow td,
table.popuptable table.red td,
table.green td,
table.yellow td,
table.red td
{
	height: 3px;
	width: 3px;
	padding: 0px;
}

/* table top */
table.green td.lt,
table.yellow td.lt,
table.red td.lt
{
	background-repeat: no-repeat;
	background-position: top left;
}
table.green td.lt
{
	background-image: url(../img/msgbox_green_lt.gif);
}
table.yellow td.lt
{
	background-image: url(../img/msgbox_yellow_lt.gif);
}
table.red td.lt
{
	background-image: url(../img/msgbox_red_lt.gif);
}

table.green td.mt,
table.yellow td.mt,
table.red td.mt
{
	background-repeat:repeat-x;
	background-position: top center;
}
table.green td.mt
{
	background-image: url(../img/msgbox_green_mt.gif);
}
table.yellow td.mt
{
	background-image: url(../img/msgbox_yellow_mt.gif);
}
table.red td.mt
{
	background-image: url(../img/msgbox_red_mt.gif);
}

table.green td.rt,
table.yellow td.rt,
table.red td.rt
{
	background-repeat: no-repeat;
	background-position: top right;
}
table.green td.rt
{
	background-image: url(../img/msgbox_green_rt.gif);
}
table.yellow td.rt
{
	background-image: url(../img/msgbox_yellow_rt.gif);
}
table.red td.rt
{
	background-image: url(../img/msgbox_red_rt.gif);
}

/* table middle */
table.green td.lm,
table.yellow td.lm,
table.red td.lm
{
	background-repeat:repeat-y;
	background-position: center left;
}
table.green td.lm
{
	background-image: url(../img/msgbox_green_lm.gif);
}
table.yellow td.lm
{
	background-image: url(../img/msgbox_yellow_lm.gif);
}
table.red td.lm
{
	background-image: url(../img/msgbox_red_lm.gif);
}

table.popuptable table.green td.mm,
table.popuptable table.yellow td.mm,
table.popuptable table.red td.mm,
table.green td.mm,
table.yellow td.mm,
table.red td.mm
{
	padding: 10px;
	width: 740px;
	font-weight: bold;
	color: #666666;
}
table.green td.mm div,
table.yellow td.mm div,
table.red td.mm div
{
	padding: 0 0 0 27px;
}



table.green td.rm,
table.yellow td.rm,
table.red td.rm
{
	background-repeat:repeat-y;
	background-position: center right;
}
table.green td.rm
{
	background-image: url(../img/msgbox_green_rm.gif);
}
table.yellow td.rm
{
	background-image: url(../img/msgbox_yellow_rm.gif);
}
table.red td.rm
{
	background-image: url(../img/msgbox_red_rm.gif);
}

/* table right */
table.green td.lb,
table.yellow td.lb,
table.red td.lb
{
	background-repeat: no-repeat;
	background-position: bottom left;
}
table.green td.lb
{
	background-image: url(../img/msgbox_green_lb.gif);
}
table.yellow td.lb
{
	background-image: url(../img/msgbox_yellow_lb.gif);
}
table.red td.lb
{
	background-image: url(../img/msgbox_red_lb.gif);
}

table.green td.mb,
table.yellow td.mb,
table.red td.mb
{
	background-repeat:repeat-x;
	background-position:bottom center;
}
table.green td.mb
{
	background-image: url(../img/msgbox_green_mb.gif);
}
table.yellow td.mb
{
	background-image: url(../img/msgbox_yellow_mb.gif);
}
table.red td.mb
{
	background-image: url(../img/msgbox_red_mb.gif);
}

table.green td.rb,
table.yellow td.rb,
table.red td.rb
{
	background-repeat: no-repeat;
	background-position: bottom right;
}
table.green td.rb
{
	background-image: url(../img/msgbox_green_rb.gif);
}
table.yellow td.rb
{
	background-image: url(../img/msgbox_yellow_rb.gif);
}
table.red td.rb
{
	background-image: url(../img/msgbox_red_rb.gif);
}

table.green td img,
table.yellow td img,
table.red td img
{
	margin: -6px 0 0 0;
	padding: 0;
	float: left;
}

table.green td div.console,
table.yellow td div.console,
table.red td div.console
{
	font-family:monospace,courier;
	font-size: 11px;
	font-weight: normal;
	margin: 10px 0;
	padding: 0;
}


span.errortext
{
	color:red;
	font-weight:bold;
	font-size:11px;
}


.up .arrow-down,
.arrow-up {
    display: none;
}

.up .arrow-up {
    display: inline;        
}



.table-header-rotated {
  border-collapse: collapse;
  text-indent: initial;
  border-spacing: 2px;  
}

table.table-header-rotated td {
    text-align: center;
    padding: 10px 5px;
    border: 1px solid #ccc;
    width: 30px;
}

th.rotate {
    /* Something you can count on */
    height: 140px;
    white-space: nowrap;
}

th.rotate > div {
    transform: 
      /* Magic Numbers */
      translate(25px, 51px)
      /* 45 is really 360 - 45 */
      rotate(315deg);
      width: 30px;
}
th.rotate > div > span {
    border-bottom: 1px solid #ccc;
    padding: 5px 10px;
}

th.row-header {
    padding: 0 10px;
    border-bottom: 1px solid #ccc;
    text-align:right;
}

.csstransforms th.rotate {
  height: 140px;
  white-space: nowrap;
}