#app-appmenu {
	
	position: sticky;
	top: 0px;
	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	
	background-color: rgba(var(--ColorAccentBright), 0.5);
	backdrop-filter: blur(2px);
	
	box-shadow:
		inset 0px 11px 8px -10px #CCC,
        inset 0px -11px 8px -10px #CCC;
		
	z-index: 10;
		
}

#app-appmenu:before {
	
	content: "";
	
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	
	background-image: 
		repeating-radial-gradient( 
			circle at 0 0, 
			transparent 0, 
			rgb(var(--ColorAccentDark)) 10px ), 
		repeating-linear-gradient( 
			rgb(var(--ColorMid)), 
			rgb(var(--ColorAccentBright)) );

	z-index: -1;
	opacity: 0.1;

}

#app-appmenu-icons {
	
	display: flex;
	flex-direction: row;
	justify-content: start;
	align-items: center;
	
	margin-right: auto;
	padding: 1vw;
	
}

#app-appmenu-logo {
	
	content: "";
	
	position: absolute;
	top: 0px;
	
	width: 100px;
	height: 100px;
	
	margin: 1vh;
	margin-left: auto;
	margin-right: auto;
	
	padding: 1vh;
	
	background-color: rgba(var(--ColorBG), 1);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-origin: content-box;
	
	border-radius: 50%;
	
	box-shadow:
		inset 0px 11px 8px -10px #CCC,
        inset 0px -11px 8px -10px #CCC;
	
	z-index: 11;
	
	transition: 0.2s;
	
}

#app-appmenu-logo img {
	
	max-width: 100%;
	max-height: 100%;
	
}

#app-appmenu-action {
	
	display: flex;
	flex-direction: row;
	justify-content: start;
	align-items: center;
	
	margin-left: auto;
	padding: 1vw;
	
}

#app-appmenu-button {
	
	margin-left: 0.5vw;
	
	background-color: rgba(var(--ColorBG), 0.75);
	
	border-radius: 1vw;
	box-shadow:
		inset 0px 11px 8px -10px #CCC,
        inset 0px -11px 8px -10px #CCC;
	
}

#app-appmenu-button a {
	
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	
	padding: 0.5vw;
	
	color: rgb(var(--ColorText));
	font-weight: bold;
	
}

#app-appmenu-button:hover *,
#app-appmenu-button:active * {
	
	color: rgb(var(--ColorTextInvert));
	background-color: rgb(var(--ColorAccentBright));
	border-radius: 1vw;
	
}

.app-appmenu-icon {
	
	padding: 0.5vw;
	
	color: rgb(var(--ColorText));
	
}

.app-appmenu-icon:hover,
.app-appmenu-icon:active {
	
	color: rgb(var(--ColorTextInvert));
	
}

#app-appmenu-users {
	
	display: flex;
	flex-direction: row;
	
	width: 100%;
	
	color: rgb(var(--ColorText));
	background-color: rgba(var(--ColorBG), 0.8);
	
	margin-top: 2vh;
	
	box-shadow:
		inset 0px 11px 8px -10px #CCC,
        inset 0px -11px 8px -10px #CCC;
		
	z-index: 10;
	
}

#app-appmenu-users > .app-appmenu-icon:hover,
#app-appmenu-users > .app-appmenu-icon:active {
	
	color: rgb(var(--ColorAccentBright));
	
}

#app-appmenu-list {

	display: flex;
	flex-direction: column;
	
	width: 100%;
	
	z-index: 10;
	
}

.app-appmenu-navigate {
	
	width: 100%;
	
	padding: 1vw;
	
	color: rgb(var(--ColorTextInvert));
	
	background: linear-gradient(270deg, rgba(var(--ColorBG), 0.1), rgba(var(--ColorAccentBright), 0.5));
	
}

.app-appmenu-navigate:hover,
.app-appmenu-navigate:active {
	
	color: rgb(var(--ColorTextInvert));
	background: linear-gradient(270deg, rgba(var(--ColorBG), 0.1), rgba(var(--ColorAccentDark), 0.5));
	
}

.app-appmenu-navigate:hover:before,
.app-appmenu-navigate:active:before {
	
	content: "\f101 \0000a0";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	
}

@media only screen and (max-width: 480px) {
	
	#app-appmenu-logo {
		
		width: 50px;
		height: 50px;
		
	}
	
}