.header{
	height: 57px;
	border-bottom: 2px solid #ccc;
}
.admin-logo{
	max-height:55px;
}
.auth-user-action{
	margin-top: 15px;
}

.bar{
	padding-top : 4px;
	padding-bottom : 4px;
}
.bar-primary{
	background-color: #428bca;
	
}
.bar-secondary{
	background-color: #ecf0f5;
}
.bar-third{
	background-color: #F8F8F8; 
}
.bar-title{
	font-size: 1.2em;
	margin-top : 2px !important;
	margin-bottom : 0px !important;
	font-weight: bold;
	color: #fff;
}
.bar-top{
	min-height: 40px !important;
}
.search-box{
	min-height: 32px;
}
.btn-left-margin{
	margin-left: 10px;
}

.left-bar{
	background-color: #e6e6e6;
	border-right : 5px solid #fff;
}
.nav-left a {
	border-radius : 0px !important;
}
.left-bar-menu-ul{
	padding:0px;
	
}

.space{
	padding: 2px;
}

.left-bar-menu-ul li{
	list-style-type: none;
	display: block;
	padding : 4px 0px;
	
}
.panel-body-custom{
	padding-top: 2px;
	padding-bottom: 2px;
}
.dashboard-link, .dashboard-link:hover{
	margin: 5px;
	font-size: 18px;
	color: #fff;
	text-decoration: none;
}
/*dashboard*/
.report-title{
	margin: 5px;
	font-size: 18px;
}
.report-details{
	border: 1px solid #ccc;
	margin-bottom:  10px;
	padding: 5px;
}
/*roles*/
.permission_module{
	display:block;
	float:left;
}
.list li{
	margin-left: 30px;
	list-style-type: none;
}

.list input{
	margin-left : 0px !important;
}

.login-form-holder{
	width : 40%;
	margin: 20px auto;
}

.alert{
	border-radius : 0px !important;
	margin-bottom : 0px !important;
}

input[type="file"]{
	padding-top:0px;
}


.error-message{
	color: red;
}

.form-section-heading{
	border-bottom : 1px solid #5bc0de;
	padding: 5px 5px 5px 0px;
	font-weight: bold;
	margin-bottom : 5px;
}

.attr{
	border-bottom : 1px solid #ccc;
	margin-bottom : 5px;
}

.attr_value_holder{
	
}

.category-brand-box{
	height: 200px;
	overflow: auto;
}

.padding-bottom-10{
	padding-bottom: 10px;
}

.individual-image{
	margin-bottom : 10px;
}
.upload-image-input-box{
	margin-bottom:10px;
}

.upload-image-thumbnail{
	max-width: 200px;
	max-height: 150px;
}

.row-divider-upload{
	clear: both !important;
}

.action{
	min-width : 200px !important;
	
}

.button-on{
	color: black;
	background-color: red;
	width: 15px;
	height: 10px;
	margin-right: 10px;

}

.button-off{
	color: black;
	background-color: black;
	width: 15px;
	height: 10px;
	margin-right: 10px;

}


.relay-on{
	height: 10px !important;
	width: 10px !important;
	border-radius : 100%;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 25%;
	line-height: 7px;
	background-color: #3169c4;  /*blue*/
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);


}

.relay-on:hover:before{
    display:block;
	position:absolute;
	color: black;
	width:50px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: center;
	padding-top: 8px;
	z-index:1;
	content: "OPEN";
}


.relay-off{
	height: 10px !important;
	width: 10px !important;
	border-radius : 100%;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 25%;
	line-height: 7px;
	background-color: #4dd646;  /*green*/
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.relay-off:hover:before{
	display:block;
	position:absolute;
	color: black;
	width:50px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: center;
	padding-top: 8px;
	z-index:1;
    content: "CLOSE";  
}


.relay-un{
	height: 10px !important;
	width: 10px !important;
	border-radius : 100%;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 25%;
	line-height: 7px;
	background-color: red;  /*#4FB842*/
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.relay-un:hover:before{
	display:block;
	position:absolute;
	color: black;
	width:85px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: center;
	padding-top: 8px;
	z-index:1;
    content: "UNTHORIZED";
}



.site-active{
	height: 10px !important;
	width: 10px !important;
	border-radius : 100%;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 25%;
	line-height: 7px;
	background-color: #4dd646;  /*#4FB842*/
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.site-active:hover:before{
	display:block;
	position:absolute;
	color: black;
	width:45px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: center;
	padding-top: 8px;
	z-index:1;
    content: "LIVE";
}


.site-dead{
	height: 10px !important;
	width: 10px !important;
	border-radius : 100%;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 25%;
	line-height: 7px;
	background-color: red;  /*#4FB842*/
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.site-dead:hover:before{
	display:block;
	position:absolute;
	color: black;
	width:45px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: center;
	padding-top: 8px;
	z-index:1;
    content: "DEAD";
}


.alarm_one_active{
	height: 10px !important;
	width: 10px !important;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: red;  /*#4FB842*/
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.alarm_one_active:hover:before{
	display:block;
	position:absolute;
	color: black;
	width:30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: center;
	padding-top: 8px;
	z-index:1;
    content: "ON";
}

.alarm_one_deactive{
	height: 10px !important;
	width: 10px !important;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: #4dd646;  /*#4FB842*/
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.alarm_one_deactive:hover:before{
	display:block;
	position:absolute;
	color: black;
	width:30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: center;
	padding-top: 8px;
	z-index:1;
    content: "OFF";
}


.alarm_two_active{
	height: 10px !important;
	width: 10px !important;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: red;  /*#4FB842*/
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.alarm_two_active:hover:before{
	display:block;
	position:absolute;
	color: black;
	width:30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: center;
	padding-top: 8px;
	z-index:1;
    content: "ON";
}

.alarm_two_deactive{
	height: 10px !important;
	width: 10px !important;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: #4dd646;  /*#4FB842*/
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.alarm_two_deactive:hover:before{
	display:block;
	position:absolute;
	color: black;
	width:30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: center;
	padding-top: 8px;
	z-index:1;
    content: "OFF";
}

.alarm_three_active{
	height: 10px !important;
	width: 10px !important;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: red;  /*#4FB842*/
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.alarm_three_active:hover:before{
	display:block;
	position:absolute;
	color: black;
	width:30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: center;
	padding-top: 8px;
	z-index:1;
    content: "ON";
}


.alarm_three_deactive{
	height: 10px !important;
	width: 10px !important;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: #4dd646;  /*#4FB842*/
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.alarm_three_deactive:hover:before{
	display:block;
	position:absolute;
	color: black;
	width:30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: center;
	padding-top: 8px;
	z-index:1;
    content: "OFF";
}


.alarm_four_active{
	height: 10px !important;
	width: 10px !important;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: red;  /*#4FB842*/
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.alarm_four_active:hover:before{
	display:block;
	position:absolute;
	color: black;
	width:30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: center;
	padding-top: 8px;
	z-index:1;
    content: "ON";
}


.alarm_four_deactive{
	height: 10px !important;
	width: 10px !important;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: #4dd646;  /*#4FB842*/
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.alarm_four_deactive:hover:before{
	display:block;
	position:absolute;
	color: black;
	width:30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: center;
	padding-top: 8px;
	z-index:1;
    content: "OFF";
}














.alarm_five_active{
	height: 10px !important;
	width: 10px !important;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: red;  /*#4FB842*/
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.alarm_five_active:hover:before{
	display:block;
	position:absolute;
	color: black;
	width:30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: center;
	padding-top: 8px;
	z-index:1;
    content: "ON";
}


.alarm_five_deactive{
	height: 10px !important;
	width: 10px !important;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: #4dd646;  /*#4FB842*/
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.alarm_five_deactive:hover:before{
	display:block;
	position:absolute;
	color: black;
	width:30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: center;
	padding-top: 8px;
	z-index:1;
    content: "OFF";
}

.alarm_six_active{
	height: 10px !important;
	width: 10px !important;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: red;  /*#4FB842*/
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.alarm_six_active:hover:before{
	display:block;
	position:absolute;
	color: black;
	width:30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: center;
	padding-top: 8px;
	z-index:1;
    content: "ON";
}


.alarm_six_deactive{
	height: 10px !important;
	width: 10px !important;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: #4dd646;  /*#4FB842*/
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.alarm_six_deactive:hover:before{
	display:block;
	position:absolute;
	color: black;
	width:30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: center;
	padding-top: 8px;
	z-index:1;
    content: "OFF";
}

.alarm_seven_active{
	height: 10px !important;
	width: 10px !important;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: red;  /*#4FB842*/
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.alarm_seven_active:hover:before{
	display:block;
	position:absolute;
	color: black;
	width:30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: center;
	padding-top: 8px;
	z-index:1;
    content: "ON";
}


.alarm_seven_deactive{
	height: 10px !important;
	width: 10px !important;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: #4dd646;  /*#4FB842*/
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.alarm_seven_deactive:hover:before{
	display:block;
	position:absolute;
	color: black;
	width:30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: center;
	padding-top: 8px;
	z-index:1;
    content: "OFF";
}

.alarm_eight_active{
	height: 10px !important;
	width: 10px !important;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: red;  /*#4FB842*/
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.alarm_eight_active:hover:before{
	display:block;
	position:absolute;
	color: black;
	width:30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: center;
	padding-top: 8px;
	z-index:1;
    content: "ON";
}


.alarm_eight_deactive{
	height: 10px !important;
	width: 10px !important;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: #4dd646;  /*#4FB842*/
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.alarm_eight_deactive:hover:before{
	display:block;
	position:absolute;
	color: black;
	width:30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: center;
	padding-top: 8px;
	z-index:1;
    content: "OFF";
}


/* Gen ON OFF */

.gen_off{
	height: 10px !important;
	width: 10px !important;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 25%;
	line-height: 7px;
	background-color: #3169c4;  /*#4FB842*/ 
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.gen_off:hover:before{
	display:block;
	position:absolute;
	color: black;
	width:55px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: center;
	padding-top: 8px;
	z-index:1;
    content: "Gen OFF";
}

.gen_on{
	height: 10px !important;
	width: 10px !important;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 25%;
	line-height: 7px;
	background-color: #4dd646;  /*#4FB842*/
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.gen_on:hover:before{
	display:block;
	position:absolute;
	color: black;
	width:55px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: center;
	padding-top: 8px;
	z-index:1;
    content: "Gen ON";
}
/* Gen ON OFF */ 


/* Mains ON OFF */
.mains_off{
	height: 10px !important;
	width: 10px !important;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 25%;
	line-height: 7px;
	background-color: #4dd646;  /*#4FB842*/
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.mains_off:hover:before{
	display:block;
	position:absolute;
	color: black;
	width:75px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: center;
	padding-top: 8px;
	z-index:1;
    content: "Mains ON"; 
}

.mains_on{
	height: 10px !important;
	width: 10px !important;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 25%;
	line-height: 7px;
	background-color: #3169c4;  /*#4FB842*/ 
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.mains_on:hover:before{
	display:block;
	position:absolute;
	color: black;
	width:75px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: center;
	padding-top: 8px;
	z-index:1;
    content: "Mains OFF";
}
/* Mains On OFF */

.reader-active{
	height: 10px !important;
	width: 10px !important;
	border-radius : 100%;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 25%;
	line-height: 7px;
	background-color: #4dd646;  /*#4FB842*/
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.reader-active:hover:before{
	display:block;
	position:absolute;
	color: black;
	width:60px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: center;
	padding-top: 8px;
	z-index:1;
    content: "ACTIVE";
}

.reader-fail{
	height: 10px !important;
	width: 10px !important;
	border-radius : 100%;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 25%;
	line-height: 7px;
	background-color: red;  /*#4FB842*/
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.reader-fail:hover:before{
	display:block;
	position:absolute;
	color: black;
	width:50px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: center;
	padding-top: 8px;
	z-index:1;
    content: "FAIL";
}

.successs{
	height: 10px !important;
	width: 10px !important;
	border-radius : 100%;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 25%;
	line-height: 7px;
	background-color: #4dd646;  /*#4FB842*/
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.successs:hover:before{
	display:block;
	position:absolute;
	color: black;
	width:60px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: center;
	padding-top: 8px;
	z-index:1;
    content: "Success";
}

.fail{
	height: 10px !important;
	width: 10px !important;
	border-radius : 100%;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 25%;
	line-height: 7px;
	background-color: red;  /*#4FB842*/
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.fail:hover:before{
	display:block;
	position:absolute;
	color: black;
	width:60px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: center;
	padding-top: 8px;
	z-index:1;
    content: "Fail";
}

.relay-default{
	height: 10px !important;
	width: 10px !important;
	border-radius : 25%;
	background-color: gray;
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.relay-success{
	height: 10px !important;
	width: 10px !important;
	border-radius : 25%;
	background-color: #4dd646;  /*#4FB842*/
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.relay-warning{
	height: 10px !important;
	width: 10px !important;
	border-radius : 25%;
	background-color: #F7C400;
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);

}

.relay-alart{
	height: 10px !important;
	width: 10px !important;
	border-radius : 25%;
	background-color: red;
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}



.spann{
    background:#F8F8F8;
    border: 3px solid #DFDFDF;
    color: #717171;
    font-size: 10px;
    height: 25px;
    line-height: 20px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    top: -25px;
    left:-10px;
    display:none;
    padding:0 10px;  
}
.spann:after{
    content:'';
    position:absolute;
    bottom:	-5px; 
    width:	5px;
    height:	5px;
    border-bottom:3px solid #dfdfdf;
    border-right:2px solid #dfdfdf;
    background:#f8f8f8;
    left:50%;
    margin-left:-10px;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    
}
.ppp{
    margin:0px;
    float:left;
    position:relative;
    cursor:pointer;  
}

.ppp:hover .spann{
    display:block;
}

.info{
    position:relative; /*this is the key*/
    color:#000;
    top:40px;
    left:10px;
    text-decoration:none;
    text-align:center;
}


.info span{display: none}


.info:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:-40px;
    width:8em;
    height:8px;
    border:5px solid #0cf;
    background-color:#cff; color:#000;
    text-align: center;
    padding:10px;
}

.info:hover span:after{ /*the span will display just on :hover state*/
    content:'';
    position:absolute;
    bottom:-10px;
    width:10px;
    height:10px;
    border-bottom:5px solid #0cf;
    border-right:5px solid #0cf;
    background:#cff;
    left:50%;
    margin-left:-5px;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}


.terminal{
	background: #4169E1;
	height: 120px;
	padding : 5px;
	text-align: center;
}

.command-box{
	border-radius : 0px;
	border : 1px solid #ccc;
}


@keyframes go-left-right {        /* give it a name: "go-left-right" */
	from { left: 0px; }             /* animate from left: 0px */
	to { left: calc(100% - 50px); } /* animate to left: 100%-50px */
}

.progress {
	animation: go-left-right 3s infinite alternate;
	position: relative;
	border: 2px solid green;
	width: 50px;
	height: 20px;
	background: lime;
}

.mains_on_panel{
	height: 10px !important;
	width: 10px !important;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: #4dd646;  /*#4FB842*/
	margin-right: 12px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.mains_on_panel:hover:before{
	display:block;
	position:absolute;
	color: black;
	width: 60px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: left;
	padding-top: 8px;
	z-index:1;
    content: "Grid ON";
}

.mains_off_panel{
	height: 10px !important;
	width: 10px !important;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: #1e75f7;  /*#4dd646*/ 
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.mains_off_panel:hover:before{
	display:block;
	position:absolute;
	color: black;
	width: 62px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: left;
	padding-top: 8px;
	z-index:1;
    content: "Grid OFF"; 
}

.gen_one_on_panel{
	height: 10px !important;
	width: 10px !important;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: #4dd646;  /*#4FB842*/
	margin-right: 12px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.gen_one_on_panel:hover:before{
	display:block;
	position:absolute;
	color: black;
	width: 60px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: left;
	padding-top: 8px;
	z-index:1;
    content: "Gen ON";
}

.gen_one_off_panel{
	height: 10px !important;
	width: 10px !important;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: #1e75f7;  /*#4dd646*/ 
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.gen_one_off_panel:hover:before{
	display:block;
	position:absolute;
	color: black;
	width: 62px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: left;
	padding-top: 8px;
	z-index:1;
    content: "Gen OFF"; 
}


.gen_two_on_panel{
	height: 10px !important;
	width: 10px !important;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: #4dd646;  /*#4FB842*/
	margin-right: 12px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.gen_two_on_panel:hover:before{
	display:block;
	position:absolute;
	color: black;
	width: 60px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: left;
	padding-top: 8px;
	z-index:1;
    content: "Gen ON";
}

.gen_two_off_panel{
	height: 10px !important;
	width: 10px !important;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: #1e75f7;  /*#4dd646*/ 
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.gen_two_off_panel:hover:before{
	display:block;
	position:absolute;
	color: black;
	width: 62px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: left;
	padding-top: 8px;
	z-index:1;
    content: "Gen OFF"; 
}

.sollar_on_panel{
	height: 10px !important;
	width: 10px !important;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: #4dd646;  /*#4FB842*/
	margin-right: 12px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.sollar_on_panel:hover:before{
	display:block;
	position:absolute;
	color: black;
	width: 60px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: left;
	padding-top: 8px;
	z-index:1;
    content: "Sollar ON";
}

.sollar_off_panel{
	height: 10px !important;
	width: 10px !important;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: #1e75f7;  /*#4dd646*/ 
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.sollar_off_panel:hover:before{
	display:block;
	position:absolute;
	color: black;
	width: 62px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: left;
	padding-top: 8px;
	z-index:1;
    content: "Sollar OFF"; 
}

.unknown_on_panel{
	height: 10px !important;
	width: 10px !important;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: #4dd646;  /*#4FB842*/
	margin-right: 12px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.unknown_on_panel:hover:before{
	display:block;
	position:absolute;
	color: black;
	width: 60px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: left;
	padding-top: 8px;
	z-index:1;
    content: "Un ON";
}

.unknown_off_panel{
	height: 10px !important;
	width: 10px !important;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: #1e75f7;  /*#4dd646*/ 
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.unknown_off_panel:hover:before{
	display:block;
	position:absolute;
	color: black;
	width: 62px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: left;
	padding-top: 8px;
	z-index:1;
    content: "Un OFF"; 
}

/* Alarm Panel*/

.alarm_one_on{
	height: 10px !important;
	width: 10px !important;
	border-radius : 100%;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: red;  /*#4dd646*/ 
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.alarm_one_on:hover:before{
	display:block;
	position:absolute;
	color: black;
	width: 30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: left;
	padding-top: 8px;
	z-index:1;
    content: "ON"; 
}

.alarm_one_off{
	height: 10px !important;
	width: 10px !important;
	border-radius : 100%;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: #4dd646;  /*#4FB842*/
	margin-right: 12px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.alarm_one_off:hover:before{
	display:block;
	position:absolute;
	color: black;
	width: 30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: left;
	padding-top: 8px;
	z-index:1;
    content: "OFF";
}

.alarm_two_on{
	height: 10px !important;
	width: 10px !important;
	border-radius : 100%;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: red;  /*#4dd646*/ 
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.alarm_two_on:hover:before{
	display:block;
	position:absolute;
	color: black;
	width: 30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: left;
	padding-top: 8px;
	z-index:1;
    content: "ON"; 
}

.alarm_two_off{
	height: 10px !important;
	width: 10px !important;
	border-radius : 100%;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: #4dd646;  /*#4FB842*/
	margin-right: 12px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.alarm_two_off:hover:before{
	display:block;
	position:absolute;
	color: black;
	width: 30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: left;
	padding-top: 8px;
	z-index:1;
    content: "OFF";
}

.alarm_three_on{
	height: 10px !important;
	width: 10px !important;
	border-radius : 100%;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: red;  /*#4dd646*/ 
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.alarm_three_on:hover:before{
	display:block;
	position:absolute;
	color: black;
	width: 30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: left;
	padding-top: 8px;
	z-index:1;
    content: "ON"; 
}

.alarm_three_off{
	height: 10px !important;
	width: 10px !important;
	border-radius : 100%;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: #4dd646;  /*#4FB842*/
	margin-right: 12px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.alarm_three_off:hover:before{
	display:block;
	position:absolute;
	color: black;
	width: 30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: left;
	padding-top: 8px;
	z-index:1;
    content: "OFF";
}

.alarm_four_on{
	height: 10px !important;
	width: 10px !important;
	border-radius : 100%;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: red;  /*#4dd646*/ 
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.alarm_four_on:hover:before{
	display:block;
	position:absolute;
	color: black;
	width: 30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: left;
	padding-top: 8px;
	z-index:1;
    content: "ON"; 
}

.alarm_four_off{
	height: 10px !important;
	width: 10px !important;
	border-radius : 100%;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: #4dd646;  /*#4FB842*/
	margin-right: 12px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.alarm_four_off:hover:before{
	display:block;
	position:absolute;
	color: black;
	width: 30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: left;
	padding-top: 8px;
	z-index:1;
    content: "OFF";
}


.alarm_five_on{
	height: 10px !important;
	width: 10px !important;
	border-radius : 100%;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: red;  /*#4dd646*/ 
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.alarm_five_on:hover:before{
	display:block;
	position:absolute;
	color: black;
	width: 30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: left;
	padding-top: 8px;
	z-index:1;
    content: "ON"; 
}

.alarm_five_off{
	height: 10px !important;
	width: 10px !important;
	border-radius : 100%;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: #4dd646;  /*#4FB842*/
	margin-right: 12px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.alarm_five_off:hover:before{
	display:block;
	position:absolute;
	color: black;
	width: 30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: left;
	padding-top: 8px;
	z-index:1;
    content: "OFF";
}

.alarm_six_on{
	height: 10px !important;
	width: 10px !important;
	border-radius : 100%;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: red;  /*#4dd646*/ 
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.alarm_six_on:hover:before{
	display:block;
	position:absolute;
	color: black;
	width: 30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: left;
	padding-top: 8px;
	z-index:1;
    content: "ON"; 
}

.alarm_six_off{
	height: 10px !important;
	width: 10px !important;
	border-radius : 100%;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: #4dd646;  /*#4FB842*/
	margin-right: 12px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.alarm_six_off:hover:before{
	display:block;
	position:absolute;
	color: black;
	width: 30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: left;
	padding-top: 8px;
	z-index:1;
    content: "OFF";
}

.alarm_seven_on{
	height: 10px !important;
	width: 10px !important;
	border-radius : 100%;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: red;  /*#4dd646*/ 
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.alarm_seven_on:hover:before{
	display:block;
	position:absolute;
	color: black;
	width: 30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: left;
	padding-top: 8px;
	z-index:1;
    content: "ON"; 
}

.alarm_seven_off{
	height: 10px !important;
	width: 10px !important;
	border-radius : 100%;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: #4dd646;  /*#4FB842*/
	margin-right: 12px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.alarm_seven_off:hover:before{
	display:block;
	position:absolute;
	color: black;
	width: 30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: left;
	padding-top: 8px;
	z-index:1;
    content: "OFF";
}

.alarm_eight_on{
	height: 10px !important;
	width: 10px !important;
	border-radius : 100%;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: red;  /*#4dd646*/ 
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.alarm_eight_on:hover:before{
	display:block;
	position:absolute;
	color: black;
	width: 30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: left;
	padding-top: 8px;
	z-index:1;
    content: "ON"; 
}

.alarm_eight_off{
	height: 10px !important;
	width: 10px !important;
	border-radius : 100%;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: #4dd646;  /*#4FB842*/
	margin-right: 12px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.alarm_eight_off:hover:before{
	display:block;
	position:absolute;
	color: black;
	width: 30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: left;
	padding-top: 8px;
	z-index:1;
    content: "OFF";
}

.alarm_disable{
	height: 10px !important;
	width: 10px !important;
	border-radius : 100%;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: #a8aaad;  /*#4FB842*/
	margin-right: 12px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.alarm_disable:hover:before{
	display:block;
	position:absolute;
	color: black;
	width: 50px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: left;
	padding-top: 8px;
	z-index:1;
    content: "Unused";
}




.relay_one_on{
	height: 10px !important;
	width: 10px !important;
	border-radius : 100%;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: red;  /*#4dd646*/ 
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.relay_one_on:hover:before{
	display:block;
	position:absolute;
	color: black;
	width: 30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: left;
	padding-top: 8px;
	z-index:1;
    content: "ON"; 
}

.relay_one_off{
	height: 10px !important;
	width: 10px !important;
	border-radius : 100%;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: #4dd646;  /*#4FB842*/
	margin-right: 12px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.relay_one_off:hover:before{
	display:block;
	position:absolute;
	color: black;
	width: 30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: left;
	padding-top: 8px;
	z-index:1;
    content: "OFF";
}



.relay_two_on{
	height: 10px !important;
	width: 10px !important;
	border-radius : 100%;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: red;  /*#4dd646*/ 
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.relay_two_on:hover:before{
	display:block;
	position:absolute;
	color: black;
	width: 30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: left;
	padding-top: 8px;
	z-index:1;
    content: "ON"; 
}

.relay_two_off{
	height: 10px !important;
	width: 10px !important;
	border-radius : 100%;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: #4dd646;  /*#4FB842*/
	margin-right: 12px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.relay_two_off:hover:before{
	display:block;
	position:absolute;
	color: black;
	width: 30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: left;
	padding-top: 8px;
	z-index:1;
    content: "OFF";
}


.relay_three_on{
	height: 10px !important;
	width: 10px !important;
	border-radius : 100%;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: red;  /*#4dd646*/ 
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.relay_three_on:hover:before{
	display:block;
	position:absolute;
	color: black;
	width: 30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: left;
	padding-top: 8px;
	z-index:1;
    content: "ON"; 
}

.relay_three_off{
	height: 10px !important;
	width: 10px !important;
	border-radius : 100%;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: #4dd646;  /*#4FB842*/
	margin-right: 12px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.relay_three_off:hover:before{
	display:block;
	position:absolute;
	color: black;
	width: 30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: left;
	padding-top: 8px;
	z-index:1;
    content: "OFF";
}


.relay_four_on{
	height: 10px !important;
	width: 10px !important;
	border-radius : 100%;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: red;  /*#4dd646*/ 
	margin-right: 10px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.relay_four_on:hover:before{
	display:block;
	position:absolute;
	color: black;
	width: 30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: left;
	padding-top: 8px;
	z-index:1;
    content: "On"; 
}

.relay_four_off{
	height: 10px !important;
	width: 10px !important;
	border-radius : 100%;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: #4dd646;  /*#4FB842*/
	margin-right: 12px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.relay_four_off:hover:before{
	display:block;
	position:absolute;
	color: black;
	width: 30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: left;
	padding-top: 8px;
	z-index:1;
    content: "Off";
}

.relay_disable{
	height: 10px !important;
	width: 10px !important;
	border-radius : 100%;
	outline-width: 150px;
	margin-right: 10px;
	border-radius : 50%;
	line-height: 7px;
	background-color: #a8aaad;  /*#4FB842*/
	margin-right: 12px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}

.relay_disable:hover:before{
	display:block;
	position:absolute;
	color: black;
	width: 50px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #fff9f2;
	text-align: left;
	padding-top: 8px;
	z-index:1;
    content: "Unused";
}



.white_circle:hover:before{
	display:block;
	position:absolute;
	color: black;
	width:30px;
	height:25px;
	font-size: 12px;
	border:thin solid black;
	background-color: #eff1f4;
	text-align: center;
	padding-top: 8px;
	z-index:1;
    content: "ON";
}