form
  input.datepicker
    width: 100px
    display: inline-block
  &.inline
    display: inline-block
  .form-actions
    [type="submit"]
      +button
    .workflow-step-assign-button
      +button($bg: $primary-color, $padding: $button-sml)
      margin-right: 8px
    .workflow-step-back-button
      +button($bg: $secondary-color, $padding: $button-sml)
      margin-right: 8px
    .workflow-step-process-button
      +button($bg: $primary-color, $padding: $button-sml)
      margin-right: 8px
    .workflow-step-overdue-button, .workflow-instance-archive-button, .workflow-instance-revive-button
      +button($bg: $warning-color, $padding: $button-sml)
      margin-right: 8px
    .workflow-step-complete-button
      +button($bg: $success-color, $padding: $button-sml)
      margin-right: 8px
    .workflow-step-reject-button, .workflow-instance-reset-button
      +button($bg: $alert-color, $padding: $button-sml)
      margin-right: 8px
  .form-inputs
    &.notes
      textarea
        min-height: 180px
    &.notes-to-append
      textarea
        min-height: 80px
    .field_with_hint
      textarea
        margin-bottom: 0
      .hint
        font-style: italic
        color: #777
  .notes-display
    @extend .panel
    height: 140px
    overflow-y: scroll
.plan_date-placeholder
  color: #777
  font-size: 0.7em

// Add space to check_box collection list
div.checkbox label input
  margin-right: 8px
.plan_date-placeholder
  color: #777
  font-size: 0.7em

body
  label
    &.number
      display: inline-block
      padding: 4px 10px
  input
    &.number
      width: 60px
      display: inline-block
  .apply-filter
    +button($bg: $primary-color, $padding: $button-tny)
  .error
    input, textarea
      border-color: $alert-color
  input[type="number"]
    text-align: right

.form-row
  +grid-row
  .form-label
    @media #{$small-only}
      +grid-column($columns:10, $center:true)
    @media #{$medium-only}
      +grid-column($columns:4, $offset:1)
    @media #{$large-up}
      +grid-column(3)
    &.half
      +grid-column(6)
  .form-field
    @media #{$small-only}
      +grid-column($columns:10, $center:true, $last-column:true)
    @media #{$medium-only}
      +grid-column($columns:4, $last-column:false)
    @media #{$large-up}
      +grid-column($columns: 4, $last-column:false)
    &.full
      @media #{$small-only}
        +grid-column($columns:10, $center:true, $last-column:true)
      @media #{$medium-only}
        +grid-column($columns:7, $last-column:true)
      @media #{$large-up}
        +grid-column($columns: 9, $last-column:true)
    &.half
      +grid-column(6)
  .form-info
    @media #{$small-only}
      +grid-column($columns:10, $center:true)
    @media #{$medium-only}
      +grid-column($columns:4, $offset:1)
    @media #{$large-up}
      +grid-column(3)
  .error-message
    color: $alert-color
