.half-fields {
  @extend .half-grids-xs;
}
.quarter-fields {
  @extend .quarter-grids-xs;
}
.quad-fields {
  @extend .quad-grids-xs;
}


.field-group {
  @extend .mar-15-b;
  &.warning {
    label {
      @extend .fc-warning;
    }
    input, select, textarea {
      @extend .fc-warning;
      border-color: $colorWarning;
    }
    .field-msg {
      @extend .fc-warning;
    }
  }
  &.info {
    label {
      @extend .fc-info;
    }
    input, select, textarea {
      @extend .fc-info;
      border-color: $colorInfo;
    }
    .field-msg {
      @extend .fc-info;
    }
  }
  &.success {
    label {
      @extend .fc-success;
    }
    input, select, textarea {
      @extend .fc-success;
      border-color: $colorSuccess;
    }
    .field-msg {
      @extend .fc-success;
    }
  }
  &.error {
    label {
      @extend .fc-danger;
    }
    input, select, textarea {
      @extend .fc-danger;
      border-color: $colorDanger;
    }
    .field-msg {
      @extend .fc-danger;
    }
  }
  > label {
    display: block;
    @extend .mar-5-b;
  }
  .input {
    font-size: inherit;
    + .field-msg {
      @extend .mar-5-t;
    }
  }
  .field-msg {
    display: block;
    padding-left: 2px;
  }
}
.field-msg {
  display: block;
  &.align-right {
    @extend .text-right;
  }
  &.align-left {
    @extend .text-left;
  }
}
.form-headbar {
  @extend .align-center-y;
  @extend .align-between-x;
  @include padding($gap-val);
  @extend .mar-20-y;
  @extend .bg-white;
}