.header
{
	position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10mm;
  line-height: 10mm;
  border-bottom: 1px solid #c8c8c8;
  overflow: hidden;
  box-sizing: border-box;
  text-align: center;
  background: #f7f7f7;
  color: black;
  font-weight: bold;
}

.body
{
  position: absolute;
  top: 10mm;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  box-sizing: border-box;
  font-family:  Roboto, Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
  background-image: none;
  background-color: #e5e5e5;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.header-left
{
	position: absolute;
  left: 0;
  background: #f7f7f7;
  color: #008286;
  font-weight: normal;
}

.header-left a
{
  background: #f7f7f7;
  color: #008286;
  font-weight: normal;
}

.header-right
{
	position: absolute;
  right: 0;
  background: #f7f7f7;
  color: #008286;
  font-weight: normal;
}

.header-right a
{
  background: #f7f7f7;
  color: #008286;
  font-weight: normal;
}


[data-component="menuItem"]
{
  display: block;
  width : 100%;
  height: 15mm;
  line-height: 15mm;
  border-bottom : 1px solid rgb(188,188, 188);
  padding-left: 2em;
  margin-bottom: -1px;
  padding-right: 2em;
}

[data-component="menuItem"] span {
	display: inline; 
	width: auto; 
	height: auto; 
	line-height: normal; 
	border-bottom: none; 
	padding-left: 0; 
	white-space: nowrap;
}

.menu-right i {
	padding-right: 1em;
}

.offline {
	pointer-events: none;
}

#connectionStatusIndicator.online
{
	visibility: hidden;
}

#connectionStatusIndicator.offline
{
	visibility : visible;
	z-index: 40000;
  color: red;
}

#connectionStatusIndicator.offline > .row
{
  height: inherit;
}

#connectionStatusIndicator.offline > i
{
    min-height: 1.5em;
    height: 1.5em;
    line-height: 1.5em;
    font-family: "Roboto Medium", sans-serif;
    font-size: 12pt; /* 16px */
    font-weight: bold;
}