.form
  display: block
  width: 100%
  max-width: 560px
  font-size: 1rem
  line-height: 1.2

  .form-element
    position: relative
    margin-bottom: 25px

  .error-message
    display: none
    width: 100%
    color: $lightRed
    font-size: 0.75rem
    font-weight: bold

    &.active
      display: block
      margin-bottom: 10px

  label, .label
    display: block
    margin-bottom: 5px
    color: white
    font-size: 0.8rem
    font-weight: bold
    +respond-to-width(500)
      font-size: 0.7rem

  input:not([type=radio]), textarea
    display: block
    width: 100%
    background-color: white
    padding: 15px 20px

    border: 1px transparent solid
    border-radius: 4px
    font-size: 0.9rem
    line-height: 1.2
    color: $grey

    +respond-to-width(500)
      font-size: 0.8rem

    +placeholder
      color: rgba($grey, 0.4)

    &.alert
      border-color: $red

    &:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active
      transition: 9999s background-color
      -webkit-text-fill-color: $grey
      transition-delay: 9999s

    &:focus
      box-shadow: none
      outline: none

  textarea
    min-height: 152px
    resize: vertical

  .select
    .select-wrapper
      position: relative
      display: block

    .icon
      position: absolute
      right: 10px
      top: 26px
      display: inline-block
      width: 0
      height: 0
      border-style: solid
      border-width: 5px 6px 0 6px
      border-color: $grey transparent transparent transparent
      opacity: 0.3
      pointer-events: none

    select
      display: block
      width: 100%
      +appearance(none)
      font-family: $fontFamily
      background-color: white
      padding: 15px 35px 15px 20px
      border: 1px transparent solid
      border-radius: 4px
      font-size: 0.9rem
      line-height: 1.2
      color: $grey

      option:disabled
        color: green

      +respond-to-width(500)
        font-size: 0.8rem

      &.alert
        border-color: $red

      &:focus
        box-shadow: none
        outline: none

  .checkbox
    label
      +flex(space-between, flex-start)
      cursor: pointer

      input
        +appearance(none)
        margin: 0
        width: 20px
        height: 20px
        border-radius: 4px
        padding: 0
        border: none
        background-color: white
        background-size: contain
        background-position: center
        background-repeat: no-repeat
        transition: background-color 0.3s

        &:hover
          background-color: rgba(white, 0.6)

        &:checked
          background-image: url("/img/check/checked.svg")
          background-color: white

      span
        display: block
        margin: 2px 0 0
        width: calc(100% - 30px)


  .radio
    padding-bottom: 5px

    p.label
      margin-bottom: 15px

    label
      +flex(space-between, flex-start)

      + label
        margin-top: 10px

      input
        width: 13px

      span
        display: block
        width: calc(100% - 30px)

  .submit
    margin-top: 20px

    p
      background: $neonGreen
      +flex(center, center)
      width: 100%
      margin: 50px auto 0
      max-width: 340px
      padding: 18px 15px
      border-radius: 4px
      box-shadow: 0 6px 20px -5px rgba(0,0,0,0.2)

      font-size: 0.8rem
      line-height: 1
      color: white
      font-weight: 600
      cursor: pointer

      transition: background-color 0.3s, box-shadow 0.3s

      .double-arrow
        position: relative
        top: 1px
        margin-left: 15px

      &:hover
        background-color: darken($neonGreen, 10%)
        box-shadow: 0 6px 20px -5px rgba(0,0,0,0)

        .double-arrow
          &:before
            transition-delay: 0.15s
          &:before, &:after
            transform: translate3d(5px,0,0)


    input
      display: none