app-contents {
	display:flex;
	width:100%;
}
app-holder {
	display: flex;
	flex-direction:column;
	flex-grow:1;
	overflow: hidden;
}
app-page {
	overflow: hidden;
	width:100%;
	display: flex;
	flex-direction:row;
	flex-grow:1;
}
app-page.hidden, app-page-main.hidden, app-page-side.hidden {
	position: absolute;
	opacity:0;
	visibility: hidden;
	left:-10000px;
}
app-page > * {
	display: block;
}
app-page-main {
	overflow: auto;
	width:100%;
}
app-page.sidebar app-page-main {
	width:70%;
}
app-page-side {
	width:30%;
	overflow: auto;
	border-left:1px solid var(--panel-border-color);
	flex-grow:1;
}
/* sizes */
app-page.max-content app-page-main { width:max-content; flex-grow:1; }
app-page.max-content app-page-side { width:max-content; flex-grow:0; }

app-page.fit-content app-page-main { width:fit-content; max-width:fit-content; flex-grow:1; }
app-page.fit-content app-page-side { width:fit-content; min-width:fit-content; }

app-page.s90-10 app-page-main { width:90%; max-width: none; }
app-page.s90-10 app-page-side { width:10%; }

app-page.s85-15 app-page-main { width:85%; max-width: none;}
app-page.s85-15 app-page-side { width:15%; }

app-page.s80-20 app-page-main { width:80%; max-width: none;}
app-page.s80-20 app-page-side { width:20%; }

app-page.s75-25 app-page-main { width:75%; max-width: none;}
app-page.s75-25 app-page-side { width:25%; }

app-page.s70-30 app-page-main { width:70%; max-width: none;}
app-page.s70-30 app-page-side { width:30%; }

app-page.s65-35 app-page-main { width:65%; max-width: none;}
app-page.s65-35 app-page-side { width:35%; }

app-page.s60-40 app-page-main { width:60%; max-width: none;}
app-page.s60-40 app-page-side { width:40%; }

app-page.s55-45 app-page-main { width:55%; max-width: none;}
app-page.s55-45 app-page-side { width:45%; }

app-page.s50-50 app-page-main { width:50%; max-width: none;}
app-page.s50-50 app-page-side { width:50%; }

app-page.s40-60 app-page-main { width:40%; max-width: none;}
app-page.s40-60 app-page-side { width:60%; }

app-page.s30-70 app-page-main { width:30%; max-width: none;}
app-page.s30-70 app-page-side { width:70%; }

app-page.s20-80 app-page-main { width:20%; max-width: none;}
app-page.s20-80 app-page-side { width:80%; }

app-content {
	padding:var(--panel-padding-x);
	min-height:100%;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
}

/* MENU */
app-contents app-menu {
	padding-right: var(--panel-padding-x);
	width:fit-content;
}
app-contents.menu-left app-menu {
	border-right:1px solid var(--panel-border-color);
}
app-contents.menu-right app-menu {
	border-left:1px solid var(--panel-border-color);
}
app-contents.menu-hidden app-menu {
	display: none !important;
}

app-menu ul.ns-menu {
	padding: var(--panel-padding-x) 0;
	list-style-type: none;
	--lvl:0;
}
app-menu ul.ns-menu ul.ns-menu {
	padding:0;
}
app-menu ul.ns-menu button {
	padding-top:var(--menu-button-padding-y);
	padding-bottom:var(--menu-button-padding-y);
	padding-left:calc( (var(--lvl) + 1) * var(--panel-padding-x) );
	text-align: left;
	background: transparent;
	white-space: nowrap;
}
app-menu ul.ns-menu button::before {
	position: absolute;
	content:'';
	width:0%;
	transition:width .3s;
	height:2px;
	background-color: var(--menu-active-bg-color);
	bottom:-1px;
	left:0px;
}
app-menu ul.ns-menu button.active::before {
	width:100%;
}
app-menu ul.ns-menu button.active {
	pointer-events: none;
	cursor: default;
}
app-menu ul.ns-menu button:hover {
	color:var(--menu-hover-color);
}
app-menu ul.ns-menu button[icon]:hover::after {
	opacity:1;
}
app-menu ul.ns-menu button[icon] {
	padding-left:calc( (var(--lvl) + 1) * var(--panel-padding-x) + var(--menu-button-icon) );
}
app-menu ul.ns-menu button[icon]::after {
    font-weight:300;
    font-size:24px;
    content:attr(icon);
	transition:all .3s;
    top:50%;
    left:calc( (var(--lvl) + 1) * var(--panel-padding-x) );
    transform:translateY(-50%);
	opacity:.25;
}
app-menu ul.ns-menu button[icon].active::after {
	opacity:1;
}
app-menu ul.ns-menu button.menu-has-child[icon] {
	padding-left:calc( (var(--lvl) + 1) * var(--panel-padding-x) );
	padding-right:var(--menu-button-icon);
	width:100%;
}
app-menu ul.ns-menu button.menu-has-child[icon]::after {
	opacity:.5;
	left:auto;
	right:0;
}
/* parent */
app-menu ul.ns-menu button.closed + ul.ns-menu > li:not(.active) {
	/*display: none;*/
	height:0;
	overflow: hidden;
}



/*app-menu ul.menu {
	display: flex;
	flex-direction:column;
	flex-grow:1;
	list-style-type: none;
	padding: var(--panel-padding-y) 0;
	z-index: 2;
}
app-menu ul.menu ul.menu li {
	padding-left: 1em;
}
app-menu ul.menu button + ul.menu {
	padding: 0;
}
app-menu ul.menu li {
	display: inline-block;
}
app-menu ul.menu button {
	padding:.5em 1em;
	text-align: left;
	width:100%;
	background: transparent;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
app-menu ul.menu button:not(.active):hover {
	color:var(--menu-hover-color);
}
app-menu ul.menu button.active {
	cursor: default;
	pointer-events: none;
	transition:none;
	background: var(--menu-active-bg-color);
	color:#fff;
}
app-contents.menu-left ul.menu button {
	border-top-right-radius:var(--border-radius);
	border-bottom-right-radius:var(--border-radius);
}
app-contents.menu-right ul.menu button {
	border-top-left-radius:var(--border-radius);
	border-bottom-left-radius:var(--border-radius);
}
app-contents.menu-left ul.menu button::after, app-contents.menu-right ul.menu button::after {
	opacity:0;
	height:100%;
	width:1000px;
	left:-1000px;
	top:0px;
	background-color: var(--menu-active-after-bg-color);
}
app-menu ul.menu button.active::after {
	opacity:1 !important;
}


app-menu ul.menu button.closed + ul.menu > li:not(.active) {
	height:0;
	overflow: hidden;
}
app-menu ul.menu button.menu-has-child {
	padding-right: 1.5em;
}
app-menu ul.menu button.menu-has-child::before {
	z-index: 1;
	border-top:8px solid var(--menu-arrow-bg);
	border-left:6px solid transparent;
	border-right:6px solid transparent;
	right:calc(1.5em / 2 - 3px);
	top:50%;
	margin-top:-4px;
}
app-menu ul.menu button.menu-has-child.closed::before {
	transform:rotate(90deg);
}*/

/* MENU ALIGNMENT */

/* left */
app-contents.menu-left {
	flex-direction:row;
}
/*app-contents.menu-left div.menu {
	border-right:1px solid var(--menu-border-color);
}*/
app-contents.menu-left ul.menu li {
	display: block;
}

/* right */
app-contents.menu-right {
	flex-direction:row-reverse;
}
/*app-contents.menu-right div.menu {
	border-left:1px solid var(--menu-border-color);
}*/
app-contents.menu-right ul.menu li {
	display: block;
}

/* top, bottom, width=100% */
app-contents.menu-top app-menu, app-contents.menu-bottom app-menu {
	padding:0;
	width:100%;
}
app-contents.menu-top app-menu li, app-contents.menu-bottom app-menu li {
	display:inline-block;
}

/* top */
app-contents.menu-top {
	flex-direction:column;
}
app-contents.menu-top ul.ns-menu {
	background-color: var(--menu-bg-color);
	flex-direction:row;
	padding:0;
}
app-contents.menu-top ul.ns-menu button {
	color: #fff;
	padding:var(--menu-button-padding-y) var(--menu-button-padding-x);
	background: transparent;
}
app-contents.menu-top ul.ns-menu button:not(.active):hover {
	color:var(--menu-hover-color2);
}
app-contents.menu-top ul.ns-menu button::before {
	display:none;
}
app-contents.menu-top ul.ns-menu button::after {
	position:absolute;
	content:'';
	top:auto;
	right:auto;
	left:50%;
	bottom:0px;
	border-bottom:0px solid var(--menu-arrow-color);
	border-left:7px solid transparent;
	border-right:7px solid transparent;
	border-top:none;
	transform:translateX(-50%);
	opacity:1;
	transition:all .3s;
}
app-contents.menu-top ul.ns-menu button.active::after,
app-contents.menu-top ul.ns-menu button:hover::after {
	border-bottom:7px solid var(--menu-arrow-color);
}


/* bottom */
app-contents.menu-bottom {
	flex-direction:column-reverse;
}
app-contents.menu-bottom ul.ns-menu {
	background-color: var(--menu-bg-color);
	flex-direction:row;
	padding:0;
}
app-contents.menu-bottom ul.ns-menu button {
	color: #fff;
	padding:var(--menu-button-padding-y) var(--menu-button-padding-x);
	background: transparent;
}
app-contents.menu-bottom ul.ns-menu button:not(.active):hover {
	color:var(--menu-hover-color2);
}
app-contents.menu-bottom ul.ns-menu button::before {
	display:none;
}
app-contents.menu-bottom ul.ns-menu button::after {
	position:absolute;
	content:'';
	top:0px;
	right:auto;
	left:50%;
	border-top:0px solid var(--menu-arrow-color);
	border-left:7px solid transparent;
	border-right:7px solid transparent;
	border-bottom:none;
	transform:translateX(-50%);
	opacity:1;
	transition:all .3s;
}
app-contents.menu-bottom ul.ns-menu button.active::after,
app-contents.menu-bottom ul.ns-menu button:hover::after {
	border-top:7px solid var(--menu-arrow-color);
}

/* center */
app-menu.center ul.ns-menu {
	display: block;
	text-align: center;
}
app-menu.center ul.ns-menu button {
	text-align: center;
}