/*@font-face{
 src: url('./fonts/Codystar/Codystar-Regular.ttf');
 font-family: 'Codystar', cursive;
}*/

html, body {
	min-width:600px;height: 100%; width: 100%; margin: 0;padding:0; font-family:verdana;font-size:14px;
	/*zoom: 100%;*/
    -moz-transform: scale(1000/100);
    -webkit-transform: scale(1000/100);
    transform: scale(1000/100);
}


@media only screen and (max-width: 760px)  {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		/*display: block; */
		font-size:10px;
	}
}


/* Top Navigation Menus Start */
#container {
  margin: 0 auto;
  max-width: 890px;
}

p { text-align: center; }
 .toggle, [id^=drop] {
 display: none;
}

nav {
  margin: 0;
  padding: 0;
  background-color: #5A6DB1;
}

/*#logo {
  display: block;
  padding: 0 30px;
  float: left;
  font-size: 20px;
  line-height: 60px;
}*/

nav:after {
  content: "";
  display: table;
  clear: both;
  
}

nav ul {
  float: right;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  
}

nav ul li {
  margin: 0px;
  display: inline-block;
  float:left;
  background-color: #5A6DB1;
 
}

nav a {
  display: block;
  padding: 0 20px;
  color: #b0b0b0;
  font-size: 20px;
  line-height: 60px;
  text-decoration: none;
  
}

nav ul li ul li:hover { background: #cccccc; color:#fff;}

nav a:hover { background-color: #cccccc;  color:#fff;}


nav ul ul {
  display: none;
  position: absolute;
  top: 60px;
}

nav ul li:hover > ul { display: inherit; }

nav ul ul li {
  width: 370px;
  float: none;
  display: list-item;
  position: relative;
  /*border:1px solid #ff0000;*/
  padding:0px;
}

nav ul ul ul li {
  position: relative;
  top: -60px;
  left: 170px;
}

li > a:after { content: ''; }

li > a:only-child:after { content: ''; }


/* Media Queries
--------------------------------------------- */

@media all and (max-width : 768px) {

#logo {
  display: block;
  padding: 0;
  width: 10%;
  text-align: left;
  float: none;
}

nav { margin: 0; }

.toggle + a,
 .menu { display: none; }

.toggle {
  display: block;
  background-color: #5A6DB1;
  padding: 0 20px;
  color: #FFF;
  font-size: 20px;
  line-height: 60px;
  text-decoration: none;
  border: none;
}

.toggle:hover { background-color: #000000; }

[id^=drop]:checked + ul { display: block; }

nav ul li {
  display: block;
  width: 100%;
}

nav ul ul .toggle,
 nav ul ul a { padding: 0 40px; }

nav ul ul ul a { padding: 0 80px; }

nav a:hover,
 nav ul ul ul a { background-color: #000000; }

nav ul li ul li .toggle,
 nav ul ul a { background-color: #212121; }

nav ul ul {
  float: none;
  position: static;
  color: #ffffff;
}

nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; }

nav ul ul li {
  display: block;
  width: 100%;
}

nav ul ul ul li { position: static;

}
}

@media all and (max-width : 330px) {

nav ul li {
  display: block;
  width: 94%;
}

}

.activeTopNav{background-color: #ccc; color:#fff;}



/* Top Navigation Menus End */
.version{font-weight:bold;padding-left:20px;color:white;}

.footer{background-color:#5A6DB1;height:40px;font-weight:bold;padding:0px 5px 0px 5px;color:white;font-size:12px;margin-top: 20px;width:100%}

.liBottomBorder{border-bottom:1px solid #ccc}

.homePage{width:100%;font-weight:bold;font-size:25px;}

.livePage{width:100%;}

.routinePage{width:100%;font-size:25px;text-align:center;}
.routineTD{text-align:center;font-size:15px;}
/*.routineTD:hover{background:#cccccc;color:white;font-size:15px;}*/
.calendarPage{width:100%}
.emTD{background-color:#efefef;text-align:center;font-size:15px;}
/*.emTD:hover{background:red;color:white;font-size:15px;}*/

.frmAddElement{width:50%; padding-left:20px;}

.newElementPage{width:100%; padding-left:20px;text-align:center;}

.frmLabel{color:black;font-weight:normal;text-align:left;padding-left:5px}

.pageHeader{padding:5px; background-color:#efefef;font-weight:bold;font-size:20px;padding-left:5px;color:black;border:solid 1px #a9a9a9}

.tableHeader{background-color:gray;color:white;font-weight:bold; padding-left:4px;}

.listView{text-align:left;padding-left:5px;}

.title{font-weight:bold;}
/* Login Page Start */

.loginTable{background-color:#ccc;width:21%;}

.loginHead{font-weight:bold;font-size:22px;text-align:center;}

.loginLabel{font-weight:bold;padding-left:5px;}

/* Login Page End   */

.statisticsData{font-weight:bold}
.removeTopBorder{border-bottom:0px solid #fff}
.tableOuterBorder{border-left:1px solid #efefef; border-right:1px solid #efefef; border-bottom:1px solid #efefef}

/*
.editImg{}

.editImg:hover{}
*/
.event-list{width:100%;border:1px;}

.scrollMenus{border:1px solid #ff0000;scrollbar-base-color:#ffeaff;overflow-x: scroll;overflow-y: hidden;-ms-overflow-y: hidden;}

/*Modal Start*/


.modalDialog {
	
		position: fixed;
		font-family: Arial, Helvetica, sans-serif;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0,0,0,0.8);
		z-index: 99999;
		opacity:0;
		-webkit-transition: opacity 400ms ease-in;
		-moz-transition: opacity 400ms ease-in;
		transition: opacity 400ms ease-in;
		pointer-events: none;
	}

	.modalDialog:target {
		opacity:1;
		pointer-events: auto;
	}

	.modalDialog > div {
		width: 25%;
		height:67%;
		overflow-y:auto;
		position: relative;
		margin: 5% auto;
		padding: 5px 10px 5px 20px;
		border-radius: 10px;
		background: #fff;
		background: -moz-linear-gradient(#fff, #999);
		background: -webkit-linear-gradient(#fff, #999);
		background: -o-linear-gradient(#fff, #999);
		border:1px solid #ff0000;
	}

	.close {
		background: #000;
		color: #FFFFFF;
		line-height: 25px;
		position: absolute;
		right: 3px;
		text-align: center;
		top: 2px;
		width: 24px;
		text-decoration: none;
		font-weight: bold;
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px;
		-moz-box-shadow: 1px 1px 3px #000;
		-webkit-box-shadow: 1px 1px 3px #000;
		box-shadow: 1px 1px 3px #000;
	}

	.close:hover { background: #00d9ff; }
	
	.doneBtn {
		background: #000;
		color: #FFFFFF;
		text-align: center;
		text-decoration: none;
		font-weight: bold;
		box-shadow: 1px 1px 3px #000;
		padding:5px;
		text-decoration:none;
	}

	.doneBtn:hover { background: #00d9ff; text-decoration:none;}
	
.funkyradio div {
  clear: both;
  overflow: hidden;
}

.funkyradio label {
  border-radius: 5px;
  border: 1px solid #000;
  font-weight: normal;
}

.funkyradio input[type="checkbox"]:empty {
  display: none;
}

.funkyradio input[type="checkbox"]:empty ~ label {
  position: relative;
  line-height: 2.5em;
  text-indent: 2.75em;
  margin-top: 0em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.funkyradio input[type="checkbox"]:empty ~ label:before {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  content: '';
  -ms-user-select: none;
  width: 2.5em;
  background: #D1D3D4;
  border-radius: 3px 0 0 3px;
}


.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label {
  color: #337AB7;
}

.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label:before {
  content: '';
  text-indent: .9em;
  color: #000;
}

.funkyradio input[type="checkbox"]:checked ~ label {
  color: #337AB7;
}

.funkyradio input[type="checkbox"]:checked ~ label:before {
  content: '\2714';
  text-indent: .9em;
  color: #333;
  background-color: #ccc;
}

.funkyradio input[type="checkbox"]:focus ~ label:before {
  box-shadow: 0 0 0 3px #999;
}

.funkyradio-default input[type="checkbox"]:checked ~ label:before {
  color: #333;
  background-color: #ccc;
}

.funkyradio-primary input[type="checkbox"]:checked ~ label:before {
  color: #fff;
  background-color: #337ab7;
}

.funkyradio-success input[type="checkbox"]:checked ~ label:before {
  color: #fff;
  background-color: #5cb85c;
}

.funkyradio-danger input[type="checkbox"]:checked ~ label:before {
  color: #fff;
  background-color: #d9534f;
}

.funkyradio-warning input[type="checkbox"]:checked ~ label:before {
  color: #fff;
  background-color: #f0ad4e;
}

.funkyradio-info input[type="checkbox"]:checked ~ label:before {
  color: #fff;
  background-color: #5bc0de;
}	
	
/*Modal End*/

/* Calendar START */

table.calendar		{ border-left:1px solid #999;width:99% }
/*tr.calendar-row	{  }*/
td.calendar-day	{ mmin-height:80px; font-size:11px; position:relative; } * html div.calendar-day { height:80px; }
td.calendar-day:hover	{ background:#eceff5; }
td.calendar-day-np	{ background:#eee; mmin-height:80px;  font-size:11px;} * html div.calendar-day-np { height:80px; }
td.calendar-day-head { background:#ccc; font-weight:bold; text-align:center; width:120px; padding:5px; border-bottom:1px solid #999; border-top:1px solid #999; border-right:1px solid #999; }
div.day-number{ background:#999; padding:0px; color:#fff; font-weight:bold; float:right; margin:-4px -4px 0 0; width:20px; text-align:center;font-size:11px;}
/* shared */
td.calendar-day, td.calendar-day-np { width:120px; padding:5px; border-bottom:1px solid #999; border-right:1px solid #999; }
.tabActive{
		background-color:gray;
		color:white;
		font-weight:bold;
		inset 0px -1px 1px rgba(128,128,128,1), /*bottom internal shadow*/
		inset 0px 1px 1px rgba(128,128,128,1); /*top internal highlight*/
}



/* Calendar END*/


/* Year Calendar START */

table.ycalendar		{ border-left:1px solid #999;width:10px }
tr.ycalendar-row	{  }
td.ycalendar-day	{ font-size:11px; position:relative; } * html div.ycalendar-day { }
td.ycalendar-day:hover	{ background:#eceff5; }
td.ycalendar-day-np	{ background:#eee; font-size:11px;} * html div.ycalendar-day-np {}
td.ycalendar-day-head { background:#ccc; font-weight:bold; text-align:center; padding:5px; border-bottom:1px solid #999; border-top:1px solid #999; border-right:1px solid #999; }

div.yday-number		{ background:#999; padding:4px; color:#fff; font-weight:bold; float:right; margin:-5px -5px 0 0;  text-align:center; }
div.yday-number-prev{ border:0px solid #ff0000; color:black; padding:4px; font-weight:bold; float:right; margin:-5px -5px 0 0;  text-align:center; }
div.yday-number-next{ border:0px solid #ff0000; color:black; padding:4px; font-weight:bold; float:right; margin:-5px -5px 0 0;  text-align:center; }
/* shared */
td.ycalendar-day, td.ycalendar-day-np {padding:5px; border-bottom:1px solid #999; border-right:1px solid #999; }
/* Year Calendar END*/


.marquee {width: 100px;overflow: hidden;}
.holidays{color:#780000}

.activeCalButton{ background-color:#898483;border:0px;color:white; }
.viewFormat{color:black}
.viewFormatLink:hover{text-decoration:initial;}


/* AJAX Tool Tip START 
.TipContainer{
 margin: 0 auto;
 width: 30%;
}

.TipContent{
 border: 1px solid black;
 padding: 5px;
 margin-bottom: 5px;
}
.TipContent span{
 width: 250px;
}
.TipContent span:hover{
 cursor: pointer;
}
 AJAX Tool Tip END   */

 
 
/* Popup Start*/

.eventDetailsLabel{width:33%}

/* Popup End*/


/* File Upload START*/
.uploadButton
{
	position:absolute;z-index:2;top:0;left:0;filter: alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;background-color:transparent;color:transparent;
}



/* File Upload END*/

/* Pagination START */

.pageing
{
	float: right;
	margin: 0;
	padding: 0;
}
.pageing li
{
	list-style: none;
	display:inline-block;
	font-size:15px;
}
.pageing li a, .pageingCurrent
{
	padding: 5px 15px;
	display: block;
	padding: 5px;
	text-decoration: none;
	/*color: #8A8A8A;*/
}
.pageingCurrent
{
	padding: 1px 5px;
	font-weight:bold;
	color: #000;
	border:1px solid #000;
	background:#efefef;
}
.pageingButton
{
	padding: 5px 15px;
	text-decoration: none;
	background: #333;
	color: #F3F3F3;
	font-size: 13PX;
	border-radius: 2PX;
	margin: 0 4PX;
	display: block;
	float: left;
}

.pageingButton:hover
{
	padding: 5px 15px;
	text-decoration: none;
	background: #333;
	color: #ff0000;
	font-size: 13PX;
	border-radius: 2PX;
	margin: 0 4PX;
	display: block;
	float: left;
}

.hoverPage:hover{
	/*padding: 1px 5px;*/
	color:red;
	
}

/* Pagination END */

.deleteSched:hover{cursor:pointer}
.emptyRecord{color:#ff0000;background-color:white;border:none}
.errorMsg{color:#ff0000;background-color:white;}
.internalEventTable{background-color:#efefef;border:1px solid #ccc}
.advanceSettings{display:none;}


  /* Bootstrap Tooltip */
 .tooltip > .tooltip-inner {
      background-color: #5A6DB1; 
      color: black; 
      border: 1px solid black; 
      padding: 15px;
      font-size: 15px;
  }
  /* Tooltip on top */
 .tooltip.top > .tooltip-arrow {
      border-top: 5px solid black;
  }
  
  /* THREE STATE CHECKBOX START*/
  
  /* THREE STATE CHECKBOX END*/
 

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.largeIconView{background-color: #A9A9A9; color: white; font-weight:bold; padding-top:5px;text-align:center;cursor:pointer;}

.striped
{
	background-image: linear-gradient(45deg, #c0c0c0 25%, transparent 25%, transparent 50%, #c0c0c0 50%, #c0c0c0 75%, transparent 75%, transparent);background-size: 10px 10px;opacity:0.3;
} 


/* Text Blink Start */

@keyframes blink {  
    0% { color: black;  font-weight:bold;font-size:12px;padding:2px;border:0px solid #ccc}
    100% { color: red;  font-weight:bold;font-size:12px;padding:2px;border:0px solid #ccc}
}
@-webkit-keyframes blink {
    0% { color: black;  font-weight:bold;font-size:12px;padding:2px;border:0px solid #ccc}
    100% { color: red; font-weight:bold;font-size:12px;padding:2px;border:0px solid #ccc}
}
.blink {
    -webkit-animation: blink 0.5s linear infinite;
    -moz-animation: blink 0.5s linear infinite;
    -ms-animation: blink 0.5s linear infinite;
    -o-animation: blink 0.5s linear infinite;
    animation: blink 0.5s linear infinite;
} 

@keyframes blink2 {  
    0% { color: green;  font-weight:bold;font-size:12px;padding:2px;border:0px solid #ccc}
    100% { color: black;  font-weight:bold;font-size:12px;padding:2px;border:0px solid #ccc}
}
@-webkit-keyframes blink2 {
    0% { color: green;  font-weight:bold;font-size:12px;padding:2px;border:0px solid #ccc}
    100% { color: black; font-weight:bold;font-size:12px;padding:2px;border:0px solid #ccc}
}
.blink2 {
    -webkit-animation: blink2 0.5s linear infinite;
    -moz-animation: blink2 0.5s linear infinite;
    -ms-animation: blink2 0.5s linear infinite;
    -o-animation: blink2 0.5s linear infinite;
    animation: blink2 0.5s linear infinite;
} 

@keyframes blinkWarning {  
    0% { color: black;  font-weight:bold;font-size:25px;padding:2px;border:0px solid #ccc}
    100% { color: red;  font-weight:bold;font-size:25px;padding:2px;border:0px solid #ccc}
} 
@-webkit-keyframes blinkWarning {
    0% { color: black;  font-weight:bold;font-size:25px;padding:2px;border:0px solid #ccc}
    100% { color: red; font-weight:bold;font-size:25px;padding:2px;border:0px solid #ccc}
}
.blinkWarning {
    -webkit-animation: blinkWarning 0.75s linear infinite;
    -moz-animation: blinkWarning 0.75s linear infinite;
    -ms-animation: blinkWarning 0.75s linear infinite;
    -o-animation: blinkWarning 0.75s linear infinite;
    animation: blinkWarning 0.75s linear infinite;
}

/* Text Blink End*/

/* Bootstrap Popover Start */

.popover-title{ background: #A9A9A9; color: white; font-weight:bold}
.popover {max-width: 1000px;width: auto;}
.popover .arrow {visibility: hidden;}


/* Bootstrap Popover End */

.lgSmIconViewTitle
{background: #A9A9A9; color: white; font-weight:bold;padding:5px;cursor:pointer}

.viewElementDetails{cursor:pointer;}

.ui-autocomplete {
    max-height: 250px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    /* add padding to account for vertical scrollbar */
    padding-right: 20px;
}

.elementPopover, .showingPopover, .schedElementPopover, .viewElementDetails, .firmwareHistoryPopover{
	color:#5A6DB1;
	cursor:pointer;
}

.offline{
	color:#5A6DB1;
	cursor:pointer;
}

/* Switch button */
.btn-default.btn-on.active{background-color: #5BB75B;color: white;}
.btn-default.btn-off.active{background-color: #ccc;color: white;}

.viewOnly{
	display:none;
	pointer-events:none;
	
}

input.editableText{
	background: transparent;border:0;box-shadow: none;padding: 1px;
}

input.maintenanceEditText{
	background: transparent;border:0;box-shadow: none;padding: 1px;
}
input.maintenanceZone{
	background: transparent;border:0;box-shadow: none;padding: 1px;
}

.hideBulk{visibility:hidden;}
.bulkActionOverlayDiv{height:50px;display:none}
.hideElement{display:none}
.show_video_hover{    
	position: absolute; /* Sit on top of the page content */
    display:none;
	padding-left:8px;
	
    color:#fff;
	font-weight:bold;
    background-color: rgba(0,0,0,0.8); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
	width:290px;text-align:left;
	border:0px solid #ff0000;
	 
}

.video-list{background-color:#97a3ce;width:100%;cursor:pointer;padding:5px;border-bottom:1px solid #ccc;width:300px;color:#000;}
.video-list:hover{background-color:#ccc;color:white}

.videodropbtn { background-color: #808080; color: white; padding: 5px; font-size: 15px;  border: none; cursor: pointer; }
.videodropbtn:hover, .videodropbtn:focus { background-color: #5A6DB1; }

.dropdown-content {display: none;position: absolute;min-width: 100px;width:300px;right:0px;font-size:12px;z-index: 99; /* box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.2);z-index: 1; */ }

/*
//.dropdown { position: relative;display: inline-block;}
.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }
.dropdown-content a:hover {background-color: #ddd;}
.show {display:block;} 
.video-title-list{border-bottom:1px solid #5A6DB1;background-color:#efefef;width:100%;padding:5px;cursor:pointer;}
.video-title-list:hover{background-color:#ccc;}
.video-container{background-color:#efefef;}
*/
.liveeMHDisableIcon{display:none;}
.emptyRecordMsg{height:30px;color:#000000;font-size:17px;font-weight:normal;border:none}
.helpHeader{font-size:20px;font-weight:bold;text-decoration:underline}
.helpImageText{text-align:center;border:0px solid #ff0000;width:500px;font-weight:bold}
.helpAnchor{color:black;text-decoration:none}
.helpAnchor:hover {color:black;text-decoration:none}
.helpHrTag{border-color:#404040}

.siteName{font-weight:bold;color:#5A6DB1;text-align:left;}
 
.preClass{
	background:white;font-family:verdana;font-size:14px;
	overflow-x: auto;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

.sortLinks{
	color:white;
	font-weight:bold;
}

.disabledTopLink{display: block;padding: 0 20px;color:black;font-size: 20px;line-height: 60px;text-decoration: none;cursor:no-drop}
.disabledLink{cursor:no-drop}
.onlyScriptEvent{display:none}
input.volBoost{background: transparent;border:0;box-shadow: none;padding: 1px;}


/* MySection Checkbox START */

.switchMySec {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
}

.switchMySec input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.sliderMySec {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.sliderMySec:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .sliderMySec {
  background-color: #2196F3;
}

input:focus + .sliderMySec {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .sliderMySec:before {
  -webkit-transform: translateX(16px);
  -ms-transform: translateX(16px);
  transform: translateX(16px);
}

/* Rounded sliders */
.sliderMySec.roundMySec {
  border-radius: 14px;
}

.sliderMySec.roundMySec:before {
  border-radius: 50%;
}

/* MySection Checkbox END */

.mandatoryField{color:red}

.notApplicable{color:#c0c0c0;font-style:italic}
.indexContent{
	border:0px solid #ff0000;
	color:black;
	padding:5px;
	border-bottom:1px solid #ccc;
}

a.indexContentLink{
	scroll-margin-top:300px;
	position: relative;
	color:black;
}

.getSelectedElementDiv{
  clear:both;
  height:30px;
  cursor:pointer;
}

.getSelectedElementDiv:hover{
  clear:both;
  height:30px;
  cursor:pointer;
  background-color: #efefef;
}

.clientDivBtn{
  cursor:pointer;border:1px solid #D3D3D3;padding:5px;color:#23527C;
}

.clientDivBtn:hover,.clientDivBtn:active{
  cursor:pointer;border:1px solid #D3D3D3;padding:5px;color:#ffffff;background-color: #5A6DB1;
}

.clientDivBtnClicked{
  cursor:pointer;border:1px solid #D3D3D3;padding:5px;color:#ffffff;background-color: #5A6DB1;
}

.placeholderLookup:focus{outline:0}