#disclaimer, .alert
  background: $black
  color: $white_pure
  margin: 0 auto 50px auto
  padding: 20px 25px
  line-height: 1.4

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

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

hr
  border: none
  border-top: 1px solid $primary
  margin: 40px 25px 35px

.alert
  background: $red

.form-container, .cancel_btn_wrap
  margin: 0 auto
  max-width: 640px
  padding-right: 100px
  padding-left: 40px

// custom styles
.form-container.login, .form-container.signup
  max-width: 530px
  padding: 30px
  .btn
    margin-bottom: 30px
.simple_form
  color: $grey
  .error
    background: $red
    //bottom: 1px
    color: $white
    display: table
    font-size: 0.74rem
    left: 100%
    margin-left: 5px
    padding: 8px
    position: absolute

div.input
  display: flex
  flex-direction: row
  flex-wrap: nowrap
  margin-bottom: 15px
  position: relative
  text-align: left

label
  font-weight: $font-reg
  margin-right: 10px
  min-width: 160px
  padding-top: 3px
  padding-right: 10px
  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], textarea, select
  color: $grey-dark
  font-family: $font-body-family
  font-weight: $font-bold
  font-size: 100%
  &:focus
    color: $black
    color: $primary

// just inputs
input[type=text], input[type=email], input[type=tel], input[type=date], input[type="url"], input[type=password], textarea
  border: 1px solid $white
  background: $white
  outline: none
  padding: 4px 8px
  @include transition (200ms, all, ease-in-out, 0)
  width: 100%
  margin-bottom: 5px
  &:focus
    background: $white_pure
    border-color: lighten($black, 10%)

// just selects
select
  @include appearance (none)
  background: asset-url("hackathon_manager/arrow_down.svg"), $white_pure
  background-repeat: no-repeat
  background-position: right
  background-size: auto 100%
  border: 1px solid $white
  outline: none
  padding: 5px 30px 5px 8px
  @include transition (200ms, border, ease-in-out, 0)
  width: 100%
  font-size: 100%
  margin-right: 5px
  border-radius: 0
  &:last-child
    margin-right: 0
  &:hover
    background: asset-url("hackathon_manager/arrow_down_hover.svg"), $white_pure
    background-repeat: no-repeat
    background-position: right
    background-size: auto 100%
  &:focus
    border-color: lighten($black, 10%)
    background: asset-url("hackathon_manager/arrow_down_hover.svg"), $white_pure
    background-repeat: no-repeat
    background-position: right
    background-size: auto 100%
  option
    background: $white_pure
    padding: 3px auto
  &.date:nth-child(3)
    max-width: 70px
  &.date:nth-child(4)
    max-width: 90px

// checkbox
input[type=checkbox]
  margin-top: 9px

//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


// jquery ui override
.ui-autocomplete
  background: $white_pure
  border: 1px solid lighten($black, 10%)
  color: $primary
  list-style: none
  padding: 0
  .ui-menu-item a
    padding: 2px 5px
    display: block
    &:hover, &.ui-state-focus
      background: $primary
      color: $white

@media screen and (max-width: 950px)
  .simple_form .error
    position: initial

@media screen and (max-width: 680px)
  #disclaimer, .alert
    max-width: none
    margin: 0 25px 25px 25px
    ul
      margin: 0
      padding: 0

  .form-container
    padding: 0 5px

  div.input
    display: block

  select
    margin-right: 0
    margin-bottom: 5px
    &.date:nth-child(3)
      max-width: none
    &.date:nth-child(4)
      max-width: none

  label
    display: block
    font-size: 1.115rem
    margin-bottom: 5px
    margin-top: 15px
    text-align: left

  input[type=text], input[type=email], input[type=date], input[type="url"], input[type=password], textarea, select, option
    font-size: 1.115rem
    padding: 12px 15px
    width: 100%

  .participant_resume
    .hint
      display: block
      margin-top: 5px
      margin-left: 2px

  .simple_form .error
    display: block
    left: 0
    margin: 0
    padding-left: 8px
    position: relative

// 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