table {
	font-family: Calibri;
}

/* Tabelle für summary bzw. details */
table#t01 {
    border-collapse: collapse;
    width: 90%;
    height: auto;
	margin-top: 5px;
	margin-left: 10px;
}
table#t01 th {
    background-color:#70addd;
    color: white;
    font-size: 18px; 
    text-align: center;
}
table#t01 th, td{
    border: 1px solid #5080ec;
}
table#t01 tr td {
    background-color: #F5F5F5;
    border: 1px solid #5b80ec;
    padding-left: 5px;
}
table#t01 tfoot tr td{
    background-color: #fff;
    border: none;
}

/*Tabelle um neue WEAs anzulegen*/
table#t02 {
    float: left;
}
table#t02 tr td {
    border-collapse: separate;
    border: none;
    height: 30px;
    text-align: left;
}

/*Tabelle neue Kunden anlegen, Bearbeitung von WEAs, WPs, Anlagen*/
table#t03 {
    float: left;
    margin-right: 20px;
}
table#t03 tr td {
    border-collapse: separate;
    border: none;
    min-width: 250px;
    width: auto;
    height: 30px;
    padding-left: 5px;
}

table#t04 #summe {
    color: #fff;
    background-color: #555555;
}
/*Div für scrollbare Tabellen*/
#tabkopf{
    height: 700px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}
/*Scrollbare Tabelle*/
table#t04{
    border-collapse: collapse;
}
table#t04 thead tr{
    display: block;
}
table#t04 thead th {
    background-color:#70addd;
    border: 1px solid #5b80ec;
    border-left: none;
    text-align: center;
    color: white;
    font-size: 18px;
    padding-left: 5px;
}
table#t04 thead th#th01 {
    background-color:#fff;
    border: none;
    text-align: left;
    padding-bottom: 5px;
    padding-left: 0px;
}
table#t04 tbody{
    display: block;
    height: 620px;
    overflow: auto;
    width: 100%;
}
table#t04 tbody td{
    background-color: #F5F5F5;
    border: 1px solid #5b80ec;
    text-align: center;
    padding-left: 5px;
    padding-bottom: 3px;
    padding-top: 3px;
}
table#t05 {
    float: left;
    margin-right: 20px;
    margin-top: 10px;
}
table#t05 tr td {
    border-collapse: separate;
    border: none;
    border-bottom: 10px solid white;
    min-width: 250px;
    width: auto;
    padding-left: 5px;
}
table#t06 {
    float: left;
    margin-right: 20px;
    clear: left;
    margin-top: 50px;
}
table#t06 tr td {
    border-collapse: separate;
    border: none;
    border-bottom: 10px solid white;
    padding: 5px 5px;
}
table#t07 {
    float: left;
    margin-right: 20px;
}
table#t07 tr td {
    border-collapse: separate;
    border: none;
    width: 300px;
    height: 30px;
    padding-left: 5px;
}
table#t08 {
    float: left;
    margin-right: 20px;
}
table#t08 tr td {
    border-collapse: separate;
    background: #f5f5f5;
    border: none;
    height: 30px;
}

#login{
    width: 40%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 75px;
}
#loginfelder{
    margin-top: 75px;
    margin-left: auto;
    margin-right: auto;
    width: 480px;
    font-family: Calibri;
    font-size: 25px;
    text-align: center;
}

h1 {
    text-align: center;
    padding: 10px 10px;
    font-size: 30px;
    font-family: Calibri;
}
p#p01{
    font-size: 18;
    border-bottom: 1px dashed;
    margin-top: 50px;
}
h3{
    border-top: 1px solid;
    font-family: Calibri;
    clear: left;
    position: relative;
    top: 10px;
    padding-top: 5px;
    font-size: 20px;
}

/* linke Navigationsleiste Design */
#left_ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 200px;
	background: linear-gradient(to bottom,  #70addd, gainsboro 5%,  white);
	height: 100%;
	position: fixed;
	overflow: auto;
	top: 44px;
}
/* linke Navigationsleiste Text */
#left_a {
	display: block;
    color: #000;
	padding: 8px 16px;
	text-decoration: none;
	font-family: Calibri;
    font-size: 20px;
}
#left_a:hover{
    color:white;
}
/* obere Leiste Design */
#top_ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	background: linear-gradient(to left, gainsboro, #70addd 50%);
	position: fixed;
    z-index: 2;
	top: 0px;
    left: 8px;
    width: 98%;
    height: 44px;
    border-bottom-right-radius: 6px;
    /*border-top-right-radius: 6px;*/
}
/* obere Leiste Text */
#top_a {
    text-decoration: none;
    color: #000;
}
#top_a:hover{
    color: #fff;
}
#top_right{
    display: block;
	color: #000;
    text-align: center;
    padding: 10px 30px;
	float: right;
	font-family: Calibri;
    text-decoration: none;
}
.dropbtn {
    padding: 10px 15px;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    color: #555555;
    font-family: Calibri;
    font-size: 20px;
    font-weight: bold;
    border-left: 1px solid #555555;
    border-right: 1px solid #555555;
}

.dropdown {
    display: inline-block;
    float: right;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 135px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    border-bottom: 1px dashed #555555;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #555555;
    color: white;
}
/*Überschrift BBG Kundendatenbank*/
#ueberschrift {
	float:left;
    display: inline-block;
    color: white;
    text-align: center;
    text-decoration: none;
    font-family: Calibri;
    font-size: 30px;
    padding-top: 2px;
    font-weight: bold;
    margin-left: 20px;
    margin-right: 20px;
}
#ueberschrift_a{
    text-decoration: none;
    display: block;
    color: white;
}

#neu_ul {
    list-style-type: none;
	padding: 0;
    position: fixed;
    right: 5%;
    top: 28px;
    left: 210px;
    height: 50px;
    border: 1px solid #DDD;
    box-shadow: 1px 1px 1px rgba(0,0,0, .2);
}
#neu_a {
    display: block;
	color: #fff;
    text-shadow: 0px 0px 5px black;
    text-align: center;
    font-size: 19px;
    padding: 5px 15px;
    text-decoration: none;
	float: right;
    margin-right: 5px;
    margin-top: 10px;
	font-family: Calibri;
    font-style: italic;
    border-radius: 4px;
    background-color: #555555;
}
#neulitext{
    float: left;
    font-family: Calibri;
    font-size: 25px;
    padding: 7px 10px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #555555;
    font-style: italic;
    text-decoration-line: underline;
}
#bearbeiten_a{
    display: block;
    color: #000;
    font-size: 17px;
    text-decoration: none;
	float: right;
	font-family: Calibri;
    font-style: italic;
}
#bearbeiten_a:hover{
    color: white;
}
#neu_a:hover{
    color:#fff;
    background-color: #70addd;
}

/*Maus über Navigationsleite*/
#left_a:hover:not(.active) {
	background-color: #70addd;
}
/*Markierung in der Navigationsleite für die aktuell angezeigte Seite*/
#left_am {
    background-color: #70addd;
    color: #fff;
    display: block;
	padding: 8px 16px;
	text-decoration: none;
	font-family: Calibri;
    font-size: 20px;
}
#bild{
    max-width: 50%;
    height: auto;
}

#intable_a{
    text-decoration: none;
    float:left;
    font-family: Calibri;
    text-align: left;
    cursor: pointer;
    color: #70addd;
    font-size: 13px;
}
#intable_a:hover{
    color: #000;
}

/*Layout der Seite*/
#seite_list {
    margin-left: 203px;
    margin-top: 100px;
    margin-right:10px;
    padding: 16px 16px;
    font-family: Calibri;
    overflow: auto;
    position: fixed;
    z-index: 1;
    width: 80%;
    bottom: 5px;
    top: 0px;
}
#seite_table{
    font-family: Calibri;
    padding: 16px 16px;
    margin-left: 203px;
    margin-top: 50px;
}
/*Körper*/
#koerper {
    float: left;
    margin-left: 203px;
    padding: 16px 16px;
    font-family: Calibri;
    margin-top: 50px;
}
#confirm {
    margin-left: 250px;
    width: 40%;
    padding: 20px 50px;
    font-family: Calibri;
    margin-top: 80px;
    border: 10px outset;
    text-align: center;
     background: linear-gradient(to top, gainsboro 80%, #70addd);
}

/*Fusszeile*/
#fuss {
    clear: left;
    margin-left: 220px;
}
/*Layout der Listenanzeige*/
#list {
    color: #000;
    padding: 8px 16px;
    font-family: Calibri;
    font-size: 16px;
    background-color: gainsboro;
    border: 1px solid grey;
    border-radius: 4px;
    margin-bottom: 5px;
    width: 90%;
}
#list::-webkit-details-marker {
    display:none;
}
#detail[open] #list{
    background: linear-gradient(to right, gainsboro, #70addd);
}
#list:hover {
	background: linear-gradient(to right, gainsboro, #70addd);
    cursor: pointer;
}

/*Hintergrund der Listendetails*/
#detail {
    background-color: white;
/*    padding-bottom: 5px;*/
}

#list2 {
    color: #000;
    padding: 3px 0px;
    font-weight: bold;
    font-family: Calibri;
    font-size: 16px;
    background: linear-gradient(to right, gainsboro, #F5F5F5);
    margin-bottom: 2px;
}
#list2:hover{
    background: linear-gradient(to right, gainsboro, #555555);
    cursor: pointer;
}
#detail2 {
    background-color: #fff;
}
#detail2[open] #list2{
    background: linear-gradient(to right, gainsboro, #555555);
}
input[type=text]{
    font-family: Calibri;
    font-size: 15px;
}
input[type=text]:focus{
    background: #E0E0F8;
}
input[type=password]:focus{
	background: #E0E0F8;
}
input[type=search]{
    background: #efd;
    min-width: 220px;
}
input[type=submit]{
    background-color: #70addd;
    border: none;
    color: #000;
    text-decoration: none;
    cursor: pointer;
    padding: 7px 30px;
    font-size: 17px;
    font-family: Calibri;
    letter-spacing: 2px;
	margin-top: 10px;
	width: 150px;
}
input[type=submit]#sub01{
    background-color: #555555;
    border:none;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    padding: 5px 10px;
    font-size: 14px;
    font-family: Calibri;
    letter-spacing: 0px;
	margin-top: 0px;
	width: auto;
    float: right;
}
input[type=submit]#sub02{
    background-color: #555555;
    border:none;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    padding: 5px 10px;
    font-size: 14px;
    font-family: Calibri;
    letter-spacing: 0px;
	margin-top: 0px;
	width: auto;
    clear: right;
}
input[type=submit]#sub02:hover{
	background-color: black;
}
input[type=submit]#sub03{
    background-color: greenyellow;
    border: 1px solid #555555;
    color: #555555;
    text-decoration: none;
    cursor: pointer;
    padding: 1.5px 5px;
    font-size: 14px;
    font-family: Calibri;
    letter-spacing: 0px;
	margin-top: 0px;
	width: auto;
    float: right;
    box-shadow: 0 1px #000;
    border-radius: 15px;
}
input[type=button]{
    background-color: #000;
    border:none;
    color: #70addd;
    text-decoration: none;
    cursor: pointer;
    padding: 7px 30px;
    font-size: 17px;
    font-family: Calibri;
    letter-spacing: 2px;
	float:left;
	margin-top: 10px;
	width: 150px;
}
input[type=number]{
    width: 50px;
}
input[type=number]:focus{
    background: #E0E0F8;
}
input[type=date]{
    font-family: Calibri;
    font-size: 15px;
}
input[type=date]:focus{
    background: #E0E0F8;
}
input[type=file]{
    color: blue;
}
#zuruecksetzen{
    background-color: #555555;
    border:none;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    padding: 5px 10px;
    font-size: 14px;
    font-family: Calibri;
	margin-top: 0px;
	width: auto;
    float: right;
    margin-right: 5px;
}
#zuruecksetzen_bbg{
    background-color: transparent;
    color: #000;
    text-decoration: none;
    cursor: pointer;
    padding: 0px 5px;
    font-size: 16px;
    font-family: Calibri;
}
#zuruecksetzen_bbg:hover{
    color: #70addd;
}
#dateilink{
    color: #555555;
    text-decoration: none;
    cursor: pointer;
    font-size: 18px;
    font-family: Calibri;
	padding: 3px 3px;
}
#dokloesch{
    text-decoration: none;
    text-decoration: underline;
    float: right;
    font-family: Calibri;
    font-size: 14px;
    color: #000;
    margin-right: 10px;
}
#dokloesch:hover{
    color: red;
}
#dateilink:hover{
	color: blue;
}
#pfeil_hoch {
    color: white;
    text-decoration: none;
    font-weight: bold;
    background-color: black;
}
#pfeil_runter{
    color: white;
    text-decoration: none;
    font-weight: bold;
    background-color: grey;
}
#abbrechen_a{
    background-color: #555555;
    border: none;
    color: #70addd;
    text-decoration: none;
    cursor:pointer;
    padding: 7px 30px;
    font-size: 17px;
    font-family: Calibri;
    float: left;
    letter-spacing: 2px;
	margin-top: 10px;
	width: 90px;
	text-align: center;
}
#bearbeiten{
    background-color: gainsboro;
    border:none;
    color: #000;
    text-decoration: none;
    cursor:pointer;
    padding: 7px 30px;
    font-size: 17px;
    font-family: Calibri;
    letter-spacing: 2px;
    float: left;
	margin-bottom: 20px;
	margin-top: 10px;
	width: 90px;
}
#loeschen_a{
    background-color: #fbbc25;
    border: none;
    color: #000;
    text-decoration: none;
    cursor:pointer;
    padding: 7px 30px;
    font-size: 17px;
    font-family: Calibri;
    float: left;
    letter-spacing: 0px;
	margin-top: 10px;
    margin-bottom: 20px;
	width: 90px;
	text-align: center;
}
#neu_wea {
    display: block;
	color: #fff;
    text-align: center;
    font-size: 15px;
    text-decoration: none;
	font-family: Calibri;
    background-color: #555555;
    float: right;
    margin-bottom: 10px;
    padding: 5px 30px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
#neu_wea:hover{
    color: #70addd;
}
select{
    font-size: 15px;
    font-family: Calibri;
    width:auto;
    padding: 5px 5px;
    border:none;
    border-radius: 2px;
    background-color: #E0E6F8;
}
select:hover{
    cursor: pointer;
}
select#s02{
    font-size: 14px;
    font-family: Calibri;
    border:none;
    width: 90%;
    background-color: #555555;
    color: white;
    padding: 1px 0px;
    margin-top:2px;
}
textarea{
    font-family: Calibri;
}
textarea:focus{
    background: #E0E0F8;
}
#izuk{
    text-decoration: none;
    background-color: #E0E6F8;
    text-align: left;
    color: black;
    font-style: italic;
    padding: 2px 5px;
    margin-right: 60px;
}
#izuk:hover{
    color: #70addd;
}
#klon {
    text-decoration: none;
    background-color: #555555;
    text-align: center;
    color: #fff;
    font-style: italic;
    padding: 2px 5px; 
}
#klon:hover{
    color: #E0E6F8;
}
#loeschen{
    text-decoration: none;
    background-color: #F8ECE0;
    text-align: right;
    color: black;
    font-style: italic;
    padding: 2px 5px;
    margin-left: 60px;
}
#loeschen:hover{
    color: red; 
}
#spansp{
    position: fixed;
    margin-top: 30px;
}
#nein_a{
    background-color: #000;
    border: none;
    color: #70addd;
    text-decoration: none;
    cursor: pointer;
    padding: 5px 20px;
    font-size: 17px;
    font-family: Calibri;
    letter-spacing: 2px;
	margin-top: 20px;
	text-align: center;
    margin-right: 150px;
}
#ja_a{
    background-color: #FA8258;
    border: none;
    color: #000;
    text-decoration: none;
    cursor: pointer;
    padding: 5px 30px;
    font-size: 17px;
    font-family: Calibri;
    letter-spacing: 2px;
	margin-top: 20px;
	text-align: center; 
}
#verwaltung_a{
    background-color: gainsboro;
    clear: left;
    border: none;
    color: #70addd;
    text-decoration: none;
    cursor: pointer;
    padding: 5px 20px;
    font-size: 17px;
    font-family: Calibri;
    letter-spacing: 2px;
	margin-top: 10px;
	text-align: left;
    margin-right: 100px;
}

/*verschiebbarer schalter*/
.toggle label {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 25px;
}

.toggle input {
	display: none;
}

.toggle .slider {
	/* Grundfläche */
	
	position: absolute;
	cursor: pointer;
	top: 4px;
	left: 2px;
	width: 50px;
	height: 20px;
	background-color: #FA8258;
	/* red */
	
	transition: all .3s ease-in-out;
	border-radius: 4px;
}

.toggle .slider:before {
	/* verschiebbarer Button */
	
	position: absolute;
	content: "";
	height: 15px;
	width: 20px;
	left: 2px;
	bottom: 2.5px;
	background-color: #555555;
	border-radius: 4px;
	transition: all .3s ease-in-out;
}

.toggle input:checked + .slider {
	background-color: #81F781;
}

.toggle input:checked + .slider:before {
	transform: translateX(26px);
}
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptextbottom {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 50%;
    margin-left: -60px;
}

.tooltip .tooltiptextbottom::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

.tooltip:hover .tooltiptextbottom {
    visibility: visible;
}
.tooltip .tooltiptextright {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -20%;
    left: 170%;
}

.tooltip .tooltiptextright::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}

.tooltip:hover .tooltiptextright {
    visibility: visible;
}

.tooltip .tooltiptextleft {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -20%;
    right: 170%;
}

.tooltip .tooltiptextleft::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent black;
}

.tooltip:hover .tooltiptextleft {
    visibility: visible;
}