.form
  width: 100%

  .form-element
    position: relative
    margin-bottom: 10px
    .error
      display: none
      margin-top: 0
      padding: 10px 0 0 120px
      background-color: transparent
      &.active
        color: $beige
        display: block

    &.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: $darkGray
        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: $darkGray
          +flex(flex-start, center)
    label
      width: 90px
      margin-right: 10px
      display: inline-block
      +header-font(31px)
      color: $lightGray
      &:after
        content: ':'
    .item-holder
      width: calc(100% - 106px)
      margin-top: 10px
      padding: 5px
      background-color: $yellowish
      display: inline-block
      border-radius: 12px
      &.alert
        background-color: mix($beige, $yellowish)

    input, textarea
      height: 45px
      width: 100%
      font-size: 15px !important
      line-height: 16px !important

      background-color: $yellowish
      color: $darkGray
      padding: 0 20px
      border-style: Dashed
      border-color: rgba(82, 82, 89, 0.33)
      border-width: 2px
      border-radius: 12px
      -moz-border-radius: 12px
      -webkit-border-radius: 12px

      &:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active
        +transition(9999s background-color)
        border-radius: 5px
        -webkit-text-fill-color: $darkGray
        +transition-delay(9999s)

    textarea
      height: 200px
      padding-top: 8px
      padding-bottom: 10px
      resize: none
      +font-default()
      font-size: 15px
      line-height: 16px
      font-weight: 500

    &.text-area
      margin-bottom: 0
      .placeholder
        +flex(space-between, flex-start)
      .item-holder
        padding-bottom: 0
      label
        margin-top: 5px
    &.alert
      input, textarea
        border-color: $red
      label
        background-color: $red
        border-radius: 12px

  .submit
    padding: 5px
    margin-top: 25px
    text-align: right
    margin-left: auto
    background-color: $beige
    width: calc(100% - 106px)
    max-width: 300px
    border-radius: 12px
    -moz-border-radius: 12px
    -webkit-border-radius: 12px

    input
      display: inline-block
      +font-bold()
      font-size: 19px !important
      line-height: 15px !important
      width: 100%
      background: transparent
      color: white
      padding: 15px 0
      cursor: pointer
      border-style: Dashed
      border-color: rgba(82, 82, 89, 0.33)
      border-width: 2px
      border-radius: 12px
      -moz-border-radius: 12px
      -webkit-border-radius: 12px

      &:focus
        border-style: Dashed
        border-color: rgba(82, 82, 89, 0.33)
        border-width: 2px
        border-radius: 12px
        -moz-border-radius: 12px
        -webkit-border-radius: 12px

  input:focus, textarea:focus
    box-shadow: none
    border-style: Dashed
    border-color: rgba(82, 82, 89, 0.33)
    border-width: 2px
    border-radius: 12px
    -moz-border-radius: 12px
    -webkit-border-radius: 12px
    outline: none

+media-query(900px)
  .form
    .form-element
      margin-bottom: 10px
      .item-holder
        width: 100%
        margin-top: 0px
      &.text-area
        .placeholder
          display: block
      &.select-element
        display: block
        select
          width: 100%
        .selectric-wrapper
          width: 100%
          display: block
      label
        display: block
        width: 100%
        padding-left: 20px
        margin-bottom: 5px
      input, textarea
        width: 100%
        margin-left: 0