form{

}
fieldset {
  margin:0 0 2em 0;
  
  padding: 1em;
  border: #ccc solid 1px;
}

section, .section{
	/*padding-bottom: 1em;*/
	margin-bottom: 2em;
	/*border-bottom: #ccc solid 1px;*/
}
section:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}

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

label{
  display: block;
  margin: .2em 0;
}
.required{
	color: red !important;
}
form .hint{
	margin-bottom: 1em;
	background: rgba(255, 255, 0, 0.2);
	padding:1em;
}
input[type='submit'], .submitButton{
	font-size: 1.5em;
	padding: .5em 1em;
	background: #00d0ff;
	border-radius: 20px;
	color: white;
	display: inline-block;
	width: auto;
	margin:0 auto;
}
.submitButton:hover{
	cursor: pointer;
}
.submitButtonSuccess{
	background: #16b400;
}
.submitButtonError{
	background: #eb0000;
}

/* remove standard-styles */

input, select, textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border:none;
  border-radius: 0;
  font-size: 1em;
  width: 100%;
  outline: none;
}

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


/* Input & Textarea */
input, textarea {
  background-color: #f6f6f6;
  /*border-bottom: 1px solid black;*/
  padding:.5em 1em .5em 1em;
}

textarea {
  resize:vertical;
}

input:hover,
input:active,
textarea:hover,
textarea:active {
  /*border-bottom: 1px solid #00c6ff;*/
  outline: none;
}

/* Select */
select {
  width:100%;
  border: 1px solid #bbb;
  padding:.5em 1em .5em 1em;
  background-color:white;
  background-image:url(../images/forms/select_arrow.svg);
  background-size: 1.3em;
  background-position: 94%;
  background-repeat: no-repeat;
}

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

/* 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; 
}

select option {
    margin: 40px;
    background: rgba(0, 0, 0, 1);
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

/* 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: #00c6ff;
  box-shadow: inset 0 0 0 2px white;
}

/* range track */

.radioSliderOption:hover{
	cursor: pointer;
}

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  margin: 1em 0;
  background-color: rgba(0,0,0,0);
  padding-left: 0;
  padding-right: 0;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  background: #bbb;
  border-radius: 0px;
  border: 0px solid #000000;
}
input[type=range]::-webkit-slider-thumb {
  border: 4px solid #ffffff;
  height: 24px;
  width: 24px;
  border-radius: 12px;
  background: #00d0ff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -12px;
}
.radioSlider_inactive {
  background: red!important;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #121212;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  background: #000000;
  border-radius: 0px;
  border: 0px solid #000000;
}
input[type=range]::-moz-range-thumb {
  border: 3px solid #ffffff;
  height: 24px;
  width: 24px;
  border-radius: 24px;
  background: #00d0ff;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #000000;
  border: 0px solid #000000;
  border-radius: 0px;
}
input[type=range]::-ms-fill-upper {
  background: #000000;
  border: 0px solid #000000;
  border-radius: 0px;
}
input[type=range]::-ms-thumb {
  border: 3px solid #ffffff;
  height: 24px;
  width: 24px;
  border-radius: 14px;
  background: #00d0ff;
  cursor: pointer;
  height: 1px;
}
input[type=range]:focus::-ms-fill-lower {
  background: #000000;
}
input[type=range]:focus::-ms-fill-upper {
  background: #121212;
}