html, body {
	width: 100vw;
	height: 100vh;
	font-size: 20px;
}

#body-container {
	display: grid;
	height: 100%;
	width: 100%;
	min-width: 360px;

	grid-template: 
		"header header" auto
		"tutors sidebar" auto
		"messages sidebar" auto
		"main sidebar" 1fr
		"footer footer" auto
	/ minmax(360px, 1fr) auto;
}

html, body, #body-container, #sidebar > menu {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

html::-webkit-scrollbar, body::-webkit-scrollbar, #body-container::-webkit-scrollbar, #sidebar > menu::-webkit-scrollbar { display: none; }

#sidebar {
	grid-area: sidebar;
	z-index: 1;
	min-width: 200px;
	
	white-space: nowrap; 
	overflow-y: auto; 
	overflow-x: hidden;

	background-color: #333333;
}

#sidebar [wui="menu-group"] {
	align-items: stretch;
	border-top: 0.1rem solid pink;
	margin-bottom: 0.25rem;
	padding-top: 0.25rem;
}
#sidebar > menu {
	flex: 1 1;
	justify-content: flex-start;
	overflow-y: auto;
}

#sidebar [wui="menu-group"] [wui$="button"] { justify-content: flex-start; }

.header { padding: 0.5rem; align-items: center; }

header { grid-area: header; min-height: 2.5rem; color: gold;}
header .site { display: none; white-space: nowrap; }
/*.show-nav { padding: 0.125rem; }*/

#sidebar[wui-display="true"] ~ #tutor-container .show-nav { display: none; }

#tutor-container { grid-area: tutors; }
#messages { grid-area: messages; }

main { 
	grid-area: main;
	overflow-x: hidden; overflow-y: auto;

	scrollbar-width: none; -ms-overflow-style: none;
} main::-webkit-scrollbar { display: none; }

footer { grid-area: footer; min-height: 1rem; }
#desk-chat > [wui="pop-content"] {
	width: 420px;
	height: 50vh;
}

@media (max-width: 560px) {
	#desk-chat > [wui="pop-content"] {
		position: fixed;
		top: 0; left: 0;
		margin: 0; padding: 0;
		border: unset;
		width: 100vw; height: calc(100vh - 2.2rem);
	}

	#sidebar {
		position: fixed;
		top: 0; 
		width: 100vw; height: 100vh;
	}
}
@media (max-width: 420px) {
	.hidden-sm { display: none; }
}
@media (max-width: 720px) {
	.hidden-md { display: none; }
}

@media (min-width: 720px) { header .site { display: inline; } }