/* ==========================================================================
   Home page
   ========================================================================== */

h1.register-header
  color: #515151
  font-size: 1rem
  font-weight: bold
  line-height: 1.333
  width: column(8, 12)
  margin: 70px auto 35px auto

  +respond-to-width(1280)
    width: column(12)

  +respond-to-width(650)
    padding: 30px 0 0 15%
    background-color: white
    margin: 0
    width: 100%

  +respond-to-width(425)
    text-align: center
    padding-left: 0

.register
  padding-top: 0

  .placeholder
    padding: 65px column(1, 10) 35px column(1, 10)

    +respond-to-width(1280)
      padding: 65px column(1, 8) 35px column(1, 8)

    +respond-to-width(850)
      padding: 35px 0 35px 15%

    +respond-to-width(425)
      padding: 35px 30px

  .general-alert
    display: block
    background-color: $redTheme
    padding: 10px
    position: absolute
    top: 0
    left: 0
    width: 100%
    color: white
    border-radius: 5px 5px 0 0

    &:first-letter
      text-transform: capitalize

  .form-group
    position: relative
    margin-bottom: 60px
    span.icon
      position: absolute
      left: column(-1, 9)
      top: -10px
      &.person
        top: 0
      svg
        transition: opacity 0.2s

      +respond-to-width(425)
        position: relative
        left: calc(50% - 20px)
        top: -30px
        margin-bottom: 15px

    .form-element
      +respond-to-width(650)
        width: 100%
      label
        width: 100%
        margin-right: 30px
        display: block
        margin-bottom: 24px
        font-size: 0.8rem
        line-height: 1.1
        color: $semiBlack

        &.gender, &[for=age], &[for=years_certified], &[for=expiration_date], &[for=house_number]
          display: inline-block
          width: auto

          input
            width: auto

        &[for=age]
          margin-right: 10px
          + input
            width: 35px
            border: 1px solid $ctaBackground
            border-radius: 3px
            text-align: center
            padding: 4px 0

        &.gender
          margin-bottom: 12px

        &[for=years_certified]
          + input
            width: 35px
            text-align: center
            margin-bottom: 0

        &[for=house_number]
          + input
            +respond-to-width(650)
              width: 35px
              text-align: center

        &[for=expiration_date]
          + input
            width: 150px
            text-align: center

      input
        width: column(7, 8)
        margin-bottom: 30px
        border: none
        border-bottom: solid 1px rgba($ctaBackground, 0.8)
        font-size: 0.8rem
        line-height: 1.1
        padding: 8px 0
        color: $gray
        background-color: transparent

        &[type=radio]
          margin-right: 20px

        +placeholder
          opacity: 0.45
          color: $placeholderGray


  input[type=submit]
    display: block
    padding: 10px 15px
    margin: 30px 0
    color: white
    font-size: 0.8rem
    font-weight: bold
    line-height: 1.1
    text-transform: uppercase
    border-radius: 3px
    background-color: $buttonGreen
    border: none
    width: auto
    min-width: 240px
    text-align: left
    cursor: pointer
    transition: background-color 0.3s

    &:hover
      background-color: darken($buttonGreen, 5%)

    +respond-to-width(425)
      width: 100%

.select-wrapper
  display: inline-block
  
select
  -webkit-appearance: button
  -moz-appearance: button
  -webkit-user-select: none
  -moz-user-select: none
  -webkit-padding-end: 20px
  -moz-padding-end: 20px
  -webkit-padding-start: 20px
  -moz-padding-start: 20px
  background-color: rgba(103,113,122,0.05)
  background-image: url("/img/svg/arrow_dark_select.svg")
  background-position: 100% 50%
  background-repeat: no-repeat
  border: 1px solid #E0E1E3
  border-radius: 0
  box-shadow: none
  font-size: 0.7em
  color: $grey
  margin: 0
  overflow: hidden
  padding: 5px 10px
  text-overflow: ellipsis
  white-space: nowrap
  min-width: 60px

  &:focus
    box-shadow: none
    outline: none

  &.year
    min-width: 75px