/* Klassen für Content-Registration */

	/* Bordered form */
	#anmeldeformular form {
		border: 3px solid #f1f1f1;
		height: 100%
	}
	

	/* Style inputs, select elements and textareas */
	#anmeldeformular input[type=text], select, textarea{
	  font-family:"Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
	  font-size:13px;
	  width: 100%;
	  padding: 12px;
	  border: 1px solid #ccc;
	  border-radius: 4px;
	  box-sizing: border-box;
	  resize: vertical;
	}

	/* Style the label to display next to the inputs */
	.registerrow label {
	  padding: 12px 12px 12px 0;
	  display: inline-block;
	}

	/* Customize the label (for checkbox) */
	.registerrow .regchkboxlabel {
	  float: left;
	  position: relative;
	  top: 12px;
	  left: 10px;
	  padding: 0px 35px 0px 35px; 
	  cursor: pointer;
	  -webkit-user-select: none;
	  -moz-user-select: none;
	  -ms-user-select: none;
	  user-select: none;
	}

	/* Hide the browser's default checkbox */
	.regchkboxlabel input[type=checkbox] {
	  position: absolute;
  	  opacity: 0;
  	  cursor: pointer;
  	  height: 0;
  	  width: 0;
	}
	/* Hide the browser's default radio */
	.regchkboxlabel input[type=radio] {
	  position: absolute;
  	  opacity: 0;
  	  cursor: pointer;
  	  height: 0;
  	  width: 0;
	}

	/* Create a custom checkbox */
	.checkmark {
	  position: absolute;
	  top: 0;
	  left: 0;
	  height: 20px;
	  width: 20px;
	  border: 1px solid #ccc;
	  background-color: #cfe8fc;
	  border-radius: 50%;
	}

	/* On mouse-over, add a yellow background color and a darker border */
	.regchkboxlabel:hover input ~ .checkmark {
	  border: 1px solid #808080;
	  background-color: #dc9d00;
	}

	/* On mouse-over, add a yellow background color and a darker border */
	.regchkboxlabel:hover input ~ .checkmark:after {
	  display: block;
	}

	/* When the checkbox is checked, add a blue background */
	.regchkboxlabel input:checked ~ .checkmark {
	  border: 1px solid #ccc;
	  background-color: #2196F3;
	}

	/* Create the checkmark/indicator (hidden when not checked) */
	.checkmark:after {
	  content: "";
	  position: absolute;
	  display: none;
	}
	
	/* Show the checkmark when checked */
	.regchkboxlabel input:checked ~ .checkmark:after {
	  display: block;
	}
	
	/* Style the checkmark/indicator */
	.regchkboxlabel .checkmark:after {
	  left: 3px;
	  top: 3px;
	  width: 8px;
	  height: 8px;
	  border-radius: 50%;
	  background: white;
	  border: solid white;
	}

/* Style the form icons */
	.registericon {
  	  padding: 12px;
  	  background: dodgerblue;
  	  color: white;
  	  min-width: 50px;
  	  text-align: center;
	  border: 1px solid #ccc;
	  border-radius: 4px;
	  box-sizing: border-box;

	}

/* Set a style for all buttons */
	.registercontainer button {
	  background-color: #4CAF50;
	  color: white;
	  padding: 12px 12px;
	  border: 1px solid #ccc;
	  border-radius: 4px;
	  cursor: pointer;
	  float: right;
	  width: 80px;
	  height: 42px;
	}
	.registercontainer #prevBtn {
	  float: left;
	}
			
	/* Style the submit button */
	.registercontainer input[type=submit] {
	  background-color: #4CAF50;
	  color: white;
	  padding: 12px 20px;
	  border: none;
	  border-radius: 4px;
	  cursor: pointer;
	  float: right;
	  width: 80px;
	}

	/* Style the container */
	.registercontainer {
	  border-radius: 5px;
	  background-color: #f2f2f2;
	  padding: 20px;
	  margin-left: auto;
	  margin-right: auto;
	  width: 90%;
	  min-height: 800px;
	  
	}

	.registerrow {
	  display: flex;
	  padding-left: 5px;
	  width: 100%;
	}

	.registersteprow {
	  display: flex;
	  width: 100%;
	}

	/* Floating column for labels: 25% width */
	.col-25 {
	  float: left;
	  width: 25%;
	  margin-top: 6px;
	}

	/* Floating column for labels: 25% width */
	.col-0 {
	  float: left;
	  width: auto;
	  margin-top: 6px;
	}

	/* Floating column for labels: 33% width */
	.col-33 {
	  float: left;
	  width: 33%;
	  margin-top: 6px;
	}

	/* Floating column for labels: 50% width */
	.col-50 {
	  float: left;
	  width: 50%;
	  margin-top: 6px;
	}

	/* Floating column for inputs: 75% width */
	.col-75 {
	  float: left;
	  width: 65%;
	  margin-top: 6px;
	}

	/* Floating column for inputs: 100% width */
	.col-100 {
	  float: left;
	  width: 100%;
	  margin-top: 6px;
	}

	/* Clear floats after the columns */
	.registerrow:after {
	  content: "";
	  display: table;
	  clear: both;
	}

	/* Mark input boxes that gets an error on validation: */
	input.invalid {
	  background-color: #ffdddd;
	}

	/* Hide all steps by default: */
	.registertab {
	  display: none;
	}

	/* Make circles that indicate the steps of the form: */
	.registerstep {
	  height: 15px;
	  width: 15px;
	  margin: 0 2px;
	  background-color: #bbbbbb;
	  border: none;
	  border-radius: 50%;
	  display: inline-block;
	  opacity: 0.5;

	}
	
	.registerstepline {
	  width: 2000px;
	  max-width: 40%;
	  height: 5px;
	  margin: 0 2px 4px 2px;
	  background-color: #bbbbbb;
	  border: none;
	  border-radius: 0%;
	  display: inline-block;
	  opacity: 0.5;
	  
	}

	.registerspacerline {
	  width: 4000px;
	  max-width: 100%;
	  height: 1px;
	  margin: 0 2px 4px 2px;
	  background-color: #333333;
	  border: none;
	  border-radius: 0%;
	  display: inline-block;
	  opacity: 0.2;
	  
	}
	
	/* Mark the active step: */
	.registerstep.active {
	  opacity: 1;
	  background-color: #dc9d00;
	}
	
	/* Mark the steps that are finished and valid: */
	.registerstep.finish {
	  background-color: #4CAF50;
	}

	/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
	@media screen and (max-width: 600px) {
	  .col-25, .col-75, input[type=submit] {
	    width: 100%;
	    margin-top: 0;
	  }
	}