/* Basics */

html {
	/* Global base font-size bump (+1px equivalent): 10px -> 11px */
	font-size: 68.75%;
	background:#F1F0ED;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    height: 100%;
 }

body {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    min-height: 100%;
	height: 100%;
    background:#F1F0ED;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}


html, body, input {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

/* Images */

img	{ 
	max-width: 100%;
}

/* Colours */

.red {
	color: #FF5943;
}
.orange {
	color: #FFA368;
}
.blue {
	color: #00C3D0;
}
.purple {
	color: #7266BA;
}

.red-bg {
	background-color: #FF5943;
	color: #fff;
}
.orange-bg {
	background-color: #FFA368;
	color: #fff;
}
.blue-bg {
	background-color: #00C3D0;
	color: #fff;
}
.purple-bg {
	background-color: #7266BA;
	color: #fff;
}
.grey-bg {
	background-color: #6A7B8B;
	color: #fff;
	display:list-item;
}


/* Sections */ 

header {
	padding: 30px 0 10px;
	text-align: center;
}

footer {
	padding: 10px 0 30px;
}

#FilterBar {
	padding: 10px 0 30px;
	font-family: Signika, Arial, sans-serif;
	font-weight: bold;
}

.copyright {
	text-align: right;
	font-size: 1.2rem;
}

.smlldropdwn .ui-autocomplete-panel{
    width:20em !important;
}

.mediumdropdwn .ui-autocomplete-panel{
    width:25em !important
}

.logo-tile{
	display:none;
}
.icon-rightborder{
	border-right: 1px solid #ccc;
}
.drpdown{
    width:70% !important;
}

 .drpdown .ui-dropdown{
    width:100% !important;
}

 .ui-dropdown, .drpdown .ui-dropdown .ui-dropdown-label{
    width:100% !important;
}

 .ui-dropdown .ui-dropdown-label{
    width:100% !important;
}

.ui-dropdown .ui-dropdown-panel {
    min-width: 100%;
}

/* Ensure dropdown items display vertically */
.ui-dropdown-panel .ui-dropdown-items,
.p-dropdown-panel .p-dropdown-items {
    display: block !important;
    flex-direction: column !important;
}

.ui-dropdown-panel .ui-dropdown-items .ui-dropdown-item,
.p-dropdown-panel .p-dropdown-items .p-dropdown-item {
    display: block !important;
    width: 100% !important;
}

.ui-dialog-titlebar-close {
	display: block !important;
}

@media only screen and (max-width: 288px) 
{
 .ui-autocomplete .ui-autocomplete-panel
 {
	left:0 !important;
 }
}
/* Navigation */
	
#MobileMenuAnchor {
	position: absolute;
	top: 20px;
	left: 20px;
	font-size: 20px; font-size: 2rem;
	z-index: 9999;
	color: #6A7B8B;
}
	
	@media only screen and (min-width: 768px) 
	{		
		#MobileMenuAnchor {
			display: none;
		}
		.logo-tile{
			display:block;
		}
	}

#MobileMenu:not( .mm-menu ) {
   display: none;
}

.welcome-column p {
	margin-top: 10px;
	margin-bottom: 0;
}

.welcome-column p a {
	color: #666;
	text-transform: uppercase;
}

.logout-column {
	width: 19%;
}

.logout-column a {
	display: inline-block;
	margin-top: 31px;
	background: #000043;
	border-radius: 3px;
	padding: 5px 10px;
	font-size: 12px;
}

.logout-column a:hover {
	background: #000043;
	color: #fff;
	opacity: 0.7;
}

#exportbtndiv a
{
	display: inline-block;
    margin-top: 31px;
    background: #000043;
    border-radius: 3px;
    padding: 15px 30px;
    font-size: 25px;
}

#exportbtndiv a:hover {
	background: #4d2d6b;
	color: #fff;
	opacity: 0.7;
}

.footerbtndiv a
{
	display: inline-block;
    background: #000043;
    border-radius: 3px;
    padding: 5px 8px;
	font-size: 13px;
	color: #fff !important;
}


.footerbtndiv a:hover {
	background: #000043;
	color: #fff;
	opacity: 0.7;
}


.MainNav {
	margin-top: 13px;
}

.MainNav ul {
	text-transform: uppercase;
	padding: 0;
	margin: 0;
}
	.MainNav ul li {
		display: inline-block;
		list-style: none;
		margin-right: 15px;
		width: 20%;
	}

	.MainNav ul li.large-dropdown {
		width: 65%;
		margin-top: 10px;
	}

	.MainNav ul li.large-dropdown .ui-autocomplete {
		width: 100%;
	}
	
	.MainNav ul li input[type="text"] {
		width: 100% !important;
	}

	.MainNav ul li button.ui-autocomplete-dropdown {
		position: absolute;
		right:0;
		top:0;
		background: #4d2d6b;
		border: none;
		transform: none !important;
		margin-right: 0 !important;
	}
	
		.MainNav ul li a {
			color: #6A7B8B;
			font-weight: bold;
			padding-right: 20px;
			background: none;
			font-family: Signika, Arial, sans-serif;
			font-weight: bold;
		}
			.MainNav ul li > a.active, .MainNav ul li > a:hover {
				color: #6A7B8B !important ;
				background: url(../images/nav-active.jpg) right center no-repeat; 
			}

.column.top-menu-bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.client-logo {
	height: 25px !important;
}
.company-logo {
	height: 50px !important;
}
			
#FilterNav ul {
	text-transform: uppercase;
	margin: 0;
	padding: 0;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	text-align: left;
	font-weight: bold;
}	
	#FilterNav ul li {
		display: block;
		float: left;
		list-style: none;
		width: 18%;
		text-align: center;
		border-left: 1px solid #ccc;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		background-color: #fff;
		background-repeat: no-repeat;
		background-position-y: center;
	}
		@media only screen and (min-width: 768px) 
		{	
			#FilterNav ul li {
				width: 18%;	
			}
		}
		@media only screen and (min-width: 900px) 
		{	
			#FilterNav ul li {
				width: 24.5%;	
			}
		}
		@media only screen and (min-width: 1090px) 
		{	
			#FilterNav ul li {
				width: 21%;	
			}
		}
		@media only screen and (min-width: 1280px) 
		{	
			#FilterNav ul li {
				width: 18%;	
			}
		}
					
		#FilterNav ul li:first-child {
			border-radius: 5px 0 0 5px;
		}
		
		#FilterNav ul li:last-child {
			width: 38%;
			border-radius: 0 5px 5px 0;
			border-right: 1px solid #ccc;
		}
			@media only screen and (min-width: 768px) 
			{	
				#FilterNav ul li:last-child  {
					width: 29%;	
				}
			}
			@media only screen and (min-width: 900px) 
			{	
				#FilterNav ul li:last-child  {
					width: 19%;	
				}
			}
			@media only screen and (min-width: 1090px) 
			{	
				#FilterNav ul li:last-child  {
					width: 29%;	
				}
			}
			@media only screen and (min-width: 1280px) 
			{	
				#FilterNav ul li:last-child  {
					width: 39%;	
				}
			}
	
		#FilterNav ul li a {
			display: block;
			width: 100%;
			font-size: 12px; font-size: 1.2rem;
			line-height: 44px; line-height: 4.4rem;
			font-family: Signika, Arial, sans-serif;
			font-weight: bold;
		}
		
		#FilterNav ul li:hover, #FilterNav ul li.active {
			background-color: #6A7B8B;
		}
		
		#FilterNav ul li:hover a, #FilterNav ul li.active a  {
			color: #fff;
		}
		
		#FilterNav ul li.icon-electric {
			background-image: url(../images/icons-nav/icon-electric-off.png);
			padding-left: 2%;
			background-position-x: center;
			text-indent: -10000px;
		}
		#FilterNav ul li.icon-electric:hover, #FilterNav ul li.active.icon-electric { background-image: url(../images/icons-nav/icon-electric-on.png); }
		
		#FilterNav ul li.icon-gas {
			background-image: url(../images/icons-nav/icon-gas-off.png);
			padding-left: 2%;
			background-position-x: center;
			text-indent: -10000px;
		}
		#FilterNav ul li.icon-gas:hover, #FilterNav ul li.active.icon-gas { background-image: url(../images/icons-nav/icon-gas-on.png); }
		
		#FilterNav ul li.icon-water {
			background-image: url(../images/icons-nav/icon-water-off.png);
			padding-left: 2%;
			background-position-x: center;
			text-indent: -10000px;
		}
		#FilterNav ul li.icon-water:hover, #FilterNav ul li.active.icon-water { background-image: url(../images/icons-nav/icon-water-on.png); }

		@media only screen and (min-width: 900px) 
		{
			#FilterNav ul li.icon-electric {
				text-indent: 0;
				background-position-x: 10px;
			}
			#FilterNav ul li.icon-gas {
				text-indent: 0;
				background-position-x: 20px;
			}
			#FilterNav ul li.icon-water {
				text-indent: 0;
				background-position-x: 15px;
			}
		}
		
#IconNav {
    width: 100%;
	display: table;
	table-layout: fixed;
}

	#IconNav ul {
	    margin: 0;
	    padding: 0;
		display: flex;
		flex-wrap: wrap;
		background-color: #fff;
		height:62px;
	}	

	#IconNav ul .icon-small{
		width: 61px;
	}
	
		#IconNav ul li {
			border-top: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
			
			width: 5%;
			display: inline-block;
			margin: 0;
		}
			#IconNav ul li:first-child {
				border-radius: 5px 0 0 5px;
			}

			#IconNav ul li a:before {
				content:'';
				position: absolute;
				top:0;
				left:0px;
				width: 1px;
				bottom: 0;
				background: #ccc;
				display: block;
			}
	
			#IconNav ul li:last-child a:after {
				content:'';
				position: absolute;
				top:0;
				right:0px;
				width: 1px;
				bottom: 0;
				background: #ccc;
				display: block;
			}

			#IconNav ul li.divider a:after {
				content:'';
				position: absolute;
				top:0;
				left:-2px;
				width: 4px;
				bottom: 0;
				background: #6A7B8B;
				display: block;
			}
				
			#IconNav ul li a {
				display: block;
				width: 100%;
				height: 60px;
				position: relative;
			}

				#IconNav .icon-cost {
					background: url(../images/icons-nav/cost.svg) center center no-repeat #fff;
					background-size: auto 55%;
				}
				#IconNav .icon-cost:hover,
				#IconNav .icon-cost.active {
					background: url(../images/icons-nav/cost_white.svg) center center no-repeat #6A7B8B;
					background-size: auto 55%;
				}

				#IconNav .icon-consumption {
					background: url(../images/icons-nav/consumption.svg) center center no-repeat #fff;
					background-size: auto 45%;
				}
				#IconNav .icon-consumption:hover,
				#IconNav .icon-consumption.active {
					background: url(../images/icons-nav/consumption_white.svg) center center no-repeat #6A7B8B;
					background-size: auto 45%;
				}
				
				#IconNav .icon-co2 {
					background: url(../images/icons-nav/co2.svg) center center no-repeat #fff;
					background-size: auto 40%;
					
				}
				#IconNav .icon-co2:hover,
				#IconNav .icon-co2.active {
					background: url(../images/icons-nav/co2_white.svg) center center no-repeat #6A7B8B;
					background-size: auto 40%;
				}
				#IconNav .icon-graph {
					background: url(../images/icons-nav/graph.svg) center center no-repeat #fff;
					background-size: auto 50%;
				}
				#IconNav .icon-graph:hover,
				#IconNav .icon-graph.active {
					background: url(../images/icons-nav/graph_white.svg) center center no-repeat #6A7B8B;
					background-size: auto 50%;
				}
				
				#IconNav .icon-linegraph {
					background: url(../images/icons-nav/linegraph.svg) center center no-repeat #fff;
					background-size: auto 45%;
				}

				#IconNav .icon-linegraph:hover,
				#IconNav .icon-linegraph.active {
					background: url('../images/icons-nav/linegraph_white.svg') center center no-repeat #6A7B8B;
					background-size: auto 45%;
				}

				#IconNav .icon-pointgraph {
					background: url(../images/icons-nav/point_graph_grey.svg) center center no-repeat #fff;
					background-size: auto 45%;
				}

				#IconNav .icon-pointgraph:hover,
				#IconNav .icon-pointgraph.active {
					background: url('../images/icons-nav/point_graph_white.svg') center center no-repeat #6A7B8B;
					background-size: auto 45%;
				}
				#IconNav .icon-half_hour {
					background: url('../images/icons-nav/half.svg') center center no-repeat #fff;
					background-size: auto 80%;
				}

				#IconNav .icon-half_hour:hover,
				#IconNav .icon-half_hour.active {
					background: url('../images/icons-nav/half_white.svg') center center no-repeat #6A7B8B;
					background-size: auto 80%;
				}

				#IconNav .icon-hour {
					background: url('../images/icons-nav/hour.svg') center center no-repeat #fff;
					background-size: auto 80%;
				}

				#IconNav .icon-hour:hover,
				#IconNav .icon-hour.active {
					background: url('../images/icons-nav/hour_white.svg') center center no-repeat #6A7B8B;
					background-size: auto 80%;
				}

				#IconNav .icon-day {
					background: url('../images/icons-nav/day.svg') center center no-repeat #fff;
					background-size: auto 80%;
				}

				#IconNav .icon-day:hover,
				#IconNav .icon-day.active {
					background: url('../images/icons-nav/day_white.svg') center center no-repeat #6A7B8B;
					background-size: auto 80%;
				}

				#IconNav .icon-month {
					background: url('../images/icons-nav/month.svg') center center no-repeat #fff;
					background-size: auto 75%;
				}

				#IconNav .icon-month:hover,
				#IconNav .icon-month.active {
					background: url('../images/icons-nav/month_white.svg') center center no-repeat #6A7B8B;
					background-size: auto 75%;
				}

				#IconNav .icon-year {
					background: url('../images/icons-nav/year.svg') center center no-repeat #fff;
					background-size: auto 75%;
				}

				#IconNav .icon-year:hover,
				#IconNav .icon-year.active {
					background: url('../images/icons-nav/year_white.svg') center center no-repeat #6A7B8B;
					background-size: auto 75%;
				}
				
				
				#IconNav .icon-alarm {
					background: url(../images/icons-nav/alarm_grey.svg) center center no-repeat #fff;
					background-size: auto 85%;
				}
				#IconNav .icon-alarm:hover,
				#IconNav .icon-alarm.active {
					background: url(../images/icons-nav/alarm_white.svg) center center no-repeat #6A7B8B;
					background-size: auto 85%;
				}
				#IconNav .icon-calendar {
					background: url(../images/icons-nav/calendar.svg) center center no-repeat #fff;
					background-size: auto 60%;
				}
				
				#IconNav .icon-calendar:hover,
				#IconNav .icon-calendar.active {
					background: url(../images/icons-nav/calendar_white.svg) center center no-repeat #6A7B8B;
					background-size: auto 60%;
				}

				#IconNav .icon-forward {
					background: url(../images/arrows/arrow-right.png) center center no-repeat #fff;
					background-size: auto 60%;
				}
				
				#IconNav .icon-forward:hover,
				#IconNav .icon-forward.active {
					background: url(../images/arrows/arrow-right.png) center center no-repeat #6A7B8B;
					background-size: auto 60%;
				}

				#IconNav .icon-backward {
					background: url(../images/arrows/arrow-left.png) center center no-repeat #fff;
					background-size: auto 60%;
				}
				
				#IconNav .icon-backward:hover,
				#IconNav .icon-backward.active {
					background: url(../images/arrows/arrow-left.png) center center no-repeat #6A7B8B;
					background-size: auto 60%;
				}

				#IconNav .icon-analysis {
					background: url(../images/icons-nav/instant_analysis.svg) center center no-repeat #fff;
					background-size: auto 60%;
				}
				
				#IconNav .icon-analysis:hover,
				#IconNav .icon-analysis.active {
					background: url(../images/icons-nav/instant_analysis_white.svg) center center no-repeat #6A7B8B;
					background-size: auto 60%;
				}

				#IconNav .icon-print {
					background: url(../images/icons-nav/printer.svg) center center no-repeat #fff;
					background-size: auto 55%;
				}
				#IconNav .icon-print:hover,
				#IconNav .icon-print.active {
					background: url(../images/icons-nav/printer_white.svg) center center no-repeat #6A7B8B;
					background-size: auto 55%;
				}
				#IconNav .icon-help {
					background: url(../images/icons-nav/help.svg) center center no-repeat #fff;
					background-size: auto 60%;
				}
				#IconNav .icon-help:hover, #IconNav .icon-help.active {
					background: url(../images/icons-nav/help_white.svg) center center no-repeat #6A7B8B;
					background-size: auto 60%;
				}
				#IconNav .icon-export {
					background: url(../images/icons-nav/export.svg) center center no-repeat #fff;
					background-size: auto 60%;
				}
				#IconNav .icon-export-grey {
					background: url(../images/icons-nav/export_grey.svg) center center no-repeat #fff;
					background-size: auto 60%;
				}
				#IconNav .icon-export:hover,
				#IconNav .icon-export.active {
					background: url(../images/icons-nav/export_white.svg) center center no-repeat #6A7B8B;
					background-size: auto 60%;
				}

				#IconNav .icon-exception-report {
					background: url(../images/icons-nav/exception_report_grey.svg) center center no-repeat #fff;
					background-size: auto 60%;
				}
				#IconNav .icon-exception-report:hover,
				#IconNav .icon-exception-report.active {
					background: url(../images/icons-nav/exception_report_white.svg) center center no-repeat #6A7B8B;
					background-size: auto 60%;
				}

				#IconNav .icon-summary-exception-report {
					background: url(../images/icons-nav/summary_exception_report_grey.svg) center center no-repeat #fff;
					background-size: auto 60%;
				}
				#IconNav .icon-summary-exception-report:hover,
				#IconNav .icon-summary-exception-report.active {
					background: url(../images/icons-nav/summary_exception_report_white.svg) center center no-repeat #6A7B8B;
					background-size: auto 60%;
				}


				#IconNav .icon-week-range {
					background: url('../images/icons-nav/icon-week-range-off.png') center center no-repeat #fff;
					background-size: 70% auto;
				}

				#IconNav .icon-week-range:hover,
				#IconNav .icon-week-range.active {
					background: url('../images/icons-nav/icon-week-range-on.png') center center no-repeat #6A7B8B;
				}

				#IconNav .icon-year-range {
					background: url('../images/icons-nav/icon-year-range-off.png') center center no-repeat #fff;
					background-size: 70% auto;
				}

				#IconNav .icon-year-range:hover,
				#IconNav .icon-year-range.active {
					background: url('../images/icons-nav/icon-year-range-off.png') center center no-repeat #6A7B8B;
				}

				#IconNav .icon-add-event {
					background: url(../images/icons-nav/add_event.svg) center center no-repeat #fff; /*add_event.svg add_event_white.svg*/
					background-size: auto 60%;
				}
			
				#IconNav .icon-add-event:hover,
				#IconNav .icon-add-event.active {
					background: url(../images/icons-nav/add_event_white.svg) center center no-repeat #6A7B8B; /*icon-add-event_hover.png edit_event.svg*/
					background-size: auto 60%;
				}

				#IconNav .icon-edit-event {
					background: url(../images/icons-nav/icon-edit-event.png) center center no-repeat #fff;
					background-size: auto 60%;
				}
				
				#IconNav .icon-edit-event:hover,
				#IconNav .icon-edit-event.active {
					background: url(../images/icons-nav/icon-edit-event_hover.png) center center no-repeat #6A7B8B;
					background-size: auto 60%;
				}

				.icon-edit-event {
					background: url(../images/icons-nav/icon-edit-event.png) center center no-repeat #fff;
					height: 60px;
					width:100%;
					display: inline-table;
					background-color: inherit;
				}
				
				.icon-edit-event:hover, .icon-edit-event.active {
					background: url(../images/icons-nav/icon-edit-event_hover.png) center center no-repeat #6A7B8B;
					height: 60px;
					width:100%;
					display: inline-table;
					background-color: inherit;
				}

				#IconNav .icon-manage-users {
					background: url(../images/icons-nav/manage-users.png) center center no-repeat #fff;
				}
				
				#IconNav .icon-manage-users:hover, #IconNav .icon-manage-users.active {
					background: url(../images/icons-nav/manage-users_hover.png) center center no-repeat #6A7B8B;
				}
				
				

				#IconNav .icon-spacer {
					display: inline-block;
							background: #fff;
							height: 60px;
				}
				
				@media only screen and (max-width: 768px)
				{
					#IconNav ul{
						height: auto;
					}
					#IconNav ul .icon-small {
    					width: 25%;
					}
				}

/* Box */

.box {
	background: #fff;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
	-webkit-box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
	/*margin-bottom: 20px;*/
	overflow: hidden;
}
	
	@media only screen and (min-width: 900px)
	{
	  .box {
    	margin-bottom: 0;
		}
	}
	@media only screen and (min-width: 768px) 
	{
		.box.height-33 {
			height: 150px;
		}
		.box.height-33.height-extra {
			height: 160px;
		}
		.box.height-66 {
			/*height: 300px;*/
			height: 160px;
		}
			.box.height-66.height-extra {
				height: 310px;
			}
		.box.height-25 {
			height: 112px;
		}
			.box.height-25.height-extra {
				height: 122px;
			}
		.box.height-12 {
			height: 56px;
		}
			.box.height-12.height-extra {
				height: 66px;
			}
		.box.height-75 {
			height: 336px;
		}
		.box.height-75.height-extra {
			height: 346px;
		}

	}

	@media only screen and (min-width: 900px) 
	{
		.box.height-33 {
			height: 200px;
		}
			.box.height-33.height-extra {
				height: 210px;
			}
		.box.height-66 {
			height: 200px;/*410px;*/
		}
			.box.height-66.height-extra {
				height: 410px;
			}
		.box.height-25 {
			height: 150px;
		}
			.box.height-25.height-extra {
				height: 160px;
			}
		.box.height-12 {
			height: 75px;
		}
			.box.height-12.height-extra {
				height: 85px;
			}
		.box.height-75 {
			height: 450px;
		}
			.box.height-75.height-extra {
				height: 460px;
			}
	}
	
	.box-content {
		padding: 20px;
	}
	
		.box-content.box-single-line {
			padding: 25px 20px 0px;
			font-size: 15px; font-size: 1.5rem;
		}
		@media only screen and (max-width: 900px)
		{
		  .box-content {
    		padding: 0px;
		  }
		}
			@media only screen and (min-width: 1080px) 
			{
				.box-content.box-single-line {
					font-size: 18px; font-size: 1.8rem;	
				}
			}
			
			.box-single-line-label {
				float: left;
			}
			
			.box-single-line-value {
				float: right;
				text-align: right;
			}
				@media only screen and (min-width: 768px) 
				{
					.box-single-line-label p {
						margin-bottom: 10px;
					}
					.box-single-line-label {
						float: none;
					}
					
					.box-single-line-value {
						float: none;
						text-align: left;
					}
				}
				@media only screen and (min-width: 1280px) 
				{
					.box-single-line-label p {
						margin-bottom: 20px;
					}
					.box-single-line-label {
						float: left;
					}
					
					.box-single-line-value {
						float: right;
						text-align: right;
					}
				}
	
	.box-color-title .box-content {
		padding: 5px 10px;
		font-size: 16px; font-size: 1.6rem;			
		text-align: right;
	}	
	
		.box-color-title p, .box-color-title-heading p {
			margin-bottom: 0;
		}
		
	.box-color-title-heading {
		padding: 5px 10px 0;
	}			
		
	.box.box-blue {
		background-color: #00C3D0;
		color: #fff;
	}
	.box.box-orange {
		background-color: #FFA368;
		color: #fff;
	}
	.box.box-red {
		background-color: #FF5943;
		color: #fff;
	}
	
	.box.box-stripe-blue {
		border-top: 8px solid #00C3D0;
	}
	.box.box-stripe-orange {
		border-top: 8px solid #FFA368;
	}
	.box.box-stripe-red {
		border-top: 8px solid #FF5943;
	}
	.box.box-stripe-grey {
		border-top: 8px solid #6A7B8B;
	}
	
	.box.box-bottom-blue {
		border-bottom: 8px solid #00C3D0;
	}
	.box.box-bottom-orange {
		border-bottom: 8px solid #FFA368;
	}
	.box.box-bottom-red {
		border-bottom: 8px solid #FF5943;
	}
	.box.box-bottom-grey {
		border-bottom: 8px solid #6A7B8B;
	}
	.box.box-bottom-purple {
		border-bottom: 8px solid #7266BA;
	}
	
	@media only screen and (min-width: 768px) 
	{
		.box-scroll {
			overflow-y: scroll;
		}
			.box.height-33 .box-scroll  {
				height: 75px;
			}
			.box.height-66 .box-scroll  {
				height: 75px;/*270px;*/
			}
			.box.height-25 .box-scroll  {
				height: 30px;
			}
			.box.height-75 .box-scroll  {
				height: 320px;
			}
	}
	
	.box-scroll-controls {
		display: none;
	}
	
	@media only screen and (min-width: 768px) 
	{
		.box-scroll-controls {
			text-align: center;
			display: block;
		}
	}
	
		.box-scroll-controls img{
			margin-top: 10px;
		}
		
	.box-bookend {
		text-align: center;
		background-image: url(../images/icons/icon-graph-white.png);
		background-position: bottom left;
		background-repeat: no-repeat;
	}

	.arrow-up, .arrow-down {
		font-size: 22px !important;
		background-repeat: no-repeat;
		background-position: center right;
		padding-right: 20px;
		padding: 10px 40px 10px 0;
		line-height: 1em;
		margin: 0;
	}

	.arrow-up {
		color: red;
		background-image: url('../images/arrows/flat_arrow-up.png');
	}

	.arrow-down {
		color: green;
		background-image: url('../images/arrows/flat_arrow-down.png');
	}
	
	.box-percentage {
		position: relative;
		text-align: center;
		/*background-image: url(../images/icons/icon-graph.png);
		background-position: bottom left;
		background-repeat: no-repeat;*/
	}

	.box-percentage:after {
		content: '';
		position: absolute;
		left:10px;
		bottom:10px;
		height: 25px;
		width: 25px;
		background: url(../images/dashboard-buttons/graphs-button.png) center center no-repeat;
		background-size: cover;
	}
	
		.box-percentage .box-content.electricity {
			background: url(../images/dashboard-buttons/electricity.svg) left 0% center no-repeat ;
			background-size: auto 75%;
		}
			
		.box-percentage .box-content.gas {
			background: url(../images/dashboard-buttons/gas.svg) left 0% center no-repeat;
			background-size: auto 75%;
		}
		
		.box-percentage .box-content.water {
			background: url(../images/dashboard-buttons/water.svg) left 0% center no-repeat;
			background-size: auto 75%;		
		}
	
		.box-percentage .box-percentage-value {
			color: #6A7B8B;
			font-size: 30px; font-size: 3rem;
			font-weight: bold;
			height: 100%;
		}
			.box-percentage .box-percentage-value.red {
				color: #FF5943;
			}
			.box-percentage .box-percentage-value.orange {
				color: #FFA368;
			}
			.box-percentage .box-percentage-value.blue {
				color: #00C3D0;
			}
			.box-percentage .box-percentage-value.purple {
				color: #7266BA;
			}
			
			.height-33 .box-percentage-value {
				line-height: 180px;
			}
				@media only screen and (min-width: 768px) 
				{
					.height-33 .box-percentage-value {
						line-height: 120px;	
					}
				}
				@media only screen and (min-width: 900px) 
				{
					.height-33 .box-percentage-value {
						line-height: 180px;	
					}
				}
				
			.height-66 .box-percentage-value {
				line-height: 340px;
			}
				@media only screen and (min-width: 768px) 
				{
					.height-66 .box-percentage-value {
						line-height: 280px;	
					}
				}
				@media only screen and (min-width: 900px) 
				{
					.height-66 .box-percentage-value {
						line-height: 340px;	
					}
				}
				
			.height-25 .box-percentage-value {
				line-height: 110px;
			}
				@media only screen and (min-width: 768px) 
				{
					.height-25 .box-percentage-value {
						line-height: 80px;	
					}
				}
				@media only screen and (min-width: 900px) 
				{
					.height-25 .box-percentage-value {
						line-height: 110px;	
					}
				}
				
			.height-75 .box-percentage-value {
				line-height: 400px;
			}
				@media only screen and (min-width: 768px) 
				{
					.height-75 .box-percentage-value {
						line-height: 300px;	
					}
				}
				@media only screen and (min-width: 900px) 
				{
					.height-75 .box-percentage-value {
						line-height: 400px;	
					}
				}
			
	
	.box-section {
		height: 150px;
		border-bottom: 1px solid #999;
	}
	@media only screen and (min-width: 768px) 
	{
		.box-section {
			height: 28%;
		}
	}
	
	.box-section.icon-electricity {
		background: url(../images/icons/electricity.svg) center center no-repeat;
		background-size: 70%;
	}
	.box-section.icon-electricity:hover, .box-section.icon-electricity.active {
		background-image: url(../images/icons/electricity_white.svg);
		background-color: #FF5943;
		border-radius: 5px 5px 0 0;
		-webkit-border-radius: 5px 5px 0 0;
		-moz-border-radius: 5px 5px 0 0;
	}
	.box-section.icon-electricity-inactive {
		background: url(../images/icons/electricity_grey.svg) center center no-repeat;
		background-size: 50%;
	}

	.box-section.icon-gas {
		background: url(../images/icons/gas.svg) center center no-repeat;
		background-size: 70%;
	}
	.box-section.icon-gas:hover, .box-section.icon-gas.active {
		background-image: url(../images/icons/gas_white.svg);
		background-color: #FFA368;
	}
	.box-section.icon-gas-inactive {
		background: url(../images/icons/gas_grey.svg) center center no-repeat;
		background-size: 50%;
	}


	.box-section.icon-water {
		background: url(../images/icons/water.svg) center center no-repeat;
		background-size: 70%;
	}
	.box-section.icon-water:hover, .box-section.icon-water.active {
		background-image: url(../images/icons/water_white.svg);
		background-color: #00C3D0;
	}
	
	.box-section.icon-water-inactive {
		background: url(../images/icons/water_grey.svg) center center no-repeat;
		background-size: 50%;
	}

	.box-section a {
		display: block;
		width: 100%;
		height: 100%;
	}
	
	.box-section.box-section-nav {
		height: 16%;
		border-bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
		.box-section-nav a {
			display: inline;
			width: auto;
			height: auto;
			margin: 0 10px;
		}
	
.box-graph {
	margin-bottom: 20px;	
}	
	@media only screen and (min-width: 768px) 
	{
		.box-graph {
			margin-bottom: 10px;	
		}	
	}
	@media only screen and (min-width: 900px) 
	{
		.box-graph {
			margin-bottom: 20px;	
		}	
	}

.box-stat-title {
	text-transform: uppercase;
	display: block;
	color: #6A7B8B;
	font-size: 16px; font-size: 1.6rem;
	margin-top: 10px;
}
	@media only screen and (min-width: 768px) 
	{
		.box-stat-title {
			font-size: 9px;font-size: 0.9rem;
			margin-top: 0;
		}
	}
	@media only screen and (min-width: 900px) 
	{
		.box-stat-title {
			font-size: 11px;font-size: 1.1rem;
		}
	}
	@media only screen and (min-width: 1090px) 
	{
		.box-stat-title {
			font-size: 14px; font-size: 1.4rem;
		}
	}
	@media only screen and (min-width: 1280px) 
	{
		.box-stat-title {
			font-size: 16px; font-size: 1.6rem;
		}
	}

	.box-stat-title:after { 
	  content:""; 
	  float:left; 
	  background:#6A7B8B; 
	  width:100%; 
	  height:8px; 
	  border-radius: 4px;
	  -webkit-border-radius: 4px;
	  -moz-border-radius: 4px;
	  margin-top: 5px;
	  margin-bottom: 5px;
	}
		@media only screen and (min-width: 768px) 
		{
			.box-stat-title:after { 
			  height:4px; 
			  border-radius: 2px;
			  margin-top: 0;
			  margin-bottom: 0;
			  width: 90%;
			}	
		}
	
	.box-stat-headline-value {
		font-size: 40px; font-size: 4rem;
		line-height: 46px; line-height: 4.6rem;
		font-weight: bold;
		color: #6A7B8B;
	}
		@media only screen and (min-width: 768px) 
		{
			.box-stat-headline-value {
				font-size: 18px; font-size: 2.6rem;
				line-height: 30px;	line-height: 3rem;
			}
		}
		@media only screen and (min-width: 900px) 
		{
			.box-stat-headline-value {
				font-size: 22px; font-size: 3.2rem;
				line-height: 32px; line-height: 3.2rem;
			}
		}
		
	.box-stat-value {
		font-size: 22px; font-size: 2.2rem;
		line-height: 46px; line-height: 3.6rem;
		color: #6A7B8B;
	}
		@media only screen and (min-width: 768px) 
		{
			.box-stat-value {
				font-size: 16px; font-size: 1.6rem;
				line-height: 30px;	line-height: 3rem;
			}
		}
		@media only screen and (min-width: 900px) 
		{
			.box-stat-value {
				font-size: 20px; font-size: 2rem;
				line-height: 36px; line-height: 3.6rem;
			}
		}
		@media only screen and (min-width: 1090px) 
		{
			.box-stat-value {
				font-size: 26px; font-size: 2.6rem;
				line-height: 32px; line-height: 3.2rem;
			}
		}
		@media only screen and (min-width: 1280px) 
		{
			.box-stat-value {
				font-size: 30px; font-size: 3rem;
				line-height: 30px; line-height: 3rem;
			}
		}
	
	
	.box-stat-circle-value {
	    border-radius: 50%;
	    width: 40px; 
	    font-size: 12px; font-size: 1.2rem;
	    font-weight: bold;
	    border: 2px solid #6A7B8B;
	    color: #6A7B8B;
	}
		@media only screen and (min-width: 768px) 
		{
			.box-stat-circle-value {
				float: right;
				margin-top: -5px;
				width: 30px; 
				font-size: 10px; font-size: 1rem;
			}	
		}
		@media only screen and (min-width: 900px) 
		{
			.box-stat-circle-value {
				margin-top: -5px;
				width: 40px; 
				font-size: 12px; font-size: 1.2rem;
			}	
		}
		@media only screen and (min-width: 1280px) 
		{
			.box-stat-circle-value {	
				float: none;
			}
		}
		
		.box-stat-circle-value span {
		    text-align: center;
		    line-height: 40px;
		    display: block;
		}
			@media only screen and (min-width: 768px) 
			{
				.box-stat-circle-value span {
					line-height: 30px;	
				}
			}
			@media only screen and (min-width: 900px) 
			{
				.box-stat-circle-value span {
					line-height: 40px;	
				}
			}
	
	.box-stat-title.blue, .box-stat-headline-value.blue, .box-stat-value.blue, .box-stat-circle-value.blue {
		color: #00C3D0;
	}
	.box-stat-title.blue:after {
		background: #00C3D0;
	}
	.box-stat-circle-value.blue {
		border-color: #00C3D0;
	}
	.box-stat-headline-value.grey{        
		color: #B5B1B1;
		 font-family: Signika, Arial, sans-serif;
	 }
	.box-stat-title.orange, .box-stat-headline-value.orange, .box-stat-value.orange, .box-stat-circle-value.orange {
		color: #FFA368;
	}
	.box-stat-title.orange:after {
		background: #FFA368;
	}
	.box-stat-circle-value.orange {
		border-color: #FFA368;
	}
	
	.box-stat-title.red, .box-stat-headline-value.red, .box-stat-value.red, .box-stat-circle-value.red {
		color: #FF5943;
	}
	.box-stat-title.red:after {
		background: #FF5943;
	}
	.box-stat-circle-value.red {
		border-color: #FF5943;
	}
	
	.box-stat-title.purple, .box-stat-headline-value.purple, .box-stat-value.purple, .box-stat-circle-value.purple {
		color: #7266BA;
		font-family: Signika, Arial, sans-serif;
	}
	.box-stat-title.purple:after {
		background: #7266BA;
	}
	.box-stat-circle-value.purple {
		border-color: #7266BA;
	}

.box-league {
	text-align: center;
}
	.box-league-label {
		text-transform: uppercase;
		font-size: 26px; font-size: 2.6rem;
		line-height: 42px; line-height: 4.2rem;
		height: 100%;
		padding: 5px 0;
	}
		@media only screen and (min-width: 768px) 
		{
			.box-league-label {
				font-size: 16px; font-size: 1.6rem;
				line-height: 50px; line-height: 5rem;
			}	
		}
		@media only screen and (min-width: 900px) 
		{
			.box-league-label {
				font-size: 20px; font-size: 2rem;
				line-height: 66px; line-height: 6.6rem;
			}	
		}
		@media only screen and (min-width: 900px) 
		{
			.box-league-label {
				font-size: 24px; font-size: 2.4rem;
				line-height: 66px; line-height: 6.6rem;
			}	
		}
		
	.box-league-value {
		font-size: 36px; font-size: 3.6rem;
		line-height: 52px; line-height: 5.2rem;
		line-height: 100%;
		height: 100%;
		padding: 10px 0;
	}
		@media only screen and (min-width: 768px) 
		{
			.box-league-value {
				font-size: 26px; font-size: 2.6rem;
				line-height: 38px; line-height: 3.8rem;
			}	
		}
		@media only screen and (min-width: 900px) 
		{
			.box-league-value {
				font-size: 30px; font-size: 3rem;
				line-height: 56px; line-height: 5.6rem;
			}	
		}
		

.box-status a {
	display: block;
	width: 100%;
	height: 100%;
}	
	
.box-status-icon {
	position: relative;
	background-size: auto 60% !important;
}

.box-status.icon-tariff {
	background: url(../images/dashboard-buttons/tariffs.svg) top 20% center no-repeat #fff;
}
.box-status.icon-tariff-grey {
	background: url(../images/dashboard-buttons/tariffs_grey.svg) top 20% center no-repeat #fff;
}
.box-status.icon-controlcharts {
	background: url(../images/dashboard-buttons/control_charts.svg) top 20% center no-repeat #fff;
}
.box-status.icon-controlcharts-grey {
	background: url(../images/dashboard-buttons/control_charts_grey.svg) top 20% center no-repeat #fff;
}
.box-status.icon-export {
	background: url(../images/dashboard-buttons/dataexport.svg) top 20% center no-repeat #fff;
}
.box-status.icon-export-grey {
	background: url(../images/dashboard-buttons/dataexport_grey.svg) top 20% center no-repeat #fff;
}
.box-status.icon-target {
	background: url(../images/dashboard-buttons/target.svg) top 20% center no-repeat #fff;
}
.box-status.icon-target-grey {
	background: url(../images/dashboard-buttons/target_grey.svg) top 20% center no-repeat #fff;
}
.box-status.icon-temperature {
	background: url(../images/icons/temperature.svg) top 20% center no-repeat #fff;
}	
.box-status.icon-alarm {
	background: url(../images/icons/alarm.svg) top 20% center no-repeat #fff;
}
.box-status.icon-alarm-grey {
	background: url(../images/icons/alarm_grey.svg) top 20% center no-repeat #fff;
}
.box-status.icon-users {
	background: url(../images/dashboard-buttons/users.svg) top 40px center no-repeat #fff;
}
.box-status.icon-admin {
	background: url(../images/dashboard-buttons/adminactions.svg) top 20% center no-repeat #fff;
}
.box-status.icon-audit {
	background: url(../images/dashboard-buttons/useraudits.svg) top 40px center no-repeat #fff;
}
.box-status.icon-audit-grey {
	background: url(../images/dashboard-buttons/useraudits_grey.svg) top 40px center no-repeat #fff;
}
.box-status.icon-analytics{
	background: url(../images/dashboard-buttons/analytics.svg) top 20% center no-repeat #fff;
}
.box-status.icon-analytics-grey{
	background: url(../images/dashboard-buttons/analytics_grey.svg) top 20% center no-repeat #fff;
}
.box-status.icon-reporting{
	background: url(../images/dashboard-buttons/reporting.svg) top 20% center no-repeat #fff;
}
.box-status.icon-reporting-grey{
	background: url(../images/dashboard-buttons/reporting_grey.svg) top 20% center no-repeat #fff;
}
.box-status.icon-intelligent-bms{
	background: url(../images/dashboard-buttons/intelligentBMS.svg) top 20% center no-repeat #fff;
}
.box-status.icon-intelligent-bms-grey{
	background: url(../images/dashboard-buttons/intelligentBMS_grey.svg) top 20% center no-repeat #fff;
}
.box-status.icon-status-gui{
	background: url(../images/dashboard-buttons/status-gui-icon.svg) top 20% center no-repeat #fff;
}
.box-status.icon-status-gui-grey{
	background: url(../images/dashboard-buttons/status-gui-icon-grey.svg) top 20% center no-repeat #fff;
}
.comingsoon{
	position:absolute;
	top:0;
	right:0;
	height: 90px; /*120*/
}
.box-status.icon-tariff .box-stat-headline-value,
.box-status.icon-tariff-grey .box-stat-headline-value,
.box-status.icon-controlcharts .box-stat-headline-value,
.box-status.icon-controlcharts-grey .box-stat-headline-value,
.box-status.icon-export .box-stat-headline-value,
.box-status.icon-export-grey .box-stat-headline-value,
.box-status.icon-target .box-stat-headline-value,
.box-status.icon-target-grey .box-stat-headline-value,
.box-status.icon-temperature .box-stat-headline-value,
.box-status.icon-alarm .box-stat-headline-value,
.box-status.icon-alarm-grey .box-stat-headline-value,
.box-status.icon-users .box-stat-headline-value,
.box-status.icon-admin .box-stat-headline-value,
.box-status.icon-audit .box-stat-headline-value,
.box-status.icon-audit-grey .box-stat-headline-value,
.box-status.icon-analytics .box-stat-headline-value,
.box-status.icon-analytics-grey .box-stat-headline-value,
.box-status.icon-reporting .box-stat-headline-value,
.box-status.icon-reporting-grey .box-stat-headline-value,
.box-status.icon-intelligent-bms .box-stat-headline-value,
.box-status.icon-intelligent-bms-grey .box-stat-headline-value,
.box-status.icon-status-gui  .box-stat-headline-value,
.box-status.icon-status-gui-grey  .box-stat-headline-value{
	position: absolute;
	bottom:5%;
	left:0;
	right:0;
	text-align: center;
	font-size: 20px;
	line-height: 20px;
}

@media only screen and (min-width: 900px) {
	.box-status.icon-analytics{
		background: url(../images/dashboard-buttons/analytics.svg) top 30px center no-repeat #fff;
	}
	.box-status.icon-analytics-grey{
		background: url(../images/dashboard-buttons/analytics_grey.svg) top 30px center no-repeat #fff;
	}
	.box-status.icon-admin {
		background: url(../images/dashboard-buttons/adminactions.svg) top 30px center no-repeat #fff;
	}
	.box-status.icon-temperature {
		background: url(../images/icons/temperature.svg) top 30px center no-repeat #fff;
	}
	.box-status.icon-alarm {
		background: url(../images/icons/alarm.svg) top 30px center no-repeat #fff;
	}
	.box-status.icon-alarm-grey {
		background: url(../images/icons/alarm_grey.svg) top 30px center no-repeat #fff;
	}
	.box-status.icon-export .box-stat-headline-value{
		bottom:5%;
	}
	.box-status.icon-export-grey .box-stat-headline-value{
		bottom:5%;
	}
	.box-status.icon-tariff .box-stat-headline-value{
		bottom:5%;
	}
	.box-status.icon-tariff-grey .box-stat-headline-value{
		bottom:5%;
	}
	.box-status.icon-controlcharts .box-stat-headline-value{
		bottom:5%;
	}
	.box-status.icon-controlcharts-grey .box-stat-headline-value{
		bottom:5%;
	}
	

	.box-status.icon-export{
		background: url(../images/dashboard-buttons/dataexport.svg) top 30px center no-repeat #fff;
	}
	.box-status.icon-export-grey{
		background: url(../images/dashboard-buttons/dataexport_grey.svg) top 30px center no-repeat #fff;
	}
	.box-status.icon-target{
		background: url(../images/dashboard-buttons/target.svg) top 30px center no-repeat #fff;
	}
	.box-status.icon-target-grey{
		background: url(../images/dashboard-buttons/target_grey.svg) top 30px center no-repeat #fff;
	}
	.box-status.icon-reporting{
		background: url(../images/dashboard-buttons/reporting.svg) top 30px center no-repeat #fff;
	}
	.box-status.icon-tariff {
		background: url(../images/dashboard-buttons/tariffs.svg) top 20px center no-repeat #fff;
	}
	.box-status.icon-tariff-grey{
		background: url(../images/dashboard-buttons/tariffs_grey.svg) top 30px center no-repeat #fff;
	}
	.box-status.icon-controlcharts {
		background: url(../images/dashboard-buttons/control_charts.svg) top 20px center no-repeat #fff;
	}
	.box-status.icon-controlcharts-grey{
		background: url(../images/dashboard-buttons/control_charts_grey.svg) top 30px center no-repeat #fff;
	}
	.box-status.icon-intelligent-bms{
		background: url(../images/dashboard-buttons/intelligentBMS.svg) top 30px center no-repeat #fff;
	}
	.box-status.icon-intelligent-bms-grey{
		background: url(../images/dashboard-buttons/intelligentBMS_grey.svg) top 30px center no-repeat #fff;
	}
	.box-status.icon-status-gui{
		background: url(../images/dashboard-buttons/status-gui-icon.svg) top 30px center no-repeat #fff;
	}
	.box-status.icon-status-gui-grey{
		background: url(../images/dashboard-buttons/status-gui-icon-grey.svg) top 30px center no-repeat #fff;
	}
}

/* Tables */

table {
	border-left: 1px solid #ddd;
	border-top: 1px solid #ddd;
	border-collapse:collapse;
	width: 100%;
}

	table.pager {
		width: auto;
		float: right;
	}

	table td, table th {
		padding: 10px;
		border-right: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
	}

	table th {
		font-weight: bold;
		background: rgb(140,156,1);
		color: #fff;
	}
	
	table tr {
		border-bottom: 1px solid #ddd;
	}
	
table.plain {
	border-left: none;
	border-top: 2px solid #333;
}

	table.plain th {
		border-bottom: 2px solid #333;
	}

	table.plain td, table.plain th {
		border-right: 0;
	}
	
table.rowhover tbody tr:hover td {
	background: #F2F5F5;
	cursor: pointer;
}


/* Alarm Data Tables */
.box-content.data-range-selector {
	padding: 10px 20px;
}

.data-range-selector .row {
	margin:0;
}

.data-range-selector label {
	font-weight: bold;
	width: 100%;
	display: block;
}

.data-range-selector select {
	width: 100%;
	height: 25px;
	border: 1px solid #ddd;
}

.data-range-selector input[type="submit"] {
	margin-top: 20px;
	width: 100%;
	background: #64707f;
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
	border: none;
	height: 25px;
}

table.incident-table {
	border: none;
	width: 100%;
}

table.incident-table th {
	background: none;
	color: #666;
	font-weight: normal;
}

table.incident-table th:last-of-type, 
table.incident-table td:last-of-type {
	border-right: none;
}

table.incident-table > *:last-child > tr:last-of-type,
table.incident-table > *:last-child > tr:last-of-type td {
	border-bottom: none;
}

table.incident-table td {
	padding: 6px;
}

table.incident-table tr:nth-of-type(2n) {
	background: #eeeeee;
}

table.incident-table tr.active {
	background: #95e28e;
}

table#incident_events {
	display: none;
}

/* Modals */
body.fixed-bg {
	overflow: hidden;
}

.modal-bg {
	position: fixed;

	top:0;
	right:0;
	bottom:0; 
	left:0;

	background: rgba(255,255,255,0.4);

	display: none;
	align-items: center;
	justify-content: center;
}

	.modal-bg .modal-inner {
		width: 100%;
		max-width: 890px;
		padding: 40px;
		background: #fff;
		border-radius: 6px;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
		-webkit-box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
	}

	.modal-bg .modal-inner h2 {
		text-align: center;
	}


/* Form Layout */
.flexy-form-layout {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 100%;
}

.flexy-form-layout .form-col {
	width: 49%;
}

.flexy-form-layout .form-col-full {
	width: 100%;
}

.flexy-form-layout .full-width-col, .full-width-col {
	width: 100%;
	text-align: right;
	display: flex;
	justify-content: flex-end;
}

.flexy-form-layout .form-col .input-wrapper, .flexy-form-layout .form-col-full .input-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 15px;
}

.flexy-form-layout .form-col .input-wrapper label,.flexy-form-layout .form-col-full .input-wrapper label {
	width: 30%;
}

.flexy-form-layout .form-col .input-wrapper input,
.flexy-form-layout .form-col .input-wrapper textarea,
.flexy-form-layout .form-col-full .input-wrapper input,
.flexy-form-layout .form-col-full .input-wrapper textarea {
	width: 70%;
	margin:0;
	border: 1px solid #ddd;
/*	padding: 10px; */
}
.flexy-form-layout .form-col-full .input-wrapper input{
	height:30px;
}


.flexy-form-layout .form-col .input-wrapper select,
.flexy-form-layout .form-col-full .input-wrapper select {
	width: 74%;
	margin: 0;
	border: 1px solid #ddd;
	height: 41px;
	padding: 10px;
}

.flexy-form-layout .form-col .input-wrapper textarea,
.flexy-form-layout .form-col-full .input-wrapper textarea {
	min-height: 150px;
}

.flexy-form-layout .form-col .input-wrapper .date-wrapper,
.flexy-form-layout .form-col-full .input-wrapper .date-wrapper{
	width: 74%;
}

.flexy-form-layout .form-col .input-wrapper .date-wrapper input,
.flexy-form-layout .form-col-full .input-wrapper .date-wrapper input {
	width: 10px;
	padding: 3px;
}

.flexy-form-layout .form-col .input-wrapper .date-wrapper span.spacer,
.flexy-form-layout .form-col-full .input-wrapper .date-wrapper span.spacer {
	width: 20px;
	display: inline-block;
}


.flexy-form-layout .form-button {
	margin-left: 20px;
	display: flex;
	align-items: center;
}


.flexy-form-layout .form-button img, .form-button img {
	height: 25px;
	margin-left: 10px;
}

.flexy-form-layout .form-button:hover {
	color: #6A7B8B;
	opacity: 0.6;
}

.users-column table {
	border: none;
}

.users-column .ui-widget-content {
	border: none;
}

.users-column tr {
	border: none;
	background: #fff !important;
}

.users-column td:nth-of-type(2) {
	width: 69%;
}

.building-table td:nth-of-type(2) {
	width: 89%;
}

.users-column tr td,
.users-column tr th {
	border: none !important;
	height: 35px;
		border-bottom: 2px solid #fff !important;
}

.users-column .ui-datatable th.ui-state-default {
	background: none !important;
}

.users-column .ui-datatable th.ui-state-default:nth-of-type(2) {
	/* background: #eee; */
	width: 75%;
}

.users-column .ui-widget-header .ui-state-default {border: none;}
.users-column .ui-widget-content .ui-state-default, .ui-state-default {
	/* background: #eee !important; */
}

.users-column .ui-widget-header .ui-state-default.ui-chkbox-box {
	    border: 1px solid #d6d6d6 !important;
}

.users-column .col-button {
	text-align: center;
}

.users-column .col-button button {
	border-radius: 50%;
	height: 30px;
	width: 30px;
}

.users-column .ui-widget-header .ui-state-highlight, .users-column .ui-widget-content .ui-state-highlight, .ui-state-highlight {
    background-color: rgba(102, 102, 142, 0.2) !important;
    background: rgba(102, 102, 142, 0.2) !important;
    color: inherit !important;
}

.users-column .ui-chkbox-box.ui-state-active, .users-column .ui-radiobutton-box.ui-state-active {
	background: #fff;
	border: 1px solid #fff;
}

.users-column .ui-chkbox-box.ui-state-active span:before {
	color: #000043;
}

.users-column .box {
	padding: 5px;
	height: 483px;
}

.users-column .box .ui-table {
	border: 2px solid #000043;
	padding: 15px;
	border-radius: 3px;
	min-height: 100%;/*450px;*/
}

.users-column .ui-widget-header {
	background: none;
	border: none;
	font-weight: bold;
	color: #E2E2E2;
	text-transform: uppercase;
}

.auto-height {
    height: auto!important;
}

.purple-tint-bg {
	background: #66668E;
	color: #fff;
}

.dashboard-content {
	padding: 60px;/*50px;*/
}


.graph-wrappper h3 {
	margin:0;
}

.graph-wrappper h3:nth-of-type(2) {
	margin-bottom: 15px;
}

.ui-widget-header .ui-button, .ui-widget-content .ui-button, .ui-button {
    background-color: #000043 !important;
    border: 1px solid #000043 !important;
}

.ui-widget-header .ui-button:enabled:hover, .ui-widget-header .ui-button:focus, .ui-widget-content .ui-button:enabled:hover, .ui-widget-content .ui-button:focus, .ui-button:enabled:hover, .ui-button:focus {
    background: #000043 !important;
}

.box-percentage {
	position: relative;
}

.box-percentage a {
	position: absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	z-index: 999;
}

.usr-access-table .ui-table-tbody > tr
{
	background-color: #fff !important;
}

.usr-access-table .ui-table-tbody > tr:nth-child(odd) {
    background-color: rgba(102, 102, 142, 0.07) !important;
}

.usr-access-table .ui-table-tbody > tr:hover,
.usr-access-table .ui-table-tbody > tr.highlight {
	background-color: rgba(102, 102, 142, 0.5) !important;
	color:#222 !important;
}

.usr-access-table .ui-table-thead tr th{
	background: none !important;
}

.second-scroll .ui-datatable-scrollable-header-box {
	margin-right:0 !important;
}

.top-table .icon-edit-event, .top-table .icon-edit-event:hover {
	background: url(../images/icons-nav/icon-edit-event.png) center center no-repeat #fff;
	height: 25px;
	background-size: auto 100%;
	width: 100%;
	display: inline-table;
	background-color: inherit;
}

.top-table .icon-edit-event:hover {
	background: url(../images/icons-nav/icon-edit-event_hover.png) center center no-repeat;	
	background-size: auto 100% !important;
}

form.bottom-nav {
	margin:0;
}

@media only screen and (max-width: 920px) {
	.MainNav ul li {
		width: 45%;
		margin-bottom: 10px;
	}

	.MainNav ul li.large-dropdown {
		width: 95%;
		margin-top: 10px;
	}

	.MainNav ul li span.ui-autocomplete {
		width: 100%;
	}

	.logout-column {
		width: 100%;
		text-align: right;
	}

	.logout-column a {
		margin-top: 15px;
	}

	.one_seventh.column.left .box.height-75 {
		height: 310px;
	}

	.box-section-nav {
		padding: 0;
	}

	.rearrange-mobile {
		display: flex;
		flex-wrap: wrap;
	}

	.rearrange-mobile .one_seventh {
		width: 100%;
		order: 2;
		margin: 10px 0;
	}

	.rearrange-mobile #print-section {
		order: 1;
		width: 100%;
	}

	#IconNav ul li {
		width: 6.6%;
	}

	#IconNav ul li.icon-spacer {
		display: none;
	}
	.mediumdropdwn .ui-autocomplete-panel{
		width:20em !important
	}
	.modal-bg .modal-inner {
    	padding: 20px;
	}
	.flexy-form-layout {
    	flex-direction: column;
	}
	.flexy-form-layout .form-col {
    	width: 100%;
	}
}	

@media only screen and (max-width: 560px) {
	.one_seventh.column.left .box.height-75 {
		height: auto !important;
	}
	#IconNav ul li {
		width: 20%;
	}
	.box-section.box-section-nav {
		padding: 15px 0
	}
}


@media only screen and (max-width: 768px) {
	.box-status-icon {
		height: 200px;
	}
}

@media only screen and (max-width: 1280px) {
	#print-section #chart-section {
		padding-top: 0px !important;
	}
}

@media only screen and (max-width: 920px) {
	#print-section #chart-section {
		padding-top: 0 !important;
	}
}

/* for analytics page */

.graph-selector-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-height: 100%;
}

.analytics-filter-outer {
	background: #fff;
	width: 18.5%;
	border-radius: 5px;
	padding: 5px;
	height: 100%;
/*	z-index: 99;
	position: relative;*/
}

.analytics-filter-outer.open {
	/*height: 136px;*/
	/*height:100%;*/
	height: auto;
    z-index: 999;
}

@media screen and (max-width: 900px) {
	.graph-selector-filters {
		max-height: 100%;
	}
	
	.analytics-filter-outer {
		width: 100%;
		margin-bottom: 10px;
	}
}

.analytics-filter-outer .analytics-filter-inner {
	border: 1px solid #000043;
	border-radius: 5px;
	background: #fff;
}

.analytics-filter-outer .analytics-filter-inner .graphic-header {
	padding: 15px 15px 10px 15px;
	color: #6A7B8B;
}

.analytics-filter-outer .analytics-filter-inner .graphic-header .select-wrapper {
	position: relative;
}

.analytics-filter-outer .analytics-filter-inner .graphic-header .select-wrapper:before {
	content: "\f0d7";
	font-family: FontAwesome;
	position: absolute;
	right:5px;
	top: 11px;
	font-size: 26px;
	color: #6D528E;
	transform:rotate(90deg);
}

.analytics-filter-outer .analytics-filter-inner .graphic-header select {
	appearance: none;
	-webkit-appearance: none; 
	-moz-appearance: none;
	background:  #fff;
	border-radius: 0;
	border: 1px solid #d6d6d6;
	padding: 5px 10px;
	width: 100%;
}

.analytics-filter-outer .analytics-filter-inner .graph-key {
	display: block;
	margin: 0 auto 10px auto;
	 /*10px auto;*/
	height: 7px;
	width: 50px;
}

.analytics-filter-outer .analytics-filter-inner .graph-key.orange { background: /*#FFA368*/#2168e7; }
.analytics-filter-outer .analytics-filter-inner .graph-key.red { background: #dda204/*FF5943*/; }
.analytics-filter-outer .analytics-filter-inner .graph-key.blue { background: #00b050/*00C3D0*/; }
.analytics-filter-outer .analytics-filter-inner .graph-key.purple { background: #f26060/*7c26cb*/; }
.analytics-filter-outer .analytics-filter-inner .graph-key.dark-blue { background: #00b0f0/*0000ff*/; }

.analytics-filter-outer .analytics-filter-inner .graph-controls .axis,
.analytics-filter-outer .analytics-filter-inner .graph-controls .date
 {
	display: none;
	padding: 10px 15px;
	align-items: center;
	justify-content: space-between;
	background: #EEECF1;
}

.analytics-filter-outer .analytics-filter-inner .graph-controls .axis.selected,
.analytics-filter-outer .analytics-filter-inner .graph-controls .date.selected,
.analytics-filter-outer .analytics-filter-inner .hidden-graph-controls.open .axis,
.analytics-filter-outer .analytics-filter-inner .hidden-graph-controls.open .date {
	display: flex;
}

.analytics-filter-outer .analytics-filter-inner .graph-controls label {
	font-weight: bold;
    font-size: 12px !important;
    text-transform: none;
    font-family: Signika, Arial, sans-serif;
}

.analytics-filter-outer .analytics-filter-inner input[type="checkbox"] {
	position: relative;
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	border: 1px solid #AF90BF !important;
	background: #E2E2E2;
	border-radius: 0;
	height: 14px;
	width: 14px;
	margin: 0;
}

.analytics-filter-outer .analytics-filter-inner input[type="checkbox"]:focus {
	outline: none;
}

.analytics-filter-outer .analytics-filter-inner input[type="checkbox"]:checked:after {
	content: "\2713";
	color: #6D528E;
	font-size: 10px;
	position: absolute;
	top:1px;
	left: 2px;
	font-weight: bold;
	min-height:20px;
}

.analytics-filter-outer .analytics-filter-inner .hidden-graph-controls .graph-content .data-set {
	display: none;
}

.analytics-filter-outer .analytics-filter-inner .hidden-graph-controls .graph-content .selectedMtr {
	font-size: 12px;
	text-align: center;
	text-transform: capitalize;
	font-weight: bold;
	min-height: 39px;
}

.analytics-filter-outer .analytics-filter-inner .hidden-graph-controls .graph-content .selectedMtr p {
  margin:0px !important;
  overflow-wrap: break-word;
}


.analytics-filter-outer .analytics-filter-inner .hidden-graph-controls .graph-content .NoSelectedMtr {
	display: block;
	min-height: 39px;
}

.analytics-filter-outer .analytics-filter-inner .hidden-graph-controls.open .graph-content .data-set {
	/*padding: 5px 15px;*/
	display: block;
}

.analytics-filter-outer .analytics-filter-inner .hidden-graph-controls.open .graph-content .data-set:first-of-type {
	padding-top: 15px;
}

.analytics-filter-outer .analytics-filter-inner .hidden-graph-controls.open .graph-content .data-set:last-of-type {
	/*padding-bottom: 15px;*/
}

.analytics-filter-outer .analytics-filter-inner .hidden-graph-controls .graph-content .data-set.selected {
	display: block;
	padding: 5px 15px;
}

.analytics-filter-outer .analytics-filter-inner .graph-content .data-set h3 {
	text-transform: initial;
	font-size: 12px;
	margin: 0;
	line-height: 12px;
}

.analytics-filter-outer .analytics-filter-inner .graph-content .data-set h3:before {
	content: "\f0d7";
	color: #6D528E;
	font-family: FontAwesome;
	margin-right: 5px;
	transform:rotate(-90deg);
	display: inline-block;
}

.analytics-filter-outer .analytics-filter-inner .graph-content .data-set.open h3:before {
	transform:rotate(0);
}

.analytics-filter-outer .analytics-filter-inner .graph-content .data-set.closed .options {
	display: none;
}

/*.analytics-filter-outer .analytics-filter-inner .graph-content .data-set .options {
	margin-left: 14px;
	padding-top: 10px;
}*/
.analytics-filter-outer .analytics-filter-inner .graph-content .data-set .options .ui-tree{
    width:100%;
    border:none !important;
}

.analytics-filter-outer .analytics-filter-inner .graph-content .data-set .options .option {
	display: flex;
	align-items: center;	
}

.analytics-filter-outer .analytics-filter-inner .graph-content .data-set .options .option {
	margin-bottom: 10px;
}

.analytics-filter-outer .analytics-filter-inner .graph-content .data-set .options .option label {
	margin-left: 10px;
	font-size: 12px;
	line-height: 12px;
	text-transform: initial;
}

.analytics-filter-outer .analytics-filter-inner .controls {
	background: #6D528E;
	border-radius:  5px;
	padding: 5px 15px 4px 15px;
	display:  flex;
	align-items: center;
	justify-content: space-between;
	color: #fff;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	font-family: Signika, Arial, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
}

.analytics-filter-outer .analytics-filter-inner .controls span.toggle-data img {
	display: inline-block;
}

.analytics-filter-outer .analytics-filter-inner .controls span {
	width: 33.33%;
	text-align: center;
	line-height: 0px;
	margin:auto;
}

.analytics-filter-outer .analytics-filter-inner .controls span.save-data {
	text-align: left;
}

.analytics-filter-outer .analytics-filter-inner .controls span.remove-data-set {
	text-align: right;
}

.analytics-filter-outer .analytics-filter-inner .controls a {
	color: #fff;
	font-size: 12px;
	font-weight: bold;
}

.analytics-filter-outer .analytics-filter-inner .controls a img {
	display: block;
}

div.graph-placeholder {
	padding: 35px;
}

.graph-placeholder img {
	width: 100%;
	height: auto;
}

.modal-bg_date-offset {
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,0.4);
	position: fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	z-index: 999;
	height: 100vh;
}

.modal-bg_date-offset .close-modal {
	position: fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	z-index: 99;
}

.modal-bg_date-offset .modal-inner {
	width: 100%;
	max-width: 360px;
	padding: 5px;
	background: #fff;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
	-webkit-box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
	border-radius: 5px;
	position:  relative;
	z-index: 9999;
}

.modal-bg_date-offset .modal-inner .modal-content {
	padding: 20px;
	border-radius: 5px;
	border: 1px solid #000043;
}

.modal-bg_date-offset .modal-inner .modal-content h3 {
	margin: 0;
	font-size: 14px;
}

.modal-bg_date-offset .modal-inner .modal-content .controller {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.modal-bg_date-offset .modal-inner .modal-content .select-wrapper {
	position: relative;
	width: 70%;
}

.modal-bg_date-offset .modal-inner .modal-content .controller .select-wrapper:before {
	content: "\f0d7";
	font-family: FontAwesome;
	position: absolute;
	right:5px;
	top: 11px;
	font-size: 26px;
	color: #6D528E;
	transform:rotate(90deg);
}

.modal-bg_date-offset .modal-inner .modal-content .controller select {
	appearance: none;
	-webkit-appearance: none; 
	-moz-appearance: none;
	background:  #fff;
	border-radius: 0;
	border: 1px solid #d6d6d6;
	padding: 5px 10px;
	width: 100%;
}

.modal-bg_date-offset .modal-inner .modal-content .numbers-wrapper {
	width: 20%;
	display: flex;
	flex-wrap: wrap;
}

.modal-bg_date-offset .modal-inner .modal-content .numbers-wrapper input {
		-webkit-appearance: none;
		background:  #fff;
		border-radius: 0;
		border: 1px solid #d6d6d6;
		width: 100%;
		/* margin: 0; */
		padding: 6px 0;
		width: 100%;
}

.modal-bg_date-offset .modal-inner .modal-content .numbers-wrapper span {
	font-weight: bold;
	border: 2px solid #6D528E;
	color: #6D528E;
	height: 20px;
	width: 20px;
	font-size: 18px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 5px;
}

.ui-tree .ui-tree-container{
	max-height:165px;
	height:100%;
}

.analytics-filter-outer .analytics-filter-inner .graphic-header .ui-autocomplete{
	display: block !important;
}

.legends4{
	display:none;
}

.purplebtn{
	display: inline-block;
    margin-top: 10px;
    font-size: 12px;
    background: #000043;
    border-radius: 3px;
	text-transform: uppercase;
    color: #fff;
    border: none;
    padding: 0.25em 1em;
}



.customIconElectricity {
	background: transparent url(../images/icons/icon-electricity-analytics-tree.png) no-repeat top !important;
	width:16px;
	height:16px;
 }
.customIconWater {
	background: transparent url(../images/icons/icon-water-analytics-tree.png) no-repeat top !important;
	width:16px;
	height:16px;
}
.customIconGas {
	background: transparent url(../images/icons/icon-gas-analytics-tree.png) no-repeat top !important;
	width:16px;
	height:16px;
}
.customIconHeating {
	background: transparent url(../images/icons/icon-heat-analytics-tree.png) no-repeat top !important;
	width:16px;
	height:16px;
}
.customIconCooling {
	background: transparent url(../images/icons/icon-cool-analytics-tree.png) no-repeat top !important;
	width:16px;
	height:16px;
}
.customIconTag{
	background: transparent url(../images/icons/icon-tag-analytics-tree.png) no-repeat top !important;
	width:16px;
	height:16px;
}
.customIconNone{
     display : none !important;
}

.loadingDlg{
    min-width: 70px !important;
    min-height: 52px !important;
}

.right-start {
	margin-left: auto!important;
}

@media (min-width: 600px) and (max-width: 1025px) {  
    .incident-table .ui-table-responsive .ui-table-tfoot>tr>td, .incident-table .ui-table-responsive .ui-table-thead>tr>th{
        display: none!important
     }
    
    .incident-table .ui-table-responsive .ui-table-tbody>tr>td .ui-column-title{
        padding: .4em;
        min-width: 30%;
        display: inline-block;
        margin: -.4em 1em -.4em -.4em;
        font-weight: 700;
     }
    .incident-table .ui-table-responsive .ui-table-tbody>tr>td {
        text-align: left;
        display: block;
        border: 0;
        width: 100%!important;
        box-sizing: border-box;
        float: left;
        clear: left;
    }
}

.tbl-container-left{
	padding:20px 20px 20px 20px;
	float: left;
}

.tbl-container-right{
	padding:20px 20px 20px 20px;
	float: right;
}

@media (max-width: 899px) {
	
	.one-fourth{
		width:auto;
	}
	
	.one-sixth{
		width:auto;
	}
}


@media only screen and (min-width: 900px)
{
	.one-fourth{
		width:35%;
	}
	
	.one-sixth{
		width:60%;
	}
	
	.tbl-container-left{
	   padding:20px 0px 20px 20px;
	   float:left;
	}
	
	.tbl-container-right{
	   padding:20px 20px 20px 0px;
	   float:right;
	}    
}

.responsive_nav_items {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.nav_item_one{
	width:20%;
	order:1;
}

@media only screen and (max-width: 920px) {
	.nav_item_one{
		width:49%;
	}
}

@media only screen and (max-width: 600px) {
	.nav_item_two ul li{
		width:100%;
	}
	.nav_item_two ul {
		flex-direction: column;
	}
}

@media only screen and (max-width: 768px) {
	.nav_item_one{
		width:49%;
	}
}
.nav_item_two ul {
    display: flex;
}

.nav_item_two{
	width: 60%;
	order:2;
}

@media only screen and (max-width: 920px) {
	.nav_item_two{
		width:100%;
		order:3;
	}
}
.ui-autocomplete-list{
	flex-direction: column;
}

.nav_item_three{
	width:18%;
	order:3;
}

@media only screen and (max-width: 920px) {
	.nav_item_three{
		width:50%;
		order:2
	}
	.box-section.icon-electricity,.box-section.icon-gas,.box-section.icon-water{
		background-size: 40%;
	}
}

.divider{
	width: 2%;
	height: auto;
	display: inline-block;
}


.text-right{
    text-align: right;
}

.text-left{
    text-align: left;
}


/*
@media only screen and (min-width: 768px) 
{	
	#FilterNav ul li:last-child  {
		width: 29%;	
	}
}
@media only screen and (min-width: 900px) 
{	
	#FilterNav ul li:last-child  {
		width: 19%;	
	}
}
@media only screen and (min-width: 1090px) 
{	
	#FilterNav ul li:last-child  {
		width: 29%;	
	}
}
@media only screen and (min-width: 1280px) 
{	
	*/