body {
	background-color: #000;
	color: #eee;
	margin: 0 1em;
	padding: 0;
	box-sizing: border-box;
	font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 1em;
	line-height: em;;
}
div.login {
	margin: 0 -1em;
	padding: 0.25em 0.5em 0.25em;
	font-size: 0.8em;
	background-color: #343;
	border-bottom: 1px solid #565;
}
div.login span {
	padding-left: 0.5em;
}
div.login span.username,
div.login span.username a {
	color: #fa0;
}
div.login span.loginout a {
	color: #8d8;
}
div.altlogin {
	margin-top: 0.5em;
	margin-bottom: 1em;
	font-size: 0.9em;
}
div.altlogin a {
	color: #8c8;
}

div.breadcrumbs {
	margin: 0 -1em 1em;
	padding: 0.25em 0.5em 0.25em;
	font-size: 0.8em;
	background-color: #232;
	border-bottom: 1px solid #454;
}
div.breadcrumbs a {
	color: #aaa;
	text-decoration: none;
}
div.breadcrumbs a:hover {
	text-decoration: underline;
}
div.breadcrumbs span {
	color: #fa0;
}

h1 {
	color: #af4;
	margin: 0 0 0.25em;
	line-height: 1em;
	font-weight: 100;
}
h2 {
	font-size: 1.25em;
	color: #682;
	margin: 0.2em 0;
	font-weight: 600;
}

p {
	margin: 0 0 0.5em;
}

table {
	border-collapse: collapse;
	border: 1px solid #aaa;
}
table th,
table td {
	text-align: left;
	vertical-align: top;
	border: 1px solid #840;
	padding: 0 0.3em 0.2em;
}
table th {
	color: #d70;
	background-color: #210;
	font-weight: 600;
}

span.divider {
	opacity: 0.5;
	padding: 0 0.25em;
}

div.textInput {
	padding: 0.5em;
	background-color: #eee;
}
div.textInput textarea {
	width: 100%;
	background-color: unset;
	color: #040;
	border: none;
	/* color: #dfa; */
}
div.textInput textarea:focus {
	outline: none;
}
div.textOutput {
	border: 1px solid #800;
	padding: 0.5em;
}
div.textOutput pre {
	background-color: #000;
	color: #fbb;
	min-height: 20em;
	margin: 0;
	padding: 0;
}

div.flexlayout {
	display: flex;
	width: 100%;
}
div.flexlayout > div {
	width: 50%;
}
div.flexlayout.fillexpand > div {
	padding-right: 1em;
	width: unset;
}
div.flexlayout > div.right {
	text-align: right;
}
div.flexlayout > div.right.toppadding {
	padding-top: 0.5em;
}

span.unimportantLabel {
	opacity: 0.75;
}

a {
	color: #fff;
}
div.newuser input[type='text'] {
	background-color: #860;
	color: #fff;
}
.error {
	color: red;
	font-weight: 600;
	font-style: italic;
	background-image: url("/static/Warning20.png");
	background-repeat: no-repeat;
	padding-left: 30px;
}
span#spinner {	
	color: yellow;
	font-style: italic;
	padding: 0 0.5em;
}
span#deletespinner {	
	color: yellow;
	font-style: italic;
	font-weight: normal;
}

.nobreak {
	white-space: nowrap;
}

input[type=text],
input[type=password] {
	color: #fff;
	background-color: #333;
	border: 1px solid #444;
}

div.search {
	margin-bottom: 1em;
}
div.search label {
	padding-right: 1em;
}
div.search input {
	margin-right: 1em;
}

@media (max-width: 360px) {
	div.flexlayout {
		display: block;
	}	
	div.flexlayout > div {
		width: 100%;
		display: block;
	}
}
@media (max-width: 640px) {
	h1 {
		font-size: 1.3em;
	}
	h2 {
		font-size: 1em;
	}
	div.flexlayout > div > span.shrinkable {
		display: block;
		font-size: 0.9em;
	}
	div.flexlayout > div > span.divider {
		display: none;
	}
}