body { margin: 0px;}
/*td { vertical-align: top; }*/
@viewport {
  width: device-width ;
  zoom: 1.0 ;
}


.tableCon {
width: 100%; 
max-width: 800px; 
min-width: 100px;
background-color: #FFFFFF;
}

.containerDiv{
width: 600px; 
margin: auto;

}



/*  Linkboxes. */
.nolinkbox {
	background-color: #adafaf;
	color: white;
  	padding: 12px 20px;
  	text-align: left;
  	text-decoration: none;
  	display: block;
  	border: none;
  	border-radius: 4px;
  	float: center;
  	font-family: Helvetica, Arial, Verdana, sans-serif;
  	font-size: 13px;

}

.activebox {
	background-color: #007b33;
	color: #FFFFFF;
  	padding: 12px 20px;
  	text-align: left;
  	text-decoration: none;
  	display: inline-block;
  	border: none;
  	border-radius: 4px;
  	float: center;
  	font-family: Helvetica, Arial, Verdana, sans-serif;
  	font-size: 13px;

}

.linkbox {
	background-color: #007bb6;
	color: #FFFFFF;
  	padding: 12px 20px;
  	
  	text-decoration: none;
  	
  	border: none;
  	border-radius: 4px;
  	cursor: pointer;
  	float: center;
  	font-family: Helvetica, Arial, Verdana, sans-serif;
  	font-size: 13px;

}


.linkbox a:link {
	color: #FFFFFF;
}

.linkbox a:visited {
	color: #FFFFFF;
}

.linkbox:hover {
  background-color: #046fa2;
}

.fullwidth { width: 100%; }

.orangebox {
	background-color: #cc8116;
	color: #FFFFFF;
  	padding: 12px 20px;
  	text-align: left;
  	text-decoration: none;
  	display: inline-block;
  	border: none;
  	border-radius: 4px;
  	float: center;
  	font-family: Helvetica, Arial, Verdana, sans-serif;
  	font-size: 13px;

}

.darkgraybox {
	background-color: #808080;
	color: #FFFFFF;
  	padding: 12px 20px;
  	text-align: left;
  	text-decoration: none;
  	display: inline-block;
  	border: none;
  	border-radius: 4px;
  	float: center;
  	font-family: Helvetica, Arial, Verdana, sans-serif;
  	font-size: 13px;

}

.green_opacity {
	background-color: #f5f5f5;
	color: #000000;
  	padding: 12px 20px;
  	text-align: left;
  	text-decoration: none;
  	display: inline-block;
  	border: 2px solid;
  	border-color: #007b33;
  	border-radius: 4px;
  	float: center;
  	font-family: Helvetica, Arial, Verdana, sans-serif;
  	font-size: 13px;

}
.red_opacity {
	background-color: #f5f5f5;
	color: #000000;
  	padding: 12px 20px;
  	text-align: left;
  	text-decoration: none;
  	display: inline-block;
  	border: 2px solid;
  	border-color: #9b0206;
  	border-radius: 4px;
  	float: center;
  	font-family: Helvetica, Arial, Verdana, sans-serif;
  	font-size: 13px;

}






/* the next block allows to adjust for different devices like smartphones... */

@media screen and (max-width: 479px) {
  /* comes into effect for screens less than 479 pixels like smartphones*/
  .logo { width: 175px;  height: 26px;  }
}
@media screen and (min-width: 480px) {
  /* comes into effect for screens larger than or equal to 480 pixels like large tablets or desktops */
  .logo { width: 263px;  height: 39px;}
}

.text {  font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 13px; color: #000000; line-height: 20px; margin-left: 4px;}
.text_hoch {  font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 13px; color: #000000; line-height: 25px; margin-left: 4px;}
.headline {  font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 15px; color: #000000; line-height: 20px; margin-left: 4px; font-weight: normal;}
.errortext {  font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 13px; color: red; line-height: 20px; margin-left: 4px;}
.successtext {  font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 13px; color: green; line-height: 20px; margin-left: 4px;}
.littlegray {  font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 10px; color: #adafaf; line-height: 10px; margin-left: 4px;}

#participant_lists {
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 13px;
  border-collapse: collapse;
  width: 100%;
}

#participant_lists td, #participant_lists th{
  border: 1px solid #ddd;
  padding: 5px;
}

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

#participant_lists tr:hover {background-color: #ddd;}

#participant_lists th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #007bb6;
  color: white;
}



/*CONTAINERS */
.containerLogin {
  width: 95%;
  max-width: 450px;
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 10px;
  margin: auto;
}

/* Floating container for login inputs */
.containerLoginInputs {
	width: 100%;
	max-width: 400px;
	margin-top: 6px;
	margin: auto;
}


.containerLoginLarge {
  width: 900px;
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 10px;
  margin: auto;
}

/* Floating container for login inputs */
.containerLoginInputsLarge {
	width: 850px;
	margin-top: 6px;
	margin: auto;
}






a:link {COLOR: #007bb6; BACKGROUND-COLOR: transparent; TEXT-DECORATION: none;
}
a:visited {COLOR: #007bb6; BACKGROUND-COLOR: transparent; TEXT-DECORATION: none;
}
a:hover {COLOR: #046fa2; TEXT-DECORATION: underline;
}
a:active {COLOR: #007bb6; BACKGROUND-COLOR: transparent; TEXT-DECORATION: none;
}

.text a:link {COLOR: #007bb6; BACKGROUND-COLOR: transparent; TEXT-DECORATION: none;
}
.text a:visited {COLOR: #007bb6; BACKGROUND-COLOR: transparent; TEXT-DECORATION: none;
}
.text a:hover {COLOR: #046fa2; TEXT-DECORATION: underline;
}
.text a:active {COLOR: #007bb6; BACKGROUND-COLOR: transparent; TEXT-DECORATION: none;
}



/* Style inputs, select elements and textareas */

input[type=text], textarea{
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type=number], select{
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}




.formM400 {
  width: 100%;
  max-width: 400px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
  float: center;
  margin: auto;
  -webkit-appearance: none;
  -moz-appearance: none;
appearance: none;
}
/* Style the label to display next to the inputs */
label {
  font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 15px; color: #000000; line-height: 20px; margin-left: 4px; font-weight: normal
  padding: 12px 12px 12px 0;
  display: inline-block;
}
/* Style the submit button */
input[type=submit] {
  width: 100%;
  max-width: 400px;
  background-color: #007bb6;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: center;
    -webkit-appearance: none;
  -moz-appearance: none;
}
input[type=submit]:hover {
  background-color: #046fa2;
}

/* Style the datetime-local button */
input[type=datetime-local] {
  padding: 12px 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  float: center;
    -webkit-appearance: none;
  -moz-appearance: none;
}

hr {
  border-top: 2px dashed #adafaf;
}

ul {
	list-style-type: square;
	list-style-position: outside;
	font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 13px;
}

li {
	padding-bottom: 8px;
	font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 13px;
}


.lowbutton {
	background-color: #007bb6;
	color: #FFFFFF;
  	padding: 5px 15px;
  	
  	text-decoration: none;
  	
  	border: none;
  	border-radius: 4px;
  	cursor: pointer;
  	float: center;
  	font-family: Helvetica, Arial, Verdana, sans-serif;
  	font-size: 13px;

}


.lowbutton a:link, a:visited {
	color: #FFFFFF;
}

.lowbutton a:visited {
	color: #FFFFFF;
}

.lowbutton:hover {
  background-color: #046fa2;
}

.lowbutton_green {
	background-color: #009933;
	color: #FFFFFF;
  	padding: 5px 15px;
  	
  	text-decoration: none;
  	
  	border: none;
  	border-radius: 4px;
  	cursor: pointer;
  	float: center;
  	font-family: Helvetica, Arial, Verdana, sans-serif;
  	font-size: 13px;

}


.lowbutton_green a:link, a:visited {
	color: #FFFFFF;
}

.lowbutton_green a:visited {
	color: #FFFFFF;
}

.lowbutton_green:hover {
  background-color: #006600;
}



.lowbutton_red {
	background-color: #ff0000;
	color: #FFFFFF;
  	padding: 5px 15px;
  	
  	text-decoration: none;
  	
  	border: none;
  	border-radius: 4px;
  	cursor: pointer;
  	float: center;
  	font-family: Helvetica, Arial, Verdana, sans-serif;
  	font-size: 13px;

}


.lowbutton_red a:link, a:visited {
	color: #FFFFFF;
}

.lowbutton_red a:visited {
	color: #FFFFFF;
}

.lowbutton_red:hover {
  background-color: #cc0000;
}




.intextbutton {
	background-color: #007bb6;
	color: #FFFFFF;
  	padding: 2px 2px;
  	
  	text-decoration: none;
  	
  	border: none;
  	border-radius: 4px;
  	cursor: pointer;
  	float: center;
  	font-family: Helvetica, Arial, Verdana, sans-serif;
  	font-size: 12px;

}


.intextbutton a:link, a:visited {
	color: #FFFFFF;
}

.intextbutton a:visited {
	color: #FFFFFF;
}

.intextbutton:hover {
  background-color: #046fa2;
}

.intextbutton_red {
	background-color: #ff0000;
	color: #FFFFFF;
  	padding: 2px 2px;
  	
  	text-decoration: none;
  	
  	border: none;
  	border-radius: 4px;
  	cursor: pointer;
  	float: center;
  	font-family: Helvetica, Arial, Verdana, sans-serif;
  	font-size: 12px;

}


.intextbutton_red a:link, a:visited {
	color: #FFFFFF;
}

.intextbutton_red a:visited {
	color: #FFFFFF;
}

.intextbutton_red:hover {
  background-color: #cc0000;
}

.intextbutton_green {
	background-color: #009933;
	color: #FFFFFF;
  	padding: 2px 2px;
  	
  	text-decoration: none;
  	
  	border: none;
  	border-radius: 4px;
  	cursor: pointer;
  	float: center;
  	font-family: Helvetica, Arial, Verdana, sans-serif;
  	font-size: 12px;

}


.intextbutton_green a:link, a:visited {
	color: #FFFFFF;
}

.intextbutton_green a:visited {
	color: #FFFFFF;
}

.intextbutton_green:hover {
  background-color: #006600;
}



.tooltip {
  position: relative;
  display: inline-block;

}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: gray;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
 bottom: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

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