html {
	font-family: 'Arial', sans-serif;
	font-weight: 400;
	background-color: black;
	color: white;
	direction: ltr;
}

/* If the screen size is 601px wide or more, do these */
@media screen and (min-width: 601px) {
	p {
		color: white;
		font-size: 16px;
		clear: both;
	}

	button {
		background-color: Transparent;
		border-radius: 100px;
		border: 2px solid white;
		outline: 0;
		display: inline-block;
		cursor: pointer;
		color: white;
		font-size: 16px;
		padding: 10px 15px;
		text-decoration: none;
		margin-right: 0.333em;
		margin-bottom: 0.333em;
	}

	td {
		border: none;
		padding: 0 5px;
	}

	.num {
		color: darkgray;
		font-size: 25px;
	}

	.name {
		color: darkgray;
		font-size: 14px;
	}

	.credit {
		color: darkgray;
		font-size: 18px;
	}

	.history {
		float: left;
		margin-right: 0.25em;
		padding-left: 0.25em;
		padding-right: 0.25em;
		border: 1px dotted darkgrey;
		text-align: center;
	}

	.remaining {
		border: none;
		border-spacing: 0;
		padding: 0 5px 0 0;
		color: white;
		font-size: 21px;
	}

	.remainingGhost {
		border: none;
		border-spacing: 0;
		padding: 0 5px 0 0;
		color: white;
		font-size: 21px;
		cursor: pointer;
	}

	.release {
		background-color: Transparent;
		border-radius: 100px;
		border: 2px solid darkgray;
		outline: 0;
		display: inline-block;
		cursor: pointer;
		color: darkgray;
		font-size: 16px;
		padding: 10px 15px;
		text-decoration: none;
		margin-top: 0.5em;
	}

	.title {
		font-family: serif;
	}

	/* The switch - the box around the slider */
	.switch {
		position: relative;
		float: left;
		display: inline-block;
		width: 113px;
		height: 42px;
		cursor: pointer;
	}

	.slider:before {
		position: absolute;
		content: "";
		height: calc(42px - (2 * 4px) - (2 * 2px));
		width: calc(42px - (2 * 4px) - (2 * 2px));
		left: 4px;
		bottom: 4px;
		background-color: white;
		-webkit-transition: .4s;
		transition: .4s;
	}

	input:checked + .slider:before {
		-webkit-transform: translateX(calc(113px - 42px));
		-ms-transform: translateX(calc(113px - 42px));
		transform: translateX(calc(113px - 42px));
	}

	.nightmare {
		position: absolute;
		font-size: 16px;
		color: black;
		font-weight: 600;
		left: 15px;
		bottom: 12px;
		-webkit-touch-callout: none; /* iOS Safari */
		-webkit-user-select: none; /* Safari */
		-khtml-user-select: none; /* Konqueror HTML */
		-moz-user-select: none; /* Old versions of Firefox */
		-ms-user-select: none; /* Internet Explorer/Edge */
		user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
	}

	/* Rounded sliders */
	.slider.round {
		border-radius: 100px;
		border: 2px solid white;
	}
}

/* If the screen size is 600px wide or less, do these */
@media screen and (max-width: 600px) {
	p {
		color: white;
		font-size: 15px;
		clear: both;
	}

	button {
		background-color: Transparent;
		border-radius: 100px;
		border: 1px solid white;
		outline: 0;
		display: inline-block;
		cursor: pointer;
		color: white;
		font-size: 15px;
		padding: 5px 7px;
		text-decoration: none;
		margin-right: 0.333em;
		margin-bottom: 0.5em;
	}

	td {
		border: none;
		padding: 0 2px;
	}

	.num {
		color: darkgray;
		font-size: 20px;
	}

	.name {
		color: darkgray;
		font-size: 10px;
	}

	.credit {
		color: darkgray;
		font-size: 12px;
	}

	.history {
		float: left;
		margin-right: 0.125em;
		padding-left: 0.125em;
		padding-right: 0.125em;
		border: 1px dotted darkgrey;
		text-align: center;
	}

	.remaining {
		vertical-align: top;
		border: none;
		padding: 0 2px 0 0;
		color: white;
		font-size: 17px;
	}

	.remainingGhost {
		vertical-align: top;
		border: none;
		padding: 0 2px 0 0;
		color: white;
		font-size: 17px;
		cursor: pointer;
	}

	.release {
		background-color: Transparent;
		border-radius: 100px;
		border: 1px solid darkgray;
		outline: 0;
		display: inline-block;
		color: darkgray;
		cursor: pointer;
		font-size: 17px;
		padding: 5px 7px;
		text-decoration: none;
		margin-top: 0.5em;
	}

	.title {
		font-family: serif;
	}

	/* The switch - the box around the slider */
	.switch {
		position: relative;
		float: left;
		display: inline-block;
		width: 98px;
		height: 28px;
		cursor: pointer;
	}

	.slider:before {
		position: absolute;
		content: "";
		height: calc(28px - (2 * 3px) - (2 * 1px));
		width: calc(28px - (2 * 3px) - (2 * 1px));
		left: 3px;
		bottom: 3px;
		background-color: white;
		-webkit-transition: .4s;
		transition: .4s;
	}

	input:checked + .slider:before {
		-webkit-transform: translateX(calc(98px - 28px));
		-ms-transform: translateX(calc(98px - 28px));
		transform: translateX(calc(98px - 28px));
	}

	.nightmare {
		position: absolute;
		font-size: 15px;
		color: black;
		font-weight: 600;
		left: 10px;
		bottom: 4px;
		-webkit-touch-callout: none; /* iOS Safari */
		-webkit-user-select: none; /* Safari */
		-khtml-user-select: none; /* Konqueror HTML */
		-moz-user-select: none; /* Old versions of Firefox */
		-ms-user-select: none; /* Internet Explorer/Edge */
		user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
	}

	/* Rounded sliders */
	.slider.round {
		border-radius: 100px;
		border: 1px solid white;
	}
}

table, tr {
	border: none;
}

a {
	color: darkgray;
	text-decoration: underline;
}

a:hover {
	cursor: pointer;
}

#reset {
	background-color: #660000;
}

#ghostName {
	color: #8924a3;
}

#evidence {
	color: #349c27;
}

#weakness {
	color: #c98134;
}

#strength {
	color: #c21b10;
}

#vanWarning {
	color: #afa51c;
}

.left {
	float: left;
}

.ecuTotal {
	color: darkgray;
}

.titleA {
	color: white;
	text-decoration: none;
}

.tablist {
	padding: 0;
	margin: 0 0 0 11px;
	list-style: none;
	display: inline-flex;
	justify-content: left;
}

.tablist2, .tablist1, .tablist0 {
	position: relative;
	display: block;
	color: white;
	text-decoration: none;
	border-top: 1px solid white;
	border-radius: 6px 6px 0 0;
	padding: 3px 10px 0 10px;
	margin: 0 5px;
}

.tablist2 {
	z-index: 2;
	font-size: 35px;
}

.tablist1 {
	z-index: 1;
	font-size: 25px;
	top: 100%;
	transform: translateY(-100%);
}

.tablist0 {
	z-index: 0;
	font-size: 25px;
	top: 100%;
	transform: translateY(-100%);
}

.tablistB:before, .tablistB:after, .tablistS:before, .tablistS:after {
	position: absolute;
	content: "";
	background: black;
	top: 2px;
	z-index: -1;
	border-radius: 2px 0 0 0;
}

.tablistB:before, .tablistB:after {
	width: 14px;
	height: 46px;
}

.tablistB:before {
	transform: rotate(21deg);
	border-left: 1px solid white;
	left: -8px;
}

.tablistB:after {
	transform: rotate(-21deg);
	border-right: 1px solid white;
	right: -8px;
}

.tablistS:before, .tablistS:after {
	width: 9px;
	height: 33px;
}

.tablistS:before {
	transform: rotate(21deg);
	border-left: 1px solid white;
	left: -5px;
}

.tablistS:after {
	transform: rotate(-21deg);
	border-right: 1px solid white;
	right: -5px;
}

.box {
	border: 1px solid white;
	padding: 15px 10px;
	margin: 0;
	color: white;
	font-size: 25px;
	z-index: 9;
	clear: both;
}

/* Hide default HTML checkbox */
.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

/* The slider */
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked + .slider {
	background-color: #009900;
}

input:focus + .slider {
	box-shadow: 0 0 1px #009900;
}

/* Rounded sliders */
.slider.round {
	border-radius: 100px;
}

.slider.round:before {
	border-radius: 50%;
}

.mejai-icon {
	display: inline-block;
	background: no-repeat top left;
	background-size: 32px;
	width: 32px;
	height: 32px;
	color: #fff;
}

.ataimon {
	background-image: url('/svgs/ataimon.svg');
}

.dekan {
	background-image: url('/svgs/dekan.svg');
}

.necreph {
	background-image: url('/svgs/necreph.svg');
}

.ouphris {
	background-image: url('/svgs/ouphris.svg');
}

.rathos {
	background-image: url('/svgs/rathos.svg');
}

.talgor {
	background-image: url('/svgs/talgor.svg');
}