* {
	box-sizing: border-box;

	user-select: none;
}

html, body {
	margin: 0;
	padding: 0;

	color: #000;
	font-size: 16px;
	font-family:Verdana, Geneva, Tahoma, sans-serif;
}

#Tracker {
	display: grid;
	grid-template-columns: auto 25%;
	grid-template-rows: auto auto auto;

	margin: 30px auto;
	width: 1600px;
}

#MenuPanel {
	display: flex;
	grid-column: 1 / span 2;
	grid-row: 1;
}

#RuleOptions {
	width: 85%;
}

#RuleOptions > * {
	border-color: #fff;
	border-style: solid;
	border-width: 0 1px 0 0;
}

#GameControls {
	width: 15%;
}

#GameControls .button {
	border-width: 0 0 0 1px;
}

#EvidencePanel {
	grid-column: 1 / span 2;
	grid-row: 2;
}

#GhostPanel {
	grid-column: 1;
	grid-row: 3;
}

#FilterPanel {
	grid-column: 2;
	grid-row: 3;
}

#GhostList {
	
}

#FilterList {

}

#FilterQuick {
	padding: 5px 0 8px;
}

.filter {
	padding: 5px 2px;
}

.filter-title {
	padding: 10px 20px 2px;

	font-size: 20px;
}

.filter-quick {
	margin: 5px 0;
}

.filter-quick-title {
	padding: 5px 10px 5px;

	font-size: 18px;
}

.filter-quick-menu {
	margin: 0 10px;
}

.filter-quick-menu-option {

}

.evidence.button {
	height: 40px;
	width: 25%;

	font-size: 20px;
}

.evidence.evidence-no-ghosts {
	background-color: #eea;
}

.evidence.evidence-present {
	background-color: #aea;
}

.evidence.evidence-absent {
	background-color: #eaa;
}

.evidence.evidence-unknown {

}


.ghost.button {
	display: block;

	width: 50%;
	height: 300px;
	padding: 10px 20px;

	color: #444;
	font-size: 14px;
}

.ghost .title {
	padding: 2px 10px;
}

.ghost .subtitle {

}

.ghost-proved {
	order: 1;
}

.ghost-disproved {
	order: 3;
	display: hidden;
}

.ghost-unknown {
	order: 2;
	opacity: 0.5;
}

.ghost-dismissed {
	order: 4;
	opacity: 0.5;
}

.ghost-evidence-list.list-inline {
	margin: 0 0 8px;

	font-size: 15px;
}

/* Components */
.columns {
	display: flex;
}

.columns > * {
	flex: 1;

	padding: 0 3px;
}

.menu-h {
	display: flex;
}

.menu-h > * {
	flex-grow: 1;
}

.menu-h-g {
	display: flex;
}

.menu-h-g > * {
	flex: 1;
}

.menu-h-w {
	display: flex;
	flex-wrap: wrap;
}

.panel {
	border-color: #fff;
	border-style: solid;
	border-width: 1px;

	background-color: #ddd;
}

.input, .button, .label {
	display: flex;
	align-items: center;
	justify-content: center;

	height: 30px;
}

.control, .button{
	border-color: #fff;
	border-style: solid;
	border-width: 1px;
}

.control {
	background-color: #fff;
}

.button {
	background-color: #ddd;
	cursor: pointer;
}

.button:hover {
	filter: brightness(1.1)
}

.label {

}

.list {
	margin: 0 7px;
	padding: 0 0 0 20px;

	list-style: disc;
}

.list > li {
	margin: 0;
	padding: 2px 0;
}

.list-inline {
	display: flex;

	margin: 0;
	padding: 0;

	list-style: none;
}

.list-inline > li {
	padding: 0 4px 0 0;
}

.list-inline > li:last-child {
	padding: 0;
}

.list-inline > li:after {
	content: ", ";
}

.list-inline > li:last-child:after {
	content: "";
}

/* Style Mofidiers */
.title {
	color: #000;
	font-size: 20px;
	font-weight: bold;
}

.subtitle {
	font-size: 16px;
	font-weight: bold;
}

.bold {
	font-weight: bold;
}

.fill {
	width: 100%;
}