.preferences
  coverScreen(absolute)
  background rgba(0, 0, 0, 0.3)
  z-index 30
  &-container
    position absolute
    top 35px
    right 50px
    left 50px
    bottom 35px
    background $bz-black
    color $bz-grey--light
    boxShadow()
    animation flyIn 200ms normal none ease;
  &-body
    coverScreen(absolute)
    &-bar
      line-height 18px
      padding 20px
      clearfix()
      background $bz-grey--dark
      color $bz-grey--light
      &__title
        float left
      &__close
        float right
        cursor pointer
        &:hover
          color $bz-blue
  &-page
    position absolute
    top 58px
    bottom 0
    left 0
    right 0
    padding 20px
    color $bz-white
    overflow-y scroll

  &-tabs
    margin-top 10px
    padding-left 20px
    list-style none
    border-bottom 3px solid $bz-grey
    color $bz-white
  &-tab
    display inline-block
    padding 10px 26px
    cursor pointer
    &:hover
      background-color $bz-grey--dark
    &.active
      background-color $bz-grey


// Store preferences
.store
  &-package
    margin-bottom 20px
    background-color $bz-grey--dark
    border-left 3px solid $bz-blue
    padding 10px
    box-sizing border-box
    font-size 15px
    &-info
      vertical-align top
      display inline-block
      width calc(100% - 120px)
      &__title
        font-size 1.2em
        line-height 1.5em
      &__description
        font-size 1em
        line-height 1.3em
        ul
          margin 10px 0px 10px 30px
    &-payment
      display inline-block
      width 120px
      vertical-align top
      &__pricing
        margin-top 30px
        font-size 1.2em
        line-height 1.5em
        padding 4px
        background-color darken($bz-grey--dark, 20%)
        border-radius 5px
        text-align center
      &__button
        cursor pointer
        margin-top 10px
        background-color $bz-blue
        color $bz-white
        border 0
        outline none
        box-sizing border-box
        padding 10px 0
        width 100%
        font-size 1em

// Alerts preferences
.preferences-alerts
  &-description
    padding 20px 0

.alerts-channels
  margin-top 10px
  list-style none
  font-size 14px
  clearfix()
  li
    box-sizing border-box
    min-width 200px
    padding 10px
    float left
    label
      font-size 1em
      cursor pointer
      &:before
        width 15px
        height 15px
        border 1px solid $bz-grey--light
        margin-right 5px
        content ''
        vertical-align middle
        display inline-block
    &.active label:before
      icon()
      font-family 'bzpro-font'
      line-height 1.5em
      text-align center
      font-size .75em
      content '\f107'

.alerts-watchlist
  &-header
    padding-bottom 20px

  &-tickers
    padding 10px 0

  &-ticker
    &:not(:first-child)
      border-bottom 1px solid $bz-grey--dark
      padding 10px 0
    label
      font-size .75em
      text-transform uppercase
      color $bz-grey
    &__symbol, &__toggle
      display inline-block
      width 50%