/**	## HTML_forms.css v1.1 ##

  !! für Jüngling Formulare angepasste Version !!

	Dieses Stylesheet beinhaltet nur die Ergänzungen,
	falls das Original in einer neuen Version von eforms geändert wird.
	HTML_forms.css kann einfach im Head-Bereich oder im original Stylesheet eingebunden werden.

	Die einzelnen Klassen werden im Javascript (HTML_forms.js)
  den HTML-Elementen angefügt und funktionieren daher auch nur mit aktiviertem JavaScript.
**/

button {
  cursor: pointer;
}

:disabled {
  background: white !important;
}

/* Fügt hover und focus Effekt hinzu */
select:hover,
input:not([type='checkbox']):not([type='radio']):hover,
textarea:hover,
select:focus,
input:not([type='checkbox']):not([type='radio']):focus,
textarea:focus {
  border: 1px solid black !important;
}

:required:not([type='checkbox']):not([type='radio']) {
  border: 1px solid #ea0000 !important;
}

/* Fix, da HTML_forms_Patch.css von oberer Zeile überschrieben */
:required:not([type='checkbox']):not([type='radio']):hover,
:required:not([type='checkbox']):not([type='radio']):focus {
  border: 1px solid black !important;
}

input[type='radio'],
input[type='checkbox'] {
  opacity: 0;
}

input[type='radio'] ~ label::before,
input[type='checkbox'] ~ label::before {
  content: '';
  display: inline-block;
  position: absolute;
  left: 0px;
  vertical-align: middle;
  width: 12px;
  height: 12px;
  background: #e6e6e6;
  border: 0.07em solid grey;
  transition: background-color 0.2s, box-shadow 0.2s;
}
input[type='radio'] ~ label::before {
  border-radius: 50%;
}
input[type='radio'] ~ label:hover::before,
input[type='checkbox'] ~ label:hover::before {
  background: #aaaaaa;
  box-shadow: inset 0 0 0 3px #e6e6e6;
}
input[type='radio']:required ~ label::before,
input[type='checkbox']:required ~ label::before {
  border-color: #ea0000;
}
input[type='radio']:focus ~ label::before,
input[type='checkbox']:focus ~ label::before {
  border: 0.14em solid #5a5a5a;
}
input[type='radio']:checked ~ label::before,
input[type='checkbox']:checked ~ label::before {
  background: #5a5a5a;
  box-shadow: inset 0 0 0 3px #e6e6e6;
}

/* Fehlermeldung, z.B. kein JavaScript / Offline */
#no_js_error {
  margin: 0 !important;
  background: red;
  color: white !important;
  font-weight: bold !important;
  width: 100%;
  padding: 1em 3em;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  -webkit-animation: fadein 2.5s;
  animation: fadein 2.5s;
}

/* Animation verzögert Einblendung, um auf das JS zu warten */
@keyframes fadein {
  0% {
    opacity: 0;
  }
  66% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }
  66% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Speichern, Leerformular Drucken, Drucken/Weiter Buttons */
.btn-container {
  box-sizing: border-box;
  position: fixed;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  padding: 10px;
  background: lightgrey;
  box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.3);
}

/* Abstand, damit die Buttons (Senden, etc) bei kleineren Displays
*  nicht Teile vom Formular verdecken */
body {
  padding-bottom: 180px;
}

.btn {
  background: white;
  color: #b70000;
  text-align: center;
  font-size: 1em;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
  border: 1px solid grey;
  border-radius: 5px;
  padding: 7px 15px;
  transition: box-shadow 0.5s, background-color 0.5s, color 0.5s;
  display: block;
  width: 100%;
  margin-bottom: 5px;
}

.btn:hover,
.btn:focus,
.btn:active {
  background: #ffccc3;
  box-shadow: 3px 5px 10px rgba(0, 0, 0, 0.3);
}

.btn:focus,
.btn:active {
  color: black;
}

@media screen and (min-width: 720px) {
  .btn-container {
    padding: 10px 20%;
  }
}

/* mobile first */
@media screen and (min-width: 1024px) {
  .btn-container {
    width: 200px;
    right: 20px;
    bottom: 20px;
    background: transparent;
    box-shadow: none;
    padding: 10px;
  }
  .btn {
    border-left: 2px solid #b70000;
    border-radius: 0 5px 5px 0;
  }
  body {
    padding-bottom: 0;
  }
}

/* Buttons beim Druck ausblenden */
@media print {
  .btn-container {
    display: none;
  }
}
/**	## ENDE: HTML_forms.css ## */

/* Patch */
.left-cb-label {
  /* display: block !important;
  margin-left: 0 !important; */
  position: static !important;
}

.left-cb-input {
  position: static !important;
  float: left !important;
  /* margin-right: 10px !important;
  margin-bottom: 120px !important; */
}