#custom-css-ta
  background: #D8D8D8
  height: 200px
  font-family: "Consolas"

.spoiler
  color: transparent !important
  img
    display: none
  &:before
    content: "Spoiler"
    display: block
    background: #1D1D1D
    color: #ADADAD !important
    min-height: 30px
    text-align: center
    line-height: 100%
    font-family: "Consolas"
    padding-top: 5px

.emotemenu-enabled .channel-textarea-inner textarea
  margin-right: 45px !important

#bdbeta
  background: red

#emote-menu
  background: #36393E
  height: 0
  width: 300px
  position: absolute
  bottom: 45px
  right: 0
  border: 1px solid #000
  border-radius: 5px 0 0 0
  overflow: hidden
  visibility: hidden
  transition: all 1s
  -webkit-transition: all 1s

.emotemenu-open
  height: 450px !important
  visibility: visible !important

#emote-menu-header
  width: 100%
  height: 30px
  background-color: #36393E

.emote-menu-tab
  float: left
  width: 130px
  text-align: center
  padding: 7px
  color: #ADADAD
  background-color: #424549
  cursor: pointer
  &:hover
    background-color: #45484C

#emote-menu-inner, #emote-menu-inner-fav
  height: 412px

.emote-menu-tab-selected
  background-color: #36393E
  &:hover
    background-color: #36393E

#emote-container
  padding: 10px

.emote-container
  display: inline-block
  padding: 2px
  border-radius: 5px
  width: 30px
  height: 30px
  position: relative

.emote-icon
  max-width: 100%
  max-height: 100%
  position: absolute
  margin: auto
  top: 0
  right: 0
  bottom: 0
  left: 0
  cursor: pointer

.emote-container:hover
  background: rgba(123, 123, 123, 0.37)

.emoteflip, .emotespinflip
  transform: scaleX(-1)

.emotespin
  animation: 1s emote-spin infinite linear

.emote1spin
  animation: 1s emote-spin-reverse infinite linear

.emotespin2
  animation: 0.5s emote-spin infinite linear

.emote2spin
  animation: 0.5s emote-spin-reverse infinite linear

.emotespin3
  animation: 0.2s emote-spin infinite linear

.emote3spin
  animation: 0.2s emote-spin-reverse infinite linear

.emotepulse
  animation: 1s emote-pulse infinite linear

.emotetr
  transform: translateX(-3px)

.emotebl
  transform: translateY(-3px)

.emotebr
  transform: translate(-3px, -3px)

.emoteshake
  animation: 1s emote-shake infinite linear

.emoteflap
  transform: scaleY(-1) !important

.emoteshake2
  animation: emote-shake2 0.3s linear infinite

.emoteshake3
  animation: emote-shake3 0.1s linear infinite

@keyframes emote-shake2
  25%
    transform: translate(-1px, -1px)

  50%
    transform: translate(-1px, 1px)

  75%
    transform: translate(1px, 1px)

  75%
    transform: translate(1px, -1px)


@keyframes emote-shake3
  25%
    transform: translate(-1px, -1px)

  50%
    transform: translate(-1px, 1px)

  75%
    transform: translate(1px, 1px)

  75%
    transform: translate(1px, -1px)


@keyframes emote-spin
  from
    transform: rotate(0deg)

  to
    transform: rotate(360deg)


@keyframes emote-spin-reverse
  from
    transform: rotate(0deg)

  to
    transform: rotate(-360deg)


@keyframes emote-pulse
  0%
    -webkit-transform: scale(1, 1)

  50%
    -webkit-transform: scale(1.2, 1.2)

  100%
    -webkit-transform: scale(1, 1)


@keyframes emote-shake
  10%, 90%
    transform: translate3d(-1px, 0, 0)

  20%, 80%
    transform: translate3d(2px, 0, 0)

  30%, 50%, 70%
    transform: translate3d(-4px, 0, 0)

  40%, 60%
    transform: translate3d(4px, 0, 0)


#tc-settings-panel
  position: fixed
  width: 50%
  height: 75%
  background: rgb(46, 49, 54)
  display: block
  z-index: 9001
  margin-left: 25%
  margin-top: 5%
  border: 1px solid #000
  box-shadow: 0 0 20px 0 #000
  max-height: 800px
  min-width: 750px

#tc-settings-panel-header
  background: rgb(54, 57, 62)
  height: 60px
  border-bottom: 1px solid #000
  box-shadow: 0 1px 0 0 rgb(78, 78, 78)
  h2
    margin: 0
    line-height: 60px
    margin-left: 10px
    color: #ADADAD
    display: inline-block
    float: left
  span
    float: right
    display: inline
    line-height: 50px
    margin-right: 15px
    font-size: 29px
    font-weight: bold
    color: #ADADAD

#rmenu
  width: auto
  background: #505050
  position: absolute
  z-index: 999999
  display: none
  box-shadow: 0 0 2px #000
  padding: 2px
  ul a
    text-decoration: none
    color: #FFF
    padding: 3px

#tc-settings-panel-body
  overflow: auto
  ul
    overflow: auto
    position: absolute
    padding: 0
    margin-top: 0
    border-bottom: 1px solid #000
    left: 0
    right: 0
    bottom: 40px
    top: 61px
    li
      padding: 15px
      color: #ADADAD
      background: #2E3136
      border-bottom: 1px solid #000
      box-shadow: 0 1px 0 #404040 inset
      &:nth-child(odd)
        background: #33363B
      h2
        display: inline

#tc-links a
  color: #FFF

#tc-settings-panel-footer
  background: rgb(54, 57, 62)
  height: 40px
  position: absolute
  bottom: 0
  right: 0
  left: 0
  border-top: 1px solid #000
  box-shadow: 0 1px 0 #505050 inset
  line-height: 40px
  padding-left: 10px
  color: #ADADAD !important

#tc-links
  float: right
  margin-right: 10px

.tc-switch
  background: rgb(46, 49, 54)
  width: 100px
  height: 24px
  display: inline-block
  float: right
  margin: -7px
  border: 1px solid #000
  outline: 1px solid #404040
  cursor: pointer
  &.disabled
    background: gray
    cursor: default
    span
      background: gray !important
    .tc-switch-on
      border-left: 1px gray !important
  span
    line-height: 24px
    display: inline-block
    width: 49px
    text-align: center
    height: 24px

.tc-switch-off
  border-right: 1px solid #000

.tc-switch-on
  border-left: 1px solid #404040
  &.active
    background: green
    border-left: 1px solid #00AE08

.tc-switch-off.active
  background: #860606

.bd-minimal
  .avatar-large
    max-width: 20px
    max-height: 20px
    background-size: 100%
    margin-right: 2px
    margin-top: 0
    border-radius: 0
  .comment
    border-left: 2px solid #EBEBEB
    padding-left: 2px
  .theme-dark .comment
    border-left: 2px solid #303030
  .user-name
    font-size: small
  &.bd-minimal-chan .channels-wrap
    display: none
  .message-group
    padding: 5px
  .embed
    padding: 2px
  .channel-members
    .avatar-small
      max-width: 15px
      max-height: 15px
      background-size: 15px 15px
      .status
        height: 5px
        width: 5px
    .member
      padding: 5px
  .channel-members-wrap
    min-width: 0px
  .channel-members h2
    margin-top: 3px
  .account
    .avatar-small, .username
      display: none
  .channel-text a
    padding: 5px !important
    font-size: small
  .guild-channels
    ul .channel-voice
      padding: 5px !important
      font-size: small
    h2
      padding: 2px
    header spann
      font-size: 12px
  .channels-wrap
    width: 160px
    .guild-channels
      padding: 0
  .guilds
    li
      .avatar-small
        width: 20px
        height: 20px
        background-size: 100%
        font-size: 15px
        line-height: 20px
      width: 20px
      height: 20px
      background-size: 100%
      font-size: 15px
      line-height: 20px
      .guild-inner
        width: 20px
        height: 20px
        background-size: 100%
        font-size: 15px
        line-height: 20px
        a
          width: 20px
          height: 20px
          background-size: 100%
          font-size: 15px
          line-height: 20px
    .friends-icon
      width: 20px
      height: 20px
      background-size: 100%
      font-size: 15px
      line-height: 20px
  .guilds-wrapper
    width: 45px
  .guilds li.active .guild-inner:before
    height: 20px
    margin-top: -10px
  .guilds-add
    font-size: 20px
    line-height: 14px
  .guilds li.audio .guild-inner:after
    width: 12px
    height: 12px
    background-size: 12px

.emotewrapper
  display: inline-block
  position: relative
  &:hover .fav
    display: block

.fav
  display: none
  position: absolute
  width: 15px
  height: 15px
  right: -7px
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAzFBMVEUAAABQUFBMTExLS0tNTU1MTExNTU1NTU1MTExMTExNTU1LS0tEREBEREBEREBEREBJSUhLS0tLS0tEREBNTU1NTU1NTU1EREArKyhNTU1NTU0AAABMTExKSklMTExNTU1NTU1NTU1KSkpMTExKSkhNTU1KSkpISEZNTU1LS0tAQDxOTk5KSkpLS0tNTU1MTExMTEx/f39MTExMTExLS0pLS0tMTExNTU1NTU1LS0pNTU1NTU1NTU1NTU1NTU1NTUxNTU1NTU1NTUxMTEzB8C/5AAAAOnRSTlMAI8X96oWAgYSF68QBAg0PMCb9BIuLgQUD4N0Bh0mKhZSOQ4gcrKscaW8QRE6fmJyjAshASceG7cIpqQOxTQAAALVJREFUGFddx6FOA0EYAOGZvd07Qm6vVCAAgUUgQEDfX/YZMAigqaFN7iC5tsmPqGPUN/AvUVeoEbGOCElJz08Uzeixqu4AqomVVSNngOVjTqDGZSl3UFtPGV2ot2zaq96YM9p5Ddzcf/nTTAlj+/sNtNu8OcwkIsbPBtrUfMQeEhGQmHbmGIFMwLPzu6UMIwBNgToshgq8Nr2ki+Oy7ebDHp70LRPWB6OZgfWLWei7fJonOOsPCGA9kVlssOoAAAAASUVORK5CYII=')
  border: none
  background-size: 100% 100%
  background-repeat: no-repeat
  background-color: #303030
  border-radius: 5px
  top: -7px
  cursor: pointer

#bd-ps-container
  position: fixed
  width: 50%
  height: 75%
  background: rgb(46, 49, 54)
  display: block
  z-index: 9001
  margin-left: 25%
  margin-top: 5%
  border: 1px solid #000
  box-shadow: 0 0 20px 0 #000
  max-height: 800px
  min-width: 750px

#bd-ps-header
  background: rgb(54, 57, 62)
  height: 60px
  border-bottom: 1px solid #000
  box-shadow: 0 1px 0 0 rgb(78, 78, 78)
  h2
    margin: 0
    line-height: 60px
    margin-left: 10px
    color: #ADADAD
    display: inline-block
    float: left
  span
    float: right
    display: inline
    line-height: 50px
    margin-right: 15px
    font-size: 29px
    font-weight: bold
    color: #ADADAD

#bd-ps-body
  position: absolute
  padding: 0
  margin-top: 0
  left: 0
  right: 0
  bottom: 0
  top: 61px
  overflow: auto

.bd-ps-server
  width: 100%
  height: 200px

.bd-ps-server-header
  height: 50px
  width: 100%
  margin-top: 1px
  background: #202020
  color: #AEAEAE
  line-height: 50px
  font-size: 20px
  span
    margin-left: 10px

.bd-ps-server-body
  padding: 5px

.bd-ps-server-icon
  width: 90px
  height: 90px
  background: #202020
  display: inline-block

.bd-ps-server-info
  position: absolute
  height: 190px
  display: inline-block
  left: 100px
  right: 5px
  color: #AEAEAE
  overflow: auto

#bd-ps-body
  table
    width: 100%
    margin: 0
    padding: 0
    border-color: red
    border-collapse: collapse
    text-align: left
    th
      background-color: #202020
      color: #EDEDED
      height: 50px
      padding-left: 5px
    tr
      margin: 0
      padding: 0
      height: 50px
      background-color: #33363B
      border-bottom: 1px solid #000
      box-shadow: 0 1px 0 #404040 inset
      td
        padding-left: 5px
        color: #EDEDED
        min-width: 100px
  .description
    overflow: auto
    max-height: 60px
    word-wrap: break-word
  table tr:nth-child(odd)
    background-color: #2E3136

#bd-show-channels
  display: none
  width: 12px
  height: 18px
  background: #2e3136
  position: absolute
  left: 33px
  top: 79px
  text-align: left !important
  padding: 0px !important
  padding-left: 3px !important
  color: #EBEBEB

.bd-minimal-chan #bd-show-channels
  display: block !important

.tipsy
  z-index: 9000000001 !important
  position: absolute
  padding: 5px
  display: block
  visibility: visible
  opacity: 0.8

.tipsy-arrow
  position: absolute
  width: 0
  height: 0
  border: 5px solid transparent
  bottom: 0
  right: 10px
  border-bottom: none
  border-top-color: black

.tipsy-inner
  background-color: black
  color: white
  max-width: 300px
  padding: 5px 8px 4px
  text-align: center
  overflow: hidden !important
  text-overflow: ellipsis

#bd-psd-container
  position: fixed
  width: 50%
  height: 75%
  display: block
  margin-left: 25%
  margin-top: 5%
  box-shadow: 0 0 20px 0 #000
  background: #2E3135
  border: 1px solid #25282C
  min-width: 750px
  min-height: 800px

#bd-psd-header
  width: 100%
  height: 40px
  border-bottom: 1px solid #25282C
  line-height: 40px
  color: #ADADAD
  span
    margin-left: 10px

#bd-psd-body
  height: 100%
  width: 100%

#bd-psd-table
  width: 100%
  margin: 0
  padding: 0
  text-align: left
  color: #ADADAD
  thead th
    background: #1D1D1D
    padding: 5px
  tbody
    td
      padding: 5px
    tr
      background: #292C30
      &:nth-child(odd)
        background: #2E3135
  button
    background: #292C30
    border: 1px solid #1D1D1D
    width: 60px
    height: 30px
    color: #ADADAD
    cursor: pointer
    &:hover
      background: #2E3135

#bd-psd-header a
  float: right
  margin-right: 10px
  font-size: 30px
  color: #ADADAD
  text-decoration: none
  margin-top: -7px

.bd-g-table
  text-align: left
  width: 520px
  white-space: nowrap
  thead th
    background: #EBEBEB !important
    color: #87909c !important
    padding: 5px !important
  tbody
    tr
      background: #E0E0E0 !important
      &:nth-child(odd)
        background: #ECECEC !important
    td
      color: #87909c !important
      padding: 5px !important
      font-size: small
  textarea
    width: 100% !important
    background: #E0E0E0 !important
    border: none !important
    resize: none !important
    font-size: small !important
    margin: 0 !important
    padding: 0 !important
  input
    margin: 0 !important
    padding: 0 !important

.message-group.compact .message .markup .message-content
  text-indent: 0

.bd-psb
  background-image: url('data:image/png;base64,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')
  width: 25px
  height: 25px
  background-color: transparent
  background-size: 100%

.bd-psm
  position: fixed
  pointer-events: auto
  width: 490px
  height: 460px
  background-color: white
  z-index: 900000
  margin: auto
  right: 0
  left: 170px
  top: -60px
  bottom: 0
  box-shadow: 0 0 10px 5px rgba(193, 193, 193, 0.75)
  border: 1px solid #EBEBEB

.bd-alert
  position: absolute
  width: 600px
  height: 200px
  left: 0
  right: 0
  top: 300px
  background-color: #2E3136
  margin: auto
  border: 1px solid #323232
  box-shadow: 0 0 5px 3px rgba(30, 30, 30, 0.5)
  color: #EBEBEB

.bd-alert-header
  height: 25px
  background: #36393E
  span
    line-height: 25px
    margin-left: 5px

.bd-alert-closebtn
  cursor: pointer
  float: right
  margin-right: 5px
  margin-top: 2px
  &:hover
    color: #ADADAD

.bd-alert-body
  height: 178px
  a
    color: #FFF !important
  .scroller-wrap
    height: 178px
    .scroller
      padding: 5px
      word-wrap: break-word

.channel-textarea-inner textarea
  margin-right: 40px

.servericon
  width: 64px
  display: inline-block
  background-size: 100% auto
  height: 64px

.serverinfo
  display: inline-block

#pubs-container
  width: 800px
  position: fixed
  top: 50%
  left: 50%
  margin-top: -284.5px
  margin-left: -400px
  background: #FFF
  z-index: 9000000
  .scroller-wrap
    height: 500px

#pubs-header
  background: #7289da
  padding: 5px 12px 5px 5px
  h2
    display: inline-block
    font-weight: 600
    color: #FFF
  input, button
    float: right
  input
    border: none
    height: 30px
    width: 100px
    color: #555
    background-color: #fff
    -webkit-transition: width 1s ease-in-out
    -moz-transition: width 1s ease-in-out
    -o-transition: width 1s ease-in-out
    transition: width 1s ease-in-out
    &:focus
      width: 300px
  button
    height: 32px
    background-color: #f9f9f9
    color: #949494

#pubs-footer
  height: 25px
  line-height: 25px
  background: #7289da
  div
    float: right
    margin-right: 5px
    font-weight: 600px
    color: #FFF
  a
    color: #FFF
    text-decoration: none
    font-weight: 800

.server-row
  padding: 5px
  display: flex
  background-color: #FFF
  &:nth-child(odd)
    background-color: #F3F3F3

.server-icon
  width: 64px
  height: 64px
  background-size: 100% auto

.server-info
  display: flex
  flex-flow: column
  line-height: 64px
  margin-left: 20px
  span
    font-size: 16px
    color: #000
    font-weight: 600
  a
    color: #4056a2
    text-decoration: none
    font-weight: 800
    margin-left: 5px
  button
    width: 90px
    height: 48px
    margin-top: 8px
    background-color: #738bd7
    color: #fff
    font-size: 19px
    &:hover
      background-color: #697ec4

.server-name
  flex-grow: 100
  span
    overflow: hidden
    text-overflow: ellipsis
    max-width: 300px
    white-space: nowrap

.server-members

.server-region
  min-width: 85px

#pubs-spinner
  position: fixed
  top: 50%
  left: 50%
  margin-left: -16px
  margin-top: -16px

#pubs-container .scroller
  &::-webkit-scrollbar-track-piece, &::-webkit-scrollbar-thumb
    border-radius: 0

.bd-hide-bd .callout-backdrop
  display: none

.bd-detached-editor .app
  width: 70%

#bd-customcss-detach-container
  position: absolute
  width: 30%
  top: 0
  right: 0
  bottom: 0
  padding-top: 58px
  background-color: #36393e

#bd-customcss-detach-editor
  height: calc(100% - 87px)
  #bd-customcss-innerpane, .CodeMirror
    height: 100%

#bd-customcss-detach-controls
  background: #E8E8E8
  border-top: 1px solid #ADADAD
  -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 1)
  height: 100%
  padding: 5px
  .checkbox-group li
    margin-top: 5px
    display: inline-block
  button
    width: 90px
    height: 30px
    margin-top: 8px
    background-color: #738bd7
    color: #fff
    font-size: 19px

#bd-customcss-detach-controls-buttons
  bottom: 5px

#editor-detached
  margin-top: 50px
  h3
    text-align: center
    font-size: 30px
  .btn
    left: 50%
    margin-left: -100px
    margin-top: 10px
    width: 200px
    height: 60px

#bd-customcss-attach-controls
  background: #E8E8E8
  border: 1px solid #FFF
  border-top: 1px solid #ADADAD
  -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 1)
  height: 100%
  padding: 5px
  height: 75px
  .checkbox-group
    li
      margin-top: 5px
      display: inline-block
    margin-bottom: 0
  button
    margin: 0
    width: 100px

#bd-customcss-detach-container #bd-customcss-detach-controls-buttons button
  width: 90px
  height: 30px
  margin-top: 8px
  background-color: #738bd7
  color: #fff
  font-size: 19px

.emoji-picker
  box-shadow: none
  border-top: none
  border-radius: 0 0 5px 5px

#bda-qem
  border-radius: 5px 5px 0 0
  background: #FFF
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important
  height: 30px
  display: flex
  flex-direction: row
  padding-right: 1px !important
  button
    border-left: 1px solid #EFEFEF
    background: transparent
    box-shadow: #CECECE 1px 0 0 0
    flex-grow: 1
    &:hover
      background: #ECECEC

#bda-qem-twitch
  border-radius: 5px 0 0 0
  order: 2

#bda-qem-emojis
  border-radius: 0 5px 0 0
  order: 3

#bda-qem-favourite
  order: 3

#bda-qem button.active
  background-color: #E2E2E2

#bda-qem-twitch-container, #bda-qem-favourite-container
  width: 346px
  height: 327px
  background-color: #FFF
  border-radius: 0 0 5px 5px

#bda-qem-twitch-container .scroller-wrap, #bda-qem-favourite-container .scroller-wrap
  height: 100%

.emote-menu-inner
  padding: 5px 0 0 15px

#rmenu
  left: 25px
  display: block !important
  cursor: pointer
  color: #FFF
  position: fixed

.bda-qme-hidden #bda-qem-emojis
  display: none

.bda-dark
  #bda-qem-favourite-container, #bda-qem-twitch-container
    background-color: #353535
  #bda-qem
    button
      background: #353535
      border-left: 1px solid #242424
      box-shadow: #424242 1px 0 0 0
      color: #FFF
      &.active
        background-color: #292929
      &:hover
        background-color: #303030
    border-bottom: 1px solid #464646 !important
    background: #353535
  #bda-qem-favourite-container, #bda-qem-twitch-container
    background-color: #353535
  .emoji-picker
    background-color: #353535
    .category
      background-color: #353535
    .header .search-bar
      background-color: #2B2B2B
    .search-bar input
      color: #FFF
      &::-webkit-input-placeholder
        color: #FFF
    .scroller .emoji-item.selected
      background: rgba(123, 123, 123, 0.37)
    .dimmer.visible
      background-color: rgba(62, 62, 62, 0.65)
    .diversity-selector .popout
      background: #353535
      border-color: #202020
  #bda-qem-twitch-container .scroller
    &::-webkit-scrollbar, &::-webkit-scrollbar-track, &::-webkit-scrollbar-track-piece
      background-color: #303030 !important
      border-color: #303030 !important
  #bda-qem-favourite-container .scroller
    &::-webkit-scrollbar, &::-webkit-scrollbar-track, &::-webkit-scrollbar-track-piece
      background-color: #303030 !important
      border-color: #303030 !important
  .emoji-picker .scroller
    &::-webkit-scrollbar, &::-webkit-scrollbar-track, &::-webkit-scrollbar-track-piece
      background-color: #303030 !important
      border-color: #303030 !important
  #bda-qem-twitch-container .scroller::-webkit-scrollbar-thumb, #bda-qem-favourite-container .scroller::-webkit-scrollbar-thumb, .emoji-picker .scroller::-webkit-scrollbar-thumb
    border-color: #202020 !important
    background-color: #202020 !important