/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 0px solid #ccc;
  border-top: none;
}

/* These are for the menu header after login */
ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #ccc;
}
li {
	float: left;
	border-right: 2px solid #bbb;
}
li:last-child {
	border-right: none;
}
li a {
	display: block;
	color: black;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}
li a:hover {
	background-color: #ddd;
}

/* Tooltip container */
.tooltip {
  position: relative;
  border-style: none;
  padding-left: 0px;
  float: left;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 400px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 0 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  word-break: break-all;
  white-space: normal;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
/* These are used for the battery graph */
.batterychart {
  height: 1rem;
  width: 100px;
  border-style: solid;
  border-width: 1px;
}
 
.batterychart div {
  height: 100%;
  float: left;
}
 
.batterychart .start {
  border-radius: 0 0 0 0;
}
 
.batterychart .end {
  border-radius: 0 0 0 0;
}
 
.batterychart .red {
  background-color: red;
}
 
.batterychart .yellow {
  background-color: yellow;
}
 
.batterychart .green {
  background-color: green;
}

.batterychart .clear {
  background-color: transparent;
}

/* Used for the control buttons/images eg Stop/Play/Download/Delete */
.buttonimage {
	width: 24px;
	height: 24px;
	vertical-align: middle;
	padding-top: 2px;
	padding-bottom: 2px;
}