:root {
	--c0 : rgba(0,0,255,.02);
	--c01 : #fafaff;
	--c1 : #fdfefe;
	--c2 : #01d19d;
	--c3 : #625deb;
	--c4 : #52cfcb;
	--c5 : #fde395;
	--c6 : #6f9ab2;
}

body { display:grid; grid-template-columns:auto 1fr; background:var(--c0);  }
.btn { background-color:var(--c3);  }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sidebar.is-visible { display:grid;  position:sticky; left:0px; top:0px; bottom:0px; width:250px; background:var(--c1); height:100vh; 
		overflow:hidden; overflow-y:auto; grid-gap:2em; align-content:start; background:inherit;  }
#sidebar:not(is-visible) { padding:0px; width:0px; overflow:hidden;   }
#sidebar .brand { display:grid; grid-template-columns:1fr auto; align-content:center; padding:.5em 1em;   }
#sidebar .brand i.mdi { font-size:1.7em; color:rgba(0,0,0,.6); }
#sidebar ul { display:grid; grid-gap:.2em; padding:.5em 1em; }
#sidebar ul li { display: grid; }
#sidebar ul li a {  padding:.2em 1em; font-size:1.2em; border-radius:50px; color:rgba(0,0,0,.8);  display:grid; grid-template-columns:auto 1fr auto; align-items:center; grid-gap:.5em;   transition:.1s all ease-in-out; }
#sidebar ul li a.mdi::before { font-size:1.5em; color:var(--c3); }
#sidebar ul a:hover, #sidebar li.active > a { background:var(--c3); color:var(--c1); }
#sidebar ul li a.mdi:hover::before, #sidebar ul li.active a.mdi::before { font-size:1.5em; color:var(--c1); }
#sidebar ul > li > ul:not(active) { display:none; transition:.5s all;  }
#sidebar ul > li > ul.active { display:grid; animation:fadeInLeft 1s;  transition:1s all; background:var(--c0); border-radius:var(--radius); margin:var(--margin);  }
#sidebar ul > li > ul.active li a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.topbar {  position: sticky; top:0; background:var(--c01);
	display:grid; grid-auto-flow:column;  grid-template-columns:auto 1fr auto; 
	border-bottom:1px solid rgba(0,0,0,.01); align-content:center; margin:var(--margin); 
	margin-right:1em; padding:.5em 0em;  z-index:3; 
}
.topbar ul { display:grid; padding:0px; margin:0px; list-style:none; display:grid; grid-auto-flow:column; justify-content: start; align-items:center; grid-gap:1.5em; }
.topbar ul a::before { font-size:1.5em; }
.topbar ul a { display:grid; grid-template-columns:auto 1fr; align-items:center;  }
.topbar .mdi-menu { margin-left:.3em; }

.page { min-height:90vh;   display:grid; background-color:var(--c1);  padding:0em 1em; border-radius:var(--radius); margin:var(--margin); box-shadow:0px 0px 5px 0px rgba(0,0,0,.05); align-content:start; overflow:hidden; overflow-y: auto; margin-left:1em; margin-right:1em;  }	
.page > .heading { color:var(--c3); }