@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(lato400.woff) format('woff');
}


body		{ background: #efefef; margin-left: 0px; height:100%; }
.body_noscroll	{ position: relative; overflow-y:inherit; height:100vh; width:100%; }

.container > header		{ z-index:0; color: #fff; font-family: 'Lato', Verdana, sans-serif; margin: 0 auto; padding: 12em 2em; background: rgba(0,0,0,0.05); }
.container > header a		{ color: #566473; text-decoration: none; outline: none; }
.container > header a:hover 	{ color: #4f7bab; }
.container > header h1		{ font-size: 3.2em; line-height: 1.3; margin: 0; font-weight: 300; }
.container > header span 	{ display: block; font-size: 55%; color: #74818e; padding: 0 0 0.6em 0.1em; }

*,
*:after,
*::before 		{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
@font-face		{ font-weight: normal; font-style: normal;
			font-family: 'ecoicons';
			src: url("../fonts/ecoicons/ecoicons.woff") format("woff"), url("../fonts/ecoicons/ecoicons.ttf") format("truetype"), url("../fonts/ecoicons/ecoicons.svg#ecoicons") format("svg");
			}

input			  { font-family: 'Lato', Verdana; height:3.2em; } // font-size:16px; }
input[type=text]:disabled { background:#bbbbbb; color:#444444; -webkit-text-fill-color:#444444; -webkit-opacity:1}

.lowerbutton		  { width:150px!important } 

.weekday_input		  	 { position:relative; width:39.5%; height:32px; padding-left:2px; padding-right:2px; background:rgba(230,230,230,0.9); border:0; color:#000; transition: background 0.4s !important}
.weekday_input:first-child	 { float:left; left:20.1% }
.weekday_input:hover		 { background:#bbbbbb; color:#000;  transition: background 0.4s !important}
.weekday_input_active		 { position:relative; width:39.5%; height:32px; padding-left:2px; padding-right:2px; background:rgba(0,146,58,1); border:0; color:#fff; transition: background 0.4s; !important}
.weekday_input_active:first-child{ float:left; left:20.1% }

.monthday_input		{ float:left; position:relative; left:20.1%; margin-right:3px; width:19.5%; height:32px; padding-left:2px; padding-right:2px; background:rgba(230,230,230,0.9); border:0; color:#000;  transition: background 0.4s !important}
.monthday_input:hover	{ background:#bbbbbb; color:#000; transition: background 0.4s !important}
.monthday_input_active	{ float:left; position:relative; left:20.1%; margin-right:3px; width:19.5%; height:32px; padding-left:2px; padding-right:2px; background:rgba(0,146,58,1); border:0; color:#fff; transition: background 0.4s; !important}

.mailgroup_input	{ float:left; position:relative; left:20.1%; text-align:left; border:0; width:68%; height:32px; padding-left:4px; padding-right:4px; background:rgba(230,230,230,0.9); color:#000;  transition: background 0.4s !important}
.list	{ width:11.5%; text-align:center; border-left-style:solid;border-left-width:2px}
.mailgroup_input:hover	{ background:#bbbbbb; color:#000;  transition: background 0.4s !important}
.mailgroup_input_active	{ float:left; position:relative; left:20.1%; text-align:left; border:0; width:68%; height:32px; padding-left:4px; padding-right:4px; transition: background 0.4s; !important}


/* icon-only trigger (menu item) */
.gn-menu-main,
.gn-menu-main ul	{ z-index:1;margin: 0; padding: 0; list-style: none; text-transform: none; font-weight: 300; font-family: 'Lato', Arial, sans-serif; line-height: 50px;}


.gn-menu-main	
{
  position: fixed; top: 0; left: 0; width: 100%; height: 50px; font-size: 13px; 
  -webkit-box-shadow: inset 1px 1px 1px 0px rgba(0, 0, 0, 0.67), 3px 4px 12px 3px rgba(0,0,0,0.55);
  -moz-box-shadow: inset 1px 1px 1px 0px rgba(0, 0, 0, 0.67), 3px 4px 12px 3px rgba(0,0,0,0.55);
  box-shadow: inset 1px 1px 1px 0px rgba(0, 0, 0, 0.67), 3px 4px 12px 3px rgba(0,0,0,0.55);
}
.gn-menu-main a 	{ display: block; height: 100%; color: #fff; text-decoration: none; cursor: pointer; }
.no-touch .gn-menu-main a:hover { background: #5f6f81; color: black; }
.gn-menu-main > li 	{ display: block; float: left; height: 100%; border-right: 1px solid #000; text-align: center; }


.gn-menu-main li.gn-trigger	{ position: relative; width: 60px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.gn-menu-main > li:last-child	{ float: right; border-right: none; border-left: 1px solid #000000; }
.gn-menu-main > li > a		{ padding: 0 30px; letter-spacing: 1px; font-weight: bold; }
.gn-menu-main:after 		{ display: table; clear: both; content: ""; }
.gn-scroller	{ position: absolute; overflow-y: scroll; width: 370px; height: 100%; }
.gn-menu 	{ border-bottom: 1px solid #222; text-align: left; font-size: 18px; }
.gn-menu li:not(:first-child),
.gn-menu li li	{ box-shadow: inset 0 1px #222 }
.gn-submenu li	{ overflow: hidden; height: 0; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; transition: height 0.3s; }
.gn-submenu li a{ color: #c1c9d1 }

.gn-menu-wrapper
{
 position: fixed; top: 50px; bottom: 0; left: 0; overflow: hidden; width: 60px; border-top: 1px solid #222; 
 -webkit-transform: translateX(-60px); -moz-transform: translateX(-60px); transform: translateX(-60px);
 -webkit-transition: -webkit-transform 0.4s, width 0.4s; -moz-transition: -moz-transform 0.4s, width 0.4s; transition: transform 0.4s, width 0.4s;
}



.gn-icon::after,
.gn-icon::before,
.gn-icon-main::before,
.gn-icon-warn::before
{ display: inline-block; text-transform: none; font-weight: normal; font-style: normal; font-variant: normal; font-family: 'ecoicons'; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; }

.gn-icon::after		{ width: 40px; text-align: right;  }
.gn-icon::before	{ width: 60px; text-align: center; }
.gn-icon-main::before	{ width: 30px; text-align: center; }
.gn-icon-warn::before	{ width: 18px; text-align: left;   }



@keyframes anim-rotate
{
 0%	{ transform: rotate(0);}
 100%	{ transform: rotate(360deg);}
}

.spinner
{
 display: inline-block;
 font-size:27px; height: 26px; line-height: 1; margin: 0; color: #ffffff; 
 animation: anim-rotate 12s infinite linear; 
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

.spinner-stop
{
 color: red;
 animation-play-state: paused;
 -webkit-animation-play-state:paused;
 -webkit-animation: none !important;
}


.gn-icon.sub::before 		{ width: 60px; padding-left:20px; }
.gn-icon-home::before		{ content: "\e900"}
.gn-icon-cog::before		{ content: "\e006"}
.gn-icon-clock::before		{ content: "\e94e"}
.gn-icon-sdcard::before		{ content: "\e902"; font-size:20px;}
.gn-icon-download::before	{ content: "\e903"}
.gn-icon-stats::before		{ content: "\e99b"}
.gn-icon-drop::before		{ content: "\e904"; }
.gn-icon-xls::before		{ content: "\e905"}
.gn-icon-reload::before		{ content: "\e906"}
.gn-icon-spinner::before	{ content: "\e97b"}
.gn-icon-folder::before		{ content: "\e930"}
.gn-icon-switch::before		{ content: "\e9b6"; color: #000000; }
.gn-icon-timer::before		{ content: "\e94d"; color: red;}
.gn-icon-timerwht::before	{ content: "\e94d"; }
.gn-icon-timergree::before	{ content: "\e94d"; color: rgba(120,255,116,1)}
.gn-icon-lab::before		{ content: "\e9aa"}
.gn-icon-warngree::before	{ content: "\e901"; color: #ffffff; opacity:0.85 }
.gn-icon-warnyell::before	{ content: "\e901"; color: yellow; opacity:0.85}
.gn-icon-warnred::before	{ content: "\e901"; color: red; opacity:0.85  }
.gn-icon-lock::after		{ content: "\e98f"; color: #C70303; font-size:24px; position:relative; top:3px; opacity:0.80}
.gn-icon-unlocked::after	{ content: "\e98f"; color: #ffffff; font-size:24px; position:relative; top:3px; opacity:0.80}
//.gn-icon-unlocked::after	{ content: "\e990"; color: #00E920; font-size:22px; position:relative; top:3px}
.gn-icon-user-circle-o::after	{ content: "\f2be"; color:#C70303;font-size:18px;}
.gn-icon-user-circle::after	{ content: "\f2bd"; color: green; font-size:18px;}


.gn-icon span		{ width: 0; height: 0; display: block; overflow: hidden; }
.gn-icon-menu::before	{ margin-left: -15px; vertical-align: -2px; width: 30px; height: 3px; background: #fff; box-shadow: 0 -6px #fff, 0 -12px #fff; content: ''; }

.no-touch .gn-icon-menu:hover::before,
.no-touch .gn-icon-menu.gn-selected:hover::before { background: white; box-shadow: 0 -6px #fff, 0 -12px #fff; }

.gn-menu-wrapper.gn-open-all,
.gn-menu-wrapper.gn-open-part
{
 -webkit-transform: translateX(0px); -moz-transform: translateX(0px); transform: translateX(0px);
 -webkit-box-shadow: inset 1px 1px 1px 0px rgba(0, 0, 0, 0.67), 3px 4px 12px 3px rgba(0,0,0,0.55);
 -moz-box-shadow: inset 1px 1px 1px 0px rgba(0, 0, 0, 0.67), 3px 4px 12px 3px rgba(0,0,0,0.55);
 box-shadow: inset 1px 1px 1px 0px rgba(0, 0, 0, 0.67), 3px 4px 12px 0px rgba(0,0,0,0.55);
}

.gn-menu-wrapper.gn-open-all 			{ width: 300px}
.gn-menu-wrapper.gn-open-all .gn-submenu li	{ height: 0px }
.gn-menu-wrapper.gn-open-all .gn-submenu-open li{ height: 50px}


@media screen and (max-width: 420px)
{ 
.gn-menu-wrapper.gn-open-all { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); transform: translateX(0px); width: 100%; }
.gn-menu-wrapper.gn-open-all .gn-scroller { width: 130% }
}


/* Popover */
.popover { position:fixed; left:50%; top:20%; width:288px; margin:0 -144px; z-index:4!important; perspective: 1000px; visibility:hidden; opacity:0; transition:visibility 0s linear 0.4s,opacity 0.4s linear;}
.popover-visible { visibility:visible; opacity:1; transition-delay:0s; z-index:1000;}
.popover-hidden { visibility:hidden; opacity:0; transition:visibility 0s linear 0.4s,opacity 0.4s linear; }      

@media screen and (max-height: 500px)
{
.popover { top:10%; }
}


.popover .popover-content
{
  border:1px solid #000; position:relative;
  -moz-border-radius:0px;
  -webkit-border-radius:0px;
  border-radius:0px;
  background-color: #575757;
  -webkit-box-shadow: inset 1px 1px 1px 0px rgba(255, 255, 255, 0.37), 3px 4px 18px 3px rgba(255, 255, 255, 0.85);
  -moz-box-shadow: inset 1px 1px 1px 0px rgba(255, 255, 255, 0.37), 3px 4px 18px 3px rgba(255, 255, 255, 0.85);
  box-shadow: inset 1px 1px 1px 0px rgba(255, 255, 255, 0.37), 3px 4px 18px 3px rgba(255, 255, 255, 0.85);
  padding:1px;
}

.popover .popover-content input { text-align:center;border-style:solid;border-width:1px;margin-top:0px;padding:1px;}
        
.popover .popover-body
{
 -moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px; border:1px solid #000; background:#fff;
 -webkit-box-shadow: 0px 1px 2px 0px rgba(255, 255, 255, 0.4),inset 1px 1px 4px 0px rgba(0, 0, 0, 0.66);
 -moz-box-shadow: 0px 1px 2px 0px rgba(255, 255, 255, 0.4),inset 1px 1px 4px 0px rgba(0, 0, 0, 0.66);
 box-shadow: 0px 1px 2px 0px rgba(255, 255, 255, 0.4),inset 1px 1px 4px 0px rgba(0, 0, 0, 0.66);
}
        
.popover .popover-body ul    { margin:0; padding:0;}
.popover .popover-body ul li { border-bottom:1px solid rgba(0, 0, 0, 0.1); list-style-type:none; padding:0; margin:0; font-weight:normal; font-size:15px; line-height:28px; padding:5 5 5 15px; font-family: 'Lato', Verdana; }
.popover .popover-body ul li:last-child { border-bottom:0;}
.greyout	{ background-color: black;  filter:alpha(opacity=50); opacity: 0.5; -moz-opacity:0.50;  width: 100%; background-repeat:repeat; background-position:center; position:fixed; top:0px; left:0px; display:none; height:100vh; overflow:hidden; }
.maincontainer { width: 100vw; height:100%; text-align:center; margin-top: 64px; padding-right:5px; padding-left:0px; }

.contentdiv-maincontent,
.contentdiv-maincontent_vis	{ overflow: auto; float:left; text-align:left; width:100%; padding: 10px 10px 4px 10px }
.contentdiv-maincontent_hidden	{ overflow:hidden; height:0; width:100%; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; transition: height 0.3s; }


.input 			{ width:80%; padding:5px; height:28px!important;background: rgba(250,250,250,0.9); }
select			{ width:80%; height:30px; background: rgba(250,250,250,0.9); }
.measurement		{ float:left; text-align:left; font-size:1.2em }

.contentdiv, .timedate, .timedateindex, .contentdiv_cfg
{
 transition: background 0.5s;
 font-family: 'Lato', Verdana; color: #fff;
 padding: 12px;
 display:inline-block;
 margin: 0px 0.6vw 10px 0.6vh;
 text-align: center;
 border-style:solid; border-width:1px; border-color:#efefef; border-radius: 6px;
 -webkit-box-shadow: 3px 4px 8px 3px rgba(0,0,0,0.55);
 -moz-box-shadow: 3px 4px 8px 3px rgba(0,0,0,0.55);
 box-shadow: 3px 4px 8px 3px rgba(0,0,0,0.55);
}

.contentdiv-cfg-header			{ padding:10px 10px 10px 10px; border-bottom-style: solid; border-bottom-width:1px; border-color:#efefef; height:42px; border-radius: 6px 6px 0px 0px;}
.c1main, .c2main, .c3main, .c4main	{ padding:10px 10px 10px 10px; border-bottom-style: solid; border-bottom-width:1px; border-color:#efefef; border-radius: 6px 6px 0px 0px; }


.checkbox {
 -webkit-appearance: checkbox !important;
 -moz-appearance: checkbox !important;
 -ms-appearance: checkbox !important;
 -o-appearance: checkbox !important;
 appearance: checkbox !important;
 height:26px;
 width: 26px;
 position:relative;
 vertical-align: middle;
 border:0px;
 padding:0px;
 margin:0px
}


.optionbutton
{
 border-radius:3px; position:relative; top:-5px;padding:3px;background-color: rgba(220,220,220,1);float:right;border-style:solid;border-width:1px; border-color:#efefef; 
 -webkit-box-shadow: 1px 2px 4px 1px rgba(0,0,0,0.55);
 -moz-box-shadow: 1px 2px 4px 1px rgba(0,0,0,0.55);
 box-shadow: 1px 2px 4px 1px rgba(0,0,0,0.55);
 transition: background 0.2s;
 margin-right:8px;
}
.optionbutton:hover { background-color: rgba(250,250,250,1); cursor:pointer; }

.config 	{ height:36px; width:100%; }
.config_left	{ padding-top:0px; height:36px; vertical-align:middle; float:left; width:48%;  font-size:1.2em }
.config_left_l	{ padding-top:0px; height:36px; vertical-align:middle; float:left; width:78%;  font-size:1.2em }
.dark 		{ color:#aaaaaa; }
.config_right	{ float:right; text-align:right; width:21%; }
.config_right_l	{ float:right; text-align:right; width:52%; }
.config_hidden, .config_hidden_d { overflow:hidden; height:0; width:100%; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; transition: height 0.3s; }
.config_vis, .config_vis_d	 { height:36px; width:100%; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; transition: height 0.3s; }
.config_vis_d	{ height:70px; }
.contentdata	{ float:left; text-align:left; padding:8px; position:absolute; height:230px; width:270px }
.channelnumber	{ float:right;text-align:right; padding-top:2px }
.errorfield	{ width:100%; font-size:1.0em }
.timermenu 	{ opacity:0.85; position:fixed;left:165px;top:18px; z-index:10; cursor:pointer; width:250px; color:white; font-size:14px; text-decoration:bold; display:none;}

@media screen and (max-width: 450px)
{ 
 .timedateindex,  .contentdiv, .contentdiv_cfg	{ width: 96vw; min-width:300px; padding:18px 10px 18px 10px}
 .config_left,  .config_left_l	 		{ padding-top:4px; font-size:1.0em; }
 .controller_name				{ display:none;}
 .timermenu					{ display:none!important}
 .config_right_l				{ padding-top:2px; font-size:0.85em!important }
 .lowerbutton		  			{ width:126px!important; font-size:0.75em; } 
 .ct-chart, .refRateView, .chdiv		{ display:none!important }
 .contentdata					{ display:none; }
 .c1main, .c2main, .c3main, .c4main		{ border-bottom-width:0px; border-radius: 6px 6px 6px 6px; padding:18px 10px 18px 10px!important }
 .optionbutton					{ padding:8px;position:relative;top:-8px;right:-6px}
}


@media screen and (max-width: 1000px)
{ 
 .timedate, .timedateindex, .contentdiv, .contentdiv_cfg	{ width: 93vw;}
}

@media screen and (min-width: 1000px)
{ 
 .timedate, .timedateindex,  .contentdiv_cfg		{ width: 93vw;}
 .contentdiv				{ width: 46vw;}
}

@media screen and (max-width: 600px)
{ 
.errorfield		{ font-size:0.80em }
}

@media screen and (max-width: 440px)
{ 
.errorfield		{ font-size:0.75em }
.errorcrlf::before	{ content:"\A          "; white-space:pre; }
.errorcrlf::after	{ content:"\A          "; white-space:pre; }
}

@media screen and (max-width: 380px)
{
 .config_left, .config_left_l	 	{ padding-top:6px; font-size:0.9em; }
 .config_right_l, .config_right		{ font-size:0.75em!important }
 .channelnumber				{ display:none;}
 .main_units 				{ display:none;}
}


@media print
{
 .timedate, .timedateindex, .tempversion_div, .gn-menu-main, .skipbutton, .gn-menu-wrapper { display:none;}
 .ct-label 			{ fill:#fff; color:#000;font-size:20px;}
 .maincontainer			{ margin-top:0px; }
 html, body 			{ margin-top:0px; top:0px; width: 210mm; height:290mm; color:#000; background-color:#fff}
 .contentdiv,
 .contentdiv_cfg
  {
   margin:0px;
   position:relative;
   top:0px; width: 100%;
   color:#000; background-color:#fff;
   border-style:solid; border-width: 1px; border-color:#000;
   -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.55);
   -moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.55);
   box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.55);
   margin: 0;
  }
 .contentdiv-cfg-header {color:#000; background-color:#fff;  border-style:solid; border-width: 1px; border-color:#000;}
}


/*  Diagnost.htm  */
.diagtextarea {font-family:courier; font-size:13px; width:920px; height:280px; background-color:#e4e4e4;}