* {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
  width: 100%;
  width: 100vw;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the content */
.content {
  background-color: #ddd;
  padding: 10px;
}

/* Style the footer */
.footer {
  background-color: #f1f1f1;
  padding: 10px;
  bottom: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
}

small {
  font-weight: normal;
}

.mapContainer {
  position: relative;
  border: 1px solid #9c9898;
  width: 90%;
  width: 90vw;
  height: 90%;
  height: 90vh;
  overflow: scroll;
}

.shipIcon {
  width: 80px;
  height: 80px;
  position: absolute;
  overflow: hidden;
  cursor: pointer;
}

.shipInfoBox {
  width: 300px;
  height: 67px;
  position: absolute;
  background-color: #333333;
  color: #fff;
  border: 1px solid #d3d3d3;
  overflow: hidden;
  border-radius:5px;
  padding: 5px;
}

.glowRed {
  box-shadow: 0px 0px 20px 5px rgb(255, 0, 0);
}

.glowGreen {
  box-shadow: 0px 0px 20px 5px rgb(38, 107, 41);
}

.dropShadow {
  box-shadow: 10px 10px 15px #292929;
}

.shipInfoGrid {
  display: grid;
  grid-template-columns: 1fr 1fr 45px;
  grid-template-rows: 55px 56px 377px;
  gap: 0px 0px;
  grid-template-areas:
    "shipInfoTitle shipInfoTitle shipInfoHider"
    "shipTurnHeader shipTurnHeader shipTurnHeader"
    "shipInfoPhase shipInfoPhase shipInfoPhase";
}

.shipInfoTitle {
  grid-area: shipInfoTitle;
  padding: 5px;
  cursor: move;
  background-color: #2196f3;
  color: #fff;
}

.shipInfoHider {
  grid-area: shipInfoHider;
  padding: 10px;
  background-color: #2196f3;
  color: #fff;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}

.shipTurnHeader {
  grid-area: shipTurnHeader;
  padding: 5px;
}

.shipTurnData {
  grid-area: shipTurnData;
  padding: 5px;
  overflow: auto;
}

.shipInfoPhase {
  grid-area: shipInfoPhase;
  padding: 5px;
  overflow: auto;
}

.shipInfoSave {
  grid-area: shipInfoSave;
  padding: 5px;
}

.shipInfoReady {
  grid-area: shipInfoReady;
  padding: 5px;
  text-align: right;
}

.shipWidgetGrid {
  display: grid;
  grid-template-columns: 80px 80px 80px;
  grid-template-rows: 80px 50px 50px 50px 50px 50px 50px;
  gap: 0px 0px;
  justify-items: center;
  grid-template-areas:
    "ship_name ship_name ship_name"
    ". move ."
    "slip-port . slip-stbd"
    "turn-port . turn-stbd"
    "pivot-port roll pivot-stbd"
    ". speed ."
    "save . ready";
}

.ship_name {
  grid-area: ship_name;
}

.move {
  grid-area: move;
}

.slip-stbd {
  grid-area: slip-stbd;
}

.slip-port {
  grid-area: slip-port;
}

.turn-port {
  grid-area: turn-port;
}

.turn-stbd {
  grid-area: turn-stbd;
}

.pivot-port {
  grid-area: pivot-port;
}

.pivot-stbd {
  grid-area: pivot-stbd;
}

.speed {
  grid-area: speed;
}

.save {
  grid-area: save;
}

.ready {
  grid-area: ready;
}

.roll {
  grid-area: roll;
}

#ship_move_widget {
  position: absolute;
  visibility: visible;
  background-color: #d3d3d341;
}

#game_manager {
  position: absolute;
  visibility: visible;
  background-color: #333333;
  color: #fff;
  border: 1px solid #d3d3d3;
  border-radius:5px;
}

.game_manager_grid {
  display: grid;
  grid-template-columns: 800px 50px;
  grid-template-rows: 56px 50px 600px;
  gap: 0px 0px;
  grid-template-areas:
    "game_info_title game_info_title"
    "game_menu game_menu"
    "game_panel game_panel";
}

.game_info_title {
  grid-area: game_info_title;
  padding: 10px;
  cursor: move;
}
.expand {
  grid-area: expand;
  padding: 5px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}
.game_menu {
  grid-area: game_menu;
  padding: 5px;
}
.game_panel {
  grid-area: game_panel;
  padding: 10px;
  overflow: auto;
}

.game_info_title_grid {
  display: grid;
  grid-template-columns: 1fr 30px 150px;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas: "game_title_name game_title_points game_title_turn";
  grid-area: game_info_title_grid;
}
.game_title_name {
  grid-area: game_title_name;
}
.game_title_points {
  grid-area: game_title_points;
}
.game_title_turn {
  grid-area: game_title_turn;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  background-color: #333333;
  border-color: #dee2e6 #dee2e6 #00000000;
}

.facing1 {
  transform: rotate(-90deg);
}
.facing2 {
  transform: rotate(-30deg);
}
.facing3 {
  transform: rotate(30deg);
}
.facing4 {
  transform: rotate(90deg);
}
.facing5 {
  transform: rotate(150deg);
}
.facing6 {
  transform: rotate(210deg);
}