@charset "utf-8";
/* CSS Document */

@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap);

body { background: rgb(249,242,233); background: radial-gradient(circle, rgba(249,242,233,1) 0%, rgba(235,246,249,1) 49%); overflow: hidden; }
body { font-family: 'Poppins', Verdana, Geneva, sans-serif; font-size: 13px; padding: 20px; margin: 0; }

td { vertical-align: top; }
table.tdpad td { padding: 4px 0px 4px 0px; }
table.tdpad tr:hover { background: #efefef; }
table.tdbottom td { border-bottom: 1px solid #ddd; }

input,select,textarea { padding: 4px 10px 4px 10px; border: 1px solid #d8d8d8; 
	-moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -khtml-border-radius: 6px; }
option { border: none; }

hr { margin: 15px 0px 15px 0px; color: #e3e3e3; background-color: #e3e3e3; border: 0; height: 1px; }

ul { list-style: none; }
ul.regli li { border-bottom: 1px solid #ddd; padding: 5px 0px 5px 0px; }
ul.iconli li { float: left; text-align: center; margin: 10px; height: 130px; width: 80px; font-size: 12px; }
ul.nohe li { height: 70px; }
ul.iconli li:hover { color: #36C; cursor: pointer; }
ul#result li:hover { background: #f4f4f4; }

/*h1,h2,h3,.scada,#songtitle { font-family: 'Scada', Arial, Helvetica, sans-serif; }*/
h1 { font-weight: 700; padding-bottom: 4px; border-bottom: 1px solid #ddd; margin-bottom: 15px; }
h2 { padding-bottom: 4px; border-bottom: 1px solid #ddd; margin-bottom: 5px; }

a { color: #196198; text-decoration: none; }
a:hover { color: #c03a2c; }

.left { float: left; }
.right { float: right; }
.tleft { text-align: left; }
.tright { text-align: right; }
.tcenter { text-align: center; }

#header { margin-bottom: 15px; }
#sidebar { width: 100px; }
#mainbar { margin-left: 145px; }
#footer { border-top: 1px solid #ccc; color: #999; padding-left: 145px; }
#desktop { color: #333; }
#songtitle { position: absolute; text-transform: uppercase; opacity: 0.4; font-size: 60px; text-align: center; }

.w500 { width: 500px; }
.w350 { width: 350px; }
.w250 { width: 250px; }
.w150 { width: 150px; }
.w100 { width: 100px; }
.w50 { width: 50px; }

.green { color: #249a38; }
.mgreen { color: #38b04c; }
.red { color: #900; }
.grey { color: #999; }
.orange { color: #F93; }

.bold { font-weight: bold; }
.btext { font-size: 22px; }
.mtext { font-size: 16px; }
.smtext { font-size: 11px; }

.marr { margin-right: 15px; }
.marl { margin-left: 15px; }

.winbox { position: absolute; background: none; z-index: 5; }
.winbox h2 { padding: 10px 15px 10px 15px; color: #fff; background: #1999e7 url(/img/bg-grad.png) right repeat-y; border: none; cursor: move; 
	overflow: hidden; font-size: 14px;  margin-bottom: 0px; margin-top: 2px; 
	-moz-border-top-left-radius: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -khtml-border-top-left-radius: 4px; 
	-moz-border-top-right-radius: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -khtml-border-top-right-radius: 4px; }
.winboxin { overflow: auto; }
.winbox strong.green { cursor: help; }
.winbox .padbox { 
	-moz-border-bottom-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -khtml-border-bottom-left-radius: 4px; 
	-moz-border-bottom-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; -khtml-border-bottom-right-radius: 4px; }
.winboxbtn { padding: 3px 3px 1px 3px; background: #fff; margin-right: 10px; position: absolute; top: 0px; right: 0px; 
	-moz-border-bottom-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -khtml-border-bottom-left-radius: 4px; 
	-moz-border-bottom-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; -khtml-border-bottom-right-radius: 4px; }
.padbox { padding: 15px; }
.spadbt { padding: 5px 0px 5px 0px; }

.bgwhite { background: #fff; }
.bggreen { background: #eaffe7; }

.clr { clear: both; }
.block { display: block; }
.pointer { cursor: pointer; }
.loading { cursor: wait; }
.loadingbar { background:url(/img/loading_bar.gif) center no-repeat; }
.shadow { -moz-box-shadow: 0px 0px 7px #b8c9cd; -webkit-box-shadow: 0px 0px 7px #b8c9cd; box-shadow: 0px 0px 7px #b8c9cd; }

.ui-widget-content { border: none; }

#loading {
	font-size: 26px;
	position: absolute;
	top: 50%;
	width: 100%;
	margin:-20px;
}
#debugCtx {
	position: absolute;
	top:0px;
	left:0px;
	xwidth: 800px;
	xheight: 600px;
}