:root{
	--primary: #3a85bd;
	--variant: #066ab1;
	--text1: #e6e7e7;
	--text2: #b9baba;
	--lvl0:#091114;
	--lvl1:#12191d;
	--lvl2:#1d2528;
	--lvl3:#22292d;
	--lvl4:#252d31;
	--lvl5:#2a3235;
	--lvl6:#2f373a;
	--lvl7:#323a3e;
	--lvl8:#373f42;
	--lvl9:#3c4447;
	--lvl10:#41494c;
	--fa-primary-color: var(--text2);
}
.viewport{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	color: var(--text2);
	font-family: 'Oswald', sans-serif;
	font-weight: 500;
	font-size: 14px;
	background: var(--lvl1);
}
nav{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 50px;
	box-shadow: 0 1px 2px 2px #0006;
	background: var(--lvl2);
	z-index: 10;
}
main{
	height: 100%;
	padding: 0 0 0 50px;
}
section.content{
	height: 100%;
	position: relative;
}
.menu-logo{
	background: url(../../clientside/images/stalland_icon.jpg) no-repeat center;
	height: 40px;
	width: 40px;
	margin: 5px;
	border-radius: 4px;
}
.nav-sep{
	width: 30px;
	margin: auto;
	height: 1px;
	background: var(--lvl7);
}
.menu-list{
	margin: 0 5px;
}
.menu-items {
	position: relative;
	height: 40px;
	width: 40px;
	margin: 5px 0 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	cursor: pointer;
	font-size: 20px;
	color: var(--text1);
}
.menu-items:hover{
	background: var(--lvl7);
}
.menu-tooltip{
	position: absolute;
	left: 60px;
	padding: 5px 10px;
	border-radius: 4px;
	background: var(--text1);
	font-size: 16px;
	color: var(--lvl1);
	display: none;
}
.menu-tooltip .arrow{
	position: absolute;
	height: 10px;
	width: 10px;
	background: var(--text1);
	top: 50%;
	margin-top: -5px;
	left: -5px;
	transform: rotate(45deg);
	border-bottom-left-radius: 2px;
}
.menu-items:hover .menu-tooltip{
	display: block;
}
.menu-selector{
	position: absolute;
	top: 0;
	bottom: 0;
	width: 5px;
	background: var(--variant);
	left: -7px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	display: none;
}
.menu-selected .menu-selector{
	display: block;
}
.account-box{
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
}
.account-avatar{
	height: 30px;
	width: 30px;
	margin: 10px;
	border-radius: 25px;
	background: var(--text2);
	cursor: pointer;
}
.home-vp{
	height: 100%;
	overflow: auto;
}