@import '~ngx-toastr/toastr.css'
@import './style-variables.sass'
@import './animations.scss'

body
  background-color: #020305
  color: white

.blue
  color: $bootstrap-blue

.site-header-1
  color: $bootstrap-blue

.chat-body
  display: block
  margin: 0 auto
  text-align: center

.chat-logs
  display: inline-flex
  justify-content: center

.chat-logs .card
  position: absolute !important
  top: 50
  left: 50
  min-width: 300px
  min-height: 200px
  width: 300px
  height: 200px
  margin: 1em
  background-color: $card-background
  border: 1px solid $bootstrap-blue

.chat-logs .card h1
  margin: -10px 0 0
  cursor: move
  cursor: grab
  cursor: -moz-grab
  cursor: -webkit-grab

.chat-log
  display: block
  margin: 0.5em auto
  min-width: 5%
  border: 2px solid white
  border-radius: 3px
  font-family: 'Tahoma, Geneva, sans-serif'
  height: calc(100% - 85px)
  overflow-y: auto
  background-color: black

.chat-log .chat
  margin: 5px 10px
  padding: 0
  text-align: left
  line-height: 1em

.chat-log .username
  font-weight: bold
  margin-right: 10px

.chat-log .message
  color: white

.close-icon
  font-size: 22px
  position: absolute
  top: 5px
  right: 10px
  cursor: default

.close-icon:hover
  darken($red, 0.5)
  // transform: scale(1.1)
  animation: ease-in-out pulse 1s infinite
  transform-origin: center

.connection-state
  position: absolute
  top: 2%
  left: 2%
  width: 200px
  height: 28px
  border: 1px solid $bootstrap-blue
  border-radius: 8px

.connection-state .state
  font-weight: bold

.connection-state.connected
  background-color: #2d9e404c

.connection-state.disconnected
  background-color: #dd332a4c

.connection-state.transitioning
  background-color: #e2b82d4c

.cool-form
  width: 25%
  margin: 0 auto

.cool-form.full
  width: 100%

.cool-form.chat-input
  margin: 0
  padding: 5px 8px 8px 8px
  position: absolute
  bottom: 0
  left: 0

.cool-form.chat-input form
  margin: 0

.cool-form form
  display: flex
  margin-bottom: 5px

.cool-form form button
  min-width: 60px
  border-top-left-radius: 0
  border-bottom-left-radius: 0

.cool-form form input
  border-top-right-radius: 0
  border-bottom-right-radius: 0

mwlResizable
  box-sizing: border-box

.notice-message
  text-align: center !important

.notice-message .message
  color: $bootstrap-blue !important

.red
  color: $red !important

.scrollbar-style-1::-webkit-scrollbar-track
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3)
  border-radius: 10px
  background-color: #F5F5F5


.scrollbar-style-1::-webkit-scrollbar
  width: 12px
  background-color: transparent

.scrollbar-style-1::-webkit-scrollbar-thumb
  border-radius: 10px
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3)
  background-color: $bootstrap-blue

.z-back
  z-index: 1

.z-front
  z-index: 100
