div#mapwrapper {
  left: 422px;
  top: 5px;
  width: 1139px;
  height: 861px;
  border: 1px solid white;
  background-color:black;
  --distance: 34px;
  --gap: 1px;
  --sqrt3: 1.7320508;
}

div#mapwrapper > div#maprotator.player2 { transform: translate(-88px, 33px); }
div#mapwrapper > div#maprotator.player2mirror { transform: translate(-88px, 33px); }
div#mapwrapper > div#maprotator.player3 { transform: translate(-210px, 7px); }
div#mapwrapper > div#maprotator.player3mirror { transform: translate(-263px, 7px); }
div#mapwrapper > div#maprotator.player4 { transform: translate(-220px, 7px); }
div#mapwrapper > div#maprotator.player4mirror { transform: translate(-253px, 7px); }

/* div#mapwrapper > div#maprotator.player4 { transform: rotate(-11deg) translate(-310px, 110px); }
div#mapwrapper > div#maprotator.player4 div:not(.hex) {  transform: rotate(11deg); } */

div#mapwrapper > div#maprotator > div.hex {
  width: calc(var(--sqrt3) * (var(--distance) + var(--gap)));
  height: calc(2 * (var(--distance) + var(--gap)));
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background-color:dimgray;
  overflow:visible;
}
div#mapwrapper > div#maprotator > div.hex::before {
  content: "";
  inset: var(--gap) calc(var(--sqrt3) / 2 * var(--gap)) var(--gap) calc(var(--sqrt3) / 2 * var(--gap));
  position: absolute;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background-color:black;
}
div#mapwrapper > div#maprotator > div.hex:hover::before {
  background-color: rgba(255, 255, 255, 0.5) !important;
  background-blend-mode: lighten;
}
div#mapwrapper > div#maprotator > div.hex.powersource::before {
  background-color: rgba(178, 0, 255, 0.5);
  background-blend-mode: lighten;
}
div#mapwrapper > div#maprotator > div.hex.powersource:hover::before {
  background-color: rgba(211, 124, 255, 0.5);
}
div#mapwrapper > div#maprotator > div.hex.fedsourceacid::before { background-color: red; }
div#mapwrapper > div#maprotator > div.hex.fedsourcevolcano::before { background-color: orange; }
div#mapwrapper > div#maprotator > div.hex.fedsourcedesert::before { background-color: yellow; }
div#mapwrapper > div#maprotator > div.hex.fedsourceswamp::before { background-color: saddlebrown; }
div#mapwrapper > div#maprotator > div.hex.fedsourcetitanium::before { background-color: gray; }
div#mapwrapper > div#maprotator > div.hex.fedsourceice::before { background-color: white; }
div#mapwrapper > div#maprotator > div.hex.fedsourceearth::before { background-color: blue; }
div#mapwrapper > div#maprotator > div.hex.fedsourceasteroid::before { background-color: pink; }
div#mapwrapper > div#maprotator > div.hex.fedsourceproto::before { background-color: #78d8e2; }

div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_0:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_0::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_1:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_1::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_2:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_2::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_3:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_3::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_4:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_4::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_5:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_5::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_6:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_6::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_7:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_7::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_8:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_8::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_9:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_9::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_10:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_10::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_11:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_11::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_12:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_12::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_13:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_13::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_14:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_14::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_15:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_15::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_16:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_16::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_17:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_17::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_18:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_18::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_19:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_19::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_20:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_20::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_21:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_21::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_22:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_22::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_23:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_23::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_24:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_24::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_25:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_25::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_26:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_26::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_27:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_27::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_28:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_28::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_29:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_29::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_30:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_30::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_31:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_31::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_32:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_32::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_33:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_33::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_34:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_34::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_35:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_35::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_36:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_36::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_37:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_37::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_38:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_38::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_39:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_39::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_40:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_40::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_41:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_41::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_42:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_42::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_43:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_43::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_44:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_44::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_45:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_45::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_46:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_46::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_47:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_47::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_48:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_48::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_49:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_49::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_50:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_50::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_51:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_51::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_52:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_52::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_53:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_53::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_54:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_54::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_55:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_55::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_56:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_56::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_57:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_57::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_58:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_58::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_59:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_59::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_60:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_60::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_61:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_61::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_62:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_62::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_63:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_63::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_64:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_64::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_65:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_65::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_66:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_66::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_67:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_67::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_68:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_68::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_69:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_69::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_70:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_70::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_71:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_71::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_72:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_72::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_73:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_73::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_74:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_74::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_75:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_75::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_76:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_76::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_77:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_77::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_78:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_78::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_79:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_79::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_80:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_80::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_81:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_81::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_82:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_82::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_83:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_83::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_84:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_84::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_85:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_85::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_86:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_86::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_87:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_87::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_88:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_88::before,
div#gamewrapper:has(div#gamelogwrapper > div.oneaction.gamelog_89:hover) div#mapwrapper > div#maprotator > div.hex.gamelog_89::before {
  background-color: rgba(178, 0, 255, 0.5);
}

div#mapwrapper > div#maprotator > div.hex.fedsource:hover::before {
  background-color: rgba(255, 255, 255, 0.75);
}

div#mapwrapper > div#maprotator > div.hex > div.planet {
  left: calc(0.11 * var(--distance));
  top: calc(0.23 * var(--distance));
  width: calc(0.8 * 2 * var(--distance));
  height: calc(0.8 * 2 * var(--distance));
  background-size: 100%;
}

div#mapwrapper > div#maprotator > div.hex > div.powerring {
  width: 74%;
  height: 74%;
  left: 15%;
  top: 9%;
  background-image: url("powerring.png");
  background-size: 100%;
}

div#mapwrapper > div#maprotator > div.hex > div.PI {
  width: 100%;
  height: 100%;
  left: 0%;
  top: -2%;
  background-image: url("PI_glow.png");
  background-size: 100%;
}
div#mapwrapper > div#maprotator > div.hex > div.A {
  width: 86%;
  height: 86%;
  left: 8%;
  top: 7%;
  background-image: url("A_glow.png");
  background-size: 100%;
}
div#mapwrapper > div#maprotator > div.hex > div.TS {
  width: 60%;
  height: 60%;
  left: 20%;
  top: 20%;
  background-image: url("TS_glow.png");
  background-size: 100%;
}
div#mapwrapper > div#maprotator > div.hex > div.RL {
  width: 70%;
  height: 70%;
  left: 15%;
  top: 15%;
  background-image: url("RL_glow.png");
  background-size: 100%;
}
div#mapwrapper > div#maprotator > div.hex > div.M {
  width: 60%;
  height: 60%;
  left: 22%;
  top: 20%;
  background-image: url("M_glow.png");
  background-size: 100%;
}
div#mapwrapper > div#maprotator > div.hex > div.gaiaformer {
  width: 80%;
  height: 80%;
  left: 10%;
  top: 9%;
  background-image: url("gaiaformer_glow.png");
  background-size: 100%;
}

div#mapwrapper > div#maprotator > div.hex > div.parasite {
  width: 50%;
  height: 50%;
  left: 43%;
  top: 43%;
  background-image: url("buildings/M_earth_glow.png");
  background-size: 100%;
}

div#mapwrapper > div#maprotator > div.hex > div.spacestation {
  width: 70%;
  height: 70%;
  left: 15%;
  top: 15%;
  background-image: url("spacestation.png");
  background-size: 100%;
}

div#mapwrapper > div#maprotator > div.hex > div.satellite {
  width: 40%;
  height: 40%;
  left: 30%;
  top: 30%;
  background-image: url("satellite_glow.png");
  background-size: 100%;
}
div#mapwrapper > div#maprotator > div.hex > div.satellite.satellite0per2 {
  left: 10%;
  top: 30%;
}
div#mapwrapper > div#maprotator > div.hex > div.satellite.satellite1per2 {
  left: 50%;
  top: 30%;
}
div#mapwrapper > div#maprotator > div.hex > div.satellite.satellite0per3 {
  left: 30%;
  top: 10%;
}
div#mapwrapper > div#maprotator > div.hex > div.satellite.satellite1per3 {
  left: 10%;
  top: 40%;
}
div#mapwrapper > div#maprotator > div.hex > div.satellite.satellite2per3 {
  left: 50%;
  top: 40%;
}
div#mapwrapper > div#maprotator > div.hex > div.satellite.satellite0per4 {
  left: 11%;
  top: 13%;
}
div#mapwrapper > div#maprotator > div.hex > div.satellite.satellite1per4 {
  left: 49%;
  top: 13%;
}
div#mapwrapper > div#maprotator > div.hex > div.satellite.satellite2per4 {
  left: 11%;
  top: 46%;
}
div#mapwrapper > div#maprotator > div.hex > div.satellite.satellite3per4 {
  left: 49%;
  top: 46%;
}

/* View Board Button */

div#viewboardbutton {
  width: 152px;
  height: 40px;
  left: 10px;
  top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid white;
}
div#viewboardbutton:hover { background-color: gray; }
div#viewboardbutton > p { font-size: 16px; }

/* Form Federation Button */

/* div#mapwrapper > div#formfederationbutton {
  width: 152px;
  height: 40px;
  right: 10px;
  top: 10px;
  display: none;
  justify-content: center;
  align-items: center;
  border: 1px solid white;
}
div#mapwrapper > div#formfederationbutton.activated { display: flex; }
div#mapwrapper > div#formfederationbutton.activated:hover { background-color: gray; }
div#mapwrapper > div#formfederationbutton > p { font-size: 16px; margin: 0; } */

div#mapwrapper > div#confirmfederationbutton {
  width: 152px;
  height: 40px;
  right: 10px;
  top: 10px;
  display: none;
  justify-content: center;
  align-items: center;
  border: 1px solid white;
  background-color: black;
}
div#mapwrapper > div#confirmfederationbutton.activated { display: flex; }
div#mapwrapper > div#confirmfederationbutton.activated:hover { background-color: gray; }
div#mapwrapper > div#confirmfederationbutton > p { font-size: 16px; margin: 0; }

div.viewfedbutton {
  right: 10px;
  width: 59px;
  height: 72px;
  clip-path: polygon(53% 0%, 60% 5%, 95% 18%, 100% 24%, 100% 77%, 50% 100%, 0% 77%, 0% 24%, 5% 18%, 40% 5%, 47% 0%);
}
div#mapwrapper > div#viewfedbutton0 { top: 64px; right: 80px; }
div#mapwrapper > div#viewfedbutton1 { top: 64px; right: 10px; }
div#mapwrapper > div#viewfedbutton2 { top: 128px; right: 45px; }
div#mapwrapper > div#viewfedbutton3 { top: 192px; right: 10px; }
div.viewfedbutton > div.fedbuttoncover {
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.5;
}
div#mapwrapper > div.viewfedbutton:hover > div.fedbuttoncover,
div#mapwrapper > div.viewfedbutton.activated > div.fedbuttoncover {
  background-color: white;
  opacity: 0.5;
}

div.viewfedbutton > div.text_start {
  display: none;
  width: 100%;
  top: 39%;
  font-size: 9pt;
}
div#mapwrapper > div.viewfedbutton.activated_start > div.text_start {
  display: block;
}
div#mapwrapper > div.viewfedbutton.activated_start:hover > div.text_start {
  display: none;
}
div#mapwrapper > div.viewfedbutton > div.text_Ivitsfedtier {
  display: none;
  width: 100%;
  top: 34%;
  font-size: 16pt;
}
div#mapwrapper > div.viewfedbutton:hover > div.text_Ivitsfedtier {
  display: block;
}
div#mapwrapper > div.viewfedbutton > div.text_end {
  display: none;
  width: 100%;
  top: 38%;
  font-size: 10pt;
}
div#mapwrapper > div.viewfedbutton.activated_end > div.text_end {
  display: block;
}
div#mapwrapper > div.viewfedbutton.activated_end:hover > div.text_end {
  display: none;
}

/* Federation Background Colors */

div#mapwrapper:has(div#viewfedbutton0:hover) > div#maprotator > div.hex.fedacid0::before,
div#mapwrapper:has(div#viewfedbutton1:hover) > div#maprotator > div.hex.fedacid1::before,
div#mapwrapper:has(div#viewfedbutton2:hover) > div#maprotator > div.hex.fedacid2::before,
div#mapwrapper:has(div#viewfedbutton3:hover) > div#maprotator > div.hex.fedacid3::before,
div#mapwrapper:has(div#viewfedbutton0.activated) > div#maprotator > div.hex.fedacid0::before,
div#mapwrapper:has(div#viewfedbutton1.activated) > div#maprotator > div.hex.fedacid1::before,
div#mapwrapper:has(div#viewfedbutton2.activated) > div#maprotator > div.hex.fedacid2::before,
div#mapwrapper:has(div#viewfedbutton3.activated) > div#maprotator > div.hex.fedacid3::before
{ background-color: red; }
div#mapwrapper:has(div#viewfedbutton0:hover) > div#maprotator > div.hex.nonfedacid0,
div#mapwrapper:has(div#viewfedbutton1:hover) > div#maprotator > div.hex.nonfedacid1,
div#mapwrapper:has(div#viewfedbutton2:hover) > div#maprotator > div.hex.nonfedacid2,
div#mapwrapper:has(div#viewfedbutton3:hover) > div#maprotator > div.hex.nonfedacid3
{ background-color: red; }
div#mapwrapper:has(div#viewfedbutton0:hover) > div#maprotator > div.hex.fedvolcano0::before,
div#mapwrapper:has(div#viewfedbutton1:hover) > div#maprotator > div.hex.fedvolcano1::before,
div#mapwrapper:has(div#viewfedbutton2:hover) > div#maprotator > div.hex.fedvolcano2::before,
div#mapwrapper:has(div#viewfedbutton3:hover) > div#maprotator > div.hex.fedvolcano3::before,
div#mapwrapper:has(div#viewfedbutton0.activated) > div#maprotator > div.hex.fedvolcano0::before,
div#mapwrapper:has(div#viewfedbutton1.activated) > div#maprotator > div.hex.fedvolcano1::before,
div#mapwrapper:has(div#viewfedbutton2.activated) > div#maprotator > div.hex.fedvolcano2::before,
div#mapwrapper:has(div#viewfedbutton3.activated) > div#maprotator > div.hex.fedvolcano3::before
{ background-color: orange; }
div#mapwrapper:has(div#viewfedbutton0:hover) > div#maprotator > div.hex.nonfedvolcano0,
div#mapwrapper:has(div#viewfedbutton1:hover) > div#maprotator > div.hex.nonfedvolcano1,
div#mapwrapper:has(div#viewfedbutton2:hover) > div#maprotator > div.hex.nonfedvolcano2,
div#mapwrapper:has(div#viewfedbutton3:hover) > div#maprotator > div.hex.nonfedvolcano3
{ background-color: orange; }
div#mapwrapper:has(div#viewfedbutton0:hover) > div#maprotator > div.hex.feddesert0::before,
div#mapwrapper:has(div#viewfedbutton1:hover) > div#maprotator > div.hex.feddesert1::before,
div#mapwrapper:has(div#viewfedbutton2:hover) > div#maprotator > div.hex.feddesert2::before,
div#mapwrapper:has(div#viewfedbutton3:hover) > div#maprotator > div.hex.feddesert3::before,
div#mapwrapper:has(div#viewfedbutton0.activated) > div#maprotator > div.hex.feddesert0::before,
div#mapwrapper:has(div#viewfedbutton1.activated) > div#maprotator > div.hex.feddesert1::before,
div#mapwrapper:has(div#viewfedbutton2.activated) > div#maprotator > div.hex.feddesert2::before,
div#mapwrapper:has(div#viewfedbutton3.activated) > div#maprotator > div.hex.feddesert3::before
{ background-color: yellow; }
div#mapwrapper:has(div#viewfedbutton0:hover) > div#maprotator > div.hex.nonfeddesert0,
div#mapwrapper:has(div#viewfedbutton1:hover) > div#maprotator > div.hex.nonfeddesert1,
div#mapwrapper:has(div#viewfedbutton2:hover) > div#maprotator > div.hex.nonfeddesert2,
div#mapwrapper:has(div#viewfedbutton3:hover) > div#maprotator > div.hex.nonfeddesert3
{ background-color: yellow; }
div#mapwrapper:has(div#viewfedbutton0:hover) > div#maprotator > div.hex.fedswamp0::before,
div#mapwrapper:has(div#viewfedbutton1:hover) > div#maprotator > div.hex.fedswamp1::before,
div#mapwrapper:has(div#viewfedbutton2:hover) > div#maprotator > div.hex.fedswamp2::before,
div#mapwrapper:has(div#viewfedbutton3:hover) > div#maprotator > div.hex.fedswamp3::before,
div#mapwrapper:has(div#viewfedbutton0.activated) > div#maprotator > div.hex.fedswamp0::before,
div#mapwrapper:has(div#viewfedbutton1.activated) > div#maprotator > div.hex.fedswamp1::before,
div#mapwrapper:has(div#viewfedbutton2.activated) > div#maprotator > div.hex.fedswamp2::before,
div#mapwrapper:has(div#viewfedbutton3.activated) > div#maprotator > div.hex.fedswamp3::before
{ background-color: saddlebrown; }
div#mapwrapper:has(div#viewfedbutton0:hover) > div#maprotator > div.hex.nonfedswamp0,
div#mapwrapper:has(div#viewfedbutton1:hover) > div#maprotator > div.hex.nonfedswamp1,
div#mapwrapper:has(div#viewfedbutton2:hover) > div#maprotator > div.hex.nonfedswamp2,
div#mapwrapper:has(div#viewfedbutton3:hover) > div#maprotator > div.hex.nonfedswamp3
{ background-color: saddlebrown; }
div#mapwrapper:has(div#viewfedbutton0:hover) > div#maprotator > div.hex.fedtitanium0::before,
div#mapwrapper:has(div#viewfedbutton1:hover) > div#maprotator > div.hex.fedtitanium1::before,
div#mapwrapper:has(div#viewfedbutton2:hover) > div#maprotator > div.hex.fedtitanium2::before,
div#mapwrapper:has(div#viewfedbutton3:hover) > div#maprotator > div.hex.fedtitanium3::before,
div#mapwrapper:has(div#viewfedbutton0.activated) > div#maprotator > div.hex.fedtitanium0::before,
div#mapwrapper:has(div#viewfedbutton1.activated) > div#maprotator > div.hex.fedtitanium1::before,
div#mapwrapper:has(div#viewfedbutton2.activated) > div#maprotator > div.hex.fedtitanium2::before,
div#mapwrapper:has(div#viewfedbutton3.activated) > div#maprotator > div.hex.fedtitanium3::before
{ background-color: gray; }
div#mapwrapper:has(div#viewfedbutton0:hover) > div#maprotator > div.hex.nonfedtitanium0,
div#mapwrapper:has(div#viewfedbutton1:hover) > div#maprotator > div.hex.nonfedtitanium1,
div#mapwrapper:has(div#viewfedbutton2:hover) > div#maprotator > div.hex.nonfedtitanium2,
div#mapwrapper:has(div#viewfedbutton3:hover) > div#maprotator > div.hex.nonfedtitanium3
{ background-color: gray; }
div#mapwrapper:has(div#viewfedbutton0:hover) > div#maprotator > div.hex.fedice0::before,
div#mapwrapper:has(div#viewfedbutton1:hover) > div#maprotator > div.hex.fedice1::before,
div#mapwrapper:has(div#viewfedbutton2:hover) > div#maprotator > div.hex.fedice2::before,
div#mapwrapper:has(div#viewfedbutton3:hover) > div#maprotator > div.hex.fedice3::before,
div#mapwrapper:has(div#viewfedbutton0.activated) > div#maprotator > div.hex.fedice0::before,
div#mapwrapper:has(div#viewfedbutton1.activated) > div#maprotator > div.hex.fedice1::before,
div#mapwrapper:has(div#viewfedbutton2.activated) > div#maprotator > div.hex.fedice2::before,
div#mapwrapper:has(div#viewfedbutton3.activated) > div#maprotator > div.hex.fedice3::before
{ background-color: white; }
div#mapwrapper:has(div#viewfedbutton0:hover) > div#maprotator > div.hex.nonfedice0,
div#mapwrapper:has(div#viewfedbutton1:hover) > div#maprotator > div.hex.nonfedice1,
div#mapwrapper:has(div#viewfedbutton2:hover) > div#maprotator > div.hex.nonfedice2,
div#mapwrapper:has(div#viewfedbutton3:hover) > div#maprotator > div.hex.nonfedice3
{ background-color: white; }
div#mapwrapper:has(div#viewfedbutton0:hover) > div#maprotator > div.hex.fedearth0::before,
div#mapwrapper:has(div#viewfedbutton1:hover) > div#maprotator > div.hex.fedearth1::before,
div#mapwrapper:has(div#viewfedbutton2:hover) > div#maprotator > div.hex.fedearth2::before,
div#mapwrapper:has(div#viewfedbutton3:hover) > div#maprotator > div.hex.fedearth3::before,
div#mapwrapper:has(div#viewfedbutton0.activated) > div#maprotator > div.hex.fedearth0::before,
div#mapwrapper:has(div#viewfedbutton1.activated) > div#maprotator > div.hex.fedearth1::before,
div#mapwrapper:has(div#viewfedbutton2.activated) > div#maprotator > div.hex.fedearth2::before,
div#mapwrapper:has(div#viewfedbutton3.activated) > div#maprotator > div.hex.fedearth3::before
{ background-color: blue; }
div#mapwrapper:has(div#viewfedbutton0:hover) > div#maprotator > div.hex.nonfedearth0,
div#mapwrapper:has(div#viewfedbutton1:hover) > div#maprotator > div.hex.nonfedearth1,
div#mapwrapper:has(div#viewfedbutton2:hover) > div#maprotator > div.hex.nonfedearth2,
div#mapwrapper:has(div#viewfedbutton3:hover) > div#maprotator > div.hex.nonfedearth3
{ background-color: blue; }
div#mapwrapper:has(div#viewfedbutton0:hover) > div#maprotator > div.hex.fedasteroid0::before,
div#mapwrapper:has(div#viewfedbutton1:hover) > div#maprotator > div.hex.fedasteroid1::before,
div#mapwrapper:has(div#viewfedbutton2:hover) > div#maprotator > div.hex.fedasteroid2::before,
div#mapwrapper:has(div#viewfedbutton3:hover) > div#maprotator > div.hex.fedasteroid3::before,
div#mapwrapper:has(div#viewfedbutton0.activated) > div#maprotator > div.hex.fedasteroid0::before,
div#mapwrapper:has(div#viewfedbutton1.activated) > div#maprotator > div.hex.fedasteroid1::before,
div#mapwrapper:has(div#viewfedbutton2.activated) > div#maprotator > div.hex.fedasteroid2::before,
div#mapwrapper:has(div#viewfedbutton3.activated) > div#maprotator > div.hex.fedasteroid3::before
{ background-color: #ff96bc; }
div#mapwrapper:has(div#viewfedbutton0:hover) > div#maprotator > div.hex.nonfedasteroid0,
div#mapwrapper:has(div#viewfedbutton1:hover) > div#maprotator > div.hex.nonfedasteroid1,
div#mapwrapper:has(div#viewfedbutton2:hover) > div#maprotator > div.hex.nonfedasteroid2,
div#mapwrapper:has(div#viewfedbutton3:hover) > div#maprotator > div.hex.nonfedasteroid3
{ background-color: #ff96bc; }
div#mapwrapper:has(div#viewfedbutton0:hover) > div#maprotator > div.hex.fedproto0::before,
div#mapwrapper:has(div#viewfedbutton1:hover) > div#maprotator > div.hex.fedproto1::before,
div#mapwrapper:has(div#viewfedbutton2:hover) > div#maprotator > div.hex.fedproto2::before,
div#mapwrapper:has(div#viewfedbutton3:hover) > div#maprotator > div.hex.fedproto3::before,
div#mapwrapper:has(div#viewfedbutton0.activated) > div#maprotator > div.hex.fedproto0::before,
div#mapwrapper:has(div#viewfedbutton1.activated) > div#maprotator > div.hex.fedproto1::before,
div#mapwrapper:has(div#viewfedbutton2.activated) > div#maprotator > div.hex.fedproto2::before,
div#mapwrapper:has(div#viewfedbutton3.activated) > div#maprotator > div.hex.fedproto3::before
{ background-color: #78d8e2; }
div#mapwrapper:has(div#viewfedbutton0:hover) > div#maprotator > div.hex.nonfedproto0,
div#mapwrapper:has(div#viewfedbutton1:hover) > div#maprotator > div.hex.nonfedproto1,
div#mapwrapper:has(div#viewfedbutton2:hover) > div#maprotator > div.hex.nonfedproto2,
div#mapwrapper:has(div#viewfedbutton3:hover) > div#maprotator > div.hex.nonfedproto3
{ background-color: #78d8e2; }
div#mapwrapper:has(div#viewfedbutton0:hover) > div#maprotator > div.hex.nonfedacid0:before,
div#mapwrapper:has(div#viewfedbutton1:hover) > div#maprotator > div.hex.nonfedacid1:before,
div#mapwrapper:has(div#viewfedbutton2:hover) > div#maprotator > div.hex.nonfedacid2:before,
div#mapwrapper:has(div#viewfedbutton3:hover) > div#maprotator > div.hex.nonfedacid3:before,
div#mapwrapper:has(div#viewfedbutton0:hover) > div#maprotator > div.hex.nonfedvolcano0:before,
div#mapwrapper:has(div#viewfedbutton1:hover) > div#maprotator > div.hex.nonfedvolcano1:before,
div#mapwrapper:has(div#viewfedbutton2:hover) > div#maprotator > div.hex.nonfedvolcano2:before,
div#mapwrapper:has(div#viewfedbutton3:hover) > div#maprotator > div.hex.nonfedvolcano3:before,
div#mapwrapper:has(div#viewfedbutton0:hover) > div#maprotator > div.hex.nonfeddesert0:before,
div#mapwrapper:has(div#viewfedbutton1:hover) > div#maprotator > div.hex.nonfeddesert1:before,
div#mapwrapper:has(div#viewfedbutton2:hover) > div#maprotator > div.hex.nonfeddesert2:before,
div#mapwrapper:has(div#viewfedbutton3:hover) > div#maprotator > div.hex.nonfeddesert3:before,
div#mapwrapper:has(div#viewfedbutton0:hover) > div#maprotator > div.hex.nonfedswamp0:before,
div#mapwrapper:has(div#viewfedbutton1:hover) > div#maprotator > div.hex.nonfedswamp1:before,
div#mapwrapper:has(div#viewfedbutton2:hover) > div#maprotator > div.hex.nonfedswamp2:before,
div#mapwrapper:has(div#viewfedbutton3:hover) > div#maprotator > div.hex.nonfedswamp3:before,
div#mapwrapper:has(div#viewfedbutton0:hover) > div#maprotator > div.hex.nonfedtitanium0:before,
div#mapwrapper:has(div#viewfedbutton1:hover) > div#maprotator > div.hex.nonfedtitanium1:before,
div#mapwrapper:has(div#viewfedbutton2:hover) > div#maprotator > div.hex.nonfedtitanium2:before,
div#mapwrapper:has(div#viewfedbutton3:hover) > div#maprotator > div.hex.nonfedtitanium3:before,
div#mapwrapper:has(div#viewfedbutton0:hover) > div#maprotator > div.hex.nonfedice0:before,
div#mapwrapper:has(div#viewfedbutton1:hover) > div#maprotator > div.hex.nonfedice1:before,
div#mapwrapper:has(div#viewfedbutton2:hover) > div#maprotator > div.hex.nonfedice2:before,
div#mapwrapper:has(div#viewfedbutton3:hover) > div#maprotator > div.hex.nonfedice3:before,
div#mapwrapper:has(div#viewfedbutton0:hover) > div#maprotator > div.hex.nonfedearth0:before,
div#mapwrapper:has(div#viewfedbutton1:hover) > div#maprotator > div.hex.nonfedearth1:before,
div#mapwrapper:has(div#viewfedbutton2:hover) > div#maprotator > div.hex.nonfedearth2:before,
div#mapwrapper:has(div#viewfedbutton3:hover) > div#maprotator > div.hex.nonfedearth3:before,
div#mapwrapper:has(div#viewfedbutton0:hover) > div#maprotator > div.hex.nonfedasteroid0:before,
div#mapwrapper:has(div#viewfedbutton1:hover) > div#maprotator > div.hex.nonfedasteroid1:before,
div#mapwrapper:has(div#viewfedbutton2:hover) > div#maprotator > div.hex.nonfedasteroid2:before,
div#mapwrapper:has(div#viewfedbutton3:hover) > div#maprotator > div.hex.nonfedasteroid3:before,
div#mapwrapper:has(div#viewfedbutton0:hover) > div#maprotator > div.hex.nonfedproto0:before,
div#mapwrapper:has(div#viewfedbutton1:hover) > div#maprotator > div.hex.nonfedproto1:before,
div#mapwrapper:has(div#viewfedbutton2:hover) > div#maprotator > div.hex.nonfedproto2:before,
div#mapwrapper:has(div#viewfedbutton3:hover) > div#maprotator > div.hex.nonfedproto3:before
{ clip-path: polygon(50% 4%, 96% 27%, 96% 73%, 50% 96%, 4% 73%, 4% 27%); }

div#mapwrapper > div#maprotator > div.hex.federatingacid::before { background-color: red !important; }
div#mapwrapper > div#maprotator > div.hex.federatingvolcano::before { background-color: orange !important; }
div#mapwrapper > div#maprotator > div.hex.federatingdesert::before { background-color: yellow !important; }
div#mapwrapper > div#maprotator > div.hex.federatingswamp:not(:hover)::before { background-color: saddlebrown !important; }
div#mapwrapper > div#maprotator > div.hex.federatingtitanium::before { background-color: gray !important; }
div#mapwrapper > div#maprotator > div.hex.federatingice::before { background-color: white !important; }
div#mapwrapper > div#maprotator > div.hex.federatingearth::before { background-color: blue !important; }
div#mapwrapper > div#maprotator > div.hex.federatingasteroid::before { background-color: pink !important; }
div#mapwrapper > div#maprotator > div.hex.federatingproto::before { background-color: #78d8e2 !important; }


/* Show Sector Button */

div#mapwrapper > div#showsectorbutton {
  width: 152px;
  height: 40px;
  right: 10px;
  top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid white;
}
div#mapwrapper > div#showsectorbutton:hover,
div#mapwrapper.showsector > div#showsectorbutton { background-color: gray; }
div#mapwrapper > div#showsectorbutton > p { font-size: 16px; margin: 0; }
div#mapwrapper:has(div#showsectorbutton:hover) > div#maprotator > div.hex.sector1::before,
div#mapwrapper.showsector > div#maprotator > div.hex.sector1::before { background-color: #440000; }
div#mapwrapper:has(div#showsectorbutton:hover) > div#maprotator > div.hex.sector2::before,
div#mapwrapper.showsector > div#maprotator > div.hex.sector2::before { background-color: #442200; }
div#mapwrapper:has(div#showsectorbutton:hover) > div#maprotator > div.hex.sector3::before,
div#mapwrapper.showsector > div#maprotator > div.hex.sector3::before { background-color: #334400; }
div#mapwrapper:has(div#showsectorbutton:hover) > div#maprotator > div.hex.sector4::before,
div#mapwrapper.showsector > div#maprotator > div.hex.sector4::before { background-color: #114400; }
div#mapwrapper:has(div#showsectorbutton:hover) > div#maprotator > div.hex.sector5::before,
div#mapwrapper.showsector > div#maprotator > div.hex.sector5::before { background-color: #004422; }
div#mapwrapper:has(div#showsectorbutton:hover) > div#maprotator > div.hex.sector6::before,
div#mapwrapper.showsector > div#maprotator > div.hex.sector6::before { background-color: #004444; }
div#mapwrapper:has(div#showsectorbutton:hover) > div#maprotator > div.hex.sector7::before,
div#mapwrapper.showsector > div#maprotator > div.hex.sector7::before { background-color: #002244; }
div#mapwrapper:has(div#showsectorbutton:hover) > div#maprotator > div.hex.sector8::before,
div#mapwrapper.showsector > div#maprotator > div.hex.sector8::before { background-color: #110044; }
div#mapwrapper:has(div#showsectorbutton:hover) > div#maprotator > div.hex.sector9::before,
div#mapwrapper.showsector > div#maprotator > div.hex.sector9::before { background-color: #330044; }
div#mapwrapper:has(div#showsectorbutton:hover) > div#maprotator > div.hex.sector10::before,
div#mapwrapper.showsector > div#maprotator > div.hex.sector10::before { background-color: #440022; }
div#mapwrapper:has(div#showsectorbutton:hover) > div#maprotator > div.hex.interspace::before,
div#mapwrapper.showsector > div#maprotator > div.hex.interspace::before { background-color: black; }
div#mapwrapper:has(div#showsectorbutton:hover) > div#maprotator > div.hex.deepspacesector::before,
div#mapwrapper.showsector > div#maprotator > div.hex.deepspacesector::before { background-color: black; }

div#mapwrapper > div#deepspacesectorcount {
  width: 46px;
  height: 46px;
  right: 210px;
  top: 8px;
  display: none;
  justify-content: center;
  align-items: center;
  background-image: url('deepspacesectoricon.png');
  background-size: 32px;
  font-size: 16px;
  margin: 0;
}
div#mapwrapper:has(div#showsectorbutton:hover) > div#deepspacesectorcount,
div#mapwrapper.showsector > div#deepspacesectorcount { display: flex; }

div#mapwrapper > div#sectorcount {
  width: 46px;
  height: 46px;
  right: 168px;
  top: 8px;
  display: none;
  justify-content: center;
  align-items: center;
  background-image: url('sectoricon.png');
  background-size: 42px;
  font-size: 16px;
  margin: 0;
}
div#mapwrapper:has(div#showsectorbutton:hover) > div#sectorcount,
div#mapwrapper.showsector > div#sectorcount { display: flex; }


/* Burnt Gaiaformers */

div#mapwrapper > div#burntgaiaformerwrapper {
  right: 10px;
  bottom: 10px;
}
div#mapwrapper > div#burntgaiaformerwrapper > div.gaiaformer11 { right: 0px; bottom: 0px; }
div#mapwrapper > div#burntgaiaformerwrapper > div.gaiaformer12 { right: 0px; bottom: 20px; }
div#mapwrapper > div#burntgaiaformerwrapper > div.gaiaformer13 { right: 0px; bottom: 40px; }
div#mapwrapper > div#burntgaiaformerwrapper > div.gaiaformer21 { right: 40px; bottom: 0px; }
div#mapwrapper > div#burntgaiaformerwrapper > div.gaiaformer22 { right: 40px; bottom: 20px; }
div#mapwrapper > div#burntgaiaformerwrapper > div.gaiaformer23 { right: 40px; bottom: 40px; }
div#mapwrapper > div#burntgaiaformerwrapper > div.gaiaformer31 { right: 80px; bottom: 0px; }
div#mapwrapper > div#burntgaiaformerwrapper > div.gaiaformer32 { right: 80px; bottom: 20px; }
div#mapwrapper > div#burntgaiaformerwrapper > div.gaiaformer33 { right: 80px; bottom: 40px; }
div#mapwrapper > div#burntgaiaformerwrapper > div.gaiaformer41 { right: 120px; bottom: 0px; }
div#mapwrapper > div#burntgaiaformerwrapper > div.gaiaformer42 { right: 120px; bottom: 20px; }
div#mapwrapper > div#burntgaiaformerwrapper > div.gaiaformer43 { right: 120px; bottom: 40px; }