copyparty/copyparty/web/browser.css

:root {
	color-scheme: dark;
  	--transparent: transparent;

	--grid-sz: 10em;
	--grid-ln: 3;
	--nav-sz: 16em;
	--sbw: 0.5em;
	--sbh: 0.5em;

	--tab-alt: var(--a);
	--row-alt: var(--bg-u1);

	--sel-fg: var(--bg-d1);
	--sel-bg: var(--fg);

	--btn-fg: var(--a);
	--btn-bg-a: rgba(128,128,128,0.15);
	--btn-bg-a: color-mix(in oklab, var(--bg-max) 85%, var(--fg-max) 20%);
	--btn-bg: rgba(128,128,128,0.15);
	--btn-bg: linear-gradient(-5deg, color-mix(in oklab, var(--btn-bg-a) 40%, transparent), color-mix(in oklab, var(--btn-bg-a)70%, var(--a-gray)));
	--btn-h-fg: var(--a-hil);
	--btn-h-bg: color-mix(in oklab, var(--a-gray) 45%, var(--bg-max));
	--btn-1-fg: var(--bg);
	--btn-1-bg: var(--a);
	--btn-h-bs: var(--btn-bs);
	--btn-h-bb: var(--btn-bb);
	--btn-1-bs: var(--btn-bs);
	--btn-1-bb: var(--btn-bb);
	--btn-1h-fg: var(--btn-1-fg);
	--btn-1h-bg: var(--a-hil);
	--btn-1h-bs: var(--btn-1-bs);
	--btn-bb: 1px solid var(--bg-u3);
	--btn-1h-bb: var(--btn-1-bb);
	--chk-fg: var(--tab-alt);
	--txt-sh: var(--bg-d2);
	--txt-bg: var(--btn-bg-a);

	--op-aa-fg: var(--a);
	--op-aa-bg: var(--bg-d2);
	--op-a-sh: color-mix(in oklab, var(--bg-max) 50%, transparent 50%);

	--u2-btn-b1: #999;
	--u2-sbtn-b1: #999;
	--u2-txt-bg: var(--bg-u5);
	--u2-tab-bg: linear-gradient(to bottom, var(--bg), var(--bg-u1));
	--u2-tab-b1: rgba(128,128,128,0.8);
	--u2-tab-1-fg: var(--a-hil);
	--u2-tab-1-bg: var(--bg);
	--u2-tab-1-b1: #999;
	--u2-tab-1-b2: #999;
	--u2-tab-1-sh: transparent;
	--u2-b-fg: #fff;
	--u2-b1-bg: #c83;
	--u2-b2-bg: #d80;
	--u2-inf-bg: #07a;
	--u2-inf-b1: #0be;
	--u2-ok-bg: #380;
	--u2-ok-b1: #8e4;
	--u2-err-bg: #900;
	--u2-err-b1: #d06;
	--ud-b1: #888;

	--sort-1: var(--a);
	--sort-2: var(--a-gray);

	--sz-b: #aaa;
	--sz-k: #4ff;
	--sz-m: var(--tab-alt);
	--sz-g: var(--a);
	--sz-t: var(--sz-g);
	--sz-p: var(--sz-t);

	--srv-1: #aaa;
	--srv-2: #a73;
	--srv-3: #fc4;
	--srv-3b: rgba(255,204,68,0.6);

	--tree-bg: var(--bg-u1);

	--g-play-bg: #750;
	--g-play-b1: var(--a-dark);
	--g-play-b2: var(--a);

	--g-sel-fg: var(--fg-max);
	--g-sel-bg: color-mix(in xyz, var(--g-sel-b1) 30%, var(--bg) 70%);
	--g-sel-b1: var(--a-dark);
	--g-sel-sh: hsl(from var(--a) h calc(s * 1.05) calc(l * .3));
	--g-fsel-bg: color-mix(in xyz, var(--g-sel-b1) 70%, var(--bg-max) 30%);
	--g-fsel-b1: var(--a);
	--g-fsel-ts: hsl(from var(--a) h calc(s * 1.05) calc(l * .3));
	--g-dfg: #bbb;
	--g-fg: var(--fg);
	--g-bg: var(--bg-u2);
	--g-b1: var(--bg-u3);
	--g-b2: var(--bg-u5);
	--g-g1: var(--bg-u2);
	--g-g2: var(--bg-u5);
	--g-f-bg: var(--bg-u3);
	--g-f-b1: var(--bg-u5);
	--g-f-fg: var(--fg-max);
	--g-sh: color-mix(in oklab, var(--bg-max) 30%, transparent 70%);

	--f-sh1: 0.33;
	--f-sh2: 0.02;
	--f-sh3: 0.2;
	--f-h-b1: rgba(128,128,128,0.7);

	--f-play-bg: var(--a-dark);
	--f-play-fg: var(--fg-max);
	--f-sel-sh: var(--a);
	--f-gray: #999;

	--fm-off: var(--a-hil);
	--mp-sh: #1116;
	--mp-b-bg: color-mix(in oklab, var(--bg-max) 20%, transparent 80%);

	--scrl-hint: var(--bg-u2);

	--err-fg: #fff;
	--err-bg: #a20;
	--err-b1: #f00;
	--err-ts: #500;
}

html.y {
	--scrl-hint: var(--bg);
}
html.a {
	--op-aa-sh: 0 0 .2em var(--bg-d3) inset;

	--btn-bs: .1em .2em .1em var(--mp-sh);
}
html.az {
	--btn-1-bs: .05em .1em .2em var(--a-dark) inset;
}
html.ay {
	--btn-bg: linear-gradient(-5deg, color-mix(in oklab, var(--btn-bg-a)80%, var(--a)), color-mix(in oklab, var(--btn-bg-a) 50%, transparent));
}

html.b {
	--btn-bs: 0 .05em 0 var(--bg-d3) inset;
	--btn-1-bs: 0 .05em 0 var(--btn-1h-bg) inset;
	--btn-bg: color-mix(in oklab, var(--bg-u5), transparent);

	--tree-bg: var(--bg);

	--g-bg: var(--bg);
	--g-b1: var(--bg);
	--g-b2: var(--bg);
	--g-g1: var(--bg);
	--g-sh: rgba(0,0,0,0);

	--op-aa-bg: rgba(255,255,255,0.06);

	--u2-sbtn-b1: #fc0;
	--u2-txt-bg: transparent;
	--u2-tab-1-sh: var(--bg);
	--u2-b1-bg: rgba(128,128,128,0.15);
	--u2-b2-bg: var(--u2-b1-bg);

	--f-sh1: 0.1;
	--mp-b-bg: transparent;
}
html.bz {
	--a: #fc5;
}
html.by {
	--a: #07c;
	--bg: var(--bg-u2);
}
html.c {
	font-weight: bold;

	--fg: #fff;
	--fg-weak: #cef;
	--bg-u5: #409;
	--bg-u2: linear-gradient(-35deg, #fd7233, #cd27a0, #5d47a5 49.5%, #16e9fb 50%, #3b6cc8 50.4%, #0e51ac);
	--bg: #376ac5;
	--bg-u3: #407;

	--a: #f9dc22;
	--a-gray: #0ae;

	--tab-alt: #6ef;
	--row-alt: #47237d;

	--btn-fg: #fff;
	--btn-bg-a: #9019bf;
	--btn-h-bg: #a039ff;
	--chk-fg: #d90;

	--op-aa-bg: #f9dd22;

	--srv-1: #ea0;
	--mp-b-bg: transparent;
}
html.cz {
	--bgg: var(--bg-u2);

	--sel-bg: var(--bg-u5);
	--sel-fg: var(--fg);

	--btn-bb: .2em solid #709;
	--btn-bs: 0 .1em .6em rgba(255,0,185,0.5);
	--btn-1-bb: .2em solid #e90;
	--btn-1-bs: 0 .1em .8em rgba(255,205,0,0.9);

	--sz-b: #ddd;
	--sz-k: #c9f;

	--srv-3: #fff;

	--u2-tab-b1: var(--bg-d3);
	--u2-tab-1-bg: a;
}
html.cy {
	--fg: #fff;
	--fg-weak: #fff;
	--bg: #ff0;
	--bg-u2: #f00;
	--bg-u3: #f00;
	--bg-u5: #999;
	--bg-d3: #f77;
	--bg-d2: #ff0;

	--sel-bg: #f77;

	--a: #fff;
	--a-hil: #fff;
	--a-h-bg: #000;

	--tab-alt: #f00;
	--row-alt: #fff;

	--btn-bg: #000;
	--btn-fg: #ff0;
	--btn-h-fg: #fff;
	--btn-1-bg: #ff0;
	--btn-1-fg: #000;
	--btn-bs: 0 .25em 0 #f00;
	--chk-fg: #fd0;

	--txt-bg: #000;
	--srv-1: #f00;
	--srv-3: #fff;
	--op-aa-bg: #fff;

	--u2-b1-bg: #f00;
	--u2-b2-bg: #f00;

	--g-sel-fg: #fff;
	--g-sel-bg: #aaa;
	--g-fsel-bg: #aaa;
}
html.dz {
	--fg: #4d4;
	--fg-weak: #2a2;

	--bg-u5: #050;
	--bg-u3: #020;
	--bg-u2: #020;
	--bg-u1: #020;
	--bg: #010;
	--bg-d1: #000;
	--bg-d2: #020;
	--bg-d3: #000;

	--tab-alt: #6f6;
	--row-alt: #030;

	--a: #9f9;
	--a-hil: #cfc;
	--a-dark: #afa;
	--a-gray: #2a2;

	--btn-bg: rgba(64,128,64,0.15);
	--btn-h-bg: #050;
	--btn-1-fg: #000;
	--btn-1-bg: #4f4;
	--btn-1h-bg: #3f3;
	--btn-bs: 0 0 0 .1em #080 inset;
	--btn-1-bs: a;

	--u2-btn-b1: var(--fg-weak);
	--u2-sbtn-b1: var(--fg-weak);
	--u2-tab-b1: var(--fg-weak);
	--u2-tab-1-fg: #fff;
	--u2-tab-1-bg: linear-gradient(to bottom, #151, var(--bg) 80%);
	--u2-b1-bg: #3a3;
	--u2-b2-bg: #3a3;

	--sort-1: #fff;
	--sort-2: #3f3;

	--srv-1: #3e3;
	--srv-2: #1a1;
	--srv-3: #0f0;
	--srv-3b: #070;

	--tree-bg: #010;

	--f-h-b1: #3b3;

	text-shadow: none;
	font-family: 'scp', monospace, monospace;
	font-family: var(--font-mono), 'scp', monospace, monospace;
}
html.dy {
	--fg: #000;
	--fg-max: #000;
	--fg-weak: #000;

	--bg-d3: #fff;
	--bg-d2: #fff;
	--bg-d1: #fff;
	--bg: #fff;
	--bg-u1: #fff;
	--bg-u2: #fff;
	--bg-u3: #000;
	--bg-u5: #fff;
	--bg-max: #fff;

	--tab-alt: #000;
	--row-alt: #eee;

	--a: #000;
	--a-hil: #000;
	--a-gray: #bbb;
	--a-dark: #000;

	--btn-bg: #fff;
	--btn-fg: #000;
	--btn-h-fg: #000;
	--btn-h-bg: #fff;
	--btn-1-fg: #fff;
	--btn-1-bg: #000;
	--btn-1h-bg: #555;
	--chk-fg: a;
	--txt-sh: a;
	--txt-bg: a;

	--op-a-sh: a;

	--u2-txt-bg: a;
	--u2-tab-1-sh: a;
	--u2-tab-1-b1: a;
	--u2-tab-1-b2: a;
	--u2-tab-1-fg: a;
	--u2-tab-1-bg: a;
	--u2-b1-bg: #000;
	--u2-b2-bg: #000;

	--ud-b1: a;

	--sort-1: a;
	--sort-2: a;

	--srv-1: a;
	--srv-2: a;
	--srv-3: a;
	--srv-3b: a;

	--tree-bg: #fff;

	--g-sel-bg: #000;
	--g-sel-fg: #fff;
	--g-fsel-bg: #444;
	--g-fsel-ts: #000;
	--g-fg: a;
	--g-bg: a;
	--g-b1: a;
	--g-b2: a;
	--g-g1: a;
	--g-g2: a;
	--g-f-bg: a;
	--g-f-b1: a;
	--g-sh: a;

	--f-sh1: a;
	--f-sh2: a;
	--f-sh3: a;

	--f-sel-sh: #000;

	--fm-off: a;
	--mp-sh: a;
	--mp-b-bg: #fff;
}
html.dy #files tr.sel a, 
html.dy #files tr.sel a.play {
	color: #fff;
}
html.dy tr.play td:nth-child(1) a {
  background: #fff;
  border: #000 solid 1px;
}
html.dy #spaceUsed_bar {
	background: #000;
}
html.dy #barpos {
	border: var(--btn-bb);
}
html.dy #pathBar {
	background: var(--bg);
}
html.dy #spaceTotal_bar,
html.dy select,
html.dy input {
	border: #000 solid 1px !important;
}
html.dy h3 {
	border-top: #000 solid 1px;
	border-radius: 0 !important;
}
* {
	line-height: 1.2em;
}
::selection {
	color: var(--sel-fg);
	background: var(--sel-bg);
	text-shadow: none;
}
html,body,tr,th,td,#files,a,#blogout {
	/* color: inherit; */
	background: none;
	font-weight: inherit;
	font-size: inherit;
	padding: 0;
	border: none;
}
body {
	background: #e4edf8;
}
@supports (background: var(--bg)) {
	body {
		background: none;
	}
}
#files {
	margin-top: .2em;
}
html {
	color: var(--fg);
	background: var(--bgg);
	font-family: sans-serif;
	font-family: var(--font-main), sans-serif;
	text-shadow: 1px 1px 0px var(--bg-max);
}
html, body {
	margin: 0;
	padding: 0;
}
.noscroll {
	overflow: hidden;
}
pre, code, tt, #doc, #doc>code {
	font-family: 'scp', monospace, monospace;
	font-family: var(--font-mono), 'scp', monospace, monospace;
}
.ayjump {
	position: fixed;
	overflow: hidden;
	width: 0;
	height: 0;
	left: -10em;
	color: var(--bg);
}
html .ayjump:focus-visible {
	z-index: 80386;
	color: #fff;
	color: var(--a-hil);
	background: #069;
	background: var(--bg-u2);
	border: .2em solid var(--a);
	box-shadow: none;
	outline: none;
	width: auto;
	height: auto;
	top: .5em;
	left: .5em;
	padding: .5em .7em;
}
#path,
#path * {
	font-size: 1em;
}
#pathBar {
	display: flex;
	margin: 0;
	align-content: center;
	position: sticky;
	z-index: 4;
	background: linear-gradient(to bottom, var(--bg), transparent);
	padding: .6em 0;
	top: 0;
}
#wfp.shifted {
	margin-left: 2em;
}
#path {
	color: var(--fg);
	text-shadow: 1px 1px 0 var(--bg-max);
	font-weight: normal;
	display: block;
	margin: 0 .5em 0 0;
	width: calc(100% - .5em);
	align-content: center;
	padding: .2em;
	font-size: 1.2em;
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	background: var(--bg-u2);
	border-radius: 5px;
	border-radius: var(--radius);
}
#pathBar #folder_search {
	margin: 0;
	height: calc(100% - .5em);
	width: calc(100% - .6em);
	right: 0;
}
#qs_btns {
	position: absolute;
	right: .2em;
	top: .1em;
	font-size: 1.3em;
	cursor: pointer;
}
#qs_btns a {
	background: color-mix(in oklab, var(--txt-bg), transparent);
	width: 1em;
	display: inline-block;
	text-align: center;
	border-radius: 5px;
	border-radius: var(--radius);
}
#qs_btns a:hover {
	background: var(--bg);
}
html.y #path {
	text-shadow: none;
}
#path a.dtarget {
	text-shadow: var(--f-sel-sh) 0 0 5px;
	background: color-mix(in oklab, var(--a), transparent);
}
#path #entree {
	margin-left: -.7em;
}
#files {
	overflow-x: auto;
	display: block;
	z-index: 1;
	top: -.3em;
	border-spacing: 0;
	position: relative;
	margin: .2em -.5em;
  	padding: 0 .5em;
}
#files tbody a {
	display: block;
	padding: .5em;
	scroll-margin-top: 45vh;
}
#files tr {
	scroll-margin-top: 25vh;
	scroll-margin-bottom: 20vh;
}
.td_w {
	width: 30em;
	max-width: 30em;
}
.td_s {
	width: 14em;
	max-width: 14em;
}
#files tbody div a {
	color: var(--tab-alt);
}
a, #blogout, #files tbody div a:last-child {
	color: var(--fg);
	padding: .2em;
	text-decoration: none;
}
#goh,
#blogout {
	margin: -.2em;
	text-shadow: 1px 1px 0px var(--bg-max);
}
#ops input[type=submit]:hover,
#goh:hover,
a:hover {
	color: var(--a-hil);
	background: var(--a-h-bg);
}
#files a:hover {
	color: var(--fg-max);
	background: color-mix(in oklab, var(--a) 20%, transparent);
	text-decoration: underline;
}
#files thead th {
	position: sticky;
	top: -1px;
}
#files thead a {
	color: var(--f-gray);
	font-weight: normal;
}
.s0:after,
.s1:after {
	content: '▾';
	/* margin-left: -.15em; */
}
.s0r:after,
.s1r:after {
	content: '▴';
	/* margin-left: -.15em; */
}
.s0:after,
.s0r:after {
	color: var(--sort-1);
}
.s1:after,
.s1r:after {
	color: var(--sort-2);
}
#files thead th:after {
	margin-right: -.5em;
}
#files tbody tr:hover td,
#files tbody tr:hover td+td {
	background: color-mix(in oklab, var(--a) 15%, transparent);
}
a.dir {
	color: var(--a);
}
tr.dir td:nth-child(2) a::before {
	content: "📁";
	margin: 0 .1em 0 -.2em;
}
#files thead th {
	padding: .3em;
	background: var(--bg);
	border-bottom: 1px solid var(--f-h-b1);
	cursor: pointer;
}
html.y #files thead th {
	box-shadow: 0 1px 0 rgba(0,0,0,0.12);
}
html #files.hhpick thead th {
	color: rgb(0, 0, 0);
	background: #df5555;
	text-shadow: none;
	border: red solid 2px;
}
#files td {
	margin: 0;
	padding: .3em .5em;
	background: var(--bg);
	max-width: var(--file-td-w);
	word-wrap: break-word;
	overflow: hidden;
}
#files td:has(a) {
	padding: 0;
}
#files tr.fade a {
	color: #999;
	color: rgba(255, 255, 255, 0.4);
	font-style: italic;
}
html.y #files tr.fade a {
	color: #999;
	color: rgba(0, 0, 0, 0.4);
}
#files tr:nth-child(2n) td {
	background: var(--row-alt);
}
#files td+td {
	box-shadow: 1px 0 0 0 rgba(128,128,128,var(--f-sh1)) inset, 0 1px 0 rgba(255,255,255,var(--f-sh2)) inset, 0 -1px 0 rgba(255,255,255,var(--f-sh2)) inset;
}
#files tr:nth-child(2n+1) td+td {
	box-shadow: 1px 0 0 0 rgba(128,128,128,var(--f-sh1)) inset, 0 1px 0 rgba(0,0,0,var(--f-sh3)) inset, 0 -1px 0 rgba(0,0,0,var(--f-sh3)) inset;
}
#files td:first-child {
	border-radius: var(--radius) 0 0 var(--radius);
	white-space: nowrap;
}
#files td:last-child {
	border-radius: 0 var(--radius) var(--radius) 0;
}
#files tbody td:nth-child(3) {
	font-family: 'scp', monospace, monospace;
	font-family: var(--font-mono), 'scp', monospace, monospace;
	text-align: right;
	padding-right: 1em;
	white-space: nowrap;
}
#files tbody td:first-child {
	color: var(--f-gray);
	text-align: center;
}
#files tbody tr td:last-child {
	white-space: nowrap;
}
#files span.fsz_B { color: var(--sz-b); }
#files span.fsz_K { color: var(--sz-k); }
#files span.fsz_M { color: var(--sz-m); }
#files span.fsz_G { color: var(--sz-g); }
#files span.fsz_T { color: var(--sz-t); }
#files span.fsz_P { color: var(--sz-p); }
html.y #files span.fsz_G,
html.y #files span.fsz_T,
html.y #files span.fsz_P { font-weight: bold }
#files thead th[style] {
	width: auto !important;
}
#files .srch_hdr a {
	display: inline;
}
#files tr.dtarget {
	box-shadow: 0 0 5px 0 var(--f-sel-sh) inset;
	background: color-mix(in oklab, var(--a), transparent);
}
#files tr.dtarget td {
	background: none;
}
#path a {
	padding: 0 .35em;
	position: relative;
	z-index: 1;
	/* ie: */
	border-bottom: .1em solid #777\9;
	margin-right: 1em\9;
}
#path i {
	width: 2em;
	height: 2.5em;
	margin: -1em .3em -1em -1.7em;
	display: inline-block;
	transform: skew(-25deg);
	border-right: #222 solid 2px;
	border-right: var(--bg) solid 2px;
	background: linear-gradient(70deg, transparent 40%, color-mix(in oklab, var(--bg-max) 25%, transparent) 75%, color-mix(in oklab, var(--bg-max) 35%, transparent));
}
html.a #path i {
	border-right: var(--bg) solid 1px;
}
#path a:hover {
	color: var(--fg-max);
	background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0.2), rgba(0,0,0,0));
}
html.b #ggrid>a.dir:before,
html.b #path i {
	background: none;
}
html.y #path a:hover {
	background: none;
}
.logue {
	padding: .2em 0;
	position: relative;
	z-index: 1;
}
.logue.hidden,
.logue:empty {
	display: none;
}
.logue.raw {
	background: #ccc;
	background: var(--transparent);
	white-space: pre;
	font-family: 'scp', 'consolas', monospace;
	font-family: var(--font-mono), 'scp', 'consolas', monospace;
}
.iframe {
  background: none;
}
#doc>iframe,
.logue>iframe {
	background: var(--bgg);
	border: 1px solid var(--bgg);
	border-width: 0 .3em 0 .3em;
	border-radius: var(--radius);
	visibility: hidden;
	margin: 0 .3em;
	width: calc(100% - 1em);
	height: 0;
}
#doc>iframe.focus-visible,
.logue>iframe.-visible {
	box-shadow: 0 0 .1em .1em var(--a);
}
#pro.logue>iframe {
	height: 100vh;
}
#pro.logue {
	margin-bottom: .8em;
}
#epi.logue {
	margin: .8em 0;
}
#epi.logue.mdo:before {
	content: 'README.md';
	text-align: center;
	display: block;
	margin-top: -1.5em;
}
#epi.logue.mdo {
	border-top: 1px solid var(--bg-u5);
	margin-top: 2.5em;
}
.mdo>h1:first-child,
.mdo>h2:first-child,
.mdo>h3:first-child {
	margin-top: 0.5rem;
}
.mdo,
.mdo * {
	line-height: 1.5em;
}
#srv_info,
#srv_info2,
#acc_info {
	color: var(--srv-2);
	background: var(--bg);
	white-space: nowrap;
}
#srv_info,
#acc_info {
	position: relative;
	font-size: .8em;
	bottom: 18.5em;
}
#srv_info {
	left: 2em;
	padding-right: .5em;
}
#acessType,
#acc_info,
#srv_info span,
#srv_info2 span {
	color: var(--srv-1);
}
#srv_info2 a {
	padding: 0;
}
#srv_info2 {
	display: block;
}
#acc_info {
	left: 2em;
}
#acc_info > span:not([id]) {
	color: var(--srv-1);
	margin-left: .6em;
}
#acc_info span.warn {
	color: var(--srv-3);
	border-top: 1px solid var(--srv-3b);
}
#flogout {
	display: inline;
}
html.dz #flogout {
	margin-left: 1em;
}
#goh+span {
	color: var(--bg-u5);
	padding-left: .5em;
	margin-left: .5em;
	border-left: .2em solid var(--bg-u5);
}
#repl {
	opacity: .3;
	padding: .33em;
}
#repl:hover{
	opacity: 1;
}
#files a.doc {
	color: var(--a-gray);
}
#files a.doc.bri {
	color: var(--tab-alt);
}
tr td:nth-child(1) a {
	border-radius: var(--radius);
}
/* #files a.play {
	color: var(--a-dark);
	padding: .3em;
	margin: -.3em;
} */
tr.play td:nth-child(2) a::before {
  content: "▶";
}
tr.play td:nth-child(1) a {
  background: var(--btn-1-bg);
  color:var(--btn-1-fg);
  text-shadow: none;
}
/* #files tbody tr.play td,
#files tbody tr.play td+td,
#files tbody tr.play div a {
	background: var(--f-play-bg);
	color: var(--f-play-fg);
	text-shadow: none;
}
#files tbody tr.play a {
	color: inherit;
}
#files tbody tr.play a:hover {
	color: var(--btn-1h-fg);
	background: var(--btn-1h-bg);
	box-shadow: var(--btn-1h-bs);
	border-bottom: var(--btn-1h-bb);
} */
#ggrid {
	margin: -.2em -.5em;
}
#ggrid>a>span {
	overflow: hidden;
	display: block;
	display: -webkit-box;
	line-clamp: var(--grid-ln);
	-webkit-line-clamp: var(--grid-ln);
	-webkit-box-orient: vertical;
	padding-top: .3em;
}
#ggrid>a {
	display: inline-block;
	width: 10em;
	width: var(--grid-sz);
	vertical-align: top;
	overflow-wrap: break-word;
	border-radius: 5px;
	border-radius: var(--radius);
	padding: .3em;
	margin: .5em;
	color: var(--g-fg);
	background: var(--g-bg);
	border: 1px solid var(--g-b1);
	border-top: 1px solid var(--g-b2);
	box-shadow: 0 .1em .3em var(--g-sh);
}
#ggrid>a:focus-visible,
#ggrid>a:hover {
	color: var(--g-f-fg);
	background: var(--g-f-bg);
	border-color: var(--g-f-b1);
	box-shadow: 0 .1em .3em var(--g-sh);
}
#ggrid>a img {
	z-index: 1;
	border-radius: 5px;
	border-radius: calc(var(--radius) / 3 * 2);
	max-width: 10em;
	max-width: calc(var(--grid-sz) - 4px);
	max-height: 8em;
	max-height: calc(var(--grid-sz)/1.25);
	margin: 0 auto;
	display: block;
}
#ggrid>a.dir img {
  max-width: calc(var(--grid-sz) - 20px);
  margin: 10px auto 0 auto;
}
#ggrid.nocrop>a img {
	max-height: 20em;
	max-height: calc(var(--grid-sz)*2);
}

.imgcontainer {
	display: flex;
	overflow: hidden;
	position: relative;
	border-radius: 5px;
	border-radius: var(--radius);
	box-sizing: border-box;
	margin: -3px -2px;
	padding: 4px 3px;
}
.sel .gselchk,
.imgcontainer:hover .gselchk {
	display: block;
}
.srch_hdr .gselchk {
	display: none !important;
}
.gselchk {
	position: absolute;
	display: none;
	top: .3em;
	right: .3em;
	z-index: 2;
	font-size: 1.15em;
	width: 1em;
  	height: 1em;
	opacity: .69;
}

@keyframes rotate {
	100% {
		transform: rotate(1turn);
	}
}

.play .imgcontainer {
	&::before {
		content: '';
		box-sizing: border-box;
		position: absolute;
		left: -50%;
		top: -50%;
		width: 200%;
		height: 200%;
		background-repeat: no-repeat;
		background-size: 50% 50%, 50% 50%;
		background-position: 0 0, 100% 0, 100% 100%, 0 100%;
		background-image: linear-gradient(var(--a-hil), var(--a-hil)), linear-gradient(transparent, transparent), linear-gradient(var(--a-hil), var(--a-hil)), linear-gradient(transparent, transparent);
		animation: rotate 10s linear infinite;
	}
}
html:not(.e) #ggrid>a.dir:before {
	content: '📂';
}
#ggrid>a.dir>span {
	color: var(--g-fg);
}
#ggrid>a.au:before {
	content: '▶';
}
#ggrid>a:before {
	z-index: 2;
	display: block;
	position: absolute;
	padding: .3em 0;
	margin: -.4em;
	text-shadow: 0 0 .1em var(--bg-max);
	background: linear-gradient(135deg,rgba(255,255,255,0) 50%,rgba(255,255,255,0.2));
	border-radius: 5px;
	border-radius: var(--radius);
	font-size: 2em;
	transition: font-size .15s, margin .15s;
}
#ggrid>a:focus-visible:before,
#ggrid>a:hover:before {
	font-size: 2.5em;
	margin: -.2em;
}
#ggrid>a[tt] {
	background: linear-gradient(135deg, var(--g-g1) 95%, var(--g-g2) 95%);
}
#ggrid>a[tt]:focus-visible,
#ggrid>a[tt]:hover {
	background: var(--g-f-bg);
}
#ggrid>a.play,
#ggrid>a[tt].play {
	color: var(--g-sel-fg);
	border-color: var(--g-play-b1);
	border-top: 1px solid var(--g-play-b2);
}
#files tbody tr.sel td,
#files tbody tr.sel span,
#ggrid>a.sel,
#ggrid>a[tt].sel {
	color: var(--g-sel-fg);
	background: #f3c;
	background: var(--g-sel-bg);
	border-color: var(--g-sel-b1);
}
#ggrid>a.sel>span {
	color: var(--g-sel-fg);
}
#ggrid>a.sel,
#ggrid>a[tt].sel {
	border-top: 1px solid var(--g-fsel-b1);
	box-shadow: 0 .1em 1.2em var(--g-sel-sh);
	transition: all 0.2s cubic-bezier(.2, 2.2, .5, 1); /* https://cubic-bezier.com/#.4,2,.7,1 */
}
#files tbody tr.sel:hover td,
#files tbody tr.sel:focus-visible td,
#ggrid>a.sel:hover,
#ggrid>a.sel:focus-visible {
	color: var(--g-sel-fg);
	background: var(--g-fsel-bg);
	border-color: var(--g-fsel-b1);
	text-shadow: 1px 1px 0 var(--g-fsel-ts);
}
#ggrid>a.sel img {
	box-shadow: 0 0 1em var(--g-sel-sh);
}
#ggrid a {
	scroll-margin-top: 25vh;
	scroll-margin-bottom: 20vh;
}
#ggrid a.dtarget {
	box-shadow: 0 0 5px 0 var(--f-sel-sh);
	background: color-mix(in oklab, var(--a), transparent);
}
#files tr.sel a,
#files tr.sel a.play {
	color: var(--fg-max);
}
#files tr.sel a:hover {
	color: var(--fg-max);
	text-shadow: none;
}
#files tr.sel a.play.act {
	text-shadow: 0 0 1px var(--fg-max);
}
#files tr:focus-visible {
	outline: none;
	position: relative;
}
#files tr:focus-visible td+td {
	background: var(--bg-d3);
	box-shadow: 0 .2em 0 var(--f-sel-sh), 0 -.2em 0 var(--f-sel-sh);
}
#files tr:focus-visible:not(.play):not(.sel) td:first-child {
	background: var(--bg-d3);
	box-shadow: -.2em .2em 0 var(--f-sel-sh), -.2em -.2em 0 var(--f-sel-sh);
}
#player {
	display: none;
}
#widget {
	position: fixed;
	font-size: 1.4em;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	touch-action: none;
	box-shadow: 0 0 .5em var(--mp-sh);
}
#widget.anim {
	transition: margin-left 0; /* can't set this above 0 due to onwidgetresize */
}
#widget.anim #widgeti {
	transition: height 0.15s;
}
#widget.open #widgeti{
	/* box-shadow: 0 0 1em rgba(0,48,64,0.2); */
	display: block;
}

#pbarthinpos {
	display: none;
	align-content: center;
	padding: .2em .5em;
	padding-bottom: 0;
	height: 2em;
}
#widget.thin #pctl{
	display: flex;
}
#widget.thin #pbarthinpos{
	display: block;
}
#widget.thin #trackname {
	margin-right: auto;
}

#widgeti {
	position: relative;
	display: none;
}
#np_inf {
	height: 0;
}
#fshr {
	position: relative;
	font-size: .9em;
	top: -.04em;
	margin-right: .3em;
}
#wtgrid {
	padding: 0;
}
.btn.svgIcon {
	width: 1.5em;
  	height: 1.5em;
	padding: .1em;
}
.btn.svgIcon.gb_grd,
.btn.svgIcon.gb_glr {
	width: 1.7em;
  	height: 1.7em;
	padding: 0;
}

@keyframes spin {
	100% {transform: rotate(360deg)}
}
@keyframes fadein {
	0% {opacity: 0}
	100% {opacity: 1}
}
#wtico {
	display: inline-block;
	cursor: pointer;
	line-height: 1.2em;
  	vertical-align: bottom;
	padding: .05em .5em .1em .3em;
	border-radius: calc(var(--radius) / 2) 0 0 0;
	pointer-events: all;
}
#wstack {
	display: block;
	position: absolute;
	text-wrap-mode: nowrap;
	max-width: 100%;
	bottom: 100%;
	right: 0;
	font-size: 2em;

	text-align: right;
	color: var(--fg-max);
	pointer-events: none;
}
#wstack div {
	pointer-events: all;
	vertical-align: bottom;
}
#wtoggle {
	display: inline-block;
	text-wrap-mode: nowrap;
	text-align: center;
	max-width: calc(100% - 1.8em);
	overflow-x: auto;
	overflow-y: hidden;
	margin: 0 .1em .1em .2em;
	box-shadow: 0 0 .5em var(--mp-sh);
	border-radius: calc(var(--radius) / 2);
}
#wtico,
#up_quick.open,
#wtoggle,
#widgeti {
	background: #cde;
	background: var(--bg-u2);
	border: 1px solid #222;
	border: 1px solid var(--bg-u3);
}
#up_quick {
	position: absolute;
	bottom: 100%;
	bottom: calc(100% + .4em);
	right: .4em;
	font-size: xx-large;
	font-weight: bold;
	box-shadow: 0 0 .5em color-mix(in oklab, var(--a) 20%, transparent);
	border-radius: 10px;
	border-radius: calc(var(--radius) * 1.2);
	text-align: right;
}
#up_quick.open {
	box-shadow: 0 0 .5em color-mix(in oklab, var(--mp-sh) 20%, transparent);
}
#up_quick_more {
	display: none;
	min-width: 4em;
	font-weight: normal;
	margin-bottom: .2em;
	text-wrap-mode: wrap;
}
#up_quick_more.vis {
	display: block;
}
#up_quick_more a:hover {
	background: var(--btn-h-bg);
}
#up_quick_more a {
	position: static;
	font-size: large;
	display: block;
	text-wrap-mode: nowrap;
	padding: .5em;
	cursor: pointer;
	border-radius: 10px;
	border-radius: calc(var(--radius) * 1.6);
}
#up_quick .overlay_plus {
	right: .3em;
	margin-top: -1.5em;
}
#up_quick .btn{
	transition: all .25s;
	margin: -1px;
	border: none;
	cursor: pointer;
	width: max-content;
}
html:not(.e):not(.d) #up_quick .btn {
	transform: rotate(0deg);
}
html:not(.e):not(.d) #up_quick .btn.on {
	transform: rotate(-90deg);
	box-shadow: -.05em .02em .3em color-mix(in oklab, var(--a) 20%, transparent);
}
#up_quick .btn .rotatable {
	transition: all .20s;
	transform: rotate(-45deg);

	background: none;

	font-size: 1.2em;
	line-height: .9em;
}
#up_quick .btn.on .rotatable {
	transform: none;
}
#wfs, #wfm, #wzip, #wnp, #wm3u {
	display: none;
}
#wfs, #wzip, #wnp, #wm3u {
	margin-left: .2em;
	padding-right: .2em;
	border: 0 solid var(--bg-u5);
}
#wzip1 {
	margin-right: 0em;
}
#wzip {
    margin-left: 0 !important;
    padding-left: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
}
#wfm.act+#wzip1+#wzip,
#wfm.act+#wzip1+#wzip+#wnp {
	margin-left: .2em;
	padding-left: .2em;
	border-left-width: 2px;
}
#wfs.act,
#wfm.act {
	display: inline-block;
}
#wtoggle,
#wtoggle * {
	line-height: 1em;
	vertical-align: middle;
}
#wtoggle.sel #wzip,
#wtoggle.m3u #wm3u,
#wtoggle.np #wnp {
	display: inline-block;
}
#wtoggle.sel #wzip1,
#wtoggle.sel.np #wnp {
	display: none;
}
#wtoggle a {
	font-size: .5em;
	padding: .7em .5em;
	margin: -.3em .1em;
	display: inline-block;
}
#wtoggle #zip1 {
	padding: .5em;
	margin: -.1em .1em;
  	vertical-align: top;
}
#wm3u a {
	margin: -.2em .1em;
	font-size: .45em;
}
#wfs {
	font-size: .36em;
	text-align: right;
	line-height: 1.3em;
	padding: 0 .3em 0 0;
	border-width: 0 2px 0 0;
}
#wfm span,
#wm3u span,
#zip1 span,
#wnp span {
	font-size: .7em;
	display: block;
}
#wnp span {
	font-size: .7em;
}
#wm3u span {
	font-size: .77em;
	padding-top: .2em;
}
#wfm a:not(.en) {
	opacity: .3;
	color: var(--fm-off);
}
#wfm a.hide {
	display: none;
}
#files tbody tr.fcut td,
#ggrid>a.fcut {
	animation: fcut .5s ease-out;
}
@keyframes fcut {
	0% {opacity:0}
	100% {opacity:1}
}
#ggrid>a.glow {
	animation: gexit .6s ease-out;
}
@keyframes gexit {
	0% {box-shadow: 0 0 0 2em var(--a)}
	100% {box-shadow: 0 0 0em 0em var(--a)}
}
#wzip a {
	font-size: .4em;
	margin: -.3em .1em;
}
#trackname {
	font-size: small;
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-left: .3em;
}
#progbar {
	display: none;
	margin: 0 .3em;
}
#progbar.vis {
	display: block;
}
#altprogbar {
	display: none;
	grid-template-columns: max-content auto max-content;
	text-align: center;
}
#altprogbar.vis {
	display: grid;
}
#altprogbar span {
	font-size: medium;
	font-family: monospace;
	color: var(--fg-weak);
	margin: .3em;
	align-self: center;
}
#sliderpos {
	width: 100%;
}
#barpos,
#barbuf {
	border-radius: 9em;
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
}
#barbuf {
	background: var(--mp-b-bg);
	border: var(--a-dark) solid 1px;
}
#barpos {
	box-shadow: -.03em -.03em .7em rgba(0,0,0,0.5) inset;
}
#pctl {
	display: flex;
	display: grid;
  	grid-template-columns: max-content max-content max-content 20% auto max-content max-content max-content;
	align-items: center;
	margin-right: .4em;
	margin-left: .1em;
	padding: .1em;
}
#pctl .icon {
	width: 1.5em;
	height: 1.5em;
}
#pctl .icon.btn {
	padding: .2em;
	margin: .1em;
}
#favico_onpage svg {
	margin: -1px 7px 0 0;
    vertical-align: top;
	height: 1.5em;
}
#pctl svg {
	width: 1.5em;
	height: 1.5em;
}
#pctl .btn {
	font-size: 1em;
	padding: 0;
	opacity: .4;
	cursor: pointer;
}
#pctl .btn.on {
	opacity: 1;
}
#pvol {
	border-radius: 9em;
	max-width: 9em;
	height: .5em;
	aspect-ratio: 8;
	background: rgba(0,0,0,0.2);
	border: 1px solid var(--bg-u1);
	margin-left: .3em;
	transition: opacity .15s;
}
#pvolbg {
	height: 1.3em;
	padding: .3em;
	cursor: pointer;
	align-items: center;
	display: flex;
}
#pvolbg svg {
	height: 1.3em;
}
#widget.cmp #wtoggle {
	font-size: 2.8em;
}
#widget.cmp #fshr {
	display: none;
}
#widget.cmp {
	font-size: 1em;
}
#widget.cmp #barpos,
#widget.cmp #barbuf {
	border-radius: 0;
}
#widget.cmp #pvol {
	top: 0;
	right: 0;
	max-width: 5.8em;
	border-radius: 0;
}
.opview {
	display: none;
	margin-bottom: 1em;
}
.opview.splitsub {
	margin-bottom: 0;
}
.opview.act {
	display: block;
}
#op_search.opview.act {
	display: none;
}
#op_search.opview.act.vis {
	display: block;
}
#ops input[type=submit],
#ops a {
	/* fallback if emojis don't render */
	border: #777 solid 1px;
	border-radius: 5px;

	border: var(--transparent) solid 1px;
	color: var(--a);
	font-size: 1.5em;
	padding: 0 .4em;
	margin: 0;
}
.unfun #ops a {
	font-size: 1.2em;
}
#opa_mkd {
	display: none;
}
#ops a.vis {
	display: block;
}
#ops a.act {
	color: #fff;
	color: var(--op-aa-fg);
	background: rgb(85, 144, 255);
	background: var(--op-aa-bg);
	border-radius: 0 0 5px 5px;
	border-radius: 0 0 var(--radius) var(--radius);
	border-bottom: .3em solid var(--a);
	box-shadow: var(--op-aa-sh);
	margin: -.2em 0 -.6em 0;
	padding-top: .2em;
}
#ops a svg {
	width: 1.75em;
	height: 1.75em;
	margin: -.5em -.3em;
}
html.y #ops svg circle {
	stroke: black;
}
#srv_name{
	padding-top: .5em;
	padding-bottom: .3em;
	margin-left: 2.2em;
	font-size: x-large;
	text-wrap-mode: nowrap;
	display: block;
	line-height: 1.5em;
}
#treeToggleBtn{
	z-index: 6;
	position: fixed;
	top: 0;
	left: 0;
	margin: .5em;
	padding: 0;
	width: 2em;
	height: 2em;
	vertical-align: bottom;
}
#ops {
	padding: .25em .5em;
	white-space: nowrap;
	display: flex;
	height: 2em;
	border-radius: 5px;
	border-radius: var(--radius);
	background: var(--bg-u2);
}
#noie {
	color: #b60;
	margin: 0 0 0 .5em;
}
.pfp {
	/* aspect-ratio: 1 / 1; */
	min-width: 1.25em;

	background: #ccc;
	color: #000;

	background: var(--btn-1-bg);
	box-shadow: var(--btn-1-bs);
	color: var(--bg);

	border: var(--btn-bg-a) solid 1px;
	border-radius: var(--radius);  
	justify-content: center;
  	display: flex;
	text-shadow: none;
}
.pfp.placeholder {
	text-shadow: 1px 1px 0 var(--bg-half), 1px -1px 0 var(--bg-half), -1px -1px 0 var(--bg-half), -1px 1px 0 var(--bg-half);
}
.opbox {
	padding: .5em;
	border-radius: 5px;
	border-radius: var(--radius);
	border-width: 1px;
	max-width: 41em;
}
.opbox input {
	position: relative;
	margin: .2em;
}
#op_bup {
	margin: 0;
	border-radius: 0 0 var(--radius) var(--radius);
}
#op_cfg {
	display: none;
}
#pathBar input[type=text],
.opview select,
.opview input[type=text],
.opview input[type=color],
.opview input[type=date] {
	color: var(--fg);
	background: var(--txt-bg);
	border: none;
	box-shadow: 0 0 2px var(--txt-sh);
	border-bottom: 1px solid #999;
	border-color: var(--a);
	border-radius: 5px;
	border-radius: var(--radius);
	padding: .2em .3em;
	font-size: medium;
	min-width: 3em;
	margin-bottom: .5em;
}
input[type=color] {
	vertical-align: bottom;
}
.opview select {
	padding: .3em;
	margin: .2em 0	;
}
.opview input.err {
	color: var(--err-fg);
	background: var(--err-bg);
	border-color: var(--err-b1);
	box-shadow: 0 0 .7em var(--err-b1);
	text-shadow: 1px 1px 0 var(--err-ts);
	outline: none;
}
input[type="checkbox"]+label {
	color: var(--chk-fg);
}
input[type="radio"]:checked+label,
input[type="checkbox"]:checked+label {
	color: rgb(9, 185, 9);
	color: var(--btn-1-bg);
}
input[type="checkbox"]:checked+label {
	box-shadow: var(--btn-1-bs);
	border-bottom: var(--btn-1-bb);
}
html.dz input {
	font-family: 'scp', monospace, monospace;
	font-family: var(--font-mono), 'scp', monospace, monospace;
}
.opwide div>span>input+label {
	padding: .3em 0 .3em .3em;
	margin: 0 0 0 -.3em;
	cursor: pointer;
}
.opview input.i {
	width: calc(100% - 12em);
}
input.eq_gain[type=range]{
	writing-mode: vertical-lr;
    direction: rtl;
	color: var(--a);
}
input.eq_gain[type=text]{
    width: 2em;
	min-width: 0;
	margin: 0 .15em .5em .15em;
	text-align: center;
}
input.drc_v,
input.ssconf_v {
	width: 3em;
	text-align: center;
	margin: 0 .6em;
}
#audio_drc table,
#audio_eq table {
	border-collapse: collapse;
}
#audio_drc td,
#audio_eq td,
#audio_ss td {
	text-align: center;
}
#audio_eq a.eq_step {
	font-size: 1.5em;
	display: block;
	padding: 0;
}
#au_ss,
#au_drc {
	padding: .4em .3em;
}
#au_ss.on {
    width: 3em;
	height: 1em;
	overflow: hidden;
}



#srch_form {
	padding: 0 .5em .5em 0;
}
#srch_form table {
	display: inline-block;
}
#srch_form td {
	padding: .6em .6em;
}
#srch_form td:first-child {
	width: 3em;
	padding-right: .2em;
	text-align: right;
}
#srch_form:not(.tags) #tsrch_tags,
#srch_form:not(.tags) #tsrch_adv {
	display: none;
}
#op_search input {
	margin: .1em 0 0 0;
}
#srch_q {
	white-space: pre;
	color: var(--a);
	min-height: 1em;
	margin-top: .2em;
}
#srch_q.err {
	color: var(--srv-3);
}
#tq_raw {
	width: calc(100% - 2em);
	margin: .3em 0 0 1.4em;
}
@media (max-width: 130em) { #srch_form.tags #tq_raw { width: calc(100% - 34em) } }
@media (max-width: 95em) { #srch_form.tags #tq_raw { width: calc(100% - 2em) } }
#tq_raw td+td {
	width: 100%;
}
#op_search #q_raw {
	width: 100%;
	display: block;
}

#wfp{
	margin: 0 .3em 0 0;
	white-space: nowrap;
}
#wfp a {
	display: inline-block;
	width: 1.3em;
	height: 1.3em;
}

#files td div span {
	color: var(--fg-max);
	padding: 0 .4em;
	font-weight: bold;
	font-style: italic;
}
#files td div a:hover {
	background: var(--bg-u5);
	color: var(--fg-max);
}
#files td div a {
	display: inline-block;
	white-space: nowrap;
}
#files td div a:last-child {
	width: 100%;
}
#files td div {
	border-collapse: collapse;
	width: 100%;
}

#wrap {
	padding:  0 .6em 7em .6em;
	min-height: 70vh;
}
#tree {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	overflow-x: hidden;
	overflow-y: auto;
	-ms-scroll-chaining: none;
	overscroll-behavior-y: none;
	box-shadow: 0 0 1em var(--mp-sh), 0 -1px 0 rgba(128,128,128,0.3);
	border: 1px solid var(--bg-u3);
	transition: width 0.15s;
	z-index: 5;
	padding-bottom: 3em;
}
#files,
#wtoggle,
#ghead,
#tree,
html {
	scrollbar-color: var(--a) var(--bg-u3);
}
#treesuperh {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--tree-bg);
}
#treeh {
	line-height: 2.2em;
	border-bottom: 1px solid var(--bg-d3);
  	display: block;
	padding: .3em .5em;
	text-wrap-mode: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
}
#treepar {
	background: #fff;
	background: var(--tree-bg);
	left: -.96em;
	width: calc(.3em + var(--nav-sz) - var(--sbw));
	border-bottom: 1px solid var(--bg-u5);
	overflow: hidden;
	border-right: .5em solid #999\9;
}
#treepar.off {
	display: none;
}
#thx_ff {
	padding: 1em 0;
	/* widget */
}
#tree::-webkit-scrollbar-track,
#tree::-webkit-scrollbar {
	background: var(--bg-u3);
}
#tree::-webkit-scrollbar-thumb {
	background: var(--a);
}
#treeul {
	position: relative;
	left: -2.2em;
	width: calc(100% + 2em);
}
.btn {
	color: var(--btn-fg);
	background: #eee;
	background: var(--btn-bg);
	box-shadow: var(--btn-bs);
	border: 1px solid var(--bg-u3);
	border-bottom: var(--btn-bb);
	border-radius: 5px;
	border-radius: var(--radius);
	padding: .2em .4em;
	font-size: 1.2em;
	margin: .2em;
	display: inline-block;
	text-wrap-mode: wrap;
	white-space-collapse: preserve;
	position: relative;
	vertical-align: top;
	cursor: pointer;
}
#wfp .btn {
	font-size: 1em;
	padding: .15em;
	margin: 0 .1em 0 0;
}
html.c .btn,
html.a .btn {
	border-radius: var(--radius);
}
.btn:hover {
	color: var(--btn-h-fg);
	background: var(--btn-h-bg);
	box-shadow: var(--btn-h-bs);
	border-bottom: var(--btn-h-bb);
}
.tgl.btn.on {
	background: rgb(85, 144, 255);
	background: var(--btn-1-bg);
	color: #222;
	color: var(--btn-1-fg);
	text-shadow: none;
	box-shadow: var(--btn-1-bs);
	border-bottom: var(--btn-1-bb);
}
.tgl.btn.on:hover {
	color: var(--btn-1h-fg);
	background: var(--btn-1h-bg);
	box-shadow: var(--btn-1h-bs);
	border-bottom: var(--btn-1h-bb);
}
#detree {
	padding: .3em .5em;
	font-size: 1.5em;
	line-height: 1.5em;
}
#tree ul,
#tree li {
	padding: 0;
	margin: 0;
}
#tree ul {
	border-left: .2em solid var(--bg-u5);
	margin-left: .44em;
}
#tree li {
	margin-left: .6em;
	list-style: none;
	border-top: 1px solid var(--bg-u5);
}
#tree li.offline>a:first-child:before {
	content: '❌';
	position: absolute;
	margin-left: -.25em;
	z-index: 3;
}
#tree li a.dtarget {
	box-shadow: 0 0 5px 0 var(--f-sel-sh) inset;
	background: color-mix(in oklab, var(--a) 30%, transparent);
}
#tree ul a.sel {
	background: #000;
	background: var(--bg-d3);
	box-shadow: -.8em 0 0 var(--g-sel-b1) inset;
	color: #fff;
	color: var(--fg-max);
}
#tree .ntree a + a.hl:hover {
	background: var(--btn-1h-bg);
}
#tree ul a.hl {
	color: #fff;
	color: var(--btn-1-fg);
	background: rgb(85, 144, 255);
	background: var(--btn-1-bg);
	box-shadow: var(--btn-1-bs);
	text-shadow: none;
}
#tree ul a.ld::before {
	font-weight: bold;
	font-family: sans-serif;
	display: inline-block;
	text-align: center;
	width: 1em;
	margin: 0 .3em 0 -1.3em;
	color: var(--fg-max);
	opacity: 0;
	content: '◠';
	animation: .5s linear infinite forwards spin, ease .25s 1 forwards fadein;
}
#tree ul a.par {
	color: var(--fg-max);
}
#tree ul a {
	border-radius: var(--radius);
	display: inline-block;
	vertical-align: center;
}
.ntree a {
	padding: .3em .2em;
}
.ntree a+a {
	width: calc(100% - 2.2em);
	line-height: 1em;
}
#tree.nowrap li {
	min-height: 1.4em;
	white-space: nowrap;
}
#docul a:hover,
#tree .ntree a + a:hover {
	background: var(--btn-h-bg);
	color: var(--btn-h-fg);
}
#tree .ntree a + a.hl:hover {
	color: var(--btn-1-fg);
}
.ntree a:first-child {
	font-family: 'scp', monospace, monospace;
	font-family: var(--font-mono), 'scp', monospace, monospace;
	font-size: 1.2em;
	line-height: .7em;
}
.dumb_loader_thing {
	display: block;
	margin: 1em .3em 1em 1em;
	padding: 0 1.2em 0 0;
	font-size: 4em;
	min-width: 1em;
	min-height: 1em;
	opacity: 0;
	animation: 1s linear .15s infinite forwards spin, .2s ease .15s 1 forwards fadein;
	position: fixed;
	top: .3em;
	z-index: 9;
}
#dlt_t {
	left: 0;
}
#dlt_f {
	right: .5em;
}
#files .cfg {
	display: none;
	font-size: 2em;
	white-space: nowrap;
}
#files th:hover .cfg {
	display: block;
	width: 1em;
	border-radius: var(--radius);
	margin: -1.2em auto 0 auto;
	background: var(--bg-u5);
}
#files th span {
	position: relative;
	white-space: nowrap;
}
#files>thead>tr>th.min,
#files td.min {
	display: none;
}
#files td:nth-child(2n) {
	color: var(--tab-alt);
}
#plazy {
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
}
#blazy {
	text-align: center;
	font-size: 1.2em;
	margin: 1em 0;
}
#blazy code,
#blazy a {
	font-size: 1.1em;
	padding: 0 .2em;
}
.opwide,
#op_unpost,
#srch_form {
	max-width: none;
}
.opwide>div {
	display: inline-block;
	vertical-align: top;
	border-left: .4em solid var(--bg-u5);
	margin: .7em 0 .7em .5em;
	padding-left: .5em;
}
.opwide>div>h3 {
	color: var(--fg-weak);
	margin: 0 .4em;
	padding: 0;
}
.opbox h3 {
	margin: .8em 0 0 .6em;
	padding: 0;
}
.disabled,
#thumbs,
#au_prescan,
#au_fullpre,
#au_os_seek,
#au_osd_cv,
#u2tdate {
	opacity: .3;
}
.setting:has(#griden.on)+.setting #thumbs,
.setting:has(#au_preload.on)+.setting #au_prescan,
.setting:has(#au_preload.on)+.setting #au_prescan,
.setting:has(#au_preload.on)~.setting #au_fullpre,
.setting:has(#au_os_ctl.on)+.setting #au_os_seek,
.setting:has(#au_os_ctl.on)+.setting #au_os_seek,
.setting:has(#au_os_ctl.on)~.setting #au_osd_cv,
.setting:has(#u2turbo.on)+.setting #u2tdate {
	opacity: 1;
}
#wraptree.on+#hovertree {
	display: none;
}
.ghead {
	position: sticky;
	background: #fff;
	background: var(--bg-u2);
	border-radius: 5px;
	border-radius: calc(var(--radius) * 1.3);
	padding: 0 .2em;
	line-height: 2.3em;
	margin-bottom: 1.5em;
	z-index: 3;
	margin-top: -.5em;
	top: 3.7em;
	transition: opacity .15s;
}
.ghead .btn {
	position: relative;
	top: 0;
}
#twig,
#gridchop a:first-child,
#gridzoom a:first-child {
  line-height: 1.1em;
  padding-bottom: .3em;
}
.ghead>span {
	white-space: pre;
	padding-left: .3em;
}
.ghead details {
	display: inline-block;
	background: transparent;
	box-shadow: var(--btn-bs);
}
.ghead summary {
	background: var(--btn-bg);
}
.ghead details .setting {
	position: absolute;
	background: var(--bg-u2);
	border: 1px solid var(--bg-u3);
  	border-bottom: var(--btn-bb);
	border-radius: var(--radius);
	max-width: 11em;
	max-height: 30vh;
	overflow-y: auto;
}
#hcol_content:has(#hcolsh.on) {
  margin-top: 3.5em;
}
#tailbtns {
	display: none;
}
#taildoc.on+#tailbtns {
	display: inherit;
	display: unset;
}
#op_unpost {
	padding: 1em;
}
#op_unpost td {
	padding: .2em .4em;
}
#op_unpost a {
	margin: 0;
	padding: 0;
}
#unpost td:nth-child(3),
#unpost td:nth-child(4) {
	text-align: right;
}
#shui,
#rui {
	background: #fff;
	background: var(--bg);
	position: fixed;
	top: 0;
	left: 0;
	width: calc(100% - 2em);
	height: auto;
	overflow: auto;
	max-height: calc(100% - 2em);
	border-bottom: .5em solid var(--f-gray);
	box-shadow: 0 0 5em rgba(0,0,0,0.8);
	padding: 1em;
	z-index: 765;
}
#shui div+div,
#rui div+div {
	margin-top: 1em;
}
#shui table,
#rui table {
	width: 100%;
	border-collapse: collapse;
}
#shui button {
	margin: 0 1em 0 0;
}
#shui .btn {
	font-size: 1em;
}
#shui td {
	padding: .8em 0;
}
#shui td+td,
#rui td+td {
	padding: .2em 0 .2em .5em;
}
#rn_vadv input {
	font-family: 'scp', monospace, monospace;
	font-family: var(--font-mono), 'scp', monospace, monospace;
}
#shui td+td,
#rui td+td,
#shui td input[type="text"],
#rui td input[type="text"] {
	width: 100%;
}
input[type="text"].invalid {
	border-color: var(--err-b1);
}
#rui #rn_n_d,
#rui #rn_n_s,
#shui td.exs input[type="text"] {
	width: 3em;
}
#rn_f.m td:first-child {
	white-space: nowrap;
}
#rn_f.m td+td {
	width: 50%;
}
#rn_f .err td,
#rn_f .err input[readonly],
#rui .ng input[readonly] {
	color: var(--err-fg);
	background: var(--err-bg);
}
#rui input[readonly] {
	color: var(--fg-max);
	background: var(--bg-u5);
	border: 1px solid rgba(255,255,255,0.2);
	padding: .2em .25em;
}
#rui h1 {
	margin: 0 0 .3em 0;
	padding: 0;
	font-size: 1.5em;
}
#fs_abrt {
	margin-top: 1em;
	text-shadow: 0;
	box-shadow: 1px 1px 0 var(--bg-d3);
}
#doc {
	overflow: visible;
	background: #fff;
	background: var(--bg);
	margin: -1em 0 .5em 0;
	padding: 1em 0 1em 0;
	border-radius: var(--radius);
	overflow: auto;
	box-shadow: 0 0 .3em var(--bg-d2);
	background: var(--bg-u2);
}
#doc.wrap {
	white-space: pre-wrap;
}
#bdoc {
	margin-top: .3em;
}
#docul {
	position: relative;
}
#docul li.bn {
	text-align: center;
	padding: .5em;
}
#docul li.bn span {
	font-weight: bold;
	color: var(--fg-max);
}
#doc.prism {
	padding-left: 3em;
}
#doc>code {
	background: none;
	box-shadow: none;
	z-index: 1;
}
#doc.mdo {
	white-space: normal;
	font-family: sans-serif;
	font-family: var(--font-main), sans-serif;
}
#doc.prism * {
	line-height: 1.5em;
}
#doc .line-highlight {
	border-radius: var(--radius);
	box-shadow: 0 0 .5em rgba(128,128,128,0.2);
	background: linear-gradient(90deg, var(--bg-d3), var(--bg));
}
html.y #doc .line-highlight {
	background: linear-gradient(90deg, var(--bg-max), var(--bg));
}
#docul li {
	margin: 0;
}
#tree #docul li+li a {
	display: block;
}
#seldoc.sel {
	color: var(--fg-max);
	background: #f0f;
	background: var(--g-sel-b1);
}
#pvol,
#barbuf,
#barpos,
a.btn,
#u2btn,
#u2conf label,
#rui label,
#modal-ok,
#modal-ng,
#ops {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
#hkhelp {
	background: #fff;
	background: var(--bg);
}
#hkhelp table {
	margin: 2em 2em 0 2em;
	float: left;
}
#hkhelp th {
	border-bottom: 1px solid var(--bg-u5);
	background: var(--bg-u1);
	font-weight: bold;
	text-align: right;
}
#hkhelp tr+tr th {
	border-top: 1.5em solid var(--bg);
}
#hkhelp td {
	padding: .2em .3em;
}
#hkhelp td:first-child {
	font-family: 'scp', monospace, monospace;
	font-family: var(--font-mono), 'scp', monospace, monospace;
}
#hkhelp b {
	text-shadow: 1px 0 0 var(--fg), -1px 0 0 var(--fg), 0 -1px 0 var(--fg);
}
html.noscroll,
html.noscroll .sbar {
	scrollbar-width: none;
}
html.noscroll::-webkit-scrollbar,
html.noscroll .sbar::-webkit-scrollbar {
	display: none;
}




































/* bbox */

#bbox-overlay {
	display: none;
	opacity: 0;
	position: fixed;
	overflow: hidden;
	touch-action: pinch-zoom;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	background: rgba(0, 0, 0, 0.8);
	transition: opacity .3s ease;
}
#bbox-overlay.visible {
	opacity: 1;
}
#bbox-overlay.sel {
	background: color-mix(in oklab, var(--a-dark) 70%, transparent);
}
.full-image {
	display: inline-block;
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	flex: none;
}
.full-image figure {
	display: inline;
	margin: 0;
	height: 100%;
}
.full-image img,
.full-image video {
	display: inline-block;
	outline: none;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	vertical-align: middle;
	transition: transform .23s, left .23s, top .23s, width .23s, height .23s;
}
.full-image img.asap,
.full-image video.asap {
	transition: none;
}
#bbox-overlay.fill .full-image img,
#bbox-overlay.fill .full-image video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
html.bb_fsc .full-image img,
html.bb_fsc .full-image video {
	max-height: 100%;
}
html.bb_fsc figcaption {
	display: none;
}
.full-image img.nt,
.full-image video.nt {
	transition: none;
}
.full-image.vis img,
.full-image.vis video {
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}
.full-image video {
	background: #222;
}
.full-image figcaption {
	display: block;
	position: fixed;
	bottom: .1em;
	width: 100%;
	text-align: center;
	white-space: normal;
	color: var(--fg);
	z-index: 1;
	transition: opacity .15s;
}
#bbox-overlay.immersive figcaption {
	opacity: 0;
}
#bbox-overlay figcaption a {
	background: rgba(0, 0, 0, 0.6);
	border-radius: var(--radius);
	padding: .3em .6em;
}
html.y #bbox-overlay figcaption a {
	color: #0bf;
}
.full-image:before {
	content: "";
	display: inline-block;
	height: 50%;
	width: 1px;
	margin-right: -1px;
}
#bbox-slider {
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	white-space: nowrap;
	transition: left .2s ease, transform .2s ease;
}
.bounce-from-right {
	animation: bounceFromRight .3s ease-out;
}
.bounce-from-left {
	animation: bounceFromLeft .3s ease-out;
}
.eog {
	animation: eog .2s;
}
@keyframes bounceFromRight {
	0% {margin-left: 0}
	50% {margin-left: -30px}
	100% {margin-left: 0}
}
@keyframes bounceFromLeft {
	0% {margin-left: 0}
	50% {margin-left: 30px}
	100% {margin-left: 0}
}
@keyframes eog {
	0% {filter: brightness(1.5)}
}
#bbox-overlay #bbox-next,
#bbox-overlay #bbox-prev {
	position: fixed;
	top: 0;
	bottom: 0;
	width: 70px;
	left: 0;
	cursor: pointer;
}
#bbox-overlay #bbox-next {
	right: 0;
	left: auto;
}
#bbox-overlay #bbox-next:hover a,
#bbox-overlay #bbox-prev:hover a {
	background: #fff2;
	background: var(--btn-h-bg);
}
#bbox-overlay #bbox-next a,
#bbox-overlay #bbox-prev a {
	position: fixed;
	top: 50%;
	top: calc(50% - 30px);
	width: 30px;
	height: 60px;
	transition: opacity .3s ease;
	text-align: center;
	line-height: 60px;
}
#bbox-btns .btn {
	cursor: pointer;
	direction: ltr;
}
#bbox-overlay.immersive #bbox-next a,
#bbox-overlay.immersive #bbox-prev a {
	opacity: 0;
}
#bbox-overlay.immersive #bbox-btns {
	opacity: 0;
	top: -3.5em;
	pointer-events: none;
}
#bbox-overlay .btn {
	cursor: pointer;
	padding: 0 .4em;
	margin: 0 .1em .3em .1em;
	font-size: 1.4em;
	line-height: 2em;
	vertical-align: top;
	font-variant: small-caps;
	color: var(--fg);
}
#bbox-overlay .btn.on {
	color: var(--bg);
}
#bbox-overlay .btn:hover {
	opacity: 1 !important;
}
#bbox-next a {
	right: 1%;
}
#bbox-prev a {
	left: 1%;
}
#bbox-btns {
	top: .5em;
	right: .2em;
	position: fixed;
	direction: rtl;
	transition: top .3s ease, opacity .3s ease;
}
#bbox-halp {
	color: var(--fg-max);
	background: #fff;
	background: var(--bg);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
	padding: .4em;
}
#bbox-halp td {
	padding: .2em .5em;
}
#bbox-halp td:first-child:not([colspan]) {
	text-align: right;
}
.bbox-spinner {
	width: 40px;
	height: 40px;
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -20px;
	margin-left: -20px;
}
.bbox-double-bounce1,
.bbox-double-bounce2 {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: #fff;
	opacity: .6;
	position: absolute;
	top: 0;
	left: 0;
	animation: bounce 2s infinite ease-in-out;
}
.bbox-double-bounce2 {
	animation-delay: -1s;
}
@keyframes bounce {
	0%, 100% {transform: scale(0)}
	50% {transform: scale(1)}
}
.no-transition {
	transition: none !important;
}






















/* modals */
.modalcontent{
	display: grid;
  	grid-template-rows: max-content auto;
	margin: 5vh 5vw;
	border-radius: 10px;
	border-radius: calc(var(--radius) * 1.6);
	border: var(--a) solid 1px;
	background: #fff;
	background: var(--bg);
	max-width: 66.6em;
	position: relative;
	overflow: auto;
	box-shadow: .1em .2em 1em var(--mp-sh);
}
html.c .modalcontent {
	background: var(--bg-u2);
}
.modalheader {
	display: flex;
	align-items: center;
	margin: 0;
	padding: .7em 3em .7em .7em;
	background: var(--ttlbar);
	font-size: large;
	font-weight: bold;
	color: var(--fg);
}
.modalheader:hover {
	color: var(--fg);
}
.close{
	position: absolute;
	cursor: default;
	top: 0;
	right: 0;
	margin: .5em;
	color: var(--fg);
	box-shadow: 0 0 .3em var(--mp-sh);
	border: 1px solid var(--bg-u3);
}
.closepane {
	position: absolute;
	cursor: default;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

/* settings */
.modalsplit {
	display: grid;
  	grid-template-columns: auto auto auto;
	min-height: 0;
}
.splitsub {
	/* fallback */
	display: block;

	display: flex;
	flex-direction: column;
	overflow-y: auto;
	padding: 0 .5em 5em .5em;
}
.divider{
	background: var(--a);
	width: 1px;
	margin: 1em 0;
}
.divider_h {
	background: var(--bg);
	height: 1px;
	margin: .3em 0;
}
#s_nav .btn::after{
	position: absolute;
	content: ">";
	right: .5em;
}
#s_nav .btn{
	padding-right: 2em;
	border: 1px solid var(--bg-u3);
	color: var(--fg);
}
#s_nav .btn:hover{
	color: var(--a-hil);
}
#s_nav .sub {
	margin-left: 1em;
}
#s_nav .sub:before {
	content: "";
	width: 2px;
	background: var(--bg-u3);
	position: absolute;
	left: -.5em;
	top: -.4em;
	bottom: -.1em;
}
.s_section {
	border-radius: var(--radius);
	margin-bottom: 1.5em;
}
.s_section .setting:last-child {
	border-radius: 0 0 5px 5px;
	border-radius: 0 0 var(--radius) var(--radius);
}
.setting{
	padding: .5em;
	border: var(--bg-u5) solid 1px;
	border-top: 0;
	overflow-x: auto;
	position: relative;
}
.modal .setting:hover{
	background: var(--bg-u1);
}
.s_desc{
	margin: 0 0 0 0;
	font-size: medium;
	color: var(--fg-weak);
}
#s_list h3{
	background-color: var(--bg-u5);
	border-radius: 5px 5px 0 0;
	border-radius: var(--radius) var(--radius) 0 0;
	padding: .5em;
	margin: 0;
}
#s_list .sub_section h3 {
	background: none;
	border-top: var(--bg-u5) solid 1px;
    border-radius: 0;
    margin: 0 -.4em;
    text-align: center;
}
.modal.vis.unmodal {
	position: initial;
	.modalcontent{
		width: 100%;
		max-width: none;
		margin: 0;
	}
	.closepane,
	.close {
		display: none;
	}
	.splitsub {
		margin-bottom: .5em;
	}
}


/* upload.css */

.modal {
	display: none;
	z-index: 10;
	background: rgba(48, 48, 48, 0.7);
}
.modal.vis,
.dropzone {
	/* fallback */
	display: block;
	overflow-y: auto;

	display: flex;
  	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.dropdesc {
	position: fixed;
	display: table;
	left: 10%;
	width: 78%;
	height: 78%;
	margin: 0;
	font-size: 3em;
	font-weight: bold;
	text-shadow: .05em .05em .1em #333;
	background: rgba(224, 224, 224, 0.2);
	box-shadow: 0 0 0 #999;
	border: .1em solid var(--ud-b1);
	border-radius: 10px;
	border-radius: calc(var(--radius) * 1.6);
	border-width: 2px;
	color: #fff;
	transition: all 0.12s;
}
.dropdesc.hl.ok {
	border-color: #fff;
	box-shadow: 0 0 1em .4em var(--a), 0 0 1em #000 inset;
	background: rgba(24, 24, 24, 0.7);
	left: 8%;
	width: 82%;
	height: 82%;
	margin: -3vh 0;
}
.dropdesc.hl.err {
	background: rgba(224, 32, 65, 0.2);
	box-shadow: 0 0 1em .4em #f26;
	border-color: #fab;
}
.dropdesc>div {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
.dropdesc>div>div {
	position: absolute;
	top: 40%;
	top: calc(50% - .5em);
	top: calc(50% - 1.2vw);
	left: -.8em;
	transition: top 0.12s;
}
.dropdesc>div>div+div {
	left: auto;
	right: -.8em;
}
.dropdesc b {
	font-size: .5em;
	font-size: 2vw;
	margin: 0 .8em;
	margin: 0 1.25vw;
	transition: font-size 0.12s;
}
.dropdesc.hl.ok b {
	border-bottom: .1em solid #fff;
	font-size: .6em;
	font-size: 2.5vw;
}
.dropdesc.hl.ok>div>div {
	top: calc(50% - 1.7vw);
}
.dropzone {
	z-index: 80386;
	height: 100%;
}
#up_dz {
	position: absolute;
	bottom: 0;
}
#srch_dz {
	position: absolute;
	top: 0;
}
#up_zd {
	position: absolute;
	top: 12%;
	bottom: 12%;
}
#srch_zd {
	position: absolute;
	top: 12%;
	bottom: 12%;
}
.dropdesc span {
	color: #fff;
	background: var(--a-dark);
	border-bottom: .3em solid var(--a);
	text-shadow: 1px 1px 1px #000;
	border-radius: var(--radius);
	padding: .4em .8em;
	font-size: .4em;
}
.dropdesc.err span {
	background: #904;
	border-color: #d26;
}
#u2form {
	position: absolute;
	top: 0;
	left: 0;
	width: 2px;
	height: 2px;
	overflow: hidden;
}
#u2form input {
	background: var(--bg-u5);
	border: 0px solid var(--bg-u5);
}
#up_status_h {
	margin: -1.8em .5em 0 .5em;
	position: absolute;
	z-index: 1;
}
#u2err.err {
	color: var(--a-dark);
	padding: .5em;
}
#u2err.msg {
	color: var(--fg-weak);
	padding: .5em;
	font-size: .9em;
}
#u2btn {
	line-height: 1.3em;
	border: .15em dashed var(--u2-btn-b1);
	border-radius: var(--radius);
	text-align: center;
	font-size: 1.3em;
	padding: 1em 2em;
	cursor: pointer;
	box-shadow: .4em .4em 0 var(--bg-d1);
}
#u2btn sup {
	font-size: 1.1em;
}
#u2btn:hover {
	background: linear-gradient(var(--a) 0%, var(--a) 20%, color-mix(in oklab, transparent 85%, var(--a) 15%));
	border-color: var(--bg);
	border-style: solid;
	color: var(--fg-max);
}
#u2c3t {
	margin: 1em 0;
}
#op_up2k {
	display: block;
}
#op_up2k.srch #u2btn {
	border-color: var(--u2-sbtn-b1);
}
#u2conf #u2btn {
	padding: .4em 0;
	margin: -2em 0;
	font-size: 1.25em;
	width: 100%;
	max-width: 12em;
	display: inline-block;
}
#u2bm {
	display: flex;
	justify-content: center;
}
#u2bm sup {
	font-weight: bold;
}
#u2notbtn {
	display: none;
	text-align: center;
	background: var(--bg);
	padding-top: 1em;
}
#u2notbtn * {
	line-height: 1.3em;
}
#u2mu div {
	height: 1.2em;
	overflow: hidden;
}
#u2tabw {
	min-height: 0;
	transition: min-height .2s;
}
#u2tabw.na>table {
	display: none;
}
#u2tab {
	table-layout: fixed;
	border-collapse: collapse;
	width: calc(100% - 2em);
	max-width: 100em;
	margin: 0 auto;
}
#op_up2k.srch #u2tabf {
	max-width: none;
}
#u2tab td {
	word-wrap: break-word;
	border: 1px solid rgba(128,128,128,0.8);
	border-width: 0 0px 1px 0;
	padding: .2em .3em;
}
#u2tab td:nth-child(2) {
	width: 5em;
	white-space: nowrap;
}
#u2tab td:nth-child(3) {
	width: 40%;
}
@media (max-width: 65em) {
	#u2tab {
		font-size: .9em;
	}
}
#op_up2k.srch td.prog {
	font-family: sans-serif;
	font-family: var(--font-main), sans-serif;
	font-size: 1em;
	width: auto;
}
#u2tab tbody tr:hover td {
	background: var(--bg-u2);
}
#u2etas {
	padding: .2em .5em;
	width: 17em;
	cursor: pointer;
	text-align: center;
	display: inline-block;
	font-family: 'scp', monospace, monospace;
	font-family: var(--font-mono), 'scp', monospace, monospace;
}
#u2etas.o {
	width: 20em;
}
#u2etas .o {
	display: none;
}
#u2etas.o .o {
	display: inherit;
	display: unset;
}
#u2etaw {
	display: flex;
	justify-content: center;
}
#u2etas.o #u2etaw {
	width: 21em;
}
#u2cards {
	padding: 1em 1em .4em .3em;
	white-space: nowrap;
	text-align: center;
	overflow-y: hidden;
	overflow-x: auto;
}
#u2cards a {
	padding: .2em 1em;
	padding-bottom: .3em;
	background: var(--u2-tab-bg);
	border: 1px solid #999;
	border-color: var(--u2-tab-b1);
	border-width: 0 0 1px 0;
}
#u2cards a:first-child {
	border-radius: var(--radius) 0 0 0;
}
#u2cards a:last-child {
	border-radius: 0 var(--radius) 0 0;
}
#u2cards a.act {
	padding-bottom: .5em;
	border-width: 1px 1px .1em 1px;
	border-radius: var(--radius) var(--radius) 0 0;
	margin-left: -1px;
	background: var(--u2-tab-1-bg);
	box-shadow: 0 -.17em .67em var(--u2-tab-1-sh);
	border-color: var(--u2-tab-1-b1) var(--u2-tab-1-b2) var(--bg) var(--u2-tab-1-b2);
	color: var(--u2-tab-1-fg);
	position: relative;
}
#u2cards span {
	color: var(--fg-max);
	font-family: 'scp', monospace;
	font-family: var(--font-mono), 'scp', monospace;
}
#u2cards > a:nth-child(4) > span {
	display: inline-block;
	text-align: center;
	min-width: 1.3em;
}
#u2conft {
	width: max-content;
}
#u2conf details[open] {
	border-bottom: none;
	border-radius: var(--radius) var(--radius) 0 0;
}
details .setting {
	border-left: none;
	border-right: none;
}
#u2conf .c,
#u2conf .c * {
	text-align: center;
	line-height: 1em;
	margin: 0;
	padding: 0;
	border: none;
}
#u2conf .c {
	margin: .3em;
}
#u2conf .txtbox {
	width: 3em;
	color: var(--fg-max);
	background: var(--u2-txt-bg);
	border: 1px solid #777;
	font-size: 1.2em;
	padding: .15em 0;
	height: 1.05em;
}
#u2conf .txtbox.err {
	color: var(--err-fg);
	background: var(--err-bg);
}
#u2conf a.b {
	color: var(--u2-b-fg);
	background: var(--u2-b1-bg);
	text-decoration: none;
	border-radius: .1em;
	font-size: 1.5em;
	padding: .1em 0;
	margin: 0 -1px;
	width: 1.5em;
	height: 1em;
	display: inline-block;
	position: relative;
	bottom: -0.08em;
}
#u2conf input+a.b {
	background: var(--u2-b2-bg);
}
html.b #u2conf a.b:hover {
	background: var(--btn-h-bg);
}
#u2conf .c label {
	font-size: 1.6em;
	width: 2em;
	height: 1em;
	padding: .4em 0;
	display: block;
	border-radius: var(--radius);
}
#u2conf input[type="checkbox"] {
	position: absolute;
	opacity: .02;
}
#u2conf input[type="checkbox"]+label,
#u2conf input[type="checkbox"]:checked+label {
	position: relative;
	cursor: pointer;
	background: var(--btn-bg-a);
	box-shadow: var(--btn-bs);
	border-bottom: var(--btn-bb);
	text-shadow: 1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000, -1px 1px 1px #000;
}
#u2conf input[type="checkbox"]:checked+label {
	background: var(--btn-1-bg);
	box-shadow: var(--btn-1-bs);
	border-bottom: var(--btn-1-bb);
}
#u2conf input[type="checkbox"]+label:hover {
	background: var(--btn-h-bg);
	box-shadow: var(--btn-h-bs);
	border-bottom: var(--btn-h-bb);
}
#u2conf input[type="checkbox"]:checked+label:hover {
	background: var(--btn-1h-bg);
	box-shadow: var(--btn-1h-bs);
	border-bottom: var(--btn-1h-bb);
}
#op_up2k.srch #u2conf td:nth-child(2)>*,
#op_up2k.srch #u2conf td:nth-child(3)>* {
	background: #777;
	border-color: var(--fg);
	box-shadow: none;
	opacity: .2;
}
#u2flagblock {
	display: none;
	margin: 2em auto 4em auto;
	padding: .5em;
	max-width: 27em;
	text-align: center;
	border: .2em dashed rgba(128, 128, 128, 0.3);
}
#u2foot,
#u2life {
	color: var(--fg-max);
	text-align: center;
	margin: .8em 0;
}
#u2life {
	margin: 2.5em 0;
	line-height: 1.5em;
}
#u2life div {
	display: inline-block;
	white-space: nowrap;
	margin: 0 2em;
}
#u2life div:first-child {
	margin-bottom: .2em;
}
#u2life small {
	opacity: .6;
}
#lifew {
	border-bottom: 1px dotted var(--fg-max);
}
#u2foot {
	font-size: 1.2em;
	font-style: italic;
}
#u2foot .warn {
	font-size: 1.2em;
	padding: .5em .8em;
	margin: 1em -.6em;
	border-width: .1em 0;
	text-align: center;
}
#u2foot .warn span {
	color: var(--srv-3);
}
#u2foot span {
	color: #999;
	font-size: .9em;
	font-weight: normal;
}
#u2foot>*+* {
	margin-top: 1.5em;
}
#u2life input {
	width: 4em;
	text-align: right;
}
.prog {
	font-family: 'scp', monospace, monospace;
	font-family: var(--font-mono), 'scp', monospace, monospace;
}
#u2tab span.inf,
#u2tab span.ok,
#u2tab span.err {
	color: #fff;
	padding: .22em;
	border-radius: var(--radius);
	border: 2px solid #f0f;
}
#u2tab span.inf {
	background: var(--u2-inf-bg);
	border-color: var(--u2-inf-b1);
}
#u2tab span.ok {
	background: var(--u2-ok-bg);
	border-color: var(--u2-ok-b1);
}
#u2tab span.err {
	background: var(--u2-err-bg);
	border-color: var(--u2-err-b1);
}
#u2tab a>span,
#docul .bn a>span,
#unpost a>span {
	font-weight: bold;
	font-style: italic;
	color: var(--fg-max);
	padding-left: .2em;
}
.fsearch_explain {
	color: var(--a-dark);
	padding: .7em;
	font-size: 1.1em;
	line-height: 0;
}
details {
	border: var(--bg-u3) solid 1px;
	border-radius: var(--radius);
	margin: .3em 0;
}
details:not(.open) .setting {
	display: none;
}
summary {
	cursor: pointer;
	background: #ccc;
	background: var(--bg-u1);
	color: var(--a);
	padding: .3em;
	border-radius: var(--radius);
	font-size: large;
}
.modal summary:hover {
	background: var(--bg-u3);
}
#actionsArea {
	position: relative;
	height: max-content;
	margin-left: auto;
}
#srchfolder_div {
	display: none;
	position: absolute;
	left: 3.8em;
	top: 0;
	right: 0;
	bottom: 0;
	padding: .2em;
	margin-left: .3em;
}











html.dz .opview input.i {
	width: calc(100% - 18em);
}
#tree,
#treesuperh {
	background: #fff;
	background: var(--bg-u2);
}
html.c #treepar,
html.a #treepar {
	background: var(--bg-u2);
}
html.c #tree li,
html.a #tree li {
	border-top: 1px solid var(--bg-u5);
	border-bottom: 1px solid var(--bg-d3);
}
html.c #tree li:last-child,
html.a #tree li:last-child {
	border-bottom: none;
}
html.c .opbox h3,
html.a .opbox h3 {
	border-bottom: 1px solid var(--bg-u5);
}
html.c #ops,
html.c .opbox,
html.c #path,
html.c #srch_form,
html.c .ghead,

html.a #ops,
html.a .opbox,
html.a #path,
html.a #srch_form,
html.a .ghead {
	background: #c1d1ed;
	background: var(--btn-bg);
	border: 1px solid var(--bg-u3);
	border-bottom: var(--btn-bb);
	box-shadow: var(--btn-bs);
}
html.a,
html.cz {
	.ghead,
	#wfp .btn:not(:hover),
	#treeToggleBtn:not(:hover):not(.on),
	#ops,
	#path,
	#wtoggle,
	#up_quick {
		backdrop-filter: blur(10px);
		background: var(--btn-bg);
	}
}
html.c .modal .setting:hover {
	background: color-mix(in oklab, var(--bg-u5) 30%, transparent);
}
html.ay #u2btn {
	box-shadow: .4em .4em 0 #ccc;
}
html.dz #u2btn {
	letter-spacing: -.033em;
}
html.c #u2conf #u2btn,
html.a #u2conf #u2btn {
	padding: .6em 0;
	margin-top: .2em;
}
html.c #u2etas,
html.a #u2etas {
	background: var(--bg-d1);
	border: 1px solid var(--bg-u1);
	border-width: 2px;
	border-radius: calc(var(--radius) * 1.6);
}
html.c #u2foot:empty,
html.a #u2foot:empty {
	margin-bottom: -1em;
}
html.ay #ops,
html.ay .opbox,
html.ay #path,
html.ay #doc,
html.ay #srch_form,
html.ay .ghead,
html.ay #u2etas {
	border-color: var(--bg-u2);
	box-shadow: 0 0 .3em var(--bg-u5);
}
html.ay #tree li,
html.ay #treepar {
	border-color: var(--bg) var(--bg-max) #ddd var(--bg-max);
}
html.ay #treesuperh,
html.ay #treepar {
	background: var(--bg);
	border-color: #ddd;
}
html.ay #tree {
	border-color: #ddd;
	box-shadow: 0 0 1em #ddd;
	background: var(--bg);
}





html.d #barpos,
html.d #barbuf,
html.d #pvol,
html.b #barpos,
html.b #barbuf,
html.b #pvol {
	border-radius: .2em;
}
html.b #barpos {
	box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
}
html.by #barpos {
	box-shadow: 0 0 0 1px rgba(0,0,0,0.2) inset;
}
html.b #pathBar {
	background: var(--bg);
}
html.b #srch_q {
	margin: .2em 0 0 1.6em;
}
html.b #srch_q:empty {
	margin-bottom: -1em;
}
html.b #tree {
	box-shadow: 0 -1px 0 rgba(128,128,128,0.4);
}
html.bz #tree {
	box-shadow: 0 -1px 0 var(--bg-d3);
}
html.b #treeh,
html.b #tree li {
	border: none;
}
html.b #tree li {
	margin-left: .8em;
}
html.b #docul a,
html.b .ntree a {
	padding: .6em .2em;
}
html.dy *,
html.cy *,
html.b * {
	box-shadow: none !important;
}
html.b #path,
html.b #ops {
	background: color-mix(in oklab, var(--bg-u5), transparent);
}
html.b #treepar {
	margin-left: .63em;
	width: calc(.1em + var(--nav-sz) - var(--sbw));
	border-bottom: .2em solid var(--f-h-b1);
}
html.d #path i,
html.b #path i {
	border-right: var(--a) solid 2px;
	height: 1.5em;
  	margin: -.4em .3em -.4em -1.7em;
}
html.dy .ghead,
html.b .ghead {
	background: var(--bg);
	padding: .2em 0;
	border-bottom: var(--btn-bb);
	border-radius: 0;
}
html.b #files tbody a {
	padding: .7em;
}
html.b #op_up2k.srch sup {
	color: #fc0;
}
html.by #u2btn sup {
	color: #06b;
}
html.by #op_up2k.srch sup {
	color: #b70;
}
html.bz #u2cards a.act {
	box-shadow: 0 -.1em .2em var(--bg-d2);
}
html.b #u2conf {
	margin: 2em auto 0 auto;
}
html.b #u2conf .txtbox {
	border: none;
}
html.b #u2conf a.b {
	border-radius: .2em;
}
html.by #u2cards a.act {
	border-width: 2px;
}





html.cy .mdo a {
	background: #f00;
}
html.cy #wrap,
html.cy #acc_info a,
html.cy #files,
html.cy #files a,
html.cy #files tbody div a:last-child {
	color: #000;
}
html.cy #u2tab a,
html.cy #u2cards a {
	color: #f00;
}
html.cy #unpost a {
	color: #ff0;
}
html.cy #barbuf {
	filter: hue-rotate(267deg) brightness(0.8) contrast(4);
}
html.cy #pvol {
	filter: hue-rotate(4deg) contrast(2.2);
}
html.cy #path i {
	background: transparent;
}
html.cy #up_quick_btn.on:not(:hover) {
	background: #f00;
}
html.cy .ghead span {
	color: #f00;
}
html.cy #s_list h3 {
	background: #ff0;
	color: #000;
}





html.dz * {
	border-radius: 0 !important;
}
html.d #treepar {
	border-bottom: .2em solid var(--f-h-b1);
}



/* basically a mobile / phone layout */
#pathBar.thin {
	display: block;

	#path {
		position: relative;
		height: 1.8em;
		margin: .5em 0 0 0;
		z-index: -1;
	}
	#wfp.shifted {
		margin-left: 2.5em;
	}
	#actionsArea {
		position: absolute;
		top: .6em;
		right: 0;
	}
	#ops a {
		padding-left: .15em;
		padding-right: .15em;
	}
	#srchfolder_div {
		left: 2.8em;
	}
}
html.e #pathBar.thin #path {
	margin: 0;
}
html:not(.e) #wrap.thin {
	.ghead {
		top: 7em;
		padding: .3em;
	}
	#ghead {
		text-wrap-mode: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
	}
}
html.cz #wrap.thin .ghead{
	top: 7.4em;
}
html.dy #wrap.thin .ghead,
html.b #wrap.thin .ghead {
	top: 6.9em;
}
#wrap.thin {
	.td_w {
		width: calc(100vw - 8.5em);
	}
	.td_s {
		width: calc(50vw - 5em);
	}
}
html:not(.e) #treeh:not(.noa):after,
html:not(.e) #wrap.thin #ghead:not(.noa)::after {
	content: "";
	position: sticky;
	right: -.5em;
	background: linear-gradient(to left, var(--scrl-hint), transparent);
	width: 3em;
	height: 3.5em;
	display: inline-block;
	margin: -1.4em -0.5em -1.6em -1.4em;;
	pointer-events: none;
}
html.e #wrap.thin {
	.ghead {
		top: 5.1em;
	}
}
@media (max-width: 50em){
	html.dy #wrap.thin .ghead,
	html.b #wrap.thin .ghead {
		top: 7.2em;
	}
	.ntree a + a {
		padding: .6em .2em;
	}
	#files tbody a {
		padding: .8em;
	}
	html:not(.e) body {
		font-size: 1.1em;
	}
	html:not(.e) #treeToggleBtn {
		margin: .8em;
	}
	html:not(.e) #srv_name {
		padding-top: .9em;
		padding-bottom: .6em;
		margin-left: 2.9em;
	}
	#widget, #wrap {
		margin-left: 0 !important;
	}
	#widget {
		font-size: 1.4em;
	}
	#pathBar {
		display: block;
		padding: .5em;
		padding-top: 1em;
		margin-left: -.5em;
		margin-right: -.5em;
	}
	#pathBar.thin #actionsArea {
		top: 1em;
		right: .5em;
	}
	#folder_search {
		margin: .5em 1em 0 .2em;
	}
	html:not(.e) #wrap {
		padding-left: 1em;
		padding-right: 1em;
	}
	#wfp {
		margin-left: .1em;
	}
	#gfiles {
		margin: 0em -0.5em;
	}
	#ghead {
		margin: 0 .5em 1em .5em;
	}
	.modalsplit {
		display: block;
		overflow-y: auto;
		padding-bottom: 5em;
	}
	.splitsub {
		padding-bottom: .5em;
	}
	.divider {
		display: none;
	}
	#up_status_h {
		margin: .5em .5em 0 .5em;
		position: inherit;
	}
	#u2btn {
		padding: 1em .3em;
	}
	#pctl {
		padding: .2em .5em .5em .5em;
	}
	#pvol {
		border: .7em solid var(--bg-u3);
		transform: rotate(-90deg);
		position: fixed;
		bottom: 4em;
		right: -.7em;
		opacity: 0;
		pointer-events: none;
		box-shadow: 0 0 .5em var(--mp-sh);
	}
	#pvolbg:hover #pvol {
		display: block;
		opacity: 1;
		pointer-events: all;
	}
	#up_quick_more a {
		padding: .6em;
	}
	#s_nav .btn {
		padding: .5em;
		padding-right: 2em;
	}
	#pathBar.thin #wfp,
	#pathBar.thin #wfp.shifted {
		margin-left: 2em;
	}
	#wrap.thin .ghead {
		top: 7em;
	}
	html.cy #wrap.thin .ghead,
	html.a #wrap.thin .ghead {
		top: 7.3em;
	}
	html.cz #wrap.thin .ghead {
		top: 7.7em;
	}
	.gselchk {
		font-size: 1.4em;
		top: 5px;
		right: 5px;
	}
}

@media (max-width: 32em) {
	#wfp #gon,
	#wfp #gop {
		display: none;
	}
}
@media (max-width: 54em) {
	#opa_msg {
		display: none;
	}
}
@supports (display: grid) and (gap: 1em) {
	#ggrid {
		display: grid;
		margin: 0 .5em;
		padding: unset;
		grid-template-columns: repeat(auto-fit,var(--grid-sz));
		justify-content: center;
		gap: 1em;
	}
	#ggrid.gallery {
		gap: 1px 2px;
		margin: -.2em -.5em;
		a::before {
			padding: .1em 0;
			margin: .3em;
		}
		a.img {
			span {
				display: none;
			}
		}
	}

	#ggrid > a {
		margin: unset;
		padding: unset;
  	}

  	#ggrid>a>span {
		text-align: center;
		padding: .2em .2em .15em .2em;
		user-select: text;
	}
}





@media (prefers-reduced-motion) {
	@keyframes spin { }
	@keyframes gexit { }
	@keyframes bounce { }
	@keyframes bounceFromLeft { }
	@keyframes bounceFromRight { }

	#ggrid>a:before,
	#widget.anim,
	#tree,
	#u2tabw,
	#up_quick,
	.dropdesc,
	.dropdesc b,
	.dropdesc>div>div {
		transition: none;
	}
	#bbox-next a,
	#bbox-prev a,
	#bbox-btns {
		transition: background-color .3s ease, color .3s ease;
	}
}
html.ey {
  --negative-space: 0em; /* Use this to change the global spacing of the 95 theme */
  --font-main: consolas;
  --font-serif: consolas;
  --font-mono: consolas;
  --w: #fff;
  --w2: #dfdfdf;
  --w3: grey;
  --fg: #000;
  --fg-max: #0000ff;
  --fg-weak: #0000ff;
  --bg: #c6c3c6;
  --bg-d3: #7eb8f591;
  --bg-d2: var(--w3);
  --bg-d1: var(--bg);
  --bg-u2: var(--bg);
  --bg-u3: var(--bg);
  --bg-u5: var(--shadow-color-2);
  --tab-alt: #00f;
  --g-fsel-bg: #00f;
  --g-sel-bg: #00f;
  --g-fsel-b1: #fff;
  --row-alt: var(--w);
  --f-sel-sh: transparent;
  --a: #000;
  --a-hil: #fff;
  --a-h-bg: var(--bg);
  --a-dark: var(--a);
  --a-gray: var(--fg-weak);
  --btn-fg: var(--fg);
  --btn-bg: var(--bg);
  --btn-h-fg: var(--fg);
  --btn-h-bg: var(--bg);
  --btn-1-fg: var(--fg);
  --btn-1-bg: var(--bg);
  --btn-1h-bg: var(--bg-d3);
  --txt-sh: a;
  --txt-bg: var(--white);
  --u2-b1-bg: var(--w2);
  --u2-b2-bg: var(--w2);
  --u2-txt-bg: var(--w2);
  --u2-tab-bg: a;
  --u2-tab-1-bg: var(--w2);
  --sort-1: var(--fg-weak);
  --tree-bg: var(--w);
  --g-b1: a;
  --g-b2: a;
  --g-f-bg: var(--w2);
  --f-sh1: 0.1;
  --f-sh2: 0.02;
  --f-sh3: 0.1;
  --f-h-b1: a;
  --srv-1: var(--w);
  --srv-3: var(--a);
  --mp-sh: a;
  --black: #000;
  --white: #fff;
  --grey: grey;
  --silver: silver;
  --shadow-color-1: #0a0a0a;
  --shadow-color-2: #808080;
  --border-dashed-black: 1px dashed var(--black);
  --radius: 0;
  --focus-outline: 1px dashed var(--black);
  --hover-outline: 1px dotted var(--black);
  --fm-off: var(--w3);
  --ttlbar: linear-gradient(90deg, navy, #1084d0);
  --inset-bg: var(--white);
  --scroll-bkg: var(--white);

  /*All sides*/
  --shadow-outset: inset -1px -1px var(--shadow-color-1),
    inset 1px 1px var(--white), inset -2px -2px var(--grey),
    inset 2px 2px var(--w2);

  --shadow-inset: inset -1px -1px var(--white),
    inset 1px 1px var(--shadow-color-1), inset -2px -2px var(--w2),
    inset 2px 2px var(--shadow-color-2);

  --shadow-input: inset -1px -1px var(--white), inset 1px 1px var(--grey),
    inset -2px -2px var(--w2), inset 2px 2px var(--shadow-color-1);

  /*Indiv sides*/
  --shadow-outset-bottom: inset 0 -1px var(--shadow-color-1),
    inset 0 -2px var(--grey);
  --shadow-outset-right: inset -1px 0 var(--shadow-color-1),
    inset -2px 0 var(--grey);
  --shadow-outset-left: inset 1px 0 var(--white), inset 2px 0 var(--w2);
  --shadow-outset-top: inset 0 1px var(--white), inset 0 2px var(--w2);

  --shadow-inset-bottom: inset 0 -1px var(--white), inset 0 -2px var(--w2);
  --shadow-inset-right: inset -1px 0 var(--white), inset -2px 0 var(--w2);
  --shadow-inset-left: inset 1px 0 var(--shadow-color-1),
    inset 2px 0 var(--shadow-color-2);
  --shadow-inset-top: inset 0 1px var(--shadow-color-1),
    inset 0 2px var(--shadow-color-2);
}
html.ez {
  --negative-space: 0em; /* Use this to change the global spacing of your theme :) */
  --font-main: consolas;
  --font-serif: consolas;
  --font-mono: consolas;
  --w: #fff;
  --w2: var(--inset-bg);
  --w3: grey;
  --fg: #cfcfcf;
  --fg-max: #47b8ff;
  --fg-weak: #47b8ff;
  --bg: #383838;
  --bg-d3: #600000;
  --bg-d2: var(--shadow-color-1);
  --bg-d1: var(--bg);
  --u2-tab-1-fg: #ff0;
  --bg-u2: var(--bg);
  --bg-u3: var(--bg);
  --bg-u5: var(--shadow-color-2);
  --tab-alt: #47b8ff;
  --g-fsel-bg: #0000b7;
  --g-sel-bg: #00f;
  --g-fsel-b1: #fff;
  --row-alt: #555555;
  --f-sel-sh: transparent;
  --a: var(--fg);
  --a-hil: var(--fg);
  --btn-1h-bg: var(--bg-d3);
  --a-h-bg: var(--bg);
  --a-dark: var(--a);
  --a-gray: var(--fg-weak);
  --btn-fg: var(--white);
  --btn-bg: var(--bg);
  --btn-h-fg: var(--white);
  --btn-h-bg: var(--bg);
  --btn-1-fg: var(--white);
  --btn-1-bg: var(--bg);
  --txt-sh: a;
  --u2-b1-bg: var(--w2);
  --u2-b2-bg: var(--w2);
  --u2-txt-bg: var(--w2);
  --u2-tab-bg: a;
  --u2-tab-1-bg: var(--w2);
  --sort-1: var(--fg-weak);
  --g-b1: a;
  --g-b2: a;
  --g-f-bg: var(--w2);
  --f-sh1: 0.1;
  --f-sh2: 0.02;
  --f-sh3: 0.1;
  --f-h-b1: a;
  --srv-1: var(--w);
  --srv-3: var(--a);
  --mp-sh: a;
  --black: #000;
  --white: #fff;
  --grey: grey;
  --silver: #858585;
  --transparent: transparent;
  --shadow-color-1: #101010;
  --shadow-color-2: #1f1f1f;
  --border-dashed-black: 1px dashed var(--shadow-color-1);
  --radius: 0;
  --focus-outline: 1px dashed var(--white);
  --hover-outline: 1px dotted var(--white);
  --fm-off: var(--w3);
  --ttlbar: linear-gradient(90deg, var(--shadow-color-1) 20%, #888888);
  --inset-bg: #3f3f3f;
  --tree-bg: var(--inset-bg);
  --txt-bg: var(--inset-bg);
  --scroll-bkg: var(--black);

  /*All sides*/
  --shadow-outset: inset -1px -1px var(--shadow-color-1), inset 1px 1px #878787,
    inset -2px -2px var(--shadow-color-2), inset 2px 2px #575757;

  --shadow-inset: inset -1px -1px #878787, inset 1px 1px var(--shadow-color-1),
    inset -2px -2px #575757, inset 2px 2px var(--shadow-color-2);

  --shadow-input: inset -1px -1px var(--white),
    inset 1px 1px var(--shadow-color-2), inset -2px -2px #575757,
    inset 2px 2px var(--shadow-color-1);

  --shadow-outset-bottom: inset 0 -1px var(--shadow-color-1),
    inset 0 -2px var(--shadow-color-2);
  --shadow-outset-right: inset -1px 0 var(--shadow-color-1),
    inset -2px 0 var(--shadow-color-2);
  --shadow-outset-left: inset 1px 0 #878787, inset 2px 0 #575757;
  --shadow-outset-top: inset 0 1px #878787, inset 0 2px #575757;

  --shadow-inset-bottom: inset 0 -1px #878787, inset 0 -2px #575757;
  --shadow-inset-right: inset -1px 0 #878787, inset -2px 0 #575757;
  --shadow-inset-left: inset 1px 0 var(--shadow-color-1),
    inset 2px 0 var(--shadow-color-2);
  --shadow-inset-top: inset 0 1px var(--shadow-color-1),
    inset 0 2px var(--shadow-color-2);
}

html.e {
  text-shadow: none;
  --bg-u1: #0002;
  --g-sel-fg: #fff;
}
html.e * {
  border-radius: 0 !important;
}
html.e #ggrid > a.sel {
	box-shadow: none;
}
html.e #files tr.sel a, #files tr.sel a.play {
	color: #fff;
}
html.e tr.play td:nth-child(1) a {
  	background: var(--g-fsel-bg);
	color: #fff;
}
html.e .pfp {
	background: transparent;
	color: var(--fg);
}
html.e .modalcontent {
	border-color: var(--fg);
}
html.e .divider {
	background: var(--fg);
}
html.e details[open] summary:hover,
html.e #files,
html.e #u2conf input[type="checkbox"]:hover + label,
html.e .tgl.btn.on:hover,
html.e body {
  background: var(--bg);
}
html.e summary,
html.e #pctl a,
html.e #repl,
html.e #u2conf a,
html.e #u2conf input[type="checkbox"] + label,
html.e #wfp a,
html.e .btn,
html.e .eq_step,
html.e input[type="submit"] {
  box-shadow: var(--shadow-outset);
  border-radius: var(--radius);
  background: var(--bg);
  border: 0;
}
html.e #ops {
	background: transparent;
}
html.e details[open] summary,
a.s0r,
html.e #ghead a.s0,
html.e #u2conf input[type="checkbox"]:checked + label,
html.e .tgl.btn.on,
html.e input[type="submit"]:active {
  box-shadow: var(--shadow-inset) !important;
}
html.e summary:hover,
html.e #ops a:hover,
html.e #pctl a:hover,
html.e #repl:hover,
html.e #u2conf a:hover,
html.e #u2conf input[type="checkbox"]:hover + label,
html.e #wfp a:hover,
html.e .btn:hover,
html.e .eq_step:hover,
html.e input[type="submit"]:hover {
  outline: var(--hover-outline);
  outline-offset: -4px;
}
html.e .ntree a:hover,
html.e :focus,
html.e :focus + label,
html.e a:active,
html.e tr:focus,
input[type="text"]:focus {
  outline: var(--focus-outline) !important;
}
html.e tr:focus {
  box-shadow: none;
}
html.e summary:focus,
html.e #pctl a:focus,
html.e #repl:hover,
html.e #u2conf input[type="checkbox"]:focus + label,
html.e #wfp a:focus,
html.e .btn:focus,
html.e .eq_step:focus {
  border: 0 !important;
  outline: var(--focus-outline) !important;
  outline-offset: 2px;
  box-shadow: var(--shadow-outset) !important;
}
html.e #files tbody,
html.e #u2cards a.act {
  box-shadow: var(--shadow-inset);
}
html.e #files {
  border: 2px groove var(--transparent);
  box-sizing: border-box;
  width: 100%;
  padding: 0.3em;
  top: 0;
  border: 0;
}
html.e #files tbody tr td,
html.e #files thead th {
  border-radius: var(--radius);
}
#files td {
  background: var(--w2);
}
html.e #srv_info span,
html.e label {
  color: var(--btn-fg) !important;
}
html.e #acc_info {
  background: var(--transparent);
  color: var(--white);
  height: 2em;
  right: 1em;
  width: fit-content;
}
html.e #acc_info,
html.e #ops,
html.e #srv_info {
  align-items: center;
}
html.e .overlay_plus {
	margin-top: -.3em;
	text-shadow: none;
}
html.e #spaceUsed_bar {
	background: var(--ttlbar);
}
html.e #h_up2k,
html.e #up_status_h,
html.e #h_cfg {
	color: #fff;
}
html.e .modalheader:hover {
	background: var(--ttlbar);
}
html.e #acc_info span.warn,
html.e #acc_info a {
  color: var(--white);
}
html.e #flogout:before {
  padding-left: 0.2em;
  padding-right: 0.4em;
  content: " | ";
}
html.e #blogout {
  color: var(--w);
  box-shadow: none;
  background: transparent;
}
html.e .opwide > div {
  border-left: 1px solid var(--fg);
}
html.e #srv_info {
  background: var(--transparent);
  color: var(--white);
  height: fit-content;
  top: 3.2em;
  left: 1em;
  gap: 0.2em;
}
html.e #u2cards a.act {
  padding: 0.2em 1em;
}
html.e #u2btn {
  border: var(--border-dashed-black);
  border-radius: var(--border-radius);
}
html.e #ops,
html.e #ops a {
  border-radius: var(--radius);
}
@media only screen and (max-width: 600px) {
  html.e #acc_info {
    background: var(--transparent);
    color: var(--white);
    height: fit-content;
    align-items: center;
    bottom: 9.2em;
    left: 1em;
    right: auto;
    display: flex;
    gap: 0.2em;
  }
  html.e #u2btn {
    transform: none;
  }
}
html.e #ops {
	/*HC*/
	gap: 0.6em;
	font-size: larger;
	padding: 0;
}
html.e #srchfolder_div {
	left: 2em;
	top: -.1em;
	bottom: -.6em;
}
html.e #qs_btns {
	right: 0.7em;
  	top: .3em;
}
html.e .under {
	border: var(--fg) solid 1px;
}
html.e #srch_form,
html.e .opbox {
  padding-bottom: 1em;
  padding-top: 1em;
  max-width: 100vw;
}
html.e #srv_name {
	padding-top: .2em;
	margin-left: 1.4em;
}
html.e #ghead,
html.e #ops a {
  align-items: center;
}
html.e #ops a {
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
  height: 1.4em;
  padding: 0;
  box-shadow: var(--shadow-outset);
  background: var(--bg);
  justify-content: center;
  font-size: 1.25em;
}
html.e #blogout:focus-visible,
html.e #ops a:focus-visible {
  outline: 1px dashed var(--w) !important;
}

html.e #blogout:hover {
  text-decoration: underline;
}

html.e #ops a.act {
  border-bottom: 0;
  margin-top: -.6em;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  box-shadow: var(--shadow-inset-left), var(--shadow-inset-top),
    var(--shadow-inset-right);
  z-index: 6;
}
html.e a:active {
  border: 0;
}
html.e :focus,
html.e :focus + label {
  border: 0 !important;
  outline-offset: 1px;
  border-radius: var(--radius) !important;
  box-shadow: inherit;
}
html.e #opa_x {
  text-shadow: 0 0 0 var(--transparent) !important;
  color: var(--bg) !important;
  display: flex;
}
html.e #opa_x:before {
  content: "⨯";
  color: var(--fg) !important;
  margin-top: -0.1em;
  font-size: 1.75em;
  position: absolute;
}
html.e .opbox {
  margin: -.3em 0 0;
  box-shadow: var(--shadow-inset-bottom), var(--shadow-inset-left),
    var(--shadow-inset-right);
  border-radius: var(--radius);
  z-index: 5;
  background: var(--bg);
}
html.e #srch_form {
  margin: 0;
  border-radius: var(--radius);
}
html.e #op_unpost {
  max-width: 100vw;
  margin: 0;
}
html.e label:focus {
  box-shadow: 0 0;
}
html.e #tree {
  box-shadow: none;
  padding-right: 5px;
}
html.e #tt {
  background: var(--w2);
}
html.e .mdo a {
  background: 0 0;
  text-decoration: underline;
}
html.e .mdo code,
html.e .mdo pre {
  color: var(--white);
  background: var(--w2);
  border: 0;
}
html.e .mdo h1,
html.e .mdo h2 {
  background: 0 0;
  border-color: var(--w2);
}
html.e #tt,
html.e .mdo ol ol,
html.e .mdo ol ul,
html.e .mdo ul ol,
html.e .mdo ul ul {
  border-color: var(--w2);
}
html.e .mdo li > em,
html.e .mdo p > em,
html.e .mdo td > em {
  color: #fd0;
}
html.e input.txtbox,
html.e input[type="text"],
html.e select {
  background-color: var(--txt-bg);
  box-shadow: var(--shadow-input) !important;
  box-sizing: border-box;
  padding: 3px 4px;
  border-radius: var(--radius);
  border: 0;
}
html.e #gfiles {
  box-shadow: var(--shadow-outset);
  background: var(--bg);
  padding: 0.4em;
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}
html.e #ggrid {
  background-color: var(--inset-bg);
  box-shadow: var(--shadow-input);
  padding: 1.5em;
  margin: 0;
  overflow-x: auto;
}
html.e #ghead {
  margin: 0;
  justify-content: flex-end;
  gap: 0.4em;
  padding-top: .2em;
  top: 2.3em;
  border-radius: 0px;
}
html.e #ghead a {
  margin: 0;
  border-radius: var(--radius);
}
html.e #treeToggleBtn {
	margin: 0;
}
html.e ::-webkit-scrollbar,
html.e::-webkit-scrollbar {
  width: 16px !important;
  height: 16px !important;
  background: var(--transparent) !important;
}
html.e ::-webkit-scrollbar-button,
html.e ::-webkit-scrollbar-thumb,
html.e::-webkit-scrollbar-button,
html.e::-webkit-scrollbar-thumb {
  width: 16px !important;
  height: 16px !important;
  background: var(--a) !important;
  /*HC*/
  box-shadow: var(--shadow-outset);
  border: 1px solid !important;
  border-color: var(--silver) var(--black) var(--black) var(--silver) !important;
}
html.e ::-webkit-scrollbar-track,
html.e::-webkit-scrollbar-track {
  image-rendering: optimize-contrast !important;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAyIDIiIHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyI+CjxtZXRhZGF0YT5NYWRlIHdpdGggUGl4ZWxzIHRvIFN2ZyBodHRwczovL2NvZGVwZW4uaW8vc2hzaGF3L3Blbi9YYnh2Tmo8L21ldGFkYXRhPgo8cGF0aCBzdHJva2U9IiNjMGMwYzAiIGQ9Ik0wIDBoMU0xIDFoMSIgLz4KPC9zdmc+) !important;
  background-position: 0 0 !important;
  background-repeat: repeat !important;
  background-size: 2px !important;
  background: var(--scroll-bkg);
}
#tree::-webkit-scrollbar,
#tree::-webkit-scrollbar-track {
  background: var(--scroll-bkg);
}
html.e ::-webkit-scrollbar-button,
html.e::-webkit-scrollbar-button {
  background-repeat: no-repeat !important;
  background-size: 16px !important;
}
html.e ::-webkit-scrollbar-button:single-button:vertical:decrement,
html.e::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTcgNWgxTTYgNmgzTTUgN2g1TTQgOGg3IiAvPgo8L3N2Zz4=) !important;
}
html.e ::-webkit-scrollbar-button:single-button:vertical:increment,
html.e::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTQgNWg3TTUgNmg1TTYgN2gzTTcgOGgxIiAvPgo8L3N2Zz4=) !important;
}
html.e ::-webkit-scrollbar-button:single-button:horizontal:decrement,
html.e::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTggM2gxTTcgNGgyTTYgNWgzTTUgNmg0TTYgN2gzTTcgOGgyTTggOWgxIiAvPgo8L3N2Zz4=) !important;
}
html.e ::-webkit-scrollbar-button:single-button:horizontal:increment,
html.e::-webkit-scrollbar-button:single-button:horizontal:increment {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTYgM2gxTTYgNGgyTTYgNWgzTTYgNmg0TTYgN2gzTTYgOGgyTTYgOWgxIiAvPgo8L3N2Zz4=) !important;
}
html.e ::-webkit-scrollbar-corner,
html.e::-webkit-scrollbar-corner {
  background: var(--silver) !important;
}
html,
html.e #tree {
  scrollbar-color: inherit !important;
}
html.e #tree {
  background: var(--bg);
  /* padding-left: 0.4em; */
  padding-top: 0;
  padding-bottom: 0;
  margin-left: var(--negative-space);
}
html.e.noscroll #tree {
  /*HC*/
  box-shadow: 1px 1px var(--grey), 2px 2px var(--shadow-color-1),
    var(--shadow-outset-bottom);
}
html.e #treeh {
  background: var(--bg);
  box-shadow: var(--shadow-outset-top), var(--shadow-outset-bottom);
  height: 2.4em;
  border: none;
  display: flex;
  align-items: center;
  gap: 0.6em;
}
html.e #treeh .btn {
  margin: 0px;
  top: auto;
}
html.e #tree ul {
  border-left: var(--border-dashed-black);
  margin-left: 2.15em;
}
html.e .ntree a:first-child {
  font-family: scp, monospace, monospace;
  font-size: 1.2em;
  line-height: 0;
  background: var(--inset-bg);
  aspect-ratio: 1/1;
  text-align: center;
  align-content: center;
  border-radius: var(--radius) !important;
  padding: 0.057em;
  border: 1px solid var(--black);
}
html.e .ntree a:first-child:after {
  content: ".";
  position: absolute;
  border-top: var(--border-dashed-black);
  color: var(--transparent);
  font-size: 0.9em;
  margin-left: 0.13em;
}
html.e #treeul {
  border: 0 !important;
  position: static;
  margin: 0 !important;
  min-height: calc(100% - 3em);
  height: max-content;
  width: calc(100% - 1.1em);
}
html.e .ntree a:last-of-type:before {
  content: "📁";
  margin-left: 0.3em;
}
html.e .ntree {
  padding-left: 1em !important;
  padding-top: 0.3em !important;
  background: var(--inset-bg);
  box-shadow: var(--shadow-inset-left), var(--shadow-inset-bottom);
}
html.e #tree li {
  margin-left: -0.5em;
  border-top: 0;
}
html.e .ntree a:hover {
  outline-offset: -2px;
  color: var(--fg);
  border-radius: var(--radius) !important;
}
html.e #treepar {
  width: calc(-1em + var(--nav-sz) - var(--sbw));
  overflow: hidden;
  left: -0.7em;
  box-shadow: var(--shadow-inset-left), var(--shadow-inset-top);
  border-left: 0 !important;
  border-bottom: var(--border-dashed-black);
  margin-left: calc(2.1em - (1em - var(--negative-space))) !important;
}
html.e #ghead,
html.e #op_acc,
html.e #path,
html.e #widgeti,
html.e #wtoggle,
html.e #wtoggle a,
html.e #files,
html.e #files thead th,
html.e #ghead a,
html.e #tree {
  box-shadow: var(--shadow-outset);
}
html.e.noscroll #treepar {
  width: calc(var(--nav-sz) - 1em);
}
html.e #docul {
  border-left: 0 !important;
  margin-left: 0 !important;
}
html.e #spaceFree {
	background: var(--inset-bg);
}
html.e #tree_footer {
	background: transparent;
}
html.e #wrap {
  transform: translateX(calc((var(--negative-space) * 2) - .2em));
  padding-right: var(--negative-space);
  position: relative;
  margin-right: calc((var(--negative-space) * 2) - .1em);
  margin-left: -6px;
  margin-top: 0;
  /*overflow-x: auto; fix for OOB table when screen space is limited (mobile), but removes sticky header*/
}
html.e #pathBar {
	padding: 0;
	top: 0;
	background: var(--ttlbar);
}
html.e   #pathBar.thin #actionsArea {
	top: 0 !important;
}
html.e input[type="radio"] {
  accent-color: #232323;
}
html.e #path {
	background: var(--bg-u2);
	margin-right: 0;
	width: auto;
}
html.e #path i {
  border: 1px solid var(--w);
  border-color: var(--w);
  border-width: 0 0.1em 0 0;
  transform: none;
  width: 1.8em;
  box-shadow: inset -1px 0 var(--shadow-color-1), inset -2px 0 var(--grey);
}
html.e #path *:last-child:is(i) {
    display: none;
}
html.e .dir span::before {
  content: "📁";
}
/*
html.e #hovertree:after {
  color: red;
  content: "BUGGY";
html.ez #hovertree:after {
  color: rgb(255 98 98);
  content: "BUGGY";
}
}*/
html.e #wtico,
html.e #zip1 {
  box-shadow: 0 0 !important;
}
html.e #wtc {
  top: 0.2em;
}
html.e #wfs,
html.e #wm3u,
html.e #wnp,
html.e #wzip {
  border-width: 0 1px 0 0;
}
html.e #wfm.act + #wzip1 + #wzip,
html.e #wfm.act + #wzip1 + #wzip + #wnp {
  border-left-width: 1px;
}
html.e #barpos {
  /* border-radius: var(--radius); */
  box-shadow: var(--shadow-inset);
}
html.e #goh + span {
  border-left: 0.1em solid var(--bg-u5);
}
html.e #repl {
  font-size: large;
  padding: 0.33em;
  right: calc(var(--negative-space) * 0.89);
  position: absolute;
}
html.e #epi {
  text-align: center;
  text-wrap-mode: nowrap;
  margin: 0px;
}

html.e #epi.logue:not(.mdo) {
  padding: 0.8em;
  box-shadow: var(--shadow-outset);
}

html.e #epi.logue.mdo {
  padding-left: 3px;
}

html.e #doc {
  box-shadow: var(--shadow-inset);
  background: var(--inset-bg);
  margin: 0.2em;
  border-radius: var(--radius);
}

html.e #detree {
  padding: 0px;
}

html.e #wtc {
	margin: -.2em 0 -.5em .1em;
}

#rcm {
	position: fixed;
	overflow-y: auto;
	display: none;
	background: #fff;
	background: var(--bg-u2);
	border: 1px solid var(--bg-u5);
	outline: none;
	border-radius: var(--radius);
	box-shadow: 0 0 .3rem var(--bg-d3);
	z-index: 5;
}
#rcm.large a {
	padding: 1em;
}

#rcm > * {
	display: block;
}

#rcm > a {
	padding: .3rem;
}

#rcm > .hide {
	display: none;
}

#rcm > a:hover {
	background: var(--bg-d2);
}

#rcm > .sep {
	margin: 0 .2rem;
	border-bottom: 1px solid var(--bg-u5);
}

#rcm_tmp {
	min-height: 5em;
}

#tempname {
	color: var(--fg);
	background: var(--txt-bg);
	border: none;
	box-shadow: 0 0 2px var(--txt-sh);
	border-bottom: 1px solid #999;
	border-color: var(--a);
	border-radius: var(--radius);
	padding: .2em .3em;
}

.selbox {
    position: fixed;
    border: .5em solid #f0f;
    border: .2em solid var(--btn-1h-bg);
    background-color: rgba(128, 128, 128, 0.6);
    background-color: rgb(from var(--btn-1h-bg) r g b / 0.5);
    pointer-events: none;
	z-index: 99;
}

#spaceFree, #rtt_latency {
	color: var(--fg);
	text-align: left;
	padding: 2px;
	font-size: small;
	cursor: default;
	pointer-events: all;
	max-width: max-content;
	background: #fff;
	background: var(--transparent);
}
#rtt_latency {
	opacity: .5;
}
#spaceUsed_bar, #spaceTotal_bar{
	height: .3em;
	border-radius: 5px;
	border-radius: var(--radius);
}
#spaceUsed_bar{
	background: rgb(85, 144, 255);
	background: linear-gradient(to right, transparent, var(--a-dark), var(--a));
}
#spaceTotal_bar {
	margin-bottom: .5em;
	background: #ccc;
	background: var(--bg-u5);
}
#tree_footer {
	width: 0;
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	padding: 1em;
	pointer-events: none;
	transition: width .15s;
	background: linear-gradient(to top, var(--bg-u2), transparent);
}
.popup_button {
	border-radius: var(--radius);
	margin: 0;
	color: var(--btn-1-fg);
	text-align: left;
	text-shadow: none;
}
#acc_button p{
	margin: 0;
}
#acc_button {
	margin: 0;
	cursor: pointer;
	display: flex;
}
#op_acc {
	font-size: medium;
	margin-top: .3em;
	text-align: right;
}
#ops input[type=submit],
#ops #goh {
	font-size: medium;
	padding-bottom: .2em;
}

.popup {
	display: none;
	width: fit-content;
	background: #222;
	background: var(--bg-u2);
	border: 1px solid var(--bg-u3);
	box-shadow: 0 .5em 1em var(--txt-sh);
	text-align: center;
	border-radius: 5px;
	border-radius: var(--radius);
	padding: .5em;
	position: absolute;
	z-index: 6;
	bottom: 2.5em;
}
.under {
	top: calc(100% + .2em);
	left: 0;
	bottom: auto;
	right: 0;
  	text-align: left;
	width: auto;
}
#op_acc {
	left: auto;
}
#acessType {
	font-size: small;
}

#srchfolder_div:focus-within .popup {
	display: block;
}
/* has to be separate because IE will ignore the whole rule if it can't do focus within */
.popup.act {
	display: block;
}

.overlay_plus{
	position: absolute;
	margin: -.5em 0 0 .8em;
	color: var(--fg);
	text-shadow: -1px 1px 1px var(--bg-max);
}