@import (less) "variables.less";
@import (less) "mixins.less";
@import (less) "icons.less";
@import (less) "checkbox.less";
@import (less) "tooltips.less";
.clearfix{
  height: 0;
}
/*===============================================
Inputs
=================================================*/
.input-wrapper.bonzer-inputs{
  .flex();
  .box-sizing(border-box);
  font-family: @base-font;
  background: lighten(@light-gray-color, 5%);
  border-bottom: 1px solid @light-border;
  font-size: 13px;
  margin: 25px 0;
  position:relative;
  min-height: 38px;
  padding-bottom: 25px;

  > div {
    .flex();
    width: calc(~"100% - 250px");
    min-width: calc(~"100% - 250px");
    flex-wrap: wrap;
    align-items: flex-start;

    > button {
      background: @light-gray-color;
      border: 1px solid @light-border;
      .roundedcorners(5px) !important;
      .box-shadow(none) !important;
      border: 1px solid @light-border !important;
      background: @white;
      cursor: pointer;
      margin-left: 0;
      width: 40px;
      position: absolute;
      right: 1px;
      top: 0px;
      line-height: 36px;
      height: 38px;

      span{
        &.text{
          display: none;
        }
      }
      i{
        font-size: 15px;
      }
      &.remove{
        i{
          color: @danger-300;
        }
      }
      &.add{
        i{
          color: @success-500;
        }
      }
      &:focus{
        outline: none;
      }
    }
  }

  *{
    .box-sizing(border-box);
  }

  &.hidden{
    display: none !important;
  }

  h3{
    margin: 0;
    padding: 0;
    min-width: 100%;
  }

  p {
    &.desc{
      margin: 1px 0 0;
      color: @grey-300;
      font-weight: normal;
      clear: both;
      font-size: 13px;
    }
  }

  a{
    &.close-popup{
      right: 90px !important;
      top: 9px !important;
      color: @danger-500 !important;
    }
  }
  label{
    color: @dark-color;
    width: 250px;
    min-width: 250px;
    margin: 0 2px 2px 0;
    font-weight: bold;
    left: 0;
    font-size: 15px;
  }

  input, select, textarea{
    width:calc(~"100% - 48px");
    border: 1px solid @light-border;
    background-color: @light-gray-color !important;
    .box-shadow(none);
    .roundedcorners(5px);
    margin: 0;
    padding: 0 10px;
    min-height: 38px;
    display: block;
  }  
  select{
    min-width: 100%;
    width:100%;    
    float: none;
    padding: 0 5px;
    margin: 0 0 0 0;
    display: inline-block;
  }

  &.additional-options{
    select{
      width:calc(~"75% - 60px");
    }
    .add-option, .remove-options{
      width: 28px;
      height: 28px;
      border: 1px solid @success-500;
      margin: 0 0 0 2px;
      display: block;
      line-height: 24px;
      text-align: center;
      background: @success-300;
      float: left;
      cursor: pointer;
      i{
        color: @white;
      }
    }
    .remove-options{
      background: @warning-300;
      border-color: @warning-500;
    }
    .response{
      position: absolute;
      right: 72px;
      top: 0;
      height: 25px;
      line-height: 26px;
      background: @white;
      top: 3px;
      display: none;
      padding: 0 5px;
    }
  }
  .chosen-container-multi{
    width:100% !important;

    .chosen-choices{
      .roundedcorners(5px);
      background: @light-gray-color;
      border: 1px solid @light-border;
      .box-shadow(none);
      min-height: 38px;
      li{
        &.search-field{
          input[type=text]{
            height: 38px;
            min-height: 38px;
          }
        } 

        &.search-choice{
          background: @grey-500;
          color: @white;
          border: none;
          .box-shadow(none);
          .roundedcorners(5px);

          .search-choice-close{
            background: transparent;
            &:before{
              content: "\f00d";
              font: normal normal normal 12px/1 FontAwesome;
              color: @white;
            }
          }
        }
      }
    }
  }
  &.multi-select-input-wapper{
    .remove{
      display: none;
    }
  }
  &.multi-text-input-wapper{
    ul{      
      &.values-entered{
        padding: 10px 0;
        margin: 0;
        position: relative;
        float: left;
        padding-left: 50px;
        min-height:100px;
        width: 100%;
        display:none;

        &.has-values{
          display: block;
          background: @light-gray-color;
          margin: 0 -2px;
          width: calc(~"100% + 4px");
        }

        li{
          list-style: none;
          margin: 5px 2px;
          line-height: 1;
          max-height: 21px;
          float: left;

          &.sortable-placeholder{
            background: yellow;
            min-width: 150px;
            height: 21px;
          }

          p{
            padding: 1px 53px 1px 28px;
            background: @grey-600;
            .roundedcorners(21px);
            color: @white;
            height: 21px;
            position: relative;
            margin: 0;
            line-height: 19px;

            i{
              cursor: pointer;
              color: @white;
              margin-right: 3px;
              &.move-item, &.item-index, &.remove-item{
                background: @grey-400;
                padding: 0;
                position: absolute;
                .roundedcorners(0 21px 21px 0);
                right: 0px;
                top: 0px;
                width: 21px;
                line-height: 21px;
                cursor: move;
                text-align: center;
                margin: 0;
              }
              &.item-index{
                right: auto;
                left: 0px;                
                font-style: normal;
                .roundedcorners(21px 0 0 21px);
              }
              &.remove-item{
                right: 22px;
                cursor: pointer;
                .roundedcorners(21px 0 0 21px);
              }
            }
          }
        }
      }
    }
  }
  &.editor-input-wrapper{
    label{
      background: transparent;
      color: @white;
      border-color: transparent;
      width: 250px;
      min-width: 250px;
    }
    button{
      width: auto;
    }
    input, textarea{
      float: none !important;
      width: auto !important;
    }
    textarea{
      width: 100% !important;
      border-color: @light-border;
    }
  }
  input{
    &.radio-input, &.checkbox-input{
      width: auto;
      float: none;
      display: none !important;    
    }
    &.radio-input{
      width: 0;
      height: 0;
      min-height: 0;
      max-width: 0;
      margin: 0 !important;
      min-width: 0;
      display: inline-block !important;  
      opacity: 0;
      position: absolute;
    }
    &.checkbox-input{
      display: inline-block !important;
      margin:5px 15px 7px;
      min-height: 15px;
    }
  }
  .options{
    width: 100%;
    display: block;

    label {
      .roundedcorners(5px);
      background: @white !important;
      color: @grey-500 !important;
      border: 1px solid lighten(@grey-300, 20%);
      padding: 6px 10px;
      margin: 0 0 !important;
      min-width: 100px;
      float: none;
      display: inline-block;
      width: auto;
      cursor: pointer;
    }
    input{

      &:checked + label{
        border: 1px solid @grey-500 !important;
        background: @grey-500 !important;
        color: @white !important;
      }
    }
  }

  &.color-input-wapper{
    input{
      display: block !important;
      width: calc(~"100% - 87px");
      margin: 0 2px 0 0;
    }
    .sp-replacer{
      .roundedcorners(5px) !important;
      .box-shadow(0 0 0 1px @light-border inset);
      width: 40px;
      float: left;
      height: 38px;
      margin: 0 2px 0 0;
      border: none;
      background: @white;
      .sp-preview{
        height: 28px;
        border: 1px solid @white;
        width: 20px;
        margin: 0;
        float: left;
      }
      .sp-dd{
        width: 12px;
        text-align: right;
        position: relative;
        top: 5px;
      }
    }
  }
  &.textarea-input-wapper{
    min-height: 67px;

    textarea{
      font-family: @base-font;
      font-size: 15px;
      min-height: 100px;
      padding: 10px;
      
    }
    button{
      padding: 17px 5px;
      min-height: 65px;
      top: 0px;
      right: 2px;
      height: calc(~"100% - 25px");
    }
  }
  &.heading-input-wapper{
    background: @light-gray-color;
    padding: 15px;
  }
  &.upload-input-wapper, &.multi-upload-input-wapper{
    .images-wrapper{
      clear: both;
      background: #f0f0ee;      
      width: 100%;
      margin-top: 2px;
      text-align: center;           
      width: 100%;
      .image-wrapper{
        display: inline-block;
        position:relative;        
        margin: 10px 10px 0;
        padding: 1px;
        float: left;
        .roundedcorners(25px);
        img{              
          width: 50px;
          height: 50px;
          .roundedcorners(25px);
          .box-shadow(~"0 0 0px 2px #fff, 0 0 2px 4px #ddd");
        }
        i.fa{
          float: left;
          position: absolute;
          top: -4px;
          background: rgba(45, 45, 45, 0.21);
          width: 100%;
          height: 100%;
          border-radius: 50px;
          padding: 14px 3px;
          color: #FDFDFD;
          font-size: 18px;
          cursor: pointer;
          left: 0;
          top: 0;
          text-align: center;
          opacity:0;
          .transition(all, 0.25s , ease-out);
          &.move-img{
            top: -8px;
            right: -43px;
            padding: 0;
            display: inline-block;
            opacity: 1;
            width: auto;
            height: auto;
            background: transparent;
            color: @dark-color;
            cursor: move;
          }
        }
        &:hover{
          i.fa{
            opacity:1;
          }
        }

      }
      .sortable-placeholder{
        background: @orange-300;
        width: 60px;
        height: 60px;
        float: left;
        padding: 1px;
        display: inline-block;
        .box-shadow(~"0 0 0px 2px #fff, 0 0 2px 4px #ddd");
      }
    }
  }
  &.multi-upload-input-wapper{
    .images-wrapper{
      border: 1px dashed @grey-300;
      margin-top: 5px; 
      padding: 2px 0 2px 22px;
      position: relative;
      float: left;
    }
  } 
  &.icon-input-wapper{
    .input{
      width: calc(~"100% - 85px") !important;
      margin-right: 2px;
    }
    .icon-holder{
      .roundedcorners(5px);
      width: 38px;
      margin-right: 2px;
      float: left;
      text-align: center;
      line-height: 25px;
      background: @white;
      border: 1px solid @light-border;
      color: @indigo-600;
      height: 38px;
      padding: 7px 0;
      img{
        max-height: 18px;
        width: auto;
      }
      i{
        position: static;
        margin: 0;
        &.arrow{
          &:after{
            display: none;
          }
        }
      }
    }
    &.heading-input-wapper{
      padding: 0;
    }
  }
  &.style-1{
    &.checkbox-input-wapper{
      > label{
        padding-left: 0;
      }
    }
  }
  &.style-2, &.style-3{
    float: left;
    width: 100%;
    margin-bottom: 5px;
    padding: 2px 10px 10px;
    box-shadow: none;
    border-bottom: 2px solid @light-border;
    background: @light-gray-color;
    > label{
      padding: 0;
      background: @light-gray-color;
      border-width: 0;
      width: 100%;
      margin: 0;
      .box-shadow(none);
    }
    input, select, textarea{
      width: 100%;
    }
    select{
      width: 100% !important;
    }
    button{
      top: 30px;
      right: 10px;
      position: absolute;
      height: 28px;
      border: 1px solid @light-border;
    }
    p{
      &.desc{
        padding: 4px 6px 6px;
        background: darken(@grey-50, 7%);
        color: @grey-600;
        line-height: 1;
        position: relative;
        top: 1px;
      }
    }
    &.textarea-input-wapper{
      label{
        min-height: 16px;
        line-height: 28px;
      }
      > button{
        min-height: 63px;
      }
    }
    &.icon-input-wapper{
      .input{
        width: calc(~"100% - 74px") !important;
      }
      ul.bonzer-inputs-all-icons{
        top: 100%;
      }
      a.close-popup{
        right: 95px !important;
        top: auto !important;
        bottom: 18px;
      }
    }
    .chosen-container-multi{
      width: 100% !important;
      background: @white;
    }
    &.color-input-wapper{
      input{
        width: calc(~"100% - 84px");
      }
    }
    &.checkbox-input-wapper{
      padding: 2px 10px;
      label{
        width: 100%;
        &:before, &:after{
          left: 0;
          top: 6px;
        }
      }
    }
    &.radio-input-wapper{
      .options{
        width: 100%;
        margin-left: 0;
        label{
          width: auto;
        }
      }
    }
    &.heading-input-wapper{
      padding: 0;
    }
  }
  &.style-2{
    &.checkbox-input-wapper{
      padding-bottom: 0;
      p{
        &.desc{
          margin: 0 -10px;
        }
      }
    }
  }
  &.style-3{
    background: @white;
    margin-bottom: 15px;
    .roundedcorners(5px);
    border: 1px solid @light-border;
    .box-shadow(0 2px 1px darken(@light-gray-color, 2%));
    padding: 15px 10px 10px;
    > button{
      top: 15px;
      &.remove{
        border-color: lighten(@danger-300, 15%);
        background: lighten(@danger-50, 5%);
        color: @danger-700;
      }
      &.add{
        border-color: lighten(@success-300, 15%);
        background: lighten(@success-50, 5%);
        color: @success-700;
      }

    }
    > label{
      position: absolute;
      width: auto;
      top: -6px;
      left: 8px;
      line-height: 1;
      height: auto;
      background: @white;
      padding: 0 5px;
    }
    p{
      &.desc{
        border-width: 0;
        margin: 0;
        padding: 3px 6px 6px;
        background: @light-gray-color;
        color: @grey-500;
        line-height: 1;
      }
    }
    input, select, textarea, .chosen-container-multi{
      border-width: 0 0 1px 0;
      padding: 0;
      line-height: 26px;
      &:focus{
        outline: none;
        border-bottom-color: @grey-700;
      }
    }
    .chosen-container-multi{
      .chosen-choices{
        padding-left: 0;
        border-width: 0 0 1px 0;
      }
    }
    &.heading-input-wapper{
      p{
        &.desc{
          padding: 6px;
          border-top: 1px solid @light-border;
        }
      }
    }
    &.textarea-input-wapper{
      label{
        line-height: 1;
      }
    }
    &.icon-input-wapper{
      .icon-holder{
        padding: 3px;
        border-width: 0 0 1px;
        i{
          font-size: 22px;
        }
        img{
          max-height: 23px;
        }
      }
    }
    &.color-input-wapper{
      .sp-replacer{
      }
    }
    &.checkbox-input-wapper{
      min-height: 38px;
      label{
        width: auto;
        padding-left: 5px;
        &:before, &:after{
          left: 4px;
          top: 18px;
        }
      }
      p{
        &.desc{
          line-height: 1;
          margin: 34px -10px 0;
          position: relative;
          top: 2px;
          .roundedcorners( 0 0 5px);
        }
      }
    }
  }
}
@media(max-width: 767px){
  .input-wrapper{
    &.checkbox-input-wapper{
      label{
        display: inline-block;
        width: calc(~"100% - 35px");
      }
    }
    .options{
      float: left;
      width: calc(~"60% - 2px");
      margin: 0;
    }
    > label{
      width: 40%;
    }
    input, textarea{
      width: calc(~"60% - 43px");
    }
    select, .chosen-container{
      width: calc(~"60% - 2px") !important;
    }
    &.color-input-wapper{
      input{
        width: calc(~"60% - 85px");
      }
    }
    &.icon-input-wapper{
      .input{
        width: calc(~"60% - 75px") !important;
      }
    }
  }
}