*,*::before,*::after		{box-sizing:border-box}
*		{margin:0}
html,body		{height:100%}
body		{line-height:1.5;-webkit-font-smoothing:antialiased}
img,picture,video,canvas,svg		{display:block;max-width:100%}
input,button,textarea,select		{font:inherit}
p,h1,h2,h3,h4,h5,h6		{overflow-wrap:break-word}

html #body .hidden { display: none; }


VIS	{
	opacity:	1;
}

AP	{
	position:	relative;
	color:	red;
}


:root{
	--least: #000;
	--shadow: #111;
	--dark: #222;
	--med: #999;
	--text: #bbb;
	--bright: #eee;
	--full: #fff;	
	--sel: #bdf;
}

body.light {
	--least: #fff;
	--shadow: #eee;
	--dark: #bbb;
	--med: #888;
	--text: #333;
	--bright: #111;
	--full: #000;	
	--sel: #104;
}

/*






*/




:root.loaded body	{
	opacity:	1;
	pointer-events:	all;
}

.CodeMirror-scroll	{
	border-left:	0px solid #000;
	position: absolute;
	height: calc(100% - 1rem);
	width: 100%;
}

#body #msgstat #cpmdisp	{
	margin-left:	-0.5em;
	margin-right:	0.9em;
	font-size:	100%;
	border-right:	1px solid #888;
	padding-right:	1em;
}

.bw	{
	filter:	grayscale(1);
}

#box_helper .list .item,
#box_menu  #view_controls button,
#userLogin button,
#box_helper .fact button,
#body #msgstat .lil{
	cursor:	pointer;
	opacity: 0.75;
	background: var(--shadow);
	color: var(--text);
	border: 1px solid #888;
	transition: 500ms opacity;
}
#box_helper .list .item:hover,
#box_menu  #view_controls button:hover,
#userLogin button:hover,
#box_helper .fact button:hover,
#body #msgstat .lil:hover	{
	opacity: 1;
	color: var(--bright);
}

#box_helper .list .item.active,
#box_helper .fact button.active,
#box_menu  #view_controls button.active,
#userLogin button.active,
#body #msgstat .lil.active {
	animation: 620ms glowring;
}


#box_helper .list .item:active,
#box_helper .fact button:active,
#box_menu  #view_controls button:active,
#userLogin button:active,
#body #msgstat .lil:active {
	opacity: 1;
	background-color: var(--bright);
	color: var(--dark);
}






@keyframes glowring {
  from {
   box-shadow: 0 0 0 0 #000;
  }

  10% {
    box-shadow: 0 0 1.5rem 0.5rem #888;
  }

  to {
    box-shadow: 0 0 0 0 #000;
  }
}




#cpmdisp, #body #msgstat .lil	{
	font-size:	65%;
	padding:	1px 4px 0 4px;
}

#body #msgstat input.lil	{
	position: relative;
	top:	1px;
}

#msgstat label input	{
	width:	1.4em;
	height:	1.4em;
}

x#msgstat button .bw	{
	font-size:	125%;
}

#prog	{
	position:	absolute;
	left:	0;
	bottom:	var(--statusbar-height);
	height:	2px;
	width:	100%;
	z-index:	8600;
	appearance:	none;
	background: rgba(1, 1, 1, 0.05);
	border: 0;
	transition: 333ms height;
}

#prog::-moz-progress-bar	{
	margin-top: -1px;
	border: 0;
	height: 2px;
	background-color:	white;
}

#prog[per^='0.8']::-moz-progress-bar, 
#prog[per^='0.9']::-moz-progress-bar	{
	background:	gold;
}

#prog[per='1']::-moz-progress-bar {
	background-color:	red;
}

#prog::-webkit-progress-bar	{
	background-color:	rgba(1, 1, 1, 0.05);
}

#prog::-webkit-progress-value	{
	background:	white;
}

#prog[per^='0.8']::-webkit-progress-value, 
#prog[per^='0.9']::-webkit-progress-value	{
	background:	gold;
}

#prog[per='1']::-webkit-progress-value	{
	background:	red;
}

#prog[per='1']	{
	height:	8px;
	box-shadow:	0 0 3px red;
	bottom:	25px;
	background:	red;
}

body:has(#prog[per='1']) #msgstat .lil.rst {
	background:	red;
}



#body .CodeMirror-cursors	{
	opacity:	1;
	transition:	250ms opacity;
}

#body .CodeMirror-cursors[style="visibility: hidden;"]	{
	visibility:	visible !important;
	opacity:	0.5;
}

#body .CodeMirror-cursor	{
	border-left-width:	3px;
}
xxxx {border-top:	5px solid;
	border-bottom:	5px solid;
	margin-top:	-0px;
	box-shadow:	0 0 5px 1px #000;
}

xxx #body .CodeMirror-cursors[style="visibility: hidden;"] .CodeMirror-cursor:after	{
	xbox-shadow:	0 0 32px 0px rgba(128, 128, 128, 0.4);
}

xxx .CodeMirror-cursor:after	{
	xransition:	320ms box-shadow;
	box-shadow:	0 0 48px 0px rgba(128, 128, 128, 0.6);
	content:	"|";
	color:	transparent;
	position:	relative;
	left:	-3.1em;
	top:	-3.7em;
	border:	0.65em solid rgba(128, 128, 128, 0);
	border-radius:	96px;
	width:	4em;
	height:	4em;
	display:	inline-block;
	pointer-events:	none;
}

#body[data-activeline='true'] #box_editor .activeline	{
	background-color:	rgba(128, 128, 128, 0.1);
	box-shadow:	0 0 3px rgba(255, 255, 255, 0.33);
}

body	{
	--bird-width-current:	10%;
	--sidebar-width:	15rem;
	font-family:	"Segoe UI", Roboto, Oxygen, -apple-system, BlinkMacSystemFont, Ubuntu, "Droid Sans", Arial, sans-serif;
	--menubar-height:	35px;
	--statusbar-height: 24px;
}

body[data-bird="false"]	{
	--bird-width-current:	0.001%;
}

body[data-sidebar="false"]	{
	--sidebar-width:	0rem;
}

html #body[data-preview="false"] #right, 
html #body[data-view="false"] #left {
	display: none;
}


body #box_sidebar	{
	width:	var(--sidebar-width);
	position:	absolute;
	z-index:	1100;
	top:	var(--menubar-height);
	left:	0px;
	height:	calc(100% - var(--statusbar-height) - var(--menubar-height) );
	overflow:	hidden;
	user-select:	none;
	background: var(--dark);
}

body #sidebar #helpertools, body #sidebar #filetools	{
	height:	28px;
	width:	100%;
	position:	absolute;
	padding-left:	0.15em;
	box-shadow: 0px 0px 4px var(--shadow);
	background: var(--dark);
}

body #sidebar	{
	width:	100%;
	height:	99%;
	overflow:	hidden;
}

body #sidebar b	{
	color:	var(--text);
	text-shadow:	0 0 2px var(--dark);
}

body #sidebar #inpHelperFilter, body #sidebar #filetools #inpFileFilter	{
	width:	5em;
	float:	right;
	margin-right:	0.25em;
	margin-top: 2px;
	background:	var(--shadow);
	border:	0px solid #888;
	padding:	0px;
	color:	var(--text);
	opacity: 0.8;
}

body #sidebar #inpHelperFilter:focus, body #sidebar #filetools #inpFileFilter:focus {
	opacity:	1;
}

body #sidebar #filetools button	{
	float:	right;
}


body #box_history, body #box_files	{
	margin-top:	39px;
	width:	100%;
	padding:	0em;
	padding-left:	1.25em;
	overflow:	hidden;
	overflow-y:	auto;
	padding-bottom:	1em;
}

body #box_files	{
	zmax-height:	calc(40vh - var(--menubar-height));
}

body #box_history	{
	zmax-height:	calc(50vh - var(--menubar-height));
	padding-bottom:	47em;
}


section#box_files {
	height: calc(40% - 57px);
	top: -8px;
	position: absolute;
}

#box_files ul:not(:has(:nth-child(2))):after {
	content: "Drop, upload, or create text assets here";
	color: var(--bright);
	background: var(--shadow);
	padding: 1rem;
	position: relative;
	top: 1rem;
	width: 10em;
	display: block;
	opacity: 0.45;
	box-shadow: 0 0 10px var(--dark) inset;
	pointer-events: none;
}


XXX #box_history:empty:after {
	content: "( No revisions yet )";
	color: var(--bright);
	background: var(--shadow);
	padding: 1rem;
	position: relative;
	top: 1rem;
	width: 10em;
	display: block;
	opacity: 0.45;
	box-shadow: 0 0 10px var(--dark) inset;
	pointer-events: none;
}

#sidebar:has(#box_files ul li:last-child:first-child ) #inpFileFilter, #sidebar:has(#box_helper:empty) #inpHelperFilter {
	opacity: 0.5;
	pointer-events: none;
}



body #sidebar .root	{
	margin-left:	-0.0025em;
}

#box_history, #box_files	{
	padding-left:	0.65em;
	scroll-snap-type: y;
}

/*
#box_files .file[data-dirty="true"] span:after {
	content: " ⚠";
	font-size: 80%;
	position: relative;
	color: orange;
	left: 0.4rem;
	font-weight: normal;
}
*/

/*
#box_files .file .dirty.recovered:after {
	content: " (recovered)";
	font-weight: normal; 
	font-size: 80%;
}

#box_files .file .dirty.recovered {
	opacity: 0.75;
	filter: hue-rotate(7deg);
}

#box_files .file .dirty {
	position: absolute;
	top: -3px;
	padding-left: 0.1em;
}
*/


li[data-type]	{
	color:	var(--text);
	position:	relative;
	left:	0.5em;
	text-shadow: 0 0 3px var(--shadow);
	scroll-snap-align: start;
}

li[data-type] small	{
	opacity:	0.66;
	padding-left:	0.2em;
}

#box_files ul	{
	margin-left:	-0.1em;
	margin-top:	-0.6em;
}

#body #box_history ul	{
	padding-bottom:	4em;
}

#filetools b:after,
#helpertools b:after {
	content: " (" attr(data-count) ")";	
	padding-right: 0.5rem;
	opacity: 0.75;
	font-size: 85%;
}

#box_history li	{
	flex:	0 0 auto;
}

#box_files li[data-type]:before	{
	font-size:	1.1em;
	top:	0.15em;
}

xxx li[data-type]:before	{
	background:	var(--text);
	border:	1px solid #777;
	box-shadow:	6px 6px 0.4em rgb(255 255 255 / 25%) inset, -6px -6px 0.4em rgb(0 0 0 / 25%) inset;
}

li[data-type]:before	{
	opacity:	0.75;
	font-weight:	normal;
	position:	absolute;
	left:	-1.33em;
	top:	0.06em;
	content:	"\f15b";
	font-family:	"Font Awesome 6 Free";
	height:	1.33em;
	text-align:	center;
	width:	1.33em;
	border:	0;
	background:	transparent;
	display:	inline-block;
	padding:	5px 3px 0 3px;
	border-radius:	3px;
	font-size:	1.3em;
	color:	var(--text);
	filter:	saturate(3);
}

li[data-type='css']:before	{
	color:	#bbffbb;
}

li[data-type='html']:before	{
	color:	#ffbbff;
}

li[data-type='js']:before	{
	color:	#bbbbff;
}

li[data-type='json']:before	{
	color:	#faefaf;
	content:	"\f085";
}


body.light li[data-type='css']:before,
body.light li[data-type='html']:before	,
body.light li[data-type='js']:before,
body.light li[data-type='json']:before{
	filter: brightness(0.75);
}



li[data-type='DIR']:before	{
	content:	"\f07b";
}

li[data-type='wav']:before	{
	content:	"\f130";
}

li[data-type='svg']:before	{
	content:	"\f55b";
}

li[data-type='key']:before	{
	content:	"\f084";
}

li:is([data-type='exe'], [data-type='com'], [data-type='bat'], [data-type='cmd']):before	{
	content:	"\f2d0";
}

li:is([data-type='url'], [data-type='lnk']):before	{
	content:	"\f0c1";
}

li:is([data-type='mp3'], [data-type='mid']):before	{
	content:	"\f1c7";
}

li:is([data-type='bas'], [data-type='vbs'], [data-type='vbp'], [data-type='frm'], [data-type='frx'], [data-type='mod'], [data-type='cls']):before	{
	content:	"🆚";
}

li:is([data-type='css']):before	{
	content:	"\f1fc";
}

li[data-type='comment']:before	{
	content:	"\f075";
}

li[data-type='log']:before	{
	content:	"\f15c";
}

li:is([data-type='js'], [data-type='ts'], [data-type='coffee'], [data-type='.pm'], [data-type='.pl'], [data-type='.ino'], [data-type='.h'], [data-type='.cpp']):before	{
	content:	"\f1c9";
}

li:is([data-type='htm'], [data-type='html'], [data-type='xml'], [data-type='xsl'], [data-type='asp'], [data-type='php']):before	{
	content:	"\f121";
}

li:is([data-type='avi'], [data-type='mov'], [data-type='m4v'], [data-type='mpg'], [data-type='mpeg'], [data-type='wmv']):before	{
	content:	"\f008️";
}

li:is([data-type='zip'], [data-type='arj'], [data-type='7z'], [data-type='rar'], [data-type='cab']):before	{
	content:	"\f1c6️";
}

li:is([data-type='jpg'], [data-type='bmp'], [data-type='gif'], [data-type='png'], [data-type='ico'], [data-type='cur'], [data-type='ani'], [data-type='thm']):before	{
	content:	"\f03e";
}

li:is([data-type='crw'], [data-type='cr2']):before	{
	content:	"\f030";
}

li:is([data-type='doc'], [data-type='rtf'], [data-type='pdf'], [data-type='chm'], [data-type='tex']):before	{
	content:	"\f570";
}

li:is([data-type='txt'], [data-type='readme'], [data-type='md'], [data-type='hlp'], [data-type='license']):before	{
	content:	"\f1dd";
}

li:is([data-type='xls'], [data-type='csv'], [data-type='tsv']):before	{
	content:	"\f0db";
}

li:is([data-type='ppt']):before	{
	content:	"\e473";
}

li:is([data-type='dll'], [data-type='lib'], [data-type='ini']):before	{
	content:	"\f187️";
}

li:is([data-type='bin'], [data-type='dat'], [data-type='tmp']):before	{
	content:	"\f0c7";
}

#box_history li.hist:after, #box_files li._DIR:after, #box_files li.file:after	{
	content:	attr(data-byline);
	display:	block;
	font-size:	66%;
	padding-left:	0em;
	margin-top:	-0.15em;
	color:	var(--text);
	opacity:	0.5;
	white-space:	pre;
	font-weight:	normal;
	font-family:	verdana;
}

#box_files li.file:after	{
	content:	attr(data-date)"         \09v" attr(data-ver)"\09" attr(data-size);
}

#box_files li.file blink, #box_history li.hist blink	{
	position:	absolute;
	right:	0.4em;
	width:	4.5em;
	opacity:	0.5;
	font-size:	85%;
}

#box_files li.file blink	{
	right:	0.4em;
}

#box_files li._DIR:after	{
	content:	attr(data-size)" in " attr(data-kids)" files";
	opacity:	0.75;
	xfont-size:	75%;
	xpadding-left:	0.5em;
}

#body #box_files li.active	{
	font-weight:	bold;
	color:	var(--full);
}

#body #box_files li.file span {
	filter: grayscale(1);
	opacity: 0.5;
}

#body #box_files li.file {
	--file-icon-encrypt: " ";
	--file-icon-readonly: " ";
	--file-icon-dirty: " ";
}

#body #box_files li.file[data-dirty="true"] {
	--file-icon-dirty: " ⚠";
}

#body #box_files li.file.encrypted {
	--file-icon-encrypt: " 🔒";
}

.readonly #body #box_files li.file {
	--file-icon-readonly: " ❄";
}

#body #box_files li.file span:after {
	content: var(--file-icon-encrypt) var(--file-icon-readonly) var(--file-icon-dirty);
}

#box_history li:hover, #box_history li:hover:after, #box_files li:hover, #box_files li:hover:after	{
	color:	var(--full);
}

#box_history ul, #box_history li, #box_files ul, #box_files li	{
	list-style:	none;
	margin:	0;
	padding:	0;
	padding-left:	0.8em;
	cursor:	pointer;
	margin-top:	0.5em;
}

#box_files ul, #box_history ul	{
	padding-left:	0.15em;
	margin-top:	0;
	min-height: 10em;
}

#box_files ul.dir	{
	font-weight:	normal;
}

#box_files li._DIR	{
	font-weight:	bold;
}

#box_files li._DIR > ul	{
	display:	none;
}

#box_files li._DIR.open > ul	{
	display:	block;
	margin-top:	0.75em;
}

#box_files li._DIR.open:after	{
	content:	"";
	display:	none;
}

#box_files li._DIR[data-kids='1']:after	{
	content:	attr(data-size)" in " attr(data-kids)" file";
}

#box_files li._DIR.open	{
	min-height:	2em;
}

#box_files li._DIR.open:before	{
	content:	"\f07c";
}

#box_files.offering	{
	box-shadow:	0 0 100px green inset;
}


#box_files li.viewing {
	font-weight: bold;
	color: var(--bright);
	opacity: 0.85;
}

#box_files li.file.viewing:after,
#body #box_files li.file.viewing span{
	opacity: 0.85;
}



#awesome, #awesome_list	{
	font-size:	20px;
	padding:	0px 2px;
	font-style:	normal;
	xborder-radius:	0.15em;
	background-color:	var(--shadow);
	position:	absolute;
	left:	15.5em;
	top:	-4px;
	width:	8em;
	color:	var(--text);
	border:	0px solid #f00;
	z-index:	7844;
}

#awesome	{
	font-size:	28px;
	padding-left:	6px;
	outline:	none !important;
	height:	2.3rem;
}

#awesome::selection	{
	background-color:	skyblue;
}

#awesome::placeholder{
	transition:	200ms color;
}

#awesome:focus::placeholder{
	color:	transparent;
}

#awesome_list	{
	top:	var(--menubar-height);
	height:	0;
	width:	calc(85% - 0em);
	border:	0px solid #888;
	background:	rgba(0, 0, 0, 0.9);
	color:	var(--text);
	overflow:	hidden;
	z-index:	7840;
	left:	0;
	transition:	200ms 350ms height;
	box-shadow:	0 0 3px #000;
}

#awesome_list .item {
	font-size: 110%;
	background: var(--least, #000);
	margin: 0;
	/* height: 1.5em; */
	padding: 0.1em 0.3em;
	cursor: default;
	/* width: calc(85% - 10em); */
	font-style: normal;
	transition: 100ms background;
	white-space: nowrap;
	opacity: 0.85;
}

#awesome_list .item:hover	{
	opacity: 1;
}

#awesome_list .item b	{
	color:	#eea;
	padding:	0 2px;
}

#awesome_list .item[type] big {
	background: green;
	color: #000;
	border-radius: 3px;
	font-size: 90%;
	font-style: normal;
	margin-right: 0.5em;
	padding: 0 7px;
	/* padding-bottom: 2px; */
	min-width: 4em;
	display: inline-block;
	text-align: center;
	font-weight: bold;
	opacity: 0.75;
	position: relative;
	top: -0.1em;
}

#awesome_list .item[type="pref"] big	{
	background-color:	#f8f;
	font-family:	"Font Awesome 6 Free";
	font-size:	85%;
}

#awesome_list .item[type="menu"] big	{
	background-color:	#eee;
}

#awesome_list .item[type="css"] big, #awesome_list .item[type="snippet"] big	{
	background-color:	#55e;
}

#awesome_list .item[type="line"] big	{
	background-color:	#888;
	text-align:	left;
}

#awesome_list .item[type="function"] big	{
	background-color:	#eea;
}

#awesome_list .item[type="file"] big	{
	background-color:	#fbb;
}

#awesome_list .item[type="grep"] big	{
	background-color:	#ff8;
}

#awesome_list .item small	{
	color:	#777;
	font-family:	monospace;
	position:	absolute;
	left:	12em;
}

#awesome_list .item[type="line"] q {
	quotes: none;
	color: var(--bright);
	background: var(--dark);
	padding: 0.1rem 0.5rem;
	min-width: 5.5em;
	display: inline-block;
}


#awesome_list .item[type="pref"] small, #awesome_list .item[type="grep"] small, #awesome_list .item[type="file"] small, #awesome_list .item[type="function"] small	{
	position:	relative;
	left:	0.1em;
	font-family:	tahoma;
	color:	var(--text);
	padding-left:	0.4em;
}

#awesome_list .item[type="file"] small	{
	left:	0.75em;
	color:	#999;
}

#awesome_list .item.active	{
	background:	#444;
	color:	#fff;
}

#body #awesome:focus ~ #awesome_list	{
	height:	27.5em;
	border-bottom:	1px solid #333;
	box-shadow:	0 4px 6px 1px rgba(0, 0, 0, 0.66);
	overflow-y:	scroll;
}

#awesome_list .item[type='grep'] b {
	display: inline-block;
	width: 8em;
}

#awesome_list .item[type='grep'] s {
	display: inline-block;
	width: 24em;
	text-decoration: none;
}

#awesome_list:has(.item) section.initial {
	display:	none;
}
#awesome_list section.initial {
	background: var(--dark);
	display: inline-block;
	padding: 0 6rem 2rem 3rem;
	margin: 2em;
	border-radius: 0.5rem;
	border: 1px solid var(--text);
}

#awesome_list h4 {
	color: var(--full);
	padding-left:	2rem;
	font-size: 3rem;
	margin: 1.5rem 0;
}

#awesome_list .explain dt {
	font-size:	125%;
	font-weight:	bold;
	margin-top:	0.5em;
	color:	var(--full);
	padding-left:	2rem;
}

#awesome_list .explain dd {
	margin-left: 2rem;
	margin-bottom: 1.5rem;
	color: var(--text);
}

#awesome_list .explain code {
	background: var(--least);
	color: var(--bright);
	padding: 0 1rem;
	position: relative;
	left: 3rem;
	font-weight: normal;
}

#awesome_list .explain code:before {
	font-size: 75%;
	color: #999;
	content: "ex:";
	position: absolute;
	left: -1.7em;
	top: 0.5em;
}



#logo	{
	position:	fixed;
	top:	3%;
	left:	20%;
	font-size:	80vh;
	z-index:	6050;
	color:	#002;
	opacity:	0.15;
	display:	none;
	pointer-events:	none;
}

#contextMenu, .subMenu	{
	list-style:	none;
	z-index:	9999999;
	padding:	0.15em 0em;
	font-size:	20px;
	background:	var(--dark);
	color:	var(--text);
	width:	8.5em;
	user-select:	none;
	box-shadow:	2px 2px 5px var(--shadow);
	padding-left:	0.1em;
	border:	1px outset #666;
}

#contextMenu	{
	position:	fixed;
	top:	30vh;
	right:	40vw;
	display:	none;
}

#puload2 .btn:hover, #contextMenu .btn:hover {
	background:	var(--sel);
	outline:	0;
	color:	var(--dark);
}
#contextMenu .btn:focus{
	outline:	2px dashed rgba(125,125,125,0.5);
}


#puload2 .btn, #contextMenu .btn	{
	display:	block;
	width:	99%;
	border:	0px;
	font-family:	"Segoe UI", tahoma;
	font-size:	16px;
	background:	transparent;
	color:	var(--text);
	text-align:	left;
	padding-left:	1.1em;
	padding-top:	0em;
	padding-bottom:	0em;
	xmargin-left:	-1.1em;
	position:	relative;
	cursor:	default;
}

#contextMenu li ul li	{
	position:	relative;
	clear:	left;
	width:	100%;
}

#contextMenu li:hover ul	{
	left:	100%;
	opacity:	1;
}

#contextMenu li ul	{
	xdisplay:	none;
	left:	1000%;
	position:	absolute;
	opacity:	0;
	transition:	300ms 240ms opacity;
}

#contextMenu hr	{
	opacity:	0.25;
	margin:	0.175em 0;
	position:	relative;
	left:	-2em;
	width:	calc(100% + 1.9em);
	border:	1px solid #aaa;
}

#body #contextMenu .sel	{
	display:	none;
}

#body #contextMenu #puEvery, #body #contextMenu #puCount, #contextMenu .match, #contextMenu .html, #contextMenu .css, #contextMenu .js	{
	display:	none;
}

#body #contextMenu.match #puEvery, #body #contextMenu.match #puCount, #contextMenu.match #pufmtcss, #contextMenu.match .match, #contextMenu.html .html, body #contextMenu.css .css, body #contextMenu.js .js	{
	display:	block;
}

#body #contextMenu.sel .sel	{
	display:	block;
}

#body #contextMenu:not(.js) .js	{
	display:	none;
}


XXX #body #contextMenu:not(.js) #pujs .js	{
	display:	none;
}

#body #contextMenu:not(.path) #puload	{
	display:	none;
}

#body[data-saving='true']:after	{
	transition:	150ms top;
	content:	"Saving...";
	position:	absolute;
	top:	10px;
	right:	50%;
	z-index:	9999;
	background:	#bbb;
	color:	black;
	border-radius:	0.5em;
	border:	3px solid #006;
	font-size:	44px;
	padding:	5px 30px;
}

xxx#body[data-saving='true']:after	{
	top:	10px;
}

body:has(#dialog[open]) #rect2 {
	left: -2000px !important;
}

#dialog_content.dragging	{
	cursor:	move;
	background-color:	rgba(255, 255, 255, 0.5);
}

#dialog_content.dragging #dialogContent	{
	display:	none;
}

#dialog_icon	{
	z-index:	9230;
}

div#dialog[data-url$="config.html"]	{
	background-color:	transparent;
}

.modal #dialogContent	{
	position:	relative;
	xz-index:	9000;
	left:	0;
	top:	1px;
	width:	100%;
	height:	100%;
	border-top:	1px solid #000;
	background:	var(--dark);
	clear:	both;
	xtransition:	333ms opacity;
}

.modal	{
	position:	fixed;
	z-index:	9000;
	left:	0;
	top:	0;
	border:	0;
	width:	100%;
	height:	100%;
	background-color:	rgba(0, 0, 0, 0.5);
	opacity:	0;
	visibility:	hidden;
	transition:	visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
	user-select:	none;
}

.modal .modal-content	{
	position:	absolute;
	z-index:	9020;
	top:	5%;
	left:	5%;
	width:	50%;
	height:	40%;
	background-color:	var(--shadow);
	color:	var(--text);
	padding:	0;
	border-radius:	0px;
	overflow:	hidden;
	resize:	both;
	min-width:	300px;
	min-height:	100px;
	box-shadow:	10px 10px 32px var(--least);
	border:	2px solid #222;
}

.modal .modal-content iframe	{
	position:	absolute;
	top:	0px;
	left:	0;
	width:	100%;
	height:	100%;
	margin:	0;
	user-select:	inherit;
	border:	0;
	outline:	none !important;
}

.modal #dialog_icon	{
	position:	absolute;
	top:	6px;
	left:	6px;
	background-image:	url('/favicon.ico');
	background-size:	32px;
	background-repeat:	no-repeat;
	height:	44px;
	width:	44px;
	padding:	0;
}

.modal .modal-title	{
	opacity:	0.75;
	float:	left;
	font-size:	24px;
	font-family:	"Segoe UI", tahoma, sans-serif;
	color:	var(--text);
	padding:	6px 0 0 50px;
	pointer-events:	none;
}

.modal .close-button {
	float: right;
	height: 45px;
	width: 44px;
	text-align: center;
	cursor: pointer;
	background-color: transparent;
	border: 0;
	color: var(--bright);
	overflow: hidden;
	font-size: 32px;
	font-weight: normal;
	margin-top: -4px;
}

.modal .close-button:active	{
	opacity:	0.5;
}

.modal .close-button:hover	{
	background-color:	rgb(232, 17, 35);
	color:	var(--full);
	box-shadow:	0 0 3px rgb(132, 8, 15) inset;
	text-shadow:	0 0 3px var(--shadow);
}

.modal[open]	{
	opacity:	1;
	visibility:	visible;
	transform:	scale(1.0);
	transition:	visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

#rect, #rect2	{
	position:	fixed;
	background-color:	var(--least);
	color:	var(--text);
	z-index:	9000;
	min-height:	32px;
	border:	1px solid #bbb;
	box-shadow:	3px 3px 10px #000, 0 0 3px yellow;
	padding:	0.5em;
	text-align:	center;
}

#rect2 a	{
	display:	block;
	text-align:	left;
	margin:	0 0;
	padding:	2px 5px;
	background:	var(--shadow);
	color:	var(--text);
	text-decoration:	none;
}

#rect2 span.clicker	{
	color:	#77f;
	font-weight:	bold;
	cursor:	pointer;
}

#rect2 a:hover	{
	color:	var(--bright);
}

#rect2 a:focus	{
	color:	var(--full);
	background:	var(--dark);
	outline:	0;
}



#body[data-awe="true"] #bird small	{
	opacity:	0.5;
}

#body[data-awe="true"] #bird b	{
	color:	red;
}

#body[data-awe="true"] #bird	{
	font-size:	14px;
	line-height:	18px;
}





body #box_bird	{
	position:	absolute;
	z-index:	1150;
	top:	var(--menubar-height);
	right:	0px;
	width:	var(--bird-width-current);
	height:	calc(100% - var(--statusbar-height) - var(--menubar-height) );
	overflow:	hidden;
	user-select:	none;
}



body #bird	{
	color:	#888;
	height:	100%;
	width:	100%;
	overflow:	hidden;
	white-space:	pre;
	line-height:	1.75px;
	font-size:	1px;
	background:	#000;
	cursor:	default;
	padding-left:	2px;
	padding-top:	5px;
	user-select:	none;
	cursor: crosshair;
}

#bird big	{
	font-size:	14px;
	color:	#eea;
	white-space:	nowrap;
	xline-height:	10px;
}

#body #bird div	{
	position:	relative;
	margin:	-1px 0;
	user-select:	none;
}

#body #bird div:after	{
	content:	attr(text);
	position: absolute;
	pointer-events: none;
}


#body #bird div:hover:after {
	position: absolute;
	content: attr(text);
	left: 0;
	top: -0.35em;
	font-size: 16px;
	color: #bbb;
	background-color: #000;
	border: 0.25em solid #000;
	z-index: 1550;
	white-space: nowrap;
	display: block;
	text-align: left;
	width: 98%;
	padding-left: 3px;
	pointer-events: none;
	padding-bottom: 1px;
	padding-top: 1px;
	height: 1em;
	box-shadow: -3px 0 4px 2px #111;
}


sss #body #bird div[tagged]:hover:after {
	content: "";
	display: none;
}

#body #bird div[tagged]:hover {
	background: transparent;
}


#body #bird div[tagged]	{
	font-size:	14px;
	line-height:	0.85em;
	margin-bottom:	-1px;
	margin-top:	-2px;
	padding-bottom: 1px;
}

#body #bird div.body	{
	color:	#cccccc;
}

#body #bird div.head	{
	color:	#ffbbff;
}

#body #bird div.style	{
	color:	#bbffbb;
}

#body #bird div.script	{
	color:	#bbbbff;
}

#body #bird div.function	{
	color:	#fadc23;
}

#body #bird[style*='line-height:2px'] div[tagged]	{
	font-size:	2px;
	line-height:	2px;
}

::selection	{
	color:	var(--dark);
	background:	var(--bright);
}

body, html	{
	margin:	0;
	padding:	0;
	overflow:	hidden;
	background:	var(--least);
}

html	{
	transition:	background 100ms;
}

#restore	{
	position:	relative;
	left:	-6px;
}

#box_menu	{
	position:	absolute;
	top:	0;
	width:	100%;
	height:	35px;
	background:	var(--dark);
	color:	var(--text);
	left:	0px;
	z-index:	1200;
	user-select:	none;
	border-bottom:	1px solid #000;
	transition: 650ms 999ms top;
}

#body[data-menu="false"] #box_menu {
	top: -35px;
}

.firefox #body[data-menu="false"] #box_menu {
	top: 0px;
}


.firefox #body[data-menu="false"]  {
	--menubar-height: 35px;
}

:root.firefox #right,
:root.firefox #left {
	width: 50%;
}

#body[data-menu="false"] div#box_menu:after {
	content: " ";
	position: absolute;
	width: 100%;
	height: 0.4em;
	background: transparent;
	top: 34px;
}

#body[data-menu="false"] #box_menu:focus-within,
#body[data-menu="false"] #box_menu:hover{
	top: 0;
	transition: 130ms top;
}

#body[data-menu="false"] #box_status{
	bottom: -50px;
}

#body[data-menu="false"] {
	background: blue;
	--menubar-height: 0px;
	--statusbar-height: 0px;
}


#box_status	{
	position:	absolute;
	bottom:	0;
	width:	100%;
	height:	24px;
	background:	var(--dark);
	color:	var(--text);
	left:	0;
	z-index:	1300;
}

#box_menu .menu:nth-child(2)	{
	left:	2em;
}

#box_menu .menu:nth-child(3)	{
	left:	5em;
}

#box_menu .menu:nth-child(4)	{
	left:	8em;
}

#box_menu .menu:nth-child(5)	{
	left:	12em;
}

#box_menu .menu:nth-child(6)	{
	left:	15.5em;
}

#box_menu .menu:nth-child(7)	{
	left:	21em;
}

#box_menu .menu span.kc {
	font-size: 75%;
	opacity: 0.75;
	float: right;
	margin-right: -1em;
	top: 0.2em;
	position: relative;
}

#box_menu .menu	{
	padding:	0px 0em;
	margin:	0;
	display:	inline-block;
	z-index:	2000;
	position:	absolute;
	list-style:	none;
	font-size:	22px;
	cursor:	default;
	font:	"Segoe UI";
	width:	3em;
	user-select:	none;
}

#box_menu .menu:first-child li:first-child	{
	width:	0.75em;
	padding:	3px 0.5em 3px 0.5em;
}

#body #box_menu .menu:nth-child(7) li	{
	width:	14em;
}

#body #box_menu .menu:nth-child(7) li:first-child	{
	width:	2em;
}

#box_menu .menu:nth-child(4) li:first-child	{
	width:	3.75em;
}

#box_menu .menu:nth-child(5) li:first-child	{
	width:	3.3em;
}

#box_menu .menu:nth-child(6) li:first-child	{
	width:	4em;
}

#lstJumps li.key:not(:has(+ li)) {
	opacity: 0.5;
	pointer-events: none;
	user-select: none;
}


#body #box_menu .menu li[disabled]	{
	cursor: not-allowed;
	text-decoration: line-through;
	display: none;
}

#box_menu .menu li	{
	display:	none;
	position:	relative;
	padding:	3px 2em 3px 1em;
	z-index:	2100;
	user-select:	none;
}

#box_menu #recentMenu li.sep + li,
#box_menu #recentMenu ~ .menu li.sep	{
	border-top:	2px solid rgba(116, 116, 116, 0.333);
	padding-top:	5px;
	margin-top:	0px;
}

#box_menu .menu li:first-child	{
	display:	block;
	background:	transparent;
	width:	2.75em;
	padding-left:	0.5em;
	margin-bottom:	-4px;
	padding-bottom:	1px;
	padding-top:	5px;
	position:	relative;
	top:	-5px;
	xtext-shadow: 0 0 1px var(--shadow);
}


#body[data-dirty="0"] #saditem,
#body[data-dirty="1"] #saditem {
	display: none;
}


#body #recentMenu li.key	{
	top:	2px;
}

ul#recentMenu	{
	left:	2px;
}

#box_menu .menu[lang="active"] li:last-child	{
	border-bottom:	1px solid rgba(0, 0, 0, 0.75);
}

#box_menu .menu[lang="active"] li:nth-child(n+2)	{
	display:	block;
	background:	var(--dark);
	width:	13.7em;
	padding-left:	1.0em;
	border-left:	1px solid rgba(0, 0, 0, 0.75);
	border-right:	1px solid rgba(0, 0, 0, 0.75);
}

#box_menu .menu[class] li:focus, #box_menu .menu[class] li:hover	{
	color:	var(--dark);
	background-color:	var(--sel);
	outline:	none;
	box-shadow:	0 0 1px #9bc;
}


#box_menu .menu[class] li[onclick=""]	{
	color:	#888;
}

#box_menu ._docs li.active	{
	font-weight:	bold;
}

#body #box_menu #recentMenu li:first-child {
	background-color: transparent;
	background-image: url(/favicon.ico);
	background-size: contain;
	background-repeat: no-repeat;
	color: transparent;
	height: 1.6rem;
	margin-top: 0.25rem;
	opacity: 0.7;
	transition: 250ms opacity;
	border: 0px;
	margin-bottom: 0.4rem;
	box-shadow: 0 0 9px #000 inset;
	width: 1.6rem;
	margin-left: 0.3rem;
}

#body #box_menu #recentMenu:hover li:first-child {
	opacity: 1;
	box-shadow: none;
	background-color: transprent;
}

#body #box_menu ~ .pane{
	transition: 120ms filter;
}
#body:has(#box_menu.active) #box_menu ~ .pane {
	filter: brightness(0.4) contrast(0.9);
}


.readonly #body #box_menu .btshr,
.readonly #body #box_menu .adpw,
.readonly #body #box_menu .rmpw,
.readonly #body #box_menu .btvc,
.readonly #body #box_menu #saditem
#body[data-encrypted="true"] #box_menu .adpw,
#body[data-encrypted="false"] #box_menu .rmpw	{ /* hide encryption offers that make no sense */
	display: none;
}






#box_menu  #view_controls {
	float: right;
	position: relative;
	top: 0.2rem;
	right: 1em;
}



#view_controls button {
	margin: 0;
	margin-left: -0.1rem;	
	border-radius: 0.15rem;
	
}

html #body[data-preview="false"] #right, 
html #body[data-view="false"] #left {
	display: none;
}

#body[data-menu="false"]  #view_controls button[name='status'],
#body[data-sidebar="false"]  #view_controls button[name='sidebar'],
#body[data-bird="false"] 	#view_controls button[name='bird'],
#body[data-view="false"]  	#view_controls button[name='view'],
#body[data-preview="false"] 	#view_controls button[name='preview'] {
	opacity: 0.5;
	background: var(--dark);
}



#box_menu  #view_controls button[value="false"] {
		opacity: 0.5;
}


#box_status>* {
	vertical-align: top;
}

#lstat	{
	padding-left:	1em;
	padding-right:	1.5em;
	float:	left;
	width:	15em;
	display:	none;
	overflow: hidden;	
}

#rstat	{
	float:	right;
	padding-right:	1em;
	margin-top: -2px;
}

#mstat	{
	padding:	0 1.5em;
	margin:	0 auto;
	width:	20em;
	display:	inline-block;
	xorder-left:	1px solid #999;
	overflow: hidden;
}

#msgstat {
	width: 19em;
	text-align: center;
	display: inline-block;
	border-left: 1px solid #999;
	position: relative;
	top: -0.15rem;
}


#mstat:empty + #msgstat  { 
	top:	0; 
}

XXX#mstat:after	{
	content:	attr(title);
	border-left:	 1px solid #999;
	padding-left:	1.5em;
	margin-left:	1.4em;
	display:	inline-block;
}

#puload2	{
	position:	absolute;
	z-index:	9999;
}

#puload2 .hand, #puload2 hr	{
	display:	none;
}

.btn.scroll	{
	position:	absolute;
	right:	0rem;
	z-index:	8000;
	font-size:	30px;
	width:	1.8em;
	height:	1.8em;
	top:	0;
	background-color:	rgba(0, 0, 0, 0);
	display:	block;
	border:	0;
	border-radius:	0 0 0 1.6em;
	oveflow:	hidden;
	cursor:	pointer;
	color:	transparent;
}

.btn.scroll:hover	{
	background-color:	rgba(110, 110, 110, 0.2);
}

#goto_bot	{
	top:	auto;
	bottom:	0px;
	border-radius:	1.6em 0 0 0;
}

#emojis	{
	position:	absolute;
	left:	2%;
	width:	90%;
	top:	42px;
	z-index:	8000;
	font-size:	32px;
	border:	3px solid var(--text);
	padding:	0.1em;
	color:	#000;
	background: var(--dark);
}

#emojis pre	{
	white-space:	normal;
}

#emojis button	{
	background:	#f88;
	border:	1px solid #444;
	cursor:	pointer;
	float:	right;
}

#docker {
	position: absolute;
	z-index: 9500;
	top: 10%;
	left: -2%;
	width: 298%;
	min-height: 39em;
	background: rgba(0, 0, 0, 0.8);
	padding: 1.5em 0;
	border: 2px solid #000;
	text-align: left;
	display: none;
	overflow: hidden;
	overflow-x: auto;
	padding-left: 15%;
	padding-right: 15%;
	box-shadow:0 0 30vw 5vw rgb(0 0 0 / 50%);
}

#docker .doc {
	display: inline-block;
	width: 20em;
	height: 20em;
	padding: 0.5em .75em;
	font-size: 28px;
	background: var(--shadow);
	color: var(--text);
	margin: 0 0.75em;
	position: relative;
	/* top: 1.5%; */
	border: 4px solid #000;
	vertical-align: top;
	text-align: left;
	overflow: hidden;
}

#docker .doc *	{
	opacity:	0.8;
	transition:	300ms opacity;
}

#docker .doc:focus	{
	border-color:	#fff;
	outline:	none;
}

#docker .doc:hover	{
	border-color:	#7f7;
}
#docker .doc:hover *,
#docker .doc:focus *	{
	opacity:	1;
}

#docker .doc small	{
	padding-top:	0.5em;
}

#docker .doc big	{
	font-size:	125%;
	font-weight:	bold;
}

#docker .doc .preview	{
	background:	var(--shadow);
	font:	monospace;
	font-size:	75%;
	padding:	5px 3%;
	display:	block;
	text-align:	left;
	cursor:	default;
	height:	16em;
	width:	107%;
	left:	-4%;
	position:	relative;
	color:	#ddd;
	font-weight:	bold;
	overflow:	hidden;
}

#docker .doc .item[type]	{
	position:	relative;
	width:	3em;
	height:	2em;
	margin:	0;
	margin-right:	1em;
	margin-top:	-5px;
	display:	inline-block;
	vertical-align:	middle;
	font-weight:	bold;
	text-align:	center;
}

#docker .doc .item[type="html"]	{
	background-color:	red;
}

#docker .doc .item[type="js"]	{
	background-color:	blue;
}

#docker .doc .item[type="css"]	{
	background-color:	green;
}

#docker .doc .item[type="txt"]	{
	background-color:	black;
}

.CodeMirror-fullscreen	{
	position:	fixed;
	top:	0;
	left:	0;
	right:	0;
	bottom:	0;
	height:	auto;
	z-index:	9;
}

.CodeMirror	{
	height:	100%;
}

.CodeMirror-code	{
	z-index:	5555;
}

.CodeMirror-code>div	{
	z-index:	6000;
}

.todoTab:active	{
	color:	#888;
}

.todoTab:hover	{
	opacity:	1;
}

.todoTab	{
	cursor:	pointer;
	opacity:	0.75;
	font-weight:	bold;
	color:	red;
	transition:	150ms opacity;
}

.todoTab._done	{
	color:	green;
}

.extTab, .colorTab	{
	color:	#888;
}

.extTab	{
	font-size:	85%;
	padding-right:	2em;
}

.colorTab:after	{
	content:	"▰";
	font-weight:	bold;
	color:	var(--hint-color);
	margin-left:	4px;
	cursor:	pointer;
	text-shadow:	0 0 2px #888;
}

.rangeTab:hover	{
	opacity:	1;
}

.rangeTab:before	{
	content:	";";
	color:	#888;
}

.rangeTab, .valueTab	{
	opacity:	0.5;
	color:	gold;
	cursor:	pointer;
	text-shadow:	0 0 2px #888;
	font-size:	85%;
	transition:	200ms opacity;
	padding-right:	1em;
}

.valueTab	{
	color:	gold;
}

.refTab	{
	font-weight:	normal;
	cursor:	pointer;
}

.refTab:before	{
	content:	"i";
	opacity:	0.65;
	font-size:	0.75rem;
	position:	relative;
	top:	-0.5em;
	left:	0.15em;
	color:	#aaf;
}

.refTab:hover:before	{
	opacity:	1;
}

#inpColor	{
	position:	absolute;
	left:	-45%;
	top:	45%;
}

#inpRange, #inpText	{
	position:	absolute;
	left:	-445%;
	top:	45%;
	z-index:	-1;
	font-size:	200%;
}

#inpRange:focus, #inpText:focus	{
	z-index:	9900;
}

#inpText	{
	opacity:	0;
	font-size:	9px;
	pointer-events:	none;
	margin-bottom:	-5em;
}

.firefox .valueTab{
	color: transparent;
	pointer-events: none;
	text-shadow: none;
}

.firefox .valueTab:after {
	color: var(--text);
	content: ";";
}

.firefox #inpText {
	display: none;
}

html #body .hidden	{
	display:	none;
}



label#btnCreateResource:hover, label#btnFile:hover	{
	color:	var(--bright);
}

label#btnCreateResource, label#btnFile	{
	color:	var(--text);
	font-size:	85%;
	cursor:	pointer;
	padding-left:	0.33em;
}

.fa-solid, .fas	{
	font-family:	"Font Awesome 6 Free";
	font-style:	normal;
}

#box_editor {
	position: relative;
	top: -4px;
	width: 100%;
	left: -1px;
	height: calc(100vh - var(--statusbar-height) - var(--menubar-height)  );
	font-family: "Source Code Pro Medium", "Consolas", monospace;
	font-size: 16pt;
	z-index: 1000;
	overflow: hidden;
	margin-bottom: -5px;
}

#body table#split	{
	width:	calc(100vw - var(--bird-width-current) - var(--sidebar-width));
	position:	relative;
	top:	var(--menubar-height);
	border:	0px;
	border-spacing:	0;
	left:	calc(var(--sidebar-width) + 0px);
	height:	calc(100.25vh - var(--statusbar-height) - var(--menubar-height) );
	background: red;
	margin-top: -1px;
}

#body #split td	{
	height:	100%;
	overflow:	hidden;
	background:	#000;
	padding: 0;
	min-width: 1em;
}

#body #split td:first-child	{
	resize:	horizontal;
}

#body #split #handle	{
	width:	5px;
	background:	#333;
	overflow:	hidden;
	position:	absolute;
	display:	none;
}

#body #preview	{
	width:	100.5%;
	display:	inline-block;
	height:	calc(100vh - 61px);
	border:	0;
	background:	#444;
	position:	relative;
	top:	1px;
	xz-index:	2500;
	left:	-3px;
}


#body[data-view="true"][data-preview="true"] #left{
	max-width: 66vw;
	min-width: 33vw;
}

html #body	{
	accent-color:	red;
}

dialog	{
	padding:	0;
	background:	var(--text);
	color:	var(--dark);
	font-family:	"Segoe UI", tahoma;
	display:	block;
	position:	relative;
	overflow:	hidden;
	width:	25em;
	box-sizing:	border-box;
	box-shadow:	5px 5px 25px #000;
	border:	1px solid #888;
	left: 30vw;
	top: 20vh;
}

dialog::backdrop	{
	background:	rgba(0, 0, 0, 0.25);
}

dialog .button	{
	cursor:	pointer;
	opacity:	0.75;
	transition:	250ms opacity;
	user-select:	none;
}

dialog .button:hover	{
	opacity:	1;
}

dialog .title	{
	padding:	0.1em;
	margin:	0;
	background:	var(--dark);
	width:	100%;
	padding-left:	0.3em;
	color:	var(--bright);
	padding-bottom:	0.2em;
	user-select:	none;
}

dialog .inner	{
	margin:	1em 1.5em;
	position:	relative;
}

dialog .title .close	{
	float:	right;
	margin-right:	0.25em;
	margin-top:	-0.05em;
	font-size:	1.33rem;
	border:	0;
	border-radius:	0;
	color:	#fff;
	background:	transparent;
}

dialog .body	{
	text-align:	left;
	max-height:	6em;
	overflow:	auto;
	width:	100%;
	padding:	0;
}

dialog .value	{
	width:	100%;
	margin:	0.5em auto;
	display:	block;
	padding:	0.25em 0.5em;
	border:	1px solid #000;
	font-size:	125%;
	margin-bottom:	0.75em;
}

dialog .cancel, dialog .ok	{
	width:	9em;
	padding:	0.5em 0;
}

dialog .cancel	{
	float:	right;
}

#body[data-dialog="ok_only"] dialog .cancel{
	display: none;
}


.remCursor	{
	color:	yellow;
	text-shadow:	1px 1px 5px #000;
	transform:	rotate(90deg);
	display:	inline-block;
	margin:	-0.25em -0.25em -0.75em -0.25em;
}

body[data-users='1'] .remCursor	{
	display:	none;
}

#userLogin button	{
	opacity:	0.75;
}

#userLogin:hover button	{
	opacity:	1;
}

#userLogin	{
	float:	right;
	padding-top:	0.35rem;
	padding-right:	0.5em;
	cursor:	default;
}

#div_network {
	color: transprent;
	float: right;
	position: relative;
	top: -0.6rem;
	margin-right: 0.5rem;
	font-size: 2rem;
}


body[data-online="false"] #div_network {
	color:	#c53e26;
}

body[data-online="2g"] #div_network {
	color:	#c1dc31;
}

body[data-online="3g"] #div_network {
	color:	#43d460;
}

body[data-online="4g"] #div_network {
	color:	#18a000;
}

.CodeMirror-gutter-elt span {
	position: absolute;
	left: 1.1rem;
	color: rgba(255, 200, 0, 0.5);
	font-size: 1.5rem;
	top: 1.55rem;
}



/*

function parseCSSIntoObject(css){

var rules={};
var sel = "";
var float = [];

css.split("\n").map(function(line){
  if(line.endsWith("{")){
     if(sel){
        //rules[sel]=float.filter(String);
        var tmp = {};
        float.filter(String).map(function(ln){
            var p = ln.split(":");
            tmp[p[0]]= p.slice(1).join(":");
        });
        if(rules[sel]){
          Object.assign(rules[sel], tmp);
        }else{
        
          rules[sel]= tmp;
        }
        float.length = 0;
     }
     sel=line.slice(0,-1).trim();
     return;
  }

  if(line.endsWith("}")){
     float.push(line.slice(0,-1).trim());
     return;
  }

  float.push(line.trim());


});
return rules;
}

function objToCSS(obj, isMin){
  var buff = [], S=  isMin ? "" : "\t", L =  isMin ? "" : "\n";
  Object.keys(obj).forEach(function(k){
    var v = obj[k];
    buff.push( L+ k+S+"{");
     Object.keys(v).forEach(function(prop){
         buff.push(S+ prop+":" + S + v[prop].trim());        
     });
    buff.push("}");

  });
  return buff.join(isMin ? "" : "\n").trim();
}

function processCSS(obj){
  var trash={};

  Object.keys(obj).forEach(function(k){
    var v = obj[k];
   
     Object.keys(v).forEach(function(prop){
         var val = v[prop], inc;
         if(!val && prop.match(/@[A-Z_-]+/) && (inc=obj[prop.slice(1)]) ){
               delete v[prop];
               Object.assign(v, inc);
              trash[prop.slice(1)]=1;
         }
     });

  });

   Object.keys(trash).forEach(function(k){ delete obj[k]; });
   return obj;
}



function reportCSS(obj, prop){
  var report=[],  unq= {};

  Object.keys(obj).forEach(function(k){
    var v = obj[k];
   
     Object.keys(v).forEach(function(prop){
         var val = v[prop], inc;
         if(prop==="color"){ 
             report.push(k+"\t" + val);
             unq[val]=val;
          }
     });

  });
   report.unshift(report.length+" found, " + Object.keys(unq).length+" unique");
   return report;
}





var obj = parseCSSIntoObject(IN.value);
//processCSS(obj);
objToCSS(obj);

//reportCSS(obj).join("\n");
*/

.scrollbox .add{
	background-color: #ccffd8;
}

.scrollbox .rem{
	background-color: #ffebe9;
	text-decoration: line-through;
	text-decoration-color: rgba(0,0,0,0.2);
}

.scrollbox {
	border: 1px solid #888;
	font-family: monospace;
	max-height: 10em;	
	overflow: auto;
}

.grider {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1em;
}

dialog:has(#frmRecover){  
	width: 40em; 
}

#frmRecover a{
	text-decoration: none;
}

#frmRecover .cancel, #frmRecover .ok	{
	width:	100%;
}

#frmRecover .scrollbox b {
	display: inline-block;
	width: 3.5em;
	padding-left: 0.5em;
}

.scrollbox div {
	border-bottom: 1px solid #888;
}

#frmRecover .scrollbox .add b{
	color: #408b1c;
}

#frmRecover .scrollbox .rem b{
	color: #a82727;
}



/* helper panel to replace history */
#box_history .root,
#historytools { display: none; }


#box_helper :is(a, a:visited, a:link){
	color: var(--text);
	text-decoration-color: blue;
}


body #helpertools {
	top: calc(40% - 30px);
	position: absolute;
}

body #box_helper {
	color: var(--text);
	user-select: text;
	background: var(--dark);
	overflow: auto;
	overflow-x: hidden;
	width: 100%;
	height: 60%;
	padding-bottom: 0;
	/* bottom: 0; */
	position: absolute;
	padding-left: 0.45em;
	font-size: 0.85em;
	padding-right: 0.5em;
	opacity: 0.8;
	transition: 300ms opacity;
	top: 40%;
	padding-bottom: 5em;
}





xxx body section#box_helper:hover {
	width:45vw;
	position: fixed;
	z-index: 9999;
	Xbottom: -12px;
	box-shadow: 0 0 1em #000;
	border: 1px solid var(--text);
	opacity: 1;
	margin-top: 0.5rem;
	height: 57%;

}


.CodeMirror-vscrollbar {
	overflow-y: hidden;
}


.CodeMirror-scroll::-webkit-scrollbar,
#box_files::-webkit-scrollbar,
#box_helper::-webkit-scrollbar {
  width: 4px; height: 4px;
}

.CodeMirror-scroll::-webkit-scrollbar-track,
#box_files::-webkit-scrollbar-track,
#box_helper::-webkit-scrollbar-track {
  background: #333;
}

.CodeMirror-scroll::-webkit-scrollbar-thumb,
#box_files::-webkit-scrollbar-thumb,
#box_helper::-webkit-scrollbar-thumb  {
  background: #777;
}

#box_helper ul {
	padding-left: 1em;
}

#box_helper code {
	background: var(--shadow);
	padding: 0.1em 0.5em;
	display: inline-block;	
	color: var(--bright);
}


	
#helpertools b:after{
	content:  attr(data-count);	
	font-size: 1rem; 
	top:  -0.3em;
	position: relative;
}

#helpertools b {
	font-size: 200%;
	margin: -0.2em;
	position: absolute;
	top: -0.2em;
	left: 0.2em;
}

#box_helper .list {
	list-style: none;
	margin: 0; padding:0;
	margin-left: -0.2em;
}

#box_helper .list .item {
	background: var(--least);
	color: var(--text);
	padding: 1px 5px;
	border: 1px solid var(--bright);
	margin: 0.1em 0.3em;
	display: inline-block;
	font-size: 0.75rem;
	cursor: pointer;
	opacity: 0.8;
	transition: 250ms opacity;
}
#box_helper .list .item:hover {
	opacity: 1;
}


#box_helper .fact {
	padding: 0.5em 0.25em;
	zbackground: var(--shadow);
	font-size: 1.15em;
}

#box_helper .fact button {
	float: right;
	border: 1px solid var(--med);
	cursor: pointer;
	margin-top: 0.34em;
	margin-right: 0.1em;
	display: block;
	width: 100%;
	margin: 1em 0.25em;
	font-size: 1em;
}

#box_helper .fact small {
	font-size: 0.9em;
	opacity: 0.75;
	padding-left: 1em;
}

#box_helper .fact p {
	font-size: 1.25em;
}

#box_helper .fact b {
	font-size: 1.5em;
	filter: grayscale(1);
	text-shadow: 0 0 0 transparent;
	transition: text-shadow 220ms ease-out;
}

#box_helper .fact h4 {
	opacity: 0.5;
	clear: both;
	margin-top: 1em;
}

#box_helper .fact ul {
	list-style: none;
	margin: 0;
	padding: 0;
	margin-bottom: 4em;
	margin-left: -0.4em;
}

#box_helper .fact  li {
	float: left; 
	margin: 0.1em 0.25em;
	padding: 0.15em 0.15em;
}

#box_helper .fact  kbd {	
	padding: 0.2em 0em;
}

#box_helper .fact  kbd>span {
	background: var(--text);
	padding: 0;
	border: 0.25em outset var(--med);
	border-radius: 0.3em;
	color: var(--shadow);
	font-weight: bold;
	min-width: 2.5em;
	display: inline-block;
	text-align: center;
	padding: 0 0.5em;
	text-transform: capitalize;
	font-size: 0.75em;
	margin: 0 0.15em;
}




#box_helper .fact b.shine {
	filter: none;
	text-shadow: 0 0 2px orange, 0 0 5px yellow, 0 0 8px yellow;
	transition: text-shadow 50ms;
}