html {
  width:100%; height:100%;
  margin:0; padding:0; border:0;
  
  scrollbar-face-color: #646464;
  scrollbar-base-color: #646464;
  scrollbar-3dlight-color: #646464;
  scrollbar-highlight-color: #646464;
  scrollbar-track-color: #000;
  scrollbar-arrow-color: #000;
  scrollbar-shadow-color: #646464;
  scrollbar-dark-shadow-color: #646464;  
}

::-webkit-scrollbar { width: 4px; height: 4px;}
::-Xwebkit-scrollbar-button {  background-color: #808080; }
::-Xwebkit-scrollbar-track {  background-color: #808080;}
::-Xwebkit-scrollbar-track-piece { background-color: #808080;}
::-webkit-scrollbar-thumb { height: 50px; background-color: #808080; border-radius: 2px;}
::-Xwebkit-scrollbar-corner { background-color: black;}}
::-webkit-resizer { background-color: #666;}

body {
  position:relative;
  width:100%; height:100%;
  margin:0; padding:0; border:0;
  overflow:hidden;
  background:#343434;  
  font-family:"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
  font-size:14px;
  color: white;
  overflow:auto;
  line-height: 1.25em;
}

#login {
  position: fixed; 
  left:0; top:0; right:0; bottom:0;
  width: 18em; height:27em; margin:auto; padding:1em;  
  background: #444; 
  border:1px solid #262630; border-radius:1em;
  text-align: center;
}

#header {
  position:relative; height:3.5em; padding:0.125em 0.5em;
  color: white;
  background: #343434;  /* 013f69  #013e6a;  */
  overflow: hidden;
  box-sizing: border-box;
}  

.popupMenu {
  display: none;
  position: absolute;
  width: 12em;
  top: 3em;
  left: auto;
  right: auto;
  bottom: auto;
  padding: 0 0.5em;
  background: #444;
  border-radius: 0.5em;
  z-index: 11;
  box-shadow: 0 0 1em 0 rgba(0,0,0,0.5);
}

#content {
  position: absolute;
  top: 4em;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}

#cover {
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background: black;
  opacity: 0.25;
  z-index: 10;
}



#menu {
  position: absolute;
  top: 4em;
  left: 0;
  width: 16em;
  bottom: 0;
  box-sizing: border-box; 
  color: #999;
  background: #444; 
  border-right: 1px solid #383838;
  z-index: 999;
}

.menuOption {
  width: 100%;
  Xheight: 2.5em;
  margin: 0.5em 0;
  padding: 0.5em;
  Xborder-bottom: 1px solid #383838;
  box-sizing: border-box; 
  font-family: Arial;
  font-size: 16px;
  color: #ccc;
  font-weight: normal;
  cursor: pointer;
  border-radius: 0.25em;
}

.menuOption:hover {
  color: #444;
  background: #f39317; 
}

.menuOption.selected {
  color: white;
  background: #013f69; 
  cursor: default;
}

.menuOption > i {
  color: white;
}

.activeOption {
  border-bottom: 0.25em solid #f39317;
}

#toolbar {
  position: relative; 
  box-sizing: border-box; 
  padding: 0 1em;
  height: 3em; 
  background: #343434; 
  overflow: hidden;
  Xborder-bottom: 1px solid #333;
  Xborder-radius: 0.25em;
  margin-top: 0.25em;
}

#toolbar > div {
  margin: 0.25em;
  box-sizing: border-box; 
}

#toolbar input, #toolbar select {
  margin: 0;
  box-sizing: border-box; 
  width: 100%;
}


input, textarea, select {
  box-sizing: border-box; 
  height: 1.75em;  
  margin: 0; 
  padding: 0.25em;
  border: 0.0625em solid #b2b2b2; 
  border-radius: 0.25em;
  box-shadow: none;
  outline: none;
  font-size: inherit;
}

input::placeholder {
  color: #ccc;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

input.flat, input.flat:focus {
  padding:2px 0;
  border:none;
  box-shadow:none;
  background:none;
  width: 100%;
}

select {
  Xpadding: 0.1875em;
}

textarea { 
  resize: none; 
}

input.checkbox {
  margin:0;padding:1px;vertical-align:top;
  border:none; border-radius:none;
  box-shadow:none;
} 

input.checkbox:focus {
  box-shadow:none;
  outline:0;
} 

label {line-height:1.3em; vertical-align:middle; font-size:75%; opacity:0.5;}



button {
  display:inline-block; margin:0px; padding:8px; overflow:hidden;
  font-size:100%; color:white; text-decoration:none;
  background:#f39317; /* 013f69 064296  ->  #015fab */
  border:1px solid #e38307; 
  border-radius:8px;
  white-space:nowrap; outline:0; cursor: pointer;  
}

button:hover {
  background:#f3a337; 
  Xborder:1px solid #E32; 
}  


.toolbar {height:40px; margin:1em; overflow:hidden;}

.toolbar .spacer {display:inline-block; width:24px; height:40px; padding:0;}

.toolbar a.button {
  display: inline-block; overflow:hidden;
  min-width:50px; max-width:75px; height:13px;
  width: auto;
  padding:28px 2px 0 2px; margin:2px;
  text-align:center; font-size:10px; color:#555;
  text-overflow:ellipsis; white-space:nowrap;
  text-shadow:0 1px 1px #eee;
  background:url(../img/buttons.png) -100px 0 no-repeat transparent;
}

.tabs-table {
  display: table;
  table-layout: fixed;
  position: absolute; 
  left: 25%;
  bottom: 0;
  width: 75%;
  height: 32px;
  overflow: visible;
}

.tabs-cell {
  display: table-cell;
}

.tab {
  display: block;
  cursor: pointer;
  margin: 12px 12px 0 0;
  height: 16px;
  padding: 8px 0;
  color: #888;
  text-align: center;
  text-decoration: none; 
  background: white;  /* #F0F4F8  url(../img/linen_header.jpg) repeat; */
  border-top: 1px solid #e0e4e8;
  border-left: 1px solid #e0e4e8;
  border-right: 1px solid #e0e4e8;
  border-radius: 8px 8px 0 0;
}

.tab:hover {
  Xcolor: #eee;
  text-decoration: underline; 
}

.tab.active {
  cursor: default;
  height:17px;
  font-weight: bold;
  color:black;
  background:#F0F4F8;  /* url(../img/linen.jpg) repeat; */
  text-decoration: none; 
}


a.button-logout{
  display:block;padding:4px 4px 4px 20px;
  background:url(../img/buttons.png) -6px -193px no-repeat;color:black;
}

.formbuttons {margin-top:2em;font-size:14px;text-align:center;}

a {text-decoration:none; color:inherit;}
a:hover {text-decoration:underline;}

#mailview-left {position:absolute;top:0;left:0;width:220px;bottom:0;z-index:2}
#mailview-right{position:absolute;top:0;left:232px;right:0;bottom:0;z-index:3}

.whitebox {
  box-sizing: border-box;
  xborder:1px solid #a3a3a3; 
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 0 2px #999;
  -o-box-shadow:0 0 2px #999;
  -webkit-box-shadow:0 0 2px #999;
  -moz-box-shadow:0 0 2px #999;
  background:#fff;
}

.bluebox {
  box-sizing: border-box;
  xborder:1px solid #a3a3a3;
  border-radius:0.5em;
  overflow:hidden;
  xbox-shadow:0 0 2px #999;
  x-o-box-shadow:0 0 2px #999;
  x-webkit-box-shadow:0 0 2px #999;
  x-moz-box-shadow:0 0 2px #999;
  background:#e8e8e8;
}

.grid {
  display: block;
  position: absolute;
}
  
.l00 {left:0.5%;}
.l10 {left:10.5%;}
.l20 {left:20.5%;}
.l30 {left:30.5%;}
.l33 {left:33.83%;}
.l40 {left:40.5%;}
.l50 {left:50.5%;}
.l60 {left:60.5%;}
.l66 {left:67.16%;}
.l70 {left:70.5%;}
.l80 {left:80.5%;}
.l90 {left:90.5%;}

.t00 {top:2%;}
.t10 {top:12%;}
.t20 {top:22%;}
.t30 {top:32%;}
.t33 {top:35.33%;}
.t40 {top:42%;}
.t50 {top:52%;}
.t60 {top:62%;}
.t66 {top:67.66%;}
.t70 {top:72%;}
.t80 {top:82%;}
.t90 {top:92%;}

.w10 {width:09%;}
.w20 {width:19%;}
.w30 {width:29%;}
.w33 {width:32.33%;}
.w40 {width:39%;}
.w50 {width:49%;}
.w60 {width:59%;}
.w66 {width:65.66%;}
.w70 {width:69%;}
.w80 {width:79%;}
.w90 {width:89%;}
.w00 {width:99%;}

.h10 {height:06%;}
.h20 {height:16%;}
.h30 {height:26%;}
.h33 {height:29.33%;}
.h40 {height:36%;}
.h50 {height:46%;}
.h60 {height:56%;}
.h66 {height:62.66%;}
.h70 {height:66%;}
.h80 {height:76%;}
.h90 {height:86%;}
.h00 {height:96%;}
  
.l00 {left:calc(0.5em);}
.l10 {left:calc(10% + 0.5em);}
.l20 {left:calc(20% + 0.5em);}
.l30 {left:calc(30% + 0.5em);}
.l33 {left:calc(33.33% + 0.5em);}
.l40 {left:calc(40% + 0.5em);}
.l50 {left:calc(50% + 0.5em);}
.l60 {left:calc(60% + 0.5em);}
.l66 {left:calc(66.66% + 0.5em);}
.l70 {left:calc(70% + 0.5em);}
.l80 {left:calc(80% + 0.5em);}
.l90 {left:calc(90% + 0.5em);}

.t00 {top:calc(0.5em);}
.t10 {top:calc(10% + 0.5em);}
.t20 {top:calc(20% + 0.5em);}
.t30 {top:calc(30% + 0.5em);}
.t33 {top:calc(33.33% + 0.5em);}
.t40 {top:calc(40% + 0.5em);}
.t50 {top:calc(50% + 0.5em);}
.t60 {top:calc(60% + 0.5em);}
.t66 {top:calc(66.66% + 0.5em);}
.t70 {top:calc(70% + 0.5em);}
.t80 {top:calc(80% + 0.5em);}
.t90 {top:calc(90% + 0.5em);}

.w10 {width:calc(10% - 1em);}
.w20 {width:calc(20% - 1em);}
.w30 {width:calc(30% - 1em);}
.w33 {width:calc(33.33% - 1em);}
.w40 {width:calc(40% - 1em);}
.w50 {width:calc(50% - 1em);}
.w60 {width:calc(60% - 1em);}
.w66 {width:calc(66.66% - 1em);}
.w70 {width:calc(70% - 1em);}
.w80 {width:calc(80% - 1em);}
.w90 {width:calc(90% - 1em);}
.w00 {width:calc(100% - 1em);}

.h10 {height:calc(10% - 1em);}
.h20 {height:calc(20% - 1em);}
.h30 {height:calc(30% - 1em);}
.h33 {height:calc(33.33% - 1em);}
.h40 {height:calc(40% - 1em);}
.h50 {height:calc(50% - 1em);}
.h60 {height:calc(60% - 1em);}
.h66 {height:calc(66.66% - 1em);}
.h70 {height:calc(70% - 1em);}
.h80 {height:calc(80% - 1em);}
.h90 {height:calc(90% - 1em);}
.h00 {height:calc(100% - 1em);}

.records-table {display:table;width:100%;table-layout:fixed;border-spacing:0;border:none;margin:none;user-select: none;}

.records-table th {
  color:#008060;font-size:11px;font-weight:bold;
  background:#c7efe3;
  xbackground-image:linear-gradient(to right,#e3f6f2 0px,#c7efe3 14px,rgba(0,0,0,0)),linear-gradient(to left,#ace4d4 0px,#c7efe3 14px,rgba(0,0,0,0));
  border-right:1px solid #bbd3da;border-bottom:1px solid #bbd3da;
  padding:0 7px;overflow:hidden;text-overflow:ellipsis 
}

.records-table tr th.sortedASC a, .records-table tr th.sortedDESC a {
  color:#004458;text-decoration:underline;xbackground:url(../img/listicons.png) right -912px no-repeat
}

.records-table tr th.sortedASC a {background-position:right -944px}

.records-table th img {vertical-align:middle;display:inline-block}

.records-table th a {color:inherit;text-decoration:none;white-space:nowrap;cursor:default}  
  
.records-table th a, .records-table th span {
  display:block;padding:7px 0;text-decoration:none;overflow:hidden;text-overflow:ellipsis
}

.records-table td {
  padding:2px 7px;border-bottom:1px solid #bbdad3;border-right:1px dotted #bbdad3;white-space:nowrap;cursor:default;overflow:hidden;text-overflow:ellipsis;background-color:#fff;
  xheight: 20px;
}

.records-table tr.focused>td:first-child {border-left:2px solid #b0d7cc;padding-left:4px}

.records-table tr.selected.focused>td:first-child {border-left-color:#49d2b3}

.records-table tr:hover td {
  !important;background:#d9f4ec;
  background:linear-gradient(to bottom,#e8fff8 0,#d0f0e6 100%)
}

.records-table tr.selected td {
  color:#fff !important;background:#01c69b;
  background:linear-gradient(to bottom,#01c69b 0,#01b47c 100%)
}

.records-table tr.selected td a, .records-table tr.selected td span {color:#fff !important}

.records-table tr.unfocused td {color:#fff !important;background-color:#4dd2b0 !important}

.records-table tr.unfocused td a, .records-table tr.unfocused td span {color:#fff !important}

.records-table tr.deleted td, .records-table tr.deleted td a {color:#ccc !important}

.records-table tr {height:2.75em;}

h1 {
  display:block;
  margin:0; 
  padding:0.75em;
  font-size: 150%;
  font-weight: bold;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center; 
}

p {margin:0 0 8px 0;font-size:14px;}

hr {margin:4px;border:none;height:1px;background:#bbd3da;overflow:hidden;}

img {border:none;}

img.icon   {float:left;width:16px;height:16px;margin-right:4px;}
img.icon12 {float:left;width:12px;height:12px;margin-right:4px;}
img.icon16 {float:left;width:16px;height:16px;margin-right:4px;}
img.icon24 {float:left;width:24px;height:24px;margin-right:4px;}
img.icon32 {float:left;width:32px;height:32px;margin-right:4px;}

* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

p, input {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

a[disabled] {
  pointer-events: none;
  opacity: 0.4; 
  text-decoration:none;
  cursor: default;
}

.records-table th {
  color:#006080;
  background:#c7e3ef;
  xbackground-image:linear-gradient(to right,#e3f2f6 0px,#c7e3ef 14px,rgba(0,0,0,0)),linear-gradient(to left,#acd4e4 0px,#c7e3ef 14px,rgba(0,0,0,0));
  border-right:1px solid #bbdad3;
  border-bottom:1px solid #bbdad3;
}

.records-table td {
  border-bottom:1px solid #bbdad3;
  border-right:1px dotted #bbdad3;
  background-color:#fff;
}

.records-table tr.focused>td:first-child {border-left:2px solid #b0ccd7;}
.records-table tr.selected.focused>td:first-child {border-left-color:#49b3d2}
.records-table tr:hover td {!important;background:#d9ecf4;background:linear-gradient(to bottom,#e8f8ff 0,#d0e6f0 100%)}
.records-table tr.selected td {color:#fff !important;background:#019bc6;background:linear-gradient(to bottom,#019bc6 0,#017cb4 100%)}
.records-table tr.unfocused td {color:#fff !important;background-color:#4db0d2 !important}

.table-scroll {height:100%; overflow:auto; overflow-x:hidden; overflow-y:auto;}
.table-scroll th {position:relative}


.menuPlace {
  position: absolute;
  top: 0;
  left: 0;
  width: 16em;
  height: 100%;
}

.bodyPlace {
  position: absolute;
  top: 0;
  left: 16em;
  right: 0;
  height: 100%;
}

.pageItem {
  float: left; 
  box-sizing: border-box;
  width: 16.666%;  
  padding: 0.5em;  
  border-radius: 0.25em; 
  overflow: hidden; 
  cursor: pointer;
}

.pageItem4 {
  float: left; 
  box-sizing: border-box;
  width: 25%;  
  padding: 0.5em;  
  border-radius: 0.25em; 
  overflow: hidden; 
  cursor: pointer;
}

@media only screen and (max-width: 1759px) {
  .pageItem {width: 20%}
}

@media only screen and (max-width: 1439px) {
  .pageItem {width: 25%}
}

@media only screen and (min-width: 1200px) {
  .forSmallScreen {display: none;}
}

@media only screen and (max-width: 1199px) {
  .forLargeScreen {display: none;}
}

@media only screen and (max-width: 1119px) {
  .pageItem {width: 33%}
  .pageItem4 {width: 50%}
}

@media only screen and (max-width: 719px) {
  .pageItem {width: 50%}
  .pageItem4 {width: 50%}
}

@media only screen and (max-width: 479px) {
  .pageItem {width: 100%}
  .pageItem4 {width: 100%}
}


/* Night mode ---------------------------------------------- */

body.night {
  background: #343434;  
  color: white;
}

body.night #login {
  background: #444; 
  border:1px solid #262630;
}

body.night #toolbar {
  background: #343434; 
  border-bottom: 1px solid #333;
}

body.night .popupMenu {
  background: #444;
}

body.night .menuOption {
  color: #ccc;
}

body.night .menuOption > i{
  color: white;
}

body.night .menuOption > img {
  border-style: solid;
  border-color: white;
}

body.night .box {
  background: #222; 
  border-radius: 0.5em; 
  overflow:hidden;
}

body.night hr {
  height: 1px;
  border: 0;
  background: #666;
}

body.night .backColor1 {
  background: #222222;
}

body.night .backColor2 {
  background: #343434;
}

body.night .textColor1 {
  color: #FFFFFF;
}

body.night .textColor2 {
  color: #888888;
}

body.night .textColor0 {
  color: #222222;
}


/* Light mode ---------------------------------------------- */

body.light {
  background: #ccc;  
  color: black;
}

body.light #login {
  background: #ccc; 
  border:1px solid #bbb;
}

body.light #header {
  color: black;
  background: #ccc;
}

body.light #toolbar {
  background: #ccc; 
}

body.light .popupMenu {
  background: #ccc;
}

body.light .menuOption {
  color: #444;
}

body.light .menuOption > i {
  color: black;
}

body.light .menuOption > img {
  border-style: solid;
  border-color: black;
}

body.light .box {
  background: white; 
  border-radius: 0.5em; 
  overflow: hidden;
}

body.light hr {
  height: 1px;
  border: 0;
  background: #aaa;
}

body.light .backColor1 {
  background: #F0F0F0;
}

body.light .backColor2 {
  background: #DDDDDD;
}

body.light .textColor1 {
  color: #000000;
}

body.light .textColor2 {
  color: #444444;
}

body.light .textColor0 {
  color: #F0F0F0;
}





.dygraph-axis-label {
  color: #777 !important;
}

.menuTab {
  padding-bottom: 4px;
  border-bottom: 3px solid transparent;
  cursor: pointer;
}

.menuTab.active {
  border-bottom: 3px solid #f39317;
  cursor: default;
}

.menuTab > span {
  xfont-size: 112%;
  color: #888;
}

@media only screen and (max-width: 730px) {
  .menuTab > span {display: none; }
}

@media only screen and (max-width: 730px) {
  .menuTab > span {display: none; }
}