h2 {
  /*font-size: 5.9vw;*/
  text-align: center;
}

h3 {
  text-align:left;
}

a:visited {
  color: blue;
  background-color: transparent;
  text-decoration: none;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

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

input[type=number], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

input[type=date], select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: white !important;
  resize: vertical;
}

input[type=time], select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

input[type=submit] {
  background-color: #04AA6D;
  box-shadow: 2px 2px 5px #2E2E2E;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  float: right;
}

input[type=submit]:hover {
  background-color: #45a049;
}

input[type=submit]:active {
  background-color: #45a049;
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 4px grey;
}

input[type=button] {
  background-color: #04AA6D;
  box-shadow: 2px 2px 5px #2E2E2E;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

input[type=button]:hover {
  background-color: #45a049;
}

input[type=button]:active {
  background-color: #45a049;
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 4px grey;
}

input[type=password], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

.container_proband {
  /*display: flex;
  /*flex-direction: row;*/
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  margin: 0% 10%;
}

.container_fragebogen {
  /*display: flex;
  /*flex-direction: row;*/
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  margin: 0% 10%;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-50 {
  float: left;
  width: 90px;
  margin-top: 6px;
  margin-right: 5px;
}

.proband_plz {
  float: left;
  width: 80px;
  margin-top: 6px;
  margin-right: 5px;
}

.col-55 {
  float: left;
  width: 170px;
  margin-top: 6px;
  margin-right: 5px;
}

.col-56 {
  float: left;
  width: 100%;
  margin-top: 6px;
}

.col-60 {
  width: 170px;
  margin-top: 6px;
}

.col-75 {
  float: left;
  width: 300px;
  margin-top: 6px;
  margin-right: 5px;
}

/* Elemente Styles auf Fragebogenseite (terminplaner_fragen.php, Seite 2) */

.fragebogen_row {
  display: flex;
  /* text-align: center; */
  align-items: center;
  margin-top: 7px;
}

label[name=fragebogen] {
  padding: 0px 0px 0px 0px;
  display: inline-block;
}

.fragebogen_label {
  display: inline-block;
  width: 350px;
}

.fragebogen_select {
  display: inline-block;
  width: 480px;
  text-align: center;
}

.fragebogen_button {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

/* --------------- */

.col-70 {
  float: left;
  width: 215px;
  margin-top: 6px;
  margin-right: 5px;
}

.col-71 {
  float: left;
  width: 147.5px;
  margin-top: 6px;
  margin-right: 5px;
}

.col-72 {
  float: left;
  width: 147.5px;
  margin-top: 6px;
  margin-right: 5px;
}

.col-end {
  float: left;
  width: 75%;
  margin-top: 6px;
}

.col-25 right {
  width: 120px;
  margin-left: 93.5%;
}

.wrapper {
  display: grid;
}

.box1 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 1;
}

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

.button {
   margin-top: 15px;
}

.col-77 {
  width: 300px;
  margin-top: 6px;
}

.col-80 {
  display: none;
  float: left;
  width: 300px;
  margin-top: 6px;
}

.ui-datepicker {
	/*margin-left: -5vw;*/
	transform: matrix(1, -0.00, 0.00, 1, -80, 0);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	/*transform: translate(-10vw,0);*/
}

.row[name=adresse_float] {
	float: left;
}


/* Responsive layout */

@media screen and (max-width: 1200px) {
  .fragebogen_row {
    justify-content: space-between;
    align-items: center;
    margin-top: 7px;
  }

  .fragebogen_select {
	/*width: calc(100% - 53%);*/
	/*margin-left: 20px;*/
    width: calc(100% - 200px);
	/*text-align: none;*/
  }
  
  .fragebogen_label {
	margin-right: 20px;
  }
  
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  

}

@media screen and (max-width: 1050px) {
  .container_fragebogen {
	margin: 0% calc(100% - 96%);
  }
  
  .fragebogen_label {
	width: 33%;
  }
  
  #strassenmedizin {
	hyphens: auto;
  }
  
  .fragebogen_select {
	width: 66%;
  }
}
  
@media screen and (max-width: 850px) {
  .container_fragebogen {
	margin: 0% calc(100% - 96%);
  }
  
  .fragebogen_label {
	width: 33%;
  }
  
  .fragebogen_select {
	width: 66%;
  }
}
  
  
@media screen and (max-width: 664px) {
  .row[name=adresse_float] {
     float: none;
  }
  
  .fragebogen_row {
    flex-direction: column;
  }

  .col-25, .col-75, .fragebogen_select, .col-end, input[type=submit] {
	width: 100%;
    margin-top: 0;
  }
  
  .fragebogen_label {
	width: 100%;
	margin-top: 9px;
	margin-right: 0px;
	margin-bottom: 9px;
	hyphen: none;
  }
  
  input[name=fragebogen_submit], input[name=termin_submit] {
    width: auto;
  }
  
  .col-75 {
	margin-bottom: 10px;
  }

  .col-70 {
	width: calc(100% - 85px);
  }
  
  .col-50{
    float: right;
    width: 90px;
    margin-right: 0px;
  }
  
  .proband_plz{
    float: right;
    margin-right: 0px;
  }
  
  .col-71 {
	float: left;
	width: calc(50% - 5px);
  }
  
  .col-72 {
	float: right;
	width: 50%;
    margin-right: 0px;
  }
  
  .container_fragebogen, .container_proband {
	margin: 0% 2%;
  }
  
  .fragebogen_select {
	margin-left: 0vw;
  }
}

/* Titel */
@media screen and (max-width: 525px) {
	.container_fragebogen {
		
	}
}

@media screen and (max-width: 400px) {
	.col-50, .col-71, .col-72 {
		width: 100%;
	}
	
	.fragebogen_row {
		margin-top: 1vw;
		font-size: 4vw;
	}
	
	select {
		padding: 3vw;
		font-size: 3vw;
	}
	
	input[name=fragebogen_submit] {
		transform: matrix(0.8,0,0,0.8,10,0);
	}
	
	input[name=fragebogen_submit]:active {
		transform: matrix(0.8,0,0,0.8,12,2);
	}
	
	input[name=zurueck] {
		transform: matrix(0.8,0,0,0.8,-10,0);
	}
	
	input[name=zurueck]:active {
		transform: matrix(0.8,0,0,0.8,-8,2);
	}
}

@media screen and (max-width: 350px) {
	.col-70, .proband_plz {
		width: 100%;
	}
}