@import 'mixins'
@include loadFont($main-font, normal, 400, 'Regular')
@include loadFont($main-font, normal, 700, 'Bold')
@include loadFont($main-font, normal, 100, 'Light')

html, body
  font-family: $main-font
  font-size: 16px
  font-weight: 400
  min-height: 100%

body
  background: #E6E6E6
  overflow-x: hidden

h1, h2, h3, h4, h5, h6
  font-family: $main-font

a
  color: inherit
  text-decoration: inherit
  &:link
    color: inherit
    text-decoration: inherit
  &:hover
    color: inherit
    text-decoration: inherit
  &:active
    color: inherit
    text-decoration: inherit

nav
  white-space: nowrap

fieldset
  border: none
  padding: 0
  select, input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea
    border-radius: 2em
    margin-bottom: 1em
    background-color: white
    box-shadow: none
    outline: none
    padding-left: 1.5em
    padding-right: 1.5em
  textarea
    border-radius: 1em
    &:focus
      background: white
      box-shadow: none
  .message-error
    color: $red
    margin-left: 1em
    margin-bottom: 1em
    float: left
    p
      margin: -0.5em 0 0.25em
      font-size: 0.9em
  &+ .row.controller
    padding: 0
    .columns:nth-child(1)
      padding-left: 0
    .columns:nth-child(2)
      padding-right: 0
    .help-button
      width: 100%
      padding: 0.4em 0


input[type='text'], input[type='password']
  box-shadow: none

input.form-control
  height: auto

input[type="text"]:focus
  background: white
  box-shadow: none
ul
  list-style-type: none
  padding: 0
  margin: 0
  li
    margin: 0
.dot
  border-radius: 50%
  display: inline-block
.portrait
  border-radius: 50%

.searchInput
  position: relative
  width: 10em
  margin: 0
  input
    font-size: 1.1em
    border-radius: 3em
  .icon
    position: absolute
    top: 26%
    right: 25%
    font-size: 1.4em
    color: white
    pointer-events: none
  &.header-search
    display: block
    float: right
    width: 22em
    input
      padding-left: 40px
      font-size: 1em
      color: #808080
      opacity: 1
      border: none
      background-color: #F2F2F2
      box-shadow: none
      margin: 0
    .icon
      font-size: 1.2em
      top: 25%
      left: 4%
      color: $blue

.selectize-input
  box-shadow: none
  &.focus
    box-shadow: none
.help-selectize
  .selectize-input
    line-height: 2.3125rem
    height: 2.3125rem
    padding: 0 0.5em
    margin: 0 0 0.5em
    border: none
    border-radius: 2em
    box-shadow: none
    outline: none
    padding-left: 1.5em
    padding-right: 1.5em
    &.focus
      box-shadow: none
    .item
      font-weight: bold
  .selectize-control.custom-optgroups
    padding-top: 1.25em
  .selectize-dropdown
    border: none
    box-shadow: none
    border-radius: 1em
    margin-top: 1em
    font-weight: bold
    font-size: 0.75em
    color: $dark-gray
    .option
      padding: 0.75em 2em
      &.active
        background-color: $blue
        color: white
    &.custom-optgroups
      font-size: 0.8em
      font-weight: normal
      .option
        color: $light-gray
        padding: 0.5em 1.5em
        &.active
          color: white
        &.sub-option
          color: $dark-gray
          padding-left: 2.5em
          &.active
            color: white
    &:before
      content: ''
      display: block
      width: 0
      height: 0
      border: inset 0px
      border-color: transparent transparent white
      border-width: 0 1.25em 1.25em
      position: absolute
      top: -12px
      right: 4px
      z-index: -1
  .selectize-input-border
    .selectize-input
      border: 1px solid $light-gray
      &.dropdown-active::before
        height: 0
  .selectize-bordered-dropdown .selectize-dropdown
    border: 1px solid $blue
    padding: 1em
    &:before
      top: -11px
      right: 8px
      border-width: 0 1em 1em
      z-index: -1
    &:after
      content: ''
      display: block
      width: 0
      height: 0
      border: inset 0px
      border-color: transparent transparent blue
      border-width: 0 1em 1em
      position: absolute
      top: -12px
      right: 8px
      z-index: -2
.panel
  border: none
  &.round
    border-radius: 1.5em

.switch input:checked + label
  background: $blue
.switch-rows .help-data-row.row
  padding: 0.5em 0 0.5em 1.5em
  font-size: 1.1em
  font-weight: normal
  z-index: initial
  .switch
    margin-bottom: -0.25em

fieldset .selectize-input
  border-radius: inherit

.row.valign-middle
  display: table
  > .columns.valign-middle
    display: table-cell
    vertical-align: middle
  > .columns:not(.valign-middle)
    width: 100%
    display: block
  > .columns.valign-middle, > [class*='valign-middle'] + [class*='valign-middle']:last-child
    float: none

a.help-icon-button, a.help-button
  font-size: 1.1em
  color: #fff
  padding: 0.4em 1.6em 0.3em 0.6em
  background-color: rgba(255,255,255,0.08)
  position: relative
  margin: 0.2em 0em
  display: inline-block
  border-radius: 2em
  &:hover
    background-color: rgba(255,255,255,0.15)
    .dot
      opacity: 1
  &.view-only:hover
    background-color: rgba(255,255,255,0.08)
  .dot
    opacity: 1
    width: 0.35em
    height: 0.35em
    margin-left: 0.3em
    position: absolute
    right: 0.7em
    top: 40%
  &.white
    background-color: white
  &.blue
    background-color: $blue
    color: white
    &:hover
      background-color: #1863B8
  &.red
    background-color: $red
    &:hover
      background-color: #CD4D2D
  &.dark-blue
    background-color: $dark-blue
  &.green
    background-color: $green
    &:hover
      background-color: darken($green, 5%)
  &.transparent-alert
    color: #f04124
    border: 1px solid #f04124
  &.circle-button
    text-align: center
    padding: 0 0.1em
    height: 1.75em
    width: 1.75em
  &.inverse-blue
    background-color: transparent
    border: 0.1em solid $blue
    color: $blue
    &:hover
      background-color: rgba(0, 23, 255, 0.02)
  &.inverse-red
    background-color: transparent
    border: 0.1em solid $red
    color: $red
    &:hover
      background-color: rgba(0, 0, 0, 0.02)
  &.disabled
    background-color: transparent
    border: 0.1em solid $light-gray
    color: $light-gray
    cursor: default
    &:hover
      background-color: transparent
  &.create:before
    font-family: 'icomoon'
    content: '\e600'
    position: relative
    top: 0.05em
    margin: 0 0.25em 0 -0.5em
  &.small
    font-size: 0.75em
  &.medium
    font-size: 0.875em

a.help-button
  padding: 0.25em 1.25em

[class^="custom-icon-"]
  width: 1em
.custom-icon-close:after
  content: url('/skin/images/close-x.svg')
.custom-icon-radio:after
  content: url('/skin/images/radio-icon.svg')
.custom-icon-text-input:after
  content: url('/skin/images/text-input-icon.svg')
.custom-icon-vertical-dots
  margin-bottom: -0.5em
  &:after
    content: url('/skin/images/3dots-icon.svg')
.custom-icon-checkbox:after
  content: url('/skin/images/checkbox-icon.svg')
.custom-icon-slider:after
  content: url('/skin/images/slider-icon.svg')
.custom-icon-dropdown:after
  content: url('/skin/images/dropdown-icon.svg')

#topbar
  display: none
  background: #242933
  position: fixed
  top: 0
  left: 0
  right: 0
  padding: 0 1em 0 1em
  color: #000
  z-index: 1000
  height: 4.25em
  line-height: 4.25em
  min-width: 57em
  .icon
    font-size: 1.3em
  img
    height: 2.5em
  .toolbar
    margin: .8em 0 0 0
  .dropdown-menu
    .icon
      font-size: inherit
  .white
    color: #FFFFFF
  .blue
    color: #207CE5
  .notify
    &:hover
      -webkit-animation-name: tada
      animation-name: tada
    .icon
      position: relative
    .dot
      opacity: 1
      position: absolute
      top: -20%
      left: 95%
      width: 0.3em
      height: 0.3em
      background-color: #E85834
  .portrait
    margin-left: 1.5em
  .name
    color: #7EC3EA
    font-size: 1.3em
    margin: 0.5em 0.7em
  .searchInput
    position: relative
    width: 2em
    margin: 0
    +transition(width 0.5s ease-out)
    input
      +transition(opacity 0.5s)
      opacity: 0
    .icon
      position: absolute
      top: 26%
      right: 25%
      font-size: 1.4em
      color: white
      pointer-events: none

    &:hover,
    &.searchExpand
      width: 19em
      +transition(width 0.5s ease-out)
      input
        padding-left: 40px
        opacity: 1
      .icon
        font-size: 1.2em
        top: 30%
        left: 5%
        color: $light-gray
  ul
    line-height: 1
    li
      display: list-item
      float: left
      white-space: nowrap
    a
      display: inline-block
      width: 100%
      margin-top: .4em
      &:hover .dot
        opacity: 1
    .ss-drop
      margin: 0.3em 0.5em 0 2em
      .dropdown-menu
        top: 192%
        right: -61%
        a
          margin-top: 0
      a
        &:hover
          background-color: transparent
    .dropdown
      position: relative
      &.button-drop
        margin-left: 2em

#current-availability-text
  text-transform: capitalize
  font-weight: 200
  padding: 0 0.2em

.dot
  &.green, &.activity-level-success
    background-color: #39B54A
  &.yellow, &.activity-level-warning
    background-color: #FBB03B
  &.dark-red
    background-color: #C1272D
  &.red, &.activity-level-alert
    background-color: #E85834

.page-container
  overflow: hidden
  padding-top: 4.25em
  height: 100%
  z-index: 0

#sidebar
  display: none
  width: $sidebar-width
  position: fixed
  top: 4.25em
  bottom: 0
  z-index: 2
  +transition(width 0.5s ease-out)
  ul
    li
      white-space: nowrap
      a
        +transition(padding 0.5s ease-out)
        width: 100%
        display: inline-block
        font-size: 1.4em
        color: $light-gray
        padding: 1em 1em 1em 2.1em
        position: relative
        &:hover
          background-color: rgba(0, 0, 0, 0.05)
        &.active
          color: #fff
          background-color: #207CE5
          &:before
            content: ""
            display: block
            width: 0
            height: 0
            position: absolute
            top: 40%
            right: -0.45em
            border-style: solid
            border-width: 0.5em 0 0.5em 0.5em
            border-color: transparent transparent transparent #207ce5
            z-index: 300
        .icon
          font-size: 1.1em
          margin-right: 1em
        .menu-name
          position: relative
          top: 0.25em
          display: inline-block
          width: 9em
          opacity: 1
          overflow: hidden
          +transition(all 0.5s ease-out)
        .alert
          position: absolute
          right: 2em
          top: 2.1em
          display: inline-block
          width: 2em
          height: 1.5em
          line-height: 1.5em
          padding: 0
          font-size: 0.7em
          font-weight: 100
          color: #fff
          text-align: center
          background-color: #E85834
          border-radius: 5em
          +transition(all 0.5s ease-out)
          &:empty
            opacity: 0
  .fixed-bottom
    position: absolute
    bottom: 0
    left: 0
    right: 0
    a
      padding: 1em
      .menu-name
        position: relative
        top: 0
        left: -1em
        width: 17em
  &.collapsed
    width: $sidebar-width-collapsed
    ul
      li
        a
          position: relative
          padding-left: 1em
          padding-right: 1em
          .menu-name
            opacity: 0
            width: 0
          .alert
            top: 1em
            right: 1em
            width: 1.5em
            height: 1.5em
            line-height: 1.5em
            font-size: 0.5em
            border-radius: 50%

#page-content
  margin-left: $sidebar-width
  height: 100%
  background-color: white
  position: relative
  z-index: 1
  +transition(all 0.5s ease-out)
  section
    top: 0

#dashboard
  .container
    width: 20em
    text-align: center
    margin: 0 auto
    margin-top: 10%
    h1
      font-family: $main-font

#page-content
  margin-left: $sidebar-width-collapsed

.container .row.header-row
  max-width: none
  line-height: 1
#logout
  display: none
  top: 5em
  position: relative
  +transition(top 0.5s)

.right
  float: right

section
  background-color: #fff
  display: none
  position: absolute
  top: 4.25em
  left: $sidebar-width-collapsed
  z-index: 1
  right: 0
  bottom: 0
  +transition(left 0.5s ease-out, right 0.5s ease-out)
  &.collapsed
    left: $sidebar-width
    right: -$sidebar-width

.counter
  display: inline-block
  margin-left: 1em
  width: 2em
  height: 2em
  line-height: 2em
  border-radius: 50%
  font-size: 0.8em
  background-color: #fff
  position: relative
  top: -0.1em

.side-resizer
  font-size: inherit !important
  width: 1em
  right: -0.5em
  z-index: 1000

.resizer
  display: none !important
  width: 3em
  height: 3em
  background-color: rgba(0,0,0,0.05)
  position: absolute
  bottom: 0
  right: 0
  top: auto !important
  font-size: inherit !important

.disconnected-alert
  background-color: rgba(251, 176, 59, 0.75)
  position: absolute
  top: 0
  left: 0
  width: 100%
  text-align: center
  height: 4em
  z-index: 999
  max-height: 0
  overflow-y: hidden
  +transition(max-height 0.25s ease-out)
  &.show
    max-height: 4em
  .message
    color: rgba(251, 176, 59, 1)
    font-weight: bold
    padding: 0.25em 7.25em
    background-color: white
    border-radius: 1em
    position: relative
    display: inline-block
    top: 50%
    transform: translateY(-50%)
  &.disconnected-alert-chat-tabs
    top: 2.5em
.ellipsis-animate
  &:after
    overflow: hidden
    display: inline-block
    position: absolute
    margin-left: 0.25em
    vertical-align: bottom
    -webkit-animation: ellipsis 1s infinite
    animation: ellipsis 1s infinite
    content: "\2026"
    width: 0px

.queue
  position: fixed
  .container
    position: absolute
    bottom: 0
    top: 3.7em
    left: 0
    right: 0
    padding: 0 3.5em 0 3.5em
    overflow: auto
  .history-container
    height: auto
    header.chat-history
      margin: 0.25em 0 1em
      h2
        display: block
        float: left
        margin-top: 0.4em
      .history-back
        float: right
        width: 5em
        margin: 1em 0 0 0
      .searchInput
        margin: 1em 0 0 0
  .chat-container
    position: absolute
    bottom: 0
    top: 5.5em
    left: 0
    right: 0
    .chat-sub-container
      position: absolute
      bottom: 0
      top: 0
      left: 0
      right: 0
  .history-views-container
    margin: 0
    &.chat
      border-top: 0.15em solid #E6E6E6
    .history-index
      padding: 0 3.5em 0 3.5em
    .chat-window
      &>article
        bottom: 1em
      &>footer
        display: none
    .chat-info
      color: #808080
  h2, h3, h4, h5
    font-weight: bold
    margin-top: 0.5em
  h2
    font-size: 2em
  .title
    color: #004e7d
    margin: 1.5em 0 0
  .slide-nav
    top: 7.9em

#queue-nav, nav#reporting-nav, #admin-nav
  position: fixed
  width: 100%
  background-color: #F2F2F2
  border-bottom: 0.15em solid #C2C2C2
  font-size: 0.85em
  ul
    margin-left: 3.5em
    li
      position: relative
      display: inline-block
      margin: 0 1.5em
      padding: 1em 0
      cursor: pointer
      min-width: 7em
      text-align: center
      color: $light-gray
      -moz-transition: color 0.75s ease
      -webkit-transition: color 0.75s ease
      transition: color 0.75s ease
      &:last-child::before
        position: absolute
        bottom: 0
        left: 1em
        width: 5em
        height: 4px
        background: #207CE5
        content: ''
        -webkit-transition: -webkit-transform 0.3s
        transition: transform 0.3s

#queue-nav
  ul
    li
      &:first-child
        margin-left: 0
      &:first-child.active ~ li:last-child::before
        -webkit-transform: translate3d(-31em, 0, 0)
        transform: translate3d(-31em, 0, 0)
        width: 7em
      &:nth-child(2).active ~ li:last-child::before
        -webkit-transform: translate3d(-20em,0,0)
        transform: translate3d(-20em,0,0)
        width: 5em
      &:nth-child(3).active ~ li:last-child::before
        -webkit-transform: translate3d(-10em,0,0)
        transform: translate3d(-10em,0,0)
        width: 5em
      &.active
        color: #207CE5

nav#reporting-nav
  ul
    li
      &:last-child::before
        left: 0.3em
        width: 6.5em
      &:first-child
        margin-left: 0
      &:first-child.active ~ li:last-child::before
        -webkit-transform: translate3d(-41.7em, 0, 0)
        transform: translate3d(-41.7em, 0, 0)
        width: 4.5em
      &:nth-child(2).active ~ li:last-child::before
        -webkit-transform: translate3d(-31.25em,0,0)
        transform: translate3d(-31.25em,0,0)
        width: 3.5em
      &:nth-child(3).active ~ li:last-child::before
        -webkit-transform: translate3d(-23em,0,0)
        transform: translate3d(-23em,0,0)
        width: 7.2em
      &:nth-child(4).active ~ li:last-child::before
        -webkit-transform: translate3d(-13em,0,0)
        transform: translate3d(-13em,0,0)
        width: 9.75em
      &.active
        color: #207CE5

.inline-edit-header
  .inline-edit-text
    line-height: 1
    float: left
    font-size: 2em
    font-weight: bold
    cursor: default
  input.inline-edit-input
    width: auto
    font-size: 2em
    font-weight: bold
    margin: -0.15em 0 -0.125em -0.3em
    padding: 0 0 0 0.25em
    height: auto
    float: left
    & + i
      cursor: pointer
  i.icon-edit
    line-height: 1.75
    margin-left: 0.5em

#admin-department-panels
  line-height: 1
  margin-top: 1em
  .panel
    padding: 0.75em 1em
    min-height: 20em
    &> :first-child
      margin-bottom: 0.5em
    .department-name
      color: #004e7d
      font-size: 1.3em
      margin: 0
    .department-link
      color: #999999
      cursor: pointer
      margin-top: 0.2em
      span
        float: right
      .icon-right
        border: 0.15em solid #999999
        border-radius: 50%
        margin-left: 0.25em
  &.row
    max-width: none
    [class*="column"] + [class*="column"]:last-child
      float: left
#department-summary-group-container .row
  background-color: white
  -moz-border-radius: 1.5em
  -webkit-border-radius: 1.5em
  border-radius: 1.5em
  font-weight: bold
  margin: 0.5em -0.25em
  padding: 0.6em 0
  cursor: pointer
  .group-name
    color: $blue
    font-weight: bold
  .group-link
    padding-left: 0
    span
      color: #999999
      float: right
      cursor: pointer
      font-size: 0.8em
    i
      margin-right: 0.25em
.row.max-width-none
  max-width: none
#department-create-button, #group-create-button
  margin-top: 0.5em
  font-size: 1.1em
  float: right
  width: 100%
  text-align: center
  padding: 0.25em 1.25em 0.25em 0.75em
  border-radius: 0.5em
  i
    padding-right: 0.25em
    position: relative
    top: 0.05em
#user-settings
  padding: 1em 3.5em 0 3.5em
  overflow: auto
  .title
    display: inline-block
    padding: 0.5em 0
    color: #004e7d
    font-weight: bold
  .row
    max-width: none
    margin-left: 0
    margin-right: 0
  .help-data-row .row .control
    padding-right: 0em
  .columns > label
    font-size: 1.1em
  .chat-responses-container
    margin-top: 1em
  h2
    margin-top: 0.4em
    font-size: 2em
    font-weight: bold
  h4.header
    padding-bottom: 0.5em
    i
      color: #207CE5
      padding-right: 0.5em
  form input[type='submit']
    width: 100%
    border-radius: 2em
    margin-bottom: 0
    border: 0
    box-shadow: none
    outline: none
    -webkit-appearance: none
    -moz-appearance: none
    padding: 0.5em 1.5em
    background-color: #207ce5
    color: #fff
    float: right
  form label
    position: relative
  form fieldset
    margin: 0
  form .icon
    position: absolute
    top: 0
    left: 15px
    border: 0
    background: 0 0
    padding: 0.5em 0
    margin: 0
    color: $light-gray
    font-size: 1.3em
    &.hide-show-password-toggle
      right: 15px
      left: inherit
      cursor: pointer

section#salesforce
  padding: 1em 3.5em 0 3.5em
  overflow: auto

.salesforce-container
  margin: 0
  form
    width: 50%
    margin-top: 2em
  .row
    max-width: none
  .header-icon
    width: 5em
    float: left
    margin: 1em
  .chat-info
    border: none
    width: 100%
    max-width: none
    position: relative
    article
      padding: 0
#salesforce-authentication-form fieldset
  padding: 0

.chat-info article.salesforce
  position: relative
  .row
    padding: 0
    .columns
      padding: 0
      .help-button
        width: 100%
        font-size: 0.9em
        text-align: center
        padding: 0.5em
    &.controller
      display: block
      padding: 0.5em 0 0.25em 0
      .small-4:nth-child(1)
        padding-right: 0.5em
      .small-4:nth-child(2)
        padding-right: 0.25em
        padding-left: 0.25em
      .small-4:nth-child(3)
        padding-left: 0.5em
      .small-6:nth-child(1)
        padding-right: 0.5em
      .small-6:nth-child(2)
        padding-left: 0.5em
  .attribute-val
    float: right
  li
    padding: 0.5em 0
  ul li ul, ul li ol
    margin-left: 0
  form.post-form
    max-height: 0em
    overflow: hidden
    +transition(max-height 1s)
    &.open
      max-height: 75em
      +transition(max-height 1s)
    input[type='text']
      margin: 0 0 0.75em 0
    .selectize-input
      line-height: 2.3125rem
      height: 2.3125rem
      padding: 0 0.5em
      margin: 0 0 0.5em 0
      border-radius: 2em
      box-shadow: none
      outline: none
      padding-left: 1.5em
      padding-right: 1.5em

    .controller
      margin-top: -1.125rem

#salesforce-upload-transcript-container
  font-size: 0.9em

#chat-tabs
  width: 100%
  height: 100%
  background-color: $light-gray
  .tabs
    white-space: nowrap
    position: relative
    width: 100%
    overflow: auto
    .ps-scrollbar-x-rail
      margin-bottom: 0.25em
  .tab-controller
    display: none
    position: absolute
    right: 0.5em
    font-size: 1.25em
    top: 0.25em
    cursor: pointer
    color: $blue
    i
      padding: 0.1em
      border-radius: 2em
      background-color: white
    .icon-left
      margin-right: 0.35em
  .chat-header-tab
    line-height: 0
    display: inline-block
    float: none
    &>a
      background-color: #E6E6E6
      display: inline-block
      width: 17.5em
      min-height: 2.5em
      +transition(background-color 0.2s ease)
      padding: 0.5rem
      border-left: 0.15em solid $light-gray
      color: inherit
      font-family: inherit
      &.active
        background-color: white
        color: #207CE5
        font-weight: bold
        .tab-name
          font-weight: inherit
        .avatar
          background-color: #BDCDE3
      &.alert
        background-color: #88C2E9
      .dot
        opacity: 1
        width: 0.75em
        height: 0.75em
        margin-top: 0.4em
        margin-right: 0.3em
        float: right
    .chat-header-tab-close
      position: absolute
      top: 0
      right: 0
      padding: 0 1em
      line-height: 2.75em
      display: none
      color: #E85834
      opacity: 0.7
      cursor: pointer
      &:hover
        opacity: 1 !important
  .avatar
    border-radius: 50%
    width: 1.5em
    float: left
    background-color: white
  .tab-name
    float: left
    padding: 0.75em
    font-size: 0.95em
    font-weight: bold
    width: 84%
    overflow: hidden
    text-overflow: ellipsis
  ul.tabs li:first-child a
    border-left: none
  .tab-content
    position: absolute
    bottom: 0
    top: 2.5em
    left: 0
    right: 0
    white-space: nowrap
    overflow: hidden
    overflow-x: auto
    background-color: #fff

.chat-main-message
  box-sizing: border-box
  padding-left: 1em
  border-top: 1px solid rgba(0,0,0,0.1)

.chat-window .ui-autocomplete
  position: absolute
  top: 100%
  left: 0
  z-index: 1000
  float: left
  padding: 4px 0
  margin: 0 0 10px 25px
  list-style: none
  background-color: white
  border: 2px solid $light-gray
  border-bottom: none
  width: calc(100% - 87px)
  overflow: hidden
  .ui-menu-item > a.ui-corner-all
    display: block
    padding: 3px 15px
    clear: both
    font-weight: normal
    white-space: nowrap
    text-decoration: none
  .ui-state-focus
    color: white
    text-decoration: none
    background-color: $blue
    background-image: none
  .keyword
    padding-right: 0.75em
    font-weight: bold

#chat-queue
  display: block
  width: 100%
  z-index: 400

.chat-info
  background-color: white
  display: inline-block !important
  position: absolute
  top: 0
  bottom: 5.25em
  width: $chat-info-width
  border-right: 0.1em solid #ccc
  overflow-y: auto
  z-index: 300
  article
    margin-top: 2em
    padding: 0 2em
    color: #808080
  article li
    padding: 0.25em 0
    display: block
    white-space: normal
    clear: both
    &:first-of-type
      padding-top: 1em
  li &:after
    content: ""
    display: block
    clear: both
  h1, h2, h3, h4, h5, h6, h7
    color: $dark-blue
    font-weight: bold
    &.blue
      color: $blue
  a
    color: #207CE5
  .title
    margin: 0
  .chat-time
    font-size: 1.125em
  ul li
    label
      color: $light-gray
      font-size: 0.75em
      float: left
      width: 50%
      & + a
        float: right
        text-align: right
        width: 50%
        font-size: 0.9em
    .system-info
      text-align: right
  .row
    padding: 1.5em 0 0 0
    ul li
      padding-bottom: 0.5em
    &.small-padding
      padding: 0.5em 0 0 0
  span.blue
    color: $blue
  .red
    color: $red
  .gray
    color: $light-gray
  .portrait
    width: 146px
    border: 2px solid #E6E6E6
    padding: 3px
    display: block
    margin: 2em auto 1em
  .name
    text-align: center
    margin-bottom: 0
  .info
    text-align: center
    font-size: 0.9em
  .priority
    color: #E85834
    margin: 0.4em
  .email
    margin: 0.4em
  .links
    li
      padding: 0
      a
        text-transform: capitalize
  nav ul li
    position: relative
    display: inline-block
    padding: 0.75em 1em
    cursor: pointer
    width: 33.33%
    border-left: 0.2em solid white
    font-size: 0.8em
    text-align: center
    color: #999999
    background-color: #E6E6E6
    &.active
      color: #207CE5
      background-color: white
      font-weight: bold
  header
    position: relative
    .row
      padding: 0.75em 0
      border-bottom: 0.15em solid #E6E6E6
    .center-overlay
      position: absolute
      display: inline-block
      top: 2em
      background-color: white
      text-align: center
      border: 0.15em solid #E6E6E6
      border-radius: 5em
      width: 7em
      padding: 0.5em 0
      left: 0
      right: 0
      margin: 0 auto
    h5
      margin: 0.25em 0 0 0
      font-weight: normal
  a.help-icon-button.blue
    color: #fff
  .help-data-rows-light header
    border-bottom: 0.15em solid #E6E6E6
  .help-data-rows .dark-blue
    color: $dark-blue
  .referer
    .page
      display: block
      text-align: right
      text-overflow: ellipsis
      overflow: hidden
  .history-chat-info-questions
    padding: 1em 1em 0 1em
    font-size: 1.1em
    color: $light-gray
    .history-chat-info-question
      padding-bottom: 1.5em
    .answer
      font-weight: bold
      &.blue
        color: $blue
  .history-chat-info-empty
    text-align: center
    padding-top: 1em
    font-size: 1.1em
  .chat-tags li
    float: right
    margin-left: 0.75em

.toggle-slide-nav
  color: #fff
  cursor: pointer
  position: absolute
  bottom: 0.75em
  font-size: 1.5em
  right: 1.2em
  z-index: 300
  background-color: #e85834
  padding: 0.50em
  border-radius: 5em

.slide-nav
  background-color: #242933
  width: 35%
  width: 25em
  height: 100%
  position: fixed
  +transition(right 0.5s ease-out)
  right: -50em
  top: 6.75em
  z-index: 1001
  &.slide-nav-show
    right: -0.1em
  .icon
    display: inline-block
    padding-right: 0.5em
    &.disabled
      color: rgba(255, 255, 255, 0.35)
  header
    color: #88C2E9
    background-color: #303742
    padding: 0.75em 1em 0.5em
    height: 2.75em
    span
      padding-right: 0.5em
  textarea.block
    width: 100%
    height: 100%
    background-color: #242933
    color: white
    border: none
    &:focus
      box-shadow: none
  .chat-nav-transfers
    position: relative
    .searchInput
      position: relative
      width: 100%
      border: none
      padding: 0.5em 0.75em
      input
        width: 100%
        padding-left: 2.25em
        background-color: #303742
        color: white
        border: none
        height: 2em
        &:focus
          outline: none
      .icon
        top: 0.6em
        left: 1em
        right: inherit
        color: rgba(255,255,255, 0.5)
    .userlist
      position: absolute
      right: 0
      left: 0
      top: 5.5em
      bottom: 10.5em
      overflow-y: auto
      overflow-x: hidden
    .manager-title
      display: inline-block
  .user-info
    width: 100%
    .icon-right
      position: relative
      left: 0.3em
      top: 0.1em
    .portrait
      max-width: 2.5em
      border: none
      padding: 0
      margin: 0.5em 0.5em 0.5em 0.75em
      float: left
    .name
      color: #88C2E9
      float: left
      margin-top: 1em
    &:after
      content: ""
      display: block
      clear: both
  .help-icon-button
    color: white
    font-size: 1em
    font-weight: 100
    padding: 0em 1.25em 0.1em 0.6em
    display: block
    float: right
    margin-top: 1em
    margin-right: 0.5em
    .dot
      right: 8%

.chat-nav-notes
  height: 30%
  position: relative
  .chat-notes-container
    height: 100%
    padding-bottom: 2.75em
  footer .status
    position: absolute
    color: $light-gray
    bottom: 0.5em
    right: 1em
    +transition(opacity 1s)
    opacity: 1
    &:empty
      +transition(opacity 1s)
      opacity: 0
.chat-nav-tags
  height: 20%
.chat-nav-transfers
  height: 50%
  .transfer-actions-selector
    .status-action-button
      padding: 0 0.1em
      height: 1.75em
      width: 1.75em
    .icon
      margin: 0.5em 0.6em
      font-size: 0.75em
  .transfer-actions-type, .transfer-actions-cancel
    position: absolute
    opacity: 0
    +transition(right 0.5s ease-out)
    right: -50em
    &.opened
      right: 0
      opacity: 1
    .help-icon-button
      border: 2px solid transparent
    .help-icon-button-inverse
      background-color: transparent
      border: 2px solid rgba(255,255,255,0.08)
    .help-icon-button-inverse-red
      background-color: transparent
      border: 2px solid rgba(232, 88, 52, 0.75)
  .ampersand-search-select
    height: 3.5em
    body
      background: transparent
      height: 4.5em
      padding: 1em
      overflow: hidden
    &-glass
      top: -2.7em
      left: 0.75em
      &-circle, &-line
        stroke: #d0d0d0
        stroke-width: 0.2em
        fill: none
    &-bar
      width: 100%
      border: 0px solid #000
      border-radius: 1em
      padding: 0.5em 0.5em 0.5em 3em
      padding-left: 3em !important
      border-top: none !important
      box-sizing: border-box
      font-size: 0.8em
      outline: none
      background-color: #fff
      box-shadow: none
    &-query
      &-text
        font-weight: bold
        text-anchor: start
      &-add
        cursor: pointer
        opacity: 0.75
        &:hover
          opacity: 1
        &-circle
          fill: #e85834
        &-line
          stroke: #fff
          stroke-width: 0.2em
          stroke-linecap: round
      &-check
        cursor: pointer
        opacity: 0.75
        &:hover
          opacity: 1
        &-circle
          fill: #22B573
        &-line
          stroke: #fff
          stroke-width: 0.2em
          stroke-linecap: round

.help-icon-button
  &.transfer-visible, &.transfer-blind, &.cancel-transfer
    padding: 0em 1em

.chat-nav-actions
  position: absolute
  bottom: 6.75em
  width: 100%
  button
    width: 100%
    margin: auto
    padding: 2em
  .chat-nav-action
    width: 100%
    margin: auto
    padding: 1em 2em
    color: white
    background-color: #008cba
    display: block
    text-align: center
    font-size: 1.25em
    line-height: 1
    &.alert
      white-space: normal
      background-color: #f04124
      border-color: #cf2a0e
      color: white
      .white
        color: #f04124
        background-color: white
    .help-icon-button
      background-color: transparent
      border: 1px solid white
      font-size: 0.85em
      padding: 0.75em 1.5em
    .help-icon-button-group
      width: 60%
      margin: auto
    &.chat-end
      cursor: pointer
      .inner-button
        position: relative
        .icon
          position: absolute
          top: 5%
          left: 13%
    &.chat-end-confirm
      z-index: 1001
      position: absolute
      +transition(bottom 0.25s)
      bottom: -25em
      &.opened
        bottom: 0
      &:after
        content: ""
        display: block
        clear: both

@media screen and (max-width: 80em)
  #chat .slide-nav
    font-size: 0.9em
    top: 7.5em
    .chat-nav-notes
      height: 26%
    .chat-nav-transfers .userlist
      bottom: 7.75em
    .chat-nav-action
      padding: 0.75em 2em 1.25em


.chat-window
  background-color: white
  display: inline-block
  float: left
  position: relative
  height: 100%
  width: calc(100% - #{$chat-info-width})
  min-width: 30em
  border-right: 0.15em solid #E6E6E6
  z-index: 400
  //&:empty
    display: none
  &>header
    font-size: 0.8em
    line-height: 3em
    height: 3em
    padding-left: 0.6em
    .name
      color: #000
      font-weight: 700
  &>article
    display: inline-block
    position: absolute
    top: 0.5em
    bottom: 4.75em
    left: 0
    right: 0.6em
    overflow-x: auto
    overflow-y: auto
    ul
      list-style-type: none
      margin: 0
      padding: 0
      li
        color: inherit
        &.chat-message-customer
          background-color: #F1F2F2
          .name
            color: #207CE5
        &.chat-message-system
          font-style: italic
          color: #757575
          p, .name
            color: inherit
        &.chat-message-predictive
          background-color: rgba(251, 176, 59, 0.25)
          font-style: italic
          color: $dark-gray
          padding-top: 0.5em
          padding-bottom: 0.5em
          .name
            color: inherit
          p
            color: #808080
          .status
            font-weight: bold
            float: left
            margin-left: 0.2em
          .time
            display: none
        .chat-line
          margin: inherit
          .time
            display: none
            position: absolute
            top: 0.4em
            right: 0.65em
          &:hover
            .time
              display: block
  &>footer
    display: inline-block
    position: absolute
    bottom: 0
    right: 0
    left: 0
    padding: 0
    height: 4.75em
    background-color: #fff
    .row
      max-width: inherit
      margin-top: 1.5em
    input
      display: none
    textarea
      border: 2px solid $light-gray !important
      padding: 7px
      height: 38px
      min-height: 38px
      min-width: initial
      max-height: 170px
      position: absolute
      bottom: 0
      box-shadow: none
      width: calc(100% - 85px)
      margin-left: 48px
      line-height: 1.4em
      resize: none
      &:focus
        background: white
        box-shadow: none
      &.disconnected
        background-color: rgba(251, 176, 59, 0.75)
    input[type='submit']
      position: absolute
      top: 0
      left: 0
      border: 0px solid #000
      display: inline-block
      width: 0 !important
      height: 0 !important
      padding: 0 !important
      margin: 0 !important
    .chat-end
      display: none
    button
      height: 4em
      width: 100%
    .icon
      float: left
      font-size: 1.75em
      padding: 0.2em 0.4em
      color: $light-gray
    #customer-message-status
      position: absolute
      font-size: 0.8em
      color: $light-gray
      top: 0.2em
      left: 4.25em
      +transition(opacity 0.65s, top 0.5s)
      opacity: 1
      &:empty
        top: 50em
        opacity: 0

.chat-queue-placeholder
  height: 6em

#login
  background-color: transparent
  top: 45%
  bottom: auto
  height: 22em
  margin-top: -11.5em
  padding-top: 0
  z-index: 1
  .container
    width: 20em
    text-align: center
    margin: 0 auto
    form
      margin-top: 3em
      .row
        position: relative
      .meta-login
        label
          font-size: 1em
          color: #666666
        a
          font-size: 1em
          color: $light-gray
          font-weight: bold
        input[type="checkbox"]
          display: none
          + label
            position: relative
            border: 2px solid #666666
            width: 1em
            height: 1em
            cursor: pointer
            float: left
            margin: 5px 0px
            .icon
              display: none
        input[type="checkbox"]:checked
          + label
            .icon
              display: block
              position: absolute
              left: 1px
              top: 0
              padding: 0.15em 0
              color: #666666
              font-size: 0.6em
        .checkbox-label
          float: left
          margin-left: 10px
    .login-error
      background-color: $blue
      color: white
      padding: 10px
      display: none
    input[type='text'], input[type='password'], input[type='email']
      width: 100%
      padding: 0.8em 1em 0.8em 2.8em
      margin: 0
      border-width: 0
      background-color: #fff
      box-shadow: none
      font-size: 1.2em
    input[type='submit']
      margin: 1.5em 0 0.5em 0
      width: 100%
      background-color: #e85834
      font-weight: bold
      font-size: 1.2em
      &:hover
        background-color: #d2502f
    .icon
      float: left
      position: absolute
      top: 0
      left: 15px
      border: 0
      background: 0 0
      padding: 0.7em 0
      margin: 0
      color: $light-gray
      font-size: 1.3em
      &.hide-show-password-toggle
        float: right
        right: 15px
        left: inherit
        cursor: pointer
      &.capslock
        right: -1.75em
        left: auto
    a
      float: right
    .white
      background-color: #fff
      .divider
        background-color: #bbb
        opacity: 0.2
        height: 2px
        width: 19em
        margin: 0 0.5em
    .hide-show-password-wrapper
      input
        padding-right: 5.5em !important
    .hide-show-password-toggle
      bottom: 0
    .checkbox
      float: left
      input[type='checkbox']
        position: relative
        top: 0.1em
        margin-right: 0.5em
    h3.reset-sent
      margin-top: 2em
      background-color: #fff
      padding: 1em
      border-radius: 50px
      font-size: 1.3em
      color: #006ea4
      i
        color: #e75734
  .disconnected-alert
    position: fixed

#login-logo
  position: relative
  top: -32em
  +transition(top 0.75s)
  max-width: 6em

.chat-main
  position: relative
  display: inline-block
  border-radius: 0.5em
  border: 1px solid #000
  width: 20em
  height: 20em
  input[type='submit']
    display: inline-block
    width: 0 !important
    height: 0 !important
    padding: 0 !important
    margin: 0 !important

.chat-window-message
  position: absolute
  height: 2em
  line-height: 2em
  padding-top: 0
  padding-bottom: 0
  bottom: 0
  left: 0
  right: 0

.chat-message
  position: relative
  padding: 0 0.5em 0 3em
  text-align: left
  display: block
  float: left
  width: 99%
  b
    font-size: 0.8em
    display: none
  p
    padding: 0.25em 0 0.25em
    margin: 0
    color: black
    display: inline-block
    width: 90%
    float: left
    font-size: 0.9em
    white-space: normal
  .time
    display: block
    float: right
    color: $light-gray
    font-size: 0.75em
    position: absolute
    top: 0.4em
    right: 0.65em
  .name
    display: block
    float: left
    color: $light-gray
    font-weight: bold
  .chat-message-header
    display: block
    padding-top: 0.25em
    &:after
      content: ""
      display: block
      clear: both
  &-link
    color: #207ce5
    &:link, &:active, &:visited
      color: #207ce5
h3.reset-sent
  padding-top: 2em

#templates
  display: none

#chat-templates
  display: none

#chat-none
  background-color: $light-gray
  height: 100%
  padding-top: 20%
  .message
    background-color: #ebebeb
    border-radius: 6em
    padding: 1.25em 0.5em
    width: 60%
    margin: 0 auto
    span
      display: block
      margin-bottom: 0.25em
      font-size: 1.05em
    .message-header
      font-weight: bold
    .columns
      font-size: 1.2em
      color: $dark-gray
    img
      padding: 1em
    .chat-none-logo
      background-color: #fff
      padding: 0em
      height: 5em
      width: 5em
      border-radius: 6em
    .help-button
      width: 100%
      text-align: center
      font-size: 1.2em
      padding: 0.5em 1.25em
#help-ui-templates
  display: none

.help-ui-spinner
  width: 7em
  position: relative
  display: inline-block
  input[type="number"]
    -moz-appearance: textfield
    text-align: right
    padding-right: 2.5em
    &:focus
      background-color: white
      box-shadow: none
      border: none
  .ui-spinner
    .ui-spinner-button
      color: $blue
      position: absolute
      right: 0.7em
      height: 0
      .ui-icon
        display: none
      &.ui-spinner-down
        top: 0.9em
      &.ui-spinner-up
        top: 0
    .ui-button-text:after
      font-family: 'icomoon'
    .ui-spinner-up .ui-button-text:after
      content: '\e613'
    .ui-spinner-down .ui-button-text:after
      content: '\e606'

.dropdown-menu
  position: absolute
  line-height: 1em
  top: 120%
  left: 20%
  margin-left: 0
  z-index: 300
  background-color: white
  color: $light-gray
  border: 3px solid #E6E6E6
  padding: 0em
  visibility: hidden
  opacity: 0
  width: 13.5em
  +transition(opacity 0.25s)
  &.opened
    visibility: visible
    opacity: 1
  &.right-position
    left: inherit
    right: -35%
    &:before
      left: inherit
      right: 8px
    &:after
      left: inherit
      right: 4px
  li
    display: block
    width: 100%
    font-size: 1.1em
    +transition(background-color 0.2s ease)
    a
      padding: 0.7em 0 0.7em 1em
    .icon
      font-size: 1em
      position: absolute
      top: 5px
    &.divider
      border-bottom: 3px solid #E6E6E6
      padding: 0
    &:hover
      color: white
      background-color: #207CE5
    span
      position: relative
      margin-right: 2em
      top: -0.2em
      &.status-name
        margin-right: inherit
  .dot
    opacity: 1
    width: 0.35em
    height: 0.4em
    margin: 0 1em 0.3em 0.1em
  &:before
    content: ""
    display: block
    width: 0
    height: 0
    border: inset 0px
    border-color: transparent transparent white transparent
    border-width: 0 0.75em 0.75em 0.75em
    position: absolute
    top: -12px
    left: 8px
    z-index: 300

  &:after
    content: ""
    display: block
    width: 0
    height: 0
    border: inset 0px
    border-color: transparent transparent #E6E6E6 transparent
    border-width: 0 1em 1em 1em
    position: absolute
    top: -16px
    left: 4px
    z-index: 299

// --------------------------
// Utility Classes
// --------------------------
.small-text
  font-size: 0.65em
  font-weight: 100

.show
  display: block !important
.hide
  display: none
.hidden
  display: none !important
  visibility: hidden !important
.invisible
  visibility: hidden
.pull-left
  float: left !important
.pull-right
  float: right !important
.align-left
  text-align: left
.align-right
  text-align: right
.align-center
  text-align: center
.clear
  clear: both
.italic
  font-style: italic
// --------------------------
// Layout helpers from JqueryUI Css
// --------------------------
.ui-helper-hidden
  display: none

.ui-helper-hidden-accessible
  border: 0
  clip: rect(0 0 0 0)
  height: 1px
  margin: -1px
  overflow: hidden
  padding: 0
  position: absolute
  width: 1px

.ui-helper-reset
  margin: 0
  padding: 0
  border: 0
  outline: 0
  line-height: 1.3
  text-decoration: none
  font-size: 100%
  list-style: none

.ui-helper-clearfix
  support: IE7
  &:before, &:after
    content: ""
    border-collapse: collapse
  &:after
    clear: both


.ui-helper-zfix
  width: 100%
  height: 100%
  top: 0
  left: 0
  position: absolute
  opacity: 0
  filter: Alpha(Opacity=0)

.ui-front
  z-index: 100

.tab-alert-blink
  -webkit-animation: tab-alert-blink 3s linear infinite
  animation: tab-alert-blink 3s linear infinite

+keyframes(tab-alert-blink)
  0%
    background-color: #E6E6E6

  25%
    background-color: #88C2E9

  50%
    background-color: #88C2E9

  100%
    background-color: #E6E6E6

+keyframes(ss-spin)
  0%
    transform: rotate(0deg)
    transform-origin: 50%, 0%
  100%
    transform: rotate(360deg)
    transform-origin: 50%, 0%

+keyframes(ellipsis)
  from
    width: 2px
  to
    width: 14px

// Help Notify Component
.help-notify-container
  position: absolute
  z-index: 1000
  overflow: auto
  // Bottom Right
  bottom: 0
  right: 1em

.help-notify
  background-color: #E5E5E5
  border: 0.2em solid $light-gray
  margin-bottom: 1em
  padding: 1em
  position: relative
  line-height: 1em
  font-size: 0.9em
  width: 26em
  .columns
    padding: 0
    .small-3
      width: 24%
    .small-9
      width: 76%
  .controls
    float: right
  .title
    color: #207CE5
    font-weight: bold
    padding-bottom: 0.5em
    &.red
      color: $red
  .message
    color: #242933
    font-size: 0.9em
    &:empty
      margin-top: -0.7em
  .control-close
    opacity: 0
    +transition(opacity 0.5s)
    position: absolute
    top: 0
    right: 0
    font-size: 0.9em
    color: #9E9E9E
    margin: 0.5em
    cursor: pointer
  a.help-icon-button.circle-button
    padding: 0.5em 0.35em
    margin-left: 0.4em
    .icon
      font-size: 0.9em
  &:hover
    .control-close
      opacity: 1
#notify-message-template
  cursor: pointer

// Help Modal Component
.help-modal
  background: #FFF
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3)
  -webkit-background-clip: padding
  -moz-background-clip: padding
  background-clip: padding-box
  text-align: center
  z-index: 1005
  h1,h2,h3,h4,h5
    color: #207CE5
  h5
    font-size: 1.3em
  .message
    padding: 0 0 1em 0
    font-size: 1.1em
  .help-icon-button
    padding: 0.2em 1em 0.3em 1em
    font-size: 1.1em
  .help-icon-button-group
    width: 75%
    margin: auto

.help-modal-bg
  position: fixed
  top: 0
  bottom: 0
  left: 0
  right: 0
  background: black
  background: rgba(0, 0, 0, 0.45)
  z-index: 1004
  left: 0
  display: none

.help-modal, .help-modal-show
  +transition(all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275))
  /* easeOutBack */

.help-modal-hide
  +transition(all 250ms cubic-bezier(0.6, -0.28, 0.735, 0.045))
  /* easeInBack */

.help-modal
  position: fixed
  top: 50px
  left: 50%
  width: 420px
  margin-left: -210px
  padding: 2em 4em
  opacity: 1
  display: block
  .icon-close
    cursor: pointer

.help-modal-hidden
  -webkit-transform: translate(0, -150px)
  -moz-transform: translate(0, -150px)
  -ms-transform: translate(0, -150px)
  -o-transform: translate(0, -150px)
  transform: translate(0, -150px)
  opacity: 0
  display: none

/* overwrite display: none; for everything except IE6-8 */
\:root * > .help-modal-hidden
  display: block
  visibility: hidden

.help-data-rows
  text-align: center
  font-size: 0.8em
  position: relative
  .help-data-row
    position: relative
    overflow: hidden
    -moz-border-radius: 1.5em
    -webkit-border-radius: 1.5em
    border-radius: 1.5em
    .truncate-ellipsis
      white-space: nowrap
      overflow: hidden
      text-overflow: ellipsis
    .row.empty
      padding: 0.75em 0 0.75em 0em
  .row
    min-width: 100%
    padding: 0.75em 0 0.75em 3em
    +transition(margin 0.25s ease-out)
    margin: 0 0 0.5em 0
    position: relative
    z-index: 100
    cursor: pointer
    .column, .columns
      min-height: 1.35em
    .medium-1
      padding-left: 0
      padding-right: 0
    a.control-button
      position: absolute
      top: 0.4em
      left: 0.5em
      height: 1.5em
      width: 1.5em
      padding: 0.05em 0
      .icon
        font-size: 0.75em
        position: relative
        top: -0.13em
    &.control-right
      padding: 0.75em 0 0.75em 2em
      a.control-button
        left: inherit
        right: 0.7em

  header.row
    color: $light-gray
    margin-bottom: 0
    .columns
      cursor: pointer
      &.sorting_asc::after
        font-family: 'icomoon'
        font-size: 0.9em
        content: '\e613'
        position: relative
        top: 0.1em
        left: 0.4em
        color: #207CE5
      &.sorting_desc::after
        font-family: 'icomoon'
        font-size: 0.9em
        content: '\e606'
        position: relative
        top: 0.1em
        left: 0.4em
        color: #207CE5
  article
    .row
      background-color: #f2f2f2
      color: #999999
      font-weight: bold
      -moz-border-radius: 2em
      -webkit-border-radius: 2em
      border-radius: 2em
      .columns a
        color: #207CE5
  .pagination .help-icon-button
    color: #999999
    i
      color: $blue
  .controls-container
    +transition(margin 0.25s ease-out)
    margin: -4em 0 0.5em 0
    float: left
    top: 0
    padding-top: 3.5em
    padding-left: 0.5em
    padding-right: 0.5em
    z-index: 99
    background-color: #f2f2f2
    -moz-border-radius: 2em
    -webkit-border-radius: 2em
    border-radius: 2em
    .help-button
      font-size: 1em
      font-weight: normal
      margin: 0.5em
    &.collapsed
      +transition(margin 0.5s ease-out)
      margin-top: -15em
  &.help-data-rows-light
    margin: 0
    .row
      background-color: transparent
    header.row
      color: #999999
    article.row
      color: $light-gray
  &.align-left header.row
    text-align: left
  &.align-left article
    text-align: left
  &.mini .row
    padding: 0.75em 0
    margin: 0
    .control-button
      margin-top: 0.4em
  &.mini .empty
    text-align: center
    font-size: 1.5em
  &.mini article
    padding: 0
    margin: 0
    .row
      font-weight: normal
      .columns
        font-size: 1.4em
  .loading
    position: absolute
    top: 45%
    left: 50%
    z-index: 101
    font-size: 4em
    background-color: white
    height: 1em
    width: 1em
    border-radius: 1em
    margin-left: -0.5em
    img
      position: absolute
      top: 20%
      left: 20%
  .pagination a.help-icon-button
    padding: 0.4em 1em 0.5em 1em
    margin-left: 1em
    display: inline-block
    font-weight: bold
    &.page-right
      padding-right: 0.25em
      padding-left: 1em
    &.page-left
      padding-left: 0.25em
      padding-right: 1em
    .icon
      font-size: 1.25em
      font-weight: bold
      margin: 0.25em
      vertical-align: middle
    &:hover
      background-color: #f2f2f2
.contact-support-modal
  width: 80%
  max-width: 720px
  position: absolute
  left: 50%
  transform: translateX(-50%)
  -webkit-transform: translateX(-50%)
  margin: auto
  input[type='button']
    padding: 0.5em 3em
    margin-bottom: 2em
    border: 0
    border-radius: 2em
    color: #fff
    background-color: #e85834
  label:nth-child(2)
    border-top: 0.1em solid #ccc
    padding-top: 2em
  select
    margin-bottom: 1em
  .select
    span
      display: none
  textarea
    height: 6em
  .drop-file
    min-height: 5em
    background-color: lighten($blue, 40%)
    border-radius: 2em
    span
      position: relative
      top: 50%
      transform: translateY(-50%)
      display: block
    button
      background-color: transparent
      border: 0.1em solid $red
      color: $red
      border-radius: 2em
  .drop-file-hover
    background-color: lighten($blue, 20%)

.icon-question
  font-size: 1.4em

.selectize-control.plugin-remove_button .remove
  visibility: hidden
  &:after
    visibility: visible
    content: url('/skin/images/close-x.svg')
    width: 7px
    position: absolute
    top: 0.25em
    right: 0.75em

.chat-nav-tags .selectize-control
  width: 100%
  line-height: 0
  .selectize-dropdown
    color: white
    background-color: #242933
    border: none
    .option.active
      color: white
      background-color: #303742
  .create
    color: white
    background-color: #242933
    &.active
      color: white
      background-color: #303742
  .selectize-input
    background-color: #242933
    border: none
    &.focus
      box-shadow: none
    &> input
      height: 2em
      color: #fff
      float: left
      padding-top: 0.5em !important
    &> div.item
      font-weight: 300
      color: #fff
      padding: 0.2em 1.1em 0.3em 0.6em
      background-color: #242933
      position: relative
      float: left
      margin: 0.2em 0.75em 0.2em 0
      display: inline-block
      border-radius: 2em
      border: 0.1em solid white
      &.active
        color: #fff
        background-color: inherit
        border: 0.1em solid white

.selectize-tags-light .selectize-control
  width: 100%
  line-height: 0
  .selectize-dropdown
    color: #222
    background-color: #fff
    border: 0.2em solid #cccccc
    padding: 1em
    margin-top: 1em
    border-radius: 3em
  .option.active
    color: white
    background-color: #222
  .selectize-input
    width: 100%
    border: 0.2em solid #cccccc
    border-radius: 3em
    padding: 8px 15px
    &.has-items
      padding: 3px 20px 3px
    &.focus
      box-shadow: none
    &> input
      height: 2em
      color: #222222
      float: left
      padding-top: 0.5em !important
    &> div.item
      font-weight: 300
      font-size: 1.1em
      color: #222222
      padding: 0.2em 1.1em 0.3em 0.6em
      background-color: transparent
      position: relative
      float: left
      margin: 0.2em 0.75em 0.2em 0
      display: inline-block
      border-radius: 2em
      border: 0.2em solid $light-gray
  &:hover
    background: none

.selectize-icon.selectize-control.single
  .selectize-input:after
    border: none
    font-family: 'icomoon'
    content: '\e606'
    position: absolute
    top: 0.4em
    right: 2em
    color: $light-gray
  .selectize-input.input-active:after
    content: '\e613'

.chat-responses-container
  max-width: none
  & > .columns
    padding-left: 0
  .chat-tags-container
    margin-top: -0.5em
    .selectize-control
      .selectize-dropdown
        color: #222
        background-color: #fff
        border: 0.1em solid #cccccc
        padding: 1em
        margin-top: 0.1em
        border-radius: 2em
        .selectize-dropdown-content
          max-height: 6em
      .option.active
        background-color: #f5fafd
        color: #495c68
        border-radius: 0.75em
      .selectize-input
        border: none
        text-align: left
        line-height: 1em
        &> div.item
          border: 0.1em solid $light-gray

@import 'reporting'
@import 'queue/dashboard'
@import 'queue/queue-and-active'
@import 'manage'
@import 'loading'
@import 'dashboard'
@import 'salesforce'
@import 'survey'
@import 'proactive-chat'
@import 'shortcuts'
@import 'popover'