html,
body {
	margin: 0;
	padding: 0;
	height: 100dvh;
	overscroll-behavior-y: none;
}

body {
	height: 100dvh;
	display: grid;
	grid-template-columns: 300px 1fr;
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		"header header"
		"sidebar main"
		"sidebar footer"
	;
	gap: 0rem;
	overflow: hidden;
}

header {
	grid-area: header;
	display: flex;
	flex-direction: row;
	align-items: center;
	min-height: 1rem;
}

aside {
	grid-area: sidebar;
	/* background-color: blue; */
	height: 100%;
	overflow-y: hidden;
}

main {
	grid-area: main;
	overflow: hidden;
}

footer {
	grid-area: footer;
}

aside #sidebar {
	height: calc(100% - 1rem);
	background-color: #f3f3f3;
	border: 1px solid #eee;
	margin: 0 0 1rem 1rem;
	border-radius: 1rem;
	padding: 0;
	margin-right: 1rem;
}

#main-content {
	padding-right: 1rem;
	overscroll-behavior-y: contain;
	-webkit-overflow-scrolling: touch;
}

@media(max-width: 450px) {
	body {
		grid-template-columns: 1fr;
		grid-template-areas:
			"sidebar"
			"header"
			"main"
			"footer"
		;
		grid-template-rows: 0 auto 1fr 0;
		gap: 0;
	}

	aside {
		position: fixed;
		top: 0;
		right: -300px;
		width: 300px;
		height: 100dvh;
		z-index: 999;
		transition: .3s ease-out;
	}

	aside #sidebar {
		margin-bottom: 0;
		margin-right: 0;
		border-radius: 0;
		height: 100%;
		padding: 0;
	}
	#sidebar-active:checked ~ aside {
		right: 0;
	}
	#sidebar-active:checked ~ #sidebar-overlay {
		/* background: red; */
		height: 100%;
		width: 100%;
		position: fixed;
		top:0;
		left:0;
		z-index:900;
	}

	aside nav#sidebar-menu {
		height: 100%;
		margin: 0;
		border-radius: 0;
		padding: 1rem;
	}

	#main-content {
		padding-left: .5rem;
		padding-right: .5rem;
	}
}

@media print {
	:root {
		--print-scale: 0.8;
		--print-page-margin: 8mm;
	}

	@page {
		margin: var(--print-page-margin);
	}

	body * {
		visibility: hidden !important;
	}

	.print-only-target,
	.print-only-target * {
		visibility: visible !important;
	}

	.print-only-target {
		position: absolute;
		left: 0;
		top: 0;
		width: calc(100% / var(--print-scale));
		transform: scale(var(--print-scale));
		transform-origin: top left;
	}

	.no-print {
		display: none !important;
	}
}