@font-face {
		font-family: "Born2bSporty";
		src: url("../fonts/born2bsporty-fs.regular.otf") format("opentype");
}

body {
	font-family: "Born2bSporty";
	background-color: #75BCE2;
	color: #AD1D15;
}

h1 {
	font-family: "Born2bSporty";
	margin: 1%;
	text-align: center;
	font-size: 4em;
	background: -webkit-linear-gradient(#AD2312, #AD1D15, #C86E66);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke-width: 0.005em;
	-webkit-text-stroke-color: #000000;
}

td a {
	width: 100%;
	display: block;
	text-align: center;
	cursor: pointer;
}

#main {
	background-color: #000000;
	position: relative;
	margin: 20px auto;
	margin-bottom: 80px;
	padding: 10px;
	width: -moz-fit-content;
	width: fit-content;
}
#main label {
	padding: 0px 3px;
}
#main td {
	text-align: right;
}

#tabs {
	position: absolute;
	height: 20px;
	margin-top: -28px;
	margin-left: -10px;
}

#equipmentBar {
	background-color: #181B26;
	color: #FFFFFF;
	text-align: left !important;
}
#equipmentBar div {
	background-color: #9927C0;
}

button {
	font-family: inherit;
	color: #FFFFFF;
	background-color: #3B4365;
}
button.selected {
	background-color: #000000;
}

#tabs button {
	border-radius: 0px 10px 0px 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	margin-left: -8px;
	padding-left: 13px;
	float: right;
}

#tabs:first-child {
	margin-left: -2px;
}

input {
	font-family: inherit;
	color: inherit;
}

th {
	font-weight: normal;
}

.header {
	background-color: #46A5D5;
	color: #000000;
}
.header input {
	background-color: #8b9bb4;
}

.Amber {
	background-color: #593A27;
	color: #DE6C00;
}
.Amber input,
.Amber .LocalizedLabel {
	background-color: #F3D200;
	color: #9D0F00;
}
.Amber::after {
	content: "";
	display: block;
	background: url("../img/Amber.png") no-repeat;
	width: 16px;
	height: 16px;
	float: right;
}

.Complete::after {
	content: "✅";
	display: block;
	float: right;
	font-size: 0.8em;
}

.Unobtained {
	opacity: 0.31415926;
}
.Unobtained::after {
	content: "❎";
	display: block;
	float: right;
	font-size: 0.8em;
}

.Group1::after {
	content: "1️⃣";
	display: block;
	float: right;
	font-size: 0.8em;
}

.Group2::after {
	content: "2️⃣";
	display: block;
	float: right;
	font-size: 0.8em;
}

.Group3::after {
	content: "3️⃣";
	display: block;
	float: right;
	font-size: 0.8em;
}

.Group4::after {
	content: "4️⃣";
	display: block;
	float: right;
	font-size: 0.8em;
}

.Group5::after {
	content: "5️⃣";
	display: block;
	float: right;
	font-size: 0.8em;
}

.Group6::after {
	content: "6️⃣";
	display: block;
	float: right;
	font-size: 0.8em;
}

.Group7::after {
	content: "7️⃣";
	display: block;
	float: right;
	font-size: 0.8em;
}

.Group8::after {
	content: "8️⃣";
	display: block;
	float: right;
	font-size: 0.8em;
}

.Group9::after {
	content: "9️⃣";
	display: block;
	float: right;
	font-size: 0.8em;
}

.Group0::after {
	content: "0️⃣";
	display: block;
	float: right;
	font-size: 0.8em;
}

.Medal::after {
	content: "";
	display: block;
	background: url("../img/Medal.png") no-repeat;
	width: 16px;
	height: 16px;
	float: right;
}
.Medal .LocalizedLabel,
.Medal input {
	background: #8b9bb4;
}

.Elixir {
	white-space: nowrap;
}

.Elixir::before {
	content: "";
	display: -webkit-box;
	background: url("../img/Elixir.png") no-repeat;
	width: 16px;
	height: 16px;
	float: left;
}

.Experience::after {
	content: "";
	display: block;
	background: url("../img/Experience.png") no-repeat;
	width: 16px;
	height: 16px;
	float: right;
}
.Experience .LocalizedLabel,
.Experience input {
	background: #8b9bb4;
}

.Critter {
	background-color: #638739;
	color: #224312;
}
.Critter th {
	background: url("../img/Critter.png");
	background-size: 100% 100%;
	color: #224312;
}
.Critter input {
	background-color: #A2E26E;
	float: left;
}
.Critter .LocalizedLabel {
	background-color: #A2E26E;
}

.Beast {
	background-color: #9E4935;
	color: #611912;
}
.Beast th {
	background: url("../img/Beast.png");
	background-size: 100% 100%;
	color: #611912;
}
.Beast input {
	background-color: #EF8036;
	float: left;
}
.Beast .LocalizedLabel {
	background-color: #EF8036;
}

.Flying {
	background-color: #A08033;
	color: #503512;
}
.Flying th {
	background: url("../img/Flying.png");
	background-size: 100% 100%;
	color: #503512;
}
.Flying input {
	background-color: #FFE659;
	float: left;
}
.Flying .LocalizedLabel {
	background-color: #FFE659;
}

.Aquatic {
	background-color: #35499E;
	color: #121961;
}
.Aquatic th {
	background: url("../img/Aquatic.png");
	background-size: 100% 100%;
	color: #121961;
}
.Aquatic input {
	background-color: #3680EF;
	float: left;
}
.Aquatic .LocalizedLabel {
	background-color: #3680EF;
}

.Feather::after {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	float: right;
}
.Critter .Feather::after {
	background: url("../img/Critter Feather.png") no-repeat;
}
.Beast .Feather::after {
	background: url("../img/Beast Feather.png") no-repeat;
}
.Flying .Feather::after {
	background: url("../img/Flying Feather.png") no-repeat;
}
.Aquatic .Feather::after {
	background: url("../img/Aquatic Feather.png") no-repeat;
}
.Critter.Feather::after {
	background: url("../img/Critter Feather.png") no-repeat;
}
.Beast.Feather::after {
	background: url("../img/Beast Feather.png") no-repeat;
}
.Flying.Feather::after {
	background: url("../img/Flying Feather.png") no-repeat;
}
.Aquatic.Feather::after {
	background: url("../img/Aquatic Feather.png") no-repeat;
}

.Legendary {
	background-color: #FFBB00;
	color: #A27700;
}
.Legendary input {
	background-color: #FFFB99;
}

.Epic {
	background-color: #9717FD;
	color: #5F0FA0;
}
.Epic input {
	background-color: #FFCCEE;
}

.Rare {
	background-color: #3372FA;
	color: #214AA3;
}
.Rare input {
	background-color: #CCFFED;
}

td.Water,
td.Mage {
	background-color: #66AECC;
	color: #12607F;
}
td.Water input,
td.Mage input,
td.Water .LocalizedLabel {
	background-color: #65E5FF;
}

th.Water::before {
	content: " ";
	background: url("../img/Water.png") no-repeat;
	display: block;
	width: 16px;
	height: 16px;
	float: left;
}
th.Mage::after {
	content: " ";
	background: url("../img/Mage.png") no-repeat;
	display: block;
	width: 16px;
	height: 16px;
	float: right;
}

td.Earth,
td.Assassin {
	background-color: #8CB234;
	color: #164C2F;
}
td.Earth input,
td.Assassin input,
td.Earth .LocalizedLabel  {
	background-color: #E3FF99;
}

th.Earth::before {
	content: " ";
	background: url("../img/Earth.png") no-repeat;
	display: block;
	width: 16px;
	height: 16px;
	float: left;
}
th.Assassin::after {
	content: " ";
	background: url("../img/Assassin.png") no-repeat;
	display: block;
	width: 16px;
	height: 16px;
	float: right;
}

td.Fire,
td.Warrior {
	background-color: #FF6D04;
	color: #A5001E;
}
td.Fire input,
td.Warrior input,
td.Fire .LocalizedLabel  {
	background-color: #FFCA99;
}

th.Fire::before {
	content: " ";
	background: url("../img/Fire.png") no-repeat;
	display: block;
	width: 16px;
	height: 16px;
	float: left;
}
th.Warrior::after {
	content: " ";
	background: url("../img/Warrior.png") no-repeat;
	display: block;
	width: 16px;
	height: 16px;
	float: right;
}

td.Wind,
td.Support {
	background-color: #E5BA00;
	color: #B27400;
}
td.Wind input,
td.Support input,
td.Wind .LocalizedLabel  {
	background-color: #FFFDCC;
}

th.Wind::before {
	content: " ";
	background: url("../img/Wind.png") no-repeat;
	display: block;
	width: 16px;
	height: 16px;
	float: left;
}
th.Support::after {
	content: " ";
	background: url("../img/Support.png") no-repeat;
	display: block;
	width: 16px;
	height: 16px;
	float: right;
}

.Dust::after {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	float: right;
}
.Water.Dust::after {
	background: url("../img/Water Dust.png") no-repeat;
}
.Earth.Dust::after {
	background: url("../img/Earth Dust.png") no-repeat;
}
.Fire.Dust::after {
	background: url("../img/Fire Dust.png") no-repeat;
}
.Wind.Dust::after {
	background: url("../img/Wind Dust.png") no-repeat;
}

.Equipment {
	background-color: #593A27;
	color: #DE6C00;
}
.Equipment input {
	background-color: #181B26;
	color: #94BCC4;
	width: 80%;
}

.S0 {
	background-image: url("../img/S0.png");
}
.S1 {
	background-image: url("../img/S1.png");
}
.S2 {
	background-image: url("../img/S2.png");
}
.S3 {
	background-image: url("../img/S3.png");
}
.S4 {
	background-image: url("../img/S4.png");
}
.S5 {
	background-image: url("../img/S5.png");
}
.S6 {
	background-image: url("../img/S6.png");
}
.S7 {
	background-image: url("../img/S7.png");
}
.S8 {
	background-image: url("../img/S8.png");
}
.S9 {
	background-image: url("../img/S9.png");
}
.S10 {
	background-image: url("../img/S10.png");
}
.S11 {
	background-image: url("../img/S11.png");
}
.S12 {
	background-image: url("../img/S12.png");
}
.S0,
.S1,
.S2,
.S3,
.S4,
.S5,
.S6,
.S7,
.S8,
.S9,
.S10,
.S11,
.S12 {
	color: rgba(0, 0, 0, 0) !important;
	background-size: contain;
	background-position-y: center;
	background-repeat: no-repeat;
}
.S0:hover,
.S1:hover,
.S2:hover,
.S3:hover,
.S4:hover,
.S5:hover,
.S6:hover,
.S7:hover,
.S8:hover,
.S9:hover,
.S10:hover,
.S11:hover,
.S12:hover {
	color: inherit !important;
	background-image: url("../img/S0.png");
}
.S0:focus,
.S1:focus,
.S2:focus,
.S3:focus,
.S4:focus,
.S5:focus,
.S6:focus,
.S7:focus,
.S8:focus,
.S9:focus,
.S10:focus,
.S11:focus,
.S12:focus {
	color: inherit !important;
	background-image: url("../img/S0.png");
}

footer {
	text-align: center;
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 4em;
	background-color: #46A5D5;
}
footer span {
	display: inline-block;
	vertical-align: middle;
	line-height: normal;
}

#tintTable td {
	text-align: left;
}

.Cell {
	position: relative;
	display: inline-block;
}
.Cell input {
	display: block;
}

.LocalizedLabel {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	text-align: left;
	pointer-events: none;
	border-width: 2px;
	border-style: inset;
	border-color: light-dark(#767676, #858585);
	font-size: smaller;
	text-indent: 2px;
}

.Cell input:hover + .LocalizedLabel,
.Cell input:focus + .LocalizedLabel,
.Cell input:placeholder-shown + .LocalizedLabel {
	opacity: 0;
}

#noFunButton {
	position: absolute;
}

#tintTable tr:not(.header) {
    background-color: #000000;
}

/* No Fun Mode */

body.noFunMode {
	font-family: "Trebuchet MS black";
}

.noFunMode tr:nth-child(even) {
	color: #000000;
	background-color: #FFFFFF;
}

.noFunMode tr:nth-child(odd) {
	color: #000000;
	background-color: #AAAAAA;
}

.noFunMode td {
	color: inherit;
	background-color: inherit;
}

.noFunMode input {
	color: inherit;
	background-color: inherit !important;
}

.noFunMode tr.header {
	background-color: #666666;
}

@media (max-width: 768px) {
	body h1 {
		font-size: 3em;
	}

	table {
		font-size: 0.8em;
	}

	.noFunMode table {
		font-size: 0.7em;
	}
}