body {
  padding: 0;
  margin: 0;
  background-color: #5c6669;
  color: #eee;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  overflow-y: scroll;
}

* {
  box-sizing: border-box;
}

img {
  -ms-interpolation-mode: bicubic;
}

.container {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  margin-bottom: 100px;
}

.header {
  height: 140px;
  width: 100%;
  position: fixed;
  top: -70px;
  left: 0;
  z-index: 10000;
  white-space: nowrap;
  transition: top 250ms;
  transition-delay: 0s;
  text-decoration: none !important;
}
.header a {
  color: #eee !important;
}
.header .content {
  position: relative;
  height: 0;
  width: 100%;
  top: 70px;
  text-align: center;
}

.header.pinned,
.header:hover {
  top: 0px;
  transition-delay: 0.25s;
  pointer-events: all;
}

.header.pinned {
  pointer-events: none;
}

@media screen and (max-width: 1024px) {
  .header {
    top: 0px;
    transition-delay: 0.25s;
    pointer-events: all;
  }
}
.header.disabled {
  pointer-events: none !important;
}

.game {
  height: 100%;
  width: 100%;
  position: relative;
}

.grid {
  width: 100%;
  height: 100%;
  /*background: $cBackground;*/
  float: left;
  position: relative;
  padding: 10px;
  overflow: hidden;
}
.grid .content {
  position: relative;
  float: left;
  cursor: grab;
  border: 10px dashed #242829;
}
.grid .content:before {
  content: "";
  position: absolute;
  width: calc(100% + 100px);
  height: calc(100% + 100px);
  top: -50px;
  left: -50px;
}
.grid .canvas {
  width: 100%;
  height: 100%;
  background-color: #1b1f21;
  pointer-events: none;
}
.grid .wrapper {
  position: relative;
  float: left;
  background: #1b1e1f;
  background-image: url(/Assets/Images/lines.jpg);
  background-size: contain;
}
.grid .wrapping-edge:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 22px dashed rgba(149, 203, 204, 0.05);
  z-index: 10;
  pointer-events: none;
}
.grid .wrapper canvas {
  position: relative;
  top: 0px;
  left: 0px;
  z-index: 10;
}
.grid .wrapper canvas:first-child {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 0;
}

.list {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  margin: 10px 0;
}
.list .item {
  vertical-align: top;
  flex: 1 1 auto;
  width: 100%;
  float: left;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}

.list:before,
.list:after {
  clear: both;
}

.lobby-item {
  width: 100%;
  font-family: monospace;
  border: 2px solid #22a7d4;
  margin: 10px 0;
  padding: 10px;
  min-height: 100px;
}
.lobby-item .title {
  padding: 0 10px;
  font-size: 14px;
}
.lobby-item .bot-slot {
  width: 60px;
  height: 60px;
  border: 2px dashed #597177;
  border-radius: 50%;
  margin: 20px 10px;
  /*float: left;*/
  position: relative;
  display: inline-block;
}
.lobby-item .bot-slot .label {
  position: absolute;
  bottom: -25px;
  left: 0;
  width: 100%;
  text-align: center;
}
.lobby-item .rules {
  background: #1b1e1f;
  padding: 10px;
  border-radius: 10px;
  font-size: 12px;
  margin-top: 10px;
}

bot-icon {
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.bot-icon {
  width: 64px;
  height: 64px;
  /*border-radius: 50%;*/
  display: block;
  overflow: hidden;
  vertical-align: middle;
  position: relative;
  margin-left: -8px;
  margin-top: -8px;
  padding: 0;
}
.bot-icon img {
  width: 100%;
}

.wallpaper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url("/Assets/Images/background_8.jpg");
  background-size: cover;
  opacity: 0.5;
}

.label {
  text-transform: uppercase;
  font-size: 12px;
  margin-top: 10px;
  margin-bottom: 0;
  color: #aaa;
  cursor: default;
}

.note {
  color: #00c1ff;
  font-size: 13px;
  position: relative;
  display: inline-block;
  max-width: 300px;
  vertical-align: top;
}

.alert-message {
  padding: 5px 15px;
  /*background-color: rgba(32, 0, 0, 1);*/
  /*color: $cWarningText !important;*/
  border-radius: 20px;
  line-height: initial;
  font-size: 14px;
  text-decoration: none !important;
  border: 3px solid #861b09;
  border-bottom: 3px solid rgba(0, 0, 0, 0);
  border-top: 3px solid rgba(0, 0, 0, 0);
}

/*.note:before {
    content: '';
    position: absolute;
    background-image: url('/Assets/Images/icon_assembly.png');
    width: 40px;
    height: 40px;
    background-size:40px;
    left: -40px;
    top: 0;
}*/
/* Input */
input[type=password],
input[type=text] {
  width: 100%;
  border: none;
  outline: none;
  box-shadow: none;
  color: #eee !important;
  background-color: transparent;
  padding: 10px 15px;
  border-radius: 20px;
  margin: 5px 0;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 3px solid #22a7d4;
  border-right: 3px solid #22a7d4;
  /*font-family:monospace !important;*/
}

input:-webkit-autofill,
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #eeeeee !important;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
  color: #eee !important;
}

input:-webkit-autofill:hover,
input:-webkit-autofill:focus textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
input:-webkit-autofill:hover,
input[type=text]:hover,
input[type=password]:hover {
  background: #19252e !important;
}

/* Scrollbar */
::-webkit-scrollbar-track {
  background-color: #1b1e1f;
  width: 6px;
}

::-webkit-scrollbar {
  width: 6px;
  background-color: #5c6669;
}

::-webkit-scrollbar-thumb {
  background-color: #597177;
}

/* View */
ui-view {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
  padding-top: 140px;
  padding-bottom: 0;
  transition: padding-top 300ms;
  transition-delay: 0.3s;
}

ui-view.full {
  padding: 0;
}

.view-transition {
  /* start 'enter' transition */
  /* end 'enter' transition */
  /* start 'end' transition */
  /* end 'end' transition */
}
.view-transition.ng-enter, .view-transition.ng-leave {
  pointer-events: none;
}
.view-transition.ng-enter {
  position: absolute;
  /* transition on enter for .5s */
  transition: 0.25s;
  /* start with opacity 0 (invisible) */
  opacity: 0;
  transition-delay: 0.25s;
}
.view-transition.ng-enter-active {
  /* end with opacity 1 (fade in) */
  opacity: 1;
  position: absolute;
}
.view-transition.ng-leave {
  position: absolute;
  /* transition on enter for .5s */
  transition: 0.25s;
  /* start with opacity 0 (invisible) */
  /*opacity: 1;*/
  z-index: 100;
}
.view-transition.ng-leave-active {
  /* end with opacity 1 (fade in) */
  opacity: 0;
  position: absolute;
  z-index: 100;
}

.score .panel {
  max-height: initial;
}

/* Buttons */
.btn {
  background-color: #1b1e1f;
  padding: 10px;
  min-width: 100px;
  display: inline-block;
  border-radius: 3px;
  line-height: 100%;
  cursor: pointer;
  text-decoration: none !important;
  color: #eee;
  margin: 5px;
  text-align: center;
  position: relative;
  font-size: 14px;
  border-radius: 20px;
}

.btn:hover {
  background-color: #597177;
}

.btn.warning:hover {
  background-color: #861b09 !important;
}

.btn.download {
  border-radius: 100px;
  padding: 10px 20px;
  margin: 0;
  margin-top: 5px;
  width: 100%;
  /*background-color: $cButton;*/
}

.btn.download:hover {
  background-color: #22a7d4;
}

.btn.input {
  border-radius: 20px;
  background: transparent;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 3px solid #22a7d4;
  border-right: 3px solid #22a7d4;
}

.btn.input:hover {
  background: #1b1e1f;
}

.btn:active {
  box-shadow: 0 5px 10px #1b1e1f inset;
}

.bot-primary {
  border-radius: 30px;
  margin: 5px 0;
  background-color: #597177;
  text-align: center;
  font-size: 14px;
  padding: 10px;
  line-height: initial;
  border: 3px solid #22a7d4;
  border-top: 3px solid rgba(0, 0, 0, 0);
  border-bottom: 3px solid rgba(0, 0, 0, 0);
}

.btn {
  background-color: #121a21;
  border: 3px solid #121a21;
  border-top: 3px solid rgba(0, 0, 0, 0);
  border-bottom: 3px solid rgba(0, 0, 0, 0);
  transition: all 150ms;
  /*margin: 5px 10px;*/
}

.btn:hover {
  background-color: #121a21;
  text-shadow: 0 0 10px #22a7d4;
  transition: all 0ms;
  border: 3px solid #22a7d4;
  border-top: 3px solid rgba(0, 0, 0, 0);
  border-bottom: 3px solid rgba(0, 0, 0, 0);
}

.btn.warning:hover {
  background-color: #121a21;
  /*text-shadow: 0 0 10px #fff;*/
  text-shadow: none;
  transition: all 0ms;
  border: 3px solid #861b09;
  border-top: 3px solid rgba(0, 0, 0, 0);
  border-bottom: 3px solid rgba(0, 0, 0, 0);
}

/* Menu */
.menu-bar {
  pointer-events: all;
  height: 70px;
  width: 100vw;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #121a21;
  text-align: center;
  line-height: 70px;
  cursor: default;
  padding: 0 10px;
}
.menu-bar .rankings {
  top: -70px;
  width: 500px;
}
.menu-bar .rankings .info {
  margin-top: 10px;
  margin-left: 10px;
  line-height: 1em;
}
.menu-bar .rankings-background {
  position: absolute;
  border-top: 70px solid #121a21;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  height: 0;
  width: 700px;
  left: 50%;
  text-align: center;
  top: 0;
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  -moz-transition: margin-top 250ms;
  -o-transition: margin-top 250ms;
  -webkit-transition: margin-top 250ms;
}
.menu-bar .icon {
  font-size: 18px !important;
  vertical-align: middle;
}
.menu-bar .btn {
  border-radius: 20px;
}
.menu-bar .alert-message {
  position: fixed;
  left: 20px;
  top: 20px;
  cursor: pointer;
  margin: 0;
  z-index: 10010;
}

.menu-btn {
  top: 50%;
  left: 40px;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.menu-btn:before {
  content: "";
  top: 6px;
}

.menu-btn:after {
  content: "";
  bottom: 6px;
}

.menu-btn,
.menu-btn:after,
.menu-btn:before {
  width: 20px;
  height: 2px;
  background-color: #ccc;
  position: absolute;
  display: inline-block;
  cursor: pointer;
}

.menu-btn:hover,
.menu-btn:hover:after,
.menu-btn:hover:before {
  background-color: #eee;
}

.game-time {
  border-top: 70px solid #121a21;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  height: 0;
  width: 200px;
  position: absolute;
  left: 50%;
  top: 70px;
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  text-align: center;
  z-index: -1;
  pointer-events: none !important;
}
.game-time .inner {
  position: relative;
  top: -60px;
  font-size: 20px;
  pointer-events: none !important;
}

.profile-menu {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1002;
  height: 70px;
  padding: 10px;
  pointer-events: all;
  /*background: $cBackground;*/
}
.profile-menu .user-btn {
  min-width: 40px;
  width: 40px;
  height: 40px;
  /*background-color: #ccc;*/
  border-radius: 50%;
  /*position: absolute;*/
  display: inline-block;
  cursor: pointer;
  z-index: 10;
  background-size: 40px;
  /*padding:5px;*/
  padding: 0;
}
.profile-menu .user-btn img {
  border-radius: 50%;
  width: 100%;
}
.profile-menu .user-btn:hover {
  background-color: #242829;
}
.profile-menu .user-score {
  display: inline-block;
}
.profile-menu .dropdown-menu {
  padding: 10px;
  padding-top: 70px;
  position: absolute;
  top: 0;
  right: 0;
  min-width: 200px;
  min-height: 100px;
  background: #121a21;
  /*border-radius:10px;*/
  border-bottom-left-radius: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms;
  border: 2px solid #22a7d4;
  border-top: none;
  border-right: none;
}
.profile-menu .dropdown-menu .player-info {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px;
  cursor: pointer;
  padding: 20px;
  font-size: 18px;
}
.profile-menu .dropdown-menu.active {
  opacity: 1;
  pointer-events: all;
}

.profile-menu:hover {
  /*box-shadow: 0 0 10px #000;
  cursor: pointer;
  background-color: $cPanelBody;

  .user-btn {
      background-color: $cBackground;
  }*/
}

/* Panel */
.panel {
  /*margin: 0 auto;*/
  display: flex;
  display: -ms-flexbox;
  flex-direction: column;
  -ms-flex-direction: column;
  border-radius: 4px;
  padding: 10px;
  max-height: calc(100vh - 270px);
  position: relative;
  /*.btn {
      background-color: $cPrimaryBackground;
      border: 3px solid $cPrimaryBackground;
      border-top: 3px solid rgba(0,0,0,0);
      border-bottom: 3px solid rgba(0,0,0,0);
      transition: all 150ms;
      margin: 5px 10px;
  }

  .btn:hover {
      background-color: $cPrimaryBackground;
      text-shadow: 0 0 10px $cPrimary;
      transition: all 0ms;
      border: 3px solid $cPrimary;
      border-top: 3px solid rgba(0,0,0,0);
      border-bottom: 3px solid rgba(0,0,0,0);
  }*/
}
.panel .panel-header {
  background: #19252e;
  padding: 10px 20px;
  flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  -webkit-flex: 1 0 auto;
  flex: 1 0 auto;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  cursor: default;
  border: 3px solid #22a7d4;
  border-bottom: none;
}
.panel .panel-header .title {
  font-size: 24px;
}
.panel .panel-header .subtitle {
  color: #22a7d4;
  font-size: 13px;
  position: relative;
  display: inline-block;
  max-width: 300px;
  vertical-align: top;
}
.panel .panel-body {
  background: #19252e;
  padding: 20px;
  /*box-shadow: 0 0 20px #597177;*/
  flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  height: 100%;
  border: 10px solid #19252e;
  /*min-height:300px;*/
  /*overflow-y: auto;*/
  /*overflow-x: visible;*/
  position: relative;
}
.panel .panel-footer {
  cursor: default;
  /*height: 50px;*/
  background: #19252e;
  padding: 10px 20px;
  flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  -webkit-flex: 1 0 auto;
  flex: 1 0 auto;
  text-align: center;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  /*border: 5px solid $cSilverEdge;*/
  border-top: none;
  /*min-height:70px;*/
}

/*.panel.warning {

    .panel-header {
        background: #421e05;

        .subtitle {
            color: #ea7700;
        }
    }

    .panel-body {
    }

    .panel-footer {
        background: #421e05;
    }

    .btn {
        background: #421e05;
    }

    .btn:hover {
        background: #ea7700;
    }
}*/
/* Card */
.card {
  /*margin: 0 auto;*/
  display: flex;
  flex-direction: column;
  /*overflow: hidden;*/
  padding: 10px;
  position: relative;
  transition: margin 250ms;
  float: left;
  cursor: default;
}
.card .card-header {
  background: #1b1e1f;
  padding: 10px 20px;
  flex: 0 1 auto;
  font-size: 18px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  vertical-align: super;
}
.card .card-header .point-value {
  float: right;
  padding: 5px 15px;
  font-size: 14px;
  background: #22a7d4;
  border-radius: 10px;
}
.card .card-body {
  background: #242829;
  padding: 20px;
  /*box-shadow: 0 0 20px #597177;*/
  flex: 1 1 auto;
  height: 100%;
  background: #4a565a;
}
.card .card-footer {
  /*height: 50px;*/
  background: #1b1e1f;
  padding: 10px 20px;
  flex: 0 1 auto;
  text-align: center;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.card:hover {
  /*margin-top: -9px;
  margin-bottom: 19px;*/
}

.card.bot {
  min-width: 33.3333%;
  min-height: 550px;
}

@media screen and (max-width: 900px) {
  .card {
    width: 100%;
  }
}
/* Portrait */
@keyframes portrait {
  0% {
    background-position: top 200% right 0%;
  }
  90% {
    background-position: top 200% right 0%;
  }
  100% {
    background-position: top 200% right 200%;
  }
}
@keyframes bounce {
  0% {
    top: 0;
  }
  50% {
    top: -10px;
  }
  75% {
    top: 0px;
  }
  90% {
    top: -3px;
  }
  100% {
    top: 0;
  }
}
/*@keyframes bounce {
    0% {
       transform:translateY(0);
    }

    50% {
        transform: translateY(10px);

    }

    75% {
        transform: translateY(0);
    }

    90% {
        transform: translateY(3px);
    }

    100% {
        transform: translateY(0);
    }
}*/
.portrait {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  /*float: left;*/
  background-color: #ccc;
  padding: 4px;
  margin: 5px;
  background-size: 200% !important;
  z-index: 10;
  position: relative;
  display: inline-block;
}
.portrait .inner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: #5a5a5a;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.41) inset;
  background-image: url("/Assets/Images/avatar.jpg");
  background-size: 42px;
  opacity: 0.8;
}

.portrait.leaves:after {
  content: "";
  width: 74px;
  height: 74px;
  background-size: 74px;
  position: absolute;
  left: 50%;
  top: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.35));
  -moz-filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.35));
  -ms-filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.35));
  -o-filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.35));
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.35));
}

.portrait.gold {
  animation: portrait 10s ease-in-out infinite;
  background: #fceabb;
  background: -moz-linear-gradient(45deg, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%);
  background: -webkit-linear-gradient(45deg, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%);
  background: linear-gradient(45deg, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#fceabb", endColorstr="#fbdf93",GradientType=1 );
}

.portrait.gold:after {
  background-image: url("/Assets/Images/leaves_gold.png");
}

.portrait.silver {
  animation: portrait 10s ease-in-out infinite;
  background: #ffffff;
  background: -moz-linear-gradient(45deg, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
  background: -webkit-linear-gradient(45deg, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
  background: linear-gradient(45deg, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff", endColorstr="#f6f6f6",GradientType=1 );
}

.portrait.silver:after {
  background-image: url("/Assets/Images/leaves_silver.png");
}

.portrait.bronze {
  animation: portrait 10s ease-in-out infinite;
  background: #f3e2c7;
  background: -moz-linear-gradient(45deg, #f3e2c7 0%, #c19e67 50%, #b68d4c 51%, #e9d4b3 100%);
  background: -webkit-linear-gradient(45deg, #f3e2c7 0%, #c19e67 50%, #b68d4c 51%, #e9d4b3 100%);
  background: linear-gradient(45deg, #f3e2c7 0%, #c19e67 50%, #b68d4c 51%, #e9d4b3 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f3e2c7", endColorstr="#e9d4b3",GradientType=1 );
}

.portrait.bronze:after {
  background-image: url("/Assets/Images/leaves_bronze.png");
}

.portrait.small {
  width: 40px;
  height: 40px;
  padding: 3px;
}
.portrait.small .inner {
  width: 34px;
  height: 34px;
  background-size: 34px;
}

/* Widgets */
@keyframes portrait {
  0% {
    background-position: top 200% right 0%;
  }
  90% {
    background-position: top 200% right 0%;
  }
  100% {
    background-position: top 200% right 200%;
  }
}
@keyframes bounce {
  0% {
    top: 0;
  }
  50% {
    top: -10px;
  }
  75% {
    top: 0px;
  }
  90% {
    top: -3px;
  }
  100% {
    top: 0;
  }
}
/*@keyframes bounce {
    0% {
       transform:translateY(0);
    }

    50% {
        transform: translateY(10px);

    }

    75% {
        transform: translateY(0);
    }

    90% {
        transform: translateY(3px);
    }

    100% {
        transform: translateY(0);
    }
}*/
.name-plaque {
  position: absolute;
  /*bottom: 50%;*/
  left: 0;
  /*text-align: center;*/
  font-size: 22px;
  display: block;
  width: 100%;
  font-weight: bold;
}

/* Game Title */
.game-title {
  font-size: 20px;
  text-align: center;
  font-family: monospace;
  margin-bottom: 50px;
  color: #eee;
}

/* Ribbon */
.ribbon {
  width: 500px;
  position: absolute;
  left: 0;
  left: 50%;
  top: 100px;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* Winner Widget */
.winner-widget {
  position: fixed;
  left: 50%;
  top: 45%;
  -moz-transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
  -ms-transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
  -o-transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
  -webkit-transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
  transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
  width: 500px;
  color: #eee;
  pointer-events: none;
  z-index: 1000;
  height: 120px;
}
.winner-widget .ribbon {
  width: 100%;
}
.winner-widget .portrait {
  position: absolute;
  left: 50%;
  top: 20%;
  -moz-transform: translate(-50%, -50%) scale(2);
  -ms-transform: translate(-50%, -50%) scale(2);
  -o-transform: translate(-50%, -50%) scale(2);
  -webkit-transform: translate(-50%, -50%) scale(2);
  transform: translate(-50%, -50%) scale(2);
  z-index: 10;
  animation: portrait 5s ease-in-out infinite;
}
.winner-widget .name-plaque {
  position: absolute;
  top: 60px;
  left: 0;
  text-align: center;
  font-size: 26px;
  display: block;
  width: 100%;
  font-weight: bold;
  z-index: 10;
  text-shadow: 0 0 15px #000;
  vertical-align: top;
}
.winner-widget .name-plaque div {
  vertical-align: text-top;
}
.winner-widget .name-plaque div:first-child {
  font-size: 30px;
}
.winner-widget bot-icon {
  margin-top: 10px;
}
.winner-widget .label {
  color: #eee;
  text-shadow: 0 0 1px #000;
}
.winner-widget .victory-comment {
  font-size: 14px !important;
  margin-top: 10px;
  background: #111;
  display: inline-block;
  margin: 0 auto;
  min-height: 20px;
  min-width: 100px;
  margin-top: 10px;
  width: auto;
  border-radius: 4px;
  position: relative;
  z-index: 1;
  white-space: nowrap;
  text-shadow: 0 0 15px rgba(200, 200, 200, 0.135);
  padding: 5px 15px;
}
.winner-widget .victory-comment:before {
  content: " ";
  position: absolute;
  left: 50%;
  bottom: -30px;
  width: 0px;
  height: 0px;
  /*background: #111;*/
  border: 10px solid rgba(0, 0, 0, 0);
  border-top: 30px solid #111;
  transform: rotateZ(20deg);
  z-index: -1;
}

.winner-widget.active {
  animation: winner-widget 400ms ease-in-out forwards;
}

@keyframes winner-widget {
  0% {
    -moz-transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
    -ms-transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
    -o-transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
    -webkit-transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
    transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
    opacity: 0;
  }
  80% {
    -moz-transform: translate3d(-50%, -50%, 0) scale3d(1.1, 1.1, 1.1);
    -ms-transform: translate3d(-50%, -50%, 0) scale3d(1.1, 1.1, 1.1);
    -o-transform: translate3d(-50%, -50%, 0) scale3d(1.1, 1.1, 1.1);
    -webkit-transform: translate3d(-50%, -50%, 0) scale3d(1.1, 1.1, 1.1);
    transform: translate3d(-50%, -50%, 0) scale3d(1.1, 1.1, 1.1);
    opacity: 1;
  }
  100% {
    -moz-transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
    -ms-transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
    -o-transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
    -webkit-transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
    transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
    opacity: 1;
  }
}
/* Connection Status */
.connection-status {
  width: 10px;
  height: 10px;
  background-color: #e00;
  border-radius: 50%;
}

/* Game Type */
.game-type {
  position: fixed;
  left: 50%;
  bottom: 20px;
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  padding: 10px 20px;
  padding-bottom: 20px;
  border-radius: 20px;
  background: #1b1e1f;
  min-width: 150px;
  text-align: center;
}

.preview-box {
  position: absolute;
  top: 15px;
  background: #19252e;
  box-shadow: 0 0 30px #121a21 inset;
  width: 100%;
  height: 160px;
  left: 50%;
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  border-radius: 20px;
}

.item-selector {
  position: relative;
  width: 100%;
  margin: 10px 0;
}
.item-selector .inner {
  width: calc(100% - 64px);
  text-align: center;
  display: inline-block;
  font-size: 12px;
  padding: 8px;
  color: #22a7d4;
  text-transform: uppercase;
}

/* Chevron */
.chevron {
  width: 32px;
  height: 32px;
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.chevron:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%) rotateZ(45deg);
  -ms-transform: translate(-50%, -50%) rotateZ(45deg);
  -o-transform: translate(-50%, -50%) rotateZ(45deg);
  -webkit-transform: translate(-50%, -50%) rotateZ(45deg);
  transform: translate(-50%, -50%) rotateZ(45deg);
  width: 16px;
  height: 16px;
  border: 3px solid #597177;
  border-bottom: 3px solid rgba(0, 0, 0, 0);
  border-left: 3px solid rgba(0, 0, 0, 0);
  border-radius: 20px;
  transition: border 300ms;
}

.chevron:hover:before {
  border: 3px solid #22a7d4;
}

.chevron:active:before {
  border: 3px solid #fff;
}

.chevron.left:before {
  -moz-transform: translate(-50%, -50%) rotateZ(-135deg);
  -ms-transform: translate(-50%, -50%) rotateZ(-135deg);
  -o-transform: translate(-50%, -50%) rotateZ(-135deg);
  -webkit-transform: translate(-50%, -50%) rotateZ(-135deg);
  transform: translate(-50%, -50%) rotateZ(-135deg);
}

/* Item Lock */
.item-lock {
  position: absolute;
  background: #121a21;
  border-radius: 20px;
  /*height: 30px;*/
  width: 70%;
  left: 15%;
  bottom: 2px;
  padding: 0 20px;
  cursor: pointer;
  border: 3px solid #121a21;
  border-bottom: 3px solid rgba(0, 0, 0, 0);
  border-top: 3px solid rgba(0, 0, 0, 0);
  text-align: center;
}
.item-lock span,
.item-lock div {
  vertical-align: top;
}

.item-lock:hover {
  border: 3px solid #22a7d4;
  border-bottom: 3px solid rgba(0, 0, 0, 0);
  border-top: 3px solid rgba(0, 0, 0, 0);
}

.orb-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  position: relative;
}

.orb-icon:before {
  content: " ";
  width: 5px;
  height: 5px;
  position: absolute;
  top: 12.5px;
  left: 7.5px;
  border-radius: 50%;
  background: #eeefff;
}

.orb-icon:after {
  content: "";
  position: absolute;
  top: -75%;
  left: -100%;
  width: 300%;
  height: 300%;
  background-image: url("/Assets/Sprites/flare.png");
  background-size: 60px;
  background-repeat: no-repeat;
}

/* Revenue Box */
.reven {
  width: 100%;
  height: 150px;
  background: #7b3221;
  margin-top: 20px;
  position: relative;
  border-radius: 20px;
}
.reven .disclaimer {
  position: absolute;
  bottom: 10px;
  left: 10px;
}

/* Layout */
.view {
  height: 100%;
  width: 100%;
  position: relative;
}

.frame {
  padding: 20px;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.no-select {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.relative {
  position: relative;
}

.center {
  text-align: center;
}

.flex {
  display: flex;
}

.flex.row {
  flex-direction: row;
}

.flex.col {
  flex-direction: column;
}

.row {
  width: 100%;
}

.row:after {
  clear: both;
}

.row:after,
.row:before {
  display: table;
  content: " ";
}

.half {
  width: 50% !important;
}

.stretch {
  width: 100%;
}

.x2 {
  -moz-transform: scale3d(2, 2, 2);
  -ms-transform: scale3d(2, 2, 2);
  -o-transform: scale3d(2, 2, 2);
  -webkit-transform: scale3d(2, 2, 2);
  transform: scale3d(2, 2, 2);
}

.pos {
  position: absolute;
  z-index: 100;
}

.fixed {
  position: fixed;
  z-index: 1000;
}

.top {
  top: 0;
}

.left {
  left: 0;
}

.bottom {
  bottom: 0;
}

.right {
  right: 0;
}

.mr-2 {
  margin-right: 2px;
}

.ml-2 {
  margin-left: 2px;
}

.mr-4 {
  margin-right: 4px;
}

.ml-4 {
  margin-left: 4px;
}

.mr-8 {
  margin-right: 8px;
}

.ml-8 {
  margin-left: 8px;
}

@media screen and (max-width: 900px) {
  .half {
    width: 100% !important;
  }
}
.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  /*margin-right: -15px;
  margin-left: -15px;*/
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*=col-] {
  padding-right: 0;
  padding-left: 0;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto {
  position: relative;
  width: 100%;
  min-height: 1px;
  /*padding-right: 15px;
  padding-left: 15px;*/
}

.col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}

.col-auto {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}

.col-1 {
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

.col-2 {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.col-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.col-5 {
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}

.col-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}

.col-8 {
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

.col-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}

.col-11 {
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}

.col-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

.order-1 {
  -ms-flex-order: 1;
  order: 1;
}

.order-2 {
  -ms-flex-order: 2;
  order: 2;
}

.order-3 {
  -ms-flex-order: 3;
  order: 3;
}

.order-4 {
  -ms-flex-order: 4;
  order: 4;
}

.order-5 {
  -ms-flex-order: 5;
  order: 5;
}

.order-6 {
  -ms-flex-order: 6;
  order: 6;
}

.order-7 {
  -ms-flex-order: 7;
  order: 7;
}

.order-8 {
  -ms-flex-order: 8;
  order: 8;
}

.order-9 {
  -ms-flex-order: 9;
  order: 9;
}

.order-10 {
  -ms-flex-order: 10;
  order: 10;
}

.order-11 {
  -ms-flex-order: 11;
  order: 11;
}

.order-12 {
  -ms-flex-order: 12;
  order: 12;
}

@media (min-width: 576px) {
  .col-sm {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-sm-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .col-sm-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-sm-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-sm-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-sm-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-sm-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-sm-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-sm-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-sm-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-sm-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-sm-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-sm-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-sm-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-sm-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-sm-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-sm-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-sm-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-sm-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-sm-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-sm-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-sm-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-sm-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-sm-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-sm-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-sm-12 {
    -ms-flex-order: 12;
    order: 12;
  }
}
@media (min-width: 768px) {
  .col-md {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-md-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .col-md-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-md-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-md-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-md-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-md-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-md-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-md-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-md-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-md-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-md-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-md-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-md-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-md-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-md-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-md-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-md-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-md-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-md-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-md-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-md-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-md-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-md-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-md-12 {
    -ms-flex-order: 12;
    order: 12;
  }
}
@media (min-width: 992px) {
  .col-lg {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-lg-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .col-lg-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-lg-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-lg-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-lg-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-lg-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-lg-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-lg-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-lg-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-lg-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-lg-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-lg-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-lg-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-lg-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-lg-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-lg-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-lg-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-lg-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-lg-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-lg-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-lg-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-lg-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-lg-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-lg-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-lg-12 {
    -ms-flex-order: 12;
    order: 12;
  }
}
@media (min-width: 1200px) {
  .col-xl {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-xl-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .col-xl-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-xl-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-xl-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-xl-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-xl-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-xl-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-xl-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-xl-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-xl-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-xl-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-xl-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-xl-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-xl-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-xl-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-xl-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-xl-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-xl-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-xl-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-xl-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-xl-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-xl-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-xl-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-xl-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-xl-12 {
    -ms-flex-order: 12;
    order: 12;
  }
}
/* Modal */
/* Tooltip */
.tooltip {
  position: absolute;
  /*bottom: -100%;*/
  top: 0;
  /*min-width: 150px;*/
  left: 0;
  z-index: 1020;
  height: auto;
  height: 24px;
  line-height: initial;
  width: auto;
  background: #121a21;
  padding: 5px 15px;
  text-align: center;
  left: 50%;
  /*top:50%;*/
  white-space: nowrap;
  -moz-transform: translate(-50%, -100%);
  -ms-transform: translate(-50%, -100%);
  -o-transform: translate(-50%, -100%);
  -webkit-transform: translate(-50%, -100%);
  transform: translate(-50%, -100%);
  font-size: 12px;
  border-radius: 100px;
  pointer-events: none !important;
  color: #eee;
  -moz-transition: all 250ms;
  -o-transition: all 250ms;
  -webkit-transition: all 250ms;
  animation: tooltip 0.25s ease-in-out forwards;
  animation-delay: 0.35s;
  opacity: 0;
  z-index: 1000;
  font-family: monospace;
  pointer-events: none !important;
  /*text-shadow: 0 0 2px $cPrimary;*/
  /*border-bottom: 2px solid $cPrimary;
  border-left:2px solid rgba(0,0,0,0);
  border-right: 2px solid rgba(0,0,0,0);*/
}

.tooltip.left {
  left: 0;
  -moz-transform: translate(0, -100%);
  -ms-transform: translate(0, -100%);
  -o-transform: translate(0, -100%);
  -webkit-transform: translate(0, -100%);
  transform: translate(0, -100%);
}

.tooltip.right {
  left: auto;
  right: 0;
  -moz-transform: translate(100%, -100%);
  -ms-transform: translate(100%, -100%);
  -o-transform: translate(100%, -100%);
  -webkit-transform: translate(100%, -100%);
  transform: translate(100%, -100%);
}

@keyframes tooltip {
  0% {
    margin-top: 20px;
    opacity: 0;
  }
  80% {
    margin-top: 0px;
  }
  100% {
    margin-top: 0px;
    opacity: 1;
  }
}
/* Loader */
.loader {
  position: absolute;
  top: 5px;
  left: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  background: #19252e;
  z-index: 1000;
  overflow: hidden;
  border-radius: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease-in-out;
  display: block;
  transition-delay: 1s;
}
.loader .spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  border: 5px solid #1b1e1f;
  border-radius: 50%;
  -moz-transform: translate3d(-50%, -50%, 0);
  -ms-transform: translate3d(-50%, -50%, 0);
  -o-transform: translate3d(-50%, -50%, 0);
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
.loader .spinner:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border: 5px solid rgba(0, 0, 0, 0);
  border-top: 5px solid #22a7d4;
  border-radius: 50%;
  animation: spinner 2s ease-out infinite;
  z-index: 10;
  -moz-filter: drop-shadow(0 0 3px #22a7d4);
  -ms-filter: drop-shadow(0 0 3px #22a7d4);
  -webkit-filter: drop-shadow(0 0 3px #22a7d4);
  filter: drop-shadow(0 0 3px #22a7d4);
}
.loader .title {
  position: absolute;
  bottom: 10px;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 12px;
  text-align: center;
  font-family: monospace;
  margin-top: 40px;
  margin-bottom: 10px;
  color: #eee;
  width: 100%;
}

.loader.active {
  transition: opacity 0.01s ease-in-out;
  opacity: 1;
  display: block;
  pointer-events: all !important;
  transition-delay: 0s;
  z-index: 1000;
}

.loader.error {
  background: #861b09;
}
.loader.error .spinner {
  border: 5px solid #1b1e1f;
}
.loader.error .spinner:after {
  border-top: 5px solid #f72d00;
  -moz-filter: drop-shadow(0 0 3px #f72d00);
  -ms-filter: drop-shadow(0 0 3px #f72d00);
  -webkit-filter: drop-shadow(0 0 3px #f72d00);
  filter: drop-shadow(0 0 3px #f72d00);
}

@keyframes loader {}
@keyframes spinner {
  0% {
    -moz-transform: translate3d(-50%, -50%, 0) rotateZ(0);
    -ms-transform: translate3d(-50%, -50%, 0) rotateZ(0);
    -o-transform: translate3d(-50%, -50%, 0) rotateZ(0);
    -webkit-transform: translate3d(-50%, -50%, 0) rotateZ(0);
    transform: translate3d(-50%, -50%, 0) rotateZ(0);
  }
  100% {
    -moz-transform: translate3d(-50%, -50%, 0) rotateZ(359.9deg);
    -ms-transform: translate3d(-50%, -50%, 0) rotateZ(359.9deg);
    -o-transform: translate3d(-50%, -50%, 0) rotateZ(359.9deg);
    -webkit-transform: translate3d(-50%, -50%, 0) rotateZ(359.9deg);
    transform: translate3d(-50%, -50%, 0) rotateZ(359.9deg);
  }
}
/* Color Select */
.color-selector {
  margin: 0 auto;
}
.color-selector .color-box {
  float: left;
  width: 40px;
  height: 40px;
  margin: 0 10px;
  margin-bottom: 20px;
  border-radius: 20px;
  border: 6px solid #121a21;
  /*border-left: 2px solid rgba(0,0,0,0);
  border-right: 2px solid rgba(0,0,0,0);*/
  transition: all 150ms linear;
  padding: 3px;
  position: relative;
  cursor: pointer;
}
.color-selector .color-box .inner {
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6) inset;
  border-radius: 16px;
}
.color-selector .color-box:hover {
  border: 3px solid #22a7d4;
  border-left: 3px solid #121a21;
  border-right: 3px solid #121a21;
}
.color-selector .color-box.selected {
  border: 3px solid #22a7d4;
}

/* Bot */
.bot-renderer {
  width: 128px;
  height: 128px;
  left: -32px;
  top: -32px;
  position: absolute;
}
.bot-renderer .head,
.bot-renderer .body,
.bot-renderer .legs {
  width: 100%;
  height: 100%;
  position: absolute;
  background-size: 128px;
  top: 0;
  left: 0;
}
.bot-renderer .head {
  z-index: 30;
  /*content: url('/Assets/Sprites/Bot/Head/0.png');*/
}
.bot-renderer .body {
  z-index: 20;
  /*content: url('/Assets/Sprites/Bot/Body/0.png');*/
}
.bot-renderer .legs {
  z-index: 10;
  /*content: url('/Assets/Sprites/Bot/Legs/0.png');*/
}

.bot-renderer.animate .head,
.bot-renderer.animate .body {
  animation: bounce 1.75s infinite ease-in-out;
  transform: translateY(0) scale(0.5);
}
.bot-renderer.animate .legs {
  transform: translateY(0) scale(0.5);
  /*animation: bounce 0.25s infinite ease-in-out;*/
}
.bot-renderer.animate .head {
  animation-delay: 0.25s;
}

@keyframes bounce {
  0% {
    transform: translateY(0) scale(0.5);
  }
  50% {
    transform: translateY(1.5px) scale(0.5);
  }
  100% {
    transform: translateY(0) scale(0.5);
  }
}
/* Suggestions */
/* Dropzone */
.dropzone {
  width: 100%;
  height: 80px;
  border: 2px dashed #597177;
  margin-top: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  text-align: center;
  border-radius: 40px;
  transition: background 300ms;
}
.dropzone .upload-icon {
  height: 100%;
  line-height: 80px;
}
.dropzone .cube-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
}
.dropzone .cube-icon img {
  width: 100%;
}
.dropzone .file-info {
  height: 100%;
  position: relative;
}
.dropzone .file-info .filename {
  display: inline;
  display: inline-block;
  line-height: 80px;
}
.dropzone .file-info .file-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  border: #597177;
  background: #0094ff;
}

.dropzone.drop,
.dropzone:hover {
  transition: background 30ms;
  background: #597177;
}

/* Effects */
.shadow {
  -webkit-filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.35));
  -moz-filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.35));
  -ms-filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.35));
  -o-filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.35));
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.35));
}

.box-shadow {
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.35);
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.35);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.35);
}

.glow {
  -webkit-filter: drop-shadow(0 0 15px rgba(200, 200, 200, 0.135));
  -moz-filter: drop-shadow(0 0 15px rgba(200, 200, 200, 0.135));
  -ms-filter: drop-shadow(0 0 15px rgba(200, 200, 200, 0.135));
  -o-filter: drop-shadow(0 0 15px rgba(200, 200, 200, 0.135));
  filter: drop-shadow(0 0 15px rgba(200, 200, 200, 0.135));
}

.cursor-blink {
  animation: cursor-blink 1s infinite linear;
}

@keyframes cursor-blink {
  0% {
    color: transparent;
  }
  50% {
    color: inherit;
  }
  100% {
    color: transparent;
  }
}
.gradient-primary {
  background: #22a7d4;
  background: -moz-linear-gradient(-45deg, #22a7d4 0%, #0c4749 37%, #1b1e1f 100%) !important;
  background: -webkit-linear-gradient(-45deg, #22a7d4 0%, #0c4749 37%, #1b1e1f 100%) !important;
  background: linear-gradient(135deg, #22a7d4 0%, #0c4749 37%, #1b1e1f 100%) !important;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#22a7d4", endColorstr="#1b1e1f",GradientType=1 ) !important;
}

.text-glow {
  text-shadow: 0 0 10px #22a7d4;
}

/* Scoreboard */
.score-content {
  padding-top: 50px;
}

.score-list {
  width: 100%;
  position: relative;
  text-align: center;
  margin-top: 50px;
}
.score-list table {
  margin: 0 auto;
  width: 100%;
  width: 400px;
  position: relative;
  border-spacing: 0;
  /*table-layout: fixed;*/
}
.score-list th,
.score-list td {
  padding: 5px 20px;
  text-align: left;
  position: relative;
  height: 30px;
}
.score-list th:last-child,
.score-list td:last-child {
  text-align: right;
}
.score-list tr {
  height: 30px;
}
.score-list tr.selected {
  background: #121a21;
}
.score-list tr.selected td {
  padding: 5px 20px;
  position: relative;
  z-index: 10;
}
.score-list tr.selected:after {
  content: "";
  background: #121a21;
  width: calc(100% + 30px);
  height: 30px;
  position: absolute;
  left: -15px;
  z-index: 0;
  border-radius: 21px;
  border: 3px solid #22a7d4;
  border-bottom: 3px solid rgba(0, 0, 0, 0);
  border-top: 3px solid rgba(0, 0, 0, 0);
  box-sizing: border-box;
}

/* Rankings */
.rankings {
  text-align: center;
  margin: 0 auto;
  position: relative;
}
.rankings .ranking-widget {
  margin: 0 30px;
}

.ranking-widget {
  padding: 5px;
  display: inline-block;
  text-align: left;
  position: relative;
}

/* Player List*/
.player-list {
  /*width: $playerPanelWidth;*/
  height: calc(100% - 70px + 20px);
  top: 140px;
  left: 60px;
  position: fixed;
  z-index: 10002;
  pointer-events: none;
  cursor: default;
}

/* Player Widget */
.player-widget {
  width: 100%;
  height: 70px;
  color: #eee;
  margin-bottom: 30px;
  padding: 5px;
  font-size: 14px;
  pointer-events: all !important;
  transition: left 500ms;
}
.player-widget .name-plaque {
  padding: 3px 60px;
  border-radius: 20px;
  white-space: nowrap;
}
.player-widget .bar {
  width: 100%;
  height: 3px;
}
.player-widget .stats {
  margin-left: 5px;
  margin-top: 30px;
  padding: 0 10px;
  width: 150px;
  color: #bbb;
}
.player-widget .player-name {
  color: #eee;
}
.player-widget .score {
  pointer-events: all !important;
  position: absolute;
  width: 64px;
  height: 20px;
  border-radius: 20px;
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  left: 50%;
  bottom: -14px;
  background: #1b1e1f;
  border: 3px solid #22a7d4;
  border-top: 3px solid rgba(0, 0, 0, 0);
  border-bottom: 3px solid rgba(0, 0, 0, 0);
  line-height: 14px;
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  color: #def;
  z-index: 100;
  cursor: default;
  text-shadow: 0 0 10px #22a7d4;
}
.player-widget .exception {
  pointer-events: all !important;
  width: 24px;
  height: 24px;
  position: absolute;
  top: -15px;
  left: 15px;
  background-image: url("/Assets/Sprites/exception.png");
  background-size: 24px;
  z-index: 100;
}
.player-widget .inner {
  background-image: none !important;
  opacity: 1;
}
.player-widget .inner .bot-icon {
  margin-left: -16px;
  margin-top: -32px;
}
.player-widget .ranking {
  position: absolute;
  bottom: -1px;
  left: -15px;
  width: 28px;
  height: 28px;
  background: #1b1e1f;
  border-radius: 50%;
  z-index: 100;
  border: 3px solid #121a21;
  border-top: 3px solid rgba(0, 0, 0, 0);
  border-bottom: 3px solid rgba(0, 0, 0, 0);
  box-sizing: initial;
  text-align: center;
  line-height: 28px;
  font-size: 20px;
  font-weight: bold;
  color: #ccc;
  transform: scale(0.7);
  transition: left 100ms;
}
.player-widget .ranking:before,
.player-widget .ranking:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: -16px;
  left: 2px;
  background-size: 24px;
  background-repeat: no-repeat;
}
.player-widget .ranking.gold,
.player-widget .ranking.silver,
.player-widget .ranking.bronze {
  left: -20px;
}
.player-widget .ranking.gold {
  text-shadow: 0 0 10px #f9c101;
  transform: scale(0.95);
  color: #fff;
  border: 3px solid #f9c101;
  border-top: 3px solid rgba(0, 0, 0, 0);
  border-bottom: 3px solid rgba(0, 0, 0, 0);
  /*color: $cGold;*/
}
.player-widget .ranking.silver {
  text-shadow: 0 0 10px #eeeeff;
  transform: scale(0.9);
  color: #fff;
  border: 3px solid #eeeeff;
  border-top: 3px solid rgba(0, 0, 0, 0);
  border-bottom: 3px solid rgba(0, 0, 0, 0);
  /*color: $cSilver;*/
}
.player-widget .ranking.bronze {
  text-shadow: 0 0 10px #c6974e;
  transform: scale(0.8);
  color: #fff;
  border: 3px solid #c6974e;
  border-top: 3px solid rgba(0, 0, 0, 0);
  border-bottom: 3px solid rgba(0, 0, 0, 0);
  /*color: $cBronze;*/
}
.player-widget .ranking.gold:after {
  background-image: url("/Assets/Images/crown_gold.png");
}
.player-widget .ranking.silver:after {
  border-radius: 50%;
  width: 6px;
  height: 6px;
  background-color: #eeeeff;
  right: 6px;
  left: auto;
  top: -10%;
}
.player-widget .ranking.silver:before {
  border-radius: 50%;
  width: 6px;
  height: 6px;
  background-color: #eeeeff;
  left: 6px;
  top: -10%;
}
.player-widget .ranking.bronze:after {
  border-radius: 50%;
  width: 8px;
  height: 8px;
  background-color: #c6974e;
  left: 10px;
  top: -15%;
}

/* Player Points */
.player-points {
  width: 150px;
  height: 40px;
  border-radius: 20px;
  background-color: #1b1e1f;
  margin: 10px;
}

/* Heat Meter */
.heat-meter {
  display: block;
  position: relative;
  width: 25%;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 2px;
  border-radius: 4px;
  overflow: hidden;
}
.heat-meter .bar-background {
  position: absolute;
  background: #1b1e1f;
  height: 8px;
  width: 100%;
  padding: 1px;
  top: -1px;
  left: -1px;
  z-index: -1;
  border-left: 1px solid #22a7d4;
  border-right: 1px solid #22a7d4;
}
.heat-meter .bar {
  height: 6px;
  background: #22a7d4;
  transition: width 100ms ease-in-out, background 100ms ease-in-out;
  max-width: 100%;
}

/* Bot List */
.bot-list {
  width: 100%;
}
.bot-list .slots {
  height: 100%;
  width: 100%;
}
.bot-list .slots .slot {
  width: 33.3333%;
  height: 100%;
  padding: 10px;
  display: flex;
  display: -ms-flexbox;
  flex-direction: column;
  -ms-flex-direction: column;
  float: left;
  position: relative;
}
.bot-list .slots .slot .slot-header {
  height: 50px;
  flex: 0 1 auto;
  background: #19252e;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 10px;
  border: 3px solid #22a7d4;
  border-bottom: none;
}
.bot-list .slots .slot .slot-header .title {
  font-size: 20px;
}
.bot-list .slots .slot .slot-body {
  position: relative;
  background: #19252e;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  padding: 20px;
  flex: 1 1 auto;
  border: 5px solid #19252e;
  min-height: 420px;
}
.bot-list .slots .slot .slot-footer {
  background: #19252e;
  flex: 0 1 auto;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  text-align: center;
  padding: 10px;
  border-top: none;
}
.bot-list .slots .slot .bot-icon {
  position: relative;
  left: 0px;
  transform: translateY(-5px) scale3d(1, 1, 1);
  transition: all 200ms;
  animation: none;
  z-index: 1001;
}
.bot-list .slots .slot .stats {
  margin-top: 10px;
  padding-top: 10px;
  font-family: monospace;
}
.bot-list .slots .slot .bot-design-btn {
  position: absolute;
  right: 20px;
  top: 15px;
  cursor: pointer;
  padding: 10px;
  color: #597177;
}
.bot-list .slots .slot .bot-design-btn:hover {
  color: #fff;
}
.bot-list .slots .slot.primary .slot-header {
  background: #2a3f4e;
}
.bot-list .slots .slot.primary .slot-body {
  background: #2a3f4e;
  border-color: #2a3f4e;
}
.bot-list .slots .slot.primary .slot-footer {
  background: #2a3f4e;
}
.bot-list .slots .slot.primary .stats {
  border-top: none;
}

@media screen and (max-width: 900px) {
  .bot-list .slots .slot {
    width: 100% !important;
    height: auto;
  }
}
/* Overrides */
.debug-player {
  width: 500px !important;
  line-break: auto;
  display: table-cell;
}

/*.wrapper {
    color: #222 !important;
}*/
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x- ng-cloak {
  display: none !important;
}

.no-anim.ng-show-add-active,
.no-anim.ng-show-remove-active,
.no-anim.ng-hide-add-active,
.no-anim.ng-hide-remove-active,
.no-anim.ng-show-add,
.no-anim.ng-show-remove,
.no-anim.ng-hide-add,
.no-anim.ng-hide-remove,
.no-anim.ng-enter,
.no-anim.ng-leave,
.no-anim.ng-enter-active,
.no-anim.ng-leave-active {
  display: none;
  transition-duration: 0;
}

.no-animate {
  -webkit-transition: none !important;
  transition: none !important;
}