/*
	Formular-Gestaltung based on
	https://blog.kulturbanause.de/2015/03/formular-styling-mit-css-select-listen-radio-buttons-und-checkboxen-individuell-gestalten/
*/

fieldset {
  padding: 0;
  border:none;
  margin: 0;
  margin-bottom: 28px;
}

/* Außerdem wie box-content mit bg-hellgrau: */
fieldset {
	padding: 20px;
	background-color: #EDE9E7;
}
/* Abstände erstes und letztes Element in Box-Content */
fieldset  > *:first-child {margin-top: 0px;}
fieldset  > *:last-child  {margin-bottom: 0px;}

legend {
	background-color: #EDE9E7;
	margin-left: -20px;
	margin-right: -20px;
	width: calc(100% + 40px);
	padding: 20px 20px 0 20px;
}

legend {
  font-size: 1.2em;
  font-weight: 600;
}

.box {
	background-color: #eee;
	padding: 1em;
}

.box div {
	clear: both; /* fix for IE8 */
}

/* Labels */

label {
  display: inline-block;
}

label{
  margin: .2em 0;
}
  
/* remove standard-styles */
input, select, textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border:none;
  border-radius: 0;
  font-size: 1em;
  width: 100%
} 

/* Input & Textarea */
input, textarea {
  background-color:white;
  border: 1px solid #bbb;
  padding: 10px;
  box-shadow:inset 0 2px 1px 0 rgba(0,0,0,0.2);
}

textarea {
  resize:vertical;
}

input:hover,
input:active,
textarea:hover,
textarea:active {
  border:1px solid #666;
}

/* Select */
select {
  width:100%;
  border: 2px solid #FFFFFF;
  padding: 10px 40px 10px 10px;
  box-shadow: 0 2px 1px 0 rgba(0,0,0,0.2);
  background-color:white;
  background-image:url(./images/select-arrow.png);
  background-position: right;
  background-repeat: no-repeat;
}

select:hover {
  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
}

/* Hide browser-styling in IE10 */
select::-ms-expand {
  display:none;
}

/* Hide custom-icons in lower versions of Internet Explorer (< IE10). */
.lt-ie10 select { 
    background-image: none; 
}

/* graceful degradation for ie8 */
input[type='checkbox'],
input[type='radio'] {
  width:auto;
  float:left;
  margin-right: .75em;
  background:transparent;
  border:none;
}

/* better styling only for modern browsers. To identify them, check for pseudoclass (:checked, :not(:checked)) */

/* hide standard inputs */
input[type='checkbox']:checked,
input[type='checkbox']:not(:checked),
input[type='radio']:checked,
input[type='radio']:not(:checked) {
  background: transparent;
  position: relative;
  visibility: hidden;
  margin:0;
  padding:0;
}

input[type='checkbox'] + label,
input[type='radio'] + label {
  cursor: pointer;
}

/* add custom inputs with ::before */
input[type='checkbox']:checked + label::before, 
input[type='checkbox']:not(:checked) + label::before,
input[type='radio']:checked + label::before,
input[type='radio']:not(:checked) + label::before {
    content:' ';
    display:inline-block;
    width: 17px;
    height:17px;
    position: relative;
    top:4px;
    border: 1px solid #bbb;
    background: white;
    margin-right: 1em;
    box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.1);
}

input[type=radio]:checked + label::before,
input[type=radio]:not(:checked) + label::before {
  border-radius: 30px;
}

input[type='checkbox']:hover  + label::before,
input[type='radio']:hover  + label::before {
  background:#ddd;
  box-shadow: inset 0 0 0 2px white;
}
  
input[type='checkbox']:checked  + label::before,
input[type='radio']:checked  + label::before {
  background:black;
  box-shadow: inset 0 0 0 2px white;
}