body{
	background-color:#f2f2f2;
	margin: 0;
	padding: 0;
	moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto; 
   word-wrap: break-word;
	
}

label{
	cursor:pointer;
}
.hyphenate{
	hyphens: auto; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
	display: inline-block; 
	width:100%;
	
	
}

li {
    
	display: inline-block; 
	padding: 4px 4px 4px 40px ;
	
	
}

.homeicon{
	background: url(png/png/030-home.png) no-repeat #f3f3f3 16px 16px;
}

.kontoicon{
	background: url(png/png/011-black.png) no-repeat #f3f3f3 16px 16px;
}
.abmeldenicon{
	background: url(png/png/008-circle.png) no-repeat #f3f3f3 16px 16px;
}

li a {
    display: block;
    color: #666;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #ddd;
}

#panel, #flip {
    text-align: center;
	font-size:10px;
    border: none;
	width:15%;
	opacity: 0.9;
	font-style: italic;	
}


#panel {
    padding: 1px;
    display: none; 
	opacity: 0.9;
}

.banner{
	background-color:#4696A0;
	width: 100%;
	text-align:center;
	font-family: Helvetica;
	color: white;
	overflow:hidden;
	margin-left: center;
	margin-top: auto;
	margin-bottom: 2%;
	
	
}

#anmelde{
	background-color: white;
	width:60%;
	height:20%;
	margin-left: auto;
	margin-right: auto;
}

#login{
	border: 1px solid #e5e5e5;
	background-color:white;
	width: 360px;
	height: 350px;
	text-align:center;
	overflow:hidden;
	margin-top: 10%;
	margin-left: auto;
	margin-right: auto;
	
	
	padding: 0;
	

	
	
}

#log{
	border: 1px solid #e5e5e5;
	background-color:white;
	width: 660px;
	height: 100%;
	text-align:center;
	overflow:hidden;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
}

#ergebnisse{
	border: 1px solid #e5e5e5;
	background-color:white;
	width: 660px;
	height: 100%;
	text-align:center;
	overflow:hidden;
	margin-left: auto;
	margin-right: auto;	
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top:2%;
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
	
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); 

}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
	height:80%;
	text-align:left;
	white-space:pre-wrap;
	overflow: auto; /* Enable scroll if needed */ 
	
	
	-webkit-overflow-scrolling: touch;
	-webkit-overflow-scrolling: auto;
}

/* The Close Button */
.close1, .close2, .close3, .close4, .close5 {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
	 cursor: pointer;
}

.close1, .close2, .close3, .close4, .close5:hover,
.close1, .close2, .close3, .close4, .close5:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

input[type=text], select {
    width: 100%;
    padding: 14px 20px;
    margin: 2px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: none;
    box-sizing: border-box;
	-webkit-border-radius: none;
}


.logfield{
	width: 100%;
    padding: 16px 16px 16px 48px;
    margin: 2px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: none;
    box-sizing: border-box;
	-webkit-border-radius: 0;
}
.username{
	background: url(png/011-black.png) no-repeat #fff 16px 16px;
}
.password{
	background: url(png/010-security.png) no-repeat #fff 16px 16px;
}
.search{
	background: url(png/029-magnifying-glass.png) no-repeat #fff 16px 16px;
}

input[type=password], select {
    width: 100%;
    padding: 16px 16px 16px 48px;
    margin: 2px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: none;
    box-sizing: border-box;
	-webkit-border-radius: 0;
}

input[type=submit] {
    width: 100%;
    background-color: #4696A0;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: none;
    cursor: pointer;
	-webkit-border-radius:0;
	-webkit-appearance: none;
}

input[type=button] {
    width: 100%;
    background-color: #4696A0;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
	-webkit-border-radius:0;
	-webkit-appearance: none;
	
}
a{
	text-align:center;
	font-family: Helvetica;
	color: black;
	font-size: 12px;
	text-decoration:none;
}

.button {
    background-color: gray; */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
	-webkit-border-radius:0;
	-webkit-appearance: none;
}

.button3 {
	background-color: #ff6a6a;
	width: auto;
	height: 45px;
} /* Red */ 

input[type=checkbox] {
    width: 35px;
	height: 35px;
	cursor: pointer;
	align:middle;
	
	
	
}


.suchebegriff{
	
	width: auto;
	text-align:center;
	overflow:hidden;
	margin-left: center;
	margin-top: auto;
	margin-bottom: 1%;

	
}





table {
    border-collapse: collapse;
    text-align: left;
	
	border: none;
	width:100%;
	height:100%;
	
	
	
	
}

th, td {
    text-align: left;
    border: none;
	
	
}

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



/* ab hier ausgabe*/


    
	

table.ergeb{
	display:flex;
	align-items: center;
	justify-content:center;
    border-collapse: collapse;
	width:auto;
		border: none;
	
    
}

table.ergeb th{
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
		border: none;
	
}

table.ergeb td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
	width: 400px;
		border: none;
	
}

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
   {
#log{
	border: 1px solid #e5e5e5;
	background-color:white;
	width: 100%;
	height: 100%;
	text-align:center;
	overflow:hidden;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
}

#ergebnisse{
	border: 1px solid #e5e5e5;
	background-color:white;
	width: 100%;
	height: 100%;
	text-align:center;
	overflow:hidden;
	margin-left: auto;
	margin-right: auto;	
}

}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
 
   {

 #log{
	border: 1px solid #e5e5e5;
	background-color:white;
	width: 100%;
	height: 100%;
	text-align:center;
	overflow:hidden;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
}

#ergebnisse{
	border: 1px solid #e5e5e5;
	background-color:white;
	width: 100%;
	height: 100%;
	text-align:center;
	overflow:hidden;
	margin-left: auto;
	margin-right: auto;	
}

ul {
	display: inline-block; 
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
	
}

li {
    display: inline-block; 
}

}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
  
 #log{
	border: 1px solid #e5e5e5;
	background-color:white;
	width: 100%;
	height: 100%;
	text-align:center;
	overflow:hidden;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
}

#ergebnisse{
	border: 1px solid #e5e5e5;
	background-color:white;
	width: 100%;
	height: 100%;
	text-align:center;
	overflow:hidden;
	margin-left: auto;
	margin-right: auto;	
}

}

/* ----------- iPhone 6+ & 7----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
   { 

#log{
	border: 1px solid #e5e5e5;
	background-color:white;
	width: 100%;
	height: 100%;
	text-align:center;
	overflow:hidden;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
}

#ergebnisse{
	border: 1px solid #e5e5e5;
	background-color:white;
	width: 100%;
	height: 100%;
	text-align:center;
	overflow:hidden;
	margin-left: auto;
	margin-right: auto;	
}

}

/* ----------- iPad----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { 
#log{
	border: 1px solid #e5e5e5;
	background-color:white;
	width: 100%;
	height: 100%;
	text-align:center;
	overflow:hidden;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
}

#ergebnisse{
	border: 1px solid #e5e5e5;
	background-color:white;
	width: 100%;
	height: 100%;
	text-align:center;
	overflow:hidden;
	margin-left: auto;
	margin-right: auto;	
}
}


	/*
  	Flaticon icon font: Flaticon
  	Creation date: 19/08/2017 19:30
  	*/

@font-face {
  font-family: "Flaticon";
  src: url("./Flaticon.eot");
  src: url("./Flaticon.eot?#iefix") format("embedded-opentype"),
       url("./Flaticon.woff") format("woff"),
       url("./Flaticon.ttf") format("truetype"),
       url("./Flaticon.svg#Flaticon") format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "Flaticon";
    src: url("./Flaticon.svg#Flaticon") format("svg");
  }
}

[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {   
  font-family: Flaticon;
        font-size: 20px;
font-style: normal;
margin-left: 20px;
}

.flaticon-bars:before { content: "\f100"; }
.flaticon-arrows-4:before { content: "\f101"; }
.flaticon-interface-5:before { content: "\f102"; }
.flaticon-symbol-2:before { content: "\f103"; }
.flaticon-interface-4:before { content: "\f104"; }
.flaticon-interface-3:before { content: "\f105"; }
.flaticon-arrows-3:before { content: "\f106"; }
.flaticon-circle:before { content: "\f107"; }
.flaticon-cogwheel:before { content: "\f108"; }
.flaticon-security:before { content: "\f109"; }
.flaticon-black:before { content: "\f10a"; }
.flaticon-interface-2:before { content: "\f10b"; }
.flaticon-next:before { content: "\f10c"; }
.flaticon-shapes:before { content: "\f10d"; }
.flaticon-symbol-1:before { content: "\f10e"; }
.flaticon-folder:before { content: "\f10f"; }
.flaticon-arrows-2:before { content: "\f110"; }
.flaticon-arrows-1:before { content: "\f111"; }
.flaticon-square:before { content: "\f112"; }
.flaticon-interface-1:before { content: "\f113"; }
.flaticon-arrows:before { content: "\f114"; }
.flaticon-tool:before { content: "\f115"; }
.flaticon-symbol:before { content: "\f116"; }
.flaticon-interface:before { content: "\f117"; }
.flaticon-direction:before { content: "\f118"; }
.flaticon-plus-black-symbol:before { content: "\f119"; }
.flaticon-cog-wheel-silhouette:before { content: "\f11a"; }
.flaticon-sign-out-option:before { content: "\f11b"; }
.flaticon-magnifying-glass:before { content: "\f11c"; }
.flaticon-home:before { content: "\f11d"; }
.flaticon-share-option:before { content: "\f11e"; }