html,body{
	height:100%;
	font-size:95%;
	background:var(--bg);
	color:var(--fg);
}
a{
	color:var(---fg);
	&:hover{
		color:var(---fg-hover);
	}
	&.button{
		appearance:button;
		display:inline-flex;
		margin-left:0.25em;
		text-decoration:none;
		gap:0.25em;
	}
}
input,
textarea{
	background:var(--bg);
	border-radius:1px;
	border:1px solid var(--border);
	color:var(--fg);
	font-size:80%;
}
button{
	align-items:center;
	display:inline-flex;
	flex-direction:row;
	gap:0.25em;
	justify-content:center;
	margin:0px;
	white-space:nowrap;
	&[type=reset]::before,
	&[type=submit]::before{
		font-family:"Material Design Icons";
		font-weight:normal;
	}
	&[type=reset]::before{content:"\f054d";}
	&[type=submit]::before{content:"\f0055";}
	>span{
		margin-right:2px;
	}
}
body>main nav.controls div.menu a,
a.button,
button,
input::file-selector-button,
input[type=button],
input[type=reset],
input[type=submit]{
	background:var(--bg);
	border-radius:3px;
	border:1px solid var(--border);
	color:var(--fg);
	padding-block:1px;
	padding-inline:6px;
}
header.title{
	align-items:center;
	background:var(--bg);
	border:1px solid var(--border);
	color:var(--fg);
	column-gap:0.25em;
	display:grid;
	font-weight:bold;
	padding:0.25em;
	button{
		font-weight:normal;
		font-size:90%;
	}
}
/* Layout */
body{
	display:grid;
	grid-template-areas:
		'header header'
		'nav nav'
		'aside main'
		'footer footer'
		'overflow overflow'
	;
	grid-template-columns:min-content auto;
	grid-template-rows:min-content min-content min-content auto;
	>header{
		align-items:center;
		background:var(--bg);
		border-bottom:1px solid var(--border);
		color:var(--fg);
		display:flex;
		grid-area:header;
		justify-content:space-between;
		padding:0.5em;
		>img{
			color:var(--fg);
			height:100%;
			max-height:25px;
		}
	}
	>nav{
		background:var(--bg);
		color:var(--fg);
		grid-area:nav;
		a.active{
			box-shadow:inset 0px 2px var(---border);
		}
		>input[type='checkbox']{
			display:none;
		}
		>label{
			display:none;
		}
	}
	>aside{
		background:var(--bg);
		border-right:1px solid var(--border);
		color:var(--fg);
		grid-area:aside;
		min-width:200px;
		&:empty{
			display:none;
		}
	}
	>main{
		margin:0.5em 0.5em 0px 0.5em;
		grid-area:main;
		background:var(--bg);
		color:var(--fg);
		min-height:100%;
		>nav.controls{
			align-items:center;
			background:var(--bg);
			border:1px solid var(--border);
			color:var(--fg);
			display:flex;
			gap:0.5em;
			justify-content:right;
			padding:0.25em;
		}
	}
	>footer{
		font-size:70%;
		background:var(--bg);
		color:var(--fg);
		grid-area:footer;
		padding:0.5em;
		text-align:right;
	}
}
@media (max-width:576px){
	body{
		grid-template-areas:
			'header'
			'nav'
			'main'
			'aside'
			'footer'
		;
		grid-template-columns:auto;
		grid-template-rows:min-content min-content min-content min-content auto;
		>nav{
			>input[type='checkbox']{
				&:checked{
					~div{
						display:block;
						>nav{
							>a{
								display:grid;
							}
						}
					}
				}
				&:not(:checked){
					~div>nav>a{
						display:none;
					}
				}
			}
			>label{
				color:var(--fg);
				cursor:pointer;
				display:block;
				padding:0.25em 1em 0 0;
				text-align:right;
				float:right;
			}
		}
		main{
			>div.resultset{
				overflow-x:scroll;
				>table{
					width:1px;
					display:inline-block;
				}
			}
		}
	}
}