*{
	box-sizing: border-box;
}
body {
	padding: 0;
	margin: 0;
	position: relative;
	inset: 0;
	display: flex;
	flex-flow: column wrap;
	align-content: center;
	justify-content: center;
	height: 100vh;
	overflow: hidden;
}
/*------------------------ LOGIN -----------------------------*/
.login_screen{
	position: absolute;
	background: radial-gradient(#a3a3a3, #363636);
	inset: 0;
	display: flex;
	flex-flow: column wrap;
	align-items: center;
	justify-content: center;
	overflow: auto;
}
.login_dc{
	width: 350px;
	height: 200px;
	background: #FFF;
	border-radius: 5px;
	box-shadow: 0 0 9px #000;
	padding: 20px;
	display: flex;
	flex-flow: column nowrap;
	font: 10pt /20px sans-serif;
	position: absolute;
	top: 180px;
	z-index: 2;
}
.login_label {
	color: #777;
}
.login_dc > input {
	padding: 7px 7px 7px 32px;
	margin-bottom: 10px;
	border: 1px solid #DDD;
	border-radius: 4px;
}
.login_dc > .unam_eicon::before{
	content: '\f2c0';
	font: 13pt fontello;
	position: absolute;
	top: 44px;
	left: 27px;
	color: #999;
}
.login_dc > .upass_eicon::before{
	content: '\e92d';
	font: 13pt fontello;
	position: absolute;
	top: 105px;
	left: 27px;
	color: #999;
}
.login_dc > button {
	width: 30%;
	align-self: self-end;
	padding: 6px;
	border: 1px solid #DDD;
	border-radius: 4px;
	color: #777;
	font-weight: bold;
}
.login_dc > input:focus{
	outline: 1px solid rgb(3, 100, 190);
	outline-offset: -2px;
}
.login_screen > .loginerror{
	position: absolute;
	top: 343px;
	background-color: #FFF;
	width: 350px;
	padding: 10px 10px 10px 40px;
	border-radius: 5px;
	z-index: 1;
	font: 10pt sans-serif;
	font-variant-ligatures: common-ligatures;
	box-shadow: 0 0 9px #000;
	transition: top 0.4s, opacity 0.3s;
	opacity: 0;
	color: #C00;
}
.login_screen > .loginerror::before{
	position: absolute;
	left: 5px;
	font-size: 15pt;
	top: 4px;
	color: #F00;
}
/*------------------------------------------------------------ DESKTOP -------------------------------*/
#desktop{
	position:fixed;
	left:50px;
	top:0;
	width:calc(100% - 50px);
	height:100%;
	background-color: #666;
	color:#FFF;
	overflow:auto;
}
.stbarDC{
	position:fixed;
	width:50px;
	left:0;
	top:0;
	height:100%;
	background-color: #888;
	z-index: 9999;
	padding-top: 90px;
}
#btn_exit{
	position:absolute;
	top:0;
	width:100%;
	height:50px;
	cursor:pointer;
	opacity:0.7;
	background-size: 34px;
	text-align: center;
	line-height: 50px;
}
#btn_exit:before {
	content: '\e875';
	font: 24pt/50px fontello;
	color: #565356;
}
#btn_exit:hover{
	opacity:1;
}
#btn_apps{
	position:absolute;
	top: 50px;
	width:100%;
	height:40px;
	cursor:pointer;
	opacity:0.7;
	text-align:center;
}
#btn_apps:before {
   content: '\e8f5';
   font: 21pt/40px fontello;
   color: #FFF;
}
#btn_apps:hover{
	opacity:1;
}
#stbar{
	position:absolute;
	top:80px;
	width:100%;
	height:calc(100% - 50px);
}

.msMenuItem::before{
	font-size: 14pt;
	padding-right: 5px;
}
/*------------------------------------------------------- MSG BOXES --------------------------------------*/
div[class^='msg_']{
	display: flex;
	font: 12pt sans-serif;
	align-items: center;
	height: 100%;
}
div[class^='msg_']::before{
	font: 38pt fontello;
	margin-right: 20px;
	padding-left: 30px;
}
.msg_info::before{
	content: '\f29c';
	color: rgb(0, 117, 212);
}
.msg_warn::before{
	content: '\f29c';
	color: rgb(255, 145, 0);
}
.msg_quest::before{
	content: '\ebf6';
	color: rgb(0, 122, 20);
}
.msg_err::before{
	content: '\f29c';
	color: rgb(255, 0, 0);

}
.input_box_dc{
	display: flex;
	flex-flow: column nowrap;
}
.input_box_dc > label{
	font: 10pt sans-serif;
	margin-bottom: 5px;
}
.input_box_dc > input{
	font: 11pt sans-serif;
	padding: 4px 5px;
	border: 1px solid #AAA;
	border-radius: 4px;
}
.input_box_dc > input:focus{
	outline: none;
	box-shadow: 0 0 4px #27a3f7;
}