.form-inline {
  display: flex;
  justify-content: space-between;

  & > .form-group {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    justify-content: space-between;

    & > label:first-child {
      margin-left: 0;
    }

    label {
      margin-right: 10px;
    }
  }
}

.form-group {
  position: relative;
  margin-bottom: 32px;

  body.ui-normalize & {
    margin-bottom: 40px
  }

  &--align {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    flex-direction:  row;

    //margin-top:    31px;
    //padding-top:   30px;

    & > label {
      margin: 0 20px 0 0 !important;
      // color: rgb(152, 152, 152);
      display: flex;
      align-items: center;
      height: 60px;
      body.ui-normalize & {
        transform: translateY(-1px) !important;
      }
    }

    &--left {
      justify-content: flex-start;
    }

    &--right {
      flex-direction: row-reverse;

      & > label {
        margin: 0 0 0 20px !important;
      }
    }
    &--right-inline {
      flex-direction: row-reverse;
      justify-content: flex-end;

      & > label {
        margin: 0 0 0 20px !important;
      }
    }

    .ui-toggle {
      margin: 19px 0 39px;
    }
  }

  label {
    font-size:      15px;
    margin-left:    23px;
    margin-bottom:  8px;
    letter-spacing: 0;
    // font-weight: 300;

    body.ui-normalize &.ui-label {
      -webkit-font-smoothing: antialiased;
      margin-bottom: 0;
      position: relative;
      transform: translateY(-8px);
    }
  }
  .ui-hint {
    margin-left: 23px;
    margin-top:  12px;
  }
}

.form-control {
  -webkit-font-smoothing: antialiased;
  font-family:            $font-family-base;
  font-style:             normal;
  font-size:              18px;
  display:                block;
  font-weight:            400;
  width:                  100%;
  padding:                18px 22px;
  line-height:            22px;
  transition:             all .2s ease 0s;
  color:                  rgba(0,0,0,0.87);
  border:                 1px solid map_get($colors, 'grayLight');
  border-radius:          2px;
  background-color:       #fff;
  background-image:       none;
  background-clip:        padding-box;
  outline:                none;

  &[size] {
    width: auto;
  }
  &[type='number'] {
    -moz-appearance:textfield;
  }

  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  &::-ms-expand {
    background-color: transparent;
    border: 0;
  }

  &:focus {
    outline: none;
    box-shadow: 0 0px 15px -3px #cdcdcd;
  }

  &:disabled,
  &[readonly] {
    background-color: rgba(231, 231, 231, 0.53);
    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
    opacity: 1;
  }

  &:disabled {
    cursor: default;
    color: #9a9a9a;
  }
}

.has-danger {
  .ui-hint,
  .inner-addon > .ico {
    color: $brand-danger;
  }

  @include form-control-validation($brand-danger);

  .form-control-danger {
    background-image: $form-icon-danger;
  }
}
.has-success {
  .ui-hint,
  .inner-addon > .ico {
    color: $brand-success;
  }

  @include form-control-validation( map_get($colors, mediumSeaGreen) );

  .form-control-danger {
    background-image: $form-icon-success;
  }
}

// .form-text {
//   position: absolute;
//   // height: 0;
//   display: block;
//   margin: .55rem .9rem 0;
// }

.ui {
  &-input {

    &-pos {
      display:     flex;
      align-items:     flex-start;
      position:       relative;

      .ui-input--info-spacing & {
        padding-right: 50px;
      }
    }

    &__help {
      margin: 16px 10px 16px 16px;

      .ui-input--info-spacing &,
      .ui-input--info-absolute & {
        position:         absolute;
        margin:           0;
        top:              18px;
        right:            -40px;
      }
      .ui-input--info-spacing & {
        right: 10px;
      }

      // body.ui-normalize & {
      //   right: 10px;
      // }

      &__action, &__action.ui-action {
        // border-color: #2d9e6e !important;
        border-color: map_get($colors, limeGreen);
        color: #000000;

        &:hover {
          background:   map_get($colors, mediumSeaGreen);
          border-color: map_get($colors, mediumSeaGreen);
          color:        #ffffff !important;
        }
      }
    }
  }
  &-input-group {
    @extend .ui-control !optional;
    position: relative;
    display: inline-flex;
    align-items: center;
    border-collapse: separate;
    border-radius: 3px;

    & > .form-control {
      display: table-cell;
      float:   left;
      width:   100%;
      border:  none;
      margin:  0;

      &:focus {
        box-shadow: none;
      }

      //&:focus .ui-input-group {
      //  @extend .form-control:focus;
      //}
    }



    &__btn {
      white-space: nowrap;
      vertical-align: top;
      display: table-cell;
      padding: 18px 20px;
      line-height: 22px;

      .ui--disabled & {
        background-color: rgba(231,231,231,0.53);
      }
    }
    &__btn--left {
      border-right: 1px solid #e6e6e6;
    }
    &__btn--right {
      border-left: 1px solid #e6e6e6;
    }

    &__btn__hight {
      font-size:     16px;
      // display:       inline-block;
      // margin-top: -3px;
    }
  }

  &-input-updown {
    text-align: center;
    padding: 20px 5px;
  }
}