body {
	background-color: #f8f9fa;
	font-family: 'Titillium Web', Helvetica, Arial, sans-serif;
}
/* to ensure accurate scaling of images */
img {
	max-width: 100%;
	height: auto;
}
a:hover {
	text-decoration: none;
}
.el-header-bar {
	background-color: white;
	height: 72px;
}
.el-header-shadow {
	background-image: url("../images/header-shadow.png");
    background-repeat: repeat-x;
	padding-bottom: 10px;
}
.el-box {
    border-radius:10px; border-top-left-radius:8px;
	margin: 5px;
	padding: 10px;
	text-align: left;
    background-color: #6b6b6b;
}
.el-box-header {
	background-color: #6b6b6b;
	border-radius:5px; border-top-left-radius:5px;
	padding: 5px;
}
.el-box-title {
	color: #d2df51;
	font-size: 24px;
	margin-left: 20px;
}
.el-box-subtitle {
	color: white;
	font-size: 20px;
}
.el-spacer {
	padding: 2px;
}
.el-box-label-row {
	background-color: black;
	border-radius:5px; border-top-left-radius:5px;
	padding: 3px;
	color: white;
}
.el-box-row {
	background-color: #ececec;
	border-radius:5px; border-top-left-radius:5px;
	padding: 3px;
	padding-top: 20px;
	padding-bottom: 20px;
}
.el-footer {
	text-align: center;
}
.el-add-param-button {
	color: darkgreen;
	cursor: pointer;
}
.el-del-param-button {
	color: darkred;
	cursor: pointer;
}
.el-test-param-button {
	color: darkgreen;
	cursor: pointer;
}
.el-logout-button {
	color: darkred;
}
.el-caret-off {
	color: #757378;
	cursor: pointer;
}
.el-caret-on {
	color: darkgreen;
	cursor: pointer;
}
.el-table-col-width-150 {
	width: 150px;
}
.font-normal {
    font-weight: 600;
}
.font-bold {
    font-weight: 900;
}

/* button styling  */
.btn-go {
	background-image: -ms-linear-gradient(top right, gainsboro 0%, silver 100%);
	background-image: -moz-linear-gradient(top right, gainsboro 0%, silver 100%);
	background-image: -o-linear-gradient(top right, gainsboro 0%, silver 100%);
	background-image: -webkit-gradient(linear, right top, left bottom, color-stop(0, gainsboro), color-stop(100, silver));
	background-image: -webkit-linear-gradient(top right, gainsboro 0%, silver 100%);
	background-image: linear-gradient(to bottom left, gainsboro 0%, silver 100%);
	background-color: gainsboro;
	border: solid 1px silver;
	outline-color: darkgreen !important;  /* the border colour on button depress */
}
.btn-go:hover, .btn-go:focus, .btn-go:active  {
	background: silver;
	border-color: grey !important;
	box-shadow: 0 1px 1px grey inset, 0 0 8px grey;
	background-color: silver !important;  
	color: darkgreen !important;
	outline-color: darkgreen !important;  /* the border colour on button depress */
}
.btn-stop {
	background-image: -ms-linear-gradient(top right, gainsboro 0%, silver 100%);
	background-image: -moz-linear-gradient(top right, gainsboro 0%, silver 100%);
	background-image: -o-linear-gradient(top right, gainsboro 0%, silver 100%);
	background-image: -webkit-gradient(linear, right top, left bottom, color-stop(0, gainsboro), color-stop(100, silver));
	background-image: -webkit-linear-gradient(top right, gainsboro 0%, silver 100%);
	background-image: linear-gradient(to bottom left, gainsboro 0%, silver 100%);
	background-color: gainsboro;
	border: solid 1px silver;
	outline-color: darkred !important;  /* the border colour on button depress */
}
.btn-stop:hover, .btn-stop:focus, .btn-stop:active  {
	background: silver;
	border-color: grey !important;
	box-shadow: 0 1px 1px grey inset, 0 0 8px grey;
	background-color: silver !important;  
	color: maroon !important;
	outline-color: maroon !important;  /* the border colour on button depress */
}
.btn-on  {
	background: #afcc0e !important;
	border-color: grey !important;
	box-shadow: 0 1px 1px grey inset, 0 0 8px grey;
	background-color: #afcc0e !important;  
	color: black !important;
	outline-color: silver !important;  /* the border colour on button depress */
}
.btn-on:active  {
	background: darkgreen !important;
	border-color: grey !important;
	box-shadow: 0 1px 1px grey inset, 0 0 8px grey;
	background-color: darkgreen !important;  
	color: grey !important;
	outline-color: silver !important;  /* the border colour on button depress */
}
.btn-off  {
	background-image: -ms-linear-gradient(top right, gainsboro 0%, silver 100%);
	background-image: -moz-linear-gradient(top right, gainsboro 0%, silver 100%);
	background-image: -o-linear-gradient(top right, gainsboro 0%, silver 100%);
	background-image: -webkit-gradient(linear, right top, left bottom, color-stop(0, gainsboro), color-stop(100, silver));
	background-image: -webkit-linear-gradient(top right, gainsboro 0%, silver 100%);
	background-image: linear-gradient(to bottom left, gainsboro 0%, silver 100%);
	background-color: gainsboro;
	border: solid 1px silver;
	outline-color: silver !important;  /* the border colour on button depress */
}
.btn-off:active  {
	background: darkgreen !important;
	border-color: grey !important;
	box-shadow: 0 1px 1px grey inset, 0 0 8px grey;
	background-color: darkgreen !important;
	color: white !important;
	outline-color: silver !important;  /* the border colour on button depress */
}

/* override styling of form fields */
.form-control {
	background: #a1af23;
	background: -moz-linear-gradient(top, #a1af23 0%, #c4e36d 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, #a1af23), color-stop(100%, #c4e36d));
	background: -webkit-linear-gradient(top, #a1af23 0%, #c4e36d 100%);
	background: -o-linear-gradient(top, #a1af23 0%, #c4e36d 100%);
	background: -ms-linear-gradient(top, #a1af23 0%, #c4e36d 100%);
	background: linear-gradient(to bottom, #a1af23 0%, #c4e36d 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a1af23', endColorstr='#c4e36d', GradientType=0 );
	background-color: #c4e36d;
	color: black;
}
.form-control:focus {
	border-color: gray;
	box-shadow: 0 1px 1px gray inset, 0 0 8px gray;
	outline: 0 none;
}
.form-control::-webkit-input-placeholder { color: gray; }
.form-control:-moz-placeholder { color: gray; }
.form-control::-moz-placeholder { color: gray; }
.form-control:-ms-input-placeholder { color: gray; }

/* colours */
.el-go {
	color: darkgreen;
}
.el-stop {
	color: darkred;
}
.el-ready {
	color: #ffbf00;
}
.el-purple {
	color: indigo;
}
.el-blue {
	color: #40b0f0;
}
.el-black {
	color: black;
}
.el-white {
	color: white;
}
.el-grey {
	color: #6b6b6b;
}
.el-senselogix {
	color: #d2df51;
}
.el-sl-green {
    color: #d2df51;
}
.el-sl-grey {
    color: #757378;
}
.el-plus-icon {
    background-color: black;
    border-style: solid;
    border-width: 1px;
    border-color: black;
}
.el-counter-black {
	background-color: black;
	color: white;
	font-size: 36px;
}
.el-counter-go {
	background-color: darkgreen;
	color: white;
	font-size: 36px;
}
.el-counter-stop {
	background-color: darkred;
	color: white;
	font-size: 36px;
}
.el-counter-sl {
	background-color: #d2df51;
	color: black;
}
.el-status-On {
	color: darkgreen;
}
.el-status-Off {
	color: darkred;
}
.el-status-Unknown {
	color: #6b6b6b;
}
.el-active-1 {
	color: darkgreen;
}
.el-active-0 {
	color: darkred;
}
.pointer {
	cursor: pointer;
}
.policy-timeline {
	width: 782px;
	height: 44px;
	background-image: url('../images/empty_bar_legend_oneline.png');
	float: left;
}
.policy-day {
	width: 42px;
	height: 20px;
	float: left;
	padding: 0px;
}
.policy-hrs-mins-label {
	width: 1440px;
	height: 17px;
	background-image: url('../images/policy-hrs-mins-label.png');
    background-position: left top;
	float: left;
	padding: 0px;
    margin-top: 0px;
}
.policy-blank-bar-bkg {
	width: 1440px;
	height: 24px;
	background-image: url('../images/policy-bar-bkg.png');
    background-position: left top;
	float: left;
	padding: 0px;
    margin-top: 0px;
}
.policy-edit-icon {
	width: 57px;
	height: 20px;
	float: left;
	padding: 0px;
}
.bar-spacer {
	width: 20px;
	height: 20px;
	background-color: transparent;
	float: left;
	padding: 0px;
}
.policy-event-1 {
	width: 0.5px;
	height: 20px;
	background-image: url('../images/green-on.png'); 
	float: left;
	padding: 0px;
}
.policy-event-0 {
	width: 1px;
	height: 20px;
	/** background-image: url('../img/0.png');    **/
	background-color: transparent;
	float: left;
	padding: 0px;
}
.policy-mon {
	background-image: url('../images/mon.png');
	background-repeat: no-repeat;
	height: 20px;
	width: 42px;
	float: left;
}

.policy-tue {
	background-image: url('../images/tue.png');
	background-repeat: no-repeat;
	height: 20px;
	width: 42px;
	float: left;
}

.policy-wed {
	background-image: url('../images/wed.png');
	background-repeat: no-repeat;
	height: 20px;
	width: 42px;
	float: left;
}

.policy-thu {
	background-image: url('../images/thu.png');
	background-repeat: no-repeat;
	height: 20px;
	width: 42px;
	float: left;
}

.policy-fri {
	background-image: url('../images/fri.png');
	background-repeat: no-repeat;
	height: 20px;
	width: 42px;
	float: left;
}

.policy-sat {
	background-image: url('../images/sat.png');
	background-repeat: no-repeat;
	height: 20px;
	width: 42px;
	float: left;
}

.policy-sun {
	background-image: url('../images/sun.png');
	background-repeat: no-repeat;
	height: 20px;
	width: 42px;
	float: left;
}

.sl-dropdown {
    background-color: #d2df51;
    color: black;
}

/* policy sliders css */
.ui-rangeSlider{
  height: 30px;
  padding-top: 40px;
}

.ui-rangeSlider,
.ui-rangeSlider-container,
.ui-rangeSlider-arrow{
  -webkit-box-sizing:content-box;
     -moz-box-sizing:content-box;
          box-sizing:content-box;
}

.ui-rangeSlider-withArrows .ui-rangeSlider-container{
  margin: 0 15px;
}

.ui-rangeSlider-withArrows .ui-rangeSlider-container,
.ui-rangeSlider-noArrow .ui-rangeSlider-container,
.ui-rangeSlider-arrow{
  -webkit-box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.5);
     -moz-box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.5);
          box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.5);
}

.ui-rangeSlider-disabled.ui-rangeSlider-withArrows .ui-rangeSlider-container,
.ui-rangeSlider-disabled.ui-rangeSlider-noArrow .ui-rangeSlider-container,
.ui-rangeSlider-disabled .ui-rangeSlider-arrow{
  -webkit-box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.3);
     -moz-box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.3);
          box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.3);
}

.ui-rangeSlider-noArrow .ui-rangeSlider-container{
  -moz-border-radius: 4px;
  border-radius: 4px;
  border-left: solid 1px #515862;
  border-right: solid 1px #515862;
}

.ui-rangeSlider-disabled.ui-rangeSlider-noArrow .ui-rangeSlider-container{
  border-color: #8490a3;
}

.ui-rangeSlider-container,
.ui-rangeSlider-arrow{
 	height: 30px;

  border-top: solid 1px #232a32;
  border-bottom: solid 1px #6a7179;
}

.ui-rangeSlider-disabled .ui-rangeSlider-container,
.ui-rangeSlider-disabled .ui-rangeSlider-arrow{
  border-top-color: #49576b;
  border-bottom-color: #9ca7b3;
}

.ui-rangeSlider-container,
.ui-rangeSlider-arrow,
.ui-rangeSlider-label{
  background: #67707F;
  background: -moz-linear-gradient(top, #67707F 0%, #888DA0 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#67707F), color-stop(100%,#888DA0));
}

.ui-rangeSlider-disabled .ui-rangeSlider-container,
.ui-rangeSlider-disabled .ui-rangeSlider-arrow,
.ui-rangeSlider-disabled .ui-rangeSlider-label{
  background: #95a4bd;
  background: -moz-linear-gradient(top, #95a4bd 0%, #b2bbd8 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#95a4bd), color-stop(100%,#b2bbd8));
}

.ui-rangeSlider-arrow{
  width:14px;
  cursor:pointer;
}

.ui-rangeSlider-leftArrow{
  border-radius:4px 0 0 4px;
  border-left: solid 1px #515862;
}

.ui-rangeSlider-disabled .ui-rangeSlider-leftArrow{
 border-left-color: #8792a2; 
}

.ui-rangeSlider-rightArrow{
  border-radius:0 4px 4px 0;
  border-right: solid 1px #515862;
}

.ui-rangeSlider-disabled .ui-rangeSlider-rightArrow{
 border-right-color: #8792a2; 
}

.ui-rangeSlider-arrow-inner{
  position: absolute;
  top: 50%;
  border: 10px solid transparent;
  width:0;
  height:0;

  margin-top: -10px;
}

.ui-rangeSlider-leftArrow .ui-rangeSlider-arrow-inner{
  border-right:10px solid #a4a8b7;
  left: 0;
  margin-left: -8px;
}

.ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner{
  border-right:10px solid #b3b6c2;
}

.ui-rangeSlider-disabled .ui-rangeSlider-leftArrow .ui-rangeSlider-arrow-inner,
.ui-rangeSlider-disabled .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner{
  border-right-color: #bbc0cf;
}

.ui-rangeSlider-rightArrow .ui-rangeSlider-arrow-inner{
  border-left:10px solid #a4a8b7;
  right: 0;
  margin-right: -8px;
}

.ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner{
  border-left:10px solid #b3b6c2;
}

.ui-rangeSlider-disabled .ui-rangeSlider-rightArrow .ui-rangeSlider-arrow-inner,
.ui-rangeSlider-disabled .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner{
  border-left-color: #bbc0cf;
}

.ui-rangeSlider-innerBar{
  width: 110%;
  height: 100%;
  left: -10px;
  overflow: hidden;
}

.ui-rangeSlider-bar{
  background: #d2df51; /* slider colour */
  height: 29px;
  margin:1px 0;
  -moz-border-radius: 4px;
  border-radius: 4px;
  cursor:move;
	cursor:grab;
	cursor: -moz-grab;
  
	-webkit-box-shadow: inset 0 2px 6px RGBA(0,0,0,0.5);
     -moz-box-shadow: inset 0 2px 6px RGBA(0,0,0,0.5);
          box-shadow: inset 0 2px 6px RGBA(0,0,0,0.5);
}

.ui-rangeSlider-disabled .ui-rangeSlider-bar{
  background: #93aeca;

  -webkit-box-shadow: inset 0 2px 6px RGBA(0,0,0,0.3);
     -moz-box-shadow: inset 0 2px 6px RGBA(0,0,0,0.3);
          box-shadow: inset 0 2px 6px RGBA(0,0,0,0.3);
}

.ui-rangeSlider-handle{
	width:10px;
	height:30px;
	background: transparent;
	cursor:col-resize;
}

.ui-rangeSlider-label{
  padding: 5px 10px;
  bottom:40px;

  -moz-border-radius: 4px;
       border-radius: 4px;

  -webkit-box-shadow: 0px 1px 0px #c2c5d6;
     -moz-box-shadow: 0px 1px 0px #c2c5d6;
          box-shadow: 0px 1px 0px #c2c5d6;

  color:white;
  font-size:15px;

  cursor:col-resize;
}

.ui-rangeSlider-label-inner{
  position: absolute;
  top: 100%;
  left: 50%;
  display: block;
  z-index:99;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;

  margin-left: -10px;
  border-top: 10px solid #888DA0;
}

.ui-rangeSlider-disabled .ui-rangeSlider-label-inner{
  border-top-color: #b2bbd8; 
}

.ui-editRangeSlider-inputValue{
  width:2em;
  text-align:center;
  font-size:15px;
}

.ui-rangeSlider .ui-ruler-scale{
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
}

.ui-rangeSlider .ui-ruler-tick { 
  float: left; 
}

.ui-rangeSlider .ui-ruler-scale0 .ui-ruler-tick-inner{
  color:white;
  margin-top:1px;
  border-left: 1px solid white;
  height:29px;
  padding-left:2px;
  position:relative;
}

.ui-rangeSlider .ui-ruler-scale0 .ui-ruler-tick-label{
  position:absolute;
  bottom: 6px;
}

.ui-rangeSlider .ui-ruler-scale1 .ui-ruler-tick-inner{
  border-left:1px solid white;
  margin-top: 25px;
  height: 5px;
}


/* pagination override */
.pagination {
    margin-top: 0px;
    margin-bottom: -10px;
    font-size: 13px; /* size of paginator */
}
.pagination > li > a {
    background-color: #d2d2d2; /* non selected background */
    color: black; /* non selected page numbers font */
}
.pagination > li > a:focus,
.pagination > li > a:hover {
    background-color: #d2df51; /* hovered over page number box colour */
    border-color: black;
    color: black;
}
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
    background-color: #d2df51;
    border-color: black;
}
.pagination .page-item.active .page-link {
    background-color: #d2df51;
    border-color: black;
    color: black;
}
.pagination .page-item.disabled .page-link {
    color: black;
    pointer-events: none;
    cursor: auto;
    background-color: #D6DBE0;
    border-color: #718393;
}
/* end of pagination */