.feed
  position absolute
  left 0
  top 63px
  right 0
  bottom 0
  overflow-y auto
  &-container
    font-size 13px
  &-notification
    cursor pointer
    position relative
    line-height 25px
    text-align center
    color $bz-white
    background $bz-blue
    left 0
    right 0
    top 0
    z-index 1
  &-menu
    &__text-slider, &__space-slider
      height 1em
      &:before, &:after
        font-size 2em
    &__text-slider
      &:before
        content '\e813'
      &:after
        content '\e814'
    &__space-slider
      &:before
        content '\e815'
      &:after
        content '\e816'
    &__themes
      list-style-type none
  &-date
    padding 2px 8px
    box-sizing border-box
    line-height 20px
    font-weight 600
    border-bottom-width 1px
    border-bottom-style solid
  &-loading
    background transparent
    font-size 20px
    padding .75em
    color $bz-white
    text-align center
.FeedStory
  display flex
  flex-flow row
  box-sizing border-box
  padding 4px 0
  &-readmore
    font-weight 200
    white-space nowrap
  &:not(:last-child)
    border-bottom-width 1px
    border-bottom-style solid
  &-time, &-sentiment, &-content, &-symbols, &-tag
    display inline-block
    box-sizing border-box
    padding 0px 8px
    line-height 15px
    vertical-align top
  &-tag
    color $bz-grey
    font-size 1em
  &-time
    font-weight 300
  &-sentiment
    width 15px
    padding-right 0
    svg
      height 16px
      vertical-align sub
  &-content
    flex 1
    &--hasbody
      cursor pointer
    &__title
      font-family 'nimbus-sans', 'proxima-nova', sans-serif
    &__body
      font-weight 400
      display none
      margin-top 4px
      line-height 16px
      &--open
        display block
        padding 10px 0
        p
          margin 1em 0
        img
          max-width 100%
  &-symbols
    &__ticker
      position relative
      cursor pointer
      &:nth-child(2)
        margin-left 10px
      &:hover
        .TickerTooltip
          display flex

  // Search box
  &-Search
    cursor text
    display inline-block
    width calc(100% - 355px)
    &:before
      icon()
      content '\e805'
      display inline-block
      vertical-align: middle
      padding 0 15px
      color $bz-grey
    &__filter
      float right
      font-size 13px
      margin-right 5px
      margin-top 4px
      color $bz-blue
      cursor pointer
      &:hover
        text-decoration underline
    &__input
      background-color $bz-white
      border 0
      outline 0
      font-size inherit
    &__drop
      background-color rgba(0, 0, 0, 0.2)
      display none
      position absolute
      z-index 3
      left 0
      right 0
      top 62px
      bottom 0
      &--expanded
        display block
      &-list
        max-height 4*48px
        overflow-y scroll
        background-color $bz-white
        boxShadow()
      &-item
        padding 10px 15px
        cursor pointer
        font-size .75em
        &-head
          color $bz-grey
          margin-bottom 3px
        &--selected
          background-color rgba($bz-grey, .05)
        &:not(:last-child)
          border-bottom 1px solid $bz-grey--light
    &__tagbox
      height 20px
      line-height 20px
      user-select none
      &:not(:last-child)
        padding-right 5px
    &__tag
      font-size .75em
      display inline-block
      vertical-align middle
      color $bz-white
      padding 0 10px
      user-select none
      &--symbol
        background-color $bz-blue
      &--keyword
        background-color $bz-blue

.TickerTooltip
  position absolute
  top calc(100% \+ 10px)
  left calc(50% \- 38px)
  display none
  z-index 1
  background-color $bz-black
  boxShadow()
  white-space nowrap
  flex-direction column
  color $bz-white
  &:before
    content ''
    position absolute
    bottom 100%
    left 30px
    border-left 8px solid transparent
    border-right 8px solid transparent
    border-bottom 8px solid $bz-black
  &-security, &-price
    padding-left 12px
    padding-right 12px
    line-height 1em
  &-security
    padding-bottom 10px
    padding-top 5px
    font-weight 300
    white-space nowrap
  &-price
    color $bz-white
    font-weight 500
    font-size 1.5em
    padding-top 10px
  &-changes
    display flex
    border-top 1px solid $bz-grey--dark
    article
      padding 10px 12px
      text-align center
      flex 1
      &:last-child
        border-left 1px solid $bz-grey--dark
      h1, h2
        white-space nowrap
        line-height 1em
      h1
        font-size 1em
        font-weight 500
        padding-bottom 5px
        .u-downText:before
          margin-right 5px
          content '▼'
          color $bz-red
        .u-upText:before
          margin-right 5px
          content '▲'
          color $bz-green
      h2
        font-size 10px
        font-weight 500
        color $bz-grey
        .neutral
          display none

.feed-theme
  position relative
  &:not(:last-child)
    margin-bottom 1em
  &__subject, &__color, &__remove
    display inline-block
    cursor pointer
    height 30px
    line-height 30px
    vertical-align middle
  &__subject
    width calc(100% \- 75px)
    box-sizing border-box
    padding 0 10px
    background $bz-grey--dark
    color $bz-white
    margin-right 15px
    position relative
    &:after
      icon()
      position absolute
      right 10px
      content '\e808'
    &-list
      display none
      background $bz-grey--dark
      color $bz-white
      position absolute
      width 100%
      z-index 1
      list-style-type none
      max-height 250px
      padding-top 5px
      overflow-y scroll
      left 0
      right 0
      top calc(100% \+ 4px)
      &.open
        display block
    &-category
      padding-left 10px
      cursor default
      text-transform uppercase
      font-weight 600
    &-item
      padding-left 20px
      &:hover
        background $bz-grey
  &__color, &__remove
    width 30px
  &__closepicker
    coverScreen(fixed)
    display none
  &__color
    text-align center
    background $bz-white
    color $bz-white
  &__colorpicker
    display none
    position absolute
    z-index 1
    top calc(100% \+ 10px)
    width 200px
    box-sizing border-box
    right 15px
    background $bz-grey
    padding 15px 20px
    &:before
      content ''
      position absolute
      right 20px
      bottom 100%
      border-style solid
      border-width 0 10px 10px 10px
      border-color transparent transparent $bz-grey transparent
    &.open
      display block
      &+.feed-theme__closepicker
        display block
    .rc-slider
      background linear-gradient(to right, hsl(0, 100%, 88%) 0%, hsl(30, 100%, 88%) 8.3%, hsl(60, 100%, 88%) 16.6%, hsl(90, 100%, 88%) 25%, hsl(120, 100%, 88%) 33.3%, hsl(150, 100%, 88%) 41.6%, hsl(180, 100%, 88%) 50%, hsl(210, 100%, 88%) 58.3%, hsl(240, 100%, 88%) 66.6%, hsl(270, 100%, 88%) 75%, hsl(300, 100%, 88%) 83.3%, hsl(330, 100%, 88%) 91.6%, hsl(360, 100%, 88%) 100%)
      &-track
        display none
  &__remove
    text-align right
    color $bz-grey
  &__add
    background $bz-blue
    color $bz-white
    border 0
    outline 0
    cursor pointer
    padding 10px 20px
    font-size 1em
    margin-top 1.5em

.FeedStory-sentiment
  &.sentiment-neutral, &.sentiment-none
    .sentiment-arrow
      display none
  &.sentiment-bull
    .sentiment-arrow
      fill $bz-green
  &.sentiment-bear
    transform rotate(180deg)
    margin -8px -8px 0 8px
    &.sentiment-single, &.sentiment-triple
      margin-top -2px
    .sentiment-arrow
      fill $bz-red
  &.sentiment-single
    .sentiment-arrow
      &--one, &--three
        display none
  &.sentiment-double
    .sentiment-arrow--three
      display none

.flash-yellow
  &-enter
    background-color $bz-orange
    &-active
      transition 10s background-color linear
      background-color transparent