$form-spacing-horizontal: 9px

#disclaimer, .alert
  background: $alert--background
  color: $alert--text
  margin: 5px auto 55px auto
  padding: 18px 35px
  line-height: 1.4
  border: 1px solid $alert--border
  border-radius: 3px
  box-shadow: 0 6px 35px rgba(0, 0, 0, .1)

  @media screen and (max-width: 400px)
    margin: -10px -10px 35px -10px
    padding: 13px 29px

  .section-title
    margin: 12px 0 5px

fieldset
  margin: 25px 0 0
  border: 1px solid #aaa
  padding: 0.25em 1.5em 0.5em
  outline: none

  @media screen and (max-width: 400px)
    margin-left: -10px
    margin-right: -10px

  legend
    background: $black
    color: $white
    width: 100%
    text-align: center
    padding: 0.5em

hr
  border: none
  border-top: 1px solid $input--border-color
  margin: 35px 0 40px
  width: 80px

.alert
  color: $alert--text--error
  background: $alert--background--error
  border-color: $alert--border--error

.form-container, .cancel_btn_wrap
  margin: 0 auto
  max-width: 670px
  padding-left: 5px
  padding-right: 5px

// custom styles
.form-container.login, .form-container.signup
  max-width: 360px
  .btn
    margin-bottom: 30px

.simple_form
  color: $grey
  .error
    background: $input--error--background
    color: $input--error--text
    font-size: 0.74rem
    padding: 6px 9px
    flex: 1 1 100%
  abbr
    text-decoration: none
    position: absolute
    margin-left: -16px
    color: $input--required-star
    align-self: flex-start

.form-inputs
  display: flex
  flex-flow: row wrap
  justify-content: stretch
  margin-left: -1 * $form-spacing-horizontal
  margin-right: -1 * $form-spacing-horizontal

.input
  flex: 1 1 600px
  display: flex
  flex-flow: row wrap
  margin-left: $form-spacing-horizontal
  margin-right: $form-spacing-horizontal
  margin-bottom: 15px
  position: relative
  text-align: left
  align-items: flex-start
  align-content: flex-start

.input--half
  flex-basis: 220px

label
  display: flex
  align-items: center
  width: 100%
  flex-shrink: 0
  font-weight: $font-light
  padding-top: 5px
  padding-bottom: 8px
  text-align: left

// all form input types
input[type=text], input[type=email], input[type=tel], input[type=date], input[type="url"], input[type=password], input[type=file], input[type=checkbox], textarea, select
  background: $input--background
  color: $input--text
  font-family: $font-body-family
  font-weight: $font-reg
  font-size: 100%
  border: 1px solid $input--border-color
  margin-bottom: 5px
  outline: none
  padding: 9px 14px
  width: 100%
  @include transition(150ms, border-color, ease-out, 0ms)
  @include placeholder-color($input--text--placeholder)
  &:focus
    color: $input--text--focus
    background-color: $input--background--focus
    border-color: $input--border-color--focus
    border-width: 2px
    padding: 8px 13px

// just selects
select
  @include appearance (none)
  background: asset-url("hackathon_manager/arrow_down_hover.svg"), $input--background
  background-repeat: no-repeat
  background-position: right
  background-size: auto 100%
  font-size: 100%
  border-radius: 0
  &:hover
    background-image: asset-url("hackathon_manager/arrow_down.svg")
  &:focus
    background-image: asset-url("hackathon_manager/arrow_down.svg")
  &.date:nth-child(2)
    flex: 3 0 120px
    margin-right: 2 * $form-spacing-horizontal
  &.date:nth-child(3)
    flex: 1 1 65px
    margin-right: 2 * $form-spacing-horizontal
  &.date:nth-child(4)
    flex: 1 1 85px

// checkbox
input[type=checkbox]
  @include appearance (none)
  width: 22px
  height: 22px
  padding: 1px
  margin: 0 10px 0 0
  &::after
    // Begin FontAwesome's .fa class
    font: normal normal normal 14px/1 FontAwesome
    text-rendering: auto
    -webkit-font-smoothing: antialiased
    -moz-osx-font-smoothing: grayscale
    // end .fa
    content: ""
    color: $primary
    font-size: 25px
    margin-left: 2px
    margin-top: -4px
    display: block
    opacity: 0
  &:hover
    background: #eee
  &:checked
    &::after
      opacity: 1
  &:focus
    padding: 0

// radio
.radio
  min-width: 170px

input[type=radio]
  margin-right: 10px

//Submit
input[type=submit]
  margin: 10px 0

//cancel button area on edit participant
.cancel_btn_wrap
  text-align: center

// Resume Upload
.participant_resume
  margin-top: 20px

.field_with_errors
  color: $red !important

.hint
  color: $input--hint
  font-style: italic
  width: 100%

.supporting-text
  color: $input--hint
  line-height: 1.5
  margin-left: $form-spacing-horizontal
  margin-right: $form-spacing-horizontal
  margin-bottom: 3px


// jquery ui override
.ui-autocomplete
  background: $input--background--focus
  border: 1px solid $input--border-color--focus
  color: $input--text--focus
  list-style: none
  padding: 0
  .ui-menu-item a
    padding: 2px 5px
    display: block
    &:hover, &.ui-state-focus
      background: $primary
      color: $white

// form wizard
.wizard-stage
  display: none
.wizard-current
  display: block

// selectize
.selectize
  width: 100%

.diagonal
  z-index: 1
  position: relative

.diagonal:before
  position: absolute
  content: ''

.diagonal:before
  -webkit-transform: rotate(-2deg)
  transform: rotate(-2deg)
  -webkit-transform-origin: 2% 0
  transform-origin: 2% 0
  top: 0
  left: -25%
  z-index: -1
  width: 150%
  height: 75%
  background: inherit

.formatted_boolean
  flex-flow: row wrap
  align-items: center
  label
    flex: 1
    max-width: 310px
    padding-right: 10px
  input[type=checkbox]
    margin-right: 0
  @media (max-width: 680px)
    label
      width: 220px

.deletable_attachment
  justify-content: space-between
  input[type=file]
    flex: 1
    min-width: 200px
    max-width: 450px

.deletable_attachment_input
  margin: 0
  flex: 1
  max-width: fit-content
  label
    justify-content: flex-end
    @media (max-width: 500px)
      justify-content: flex-start