.form
  width: 100%

  .form-element
    position: relative
    margin-bottom: 10px
    .error-message
      display: none
      position: absolute
      right: 0
      top: -7px
      color: $darkRed
      font-size: 0.6rem
      &:before
        content: '* '
        font-weight: bold

      &.active
        display: inline-block

    &.multiple-elements
      +flex(space-between, flex-start)
      margin-bottom: 40px
      >*
        width: calc(50% - 20px)

      +respond-to-width(500)
        +flex-rows
        margin-bottom: 0
        >*
          width: 100%
          margin-bottom: 30px

    &.text-area
      margin-bottom: 0
      display: block
      label
        margin-top: 15px
        color: $darkBlue
    label
      width: 100%
      display: block
      color: $darkBlue
      font-size: 0.6rem
      line-height: 1
      text-transform: uppercase
      font-family: din()
      letter-spacing: 2px


    input, textarea
      margin-top: 0px
      height: 45px
      width: 100%
      margin-left: 0
      background-color: transparent
      color: $fontBlack
      border: none
      border-bottom: 2px $gray solid
      font-size: 0.8rem

      &.alert
        border-color: $darkRed

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

    textarea
      min-height: 100px
      height: 130px
      padding-top: 15px
      padding-bottom: 10px
      resize: vertical
      margin-left: 0
      font-weight: 500
      display: block
      +placeholder

      +respond-to-height(1050)
        height: 100px

  .submit
    margin-top: 20px
    background-color: $darkBlue
    max-width: 210px
    cursor: pointer
    transition: background-color 0.3s

    p
      font-size: 0.8rem
      line-height: 1
      font-family: din()
      text-transform: uppercase
      letter-spacing: 2px
      color: white
      padding: 16px 30px 13px

      &:after
        content: ''
        display: inline-block
        margin-left: 25px
        +arrowWhite
        +translate3d(0,0,0)
        transition: transform 0.3s

    &:hover
      background-color: darken($darkBlue, 5%)

    input
      display: none
      border: 1.5px transparent solid
      font-size: 15px
      line-height: 15px
      width: 100%
      max-width: 300px
      background: $blue
      color: white
      padding: 15px 0
      cursor: pointer

      &:hover
        background: darken($blue, 5%)

  input:focus, textarea:focus
    box-shadow: none
    outline: none

+respond-to-width(800px)
  .form
    .form-element
      margin-bottom: 30px
      &.text-area
        display: block
      &.select-element
        display: block
        select
          width: 100%
        .selectric-wrapper
          width: 100%
          display: block
      label
        display: block
        width: 100%
        padding-left: 20px
      input, textarea
        width: 100%
        margin-left: 0