.form
  padding-top: 40px
  padding-bottom: 40px
  width: 100%
  max-width: 560px

  .form-element
    position: relative
    margin-bottom: 30px
    .error-message
      display: none
      color: $darkerOrange
      font-size: 0.75rem
      width: 100% !important

      &:before
        content: '* '
        font-weight: bold

      &.active
        display: block

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

    &.text-area
      margin-bottom: 0
      display: block
      label
        margin-top: 15px

    label
      width: 100%
      display: block
      color: $purple
      font-family: rubik()
      font-weight: medium()
      font-size: 0.8rem
      margin-bottom: 10px


    input, textarea
      margin-top: 0px
      height: 60px
      width: 100%
      margin-left: 0
      background-color: transparent
      color: $purple
      padding: 0 20px
      border: 1.5px solid rgba($purple, 0.5)
      font-size: 0.8rem
      font-family: rubik()
      border-radius: 10px
      font-style: italic

      +placeholder
        color: rgba($purple, 0.6)
        opacity: 1

      &.alert
        border-color: $darkerOrange

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



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

  .submit
    margin-top: 30px
    min-width: 200px
    cursor: pointer
    position: relative
    display: inline-block
    padding: 12px 55px 12px 20px
    border-radius: 10px
    background-color: $orange
    color: white
    font-family: rubik()
    font-weight: medium()
    font-size: 0.8rem
    transition: background 0.3s

    &:after
      content: ''
      display: inline-block
      position: absolute
      right: 20px
      bottom: 17px
      +arrowWhite
      +translate3d(0,0,0)
      transition: transform 0.3s

    &:hover
      background-color: $flatOrange
      &:after
        +translate3d(5px, 0, 0)

    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

    +placeholder
      +translate3d(20px, 0, 0)
      opacity: 0



+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