@charset "UTF-8";
/* CSS Document */
@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-Regular.ttf') format('truetype'), url('../fonts/lato-regular-webfont.woff2') format('woff2'), url('../fonts/lato-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Latobold';
  src: url('../fonts/Lato-Bold.ttf') format('truetype'), url('../fonts/lato-bold-webfont.woff2') format('woff2'), url('../fonts/lato-bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
body {
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  background-color: white;
  color: #333333;
  -webkit-animation: fade-in ease-in-out 1.4s;
  -moz-animation: fade-in ease-in-out 1.4s;
  animation: fade-in ease-in-out 1.4s;
  line-height: 2.4rem;
  padding-bottom: 3rem;
}
body * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body .clearfloat {
  clear: both;
  height: 0;
  font-size: 1px;
  line-height: 0px;
}
body a,
body a:active,
body a:focus {
  color: #2eacdc;
  outline: none;
}
body a img,
body a:active img,
body a:focus img {
  border: none;
}
body a:hover,
body a:active:hover,
body a:focus:hover {
  color: #30c2ef;
}
body img {
  width: 100%;
  height: auto;
}
body strong {
  font-family: 'Latobold', sans-serif;
}
body hr {
  margin-right: 15px;
  border: 2px solid #e3e5eb;
}
body h2,
body h3 {
  color: #333333;
  font-size: 2.5rem;
  font-family: 'Latobold', sans-serif;
}
body h2 {
  font-size: 3rem;
  margin-right: 2rem;
  padding-bottom: 1rem;
}
body h2 .simpleIcon {
  width: 2.75rem;
  margin-top: -0.75rem;
}
body #keyvisual {
  width: 100%;
  background: url('../res/img/keyvisual.png') no-repeat local center top;
  -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important;
  background-size: cover !important;
  background-position: center top !important;
  height: 54vw;
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}
body header #logo {
  position: absolute;
  width: 10vw;
  height: auto;
  top: 2rem;
  right: 1rem;
  max-width: 230px;
}
body header h1 {
  color: #333333;
  font-size: 5rem;
  font-family: 'Latobold', sans-serif;
  letter-spacing: 0.15rem;
  text-align: center;
}
body form {
  /* Validierungsanzeige */
}
body form section {
  /* The switch - the box around the slider */
}
body form section h2,
body form section h3 {
  color: #333333;
  font-size: 2.5rem;
  font-family: 'Latobold', sans-serif;
  letter-spacing: 0.1rem;
  clear: both;
}
body form section h2 {
  padding-top: 40px;
  font-size: 3rem;
}
body form section h3 {
  padding-top: 20px;
}
body form section .checkbox,
body form section .radio {
  display: inline-block;
  padding-right: 2rem;
}
body form section#vorherigerUnfall .clearfix,
body form section#filterFragen .clearfix {
  border-bottom: 1px solid #e3e5eb;
  margin-bottom: 30px;
  margin-right: 15px;
}
body form section .has-float-label {
  position: relative;
  margin-bottom: 30px;
  padding-left: 0;
}
body form section .has-float-label input,
body form section .has-float-label textarea {
  font-size: 1.6rem;
  padding: 10px;
  display: block;
  width: 100%;
  border: 1px solid #7e7e7e;
  height: auto;
  border-radius: 0;
}
body form section .has-float-label input:focus,
body form section .has-float-label textarea:focus {
  outline: none;
  border-color: #2eacdc;
}
body form section .has-float-label input.required,
body form section .has-float-label textarea.required {
  border-color: red !important;
}
body form section .has-float-label textarea {
  height: 15rem;
}
body form section .has-float-label label {
  color: #7e7e7e;
  font-size: 1.5rem !important;
  font-weight: normal;
}
body form section .has-float-label label:after {
  height: 10px;
}
body form section .has-float-label .form-control:focus {
  box-shadow: none;
}
body form section .has-float-label .form-control::placeholder {
  font-size: 1.4rem !important;
}
body form section .has-float-label .form-control:placeholder-shown:not(:focus) + * {
  top: 1em;
}
body form section .bootstrap-switch {
  border-radius: 0;
  border: 1px solid #7e7e7e;
  margin-bottom: 15px;
}
body form section .bootstrap-switch .bootstrap-switch-handle-on,
body form section .bootstrap-switch .bootstrap-switch-handle-off {
  border-radius: 0 !important;
  background-color: #2eacdc !important;
  color: white !important;
}
body form section .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
body form section .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
  background-color: #2eacdc;
}
body form section .bootstrap-switch span.bootstrap-switch-label:before {
  color: #acacac !important;
  content: "Ja";
}
body form section .bootstrap-switch.bootstrap-switch-on span.bootstrap-switch-label:before {
  color: #acacac !important;
  content: "Nein";
}
body form section .switchElement {
  margin-bottom: 30px;
}
body form section .toggleAnswer.required .btn {
  border-color: red !important;
}
body form section .toggleAnswer .btn {
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: 1px solid #7e7e7e;
  border-bottom: 1px solid #7e7e7e;
  text-transform: none;
  padding: 5px 1.5rem;
  min-width: 7rem;
  opacity: 1;
}
body form section .toggleAnswer .btn.answerSelected {
  background-color: #2eacdc;
  color: white;
}
body form section .toggleAnswer .btn.toggleAnswerYes {
  border-left: 1px solid #7e7e7e;
}
body form section .toggleAnswer .btn.toggleAnswerYes:hover {
  background-color: #2eacdc;
  color: white;
}
body form section .toggleAnswer .btn.toggleAnswerNo {
  border-right: 1px solid #7e7e7e;
}
body form section .toggleAnswer .btn.toggleAnswerNo:hover {
  background-color: #2eacdc;
  color: white;
}
body form section#entbindungSchweigepflicht .checkbox input[type=checkbox] {
  margin-left: 0 !important;
}
body form .dateInput.notValid:after {
  color: #ffa600;
  content: "Ungültiges Datum";
}
body form .dateInput.notValid input {
  border: 2px solid #ffa600 !important;
}
body form .requiredFormField.notSet:after,
body form .requiredFormInputField.notSet:after,
body form .requiredFormTextareaField.notSet:after,
body form .requiredFormInputCheckbox.notSet:after {
  color: #ffa600;
  content: "Pflichtangabe";
  left: 0;
  top: 35px;
  position: absolute !important;
}
body form .requiredFormField.notSet.dateInput.notValid:after,
body form .requiredFormInputField.notSet.dateInput.notValid:after,
body form .requiredFormTextareaField.notSet.dateInput.notValid:after,
body form .requiredFormInputCheckbox.notSet.dateInput.notValid:after {
  top: 45px;
  content: "Pflichtangabe, ungültiges Datum";
}
body form .requiredFormField.notSet .bootstrap-select,
body form .requiredFormInputField.notSet .bootstrap-select,
body form .requiredFormTextareaField.notSet .bootstrap-select,
body form .requiredFormInputCheckbox.notSet .bootstrap-select {
  border: 2px solid #ffa600 !important;
}
body form .requiredFormField.notSet .bootstrap-select .btn,
body form .requiredFormInputField.notSet .bootstrap-select .btn,
body form .requiredFormTextareaField.notSet .bootstrap-select .btn,
body form .requiredFormInputCheckbox.notSet .bootstrap-select .btn {
  border: none;
}
body form .requiredFormField.notSet.toggleAnswer .btn,
body form .requiredFormInputField.notSet.toggleAnswer .btn,
body form .requiredFormTextareaField.notSet.toggleAnswer .btn,
body form .requiredFormInputCheckbox.notSet.toggleAnswer .btn {
  border-top: 2px solid #ffa600 !important;
  border-bottom: 2px solid #ffa600 !important;
  border-left-color: white !important;
  border-right-color: white !important;
}
body form .requiredFormField.notSet.toggleAnswer .btn.toggleAnswerYes,
body form .requiredFormInputField.notSet.toggleAnswer .btn.toggleAnswerYes,
body form .requiredFormTextareaField.notSet.toggleAnswer .btn.toggleAnswerYes,
body form .requiredFormInputCheckbox.notSet.toggleAnswer .btn.toggleAnswerYes {
  border-left: 2px solid #ffa600 !important;
}
body form .requiredFormField.notSet.toggleAnswer .btn.toggleAnswerNo,
body form .requiredFormInputField.notSet.toggleAnswer .btn.toggleAnswerNo,
body form .requiredFormTextareaField.notSet.toggleAnswer .btn.toggleAnswerNo,
body form .requiredFormInputCheckbox.notSet.toggleAnswer .btn.toggleAnswerNo {
  border-right: 2px solid #ffa600 !important;
}
body form .requiredFormField.notSet input,
body form .requiredFormInputField.notSet input,
body form .requiredFormTextareaField.notSet input,
body form .requiredFormInputCheckbox.notSet input,
body form .requiredFormField.notSet textarea,
body form .requiredFormInputField.notSet textarea,
body form .requiredFormTextareaField.notSet textarea,
body form .requiredFormInputCheckbox.notSet textarea {
  border: 2px solid #ffa600 !important;
}
body form .requiredFormInputField.notSet:after {
  top: 45px;
}
body form .requiredFormTextareaField.notSet:after {
  top: 155px;
}
body form .requiredFormInputCheckbox.notSet:after {
  position: initial !important;
  padding-left: 2rem;
  content: "Bitte bestätigen";
}
body form .requiredFormInputCheckbox.notSet input[type="checkbox"] {
  outline: 2px solid #ffa600;
}
body form input[type=date] {
  min-height: 4rem;
  font-size: 1.6rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  line-height: 22px !important;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}
body dl {
  margin-top: 2rem;
}
body dl.dl-horizontal dt {
  padding-bottom: 1rem;
  padding-top: 1rem;
  font-family: 'Latobold', sans-serif;
  white-space: normal;
  text-overflow: inherit;
}
body dl.dl-horizontal dd {
  padding-bottom: 1rem;
  padding-top: 1rem;
}
body footer {
  background-color: #f2f3f6;
  margin-top: 10rem;
  padding-bottom: 1rem;
  padding-top: 2rem;
  position: absolute;
  width: 100%;
}
body footer button {
  font-size: 1.25rem;
  color: #333333;
  background-color: rgba(255, 255, 255, 0);
  text-transform: none;
  padding: 0 10px;
  letter-spacing: 0;
}
body footer button:hover {
  color: #2eacdc;
  background-color: rgba(255, 255, 255, 0) !important;
}
body footer button:focus,
body footer button:active {
  border: none !important;
  outline-color: #f2f3f6 !important;
}
body footer li {
  outline-color: #f2f3f6 !important;
}
body footer li:focus {
  outline-color: #f2f3f6 !important;
}
body#danke header {
  margin-bottom: 2rem;
}
body#danke footer {
  bottom: 0;
}
body .bootstrap-select {
  margin-bottom: 3rem;
}
body .bootstrap-select.btn-group:not(.input-group-btn),
body .bootstrap-select.btn-group[class*="col-"] {
  width: auto !important;
}
body .btn {
  border-radius: 0;
  border: 1px solid #7e7e7e;
  text-transform: none;
}
body .container {
  overflow: hidden;
  padding-right: 0;
}
body .noPadding {
  padding: 0 !important;
}
body .noPaddingLeft {
  padding-left: 0 !important;
}
body button,
body .button {
  background-color: #2eacdc;
  border: none;
  color: white;
  border-radius: 0;
  letter-spacing: 0.1rem;
  padding: 1rem 3rem;
  text-transform: uppercase;
}
body button:hover,
body .button:hover {
  background-color: #30c2ef;
}
body button.description,
body .button.description {
  background-color: white;
  border: none;
  font-size: 1.75rem;
  color: #2eacdc;
  padding: 0 0 0 0.5rem;
}
body button.description:hover,
body .button.description:hover {
  background-color: white;
}
body button.description:focus,
body .button.description:focus {
  outline-color: white !important;
}
body button.description .simpleIcon,
body .button.description .simpleIcon {
  width: 2rem !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
}
body .modal h3 {
  font-size: 1.75rem;
}
body .modal h4.modal-title {
  font-size: 16px;
}
/*****Etc*****/
/*Continue to define the other sections one by one*/
@media only screen and (max-width: 767px) {
  body header #logo {
    width: 15vw;
    margin-left: 0;
    top: 1rem;
    right: 1rem;
  }
  body header h1 {
    font-size: 2.5rem;
  }
  body h2 {
    font-size: 2rem;
  }
  body h2 i {
    font-size: 3rem;
  }
  body form section h2,
  body form section h3 {
    text-align: left;
    font-size: 1.75rem;
    padding-top: 0;
  }
  body form section h2 {
    font-size: 2rem;
    padding-top: 1rem;
  }
  body form section h3 {
    padding-top: 2rem;
  }
  body form section .formElementGroup {
    margin-bottom: 5px;
  }
  body form section .formElementGroup label {
    font-size: 1.25rem;
  }
  body .bootstrap-select {
    margin-bottom: 2rem;
  }
  body .bootstrap-select.btn-group:not(.input-group-btn),
  body .bootstrap-select.btn-group[class*="col-"] {
    width: 100% !important;
    padding-right: 15px;
  }
  body .noPaddingLeft {
    padding: 0 !important;
  }
  body dl.dl-horizontal {
    padding-right: 2rem;
  }
  body dl.dl-horizontal dt {
    padding-bottom: 0;
  }
  body dl.dl-horizontal dd {
    padding-top: 0;
  }
}
@media only screen and (min-width: 768px) {
  body dl.dl-horizontal dt {
    text-align: left;
    width: 30%;
  }
  body dl.dl-horizontal dd {
    margin-left: 35%;
  }
}
@media only screen and (min-width: 992px) {
  body #keyvisual {
    height: 66vh;
  }
}

.picker-fixed .picker-footer {
    padding-bottom: 70px;
}