/************
	RESET
*************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;
}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';}
:focus {outline: 0;}
table {border-collapse: collapse;border-spacing: 0;}

body{-webkit-tap-highlight-color:rgba(255,255,255,0); -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -webkit-touch-callout:none; -ms-content-zooming:none; -webkit-text-size-adjust:100%;}


/*****************
	TYPOGRAPHY
******************/
body{font-family:Verdana, Geneva, sans-serif; letter-spacing:-0.03em; font-size:16px; line-height:1.5; color:#262626; cursor:default;}

p{margin:8px 0;}
li{margin:8px 0;}

h1, h2, h3, h4, h5, h6 {margin:15px 0;}

h1{font-family:Helvetica, Arial, sans-serif; font-size:26px;}
h2{font-family:Helvetica, Arial, sans-serif; font-size:19px; text-transform:uppercase; margin:20px 0;}
h3{font-family:Helvetica, Arial, sans-serif; font-size:22px; }
h4{font-family:Helvetica, Arial, sans-serif; font-size:20px; margin:0 0 4px;}
h5{font-family:Helvetica, Arial, sans-serif; font-size:16px; margin:10px 0; text-transform:uppercase; font-weight:normal;}
h6{}

a{color:#000000; text-decoration:none;}
a:active{color:#05a14b;}

.font-15 { font-size:15px; }
.font-small { font-size:11px; }
.operated-info { color:rgba(0,0,0,0.75); font-size:14px; }




/**************
	HELPERS
***************/
.text-left{text-align:left !important;}
.text-right{text-align:right !important;}
.text-center{text-align:center;}
.left{float:left;}
.right{float:right;}
.clear{clear:both;}
.overflow{overflow:hidden;}
.wide{width:100%;}
.inline-block {display:inline-block;}
.display-none, .hide { display:none; }
.hide.imp { display: none !important; }
.sub { vertical-align:sub; font-size:11px; font-style:italic; }
.font-small .sub { font-size:10px; }
.no-wrap { white-space:nowrap; }

.animate { -webkit-transition:all 200ms linear; transition:all 200ms linear; }
.fade-in { -webkit-transition:opacity 200ms linear; transition:opacity 200ms linear; opacity:1 !important; }
.hor-separator {margin:40px 0px 20px; height:1px; background:#007326; border-bottom:1px solid #15915b;}
.hor-separator.smaller {margin:15px 0px 15px;}


.margin-v5 {margin-top:5px; margin-bottom:5px;}
.margin-b5 {margin-bottom:5px;}
.margin-t0 {margin-top:0px !important;}
.margin-v10 {margin-top:10px; margin-bottom:10px;}
.margin-h10 {margin-left:10px; margin-right:10px;}
.margin-t10 {margin-top:10px !important;}
.margin-b10 {margin-bottom:10px;}
.margin-l10 {margin-left:10px !important;}
.margin-r10 {margin-right:10px;}

.margin-b0 { margin-bottom:0 !important;}
.margin-v20 {margin-top:20px !important; margin-bottom:20px !important;}
.margin-t20 {margin-top:20px !important; }
.margin-l20 {margin-left:20px !important;}
.margin-r20 {margin-right:20px !important;}
.margin-t30 {margin-top:30px !important;}
.margin-l40 {margin-left:40px !important;}

.margin-t80 {margin-top:80px !important;}
.margin-r15 {margin-right:15px !important;}


.padding-v10 {padding-top:10px; padding-bottom:10px;}
.padding-h10 {padding-left:10px; padding-right:10px;}
.padding-t10 {padding-top:10px;}
.padding-b10 {padding-bottom:10px;}
.padding-l10 {padding-left:10px;}
.padding-r10 {padding-right:10px;}


.w50 {width:50px !important; }
.w70 {width:70px !important; }
.w90 {width:90px !important;}
.w120 {width:120px !important;}
.w180 {width:180px !important;}
.w220 {width:220px !important;}
.w240 {width:240px !important;}
.w260 {width:260px !important;}
.w280 {width:280px !important;}


.uppercase { text-transform:uppercase; }

.text-green { color:#00833b; }
.text-red { color:#FF7062; }




/*************
	INPUTS
**************/
input, textarea, button{font-family:Verdana, Geneva, sans-serif; letter-spacing:-0.03em; font-size:15px; color:#262626; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance:textfield; }

.inputfield{height:34px; padding:0 10px; margin:0; background:#ffffff; border:none;
	box-shadow:inset rgba(0,0,0,0.4) 0 1px 1px, rgba(255,255,255,0.3) 0 1px 0; -webkit-appearance:none; -webkit-border-radius:8px; border-radius:8px;
	-webkit-transition:box-shadow 100ms linear; transition:box-shadow 100ms linear;
}
.inputfield.bigger { height:45px; font-size:18px; -webkti-border-radius:8px; border-radius:8px; box-shadow:inset rgba(0,0,0,0.5) 0px 1px 2px, rgba(255,255,255,0.3) 0 1px 0;}
.inputfield.error {background:#ffb9b9;}

.inputfield.bigger:focus { box-shadow:inset rgba(0,0,0,0.4) 0 1px 2px, rgba(255,255,255,0.3) 0 1px 0, #00AD00 0 0 5px; }


/* date */
input.perf-datepicker{width:auto; max-width:150px; min-width:90px; text-align:center; vertical-align:middle;}
input.perf-datepicker::-webkit-inner-spin-button {-webkit-appearance:none; display:none;}
input.perf-datepicker::-webkit-calendar-picker-indicator {-webkit-appearance:none; display:none;}
input.perf-datepicker::-webkit-clear-button{display:block; -webkit-appearance:none;}
input.perf-datepicker.native{width:105px; padding-right:20px;}
input.perf-datepicker.native::-webkit-calendar-picker-indicator {-webkit-appearance:inherit; display:inherit;}



/*************
	BUTTONS
**************/
.def-button {display:inline-block; height:38px; line-height:37px; font-size:18px; padding:0 30px; margin:0; background:#ffffff; border:none; color:#ffffff; cursor:pointer; position:relative;
	-webkit-appearance:none; box-shadow:rgba(0,0,0,0.4) 0px 1px 1px; -webkti-border-radius:8px; border-radius:8px;
	text-shadow:none;
	background: #05a14b;
	background: -webkit-linear-gradient(top,  #05a14b 0%,#00833b 100%);
	background: linear-gradient(to bottom,  #05a14b 0%,#00833b 100%);
}
.def-button.auto-height { height: auto; line-height: 1.2; padding: 10px 10px; }
.def-button.disabled { opacity: 0.5; pointer-events: none; }
.def-button.disabled > span { color: #fff !important; }

.def-button:active { box-shadow: inset rgba(0,0,0,0.6) 0 1px 2px; text-shadow:none; color:#ffffff; outline:none;
	background: #25c16b;
	background: -webkit-linear-gradient(top,  #25c16b 0%,#20a35b 100%);
	background: linear-gradient(to bottom,  #25c16b 0%,#20a35b 100%);
}
.def-button.smaller {height:34px; line-height:33px; padding:0 10px;}
.def-button.bigger {height:45px; line-height:43px; padding:0 15px;  font-size:18px;}

.grey-button {display:inline-block; height:38px; line-height:37px; padding:0 30px; margin:0; border:none; color:#262626; cursor:pointer;
	box-shadow:rgba(0,0,0,0.4) 0 1px 1px; text-shadow:rgba(255,255,255,1) 0 1px 0; -webkit-appearance:none; -webkit-border-radius:8px; border-radius:8px;
	background: #ffffff;
	background: -webkit-linear-gradient(top,  #ffffff 0%,#FFF5BC  100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#FFF5BC  100%);
}
.grey-button.smaller {height:34px; line-height:33px; padding:0 10px;}
.grey-button:active { background:#f7941e; color:#ffffff; text-shadow:none; box-shadow:inset rgba(0,0,0,0.6) 0 1px 2px, #009900 0 0 2px;}

.def-button > i, .grey-button > i { display:none; position: absolute; top: 50%; left: 50%; width: 43px; height: 11px; margin: -5px 0 0 -21px; background:url(/assets/img/ajax-loader.gif) no-repeat center; }
.def-button.loading > i, .grey-button.loading > i { display:block; }
.def-button.loading > span, .grey-button.loading > span { opacity: 0; }

.switch { display:inline-block; width:60px; height:30px; background:#ffffff; border-radius:15px; box-shadow:inset rgba(0,0,0,0.4) 0 1px 1px, rgba(255,255,255,0.3) 0 1px 0;}
.switch i { display:block; margin:2px; width:26px; height:26px; border-radius:15px; background:#c9c9c9; box-shadow:0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 1px 1px rgba(0, 0, 0, 0.6); transition:all 50ms; }
.switch.enabled i { margin-left:32px; background:#79ad3b; }
.switch:active i { opacity: 0.75; transition: none; }
.switch.inactive { opacity:0.6; }


/**************
	POPUPS
***************/
/* alert-message */ 
.alert-message {position:absolute; top:0; left:0; min-width:240px; max-width:600px; text-align:center; background:#f3f3f3; color:#262626; font-size:16px; padding:20px 40px 18px 35px; line-height:1.2; z-index:9999;
	-webkit-border-radius:15px; border-radius:15px; text-shadow:rgba(0,0,0,0.2) 0 1px 0;
	box-shadow:rgba(0,0,0,0.5) 0 0 5px, rgba(255,255,255,0.5) 0 0 2px inset; overflow:hidden;
}
.alert-message .alert-icon, .alert-message .alert-body { display:table-cell; vertical-align:middle; }
.alert-message .alert-body { text-align:left; }
.alert-message .alert-icon .fa {font-size:36px; vertical-align:middle; padding:0 20px 0 0;}

.alert-message.success .fa { color:#79ad3b; }
.alert-message.off .fa { color:#dc6651; }
.alert-message.error { background:#dc6651; color:#ffffff; text-shadow:rgba(0,0,0,0.6) 0 1px 0; box-shadow:rgba(0,0,0,0.6) 0 0 3px, rgba(255,255,255,0.2) 0 0 2px inset;}


/* popup window */
.popup-window{position:absolute; color:#262626; max-width:600px; padding:20px 50px 20px; background:#f3f3f3; z-index:9998; line-height:1.4;
	-webkit-border-radius:15px; border-radius:15px; box-shadow:rgba(0,0,0,0.5) 0 0 5px;
}
.popup-window-close{display:block; font-size:24px; position:absolute; top:15px; right:15px; line-height:22px;
	opacity:0.5; -webkit-transition:opacity 100ms linear; transition:opacity 100ms linear;
}
.popup-window-close:hover{opacity:1; color:#262626;}
.popup-window h3{margin:10px 0 20px;}
.popup-window p{margin:20px 0;}
.popup-overlay {position:absolute; top:0; left:0; z-index:9997; width:100%; height:100%; background:rgba(255,255,255,0.75);}

/* hint */
.hint {display:inline-block;  height:26px; line-height:26px; padding:0; margin-left:10px; vertical-align:middle;}
.hint img {width:26px; height:26px;}

/* graph */
.graph {display:inline-block;  height:28px; line-height:28px; padding:0; margin-left:10px; vertical-align:middle;}
.graph img {width:28px; height:28px;}


/* notification window */
#notificationContent { max-height:500px;}
#notificationContent.scrollable { border-radius:15px; background:#ffffff; padding:20px; box-shadow:inset rgba(0,0,0,0.4) 0 1px 1px, rgba(255,255,255,0.8) 0 1px 0; }
#notificationContent .eula-item { padding:0 0 30px 0; }
#notificationContent .eula-comment { margin-bottom:20px; }
#notificationContent .eula-content {  }
#notificationContent .eula-content p { margin:0 0 10px; }
#notificationContent h2 { font-size:22px; text-transform:none; margin:0 0 20px; }
#notificationContent .eula-content h3 { font-size:20px; margin:0 0 10px; }
#notificationButtons {text-align:center; margin:35px 0 20px;}
#notificationButtons .def-button {padding:0 40px;}


/**************
	SHARED
***************/
.def-table { }
.def-table td { padding:5px 10px; }
.def-table td:first-child { padding-left:0; }
.def-table td:last-child { padding-right:0; }

/* info-msg */
.info-msg { display:inline-block; padding: 10px 20px; font-family:Arial, Helvetica, sans-serif; margin: 0 auto 30px; font-size: 16px; background-color:#ffe0a1; border:#ffa531 solid 1px; border-radius:10px; }
.info-msg.light { background-color:#ffead4; border:#ffca85 solid 1px; }
.info-msg a.underlined { font-weight: bold; text-decoration: underline; }



/************
	STYLE
*************/

html { width:100%; height:100%; background:#ffffff; }
body { height:100%; top:0; left:0; }

#wrapper {display:block; width:768px; height:1004px; position:relative; overflow:hidden; margin:0 auto;
	-webkit-transition:opacity 200ms linear; transition:opacity 200ms linear;
}
#wrapper.hidden { opacity:0; }

/* preload */
body:after { content:url(/assets/img/main_content_bg.jpg) 
			 url(/assets/img/main_content_bg_faded.jpg) 
			 url(/assets/img/preloader.gif) 
			 url(/assets/arrow.png);
			 display:none;
}



.standalone.ipad #wrapper{width:768px; height:1004px;}
body.standalone.ipad.rotate-right { 
	width:748px; height:1024px;
	-webkit-transform-origin:374px 374px; transform-origin:374px 374px;
	-webkit-transform:rotate(-90deg); transform:rotate(-90deg);
}
body.standalone.ipad.rotate-right #wrapper {width:748px; height:1024px;}

body.standalone.ipad.rotate-left { 
	width:748px; height:1024px;
	-webkit-transform-origin:512px 512px; transform-origin:512px 512px;
	-webkit-transform:rotate(90deg); transform:rotate(90deg);
}
body.standalone.ipad.rotate-left #wrapper {width:748px; height:1024px;}



.scrollable {overflow:auto; -webkit-overflow-scrolling: touch;}

#loader { opacity:0; visibility:hidden; position:absolute; z-index:9998; top:130px; width:100%; height:764px; background:url(/assets/img/preloader.gif) no-repeat center rgba(255,255,255,0);
	-webkit-transition:all 100ms 250ms linear; transition:all 100ms 250ms linear;
}
body.loading #loader{ opacity:1; visibility:visible; }



/* SERVICE, MASTER */
.service-only { display:none; }
.service .service-only { display:block; }
.service td.service-only { display:table-cell; }

.master-only { display:none; }
.master .master-only { display:block; }
.master td.master-only { display:table-cell; }

.service-note { display:none; position:absolute; top:-60px; left:0; width:100%; font-family:Helvetica, Arial, sans-serif; font-size:26px; font-weight:700; text-align:center; color:#f7941e; }
.service .slogan { visibility:hidden; }
.service .service-note { display:block; }


/* NAV */
nav {position:absolute; width:100%; height:130px; top:0; left:0; overflow:hidden;}
#mainNav {width:100%; }
#mainNav td {width:25%;}
#mainNav td a {display:block; font-size:18px; color:#515151; background:#afde77; height:66px; line-height:65px; text-align:center; margin:0 0 0 5px; padding:0;
	box-shadow:rgba(0,0,0,0.5) 0 1px 2px; text-shadow:rgba(255,255,255,0.3) 0 1px 0;}
#mainNav td:first-child a {margin:0;}
#mainNav td a .fa {padding:0 10px 6px 0; font-size:24px; vertical-align:middle;}
#mainNav td a:active { background:#bfee87; }
#mainNav td a.active { color:#ffffff; background:#00833b; 
	text-shadow:rgba(0,0,0,0.4) 0 1px 0; box-shadow:none;
}

.service #mainNav td a { background:#ffc866; }
.service #mainNav td a:active { background:#ffd995; }
.service #mainNav td a.active { background:#f7941e; }

@keyframes blink_warning{ 0% {background:#afde77;} 50% {background:#fbaf37;}  100% {background:#afde77;} }
@-webkit-keyframes blink_warning{ 0% {background:#afde77;} 50% {background:#fbaf37;}  100% {background:#afde77;} }
#mainNav td a.warning { animation:blink_warning 2s infinite; -webkit-animation:blink_warning 2s infinite; }
#mainNav td a.warning.active { animation:none; -webkit-animation:none; background:#f9ad35; }

@keyframes blink_error{ 0% {background:#afde77;} 50% {background:#FF7062;}  100% {background:#afde77;} }
@-webkit-keyframes blink_error{ 0% {background:#afde77;} 50% {background:#FF7062;}  100% {background:#afde77;} }
#mainNav td a.error { animation:blink_error 2s infinite; -webkit-animation:blink_error 2s infinite; }
#mainNav td a.error.active { animation:none; -webkit-animation:none; background:#FF7062; }


/* subMenu */
#subMenu { overflow:hidden; height:36px; margin:28px 10px 0; position:relative; z-index:9; }
#subMenu ul {position:absolute; top:0; left:0; display:none;}
#subMenu ul.active { display:block; }
#subMenu ul.hidden-sub {display:none !important;}
#subMenu ul li { float:left; margin:0 5px 0 0;}
#subMenu ul li a {display:block; height:36px; line-height:36px; color:#515151; background:#afde77; font-size:14px; padding:0 10px;
	text-shadow:rgba(255,255,255,0.4) 0 1px 0; -webkit-border-radius:8px 8px 0 0; border-radius:8px 8px 0 0;
}
#subMenu ul li a:active { background:#bfee87; }
#subMenu ul li a.active { color:#ffffff; background:#00833b;
	box-shadow:rgba(0,0,0,0.6) 0px 1px 2px;
	text-shadow:rgba(0,0,0,0.4) 0 1px 0;
}






/* MAIN */
.fade-content { opacity:0; -webkit-transform: translate3d(0, 0, 0);  -webkit-transition:all 100ms linear; transition:all 100ms linear;}
.fade-content.visible { -webkit-transition:all 200ms linear; transition:all 200ms linear; opacity:1; }


#mainWrap {position:absolute; width:100%; height:759px; top:130px; left:0; }
#mainWrap > .layout {margin:0 10px; height:100%; background:url(/assets/img/main_content_bg.jpg) #00833b repeat top center; background-size:cover; color:#ffffff; z-index:1;
	-webkit-border-radius:0 8px 8px 8px; border-radius:0 8px 8px 8px; text-shadow:rgba(0,0,0,0.3) 0 1px 0;
	box-shadow:rgba(0,0,0,0.6) 0px 1px 2px;
}
#mainWrap > .layout.faded { background:url(/assets/img/main_content_bg_faded.jpg) #ffffff repeat top center; background-size:cover;}

#mainContentWrap { height:100%; padding:0 15px 0; overflow:hidden; overflow-y:auto; }
#mainContent {height:100%; position:relative;}
#mainContent.visible { opacity:1; }
#mainContentWrap::before {content:" "; display:block; width:716px; margin:0 25px; background:url(/assets/img/content-mask.png) repeat-x 0 0; height:10px; position:absolute; top:0; left:0; z-index:2; }
#mainContentWrap::after {content:" "; display:block; width:716px; margin:0 25px; background:url(/assets/img/content-mask.png) repeat-x 0 -10px; height:10px; position:absolute; bottom:0; left:0; z-index:2; }

#mainWrap > .layout.faded #mainContent:before { content:none; }
#mainWrap > .layout.faded #mainContent:after { content:none; }

#scrollArea { overflow:auto; -webkit-overflow-scrolling:touch; padding:2px; }

/* device-choice */
.device-choice.cfe-select { border:none; box-shadow:none; height:auto; background:none; border-radius:0; vertical-align:baseline; }
.device-choice .cfe-select-title { height:auto; line-height:1; padding:0 27px 0 0; font-size:14px; font-weight:700; }
.device-choice .cfe-select-title .fa { top:14px; }




/* HOME */
#homePage {text-align:center;}
#homePage.visible { opacity:1; }
#homePage > h1 {margin:0;}
#homePage .slogan {margin:4px 0 35px; font-size:18px;}

#systemStatusImageWrap { position:relative; width:auto; height:249px; margin:0 auto; text-align:center;}
#imgSystemStatus { width:auto; height:249px;}
#statusTitle, #statusMessage { margin:25px 50px 25px !important;}
#homePage .wrap {display:inline-block; margin-top:25px; background:#eeeeee; padding:12px 50px 10px; 
	-webkit-border-radius:8px; border-radius:8px; box-shadow:rgba(0,0,0,0.4) 0 0 2px; text-shadow:rgba(255,255,255,0.8) 0 1px 0;
}
#homePage .wrap .def-button {margin-top:10px !important;}
#homePage .wrap p { margin:2px 0; }
#homePage .wrap p:first-child { margin-top:0;  }

.homepage-system-status{width:400px; margin:0 auto;}
.homepage-system-status td{text-align:left; padding:2px 5px; width:50%; vertical-align:top;}
.homepage-system-status td:first-child{text-align:right;}

.homepage-operation-mode{ margin:0 0 10px; }


/* hyss-mode */
#savingsModeOuter { position: absolute; right: 0; top: 0; width: 250px; height: 100%; text-align: center; }
#savingsModeImg { height: 120px; width: auto; }
.savings-mode-img-header { font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.hyss-mode-option { margin: 0 0 10px; overflow: hidden; }
.hyss-mode-option label { display: inline-block; vertical-align: top !important; }
.hyss-mode-option label span { display: block; }
.hyss-mode-option-title { font-weight: bold; }
.hyss-mode-option-title + span { font-size: 14px; }
.hyss-mode-option.disabled label span { color:#888; }
.saving-mode-toggle-wrap { margin-top: 5px; width: 100%; }
#savingsModeSubTitle { display: block; font-weight: normal; text-transform: none; font-size: 14px; }


/* def-form */
.def-form { }
.def-form p {margin:10px 0;}
.def-form p > label:first-child {display:inline-block; width:200px;}
.def-form p span input[type=checkbox], .def-form p span .cfe-checkbox  {margin:0 5px 0 20px;}
.def-form p span .cfe-checkbox + label { margin:0; }
.def-form p .cfe-checkbox + label { vertical-align:middle;}

.def-form p > span:first-child { display:inline-block; width:275px; }


/* SAVE MODE CONFIG */
.save-mode-table-wrap {}
.save-mode-table-days { float:left; font-size: 12px; width: 50px; padding: 22px 0 0 0; }
.save-mode-table-days span { display: block; text-overflow: clip; overflow: hidden; white-space: nowrap; height: 41px; line-height:41px; }
.save-mode-table-scroll { width: 546px; overflow: auto; background: #fff; border: 2px solid #ccc; }
.save-mode-table-hours { display: table; width: 100%; table-layout:fixed; margin: 0 1px; height: 20px; line-height: 20px; }
.save-mode-table-hours span { display:table-cell; font-size: 13px; width:41px; text-align:center; }
.save-mode-table-hours span:first-child{ width:21px; text-align: left; }
.save-mode-table-hours span:last-child { width:20px; text-align: right; }
#save-mode-table { border-collapse: collapse; table-layout:fixed; width: 100%; }
#save-mode-table td { border:1px solid #ccc; width: 40px; height: 40px; font-size: 13px; padding:0; overflow: hidden; text-align:center; vertical-align: middle; cursor: pointer; }
#save-mode-table td:hover { box-shadow:inset 0 0 0 1px #05a14b; }
.save-mode-table-wrap .sm-w { background:#B5E1FF !important; }
.save-mode-table-wrap .sm-h { background:#FFCC99 !important; }
.save-mode-table-wrap .sm-wh { background:#B5FF9E !important; }

.save-mode-table-legend { display: flex; margin: 6px 0 0; justify-content: space-between; }
.save-mode-table-legend > div { flex-grow: 1; flex-shrink: 1; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.save-mode-table-legend > div > i { display: inline-block; min-width: 10px; min-height: 18px; line-height: 18px; text-align:center; padding:0 4px;  border: 1px solid #ccc; font-size: 10px; font-style: normal; vertical-align: middle; background: #fff; }
.save-mode-table-legend > div > span { font-size: 12px; font-family: Arial, Helvetica, sans-serif !important; padding-right: 5px; }
.save-mode-table-legend > div:last-child > span { padding-right: 0px; }

.save-mode-temperatures { margin-top: 25px !important; }
.save-mode-temperatures label { width: 300px !important; }



/* COMPARE ENERGY */

/* pump-types */
.pump-types { margin:10px 0 20px; }
.pump-types .grey-button{ padding:0 6px 0 10px; font-size:14px; vertical-align:middle; margin:5px 2px;}
.pump-types .grey-button i {display:inline-block; width:36px; height:36px; background:url(/assets/img/pump-icons.png) no-repeat 0 0; background-size:180px 72px; vertical-align:middle; margin:0 0 2px 7px; padding:0;}
.pump-types .grey-button:active, .pump-types .grey-button.active { background:#f7941e; color:#ffffff; text-shadow:none; box-shadow:inset rgba(0,0,0,0.6) 0 1px 2px, #009900 0 0 2px;}

.pump-types .grey-button i.pump-none { background-position:0 0;  }
.pump-types .grey-button:active i.pump-none, .pump-types .grey-button.active i.pump-none { background-position:0 -36px; }
.pump-types .grey-button i.pump-air_air { background-position:-36px 0; }
.pump-types .grey-button:active i.pump-air_air, .pump-types .grey-button.active i.pump-air_air { background-position:-36px -36px; }
.pump-types .grey-button i.pump-air_water { background-position:-72px 0; }
.pump-types .grey-button:active i.pump-air_water, .pump-types .grey-button.active i.pump-air_water { background-position:-72px -36px; }
.pump-types .grey-button i.pump-liquid_water { background-position:-108px 0; }
.pump-types .grey-button:active i.pump-liquid_water, .pump-types .grey-button.active i.pump-liquid_water { background-position:-108px -36px; }
.pump-types .grey-button i.pump-from_air { background-position:-144px 0; }
.pump-types .grey-button:active i.pump-from_air, .pump-types .grey-button.active i.pump-from_air { background-position:-144px -36px; }

.compare-fields input { text-align:right; }
.compare-fields input + span { padding:0 10px 0 5px;}

.compare-fields .f-cost, .compare-fields .f-cost + span, .compare-fields .f-amount, .compare-fields .f-amount + span { display: inline; }
.compare-fields .f-perc, .compare-fields .f-perc + span { display: none; }
.compare-fields.based-on-perc .f-cost, .compare-fields.based-on-perc .f-cost + span, .compare-fields.based-on-perc .f-amount, .compare-fields.based-on-perc .f-amount + span { display: none; }
.compare-fields.based-on-perc .f-perc, .compare-fields.based-on-perc .f-perc + span { display: inline; }




/* OPERATION MODE */
#operationMode {overflow:hidden; position:relative; height:759px; width:748px; 
	-webkit-border-radius:0 8px 8px; border-radius:0 8px 8px;
}
#operationModeBg {display:block; position:absolute; top:0; left:0; height:759px; width:748px; }
.operationModeArrows { display:block; position:absolute; top:0; left:0; height:759px; width:748px; }

/* floating-tbox */
.floating-tbox { position:absolute; text-align:center; font-size:14px; line-height:1.2; width:160px; color:#262626;
	text-shadow:rgba(0,0,0,0.3) 0 1px 0;
}
.floating-tbox > i, .floating-tbox .param > i  {display:inline-block; background:rgba(255,255,255,0.8); padding:5px 10px 6px; color:#262626; font-style:normal;
	text-shadow:rgba(0,0,0,0.1) 0 1px 0;
	-webkit-border-radius:12px; border-radius:12px;
	box-shadow:0 1px 0 rgba(230, 230, 230, 0.75) inset, 0 -1px 0 rgba(0, 0, 0, 0.5) inset;
}
.floating-tbox > .title, .floating-tbox .param > .title { display:inline-block; margin:0 0 5px;}

.floating-tbox.side-box { width: 295px; left: 428px; top: 135px; color: #ffffff; text-align: right; }
.floating-tbox.side-box .param { margin-bottom: 10px; }


/* positions */
.desc-1 { width:115px; left:289px; top:240px;}
.desc-2 { width:115px; left:289px; top:420px;}
.desc-3 { width:195px; left:520px; top:487px; color:#ffffff;}
.desc-4 { width:200px; left:166px; top:730px; color:#ffffff; text-align:left;}
.desc-5 { width:295px; left:428px; top:40px; color:#ffffff; text-align:right;}
.desc-7 { width:195px; left:518px; top:607px; color:#ffffff; font-size:11px;}

/*.sens-t1 {left:147px; top:43px;}*/
.sens-t1-2 {left:147px; top:43px;}
.sens-t2 {left:265px; top:350px;}
.sens-set-t2 {left:265px; top:330px;}
.sens-t3 {left:40px; top:240px;}
.sens-t4 {left:40px; top:422px;}
.sens-t5 {left:147px; top:363px;}
.sens-t6 {left:147px; top:463px;}
.sens-t7 {left:388px; top:384px;}
.sens-set-t7 {left:388px; top:358px;}
.sens-t8 {left:388px; top:464px;}
.sens-t9 {left:265px; top:133px;}
.sens-set-t9 {left:265px; top:110px;}
.sens-t10 {left:392px; top:464px;}
.sens-t13 {left:50px; top:687px;}
.sens-t15 {left:535px; top:568px;}
.eh-on { display:block; position:absolute; width:45px; height:auto; left:323px; top:286px; -webkit-animation:eh_on_anim 2s infinite; animation:eh_on_anim 2s infinite; }
.eh-on img { display:block; width:100%; height:auto; filter: colo }
.eh-on.hide { display:none; }
@keyframes eh_on_anim{ 
	0% {opacity:0.6; filter:saturate(70%); animation-timing-function: ease-out;}
	50% {opacity:1; filter:saturate(100%); animation-timing-function: ease-in;}
	100% {opacity:0.6; filter:saturate(70%); animation-timing-function: ease-out;} 
}
@-webkit-keyframes eh_on_anim{ 
	0% {opacity:0; -webkit-animation-timing-function: ease-out; color:#FBDC8E;}
	50% {opacity:1; -webkit-animation-timing-function: ease-in; color:#ffffff;}
	100% {opacity:0; -webkit-animation-timing-function: ease-out; color:#FBDC8E;} 
}

/* operation mode specific positions */
.op-mode-2 .sens-t8,
.op-mode-3 .sens-t8,
.op-mode-5 .sens-t8, 
.op-mode-6 .sens-t8,
.op-mode-10 .sens-t8,
.op-mode-13 .sens-t8,
.op-mode-14 .sens-t8,
.op-mode-17 .sens-t8,
.op-mode-17eh .sens-t8,
.op-mode-30 .sens-t8, 
.op-mode-30 .sens-t8 {left:355px; top:442px;}

.op-mode-2 .sens-t7, 
.op-mode-3 .sens-t7, 
.op-mode-5 .sens-t7, 
.op-mode-6 .sens-t7,
.op-mode-10 .sens-t7,
.op-mode-13 .sens-t7,
.op-mode-14 .sens-t7,
.op-mode-17 .sens-t7,
.op-mode-17eh .sens-t7,
.op-mode-30 .sens-t7, 
.op-mode-30eh .sens-t7 {left:377px; top:322px;}

.op-mode-2 .sens-set-t7,
.op-mode-3 .sens-set-t7,
.op-mode-5 .sens-set-t7, 
.op-mode-6 .sens-set-t7, 
.op-mode-10 .sens-set-t7,
.op-mode-13 .sens-set-t7,
.op-mode-14 .sens-set-t7,
.op-mode-17 .sens-set-t7,
.op-mode-17eh .sens-set-t7,
.op-mode-30 .sens-set-t7, 
.op-mode-30eh .sens-set-t7 {left:458px; top:326px;}

.op-mode-9 .sens-t5,
.op-mode-10 .sens-t5,
.op-mode-11 .sens-t5,
.op-mode-12 .sens-t5,
.op-mode-13 .sens-t5,
.op-mode-14 .sens-t5,
.op-mode-15 .sens-t5,
.op-mode-16 .sens-t5,
.op-mode-17 .sens-t5,
.op-mode-17eh .sens-t5,
.op-mode-22 .sens-t5,
.op-mode-23 .sens-t5,
.op-mode-24 .sens-t5,
.op-mode-25 .sens-t5,
.op-mode-26 .sens-t5,
.op-mode-27 .sens-t5,
.op-mode-28 .sens-t5,
.op-mode-30 .sens-t5,
.op-mode-30eh .sens-t5 {left:147px; top:384px;}

/*.op-mode-10 .sens-set-t7,
.op-mode-14 .sens-set-t7 { display:none; }*/

/*.op-mode-9 .sens-t4,
.op-mode-10 .sens-t4,
.op-mode-11 .sens-t4,
.op-mode-12 .sens-t4,
.op-mode-13 .sens-t4,
.op-mode-14 .sens-t4,
.op-mode-15 .sens-t4,
.op-mode-16 .sens-t4,
.op-mode-17 .sens-t4 { display:none; }*/




/* SETTINGS */
.settings-block { overflow:hidden; }
.settings-block:first-child {margin-top:20px;}
.settings-block h2 { margin:0; font-size:20px; }

.settings-table { margin:8px 0 0 0;}
.settings-table td {padding:2px 0;}
/*.settings-table td:first-child {padding-right:30px;}*/

/* vacation mode */
#vacationModeWindow {width:500px;}




/* SYSTEM MANAGMENT */
.system-managment {}
.system-managment .grey-button {margin:0 30px 0 0; min-width:55px; }
.system-managment .title {padding:0 40px 0 0;}

#heatPumpMode p, #solarMode p {margin:2px 0;}

.mode-wrap .manual-mode { display:none; }
.mode-wrap.manual .auto-mode { display:none; }
.mode-wrap.manual .manual-mode { display:block; }





/* OWNER INFORMATION */
#emailChangeNotes .fa { font-size:22px; }
#emailChangeNotes p {margin:5px 0;}




/* SYSTEM PERFOMANCE */
.perfomance-table { width:100%; margin-bottom:40px; line-height:1.1; }
.perfomance-table td:first-child {width:560px; padding:0;}
.perfomance-table td { padding:5px 0; padding-top:5px; }
.perfomance-table .value{padding-right:8px; text-align:right; width:80px; }
.perfomance-table .unit{ text-align:left; }
.period-options { margin-bottom:10px; }

#period-table tr.no-period, #period-table tr.no-data-available { display:none; }
#period-table.placeholder tr, #period-table.no-data tr { display:none; }
#period-table.placeholder tr.no-period { display:inherit; }
#period-table.no-data tr.no-data-available { display:inherit; }
#custom-period { padding-left:15px; display:none; }
#custom-period.active { display:inline-block; }

.popup-table { width:600px; margin-bottom:15px; line-height:1.1; }
.popup-table td{ padding:5px 0; }
.popup-table td:first-child{ padding-right:5px; }
.popup-table .value{ padding-right:8px; text-align:right; width:80px; }
.popup-table .unit{ text-align:left; }

/* chart */
#chart-holder { position:relative; }
#chart-holder > i { position:absolute; top:0; left:0; z-index:0; width:100%; height:100%; background:url(/assets/img/chart-loader.gif) no-repeat center center; opacity:0; visibility:hidden; }
#chart-holder.loading > i { opacity:0; transition:all 100ms 400ms linear; opacity:1; visibility:visible; }
#chart-ctx { opacity:0; }
#chart-title { margin-bottom:15px; }
.chart-options { margin-bottom:15px; }
.chart-label{ font-size:12px; margin:0 0 5px !important; color:#888888; }
#chart-legend { text-align:left; margin-top:-20px; }
.legend-label{ font-size:12px; display:block; text-transform:lowercase; }
.chart-option { font-size:14px; padding:10px; color:#3d3d3d; }
.chart-option.active, .chart-option:active { color:#f7941e; }
.chart-option .fa{ font-size:26px; vertical-align:middle; }

/* system-select */
.system-select { margin:5px 0; }
.multi-choice a {display:inline-block; vertical-align:middle; height:auto; max-width:600px; overflow:hidden; position:relative; color:#262626; 
	box-shadow:inset rgba(0,0,0,0.4) 0px 1px 1px, rgba(255,255,255,0.3) 0px 1px 0px; -webkit-transition:box-shadow 100ms linear; transition:box-shadow 100ms linear;
	-webkit-border-radius:8px; border-radius:8px; background:#ffffff;
}
.multi-choice a > span{display:inline-block; line-height:1.2; height:auto; padding:8px 35px 7px 10px; margin:0; border:none; vertical-align:middle;
	 -webkit-appearance:none; text-shadow:none;
}
.multi-choice a > span > .fa{font-size:16px; display:block; position:absolute; top:50%; right:12px; height:25px; margin-top:-7px; color:#F7941B;}



/* SYSTEM VARIABLES */
#systemVariables {position:relative;}
#systemOverview {width:558px; float:left; position:relative; margin-top:10px;}
#systemOverviewImage {display:block; width:558px; height:auto;}

/* arrowPointer */
#arrowPointer {display:block; color:#ffffff; text-shadow:0 0 2px #000000; font-size:45px; position:absolute; top:50px; left:200px;}
#arrowPointer.reverse {  -webkit-transform:scaleX(-1); transform:scaleX(-1); }
@keyframes arrow_anim{ 
	0% {margin-left:0px; animation-timing-function: ease-out; color:#FBDC8E;}
	50% {margin-left:8px; animation-timing-function: ease-in; color:#ffffff;}
	100% {margin-left:0px; animation-timing-function: ease-out; color:#FBDC8E;} 
}
@-webkit-keyframes arrow_anim{ 
	0% {margin-left:0px; -webkit-animation-timing-function: ease-out; color:#FBDC8E;}
	50% {margin-left:8px; -webkit-animation-timing-function: ease-in; color:#ffffff;}
	100% {margin-left:0px; -webkit-animation-timing-function: ease-out; color:#FBDC8E;} 
}
@keyframes arrow_anim_reverse{ 
	0% {margin-left:0px; animation-timing-function: ease-in; color:#ffffff;}
	50% {margin-left:8px; animation-timing-function: ease-out; color:#FBDC8E;}
	100% {margin-left:0px; animation-timing-function: ease-in; color:#ffffff;} 
}
@-webkit-keyframes arrow_anim_reverse{ 
	0% {margin-left:0px; -webkit-animation-timing-function: ease-in; color:#ffffff;}
	50% {margin-left:8px; -webkit-animation-timing-function: ease-out; color:#FBDC8E;}
	100% {margin-left:0px; -webkit-animation-timing-function: ease-in; color:#ffffff;} 
}
#arrowPointer { -webkit-animation:arrow_anim 1s infinite; animation:arrow_anim 1s infinite; }
#arrowPointer.reverse { -webkit-animation:arrow_anim_reverse 1s infinite; animation:arrow_anim_reverse 1s infinite; }

/* systemVarsWrap */
#systemVarsWrap { width:176px; float:right; margin-right:8px;}
.systemVarsWrapInner { max-height: 680px; overflow: auto; border-radius:6px; background:#ffffff; box-shadow:inset 0 1px 2px rgba(0,0,0,0.4); }
#systemVarsWrap > .title {margin:10px 0 5px; text-align:center;}

/* setpointVarsWrap */
#setpointVarsWrap { position:absolute; top:600px; left:0; margin:0 0 0 25px; width:400px; overflow:hidden;}
#setpointVarsWrap .title {color:#505050; margin:18px 0 0 8px; text-shadow:none;}
#setpointVarsWrap .variables-table {box-shadow:none;}

/* variables-table */
.variables-table { display:block; width:100%; border-collapse:separate; }
.variables-table tbody { display:block; }
.variables-table tr { display:block; border-top:1px solid #eeeeee; padding:5px 8px; overflow: hidden; }
.variables-table tr:first-child { border-top:none; }
.variables-table tr.active { background:#FBDC8E; }
.variables-table td { display:block; color:#505050; text-shadow:none; font-size:13px; text-align:right; line-height:1; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
.variables-table td:first-child { text-align:left; float: left; max-width: 80%; margin-right: 8px; }




/* SYSTEM CONFIGURATION */
#systemConfigValues { float:left; }
#systemConfigValues .frow { margin:0; line-height:64px;}
#systemConfigValues .frow label{display:inline-block; width:200px; line-height:1; vertical-align:middle; padding:0 10px 0 0;}
#systemConfigValues .inputfield{text-align:right;}

#hcChartWrap { float:right; background:#ffffff; padding:8px 10px; border-radius:10px; margin-top:15px; color:#505050; text-shadow:none; box-shadow:0 1px 1px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.3);}
#hcChartWrap .title { margin:0 0 10px 0; text-transform:none;}
#hcChartWrap .yaxis { display:block; font-size:12px; }
#hcChartWrap .xaxis { display:block; text-align:right; font-size:12px;}
#hcChartWrap .xaxis .sub {font-size:10px;}
#heatingCurveChart { display:block; }




/* PV */
#pv-chart-wrap { background: #ffffff; padding: 15px 10px 22px; border-radius: 10px; margin-top: 0px; color: #505050; text-shadow: none; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.3); }
.chart-date { border:none; outline:none; background:no-repeat; padding:0 0 5px; margin:0; text-align:center; height:20px !important; width:110px !important; min-width:0 !important; vertical-align:middle; }
.chart-date-arrow { padding:0 5px; font-size:20px; }
.chart-date-arrow:hover { color:#f7941e; }
.chart-date-arrow:active { color:#d7640e; }


/* SYSTEM ALARMS */
.errors-list li {margin:0 0 0 15px;}
.errors-list li b { display:inline-block; margin-right: 20px; text-transform:uppercase; }
.errors-list li + li.no-errors { display:none; }
.warning-color { color:#EFBD45; }
.error-color { color:#FF6661; }


/* FOOTER */
#footer-push { height:115px; }
#footer {position:absolute; width:100%; height:105px; bottom:0; left:0;}
#footer > .layout { padding:5px 20px 10px; }
#footer-logo { height:75px; float:right; }

#serviceLogin { display:inline-block; color:#262626; padding:0; width:64px; height:64px; text-align:left; margin:7px 0 0 5px; background:none;
	-webkit-border-radius:32px; border-radius:32px;
}
#serviceLogin:active, #serviceLogin.active {color:#f7941e;}
#serviceLogin .fa {margin:0; font-size:32px; line-height:64px;}

/* param status */
#paramStatus { display: inline-block; padding: 0; width: 40px; height: 64px; text-align: left; margin: 7px 0 0 5px; background: none; -webkit-border-radius: 32px; border-radius: 32px; }
#paramStatus:active {color:#f7941e;}
#paramStatus .fa { margin: 0; font-size: 32px; line-height: 64px; }

.param-status-window { position:absolute; bottom:90px; left:-700px; max-width:700px; min-width:340px; height:auto; padding:20px 20px 20px 30px; background:#f3f3f3; border-radius:0 10px 10px 0; box-shadow:1px 1px 3px rgba(0,0,0,0.2); z-index:9999; transition:left 400ms ease-in-out; }
.param-status-window.show { left:0%; }
.param-status-window > .scroll-wrap { max-height:400px; overflow-x: hidden; overflow-y:auto; padding-right: 24px; }
.param-status-table td { padding:0px 0 3px 10px; font-size:15px; white-space:nowrap; }
.param-status-table td:first-child { padding-left:0; }
.param-status-table .param-time { font-size:0.7em; font-weight:bold; color:#909090; }
.param-status-heading { margin:0 0 4px 0; }
.param-status-clear { display:block; float:right; }

/* footer-service-menu */
.footer-service-menu { list-style: none; padding: 0; margin: 0 0 0 0; font-size:0; }
.footer-service-menu li { display: inline-block; margin: 0 auto; }
.footer-service-menu li:before { content:"|"; color:rgba(0,0,0,0.3); display: inline-block; margin: 0 5px; font-size:14px; }
.footer-service-menu li:first-child:before { content: ""; margin: 0; }
.footer-service-menu a { color: #000; font-weight:normal; text-decoration: none; font-size: 14px; }