body {
	margin: 0px;
}

.disable
{
    font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
    color: #000000;
}

.button
{
	//border: 1px solid #003063;
	border: 0px solid #003063;
	font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
	//color: #003063;
	color: #000000;
	//color: #0a67ac;
	background-color: #FFFFFF;
	margin-right: 3px;
	margin-left: 36px;
	height: 18px;
}

.buttonstd
{
	border: 1px solid #003063;
    font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #003063;
	background-color: #FFFFFF;
	margin-right: 3px;
	margin-left: 3px;
	height: 18px;
}

.linkbutton
{
    font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FF0000;
	font-weight: normal;
	text-align: center;
	text-decoration: none;
}

.linkbuttonM
{
    font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FF0000;
	font-weight: normal;
	text-align: center;
	text-decoration: none;
}

.linkbuttonDisable
{
	color: #000000;
	text-align: center;
	text-decoration: none;
}

.linkbuttonEnable
{
	color: red;
	text-align: center;
	text-decoration: none;
}

.linkbuttonS
{
    font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FF0000;
	font-weight: normal;
	text-align: center;
	text-decoration: none;
}

.linkbuttonS a:link
{
    font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #FF0000;
	text-align: center;
	text-decoration: underline;
}

.formaction
{
    font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FF0000;
}

.formtitle
{
    font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
}

.formstd
{
    font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
}

.formmsg
{
    font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #FF0000;
}

.formtable
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	background-color: #009933;
}

.formtable1
{
	margin: 10px;
    font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	background-color: #003063;
}

.forminfotitle
{
    font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	background-color:#009933;
	vertical-align: top;
}

.forminfoinput
{
    font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #000000;
	background-color: #FFFFFF;
}

.formfieldtitle
{
    font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #FFFFFF;
	background-color: #009933;
	vertical-align: top;
	text-transform: uppercase;
    padding-left: 10px
}

.formfieldinput
{
    font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #000000;
	background-color: #FFFFFF;
}

.formfieldinput2
{
    font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #000000;
	background-color: #009933;
}

.comboStyle
{
    font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
}

.comboHidden
{
    font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	display: none;
}

.comboStyleS
{
    font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
}

.txtboxStyleN
{
    font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
}

.txtboxStyleS
{
    font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	text-transform: uppercase;
}

.txtboxStyleNumber
{
    font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	text-align: right;
}

.txtboxStyle
{
    font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	/*text-transform: uppercase;*/
}

.txtboxReadOnly
{
	border-style: none;
	border-color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
}

.txtboxLabel
{
	border-style: none;
	border-color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	color: #FF0000;	
}

.lvGridStyle
{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
	border-style: solid;
	border-width: 5px;
	border-color: #5c5d60;
	//border-color: #000080;
    border-collapse: collapse;
}

.lvGridStyle2
{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
	border-style: solid;
	border-width: 1px;
	border-color: #FFFFFF;
    border-collapse: collapse;
}

.lvGridHeaderStyle
{
	border-style: solid;
	border-width: 5px;
	border-color: #5c5d60;
	//border-color: #000080;
    font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #FFFFFF;
	background-color: #0a67ac;
	vertical-align: middle;	
	text-transform: uppercase;
}

.lvGridRowStyle
{
	border-style: solid;
	border-width: 5px;
	border-color: #5c5d60;
	//border-color: #000080;
	font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
	font-weight: normal;
	color: #000000;
	background-color: #FFFFFF;
}

.lvGridAltRowStyle
{
	border-style: solid;
	border-width: 5px;
	border-color: #5c5d60;
	//border-color: #000080;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
	font-weight: normal;
	color: #000000;
	background-color: #d2ecfb;	
	//background-color: #D3D3D3;	
}

.lvGridAlt2RowStyle
{
	border-style: solid;
	border-width: 5px;
	border-color: #5c5d60;
	//border-color: #000080;
    font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #000000;
	
	background-color: #fffdd0;	
	background-color: #fcf4a3;	
	//background-color: #f7d61b;	
}


.GridStyle
{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
	border-style: solid;
	border-width: 1px;
	border-color: #000080;
    border-collapse: collapse;
}

.GridHeaderStyle
{
	border-style: solid;
	border-width: 1px;
	border-color: #000080;
    font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #FFFFFF;
	background-color: #009933;
	vertical-align: middle;	
	text-transform: uppercase;
}

.GridRowStyle
{
	border-style: solid;
	border-width: 1px;
	border-color: #000080;
	font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
	font-weight: normal;
	color: #000000;
	background-color: #FFFFFF;
}

.GridAltRowStyle
{
	border-style: solid;
	border-width: 1px;
	border-color: #000080;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
	font-weight: normal;
	color: #000000;
	background-color: #D3D3D3;	
}

.GridAlt2RowStyle
{
	border-style: solid;
	border-width: 1px;
	border-color: #000080;
    font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #000000;
	
	background-color: #fffdd0;	
	background-color: #fcf4a3;	
	//background-color: #f7d61b;	
}

.Toolbar
{
	//border: 1px solid #FFF5DF;
	border: 1px solid #FFFFFF;
	background-color: #FFFFFF;
	//background-color: #C0C0C0;
}

.forminfoN
{
	font-family: Verdana;
	font-size: 12px;
	font-weight: normal;
	background-color: #FFFFFF; 
	color: #000000;
}

.forminfoB
{
	font-family: Verdana;
	font-size: 12px;
	font-weight: bold;
	background-color: #FFFFFF; 
	color: #000000;
}

.forminfo
{
	font-family: Verdana;
	font-size: 12px;
	font-weight: bold;
	background-color: #FFFFFF; 
	color: #990000;
}

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.loginbox {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  -webkit-transform: translate(-100%, -50%);
  transform: translate(-100%, -50%);
}

.maintitle
{
    font-family: Arial, Helvetica, sans-serif;
	font-size: 36px;
	/*font-weight: bold;*/
	color: #FFFFFF;
}

.mainsubtitle
{
    font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #FFFFFF;
}

.mainformtitle
{
    font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
}

.mainformerror
{
    font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
}

.loginbutton
{
	border: 1px solid #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #0a67ac;
	background-color: #FFFFFF;
	margin-right: 3px;
	margin-left: 3px;
	margin-top: 10px;
	margin-bottom: 10px;
	height: 25px;
}

.mainbutton
{
	border: 1px solid #003063;
	font-family: verdana;
	font-size: 14px;
	font-weight: bold;
	color: #292c84;
	background-color: #FFFFFF;
	margin-right: 3px;
	margin-left: 3px;
	margin-top: 10px;
	margin-bottom: 10px;
	height: 25px;
}

.errormsg
{
    font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	color: #FF0000;
	background-color: #FFFFFF;
}

.footer {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    margin: 0 auto;
    padding-top: 64px;
    width: 100%;
}


.footer2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0 auto;
    padding-top: 64px;
    width: 100%;
    color: #FFFFFF;
}

.css-label {
    color: #FFFFFF;
}

.modalPopup {
	background-color:#fff;
	border:solid 3px #ccc;
	padding:5px;
}

.modalBackground 
{
    position:fixed;
    top:0;
    left:0;
    background:rgba(0,0,0,0.6);
    z-index:5;
    width:100%;
    height:100%;
    display:none;
}

.modalContent {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* default layout */
.ajax__tab_default .ajax__tab_header {white-space:normal !important}
.ajax__tab_default .ajax__tab_outer {display:-moz-inline-box;display:inline-block}
.ajax__tab_default .ajax__tab_inner {display:-moz-inline-box;display:inline-block}
.ajax__tab_default .ajax__tab_tab {overflow:hidden;text-align:center;display:-moz-inline-box;display:inline-block}

/* xp theme */
.ajax__tab_xp .ajax__tab_header {font-family:verdana,tahoma,helvetica;font-size:11px;background:url(tab-line.gif) repeat-x bottom;}
.ajax__tab_xp .ajax__tab_outer {padding-right:4px;background:url(tab-right.gif) no-repeat right;height:21px;}
.ajax__tab_xp .ajax__tab_inner {padding-left:3px;background:url(tab-left.gif) no-repeat;}
.ajax__tab_xp .ajax__tab_tab {height:13px;padding:4px;margin:0px;background:url(tab.gif) repeat-x;}
.ajax__tab_xp .ajax__tab_hover .ajax__tab_outer {cursor:pointer;background:url(tab-hover-right.gif) no-repeat right;}
.ajax__tab_xp .ajax__tab_hover .ajax__tab_inner {cursor:pointer;background:url(tab-hover-left.gif) no-repeat;}
.ajax__tab_xp .ajax__tab_hover .ajax__tab_tab {cursor:pointer;background:url(tab-hover.gif) repeat-x;}
.ajax__tab_xp .ajax__tab_active .ajax__tab_outer {background:url(tab-active-right.gif) no-repeat right;}
.ajax__tab_xp .ajax__tab_active .ajax__tab_inner {background:url(tab-active-left.gif) no-repeat;}
.ajax__tab_xp .ajax__tab_active .ajax__tab_tab {background:url(tab-active.gif) repeat-x;}
.ajax__tab_xp .ajax__tab_disabled { color: #A0A0A0;}
.ajax__tab_xp .ajax__tab_body {font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid #999999;border-top:0;padding:8px;background-color:#ffffff;}

/* scrolling */
.ajax__scroll_both {overflow:scroll}
.ajax__scroll_auto {overflow:auto}

/* plain theme */
.ajax__tab_plain .ajax__tab_outer {text-align: center; vertical-align: middle; border:2px solid #999999;}
.ajax__tab_plain .ajax__tab_inner {text-align: center; vertical-align: middle; }
.ajax__tab_plain .ajax__tab_body {text-align: center; vertical-align: middle;}
.ajax__tab_plain .ajax__tab_header {text-align: center; vertical-align: middle;}
.ajax__tab_plain .ajax__tab_active .ajax__tab_outer {background:#FFFFE1;}

#menu {background-color:#4F86BC; border:solid 1px #A5C8E8;} 

.PanelPopUp
{
	border-style: none;
	width: 800px;
	height: 200px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -200px; 
	margin-left: -400px; 
}

/* For Google Map */
/* map */
#mapCanvasFull{ 
    width: 100%; height: 500px; 
}


#mapCanvas{ 
    width: 1024px; height: 500px; 
}

#mapCanvasSmall{ 
    width: 512px; height: 400px; 
}

#mapCanvas90{ 
    width: 500px; height: 1024px; 
    transform: rotate(90deg);
    /*Firefox*/
    -moz-transform: rotate(90deg);
    /*Microsoft Internet Explorer*/
    -ms-transform: rotate(90deg);
    /*Chrome, Safari*/
    -webkit-transform: rotate(90deg);
    /*Opera*/
    -o-transform: rotate(90deg);
}

#mapCanvasMobile{ width: 100%; height: 200px; }
#infoPanel { margin-left: 10px; }
#infoPanel div { margin-bottom: 5px; }

/* NavBar */
.navbar {
    overflow: hidden;   
    background-color: #333;
    font-family: Arial,Helvetica, sans-serif;
    text-transform: uppercase;
}

.navbar a {
    float: left;
    font-size: 12px;
    color: white;
    text-align: center;
    padding: 10px 12px;
    text-decoration: none;
}

.login {
    float: right;
    font-size: 12px;
    color: red;
    text-align: center;
    padding: 10px 12px;
    text-decoration: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 12px;    
    border: none;
    outline: none;
    color: white;
    padding: 10px 12px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
    text-transform: uppercase;
}

.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 12px 0px rgba(0,0,0,0.2);
    z-index: 2;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 10px 12px;
    text-decoration: none;
    display: block;
    text-align: left;
    z-index: 2;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.dropdown:hover .dropdown-content {
    display: block;
}

//input:-webkit-autofill, input:-webkit-autofill:focus {
//    -webkit-box-shadow: 0 0 0 1000px white inset;
//}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
input:-webkit-autofill, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 30px #FFFFFF inset;
  //-webkit-box-shadow: 0 1px 0 0 #26a69a, inset 0 0 0px 9999px white;
  //-webkit-box-shadow: 0 1px 0 0 #FFFFFF, inset 0 0 0px 9999px white;
}

input[type=checkbox].css-checkbox {
							position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
						}

input[type=checkbox].css-checkbox + label.css-label {
        					padding-left:30px;
							height:16px; 
							display:inline-block;
							line-height:16px;
							background-repeat:no-repeat;
							background-position: 0 0;
							font-size:16px;
							vertical-align:middle;
							cursor:pointer;

						}

input[type=checkbox].css-checkbox:checked + label.css-label {
						background-position: 0 -16px;
}

label.css-label {
				background-image:url(https://www.iotivities.com/HRC/images/csscbg16.png);
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}