/*

<form class="form">
    <div class="form-fields">
        <div class="form-field">
          <label for="fm-contactform-email">E-Mail *</label>
          <span class="form-fullfield">
            <input type="email" id="fm-contactform-email" name="contactform[email]" value="">
          </span>
        </div>
    </div>
</form>


*/



/* FORMS, CHECKBOX, FORMHANDLER */

button,
input,
select,
textarea {
  border: 1px solid #cdcacc;  
  }
input.error,
select.error,
textarea.error {
  border-color: #DA352B
}
input[type=radio],
input[type=checkbox] {
  border: none;
  }
  

input, select, textarea {
  color: #888;
  padding: 4px;
  margin-bottom: 4px;
  }
  
input:focus, select:focus, textarea:focus {
  color: #000;
  }

button,
input[type=submit] {
  width: auto;
  color: #fff;
  background: rgb(0,120, 186);
  padding: 4px 2em;
  text-transform: lowercase;
  font-variant: small-caps;
  letter-spacing: 0.1em;
  }
button:hover, 
button:focus,
input[type=submit]:hover,
input[type=submit]:focus {
  color: #333;
  background: #fff;  
  }
/*
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}
*/

    /* simple check fields */
    .simple-field,
    .check-field {
      display: block;
      margin-bottom: 0.7em;
      }
    .simple-field strong,
    .check-field strong {
      color: #a20;
      display: block;
      padding: 0.35em 0;
      }
      .simple-field > div {
        display: -webkit-flex;
        -webkit-align-items: center;
        -webkit-justify-content: space-between;
        display: flex;
        align-items: center;
        justify-content: space-between;
        }
      .simple-field span {
        display: inline-block;
        padding-right: 1em;
        }
      .simple-field input {
        -webkit-flex-basis: 60%;
        flex-basis: 60%;
        }

    .check-field > div {
      position: relative;
      }
    .form-field .check-field input {
      top: 0.3em;
      position: absolute; 
      opacity: 1;     
      }
    .check-field span {
      display: block;
      padding-left: 2em;      
      }




/* formhandler */
.form {}
  .form-errors {
    font-size: 1.1em;
    font-weight: bold;
    list-style: none;
    background: #DA352B;
    color: #fff !important;
    padding: 0.5em 1em;
    margin-bottom: 1em;
    }    
  .form .error {
    color: #DA352B;
    font-weight: bold;
    }
   
 

.form-submit {
  margin: 1em 0 2em 160px;
  }   

.form-fields {
  display: table;
  table-layout: fixed;
  border-spacing: 0;
  width: 100%;
  margin: 1.5em 0 2em;
  }
  .form-field > * {
    display: inline-block;
    padding-bottom: 1em;
    }
  
  .form-fields > .form-field {
    display: table-row;
    }
    .form-fields .form-field > * {
      display: table-cell;
      vertical-align: top;
      }
    .form-fields .form-field > *:first-child {
      width: 160px;
      padding-right: 20px;
      }
  
    label.form-errorfield {
      color: #a00;
      font-weight: bold;
      }
    input.form-errorfield,
    textarea.form-errorfield {
      border-color: #a00;
      background: #fcfcfc;
      }
    input.form-errorfield:focus,
    textarea.form-errorfield:focus {
      border-color: #444;
      background: #fff;
      }

      .form-fullfield input,
      .form-fullfield textarea {
        width: 100%;
        }
      .form-fullfield textarea {
        min-height: 10em;
        }
      .form-fullname,
      .form-streetno,
      .form-zipcity {
        overflow: hidden;
      }
      .form-fullname > input {
        float: left;
        width: 49%;        
        }
      .form-fullname > input + input {
        float: right;
        }
      .form-streetno > input {
        float: left;
        width: 78%;
        }
      .form-streetno > input + input {
        float: right;
        width: 20%;        
        }
      .form-zipcity > input {
        float: left;
        width: 20%;
        }
      .form-zipcity > input + input {
        float: right;
        width: 78%;        
        }
      .form-limittext > input {
        max-width: 35em;
        }
        
    .form input[type=checkbox] {
      margin-right: 0.5em;
      }
    .js .form-trigger-target {
      display: none;
      }
    .js .form-trigger-target-visible {
      display: block;
      }
    .form-field label i {
      opacity: 0.5; 
    }


/*@media all and (max-width: 600px) {*/
  .form-fields > .form-field {
    margin-bottom: 0.35em;    
  }

  .form-fields > .form-field,
  .form-fields .form-field > * {
    display: block;
    padding-bottom: 0.35em;
    }
  .form-fields .form-field > *:first-child {
    width: auto;
    padding-right: 0;
    }
  .styled-checkbox,
  .form-submit {
    margin-left: 0;
    }   
/*}*/


.vis-ok .check-field {
  cursor: pointer;
  padding-bottom: 20px;
  padding-top: 20px;
  margin: 0;
}
.vis-ok .check-field:hover {
  background: rgb(224, 224, 224);
}
.vis-ok .check-field.without-image {
  width: 50%;
  margin: 0 auto;
}
.vis-ok .check-field.without-image h3 {
  margin-bottom: 0;
}