.navbar-inverse .navbar-nav > .active > a {
    color: #FFFFFF;
    background-color: #606060;
    font-weight: normal;
}
.navbar-inverse .navbar-nav > .active > a:focus,
.navbar-inverse .navbar-nav > .active > a:hover {
    color: #FFFFFF;
    background-color: #808080;
    font-weight: bold;
}

.group-0 { background: #ffffff; }
.group-1 { background: #a2dd44; }
.group-2 { background: #70daf5; }
.group-3 { background: #b593f5; }
.group-4 { background: #f1a2e7; }
.group-5 { background: #feb236; }
.group-6 { background: #800000; color: #FFFFFF; }

.bg-red {
    background: #800000;
    color: #FFFFFF;
    border-radius: 50%;
    padding: 0 2px;
}

.bg-green {
    background: rgb(20, 83, 4);
    color: #FFFFFF;
    border-radius: 50%;
    padding: 0 2px;
}

.bg-gray {
    background: rgb(83, 83, 83);
    color: #FFFFFF;
    border-radius: 50%;
    padding: 0 2px;
}

.icoHeading {
    width: 15px;
    height: 15px;
    line-height: 15px;
    -webkit-transform-origin: 7px 7px;
    -moz-transform-origin: 7px 7px;
    -o-transform-origin: 7px 7px;
    transform-origin: 7px 7px;
    font-size:15px;
    color: rgb(36, 138, 11);
}

.vehicle {
    position: fixed;
    right: 110%;
    top: 5em;
	bottom: 2.5em;
    box-sizing: border-box;
    display: inline-block;
    width:90vw;
    /*height: 100%;*/
    padding: 0.5%;
    font-size: 3.0vw;
    opacity: 0;
    -webkit-transition: opacity 0.5s; /* Safari */
    transition: opacity 0.5s;
    pointer-events: auto;
}
@media screen and (min-width: 800px) {
    .vehicle {
        width: 49vw;
		/*height: 35vw;*/
		font-size: 1.5vw;
    }
}
@media screen and (min-width: 1500px) {
    .vehicle {
        width: 32vw;
		/*height: 22vw;*/
		font-size: 1.0vw;
    }
}

.vehicle-cont {
	width: 100%;
	height: 100%;
    border: 1px solid #000000;
    border-radius: 0.2em;
    overflow: hidden;
    background: #ffffff;
    position: relative;
    -webkit-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.5);
}

.plate {
    position: relative;
    width: 100%;
    height: 1.7em;
    border-bottom: 1px solid #000000;
	overflow: hidden;
	cursor: pointer;
}

.emergency {
    background: #6d0a0a !important;
    color: #ffffff !important;
}

.plate img {
    height: 100%;
    margin-right: 0.5em;
}

.plate .txt {
    display: inline-block;
    height: 2em;
    vertical-align: center;
    font-size: 1.2em;
    font-weight: bold;
    line-height:1em;
}

.plate .status {
    position: absolute;
    top: 0;
    right: 0;
    width: 5em;
    height: 1em;
    padding: 1px 0.2em;
    font-size: 1.4em;
    line-height:1em;
    text-align: center;
}

.curr-event {
	width: 100%;
	font-size: 1.0em;
	font-weight: bold;
	padding: 0 0.5em;
	overflow: hidden;
	border-bottom: 1px solid #808080;
}

.col1 {
    box-sizing: border-box;
    display: inline-block;
    width: 45%;
    padding: 0.2em 0.5em 0 0.5em;
    vertical-align: top;
}

.col2 {
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    width: 0%;
	/*height: 35%;*/
    padding: 0.2em 0em 0 0;
    vertical-align: top;
    font-size: 0.7em;
	text-align: center;
}

.col3 {
    float: right;
    margin: 1vw 1vw 0 0;
    position: relative;
    box-sizing: border-box;
    width: 45%;
    height: 8em;
    padding: 0.2em 0.5em 0 0.5em;
    vertical-align: top;
}

.col1-h {
    font-size:0.8em;
    font-weight: bold;
}

.col1-t {
    font-size:0.8em;
}

.date-time {
    box-sizing: border-box;
	display: inline-block;
    width: 30%;
	height: 30%;
	border: 1px solid #000000;
	border-radius: 4vh;
	text-align: center;
	font-weight: bold;
	font-size: 1.0em;
    margin-top: 1vh;
	vertical-align: top;
}

.coord {
    box-sizing: border-box;
	display: inline-block;
	width: 65%;
	border: 1px solid #000000;
	border-radius: 5vh;
	text-align: center;
	overflow: hidden;
	font-size: 0.8em;
	line-height: 1.2em;
    margin-top: 1vh;
	vertical-align: top;
}

.c1-imei {
	font-size: 0.6em;
}

.speed-meter {
	width: 100%;
	padding-top: 1em;
	font-size: 3em;
	font-weight: bold;
	text-align: center;
}

.tilt {
	display: none;
}

.tilt-img {
	width: 65%;
    -webkit-transition: -webkit-transform .8s ease-in-out;
    -ms-transition: -ms-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
}

.tilt-txt {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin-top: 7%;
    padding-right: 10%;
    text-align: center;
    color: #cccccc;
    font-size: 1.8em;
    font-weight: bold;
}

.speed {
	display: none;
}

.meter {
    width: 100%;
}

.logs {
    margin-top: 0.5em;
    width: 100%;
    height: calc(100% - 18em);
    z-index: 1;
    font-size: 0.8em;
    padding: 0 0.5em;
    line-height: 1.4em;
    display: none;
    overflow-x: hidden;
    overflow-y: auto;
}

.log-left {
    display: inline-block;
    width: 36%;
    vertical-align: top;
	font-size: 0.8em;
}

.log-col {
    display: inline-block;
    width: 12.5%;
    vertical-align: top;
	font-size: 0.8em;
}

.log-col-t {
    display: inline-block;
    width: 16.5%;
    vertical-align: top;
}

.log-blank {
    font-weight: bold;
	margin-top: 0.5em;
}

.log-1 {
	height: 1.5em;
    box-sizing: border-box;
    padding: 0 0.5em;
    background: #ddd;
	overflow: hidden;
}

.log-2 {
	height: 1.5em;
    box-sizing: border-box;
    padding: 0 0.5em;
    background: #eee;
	overflow: hidden;
}

.log-3 {
	height: 1.5em;
    box-sizing: border-box;
    padding: 0 0.5em;
	overflow: hidden;
}

.log-1.bold {
    font-weight: bold;
}

.log-2.bold {
    font-weight: bold;
}


.log-head {
    box-sizing: border-box;
    font-weight: bold;
    background: #404040;
    color: #FFFFFF;
    text-align: center;
	overflow: hidden;
	margin-top: 0.5em;
    padding: 0 0.5em;
    white-space: nowrap;
}

.log-val {
    box-sizing: border-box;
    border-collapse: collapse;
    border-top: 1px solid #aaa;
}

.log-on {
    color: #127e12;
}

.log-off {
    color: #a01010;
}

.moving {
    display: none;
    margin-top: 1em;
    text-align: center;
    font-size: 2em;
    font-weight: bold;
    line-height: 2em;
    color: #cccccc;
}

.last-event {
    position: absolute;
    bottom: 0;
    left: 0;
	width: 100%;
	font-size: 0.7em;
	font-weight: bold;
	padding: 0 0.5em;
	color: #666;
    z-index: 10;
	overflow: hidden;
	border-top: 1px solid #808080;
}


.tab-contenitore-serbatoi {
	width:10em;
	height:2em;
	margin:1px;
}
.tab-serbatoio {
  position:relative;
  height:100%;
  display:inline-block;
  background:#eee;
  border:1px solid #666;
  border-radius:3px;
  font-size:0.5em;
  text-align:center;
  overflow:hidden;
  margin:0 1px;
}
.tab-livello {
  position:absolute;
  width:100%;
  bottom:0px;
  border-top:1px solid #666;
}

.tractor {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.tractor img {
    width: 100%;
    height: 100%;
}

.tank {
    position: absolute;
    left: 29%;
    top: 0;
    width: 71%;
    height: 59%;
    text-align:center;
}
.tank-lr {
    width:10%;
    height:100%;
    display:inline-block;
    vertical-align:top;
}
.tank-top {
    width:100%;
    height:10%;
}
.tank-left {
    box-sizing: border-box;
    width:100%;
    height:90%;
    background:#fff;
    border:1px solid #000;
    vertical-align:top;
    border-top-left-radius:5%;
    border-bottom-left-radius:5%;
}
.tank-right {
    box-sizing: border-box;
    width:100%;
    height:90%;
    background:#fff;
    border:1px solid #000;
    vertical-align:top;
    border-top-right-radius:5%;
    border-bottom-right-radius:5%;
}
.tank-ext {
    height:100%;
    display:inline-block;
    vertical-align:top;
}
.tank-cap {
    width:50%;
    height:10%;
    margin:0 25%;
    background:#000;
    border-top-left-radius:40%;
    border-top-right-radius:40%;
}
.tank-vol {
    box-sizing: border-box;
    width:100%;
    height:90%;
    background:#fff;
    border:1px solid #000;
    position:relative;
    -webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.75);
    overflow:hidden;
}
.tank-level {
    box-sizing: border-box;
    width:100%;
    position:absolute;
    bottom:0;
    border-top:1px solid #888;
    text-align:center;
    overflow: hidden;
    white-space: nowrap;
}

.tank-lbl {
    box-sizing: border-box;
    width:100%;
    position:absolute;
    top: 0;
    left: 0;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
}
.tank-txt {
    color: #000000;
    font-size:0.6vw;
    font-weight: bold;
}
.tank-txt-small {
    color: #000000;
    font-size:0.5vw;
    font-weight: bold;
}

.valves {
      width: 100%;
      height: calc(6.7vw + 6.7vh);
	  margin-top: 0.5em;
	  color: #B0B0B0;
	  text-shadow: 1px 1px 2px #000000;
  }
.valves-valves {
	width: 100%;
	height: calc(4.1vw + 4.1vh);
	overflow: hidden;
	font-size: calc(1vw + 1vh);
}
.valve {
	display: inline-block;
	width:20%;
	height: 100%;
	text-align: center;
}
.valve .glyphicon {
	line-height: 1.2em;
}
.valves-api {
	width: 100%;
	height: calc(3vw + 3vh);
	overflow: hidden;
	font-size: calc(2vw + 2vh);
}
.API {
	display: inline-block;
	height: 100%;
	text-align: center;
	margin: 0.2em 5% 0 5%;
}

.dash-tractor-table {
    width:100%;
    margin-bottom:1em;
	font-size: 0.8em;
}

.dash-tractor-table .log-head {
    font-size: 1em;
}

.dash-container {
    width:100%;
    background:#E0E0E0;
    text-align: center;
    font-size: 8px;
    font-weight: bold;
    border: 1px solid #808080;
    border-radius: 10px;
}

.dash-only-speed {
    box-sizing: border-box;
    width: 100%;
    background: #E0E0E0;
    border: 1px solid #888;
    border-radius: 1em;
    padding: 0 0.5em;
    line-height: 1em;
    text-align: right;
    font-size: 2.0em;
}

.dash-speed {
    display: inline-block;
    width:45%;
    font-size:2em;
    height:1em;
    line-height:1em;
    background: #808080;
    color: #FFFFFF;
    border-radius:0.2em;
    margin: 0.5em 0 0.3em 0;
    vertical-align: top;
}
.dash-alarm {
    display: inline-block;
    width:15%;
    margin-top: 0.5em;
    vertical-align: top;
    overflow: hidden;
}
.dash-tachi {
    display: inline-block;
    width:30%;
    font-size:1em;
    height:2em;
    line-height:2em;
    background: #808080;
    color: #FFFFFF;
    border-radius:0.4em;
    margin: 1em 0 0.6em 0;
    vertical-align: top;
}
.dash-ico-container {
    display: inline-block;
    width:60%;
    text-align: left;
    overflow: hidden;
    margin-top: -0.5em;
}
.dash-top-container {
    display: inline-block;
    width:30%;
    overflow: hidden;
}
.dash-ico {
    display: inline-block;
    font-size: 2em;
    width: 1em;
    height: 1.5em;
    line-height: 0.1em;
    margin: 0.2em 0.3em;
}
.dash-ico-txt {
    font-size:0.4em;
    color: #F0F0F0;
    line-height: 1em;
    text-align: center;
    margin-top: 0.5em;
}
.dash-on {
    color: #FF6A00;
}
.dash-off {
    color: #808080;
}
.dash-alert {
    color: #FF0000;
}

.dash-lst-container {
    display: inline-block;
    width:47%;
    text-align: left;
    overflow: hidden;
    margin-top: -0.5em;
    font-size:1.0em;
    line-height: 1.1em;
    vertical-align: top;
}
.dash-row {
    width: 100%;
}
.dash-row-txt {
    display: inline-block;
    width:55%;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
}
.dash-row-val {
    display: inline-block;
    width:40%;
    text-align: center;
    overflow: hidden;
    color: #FFFFFF;
    background: #808080;
    border-radius: 0.5em;
}
.dash-row-only-txt {
    display: inline-block;
    width:90%;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
}

.dash-load-unload table {
    margin-bottom:5px !important;
}
.dash-load-unload th {
    padding:2px !important;
}
.dash-load-unload td .log-1 {
    background: #fff !important;
}
.dash-load-unload td {
    padding:2px !important;
}
.dash-load-unload .reverse {
    background: #000;
    color: #fff;
}

.dash-unload th {
	background: #00CCFF;
	color: #fff;
	text-align: center;
}
.dash-unload table {
	background: #66FFFF;
}
.dash-unload {
	display: none;
	font-size: 0.8em;
}

.dash-load th {
	background: #00CC00;
	color: #fff;
  text-align: center;
}
.dash-load table {
	background: #99FF66;
}
.dash-load {
	display: none;
	font-size: 0.8em;
}

.bool-val {
	font-size: 0.8em;
    font-weight: bold;
    color: #000000;
	background: #C0C0C0;
	border-radius: 50%;
	padding: 0 0.2em;
}

.row-bold {
    font-weight: bold;
}

.spinner {
	display: none;
	position: fixed;
	width: 30%;
	height: 20%;
	left: 35%;
	top: 40%;
	text-align: center;
	font-size: 10px;
}

.spinner > div {
	background-color: #FF6A00;
	height: 100%;
	width: 15%;
	display: inline-block;
	border-radius: 50%;
	-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
	animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s;
}

.spinner .rect3 {
	-webkit-animation-delay: -1.0s;
	animation-delay: -1.0s;
}

.spinner .rect4 {
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s;
}

.spinner .rect5 {
	-webkit-animation-delay: -0.8s;
	animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
	0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
	20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
	0%, 40%, 100% {
	transform: scaleY(0.4);
	-webkit-transform: scaleY(0.4);
	}  20% {
	transform: scaleY(1.0);
	-webkit-transform: scaleY(1.0);
	}
}

.message {
    position: relative;
	display: none;
	position: fixed;
	width: 90%;
	left: 5%;
	top: 40%;
	text-align: center;
    font-size: 3em;
    background:rgba(0,0,0,0.6);
    color: #FFFFFF;
    border-radius: 2em;
    -webkit-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.75);
}

.message-close {
    position: absolute;
    font-size: 0.5em;
    font-weight: bold;
    top: 0em;
    right: 1em;
    color: #FFFFFF;
    cursor: pointer;
}

.group-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2em;
    z-index: 9999;
    padding:0.3em;
    background: #FFFFFF;
    border-top:1px solid #888;
}

.group {
    display:inline-block;
    margin-right:1em;
    border-radius:0.5em;
    padding:0 0.5em;
    cursor: pointer;
}

.group:hover {
    display:inline-block;
    margin-right:1em;
    border-radius:0.5em;
    padding:0 0.5em;
    -webkit-box-shadow: 0px 0px 4px 1px rgba(0,0,0,1.0);
    -moz-box-shadow: 0px 0px 4px 1px rgba(0,0,0,1.0);
    box-shadow: 0px 0px 4px 1px rgb(0,0,0,1.0);
}

.group-selected {
    -webkit-box-shadow: 0px 0px 4px 1px rgba(0,0,0,1.0);
    -moz-box-shadow: 0px 0px 4px 1px rgba(0,0,0,1.0);
    box-shadow: 0px 0px 4px 1px rgb(0,0,0,1.0);
}