.entity-attribute-password
  position: relative

  .password
    &.repeat
      margin-top: 5px

  .password_mail
    .mail_button
      box-shadow: inset 0 1px 0 0 #ffffff
      background: #f9f9f9 linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%)
      border-radius: 2px
      border: 1px solid #dcdcdc
      display: inline-block
      cursor: pointer
      color: #666666
      padding: 5px 24px
      text-decoration: none
      text-shadow: 0 1px 0 #ffffff
      margin-left: 45px
      margin-top: 10px
      &:hover
        background: #e9e9e9 linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%)
      &:active
        position: relative
        top: 1px
      &.hidden
        display: none

    .mail_confirmation
      color: #479c38
      font-size: 0.7rem
      margin-left: 45px
      &.hidden
        display: none
    .mail_fail
      color: #bf2614
      font-size: 0.7rem
      margin-left: 45px
      &.hidden
        display: none
    &.hidden
      display: none


.validationHelper
    position: absolute
    z-index: 3
    top: -235px
    left: 205px
    pointer-events: none
    opacity: 0
    transform: translate3d(0, 10px, 0)
    transition: opacity 0.3s, transform 0.3s
    transition-delay: 0s
    width: calc(100% - 225px)
    height: 225px
    max-width: 340px
    background-color: white
    box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.15)
    border-radius: 5px

    h3
      font-size: 0.7rem
      line-height: 1.6
      color: rgba(white, 0.5)
      font-weight: 100
      margin: 0
      background-color: lighten($darkerBlue, 5%)
      padding: 12px 20px
      border-radius: 5px 5px 0 0
      text-transform: uppercase

    .success
      +flex(center, flex-end)
      position: absolute
      bottom: 0
      left: 0
      width: 100%
      height: 100%
      opacity: 0
      transition: opacity 0.4s
      border-radius: 5px
      background:
        image: url("#{$baseImagePath}/icons/success.gif")
        position: top center
        repeat: no-repeat
        color: #12c06a

      p
        margin: 0
        opacity: 0.6
        font-size: 0.8rem
        letter-spacing: 0.8px
        text-transform: uppercase

    .requirements
      padding: 10px 15px

      p
        font-size: 0.7rem
        color: rgba($light-gray, 0.65)
        line-height: 0.85

        span
          display: inline-block
          position: relative
          padding: 0 5px

          &:after
            content: ''
            position: absolute
            top: 4px
            left: 0
            display: block
            width: 100%
            height: 1px
            transform: scaleX(0)
            transform-origin: 0 50%
            background-color: $medium-gray
            transition: transform 0.6s

        &.info
          color: $medium-gray
          font-weight: bold
          margin-bottom: 1rem
          padding: 0 5px

        &.invalid
          color: $neonRed
          opacity: 0.8

        &.valid
          span
            &:after
              transform: scaleX(1)

    &:after
      content: ''
      position: absolute
      width: 0
      height: 0
      border: 0 solid transparent
      border-left-width: 15px
      border-right-width: 15px
      border-top: 15px solid white
      left: calc(50% - 7.5px)
      bottom: -15px
      transition: border 0.4s

    &.active
      opacity: 1
      transform: translate3d(0, 0, 0)
      pointer-events: all

    &.valid
      opacity: 0
      transition-delay: 2s
      pointer-events: none

      &:after
        border-top-color: #12c06a

      .success
        opacity: 1
        z-index: 4