.form
  .form-element
    &.select-element
      position: relative
      margin-bottom: 30px
      label
        top: 24px


      span
        width: 16px
        height: 16px
        background-image: url('/img/arrow.svg')
        background-size: contain
        background-repeat: no-repeat
        display: inline-block !important
        position: absolute
        right: 10px
        top: 29px
        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: #66686D
        padding: 0 30px 0 20px
        border: 1.5px transparent solid

      .selectric-wrapper
        margin-top: 10px
        width: 100%
        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: #66686D
          +flex(flex-start, center)

+media-query(1020px)
  .form
    .form-element.select-element
      margin-bottom: 20px
      label
        top: 9px

      span
        top: 43px


+media-query(800px)
  .form
    .form-element
      &.select-element
        display: block
        select
          width: 100%
        .selectric-wrapper
          width: 100%
          display: block