.form
  margin: 0 0 20px
  border-radius: 4px
  border: 1px solid $border !important
  background: $white !important
  padding: 5px 20px 10px 20px

  &.borderless
    border: none

  p
    color: $color-secondary
    font-size: 14px
    padding: 5px 0
    margin: 0 !important

    code
      color: $green-secondary

  h4
    font-weight: $weight-semibold !important
    color: $color !important
    margin-bottom: 15px !important

  .mtb20
    margin-top: 20px
    margin-bottom: 20px

.form-field
  display: inline-block
  width: 100%
  padding: 5px 0

  .helper
    font-size: 12px
    padding: 5px 0 0 5px
    color: $color

    a
      text-decoration: underline

.form-label
  color: $color-secondary
  font-size: 14px
  display: block
  padding: 5px 0
  font-family: $font-family-medium

  &.is-for-toggle
    float: left

.form-input
  display: block
  background: $white
  padding: 12px 16px
  outline: none
  width: 100%
  border: 1px solid $border
  border-radius: 4px
  font-size: 14px
  color: #354052
  background-image: linear-gradient(0deg, #F2F4F7 0%, #FFFFFF 100%)

  &::-webkit-input-placeholder
    color: $color-secondary

  &::-moz-placeholer
    color: $color-secondary

  &:-ms-input-placeholder
    color: $color-secondary

  &:-moz-olaceholder
    color: $color-secondary

  &:focus
    border-color: $border-blue

  &.has-error
    border-color: $red-secondary
    color: $red

  &.form-select
    height: 40px

.form-text
  color: $color-secondary
  font-size: 12px
  margin-bottom: 10px

textarea

  &.form-input
    background: $white
    font-size: 12px
    resize: none