.formerror {
  background-color: #FFF;
  color: red;
  padding: 6px 4px 4px 4px;
  margin: 4px 0 2px 0;
  font-size: 0.8em;

  /* display: inline-block; */
}

.formerror ~ .formfield {
  border-color: #FF3D3D;
  border-style: dashed;
  border-width: 1px;
}

.formfield {
  margin: 8px;
  vertical-align: top;
}

.formfield.required label:before {
  content: "\f0a7";
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-right: 6px;
  color: #FF3333;
}

div.buttons {
  text-align: right;
}

label {
  font-size: 0.8em;
  display: block;
}

.formfield label {
  padding-bottom: 3px;
}

fieldset {
  margin: 10px 0 0 0;
  background-color: #F5FFFA;
  border-color: #006633;
  border-style: dashed;
  border-width: 1px;
}

legend {
  margin-left: 20px;
  color: #006633;
  background-color: #EBFFF5;
  padding: 6px 20px 6px 20px;
  border-color: #006633;
  border-style: dashed;
  border-width: 1px;
}

fieldset fieldset {
  margin: 6px;
}

fieldset fieldset legend {
  padding: 3px 10px 3px 10px;
  font-size: 80%;
}

input, textarea, select, option {
  padding: 2px;
  /* width: 100%; */
  padding: 6px;
}

button {
  background-color: #EBFFF5;
  border-color: #063;
  border-style: dashed;
  border-width: 1px;
  padding: 8px;
}

button:hover {
  background-color: #063;
  color: #FFF;
}

button[type=submit] {
  background-color: #66CC00;
  color: #FFF;
}

button[type=submit]:after {
  content: "\f1d8";
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-left: 6px;
  color: #FFFFFF;
}


input[type=text], input[type=tel], input[type=email], select, option, textarea {
  min-width: 100%;
  display: block;
}

input[id=strasse], input[id=ort] {
  display: inline-block;
  width: 80%;
}

input[id=plz], input[id=hausnummer] {
  display: inline-block;
  width: 10%;
}

input + label {
  display: inline-block;
  min-width: 0;
}

.noEditor {
  width: 100%;
}

input:focus, textarea:focus, select:focus {
  background-color: #FFFFCC;
}

ul.confirmvalues {
  list-style-type: none;
  padding: 6px 0 6px 0;
}

ul.confirmvalues span {
  font-weight: bold;
  text-decoration: underline;
}


@media (max-width: 767px) {
  select {
    padding: 6px;
  }

  option {
    padding: 6px;
  }

}

@media (min-width: 768px) {
  label {
    display: inline-block;
    width: 25%;
    position: relative;
  }

  input + label {
    display: inline-block;
    width: auto;
  }

  input {
    padding: 0px;
  }

  input[type=text], input[type=tel], input[type=email], select {
    display: inline-block;
    width: 65%;
  }

  input[id=strasse], input[id=ort] {
    display: inline-block;
    width: 45%;
  }

  input[id=plz], input[id=hausnummer] {
    display: inline-block;
    width: 8%;
  }

  textarea {
    min-width: 65%;
  }

}
.message {
  padding: 10px;
  background-color: #F0FFF7;
}

.success {
  background-color: #006600;
  color: #FFF;
}

.error {
  background-color: #990000;
  color: #FFF;
}

.warning {
  background-color: #FF9933;
  color: #000066;
}