.user-profile-container
  margin-top: 30px

  .content-box
    padding: 0

.content-box-list-item
  display: flex
  height: 60px
  width: 100%
  align-items: center
  padding: 0 10px
  border-bottom: 1px solid $border
  cursor: pointer

  .content-box-item-icon
    width: 40px
    height: 40px
    background: $grey-background
    border-radius: 4px
    display: inline-flex
    align-items: center
    justify-content: center

    i
      width: 30px
      height: 30px
      margin: 5px 0 0 5px
      padding: 0
      display: block
      font-size: 30px
      color: $grey-color

      &.ion-key
        margin-left: 15px

  &:hover, &.is-active

    .content-box-item-icon
      background: $black

      i
        color: $white

  .content-box-container
    padding-left: 10px

    h2
      color: $color
      font-size: 14px

    p
      color: $color-secondary
      font-size: 12px

.user-content-profile
  padding: 15px 20px

  h1
    font-size: 18px
    margin-bottom: 10px

  h4
    text-transform: uppercase
    font-size: 14px
    margin: 10px 0 0 0
    padding: 0

  .profile-image

    img
      width: 150px
      height: auto
      display: block
      margin: 0 auto

  .form-field

    &.flex-centered
      display: flex
      align-items: center
      justify-content: center

      .button
        margin-left: 10px

.access-tokens-container
  background: $white
  margin-bottom: 20px

  .access-token-item
    border: 1px solid $border
    font-size: 14px
    padding: 10px

    .column
      display: flex
      align-items: center

    i
      font-size: 16px

      &.ion-key
        margin-left: 5px

.pointer
  cursor: pointer

.permission-repositories
  border-radius: 4px
  margin: 10px 0 30px 0