@media only screen and (max-width : 799px) {
	.desktop { left: 2.5em; }
	#menuBar {
		width: 100%;
		z-index: 5;
	}
}
@media only screen and (min-width : 800px) {
	.desktop { left: 15em; }
	#menuButton { display: none; }
	#menuBar { width: 15em; }
}

#msg, .backBlack, #desktopTitle {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.desktop,#menuBar,#systemBar {
	display: block;
	position: fixed;
}
.desktop {
	top: 3em;
	right: 0;
	bottom: 0;
}
#desktopContent {
	display: block;
	position: absolute;
	top: 2.9em;
	left: 0;
	right: 0;
	bottom: 0;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 0 0.5%;
	background: var(--c10);
}
#desktopTitle {
	background: var(--c9);
	color: var(--c2);
	border-color: var(--c3);
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2.5em;
	overflow: hidden;
	font-weight: bold;
	/* font-size: 1.7em; */
	padding: 0.15em;
	border-bottom-width: 1px;
	border-style: solid;
	transition: 0.3s;
}
#desktopTitle:has(span > span) {
	height: 2.8em;
	transition: 0.3s;
}
#desktopTitle > img {
	position: absolute;
	right: 5px;
	top: 50%;
	margin-top: -12px;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
	cursor: pointer;
}
#desktopTitle > span {
	font-size: 1.7em;
	transition: 0.3s;
}
#desktopTitle > span:has(> span) {
	font-size: 1.1em;
	transition: 0.3s;
}
#desktopTitle > span > span {
	display:block;
	font-size: 0.8em;
	font-style: italic;
}
#desktopBar {
	width: 3em;
	right: 0;
	top: 3em;
	bottom: 2em;
	background: var(--c1);
}
#loading {
	position: fixed;
	display: block;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
    background-color: rgba(51,51,51,0.9);
	z-index: 99999;
}
#loading > span {
	color: #FFF;
	position: absolute;
	display: block;
	width: 100%;
	text-align: center;
	font-size: 3em;
	top: 50%;
}
#loading1 {
	top: 60%;
	width: 40%;
	background: #4181a1;
}
#loading2 {
	width: 40%;
	background: #4397c1;
}
#loading3 {
	width: 40%;
	background: #78c8ef;
}
#loading1, #loading2, #loading3 {
	position: absolute;
	display: block;
	height: 20px;
}
#menuBar {
	left: 0;
	top: 3em;
	bottom: 0;
	overflow-y: auto;
	overflow-x: hidden;
}
#menuBar div {
	display:block;
	position: relative;
	font-size: 0.94em;
	cursor: pointer;
	background: var(--cl11);
}
#menuBar div::first-letter { text-transform: uppercase; }
#menuBar div > span {
	display: flex;
	align-items:center;
	position: relative;
	padding: 6px 4px;
}
#menuBar div > span > img, #sysOptions > span:nth-child(1) > span > img {
	margin-right: 5px;
	width: auto;
	height: 1em;
	float: left;
}
#menuBar div span ar {
	display: block;
	position: relative;
	float: right;
	font-size: .7em;
	margin-left: 5px;
	transition: 0.3s;
}
#menuBar div[lvl='0'] > span {
	padding-left: 3px;
	border-width: 1px 0 0 0;
	border-color: rgba(222,222,222,0.3);
	border-style: solid;
}
#menuBar div[lvl='0']:last-child > span {
	border-width: 1px 0;
}
#menuBar div[lvl='1'] { display: none; }
#menuBar div[lvl='1'] > span {
	padding-left: 13px;
	background: var(--cl16);
}
#menuBar div[lvl='2'] { display: none; }
#menuBar div[lvl='2'] > span {
	padding-left: 23px;
	background: var(--cl17);
}
#menuBar div[lvl='3'] { display: none; }
#menuBar div[lvl='3'] > span {
	padding-left: 33px;
	background: var(--cl24);
}
#menuBar > img:first-child {
	position: relative;
	display: block;
	margin: 10px 0 10px 50%;
	width: 8.7em;
	left: -4.35em;
	border-radius: 50%;
	height: auto;
}

#menuBar div.shortCut {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	font-size: 0.85em !important;
	background: rgba(255,255,255,0.1);
}
#menuBar div.shortCut:before {
	content: '⤹';
	font-size: 1.3em;
	font-weight: bold;
	padding: 0 3px;
	-moz-transform: scale(1, -1);
	-webkit-transform: scale(1, -1);
	-o-transform: scale(1, -1);
	-ms-transform: scale(1, -1);
	transform: scale(1, -1);
}

#menuBar > img:nth-child(2) {
	position: absolute;
	display: block;
	right: 5px;
	top: 5px;
	cursor: pointer;
}
#menuButton {
	display: none;
	position: fixed;
	left: 0;
	top: 3em;
	bottom: 0;
	width: 2.5em;
	z-index: 4;
}
#menuButton > img {
	position: absolute;
	width: 60%;
	top: 0.5em;
	left: 20%;
	height: auto;
	cursor: pointer;
}

#systemBar {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	/* justify-content: space-between; */
	align-items: center;
	overflow: visible;
	top: 0;
	left: 0;
	right: 0;
	height: 3em;
	z-index: 99997;
}
#systemBar > span:nth-child(1) {
	font-weight: bold;
	font-size: 1.5em;
	line-height: 2em;
	margin-left: 0.5em;
}
#systemBar > #sysUpdate {
	background-color: var(--cl23);
	margin-left: 0.5em;
	height: 2em;
	width: 2em;
	border-radius: 5px;
	cursor: help;
}
#systemBar > #sysUpdate > img {
	width: 100%;
	filter: invert(20%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) drop-shadow(2px 2px 2px rgb(0 0 0 / 0.3));
}
#sysOptions {
	display: none;
	flex-flow: column nowrap;
	padding: 4px;
}
#sysOptions > span:nth-child(1) > span {
	display: block;
	text-align: center;
	font-size: 0.8em;
	margin-bottom: 1px;
	padding: 1px 2px;
	cursor: pointer;
	border-radius: 3px;
}
#sysOptions > span:nth-child(1) > span:hover { background: var(--cl11); }
#sysUser {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-flow: row wrap;
	padding: 2px 9px;
	cursor: pointer;
	font-size: 0.9em;
	height: 2.6em;
}
#sysUser > span:nth-child(1) {
	display: block;
	position: relative;
	width: 2em;
	height: 2em;
	font-weight: bold;
	border-radius: 50%;
	margin-right: 5px;
	padding: 0.1em 0 0 0.1em;
	background: var(--cl02);
}
#sysMenu {
	display: flex;
	flex-direction: column;
	position: absolute;
	border-radius: 3px;
	top: 0.3em;
	right: 0.5em;
}
#sysExit {
	display: block;
	font-weight: bold;
	font-size: 0.8em;
	text-align: center;
	border-radius: 3px;
	padding: 2px 9px;
	margin-top: 0.1em;
	cursor: pointer;
}
#msg, .backBlack {
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.85);
	cursor: help;
	z-index: 99999;
}
.backBlackClose { cursor: default; }
#msg > div {
	max-width: 80%;
	display: flex;
	justify-content: center;
	align-items: stretch;
	overflow: hidden	;
	font-size: 1.9em;
	color: #FFF;
	border-radius: 10px;
}
#msg span:first-child {
	padding: 0.9em;
	text-align: center;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
#msg span:last-child {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.2em;
	overflow: initial;
}
#msg span:last-child::before {
	content: " ";
	width: 0;
	height: 0;
	margin-left: -0.6em;
	border: 0.6em solid transparent;
	border-left: 0;
}
#msg img {
	display: block;
	/* align-self: flex-end; */
	width: 3.8em;
	height: auto;
	margin: 0.3em;
}
#msg div[type='1'] {
	background: var(--cl18);
	border-color: var(--cl19);
}
#msg div[type='2'] {
	background: var(--cl20);
	border-color: var(--cl21);
}
#msg div[type='3'] {
	background: var(--cl22);
	border-color: var(--cl23);
}

#msg div[type='1'] span:last-child { background: #B71C1C; }
#msg div[type='1'] span:last-child::before { border-right-color: #B71C1C; }

#msg div[type='2'] span:last-child { background: rgb(47, 187, 19); }
#msg div[type='2'] span:last-child::before { border-right-color: rgb(47, 187, 19); }

#msg div[type='3'] span:last-child { background: rgb(237, 150, 1); }
#msg div[type='3'] span:last-child::before { border-right-color: rgb(237, 150, 1); }

#msg input {
	margin: 0.2em 0.3em;
	font-size: 0.5em;
	border: 1px solid #1C5999;
	border-radius: 5px;
	padding: 0.2em 0.5em;
	background: rgba(255,255,255,0.7);
	cursor: pointer;
	color: #333;
}
#msg textarea {
	padding: 0.2em 0.5em;
	font-size: 0.6em;
}
#msg input, #msg textarea { font-family: 'Nunito', sans-serif; }
#process {
	position: fixed;
	display: block;
	background: #EEE;
	border-radius: 2px;
	top: 5%;
	bottom: 5%;
	left: 15%;
	right: 15%;
	cursor: wait;
}
#process > .bar {
	position: relative;
	display: none;
	top: 2%;
	left: 1%;
	height: 4%;
	width: 98%;
	border: 1px solid #C8E6C9;
	border-radius: 2px;
	background: rgba(255,255,255,0.5)
}
#process > .bar > span {
	position: absolute;
	display: block;
	background: #C8E6C9;
	top: 0;
	bottom: 0;
	left: 0;
}
#process > div:nth-child(2) {
	position: absolute;
	width: 98%;
	top: 10%;
	left: 1%;
	bottom: 2%;
	border: 1px solid #DDD;
	border-radius: 2px;
	padding: 3px;
	overflow: auto;
}
#process > div:nth-child(2) > span:first-child {
	background-color: #AAA;
	border-radius: 2px;
	padding: 2px;
}
#process > div:nth-child(2) > span {
	position: relative;
	display: block;
	font-size: 0.9em
}
#process > div:nth-child(2) > span > span {
	float: right;
	color: #00A;
}