html {
	font-size: 11px;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-family: -apple-system, SanFrancisco, sans-serif;
	
	/* prevent font size change after orientation change on iOS */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;

	/* make tab characters render as 4 spaces instead of 8 */
	-moz-tab-size: 4;
	tab-size: 4;
}


/*
 * standard elements
 */
button, input, select, td, th, input, textarea {
	font-size: 1rem;
}
.nodisplay { display: none; }
a {
	color: #00c;
	text-decoration: none;
}
a.help {
	display: inline-block;
	background-image: url('/app/assets/images/help.svg');
	height: 1em;
	width: 1em;
	vertical-align: baseline;
}
h1 { font-size: calc(1rem + 8px); }
h2 { font-size: calc(1rem + 4px); }
h3 { font-size: calc(1rem + 2px); }
pre { font-size: 10px; }
button kbd { font-family: inherit; color: #888; padding-left: 1ch; }

/*
 * tables
 */
table.form, table.list { border-collapse: collapse; }
table.form td, table.form th, table.list td, table.list th { padding: 4px; }
table.form { border: 1px solid #ddd; }
table.form th { text-align: left; }
table.form tr:nth-child(odd), table.log tr:nth-child(odd) { background: rgb(240,240,255); }
table.form tr:nth-child(even), table.log tr:nth-child(even) { background: white; }

table.list { border: 1px solid #ddd; }
table.list th, table.list td {
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
}
table.list th {
	border: 1px solid white;
}
table.list tbody tr:nth-child(odd) { background: rgb(240,240,255); }
table.list tbody tr:nth-child(even) { background: white; }
table td.right, table th.right { text-align: right; }
table td.center { text-align: center; }
thead tr.title th {
	background-color: #006ba8;
	color: white;
	text-transform: uppercase;
}
table.list tfoot tr { border-top: 1px solid black; }

table caption {
	border: 1px solid #ccc;
	border-bottom: none;
	background-color: #006ba8;
	color: white;
	padding: 0.4rem;
	font-weight: bold;
	text-align: left;
	text-transform: uppercase;
}

table a.button, button.cell {
	background: none !important;
	border: none;
	text-transform: uppercase;
	color: rgb(0, 0, 162);
	padding: 0 3px;
	min-width: 0;
	font-weight: normal;
	font-size: calc(1rem - 2px);
	cursor: pointer;
}
table a.green, button.cell.green { color: rgb(18, 138, 3); }
table a.yellow, button.cell.yellow { color: rgb(107, 107, 3); }
table a.red, button.cell.red { color: rgb(162, 0, 5); }

thead tr, tfoot tr { background: white; }
table.list th { border: 1px solid #ddd; }

/*
 * forms and validation
 */
input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="time"], input[type="number"], input[type="email"], textarea { border: 1px solid #aaa; }
/*select { border: 1px solid #aaa; padding: 0; background: none; }
input[type="submit"], input[type="button"] { border: 1px solid #888; border-radius: 5px; background: none; }
input[type="submit"]:active, input[type="button"]:active { background: #eee; }*/
input:invalid { background: #fcc; }
.unselected {
	color: red;
	font-weight: bold;
	border: 1px solid red;
	background: #fcc;
	padding-left: 3em; padding-right: 3em;
}
button a { text-decoration: none; color: black; cursor: default; }

/*
 * sections
 */
.float { float: left; margin-right: 1em; }
.clear { clear: both; margin: 0; padding: 0; }
div.float > h2:first-child { margin-top: 0; }
div.float > h3:first-child { margin-top: 0; }
div.float { margin-bottom: 1em; }
.logAttribution { color: #aaa; }

/*
 * dialogs
 */
div.error span.error { font-weight: bold; }
div.error { border: 1px solid red; background: #fcc; padding: 1em; color: red; margin-bottom: 1em; }
div.success { border: 1px solid green; background: #cfc; padding: 1em; color: green; margin-bottom: 1em; }
div.warning { border: 1px solid #f80; background: #ffffcc; padding: 1em; color: #f80; margin-bottom: 1em; }
div.search { border: 1px solid #ccc; padding: 5px; background: #f0f0ff; margin-bottom: 1em; }
div.notifications { margin-bottom: 1em; padding: 1em; }
div.notifications > ul { list-style: outside; margin: 0; padding: 0; margin-left: 1.5em; }
div.notifications.failures span.detail { color: hsl(0, 100%, 75%); display: block; }
div.notifications.failures { border: 1px solid red; background: #fcc; color: red; }
div.notifications.successes{ border: 1px solid green; background: #cfc; color: green; }
div.notifications.warnings { border: 1px solid #f80; background: #ffffcc; color: #f80; }

/*
 * alert banner
 */
#alert_banner {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	box-sizing: border-box;
	max-width: 300px;
	border: 1px solid red;
	margin-left: auto;
	margin-right: auto;
	border-top: none;
	background: hsla(0, 100%, 90%, 1);
	color: red;
	padding: 1rem;
	text-align: center;
	z-index: 1000;
	color: #842029;
	background-color: #f8d7da;
	border-color: #f5c2c7;
	/*border-color: #842029;*/
}

/*
 * modal dialogs
 */
dialog {
	border: none;
	box-shadow: 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	padding: 1.5rem;
}
dialog::backdrop {
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(1px);
}
dialog > :is(h1, h2, h3):first-child {
	margin-top: 0;
}
dialog > :is(p):last-of-type {
	margin-bottom: 0;
}


.modal {
	display: none;
	position: fixed;
	top: 0; bottom: 0; left: 0; right: 0;
	background: rgba(0, 0, 0, 0.3);
	
	justify-content: center;
	align-content: center;
}
.modal > div {
	background: white;
	padding: 1.5rem;
	max-height: 100vh;
	overflow: auto;
}
.modal:target {
	display: grid;
}
.modal > div > :is(h1, h2, h3):first-child {
	margin-top: 0;
}
.modal > div > :is(p):last-of-type {
	margin-bottom: 0;
}

.modal-block {
	display: none;
	background: rgba(0,0,0,0.3);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.modal-block > div {
	background: white;
	position: static;
	width: 600px;
	margin-top: 100px;
	margin-left: auto;
	margin-right: auto;
	padding: 25px;
}
.modal-block:target {
	display: block;
}

/*
 * buttons
 */
button.red, input[type="button"].red, input[type="submit"].red,
button.green, input[type="button"].green, input[type="submit"].green {
	border: none;
	margin: 0;
	padding-top: 1px;
	padding-bottom: 1px;
	padding-left: 5px;
	padding-right: 5px;
	border-radius: 2px;
	color: white;
	/*font-size: 12px;*/
}
button.red, input[type="button"].red, input[type="submit"].red {
	background: red;
}
button.green, input[type="button"].green, input[type="submit"].green {
	background: green;
}
button.red:active, input[type="button"].red:active, input[type="submit"].red:active,
button.green:active, input[type="button"].green:active, input[type="submit"].green:active {
	opacity: .5;
}
input[type="button"].ok, input[type="submit"].ok, button.ok,
input[type="button"].add, input[type="submit"].add button.add,
input[type="button"].edit, input[type="submit"].edit,
input[type="button"].delete, input[type="submit"].delete, button.delete,
input[type="button"].download, input[type="submit"].download,
table .handle {
	border: none;
	width: 12px;
	height: 12px;
	margin: 0;
	padding: 0;
	border-radius: 2px;
}
input[type="button"].ok:active, input[type="submit"].ok:active, button.ok:active,
input[type="button"].add:active, input[type="submit"].add:active, button.add:active,
input[type="button"].edit:active, input[type="submit"].edit:active,
input[type="button"].delete:active, input[type="submit"].delete:active, button.delete:active,
input[type="button"].download:active, input[type="submit"].download:active,
input[type="button"].handle:active, input[type="submit"].handle:active {
	opacity: .5;
}
input[type="button"].ok, input[type="submit"].ok, button.ok { background: url('../images/buttons/ok.png'); }
input[type="button"].add, input[type="submit"].add, button.add { background: url('../images/buttons/add.png'); }
input[type="button"].edit, input[type="submit"].edit { background: url('../images/buttons/edit.png'); }
input[type="button"].delete, input[type="submit"].delete, button.delete { background: url('../images/buttons/del.png'); }
input[type="button"].download, input[type="submit"].download { background: url('../images/buttons/dnld.png'); }
table .handle { background: url('../images/buttons/handle.png'); }

/*
 * tabs
 */
ul.tabs {
	border-bottom: 1px solid #ccc;
	list-style-type: none;
	padding: 2px 6px;
	font-weight: bold;
}
ul.tabs li {
	display: inline;
}
ul.tabs li a {
	text-decoration: none;
	padding: 2px 5px;
	color: #000;
	border: solid 1px #ccc;
	border-radius: 3px 3px 0px 0px;
	background: #ccc;
	background: linear-gradient(#fff, #ccc);
}
ul.tabs li.selected a {
	color: #000;
	background: #fff;
	background: linear-gradient(#eee, #fff);
	border-bottom: 1px solid white;
}

/*
 * grid
 */
 ul.grid li {
 	width: 200px;
 	height: 220px;
 	display: inline-block;
 	vertical-align: top;
 }
 

/*
 * OLD NAVBARS
 */
#header {
	border: 1px solid #ccc;
	padding: 5px;
	margin: 0px;
	margin-bottom: 5px;
	height: 25px;
	vertical-align: middle;
	position: relative;
}
#header img {
	padding: 0px;
	margin: 0px;
	display: inline;
}
#header h1 {
	position: absolute;
	margin: 0;
	padding: 0;
	top: 10px;
	left: 65px;
}
#header #logout {
	position: absolute;
	right: 10px;
	top: 10px;
}

ul.navbar {
	/*height: 18px;*/
	border: 1px solid #ccc;
	list-style-type: none;
	padding: 0;
	margin-bottom: 5px;
	margin-top: 0;
}
ul.navbar a {
	text-decoration: none;
	font-weight: bold;
	color: #444;
}
ul.navbar li {
	border: 1px solid #ccc;
	padding: 3px;
	padding-left: 5px;
	padding-right: 5px;
	float: left;
	/*width: 75px;*/
	position: relative;
	margin-top: -1px;
	margin-left: -1px;
	font-weight: bold;
	color: #444;
	height: calc(1rem + 2px);
}
ul#navbar1, ul#navbar1 li {
	background: #e5ffd8; /* green */
}
ul#navbar2, ul#navbar2 li {
	background: #f9ddff; /* purple */
}
ul#navbar3, ul#navbar3 li {
	background: #e3e2ff; /* blue */
}
ul#navbar4, ul#navbar4 a, ul#navbar4 li {
	background: #ffffff; /* white */
	color: #000;
}

@supports (display: flex) {
	ul.navbar li {
		float: none;
		position: static;
		/*margin: 0;*/
	}
	ul.navbar {
		display: flex;
		flex-flow: row wrap;
		height: initial;
		/*box-shadow: inset 0px -1px 0px 0px #ccc, 1px -1px 0px 0px #ccc;*/
		/*box-shadow: inset 0px -1px 0px 0px #ccc, 1px -1px 0px 0px #ccc;*/
		box-shadow: inset -1px -1px 0px 0px #ccc;
		
		border: none;
		border-top: 1px solid #ccc;
	}
}