$bodyBackgroundColor: rgb(228, 228, 228);
$menuBackgroundColor: rgb(0, 4, 36);
$submenuBackgroundColor: rgb(221, 221, 221);

body {
	background-color: $bodyBackgroundColor;
	margin: 0px;
	font-family: sans-serif;
}

.content {
	padding: 8px;
}

.form-section {

}

label {
	margin-right: 12px;
}

.menu {
	background-color: $menuBackgroundColor;

	h1, .menuItem {
		display: inline-block;
		color: white;
	}

	h1 {
		margin: 0px 16px;
	}

	.menuItem {
		a {
			color: white;
			text-decoration: none;
			padding: 15px 9px 5px 9px;
		}

		&.active {
			a {
				// background-color: rgb(228, 228, 228);
				/* FIXME: Make this lighter when there is no submenu, to match the page background color */
				background-color: $submenuBackgroundColor;
				color: black;
			}
		}

		&:not(.active) {
			a:hover {
				background-color: rgb(175, 175, 175);
				color: black;
			}
		}
	}
}

.fakeSubmenu, .submenu {
	background: linear-gradient(to bottom, $submenuBackgroundColor, $submenuBackgroundColor 60%, rgb(202, 204, 206));
}

.fakeSubmenu {
	height: 16px;
}

.submenu {
	padding: .3em .2em 0 .2em;
	border-bottom: 1px solid $menuBackgroundColor;

	.menuItem {
		display: inline-block;
		margin-bottom: -1px;
		padding: .3em .7em;
		font-size: .95em;

		a {
			text-decoration: none;
			color: black;
		}

		// background-color: red;

		&.active {
			background-color: $bodyBackgroundColor;
			border: 1px solid $menuBackgroundColor;
			border-bottom: none;
		}
	}
}

table {
	border-collapse: collapse;

	th, td {
		padding: 6px 9px;
		border: 1px solid black;
	}

	th {
		text-align: left;
	}

	td.hidden {
		border: none;
	}
}

table.drives {
	td {
		vertical-align: top;
	}

	td.smart {
		&.HEALTHY {
			background-color: rgb(0, 165, 0);
		}

		&.DETERIORATING {
			background-color: rgb(255, 145, 0);
		}

		&.FAILING {
			background-color: rgb(230, 0, 0);
		}
	}

	.hasPartitions, .partition:not(.last) {
		td:not(.smart) {
			border-bottom-color: transparent;
		}
	}

	.partition {
		font-style: italic;
		font-size: .8em;

		td {
			padding: 4px 9px;
		}

		.notMounted {
			color: gray;
		}
	}

	tr.smartStatus {
		font-size: .85em;

		td {
			padding: 4px 9px;
		}
	}

	th {
		&.healthy {
			color: rgb(0, 97, 0);
		}

		&.atRisk {
			color: rgb(124, 70, 0);
		}

		&.failing {
			color: rgb(194, 0, 0);
		}
	}
}

.stacktrace {
	white-space: pre-wrap;
	font-family: monospace;
	
	.irrelevant {
		color: gray;
	}
}