/* Error Alert */

div#alertwrapper {
  width: 400px;
  height: 120px;
  border-radius: 10px;
  padding: 20px;
  left: calc(50vw - 220px);
  top: 320px;
  background-color: white;
  color: black;
  text-overflow: clip;
  z-index: 10;
  font-size: 30px;
  justify-content: center;
  align-items: center;
}
div#alertwrapper:not(.disappear) { display: none; }
@keyframes disappear {
  0% { opacity:1; display: flex; }
  50% { opacity:1; display: flex; }
  100% { opacity:0; display: none; }
}
div#alertwrapper.disappear {
  animation: 2.5s disappear ease-in forwards;
}
div#alertwrapper.forever {
  opacity: 1;
  display: flex;
}

/* Upgrade from TS or RL */

div#upgradefromTSwrapper {
  left: 500px;
  top: 300px;
  width: 100px;
  height: auto;
  border: 1px solid white;
  background-color: black;
  z-index: 2;
}
div#upgradefromTSwrapper > div#TStoRL {
  position: relative;
  width: 100%;
  height: 50px;
  background-image: url('RL.png');
  background-size: 35%;
}
div#upgradefromTSwrapper > div#TStoPI {
  position: relative;
  width: 100%;
  height: 50px;
  top: 50%;
  background-image: url('PI.png');
  background-size: 50%;
}
div#upgradefromTSwrapper > div#TStokA {
  position: relative;
  width: 100%;
  height: 50px;
  background-image: url('A.png');
  background-size: 38%;
  background-position: 65% center;
}
div#upgradefromTSwrapper > div#TStoqA {
  position: relative;
  width: 100%;
  height: 50px;
  background-image: url('A.png');
  background-size: 38%;
  background-position: 65% center;
}
div#upgradefromTSwrapper > div#TStoRL:hover { background-color: gray; }
div#upgradefromTSwrapper > div#TStoPI:hover { background-color: gray; }
div#upgradefromTSwrapper > div#TStokA:hover { background-color: gray; }
div#upgradefromTSwrapper > div#TStokA > div.knowledge { top: 5px; left: 20px; }
div#upgradefromTSwrapper > div#TStoqA:hover { background-color: gray; }
div#upgradefromTSwrapper > div#TStoqA > div.qic { top: 5px; left: 20px; }

div#upgradefromRLwrapper {
  left: 500px;
  top: 300px;
  width: 100px;
  height: 100px;
  border: 1px solid white;
  background-color: black;
  z-index: 2;
}
div#upgradefromRLwrapper > div#RLtokA {
  width: 100%;
  height: 50%;
  background-image: url('A.png');
  background-size: 38%;
  background-position: 65% center;
}
div#upgradefromRLwrapper > div#RLtoqA {
  width: 100%;
  height: 50%;
  top: 50%;
  background-image: url('A.png');
  background-size: 38%;
  background-position: 65% center;
}
div#upgradefromRLwrapper > div#RLtokA:hover { background-color: gray; }
div#upgradefromRLwrapper > div#RLtokA > div.knowledge { top: 5px; left: 20px; }
div#upgradefromRLwrapper > div#RLtoqA:hover { background-color: gray; }
div#upgradefromRLwrapper > div#RLtoqA > div.qic { top: 5px; left: 20px; }
div#upgradefromRLwrapper > div#RLtoqA > div.credit { top: 5px; left: 20px; }