.login-container
  align-items: center
  display: flex
  // height: 100%
  justify-content: center
  // width: 100%
  position: fixed
  top: 0
  bottom: 0
  left: 0
  right: 0

.login-box
  +container-box
  margin: 15px
  max-width: 600px
  min-width: 300px
  padding: 15px 35px

  .login-title,
  .settings-title
    color: $color-primary
    font:
      size: 2.2em
      weight: 300
    padding: 15px
    text-align: center

  .login-info
    color: $color-text-dark-primary
    font-weight: 300
    text-align: center

  .login-providers
    align-items: center
    display: flex
    flex-direction: column
    justify-content: center
    margin: 15px

    .login-provider-button
      background-color: $color-primary
      border: thin solid $color-primary
      border-radius: 3px
      color: #fff
      display: block
      margin-bottom: 10px
      min-width: 200px
      padding: 5px 10px
      text-align: center

      &.facebook
        background-color: #3b5998
        border-color: transparent

      &.google
        background-color: #dd4b39
        border-color: transparent

#settings
  display: flex
  align-items: stretch
  margin: 25px auto

  #settings-sidebar
    width: 30%
    +container-box
    margin-right: 15px

    .settings-content
      padding: 0
      ul
        padding: 0
        margin: 0
        list-style: none

      a
        &:hover
          text-decoration: none
          li
            background-color: lighten($color-background, 5%)
        li
          padding: 25px
          margin: 0
          border-bottom: thin solid $color-background
          border-left: thick solid transparent
          transition: all 100ms ease-in-out

          i
            font-size: 1.1em
            padding-right: 15px

      .active
        li
          background-color: lighten($color-background, 5%)
          border-left: thick solid $color-info


  #settings-container
    width: 70%
    +container-box


  .settings-header
    background-color: $color-background
    border-top-left-radius: 3px
    border-top-right-radius: 3px

    .settings-title
      padding: 25px 15px 5px 15px
      font:
        size: 2em
        weight: 300

  .settings-content
    padding: 25px

    p
      color: $color-text-dark-primary

    .settings-billing-info
      font-size: 1.2em

    .subscription-active
      color: $color-success
      padding-bottom: 20px
    .subscription-demo
      color: $color-info
      margin-top: 0
    .subscription-missing
      color: $color-danger
      margin-top: 0

  .button-submit
    display: block
    clear: both
    min-width: 200px
    margin: 0 auto
    +button($color-primary, 3px, true)


#settings-container
  #settings-form
    width: 100%
  .settings-form
    display: flex
    align-items: center
    justify-content: center

    .left, .right
      padding: 25px 0

    .left
      width: 60%
      float: left

    .right
      width: 40%
      float: right
      text-align: center

    .settings-avatar
      img
        border-radius: 3px
      span
        display: block
        padding: 15px 0
        font:
          size: .9em

    .settings-password
      color: $color-text-dark-primary


#user-edit-container
  padding: 15px

  #user-edit-header
    .user-edit-name
      font-size: 1.5em
    .user-edit-username,
    .user-edit-email,
    .user-edit-id
      color: $color-text-dark-secondary
      padding: 3px 0

      i
        margin-right: 5px

  #user-edit-form
    padding: 10px 0

    #submit_edit_user
      +button($color-success, 3px, true)

    #button-cancel
      +button(#aaa, 3px)
      margin: 0 10px

    #user-edit-notification
      float: right
      color: $color-text-dark-secondary
      padding: 10px 0

      &.success
        color: $color-success
      &.fail
        color: $color-danger