@import url(https://fonts.googleapis.com/css?family=Roboto);

html, body {margin: 0px; padding: 0px; width: 100%; height: 100%;}
#content {position: absolute; top: 10%; left: 50%; margin-left: -30vw; min-height: 70vh; background-color: #fff; width: 60vw;
	padding: 10px; border-radius: 3px; font-family: 'Roboto', sans-serif; font-size: 12pt;
	-webkit-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.75);}
#bgColor {background-color: #009688; /*Teal500 */ width: 100vw; height: 23vh;} 
#bgGrey {background-color: #ededed; width: 100vw; height: 77vh;}

/* Links */
a {color: #00695C; text-decoration: none; font-size: 13pt; border: none; font-family: sans-serif;}
a:hover {text-decoration: underline;}
a.navi:hover {border-bottom: 2px #00897B solid; text-decoration: none;}

/* Tabellen */
table {border: none; border-spacing: 0px;}
th {border: none; color: #757575; border-bottom: 1px #BDBDBD solid; font-weight: normal; padding-left: 10px; padding-right: 10px;}
td {border: none; font-size: 13pt; color: #212121; border-bottom: 1px #BDBDBD solid; padding-left: 10px; padding-right: 10px;}
tr:last-child td {border-bottom: none;}

/* Formular */
input[type="text"],input[type="password"],input[type="date"],select {border: none; font-size: 13pt; padding-top: 3px; padding-bottom: 3px; border-bottom: 2px #E0E0E0 solid; background-color: #fff !important; font-family: 'Roboto', sans-serif; outline: none;}
input[type="text"]:focus,input[type="password"]:focus,input[type="date"]:focus,select:focus {border-bottom: 2px #009688 solid;}
input:-webkit-autofill{
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
input[type="submit"], button {background-color: #00897B; color: #fff; border: none; outline: none; padding-top: 6px; padding-bottom: 6px; padding-left: 12px; padding-right: 12px; font-size: 13pt;
	margin-top: 10px; border-radius: 2px; font-family: sans-serif; cursor: pointer;
	-webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.5);}
input[type="submit"]:hover, button:hover {background-color: #26A69A;
	-webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);}

/*Ladeanzeige*/
#loader {display:none; position: fixed; top: 50%; left: 50%; width: 130px; height: 130px; margin-top: -65px; margin-left: -65px; background-color: #009688; color: #fff; text-align: center; border-radius: 3px;
	-webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,1);
	-moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,1);
	box-shadow: 0px 0px 5px 1px rgba(0,0,0,1);}
.loadcontainer {
  margin-left: 25px;
  margin-top: 5px;
  width: 80px;
  height: 100px;
}
.loadblock {
  position: relative;
  box-sizing: border-box;
  float: left;
  margin: 0 10px 10px 0;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #FFF;
}
.loadblock:nth-child(4n+1) { animation: loadwave 2s ease .0s infinite; }
.loadblock:nth-child(4n+2) { animation: loadwave 2s ease .2s infinite; }
.loadblock:nth-child(4n+3) { animation: loadwave 2s ease .4s infinite; }
.loadblock:nth-child(4n+4) { animation: loadwave 2s ease .6s infinite; margin-right: 0; }
@keyframes loadwave {
  0%   { top: 0;     opacity: 1; }
  50%  { top: 30px;  opacity: .2; }
  100% { top: 0;     opacity: 1; }
}

/*weiteres*/
td a .mdicon {color: #212121;}