.azh_config_item {
  padding: 0;
  .inner.aci_inner {
    box-shadow: none;
    h1 {
      margin-top: 16px;
      margin-bottom:12px;
      font-size:18px;
      line-height: 22px;
    }
    div.step-count {
      margin-top: 16px;
      margin-bottom: 12px;
      font-size: 2.2em;
    }
    div.step-title {
      font-size: 1.5em;
      line-height: 1em;
      font-weight: bold;
      margin-bottom: 16px;
      @include breakpoint($mobile-m) {
        font-size: 1.80em;
        line-height: 0.9em;
      }
    }
  }

  &.aci_background {
    background: left center no-repeat;
    background-size: cover;
    padding: 128px 0 64px;
    .inner {
      box-shadow: none;
      &.aci_inner {
        background: transparent;
      }
    }
  }


  &.aci_1 {
    .filterBox {
      .inner {
        padding-top:48px;
        ul {
          display: flex;
          justify-content: flex-start;
          flex-flow: wrap row;
          align-items: flex-start;
          li {
            float:none;
            width:auto;
            display: inline-block;
            width:100%;
            @include breakpoint($mobile-m) {
              margin-right: 3%;
              width:47%;
            }
            @include breakpoint($desktop-s) {
              margin-right: 3%;
              width:30%;
            }
            a {
            }

          }
        }
      }
    }
  }

  .filterBox {
    &.centered {
      width: 90%;
      margin: 0 auto !important;
      clear: both;
      float: none;
      @include breakpoint($desktop-s) {
        width: 50%;
      }
    }
    &.nofloat {
      float: none !important;
      @include breakpoint($desktop-s) {
        width: 50%;
      }
    }
  }
  .formBox {
    @extend .filterBox;
    fieldset {
      margin-top: 32px;
    }
  }
 .calculator-box {
   padding-left: 16px;
   padding-right: 16px;
   width:90%;
   //@include grid-span(8,3);
   margin:16px auto;
   box-sizing: border-box;
   .inner {
     text-align: center;
     box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.2);
     &.noshadow {
       box-shadow: none;
     }
   }
   @include breakpoint($desktop-s) {
     width: 50%;
   }

 }
  .aci_calcslider {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    margin-top:16px;
    .slider-container {
     width: 48%;
      padding: 0 1%;
      box-sizing: border-box;
      float:none;
      margin:16px 0 0;
      .slider-title {
        font-size:14px;
        line-height:16px;
        margin-bottom:8px;
      }
      .slider.slider-horizontal {
        width:100%;
        .slider-track {
          width: 100%;
      }

      }
    }
    .slider-label {
      font-size:14px;
      line-height:16px;
      color: $grey5;
      font-weight: normal;
      margin:2px 20px 0 0;
      float: right;
    }
  }


  .showBoxes {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    justify-content: center;
    .grid-item {
      display: flex;
      flex-flow: row wrap;
      align-items: stretch;
      justify-content: center;
      @include breakpoint($mobile-xl) {
        width: 25%;
      }
      .inner {
        height:auto;
        z-index:80;
        padding:16px 16px 0 16px;
        @include breakpoint($desktop-s) {
          height: 100%;
        }
      }
      .item-extra {
        width:100%;
        position: relative;
        z-index:70;
        background-color: #fff;
        a {
          display: block;
          color:$body-font-color;
          padding: 14px 10px;
          box-shadow: 2px 0px 5px 2px rgba(0, 0, 0, 0.2);
          font-size: 14px;
          line-height: 14px;
          overflow: hidden;
          margin-top: 2px;
          &:after {
            position: absolute;
            right:0;
            top:0;
            content:'\e91a';
            /*font-family: iconfont;*/
            color:#fff;
            font-size: 26px;
            line-height: 26px;
            background: $aqua;
            padding: 9px;
          }
          &:hover {
            color:$aqua;
            &:after {
              color:$aqua;
              background: $grey1;
            }
          }
        }
      }
    }

    h2 {
      max-height:64px;
      font-size:14px;
      background: $aqua;
      color:#fff;
      margin:-16px -16px 0 -16px;
      padding: 8px 16px;
      box-sizing: border-box;
      .small {
          font-weight: normal;
      }
    }
    .bundle-price {
      text-align: center;
      padding:16px 0 0;
      font-size:32px;
      font-weight: normal;
      line-height:32px;
      @include breakpoint($mobile-xl) {
        font-size: 26px;
      }
      .medium {
        font-size:24px;
      }
      .small {
        font-size: 14px;
      }
    }
    .bundle-licensefee {
      text-align: center;
      font-size: 14px;
    }
    .bundle_buttonwrapper {
      text-align: center;
      margin:0 auto;
      float:none;
      clear:both;
      margin-bottom:16px;
      button {
        margin: 10px 0;
        cursor: pointer;
        font-size: 14px;
      }
    }
    ul li:before {
      top:0px;
    }
    /*
    ul {
      list-style-type: disc;
      li {
        &:before {
          display: none;
        }
      }
    }
    */
  }
}



.aci_3 {
  padding-bottom: 100px;
}

.aci_virtualtable {
  margin-top:64px;
  box-shadow:2px 2px 5px 2px rgba(0, 0, 0, 0.2);
  position:relative;
  left:0;
  top:0;
  z-index:43;
  box-sizing:border-box;
  width:95%;
  margin:0 auto;
  //@include grid-span(12,1);
  //@include grid-span(6,1);
  display:block;
  &::-webkit-scrollbar {
    -webkit-appearance:none;
    width:11px;
    height:11px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius:8px;
    border:2px solid white; /* Angleichen mit Hintergrundfarbe-nicht transparent! */
    background-color:rgba(0, 0, 0, .5);
  }
  .vt_legend {
    width:100%;
    min-width:1180px;
    left:0;
    top:0;
    position:absolute;
    z-index:45;
    background:$aqua;
    color:#fff;
    padding:16px;
    font-weight:bold;
    box-sizing:border-box;
  }
  .vt_row {
    width:90%;
    min-width:1180px;
    position:relative;
    left:0;
    top:0;
    z-index:48;
    display:flex;
    flex-flow:row nowrap;
    align-items:stretch;
    justify-content:flex-start;
    box-sizing:border-box;

    .vt_inner {
      position:relative;
      left:0;
      top:0;
      z-index:50;
      padding:16px;
      margin:0 16px;
      background: #ced4d8;
      box-sizing:border-box;
      text-align:center;
      h2 {
        font-weight:normal;
        font-size:17px;
        line-height:20px;
        color: #243d51;
      }
      .vt_price {
        font-size:20px;
        line-height:22px;
        margin-top:16px;
        .small {
          font-size:14px;
          line-height:16px;
        }
      }
    }
    &.headerrow {
      .vt_inner {
        box-shadow:inset 0 5px 5px -5px rgba(36, 61, 81, 0.6);
      }
    }
    &.contentrow {
      .vtcol1 {
        .vt_inner {
          text-align:left;
          font-weight:bold;
        }
        .rowoverlay {
          position:absolute;
          z-index:50;
          box-shadow:2px 2px 5px 2px rgba(0, 0, 0, 0.2);
          background: rgba(36, 61, 81, 0.1);
          left:2px;
          //right:16px;
          right:17px;

          top:0;
          bottom:16px;
          display:flex;
          flex-flow:row nowrap;
          align-items:stretch;
          justify-content:flex-start;
          box-sizing:border-box;
          .rowlegend {
            position:relative;
            z-index:80;
            cursor:pointer;
            width:30%;
            font-weight:bold;
            .rl_arrow {
              display:inline-block;
              background:$aqua;
              color:#fff;
              position:relative;
              left:0;
              top:0;
              padding:4px;
              font-size:24px;
              line-height:20px;
              margin-right:12px;
            }
            .rl_title {
              display:inline-block;
              position:relative;
              top:-2px;
              padding:10px 10px 6px 10px;
              &.isfixed {
                background:fade_out(#f2fafa, 0.5);
              }

            }
          }
          .checkcol2,
          .checkcol3,
          .checkcol4,
          .checkcol5 {
            position:relative;
            z-index:22;
            padding:8px 0px 8px 28px;
            width:17.5%;
            display:flex;
            flex-flow:row nowrap;
            align-items:stretch;
            justify-content:center;
            box-sizing:border-box;
            text-align:center;
            color: #c7348b;
            font-size:large;
          }
        }
        .rowdesc {
          position:relative;
          left:0;
          top:0px;
          display:none;
          padding:48px 42px 24px 42px;
          z-index:60;
          p {
            position:relative;
            z-index:100;
          }
        }
      }
    }
    &.footerrow {
      button.choose-bundle {
        width:82.5%;
        margin:20px auto;
      }
    }
  }
  .vtcol {
    button {
      font-size:14px;
      cursor:pointer;
    }
    //float:left;
    &.vtcol1 {
      width:30%;
      z-index:50;
      &.pushed {
        z-index:80;
      }
    }
    &.vtcol2,
    &.vtcol3,
    &.vtcol4,
    &.vtcol5 {
      width:17.5%;
      z-index:40;
      display:flex;
      flex-flow:row nowrap;
      align-items:stretch;
      justify-content:center;
      box-sizing:border-box;
      .vt_inner {
        flex-grow:1;
      }
    }
    .hidden {
      display:none;
    }
  }
}

/// SLIDERS

.slider.slider-horizontal .slider-track {
  height:6px;
  margin-top: -3px;
}



/// FORM
#contentWrapper .azh_config_form {
  @extend .azh_config_item;
  padding: 20px 0 200px 0;

  .no-masonry {
    margin-top: 20px;
  }

  input.parsley-error, select.parsley-error {

  }

  p.add-person-title {
    font-weight:bold;
    margin-top: 10px;
  }

  div.add-person-button {
    float: none;
    margin-left: 16px;
    position: relative;
    @extend %pseudoIconElement;
    @extend .icon-plus-circle;
    font-size: 1em;
    padding-left: 0;

    input[type='button'].add-person {
      background-color: transparent;
      color: #4c4c4c;
      cursor: pointer;
      position: relative;
      z-index: 5;
      width: auto;
      padding-left: 26px;
    }
    &::before {
      position: absolute;
      z-index: 1;
      top: 10px;
      left: 4px;
      font-size: 1.2em;
      background: #fff none repeat scroll 0 0;
      color: #000;
      height: 100%;
      vertical-align: middle;
    }
  }


  div.form-text {
    padding-left: 16px;
    margin-bottom: 10px;
    margin-top: 10px;
    clear:both;
  }

  a.button-telefone {
    @extend .button-border;
    float: right;
    padding: 9px 32px;
    margin: 18px 16px 0 0;
    color: $viola;
  }
}

// Form buttons right aligned
div.formElementInline {
  display:inline-block;
}

div.button-container-right {
  text-align:right;
  clear:both
}

// SWITCH

#toggles {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  .toggle_wrapper {
    width: 240px;
    margin: 16px auto 0;

    .toggleswitch {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
      box-shadow: inset 0 2px 12px -5px rgba(36, 61, 81, 0.6);
      overflow: hidden;
    }

    a {
      width: 20px;
      font-size: 15px;
      line-height: 15px;
      display: block;
      padding: 9px 5px 7px;
      font-weight: bold;
      cursor: pointer;
      flex-grow: 1;
      text-align: center;
      margin: auto;
      color: $body-font-color;

      &.toggle {
        &.selected {
          background-color: $lightgrass;
          color: #000;
          box-shadow: 0px 2px 5px 2px rgba(36, 61, 81, 0.6);
        }
      }

      &.toggle {
        &.selected {
          //background-color: #A11919;
          //color: white;
          background-color: $lightgrass;
          color: #000;
          box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.2);
        }
      }
    }
  }
}

// form
.radio {
  float:left;
}

#bundle-details {
  margin-top: 32px;
}

// Confirmation page
.form-values {
  padding-top: 20px;
  clear: both;

  .label {
    width: 175px;
    clear: both;
    float: left;
  }

  .form-value {
    float: left;
    font-weight: bold;
  }
}

// Progress bar in button
div.progress-bar {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 0px;
  height: 100%;
  background-color: #ddd;
}

// PARSLEY
#step1-error-container {
  display: none;
  margin: 0 0 10px 16px;
  font-weight: bold;
}

#contentWrapper .azh_config_form .formBox .inner ul.parsley-errors-list {
  color: inherit;
  border: 0;
  margin: 0;
}

#contentWrapper .azh_config_form .formBox .inner ul li.parsley-required {
  width: auto;
  margin: 0 0 16px 8px;
}

// Confirmation page
#calculator-form h3 {
  font-weight: bold;
}

// Hack: Grid-Items 50%;
#c36.grid-item {
  width:100%!important;
}
.formElement.add-person-button.hideBeforeElement::before,
#contentWrapper .azh_config_form div.add-person-button.hideBeforeElement::before {
  display:none;
}
.formElement.add-person-button {
  min-height:24px;
}