style.css

html,
body {
  padding: 0;
  margin: 0;
  background-color: #7e7e7e;
}

* {
  user-select: none;
}

svg {
  display: block;
  width: auto;
} 
#game {
  max-width: 98%;
  min-width: 75%;
  height: 89vh;
  margin: auto;
  margin-top: 15px;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
#mssvg {
    margin: 0;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    background-color: #999;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.top {
  background-color: #3e3e3e;
  color: #eee;
  /* margin-bottom: 15px; */
}

#title {
  display: block;
  text-align: center;
  margin: 0 auto;
  padding: 15px;
  font-size: 1.32em;
  padding-bottom: 3px;
}

#turn-indicator {
  text-align: center;
  margin: 0;
  cursor: pointer;
}

#turn-indicator.blufor {
  background-color: #45f;
}

#turn-indicator.opfor {
  background-color: #f54;
}

#turn-indicator:hover {
  background-color: #24cf8b;
}

/* troopcount_hidden */
.tc_h {
  display: none
}

/* troop: not present */
.t_np,
.hq_np {
  display: none;
}

/*.unit.blufor rect,*/
.blufor_shape {
  fill: #85d4ef !important;
  opacity: 0.6;
}

/*.unit.opfor rect,*/
.opfor_shape {
  fill: #ef2444 !important;
  opacity: 0.6;
}

.unit:hover {
  cursor: pointer;
}

.unit:hover .blufor_shape,
.unit:hover .opfor_shape {
  opacity: 0.8;
}

.unit.selected .blufor_shape,
.unit.selected .opfor_shape {
  opacity: 0.9;
  stroke: #00f;
}

.sr path {
  opacity: .15;
}

.sr:hover path {
  opacity: .75;
}

.sr polygon {
  opacity: 0.31;
}

.sr polygon:hover {
  /* fill: #d9dbee; */
  opacity: .81;
  stroke: #444ea1;
  /* stroke-width: 6px; */
}

.region path {
  opacity: .3;
}

.region:hover path {
  opacity: .4;
}

.region.blufor polygon,
.region.bf polygon {
  fill: #91C0E8 !important;
  stroke: #456EA1 !important;
  opacity: .45;
}

.region.blufor.occupied polygon
.region.bf.occupied polygon {
  opacity: 0.70;
}

.region.blufor polygon:hover,
.region.bf polygon:hover {
  opacity: .81;
  stroke: #444ea1;
}

.t.bf rect,
.t.bf line,
.t.bf polygon,
.t.bf path {
  /* fill: #91C0E855 !important; */
  fill: #91C0E8 !important;
  stroke: #456EA1 !important;
}

/* .t.bf polygon,
.t.bf path
{
  fill: #0000 !important;
} */

rect.bf {
  /* fill: #91C0E855 !important; */
  fill: #91C0E8 !important;
  stroke: #456EA1 !important;
}
line.bf {
  stroke: #456EA1 !important;
}

.region.opfor polygon,
.region.of polygon {
  fill: #E39192 !important;
  stroke: #A14F48 !important;
  opacity: 0.45
}

.t.of rect, 
.t.of line,
.t.of polygon,
.t.of path {
  /* fill: #E3919255 !important; */
  fill: #E39192 !important;
  stroke: #A14F48 !important;
}

/* .t.of polygon,
.t.of path
{
  fill: #0000 !important;
} */

rect.of {
  /* fill: #E3919255 !important; */
  fill: #E39192 !important;
  stroke: #A14F48 !important;
}
line.of {
  stroke: #A14F48 !important;
}

.region.neutral polygon {
  fill: #c3c3c355 !important;
  stroke: #8885 !important;
}

.region.selected polygon {
  cursor: pointer;
  opacity: .85
}

.region.selected path,
.region.validmove path {
  opacity: .85;
  cursor: pointer;
}

.region.selected path {
  opacity: 0.35
}

.region.validmove polygon {
  fill: #42efab55 !important;
  stroke: #24cf8b !important;
  cursor: pointer;
}
 
.region.validmove polygon:hover {
  fill: #52ffbb !important;
  stroke: #24cf8b !important;
  cursor: pointer;
}

.region.cpt polygon {
  opacity: 0.75;
}

.cpt polygon:hover {
    cursor: pointer;
}

#container {
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: center;
  /* align-items: center; */
  align-items:stretch;
}

#data-panel {
    display: flex;
    flex-direction: column;
    flex-grow: 0.8;
    width: 250px;
    /* height: 1; */
    max-height: 85vh;
    overflow-y: scroll;
    margin: 15px;
    padding: 0px;
    background-color: #3e3e3e;
    font-family: 'courier new', monospace;
    font-size: 9px;
    color: #eee;
    order:2;
}

.date {
    color: #999;
    padding-right: 8px;
}

pre {
    padding: 5px;
    background: #1e1e1e;
    margin-top: 0;
    font-size: 12px;
}

p pre {
    margin-top: 5px;
    margin-bottom: 0;
}

#data-panel p {
    padding: 5px;
    font-size: 12px;
}

.bluetext {
    color: #85d4ef; 
}
.redtext {
    color: #f39192;
}

#progress,
#p_bfof,
#p_battle,
.battle {
    margin: 0;
    padding: 0;
    transform: translateZ(0);
}

#p_bfof,
#p_battle,
.battle {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 10px;
    /* height: 2px; */
    box-sizing: border-box;
}

progress[value]::-webkit-progress-bar {
    background-color: #f39192;
}

progress[value]::-webkit-progress-value {
    background-color: #85d4ef;
}

.battle[value]::-webkit-progress-bar {
    background-color: #ff4142;
}

.battle[value]::-webkit-progress-value {
    background-color: #4141ff;
}

#battle-box {
    /* display: block; */
    display: none;
    background-color: #3e3e3eaa;
    position: fixed;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.region.blufor.oc polygon,
.region.bf.oc polygon {
  /* fill: #2147e3 !important; */
  fill: #6187e3 !important;
  stroke: #85d4ef;
  /* opacity: 0.6 !important; */
  cursor: pointer;
}

.region.opfor.oc polygon,
.region.of.oc polygon {
  /* fill: #e34721 !important; */
  fill: #e38761 !important;
  stroke: #efd485;
  /* opacity: 0.6 !important; */
  cursor: pointer;
}

.region.oc polygon:hover {
  opacity: 0.55 !important;
}

.region.opfor.selected polygon,
.s_cls-1.of {
  fill: #f39192 !important;
  stroke: #A14F48 !important;
}

.region.blufor.selected polygon,
.s_cls-1.bf {
  fill: #91C0E8 !important;
  stroke: #456EA1 !important;
}

.tc path,
.tc path {
  stroke: none !important;
  stroke-width: .2pt;
}

.arrow {
  opacity: 0.7
}
.arrow.bf {
  /* stroke: #91C0E8; */
  fill: #456EA1;
}
.arrow.of {
  /* stroke: #f39192; */
  fill: #A14F48;
}

.crater {
  /* fill: #6e5622;
  stroke: none; */
  opacity: 0;
  fill: #efab45;
  stroke: #efab45;
  stroke-width: 2px;
  animation: explode .24s ease-in forwards;
  /* animation-iteration-count: 1; */
  /* animation-delay: ; */
}

.crater_filled {
  fill: #6e5622;
  /* fill: #fff; */
  stroke: #6e5622;
  stroke-width: 0;
  opacity: 1;
}

@keyframes explode {
  5% {
    opacity: 1;
  }
  20% {
    fill: #ff4142;
    stroke: #ff4142;
    stroke-width: 3px;
    opacity: 1;
  }
  to {
    fill: #6e5622;
    stroke: #6e5622;
    stroke-width: 0;
    opacity: 1;
  }
}

.cbtFire {
  /* stroke-dasharray: 6px;
  stroke-dashoffset: 10px; */
  fill: #0000;
  opacity: 0.95
}
.cbtFire.infantry.bf {
  stroke: #ff8182; /*#efab45;*/
  stroke-dasharray: 40px;
  stroke-dashoffset: 5px;
  animation: dash_i .16s ease-out forwards;
  animation-iteration-count: infinite;
}
.cbtFire.infantry.of {
  stroke: #a2efbb;
  stroke-dasharray: 40px;
  stroke-dashoffset: 5px;
  animation: dash_i .06s ease-out forwards;
  animation-iteration-count: infinite;
}

.cbtFire.helicopter {
  /* stroke: #efefef; */
  stroke: #efab45;
  stroke-width: 3px;
  /* stroke-dasharray: 25px; */
  /* stroke-dashoffset: 25px; */
  stroke-dasharray: 500px;
  stroke-dashoffset: 500px;
  animation: dash_h .18s ease-in forwards;
  /* animation-iteration-count: infinite; */
}
.cbtFire.armor {
  /* stroke: #ff4142; */
  stroke: #efab45;
  stroke-width: 5px;
  stroke-dasharray: 120px;
  stroke-dashoffset: 120px;
  /* animation: dash_a .16s ease-out forwards; */
  animation: dash_a .16s ease-out forwards;
}
@keyframes dash_i {
  to {
    /* stroke: #efff85; */
    stroke-width: 0.5px;
    stroke-dashoffset: 200px;
    opacity: 0.1;
  }
}
@keyframes dash_h {
  to {
    stroke: #efefef;
    /* stroke-dasharray: 15px; */
    stroke-dashoffset: 425px;
    stroke-width: 1px;
    opacity: .1;
  }
}
@keyframes dash_a {
  to {
    stroke: #ff4142;
    stroke-dasharray: 120px;
    stroke-dashoffset: 50px;
    stroke-width: 1px;
    opacity: .1;
  }
}

.fow {
  opacity: 0;
}

.reinforceable {
  opacity: 0.8;
  cursor: pointer;
}

.reinforceable polygon:hover {
  fill: #c1c1ff !important;
  border: #4141ff !important;
}

/* 
#data-panel
{
    font-size: 8px;
    order: 999;
} */

	/* The Modal (background) */
	.modal {
	  display: none; 
	  position: fixed; /* Stay in place */
	  z-index: 1; /* Sit on top */
	  left: 0;
	  top: 0;
	  width: 100%; /* Full width */
	  height: 100%; /* Full height */
	  overflow: auto; /* Enable scroll if needed */
	  background-color: rgb(0,0,0); /* Fallback color */
	  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	}

  #troopSplitter {
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

	/* Modal Content/Box */
	.modal-content {
	  background-color: #fefefe;
	  margin: 15% auto; 
	  border: 1px solid #888;
	  width: 80%; /* Could be more or less, depending on screen size */
	}

  .grid-container-notif {
	  display: grid;
	  grid-template-columns: auto;
	  background-color: #1b2a38;
	  padding: 5px;
	}

  .notif-content {
	  background-color: #fefefe;
	  margin: 15% auto; 
	  border: 1px solid #888;
	  width: 50%; /* Could be more or less, depending on screen size */
	  /*height: 30%*/
	}

	/* The Close Button */
	.close {
	  color: #aaa;
	  font-size: 28px;
	  font-weight: bold;
	}

	.close:hover,
	.close:focus {
	  color: darkgreen;
	  text-decoration: none;
	  cursor: pointer;
	}
.grid-container {
  display: grid;
  /* grid-template-columns: auto auto auto; */
  grid-template-columns: 30% 40% 30%;
  background-color: #1b2a38;
  padding: 5px;
}

.inner-grid-container {
  display: grid;
  grid-template-columns: 33.3% 33.4% 33.3%;
  grid-template-rows: 40px 40px auto;
  background-color: grey;
}

.grid-item {
  background-color: lightgrey;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 5px;
  font-size: 25px;
  text-align: center;
}

.grid-item-notif {
  background-color: #A9A9A9;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 5px;
  font-size: 25px;
  text-align: center;
}

.grid-item-inner {
  background-color: grey;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 5px;
  font-size: 25px;
  text-align: center;
}

.grid-item-adv {
  background-color: #efab45;
  font-size: 10px !important;
  text-transform: uppercase;
  padding: 5px;
  text-align: center;
  color: #000;
}

.grid-item-close {
  background-color: lightgreen;
  border: 1px solid rgba(0, 0, 0, 0.8);
  /* padding: 5px; */
  font-size: 25px;
  text-align: center;
}

.combat-auto-distribute {
  background-color: blue;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 5px;
  font-size: 25px;
  text-align: center;
}

.flex {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: flex-start;
  width: 100%;
  background-color: lightgrey;
  border-right: 1px solid rgba(0, 0, 0, 0.8);
  border-left: 1px solid rgba(0, 0, 0, 0.8);
  /* height: 30px; */
}

.allocation {
  display: flex;
  flex-direction: column;
}

.allocation svg,
.flex svg {
  max-width: 100px;
  max-height: 100px;
  margin: 10px auto;
}

.available rect,
.available polygon, 
.available line {
  transition: 0.2s;
  cursor: pointer;
}

.t.available:hover rect,
.t.available:hover polygon,
.t.available:hover path,
.t.available:hover line {
  fill: #8aef8a !important;
  stroke: #4aaf4a !important;
}

.t.selected rect,
.t.selected polygon,
.t.selected path,
.t.selected line {
  fill: #faefaa !important;
  stroke: #cfaf4a !important;
}

.test-suite{
  margin: 20px;
  background-color: red;
  color: white;
  width: 150px;
  height: 40px;
  font-size: 18px;
}

.test-suite:hover{
  background-color: rgb(159, 2, 2);
}

.endturn{
  width: 300px;
  height: 30px;
  background-color: rgb(255, 228, 95);
  font-size: 15px;
}



.endturn:hover{
  background-color: rgb(161, 148, 0);
  color: rgb(227, 227, 227);
}

.ywtext{
  color: greenyellow;
}
.region.moved .sr {
  fill: #777 !important;
  stroke: #444 !important;
  user-select: none;
}

.allocpair {
  display: flex;
  flex-direction: row-reverse;
  font-size: 16pt; 
  align-items: center;
  justify-content: space-evenly;
  text-align: left;
}

.allocpair svg {
  margin: 10px !important;
}

.allocpair p {
  width: 10ch;
  text-transform: capitalize;
}

#ts_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

#bw_region_display {
  width: 32%;
  padding: 2px;
  margin: auto;
  /* box-shadow: 0px 0px 4px #0005; */
}

#notif-close,
#notif-ignore {
  padding: 5px;
  display: block;
  transition: 0.2s;
  color: #333;
}

#notif-ignore {
  background-color: #24cf8b;
  font-size: 0.8em;
}
#notif-ignore:hover {
  background-color: #12bf7b;
}

#battleWindow {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: unset;
}

pre {
  user-select:contain !important;
}