html {}

body {
  background-color:#fff;
  background-image: url(bg-clouds.png);
  background-size:  9000px 100%;
  background-position: bottom center;
  background-attachment:fixed;
  background-repeat: repeat-x;
  animation: animatedBackground 180s linear infinite;
    font-family: Verdana, Arial, Helvetica;
  font-size:11px;
  padding:0;
  margin:0;
  color:#fff;
} 

.login-shorter {
    width:85%;
    float:right;
}

.login-button {
    float:right;
    margin-right:15px;
    margin-bottom:5px;
}

div, table {
	color:#000;
}

body div.row {
	margin:0;
}

h4 {
    text-align:center;
    margin: auto auto 20px;
}

@keyframes animatedBackground {
	from { background-position: bottom left; }
	to { background-position: bottom right; }
}

a 		{ font-weight:normal; 					}
a:hover { color:black; 							}
hr 		{ margin:0; padding:0; 					}
label 	{ font-weight:normal; font-size:80%; 	}

h1 {
 	margin:12px 0 20px 0;
 	width:100%;
 	text-align:center;
 	text-decoration:underline;
 }

.nobtn 			{ background-color:transparent; border:0; 	}
.nobtn:hover 	{ text-decoration: underline; 				}

.container {
	width:100%;
	max-width:90%;
	min-width:400px;
    min-height:500px;
	background-color:#fff;
	margin:15px auto;
	opacity:0.95;
    position:relative;
    padding:15px;
-webkit-box-shadow: 0 4px 18px 10px rgba(200,200,200,.6);
-moz-box-shadow: 0 4px 18px 10px rgba(200,200,200,.6);
box-shadow: 0 4px 18px 10px rgba(200,200,200,.6);
    border-radius:8px;
}

.content {
    position:relative;
    width:100%;
    z-index:10;
}

.content_background {
    background: transparent url(logo.png) no-repeat;
    right:0;
    bottom:0;
    background-size: 100%;
    position:absolute;
    width:200px;
    height:100px;
    margin-right:2.5%;
    z-index:0;
    opacity:.2;
}

 .content_backgroundBig {
     background: transparent url(logo.png) no-repeat center 35%;
     background-size: 40%;
     position:absolute;
     width:100%;
     height:100%;
     z-index:0;
     opacity:.2;
 }

 .headline {
     border-bottom: 2px solid #ddffff;
 }

.centerbox {
    width:80%;
    margin:auto;
}

 .info_text_small {
 	color:red;
 	font-size:80%;
 }

 .alert {
	margin-bottom:0;
}

#loginform > * {
	margin:0;
}

.form-group-sm {
	font-size:80%;
}

.form-group {
	margin-bottom:8px;
}

.grafic_box {
	width:100%;
	max-width:600px;
	margin:auto;
}

.inactive {
	background-color:lightgray;
	cursor:default;
}

.inactiveb {
	border:none;
	background-color:transparent;
	cursor:default;
	height:30px;
	line-height:30px;
}

.info_box {
	cursor:pointer;
	background-color:#333;
	float:right;
	color:#ffaaaa;
	padding: 0 2px;
	border-radius:15%;
}

.green_info {
	background-color:green;
}

.vorher-angabe {
	padding-left:20px; 
	height:24px;
	line-height:24px;
	font-size:90%;
	color:gray;
}

.form-group {
    height:40px;
    vertical-align: center;
}

input.form-control {
	margin:0;
}
input.input-sm {
	margin:0;
}

.input-sm {
	padding-left:0;
	padding-right:0;
	margin:0;
}

.txtred { color:red; 			}
.ftlbl 	{ font-weight:bold; 	}
.nopdn 	{ padding:0; margin:0; 	}

/* ----------------------------------------------------
// Navigation / Listen
// ---------------------------------------------------- */

ul.navigation {
	list-style: none;
	width:98%;
	height:33px;
	border-bottom:1px solid gray;
    margin-top:10px;
}

ul.navigation li {
	display:block;
	float:left;
	height:33px;
	line-height:33px;
}

.btnnav {
	border-bottom:0;
	margin:0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}

/* ----------------------------------------------------
// Tabellen
// ---------------------------------------------------- */

td {
	vertical-align:top;
    padding: 5px 0 5px 0;
    line-height:18px;
}

tr.active {
	font-size:80%;
}

.table-xs {
	font-size:90%;
	margin:0;
}

.table_inner { margin-bottom:0; padding:0; }

.table_headers {
	font-weight:bold;
}

.table-hover tbody tr:hover td, 
.table-hover tbody tr:hover th {
  background-color: #dff;
}

td.txtright { text-align:right; }
td.tdvon 	{ width:40px; text-align:center; }
td.tdbis 	{ width:60px; text-align:center; }

.tdcat { 
	width:180px;
	text-align:center;
}

.tdbut {
	padding-top:4px;
}

.innertbl {
	border-collapse:collapse;
	padding:0;
	margin:0;
}

 @keyframes load {
     100% {
         opacity: 0;
         transform: scale(1);
     }
 }

#loader {
    bottom: 0;
    height: 55px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 150px;
    width: 55px;
}

#loader .dot {
    bottom: 0;
    height: 100%;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 22px;
}
#loader .dot::before {
    border-radius: 100%;
    content: "";
    height: 22.5px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: scale(0);
    width: 22px;
}
#loader .dot:nth-child(7n+1) {
    transform: rotate(45deg);
}
#loader .dot:nth-child(7n+1)::before {
    animation: 0.8s linear 0.1s normal none infinite running load;
    background: #00ff80 none repeat scroll 0 0;
}
#loader .dot:nth-child(7n+2) {
    transform: rotate(90deg);
}
#loader .dot:nth-child(7n+2)::before {
    animation: 0.8s linear 0.2s normal none infinite running load;
    background: #00ffea none repeat scroll 0 0;
}
#loader .dot:nth-child(7n+3) {
    transform: rotate(135deg);
}
#loader .dot:nth-child(7n+3)::before {
    animation: 0.8s linear 0.3s normal none infinite running load;
    background: #00aaff none repeat scroll 0 0;
}
#loader .dot:nth-child(7n+4) {
    transform: rotate(180deg);
}
#loader .dot:nth-child(7n+4)::before {
    animation: 0.8s linear 0.4s normal none infinite running load;
    background: #0040ff none repeat scroll 0 0;
}
#loader .dot:nth-child(7n+5) {
    transform: rotate(225deg);
}
#loader .dot:nth-child(7n+5)::before {
    animation: 0.8s linear 0.5s normal none infinite running load;
    background: #2a00ff none repeat scroll 0 0;
}
#loader .dot:nth-child(7n+6) {
    transform: rotate(270deg);
}
#loader .dot:nth-child(7n+6)::before {
    animation: 0.8s linear 0.6s normal none infinite running load;
    background: #9500ff none repeat scroll 0 0;
}
#loader .dot:nth-child(7n+7) {
    transform: rotate(315deg);
}
#loader .dot:nth-child(7n+7)::before {
    animation: 0.8s linear 0.7s normal none infinite running load;
    background: magenta none repeat scroll 0 0;
}
#loader .dot:nth-child(7n+8) {
    transform: rotate(360deg);
}
#loader .dot:nth-child(7n+8)::before {
    animation: 0.8s linear 0.8s normal none infinite running load;
    background: #ff0095 none repeat scroll 0 0;
}
#loader .lading {
    /*background-image: url("../images/loading.gif");*/
    background: no-repeat 50%;
    bottom: -40px;
    height: 20px;
    left: 0;
    position: absolute;
    right: 0;
    width: 180px;
}



 input:required:invalid, input:focus:invalid {
     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAeVJREFUeNqkU01oE1EQ/mazSTdRmqSxLVSJVKU9RYoHD8WfHr16kh5EFA8eSy6hXrwUPBSKZ6E9V1CU4tGf0DZWDEQrGkhprRDbCvlpavan3ezu+LLSUnADLZnHwHvzmJlvvpkhZkY7IqFNaTuAfPhhP/8Uo87SGSaDsP27hgYM/lUpy6lHdqsAtM+BPfvqKp3ufYKwcgmWCug6oKmrrG3PoaqngWjdd/922hOBs5C/jJA6x7AiUt8VYVUAVQXXShfIqCYRMZO8/N1N+B8H1sOUwivpSUSVCJ2MAjtVwBAIdv+AQkHQqbOgc+fBvorjyQENDcch16/BtkQdAlC4E6jrYHGgGU18Io3gmhzJuwub6/fQJYNi/YBpCifhbDaAPXFvCBVxXbvfbNGFeN8DkjogWAd8DljV3KRutcEAeHMN/HXZ4p9bhncJHCyhNx52R0Kv/XNuQvYBnM+CP7xddXL5KaJw0TMAF8qjnMvegeK/SLHubhpKDKIrJDlvXoMX3y9xcSMZyBQ+tpyk5hzsa2Ns7LGdfWdbL6fZvHn92d7dgROH/730YBLtiZmEdGPkFnhX4kxmjVe2xgPfCtrRd6GHRtEh9zsL8xVe+pwSzj+OtwvletZZ/wLeKD71L+ZeHHWZ/gowABkp7AwwnEjFAAAAAElFTkSuQmCC) no-repeat right center;
     -moz-box-shadow: none;
     border:1px solid red;
 }
 input:required:valid {
     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAepJREFUeNrEk79PFEEUx9/uDDd7v/AAQQnEQokmJCRGwc7/QeM/YGVxsZJQYI/EhCChICYmUJigNBSGzobQaI5SaYRw6imne0d2D/bYmZ3dGd+YQKEHYiyc5GUyb3Y+77vfeWNpreFfhvXfAWAAJtbKi7dff1rWK9vPHx3mThP2Iaipk5EzTg8Qmru38H7izmkFHAF4WH1R52654PR0Oamzj2dKxYt/Bbg1OPZuY3d9aU82VGem/5LtnJscLxWzfzRxaWNqWJP0XUadIbSzu5DuvUJpzq7sfYBKsP1GJeLB+PWpt8cCXm4+2+zLXx4guKiLXWA2Nc5ChOuacMEPv20FkT+dIawyenVi5VcAbcigWzXLeNiDRCdwId0LFm5IUMBIBgrp8wOEsFlfeCGm23/zoBZWn9a4C314A1nCoM1OAVccuGyCkPs/P+pIdVIOkG9pIh6YlyqCrwhRKD3GygK9PUBImIQQxRi4b2O+JcCLg8+e8NZiLVEygwCrWpYF0jQJziYU/ho2TUuCPTn8hHcQNuZy1/94sAMOzQHDeqaij7Cd8Dt8CatGhX3iWxgtFW/m29pnUjR7TSQcRCIAVW1FSr6KAVYdi+5Pj8yunviYHq7f72po3Y9dbi7CxzDO1+duzCXH9cEPAQYAhJELY/AqBtwAAAAASUVORK5CYII=) no-repeat right center;
 }

 .anime { animation: turner 8s infinite linear }

@keyframes turner{
    from{  transform: rotateY(0deg)   }
    to  {  transform: rotateY(360deg) }
}


.neuigkeit {
    font-size:90%;
    color:#3c763d;
    font-style: italic;
}