/* Example tokeninput style #1: Token vertical list*/
ul.token-input-list
  overflow: hidden
  height: auto !important
  height: 1%
  width: 400px
  border: 1px solid #999
  cursor: text
  font-size: 12px
  font-family: Verdana, sans-serif
  z-index: 1061
  margin: 0
  padding: 0
  background-color: #fff
  list-style-type: none
  clear: left

  li
    list-style-type: none

    input
      border: 0
      width: 350px
      padding: 3px 8px
      background-color: white
      -webkit-appearance: caret

ul.token-input-disabled,
ul.token-input-disabled li input
  background-color: #E8E8E8

ul.token-input-disabled li.token-input-token
  background-color: #D9E3CA

  span
    color: $gray
    cursor: default

    &.token-input-delete-token
      display: none

li.token-input-token
  overflow: hidden
  height: auto !important
  height: 1%
  margin: 3px
  padding: 3px 5px
  background-color: $gray-lighter
  color: #000
  font-weight: bold
  cursor: default
  display: block

  p
    float: left
    padding: 0
    margin: 0

  span.token-input-delete-token
    float: right
    cursor: pointer

li.token-input-selected-token
  background-color: $brand-primary
  //color: $gray

  span
    //color: #bbb

div.token-input-dropdown
  position: absolute
  width: 400px
  background-color: #fff
  overflow: hidden
  border-left: 1px solid #ccc
  border-right: 1px solid #ccc
  border-bottom: 1px solid #ccc
  cursor: default
  font-size: 12px
  font-family: Verdana, sans-serif
  z-index: 1061

  p
    margin: 0
    padding: 5px
    font-weight: bold
    color: #777

  ul
    margin: 0
    padding: 0

    li
      background-color: #fff
      padding: 3px
      list-style-type: none

      &.token-input-dropdown-item
        background-color: #fafafa

      &.token-input-dropdown-item2
        background-color: #fff

      em
        font-weight: bold
        font-style: normal

      &.token-input-selected-dropdown-item
        background-color: $gray-lighter

ul.token-input-list .info
  font-size: 0.8em
  color: $gray