img {
	vertical-align: text-top;
}

.numeric {
	text-align: center;
}

table.inventory {
	border-collapse: collapse;
	border: 1px solid;
	position: relative;
}

table.inventory td, table.inventory th {
	border: 1px solid;
	padding: 0.25em;
}

table.inventory th {
	background-color: #CCC;
	position: sticky;
	top: 0; /* Don't forget this, required for the stickiness */
}

table.inventory td {
	text-align: center;
}

table.inventory td img {
	max-width: 48px;
	max-height: 60px;
}

table.inventory th img {
	border-radius: 50%;
	width: 24px;
	height: 24px;
}

th img[alt="Crit DMG"] {
	background: red;
}

th img[alt="ATK"] {
	background: green;
}

th img[alt="Magic ATK"] {
	background: blue;
}

/* elements */
.light {
	background: LightGoldenrodYellow;
}

.dark {
	background: thistle;
}

.fire {
	background: peachpuff;
}

.water {
	background: lightblue;
}

.wind {
	background: #C7E2AA;
}

/* element toggle */
input {
	position: relative;
	z-index: 1;
}

label {
	padding: 0.5em 0.5em 0.5em 1.75em;
	border-radius: 0.25em;
	position: relative;
	left: -1.5em;
}

input#fire:checked ~ table.roster tbody:not(.fire) {
	display: none;
}

input#wind:checked ~ table.roster tbody:not(.wind) {
	display: none;
}

input#water:checked ~ table.roster tbody:not(.water) {
	display: none;
}

input#light:checked ~ table.roster tbody:not(.light) {
	display: none;
}

input#dark:checked ~ table.roster tbody:not(.dark) {
	display: none;
}

input#unengraved:checked ~ table.roster tbody:not([data-awakening=""]) {
	display: none;
}

input#engraved:checked ~ table.roster tbody:not([data-awakening="engraved"]) {
	display: none;
}

input#awakened:checked ~ table.roster tbody:not([data-awakening="awakened"]) {
	display: none;
}

input#none:checked ~ table.roster tbody:not([data-exclusive=""]) {
	display: none;
}

input#no-sr:checked ~ table.roster tbody[data-exclusive~="SR"] {
	display: none;
}

input#sr:checked ~ table.roster tbody:not([data-exclusive~="SR"]) {
	display: none;
}

input#no-ur:checked ~ table.roster tbody[data-exclusive~="UR"] {
	display: none;
}

input#ur:checked ~ table.roster tbody:not([data-exclusive~="UR"]) {
	display: none;
}

/***************** SORT BY REFINEMENT ******************/

input#sort-refinement:checked ~ table.roster tbody[data-exclusive="SR"] {
	order: 2;
}

input#sort-refinement:checked ~ table.roster tbody[data-refinement="16"] {
	order: 16;
}

input#sort-refinement:checked ~ table.roster tbody[data-refinement="17"] {
	order: 17;
}

input#sort-refinement:checked ~ table.roster tbody[data-refinement="18"] {
	order: 18;
}

input#sort-refinement:checked ~ table.roster tbody[data-refinement="19"] {
	order: 19;
}

input#sort-refinement:checked ~ table.roster tbody[data-refinement="20"] {
	order: 20;
}

input#sort-refinement:checked ~ table.roster tbody[data-refinement="21"] {
	order: 21;
}

input#sort-refinement:checked ~ table.roster tbody[data-refinement="22"] {
	order: 22;
}

input#sort-refinement:checked ~ table.roster tbody[data-refinement="23"] {
	order: 23;
}

input#sort-refinement:checked ~ table.roster tbody[data-refinement="24"] {
	order: 24;
}


/***************** SORT BY UPGRADES ******************/

input#sort-upgrades:checked ~ table.roster tbody[data-costumes="1"] {
	order: 1;
}

input#sort-upgrades:checked ~ table.roster tbody[data-costumes="1"][data-max-costumes="1"] {
	order: 2;
}

input#sort-upgrades:checked ~ table.roster tbody[data-costumes="2"] {
	order: 10;
}

input#sort-upgrades:checked ~ table.roster tbody[data-costumes="2"][data-max-costumes="1"] {
	order: 11;
}

input#sort-upgrades:checked ~ table.roster tbody[data-costumes="2"][data-max-costumes="2"] {
	order: 12;
}

input#sort-upgrades:checked ~ table.roster tbody[data-costumes="3"] {
	order: 20;
}

input#sort-upgrades:checked ~ table.roster tbody[data-costumes="3"][data-max-costumes="1"] {
	order: 21;
}

input#sort-upgrades:checked ~ table.roster tbody[data-costumes="3"][data-max-costumes="2"] {
	order: 22;
}

input#sort-upgrades:checked ~ table.roster tbody[data-costumes="3"][data-max-costumes="3"] {
	order: 23;
}

input#sort-upgrades:checked ~ table.roster tbody[data-costumes="4"] {
	order: 30;
}

input#sort-upgrades:checked ~ table.roster tbody[data-costumes="4"][data-max-costumes="1"] {
	order: 31;
}

input#sort-upgrades:checked ~ table.roster tbody[data-costumes="4"][data-max-costumes="2"] {
	order: 32;
}

input#sort-upgrades:checked ~ table.roster tbody[data-costumes="4"][data-max-costumes="3"] {
	order: 33;
}

input#sort-upgrades:checked ~ table.roster tbody[data-costumes="4"][data-max-costumes="42"] {
	order: 34;
}

input#sort-upgrades:checked ~ table.roster tbody[data-costumes="5"] {
	order: 40;
}

input#sort-upgrades:checked ~ table.roster tbody[data-costumes="5"][data-max-costumes="1"] {
	order: 41;
}

input#sort-upgrades:checked ~ table.roster tbody[data-costumes="5"][data-max-costumes="2"] {
	order: 42;
}

input#sort-upgrades:checked ~ table.roster tbody[data-costumes="5"][data-max-costumes="3"] {
	order: 43;
}

input#sort-upgrades:checked ~ table.roster tbody[data-costumes="5"][data-max-costumes="4"] {
	order: 44;
}

input#sort-upgrades:checked ~ table.roster tbody[data-costumes="5"][data-max-costumes="5"] {
	order: 45;
}

input#sort-upgrades:checked ~ table.roster tbody[data-costumes="6"] {
	order: 50;
}

input#sort-upgrades:checked ~ table.roster tbody[data-costumes="6"][data-max-costumes="1"] {
	order: 51;
}

input#sort-upgrades:checked ~ table.roster tbody[data-costumes="6"][data-max-costumes="2"] {
	order: 52;
}

input#sort-upgrades:checked ~ table.roster tbody[data-costumes="6"][data-max-costumes="3"] {
	order: 53;
}

input#sort-upgrades:checked ~ table.roster tbody[data-costumes="6"][data-max-costumes="4"] {
	order: 54;
}

input#sort-upgrades:checked ~ table.roster tbody[data-costumes="6"][data-max-costumes="5"] {
	order: 55;
}

input#sort-upgrades:checked ~ table.roster tbody[data-costumes="6"][data-max-costumes="6"] {
	order: 56;
}

/*** more sort ***/
table.costumes tbody {
	display: flex;
	flex-flow: row wrap;
}

input#sort2-upgrades:checked ~ table.costumes tr.plus-0 {
	order: 2;
}

input#sort2-upgrades:checked ~ table.costumes tr.plus-1 {
	order: 3;
}

input#sort2-upgrades:checked ~ table.costumes tr.plus-2 {
	order: 4;
}

input#sort2-upgrades:checked ~ table.costumes tr.plus-3 {
	order: 5;
}

input#sort2-upgrades:checked ~ table.costumes tr.plus-4 {
	order: 6;
}

input#sort2-upgrades:checked ~ table.costumes tr.plus-5 {
	order: 7;
}

input#limited-non-limited:checked ~ table.costumes tr:not([data-limited="f"]) {
	display: none;
}

input#limited-limited:checked ~ table.costumes tr:not([data-limited="t"]) {
	display: none;
}

/*** layout ***/

tr[data-limited="t"] td.portrait {
	position: relative;
}

tr[data-limited="t"] td.portrait:before {
	background: url('images/icons/limited.png') no-repeat; /* 161 x 64 */
	background-size: contain;
	content: '';
	display: inline-block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 94px;
	height: 25px;
}

/* upgrades */
td.upgrades {
	display: inline-block;
	box-sizing: border-box;
	background-repeat: no-repeat;
	background-size: contain; /* 94 x 74 */
	padding-left: 55px;
	overflow: hidden;
	height: 45px;
	width: 55px;
	position: absolute;
	top: 0px;
	right: 0px;
	z-index: 1;
}
/*
.plus-0 .upgrades {
	background: url('images/icons/upgrade-0.png');
}
*/
.plus-1 td.upgrades {
	background-image: url('images/icons/upgrade-1.png');
}

.plus-2 td.upgrades {
	background-image: url('images/icons/upgrade-2.png');
}

.plus-3 td.upgrades {
	background-image: url('images/icons/upgrade-3.png');
}

.plus-4 td.upgrades {
	background-image: url('images/icons/upgrade-4.png');
}

.plus-5 td.upgrades {
	background-image: url('images/icons/upgrade-5.png');
}

.plus- {
	opacity: 0.4;
}

/* potentials */
td.potentials {
	display: inline-block;
	box-sizing: border-box;
	background-size: contain; /* 36 x 36 */
	padding-left: 30px;
	overflow: hidden;
	height: 30px;
	width: 30px;
	position: absolute;
	bottom: 5px;
	right: 5px;
	z-index: 1;
}

.potentials-0 td.potentials {
	background-image: url('images/icons/potentials-0.png');
}

.potentials-1 td.potentials {
	background-image: url('images/icons/potentials-1.png');
}

.potentials-2 td.potentials {
	background-image: url('images/icons/potentials-2.png');
}

.potentials-3 td.potentials {
	background-image: url('images/icons/potentials-3.png');
}

table {
	margin-top: 1em;
}

input#horizontal:checked ~ table.roster {
	flex-flow: row;
}

input#horizontal:checked ~ table.roster tr {
	display: block;
}

input#horizontal:checked ~ table.roster tr:first-child {
	margin-bottom: 1em;
	max-width: 100px;
	white-space: nowrap;
	overflow: hidden;
	text-align: center;
}

input#horizontal:checked ~ table.roster tr:first-child th {
	display: block;
	text-align: center;
}

.roster {
	display: flex;
	flex-flow: column;
}

.roster tbody {
	display: block;
}

.roster caption,
.roster thead,
table.costumes thead {
	display: none;
}

.roster tbody tr + tr,
table.costumes tr {
	display: inline-block;
	position: relative;
}

/* character name */
.roster .collab th {
	font-style: italic;
}

.roster .has-title th {
	color: goldenrod;
	text-shadow: -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, 1px 1px 0 #333; /* text outline */
}
/*
.roster th:after {
	display: inline-block;
	content: '';
	width: 30px;
	height: 30px;
}

.roster tbody.physical th:after {
	background: url(images/icons/damage-physical2.png);
}

.roster tbody.magic th:after {
	background: url(images/icons/damage-magic2.png);
}
*/
.roster tbody.physical {
	background-image: url(images/icons/damage-physical2.png);
	background-repeat: no-repeat;
	background-position: left 1em;
}

.roster tbody.magic {
	background-image: url(images/icons/damage-magic2.png);
	background-repeat: no-repeat;
	background-position: left 1em;
}

.roster td.costume,
table.costumes td.costume {
	display: none;
}

tr.exclusive {
	min-width: 75px;
	text-align: center;
	flex: 0 0 75px;
}

td.exclusive-,
td.exclusive-UR,
td.exclusive-SR {
	display: block;
	box-sizing: border-box;
	/*padding-left: 100%;*/
	text-indent: -10em;
	width: 63px; /* 126 */
	min-height: 47px; /* 93 */
	overflow: hidden;
	max-width: 63px;
	margin: 0 auto;
}

td.exclusive-UR {
	background: url('images/icons/gear-Ur.png') no-repeat;
	background-size: 63px;
}

td.exclusive-SR {
	background: url('images/icons/gear-Sr.png') no-repeat;
	background-size: 63px;
}

tr[data-refinement]:after {
	content: attr(data-refinement);
	display: block;
	position: absolute;
	width: 50px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	color: white;
	font-weight: bold;
	top: -25px;
	left: 35px;
}

input#horizontal:checked ~ table.roster tr[data-refinement]:after {
	left: 50px;
}

tr[data-refinement="12"]:after,
tr[data-refinement="13"]:after,
tr[data-refinement="14"]:after,
tr[data-refinement="15"]:after,
tr[data-refinement="16"]:after {
	background: url(images/icons/refinement-r.png) no-repeat;
}

tr[data-refinement="17"]:after,
tr[data-refinement="18"]:after,
tr[data-refinement="19"]:after,
tr[data-refinement="20"]:after {
	background: url(images/icons/refinement-sr.png) no-repeat;
}

tr[data-refinement="21"]:after,
tr[data-refinement="22"]:after,
tr[data-refinement="23"]:after,
tr[data-refinement="24"]:after {
	background: url(images/icons/refinement-ur.png) no-repeat;
}

td.awakening {
	display: block;
	min-height: 1.5em;
}