*::-webkit-scrollbar { 
			width:10px; 
			height:10px; 
			border:1px solid #888; 
				border-radius: 0 2px 2px 0;
			background-color:#ddd;
				box-shadow:inset 1px 1px 3px #555;
		}
		*::-webkit-scrollbar-button { 
			width:5px; 
			height:5px; 
		}
		*::-webkit-scrollbar-thumb:vertical { 
			min-height:20px;
			border:1px solid #557;
			border-radius:4px;
			background: linear-gradient(to right, #fff 0%, #ddd 10%, #888 90%, #666 100%) #ddd;
				box-shadow:1px 1px 3px #556;
		}
		*::-webkit-scrollbar-thumb:horizontal { 
			min-width:20px;
			border:1px solid #557;
			border-radius:4px;
			background: linear-gradient(to bottom, #fff 0%, #ddd 10%, #888 90%, #666 100%) #ddd;
				box-shadow:1px 1px 3px #556;
		}
	
:root {
	--font_sans:'OpenSans';
	--font_mono:'';
	--font_size:16px;

	--dark_color:#ddd;
	--dark_bg:#333;
	--dark_txtShadow:0 -1px #000;
	--dark_header_bg:linear-gradient(to bottom, #fff 0%, #ccc 5%, #aaa 25%, #888 100%) #888;
	--dark_menu_bg:#888;
	--dark_menu_color:#222;
	--dark_menu_border:#000b;
	--dark_menu_highlight:#bbb8;
	--dark_menu_border_highlight:#aaa;
	--dark_menu_shadow:#5554;
	--dark_menu_border_shadow:#555;
	--dark_menu_submenu_bg:#bbb;
	--dark_footer_bg:linear-gradient(to bottom, #888, #555) #888;

	--light_color:#333;
	--light_bg:#eee;
	--light_txtShadow:0 1px #fff;
	--light_header_bg:linear-gradient(to bottom, #fff 0%, #eee 5%, #ccc 25%, #bbb 100%) #bbb;
	--light_menu_bg:#bbb;
	--light_menu_color:#556;
	--light_menu_border:#444448bb;
	--light_menu_highlight:#fff8;
	--light_menu_border_highlight:#eee;
	--light_menu_shadow:#8884;
	--light_menu_border_shadow:#888;
	--light_menu_submenu_bg:#ddd;
	--light_footer_bg:linear-gradient(to bottom, #bbb, #888) #bbb; 
	
	--mobile_min:calc( var(--font_size)*33 );
	
		--color:var(--dark_color);
		--bg:var(--dark_bg);
		--header_bg:var(--dark_header_bg);
		--menu_bg:var(--dark_menu_bg);
		--menu_color:var(--dark_menu_color);
		--menu_border:var(--dark_menu_border);
		--menu_highlight:var(--dark_menu_highlight); 
		--menu_border_highlight:var(--dark_menu_border_highlight);
		--menu_shadow:var(--dark_menu_shadow);
		--menu_border_shadow:var(--dark_menu_border_shadow);
		--menu_submenu_bg:var(--dark_menu_submenu_bg);
		--footer_bg:var(--dark_footer_bg);
}
	/** Theme dark -- extras **************************************************************************************************/
	html.light { 
		--color:var(--light_color);
		--bg:var(--light_bg);
		--header_bg:var(--light_header_bg);
		--menu_bg:var(--light_menu_bg);
		--menu_color:var(--light_menu_color);
		--menu_border:var(--light_menu_border);
		--menu_highlight:var(--light_menu_highlight);
		--menu_border_highlight:var(--light_menu_border_highlight);
		--menu_shadow:var(--light_menu_shadow);
		--menu_border_shadow:var(--light_menu_border_shadow);
		--menu_submenu_bg:var(--light_menu_submenu_bg);
		--footer_bg:var(--light_footer_bg);
	}
		
		
		
	/* generics */
	html {
		margin:0; padding:0;
		width:100%;
		height:100%;
			color-scheme:dark;
			color:var(--color); background-color:#111; /*#888;*/
			font-family:var(--font_sans),sans-serif;
			font-size:var(--font_size);
			-webkit-text-size-adjust:none; text-size-adjust:none;
	}
		html.light { color-scheme:light; background-color:#888; }
		*, *::before, *::after {
			position:relative;
			box-sizing:border-box;
			vertical-align:top;
			cursor:inherit;
		}
		
		a { text-decoration:none; color:#49f; cursor:pointer; font-weight:bold; }
		a:visited, a:link, a:active, a:hover { color:#49f; }
		img { border:none; vertical-align:top; }
		img.icon { width:1.2em; margin:0.1em; }
		hr { width:100%; }
		pre, code { font-family:var(--font_mono),monospace; }
		*.BeapIconic { font-family:"BeapIconic"; line-height:1.25em; vertical-align:baseline; }
	
	body {	display:flex; flex-direction:column;
			margin:0; padding:0.5vh 0.5vw;
			width:100%;
			height:100%;
			font-size:0.85rem;
	}

		body > header { flex:0 0 1.8em; flex-wrap:nowrap;
			margin:0; padding:0.15em;
			
			font-size:clamp(24px,1.5rem,48px);
			line-height:1.5em;
			font-weight:800; 
			text-align:center; 
			text-shadow:0 0 4px #ddd, 0 1px 1px #eee, 0 1px #fff; 
			 
			border-radius:1.2em 0.8em 0 0;
			
			> img#domainIcon { flex:0 0 auto; margin-top:0.1em; margin-left:0.5em; max-height:1.3em; max-width:4em; color-scheme:light; }
			> span#pageTitle { flex:1 1 auto; text-wrap:nowrap; overflow:hidden; text-overflow:ellipsis; }
			> span#menuIcon { flex:0 0 auto; cursor:pointer; font-weight:900; text-shadow:-1px 0 1px #556,0 -1px 1px #888, 1px 1px 1px #fff, 0 1px #fff; }
			> img#userIcon { flex:0 0 auto; margin:0.1em; height:1.3em; width:1.3em; border-radius:0.65em; border:2px solid #fff8; overflow:hidden; box-shadow:inset 0 0 3px #333; }
		}

		body > menu { padding:0.1em 0.5em; font-size:clamp(15px, 0.85rem, 30px);

			overflow:visible; 
			flex-direction:row-reverse; flex-wrap:wrap; 
				
			&.collapsed { display:none; }
		}
		
		body > content { display:flex; flex-direction:column;
			padding:1rem; 
			
			&.httpErr { justify-content:space-around; padding:3rem 1rem; text-align:center; }
		}
		
		body > footer { display:flex; flex:0 0 clamp(16px,1.4rem,34px); flex-direction:row; 
			margin:0; padding:clamp(1px,0.1rem,3px); 
			color:#000; background:var(--footer_bg);
			
			font-size:clamp(10px,0.725rem,20px); 
			line-height:clamp(14px,1.2rem,28px);
			font-weight:700; 
			text-align:center; 
			text-shadow:0 0 2px #ddd, 0 1px #eee; 
			border-radius:0 0 0.5em 0.5em;
			
			a.impressum { display:inline-flex; flex:1 1; color:#556; text-shadow:none; font-size:0.8em; text-wrap:nowrap; justify-content:center; overflow:hidden; margin:0 auto; }
			a.impressum:visited, a.impressum:link { color:#556; }
			.vers_copy { color:#000; text-shadow:0 0 2px #bbb,0 1px 1px #ccc; font-size:1.25em; cursor:pointer; }
			&:hover {
				a.impressum { color:#248; text-shadow:0 1px 1px #ccc; }
				a.impressum:visited, a.impressum:link, a.impressum:active { color:#248; }
				.vers_copy { color:#eb0;  text-shadow:0 1px 2px #003, 0 0 6px #000; }
			}
		}
			
		
	/** generic Flex-Container: <header><menu><content><footer>   **************************************************************************************************/
		/* parent-container: { display:flex; flex-direction:column; } */
		header { 
			display:flex; flex-direction:row; flex:0 0 1.66rem; padding:0.2rem; line-height:1.15rem; font-size:1.15em; font-weight:bold; 
			background:var(--header_bg); color:#222; text-shadow:0 1px 1px #fff8; 
			border:1px solid var(--menu_border); border-top:none;/*1px solid var(--menu_border_highlight);*/ border-bottom:1px solid var(--menu_border_shadow); 
			box-shadow:inset 2px 3px 3px var(--menu_highlight);
			overflow:hidden; 
			
			& > img { height:1.2em; margin:0 0.2rem; }
		}
		menu { 
			display:flex; flex-direction:row; flex:0 0 auto; margin:0; padding:0.05em 0.25em; line-height:1.4em; 
			background:var(--menu_bg); color:var(--menu_color); 
			border:1px solid var(--menu_border); border-top:1px solid var(--menu_border_highlight); border-bottom:1px solid var(--menu_border_shadow); 
			box-shadow:inset 2px 1px 3px var(--menu_highlight);
			list-style-type:none; overflow:hidden; 
			
			item { 
				flex: 0 0 auto; padding: 0 2px; 
				margin:0 0.05em; cursor:pointer; 
				
				& img { height:1.2em; margin:0.1em; cursor:inherit; vertical-align:top; }
				
				&[disabled="true"] { opacity:0.5; cursor:default; }
				&.spacer { flex:2 1 auto; cursor:default; }
				&.divider { flex:0 0 auto; cursor:default; padding:0; margin:3px; border-left:1px solid var(--menu_border_shadow); border-right:1px solid var(--menu_border_highlight); }
				&.group { 
					flex:1 1 auto; 
					display:flex; flex-direction:row; 
					flex-wrap:nowrap; 
					
					&.fixed { flex:0 0 auto; }
					
					&:last-child > item.divider { display:none; }
				}
				
				&:hover > submenu { display:flex; }
			}
			
			submenu { display:none; 
				flex-direction:column; 
				position:absolute; 
				z-index:99;
				left:-0.5em; 
				background:var(--menu_submenu_bg);
				color:var(--menu_color);
				border:1px solid var(--menu_border);
				border-radius:0.66em 0.3em 2px 2px;
				box-shadow:0 1px 5px 1px #000c, inset 1px 2px 1px #fff8;
				min-width:8em; max-width:18em;
				overflow:hidden;
				
				&.right { left:auto; right:-0.5em; }
				
				item { 
					flex:0 0 1.5em; width:100%; 
					margin:0; padding:0 0.25em; 
					min-width:10em; 
					display:flex; flex-direction:row; 
					text-wrap:nowrap; overflow:hidden; 
					align-items:center; 
					
					&:hover { background:var(--menu_shadow); color:#000; text-shadow:0 1px 1px #fff8; }
					&:hover > submenu { display:flex; }
					
					&.title { font-weight:bold; background:var(--menu_shadow); color:#000; text-shadow:0 1px 1px #fff8; border-top:1px solid #fff8; border-bottom:1px solid var(--menu_border_shadow); padding:0 0.5em; }
					
					& img { height:1.2em; margin:0.1em; cursor:inherit; vertical-align:top; }
					& > .descr { font-size:0.75em; font-style:italic; }
					& > .item_val { padding:0 0.25em; margin:0 0.25em; border:1px solid var(--menu_border_shadow); border-radius:0.5em 0.25em 2px 2px; }
				}
			}

		}
		content { 
			flex:1 1 auto; margin:0; padding:0.1em; 
			overflow:auto; 
			background:var(--bg);
			color:var(--color);
			border-left:1px solid var(--menu_border);
			border-right:1px solid var(--menu_border);
			box-shadow:inset 0 0 2px #888; 
		}
		footer { 
			flex:0 0 1em; font-size:0.725rem; line-height:1.2em; padding:0 0.25em; 
			background:var(--footer_bg); color:#333; 
			border:1px solid var(--menu_border); border-top:1px solid var(--menu_border_highlight); border-bottom:none;/*1px solid var(--menu_border_shadow);*/ 
			box-shadow:inset 2px 1px 3px var(--menu_highlight), inset -2px -3px 3px #0004, inset 0 -1px 1px #000; 
			overflow:hidden; 
			
			item {
				flex:0 0 auto; cursor:default;
				
				&.spacer { flex:5 5 auto; }
				&.divider { padding:0; margin:3px; border-left:1px solid var(--menu_border_shadow); border-right:1px solid var(--menu_border_highlight); }
			}
			
			&:hover { color:#000;  text-shadow:0 1px 1px #fff; transition:color 0.3s ease-in, text-shadow 0.3s ease-out; }
		}


	/** inputs **/
		button, input[type="button"] { 
			box-shadow:1px 1px 3px #000; 
			border:1px solid;
			border-color: #eee #bbb #556 #ddd;
			background: linear-gradient(to bottom, #eee 0%, #ccc 45%, #bbb 45%, #888 100%) #ccc;
			text-shadow: 0 1px #ddd, 1px 1px #ccc;
			margin:0 0.25em;
			border-radius:0.5em 0.25em 0.1em 0.1em;
			font-family:var(--font_sans),sans-serif;
			font-weight:700;
			font-size:1em;
			color:#333;
			cursor:pointer;
			
			&:hover { color:#000; background: linear-gradient(to bottom, #fff 0%, #ddd 35%, #bbb 45%, #666 100%) #ccc; outline:1px solid #eb0; outline-offset:2px; }
			&:active, &:focus { border:1px solid #fb0; }
			&:disabled, &[disabled] { opacity:0.5; cursor:default; }
			
			& img { height:1.2em; margin:0 0.1em; }
		}

		input[type="text"], input[type="password"] {
			padding: 0 0.25em 0 0.5em;
			border:1px solid #888;
			border-radius:0.5em 0.25em 0.1em 0.1em;
			background:#eeeb;
			font-family:var(--font_sans),sans-serif;
			font-weight:700;
			font-size:1em;
			color:#333;
			box-shadow:inset 0 1px 4px #5558;
			
			&:hover { outline:1px solid #eb0; }
			&:focus, &:focus-visible { background:#eee; outline:1px solid #fb0; }
			&:disabled, &[disabled] { opacity:0.5; cursor:default; }
		}
		
		select {
			padding: 0 0.25em 0 0.5em;
			border:1px solid #888;
			border-radius:0.5em 0.25em 0.1em 0.1em;
			background:#eeeb;
			font-family:var(--font_sans),sans-serif;
			font-weight:700;
			color:#333;
			box-shadow:inset 0 1px 4px #5558;
			
			&:hover { outline:1px solid #eb0; }
			&:focus, &:focus-visible { background:#eee; outline:1px solid #fb0; }
			&:disabled, &[disabled] { opacity:0.5; }
			
			&option { 
				font-size:0.8em; 
				background:#ddd; 
				
				&:hover { background:#bbb; color:000; text-shadow:0 1px 1px #fff8; }
			}
		}
	
	/* custom controls */
		progressbar { height:1.6em; min-width:6em;
			box-shadow:1px 1px 3px #000; 
			border:1px solid;
			border-color: #eee #bbb #556 #ddd;
			background:#bbb8;
			text-shadow: 0 1px #ddd, 1px 1px #ccc;
			margin:0 0.25em;
			border-radius:0.5em 0.25em 0.1em 0.1em;
			font-family:var(--font_sans),sans-serif;
			font-weight:700;
			font-size:1em;
			color:#333;
			overflow:hidden;
			cursor:default;
			
			progressval {
				display:block; width:0; height:100%;
				background: linear-gradient(to bottom, #eee 0%, #ccc 40%, #ab8 50%, #684 100%) #ccc;
				box-shadow: 1px 0 2px #556;
				transition: width 0.2s ease-in-out;
			}
			progresslbl { position:absolute; top:0.2em; width:100%; text-align:center; }
		}
		
	/** overlay - contextmenu, msgbox **/
		overlay { position:absolute; top:0; left:0; z-index:100; width:100%; height:100%; background:#8884; display:none; overflow:hidden; backdrop-filter:blur(1px); }
		.light overlay { background:#0006; }
		overlay.expanded { display:block; }

		contextmenu { position:absolute; display:flex; flex-direction:column;
			padding:0;width:max-content;
			background:var(--menu_submenu_bg);
			color:var(--menu_color);
			border:1px solid var(--menu_border);
			border-radius:0.66em 0.3em 2px 2px;
			box-shadow:0 1px 5px 1px #000c, inset 1px 2px 1px #fff8;
			cursor:pointer;
			overflow:hidden;
			
			item { 
				flex:0 0 1.5em; width:100%; 
				margin:0; padding:0 0.25em; 
				min-width:10rem; max-width:20rem; 
				display:flex; flex-direction:row; 
				text-wrap:nowrap; overflow:hidden;
				align-items:center; 
				
				img { height:1.2em; margin:0.1em; cursor:inherit; vertical-align:top; }
				&:hover { background:var(--menu_shadow); color:#000; text-shadow:0 1px 1px #fff8; }
				
				&.title { font-weight:bold; background:var(--menu_shadow); color:#000; text-shadow:0 1px 1px #fff8; border-top:1px solid #fff8; border-bottom:1px solid var(--menu_border_shadow); padding:0 0.5em; }
			}
		}

		msgbox { position:absolute;
			display:flex; flex-direction:column;
			top:3rem; right:0;
			padding:0;
			width:30rem; 
			min-height:20%; max-height:80%;
			transition:all 0.5s ease-in-out;
			background:var(--bg);
			color:var(--color);
			border:1px solid #000;
			border-radius:1.05rem 0 0 0.55rem;
			box-shadow:0 1px 9px 1px #000c, inset 1px 2px 1px var(--menu_highlight);
			cursor:default;
			overflow: visible;
		
			> img.icon { position:absolute; top:-1.25rem; left:-1.75rem; z-index:1; height:4rem; width:4rem; }
			&.hidden { 
				width: 0em; transition:all 0.5s ease-in-out; 
				
				> img.icon { display:none; }
			}
			
			> header { padding: 0.2rem 0.5rem 0.2rem 2.5rem; overflow:hidden; border-radius:1rem 0 0 0; } /* min usable width: 19rem; */
			> content { min-height:6rem; padding: 0.5em 0.5rem 0.5rem 2.5rem; overflow-x:hidden; overflow-y:auto; } /* min usable width: 21rem; */
			> footer { 
				flex: 0 0 auto; min-height:0.5rem; padding:0.25rem 1rem 0.25rem 2.5rem; overflow:hidden; /* min usable width: 19rem; */
				display:flex; flex-direction:row; 
				border-radius:0 0 0 0.5rem; 
				
				button { justify-content:center; width:6rem; }
				progressbar { flex:1 1 auto; }
			}
		}
	
	/** page-related **/
		content h1 { font-size:3rem; margin:0.75rem auto; text-align:center; }
		content h2 { font-size:2rem; margin:0.75rem auto; text-align:center; }
		content h3 { font-size:1.5rem; margin:0.75rem auto; text-align:center; }
		
		body.error > content { 
			padding:3rem; text-align:center; 
			
			& h1 { font-size:2.5rem; color:#b20;  }
		}
		
		
	/* upload-related */
	msgbox div.upload { 
		width:21rem; margin:0 auto; 
		
		h3.uploadHead { width:21rem; text-align:left; margin:0 0 0.5rem 0; }
		
		form.uploadForm { 
			width:21rem; margin:0; 
			
			input { font-size:1.15rem; width:21rem; margin:0.5rem 0; }
			
			div.fileSelector { min-height:1.5rem; 
				box-shadow:1px 1px 3px #000; 
				border:1px solid;
				border-color: #eee #bbb #556 #ddd;
				border-radius: 0.5rem 0.25rem 0.1rem 0.1rem; 
				background: linear-gradient(to bottom, #eee 0%, #ccc 45%, #bbb 45%, #888 100%) #ccc;
				text-shadow: 0 1px #ddd, 1px 1px #ccc;
				
				&:hover { color:#000; background: linear-gradient(to bottom, #fff 0%, #ddd 35%, #bbb 45%, #666 100%) #ccc; outline:1px solid #eb0; outline-offset:2px; }
				input[type="file"] { 
					position:absolute; width:100%; height:100%; margin:0; opacity:0; z-index:10; cursor:pointer; 
					
					&:disabled { cursor:default; }
					&::file-selector-button { cursor:inherit; }
				}
				item { 
					display:flex; flex-direction:row; 
					width:100%; height:1.5rem; 
					line-height:1.5rem; 
					overflow:hidden;
					
					img.fileIcon { height:1.2rem; vertical-align:baseline; margin:0.1rem; }
				}
				item.placeHolder { margin:0.1rem 0; font-weight:bold; color:#555; text-align:center; }
			}
			
			div.fileSelection { width:21rem; min-height:3rem; margin:0.5rem 0; padding:0; list-style-type:none;
				background:#8882;
				border:1px solid; 
				border-color:var(--menu_border_shadow) var(--menu_border_highlight) var(--menu_border_highlight) var(--menu_border_shadow); 
				border-radius: 0.5rem 0.25rem 0.1rem 0.1rem; 
				box-shadow:inset 1px 1px 2px #0008;
				overflow:hidden;
				
				item { 
					display:flex; flex-direction:row; width:100%; height:1.5rem; line-height:1.5rem; overflow:hidden;
					
					img.fileIcon { height:1.2rem; vertical-align:baseline; margin:0.1rem; }
					span.fileName { display:inline-block; width:10rem; font-weight:bold; overflow:hidden; text-overflow:ellipsis; text-wrap:nowrap; }
					span.fileSize { display:inline-block; width:3rem; font-size:0.7rem; overflow:hidden; padding-right:0.25rem; text-align:right; }
					span.fileType { display:inline-block; width:6rem; font-size:0.7rem; overflow:hidden; text-overflow:ellipsis; text-wrap:nowrap; }
					
					&:hover { background:var(--menu_shadow); }
				}
			}
		}
	
		div.uploadResponse { 
			width:21rem; margin:1rem 0; 
			h1, h2, h3 { text-align:left; margin:0.5rem 0; }
		}
	}
		
	/* login-related */
	msgbox div.login { 
		width:21rem; margin:0 auto;
		h2.loginHead { width:21rem; text-align:left; margin:0 0 1rem 0; }
		form.loginForm { 
			width:21rem; margin:0; 
			
			select, input { font-size:1.15rem; width:21rem; margin:0.33rem 0; border:1px solid #556; }
			select option { width:20rem; overflow:hidden; }
		}
		div.loginResponse { 
			width:21rem; margin:1rem 0; 
			h1, h2, h3 { text-align:left; margin:0.5rem 0; }
		}
		
	}

	/* logout-related */
	body.logout {
		> content { 
			padding:3rem; 
			
			#logout_title { min-width:21rem; text-align:left; }
		}
	}

	/* fileViewer-related */
	body.fileViewer {
		> menu { 
			input#nav_input { 
				flex: 2 1 auto; max-width:30rem; width:13rem; /* set width to prevent browsers auto-width */
				border-color:var(--menu_border_shadow); background:var(--menu_border_highlight); 
				
				&:focus { background:#eee; }
			} 
		}
		> content { padding:0.5rem 0.5rem 5.5rem 0.5rem; overflow:auto; }
	} 
		
	/* editor-related */
	body.editor {
		> menu { 
			input#editor_input { 
				flex: 2 1 auto; max-width:30rem; width:13rem; /* set width to prevent browsers auto-width */
				border-color:var(--menu_border_shadow); background:var(--menu_border_highlight); 
				
				&:focus { background:#eee; }
			} 
		}
		> content { 
			padding:0; font-size:0.75rem; 
			
			> .cm-editor { height:100%; }
			.cm-editor .cm-scroller { font-family:var(--font_mono),monospace; }
			.cm-layer { position:absolute; width:100%; height;100%; }
			.ͼo.cm-focused .cm-selectionBackground, .ͼo .cm-selectionBackground, .ͼo .cm-content ::selection { background-color:#556; }
		}
	} 

	/* log-related */
	body.logViewer {
		
		> content { 
			font-family:var(--font_mono),monospace; font-size:0.7rem; 
			padding:0.25rem; -webkit-text-size-adjust:none; text-size-adjust:none; 
			background:#282828; color:#ddd; /* no light theme for logViewer */
		}
		
		log { 
			display:block; position:relative; padding: 0 0 0 30em; margin:0; white-space:pre-wrap; 
			
			.logType { position: absolute; left: 0; width:3em; }
			.logDate { position: absolute; left: 3.25em; top:0.1em; color:#888; font-size:0.8em; font-weight:normal; font-style:normal; }
			.logSrc { position: absolute; left: 14em; width:15.5em; }
			
			&.CORE { color:#fb0; font-weight:bold; font-style:italic; }
			&.module { color:#f80; font-style:italic; }
			&.module .logType { color:#fb0; font-style:normal; }
			&.ERR { color:#d10;  }
			&.WARN { color:#f80; }
			&.REQ { color:#4af; }
			&.RESP { color:#6fb; }
			&.IO { 
				/*border-bottom:1px solid #345; border-top:1px solid #345; background-color:#38383c;*/ 
				
				.logType { font-weight:bold; }
				&.CONN { color:#0ef; }
				&.WARN { color:#f80; }
				&.REQ { color:#0ef; margin-top:0.5em; font-weight:bold; }
				&.RESP { color:#4b0; margin-bottom:0.5em; border-top:1px solid #345c; border-bottom:1px solid #3454; background-color:#333c3088; }
			}
		}

		> footer { flex:0 0 auto; padding:0.25rem; }
	}

	/* console-related */
	body.console {
		> content { 
			font-family:var(--font_mono),monospace; 
			padding:0.25rem 0;
			
			audio { height:2em; }
			video { max-width:600px; }
			iframe { min-width:600px; max-width:900px; min-height:400px; max-height:600px; }
			
			query, response, logwarn, stdout {
				display:flex;
				flex-direction:column;
				flex:0 0 auto;
				position:relative;
				padding: 2px 2px 4px 2px;
				margin-left:2em;
				border-bottom: 1px solid #888;
					min-height:1.5em;
					min-width:90%;
					box-sizing: border-box;
					word-break: break-word;
					
				&:before {
					display:inline-block;
					position:absolute; 
					top:2px; left:-1.66em;
					font-weight:bold;
					color:#fff;
					color:rgba(255,255,255,0.6);
				}
				
				& pre { 
					margin:0; padding:0; 
					text-wrap:wrap; 
					font-family:var(--font_mono),monospace; 
				}
			}
			query {
				color:#bbb;
				text-shadow:0 0 1px #88e;
				border-bottom: 1px solid #444;
				
				&:before { content:'\003C=|'; text-shadow:0 0 2px #08f; }
			}
			response {
				&:before { content:'=>|'; text-shadow:0 0 2px #2f0; }
				&.err {
					color: #f60; 
					:before { text-shadow:0 0 2px #f20; }
				}
			}
			logwarn { 
				color: #fe0; 
				
				&:before { content:"!!"; text-shadow:0 0 2px #fd0; }
			}
			stdout {
				&.err { color: #f60; }
			}
		}
		
		/* footer -> prompt */
		> footer { 
			flex:0 0 auto; padding:0.5em; flex-wrap:wrap; 
			
			textarea {
				display:block; flex-basis:100%;
				font-size:0.85rem;
				width:100%; max-width:100%;
				min-height:6em; max-height:12em;
				margin:0 0 0.25em 0;
				padding: 0.25em 0.25em 0.25em 1em;
				-webkit-appearance:none; 
				outline:none;
				font-family:var(--font_mono),monospace;
				text-shadow:0 0 1px #88e;
					background-color:#333;
					color:#eee;
					border:1px solid;
					border-color:#000 #ddd #eee #000;
					border-radius:1.2em 0.6em 0.25em 0.25em;
					box-shadow:inset 0 1px 4px #001;
			}
		}
	}
	
	/* vfs-related */
		file { display:flex; flex-direction:row; flex-wrap:wrap; flex:0 0 auto; color:#bbb; min-height:1.2em; cursor:default; }
		file:hover { background:#1112; }
		file:before { flex:0 0 1.25em; height:1.2em; width:1.2em; vertical-align:top; }
		file_name { display:inline-flex; flex:5 1 9em; text-wrap:nowrap; overflow:hidden; color:#fff; padding:0 0.25em; cursor:pointer; align-items:baseline; -webkit-user-select: none; user-select: none;}
		file_name > .type { font-size:0.8em; vertical-align:baseline; opacity:0.8; padding:0 0.5em; cursor:inherit; }
		file_attributes { display:inline-flex; flex:1 0 auto; font-size:0.75em; justify-content:flex-end; align-items:baseline; }
			file_datetime  { display:inline-block; padding:0 0.25em 0 0; width:12.5em; text-wrap:nowrap; overflow:hidden; color:#4ba; }
			file_size { display:inline-block; text-align:right; width:5em; padding:0 0.25em 0 0; color:#6af; }
			file_elems { display:inline-block; text-align:right; width:5em; padding:0 0.25em 0 0; color:#6af; display:none; }
				html.long file_elems { display:inline-block; width:3em; }
			file_mimetype  { display:inline-block; width:9em; padding:0 0.25em 0 0; text-wrap:nowrap; overflow:hidden; }
		file_details { display:none; flex:1 0 auto; font-size:0.66em; justify-content:flex-end; align-items:baseline; }
			html.long file_details  { display:inline-flex; }
			file_fid, file_uid, file_gid, file_cid { display:inline-block; font-family:var(--font_mono),monospace; padding:0 0.25em 0 0; width:7.5em;  }
			file_fid { color:#fff; width:8em; }
			file_uid.match, file_gid.match, file_cid.match { color:#4b0; }
			file_mode { display:inline-block; width:4em; font-family:var(--font_mono),monospace; padding:0 0.25em 0 0;  }
			file_mode.match { color:#4b0; }
			file_mode.fail { color:#b20; }
			file_mode.effMode { color:#4b0; font-weight:bold; }
			file_links { display:inline-block; text-align:right; width:2em; font-family:var(--font_mono),monospace; padding:0 0.25em 0 0; color:#6af;  }

		file:before { content:url("/beap/css/imgs/files/file_default.svg"); }
		file.file_hidden:before { content:url("/beap/css/imgs/files/file_hidden.svg"); }
		file.file_unknown:before { content:url("/beap/css/imgs/files/file_unknown.svg"); }
		
		file.file_txt:before { content:url("/beap/css/imgs/files/file_txt.svg"); }
		file.file_html:before { content:url("/beap/css/imgs/files/file_html.svg"); }
		file.file_script:before { content:url("/beap/css/imgs/files/file_script.svg"); }
		file.file_code:before { content:url("/beap/css/imgs/files/file_code.svg"); }
		
		file.file_pdf:before { content:url("/beap/css/imgs/files/file_pdf.svg"); }

		file.file_img:before { content:url("/beap/css/imgs/files/file_img.svg"); }
		file.file_vector:before { content:url("/beap/css/imgs/files/file_vector.svg"); }
		file.file_3D:before { content:url("/beap/css/imgs/files/file_3D.svg"); }
		file.file_audio:before { content:url("/beap/css/imgs/files/file_audio.svg"); }
		file.file_video:before { content:url("/beap/css/imgs/files/file_video.svg"); }
		
		file.file_zip:before { content:url("/beap/css/imgs/files/file_zip.svg"); }
		file.file_font:before { content:url("/beap/css/imgs/files/file_font.svg"); }
		file.file_exe:before { content:url("/beap/css/imgs/files/file_exe.svg"); }
		file.file_nodejs:before { content:url("/beap/css/imgs/files/file_nodejs.svg"); }
		file.file_beap:before { content:url("/beap/css/imgs/files/file_beap.svg"); }

		file.file_server:before { content:url("/beap/css/imgs/files/file_server.svg"); }
		file.file_conf:before { content:url("/beap/css/imgs/files/file_conf.svg"); }
		file.file_cert:before { content:url("/beap/css/imgs/files/file_cert.svg"); }
		file.sys_stream:before { content:url("/beap/css/imgs/files/file_stream.svg"); }
		file.sys_process:before { content:url("/beap/css/imgs/files/file_process.svg"); }
		file.sys_sess:before { content:url("/beap/css/imgs/files/file_session.svg"); }

		file.db_class:before { content:url("/beap/css/imgs/files/db_class.svg"); }
		file.db_id:before { content:url("/beap/css/imgs/files/db_id.svg"); }
		file.db_field:before { content:url("/beap/css/imgs/files/db_field.svg"); }
		file.db_fieldArr:before { content:url("/beap/css/imgs/files/db_fieldArr.svg"); }
		file.db_obj:before { content:url("/beap/css/imgs/files/db_obj.svg"); }
		file.db_objArr:before { content:url("/beap/css/imgs/files/db_objArr.svg"); }
		file.db_category:before { content:url("/beap/css/imgs/files/db_category.svg"); }
		file.db_value:before { content:url("/beap/css/imgs/files/db_value.svg"); }
		file.db_entry:before { content:url("/beap/css/imgs/files/db_entry.svg"); }
		file.db_attr:before { content:url("/beap/css/imgs/files/db_attr.svg"); }
			file.db_class > file_attributes > file_size,
			file.db_id > file_attributes > file_size,
			file.db_field > file_attributes > file_size,
			file.db_fieldArr > file_attributes > file_size,
			file.db_obj > file_attributes > file_size,
			file.db_objArr > file_attributes > file_size,
			file.db_category > file_attributes > file_size,
			file.db_value > file_attributes > file_size { display:none; }
			html.long file.db_class > file_attributes > file_size,
			html.long file.db_id > file_attributes > file_size,
			html.long file.db_field > file_attributes > file_size,
			html.long file.db_fieldArr > file_attributes > file_size,
			html.long file.db_obj > file_attributes > file_size,
			html.long file.db_objArr > file_attributes > file_size,
			html.long file.db_category > file_attributes > file_size,
			html.long file.db_value > file_attributes > file_size { display:inline-block; }
			file.db_class > file_attributes > file_elems,
			file.db_id > file_attributes > file_elems,
			file.db_field > file_attributes > file_elems,
			file.db_fieldArr > file_attributes > file_elems,
			file.db_obj > file_attributes > file_elems,
			file.db_objArr > file_attributes > file_elems,
			file.db_category > file_attributes > file_elems,
			file.db_value > file_attributes > file_elems { display:inline-block; }

		file.file_link:before { content:url("/beap/css/imgs/actions/link.svg"); }

		file.file_xls:before { content:url("/beap/css/imgs/files/_file_win_xls.png"); }
		file.file_doc:before { content:url("/beap/css/imgs/files/_file_win_doc.png"); }
		file.file_ppt:before { content:url("/beap/css/imgs/files/_file_win_ppt.png"); }

		file.file_folder:before { content:url("/beap/css/imgs/files/folder.svg"); }
		file.folder_special:before { content:url("/beap/css/imgs/files/folder_special.svg"); }


		file.noPerm { opacity:0.6; }
		file.noPerm > file_name { cursor:default; }
		file.noPerm file_mode.effMode { color:#b20; }

		file.folder_special > file_name { color:#6af; font-weight:bold; }
		file.file_folder > file_name { color:#fd0; }
			file.file_folder > file_attributes > file_size,
			file.folder_special > file_attributes > file_size { display:none; }
			html.long file.file_folder > file_attributes > file_size,
			html.long file.folder_special > file_attributes > file_size { display:inline-block; }
			file.file_folder > file_attributes > file_elems,
			file.folder_special > file_attributes > file_elems { display:inline-block; }

		file.sys_sess > file_name,
		file.sys_process > file_name,
		file.sys_stream > file_name { color:#0d8; }
		
		file_members { display:block; flex-basis:100%; padding:0 0 0 1em; border-left:1px solid #8358; border-radius:0.33em; min-height:0.66em; }
		file_members:hover { border-left-color:#f6b;  }
		file[collapsed=true] > file_members { display:none; }
		file.file_folder[collapsed=false]:before { content:url("/beap/css/imgs/files/folder_open.svg"); }
		file.folder_special[collapsed=false]:before { content:url("/beap/css/imgs/files/folder_special_open.svg"); }
		file.db_category[collapsed=false]:before { content:url("/beap/css/imgs/files/db_category_open.svg"); }

	/* json-related */
		obj, arr, func { position:static; display:block; vertical-align:top; height:auto; padding-left:0.25em; padding-right:0.25em; border-left:1px solid #8358; border-radius:0.5em; }
		obj:hover, arr:hover, func:hover { border-left-color:#f6b; background:#1112; }
			obj.collapsed, 
			arr.collapsed,
			func.collapsed,
			obj.collapsed obj,
			obj.collapsed arr,
			obj.collapsed func,
			arr.collapsed obj,
			arr.collapsed arr,
			arr.collapsed func { display:inline-block; padding-left:0; height:1.25em; overflow:hidden; border-left-color:transparent; }    
		
		func { color:#fff; }
		
		prop { display:block; vertical-align:top; padding-left:1.25em; padding-right:0.25em; }
			prop > div { padding:0.25em 1em 0.5em 2em; font-size:0.85em; font-style:italic; font-weight:normal; white-space:pre; width:max-content; color:#cef; background:#444; border-radius:1em 0.33em 0.1em 0.1em; box-shadow:0 2px 4px #0008; border-bottom:1px solid #8888; }
			prop > div:hover { color:#fff; text-shadow:0 0 4px #000; border-bottom-color:#bbb; background:#445; }
			prop > div:before { content:url("/beap/css/imgs/notifications/info.svg"); position:absolute; top:0.2em; left:0.2em; opacity:0.8; width:1.66em; height:1.66em; }

			obj.collapsed > prop, 
			arr.collapsed > prop,
			obj.collapsed obj > prop,
			obj.collapsed arr > prop,
			arr.collapsed obj > prop,
			arr.collapsed arr > prop { display:inline-block; padding-left:0; }
		
			func > prop { color:#cef; }
			func.collapsed > prop,
			obj.collapsed func > prop,
			arr.collapsed func > prop { display:none; }
			
		delim { display:none; padding:0 0.25em 0 0; }
			obj.collapsed prop:last-child > delim,
			arr.collapsed prop:last-child > delim { display:none; }
			obj.collapsed delim,
			arr.collapsed delim { display:inline-block; }
		
		
		handle { display:block; position:absolute; top:-0.1em; left:0.1em; z-index:2; width:1.25em; font-weight:bold; color:#f088; cursor:pointer; padding:0; }
		handle:hover { color:#f08; }
			obj.collapsed obj > handle,
			obj.collapsed arr > handle,
			obj.collapsed func > handle,
			arr.collapsed obj > handle,
			arr.collapsed arr > handle,
			arr.collapsed func > handle { display:none; }
		
		type { display:inline-block; padding:0 0.5em; color:#89a; font-style:italic; font-size:0.85em; text-shadow:0 0 3px #000; vertical-align:bottom; }
			obj.collapsed > type,
			arr.collapsed > type,
			obj.collapsed obj > type,
			obj.collapsed arr > type,
			obj.collapsed func > type,
			arr.collapsed obj > type,
			arr.collapsed arr > type,
			arr.collapsed func > type { display:none; }
		
		objType { display:inline-block; padding:0.2em 0.25em 0 0.25em; color:#fb0; font-style:italic; font-size:0.85em; text-shadow:0 0 3px #000; }	
		
		key, idx { display:inline-block; color:#bbb; font-style:italic; }
			arr.collapsed > prop > idx,
			obj.collapsed arr > prop > idx,
			arr.collapsed arr > prop > idx	{ display:none; }
		assign { display:inline-block; padding:0 0.25em; }
			arr.collapsed > prop > assign,
			obj.collapsed arr > prop > assign,
			arr.collapsed arr > prop > assign { display:none; }
		
		val { display:inline-block; color:#bbb; vertical-align:top; }
		val.null, val.undefined, val.unknown { color:#fb0; font-weight:bold; text-shadow:0 0 3px #000; }
		val.circular { color:#f80; font-weight:bold; text-shadow:0 0 3px #000; }
		val.string { color:#4b0; }
		val.number { color:#6af; }
		val.boolean { color:#fd0; }
		val.date { color:#4ba; }
		val.regexp { color:#4ba; }
			obj.collapsed val > type,
			arr.collapsed val > type { display:none; }
		val.id { color:#0d8; font-style:italic; text-shadow:0 0 3px #000; }
		val.buffer { color:#4ba; }

		span.collapsable { padding-left:0.25em; }
		obj.collapsed .collapsable,
		arr.collapsed .collapsable { display:none; }
		
		prop.nonEnumerable > key, 
		prop.nonEnumerable > idx { color:#89a; opacity:0.75; font-weight:bold; }
		prop.nonEnumerable > assign, 
		prop.nonEnumerable > val { opacity:0.75; }
		obj.collapsed prop.nonEnumerable,
		arr.collapsed prop.nonEnumerable { display:none; }
		
		obj.collapsed > prop.Error > key, 
		obj.collapsed > prop.Error > assign,
		obj.collapsed > prop.Error > delim { display:none; }
		prop.Error > val { color:#f60; font-weight:bold; }
		
		content > obj, content > arr, content > func,
		stdout > obj, stdout > arr, stdout > func,
		response > obj, response > arr, response > func { margin-left:1em; width:max-content; }
		content > obj > handle, content > arr > handle, content > func > handle { position:sticky; display:inline-block; }
		
		
	
	/** Theme standalone, mobile , narrow, wide **************************************************************************************************/
		html.standalone {  }
		
		html.mobile {
			body { padding:1px; }
			
			body > menu { 
				font-size:1.5rem; padding:0.1em; 
				
				submenu { 
					position:fixed; 
					left:0.5rem; 
					right:auto; 
					
					&.right { position:fixed; left:auto; right:0.5rem; }
					item { flex: 0 0 2em;  }
				}
			}
		
			body.fileViewer {
				> content { font-size:1rem; }
				file { padding-top:0.5em; }
			}
		
			body > overlay > contextmenu { 
				font-size:1.5rem; 
				
				item { flex: 0 0 2em;  }
			}

		}
		
		html.narrow { 
			min-width:22rem; background:#000; 
			
			body > menu > item.group.reflow { flex:0 0 100%; order:9; }
			file_attributes { display: none; }
			&.long file_attributes { display:inline-flex; font-size:0.66em; }
			&.long file_details { font-size:0.5em; }
			
			msgbox { width:100%; 
				header { padding-left: 3.5rem; }
				img.icon { left:0; top:-1.25rem; width:3rem; height:3rem; }
				content { padding-left:0.5rem; }
				footer { padding-left:3.5rem; }
				
				&.hidden { width:0; }
			}
		}
		
		html.shallow { 
			min-height:12rem; background:#000;
			
			body > header { font-size:1rem; flex:0 0 1.5em; padding:0 0.15em; }
			body > menu { padding:0 0.5em; }
			body > footer { 
				padding:0.25em 0.5em; 
				
				> textarea { min-height:2em; margin-bottom:2px; }
				> input[type="button"] { line-height:1em; height:1.2em; }
				> a.impressum { line-height:1.2em; }
			}
			msgbox { top:5%; max-height:90%; }
		}
		
		html.wide { 
			msgbox { 
				width:50%; right:25%; 
				&.hidden { width:0; right:0; }
			}
		}

	/** Theme light **************************************************************************************************/
			.light a { color:#248; }
			.light a:visited, .light a:link, .light a:active, .light a:hover { color:#248; }

		/* console-related */
			.light body.console {
				> content {
					query, response, logwarn {
						&:before { color:rgba(0,0,0,0.6); }
					}
					query { color:#555; border-bottom:1px solid #bbb; }
					logwarn { color: #b80; }
					response.err { color: #b20; }
					stdout.err { color: #b20; }
				}
				> footer textarea { color:var(--light_color); background:var(--light_bg); box-shadow:inset 0 1px 4px #556; }
			}


		/* vfs-related */
			.light file { color:#666; }
			.light file:hover { background:#8882; }
			.light file_name { color:#000; }
			.light file_fid { color:#000; }
			.light file_elems { color:#26d; }
			.light file_size { color:#26d; }
			.light file_links { color:#26d; }
			.light file_datetime  { color:#298; }
			.light file.folder_special > file_name { color:#26d; }
			.light file.file_folder > file_name { color:#750; font-weight:bold; }
			.light file.sys_sess > file_name,
			.light file.sys_process > file_name,
			.light file.sys_stream > file_name { color:#085; }
			
			
		/* json-related */
			.light obj:hover, .light arr:hover, .light func:hover { background:#bbb2; }
			.light func { color:#000; font-weight:bold; text-shadow:#88f; }
			.light func > prop { color:#38a; }
			.light prop > div { background:#ccc; color:#666; }
			.light prop > div:hover { background:#bbb; color:#111; text-shadow:0 1px 1px #ddd; border-bottom-color:#556; }
			
			.light type { color:#659; text-shadow:0 0 2px #fff; }
			.light objType { color:#930; text-shadow:0 0 2px #fff; }	
			.light key, .light idx { color:#555; }
		
			.light val { color:#555; font-weight:bold; }
			.light val.null, val.undefined, val.unknown { color:#930; text-shadow:0 0 2px #fff; }
			.light val.circular { color:#f80; text-shadow:0 0 2px #fff; }
			.light val.string { color:#390; }
			.light val.number { color:#26d; }
			.light val.boolean { color:#02f; }
			.light val.date { color:#298; }
			.light val.regexp { color:#4ba; }
			.light val.id { color:#085; text-shadow:0 0 3px #fff; font-weight:bold; }
			.light prop.nonEnumerable > idx { color:#659; opacity:0.5; }
			.light prop.Error > val { color:#f60; }
			
			
		/*
		*/