/*==========================================================================
  Contact page
  ========================================================================== */
.profile
  width: 100%

  .form
    max-width: 100%

    .form-group
      +flex(flex-start, flex-start)
      margin-bottom: 15px

      &.has-error
        input
          border: solid 1px rgba(#F95D5D, 0.3)

        span.help-block
          background-color: rgba(#F95D5D, 0.3)
          display: block
          padding: 5px 10px
          font-size: 12px
          color: #d40606
          border-radius: 0 0 5px 5px

          &:first-letter
            text-transform: capitalize

        .legal
          span.help-block
            position: relative
            top: 25px

      .grid-col
        width: 45%
        
        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/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-right: 20px
          padding-top: 11.5px
          padding-bottom: 11.5px
          text-overflow: ellipsis
          white-space: nowrap
          width: 100%

        &:first-child
          margin-right: 60px

      .form-element
        &:first-of-type
          margin-top: 35px

  .profile-header
    width: 100%
    position: relative
    +flex(space-between, center)
    flex-wrap: wrap

    h1
      color: #2D323C
      font-size: 26px
      font-weight: 600
      line-height: 41px
      margin-top: 15px
      margin-bottom: 30px
      width: auto
      display: inline-block

      +respond-to-width(425)
        padding-left: 20px

    label
      display: inline-block
      //margin-top: 15px
      text-transform: none

      +respond-to-width(425)
        margin: 0 0 30px 20px

      span
        color: green
        font-size: 18px
        margin-right: 30px

        -webkit-animation-duration: 1s
        animation-duration: 1s
        -webkit-animation-delay: 3s
        animation-delay: 3s
        -webkit-animation-fill-mode: forwards
        animation-fill-mode: forwards
        -webkit-animation-name: fadeOut
        animation-name: fadeOut

      a.button
        background-color: $euroYellow

      button
        display: none

  .profile-content
    width: 100%
    > .grid-row
      width: 100%

      .content-block
        background-color: white
        box-shadow: 2px 2px 15px 5px rgba(22,57,95,0.05)
        padding: 30px
        margin-bottom: 30px

        .grid-col

        h4
          margin: 0
          color: #AAAAAA
          text-transform: uppercase
          font-size: 0.7rem
          position: relative

          label
            position: relative
            display: inline-block
            width: auto
            height: 0
            top: 0
            margin-left: 30px
            margin-bottom: 0
            color: #67717A
            font-size: 14px
            line-height: 2
            text-transform: none

            -webkit-user-select: none
            -moz-user-select: none
            -ms-user-select: none
            user-select: none

            +respond-to-width(980)
              margin-top: 30px
              margin-left: 0

            +respond-to-width(950)
              margin-top: 0
              margin-left: 30px

            +respond-to-width(640)
              margin-top: 30px
              margin-left: 0

            input
              position: relative
              top: -1px
              display: inline-block
              width: auto
              margin-bottom: 0
              opacity: 0
              cursor: pointer
              margin-right: 15px

              &:checked ~ .checkmark:after
                display: block


            .checkmark
              position: absolute
              top: 1px
              left: 0
              height: 22px
              width: 22px
              border: 1px solid #E0E1E3

              &:after
                content: ""
                position: absolute
                display: none
                left: 9px
                top: -10px
                width: 5px
                height: 22px
                border: solid #6CD300
                border-width: 0 3px 3px 0
                transform: rotate(35deg)


        .grid-col
          &.gender
            position: relative
            height: 75px

            label
              height: 100%

              p
                margin: 0
                margin-bottom: 5px
                width: 100%
                display: block

              input
                display: none

              .toggle
                position: relative
                cursor: pointer
                top: 0
                left: 0
                right: 0
                bottom: 0
                -webkit-transition: .4s
                transition: .4s

                .male, .female
                  display: inline-block
                  width: 43px
                  border: 1px solid #3291FF
                  background-color: #F0F5FA
                  padding: 11.5px 15px

                .female
                  border: 1px solid #E0E1E3
                  background-color: transparent

              input[type=checkbox]:checked + .toggle
                & > .male
                  border: 1px solid #E0E1E3
                  background-color: transparent
                & > .female
                  border: 1px solid #3291FF
                  background-color: #F0F5FA

        hr
          margin: 25px 0 15px 0
          display: block
          height: 1px
          border: 0
          border-top: 1px solid #E0E1E3

        .submit
          margin-top: 0
          label
            text-transform: none
            input[type='submit']
              display: none

            a
              line-height: 1.6

        &.shipping-address
          padding: 23px 30px 30px 30px
          .shipping-block
            display: none

          &.open
            .shipping-block
              display: block

  .mapholder
    width: 100%
    height: 380px
    margin-bottom: 60px

    #map
      width: 100%
      height: 100%



@-webkit-keyframes fadeOut
  0%
    opacity: 1
  100%
    opacity: 0

@keyframes fadeOut
  0%
    opacity: 1
  100%
    opacity: 0


+respond-to-width(1100)
  .profile
    .form
      .form-group
        display: block
        .grid-col
          width: 100%