/*
Colors:
blau: #037efc
bg grau: #f2f2f4
*/
body {
  background-color: #f2f2f4;
  /*  background-image: url("../img/bg.png");*/
  background-position: top center;
  background-repeat: no-repeat;
}
a {
  color: #037efc;
}
a:focus, a:hover {
  text-decoration: none;
  color: #037efc;
}
h1 {
  font-size: 24px;
  margin: 1.1em 0 0 0;
}
h2 {
  font-size: 20px;
  margin: 0;
}
h3 {
  padding: 38px 0 0 0;
  text-align: center;
  font-size: 20px;
  margin: 0;
}
h4 {
  margin: 0;
  font-size: 15px;
  font-weight: bold;
  color: #1e1a1b;
}
sub {
  line-height: 1em;
}
.contentPane {
  display: none;
}
.contentPane.active {
  display: block;
}
.logo {
  margin: 0px 0 0 20px;
}
.subheader {
  margin: 2.1em 0 1em 0;
}
.container-fluid {
  max-width: 752px;
  opacity: 1;
  padding: 0 2em 0 2em;
}
input.form-control {
  display: inline-block;
  width: 35%;
  border-radius: 0;
  background-color: #f2f2f4;
  margin-right: 4px;
  padding: 4px;
  font-size: 1.1em;
  box-shadow: none;
  -webkit-appearance: none;
}
input[type=radio].form-control {
  display: none;
}
.radiobutton {
  background-image: url("../img/radiobutton2.png");
  background-repeat: no-repeat;
  background-position: center left;
  background-size: 16px 16px;
  padding-left: 1.5em;
  cursor: pointer;
}
.radiobutton.active {
  background-image: url("../img/radiobutton.png");
}
input.readonly {
  background-color: #fff;
  color: #037efc;
}
.row.white-row {
  line-height: 2em;
  padding: 7px 6px;
  margin: 3px 0;
  background-color: #fff;
  font-size: 1.1em;
}
.row.white-row > [class*="col"] {
  display: inline-block;
  font-size: 14px;
  vertical-align: middle;
}
span.mass {
  font-size: 18px;
  font-weight: bold;
}
span.mass sub {
  font-size: 10px
}
.btn {
  /* min-width: 20%; */
  margin: 14px 10px 0 0;
  background-color: #037efc;
  color: #fff;
  height: 2.5em;
  font-size: 1.3em;
  cursor: pointer;
}
.btn:hover {
  background-color: #77BAFF;
  color: #fff;
}
.btn .nextarrow {
  background-image: url("../img/next-phone.png");
  background-size: 20px 20px;
  background-repeat: no-repeat;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 3px 6px -3px 0;
}
.bottom-nav a.backlink {
  padding: 28px 20px 20px;
  font-size: 1.1em;
  display: block;
}
.modal-body {
  min-height: 500px;
}
.schema {
  background-image: url("../img/schematic_final.png");
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0;
  position: relative;
  background-color: #fff;
  margin: 0 auto 0;
  height: 635px;
  width: 495px;
}
.arrow {
  background-image: url("../img/arrow_left.png");
  width: 48px;
  height: 48px;
  display: inline-block;
  margin-top: 500%;
}
.arrow.arrow_left {
  margin-left: 10px;
}
.arrow.arrow_right {
  background-image: url("../img/arrow_right.png");
  margin-right: 10px;
}
.position-container {
  display: block;
  position: absolute;
  font-size: 24px;
  color: #037efc;
  font-weight: bold;
  text-align: center;
}
.position-container .schemaunit {
  color: #202020;
  font-size: 80%
}
.glyph-right {
  font-size: 32px;
  top: 170px;
  position: absolute;
  display: block;
  right: 10px;
}
.glyph-left {
  font-size: 32px;
  top: 170px;
  position: absolute;
  display: block;
  left: 10px;
}
.row.white-row.hasError{
  color: #df081a;
}
.row.white-row.hasError input[type=text] {
  background-color: #f9e1e1;
}
.errorHandler {
  background-image: url("../img/error.png");
  background-size: 21px;
  background-position: right;
  width: 100%;
  height: 32px;
  display: none;
  background-repeat: no-repeat;
  text-align: left;
  cursor: pointer;
}
.errorContent {
  width: 30%;
  position: fixed;
  color: #fff;
  top: 0;
  left: 0;
  padding: 20px 60px 20px 20px;
  z-index: 200;
  background-image: url("../img/popover_bg.png");
  background-position: right -10;
  display: none;
}
.errorContentTitle {
  font-weight: bold;
  margin-bottom: 10px
}
.errorContentText {
  line-height: 1.3em;
  margin-bottom: 10px;
}
/* Navigation */
.navigation {
  background-color: #fff;
}
.navigation div.text-center {
  padding: 0;
}
.navigation .circle {
  width: 20px;
  height: 20px;
  display: inline-block;
  background-size: 100%;
}
.navigation a[data-step="1"] .circle { background-image: url("../img/step1_inactive2x.png"); }
.navigation a[data-step="2"] .circle { background-image: url("../img/step2_inactive2x.png"); }
.navigation a[data-step="3"] .circle { background-image: url("../img/step3_inactive2x.png"); }
.navigation a[data-step="1"].active .circle { background-image: url("../img/step1_active2x.png"); }
.navigation a[data-step="2"].active .circle { background-image: url("../img/step2_active2x.png"); }
.navigation a[data-step="3"].active .circle { background-image: url("../img/step3_active2x.png"); }
.navigation a {
  color: #000;
  display: block;
  padding: 40px 0 20px 0;
}
.navigation a.logolink {
  padding: 36px 0 24px 0;
}
.navigation a.logolink.active {
  background-color: transparent;
}
.navigation a.firstElement {
  border-left: none;
}
.navigation a.active, .navigation a:hover .navigation a:focus .navigation a:active {
  color: #037efc;
  text-decoration: none;
}
.anleitung h4 {
  margin: 0 8px 0 8px
}
.anleitung p {
  margin: 0 0 10px 8px;
}
.anleitung h2 {
  margin: 0 0 0 4px;
}
/* Schema Values */
.position-container.vla {top: 0%;left: 0%; width: 40%;}
.position-container.q {top: 16%;left: 26%; width: 40%;}
.position-container.tla {top: 32%;left: 0%; width: 40%;}
.position-container.dp3 {top: 32%;left: 25%; width: 40%;}
.position-container.tle {top: 32%;left: 67%; width: 40%;}
.position-container.dp4 {top: 72%;left: 35%; width: 40%;}
.position-container.twe {top: 72%;left: 0%; width: 40%;}
.position-container.twa {top: 72%;left: 67%; width: 40%;}
.position-container.mmediuma {top: 90%;left: 30%; width: 40%;}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
  padding-left: 5px;
  padding-right: 5px;
}