@import variables
@import mixins

form
  margin-bottom: 20px

label
  cursor: pointer
  display: block
  margin-top: 10px
  margin-bottom: 0
  font-weight: normal

input
  &[type="number"], &[type="date"], &[type="email"], &[type="password"], &[type="text"]:not(.input-addon-field)
    color: color('dark')
    border: 1px solid #ccc
    border-radius: 3px
    width: 308px
    font-size: size('normal')
    height: 32px
    padding-bottom: 0
    margin-top: 10px
    padding-left: 3px;
    +appearance
    @include placeholder
      color: color('lighter')
  &[type="number"]:focus, &[type="date"]:focus, &[type="email"]:focus, &[type="password"]:focus, &[type="text"]:focus
    color: color('dark')
    border-color: #3c8dbc
    outline: 0
    box-shadow: 0 0 4px #fbeed5

input[type="number"]
  width: 70px

input[type="text"]:not(.input-addon-field)
  &.form-numeric
    width: 70px
  &.form-datetime, &.form-date
    width: 150px
  &.form-input-large
    width: 400px
  &.form-input-small
    width: 150px

textarea:focus
  color: color('dark')
  border-color: #3c8dbc
  outline: 0
  box-shadow: 0 0 4px #fbeed5

textarea
  border: 1px solid #ccc
  border-radius: 3px
  width: 400px
  max-width: 99%
  height: 200px

select
  font-size: 1.0em
  height: 32px
  border-radius: 3px
  max-width: 95%
  &:focus
    outline: 0

select[multiple]
  width: 300px

.tag-autocomplete
  width: 400px

.ui-autocomplete
  z-index: 200

span.select2-container
  margin-top: 2px

.form-actions
  border-top: 1px dotted #ccc
  margin-top: 10px
  padding-top: 10px
  clear: both

.form-required
  color: red
  padding-left: 5px
  font-weight: bold

  @include xs-device
    display: none

input.form-error, textarea.form-error
  border: 2px solid #b94a48

input.form-error:focus, textarea.form-error:focus
  box-shadow: none
  border: 2px solid #b94a48

.form-errors
  color: color('error')
  list-style-type: none

ul.form-errors li
  margin-left: 0

.form-help
  font-size: size('small')
  color: brown
  margin-bottom: 15px

.form-inline
  padding: 0
  margin: 0
  border: none
  label
    display: inline
  input, select
    margin: 0 15px 0 0
  .form-required
    display: none

.form-inline-group
  display: inline

.form-columns
  +display-flex
  +flex-direction(row)
  +flex-wrap
  +justify-content(flex-start)

  .form-column
    margin-right: 25px
    flex-grow: 1

.form-login
  max-width: 350px
  padding: 20px
  border-radius: 10px
  margin: 8% auto 0
  border: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 20px 30px rgba(0,0,0,.2);
  background-color: #fff;
  li
    margin-left: 25px
    line-height: 25px
  h2
    padding-bottom: 20px
    margin-bottom: 20px
    font-weight: bold
    text-align: center
    font-size: 24px
    color: #202d3b
    border-bottom: 1px solid #ededed
    img
      margin: 0 auto
  #form-username, #form-password, #form-captcha
    height: 35px
    padding: 3px 6px

.reset-password
  margin-top: 20px
  a
    color: color('light')
