/*
 * Define Default Colors
 */
:root {
  --menu-text:  #eee;
  --menu-back:  #888;
  --menu-hover: #aaa;

  --sidenav-head: #f72;
  --sidenav-text: #05c;
  --sidenav-back: #eee;
  --sidenav-hover: #ddd;
  --sidenav-selected-back: #aaa;
  --sidenav-selected-text: #fff;

  --instrument-pnl-text: #05c;
  --instrument-pnl-back: #eee;
  --instrument-pnl-labels: #f72;
  --instrument-img-back: #f92;
}

body {
  margin: 5px;
  background: #fff;
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
}

p {
  margin: 10px 0px;
}

#header {
  color: #008;
  overflow: hidden;
  background: #fff;
  margin-top: 5px;
  text-align: center;
}

#header .title {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 50px;
  display: inline-block;
  margin-top: 10px;
}

#header img.logo {
  float: left;
}

#userinfo {
  float:right;
  text-align:right;
}

#menubar {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #eee;
  color: var(--menu-text);
  background: #888;
  background: var(--menu-back);
}

#menubar ul {
  list-style-type: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

#menubar li {
  float: left;
  display: inline-block;
  padding: 14px 5px;
  /*background-color: #037;*/
  text-align: center;
}

#menubar li.right {
  float: right;
}

#menubar li a {
  /* color: #eee; */
  text-decoration: none;
  /*background-color: #037;*/
  padding: 10px 16px;
  color: #eee;
  color: var(--menu-text); /*#888;*/
}

#menubar li a:hover {
  color: #fff;
  background: #aaa;
  background: var(--menu-hover);
}

#adminbar {
  padding: 5px;
  background: #fa0;
  color: #fff;
  font-weight: bold;
  text-align:center;
}

#adminbar a {
  font-weight: normal;
  color: #666;
}

#page {

}


ul.instruments {
  list-style-type: none;
  margin: 20px;
  padding: 20px;
}

ul.instruments li {
  /* border: 1px solid green; */
  float: left;
  margin: 10px;     /* Space between tiles */
  /* color: #fff; */
  border-radius: 10px;
}

ul.instruments li a {
  /*border: 1px solid blue;*/
  width: 300px;
  height: 150px;
  display: inline-block;
  text-decoration: none;
  outline: 0;
  border-radius: 10px;
  background: #eee;
  background: var(--instrument-pnl-back); /*#aaa;*/
  box-shadow: 3px 3px 5px #444;
}

ul.instruments img {
  border: none;

}

ul.instruments li a:hover {
  box-shadow: 5px 5px 20px #000;
}

div.img-col {
  display: table-cell;     /* Allows vertical centering */
  background: #f92;
  background: var(--instrument-img-back); /*#fd3;*/
  width: 80px;
  height: 150px;
  line-height: 150px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  vertical-align: middle;
}

div.img-col img {
	display: block;
	margin: auto;
	vertical-align: middle;
}

div.info-col {
  width: 220px;
  display: table-cell;
}

div.model {
  /* border: 1px solid #ff0; */
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 25px;
  font-weight: bold;
  color: #f72;
  color: var(--instrument-pnl-labels);
  text-align: center;
}

div.info-col table {
  padding-left: 10px;
}

div.info-col th {
  text-align: left;
  font-weight: bold;
  color: #f72;
  color: var(--instrument-pnl-labels);
}

div.info-col td {
  text-align: left;
  color: #05c;
  color: var(--instrument-pnl-text);
}

div.info-col td.meterid {
  /*color: #008; */
  font-weight: bold;
}


/*  Compuload Dlog Records */
div.dlog-rec {
  background: #ffd;
  margin: 10px;
  padding: 5px;
  border: 1px solid #aaa;
}

div.dlog-rec table {
  text-align: left;
}

.col-time  {
  border: 1px solid red;
  display: inline-block;
  vertical-align: top;
  min-width: 250px;
}
.col-flds  {
  border: 1px solid red;
  display: inline-block;
  vertical-align: top;
  min-width: 250px;
}
.col-weight  {
  border: 1px solid red;
  display: inline-block;
  vertical-align: top;
  min-width: 150px;
}

span.total-label {
  display: block;
}
span.total-val {
  font-size: 200%;
  font-weight: bold;
}

table.dlog-rec {
  text-align: left;
}

table.dlog-rec td {
  padding-right: 10px;
  margin: 0;
}

table.dlog-rec tr {
  background: #ffd;
}

table.dlog-rec tr.gap {
  height:10px;
}

td.col-time {
  width: 400px;
}

div.debug {
  color: #fff;
  background: #d00;
  font-weight: bold;
  text-align: center;
  padding: 5px;
}


form.login input[type=text],
form.login input[type=password] {
  font-size: 16px;
  width: 100%;
  padding: 12px 20px;
  margin: 2px 0;
  box-sizing: border-box;
  border: 2px solid #ddd;
  border-radius: 10px;
  transition: 0.5s;
}

form.login input[type=text]:focus,
form.login input[type=password]:focus {
  border: 2px solid #555;
}

form.login input[type=submit] {
  color: #eee;
  color: var(--menu-text);
  background-color: #888;
  background-color: var(--menu-back);
  border: none;
  border-radius: 10px;
  width: 100%;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.2s;
  cursor: pointer;
}

form.login input[type=submit]:hover {
  background-color: #aaa;
  background-color: var(--menu-hover);
}

form.login select {
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	/*font-weight: 700;*/
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	/*background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);*/
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
form.login select::-ms-expand {
	display: none;
}
form.login select:hover {
	border-color: #888;
}
form.login select:focus {
   border: 2px solid #555;
	/*border-color: #aaa;*/
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222;
	outline: none;
}
form.login select option {
	font-weight:normal;
}

.loginpage {
  background: #888;
  background: var(--menu-back);
}

::placeholder {
  color: #888;
}

#loginform,
#registrationform {
  display: block;
  width:300px;
  margin: 20px auto;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 3px 3px 5px #888;
  background-color: #eee;
}

#registrationform {
  width:400px;
}

#loginform h1,
#registrationform h1 {
  text-align: center;
  color: #008;
}

#loginform a {
  text-decoration: none;
}

.error {
  color: red;
}
.message {
  color: green;
}

.postlink {
  display:inline;
}

a.link,
input[type=submit].link {
  display: inline-block;
  padding: 0px 4px;
  border: none;
  text-decoration: none;
  font: inherit;
  font-weight: normal;
  font-size: 16px;
  color: #666;
  background-color: inherit;
}

a.link:hover,
input[type=submit].link:hover {
  background-color: #eee;
}

div.linksfooter {
  margin-top: 15px;
}


a.button {
  display: inline-block;
  color: #fff;
  background-color: #aaa;
  text-decoration: none;
  font-weight: bold;
  margin:2px;
  padding: 5px;
}

a.button:hover {
  background-color: #ccc;
}

.sts-ok {
  color: #080;
}
.sts-warn {
  color: #f80;
}
.sts-err {
  color: #f00;
}