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

  .form-element
    position: relative
    margin-bottom: 30px
    .error-message
      display: none
      background-color: #ffaeae
      color: darkred
      padding: 3px 20px
      border-radius: 8px
      margin-bottom: 10px
      &.active
        display: block
    &.multiple-elements
      +flex(space-between, flex-start)

      +respond-to-width(550)
        +flex-direction(column)

      >*
        width: calc(50% - 20px)

        +respond-to-width(550)
          width: 100%
          margin-bottom: 30px

    &.text-area
      margin-bottom: 0
      display: block
      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: 100%
        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: 100%
        display: inline-block
        margin-bottom: 6px

      .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: 100%
      padding-left: 20px
      display: block
      +font-default()
      font-size: 15px !important
      line-height: 22px !important
      color: $white

    input, textarea
      margin-top: 10px
      height: 45px
      width: 100%
      margin-left: 0
      +font-default()
      font-size: 16px !important
      line-height: 45px !important
      background-color: #f3f3f3
      color: $black
      padding: 0 20px
      border: 1.5px transparent solid

      &.alert
        +placeholder
          color: $red
      +placeholder
        +font-light()
        font-size: 15px !important
        line-height: 45px !important
        color: rgba($black, 0.45)
      &:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active
        transition: 9999s background-color
        -webkit-text-fill-color: $primaryColor
        transition-delay: 9999s
    textarea
      height: 152px
      padding-top: 8px
      padding-bottom: 10px
      resize: vertical
      margin-left: 0
      +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: 250px
      background: $highlightColor
      color: $white
      padding: 15px 0
      cursor: pointer
      transition: background 0.4s ease, color 0.4s ease

      &:hover
        background: $primaryColor

  input:focus, textarea:focus
    box-shadow: none
    border: none
    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

.thanks
  color: $white
  display: block
  margin-top: 25px
  &.hide
    margin-top: 0
    display: none



.subscribe-form
  margin-bottom: 50px

  &.small-form
    width: 100%
    max-width: 800px
    margin-left: auto
    margin-right: auto

  .inner
    +flex(center, center)
    +flex-direction(column)

    .form
      max-width: 100%
      +flex()

      +respond-to-width(1000)
        +flex-direction(column)

      .form-first-column
        padding-right: 20px

        +respond-to-width(1000)
          padding-right: 0

        width: 100%
        +flex-direction(column)

      .form-second-column
        padding-left: 20px

        +respond-to-width(1000)
          padding-left: 0

        width: 100%
        +flex-direction(column)

      .checkboxes
        p
          width: 100%
          padding-left: 20px
          display: block
          +font-default()
          font-size: 15px !important
          line-height: 22px !important
          color: $white
        label
          +flex(flex-start, center)
          margin-bottom: 5px
          input
            width: 15px
            height: 15px
            padding: 0
            margin: 0 15px 0 0

      .submit
        text-align: right !important
        margin: 0
        padding: 0

        +respond-to-width(1000)
          +flex(center, center)

        input
          margin: 0
          +flex(center, center)
          width: 225px
          height: 50px
          background:
            color: #F1C02E
          color: #444444
          transition: background 0.4s
          cursor: pointer
          padding: 0
          margin-top: 30px
          &:hover
            background:
              color: $white