styles.css

body{
	padding: 25px;
	padding-top: 0px;
	color: lightgray;
	background-color: #1f272e;
}
.title {
	color: #f1c01c;
}

.feedback-container {
  display: grid;
  grid-template-columns: 244px 244px 244px;
  width: 734px;
}

#feedback-warning {
	color: red;
	font-weight: bold;
	white-space: pre-wrap; /* Display single whitespace as empty line, but also still auto warp. */
}
#feedback-hint {
	color: orange;
}

.red {
	color: #aa0000;
}
.green {
	color: green;
}

.reactor-container {
	display: inline-block; /* For auto minimal width. */
	background: gray; /* Should not even be visible? */
	overflow-y: visible; /* Default, but just to make sure to not cut the dropdown off with a scrollbar. */
	position: relative; /* Defines the area for the absolute dropdown. */
	line-height: 60%; /* Vertical spacing between each button row. */
	float: left; /* Allow other elements on the right side. */
}
.cell {
	width: 78px;
	height: 78px;
	float: left; /* Let the dropdown overlay the cell button. */
	background: lightgray;
	cursor: pointer;
	border: 2px solid black;
}

.cell:disabled {
	pointer-events: none;
	background: #313538;
	border-color: #272a2c;
}
.cell-overheat {
	border-color: red;
}
#debug {
	clear: both; /* clear the float of reactor container, to be displayed at the bottom */
}
/*.cell:hover, .cell:focus {
	background-color: #2980B9;
}*/

#saves-container {
	overflow: hidden; /* Use the height of the floating children. */
}

#saves-container button {
	min-width: 110px; /* Make Load and Delete button same width. */
}

#move-saves button  {
	min-width: initial;
}

#saves {
	width: 270px;
	height: 100px;
	float: left;
	overflow: auto; /* Scrollbar on both sides, only if needed. */
}

#saves option {
	border-left: 2px solid lightgreen;
}

.cell-container {
	position: relative; /* Define the position, later used for the dropdown. */
	display: inline-block; /* Make the div only as wide as needed, instead over the whole line. */
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
	display: none;
	position: absolute; /* Allows overlaying. */
	width: 250px;
	box-shadow: 0px 8px 16px 8px rgba(0,0,0,0.2);
	z-index: 1; /* Higher overlay priority. */
	margin: 5px; /* To not exactly overlay the cell button, but rather shiftet a bit to the bottom right. */
}

.dropdown-content button, #quick-build-button {
	width: 50px;
	height: 50px;
	cursor: pointer;
	float: left; /* Some alignment problems with mutliple line buttons, so let them float to the left. */
	padding: 0px; /* Heat Duct chars had some problems. */
	border: 2px solid black;
	margin: 0px !important; /* To override the side options style, for quick-build dropdown. */
	position: relative; /* To be able to align the button content absolute. */
}

.side-options {
	display: inline-block; /* Let the div start where it visibly starts. */
	margin: 10px; /* Some space to the reactor. */
	width: 400px;
}
.side-options button, select, input { /* Some spacing between the elements. Probably not a clean way. */
	margin-bottom: 5px;
	margin-right: 5px;
}

.popup-window {
	display: none;
	position: absolute;
	color: black;
	top: 40%;
	left: 25%;
	width: 400px;
	border: 2px solid black;
	box-shadow: 0px 8px 16px 8px rgba(0,0,0,0.2);
	background-color: #6f6f6f;
	padding: 20px;
	z-index: 2; /* Higher overlay priority. */
}

.top-right {
	position: absolute;
	right: 0px;
	top: 0px;
}

#export-field {
	width: 100%;
	color: black;
}

.table-3 {
	display: inline-grid;
	grid-template-columns: auto auto auto;
}

#move-warn {
	max-width: 150px;
}

.side-flex-center {
	display: flex;
	align-items: center;
	padding-left: 10px; /* Flex somehow ignores the margin of side-options. */
}

.footer {
	color: gray;
}
.footer a {
	color: gray;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
	display: block;
}

/* Reactor components
	 ========================================================================== */

.c-empty {
	background-color: #dddddd;
}
.c-empty::before {
	content: "";
}
.c-i-empty {
	background-image: url("images/empty.png");
	background-size: cover; /* Auto resize */
}
.c-fan {
	background-color: #2d3f62;
}
.c-fan::before {
	content: "\002622";
	font-size: 400%;
	line-height: 100%; /* Overwrite change from font size. */
	/* Keeps the content centered, regardless of font size or container size. */
	position: absolute; 
	transform: translate(-50%, -51%);
}
.c-i-fan {
	background-image: url("images/fan.png");
	background-size: cover;
}
.c-he {
	background-color: #c04646;
}
.c-he::before {
	content: "HE";
}
.c-i-he {
	background-image: url("images/he.png");
	background-size: cover;
}
.c-dhe {
	background-color: #c04646;
}
.c-dhe::before {
	content: "DHE";
}
.c-i-dhe {
	background-image: url("images/dhe.png");
	background-size: cover;
}
.c-qhe {
	background-color: #c04646;
}
.c-qhe::before {
	content: "QHE";
}
.c-i-qhe {
	background-image: url("images/qhe.png");
	background-size: cover;
}
.c-e {
	background-color: #54be56;
}
.c-e::before {
	content: "E";
}
.c-i-e {
	background-image: url("images/e.png");
	background-size: cover;
}
.c-de {
	background-color: #54be56;
}
.c-de::before {
	content: "DE";
}
.c-i-de {
	background-image: url("images/de.png");
	background-size: cover;
}
.c-qe {
	background-color: #54be56;
}
.c-qe::before {
	content: "QE";
}
.c-i-qe {
	background-image: url("images/qe.png");
	background-size: cover;
}
.c-mo {
	background-color: #4d53bf;
}
.c-mo::before {
	content: "MO";
}
.c-i-mo {
	background-image: url("images/mo.png");
	background-size: cover;
}
.c-dmo {
	background-color: #4d53bf;
}
.c-dmo::before {
	content: "DMO";
}
.c-i-dmo {
	background-image: url("images/dmo.png");
	background-size: cover;
}
.c-qmo {
	background-color: #4d53bf;
}
.c-qmo::before {
	content: "QMO";
}
.c-i-qmo {
	background-image: url("images/qmo.png");
	background-size: cover;
}
.c-bs {
	background-color: #815a2b;
}
.c-bs::before {
	content: "\01F50B";
}
.c-i-bs {
	background-image: url("images/bs.png");
	background-size: cover;
}
.c-bl {
	background-color: #815a2b;
}
.c-bl::before {
	content: "\01F50B\01F50B";
}
.c-i-bl {
	background-image: url("images/bl.png");
	background-size: cover;
}
.c-bxl {
	background-color: #815a2b;
}
.c-bxl::before {
	content: "\01F50B\01F50B\a\01F50B\01F50B";
	white-space: pre; /* Make new line with \a */
}
.c-i-bxl {
	background-image: url("images/bxl.png");
	background-size: cover;
}
.c-hd {
	background-color: #a3b6c5;
}
.c-hd::before {
	content: "\002551\a\002550\002550\00256C\002550\002550\a\002551";
	white-space: pre; /* Make new line with \a */
	font-size: 90%;
}
.c-i-hd {
	background-image: url("images/hd.png");
	background-size: cover;
}
.c-cb {
	background-color: #d17534;
}
.c-cb::before {
	content: "\0025B2\a\0025BC";
	white-space: pre; /* Make new line with \a */
	font-size: 130%;
}
.c-i-cb {
	background-image: url("images/cb.png");
	background-size: cover;
}
.c-pb {
	background-color: #8ca0cb;
}
.c-pb::before {
	content: "\0025C0\000020\000020\000020\000020\000020\000020\a\0025BC";
	white-space: pre; /* Make new line with \a */
	font-size: 130%;
	line-height: 100%; /* Overwrite change from font size. */
}
.c-i-pb {
	background-image: url("images/pb.png");
	background-size: cover;
}
.c-sb {
	background-color: #b1b6b6;
}
.c-sb::before {
	content: "\0025B2\a\000020\000020\000020\000020\000020\000020\0025B6";
	white-space: pre; /* Make new line with \a */
	font-size: 130%;
	line-height: 90%;
}
.c-i-sb {
	background-image: url("images/sb.png");
	background-size: cover;
}
.c-gb {
	background-color: #dab249;
}
.c-gb::before {
	content: "\0025E4\000020\0025E5\a\0025E3\000020\0025E2";
	white-space: pre; /* Make new line with \a */
	font-size: 130%;
	line-height: 110%; /* Overwrite change from font size. */
}
.c-i-gb {
	background-image: url("images/gb.png");
	background-size: cover;
}
.c-cb1 {
	background-color: #d5e263;
}
.c-cb1::before {
	content: "CB1";
}
.c-i-cb1 {
	background-image: url("images/cb1.png");
	background-size: cover;
}
.c-cb2 {
	background-color: #d5e263;
}
.c-cb2::before {
	content: "CB2";
}
.c-i-cb2 {
	background-image: url("images/cb2.png");
	background-size: cover;
}
.c-cb3 {
	background-color: #d5e263;
}
.c-cb3::before {
	content: "CB3";
}
.c-i-cb3 {
	background-image: url("images/cb3.png");
	background-size: cover;
}
.c-pp {
	background-color: #9791a3;
}
.c-pp::before {
	content: "PP";
}
.c-i-pp {
	background-image: url("images/pp.png");
	background-size: cover;
}
.c-dpp {
	background-color: #9791a3;
}
.c-dpp::before {
	content: "DPP";
}
.c-i-dpp {
	background-image: url("images/dpp.png");
	background-size: cover;
}
.c-qpp {
	background-color: #9791a3;
}
.c-qpp::before {
	content: "QPP";
}
.c-i-qpp {
	background-image: url("images/qpp.png");
	background-size: cover;
}
.c-rtg {
	background-color: #a14e70;
}
.c-rtg::before {
	content: "RTG";
}
.c-i-rtg {
	background-image: url("images/rtg.png");
	background-size: cover;
}
.c-eb1 {
	background-color: #57a1b3;
}
.c-eb1::before {
	content: "EB1";
}
.c-i-eb1 {
	background-image: url("images/eb1.png");
	background-size: cover;
}
.c-eb2 {
	background-color: #57a1b3;
}
.c-eb2::before {
	content: "EB2";
}
.c-i-eb2 {
	background-image: url("images/eb2.png");
	background-size: cover;
}
.c-eb3 {
	background-color: #57a1b3;
}
.c-eb3::before {
	content: "EB3";
}
.c-i-eb3 {
	background-image: url("images/eb3.png");
	background-size: cover;
}