@import url("awesome-bootstrap-checkbox.css");
@import url("font-awesome.min.css");

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px;  /* Margin bottom by footer height */
  background-color: #f3f3f4;
  padding-top:50px;
  color: #676a6c;
}
a{color:#333; outline: none;}
a:hover{ color: #e1001a;}
a:focus, button:focus{outline: none; }
::selection{
background:transparent;
}
::-moz-selection{
background:transparent;
}
.icon-chevron-up{background: transparent url('../img/icons/up-ico.png') center center no-repeat;height: 15px;display: flex;}
.icon-chevron-down{background: transparent url('../img/icons/down-ico.png') center center no-repeat;height: 15px;display: flex;}
/* Toggle Styles */
#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled {
    padding-left: 250px;
}

#logo_about { width:250px; height:160px; background: transparent url('../img/cube_158w.png') center center no-repeat;}
.table-myfont { background-color: #fff; font-size: 8px;}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td
 {
  vertical-align: middle;

}
.navbar {background-color: #e1001a; border-color: #e1001a;}
.navbar-brand {color:#eee !important;}
.navbar-brand > img {
  display: inline-block;
}
/*
.btn-primary,.btn-primary:focus {
  background-color: #ed5565;
  border-color: #ed5565;
  color: #fff;
}
.btn-primary:hover {
  background-color: #e1001a;
  border-color: #e1001a;
}*/
#navfoot li>a{padding: 10px 10px;}
.nav-pills > li.active > a:hover,.nav-pills > li.active > a, .nav-pills > li.active > a:focus{
  background-color: #e1001a;
  border-color: #e1001a;
}
.navbar-default .navbar-toggle {
  background-color: #ddd;
}
.modal-header{border-radius:6px 6px 0 0;}
.modal-success {
  background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
  background-image:      -o-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#c8e5bc));
  background-image:         linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
  background-repeat: repeat-x;
}
.modal-info {
  background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
  background-image:      -o-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#b9def0));
  background-image:         linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
  background-repeat: repeat-x;
}
.modal-warning {
  background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
  background-image:      -o-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#f8efc0));
  background-image:         linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
  background-repeat: repeat-x;
}
.modal-danger {
  background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
  background-image:      -o-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#e7c3c3));
  background-image:         linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
  background-repeat: repeat-x;
}

.pagination > li > a,
.pagination > li > span {
  color: #333;
  border: 1px solid #ddd;
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  color: #e1001a;
  background-color: #eee;
  border-color: #dd;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  background-color: #e1001a;
  border-color: #e1001a;
}
/*** Signin ***/
.form-signin {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
  margin-bottom: 10px;
}
.form-signin .checkbox {
  font-weight: normal;
}
.form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.signin #footer{
position:absolute;
bottom:0;
width:100%;
}

/*** Main page ***/
#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    height: -webkit-calc(100% - 50px);
    height: -moz-calc(100% - 50px);
    height: calc(100% - 50px);
    margin-left: -250px;
    overflow-y: auto;
    overflow-x:hidden;
    background: #333;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
    width: 250px;
}

#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px 15px 50px;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -250px;
}

#footer {
  z-index: 10;
  background-color:#c0c0c0; 
  padding: 5px 0;}
  
#footer .nav{
margin:0 auto; width:350px;
}

/* Sidebar Styles */
.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sidebar-nav li .glyphicon { text-indent: 0;}
.sidebar-nav li a.connect i {color:green;}
.sidebar-nav li a.noconnect i {color:red;}
/*
.sidebar-nav li a.connect:after,.sidebar-nav li a.noconnect:after { 
  content: "\e013";
  font-family:"Glyphicons Halflings";
  color:green;
  float:right;
  padding-right:5px;
}
.sidebar-nav li a.noconnect:after {  content: "\e014"; color:red;}*/

.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
}
.sidebar-nav li.sep{ border-bottom:1px dotted #bbb; margin:0 20px; width:90%;}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #bbb;
}

.sidebar-nav li.active a,.sidebar-nav li.active a:hover, .sidebar-nav li.active a:active,.sidebar-nav li a:focus {
    text-decoration: none;
    color: #fff;
    background: rgba(237,85,101,0.4);
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}
.sidebar-nav li.spanel a{line-height: 30px; padding-bottom:10px;}
.sidebar-nav li.spanel span{ position: absolute; font:10px italic; width:240px; height:15px; color:#999; margin-top:-15px; text-indent:40px; overflow: hidden}

.sidebar-nav > .sidebar-brand {
    height: 45px;
    line-height: 40px;
} 

.sidebar-nav > .sidebar-brand a {
    color: #bbb;
    text-align: right;
    padding-right:5px;
}

.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
}
@media(min-width: 768px) and (orientation: portrait) {
	.ios .table-myfont { font-size: 12px;}
	.navbar-toggle {display: block; }
	.ios .navbar .container {padding:0;}
	.ios .navbar-header {width:100%}
	.ios .sidebar-brand a {display: none;}
}

@media(min-width:769px) {
	/** Portrait or smartphone **/
	.navbar .container, #footer .container {width:100%;}
	#footer .nav{margin-left:250px}
    #wrapper {
        padding-left: 250px;
    }

    #wrapper.toggled {
        padding-left: 0;
    }
		
    #sidebar-wrapper {
        width: 250px;
    }
    .sidebar-nav > .sidebar-brand a {display:none;}

    #wrapper.toggled #sidebar-wrapper {
        width: 0;
    }

    #page-content-wrapper {
        padding: 20px;
        position: relative;
    }

    #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: 0;
    }

	/* show only single centred box */
	.box {
		margin: 20px auto;
		float: none;
	}	
	#logo_about { width:350px; height:350px; background: transparent url('../img/cube_320w.png') center center no-repeat;}
	.table-myfont { font-size: 12px;}
}

/* boxed container for a single zone or area for example */
.box {
	box-sizing: border-box;
	float: left;
	width: 280px;
	margin-right: 30px;
	margin-bottom: 30px;
	margin-top: 0;
	border-radius: 6px;
	/*border: 1px solid #e5e5e5; */
	box-shadow: 0 5px 4px rgba(0,0,0,.5);
	background-color:#fff;
	padding-bottom: 10px;
	text-align: center;
}

.box h1 {
	padding: 5px 10px 35px 10px;
	font-size: 20px;
	white-space:nowrap;
	line-height: 1.5em;
	color: #FFF;
	/* text-shadow: 2px 2px 0 rgba(0,0,0,0.3); */
	background-color: #0088cc;
	border-radius: 4px 4px 0 0;
	height: 20px;
	text-align: left;
	margin:0;
}
.box h1 i {font-style:normal;}

.box h2 {
	font-size: 20px;
	/*line-height: 55px;
	margin-top: -60px;*/
	margin-bottom: 16px;
	background-color:#fff;
	color: #999;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
}

/* specific sizing for buttons inside a box */
.box button {
	width: 65px;
	height: 60px;
	padding: 5px 0;
}

/* icon positions from css sprite for areas page */
.ba > .bi {	background-position: 0 0px; }
.bs > .bi { background-position: 0 -32px; }
.bo > .bi {	background-position: 0 -64px; }
.bc > .bi {	background-position: 0 -96px; }

/* zones page */
.bb > .bi {	background-position: 0 -128px; }


.bi {
	height: 32px;
	width:32px;
	margin:0 auto;
	background-image: url(../img/icon32.png);	
	background-repeat: no-repeat;
}

.box button,.box input[type="submit"],.box input[type="button"] {
	padding: 5px 10px;
	box-sizing: border-box;
	/*box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 -32px 3px 0px rgba(0,0,0,0.1);*/

	color: #fff;
	font-weight: bold;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);

	/*border: 1px solid ;
	border-radius: 4px;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);*/
	border:0;
	background: #999;
}

.box button:hover,.box input[type="submit"]:hover {
	cursor: pointer; 
}

.boxbutton:active,.box input[type="submit"]:active {
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 -32px 3px 0px rgba(0,0,0,0.1);
}

.bg-gry { background-color: #999 !important; }
.bg-grn { background-color: rgb(75,183,72) !important; }
.bg-red { background-color: rgb(228,59,53) !important; }
.bg-yel { background: rgb(252,210,8) !important; }
.bg-blu { background: #0088cc !important; }
.bg-org { background: rgb(255, 136, 0) !important; }

#evtdatepicker{ width:300px;}
#evtdatepicker input {background:#fff;}
.output > div{margin-bottom:10px;}
li.alt{background-color:rgb(240, 240, 240);}
ul[name="advisor_list"] p{margin-left:10px;}
.alarm-desc{  font-size: 16px; color: red;}
label.label-170 ,.label-170 label{width:170px;display:inline-block;}
label.label-120 ,.label-120 label{width:120px;display:inline-block;}
input.timepicker{width: 64px;margin: 0px 5px;text-align: center;}
input.datepicker{width:100px;margin:0px 5px;text-align: center;}
.input-style{
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.loading{ display:inline-block; background: transparent url('../img/ajax-loader.gif') center center no-repeat;  width: 36px; height: 36px;}
.loading-in-box-r{float:right}
.firefox .loading-in-box-r{float:right; margin-top:-36px;}