* {
  box-sizing: border-box; }

html {
  height: 100%;
  min-height: 100%;
  overflow-y: hidden; }

body {
  background: #595959;
  margin: 0 auto;
  height: 100%;
  min-height: 100%; }

.apps {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  width: 100%;
  border: 1px solid #333; }
  .apps .row {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative; }
    .apps .row .resizer-row {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 5px;
      width: 100%;
      cursor: row-resize;
      background: #546a7a; }
    .apps .row .app {
      min-width: 200px;
      border: 1px solid #333;
      position: relative;
      display: flex;
      overflow-y: auto;
      overflow-x: hidden;
      width: 100%;
      height: 100%; }
      .apps .row .app .resizer-col {
        position: absolute;
        top: 0;
        right: 0;
        width: 5px;
        background: #546a7a;
        height: 100%;
        cursor: col-resize; }

.debugDot {
  width: 3px;
  height: 3px;
  background: #af0707;
  position: absolute;
  left: 0;
  top: 0; }

.battleMap .battleMapApp {
  width: 100%;
  height: 100%;
  position: relative;
  background: #2b292d;
  padding: 50px; }
  .battleMap .battleMapApp:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.15) 0px, rgba(0, 0, 0, 0.15) 1px, transparent 1px, transparent 2px), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0px, rgba(0, 0, 0, 0.15) 1px, transparent 1px, transparent 2px);
    pointer-events: none; }
  .battleMap .battleMapApp span {
    display: block;
    font-family: monospace;
    font-size: 12px;
    color: #4fa1ff; }
  .battleMap .battleMapApp svg {
    user-select: none;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0; }
    .battleMap .battleMapApp svg .svg_circle {
      transition: fill 0.3s, stroke 0.3s;
      fill: #545454;
      stroke: #7a7a7a;
      stroke-width: 2;
      cursor: pointer; }
      .battleMap .battleMapApp svg .svg_circle:hover {
        fill: #707070;
        stroke: #b0b0b0; }
    .battleMap .battleMapApp svg .svg_circle_network {
      transition: stroke 0.3s;
      fill: none;
      stroke: #7a7a7a;
      stroke-width: 5;
      cursor: pointer; }
      .battleMap .battleMapApp svg .svg_circle_network:hover {
        stroke: #b0b0b0; }
    .battleMap .battleMapApp svg .svg_vps_group .svg_vps_rect {
      transition: fill 0.3s, stroke 0.3s;
      fill: #545454;
      stroke: #7a7a7a;
      stroke-width: 2;
      cursor: pointer; }
      .battleMap .battleMapApp svg .svg_vps_group .svg_vps_rect:hover {
        fill: #707070;
        stroke: #b0b0b0; }
      .battleMap .battleMapApp svg .svg_vps_group .svg_vps_rect.currentPlayer {
        fill: #415435; }
        .battleMap .battleMapApp svg .svg_vps_group .svg_vps_rect.currentPlayer:hover {
          fill: #577047;
          stroke: #b0b0b0; }
    .battleMap .battleMapApp svg .svg_vps_group .vps_title {
      font-family: monospace;
      font-size: 16px;
      fill: #00a8d9; }

.animated-stroke-reverse {
  stroke-dasharray: 10 40 10 40 10 40 10 40;
  animation: dashMoveReverse 5s linear infinite; }

.animated-stroke {
  stroke-dasharray: 10 5;
  animation: dashMove 1s linear infinite; }

@keyframes dashMove {
  to {
    stroke-dashoffset: -15; } }

@keyframes dashMoveReverse {
  to {
    stroke-dashoffset: 200; } }

.stroke-base-hover, .stroke-base,
.stroke-up-hover, .stroke-up,
.stroke-down-hover, .stroke-down {
  transition: stroke 0.3s;
  pointer-events: stroke;
  cursor: pointer; }

.stroke-base-hover:hover ~ .stroke-base, .stroke-base:hover {
  stroke: #dedede; }

.stroke-up-hover:hover ~ .stroke-up, .stroke-up:hover {
  stroke: #5bff00; }

.stroke-down-hover:hover ~ .stroke-down, .stroke-down:hover {
  stroke: #00deff; }

.terminal_caret_listener_anim::after {
  content: "_";
  animation: blink 1s step-start infinite; }

@keyframes blink {
  50% {
    opacity: 0; } }

.wsLogger #wsLogger {
  margin: 0;
  padding: 0; }

.terminal #terminalInput {
  margin-top: auto;
  width: 100%;
  background: #333333;
  border: 0;
  outline: none;
  padding: 7px;
  color: white; }