body {
	font-family:system-ui, sans-serif; font-size:13px;
	-webkit-font-smoothing: antialiased; -ms-font-smoothing: antialiased;
	overflow:hidden;
	background-color:#fff;
	color:#333;
	margin:0;padding:0;
}

#header {
	background-color:#0f4968;
	position:absolute;left:0px;top:0;right:0;height:40px;
	color:#BECFE0;
	font-size:17px;
}
#appLogo {
	display:inline-block;
	margin-left:10px;
	margin-top: -5px;
	height:30px;
	width:78px;
	vertical-align: middle;
	background-image: url("images/imtun-logo.png");
}
#appTitle {
	display:inline-block;
	margin-top:10px;margin-left:10px; color:#FFF;
}
#appDesc {
	display:inline-block;
	margin-top:10px;margin-left:10px;
}

#content {
	position:absolute;
	left:0;right:0;
	top:100px;
	bottom:28px;
}

#appMenu {
	font-size:12px;
	overflow-x:hidden; white-space:nowrap;
	position:absolute;
	top:40px;height:60px;left:0;right:0;
	z-index:1;
	background-color:#d2d6dc;
	transition: 0.3s;
}


#appMenu > .appm {
	margin:10px 0px 0px 10px; padding:10px 7px 10px 7px; width:150px;
	display:inline-block;
	background-color:#20617b;
	color: #ffffff;
	text-decoration: none;
	font-size:14px;overflow-x:hidden;

	box-sizing:border-box;
	text-transform:uppercase;
	box-shadow:0px 2px 10px #383838;-webkit-box-shadow:0px 2px 10px #383838;-moz-box-shadow:0px 2px 10px #383838;
}

#appMenu > .appm:nth-child(2) { background-color:#6dbed7; }
#appMenu > .appm:nth-child(3) { background-color:#588ca4; }
#appMenu > .appm:nth-child(4) { background-color:#45a889; }
#appMenu > .appm:nth-child(5) { background-color:#7765a3; }
#appMenu > .appm:nth-child(6) { background-color:#3052a9; }
#appMenu > .appm:nth-child(7) { background-color:#3d723a; }
#appMenu > .appm:nth-child(8) { background-color:#555555; }
#appMenu > .appm:nth-child(9) { background-color:#804000; }


#appMenu > a.selected, #appMenu > a.appm:hover {
	padding-bottom: 7px;
	border-bottom:solid 3px #fff; color:#fff;
}
.appm > .ax-ico { font-size:16pt;display:inline-block; margin-left:1px;margin-right:12px; vertical-align: middle;}

#appLinks {
	position:absolute; top:12px; right:100px;
	font-size:13px;
	letter-spacing:0.3px;
}
#appLinks > a.appl, #appLang > a.lang {
	text-decoration:none;
	color:#becfe0;
	margin:3px;
	padding:0 2px;
}
#appLinks > a.appl:hover, #appLang > a.lang:hover {
	color: #FFF;
	border-bottom-color:#FFF;
}
#appLinks > a.selected, #appLang > a.selected {
	color: #FFF;
	font-weight:bold;
}
#appLang {
	position:absolute;top:12px;right:5px;
	font-size:12px;	color:#FFF;
}
.lang-flag { margin-left:6px; }

#footer {
	position:absolute; bottom:0;left:0px; right:0;
	height:28px;
	background-color:#cccccc;

	font-size:12px;
	color: #444;
}
#adminButton { position:relative; left:5px; top:9px; font-size:12pt; line-height:1px; color:#333; cursor:pointer; margin-right:5px; }
#copyright { position:relative; left:5px; top:8px; }
#userInfo { position:absolute; right:20px; top:6px; font-size:10pt;}
#userName,#userRole,#groupName { margin-left:5px; margin-right:25px; font-weight:bold;color:#333; }

#loginButton {
	position:absolute;right:3px;bottom:1px;
	cursor:pointer;
	color:transparent;
	text-indent:-30px;
	width: 24px; height: 24px;
}
.Login { background-image: url(images/login24.png); }
.Logout { background-image: url(images/logout24.png); }

#rolesBtn {position:absolute;right:-15px;bottom:-1px;}
#htmlViewer {height:100%;overflow-y:auto;}

#shader { background-color: #2b333c !important; }
#shaderLoader { background-image:url(images/loader.gif); width:90px;height:92px; margin:20% auto 0 auto; }
#LoginWindow { margin:80px auto 0 auto; width:520px; }
#LoginWindow > .axdlg-body { padding:5px 10px 10px 10px; }

#appEvents { position:absolute; top:12px; left:50%; color:#cce7f3; cursor:default; color:#fff; z-index:1; }

@media screen and (max-width: 1200px) {
	#appMenu > .appm { width:70px; text-align:center; padding-top:10px; }
	a.appm > .ax-ico { font-size:22pt;margin-left:11px; }
	span.appmt { display:none; }
}

@media screen and (max-width: 736px) {
	#appMenu { height: 50px; left:44px; }
	#content { top: 90px; }
	#sideBarBtn {
		display:block;

		position:absolute;top:54px;left:10px;
		z-index:1;
		color:#00204f;
		font-size:18pt;
		font-family:'fontello';font-weight:normal;font-style:normal;cursor:pointer;
	}
	#sideBarBtn:hover { color:#2196f3; }

	#sideBarBtn::before { content:'\f233'; }

	#appMenu > .appm { width:38px; text-align:center; padding:8px 4px; }
	a.appm > .ax-ico { font-size:12pt;margin-left:6px; }
	span.appmt { display:none; }
	#appMenu > a.selected, #appMenu > a.appm:hover { padding-bottom: 5px; }
	.appm > .ax-ico { margin-bottom: 0px; }

}