form {
  width: 100%;
  padding: 0;
  margin: 1rem 0;
  overflow: auto;
}

form .radio {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 0.75rem;
  margin: 0.5rem 0;
}

form [type=checkbox],
form [type=radio] {
  height: 24px;
  width: 24px;
}

form [type=checkbox]+label,
form [type=radio]+label {
  padding-top: 0px;
}

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

form label {
  margin: 1.0rem 0 0.5rem;
  display: block;
}

form input,
form textarea,
form select {
  display: block;
  padding: 0.7rem;
  width: 100%;
  font-size: 1rem;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 2px;
  margin: 0.5rem 0;
}

form textarea {
  min-height: 15rem;
  padding: 0.5rem;
  resize: vertical;
  width: 100%;
}

textarea:not(.ckeditor) {
  width: 100%;
  padding: 12px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  box-sizing: border-box;
  min-height: 100px;
  font-family: 'Open Sans', tahoma, verdana, arial, helvetica, sans-serif;
}

form div:has(textarea) {
  margin: 0.5rem 0;
}


form input[type=submit],
form input[type=button],
a.btn {
  width: 100%;
  background-color: #555555;
  color: white;
  cursor: pointer;
  border: none;
  display: block;
  margin: 1rem auto;
  padding: 0.75rem;
  width: 250px;
  text-align: center;
  text-decoration: none;;
}

form input[type=submit]:hover,
form input[type=button]:hover,
a.btn:hover {
  background-color: #302f2f;
}


form .data-protection {display: flex; flex-wrap: wrap;}

form .data-protection > p:nth-of-type(1) {width: 40px;}

form .data-protection > p:nth-of-type(2) {
  width: calc(100% - 40px);
  padding-top: .75rem;
}


form p#legend {font-size: 80%; margin: 0.25rem 0;}


::placeholder,
select option:first-child {
  color: #7c7c7c !important;
}



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