body {
	background-color: rgb(228, 228, 228);
	margin: 0px;
	font-family: sans-serif;
}

.content {
	padding: 8px;
}

.form-section {

}

label {
	margin-right: 12px;
}

.menu {
	background-color: rgb(0, 4, 36);

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

	h1 {
		margin: 0px 16px;
	}

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

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

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

table {
	border-collapse: collapse;

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

	th {
		text-align: left;
	}

	td.hidden {
		border: none;
	}
}

table.drives {
	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);
		}
	}
}