/* Commodore Disk Utilities */

body {
	font-family: 'Nunito Sans',sans-serif;
	font-size: 14px;
	background-color: #f8f8f8;
	margin: 0;
	padding: 0;
    -webkit-tap-highlight-color: transparent;
}

header
{
	position: absolute;
	display: block;
	left: 0;
	top: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	height: 70px;
	background-color: rgba(248,248,248,0.98);
	vertical-align: top;
	z-index: 100;
}
#header_content
{
	width: 940px;
	margin: 4px auto 0 auto;
	padding: 0;
	position: relative;
	max-width: 100%;
	height: 65px;
	border-bottom: 1px #eee solid;
	white-space: nowrap;
}
#site_logo
{
	display: block;
	position: absolute;
	top: 0;
	left: -3px;
	width: 100px;
	height: 65px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	text-decoration: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	transition: all 0.33s ease;
}
a#site_logo #slogoCircle
{
	fill: #f73d44;
	-webkit-transition: fill 0.33s ease;
	-moz-transition: fill 0.33s ease;
	transition: fill 0.33s ease;
}
a#site_logo:hover #slogoCircle { fill: #ff454b; }

#gradient
{
	position: absolute;
	display: block;
	left: 0;
	top: 70px;
	width: 100%;
	margin: 0;
	padding: 0;
	height: 5px;
	background: -moz-linear-gradient(top, rgba(248,248,248,0.5) 0%, rgba(248,248,248,0) 100%);
	background: -webkit-linear-gradient(top, rgba(248,248,248,0.5) 0%,rgba(248,248,248,0) 100%);
	background: linear-gradient(to bottom, rgba(248,248,248,0.5) 0%,rgba(248,248,248,0) 100%);
	pointer-events: none;
}

nav
{
	display: block;
	font-weight: 400;
	font-size: 14px;
	color: #808080;
	position: absolute;
	top: 24px;
	letter-spacing: 0.004em;
	padding: 0;
	vertical-align: top;
}
nav#colorNav { right: 0; color: #404040; }
nav#relatedLinks { right: 127px; }
nav ul
{
	margin: 0;
	padding: 0;
	position: relative;
	vertical-align: top;
}
nav li
{
	float: left;
	display: inline-block;
	margin: 0 0.405em 0.05em 0.405em;
	padding: 0;
	white-space: nowrap;
}
nav li a
{
	display: inline-block;
	margin: 0;
	padding: 0 0 2px 0;
	color: inherit;
	text-decoration: none;
	border-bottom: 3px transparent solid;
}
nav li a:hover,
nav li a:focus { border-bottom-color: #9be0ef; }
nav li a:active { color: #f73d44; }
nav li a[aria-selected='true'] { border-bottom-color: #31719c; }

main
{
	display: block;
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 770px;
	min-height: 100vh;
	margin: 0 auto;
	padding: 90px 20px 160px 20px;
	vertical-align: top;
	font-family: 'Nunito Sans',sans-serif;
	font-size: 15px;
	line-height: 22.5px;
	color: #222;
	letter-spacing: 0.002em;
	-webkit-font-smoothing: antialiased;
}

footer
{
	display: block;
	width: 100%;
	height: 120px;
	margin: -120px 0 0 0;
	padding: 0;
	background-color: #d3eef4; /*rgba(155,224,239,0.4);*/
	vertical-align: top;
}
#footer_content
{
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	width: 940px;
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	border-top: 1px rgba(0,0,0,0.066) solid;
	position: relative;
}
#siteinfo
{
	position: absolute;
	top: 37px;
	left: 20px;
	font-family: 'Nunito Sans',sans-serif;
	font-size: 11px;
	color: #8da0a4;
	margin: 0;
	padding: 0;
}
#siteinfo a {
	color: inherit;
	white-space: nowrap;
	text-decoration: none;
	transition: color 0.33s ease;
}
#siteinfo a:hover { color: #416870; }
#siteinfo a:active { color: #f73d44; }

header h1
{
	font-weight: 400;
	font-size: 26px;
	margin: 18px 0 0 134px;
	padding: 0;
	line-height: 30px;
	display: inline-block;
	vertical-align: top;
	color: #000;
}

header h1 .blue { color: #2b5987; }

h2
{
	font-weight: 400;
	font-size: 20px;
	line-height: 26px;
}
h3
{
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	margin: 1.5em 0 0.5em 0;
}
h2 > b { margin-left: 0.1em; opacity: 0.92; }

#notes { margin: 3em 0; font-size: 14px; line-height: 20px;  color: #444; }
body.dark #notes { color: #b8b8b9; }

#notes p { margin: 0.5em 0; }
#notes code { font-size: 12px; opacity: 0.9; }

dl { margin: 0.5em 0; }
dt { float: left; vertical-align: top; width: 3.5em; overflow: hidden; white-space: nowrap; }
dt:after { display: inline; content: '....................'; opacity: 0.35; padding: 0 0 0 0.3em; max-width: 100%; }
dd { margin: 0 0 0.5em 3.5em; padding: 0 0 0 0.3em; }

body.dark { background-color: #383838; }
body.dark main { color: #c8c8c9; }
body.dark footer { background-color: #94b7c0; }
body.dark #siteinfo { color: #637b81; }
body.dark header { background-color: #383838; }
body.dark #header_content { border-bottom: 1px #484848 solid; }
body.dark #gradient
{
	background: -moz-linear-gradient(top, rgba(51,51,51,0.5) 0%, rgba(51,51,51,0) 100%);
	background: -webkit-linear-gradient(top, rgba(51,51,51,0.5) 0%,rgba(51,51,51,0) 100%);
	background: linear-gradient(to bottom, rgba(51,51,51,0.5) 0%,rgba(51,51,51,0) 100%);
}
body.dark #slogoTypo1 { fill: #c8c8c8; }
body.dark #slogoPassmark,
body.dark #slogoTypo2 { stroke: #c8c8c8; }
body.dark nav { color: #888889; }
body.dark nav#colorNav { color: #c8c8c9; }
body.dark main a { color: #db4144; }
body.dark header h1 { color: #c8c8c9; }
body.dark header h1 .blue { color: #31719c; }

main a
{
	color: #d2383d;
	text-decoration: underline;
	-webkit-text-decoration-color: #ec3b42;
	text-decoration-color: #ec3b42;
	-webkit-transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	transition: all 0.25s ease;
}
main a:visited
{
	-webkit-text-decoration-color: #8f5658;
	text-decoration-color: #8f5658;
}
main a:hover,
main a:focus
{
	-webkit-text-decoration-color: #62a9b9;
	text-decoration-color: #62a9b9;
}
main a:active
{
	color: #f73d44;
	-webkit-text-decoration-color: #f79d3d;
	text-decoration-color: #f79d3d;
}
body.dark main a { color: #f44246; }

main > span.sep { display: block; box-sizing: border-box; height: 1px; background-color: #e8e8e8; box-shadow: 0 1px 1px #fff; margin: 2em 0.125em; }
body.dark main > span.sep { background-color: #292929cc; box-shadow: 0 1px 1px #444e; }

#baseDragDropTarget
{
	float: right;
	width: 150px;
	height: 150px;
	background: url('dragdrop.png');
	background-size: 125px 94px;
	background-position: center center;
	background-repeat: no-repeat;
	border: 1px #80C1E099 solid;
	border-radius: 50%;
	margin: 0 1.75em 1.75em 0;
	overflow: visible;
	opacity: 0.6;
	filter: grayscale(95%);
	position: relative;
}
#baseDragDropTarget.dragdrop { opacity: 1; filter: grayscale(5%); }
body.dark #baseDragDropTarget { opacity: 0.6; filter: grayscale(90%); }
body.dark #baseDragDropTarget.dragdrop { opacity: 0.95; filter: hue-rotate(22deg); }

#diskInputForm { display: block; margin: 2.5em 0 0 0; }

#baseDragDropTarget:before
{
	display: block;
	content: 'drag & drop';
	white-space: nowrap;
	position: absolute;
	top: 75px;
	right: 166px;
	font-size: 14px;
	line-height: 0;
	opacity: 0.8;
}


/* various from pet 2001 emulator */



/* ui basic elements */

input[type=button],select { font-family: 'Nunito Sans',sans-serif !important; }
input[type=text],input[type=number],textarea { font-family: 'Iosevka','m-1m',monospace; border: 1px #8F8F9C solid; border-radius: 2px; }


[hidden] { display: none !important; }

input[type=button],
button,
select {
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance: none;
	display: inline-block;
	vertical-align: middle;
	background-color: rgb(233, 233, 235);
	border: 1px #8F8F9C solid;
	border-radius: 4px;
	box-sizing: border-box;
	height: 22px;
	padding: 4px 6px 4px 6px;
	font-family: 'Nunito Sans',sans-serif;
	font-size: 13px;
	line-height: 13px;
	color: #111;
	margin: 0;
	white-space: pre;
	touch-action: auto;
	-webkit-user-select: none;
	user-select: none;
	transition: all 0.1s ease;
}
select {
	text-align: left !important;
	padding-right: 18px;
	background-position: right 1px;
	background-repeat: no-repeat;
	background-size: 18px 17px;
	background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 18 17" width="18" height="17"><path d="M4.5,7.5L8.5,4.5L12.5,7.5L4.5,7.5Z M4.5,9.5L8.5,12.5L12.5,9.5L4.5,9.5Z" stroke="none" stroke-width="0" stroke-miterlimit="1" fill="%23455C8E" /></svg>');
}
input[type=button],
button
{ text-align: center !important; }
input[type=button]:active,
button:active,
select:active {
	color: #000;
	background-color: #B1B1B8;
	transition: all 0.1s ease;
}
select:focus {
	color: #000;
	background-color: #CCCCCE;
	transition: all 0.1s ease;
	background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 18 17" width="18" height="17"><path d="M4.5,7.5L8.5,4.5L12.5,7.5L4.5,7.5Z M4.5,9.5L8.5,12.5L12.5,9.5L4.5,9.5Z" fill="none" stroke-width="1" stroke-miterlimit="1" stroke="%23455C8E" /></svg>');
}
select:focus * { background-color: #ECECEC; }

input[type=checkbox] {
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance: none;
	display: inline-block;
	vertical-align: middle;
	width: 14px;
	height: 14px;
	box-sizing: border-box;
	box-shadow: 0 1px 2px rgba(10,10,15, 0.1);
	border: 1px #9696A2 solid;
	border-radius: 2px;
	background-color: rgb(244, 244, 246);
	padding: 0;
	margin: -2px 0.1em 0 0.15em;
}
input[type=checkbox]:checked {
	border-color: #8F8F9C;
	background-color: #3478F6;
	background-repeat: no-repeat;
	background-size: 14px 14px;
	background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 14 14" width="14" height="14"><path d="M2.5,7.5L5.5,10.5L11.5,1.5" stroke="rgb(240,240,242)" stroke-width="2"  stroke-linejoin="round" stroke-linecap="round" fill="none" /></svg>');
}
input[type=checkbox]:active {
	border-color: #848493;
	background-color: rgb(233, 233, 235);
	box-shadow: inset 0 1px 3px rgba(0,0,5, 0.25);
}
input[type=checkbox]:checked:hover {
	background-color: #4285FF;
}
input[type=checkbox]:checked:active {
	background-color: #2A64D6;
	box-shadow: inset 0 1px 3px rgba(0,0,5, 0.2);
}

input[type=checkbox]:disabled
{
	background-color: rgb(233, 233, 235);
	opacity: 0.5 !important;
}
input[type=checkbox]:disabled:checked {
	background-color: #4285FF;
}

button.asLink
{
	border: none !important;
	background-color: transparent !important;
	padding: 0;
	margin: 0;
	line-height: inherit;
	font-size: inherit;
	color: #00e;
	text-decoration: underline !important;
	cursor: pointer;
	display: inline;
}
button.asLink:active { color: #e00; }


input[type=radio] { accent-color: #3478F6; }
input[type=radio] {
	-webkit-appearance: none;
	appearance: none;
	display: inline-block;
	width: 0.95em;
	height: 0.95em;
	background-color: rgb(233, 233, 235);
	border: 0.125em #CFCFDC solid;
	border-radius: 50%;
	margin: 0 0.5em 0 0;
	position: relative;
	box-sizing: border-box;
}
input[type=radio]:hover { border-color: #AFAFBC; background-color: #EFEFDC; }
input[type=radio]:active { border-color: #3478F6; background-color: #e3e4e6 !important; }
input[type=radio]::before {
	content: '';
	position: absolute;
	border-radius: 50%;
	width: 65%;
	height: 65%;
	top: 17.5%;
	left: 17.5%;
	transform: scale(0);
	transition: 0.15s transform ease-in-out;
	background-color: #3478F6;
}
input[type=radio]:checked { border-color: #3478F6; background-color: #EFEFDC; }
input[type=radio]:checked::before { transform: scale(1); }
input[type=radio]:active::before { transform: scale(0.8); }

textarea { scrollbar-color: #c2c2c2 #f2f2f2; resize: none; } 
textarea::-webkit-scrollbar { width: 15px; }
textarea::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track-piece { background-color: #f2f2f2; }
textarea::-webkit-scrollbar-button { background-color: #c2c2c2; color: #f2f2f2; }
textarea::-webkit-scrollbar-thumb { background-color: #c2c2c2; border: 3px solid #f2f2f2; border-radius: 7px; }
textarea::-webkit-scrollbar-thumb:vertical { min-height: 33px; }
textarea::-webkit-scrollbar-corner { background-color: #f2f2f2; }


body.dark input[type=button],input[type=button].dark,
body.dark button,button.dark,
body.dark select,select.dark { background-color: rgb(64, 65, 69); border-color: #4F5F62; color: #B8C2C5; }
body.dark select,select.dark {
	background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 18 17" width="18" height="17"><path d="M4.5,7.5L8.5,4.5L12.5,7.5L4.5,7.5Z M4.5,9.5L8.5,12.5L12.5,9.5L4.5,9.5Z" stroke="none" stroke-width="0" stroke-miterlimit="1" fill="%237179C1" /></svg>');
}
body.dark input[type=button]:active,input[type=button].dark:active,
body.dark button:active,button.dark:active,
body.dark select:active { color: #e8e8e9; background-color: #737478; }
body.dark select:focus { color: #C5D4D9; background-color: #636468; background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 18 17" width="18" height="17"><path d="M4.5,7.5L8.5,4.5L12.5,7.5L4.5,7.5Z M4.5,9.5L8.5,12.5L12.5,9.5L4.5,9.5Z" fill="none" stroke-width="1" stroke-miterlimit="1" stroke="%23a7b6bb" /></svg>');
}
body.dark select:focus *,select.dark:focus * { background-color: #636468; }
body.dark input[type=checkbox],input[type=checkbox].dark { background-color: #393a3c; border-color: #56676C; }
body.dark input[type=checkbox]:checked,input[type=checkbox].dark:checked { background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 14 14" width="14" height="14"><path d="M2.5,7.5L5.5,10.5L11.5,1.5" stroke="rgb(210,211,215)" stroke-width="2"  stroke-linejoin="round" stroke-linecap="round" fill="none" /></svg>'); }
body.dark input[type=checkbox]:checked,input[type=checkbox].dark:checked { background-color: #3478F6; }
body.dark input[type=checkbox]:disabled:checked,input[type=checkbox].dark:disabled:checked { background-color: #3478F6; }
body.dark input[type=checkbox]:active,input[type=checkbox].dark:active { background-color: #494a4c; }
body.dark input[type=checkbox]:checked:hover,input[type=checkbox].dark:checked:hover { background-color: #3167e8; }
body.dark input[type=checkbox]:checked:active,input[type=checkbox].dark:checked:active { background-color: #5498FF; }

body.dark input[type=radio],input[type=radio].dark { accent-color: #595a5c; }
body.dark input[type=radio],input[type=radio].dark { background-color: #595a5c; border-color:  #838488; box-shadow: 0 1px 2px rgba(0,1,5, 0.15); }
body.dark input[type=radio]:hover,input[type=radio].dark:hover { border-color: #b3b4b8; background-color: #696a6c; }
body.dark input[type=radio]:active,input[type=radio].dark:active { border-color: #54A8FF; background-color: #636466 !important; }
body.dark input[type=radio]::before,input[type=radio].dark::before { background-color: #54A8FF; }
body.dark input[type=radio]:checked,input[type=radio].dark:checked { border-color: #54A8FF; background-color: #2157C8; }


/* ==== context menu ==== */

div.petCtxMenuShield {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0);
	z-index: 99999;
}

menu.petCtxMenu {
	position: absolute;
	z-index: 1000000;
	background-color: #fefefe;
	padding: 0;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 3px 5px 2px rgba(0, 1, 3, 0.2);
	box-sizing: border-box;
	-webkit-user-select: none;
	user-select: none;
}
menu.petCtxMenu ul {
	list-style: none;
	padding: 3px 0;
	margin: 0;
}
menu.petCtxMenu ul li {
	font-family: sans-serif;
	font-weight: 500;
	font-size: 13px;
	line-height: 13px;
	padding: 5px 32px 5px 20px;
	margin: 0;
	white-space: nowrap;
	cursor: default;
	color: #000;
	-webkit-user-select: none;
	user-select: none;
}
menu.petCtxMenu ul li:hover,
menu.petCtxMenu ul li:focus { background-color: #cecece; }
menu.petCtxMenu ul li:active {
	background-color: #0076a3;
	color: #fff;
}

menu.petCtxMenu ul li.petCtxMenuSeparator { height: 7px; padding: 0; background-color: #fefefe !important; position: relative; }
menu.petCtxMenu ul li.petCtxMenuSeparator:after { content: ''; display: block; position: absolute; top: 3px; left: 12px; right: 12px; height: 1px; background-color: rgba(34,34,102, 0.08); }
menu.petCtxMenu ul li.petCtxMenuSeparator.group:after { background-color: rgba(34,34,68, .12); }

menu.petCtxMenu ul li[disabled=true],
menu.petCtxMenu ul li[disabled=true]:hover
menu.petCtxMenu ul li[disabled=true]:focus
menu.petCtxMenu ul li[disabled=true]:active {
	color: #9a9a9a;
	background-color: #fefefe;
}

menu.petCtxMenu li.hasCheckmark:before
{
	content: '';
	display: inline-block;
	width: 1.5em;
	height: 13px;
	max-height: 13px;
	padding: 0;
	margin: 0;
	overflow: visible;
	font-size: 14px;
	line-height: 13px;
	text-align: left;
	vertical-align: bottom;
	pointer-events: none;
	color: #555 !important;
	box-sizing: border-box;
}
menu.petCtxMenu li.hasCheckmark.checked:before { content: '\002713'; }
menu.petCtxMenu li.hasCheckmark:active:before { color: #fffc !important; }

menu.petCtxMenu li.hasRadio:before
{
	content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13" width="13" height="13" preserveAspectRatio="xMinYMin meet"><circle cx="4.5" cy="5.5" r="4" stroke="%235556" stroke-width="1" fill="none" /></svg>');
	display: inline-block;
	width: 1.5em;
	height: 13px;
	max-height: 13px;
	padding: 0;
	margin: 0;
	overflow: visible;
	font-size: 14px;
	line-height: 13px;
	text-align: left;
	vertical-align: top;
	pointer-events: none;
	box-sizing: border-box;
}
menu.petCtxMenu li.hasRadio[disabled=true]:before
{
	content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13" width="13" height="13" preserveAspectRatio="xMinYMin meet"><circle cx="4.5" cy="5.5" r="4" stroke="%235556" stroke-width="1" fill="none" /><circle cx="4.5" cy="5.5" r="2.25" stroke="none" stroke-width="1" fill="%234448a3" /></svg>');
}
menu.petCtxMenu ul li.hasRadio[disabled=true] { color: #222 !important; }
menu.petCtxMenu li.hasRadio:not([disabled=true]):active:before { content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13" width="13" height="13" preserveAspectRatio="xMinYMin meet"><circle cx="4.5" cy="5.5" r="4" stroke="%23fff8" stroke-width="1" fill="none" /><circle cx="4.5" cy="5.5" r="2.25" stroke="none" stroke-width="1" fill="%23fff" /></svg>'); }
menu.petCtxMenu ul:has(li.hasRadio:active) li.hasRadio[disabled=true]:before { content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13" width="13" height="13" preserveAspectRatio="xMinYMin meet"><circle cx="4.5" cy="5.5" r="4" stroke="%235556" stroke-width="1" fill="none" /><circle cx="4.5" cy="5.5" r="2.25" stroke="none" stroke-width="1" fill="%234446" /></svg>'); }

input[type=button]#btnPrgLibrary { color: #253C6E; }
body.dark input[type=button]#btnPrgLibrary { color: #A6B9C3; }

body.dark menu.petCtxMenu { box-shadow: 0 2px 7px 3px rgba(0, 1, 3, 0.2);  background-color: #323232; border: 1px #3B4041 solid; }
body.dark menu.petCtxMenu ul li { color: #cececf; }
body.dark menu.petCtxMenu ul li:hover,
body.dark menu.petCtxMenu ul li:focus { background-color: #606163; color: #dededf; }
body.dark menu.petCtxMenu ul li:active { background-color: #105683; color: #f9f9fa; }
body.dark menu.petCtxMenu ul li.petCtxMenuSeparator { background-color: #323232 !important; }
body.dark menu.petCtxMenu ul li.petCtxMenuSeparator:after { background-color: rgba(203,204,206, 0.15); }
body.dark menu.petCtxMenu ul li.petCtxMenuSeparator.group:after { background-color: rgba(203,204,206, 0.18); }
body.dark menu.petCtxMenu ul li.hasRadio[disabled=true] { color: #aeaeaf !important; background-color: #323232 !important; }
body.dark menu.petCtxMenu ul li.hasRadio:not([disabled=true]):before { content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13" width="13" height="13" preserveAspectRatio="xMinYMin meet"><circle cx="4.5" cy="5.5" r="4" stroke="%23a8a8a955" stroke-width="1" fill="none" /></svg>'); }
body.dark menu.petCtxMenu ul li.hasRadio[disabled=true]:before { content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13" width="13" height="13" preserveAspectRatio="xMinYMin meet"><circle cx="4.5" cy="5.5" r="4" stroke="%23a8a8a955" stroke-width="1" fill="none" /><circle cx="4.5" cy="5.5" r="2.25" stroke="none" stroke-width="1" fill="%238990CA" /></svg>'); }
body.dark menu.petCtxMenu li.hasRadio:active:before { content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13" width="13" height="13" preserveAspectRatio="xMinYMin meet"><circle cx="4.5" cy="5.5" r="4" stroke="%23f9f9fa55" stroke-width="1" fill="none" /><circle cx="4.5" cy="5.5" r="2.25" stroke="none" stroke-width="1" fill="%23f9f9fa" /></svg>') !important; }
body.dark menu.petCtxMenu ul:has(li.hasRadio:active) li.hasRadio[disabled=true]:before { content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13" width="13" height="13" preserveAspectRatio="xMinYMin meet"><circle cx="4.5" cy="5.5" r="4" stroke="%23a8a8a955" stroke-width="1" fill="none" /><circle cx="4.5" cy="5.5" r="2.25" stroke="none" stroke-width="1" fill="%23a8a8a970" /></svg>'); }
body.dark menu.petCtxMenu ul li.hasCheckmark:before { color: #a8a8a9 !important; }
body.dark menu.petCtxMenu li.hasCheckmark:active:before { color: #f9f9facc !important; }
body.dark menu.petCtxMenu ul li[disabled=true],
body.dark menu.petCtxMenu ul li[disabled=true]:hover
body.dark menu.petCtxMenu ul li[disabled=true]:focus
body.dark menu.petCtxMenu ul li[disabled=true]:active {
	color: #8e8e8f;
	background-color: #323232;
}

/* ===== dialogs ==== */

div.dialog,
div.simpleDialog
{
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: 0;
	padding: 0 12px 0 0;
	background-color: rgba(20,20,20,0.55);
	z-index: 99999;
	-webkit-backdrop-filter: blur(1px);
	backdrop-filter: blur(1px);
}

div.dialog,
div.simpleDialog 
{
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: center;
}
div.dialog:before
{
	content: '';
	display: block;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	height: 130px;
	max-height: 15vh;
	pointer-events: none;
}
div.simpleDialog:before
{
	content: '';
	display: block;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	height: 210px;
	max-height: 28vh;
}

#infoDialog { background-color: rgba(20,20,20,0.5); }

div.dialogContent {
	display: block;
	margin: 0 0 6px 0;
	padding: 12px 36px 12px 36px;
	background-color: rgba(255,255,255,0.85);
	border-radius: 4px;
	box-shadow: 0 3px 12px rgba(0,0,0,0.35);
	text-align: center;
	-webkit-backdrop-filter: blur(1px);
	backdrop-filter: blur(1px);
	font-size: 12px;
	color: #333435;
	box-sizing: border-box;
	min-width: 540px;
	overflow-y: auto;
}
div.dialogContent p { white-space: nowrap; }

div.dialogContent textarea
{
	margin: 0 auto;
	padding: 4px;
	font-family: 'Iosevka','m-1m',monospace;
	font-size: 14px;
	line-height: 17px;
	text-align: left;
	width: 100%;
	background-color: #fcfcfc;
	box-sizing: border-box;
	height: 360px;
	max-height: 50vh;
}

div.dialogContent .dialogTitle
{
	text-align: center;
	font-size: 13px;
	font-weight: bold;
	line-height: normal;
	margin: 0.5em 0 1em 0;
}
div.dialogContent .dialogButtons
{
	vertical-align: middle;
	position: relative;
}
div.dialogContent .dialogCtrl
{
	vertical-align: middle;
	margin: 0.5em 0 1em 0;
}

#textExportBtns { position: relative; text-align: center; }

input[type=button].btnTextSelect { position: absolute; left: 0; }


div.simpleDialogContent
{
	display: block;
	width: 440px;
	margin: 0 0 12px 0;
	padding: 25px 25px 20px 25px;
	background-color: #fcfcfc;
	border-radius: 2px;
	box-shadow: 0 3px 12px rgba(0,0,0,0.35);
	text-align: left;
	font-size: 13px;
	color: #333435;
}

div.simpleDialogContent .dialogTitle
{
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	line-height: normal;
	margin: 0.5em 0 1em 0;
}

#infoDialogBtns { text-align: right; margin: 2em 0 0 0; }
#infoDialogBtns input[type=button] { margin-left: 1.25em; width: 80px; text-align: center; }
#promptDialogInputPane { margin: 0.75em 0; }
#promptDialogInput {
	padding: 3px 5px;
	font-family: 'Iosevka','m-1m',monospace;
	font-size: 16px;
	line-height: normal;
	color: #333435;
	background-color: #fff;
	border: 1px #AFAFB7 solid;
	border-radius: 2px;
	width: 90%;
}
#infoDialogBtns input#infoDialogBtnOption { width: auto; min-width: 80px; }

#infoDialogTitle { text-align: left; margin: 0 0 0.75em 0; line-height: 140%; font-weight: bold; padding: 1px 0; border-bottom: 1px #222266 solid; white-space: pre; }
#infoDialogTitle.warn { border-bottom-color: #D17763; }
#infoDialogTitle.warn:before {
	content: '\0026A0';
	color: #CC6C57;
	display: block;
	float: left;
	margin: 0 0.5em 0 0;
}
#infoDialogText { text-align: left; margin: 0; white-space: pre-wrap; line-height: 140%; }
#infoDialogText.mono { white-space: pre; font-family: 'm-1m',monospace; font-size: 15px; line-height: 17px; }


#downloadLinkContent { margin-top: 80px; }
#downloadLinkParent { max-width: 500px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: 1.5em auto; }
#downloadLinkParent a
{
	color: #0000ee !important;
	-webkit-animation: kf_fadein 0.8s ease forwards;
	-moz-animation: kf_fadein 0.8s ease forwards;
	animation: kf_fadein 0.8s ease forwards;
}
#downloadLinkMessage{ margin: 1em 0; }
#downloadLinkParent { margin-bottom: 1.5em; }

/* animation keyframes */
@keyframes kf_fadein {
	from { opacity: 0.01; }
	to { opacity: 1; }
}
@keyframes kf_pulse {
	from { fill: rgba(247,149,12, 0.24) }
	to { fill: rgba(247,149,12, 0.35) }
}

body.dark div.dialog,
body.dark div.simpleDialog,
body.dark #confirmDialog,
body.dark #mountDialog,
body.dark #infoDialog { background-color: #66676980; }
body.dark div.dialogContent { background-color: #535456; color: #e8e8e9; }

body.dark p.dialogTitle,
body.dark #infoDialogTitle { color: #C5D4D9; }
body.dark #infoDialogTitle.warn:before { color: #F96941; filter: drop-shadow(0 0 2px rgba(0,0,0,0.025)); }
body.dark #infoDialogTitle.warn { border-bottom-color: #EC5242; }
body.dark #infoDialogTitle { border-bottom-color: #4468C6; }
body.dark div.simpleDialogContent { background-color: #535456; color: #e8e8e9; }
body.dark #urlExportLinkPane a,
body.dark #downloadLinkParent a { color: #86C8CA !important; }

body.dark form.fileInputForm { color: #64A8F6; }

body.dark div.dialogContent { background-color: #535456; color: #e8e8e9; }
body.dark input[type="text"],
body.dark input[type="number"],
input[type="text"].dark,
input[type="number"].dark,
body.dark textarea,
body.dark div.dialogContent textarea { background-color: #3c3c3c; color: #ddddde; border: 1px #555 solid; }

body.dark textarea::-webkit-scrollbar { width: 15px; }
body.dark textarea::-webkit-scrollbar-track,
body.dark textarea::-webkit-scrollbar-track-piece { background-color: #444; }
body.dark textarea::-webkit-scrollbar-button { background-color: #646464; color: #444; }
body.dark textarea::-webkit-scrollbar-thumb { background-color: #646464; border: 3px solid #444; }
body.dark textarea::-webkit-scrollbar-thumb:vertical { min-height: 33px; }
body.dark textarea::-webkit-scrollbar-corner { background-color: #535456; border-color: #555; }
body.dark textarea { scrollbar-color: #646464 #444; }


/* disk views */

div#diskViewDialog,div#diskComposerDialog { padding: 0; z-index: 99998; }
div#diskViewDialog:before,div#diskComposerDialog:before
{
	height: 60px;
	max-height: 7vh;
}
div#diskViewContent,div#diskComposerContent {
	display: block;
	margin: 0 0 6px 0;
	background-color: #333436;
	padding: 0;
	color: #c8c8c9;
	border-radius: 4px;
	box-shadow: 0 3px 12px rgba(0,0,0,0.35);
	-webkit-backdrop-filter: blur(1px);
	backdrop-filter: blur(1px);
	box-sizing: border-box;
	max-width: 100%;
	position:relative;
}
div#diskViewContent { width: 940px; }
div#diskViewContent div,
div#diskViewContent p
{
	font-family: 'Iosevka','m-1m',monospace;
	line-height: 14px;
	font-size: 13px;
	box-sizing: border-box;
}
p#diskViewTitle,p#diskComposerTitle
{
	color: #b8b8b9;
	text-align: center;
	margin: 0;
	font-weight: bold;
	line-height: 16px !important;
	padding: 5px 0;
	background-color: #2b2c2e;
	border-top: 1px #43444644 solid;
	border-radius: 4px 4px 0 0;
	user-select: none;
}
#diskViewPane
{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 0;
	align-items: start;
	justify-content: start;
	margin: 0;
}
#diskViewCtrl,#diskComposerCtrl
{
	margin: 0;
	padding: 8px 0;
	text-align: center;
	border-top: 1px #43444644 solid;
	border-bottom: 1px #232426 solid;
	background-color: #2b2c2e;
	border-radius: 0 0 4px 4px;
}
#diskViewCtrl button,#diskComposerCtrl button { min-width: 80px; }
#diskViewBamColumn,
#diskViewFileColumn
{
	width: 50%;
	min-width: 50%;
	max-width: 50%;
	border: 1px #232426 solid;
	border-top-color: #43444688;
	position: relative;
}
#diskViewBam
{
	min-height: 576px;
	max-height: 576px;
	overflow: auto;
	white-space: pre;
	padding: 4px 0 0 0;
	user-select: none;
}
#diskViewFileColumn
{
	min-height: 600px;
	max-height: 600px;
	border-left: none;
}

#diskViewBamInfo,
#diskViewFileCtrl
{
	display: block;
	padding: 3px 0 0 34px;
	white-space: pre;
	overflow: hidden;
	text-overflow: ellipsis;
	height: 22px;
	color: #888889;
	border-top: 1px #43444688 solid;
	box-shadow: 0 -1px 0 #232426;
}
#diskViewBamInfo .bamInfoContent { color: #b8b8b9; }

#diskViewBam .bamthv,
#diskViewBam .bamthh,
#diskViewBam .bamblock
{ display: inline-block; vertical-align: baseline; box-sizing: border-box; }

#diskViewBam .bamthv { width: 12px; margin: 0 1px; text-align: center; }
#diskViewBam .bamthh { min-width: 26px; margin: 0 6px 0 1px; text-align: right; }
#diskViewBam .bamblock
{
	width: 12px; height: 12px;
	margin: 0 1px;
	border: 1px #777 solid;
	opacity: 0.7;
	cursor: default;
	transition: all 0.1s ease;
	transition: cursor 0s allow-discrete;
}
#diskViewBam .bamblock.selected { opacity: 1; }
#diskViewBam .bamblock:not(.selected):hover { opacity: 0.85; cursor: pointer; transition: cursor 1.7s allow-discrete; }
#diskViewBam .bamseparator { display: block; height: 4px; width: 100%; margin: 0; }

#diskViewBam .bamtype0 { background-color: #484849; }
#diskViewBam .bamtype1 { background-color: #777778; }
#diskViewBam .bamtype1 { background-color: #84CB51; border-color: #84CB51; }
#diskViewBam .bamtype2 { background-color: #8ECB51; border-color: #8ECB51; }
#diskViewBam .bamtype3 { background-color: #51BFCB; border-color: #51BFCB; }
#diskViewBam .bamtype4 { background-color: yellow; border-color: yellow; }
#diskViewBam .bamtype5 { background-color: orange; border-color: orange; }
#diskViewBam .bamtype6 { background: linear-gradient(-45deg, orange, orange 50%, yellow 50%, yellow); border-color: #F3B331cc; }
#diskViewBam .bamtype7 { background-color: #FFF4BF; border-color: #FFF4BF; }
#diskViewBam .bamtype8 { background-color: #484849; border-color: #F3B331cc; }

#diskViewBam .bamtype0.selected { border-color: #aaa; }
#diskViewBam .bamtype0:not(.selected):hover { border-color: #999; }

#diskViewDirectory,
#diskViewFile
{ display: block; margin: 0; padding: 0; display: none; }
#diskViewFileColumn.directory > #diskViewDirectory { display: block; }
#diskViewFileColumn.file > #diskViewFile { display: block; }
#diskViewDirHeader
{
	margin: 0;
	padding: 2px 0 0 15px;
	border-bottom: 1px #232426 solid;
	box-shadow: 0 -1px 0 #232426;
	white-space: pre;
	line-height: 15px !important;
	color: #D98C00;
	height: 96px;
}
#diskViewDirList
{
	max-height: 502px;
	overflow: auto;
}
#diskViewDirList li
{
	display: block;
	margin: 0;
	padding: 3px 0 3px 15px;
	white-space: pre;
	line-height: 15px !important;
	border-top: 1px #43444688 solid;
	border-bottom: 1px #232426 solid;
	border-right: 1px #232426 solid;
	color: #c8c8c9;
	cursor: pointer;
	position: relative;
}
#diskViewDirList li.selected { background-color: #2a2b2d; cursor: default; }

#diskViewDirList li .file-details { color: #a8a8a9; }
#diskViewDirList li .file-icon { color: #8ECB51b3; }
#diskViewDirList li .file-icon.file-icon-del { color: #999; }
#diskViewDirList li .file-icon.file-icon-splat { color: #777; }
#diskViewDirList li .file-title > span.rvs { text-decoration: none; color: #333436; background-color: #a8a8a9; display: inline-block; line-height: 13px !important; vertical-align: baseline; }
#diskViewDirList li.selected .file-title > span.rvs { color: #2a2b2d; }

#diskViewPane div.scrollPane::-webkit-scrollbar,
#diskComposerPane div.scrollPane::-webkit-scrollbar { width: 15px; }
#diskViewPane div.scrollPane::-webkit-scrollbar-track,
#diskViewPane div.scrollPane::-webkit-scrollbar-track-piece,
#diskComposerPane div.scrollPane::-webkit-scrollbar-track,
#diskComposerPane div.scrollPane::-webkit-scrollbar-track-piece { background-color: #434446; }
#diskViewPane div.scrollPane::-webkit-scrollbar-button,
#diskComposerPane div.scrollPane::-webkit-scrollbar-button { background-color: #727272; color: #434446; }
#diskViewPane div.scrollPane::-webkit-scrollbar-thumb,
#diskComposerPane div.scrollPane::-webkit-scrollbar-thumb { background-color: #727272; border: 3px solid #434446; border-radius: 7px; }
#diskViewPane div.scrollPane::-webkit-scrollbar-thumb:vertical,
#diskComposerPane div.scrollPane::-webkit-scrollbar-thumb:vertical { min-height: 33px; }
#diskViewPane div.scrollPane::-webkit-scrollbar-corner,
#diskComposerPane div.scrollPane::-webkit-scrollbar-corner { background-color: #535456; border-color: #555; }
#diskViewPane div.scrollPane,
#diskComposerPane div.scrollPane { scrollbar-color: #757575 #434446; }

#diskViewPane .diskViewLinkButton { display: block; position: absolute; color: #54A8FF !important; text-decoration: none; cursor: pointer; user-select: none; }
#diskViewPane .diskViewLinkButton:hover, diskViewContent .diskViewLinkButton:focus {  color: #58ABFF !important; text-decoration: underline; text-decoration-color: #2157C8; }
#diskViewPane .diskViewLinkButton:active { color: #FF5851 !important; text-decoration: underline; }
#diskViewPane .diskViewLinkButton[hidden] { display: none; }

#diskViewDirList li .diskViewLinkButton { right: 10px; top: 3px; }
#diskViewBamColumn .diskViewLinkButton { right: 10px; bottom: 4px; }
#diskViewFileCtrl .diskViewLinkButton { right: 66px; bottom: 4px; }

#diskViewFileHeader
{
	display: block;
	margin: 0;
	padding: 4px 0 0 15px;
	white-space: pre;
	line-height: 15px !important;
	border-bottom: 1px #232426 solid;
	box-shadow: 0 -1px 0 #232426;
	color: #c8c8c9;
	min-height: 43px;
	max-height: 43px;
	position: relative;
}
div#diskViewFileHeader .diskViewLinkButton { margin: 0; right: 25px; bottom: 4px; }
#diskViewFileData
{
	max-height: 533px;
	overflow: auto;
	white-space: pre;
	font-size: 12px !important;
	line-height: 14px !important;
	color: #c8c8c9;
	padding: 2px 0 3px 15px;
	border-top: 1px #43444688 solid;
	border-right: 1px #232426 solid;
}
#diskViewFileData p
{
	margin: 0 !important;
	padding: 0 !important;
	font-size: 12px !important;
	line-height: 14px !important;
}
.diskViewFileRest { opacity: 0.65; }
.diskViewFileSystem { opacity: 0.525; }
.diskViewFileBlockLabel { display: inline-block; padding: 0.1em 1ch; margin: 8px 0 4px 0; background-color: #8E3C3C; color: #000; }
.diskViewFileBlockLabel.selected { background-color: #8F6518; }
.diskViewFileAddrLabel, .diskViewFileTextLabel { color: #b8b8b9; }
.diskViewFileStartAddrLabel { color: #ee8800; cursor: default; }
.diskViewFileBlockLink { color: #EBC400; cursor: default; }

.diskViewFileBlockLink.clickable { cursor: pointer; transition: all 0.2s ease; }
.diskViewFileBlockLink.clickable:hover,
.diskViewFileBlockLink.clickable:focus { background-color: #EBC400; color: #2b2c2e; }
.diskViewFileBlockLink.clickable:active { background-color: #ee8800; color: #2b2c2e; }

#diskViewCopyMessage
{
	position: absolute;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	font-family: 'Nunito Sans',sans-serif !important;
	font-size: 16px !important;
	line-height: 16px !important;
	letter-spacing: 0.01em !important;
	padding: 8px 12px;
	color: #c8c8c9cc;
	background-color: #434446dd;
	border-radius: 8px;
	box-shadow: 0 5px 5px #00010322;
	user-select: none;
	white-space: nowrap;
	display: block;
	touch-action: none;
	pointer-events: none;
}

div#diskComposerContent { width: 640px; margin: 0 15px 0 0; }
#diskComposerPane {
	margin: 0;
	padding: 0;
	border: 1px #232426 solid;
	border-top-color: #43444688;
}
#diskComposerPane input { font-size: 13px; line-height: normal; }
div#diskComposerContent div,
div#diskComposerContent p
{
	line-height: 14px;
	font-size: 13px;
	box-sizing: border-box;
}
#diskComposerHeader
{
	display: block;
	margin: 0;
	padding: 8px 28px;
	border-bottom: 1px #232426 solid;
	box-shadow: 0 -1px 0 #232426;
	color: #c8c8c9;
}
#diskComposerHeader p { margin: 0.5em 0; }
#diskComposerHeader label { display: inline-block; min-width: 5.5em; color: #989899; }
#diskComposerHeader select + select { margin-left: 0.3em; margin-right: 0.5em; }
#diskComposerDiskName { width: 150px; }
div.diskComposerAdmin, #diskComposerFilePane
{
	display: block;
	margin: 0;
	padding: 4px 28px;
	border: 1px #232426 solid;
	border-top-color: #43444688;
	color: #c8c8c9;
}
div.diskComposerAdmin button { margin-left: 0.25em; }
div.diskComposerAdmin { padding: 6px 28px; }
#diskComposerAdminCtrl { padding-bottom: 8px; }

#diskComposerFileList
{
	display: block;
	margin: 0 auto;
	border: 1px #4a4b4c solid;
	border-radius: 2px;
	box-sizing: border-box;
	width: 500px;
	height: 230px;
	max-height: 230px;
	overflow-y: auto;
	resize: none;
}
#diskComposerFileList li,#diskComposerFileListTitle
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0;
	margin: 0;
	padding:3px 6px;
	border-bottom: 1px #3a3b3c solid;
	font-size: 13px;
}
#diskComposerFileListTitle { color: #5a5b5c; border-bottom: none; width: 498px; margin: 0 auto; transition: color 0.3s ease; }
#diskComposerFileListTitle:hover { color: #888889; }
#diskComposerFileList li:hover { background-color: #AAB7D311; }
#diskComposerFileList li > span,
#diskComposerFileListTitle > span
{
	display: inline-block;
	box-sizing: border-box;
	text-align: center;
	vertical-align: middle;
	cursor: default;
	white-space: nowrap;
}
#diskComposerFileList li > .d64include,
#diskComposerFileListTitle > .d64include { width: 42px; }
#diskComposerFileList li > .d64fileName { width: 150px; }
#diskComposerFileListTitle > .d64fileName { width: 144px; }
#diskComposerFileList li > .d64fileType,
#diskComposerFileListTitle > .d64fileType { width: 60px; text-align: center;}
#diskComposerFileList li > .d64blockCnt,
#diskComposerFileListTitle > .d64blockCnt { width: 30px; text-align: right;}
#diskComposerFileListTitle > .d64fileNav { width: 85px; text-align: right; }
#diskComposerFileList li > .d64fileNav { width: 50px; text-align: right; }
#diskComposerFileList li > .d64fileNav > span + span { margin-left: 6px; }
#diskComposerFileList li span[role=button]
{
	display: inline-block;
	width: 18px;
	height: 18px;
	line-height: 18.5px;
	text-align: center;
	font-size: 13px;
	color: #c8c8c9;
	border: 1px #c8c8c9bb solid;
	border-radius: 50%;
	box-sizing: border-box;
	vertical-align: middle;
	cursor: pointer;
	user-select: none;
	padding: 0;
}
#diskComposerFileList li span[role=button]:hover,
#diskComposerFileList li span[role=button]:focus { border-color: #54A8FFdd; color: #54A8FF; }
#diskComposerFileList li span[role=button]:active { border-color: #54A8FF; background-color: #54A8FF; color: #f8f8f9; }
#diskComposerFileList li span[role=button].d64delBtn { font-size: 13px; line-height: 16.5px; }
#diskComposerFileList li span[role=button].d64delBtn:hover,
#diskComposerFileList li span[role=button].d64delBtn:focus { border-color: #FF5851; color: #FF5851; }
#diskComposerFileList li span[role=button].d64delBtn:active { border-color: #FF5851; background-color: #FF5851; color: #f8f8f9; }

#diskComposerFileList li > .d64fileNav { opacity: 0.5; transition: opacity: 0.15s ease; }
#diskComposerFileList li:hover > .d64fileNav,
#diskComposerFileList li:focus > .d64fileNav{ opacity: 1; }

#diskComposerFileList li span[role=button][disabled=true]
{ opacity: 0.35; pointer-events: none; }
p#diskComposerFileListMessage { text-align: center; color: #989899; }
p#diskComposerFileListMessage.warn { color: #FF5851; }

#diskComposerFileForm { margin: 1em 0; display: block; box-sizing: border-box; padding: 4px 0 0 0; height: 38px; }
#diskComposerFileForm label { color: #c8c8c9; margin-right: 0.65em; }

#diskComposerDropZone {
	float: right;
	width: 62px;
	height: 62px;
	text-align: center;
	padding-top: 18px;
	box-sizing: border-box;
	margin: 0;
	border-radius: 50%;
	border: 1px rgba(108,132,141,0.35) dotted;
	background-color: rgba(164,196,223,0.25);
	position: relative;
}
#diskComposerDropZoneIcon
{
	color: #C5D4D9;
	width: 24px;
	height: 24px;
	pointer-events: none;
}
#diskComposerDropZone:before
{
	content: 'or drag & drop files';
	white-space: nowrap;
	position: absolute;
	display: block;
	right: 68px;
	top: 20px;
	opacity: 0.65;
	color: #c8c8c9;
}
#diskComposerDropZone.dragdrop { background-color: rgba(108,132,141,0.75); }


/* other */

#fileIcon,
#fileIcon svg
{
	width: 18px;
	height: 18px;
	display: inline-block;
}
#fileIcon
{
	vertical-align: middle;
	margin: 0 0.2em 0 0.2em;
	opacity: 0.3;
	color: #000;
}
#fileIcon.mounted { opacity: 1; cursor: pointer; }


label#mountedFile {
	display: inline-block;
	vertical-align: middle;
	text-align: left;
	width: 146px;
	max-width: 146px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background-color: #eee;
	border-radius: 4px;
	padding: 0 4px;
	color: #333;
	line-height: 22px;
}

#inspectBtn { margin-left: 1em; }

body.dark label#mountedFile { background-color: rgba(203, 204, 206, 0.08); color: #b8b8b9; }
body.dark #fileIcon { color: #A6B9BF; }

#diskCtrl { margin: 1em 0 1.5em 0; }