html {
 	height:100%;
 }

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;
  height:100%;
} 

body div.row {
	margin:0;
}

 .modal {
     display:    none;
     position:   fixed;
     z-index:    1000;
     top:        0;
     left:       0;
     height:     100%;
     width:      100%;
     background: rgba( 255, 255, 255, .8 )
     url('http://i.stack.imgur.com/FhHRx.gif')
     50% 50%
     no-repeat;
 }

 /* When the body has the loading class, we turn
    the scrollbar off with overflow:hidden */
 body.loading .modal {
     overflow: hidden;
 }

 /* Anytime the body has the loading class, our
    modal element will be visible */
 body.loading .modal {
     display: block;
 }

h4 {
    margin:auto;
    text-align:center;
    margin-bottom: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; 				}

.content {
	width:100%;
	max-width:98%;
	min-width:400px;
	background-color:#fff;
	padding:15px;
	min-height:400px;
	margin:15px auto;
	opacity:0.95;
-webkit-box-shadow: 0 4px 18px 10px rgba(242,252,255,1);
-moz-box-shadow: 0 4px 18px 10px rgba(242,252,255,1);
box-shadow: 0 4px 18px 10px rgba(242,252,255,1);
    overflow:auto;
}

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

 .IAmOverall {
     background-color:white;
     position:fixed;
     width:500px;
     min-height:500px;
     max-height:680px;
     overflow:scroll;
     border:2px solid gray;
     margin: -250px;
     left:50%;
     top:42%;
     display:none;
     box-shadow:5px 10px 8px #2b2b2b;
 }

 .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:none;
	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
// ---------------------------------------------------- */

.navigation {
    position:relative;
	width:98%;
    line-height:33px;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    margin:0;
    justify-content:center;

}

.navigation div {
	height:33px;
    margin:0;
    padding:0;
}

.sidenav {
	transform: rotate(90deg);
    -ms-transform: rotate(90deg); /* IE 9 */
    -ms-transform-origin:0 0; /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari and Chrome */
    -webkit-transform-origin:0 0; /* Safari and Chrome */
}

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

.contentbox {
    position:relative;
    clear:both;
}

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

td {
	vertical-align:top;
}

.shorticontd {
    width:22px;
    padding-top:10px!important;
    margin:0;
}

 .tdimagebox {
     padding:2px 0 !important;
     margin:0 !important;
     width:42px !important;
 }

.tdimage {
    height: 175px;
    width: 175px;
}

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

#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: 22.5px;
}
#loader .dot::before {
    border-radius: 100%;
    content: "";
    height: 22.5px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: scale(0);
    width: 22.5px;
}
#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-position: 50% 50%;
    background-repeat: no-repeat;
    bottom: -40px;
    height: 20px;
    left: 0;
    position: absolute;
    right: 0;
    width: 180px;
}
@keyframes load {
100% {
    opacity: 0;
    transform: scale(1);
}
}
@keyframes load {
100% {
    opacity: 0;
    transform: scale(1);
}
}

 input:required:invalid, input:focus:invalid {
     background-image: 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);
     background-position: right center;
     background-repeat: no-repeat;
     -moz-box-shadow: none;
     border:1px solid red;
 }
 input:required:valid {
     background-image: 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=);
     background-position: right center;
     background-repeat: no-repeat;
 }

 #drop_file_zone {
    background-color: #EEE;
    border: #999 5px dashed;
    width: 290px;
    height: 200px;
    padding: 8px;
    font-size: 18px;
}
#drag_upload_file {
    width:50%;
    margin:0 auto;
}
#drag_upload_file p {
    text-align: center;
}
#drag_upload_file #selectfile {
    display: none;
}

 @media print {
    .navigation { display:none !important; }
    .head       { display:none !important; }
 }

 .input-xs,
 .input-xs,
 .input-xs {
     height: 23px;
     padding: 1px 5px;
     font-size: 12px;
     line-height: 1.5;
 }