html {
	height: 100%;
}

body {
	font-family: Noto Sans;
	/*height: 100%;*/
	margin: 0;
	background-color: #E0E0E0;
	font-size: .85em;
	line-height: 1.3;
}

#page-wrapper {
  display: flex;
  margin: 0 2em;
  margin-top: 2em;
}

#sidebar {
  flex-shrink: 0;
}

#sidebar a {
  margin-top: .75em;
}

hr {
  border: none;
  height: .75em;
  margin: 0 -2em;
  margin-top: 1.75em;
  /*box-shadow: inset 0 .75rem .75rem -.75rem rgba(0,0,0,.25);*/
  box-shadow: inset 0 .15rem #C0C0C0;
}

#wrapper {
  flex-grow: 1;
  margin-left: 2em;
  margin-top: 3em;
  background-color: white;
  padding: 2em;
  border-radius: .5em;
  /*border: .1em solid #C0C0C0;
  border-bottom: none;*/
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: 0em .2em .4em rgba(0,0,0,.5);
}

#logo {
  width: 8em;
}

table {
	border-collapse: collapse;
}

td {
	padding: .25em .5em;
	border-left: .2em solid #C0C0C0;
	border-top: .2em solid #C0C0C0;
}

td:first-child {
	border-left: none;
}

thead > tr:first-child > td {
  border-top: none;
	font-weight: bold;
}

tbody > tr:first-child > td {
	border-top: .2em solid black;
}

/* 
 * Use top margins only.
 */
/*h1, h2, h3, h4, h5, h6, hgroup,
ul, ol, dd,
p, figure,
pre, table, fieldset, section, div {
	margin-top: .75rem;
	margin-bottom: 0;
}

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, hgroup:first-child,
ul:first-child, ol:first-child, dd:first-child,
p:first-child, figure:first-child,
pre:first-child, table:first-child, fieldset:first-child, section:first-child, div:first-child {
	margin-top: 0;
}*/

/* 
 * Native-like elements.
 */
button, .label {
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	cursor: default;
	outline: none;
}

/* 
 * Placeholder input elements.
 */
::-webkit-input-placeholder {
	color: #FFC080;
}
::-moz-placeholder {
	color: #FFC080;
	opacity: 1;
}
:-ms-input-placeholder {
	color: #FFC080;
}

*:focus::-webkit-input-placeholder {
	color: white;
}
*:focus::-moz-placeholder {
	color: white;
	opacity: 0;
}
*:focus:-ms-input-placeholder {
	color: white;
}

/* 
 * Responsive design.
 */
@media (max-width: 48em),
	   (orientation: portrait) {
	#page-wrapper {
		display: block;
	}
	
	#panel {
		width: auto;
		min-width: auto;
		text-align: center;
	}
	
	#info {
		width: auto;
	}
	
	#logo {
		/*width: auto;*/
		width: 100%;
	}
	
	h1 {
		margin: 0;
	}
	
	#wrapper {
		margin: 0;
	}
	
	#sidebar {
		/*width: 85vw;*/
		column-count: 4;
		column-gap: 4em;
	}
	
	#content {
		height: 50vh;
		height: calc(100vh - 21em);
		overflow: auto;
	}
	
	hr {
		border: none;
		height: .75em;
		margin: 0;
		margin-top: 1.75em;
		box-shadow: inset 0 .15rem #C0C0C0;
	}
}


@media (max-width: 240em) {
	html {
		/*font-size: 1em;
		font-size: 2.4vw;*/
		font-size: calc(0.5em + 2 * (100vmax - 10em) / (240 - 10));
	}
}

@media (max-width: 10em) {
	html {
		font-size: .5em;
	}
}

@media print {
	#wrapper {
		box-shadow: none;
	}
}

/* 
 * Backdrop filters.
 */
.black-transparent {
	background-color: rgba(32,32,32,.85);
}
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
	.black-transparent {
		-webkit-backdrop-filter: blur(.5em);
		backdrop-filter: blur(.5em);
		background-color: rgba(0,0,0,.5) !important;
	}
}