@charset "utf-8";

/*
Styles for the Samsung Galaxy Tab 10.1
1280px x 800px @ 145ppi
Vertical and horizontal layouts
*/

/*
COLORS ===============================
Color		Hex			Used In
light aqua	#a8a9ad		Tabs unselected
light gray	#d1d2d4		data boxes (hvac and lighting)
orange		#f7931d		border of yellow box
red			#ed2801		heat label, alert text
blue		#1b75bb		cool label, blue links
bright blue	#29cdff		tab link hover

/* added to offset default h1 margins from normalize.css (line 143) */

/* setup keyframes for spinning elements. Probably only need @keyframes at this point, not moz or webkit */
@-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }

h1 {
	margin: 0;
}

/* GLOBAL STYLES */

* {
	margin: 0px;
	padding: 0px;
}

html, body {
	height: 100%;
}

body {
	position: relative;
	font-family: Arial, Helvetica, Lucida Grande, sans-serif;
	margin: 0;
	background: #fff;
}

a, a:visited, a:active {
	text-decoration: none;
	color: #000;
}

img {
	border: 0px;
}

.cline {
	clear:both;
}

.app-wrapper {
	margin-bottom: 60px;
}

nav ul {
	display: flex;
}

.open {
    display: block;
}
.settings-content {
    display: none;
}
/** HEADER STYLES are in header.css **/


#refrig-toggle:checked ~ #refrig1-dropdown {
    display: block;
}

/** CONTROLS-OVERLAY **/
.controls-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2000; /* always display on top */
	background-color: #555;
	opacity: 0.8;
}

.controls-overlay.open {
	display: block;
	z-index: 2001;
}

.control,
.dual-control {
	display: none;
	position: fixed;
	z-index: 2002;
	box-sizing: border-box;

	top: 50%;
	left: 50%;
	margin-left: -150px;
	margin-top: -125px;
	width: 300px;
	height: 250px;
	opacity: 1.0;

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.dual-control.open,
.control.open {
	display: block;
}

.control.occupancy-overlay {
	padding-top: 35px;
	padding-bottom: 35px;
}

.control-knob {
	display: none;
	box-sizing: border-box;
	height: 100%;
	margin-right: 10px;
}

.control-knob.open.home {
	vertical-align: middle;
}

.control-knob.open,
.dual-control .control-knob.open {
	display: inline-block;
}

.control-knob-increase,
.control-knob-decrease {
	display: block;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 110px;
	height: 94px;
	opacity: 0.6;
	cursor: pointer;
	margin: 0 auto;
}

.control-knob-increase {
	background-image: url("../images/btn_adjust_increase.png");
}

.control-knob-decrease {
	background-image: url("../images/btn_adjust_decrease.png");
}

.control-knob-increase:hover,
.control-knob-decrease:hover {
	opacity: 1.0;
}

.control-knob-display,
.control-confirm-panel {
	box-sizing: border-box;
	background: #fff url("../images/hvac-buttonfill.png") repeat-x;
	background-size: 100% 100%;
	border: 1px solid #a7a9ab;
	-webkit-border-radius: 9px;
	border-radius: 9px;
	text-align: center;
	font-size: 2.5em;
	margin-left: 2px;
	margin-right: 2px;
	vertical-align: middle;
}

.control-knob-display {
	width: 110px;
	height: 80px;
	line-height: 80px;
}

.control-knob-display.min-display {
	font-size: 2.1em;
}

.control-confirm-panel {
	display: inline-block;
	box-sizing: border-box;
	width: 160px;
	height: 180px;
}

.control-confirm-panel.occupancy-overlay {
	display: block;
	position: static;
	margin-left: auto;
	margin-right: auto;
}

.control-confirm-message {
	width: 100%;
	height: 60%;
	box-sizing: border-box;
	line-height: 1;
	padding: 10% 4% 0%;
	font-size: 1.1rem;
}

.control-confirm-inputs {
	display: table;
	width: 100%;
	height: 40%;
}

.control-confirm-input-cell {
	display: table-cell;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
	height: 100%;
}

.control-confirm-ok,
.control-confirm-cancel,
.control-confirm-ok-user,
.control-confirm-cancel-user,
.control-confirm-ok-subscription {
	display: block;
	background-repeat: no-repeat;
	background-size: 90% 90%;
	background-position: center center;
	width: 63px;
	height: 63px;
	margin-left: auto;
	margin-right: auto;
	opacity: 0.7;
	cursor: pointer;
	/*border: 1px solid #999999;*/
	border-radius: 6px;
}

.control-confirm-ok,
.control-confirm-ok-user,
.control-confirm-ok-subscription {
	background-image: url("../images/btn_submit_gray.png");
	cursor: auto;
}

.control-confirm-ok.activated,
.control-confirm-ok-user.activated,
.control-confirm-ok-subscription.activated {
	background-image: url("../images/btn_submit.png");
	cursor: pointer;
}

#selecttypeandzone > .control-confirm-ok.schedule,
#selecttypeandzone > .control-confirm-cancel.schedule {
	display: none;
	float: right;
	background-size: 100% 100%;
	margin: 10px;
	width: 40px;
	height: 40px;
}

#selecttypeandzone > .control-confirm-ok.schedule.activated {
	background-image: url("../images/btn_submit.png");
}

.control-confirm-cancel:hover,
.control-confirm-ok.activated:hover {
	opacity: 1;
}

.control-confirm-cancel,
.control-confirm-cancel-user {
	background-image: url("../images/btn_cancel.png");
}

/* Temp adjust styles used on multiple pages */
#value-adjust {
	display: none;
}

.temp-adjust,
.value-adjust {
	font-weight: bold;
	font-size: 1.4em;
	white-space: nowrap;
	overflow: hidden;
}


.temp-adjust .increase,
.value-adjust .increase {
	position: absolute;
	top: 0px;
	cursor: pointer;
}

.temp-adjust .decrease,
.value-adjust .decrease {
	position: absolute;
	bottom: 0px;
	cursor: pointer;
}

.setting-button.value-adjust.temperature,
.setting-button.value-adjust.bypass {
	position: static;
	opacity: 1;
}

/** NAVIGATION STYLES are in nav.css**/

.home-column .main {
	display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: 1fr 1fr;
    gap: 5px 5px;
    justify-content: space-evenly;
    grid-template-rows: auto;
    width: 99%;
}



/** CONTENT STYLES **/
.main {
/*	z-index: 100;
	position: relative;
	background: #FFFFFF;
	width: auto;
	padding-bottom: 0;
	text-align: center;
}*/
}	

.main pre,
.main.mobile {
	display: none;
}


.main .cline::last-child {
	display: none;
}

.main h1 {
	font-weight: normal;
	color: #444;
	margin: 0 0 0 5%;
	float: left;
}

.main > h2 {
	font-size: 1.5em;
	color: #444;
	padding-left: 1.7%;
	margin: 10px 0px;
	text-align: center;
}

.bigdata {
	font-size: 1.700rem;
}

/* Login Styles */
#loginform {
	width: 300px;
	text-align: center;
	color: #444;
	margin: 20px auto 0px auto;
}

#loginform label {
	display: block;
	font-size: 1.1em;
	margin-bottom: 10px;
	color: #555555;
	text-align: center;
}

#loginform p {
	margin-bottom: 35px;
}

#loginform #forgot {
	color: #29cdff;
	text-decoration: none;
	cursor: pointer;
	display: block;
	text-align: left;
	margin-top: 5px;
	font-weight: bold;
}

#loginform #forgot:active {
	color: #000;
}

#loginform input.textinput {
	height: auto;
	border: 2px solid;
	border-radius: 20px;
	border-color: #B0B0B0;
	padding: 1% 2%;
	font-size: 1.3em;width: 95%;
	margin: 5px auto 15px auto;
	position: relative;
	outline: none;
}

#loginform input.textinput:active {
	border-radius: 6px;
}

.formline {
	height: 28px;
}

.formline.remember {
	padding-left: 10%;
}

.formline input.remember {
	display: block;
	float: left;
	margin-right: 5px;
}

.formline label.rememberlabel {
	display: block;
	float: left;
	margin-right: 15px;
	font-size: 12px !important;
	color: #999;
}

#loginform input.submit {
	/*padding: 8px 30px;
	font-size: 1em;*/
	width: 100%;
	margin-top: 20px;
	/*background: #0a6738;
	-webkit-border-radius: 9px;
	border-radius: 9px;*/
}

#loginform #loginerror {
	font-weight: bold;
	color: #E3170D;
	margin-top: 20px;
	display: block;
}

/* Initialization Styles */
#initialization {
	margin: 60px auto 0px;
}

#initialization h2 {
	color: #444;
	padding: 0px;
	margin: 0px 0px 40px 0px;
	text-align: center;
}

/* Alarm Pop-up Styles */
.okbutton {
	display: inline-block;
	padding: 5px 10px;
	background: url(../images/databox_fill.png) repeat-x;
	background-size: auto auto;
	border: 1px solid #999;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	font-size: .8125em;
	cursor: pointer;
	margin-top: 5px;
}

.okbutton {
	font-weight: bold;
}
.databox {
	border: solid #ddd 1px;
}

/* Alarm Styles */
.databox.alarm, .datarow.alarm, .tier2bar.alarm, .databox.critical, .datarow.critical {
	background-image: none !important;
	background: #D1D2D4 !important;
	
}

.tier2bar.critical {
	background: #F04923;
}


.datarow h3 {
	word-break: break-all;
	word-wrap: break-word;
}

.databox.alarm h3, .datarow.alarm h3, .tier2bar.alarm h3, .databox.critical h3, .datarow.critical h3, .tier2bar.critical h3 {
	background-color: #F04923 !important;
	border: 1px solid #fff;
	border-radius: 12px;
	color: #fff;
	text-shadow: 0px 0px 2px  #000;
}

.datarow.alarm .label p {
	/*color: #FFFFFF !important;*/
	color: #555;
}

.datarow.alarm, .databox.alarm {
	border: 1px solid #CC450A;
	border-radius: 12px;
	
}

/*.databox.caution, .datarow.caution, .tier2bar.caution	{ */
.databox, .datarow	{
/*		background-image: none !important;*/
	/* background-color: #D1D2D4 !important; */
	background-color: #DEDEDE;
}

.databox.caution h3, .datarow.caution h3, .tier2bar.caution h3	{
	background-image: none !important;
	background-color: #ffd87d !important;
	border: 1px solid #cc450a;
	border-radius: 12px;
	color: #000;
}

.datarow.caution {
	border-top: 2px solid #FFC20E;
	border-bottom: 2px solid #FFC20E;
}

.datarow.bypass,
.databox.bypass {
	background-color: #bde2fa !important;
	border-radius: 4px;
	border: solid #6dcff6 1px; 
	/* height: 78px; */
	

}
.databox.info, .datarow.info{
	background-image: none !important;
	/* background-color: #d1d2d4 !important; */
}
.tier2bar.info {
	background-image: none !important;
	background-color: #d1d2d4 !important;
    background-color: #bde2fa !important;
    
}
.databox.info h3, .datarow.info h3, .tier2bar.info h3 {
	background-image: none !important;
	background-color: #6dcff6 !important;
	border: 1px solid #ffffff;
	border-radius: 12px;
	color: #000;
}

.datarow.info {
	border-top: 2px solid #3A9CC3;
	border-bottom: 2px solid #3A9CC3;
}

.button {
	background: url("../images/hvac-buttonfill.png") repeat-x;
	background-size: 100% 100%;
	border: 1px solid #a7a9ab;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	width: 72px;
	height: 24px;
	padding: 5px;
	margin: 0;
	/*margin: 5px auto 0 auto;*/
	cursor: pointer;
}

.bigdata.button {
	padding: 0 6px;
}

.button.multi, .button.alarm {
	background: #F04923;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	width: 90%;
	margin: 4px auto 0 auto;
	cursor: pointer;
	color: #fff;
	font-weight: bold;
}

.button.caution {
	background: #FAE282;
	border: 2px solid #F04923;
	max-height: 24px;
	line-height: 24px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	width: 90%;
	margin: 5px auto 0 auto;
	cursor: pointer;
	color: #000;
	font-weight: bold;
}

.datarow h3.button.caution {
	background: #FAE282;
	border: 2px solid #F04923;
	color: #000;
}

.datarow h3.button.critical {
	background: #EC1A23;
	color: #fff;
}

.datarow h3.button.info {
	background: #71C9F7;
	color: #000;
}

.datarow h3.button {
	max-height: 24px;
	line-height: 24px;
	/*margin: 0;*/
	padding: 10px 0 0 0;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	width: 90%;
	cursor: pointer;
	font-weight: bold;
}

.button.info {
	background: #71C9F7;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	width: 90%;
	margin: 5px auto 0 auto;
	cursor: pointer;
	color: #000;
	font-weight: bold;
}

/* Graph Timeframe Styles */
.graph-timeframe {
	height: 30px;
	float: left;
	width: 100%;
	margin-bottom: 10px;
}

.graph-container .graph-timeframe {
	padding-top: 15px;
}

.graph-timeframe span {
	float: left;
	width: 24%;
	max-width: 200px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	font-size: 1.1em;
	margin-right: 1.2%;
	color: #8C8C8C;
	background: #D6D6D6;
	cursor: pointer;
	border-radius: 4px;
}

.graph-timeframe span.alt {
	background: #FFFFFF;
}

.graph-timeframe span:last-child {
	margin-right: 0px;
}

.graph-timeframe span.selected {
	color: #FFFFFF;
	background: #828282;
	position: relative;
	z-index: 10;
}

/* Graph Datepicker Styles (partially from Bootstrap) */
.graph-datepicker .daterange-arrow {
	background: url("../images/icon_graph-arrow.png") no-repeat;
	background-size: contain;
	background-position: center right;
	width: 15px;
	display: table-cell;
	cursor: pointer;
}

.graph-datepicker .daterange-arrow.back {
	-ms-transform: scaleX(-1); /* IE 9 */
	-webkit-transform: scaleX(-1); /* Chrome, Safari, Opera */
	transform: scaleX(-1);
	padding-right: 10px;
}

.graph-datepicker .daterange-arrow.forward {
	padding-left: 10px;
}

.graph-datepicker .input-group {
	display: table;
	float: left;
}

.graph-datepicker .input-group .input-group-addon {
	display: table-cell;
	padding: 3px 5px;
}

.graph-datepicker .input-group .form-control {
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
	color: #555;
	display: block;
	transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
	vertical-align: middle;

	font-size: 12px;
	height: 16px;
	line-height: 1.5;
	padding: 5px 10px;
	display: table-cell;
	max-width: 90px;
}

/** HOME STYLES **/

.pane {
	margin-bottom: 60px;
}
.main .pane h2 {
	padding: 0px;
	text-align: center;
	color: #444;
	margin: 10px 0px;
}

.pane.hvac, 
.pane.lighting, 
.pane.temperature,
.pane.refrigeration {
	width: 100%;
	margin: 0 auto;
	margin-bottom: 40px;
}

.pane.hvac, 
.pane.lighting, 
.pane.temperature,
.pane.refrigeration,
.pane.energy {
/*	float: left;
	height: auto;
	text-align: center;
	padding: 0 1.3%;
	width: 50%;*/
}

.pane.hvac .datacontent, .pane.refrigeration .datacontent {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.pane.lighting .datacontent {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
}

.pane.fullwidth.temperature, .pane.fullwidth.lighting {
 	width: 97%;
 	position: relative;
	
}

.pane.temperature.fullwidth .databox .value-holder {
	position: relative;
	top: -5px;
}

/*#temperature-monitor h3 {
	margin-bottom: 0;
}
.pane.energy {
	width: 100%;
}
*/
.pane.energy .energybox {
	padding: 15px 0px;
	background: #D1D2D4;
	border-radius: 4px;
	margin: 5px;
}

/*billy testing lighting css*/

.lighting .databox-wrapper {
    display: flex;
    /*grid-auto-flow: column;*/
    flex-wrap: wrap;
    justify-content: start;
}

.databox-wrapper {
	text-align: center;
}          

.flex-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 5px;
	/*margin-left: 15%;*/
}          

.databox {
	/*position: relative;*/
	-webkit-border-radius: 4px;
	border-radius: 4px;
	background: #D1D2D4;
	width: 115px;
	/*float: left;*/
	/*height: 80px;*/
	height: 144px;
	/*margin: 5px .5%;*/
	padding: 20px;
	/*vertical-align: middle;*/
	margin-bottom: 10px;
	border-radius: 7px;
	display: inline-block;
	margin-right: 5px;
	vertical-align: middle;
}

.hidden-center-box {
	visibility: hidden;
}

.light-hidden-center-box {
	visibility: hidden;
}

.hidden-refrig-box {
	visibility: hidden;
}

.hvac .cline {
	display: none;
}

.pane .lighting {
	margin-bottom: 40px;
}

.lighting .cline {
	display: none;
}


/*.temperature .databox, 
.lighting .databox {
	width: 25%;
	float: left;
}*/

.pane.lighting.fullwidth .cline{
 	clear: none;
}
.pane.temperature.fullwidth .databox,
.pane.lighting.fullwidth .databox {
	/*width: auto;*/
	/*float: left;*/
	padding-left: auto;
	padding-right: auto;
	/*height: auto;*/
} 

.temp-boxes {
	width: 115px;
}
/*#temperature-monitor #temperature1, 
#temperature-monitor #temperature2,
#temperature-monitor #temperature3,
#temperature-monitor #temperature4 {
	width: 115px;
}*/

.databox .datacontent {
	display: flex;
	justify-content: space-around;
}

#temperature-monitor .temperature .datacontent {
	display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 1fr 1fr;
    gap: 5px 5px;
    justify-items: center;
}

#temperature-monitor .temperature .databox-wrapper {
	display: flex;
	justify-content: start;
	flex-wrap: wrap;
}

#temperature-monitor .databox {
	/*height: auto;*/
	padding-bottom: 45px;
}

.wtemp-boxes {
	padding-bottom: 85px!important;
}

.wtemp-boxes .datacontent {
	gap: 0 5px!important;
}

.databox .datacontent br {
	display: none;
}

.databox:after {
	content: "";
	width: 100%;
	display: inline-block;
}

.databox h3 {
	color: #444;
	font-size: .875em;
	line-height: 100%;
	font-weight: bold;
	margin: 0;
	padding: 2px 0 3px 0;
	width: 100%;
	text-align: center;
	overflow: hidden;
	white-space: normal;
	/*max-height: 24px;*/
	border-bottom: 1px solid #fff;
}

.databox h3 .alert-icon {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
	display: none;
}

.databox h3 span {
	position: relative;
	z-index: 2;
}

.databox h3.button {
	height: 20px !important;
	line-height: 20px;
	padding: 0;
	margin: 0 auto;
	width: 95%;
}

.databox .targetbutton {
	width: 65px;
	height: 50px;
	text-align: center;
	padding: 0;
	margin: 10px 0 0 0;
	cursor: pointer;
	
}

.databox .targetbutton.wide {
	float: none;
	margin: 10px auto 0px auto;
	max-height: 16px;
}

span.Htarget,
span.Ctarget {
	position: relative;
	top: 0em;
}
.databox span.Htarget,
.databox span.Ctarget {
}
span.Htarget{
	color: #ed2801;
}
span.Ctarget{
	color: #1b75bb;}

span.Htarget.isAuto{
	font-size:60%;
	top: .3em;
	left: 0em;		
}
span.Ctarget.isAuto {
	font-size:60%;
	top: -.6em;
	left: .3em;		
}
.databox span.isAuto {
	font-size: 68%;
}
.databox {
    box-shadow: 4px 4px 4px rgb(0, 0, 0, 0.25);
}

.databox span.Ctarget,
.databox span.Htarget{
	font-weight: normal;
}
.databox span.Ctarget.isAuto {
	top: -.5em;
	left: .3em;
}
.databox span.Htarget.isAuto {
	top: .4em;
	left: .2em;		
}
.databox .hvac-targettemp span.baretext {
	top: 0em;
	left: .2em;
}
.databox .fridge-targettemp span.baretext {
	top: 0em;
	left: -.3em;
	font-size: .625rem;
	font-weight: bold;

}
.databox .value-holder {
	float: left;
	margin: 5px 0;
	width: 56px;
	height: 26px;
	color: #444;
	font-size: 1.5em;
	line-height: 26px;
	text-align: center;
	position: relative;
	top: -5px;
	padding-top: 5px;
}


.pane.hvac .databox .value-holder.bigvalue.temperature {
	margin: 15px 0 0 0;
}

.pane.hvac .databox .value-holder.temperature,
.pane.refrigeration .databox .value-holder.temperature {
	margin: 15px 0 0 0;
	
}

.pane.refrigeration .databox .value-holder.temperature.button .targetbutton {
	margin: 0;
	height: 26px;
}

.pane.hvac .databox .value-holder.temperature.button .baretext,
.pane.refrigeration .databox .value-holder.temperature.button .baretext {
	/* margin: 9px 0; */
	height: auto;
	font-size: .625rem;
	
}
.pane.hvac .databox .value-holder.temperature.button
.pane.refrigeration .databox .value-holder.temperature.button {
 	font-weight: bold;
}

.databox .value-holder.bigvalue {
	width: 80px;
	font-size: 2.5em;
	float: left;
}

.databox .baretext {
	/* font-size: .625em; */
	font-size: .75em;
	color: #777;
	display: block;
	position: relative;
	top: -7px;
}

.pane.temperature .databox .baretext {
	position: relative;
	top: -5px;
}

.databox .hvacmode, 
.databox .refrigmode {
	width: 100%;
	height: 40px;
	float: left;
	margin-top: 10px;
	display: block;
	min-width: 40px;
	position: relative;
	/*left: -5px;*/
}

.databox .hvacmode.cool {
	background: url(../images/icon-sprite-mode.png) no-repeat;
	background-position: top center;
}

.databox .hvacmode.heat {
	background: url(../images/icon-sprite-mode.png) no-repeat;
	background-position: center center;
}

.databox .hvacmode.auto {
	background: url(../images/icon-sprite-mode.png) no-repeat;
	background-position: bottom center;
}
.databox .hvacmode.off {
    background: url(../images/icon_thermostat_off.png) no-repeat;
/*
	background: url(../images/icon-sprite-mode.png) no-repeat;
	background-position: bottom center;
*/
}


.databox .refrigmode.on {
	background: url(../images/icon_refrig_sm_on.png) no-repeat;
	background-position: top center;
}

.databox .refrigmode.defrost, .databox .refrigmode.drain {
	background: url(../images/icon_refrig_sm_defrost-drain.png) no-repeat;
	background-position: top center;
}

.databox .refrigmode.idle, .databox .refrigmode.off {
	background: url(../images/icon_refrig_sm_idle-off.png) no-repeat;
	background-position: top center;
}

.databox .lightbulb.light-button {
	cursor: pointer;
}

.databox .lightbulb {
	position: relative;
	/*left: 20px;*/
	bottom: 0;
	/*width: 50px;*/
	height: 60px;
	background: none;
}

.databox a img.iconsched {
	/*float: right;*/
	/*margin-right: 20px;*/
}

.databox .lightbulb.on {
	background: url("../images/icon-sprite-lights.png") center -60px no-repeat;
}

.databox .lightbulb.off {
	background: url("../images/icon-sprite-lights.png") center -0px no-repeat;
}
.databox .lightbulb.inactive {
	background: url("../images/icon-sprite-lights.png") center -300px no-repeat;
}

.databox .lightbulb.photocell-on {
	background: url("../images/icon-sprite-lights.png") center -120px no-repeat;
}

.databox .lightbulb.manual-on {
	background: url("../images/icon-sprite-lights.png") center -180px no-repeat;
}

.databox .manual-off {
	background: url("../images/icon-sprite-lights.png") center -300px no-repeat;
}

.databox .scheduler {
	text-align: center;
	vertical-align: middle;
	width: 50px;
	height: 100%;
}

.databox .schedule {
	text-align: center;
	width: 50px;
	height: 50px;
}

.databox .schedule img,
.databox .scheduler img {
	width: 41px;
	margin-top: 14px;
}

.databox .graph-toggle {
	float: left;
	width: 41px;
	padding: 15px 0 0 0;
}

.wtemp-boxes .graph-toggle {
	/*grid-column: span 2;*/
}

.databox .graph-toggle .graph-icon {
	width: 41px;
	height: 41px;
	display: block;
	text-align: center;
	background-image: url("../images/icon_graphs.png") ;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 0 auto;
	cursor: pointer;
	position: relative;
	top: -7px;
}

.databox .graph-blank-space {
	visibility: hidden;
}

.databox .graph-toggle .graph-icon.active {
	background-image: url("../images/icon_graphs_OV.png");
}

.databox .schedule.center {
	margin: 5px auto 0;
	padding: 0px;
	float: none;
}

.databox .temp-mon,
.databox .wtemp-mon {
	/*width: 25%;*/
	color: #444;
	text-align: center;
	display: block;
	float:left;
}

.databox .temp-mon .bigdata,
.databox .wtemp-mon .bigdata
{
	font-size: 2.5em;
	margin-top: 5px;
}

/*.databox .wtemp-mon .bigdata {
	font-size: 1.875rem;
	margin-top: 11px;
}*/

.databox .temp-mon.temperature,
.databox .temp-mon.temperature .bigdata {
	display: block;
	float: left;
	height: 60px;
	line-height: 60px;
}

.databox .temp-mon.temperature .value,
.databox .temp-mon.temperature .unit {
	font-size: 1.875rem;
}

.databox .temp-mon.temperature .value,
.databox .temp-mon.temperature .unit,
.databox .wtemp-mon.temperature .value,
.databox .wtemp-mon.temperature .unit {
	line-height: 60px;
	height: 60px;
}

.databox .temp-mon .value-holder.temperature.buttton {
	float: left;
}

.databox .indicators {
	/*width: 15%;*/
	height: auto;
	display:block;
	float:left;
}

.databox .indicators .battery_level{
	width:30px;
	height:30px;
	background-image: url('../images/icon_battery.png');
	margin-top: 10px;
}

.databox .indicators .signal_level{
	width:30px;
	height:30px;
	background-image: url('../images/icon_signal.png');
}


.databox .indicators .level_0{
	background-position: 0px -120px;
}

.databox .indicators .level_1{
	background-position: 0px -90px;
}

.databox .indicators .level_2{
	background-position: 0px -60px;
}

.databox .indicators .level_3{
	background-position: 0px -30px;
}

.databox .indicators .level_4{
	background-position: 0px 0px;
}





/* Home Styles - Energy */
#energy .gauge {
	width: 177px;
	height: 177px;
	background: url("../images/gauge.png") no-repeat;
	position: relative;
	text-align: center;
	margin: 0 auto;
/*	overflow: hidden; */
}

#energy .gauge .indicator {
	width: 177px;
	height: 177px;
}

#energy .gauge .peakindicator {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 177px;
	height: 177px;
}

#energy .gauge h3 {
	width: 100%;
	color: #000;
	position: absolute;
	left: 0px;
	top: 75px;
	text-align: center;
}

#energy .gauge h3 .value {
	font-size: 2.2rem;
	font-weight: normal;
}

#energy .gauge h3 .units {
	font-size: .8em;
	font-weight: bold;
	color: #999;
	width: 100%;
	text-align: center;
}

#graphhome {
	width: 194px;
	height: 270px;
	margin-top: 15px;
	margin-top: 70px;
	margin-left: auto;
	margin-right: auto;
}

#energy-bar-graph {
	width: 280px;
	height: 240px;
	margin: 15px auto;
}

#graphhome .highcharts-container, #energy-bar-graph .highcharts-container {
	overflow: visible !important;
}

#graphhome .tooltipContainer, #energy-bar-graph .tooltipContainer {
	background: #FFFFFF;
	opacity: 0.85;
	padding: 5px;
	border-radius: 3px;
}

/** SPACE TEMP AND REFRIGERATION STYLES **/



/*Billy Styles Testing*/

.refrigeration-template {
	/*padding: 10px;*/
	/*margin: 0 auto;*/
	/*width: 115px;*/
	/*height: auto;*/
	align-items: center;
	
}

.refrigeration-template  .datacontent {
	display: flex;
	justify-content: start;
	flex-wrap: wrap;
	height: auto;
}

.refrigeration .databox {
	height: 144px;
	width: 115px;
}

.refrigeration-template .button {
	width: 100%;
}

.refrig-temp, .refrig-targettemp, .refrig-coiltemp, .refrig-coiltemp2, .refrig-compressor {
	/*margin-bottom: 15px;*/
	/* border: solid red 1px; */
}

.home-column .refrig-temp, .home-column .refrig-mode {
	width: 48%;
}

.refrigmode {
	width: 100%;
}

.refrigeration-template {
	width: 100%;
}

.refrigeration-template .refrig-temp, .refrigeration-template .refrig-temp, .refrig-mode {
	width: auto;
}

.refrig-zone {
	width: 20%;
	/*margin: 15px 0!important;*/
	/*padding-left: 0!important;*/
}

.refrig-zone button {
	width: 15%;
}


#hvac1targettemp, #hvac2targettemp {
	/*display: block!important;*/
}

.lighting-template-boxes {
	width: 115px;
}

.lighting-template-boxes:last-of-type {
	margin-bottom: 100px;
}




.datarows {
	width: 100%;
	padding-bottom: 100px;
}

.datarow {
	vertical-align: middle;
	position: relative;
}

.datarows.borderbottom {
	border-bottom: 1px solid #CACACA;
	padding-bottom: 100px;
}

.datarow-settings,
.datarow {
	display: flex;
	justify-content: space-around;
	width: 95%;
	/*height: 66px;*/
	/*background: #efefef;*/
	background-image: linear-gradient(#efefef, #e3e3e3);
	margin-top: 4px;
	padding: 15px 10px 15px 0;
	margin-left: 10px;	
}

 /*moved to mobile.css --*/
.datarow.settings.mobile-settings {
	cursor: pointer;
	display: none;
} 

.datarow.schedule {
	cursor: pointer;
}

.datarow h3 {
	position: relative;
}

.datarow h3 .alert-icon {
	position: absolute;
	top: -7px;
	left: -7px;
	z-index: 1;
	display: none;
}

.datarow .label {
	height: 30px;
	width: 100%;
}

#row-label {
	margin-top: -5px;
}

#row-2 {
	vertical-align: top;
}

.datarow .label p {
	font-size: .75em;
	color: #555;
	line-height: 105%;
}

.data-dropdown {
	display: none;

}

.data-dropdown.open {
	display: block;
	padding-top: 10px;
}

.data-dropdown-row {
	display: table;
	width: 100%;
	height: 50px;
	z-index: 2;
	position: relative;
}

.data-dropdown-element {
	display: table-cell;
	width: 50%;
	height: 100%;
}

.data-dropdown-element-wrapper,
.data-dropdown-element-wrapper-final {
	display: table;
	width: 100%;
	height: 100%;
	text-align: center;
}

.data-dropdown-element-wrapper-final {
	width: 50%;
}

.data-dropdown-element-full {
	margin: 0 auto;
}

.data-dropdown-element-label,
.data-dropdown-element-value {
	display: table-cell;
	width: 50%;
	font-size: 0.75rem;
	text-align: right;
	vertical-align: middle;
}

.data-dropdown-element-value {
	font-size: 1.875em;
	text-align: center;
}

.data-dropdown-hvac-fan,
.data-dropdown-refrig-fan {
	display: table-cell;
	width: 10%;
	height: 100%;
	text-align: center;
	vertical-align: middle;
	margin-left: auto;
	margin-right: auto;
}

.datarow .details-button {
	background: url("../images/icon_multifunction.png") no-repeat;
	cursor: pointer;
	display: block;
	width: 40px;
	height: 40px;
	margin: 0 auto;
}

.datarow .graph-button,
.datarow .schedule-button {
	background-position: center center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	cursor: pointer;
	display: block;
	width: 40px;
	height: 33px;
	margin: 0 auto;
}

.datarow .graph-button {
	background-image: url("../images/icon_graphs.png");
}

.datarow .schedule-button {
	background-image: url("../images/icon_schedule_bar.png");
}

@-webkit-keyframes open-graph { from {height: 0px;} to {height: 230px;} }
@keyframes open-graph { from {height: 0px;} to {height: 230px;} }

@-webkit-keyframes close-graph { from {height: 230px;} to {height: 0px;} }
@keyframes close-graph { from {height: 230px;} to {height: 0px;} }

.graph-container {
	width: 95%;
	padding: 0px 2.5%;
	height: 0px;
	background: #d4d5d7;
	overflow-y: hidden;
	position: relative;
}

.graph-container.open {
	height: 420px;
	/* -webkit-animation: open-graph 1s linear 0s;
	animation: open-graph 1s linear 0s; */
}

.graph-container.close {
	height: 0px;
	/* -webkit-animation: close-graph 1s linear 0s;
	animation: close-graph 1s linear 0s; */
}

.graph-container .graph-datepicker {
	display: none;
	font-size: 0.9em;
	position: absolute;
	z-index: 100;
	left: 4%;
	top: 61px;
}

.graph-container .graph-content {
	width: 100%;
	height: 350px;
	margin: 0px auto;
	background: #FFFFFF;
}

.hvac-zone {
	width: 20%;
	height: 100%;
	text-align: center;
	vertical-align: middle;
}

.hvac-schedule,
.hvac-details,
.hvac-graphs,
.refrig-graphs,
.refrig-schedule,
.refrig-details {
	position: relative;
	top: 20%;
}



.refrig-compressor {
	
}

/* HVAC STYLES */
.hvac-spacetemp,
.hvac-activestage,
.hvac-graphs,
.hvac-targettemp,
.hvac-dischtemp,
.hvac-humidity,
.wtemp-humidity,
.hvac-occupancy,
.hvac-fan,
.hvac-schedule,
.hvac-details,
.refrig-zone,
.refrig-temp,
.refrig-compressor,
.refrig-graphs,
.refrig-schedule,
.refrig-targettemp,
.refrig-mode,
.refrig-coiltemp,
.refrig-doorswitch,
.refrig-evaporator,
.refrig-details,
.schedule-zone,
.schedule-details,
.schedule-equipment-type,
.schedule-global {
	/*display: none;*/
	/*width: 20%;*/
	height: 100%;
	text-align: center;
	vertical-align: middle;
}
.databox .hvac-targettemp {
	font-weight: bold;
}

.databox .hvac-targettemp span {
	outline:  none;
}


.hvac-zone,
.hvac-spacetemp,
.hvac-graphs,
.hvac-schedule,
.hvac-details,
.refrig-zone,
.refrig-temp,
.refrig-compressor,
.refrig-graphs,
.refrig-details,
.schedule-zone,
.schedule-details,
.schedule-equipment-type,
.schedule-global {
	display: table-cell;
}

.hvac-zone,
.refrig-zone {
	padding-left: 10px;
	text-align: center;
}

.schedule-zone {
	width: 25%;
	text-align: left;
	padding: 10px;
	font-weight: bold;
	line-height: 50px;
}

.schedule-details {
	width: 30%;
	text-align: right;
}

.schedule-equipment-type,
.schedule-global {
	width: 20%;
}

.schedule-equipment-type.equipment-type-hvac,
.schedule-equipment-type.equipment-type-lighting 
{
    position: relative;
    top: 10px;
    height: 70px; 
   
	
}

/*
.schedule-equipment-type.equipment-type-lighting {
	background: url("../images/icon_sched_type_light.png") no-repeat center center;
	height: auto;
}
*/

.hvac-schedule img {
	width: 41px;
	margin-top: 22px;
}

.schedule-calendar {
	display: none;
	background-color: #D4D5D7;
}

.schedule-calendar.open {
	display: flex;
}

.schedule-calendar-container {
	display: block;
	box-sizing: border-box;
	width: auto;
	padding-top: 21px;
	padding-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
}

.schedule-calendar-cell {
	background: #F3F3F5;
	box-sizing: border-box;
	width: 120px;

	/* Margins are applied here to eliminate overlapped appeaance from cell borders */
	margin-left: -1px;
	margin-top: -1px;

	padding: 8px 0 5px 0;
	font-size: .75rem;
	border: 1px solid;
	cursor: pointer;
}

.schedule-calendar-cell.over {
	background: #DDDDDD;
}

.schedule-calendar-cell.currentday {
	background: #CCCCCC;
}

.schedule-calendar-cell-contents {
	padding: 5% 0;
}

.schedule-calendar-contents-message,
.schedule-calendar-contents-title {
	text-align: center;
	margin-top: auto;
	margin-bottom: auto;
}

.hvac-zone h3,
.refrig-zone h3 {
	margin: 0;
	color: #000;
	font-size: 0.8em;
}

.hvac-zone h3.button,
.refrig-zone h3.button {
	line-height: 115%;
	max-height: 24px !important;
}

.hvac-details,
.refrig-details {
   background-position-x: right;
	display: none;
}


.hvac-button,
.data-dropdown-element-value.occupancy-button,
.fanbutton {
	background: #fff url("../images/hvac-buttonfill.png") repeat-x;
	background-size: 100% 100%;
	border: 1px solid #a7a9ab;
	-webkit-border-radius: 9px;
	border-radius: 9px;
}

.hvac-button {
	width: 54px;
	/*height: 40px;*/
	/*line-height: 40px;*/
	margin: 0 auto 0 auto;
	cursor: pointer;
	/*margin-top: -10px;*/
}

.mobile-dropdown-occupancy{
    display: table-cell;
    width: 50%;
    padding-right: 10%;
}
.mobile-dropdown-occupancy .data-dropdown-element-label {
    padding-right: 15%;
}
.data-dropdown-element-value.occupancy-button {
    display: table-cell;
	width: 15%;
    margin-left: 20%;
}

.hvac-modeicon,
.occupancy,
.fanstate {
	width: 40px;
	height: 40px;
	margin: 0 auto;
	display: block;
	margin-top: -5px;
}


.occupancy.occ {
	background: url("../images/icon-sprite-occupancy.png") no-repeat;
	background-position: center 0;
}

.occupancy.unocc {
	background: url("../images/icon-sprite-occupancy.png") no-repeat;
	background-position: center -40px;
}


.hvac-spacetemp.drop {
	top: 53px;
	left: 0%;
	width: 47%;
	padding-left: 3%;
	text-align: left;
	z-index: 200;
}

.hvac-activestage.drop {
	top: 53px;
	left: 50%;
	width: 47%;
	padding-left: 3%;
	text-align: left;
	z-index: 200;
}

.activestage {
	width: 60px;
	height: 30px;
	margin: 0 auto 0 auto;
}

.datarow .activestage {
	/*float: right;*/
}

/* Cooling Stages */
.activestage.coolnone {
	background: url("../images/icon-sprite-activestage-cool.png") no-repeat;
	background-position: center top;
}

.activestage.coolone {
	background: url("../images/icon-sprite-activestage-cool.png") no-repeat;
	background-position: center -30px;
}

.activestage.cooltwo {
	background: url("../images/icon-sprite-activestage-cool.png") no-repeat;
	background-position: center -60px;
}

.activestage.coolthree {
	background: url("../images/icon-sprite-activestage-cool.png") no-repeat;
	background-position: center -90px;
}

/* Heating Stages */
.activestage.heatnone {
	background: url("../images/icon-sprite-activestage-heat.png") no-repeat;
	background-position: center top;
}

.activestage.heatone {
	background: url("../images/icon-sprite-activestage-heat.png") no-repeat;
	background-position: center -30px;
}

.activestage.heattwo {
	background: url("../images/icon-sprite-activestage-heat.png") no-repeat;
	background-position: center -60px;
}

.activestage.heatthree {
	background: url("../images/icon-sprite-activestage-heat.png") no-repeat;
	background-position: center -90px;
}

/* Auto Stages */
.activestage.autonone {
	background: url("../images/icon-sprite-activestage-auto.png") no-repeat;
	background-position: center top;
}

.activestage.autoone {
	background: url("../images/icon-sprite-activestage-auto.png") no-repeat;
	background-position: center -30px;
}

.activestage.autotwo {
	background: url("../images/icon-sprite-activestage-auto.png") no-repeat;
	background-position: center -60px;
}

.activestage.autothree {
	background: url("../images/icon-sprite-activestage-auto.png") no-repeat;
	background-position: center -90px;
}

.fanstate.on, .fanstate.on div {
	background: url('../images/fan-on.png') no-repeat;
	animation: spin 2.5s linear infinite;
	-webkit-animation: spin 2.5s linear infinite;
	-moz-animation: spin 2.5s linear infinite;
	background-position: center top;
}

.fanstate.autoon {
	background: url("../images/fan_auto.png") right center no-repeat;
	background-size: auto auto;
}

.fanstate.autoon div {
	background: url("../images/fan-on.png") center center no-repeat;
	background-size: 100% 100%;
	-webkit-animation:spin 2.5s linear infinite,none;
	-moz-animation:spin 2.5s linear infinite,none;
	animation:spin 2.5s linear infinite,none;
	width: 32px;
	height: 32px;
	position: absolute;
	left: 0px;
	top: 0px;
}

.fanstate.off, .fanstate.off div {
	background: url("../images/fan-off.png") no-repeat;
	background-position: center top;
}

.fanstate.autooff, .fanstate.autooff div {
	background: url("../images/fan-off.png") left top no-repeat, url("../images/fan_auto.png") right center no-repeat;
	background-size: 80% 80%, auto auto;
}

/** REFRIGERATION STYLES **/
.datarow .refrigmode {
	text-align: center;
	height: 28px;
	padding-top: 0;
	margin: 7px auto 0 auto;
	width: 32px;
	display: inline-block;
}

.data-dropdown-element-value .refrigmode {
	width: 32px;
	height: 28px;
	margin-left: auto;
	margin-right: auto;
}

.refrigmode p,
.datarow .refrigmode p {
	display: none;
	font-size: .9em;
}

.refrig-temp.drop {
	top: 53px;
	left: 0%;
	width: 47%;
	padding-left: 3%;
	text-align: left;
	z-index: 200;
}

.refrig-compressor.drop {
	top: 53px;
	left: 50%;
	width: 47%;
	padding-left: 3%;
	text-align: left;
	z-index: 200;
}

.drop .label {
	float: left;
}

.fanstate, .door-icon {
	display: inline-block;
	position: relative;
}

.door-icon {
	margin: 5% auto 0 auto;
}

.compressor-icon {
	width: 32px;
	height: 28px;
	margin: 7px auto 0 auto;
	display: inline-block;
}

.refrigmode.normal {
	background: url(../images/icon_refrig_sm_on.png) no-repeat;
	background-position: top center;
}

.refrigmode.defrost, .refrigmode.drain {
	background: url(../images/icon_refrig_sm_defrost-drain.png) no-repeat;
	background-position: top center;
}

.refrigmode.idle, .refrigmode.off {
	background: url(../images/icon_refrig_sm_idle-off.png) no-repeat;
	background-position: top center;
}

.door-icon {
	width: 20px;
	height: 38px;
	margin: 0 auto;
	display: block;
}

.door-icon.closed {
	background: url("../images/icon-sprite-door.png") no-repeat 0 0;
}

.door-icon.opened {
	background: url("../images/icon-sprite-door.png") no-repeat 0 -43px;
}

.compressor-icon {
	width: 32px;
	height: 28px;
	margin: 7px auto 0;
	display: block;
}

.compressor-icon.on {
	background: url(../images/icon_refrig_sm_on.png) no-repeat;
	background-position: top center;
}

.compressor-icon.off {
	background: url(../images/icon_refrig_sm_idle-off.png) no-repeat;
	background-position: top center;
}

.icon-bar {
	display: block;
	width: 30px;
	height: 30px;
	margin: 0 auto;
}

.icon-bar.on {
	background: url('../images/icon_bar_on.png') no-repeat;
}

.icon-bar.off {
	background: url('../images/icon_bar_off.png') no-repeat;
}

/** ENERGY STYLES - ENERGY PAGE **/
/* Large gauge styles */
#energy-charts {
	margin: 0px auto;
}

#energygauge .gauge {
	width: 200px;
	height: 200px;
	background: url("../images/gauge_lg.png") no-repeat;
	background-size: 100%;
	position: relative;
	text-align: center;
	margin: 0 auto;
/*	overflow: hidden; */
}

#energygauge .gauge .indicator {
	width: 200px;
	height: 200px;
}

#energygauge .gauge .peakindicator {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 200px;
	height: 200px;
}

#energygauge .gauge .gauge-info {
	width: 100%;
	position: absolute;
	left: 0px;
	top: 100px;
	text-align: center;
}

#energygauge .gauge .gauge-info h3 {
	color: #000;
	font-size: 1em;
	padding-bottom: 15px;
}

#energygauge .gauge .gauge-info h3 .value {
	font-size: 2.5rem;
	font-weight: normal;
}

#energygauge .gauge .gauge-info h3 .units {
	font-size: .8em;
	font-weight: bold;
	color: #999;
}

#energygauge .gauge .peaktoday {
	font-size: 1.1em;
}

#energygauge .gauge .peaktoday .value {
	font-weight: bold;
}

#energygauge .gauge .peaktoday .units {
	font-size: .8em;
	font-weight: bold;
	color: #999;
}

#energygauge .peaktodayts {
	font-size: 1em;
}

/* Overrides when there is no egauge */
#energygauge.no-egauge .gauge {
	width: 250px;
	height: 250px;
}

#energygauge.no-egauge .gauge .indicator {
	width: 250px;
	height: 250px;
}

#energygauge.no-egauge .gauge .peakindicator {
	width: 250px;
	height: 250px;
}

#energygauge.no-egauge .gauge .gauge-info {
	/*top: 65px;*/
	top: 100px;
}


/* Energy Graph */
#energy-graph-container {
	width: 95%;
	margin: 0 auto 10px;
	position: relative;
}

#energy-graph-container #energy-graph-inner {
	position: relative;
}

/* Energy Pie Chart - eGauge */
#energy-pie-chart-container {
	margin: 10px auto;
}

#energy-pie-chart {
	height: 200px;
	width: 200px;
	margin: 0px auto;
}

#energy-graph-timeframe {
	margin-bottom: 10px;
}

#energy-pie-type {
	text-align: center;
	margin-top: 10px;
}

#energy-pie-type-select {
	display: inline-block;
}

#energy-pie-type-select span {
	background: #D6D6D6;
	color: #8C8C8C;
	border-radius: 4px;
	margin-right: 5px;
	cursor: pointer;
	float: left;
	width: 120px;
	padding: 5px 0px;
}

#energy-pie-type-select span:last-child {
	margin: 0px;
}

#energy-pie-type-select span.selected {
	background: #828282;
	color: #FFF;
}

#energy-graph-container .graph-datepicker {
	display: none;
	position: absolute;
	left: 10px;
	top: 6px;
	z-index: 161;
	font-size: 0.9em;
}

#energy-graph-container #energy-graph {
	width: 100%;
	height: 300px;
}

#energy-graph-container #energy-graph .highcharts-container {
	left: 0 !important;
	width: inherit !important;
	height: inherit !important;
}

/** TEMPERATURE STYLES **/
#temperature-graph-container {
	width: 95%;
	margin: 10px auto;
	position: relative;
	height: 370px;
}

#temperature-graph-container .graph-datepicker{
	display: none;
	position: absolute;
	left: 10px;
	top: 46px;
	z-index: 161;
	font-size: 0.9em;
}

#temperature-graph-container #temperature-graph,
#wtemperature-graph-container #wtemperature-graph {
	width: 100%;
	height: 340px;
	border: 1px solid #9B9B9D;
}

#temperature-graph-container #temperature-graph .highcharts-container {
	left: 0 !important;
	width: inherit !important;
	height: inherit !important;
}

.wtemp-humidity.bigdata {
	margin-top: .4em;
}

/** FOODPROBE STYLES **/
.overflow-visible{
    overflow:visible !important;
}

#foodprobe-report-container{
	padding:10px;
}
#foodprobe-report-container table tr th:first-child{
	min-width:187px;
}

#foodprobe-report-container table td,th{
	border: 1px solid #ccc;
	padding:5px;
	text-align: center;
}

#foodprobe-report-container table{
	width:100%;
	border-collapse: collapse;
}

#foodprobe-report-dates{
	display:none;
	position:absolute;
	border:1px solid #ccc;
	margin:5px;
	background-color:#fff;
}

#foodprobe-report-dates .active{
	background-color: #fff !important;
	color:#000;
}
.food-probe-week-selected{
	background-color: #eee;
}
#food-probe-report{
	margin:10px;
	padding:10px;
}

#foodprobe-report-save{
	background-image:url("../images/icon_bars.png");
	background-position: center;
	background-repeat: no-repeat;
	display:inline-block;
	width: 20px;
	height:17px;
	float:right;
	border:1px solid #fff;
	border-radius:5px;
	padding:2px;
	display:none;
}

#foodprobe-report-save:hover{
	border:1px solid #ccc;
	cursor:pointer;
}

#foodprobe-report-current{
	font-size:18px;
	margin-right:5px;
	display:inline-block;
	width:200px;
}

#food-probe-report input[type="button"]{
	width:75px;
	height:22px;
}

.food-probe-tab{
	display:none;
}

.food-probe-tab.active{
	display:block !important;
}

#food-probe-tabs {
	margin-top:10px;
}
#food-probe-tabs div{
	display:inline-block;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background: #ccc;
	padding:8px 30px;
	font-size: 19px;
	color:#545454;
	opacity:0.5;
	font-weight: bold;
	cursor:pointer;
	margin:5px 10px;
	height:27px;
}

#food-probe-tabs div.active{
	opacity:1;
}

div#food-probe-tab-download{
	background: transparent;
	float:right;
	padding:0;
}

@media only screen and (orientation : portrait) {
	div#food-probe-tab-download{
		float:none;
	}

	.hidden-center-box {
		display: none!important;
	}

	.light-hidden-center-box {
		display: none!important;
	}

	.hidden-refrig-box {
		display: none!important;
	}
	

}


@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
 	.mobile-nav {
  		overflow: scroll!important;
  	}

}

@media (min-width:801px)  { 
/* tablet, landscape iPad, lo-res laptops ands desktops */ 
	nav {
		/*overflow: scroll!important;*/
	}
}

div#food-probe-tab-download #food-probe-download-data-graph{
	padding:0;
}

.foodprobe-graph-container .graph-timeframe{
    height: 30px;
    float: left;
    width: 100%;
    margin-bottom:0;
    margin-left:10px;
}
.foodprobe-graph-container .foodprobe-graph{
	height:350px;
}
.foodprobe-graph-container {
	width: 100%;
	margin: 10px auto;
	position: relative;
	height: 400px;
}
.foodprobe-graph-container .graph-datepicker {
	/*display: none;*/
	position: absolute;
	left: 10px;
	top: 55px;
	z-index: 161;
	font-size: 0.9em;
}

/** VIEW SCHEDULE STYLES **/
#view-schedule {
	width: 100%;
	font-size: 1.1em;
}

#view-schedule tr.schedule-row {
	background: url("../images/datarow_fill.png") repeat-x;
	height: 80px;
}

#view-schedule tr:last-child td {
	border-bottom: 1px solid #9B9B9D;
}

#view-schedule th, #view-schedule td {
	width: 8%;
	padding: 10px 1%;
}

#view-schedule .zonename {
	text-align: left;
}

#view-schedule .event {
	text-align: center;
}

#view-schedule .event.hvac {
	background: url("../images/icon_sched_type_hvac.png") 10% center no-repeat;
}

#view-schedule .event.lighting {
	background: url("../images/icon_sched_type_light.png") 10% center no-repeat;
}

#view-schedule .day {
	text-align: center;
}


#view-schedule .day.currentday {
	font-weight: bold;
}

#view-schedule .edit {
	text-align: center;
}

/** SCHEDULING STYLES **/
/* SCHEDULE SELECTION STYLES */
#selecttypeandzone {
	width: 95%;
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
}

/* Select Type Styling */
#selecttype {
	position: relative;
	width: 20%;
	max-width: 70px;
}

#selecttype #currenttype {
	width: 100%;
	height: 60px;
	padding-top: 5px;
	float: left;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #959499;
	position: relative;
	text-align: center;
	cursor: pointer;

	background: -webkit-linear-gradient(#F4F4F4, #DDDEE0); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#F4F4F4, #DDDEE0); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#F4F4F4, #DDDEE0); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#F4F4F4, #DDDEE0); /* Standard syntax */
}

#currenttype .selecticon {
	margin-top: 5px;
	width: 60%;
}

#currenttype p {
	margin: 0;
	font-size: 1em;
}

#currenttype p.heat {
	color: #ed2801;
}

#currenttype p.cool {
	color: #1b75bb;
}

#currenttype .selectarrow {
	position: absolute;
	bottom: 10px;
	right: 10px;
	width: 20%;
}

#selecttypecontainer {
	display: none;
	position: absolute;
	text-align: center;
	width: 100%;
	top: 66px;
	z-index: 210;
	border: 1px solid #999999;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	background: #FFFFFF;
}

#selecttypecontainer ul {
	list-style: none;
}

#selecttypecontainer ul li {
	cursor: pointer;
	padding: 5px 0px;
	width: 100%;
	height: 60px;
	background-size: 80%;
	background-position: center center;
	background-repeat: no-repeat;
}

#selecttypecontainer ul li#selectheatcool {
	background-image: url("../images/selecticon_heatcool.png");
}

#selecttypecontainer ul li#selectlighting {
	background-image: url("../images/selecticon_lightoff.png");
}

/* Select Zone Styling */
#selectzone {
	width: 35%;
	height: 42px;
	margin: 20px 0 0 5%;
	float: left;
	position: relative;
	z-index: 100;
}

#selectzone h3 a.locationlist {
	font-size: .8125em;
	font-weight: normal;
	color: #1b75bb;
	padding-left: 25px;
	text-decoration: underline;
}

#locationlistbox {
	width: 60%;
	height: auto;
	background: #fff;
	padding: 20px;
	-webkit-border-radius: 9px;
	border-radius: 9px;
	border: 2px solid #999;
	-webkit-box-shadow: 0 0 15px 5px #999;
	box-shadow: 0 0 15px 5px #999;
	z-index: 1000;
	position: relative;
	left: 100%;
	top: -100px;
}

#locationlistbox ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#locationlistbox ul li {
	padding: 5px 10px;
	color: #555;
	font-size: .8125em;
}

#selectzone #currentzone {
	display: block;
	height: 30px;
	padding-left: 10px;
	padding-top: 10px;
	background: url("../images/select_fill.png") repeat-x;
	border-top: 1px solid #a7a9ab;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	border-left: 1px solid #a7a9ab;
	position: relative;
	z-index: 2;
	cursor: pointer;
	font-size: 1.1em;
}

#selectzone #currentzone .arrow,
#selectzone #selectzonecontainer .arrow,
#selectzone #selectdaycontainer .arrow{
	position: absolute;
	top: 16px;
	right: 15px;
}

.selectday-layout,
.selectzone-layout {
	display: block;
	box-sizing: border-box;
	width: 140px;
	height: 60px;
	margin-left: auto;
	margin-right: auto;
	vertical-align: middle;
}

/*
#selectdaycontainer,
#selectzonecontainer {
	display: none;
	position: relative;
	top: -20px;
	width: 100%;
	z-index: 300;
}
*/
#selectdaycontainer,
#selectzonecontainer {
	display: none;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #999999;
	-webkit-border-radius: 9px;
	border-radius: 9px;
	width: 200px;
	text-align: center;
	vertical-align: middle;
	margin: 10px auto;
	position: fixed;
	z-index: 2002;
	top: 10px;
	left: 50%;
	margin-left: -100px;
	opacity: 1.0;
}

#selectzonecontainer {
	display: none;
}

#selectdaycontainer .control-confirm-ok,
#selectzonecontainer .control-confirm-ok {
	background-size: 100% 100%;
	margin: 4px auto 8px auto;
	width: 36px;
	height: 36px;
}

.control,
.dual-control {
	display: none;
	position: fixed;
	box-sizing: border-box;

	top: 50%;
	left: 50%;
	margin-left: -150px;
	margin-top: -125px;
	width: 300px;
	height: 250px;
	opacity: 1.0;

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


#selectdaycontainer ul,
#selectzonecontainer ul {
	list-style: none;
	background: #FFFFFF;
}

#selectdaycontainer ul li,
#selectzonecontainer ul li {
	height: 30px;
	padding-left: 10px;
	padding-top: 10px;
	position: relative;
	cursor: pointer;
	font-size: 1.1em;
}
#selectdaycontainer ul li.selected,
#selectzonecontainer ul li.selected {
	background: #818286;
	color: #FFFFFF;
}

#selectdaycontainer ul li.hover,
#selectzonecontainer ul li.hover {
	background: #C2C2C2;
}

#selectdaycontainer ul li:last-child,
#selectzonecontainer ul li:last-child {
	border: 0px;
}

/* Checkbox styles */
.main .checkbox {
	width: 25px;
	height: 25px;
	border: 3px solid;
	border-color: #999 #c1c1c1 #c1c1c1 #999;
	background: #fff;
	vertical-align: middle;
	cursor: pointer;
}

.main .checkbox.left {
	float: left;
	margin-right: 10px;
}

.main .checkbox.checked {
	background: url("../images/checkmark.png") no-repeat center center #FFFFFF;
}

.main .checkbox.disabled {
	background-color: #CCC;
	cursor: auto;
}

/* HOUR SCHEDULE STYLES */
#schedule-back {
	float: right;
	font-weight: bold;
	margin: 5px 5px 0px 0px;
}

#scheduleui {
	display: inline-block;
	box-sizing: border-box;
	width: 48%;
	height: 480px;
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	background: #BDBEC0;

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	vertical-align: middle;
}







/* Fix for Galaxy Tab 2 10.1 portrait mode, probably similar for many other devices too*/
@media only screen and (orientation : portrait) {
	#scalenumbers {
		width: 100%;
	}

	.home-column .main {
		grid-template-columns: 50% 50%;
	}

	#temperature-monitor .temperature .databox-wrapper {
		display: block;
		grid-template-columns: auto;
		justify-content: inherit;
	}

	#temperature-monitor .databox-wrapper #wtemperature5 {
		grid-column: span 2;
	}

	.wtemp-boxes {
		width: 200px;
		margin: 10px auto;
	} 

	#temperature-monitor #temperature1,
	#temperature-monitor #temperature2, 
	#temperature-monitor #temperature3, 
	#temperature-monitor #temperature4 {
		width: 200px;
		margin: 10px auto;
	}

}

#scalenumbers {
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	width: 92%;
	height: auto;
	margin-left: 4%;
	margin-right: 4%;
	margin-top: 10%;
}

.time-slice {
	display: block;
	box-sizing: border-box;
	font-size: 75%;
	font-weight: bold;
	color: #fff;
	text-align: left;
	text-shadow: 1px 1px #000;
}

.time-slice .time-value {
	width: 5%;
	margin-left: auto;
	margin-right: auto;
}

.time-slice .time-value,
.time-slice .time-measure {
	display: inline-block;
	vertical-align: middle;
}

.time-slice .time-measure {
	width: 90%;
	height: 1px;
	margin: auto;
	margin-top: 2px;
	margin-bottom: 2px;
	margin-left: auto;
	margin-right: auto;
	background: #999999;
	box-shadow: 1px 1px #fff;
}

.time-slice .time-measure.two-char {
	width: 85%;
}

.time-slice .time-value.two-char {
	width: 10%;
}

.time-slice .time-measure.three-char {
	width: 80%;
}

.time-slice .time-value.three-char {
	width: 15%;
}

#scalenumbers .schedule-section {
	display: inline-block;
	position: absolute;
	box-sizing: border-box;
	background-repeat: repeat-y;
	left: 50%;
	width: 44px;
	height: 31%;
	margin-left: -22px;
	z-index: 200;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	text-align: center;
}

#scalenumbers .schedule-section {
	/*background-image: url("../images/barfill_night_vert.png");*/
	background: #006090;
	color: #fff;
}

#scalenumbers .schedule-section.on {
	/*background-image: url("../images/barfill_daytime_vert.png");*/
	background: #FDE185;
	color: #000;
}

#scalenumbers .schedule-section:nth-child(1) {
	top: 2%;
}

#scalenumbers .schedule-section:nth-child(2) {
	top: 33%;
}

#scalenumbers .schedule-section:nth-child(3) {
	top: 64%;
}

.schedule-icon {
	display: block;
	position: relative;
	top: 50%;
	background-repeat: no-repeat;
	width: 45px;
	height: 60px;
	margin: -24px auto 0 auto;
	cursor: pointer;
}

.schedule-icon.bulb {
	background-image: url("../images/icon-sprite-lights.png");
	background-position: center 0px;
}

.schedule-icon.bulb.on {
	background-image: url("../images/icon-sprite-lights.png");
	background-position: center -60px;
}

.schedule-icon.hvac {
	background-image: url("../images/icon-sprite-occupancy.png");
	background-position: center bottom;
	width: 40px;
	height: 40px;
	margin-top: -18px;
	background-color: rgba(255,255,255,1);
	box-shadow: 0px 0px 8px 1px #FFF;
	border-radius: 50%;
	transform: scale(.8);
}

.schedule-icon.hvac.on {
	background-image: url("../images/icon-sprite-occupancy.png");
	background-position: center 3px;
}

.slider {
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	position: absolute;
	width: 44px;
	height: 24px;
	z-index: 200;
	cursor: pointer;
}

.slider.primary {
	background-image: url("../images/icon_slider-top.png");
}

.slider.secondary {
	background-image: url("../images/icon_slider-bottom.png");
}

.slider-caption {
	display: inline-block;
	position: absolute;
	box-sizing: border-box;
	background-color: white;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	text-align: center;
	z-index: 200;
}

.slider.primary,
.slider.secondary {
	display: inline-block;
	vertical-align: middle;
	position: absolute;
}

.slider-caption.primary,
.slider-caption.secondary {
	display: inline-block;
	vertical-align: middle;
	font-weight: bold;
	font-size: 0.6rem;
	margin-left: -50px;
	padding: 0 3px;
}

#time-container {
	width: 100%;
	height: 100%;
	z-index: 100;
	position: relative;
}



/** SETTINGS STYLES **/
h2.settingstitle {
	max-width: 300px;
	float: left;
}


.zone-row {
	width: 100%;
	height: 65px;
	/*background: #f3f3f3;*/
	background-image: linear-gradient(#efefef, #e3e3e3);
	border-top: 1px solid #fff;
	display: flex;
}

.hvac-setting-desktop-row .hvac {
	display: flex;
}


.zone-row.lighting, .zone-row.users {
	width: 15%;
	float: left;
	height: 65px;
	/* background: url("../images/settings_bar_fill.png") repeat-x; */
	background-image: linear-gradient(#efefef, #e3e3e3);
	background-size: auto 100%;
	float: left;
	clear: none;
	margin: 1px 5px;
	border: 1px solid #cacaca;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	margin-bottom: 10px;
}

.zone-row.lighting {
	height: auto;
}

.zone-row.alt {
	background-color: #f5f5f5;
	background-image: none;
}

.setting {
	/*width: 12.3%;*/
	flex: 1;
	float: left;
	height: 65px;
	text-align: center;
	position: relative;
}


.setting .setting-button {
	background: #fff url("../images/hvac-buttonfill.png") repeat-x;
	background-size: 100% 100%;
	border: 1px solid #a7a9ab;
	-webkit-border-radius: 9px;
	border-radius: 9px;
	width: 90%;
	height: 34px;
	margin: 0 auto;
	cursor: pointer;
	vertical-align: middle;
	color: #666;
	-webkit-text-shadow: 1px 1px 0 #fff;
	text-shadow: 1px 1px 0 #fff;
	text-align: center;
}

#hvaczone1row, #hvaczone2row {
	flex: 2;
}

.hvac-lock {
	width: 4%;
}

.hvac-lock .lock-button {
	width: 100%;
/*	display: none; */
}

.hvac-lock .lock-button.editable {
	cursor: pointer;
}

.hvac-lock .lock-icon {
	width: 16px;
	height: 25px;
	background: url("../images/icon_sprite_lock-thermostat.png") no-repeat;
	background-position: 0px -25px;
	margin: 20px auto 0 auto;
}

.hvac-lock .lock-icon.active {
	background-position: 0px 0px;
}

.lock-message-box {
	width: 260px;
	padding: 15px;
	background: #fff;
	border: 1px solid #3c3c3c;
	border-radius: 11px;
	box-shadow: 5px 5px 10px 0px rgba(158,158,158,1);
	z-index: 2000;
	position: relative;
	top: 0;
	left: 50%;
	margin-left: -130px;
	/* display: table; */
	display: none;
}
.lock-message-box.active {
	display: table;
}

.lock-message {
	font-size: 1em;
	color: #777;
}

.lock-title {
	width: 100%;
	font-size: 1.1em;
	margin-bottom: 7px;
	text-align: center;
}

.data-dropdown-element-wrapper .setting-button,
.data-dropdown-element-wrapper-final .setting-button {
	background: #fff url("../images/hvac-buttonfill.png") repeat-x;
	background-size: 100% 100%;
	border: 1px solid #a7a9ab;
	-webkit-border-radius: 9px;
	border-radius: 9px;
	width: 54px;
	height: 40px;
	cursor: pointer;
}

.data-dropdown-element-wrapper .setting-button.lighting {
	width: 84px;
}

/* Many mobile settings styles moved to mobile.css */

.zone-row.users .setting-button {
	margin: 14px auto;
}

.zone-row.users .setting .users-name {
	font-size: 1em;
	line-height: 1;
}

.user-zone-settings .user-you,
.zone-row.users .setting .user-you {
	font-size: 0.75em;
}

.user-zone-settings .user-you {
	display: inline;
	margin: 10px;
}

.zone-row.lighting .setting, .zone-row.users .setting {
	width: 100%;
	/*float: left;*/
	/*height: 65px;*/
	text-align: center;
}

.setting .setting-label {
	width: 100%;
	height: 20px;
	padding-top: 5px;
	font-size: .75em;
	color: #444;
}

.setting .setting-button h3 {
	line-height: 34px;
}

/* Lighting Settings */
.photocellbox {
	margin: 10px 0 0 0;
}

.photocell {
	background: url("../images/photocell_slidetrack.png") no-repeat;
	background-position: center bottom;
	background-size: 85% 100%;
	position: relative;
	width: 86%;
	height: 86px;
	margin: 0 auto;
}

.photocellslider {
	position: absolute;
	left: 0px;
	cursor: pointer;
}

.photocellbox .enablebox {
	margin: 0 auto 5px;
	width: 175px;
	height: 40px;
	font-weight: bold;
}

.photocellbox .enablebox .checkbox {
	float: left;
}

.photocellbox .enablebox .enabletext {
	padding: 5px;
	float: left;
}

/* Energy Settings */
#pricekwh-label {
	margin-bottom: 5px;
	font-size: 1em;
	color: #444;
	text-align: center;
}

.pricekwh {
	margin: 0px auto;
	text-align: center;
}

.pricekwh.button {
	background: #fff url("../images/hvac-buttonfill.png") repeat-x;
	background-size: auto 100%;
	border: 1px solid #a7a9ab;
	-webkit-border-radius: 9px;
	border-radius: 9px;
	width:100px;
	height: 60px;
	padding-top: 20px;
	cursor: pointer;
	vertical-align: middle;
	color: #666;
	-webkit-text-shadow: 1px 1px 0 #fff;
	text-shadow: 1px 1px 0 #fff;
}

/* Users and Alerts Settings Styles */
.settings-group {
	width: 94%;
	margin: 25px 1%;
	padding: 2%;
	border: 3px solid #cacaca;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	color: #444;
}

.settings-group h3 {
	margin: 0 0 10px 0;
}

.settings-group .user-box {
	display: block;
	float: left;
	width: 20%;
	border: 1px solid #cacaca;
	height: 130px;
	font-size: 0.9375em;
	min-width: 128px;
}

.settings-group .user-box label {
	padding: 10px 5%;
	border-bottom: 1px solid #cacaca;
	display: block;
}

.settings-group .user-box .input-box {
	padding: 10px 5%;
}

.settings-group .user-box .input-box input, .settings-group .user-box .input-box select {
	width: 60%;
	max-width: 160px;
	padding: 2px;
}

.settings-group .user-box .showchar {
	font-size: .9em;
	padding: 5px;
	background: #fff url("../images/hvac-buttonfill.png") repeat-x;
	background-size: 100% 100%;
	border: 1px solid #999;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	cursor: pointer;
	width: 110px;
	margin: 12px 0px 0px;
	text-align: center;
}

.settings-group .buttons {
	margin-top: 20px;
}

.deleteuser, .edituser, .editsubscription {
	display: inline-block;
	background: #fff url("../images/hvac-buttonfill.png") repeat-x;
	background-size: 100% 100%;
	border: 1px solid #999;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	width: 90%;
	padding: 5px 10px;
	cursor: pointer;
	font-size: .8125em;
	height: 32px;
	line-height: 32px;
	width: 125px;
	vertical-align: middle;
	-webkit-opacity: .7;
	opacity: .7;
	float: left;
}

.settings-group table {
	width: 100%;
	border-collapse: collapse;
}

.settings-group table tbody tr td {
	background: #fff;
	font-size: .9375em;
	padding: 10px;
	border: 1px solid #cacaca;
}

.settings-group .table {
	margin-bottom: 16px;
}

.settings-group .table .overunder {
	background: #fff;
	font-size: .9375em;
	padding: 1% 0;
	border: 1px solid #cacaca;
	border-collapse: collapse;
	width: 49.8%;
	float: left;
	text-align: center;
}

.settings-group .inside {
	width: 100%;
	margin-top: 6px;
	text-align: center;
}

.settings-group .inside .whether {
	display: inline-block;
	width: auto;
	margin-top: 6px;
	white-space: nowrap;
}

.settings-group .inside .carrier {
	display: inline-block;
	width: auto;
	margin-top: 6px;
	margin-left: 16px;
	white-space: nowrap;
}

.edituser, .editsubscription {
	float: right;
}

.editsubscription {
	width: 150px;
}

.deleteuser img, .edituser img, .editsubscription img {
	float: left;
	vertical-align: middle;
}

/* Selection Pop-ups */
.setselection {
	width: 10%;
	height: auto;
	padding: 10px;
	background: #fff;
	border: 2px solid #999;
	-webkit-border-radius: 9px;
	border-radius: 9px;
	-webkit-box-shadow: 0 0 5px 5px #999;
	box-shadow: 0 0 10px 0 #999;
	opacity: 0;
	position: absolute;
	left: -100%;
	z-index: 1000;
	text-align: center;
}

.setselection p {
	width: 90%;
	padding: 5px 5%;
	border-bottom: 1px solid #cacaca;
	margin-bottom: 2px;
	cursor: pointer;
}

.setselection p:last-child {
	width: 90%;
	padding: 5px 5%;
	border-bottom: none;
	margin-bottom: 2px;
}
/** END SETTINGS STYLES **/

/** CORPORATE OVERVIEW STYLES **/
#brandmap {
	/*display: none;*/
	width: 45%;
	height: 1px; /* automatically resized to fit the page */
	position: absolute;
	top: 0px;
	left: 0px;
}

#locations {
	width: 55%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 45%;
	overflow-y: auto;
}

.marker-popup {
	text-decoration: none;
	color: #666;
	text-align: center;
}

.marker-popup span {
	font-weight: bold;
	font-size: 1.1em;
	color: #777;
}

/* Tier 1 Bars (Brand) */
.tier1bar {
	width: 100%;
	background: #d1d1d1;
	margin: 0 0 1px 0;
	padding: 0;
	cursor: pointer;
	clear: both;
}

.tier1bar.hidden {
	display: none;
}

.tier1bar table {
	width: 100%;
	height: 100%;
}

.tier1bar .brandlogo {
	width: 10%;
	text-align: center;
}

.tier1bar .brandlogo img {
	vertical-align: middle;
	padding-left: 10px;
	max-width: 50px;
	/* max-height: 50px; */
	max-height: 40px;
}

.tier1bar .brandname {
	width: 60%;
}

.main .tier1bar .brandname h2 {
	font-size: 1.25em;
	color: #000;
	margin: 0px 0px 0px 10px;
	padding: 0px;
	vertical-align: middle;
	text-align: left;
}

.tier1bar > .labelrow {
	width: 100%;
	height: 50px;
	padding: 0px;
}

.tier1bar > .labelrow .column {
	width: 16%;
	height: 30px;
	text-align: center;
	margin-top: 55px;
}

.tier1bar > .labelrow .information-column {
	width: 30%;
	height: 50px;
	margin-top: 20px;
}

.tier1bar > .labelrow .information-column .alarm-icon {
	/* width: 28px;
	height: 28px; */
	width: 20px;
	height:20px;
	margin-right: 5px;
	float: right;
}

.tier1bar > .labelrow .column .tier1-arrow-icon {
	/* display: none; */
	/* width: 32px; */
	/* height: 16px; */
	width: 20px;
	height: 10px;	
	display: block;
	margin: 0 auto;
	cursor: pointer;
}

.tier1bar > .labelrow .column .tier1-arrow-icon.close {
	/* display: none; */
	background: url("../images/tier1bar_arrow_close.png") no-repeat;
}

.tier1bar > .labelrow .column .tier1-arrow-icon.open {
	/* display: none; */
	background: url("../images/tier1bar_arrow_open.png") no-repeat;
}

/* Tier 2 Bars */
.tier2bars{
	width: 100%;
/* 	height: 0; */
	display: none;
	overflow: hidden;
}
.tier2bars.opened {
	height: fit-content;
	display: block;
	overflow-x: visible;
	visibility: visible;
}
.tier2bars.closed {
	height: 0;
	display: none;
	overflow: hidden;
}

.tier2bar {
	width: 100%;
	height: 50px;
	background: #fff;
	border-bottom: 1px solid #cacaca;
	clear: both;
	cursor: default;
	overflow: hidden;
}

.tier2bar.hidden {
 	display: none; 
}

.tier2bar .tier2name {
	width: 82%;
	height: 46px;
	line-height: 43px;
	float: left;
	text-transform: capitalize;
	padding-left: 2%;
	font-weight: bold;
	padding-top: 4px;
	font-size: smaller;
}
/*
.tier2name .address {
	visibility: hidden;
}
*/
.tier2name .store-number {
	padding-right: 2%;
}

.tier2bar .column {
	font-weight: normal;
	font-size: .9em;
	padding-top: 9px;

	width: 16%;
	height: 41px;
	line-height: 41px;
	float: left;
	text-align: center;
}

.tier2bar .column.large-column {
	width: 0%;
	display: none;
}

.tier2bar .column.view-location img {
	width: 35px;
}

.tier2bar .tagbutton {
	/*display: block;*/
	float: left;
	padding: 5px 7px;
	margin: 8px 5px 5px 0px;
	text-align: center;
	font-size: .75em;
	background: #f3f3f3;
	color: #444;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	line-height: 1;
	cursor: pointer;
}

.tag1, .tag4 {
	display: none;
}

.tier2bar .tagbutton.active {
	background: #D1D2D4;
}

#tagsearch {
	width: 10%;
	height: 35px;
	position: absolute;
	left: 3%;
	top: 25px;
	left: 15%;
	top: -8px;
	background: none;
	z-index: 10;
}

#tagsearch #searchbox {
	width: 180%;
	height: 30px;
	float: left;
	margin-right: 5px;
	margin-top: 20px;
	padding-left: 10px;
	color: #777;
	margin-left: 90px;
}
/** END CORPORATE OVERVIEW STYLES **/

/* Mobile alarms and .alarms-mobile > styles moved to mobile.css */

/* Mobile li.alarm.details moved to mobile.css */
.datarow > .schedule-details {
	background-image: url("../images/tier1bar_arrow_open.png") ;
	background-position: center center;
	background-repeat: no-repeat;
	text-align: right;
	padding-right: 10px;
	height: auto;
}

.datarow > .schedule-details {
	background-position: center left;
}

/* Mobile li.alarm.details. moved to mobile.css */
.datarow > .schedule-details.open {
	background-image: url("../images/tier1bar_arrow_close.png");
}

/* Multiple .alarms-mobile styles not shared by non-mobile elements moved to mobile.css */


.critical {
	background: #EC1A23;
	color: #fff;
}

.caution {
	background: #FAE282;
}

.info {
	background: #71C9F7;
}

/** ALARM STYLES **/
.multiinfo,
.alarminfo,
.infoinfo,
.cautioninfo {
	display: none;
	position: absolute;
	z-index: 1002;
	width: 250px;
	padding: 10px;
	left: 50%;
	top: 30%;
	margin-left: -137px;
	text-align: center;
	border: 2px solid #999;
	-webkit-border-radius: 9px;
	border-radius: 9px;
	-webkit-box-shadow: 0 0 20px -2px #333;
	box-shadow: 0 0 20px -2px #333;
	background-color: #ea733e;
}

.infoinfo {
	background-color: #6dcff6;
}

.cautioninfo {
	background-color: #ffd87d;
}

/* use for multiple alarms and/or cautions and info */
.rowalarm,
.rowcaution,
.rowinfo {
	width: 95%;
	padding: 5px;
	border: 1px solid #fff;
	font-size: .9375em;
}

.rowalarm {
	background: #ea733e;
	color: #fff;
}

.rowcaution {
	background: #ffd87d;
	color: #000;
}

.rowinfo {
	background: #6dcff6;
	color: #000;
}

/* Normal Alarms */
.alarm-title,
.alarm-content {
	font-size: .9375em;
	color: #fff;
	margin-bottom: 5px;
}

.alarm-title {
	font-weight: bold;
}

.alarminfo .okbutton {
	display: inline-block;
	padding: 5px 10px;
	background-color: #fff;
	background-size: auto 100%;
	border: 1px solid #cc450a;
	-webkit-border-radius: 5px;
	color: #cc450a;
	border-radius: 5px;
	font-size: .8125em;
	cursor: pointer;
}

/* Caution Alarms */
.caution-title,
.caution-content,
.info-title,
.info-content {
	font-size: .9375em;
	color: #444;
	margin-bottom: 5px;
}

.caution-title {
	font-weight: bold;
}

.info-title {
	font-weight: bold;
}

.caution-content p {
	padding:10px 5px;
	margin: 10px 0;
	/*background-color:#ea733e;*/
	border-radius: 5px;
}

.schedule-controls-header {
	vertical-align: baseline;
}

/* RESPONSIVE SCHEDULE PAGE STYLE */
.schedule-controls-header {
	display: inline-block;
	box-sizing: border-box;
	width: 50%;
	height: 480px;

	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;

	padding-bottom: 30px;
	padding-left: 10px;
	padding-right: 10px;

	background: #BDBEC0;

	vertical-align: middle;
}

.schedule-controls-header > .schedule-controls-left,
.schedule-controls-header > .schedule-controls-right {
	display: block;
	box-sizing: border-box;
	margin: 5px;
}

.schedule-controls-header > .schedule-controls-left {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.schedule-controls-header > .schedule-controls-right {
	display: none;
	margin-right: 0px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.schedule-controls-header > .schedule-controls-left .selectzone,
.schedule-controls-header > .schedule-controls-left .selectday {
	display: table;
	z-index: 100;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
	text-align: center;
	border: 2px solid #999999;
	cursor: pointer;
	background: url("../images/select_dn_arrow.png") #FFFFFF no-repeat 90% center;
}

.schedule-controls-header > .schedule-controls-left .selectday .currentday,
.schedule-controls-header > .schedule-controls-left .selectzone .currentzone {
	box-sizing: border-box;
	font-size: 0.9rem;
	font-weight: bold;
	display: table-cell;
	vertical-align: middle;
	width: 100px;
	padding-right: 35px;
}

.schedule-controls-right .schedule-control-lighting {
	display: block;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	vertical-align: middle;
	box-sizing: border-box;
	width: 300px;
	height: 68px;
}

.schedule-control-lighting .control-confirm-ok {
	display: inline-block;
	/*border: 1px solid #999999;*/
	border-radius: 6px;
	background-size: 101% 101%;
	cursor: pointer;
}

.schedule-control-lighting .control-confirm-ok.toggle {
	border-radius: 0px;
	/*border: 2px solid #999999;*/
}

.schedule-control-lighting .control-confirm-ok.activated {
	opacity: 1;
}

.schedule-control-lighting .control-caption {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: bold;
}

.schedule-control-lighting:nth-child(1) .control-caption,
.schedule-control-lighting:nth-child(2) .control-caption,
.schedule-control-lighting:nth-child(3) .control-caption {
	vertical-align: 12px;
}

.schedule-control-lighting:nth-child(2) .control-caption,
.schedule-control-lighting:nth-child(3) .control-caption {
	vertical-align: 20px;
}

.dual-control {
	box-sizing: border-box;
	background: #fff url("../images/hvac-buttonfill.png") repeat-x;
	background-size: 100% 100%;
	border: 1px solid #a7a9ab;
	-webkit-border-radius: 9px;
	border-radius: 9px;
	width: 300px;
	height: 300px;
	text-align: center;
	vertical-align: middle;
}

.control-confirm-input-cell > .control-confirm-ok,
.control-confirm-input-cell > .control-confirm-cancel {
	width: 56px;
	height: 56px;
	background-size: 100% 100%;
	border: 1px solid #999999;
}

.dual-control > .control-confirm-cancel {
	position: absolute;
	z-index: 2003;
	background-size: 100% 100%;
	top: 3%;
	left: 86%;
	width: 33px;
	height: 33px;
}

.dual-control > .control-confirm-ok {
	position: absolute;
	z-index: 2003;
	background-size: 100% 100%;
	top: 65%;
	left: 43%;
	width: 40px;
	height: 40px;
}

.dual-control .control-knob-caption,
.dual-control .control-knob-increase,
.dual-control .control-knob-decrease {
	display: block;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 110px;
	height: 94px;
	opacity: 0.6;
	margin: 0 auto;
}

.dual-control .control-knob-caption {
	display: table-cell;
	vertical-align: bottom;
}

.dual-control .control-knob-increase,
.dual-control .control-knob-decrease {
	cursor: pointer;
}

.dual-control .control-knob-increase.open,
.dual-control .control-knob-decrease.open,
.dual-control .control-knob-display {
	display: block;
}

.dual-control .control-knob-increase,
.dual-control .control-knob-decrease,
.dual-control .control-knob-caption.close {
	display: none;
}

.dual-control .control-knob-increase:hover,
.dual-control .control-knob-decrease:hover {
	opacity: 1;
}

.dual-control .control-knob-caption,
.dual-control .control-knob-display {
	margin: 0 auto;
}

.dual-control .control-knob-display {
	cursor: pointer;
}

.dual-control .control-knob-caption:nth-of-type(1) {
	padding-bottom: 5px;
}

.dual-control .control-knob-caption:nth-of-type(2) {
	padding-top: 2%;
}

.dual-control .control-knob-caption:nth-of-type(1),
.dual-control .control-knob-caption:nth-of-type(2) {
	box-sizing: border-box;
}

.dual-control .control-knob-left,
.dual-control .control-knob-right {
	display: inline-block;
	width: 40%;
	vertical-align: middle;
}

.dual-control .control-confirm-panel-left,
.dual-control .control-confirm-panel-right {
	display: none;
	position: absolute;
	z-index: 2003;
	box-sizing: border-box;
	background: #fff url("../images/hvac-buttonfill.png") repeat-x;
	background-size: 100% 100%;
	top: 18%;
	width: 160px;
	height: 180px;
	border: 1px solid #a7a9ab;
	-webkit-border-radius: 9px;
	border-radius: 9px;
	text-align: center;
	font-size: 2.5em;
	margin-left: 2px;
	margin-right: 2px;
	vertical-align: middle;
}

.dual-control .control-confirm-panel-left {
	left: 50%;
}

.dual-control .control-confirm-panel-right {
	left: -3%;
}

.dual-control .control-confirm-panel-right.open,
.dual-control .control-confirm-panel-left.open {
	display: inline-block;
}

.control-astro-disable {
	display: none;
	position: absolute;
	top: 85%;
	left: 17%;
	opacity: 0.6;
}

/* Schedule controls bottom */
.schedule-controls-header > .schedule-controls-bottom	{
	display: block;
	margin: 20px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	vertical-align: middle;
}

.schedule-controls-bottom > .schedule-control-lighting {
	width: 148px;
	margin-top: 25px;
	margin-bottom: 25px;
	margin-left: auto;
	margin-right: auto;
}

.schedule-controls-bottom > .schedule-control-lighting.button-group {
	width: 110px;
	margin-bottom: 30px;
	margin-top: 30px;
}

.schedule-controls-bottom .schedule-control-lighting .control-confirm-ok,
.schedule-controls-bottom .schedule-control-lighting .control-confirm-cancel {
	background-size: 100% 100%;
	width: 40px;
	height: 40px;
	opacity: 1;
}

.schedule-controls-bottom > .schedule-control-lighting:nth-of-type(1) > .control-confirm-ok,
.schedule-controls-bottom > .schedule-control-lighting:nth-of-type(1) > .control-caption {
	display: inline-block;
	vertical-align: middle;
}

.schedule-controls-bottom > .schedule-control-lighting:nth-of-type(1) > .control-confirm-ok {
	float: left;
}

.schedule-controls-bottom > .schedule-control-lighting:nth-of-type(1) > .control-caption {
	text-align: left;
	padding-left: 1.2%;
	font-size: 0.7rem;
}

.schedule-controls-bottom .schedule-control-on-all-day,
.schedule-controls-bottom .schedule-control-off-all-day {
	display: inline-block;
}

.schedule-controls-bottom .schedule-control-on-all-day,
.schedule-controls-bottom > .schedule-control-lighting:nth-of-type(3) .control-confirm-ok {
	float: left;
}

.schedule-controls-bottom .schedule-control-off-all-day,
.schedule-controls-bottom > .schedule-control-lighting:nth-of-type(3) .control-confirm-cancel {
	float: right;
}

.clearfix {
	overflow: auto;
}

.schedule-controls-bottom > .schedule-control-lighting:nth-of-type(2) .control-caption,
.schedule-controls-bottom > .schedule-control-lighting:nth-of-type(2) .control-confirm-ok {
	display: block;
}

.schedule-controls-bottom > .schedule-control-lighting:nth-of-type(3) .control-confirm-ok,
.schedule-controls-bottom > .schedule-control-lighting:nth-of-type(3) .control-confirm-cancel {
	display: inline-block;
	vertical-align: middle;
}

/* Latest settings pages */

/* #settings-mobile styles moved to mobile.css ====================== */


.main .settings-gear {
	display: inline-block;
	width: 30px;
	height: 30px;
	background: url("../images/phone/menuicon_settings.png") no-repeat;
	background-size: 100%;
	vertical-align: middle;
	margin: 0px 15px 0px 20px;
}

.main .settings-gear {
	cursor: pointer;
}

.main .settings-gear	{
	margin-top: 10px;
	margin-bottom: 10px;
}

.main h2.settingstitle	{
	display: inline-block;
	max-width: 300px;
	vertical-align: middle;
}

.main h2.settingstitle {
	display: none;
}


.zone-row
#edituser {
	display: none;
}

.datarow {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.datarow .settings-details,
.datarow .user-zone-settings,
.datarow .lighting-zone-settings,
.datarow .hvac-zone-settings {
	display: inline-block;
	box-sizing: border-box;
	width: 70%;
	height: 100%;
	line-height: 55px;
	vertical-align: middle;
}

.datarow .settings-details {
	width: 30%;
}

.datarow .user-zone-settings {
	width: 48%;
}

.datarow .settings-details.user {
	width: 4%;
}

.datarow .user-zone-settings.last {
	width: 48%;
	text-align: center;
}

.datarow .user-zone-settings,
.datarow .lighting-zone-settings,
.datarow .hvac-zone-settings {
	text-align: left;
	padding-left: 10px;
}

.user-form.users	 {
	display: table;
	box-sizing: border-box;
	width: 96%;
	height: 90%;
	margin: 15px 2%;
	overflow: hidden;
	font-family: Arial, Lucida Grande, sans-serif;
}

.user-form.users .data-dropdown-element-label {
	display: table-cell;
	font-size: 1rem;
}

/* .data-dropdown.mobile-settings styles moved to mobile.css */


.user-form.users .data-dropdown-element-label,
.user-form.users .data-dropdown-element-value {
	display: table-cell;
	font-size: 1rem;
	text-align: left;
}

.user-form.users .data-dropdown-element-value {
	text-align: left;
}

.user-form.users .data-dropdown-row .control-confirm-ok-user,
.user-form.users .data-dropdown-row .control-confirm-cancel-user	 {
	display: inline-block;
	border: 1px solid #999999;
	border-radius: 6px;
	background-size: 100% 100%;
	width: 40px;
	height: 40px;
	opacity: 1;
	text-align: center;
	margin: 15px;
}

.data-dropdown-element-wrapper .user-box-label {
	font-weight: normal;
	font-size: 1rem;
}

.datarow .settings-details .settings-details-button {
	display: inline-block;
	background-image: url("../images/tier1bar_arrow_open.png");
	background-position: center center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	width: 32px;
	height: 16px;
	margin: 0px auto;
	vertical-align: middle;
}

.datarow .settings-details .settings-details-button.open {
	transform: rotate(-180deg);
}

.data-dropdown-element-wrapper .enablebox {
	display: inline-block;
	margin-top: 10px;
	vertical-align: middle;
}

.data-dropdown-element-wrapper .enablebox .checkbox {
	margin-left: auto;
	margin-right: auto;
}

/* .data-dropdown-element-wrapper .enablebox .mobile-lighting-caption styles moved to mobile.css */


.data-dropdown-element-wrapper .photocell {
	width: 75%;
	margin-top: 5px;
	margin-bottom: 5px;
}

.data-dropdown-row.lighting-slider {
	display: none;
}

.data-dropdown-row.lighting-slider.on {
	display: table;
}

.msg-save-success,
.msg-temp-changed,
.msg-save-failed {
	position: absolute;
	opacity: 0;
	display: none;
	border: 2px solid #cacaca;
	border-radius: 4px;
	padding: 10px;
	box-shadow: 0 0 20px -2px #333;
	background: #FFFFFF;
	box-sizing: border-box;
	top: 50%;
	left: 50%;
	width: 200px;
	z-index: 3000;
	margin-left: -100px;
	text-align: center;
	line-height: 1;
	font-size: 1.2rem;
}

.msg-temp-changed,
.msg-save-success {
	color: green;
}

.msg-save-failed {
	color: red;
}

/*******************************
	LIGHTING SCHEDULE STYLES
	BM these should probably be moved to schedule.css
********************************/

.astroIcons {
	height: 100%;
	line-height: 100%;
	width: 40px;
	font-size: 80%;
	font-weight: normal;
	position: absolute;
	top: 0px;
	left: 0px;
	/*visibility: hidden; */
	z-index: 20;
}

.astroIcons .sunrise-icon,
.astroIcons .before-sun,
.astroIcons .astro-off-phrase,
.astroIcons .astro-on-phrase,
.astroIcons .sunset-icon,
.astro.sunrise,
.astro.sunset {
	position: absolute;
}
.astroIcons .sunset-icon {
	width: 40px;
}

.astroIcons .astro-off-phrase {
	text-align: left;
	visibility: hidden;
}

.astroIcons .astro-on-phrase {
	text-align: right;
	visibility: hidden;
}

.astroIcons .sunrise-icon, .astroIcons .sunset-icon {
	width: 40px;
	height: 20px;
	background-image: url("../images/icon-sprite_astro-scheduler.png");
}

.astroIcons .sunrise-icon {
	 background-position: 0 0;
}

.astroIcons .sunset-icon {
	 background-position: -40px 0;
}

.astro-overlay {
	position: absolute;
	/* top: 0; */
	/* left: 0; */
	height: 100%;
	/* width: 100%; */
	z-index: 10;
	/*visibility: hidden; */
}

.astro {
	height: 100%;
	/* float: left; */
}

.astro.spacer {
	min-width: 1px;
}

.astro.dark {
	background: #001332;
	min-width: 150px;
}

.astro.sunrise,
.astro.sunset {
	z-index: 1000;
	width: 2px;
	background: #f6aece;
}

.astro.on, .astro.off {
	z-index: 1000;
	width: 2px;

	background: #00aeef;
}

.astro.light {
	display:none;
	min-width: 150px;
	background: #bdbec0;
}

/* .astro.sunset {
	background: #fbb049;
} */


/*
 settings.php Styles for Custom alert modal. These styles will have to be refactored out into either SASS/LESS/Stylus.
 Does not really matter as long as we are using a CSS preprocessor. We should also develop some CSS guidelines like e.g
 http://cssguidelin.es/
*/

/*Add custom alert button*/
#add-custom-alarm{
	position: relative;
	top: 35px;
	right: 27%;
	text-align: center;
	width: 8%;
	padding: 6px 0;
}

.sweet-alert {
	background-color: white;
	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	width: 478px;
	padding: 17px;
	border-radius: 5px;
	text-align: center;
	position: fixed;
	left: 50%;
	margin-left: -256px;
	margin-top: -200px;
	overflow: hidden;
	display: none;
	z-index: 99999;
}

#additional-alarms input {
	/*Zero out sweet alarm styles*/
	height: 20px;
	padding: 0;
	margin:0;
	vertical-align: initial;

	width: 13px;
	position: relative;
	top: 0;
	overflow: hidden;
	display: block;
}

#additional-alarms label {
	display: block;
	padding-left: 40px;
	width: 100%;
	position: relative;
	top: 18px;
	text-align: left;
}

#additional-alarms fieldset{
	margin-bottom: 30px;
	height:250px;
	overflow-x: hidden;

	width: 94%;
	/*margin: 25px 1%;*/
	padding: 2%;
	border: 3px solid #cacaca;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

.sweet-alert h2 {
	text-align: left;
}

#additional-alarms h3 {
	text-align: left;
	padding-left: 15px;
	padding-bottom: 15px;
}

#additional-alarms h4{
	position: relative;
	text-align: left;
	padding-left: 0;
	padding-bottom: 20px;
	padding-top: 15px;
}

.alarm-type{
	font-weight: bold;
	color: #757574;
}

.hidden{
	visibility:hidden;
}

.separator {
	width:100%;
	height:30px;
}

.back-button > img {
	float:left;
	cursor: pointer;
	width: 2%;
	height: 2%;
	position: relative;
}

/* LOCATION SETTINGS --------------------------------------------*/

#location-specific-wrapper{padding:0;}
#location-specific-wrapper input,#location-specific-wrapper input{font-size:.9em;}
#location-settings .location-form-wrapper{margin-top:20px; outline:1px solid #999;}
#location-settings .data-dropdown-row{outline:1px solid #999; height:35px;vertical-align:middle;}
#location-settings .data-dropdown-element-label{
	float:left;
	text-align:left;
	font-size:1.1em;
	text-indent:10px;
	line-height:33px;
	width:40%;
	vertical-align:middle;
}
#location-settings .data-dropdown-element-value{
	text-align:left;
	font-size:1.1em;
	width:60%;
	padding-top:6px;
	float:left;
}
#location-settings .data-dropdown-element-value input{
width:99%;
}
#location-settings .data-dropdown-element-value.state select{
	font-size:1em;
	width:99%;
	float:left;
}
.data-dropdown-form-control{position:relative;float:right;width:50%;}
.control-confirm-ok.location, .control-confirm-cancel.location{
float:right;margin:20px 0 20px 20px;display:inline;
}

	/* Portrait Tablet Styles */
@media only screen and (min-device-width: 768px) 
  and (max-device-width: 1024px) {

  	header #navigation-icon {
  		display: inline-block;
  	}

  	header #headerlogo {
  		height: 40px;
  		display: inline-block;
  	}

  	header #navigation-icon img {
  		height: 20px;
  		float: left;
  	}

  	.home-column .main {
  		grid-template-rows: auto;
  		padding: 20px;
  	}

  	.home-column .databox {
  		width: 75%;
  	}

  	.home-column .flex-box {
  		display: grid;
  		grid-template-columns: 50% 50%;
  		margin-left: 0%;
  	}


	#location-settings .data-dropdown-element-label{
		float:left;
		text-align:left;
		font-size:1em;
		text-indent:5px;
		line-height:33px;
		width:40%;
		vertical-align:middle;
	}
	#location-settings .data-dropdown-element-value{
		text-align:left;
		font-size:1em;
		width:60%;
		padding-top:0;
		float:left;
	}
	#location-settings .data-dropdown-element-value.state select{
		width:80%;
		}
	#location-btn {
		float:none;
		margin:0 auto;
		display:block;
	}

	.refrigeration-template {
	/*width: 95%!important;*/
	}

/*	#temperature-monitor #temperature1, #temperature-monitor #temperature2, #temperature-monitor #temperature3, #temperature-monitor #temperature4 {
		width: 45%!important;
		margin: 10px auto;
	}

	#temperature-monitor #temperature1, #temperature-monitor #temperature2, #temperature-monitor #temperature3, #temperature-monitor #temperature4 {
		width: 45%;
		margin: 10px auto;
	}*/

/*	#temperature-monitor #temperature1,
	#temperature-monitor #temperature2,
	#temperature-monitor #temperature3,
	#temperature-monitor #temperature4 {
		width: 45%;
		margin: 10px auto;
	}*/




}

/*landscape orientation*/
@media (orientation: landscape) {
	nav {
		/*overflow: scroll;*/
	}
	nav ul {
		display: flex!important;
	}
  .flex-box {
    grid-template-columns: 100%!important;
    /*margin-left: 0%;*/
  }

  .pane.lighting {
  	width: 100%;
  }

  .pane.refrigeration {
  	text-align: center;
  }
}


	/* Portrait Mobile Styles */
@media only screen and (max-width : 749px) {

	#titles {
/*		display: none!important;*/
	}

	#brandmap {
		width: 100%;
		height: 50vh!important; /* automatically resized to fit the page */
		position: relative;
		/*top: 0px;*/
		/*left: 0px;*/
	}	

	#tagsearch #searchbox {
		width: auto; ;
	}

	#locations {
		width: auto;
		height: 40vh!important;
		position: initial;
		top: auto;
		left: auto;
		overflow-y: auto;
	}


	nav ul {
		display: block;
	}

	nav ul li {
		widows: 99%;
	}

	nav ul li#schedule, nav ul li#settings {
	width: 99%;
	}


	.home-column .main {
		  display: grid; 
		  grid-template-columns: 100%; 
		  grid-template-rows: 0fr 1fr 0fr 1fr; 
		  gap: 10px 5px; 
		  grid-template-areas: 
		    "."
		    "."
		    "."
		    "."; 
	}

	.home-column .flex-box {
		display: block;
		margin-left: 0%;
	}

	.databox:last-of-type {
		margin-bottom: 100px;
	}

	.home-column .databox {
		width: 150px;
		display: block;
		margin: 10px auto;
	}

	/* #refrigeration1 {
		width: 150px;
	} */

	.refrig-details {
		display: block;
	}

	.refrigeration-template {
		width: 95%!important;
		width: 150px;
	}
/*
	.refrigeration-template > #refrigeration1targettemp,
	.refrigeration-template > #refrigeration1coiltemp,
	.refrigeration-template > #refrigeration1coiltemp2,
	.refrigeration-template > #refrigeration1compressor,
	.refrigeration-template > #refrigeration1doorswitch,
	.refrigeration-template > #refrigeration1mode,
	.refrigeration-template > #refrigeration1evaporator {
		display: none!important;
	}
*/
	.refrigeration-template > .refrig-targettemp,
	.refrigeration-template > .refrig-coiltemp,
	.refrigeration-template > .refrig-coiltemp2,
	.refrigeration-template > .refrig-compressor,
	.refrigeration-template > .refrig-doorswitch,
	.refrigeration-template > .refrig-mode,
	.refrigeration-template > .refrig-evaporator {
		display: none!important;
	}

	.lighting > .databox-wrapper {
		display: block;
	    grid-template-columns: 50% 50%!important;
	    justify-items: center;
	    gap: 10px; 	
	    grid-auto-flow: inherit;
	    margin-bottom: 100px;
	}	

	.flex-box #hvac1targettemp {
		display: block!important;
	}

	.flex-box #hvac2targettemp {
		display: block!important;
	}	

	/* #hvac1,
	#hvac2,
	#hvac3,
	#hvac4,
	#hvac5,
	#hvac6,
	#hvac7,
	#hvac8,
	#hvac9,
	#hvac10 {
		width: 150px;
		
	} */

	div[id^="hvac"].databox {
		width: 150px;
	}

	.hvac-zone span {
		word-break: break-word;
	}

	.hvac-rows-template {
		width: 100%!important;
	}

	.hvac-zone, .refrig-zone {
		width: 25%;
		margin-bottom: 20px;
	}


	#hvac1targettemp,
	#hvac1dischtemp,
	#hvac1humidity,
	#hvac1occupancy,
	#hvac1activestage,
	#hvac1fan {
		/*display: none;*/
	}

	#hvac2targettemp,
	#hvac2dischtemp,
	#hvac2humidity,
	#hvac2occupancy,
	#hvac2activestage,
	#hvac2fan {
		/*display: none;*/
	}

	.datarow h3.button {
		margin: 0;
	}

	.mobile-hidden {
		display: none;
	}

	.temp-boxes {
		width: 45%;
		margin: 10px auto;
	}

/*	#temperature-monitor #temperature1,
	#temperature-monitor #temperature2,
	#temperature-monitor #temperature3,
	#temperature-monitor #temperature4 {
		width: 45%;
		margin: 10px auto;
	}*/

	.wtemp-boxes {
		width: 250px;
		margin: 10px auto;
	} 



	.hvac-details {
		display: block;
	}


	.pane.temperature.fullwidth .databox, .pane.lighting.fullwidth .databox {
		max-width: 49%;
	}

	.pane.temperature.fullwidth .databox, .pane.lighting.fullwidth .databox {
		float: none!important;
	}

	.zone-row.lighting, .zone-row.users {
		width: 100%;
	}

	.setting.hvac-zone,
	.hvac-occcool,
	.hvac-unocccool,
	.hvac-occheat,
	.hvac-unoccheat,
	.hvac-mode,
	.hvac-fan,
	.hvac-bypass,
	.hvac-lock {
		display: none;
	}

	.datarow.settings.mobile-settings {
		display: flex;
		/*position: relative;*/
	}

	.datarow .settings-details {
		width: 30%;
		float: right;
	}

	.zone-row.lighting {
		display: none;
	}







}


/* Food Probe Tab styles ----------------------------------------- */

#food_probe_accordion .ui-icon { display: none; }
#food_probe_accordion .ui-accordion-header a { padding-left: 0; }

#food_probe_accordion_container{
	width:100%;
	margin:30px 0px;
	/*padding:0 5px;*/
}

#food_probe_accordion_header{
	width:100%;
	background-color:#424242;
	color:#fff;
	font-size:17px;
	display: inline-block;
	margin-bottom:1px;
	text-align: left;
}

#food_probe_accordion_header div{
	padding: 2px 0px;
	display:inline-block;
	width:17%;
	text-align: center;
}
#food_probe_accordion_header div:first-child{
	width:20%;
	text-align: left;
	padding-left:5px;
}

#food_probe_accordion .ui-accordion-header{
	margin:2px 0;
	font-size:16px;
    background: #ccc; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#fff, #ccc); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#fff, #ccc); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#fff, #ccc); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#fff, #ccc); /* Standard syntax */
    text-align: left;
    z-index:1000;
}

#food_probe_accordion .timestamp{
	font-size:13px;
}

#food_probe_accordion .ui-accordion-header.fail{
	background:#f26d3d;
}

.ui-accordion-header{
 	outline:none;
}

.ui-accordion-header div{
	width:17%;
	display:inline-block;
	text-align: center;
	padding:4px 0;
}
.ui-accordion-header div.title{
	width:20%;
	text-align: left;
	padding-left:5px;
}

#food_probe_accordion .ui-accordion-header-active{
	filter: brightness(85%);
}

/* Footer styles --------------------------------------- */

#footer {
		display: block;
		height: 60px !important;
		width: 100%;
		clear: both;
		position: fixed;
		padding-top: 4px;
		z-index: 202;
		bottom: 0px;
		border-top: 1px solid #999;
		background: #FFF;
		box-shadow: 0 2px 10px 1px #999;
		left: 0;
		bottom: 0;
		font-size: .75em;
		color: #999;
        
		
	}

	#footer .left {
		float: left;
		text-align: left;
		padding-left: 1%;
		height: 40px;
		line-height: 40px;
		width:32%;
	}
	#footer .center {
		float: left;
		padding-left: 1%;
		padding-right: 1%;
		height: 40px;
		line-height: 40px;
		width:32%;
		text-align:center;
	}

	#footer .right {
		float: right;
		text-align: right;
		padding-right: 1%;
        display:block;
		height: 40px;
	}

	#footer .eviewlogo {
		float: right;
		height: 40px;
		line-height: 40px;
		text-align: right;
	}

	#footer .eviewlogo p img {
		display: inline-block;
		padding: 0 10px 0 10px;
		height: 30px;
	}

/* new media queries from Bob 
	- Initial portrait settings
	- Classic phone shape, landscape
	- Tablets, portrait and landscape
	- Long phones, landscape

	Set all portrait in initial portrait query
	Then set landscape for phones
	Then set landscape and portrait as needed for tablets

	Note that it's possible that there will be some Android devices outside of these ranges,
	but also possible that this will take care of everything.
*/

/* sets initial parameters for portrait, all formats */
@media only screen and (orientation: portrait) {
	#footer .left, #footer .right {
		width: 15%;
	}
	#footer .center {
		width: 70%;
		
	}
   

}
/* classic phone shape
 iPhone SE 1st gen width 568 height 320
 iPhone SE 1st gen
 width 568 height 320 aspect 1.775
 cordova run --emulator --target="iPhone-8, 13.5"
 width 667 height 375 aspect 1.779
 cordova run --emulator --target="iPhone-SE--2nd-generation-, 13.5"
 width 667 height 375  aspect 1.779
 cordova run --emulator --target="iPhone-8-Plus, 13.5"
 width 736 height 414  aspect 1.777
 rule is 1.75-2
 */
 @media only screen and (min-aspect-ratio: 7/4) and (max-aspect-ratio: 8/4 )and (orientation: landscape) {
	/* nav {
		overflow-y:  scroll;
	} */	
    
 }
 @media only screen and (min-aspect-ratio: 4/7) and (max-aspect-ratio: 4/8 )and (orientation: portrait) {
	nav {
		overflow-y:  scroll;
	} 
    #footer {
/*		height: 40px !important;*/
    }
 }

 /* iPads
 cordova run --emulator --target="iPad-Pro--9-7-inch-, 13.5"
 width 1024 height 768 aspect 1.333
 cordova run --emulator --target="iPad-Pro--12-9-inch---4th-generation-, 13.5"
 width 1366 height 1024 aspect 1.333
 cordova run --emulator --target="iPad-Pro--11-inch---2nd-generation-, 13.5"
 width 1194 height 834 aspect 1.431
 iPhone SE 1st gen
 rule is .6-.75 portrait, 1.33-1.66 landscape
 */
/* portrait */
 @media only screen and (min-aspect-ratio: 3/5) and (max-aspect-ratio: 3/4) and (orientation: portrait) {
	nav {
		overflow-y:  scroll;
	}
   
}
/* landscape - possibly interferres with desktop. need to double check */
@media only screen and (min-aspect-ratio: 4/3) and (max-aspect-ratio: 5/3) and (orientation: landscape) {
/*	nav {
		overflow:  scroll;
	}*/
    
}

/* Longer phones
 cordova run --emulator --target="iPhone-11-Pro, 13.5"
 width 812 height 375  aspect 2.165
 cordova run --emulator --target="iPhone-11-Pro-Max, 13.5"
 width 896 height 414 aspect 2.165
 rule is 2.1-2.8
*/
@media only screen and (min-aspect-ratio: 21/10) and (max-aspect-ratio: 28/10) and (orientation: landscape) {
	nav {
		/* overflow-y:  scroll; */
	}
}