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

  .form-element
    position: relative
    margin-bottom: 10px
    .error
      display: none
      &.active
        color: darkred
        display: block

    &.text-area
      margin-bottom: 0
      +flex(flex-start, flex-start)
      label
        margin-top: 15px
    &.select-element
      position: relative
      span
        background-image: url('/img/down.png')
        width: 16px
        height: 16px
        background-size: contain
        display: inline-block
        position: absolute
        right: 10px
        top: 25px
        pointer-events: none
      select
        margin-top: 10px
        +appearance(none)
        outline: none
        height: 45px
        width: calc(100% - 126px)
        font-size: 15px
        line-height: 16px
        font-weight: 500
        background-color: #f3f3f3
        color: $black
        padding: 0 30px 0 20px
        border: 1.5px transparent solid

      .selectric-wrapper
        margin-top: 10px
        width: calc(100% - 126px)
        display: inline-block

      .selectric-items
        li
          padding-left: 20px
          padding-right: 20px
          font-size: 15px
          line-height: 16px
          font-weight: 500
      .selectric
        background-color: #f3f3f3
        .label
          padding: 0 20px 0 10px
          font-size: 15px
          line-height: 16px
          font-weight: 500
          color: $black
          +flex(flex-start, center)
    label
      width: 120px
      display: inline-block
      font-size: 15px
      line-height: 15px
      font-weight: 600
    input, textarea
      margin-top: 10px
      height: 45px
      width: calc(100% - 126px)
      font-size: 15px
      line-height: 16px
      font-weight: 500
      background-color: #f3f3f3
      color: $black
      padding: 0 20px
      border: 1.5px transparent solid

      &.alert
        border: 1.5px darkred solid
        box-shadow: 0 0 5px darkred
      &:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active
        +transition(9999s background-color)
        border-radius: 5px
        -webkit-text-fill-color: $black
        +transition-delay(9999s)

    textarea
      height: 116px
      padding-top: 8px
      padding-bottom: 10px
      resize: vertical
      margin-left: 6px
      +font-default()
      font-size: 15px
      line-height: 16px
      font-weight: 500


  .submit
    //padding: 20px 0 0 120px
    //text-align: right
    //input
    //  display: inline-block
    //  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
    border: 1.5px transparent solid
    border-radius: 0
    outline: none

+media-query(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