@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:700&display=swap");

*:not(i) {
  font-family: "Roboto Condensed", sans-serif!important;
}

* {
  color: #FFFFFF!important;
  text-decoration: none!important;
  outline: none!important;
  user-select: none!important;
}

body {
  padding: 0vw!important;
  margin: 0vw!important;
  overflow: hidden!important;
}

#huds {
  position: fixed!important;
  top: 50%!important;
  left: 50%!important;
  transform: translate(-50%, -50%)!important;
  width: 100vw!important;
  height: 100vh!important;
}

#leaderboard-hud {
  position: fixed!important;
  top: 1vw!important;
  right: 1vw!important;
  text-align: right!important;
}

#leaderboard-title {
  font-size: 1.5vw!important;
  text-transform: uppercase!important;
}

#leaderboard-ul {
  font-size: 0.8vw!important;
  list-style: none!important;
  padding: 0vw!important;
  margin: 0vw!important;
}

.leaderboard-li {
  display: block!important;
  margin-bottom: 0.4vw!important;
}

.leaderboard-li-true {
  color: #FF1555!important;
}

.leaderboard-position {
  display: inline-block!important;
  width: 0.95vw!important;
  height: 0.95vw!important;
  line-height: 1vw!important;
  font-size: 0.8vw!important;
  text-align: center!important;
  color: #888888!important;
  background: #FFFFFF!important;
  border-radius: 0.15vw!important;
  margin-left: 0.5vw!important;
}

#chat-hud {
  position: fixed!important;
  bottom: 1vw!important;
  left: 1vw!important;
  width: 16.5vw!important;
  height: 16.5vw!important;
  overflow-x: hidden!important;
  overflow-y: scroll!important;
}

.chat-message {
    position: relative!important;
  font-size: 0.8vw!important;
    background: #151518!important;
    border-radius: 0.3vw!important;
  padding: 0.75vw 0.5vw!important;
  margin-bottom: 0.5vw!important;
  margin-left: 0.5vw!important;
}

.chat-message > strong {
  color: #FF1555!important;
}

.chat-message:after {
    content: ""!important;
    position: absolute!important;
    left: -1.75vw!important;
    top: 50%!important;
  transform: translate(0%, -50%)!important;
    width: 0vw!important;
    height: 0vw!important;
  border: 1.05vw solid transparent!important;
    border-right-color: #151518!important;
    border-left: 0vw!important;
    border-top: 0vw!important;
    margin-top: 0.55vw!important;
    margin-left: 1.05vw!important;
}

#message-hud {
  display: none;
  position: fixed!important;
  bottom: 1vw!important;
  left: 50%!important;
  transform: translate(-50%, 0%)!important;
  width: 20vw!important;
  text-align: center!important;
}

#emote-hud {
  display: block!important;
  text-align: center!important;
  background: #222228!important;
  border-radius: 0.5vw!important;
  padding: 0.25vw!important;
  margin-bottom: 0.5vw!important;
}

.emote {
  display: inline-block!important;
  width: 1.5vw!important;
  height: 1.5vw!important;
  font-size: 1.25vw!important;
  margin: 0vw 0.1vw!important;
}

#message {
  display: block!important;
  width: 93%!important;
  background: rgba(25, 25, 25, 0.75)!important;
  border: none!important;
  border-radius: 0.5vw!important;
  padding: 0.75vw!important;
}

#minimap-hud {
  position: fixed!important;
  bottom: 1vw!important;
  right: 1vw!important;
  width: 12vw!important;
  height: 12vw!important;
  background: rgba(21, 21, 27, 0.5)!important;
  border-radius: 0.15vw!important;
  box-shadow: 0vw 0vw 0vw 0.1vw #333339!important;
}

#minimap-nodes {
  position: fixed!important;
  bottom: 1vw!important;
  right: 1vw!important;
  width: 12vw!important;
  height: 12vw!important;
}

#minimap-table {
  width: 100%!important;
  height: 100%!important;
  padding: 0vw!important;
  margin: 0vw!important;
}

.minimap-box {
  font-size: 0.8vw!important;
  text-align: center!important;
}

#content {
  position: fixed!important;
  top: 50%!important;
  left: 50%!important;
  transform: translate(-50%, -50%)!important;
  width: 22.5vw!important;
  height: auto!important;
}

#shadow {
  position: fixed!important;
  top: 50%!important;
  left: 50%!important;
  transform: translate(-50%, -50%)!important;
  width: 100vw!important;
  height: 100vh!important;
  background: radial-gradient(rgba(0, 0, 0, 0.75), transparent)!important;
}

#preview {
  position: relative!important;
  width: 100%!important;
  height: 15vw!important;
  margin-bottom: 2vw!important;
}

.preview {
  position: absolute!important;
  background-color: #FFFFFF!important;
  background-size: cover!important;
  background-repeat: no-repeat!important;
  background-position: center!important;
  border-radius: 50%!important;
  box-shadow: 0vw 0vw 0vw 0.25vw #FFFFFF, 0vw 0vw 0vw 0.5vw rgba(255, 255, 255, 0.5)!important;
  filter: saturate(125%)!important;
  transition: transform 0.5s ease-in-out!important;
}

.preview:hover {
  transform: scale(1.05)!important;
}

.preview-a {
  bottom: 0vw!important;
  left: 0vw!important;
  width: 15vw!important;
  height: 15vw!important;
  z-index: 110!important;
}

.preview-b {
  bottom: 0vw!important;
  right: 0vw!important;
  width: 10vw!important;
  height: 10vw!important;
  z-index: 120!important;
}

.profile-data {
  position: absolute!important;
  bottom: -9.5vw!important;
  width: 10vw!important;
}

.profile-data-a {
  left: -11vw!important;
}

.profile-data-b {
  right: -11vw!important;
}

#profiles {
  text-align: center!important;
  margin-bottom: 1.25vw!important;
}

.profile-box {
  display: inline-block!important;
  position: relative!important;
  width: 19%!important;
  height: 3vw!important;
  text-align: center!important;
}

.profile-box[value="true"] > .profile-active {
  display: block!important;
}

.profile-preview {
  width: 3vw!important;
  height: 3vw!important;
  background-color: #FFFFFF!important;
  background-size: cover!important;
  background-repeat: no-repeat!important;
  background-position: center!important;
  border-radius: 50%!important;
  box-shadow: 0vw 0vw 0vw 0.1vw #FFFFFF, 0vw 0vw 0vw 0.2vw rgba(255, 255, 255, 0.5)!important;
  margin: 0vw auto!important;
  transition: transform 0.1s ease-in-out!important;
  filter: grayscale(30%)!important;
}

.profile-preview:hover {
  transform: scale(1.1)!important;
  filter: contrast(125%)!important;
}

.profile-active {
  display: none!important;
  position: absolute!important;
  bottom: -1.25vw!important;
  left: 50%!important;
  transform: translate(-50%, 0%)!important;
  font-size: 0.7vw!important;
}

.content-title {
  font-size: 1.25vw!important;
}

.info {
  font-size: 0.7vw!important;
  opacity: 0.5!important;
}

.info > p > a {
  font-weight: Bold!important;
}

#dashboard {
  position: relative!important;
  background: #FFFFFF!important;
  border-radius: 0.75vw!important;
  padding: 0.75vw!important;
  overflow: hidden!important;
}

.row {
  width: 100%!important;
  height: 2vw!important;
}

.row-center {
  text-align: center!important;
}

.row-margin {
  margin-bottom: 0.5vw!important;
}

.data {
  font-size: 1vw!important;
  background: #E5E5E5!important;
  border: none!important;
  border-radius: 0.5vw!important;
  padding: 0.5vw 1vw!important;
}

.data-transparent {
  background: transparent!important;
}

.data-nick-a, .data-url-a {
  display: inline-block!important;
  width: 7vw!important;
  font-size: 0.8vw!important;
  text-align: right!important;
  float: right!important;
}

.data-nick-b, .data-url-b {
  display: inline-block!important;
  width: 8vw!important;
  font-size: 0.8vw!important;
  text-align: left!important;
  float: left!important;
}

.control {
  font-size: 1vw!important;
  text-transform: uppercase!important;
  border: none!important;
  border-radius: 0.5vw!important;
  padding: 0.475vw 1vw!important;
}

.data-ip-address {
  display: inline-block!important;
  width: 11.25vw!important;
}

.control-connect {
  display: inline-block!important;
  width: 7vw!important;
  background: #FF1555!important;
  float: right!important;
}

#data {
  position: fixed!important;
  bottom: -3vw!important;
  left: 50%!important;
  transform: translate(-50%, 0%)!important;
  width: 15vw!important;
  text-align: center!important;
}

.control-spawn {
  width: 100%!important;
  background: #FF1555!important;
  box-shadow: 0vw 0vw 0vw 0.5vw #FFFFFF!important;
}