html{
	max-height:100%;
}
body {
  background: none repeat scroll 0 0 #fff;
  font-family:"Segoe UI","Lucida Sans Unicode" !important;
  font-size:13px;
  color: #333;
  height: 100%;
  margin: 0;
  min-width: 320px;
  overflow: hidden;
  padding: 0;
}
@media print
{
	.no-print, .no-print *
	{
		display: none !important;
	}
}
div.titlebox
{
	height: 98%; width: 100%;
	margin:0px 0px;
	top:0px; left:0px;
	position:absolute;
	background-color:#E6E6E6;/**/
	border-bottom:1px solid #bbbbbb;
	font-weight: bold;
	/*color:#FFFFFF;*/
	box-sizing: content-box;
}
.TitleFrame{ /*text-align:center;*/ font-size:18pt; font-family: "Segoe UI","Lucida Sans Unicode"; font-weight:100; color: #111111; padding:1px 2px; }

#RealTimeMap {height:100%;width:100%;position:absolute;}
ul li {
  font-family: "Segoe UI","Lucida Sans Unicode";
  font-weight: normal;
  text-align: none;
  text-shadow: 0 0 0px #b0b0b0;
}
.topheader{
	width:100%;
	height:45px;
	position:absolute;
	top:0px;
	background:none;
}
.TitleFrame{
	border-right:1px solid #cfcfcf;
}
#search{
	font-size:12pt;
	background:none;
	border:0px;
	vertical-align: top;
	width: 100%;
	height: 100%;
	color:gray;
}
#search_duration{
	font-size:12pt;
	background:none;
	border:0px;
	vertical-align: top;
	width: 100%;
	height: 100%;
	color:gray;
}
#searchDuration{
	font-size:14pt;
	background:none;
	border:0px;
	vertical-align: top;
	width: 100%;
	height: 100%;
	color:gray;
}
#searchVehicle{
	font-size:14pt;
	background:none;
	border:0px;
	vertical-align: top;
	width: 100%;
	height: 100%;
	color:gray;
}
#searchCompany{
	font-size:14pt;
	background:none;
	border:0px;
	vertical-align: top;
	width: 100%;
	height: 100%;
	color:gray;
}
#searchBranch{
	font-size:14pt;
	background:none;
	border:0px;
	vertical-align: top;
	width: 100%;
	height: 100%;
	color:gray;
}
#searchReseller{
	font-size:14pt;
	background:none;
	border:0px;
	vertical-align: top;
	width: 100%;
	height: 100%;
	color:gray;
}
.outer{
    /*background-color:blue;
    height: 80%;
    border:red solid 2px;*/
    display: table-cell;
    /*width:10%*/
    font-size:8pt;
}
.inner-title{
    /*background-color:red;*/
    display:table-row;
    /*width:100%;*/
    font-size:12pt;
    font-weight:500;
}
.inner-subtitle{
    /*background-color:red;*/
    display:table-cell;
    /*width:100%;*/
    font-size:12pt;
    font-weight:500;
}
.inner-content{
    /*background-color:grey;*/
    display:table-row;
    /*width:100%;
     height:100%;*/
     color:gray;
}
div#page_container {
  height: 100%;
  overflow: hidden;
  width: 100%;
  /*position: relative;*/
}
div#ui_container {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  /*z-index:1;*/
}
div#map_container {
  -moz-user-select: none;
  bottom: 0px;
  left: 0;
  position: absolute;
  right: 0;
  top: 45px;
  width: 100%;
}
div#map_header {
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
  /*height: 50px;*/
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
}
div#map_navigation_controls {
  position: absolute;
  right: 12px;
  top: 62px;
}
div.map_floating_control {
  background: none repeat scroll 0 0 #fff;
  border-radius: 3px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
  width: 44px;
  z-index: 2;
}
div#map_navigation_controls span {
  color: #a2a2a2;
  font-size: 1.6em;
  line-height: 50px;
  position: relative;
  text-decoration: none;
  cursor:pointer;
}
div.map_floating_control span:first-child {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
div.map_floating_control span:last-child {
  border-bottom: 0 none;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
div.map_floating_control span {
  border-bottom: 1px solid #d7d7d7;
  display: block;
  height: 43px;
  text-align: center;
  width: 100%;
}
div.map_inline_control {
  background: none repeat scroll 0 0 #fff;
  border-radius: 3px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
  width: 44px;
  z-index: 2;
}
div.map_inline_control span:first-child {
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}
div.map_inline_control span:last-child {
  border-bottom: 0 none;
}
div.map_inline_control span {
  border-right: 1px solid #d7d7d7;
  display: block;
  height: 43px;
  text-align: center;
  width: 44px;
  cursor:pointer;
}
div.map_inline_control_playback span {
  border-right: 0px solid #d7d7d7;
  display: block;
  height: 43px;
  text-align: center;
  width: 44px;
  cursor:pointer;
}
div#map_navigation_controls span.badge {
  background: none repeat scroll 0 0 red;
  border-radius: 15px;
  color: #fff;
  display: none;
  font-size: 10px;
  height: 24px;
  line-height: 24px;
  min-width: 24px;
  position: absolute;
  right: -10px;
  top: -8px;
  width:24px;
}
div#map_zoom_controls {
  bottom: 62px;
  position: absolute;
  right: 12px;
}
div#map_trip_playback {
  border-radius: 3px 0 0 3px;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.25);
  display: inline-flex;
  position: absolute;
  right: 56px;
  width: auto;
  top:150px;
}
div#map_gps_controls {
  border-radius: 3px 0 0 3px;
  bottom: 122px;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.25);
  display: inline-flex;
  position: absolute;
  right: 56px;
  width: auto;
}

div#map_zoom_controls span {
  color: #a2a2a2;
  font-size: 1.6em;
  line-height: 50px;
  text-decoration: none;
  cursor:pointer;
}
div#map_navigation_controls span:hover{
	/*background: lightgray;
	color:#fff;text-shadow:0 -1px 0 #007aff*/
}
div#map_zoom_controls span:hover{
	/*background: lightgray;
	color:#fff;text-shadow:0 -1px 0 #007aff*/
}

div#sidebar_container.active {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4) !important;
}
div#sidebar_container {
    background-color: #fff;
    bottom: 0;
    height: 100%;
    left: -300px;
    position: fixed;
    top: 0;
    width: 300px;
    z-index: 5;
}
div#sidebar_container div.sidebar_contents_container {
  height: 100%;
  width: 300px;
  /*display: block;*/
}
div#sidebar_container div.sidebar_tabs {
  border-bottom: 1px solid #cdd0d4;
  height: 44px;
  width: 100%;
}
div#sidebar_container div.sidebar_tabs a.active {
    background-color: transparent !important;
    border-bottom: 1px solid #fff;
    color: #0067dd;
}
div#sidebar_container div.sidebar_tabs a {
    background: none repeat scroll 0 0 #e4e8ec;
    border-bottom: 1px solid #cdd0d4;
    border-right: 1px solid #cdd0d4;
    color: #777;
    display: block;
    float: left;
    height: 44px;
    position: relative;
    text-decoration: none;
    width: 60px;
}
div#sidebar_container div.sidebar_tabs a span.icon {
  display: block;
  font-size: 1.6em !important;
  margin-top: 6px;
  text-align: center;
  width: 100%;
}
.content-3 .settings_container{
	/*padding: 20px 5px;*/
}
ol, ul {
  list-style: outside none none;
}

div#sidebar_container div.sidebar_header {
  border-bottom: 1px solid #cdd0d4;
  height: 44px;
  padding: 0;
  position: relative;
  width:300px;
  top:0px;
  font-size: 30px;
  font-weight: lighter;
  padding: 0 0 0 10px;
}
div#sidebar_container div.sidebar_header h1 {
  color: #333;
  font-size: 1.2em;
  line-height: 45px;
}
div#sidebar_container div.sidebar_sub_header{
  border-bottom: 1px solid #cdd0d4;
  height: 6%;
  line-height: 40px;
  padding: 0 0 0 10px;
  position: relative;
  width:260px;
  top:0px;
  font-size: 18px;
  font-weight: lighter;
}
.sidebar_tabs_content_container{
	height: 93%;
	overflow-x: hidden;
	overflow-y: auto;
}
.active{
	display: block;
	/*visibility:visible;*/
}
.inactive{
	display: none;
	/*visibility:hidden;*/
}
.inactiveVisible{
	visibility:hidden;/**/
}
.activeVisible{
	visibility:visible;/**/
}

.settingLink {
	display: block;
	width:43px;
	height:43px;
	background: url(../../images/tracking/setting.png) no-repeat bottom;
	text-indent: -99999px;
}
.settingLink:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.filterLink {
	display: block;
	width:43px;
	height:43px;
	background: url(../../images/tracking/filter.png) no-repeat bottom;
	text-indent: -99999px;
}
.filterLink:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.addressLink {
	display: block;
	width:43px;
	height:43px;
	background: url(../../images/tracking/address.png) no-repeat bottom;
	text-indent: -99999px;
}
.addressLink:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.selectedAddressLink {
	background-position:  0px 0px;
	background-color: #007aff;
}
.playbackLink {
	display: block;
	width:43px;
	height:43px;
	background: url(../../images/tracking/playback.png) no-repeat bottom;
	text-indent: -99999px;
}
.playbackLink:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.pausebackLink {
	display: block;
	width:43px;
	height:43px;
	background: url(../../images/tracking/pause.png) no-repeat bottom;
	text-indent: -99999px;
}
.pausebackLink:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.textualreportLink {
	display: block;
	width:43px;
	height:43px;
	background: url(../../images/tracking/textualreport.png) no-repeat bottom;
	text-indent: -99999px;
}
.textualreportLink:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.singleMode{
	display: block;
	width:43px;
	height:43px;
	background: url(../../images/tracking/singleobjectmode.svg) no-repeat;
	text-indent: -99999px;
	background-size: 31px;
    background-position: center;
}
#map_single_object_mode:hover {
	background: url(../../images/tracking/singleobjectmode_white.svg) no-repeat;
	background-position:  0px 0px;
	background-color: #007aff;
	background-size: 31px;
    background-position: center;
}
.singleModeOn{
	background: url(../../images/tracking/singleobjectmode_white.svg) no-repeat;
	background-position:  0px 0px;
	background-color: #007aff;
	background-size: 31px;
    background-position: center;
}
.singleModeOff{
	background: url(../../images/tracking/singleobjectmode.svg) no-repeat;
	background-position:  0px 0px;
	background-color: #FFFFFF;
	background-size: 31px;
    background-position: center;
}
.exitfullscreenLink {
	display: block;
	width:43px;
	height:43px;
	background: url(../../images/tracking/exitfullscreen.png) no-repeat bottom;
	text-indent: -99999px;
}
.exitfullscreenLink:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.fullscreenLink {
	display: block;
	width:43px;
	height:43px;
	background: url(../../images/tracking/fullscreen.png) no-repeat bottom;
	text-indent: -99999px;
}
.fullscreenLink:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.multicircleLink {
	display: block;
	width:43px;
	height:43px;
	background: url("../../images/adv-screen/multi_circle.png") no-repeat scroll 0px -44px rgba(0, 0, 0, 0);
	text-indent: -99999px;
}
.multicircleLink:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.agpsLocationLink {
	display: block;
	width:43px;
	height:43px;
	background: url("../../images/adv-screen/agps-left.png") no-repeat scroll 0px -44px rgba(0, 0, 0, 0);
	text-indent: -99999px;
}
.agpsLocationLink:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.excle_download_link {
	display: block;
	width: 45px;
	background: url(../../Themes/Gray%20Theme/images/bs_exceldownload.png) 8px 11px no-repeat rgb(0 0 0 / 0%);
	text-indent: -99966px;
	background-size: 30px;
	margin-right: 10px;
}
.excle_download_link:hover {
	background-position: 8px 11px;
	background-color: #bbbec7;
}
.circleLink {
	display: block;
	width:43px;
	height:43px;
	background: url("../../images/adv-screen/geofence_icon.png") no-repeat scroll -45px -44px rgba(0, 0, 0, 0);
	text-indent: -99999px;
}
.circleLink:hover {
	background-position:  -45px 0px;
	background-color: #007aff;
}
.squareLink {
	display: block;
	width:43px;
	height:43px;
	background: url("../../images/adv-screen/geofence_icon.png") no-repeat scroll -89px -44px rgba(0, 0, 0, 0);
	text-indent: -99999px;
}
.squareLink:hover {
	background-position:  -89px 0px;
	background-color: #007aff;
}
.polygonLink {
	display: block;
	width:43px;
	height:43px;
	background: url("../../images/adv-screen/geofence_icon.png") no-repeat scroll -133px -44px rgba(0, 0, 0, 0);
	text-indent: -99999px;
}
.polygonLink:hover {
	background-position:  -133px 0px;
	background-color: #007aff;
}
.cleareLink {
	display: block;
	width:43px;
	height:43px;
	background: url("../../images/adv-screen/geofence_icon.png") no-repeat scroll -176px -44px rgba(0, 0, 0, 0);
	text-indent: -99999px;
}
.cleareLink:hover {
	background-position:  -176px 0px;
	background-color: #007aff;
}
.addgeofenceLink {
	display: block;
	width:43px;
	height:43px;
	background: url("../../images/adv-screen/geofence_icon.png") no-repeat scroll 0px -44px rgba(0, 0, 0, 0);
	text-indent: -99999px;
}
.addgeofenceLink:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.zoominLink {
	display: block;
	width:43px;
	height:43px;
	background: url(../../images/tracking/zoomin.png) no-repeat bottom;
	text-indent: -99999px;
}
.zoominLink:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.routeLink {
	display: block;
	width:43px;
	height:43px;
	background: url(../../images/tracking/route.png) no-repeat bottom;
	text-indent: -99999px;
}
.routeLink:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.routeLink {
	display: block;
	width:43px;
	height:43px;
	background: url(../../images/tracking/route.png) no-repeat bottom;
	text-indent: -99999px;
}
.routeLink:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.mapLink {
	display: block;
	width:40px;
	height:40px;
	background: url(../../images/tracking/map.png) no-repeat center;
	text-indent: -99999px;
}
.mapLink:hover {
	background-image: url(../../images/adv-screen/map_type_white.png);
	background-color: #007aff;
	background-position : center;
}
.tripLink {
	display: block;
	width:43px;
	height:43px;
	background: url(../../images/tracking/trip.png) no-repeat center;            
	text-indent: -99999px;
}
.tripLink:hover {
	background-image: url(../../images/adv-screen/trip_white.png);
	background-color: #007aff;
	background-position : center;
}
.selectedMapLink {
	background-image: url(../../images/adv-screen/map_type_white.png);
	background-color: #007aff;
	background-position : center;
}
.clusterLink {
	display: block;
	width:40px;
	height:40px;
	background: url(../../images/tracking/Cluster.png) no-repeat bottom;
	text-indent: -99999px;
}
.clusterLink:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.trafficLink {
	display: block;
	width:43px;
	height:43px;
	background: url(../../images/tracking/Traffic.png) no-repeat bottom;
	text-indent: -99999px;
}
.trafficLink:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.labelLink {
	display: block;
	width:43px;
	height:43px;
	background: url(../../images/tracking/Label.png) no-repeat bottom;
	text-indent: -99999px;
}
.labelLink:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.poiLink {
	display: block;
	width:43px;
	height:43px;
	background: url(../../images/tracking/Add-Poi.png) no-repeat bottom;
	text-indent: -99999px;
}
.poiLink:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.geofenceLink {
	display: block;
	width:43px;
	height:43px;
	background: url(../../images/tracking/geofence-dashboard.png) no-repeat bottom;
	text-indent: -99999px;
}
.geofenceLink:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.geofencePlaybackLink {
	display: block;
	width:43px;
	height:43px;
	background: url(../../images/tracking/geofence_blue.png) no-repeat center;
	text-indent: -99999px;
}
.selectedGeofencePlaybackLink {
	background-image: url(../../images/tracking/geofence_white.png);
	background-color: #007aff;
	background-position : center;
}
.geofencePlaybackLink:hover {
	background-image: url(../../images/tracking/geofence_white.png);
	background-color: #007aff;
	background-position : center;
}
.sharelocationLink {
	display: block;
	width:43px;
	height:43px;
	background: url(../../images/tracking/Share-Location.png) no-repeat bottom;
	text-indent: -99999px;
}
.sharelocationLink:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.gpsLink {
	display: block;
	width:43px;
	height:43px;
	background: url(../../images/tracking/route_GPS.png) no-repeat bottom;
	text-indent: -99999px;
}
.selectedLink{
	background-position:  0px 0px;
	background-color: #007aff;
}
.gpsLink:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.agpsLink {
	display: block;
	width:43px;
	height:43px;
	background: url(../../images/tracking/route_GPS_A.png) no-repeat bottom;
	text-indent: -99999px;
}
.agpsLink:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.bothLink {
	display: block;
	width:43px;
	height:43px;
	background: url(../../images/tracking/route_BOTH.png) no-repeat bottom;
	text-indent: -99999px;
}
.bothLink:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.zoomoutLink {
	display: block;
	width:43px;
	height:43px;
	background: url(../../images/tracking/zoomout.png) no-repeat bottom;
	text-indent: -99999px;
}
.zoomoutLink:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.targetLink {
	display: block;
	width:43px;
	height:43px;
	background: url(../../images/adv-screen/target.png) no-repeat bottom;
	text-indent: -99999px;
}
.targetLink:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.configLink {
	display: none;
	width:60px;
	height:60px;
	background: url(../../images/tracking/playbacksetting.png) no-repeat bottom;
	text-indent: -99999px;
}
.configLink:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.datetimepickerLink {
	display: none;
	width:50px;
	height:50px;
	background: url(../../images/tracking/datetime.png) no-repeat bottom;
	text-indent: -99999px;
}
/*.configLink:hover .playback_stoppage_slider_container{
	display: block;
	position: fixed;
	bottom: 60px;
	left: 384px;
	border-bottom: 1px solid #cad1d7;
}*/
.playLink {
	display: block;
	width:60px;
	height:60px;
	background: url(../../images/tracking/playbackplay.png) no-repeat bottom;
	text-indent: -99999px;
}
.playLink:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.pauseLink {
	display: none;
	width:60px;
	height:60px;
	background: url(../../images/tracking/playbackpause.png) no-repeat bottom;
	text-indent: -99999px;
}
.pauseLink:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.alertLink {
	display: block;
	width:60px;
	height:60px;
	background: url(../../images/tracking/alert.png) no-repeat bottom;
	/*text-indent: -99999px;*/
}
.alertLink:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.historyLink {
	display: block;
	width:60px;
	height:60px;
	background: url(../../images/tracking/history.png) no-repeat bottom;
	/*text-indent: -99999px;*/
}
.historyLink:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.vehicleLink {
	display: block;
	width:60px;
	height:60px;
	background: url(../../images/tracking/selectvehicle.png) no-repeat bottom;
	/*text-indent: -99999px;	*/
	color: #111;
}
.vehicleLink:hover {
	background-position:  0px 0px;
	background-color: #007aff;
	color: #FFF;
}
.weaponLink {
	display: block;
	width:60px;
	height:60px;
	background: url(../../images/tracking/selectweapon.png) no-repeat bottom;
	/*text-indent: -99999px;	*/
	color: #111;
}
.weaponLink:hover {
	background-position:  0px 0px;
	background-color: #007aff;
	color: #FFF;
}

/*.vehicleLink:hover ~ #lable_vehicle{
	color: #000;
}*/
.routeLink1 {
	display: block;
	width:60px;
	height:60px;
	background: url(../../images/tracking/route1.png) no-repeat bottom;
	text-indent: -99999px;
}
.routeLink1:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.saverouteLink {
	display: none;
	width:60px;
	height:60px;
	background: url(../../images/tracking/route_save.png) no-repeat bottom;
	text-indent: -99999px;
}
.saverouteLink:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.gpsLink1 {
	display: block;
	width:60px;
	height:60px;
	background: url(../../images/tracking/route_GPS1.png) no-repeat bottom;
	text-indent: -99999px;
}
.gpsLink1:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.agpsLink1 {
	display: block;
	width:60px;
	height:60px;
	background: url(../../images/tracking/route_GPS_A1.png) no-repeat bottom;
	text-indent: -99999px;
}
.agpsLink1:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.bothLink1 {
	display: block;
	width:60px;
	height:60px;
	background: url(../../images/tracking/route_BOTH1.png) no-repeat bottom;
	text-indent: -99999px;
}
.bothLink1:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.printLink {
	display: block;
	width:43px;
	height:43px;
	background: url(../../images/tracking/printer.png) no-repeat bottom;
	text-indent: -99999px;
}

.printLink:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.definedPath {
	display: block;
	width:43px;
	height:43px;
	background: url(../../images/tracking/compare_route.png) no-repeat bottom;
	text-indent: -99999px;
}
.definedPath:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.pathDirection {
	display: block;
	width:43px;
	height:43px;
	background: url(../../images/tracking/get_direction.png) no-repeat bottom;
	text-indent: -99999px;
}
.pathDirection:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}

.logout {
	display: block;
	width:43px;
	height:43px;
	background: url(../../images/tracking/logout.png) no-repeat bottom;
	text-indent: -99999px;
}
.logout:hover {
	background-position:  0px 0px;
	background-color: #007aff;
}
.playback_config_container {
  bottom: 60px;
  left: 506px;
  position: fixed;
  background: white;
}
div#playback_controls {
  background-color: #fff;
  bottom: -60px;
  color: #000;
  height: 60px;
  left: 0;
  position: relative;
  right: 0;
  z-index: 2;
  display:flex;
  cursor: pointer;

}
.no_text_selection {
  -moz-user-select: none;
}
div#playback_controls div.playback_date_selector_container {
  border-right: 1px solid #cad1d7;
  height: 100%;
  /*left: 0;*/
  position: relative;
  top: 0;
  width: 60px; /*Jay Naik for playback datetime.*/
}
div#playback_controls input.playback_date {
  border: 0 none;
  color: #007aff;
  font-size: 0.8em;
  height: 100%;
  line-height: 60px;
  padding: 0;
  text-align: center;
  width: 100%;
}
div#playback_controls span.icon-vehicle {
  /*border-left: 1px solid #cad1d7;*/
  border-right: 1px solid #cad1d7;
  font-size: 12px;
  height: 100%;
  /*left: 222px;*/
  line-height: 60px;
  position: relative;
  text-align: center;
  text-decoration: none;
  top: 0;
  width: 155px; /*Jay Naik for playback datetime.*/
}
div#playback_controls span.icon-route {
  /*border-left: 1px solid #cad1d7;*/
  border-right: 1px solid #cad1d7;
  color: #007aff;
  font-size: 1.6em;
  height: 100%;
  /*left: 383px;*/
  line-height: 60px;
  position: relative;
  text-align: center;
  text-decoration: none;
  top: 0;
  width: 60px;
}
div.playback_route_container {
  background: none repeat scroll 0 0 white;
  bottom: 60px;
  left: 323px;
  display: flex;
  position: absolute;
}
div.playback_route_container span.icon-route-small {
  /*border-left: 1px solid #cad1d7;*/
  border-right: 1px solid #cad1d7;
  color: #007aff;
  font-size: 1.6em;
  /*height: 100%;
  left: 383px;
  line-height: 60px;
  position: relative;*/
  text-align: center;
  text-decoration: none;
  bottom: 60px;
  width: 60px;
}
div#playback_controls div.playback_stoppage_slider_container {
  border-right: 1px solid #cad1d7;
  height: 60px;
  /*left: 445px;*/
  position: relative;
  /*top: 0;*/
  width: 177px;  /*Jay Naik for playback datetime.*/
  background: inherit;
}
div#playback_controls div.playback_stoppage_slider {
  display: inline-block;
  position:relative;
  margin: 28px 16px;
  width: 150px;
}

div#playback_controls span.icon-alert {
  /*border-left: 1px solid #cad1d7;*/
  border-right: 1px solid #cad1d7;
  color: #007aff;
  font-size: 1.6em;
  height: 100%;
  /*left: 625px;*/
  line-height: 60px;
  position: relative;
  text-align: center;
  text-decoration: none;
  top: 0;
  width: 60px;
}
div#playback_controls div.playback_speed_slider_container {
  border-right: 1px solid #cad1d7;
  height: 60px;
  /*left: 687px;*/
  position: relative;
  /*top: 0;*/
  width: 140px;
  background: inherit;
}
div#playback_controls div.playback_playpauseLink {  /*Jay Naik for playback datetime.*/
  border-right: 1px solid #cad1d7;
  height: 60px;
  position: relative;
  width: 60px;
  background: inherit;
}
div#playback_controls div.playback_route_saveLink { /*Jay Naik for playback datetime.*/
  border-right: 1px solid #cad1d7;
  height: 60px;
  position: relative;
  width: 60px;
  background: inherit;
}
div#playback_controls div.playback_speed_slider_container span.icon-slow {
  display: inline-block;
  font-size: 24px;
  height: 100%;
  line-height: 70px;
  margin: 0 0px;
  vertical-align: middle;
}
div#playback_controls div.playback_speed_slider {
  display: inline-block;
  position:relative;
  top: 20px;
  width: 70px;
}
div#playback_controls div.playback_speed_slider_container span.icon-fast {
  display: inline-block;
  font-size: 24px;
  height: 100%;
  line-height: 70px;
  margin: 0 0 0 6px;
  vertical-align: middle;
}
div#playback_controls span.icon-config {
  /*border-left: 1px solid #cad1d7;*/
  border-right: 1px solid #cad1d7;
  color: #007aff;
  font-size: 1.6em;
  height: 100%;
  /*left: 827px;*/
  line-height: 60px;
  position: relative;
  text-align: center;
  text-decoration: none;
  top: 0;
  width: 60px;
}
div#playback_controls span.icon-datetimepicker {   /*Jay Naik for playback datetime.*/
  /*border-left: 1px solid #cad1d7;*/
  border-right: 1px solid #cad1d7;
  color: #007aff;
  font-size: 1.6em;
  height: 100%;
  /*left: 827px;*/
  line-height: 60px;
  position: relative;
  text-align: center;
  text-decoration: none;
  top: 0;
  width: 60px;
}
div#playback_controls span.icon-play {
  /*border-left: 1px solid #cad1d7;*/
  border-right: 1px solid #cad1d7;
  color: #007aff;
  font-size: 1.6em;
  height: 100%;
  /*left: 827px;*/
  line-height: 60px;
  position: relative;
  text-align: center;
  text-decoration: none;
  top: 0;
  width: 60px;
}
div#playback_controls span.icon-pause {
  /*border-left: 1px solid #cad1d7;*/
  border-right: 1px solid #cad1d7;
  color: #007aff;
  font-size: 1.6em;
  height: 100%;
  /*left: 827px;*/
  line-height: 60px;
  position: relative;
  text-align: center;
  text-decoration: none;
  top: 0;
  width: 60px;
}
div#playback_controls span.icon-print {
  border-left: 1px solid #cad1d7;
  border-right: 1px solid #cad1d7;
  color: #007aff;
  font-size: 1.6em;
  height: 100%;
  right: 60px;
  line-height: 60px;
  position: absolute;
  text-align: center;
  text-decoration: none;
  top: 0;
  width: 60px;
}
div#playback_controls span.icon-close_datetime {  /*Jay Naik for playback datetime.*/
  border-left: 1px solid #cad1d7;
   background-color: #fff;
  color: #abaeb5;
  height: 100%;
  line-height: 70px;
  position: absolute;
  right: 0;
  text-align: center;
  text-decoration: none;
  top: 0;
  width: 55px;
  cursor:pointer;
}
div#playback_controls span.icon-ok_datetime {  /*Jay Naik for playback datetime.*/
  border-left: 1px solid #cad1d7;
  /*border-right: 1px solid #cad1d7;*/
  background-color: #fff;
  color: #abaeb5;
  height: 100%;
  line-height: 70px;
  position: absolute;
  right: 0;
  text-align: center;
  text-decoration: none;
  top: 0;
  width: 55px;
  cursor:pointer;
  margin-right: 55px;
}
div#playback_controls span.icon-close {
  border-left: 1px solid #cad1d7;
  color: #abaeb5;
  height: 100%;
  line-height: 70px;
  position: absolute;
  right: 0;
  text-align: center;
  text-decoration: none;
  top: 0;
  width: 55px;  /*Jay Naik for playback advacetracking.*/
  cursor:pointer;
}
output {
    display: block;
    font-size: 10px;
    font-weight: normal;
    text-align: center;
    margin: 7px 0;
    width: 100%;
}
.input-daterange{  /*Jay Naik for playback advacetracking.*/
	margin: 0px 0px;
	border: 0px solid #ccc;
	height: 20px;
	border-radius: 4px;
}
.datepicker-panel{  /*Jay Naik for playback advacetracking.*/
	margin: 10px 0px;
	border: 1px solid #ccc;
	width: 569px;
	height: 60px;
}
.customize_tooltip {
  width: 260px;
  height: 88%;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
}
.icon-reset-small{
	  background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -106px -13px rgba(0, 0, 0, 0);
	  content: " ";
	  height: 15px;
	  right: 40px;
	  position: absolute;
	  top: 13px;
 	  width: 15px;
 	  cursor: pointer;
}
.icon-reset-small:hover{
	background-position: -132px -13px;
}
.icon-reset-small-disable{
	  background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -158px -13px rgba(0, 0, 0, 0);
	  content: " ";
	  height: 15px;
	  right: 40px;
	  position: absolute;
	  top: 13px;
	  width: 15px;
 	  cursor: pointer;
}
.icon-save-small{
	  background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -184px -13px rgba(0, 0, 0, 0);
	  content: " ";
	  height: 15px;
	  right: 18px;
	  position: absolute;
	  top: 13px;
 	  width: 15px;
 	  cursor: pointer;
}
.icon-save-small:hover{
	background-position: -211px -13px;
}
.icon-save-small-disable{
	background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -238px -13px rgba(0, 0, 0, 0);
	content: " ";
	height: 15px;
	right: 18px;
	position: absolute;
	top: 13px;
	width: 15px;
	cursor: pointer;
}
.icon-save-big{
	  background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -184px -29px rgba(0, 0, 0, 0);
	  content: " ";
	  height: 25px;
	  right: 18px;
	  position: absolute;
	  top: 13px;
 	  width: 25px;
 	  cursor: pointer;
}
.icon-save-big:hover{
	background-position: -211px -29px;
}
.icon-save-big-disable{
	background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -238px -29px rgba(0, 0, 0, 0);
	content: " ";
	height: 25px;
	right: 18px;
	position: absolute;
	top: 13px;
	width: 25px;
	cursor: pointer;
}
.settings_group
{
	padding:0px 0px;
	margin:0;
}
.sub_settings_group
{
	padding:0px 0px;
	margin:0;
}
ul.settings_group > li {
  border-bottom: 1px solid #bbbec7;
  color: #333;
}
ul.settings_group > li div.settings_container {
  padding: 20px 12px;
  position: relative;
}
ul.settings_group > li span.title {
  color: #333;
  display: block;
  font-size: 14px;
  width: 220px;
}
ul.settings_group > li span.subtitle {
  color: #797b83;
  display: block;
  font-size: 12px;
  margin-top: 4px;
}
ul.settings_group > li span.itemlist {
  color: #333;
  display: block;
  font-size: 12px;
  line-height: 17px;
  /*margin-bottom: 6px;*/
  width: 220px;
}
ul.settings_group li:last-child {
  border-bottom: 0 none;
}
div.settings_pillbox {
  border-radius: 4px;
  box-shadow: 1px 1px 3px #d6d6d6;
  display: inline-flex;
  /*font-size: 0.9em;*/
  margin-top: 10px;
  width: auto;
}
div.settings_pillbox label:nth-of-type(1) {
  background: none repeat scroll 0 0 #fbfbfb;
  border: 1px solid #bbbec7;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  display: inline-block;
}
div.settings_pillbox label {
  background-image: linear-gradient(to bottom, #fff 0px, #f5f5f5 100%);
  border-bottom: 1px solid #bbbec7;
  border-right: 1px solid #bbbec7;
  border-top: 1px solid #bbbec7;
  color: #96979d;
  display: inline-block;
  font-size: 0.9em;
  padding: 8px 5px;
  text-decoration: none;
  width:68px;
}
div.chk_settings_pillbox{
	margin-top: -5px;
	font-size: 12px;
}
div.chk_settings_pillbox label{
	width:55px;
}
.chktable{
	margin-bottom:12px;
}
.chk_label{
	height: 24px;
	line-height: 13px;
}
div.settings_pillbox label:last-child {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background: none repeat scroll 0 0 #fbfbfb;
  border-bottom-right-radius: 4px;
  border-color: #bbbec7 #bbbec7 #bbbec7 -moz-use-text-color;
  border-image: none;
  border-style: solid solid solid none;
  border-top-right-radius: 4px;
  border-width: 1px 1px 1px 0;
  display: inline-block;
}
div.settings_container div.brightness_slider {
  display: inline-block;
  position:relative;
  top: 15px;
  width: 212px;
  margin-bottom: 10px;
}
ul.settings_group > li div.accessory_view {
  float: right;
  height: 40px;
}
.settings_group_list{
    height: 45px;
    padding-top: 5px;
    width: 260px;
}
.settings_group_item{
    padding: 0 12px;
}
div#filters_view_live a.add_field, div#filters_view_live a.remove_field {
  display: block;
  position: absolute;
  right: 12px;
  top: 20px;
}
div#filters_view_live a.clear_field {
  display: block;
  position: absolute;
  right: 12px;
  top: 20px;
}
a.clear_button {
  background: url("../../images/tracking/cancel.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  display: block;
  height: 25px;
  width: 25px;
}
a.hover_add_button {
  background: url("../../images/tracking/hover-add-button.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  display: block;
  height: 14px;
  width: 14px;
}
a.hover_add_button:hover {
  background-position:  0 -14px;
}
a.hover_remove_button {
  background: url("../../images/tracking/hover-remove-button.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  display: block;
  height: 14px;
  width: 14px;
}
a.hover_remove_button:hover {
  background-position:  0 -14px;
}
ul.settings_group li ul.options > li {
  border-top: 1px dashed #bbbec7;
  position: relative;
}
ul.settings_group li div.option_control {
  padding: 20px 12px 20px 24px;
}
ul.settings_group li div.option_control input {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
  border: 0 none;
  color: #333;
  font-size: 0.9em;
  width: 95%;
}
.filter-summary:before, .filter-summary:after {
  content: "";
  display: table;
}
.filter-summary:after {
  clear: both;
}
.filter-summary {
  border-top: 1px dashed #bbbec7;
}
.filter-summary .filter:before, .filter-summary .filter:after {
  content: "";
  display: table;
}
.filter-summary .filter {
  float: left;
  margin-right: 10px;
}
.filter-summary .filter .option:before {
  background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -2px -3px rgba(0, 0, 0, 0);
  content: " ";
  height: 10px;
  left: 8px;
  position: absolute;
  top: 7px;
  width: 10px;
}
.filter-summary .filter .option {
  background-color: #edeeef;
  color: #444546;
  cursor: pointer;
  display: block;
  float: left;
  margin: 0 1px 6px 0;
  padding: 3px 10px 0 25px;
  position: relative;
  text-transform: capitalize;
  transition: all 0.2s ease-out 0s;
}
.filter-summary .filter .option:hover {
    background-color: #d6d7d7;
    text-decoration: line-through;
}
div#modalBlackout {
  height: 100%;
  position: absolute;
  transition: all 400ms ease 0s;
  width: 100%;
  z-index: 900;
  display: none;
}
div#modalBlackout.show {
  display: block;
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.50);
}
div.modal_container1 {
  background-color: #fff;
  border-radius: 5px;
  left: 25%;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  /*top: 50%;*/
  z-index: 9999;
}
div.modal_container {
  background-color: #fff;
  border-radius: 5px;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  opacity: 0;
  overflow: hidden;
  position: absolute;  
  z-index: 9999;
}
div.modal_container div.reseller_content_container {
  bottom: 0;
  left: 0;
  /*position: absolute;*/
  right: 0;
  top: 72px;
  /*margin-left: 60px;*/
}
div.modal_container div.modal_header_container {
  border-bottom: 1px solid #cad1d7;/**/
  height: 72px;
  position: relative;
  background: none repeat scroll 0 0 #e4e8ec
}
div.modal_container1 div.modal_header_container {
  border-bottom: 1px solid #cad1d7;/**/
  height: 72px;
  position: relative;
  background: none repeat scroll 0 0 #e4e8ec
}
div.modal_container li.filter_title {
  font-size: 1.4em;
  line-height: 72px;
  /*margin-left: 20px;*/
  height: 72px;
  width: 105px;
  float: left;
  border-right: 1px solid #cad1d7;
}
.activetab{
	background: white;
}
.inactivetab{
	background: none;
}
span.transparent {
  background: none repeat scroll 0 0 transparent;
  height: inherit;
  position: absolute;
  top: 0;
  width: inherit;
}
span.transparent:hover {
	background: white;
	opacity: 0.3;
}
div.modal_container a.close_button_large {
  bottom: 0;
  line-height: 85px;
  position: absolute;
  right: 24px;
  top: 0;
}
div.modal_container1 a.close_button_large {
  bottom: 0;
  line-height: 85px;
  position: absolute;
  right: 24px;
  top: 0;
}
div.modal_container span.close_button_large {
	background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -2px -30px rgba(0, 0, 0, 0);
	width: 25px;
	height: 25px;
	position: absolute;
	right: 8px;
	top: 8px;
	cursor:pointer;
}
div.modal_container1 span.close_button_large {
	background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -2px -30px rgba(0, 0, 0, 0);
	width: 25px;
	height: 25px;
	position: absolute;
	right: 8px;
	top: 8px;
	cursor:pointer;
}
div.modal_container span.close_button_large:hover {
	background-position:  -28px -30px;
}
div.modal_container1 span.close_button_large:hover {
	background-position:  -28px -30px;
}
div.modal_container span.ok_button_large {
	background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -54px -30px rgba(0, 0, 0, 0);
	width: 25px;
	height: 25px;
	position: absolute;
	right: 8px;
	bottom: 8px;
	cursor:pointer;
}
div.modal_container1 span.ok_button_large {
	background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -54px -30px rgba(0, 0, 0, 0);
	width: 25px;
	height: 25px;
	position: absolute;
	right: 8px;
	bottom: 8px;
	cursor:pointer;
}
div.modal_container span.ok_button_large:hover {
	background-position:  -80px -30px;
}
div.modal_container1 span.ok_button_large:hover {
	background-position:  -80px -30px;
}
div.modal_container div.reseller_content {
  bottom: 0;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: absolute;
  right: 0;
  top: 73px;
}
div.modal_container div.company_content_container {
  bottom: 0;
  left: 0;
  /*position: absolute;*/
  right: 0;
  top: 72px;
}
div.modal_container div.company_content {
  bottom: 0;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: absolute;
  right: 0;
  top: 73px;
}
div.modal_container div.branch_content_container {
  bottom: 0;
  left: 0;
  /*position: absolute;*/
  right: 0;
  top: 72px;
}
div.modal_container div.branch_content {
  bottom: 0;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: absolute;
  right: 0;
  top: 73px;
}
div.modal_container div.vehicle_type_content_container {
  bottom: 0;
  left: 0;
  /*position: absolute;*/
  right: 0;
  top: 72px;
}
div.modal_container div.vehicle_type_content {
  bottom: 0;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: absolute;
  right: 0;
  top: 73px;
}
div.modal_container div.vehicle_group_content_container {
  bottom: 0;
  left: 0;
  /*position: absolute;*/
  right: 0;
  top: 72px;
}
div.modal_container div.vehicle_group_content {
  bottom: 0;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: absolute;
  right: 0;
  top: 73px;
}
div.modal_container div.vehicle_content_container {
  bottom: 0;
  left: 0;
  /*position: absolute;*/
  right: 0;
  top: 72px;
}
div.modal_container div.vehicle_content {
  bottom: 0;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: absolute;
  right: 0;
  top: 73px;
}
div.modal_container div.poicategory_content_container {
  bottom: 0;
  left: 0;
  /*position: absolute;*/
  right: 0;
  top: 72px;
}
div.modal_container div.poicategory_content {
  bottom: 0;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: absolute;
  right: 0;
  top: 73px;
}
div.modal_container div.poi_content_container {
  bottom: 0;
  left: 0;
  /*position: absolute;*/
  right: 0;
  top: 72px;
}
div.modal_container div.poi_content {
  bottom: 0;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: absolute;
  right: 0;
  top: 73px;
}
a.close_button_large {
  color: #a2a2a2;
  display: block;
  font-size: 1.3em;
  text-decoration: none;
}
a.ok_button_large {
  color: #a2a2a2;
  display: block;
  font-size: 1.3em;
  text-decoration: none;
}
div.page-wrapper {
  margin: 0 auto;
  /*max-width: 500px;*/
  padding: 0px 0;
  width: 100%;
}
div.page-wrapper fieldset{
	border:none;
}
.column {
  display: inline-block;
  /*height: 360px;*/
  margin-right: 6px;
  margin-bottom: 15px;
  vertical-align: top;
}
.letter {
  box-sizing: border-box;
  display: block;
  font-weight: bold;
  font-size: 12px;
  line-height: 1.833em;
  /*padding-left: 22px;
  text-transform: uppercase;*/
}
.doubleheight {
	/*left: -36%;*/
	/*width: 386px;
	height: 500px;    */
    /*-webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3;*/ /*3 is just placeholder -- can be anything*/
    /*-webkit-column-width: 250px;
       -moz-column-width: 250px;
    	    column-width: 250px;*/
}
.doubleheight li {
    display: block;
    /*width: 200px;*/
}
.twocolumn {
	/*left: -36%;*/
	/*width: 386px;
	height: 500px;    */
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2; /*3 is just placeholder -- can be anything*/
    /*-webkit-column-width: 250px;
       -moz-column-width: 250px;
    	    column-width: 250px;*/
}
.twocolumn li {
    display: inline-flex;
    /*width: 200px;*/
}
.onecolumn {
	/*left: -36%;*/
	/*width: 386px;
	height: 500px;    */
	margin:10px -12px;
    -webkit-column-count: 1;
       -moz-column-count: 1;
            column-count: 1; /*3 is just placeholder -- can be anything*/
    /*-webkit-column-width: 250px;
       -moz-column-width: 250px;
    	    column-width: 250px;*/
}
.onecolumn li {
    display: inline-flex;
    /*width: 200px;*/
}
div#map_search_container {
  height: 100%;
  min-width: 200px;
  position: relative;
}
div#map_search_box_container {
  bottom: 0;
  left: 45px;
  position: absolute;
  right: 0;
  top: 0;
}
div#map_search_container span.icon-search {
  color: #878787;
  display: inline-block;
  font-family: fontcustom;
  font-size: 1.2em;
  line-height: 42px;
  margin: 0 12px;
  text-align: right;
}
div#map_search_container span.icon-cancel {
  color: #878787;
  display: none;
  font-family: fontcustom;
  font-size: 1.2em;
  line-height: 45px;
  margin: 0 12px;
  text-align: right;
  position: absolute;
  right: 0;
  cursor: pointer;
}
div#map_search_container input {
  background-color: transparent;
  border: medium none;
  box-sizing: content-box;
  display: inline-block;
  height: 100%;
  padding: 0;
  width: 100%;
}
div#map_search_results {
  background-color: #fff;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  border-top: 1px solid #bbbec7;
  box-shadow: 0 3px 3px #888;
  display: none;
  height: 400px;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: 43px;
  z-index: 999;
}
div#map_search_results a.result {
  border-bottom: 1px solid #d7d7d7;
  display: flex;
  padding: 8px 10px;
  /*font-size: 20px;*/
  text-decoration: none;
}
div#map_search_results a:hover {
	background: #dff0ff;
}
div#map_search_results a.selected {
	background: #afd8ff;
}
div#map_search_container span.icon-result {
  color: #878787;
  display: inline-block;
  font-family: fontcustom;
  margin: 0 12px 0 0;
  text-align: right;
}
div#map_search_container span.icon-result img{
  margin: -4px auto;
}
div#map_search_results a.result span.title {
  color: #333;
  display: block;
  font-size: 1.4vw;
  line-height: 30px;
}
div#map_search_results a.result span.subtitle {
  color: #797b83;
  display: block;
  font-size: 16px;
  line-height: 26px;
  position: absolute;
  right: 10px;
}
div#map_search_results a.result span.errormsg{
  position: relative;
  margin: 0px auto;
  color: red;
}
/*#map-form {
	position:absolute;
	top:25%;
	right:28%;
	opacity:1;
	filter:alpha(opacity=100);
	margin:auto;
	background-color:#f1f1f1;
	width:350px;
	padding:20px 20px 50px 20px;
	margin: 50px auto;
	border: 6px solid #8FB5C1;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	border-radius:15px;
	z-index:7;

}
#map-form input,
#map-form select,
#map-form textarea,
#map-form label {
	font-size:15px;
	margin-bottom:16px;
}

#map-form label {
	display:block;
}
#map-form #submit-button {
	width: 100px;
	color:#333;
	border:none;
	display:block;
	margin-bottom:-10px;
	margin-right:6px;
	background-color:#8FB5C1;
	border: 2px solid #8FB5C1;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}
#map-form #submit-button:hover {
	background-color: #A6CFDD;
	cursor:pointer;
}
#map-form #submit-button:active {
	position:relative;
	top:1px;
}
#cancelAddress{ height:20; width:20px; float:right; margin-top:-10px; margin-right:-10px;cursor:pointer;}
.inputtext { width:260px; height: 30px;}
.inputtext1 { width:250px; height: 20px;}*/


/* For vehicle label
	added by vishal banker on 11/11/2014
*/
 .hint, [data-hint] {
 position: relative;
 display: inline-block;
}
.hint:before, .hint:after, [data-hint]:before, [data-hint]:after {
	position: absolute;
	z-index: 1000000;
	pointer-events: none;
	border-radius:2px;
}
.hint:before, [data-hint]:before {
	content: '';
	position: absolute;
	background: transparent;
	border: 7px solid transparent;
	z-index: 1000001;
}
.hint:after, [data-hint]:after {
	content: attr(data-hint);
	background: #408ed6;
	color: white;
	padding: 8px 5px;
	font-size: 10px;
	line-height: 1px;
	white-space: nowrap;
	-webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5);
	box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5);
	text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
}

.hint--top:before {
	border-top-color: #408ed6;
}
.hint--bottom:before {
	border-bottom-color: #408ed6;
}
.hint--left:before {
	border-left-color: #408ed6;
}
.hint--right:before {
	border-right-color: #408ed6;
}

.hint--bottom:before {
	margin-top: -12px;
}
.hint--bottom:after {
	margin-left: -2px;
}
.hint--bottom:before, .hint--bottom:after {
	top: 80%;
	left: 21%;
}
.hint--always:after, .hint--always:before {
	opacity: 1;
	visibility: visible;
}
.hint--always.hint--top:after, .hint--always.hint--top:before {
	-webkit-transform: translateY(-7px);
	-moz-transform: translateY(-7px);
	transform: translateY(-7px);
}
.hint--always.hint--bottom:after, .hint--always.hint--bottom:before {
	-webkit-transform: translateY(7px);
	-moz-transform: translateY(7px);
	transform: translateY(7px);
}
.hint--always.hint--left:after, .hint--always.hint--left:before {
	-webkit-transform: translateX(-7px);
	-moz-transform: translateX(-7px);
	transform: translateX(-7px);
}
.hint--always.hint--right:after, .hint--always.hint--right:before {
	-webkit-transform: translateX(7px);
	-moz-transform: translateX(7px);
	transform: translateX(7px);
}

/*till this*/
div#map_footer {
  background: none repeat scroll 0 0 #111;;
  display: block;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
  height: 220px;
  left: 0;
  bottom:-220px;
  position: absolute;
  width: 100%;
  z-index: 999;
  overflow: auto;
}
#dragbar{
	background-color: #007aff;
	cursor: row-resize;
	float: right;
	height: 5px;
	width: 100%;
	margin-bottom: 3px;
	position:fixed;
	z-index: 999;
}
#ghostbar{
	height:5px;
	background-color: black;
	opacity:0.5;
	position:absolute;
	cursor: row-resize;
	z-index:999
}
div.textual_report_content {
  color: #000;
  display: none;
  width: 100%;
  overflow: auto;
  /*margin-top: 30px;*/
}
div.header{

}
.header-td{
	vertical-align:middle;BORDER-BOTTOM: 1px solid #272727;BORDER-RIGHT: 1px solid #272727;color:#149FE3;font-weight: lighter;
}
.subheader-td{
	font-size: 8pt;
}
.record-td{
	vertical-align:middle;BORDER-BOTTOM: 1px solid #272727;BORDER-RIGHT: 1px solid #272727;
}
tr.header {
  font-family: Roboto,"Helevetica Neue",Helvetica,Arial;
  font-size: 16px;
  font-weight: 100;
  position: relative;
  margin-bottom: 4px;

  /*background: url("../../images/tracking/flight-listing-bg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
  background: #111;*/
  font-weight: 300;
  height: 51px;
  /*line-height: 51px;*/
  overflow: hidden;
}
tr.vehicle_listing {
  font-family: Roboto,"Helevetica Neue",Helvetica,Arial;
  font-size: 12px;
  font-weight: 100;
  position: relative;
  margin-bottom: 4px;

  /*background: url("../../images/tracking/flight-listing-bg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
  background: #111;*/
  font-weight: 300;
  height: 51px;
  /*line-height: 41px;*/
  overflow: hidden;
  cursor: pointer;
}
.vehicle_listing:hover {
	background: #18191a;
}
.selected {
	background: #282828;
}
thead tr.header td{
	color: #149fe3;
	display: table-cell;
	position: relative;
	text-align: center;
}
tr.vehicle_listing td{
	/*color: #f7d002;*/
	color: #fff;
	display: table-cell;
	position: relative;
	text-align: center;
}
td div.divider {
  background: none repeat scroll 0 0 rgba(14, 19, 12, 0.5);
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  top: 26px;
  width: 100%;
}
tr.vehicle_listing td.status {
  width: 4%;
}
tr.vehicle_listing td.number {
  width: 9%;
}
tr.vehicle_listing td.lastupdated {
  width: 13%;
}
tr.vehicle_listing td.holdtime {
  width: 7%;
  color: rgb(140, 200, 35);
}
tr.vehicle_listing td.speed {
  width: 4%;
  color: rgb(140, 200, 35);
}
tr.vehicle_listing td.location {
  width: 26%;
}
tr.vehicle_listing td.poi {
  width: 25%;
}
tr.vehicle_listing td.pwr {
  width: 3%;
}
tr.vehicle_listing td.ign {
  width: 3%;
}
tr.vehicle_listing td.ac {
  width: 3%;
}
tr.vehicle_listing td.gps {
  width: 3%;
}
#tooltip_view_live{
	font-size: 25px;
}
.tooltipclose {
  cursor: pointer;
  display: table;
  position: absolute;
  right: 2px;
}
#tt_num{
	font-size: 22px;
	font-weight: lighter;
}
.tt_title{
	font-size: 16px;
	font-weight: lighter;
}
.tt_subtitle{
	color: gray;
	font-size: 11px;
	font-weight: lighter;
}
div.tt_container {
  margin-top: 10px;
  display: inline-flex;
  width: 234px;
}
div.tt_container_l {
  display: table-cell;
  width: 152px;
}
div.tt_container_c {
  display: table-cell;
  width: 112px;
}
div.tt_container_r {
  display: table-cell;
  width: 170px;
}
div.tt_container_x {
  display: inline-block;
  margin-right: 5px;
}
div.tt_container_y {
  display: table-cell;
  width: 115px;
}
div.tt_header{
	font-size: 14px;
	font-weight: 600;
}
.icon-users{
	background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -302px -76px rgba(0, 0, 0, 0);
	width: 20px !important;
	height: 20px;
	margin-right: 5px;
}
.icon-mob{
	background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -125px -76px rgba(0, 0, 0, 0);
	width: 26px !important;
	height: 20px;
	margin-right: 5px;
}
.icon-detail{
	background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -324px -74px rgba(0, 0, 0, 0);
	width: 37px !important;
	height: 22px;
	margin-right: 5px;
}
.icon-mob-agps{
	background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -98px -76px rgba(0, 0, 0, 0);
	width: 26px !important;
	height: 20px;
	margin-right: 5px;
}
.icon-student{
	background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -150px -76px rgba(0, 0, 0, 0);
	width: 27px !important;
	height: 20px;
	margin-right: 5px;
}

.icon-fuel{
	background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -24px -55px rgba(0, 0, 0, 0);
	width: 20px !important;
	height: 18px;
	margin-right: 5px;
}
.icon-water{
	background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -223px -97px rgba(0, 0, 0, 0);
	width: 38px !important;
	height: 22px;
    margin-right: 5px;
}
.icon-separator{
	background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -279px -3px rgba(0, 0, 0, 0);
	width: 2px !important;
	height: 20px;
	margin-right: 10px;
	margin-left: 10px;
}
.icon-odometer{
	background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -2px -55px rgba(0, 0, 0, 0);
	width: 20px !important;
	height: 17px;
	margin-right: 5px;
}
.icon-temp{
	background: url("../../images/tracking/temp.png");
	width: 20px !important;
	height: 20px;
	margin-right: 5px;
}
.icon-camera{
	background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -247px -55px rgba(0, 0, 0, 0);
	width: 21px !important;
	height: 20px;
	margin-right: 5px;
	cursor: pointer;
}
.icon-camera:hover{
	background-position:  -268px -55px;
}
.icon-dist{
	background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -143px -55px rgba(0, 0, 0, 0);
	width: 20px !important;
	height: 20px;
	margin-right: 5px;
}
.icon-travel-dura{
	background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -178px -76px rgba(0, 0, 0, 0);
	width: 32px !important;
	height: 20px;
	margin-right: 5px;
}
.icon-dura{
	background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -206px -55px rgba(0, 0, 0, 0);
	width: 20px !important;
	height: 20px;
	margin-right: 5px;
}
.icon-idel-dura{
	background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -209px -76px rgba(0, 0, 0, 0);
	width: 32px !important;
	height: 20px;
	margin-right: 5px;
}
.icon-stop-dura{
	background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -240px -76px rgba(0, 0, 0, 0);
	width: 32px !important;
	height: 20px;
	margin-right: 5px;
}

.icon-speed{
	background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -185px -55px rgba(0, 0, 0, 0);
	width: 20px !important;
	height: 20px;
	margin-right: 5px;
}
.icon-location{
	background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -79px -53px rgba(0, 0, 0, 0);
	width: 20px !important;
	height: 20px;
	margin-right: 5px;
}
.icon-alt{
	background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -164px -55px rgba(0, 0, 0, 0);
	width: 20px !important;
	height: 20px;
	margin-right: 5px;
}
.icon-prk{
	background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -227px -55px rgba(0, 0, 0, 0);
	width: 20px !important;
	height: 20px;
	margin-right: 5px;
}
.icon-dot{
	background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -71px -55px rgba(0, 0, 0, 0);
	width: 8px !important;
	height: 8px;
	margin-top: 2px;
}
.icon-car{
	background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -44px -55px rgba(0, 0, 0, 0);
	width: 26px !important;
	height: 13px;
}
.icon-employee{
	background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -97px -97px rgba(0, 0, 0, 0);
	width: 20px !important;
	height: 20px;
}
.icon-line-dot{
	background: url("../../images/tracking/line-dot.png") repeat-x scroll;
	width: 180px !important;
	height: 4px;
	margin-top: 4px;
}
.icon-add-poi{
	background: url(../../images/tracking/tracking-icon-set.png) no-repeat scroll -101px -55px rgba(0, 0, 0, 0);
	width: 20px;
	height: 20px;
	margin-right: 5px;
	cursor: pointer;
}
.icon-add-poi:hover{
	background-position:  -122px -55px;
}
.icon-add-geofenece{
	background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -2px -76px rgba(0, 0, 0, 0);
	width: 20px;
	height: 20px;
	margin-right: 5px;
	cursor: pointer;
}
.icon-add-geofenece:hover{
	background-position:  -23px -76px;
}
.icon-add-share-location{
	background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -2px -97px rgba(0, 0, 0, 0);
	width: 20px;
	height: 20px;
	margin-right: 5px;
	cursor: pointer;
}
.icon-add-share-location:hover{
	background-position:  -23px -97px;
}
.icon-poi{
	background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -80px -55px rgba(0, 0, 0, 0);
	width: 18px;
	height: 18px;
	margin-right: 5px;
}
.icon-start{
	background: url("../../images/flags/start_location.png") no-repeat scroll 0px 0px rgba(0, 0, 0, 0);
	width: 20px;
	height: 20px;
	margin-right: 5px;
}
.icon-end{
	background: url("../../images/flags/end_location.png") no-repeat scroll 0px 0px rgba(0, 0, 0, 0);
	width: 20px;
	height: 20px;
	margin-right: 5px;
}
.inner{
    margin: 0 auto;
    display: table;
}
div#div_container_modal_poi h2 {
  color: #333;
  font-weight: 400;
  padding: 0px 24px;
}

.rotate_mrk{
	-ms-transform-origin: center bottom 0; /* IE 9 */
	-webkit-transform-origin: center bottom 0; /* Chrome, Safari, Opera */
	transform-origin: center bottom 0;
}
.flyover {
   left: 250%;
   overflow: hidden;
   position: fixed;
   width: 300px;
   /*opacity: 0.9;*/
   z-index: 1050;
   transition: left 0.6s ease-out 0s;
   padding: 12px;
}

.flyover-centered {
   /*top: 64px;*/
   transform: translate(-50%, 0%);
}
.flyover.in {
   left: 50%;
}
.flyover-bottom {
   bottom: 10px;
}
.icon-stop {
  background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -286px -24px rgba(0, 0, 0, 0);
  width: 26px;
  height: 26px;
  margin-right: 5px;
}
.icon-arrival{
  background: url("../../images/tracking/tracking-icon-set.png") no-repeat scroll -278px -3px rgba(0, 0, 0, 0);
  width: 28px;
  margin-right: 5px;
  height: 20px;
}
.tt_title_center{
	text-align: center;
}
.ontrip:before, .ontrip:after, [data-ontrip]:before, [data-ontrip]:after {
	position: absolute;
	z-index: 1000000;
	pointer-events: none;
	border-radius:2px;
}
.ontrip:before, [data-ontrip]:before {
	content: '';
	position: absolute;
	background: transparent;
	border: 7px solid transparent;
	z-index: 1000001;
}
.ontrip:after, [data-ontrip]:after {
	content: attr(data-ontrip);
	background: #339933;
	color: white;
	padding: 8px 5px;
	font-size: 10px;
	line-height: 1px;
	white-space: nowrap;
	-webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5);
	box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5);
	text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
}

.ontrip--top:before {
	border-top-color: #339933;
}
.ontrip--bottom:before {
	border-bottom-color: #339933;
}
.ontrip--left:before {
	border-left-color: #339933;
}
.ontrip--right:before {
	border-right-color: #339933;
}

.ontrip--bottom:before {
	margin-top: -12px;
}
.ontrip--bottom:after {
	margin-left: -17px;
}
.ontrip--bottom:before, .ontrip--bottom:after {
	top: 80%;
	left: 50%;
}
.ontrip--always:after, .ontrip--always:before {
	opacity: 1;
	visibility: visible;
}
.ontrip--always.ontrip--top:after, .ontrip--always.ontrip--top:before {
	-webkit-transform: translateY(-7px);
	-moz-transform: translateY(-7px);
	transform: translateY(-7px);
}
.ontrip--always.ontrip--bottom:after, .ontrip--always.ontrip--bottom:before {
	-webkit-transform: translateY(7px);
	-moz-transform: translateY(7px);
	transform: translateY(7px);
}
.ontrip--always.ontrip--left:after, .ontrip--always.ontrip--left:before {
	-webkit-transform: translateX(-7px);
	-moz-transform: translateX(-7px);
	transform: translateX(-7px);
}
.ontrip--always.ontrip--right:after, .ontrip--always.ontrip--right:before {
	-webkit-transform: translateX(7px);
	-moz-transform: translateX(7px);
	transform: translateX(7px);
}
.offtrip:before, .offtrip:after, [data-offtrip]:before, [data-offtrip]:after {
	position: absolute;
	z-index: 1000000;
	pointer-events: none;
	border-radius:2px;
}
.offtrip:before, [data-offtrip]:before {
	content: '';
	position: absolute;
	background: transparent;
	border: 7px solid transparent;
	z-index: 1000001;
}
.offtrip:after, [data-offtrip]:after {
	content: attr(data-offtrip);
	background: #ff3333;
	color: white;
	padding: 8px 5px;
	font-size: 10px;
	line-height: 1px;
	white-space: nowrap;
	-webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5);
	box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5);
	text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
}

.offtrip--top:before {
	border-top-color: #ff3333;
}
.offtrip--bottom:before {
	border-bottom-color: #ff3333;
}
.offtrip--left:before {
	border-left-color: #ff3333;
}
.offtrip--right:before {
	border-right-color: #ff3333;
}

.offtrip--bottom:before {
	margin-top: -12px;
}
.offtrip--bottom:after {
	margin-left: -17px;
}
.offtrip--bottom:before, .offtrip--bottom:after {
	top: 80%;
	left: 50%;
}
.offtrip--always:after, .offtrip--always:before {
	opacity: 1;
	visibility: visible;
}
.offtrip--always.offtrip--top:after, .offtrip--always.offtrip--top:before {
	-webkit-transform: translateY(-7px);
	-moz-transform: translateY(-7px);
	transform: translateY(-7px);
}
.offtrip--always.offtrip--bottom:after, .offtrip--always.offtrip--bottom:before {
	-webkit-transform: translateY(7px);
	-moz-transform: translateY(7px);
	transform: translateY(7px);
}
.offtrip--always.offtrip--left:after, .offtrip--always.offtrip--left:before {
	-webkit-transform: translateX(-7px);
	-moz-transform: translateX(-7px);
	transform: translateX(-7px);
}
.offtrip--always.offtrip--right:after, .offtrip--always.offtrip--right:before {
	-webkit-transform: translateX(7px);
	-moz-transform: translateX(7px);
	transform: translateX(7px);
}

/* For vehicle label
	added by Jay Naik on 11/03/2016.
*/
 .visited, [data-visited] {
 position: relative;
 display: inline-block;
}
.visited:before, .visited:after, [data-visited]:before, [data-visited]:after {
	position: absolute;
	z-index: 1000000;
	pointer-events: none;
	border-radius:2px;
}
.visited:before, [data-visited]:before {
	content: '';
	position: absolute;
	background: transparent;
	border: 7px solid transparent;
	z-index: 1000001;
}
.visited:after, [data-visited]:after {
	content: attr(data-visited);
	background: #0ea51c;
	color: white;
	padding: 8px 5px;
	font-size: 10px;
	line-height: 1px;
	white-space: nowrap;
	-webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5);
	box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5);
	text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
}

.visited--top:before {
	border-top-color: #0ea51c;
}
.visited--bottom:before {
	border-bottom-color: #0ea51c;
}
.visited--left:before {
	border-left-color: #0ea51c;
}
.visited--right:before {
	border-right-color: #0ea51c;
}

.visited--bottom:before {
	margin-top: -12px;
}
.visited--bottom:after {
	margin-left: -17px;
}
.visited--bottom:before, .visited--bottom:after {
	top: 80%;
	left: 50%;
}
.visited--always:after, .visited--always:before {
	opacity: 1;
	visibility: visible;
}
.visited--always.visited--top:after, .visited--always.visited--top:before {
	-webkit-transform: translateY(-7px);
	-moz-transform: translateY(-7px);
	transform: translateY(-7px);
}
.visited--always.visited--bottom:after, .visited--always.visited--bottom:before {
	-webkit-transform: translateY(7px);
	-moz-transform: translateY(7px);
	transform: translateY(7px);
}
.visited--always.visited--left:after, .visited--always.visited--left:before {
	-webkit-transform: translateX(-7px);
	-moz-transform: translateX(-7px);
	transform: translateX(-7px);
}
.visited--always.visited--right:after, .visited--always.visited--right:before {
	-webkit-transform: translateX(7px);
	-moz-transform: translateX(7px);
	transform: translateX(7px);
}


.missed, [data-missed] {
 position: relative;
 display: inline-block;
}

.missed:before, .missed:after, [data-missed]:before, [data-missed]:after {
	position: absolute;
	z-index: 1000000;
	pointer-events: none;
	border-radius:2px;
}
.missed:before, [data-missed]:before {
	content: '';
	position: absolute;
	background: transparent;
	border: 7px solid transparent;
	z-index: 1000001;
}
.missed:after, [data-missed]:after {
	content: attr(data-missed);
	background: #ff3434;
	color: white;
	padding: 8px 5px;
	font-size: 10px;
	line-height: 1px;
	white-space: nowrap;
	-webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5);
	box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5);
	text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
}

.missed--top:before {
	border-top-color: #ff3434;
}
.missed--bottom:before {
	border-bottom-color: #ff3434;
}
.missed--left:before {
	border-left-color: #ff3434;
}
.missed--right:before {
	border-right-color: #ff3434;
}

.missed--bottom:before {
	margin-top: -12px;
}
.missed--bottom:after {
	margin-left: -17px;
}
.missed--bottom:before, .missed--bottom:after {
	top: 80%;
	left: 50%;
}
.missed--always:after, .missed--always:before {
	opacity: 1;
	visibility: visible;
}
.missed--always.missed--top:after, .missed--always.missed--top:before {
	-webkit-transform: translateY(-7px);
	-moz-transform: translateY(-7px);
	transform: translateY(-7px);
}
.missed--always.missed--bottom:after, .missed--always.missed--bottom:before {
	-webkit-transform: translateY(7px);
	-moz-transform: translateY(7px);
	transform: translateY(7px);
}
.missed--always.missed--left:after, .missed--always.missed--left:before {
	-webkit-transform: translateX(-7px);
	-moz-transform: translateX(-7px);
	transform: translateX(-7px);
}
.missed--always.missed--right:after, .missed--always.missed--right:before {
	-webkit-transform: translateX(7px);
	-moz-transform: translateX(7px);
	transform: translateX(7px);
}


.remaining, [data-remaining] {
 position: relative;
 display: inline-block;
}

.remaining:before, .remaining:after, [data-remaining]:before, [data-remaining]:after {
	position: absolute;
	z-index: 1000000;
	pointer-events: none;
	border-radius:2px;
}
.remaining:before, [data-remaining]:before {
	content: '';
	position: absolute;
	background: transparent;
	border: 7px solid transparent;
	z-index: 1000001;
}
.remaining:after, [data-remaining]:after {
	content: attr(data-remaining);
	background: #ffc30e;
	color: white;
	padding: 8px 5px;
	font-size: 10px;
	line-height: 1px;
	white-space: nowrap;
	-webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5);
	box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5);
	text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
}

.remaining--top:before {
	border-top-color: #ffc30e;
}
.remaining--bottom:before {
	border-bottom-color: #ffc30e;
}
.remaining--left:before {
	border-left-color: #ffc30e;
}
.remaining--right:before {
	border-right-color: #ffc30e;
}

.remaining--bottom:before {
	margin-top: -12px;
}
.remaining--bottom:after {
	margin-left: -17px;
}
.remaining--bottom:before, .remaining--bottom:after {
	top: 80%;
	left: 50%;
}
.remaining--always:after, .remaining--always:before {
	opacity: 1;
	visibility: visible;
}
.remaining--always.remaining--top:after, .remaining--always.remaining--top:before {
	-webkit-transform: translateY(-7px);
	-moz-transform: translateY(-7px);
	transform: translateY(-7px);
}
.remaining--always.remaining--bottom:after, .remaining--always.remaining--bottom:before {
	-webkit-transform: translateY(7px);
	-moz-transform: translateY(7px);
	transform: translateY(7px);
}
.remaining--always.remaining--left:after, .remaining--always.remaining--left:before {
	-webkit-transform: translateX(-7px);
	-moz-transform: translateX(-7px);
	transform: translateX(-7px);
}
.remaining--always.remaining--right:after, .remaining--always.remaining--right:before {
	-webkit-transform: translateX(7px);
	-moz-transform: translateX(7px);
	transform: translateX(7px);
}
/*Jay Naik-Till this*/
#poi_status_container {
    display:flex;
    position: absolute;
    right: 100px;
    top: 62px;
    z-index: 1;
}

#poi_status_container span {
  	display: inline-block;
    width: 60px;
    height: 40px;
    text-align: center;
    cursor: pointer;
}

span.poi-status div {
	color: white;
	font-weight: 550;
    height: 20px;
}

span.poi-status div.status-count {
	padding-top: 3px;
    height: 20px;
}

span.poi-status div.status-type {
    height: 17px;
}

.status-count {
	font-size: 16px;
}

.status-type {
	font-size: 12px;
}
.tnkvate_amb_filter,.tnkvate_amb_filter *{
    box-sizing: border-box;
}
.tnkvate_amb_filter{
	position: absolute;
    right: calc(100% + 20px);
    width: 300px;
    background: #FFF;
    padding: 5px;
    border-radius: 3px;
    box-shadow: 0 0 5px rgb(0 0 0 / 25%);
    text-align:center;
    top:62px;
	right: 110px;
    z-index: 5;
}
.tnkvate_amb_trip_box,.tnkvate_amb_road_box{
	display: grid;
    grid-template-columns: repeat(3,1fr);
}
.tnkvate_amb_filter > div + div{
	margin-top:5px;
}
.tnkvate_amb_item_value{
	font-size:12pt;
}
.tnkvate_amb_box{
	padding:2px 0px;
	position:relative;
}
.tnkvate_amb_box,.tnkvate_amb_box *{
	cursor:pointer;
}
.tnkvate_amb_box[data-status='on']{
	color:#045800;
	background-color: rgb(81 181 76 / 20%);
}
.tnkvate_amb_box[data-status='off']{
	color:#f00;
	background-color: rgb(181 76 76 / 20%);
}
.tnkvate_amb_box[data-status='all']{
	color:#000;
	background-color: rgb(162 162 162 / 20%);
}
.tnkvate_amb_box[data-status='on'].active:after,
.tnkvate_amb_box[data-status='off'].active:after{
	position:absolute;
	content:" ";
	bottom:0px;
	left:0px;
	right:0px;
	height:1px;
	background-color:#444;
}
.result-grid{
	display:grid;
	grid-template-columns: 26px auto auto 1fr auto;
    padding: 5px 10px;
    line-height: 1.4;
    box-sizing: border-box;
	grid-column-gap: 10px;
	font-size: 16px;
	overflow:hidden;
}
.result-grid *{
	box-sizing: border-box;
}
.result-grid,.result-grid *{
	cursor:pointer;
}
.result-grid[data-cursor='false'],.result-grid[data-cursor='false'] *{
	cursor:not-allowed;
}
.rg-icon-result{
	display: flex;
	display: -webkit-flex;
    align-items: center;
    justify-content: center;
}
.rg-icon-result img{
	max-height:24px;
	max-width:24px;
}
.rg-cname-result{
    font-size: 14px;
    color: #313131;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: flex-end;
    color: #6d6d6d;
}
.rg-no-result,.rg-name-result{
	display: flex;
	display: -webkit-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    position:relative;
}
.rg-no-result > div,.rg-name-result > div,.rg-cname-result > div{
	overflow: hidden;
    white-space: nowrap;
    width:100%;
    text-overflow: ellipsis;
}
.rg-name-result:before{
	content:"[";
}
.rg-name-result:after{
	content:"]";
}
.rg-name-result[data-length='0']:before,.rg-name-result[data-length='0']:after{
	content:"";
}
.result-grid + .result-grid{
	border-top:1px solid #f5f5f5;
}
.main-container {
    position: fixed;
    height: 100%;
    width: 300px;
    box-shadow: 0px 0px 4px 0px #333333;
}

.top-container {
    width: 100%;
    height: 159px;
}

.bottom-container {
    width: 100%;
    height: calc(100% - 159px);
    overflow: auto;
    overflow-x: hidden;
}

.sticky {
    position: fixed;
    top: 0px;
    width: 300px;
}

#myHeader {
    z-index: 1;
    background-color: #FFFFFF;
}

.head {
    height: 45px;
    border-bottom: 1px solid #CDD0D4;
}

.image1 {
    width: 243px;
    height: 45px;
    display: inline-block;
}

.vehicle {
    margin-left: 5px;
    margin-top: 5px;
}

.image2 {
    display: inline-block;
}

.cancel {
    margin-bottom: 5px;
}

.date-picker {
    display: flex;
    margin-top: 10px;
    margin-left: 5px;
    margin-right: 5px;
}

.rect1 {
    width: 114px;
    height: 55px;
    border: 1px solid #0080DB;
    border-radius: 3px;
    box-sizing: border-box;
}

.rect2 {
    width: 114px;
    height: 55px;
    border: 1px solid #0080DB;
    border-radius: 3px;
    box-sizing: border-box;
}

.line1 {
    height: 0;
    width: 62px;
    border: 1px dashed #0080DB;
    margin-top: 30px;
}

.rect1-line1 {
    position: absolute;
    border: 1px solid #0080DB;
    width: 35px;
    height: 0px;
    transform: rotate(90deg);
    margin-top: 25px;
    left: 25px;
}

.rect2-line2 {
    position: absolute;
    border: 1px solid #0080DB;
    width: 35px;
    height: 0px;
    transform: rotate(90deg);
    margin-top: 25px;
    margin-left: 19px;
}

.calender1 {
    position: absolute;
    margin: 17px 10px 18px 10px;
}

.calender2 {
    position: absolute;
    margin: 17px 10px 18px 10px;
}

.rect1-date1 {
    position: absolute;
    left: 59px;
    line-height: 34px;
    font-style: bold;
    font-weight: 600;
    font-size: 11px;
    color: #0080DB;
}

.rect2-date1 {
    position: absolute;
    left: 237px;
    font-style: bold;
    font-weight: 600;
    font-size: 11px;
    line-height: 34px;
    color: #0080DB;
}

.rect1-time1 {
    position: absolute;
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 15px;
    color: #0080DB;
    left: 59px;
    line-height: 71px;
}

.rect2-time1 {
    position: absolute;
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 71px;
    color: #0080DB;
    left: 236px;
}

.line2 {
    width: 290px;
    height: 0px;
    opacity: 0.5;
    border: 1px solid #0080DB;
    margin: 5px 5px 0px 5px;
}

.trip-data {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 10px 5px 0px 5px
}

.trip-data>.trip-data-item {
    flex: 15%;
    margin: 0;
}

.trip-value {
    font-style: bold;
    font-weight: bold;
    font-size: 11px;
    line-height: 19px;
    color: #0080DB;
    text-align: center;
    margin-left: 5px;
}

.trip-label1 {
    font-style: normal;
    font-weight: normal;
    text-align: center;
    font-size: 11px;
    line-height: 19px;
    color: #0080DB;
    margin-left: 2px;
}

.km-value {
    font-style: bold;
    font-weight: bold;
    font-size: 11px;
    line-height: 19px;
    color: #0080DB;
    margin-left: 10px;
}

.km-label1 {
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 19px;
    color: #0080DB;
    margin-left: 2px;
}

.time-value {
    font-style: bold;
    font-weight: bold;
    font-size: 11px;
    line-height: 19px;
    color: #0080DB;
    margin-left: 10px;
}

.time-label1 {
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 19px;
    color: #0080DB;
    margin-left: 2px;
}

.time-value1 {
    font-style: bold;
    font-weight: bold;
    font-size: 11px;
    line-height: 19px;
    color: #0080DB;
    margin-left: 3px;
}

.time-label2 {
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 19px;
    color: #0080DB;
    margin-left: 2px;
}

.alert-value {
    font-style: bold;
    font-weight: bold;
    font-size: 11px;
    line-height: 19px;
    color: #0080DB;
    margin-left: 10px;
}

.alert-label1 {
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 19px;
    color: #0080DB;
    margin-left: 2px;
}

.blue-block-container {
    width: 100%;
    height: 40px;
    margin: 0;
}

.blue-block {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 30px;
    background: #0080DB;
    left: 5px;
    border-radius: 3px;
}

.date-label {
    width: 100%;
    height: 19px;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 30px;
    color: #FFFFFF;
    margin-left: 5px;
    margin-top: 10px;
}

.blue-block-line {
    width: 270px;
    height: 0px;
    opacity: 0.5;
    border: 1px solid #FFFFFF;
    margin-top: 13px;
    margin-left: 10px;
}

.blue-block-data-container {
    width: 100%;
    height: 42px;
    margin: 0;
}

.blue-block-data {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 0px;
    height: 42px;
}

.blue-block-data>.blue-block-data-item {
    margin: 0;
}

.trip-value1 {
    font-style: bold;
    font-weight: bold;
    font-size: 14px;
    line-height: 19px;
    color: #FFFFFF;
    margin-left: 10px;
}

.trip-label2 {
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 19px;
    color: #FFFFFF;
}

.km-value1 {
    font-style: bold;
    font-weight: bold;
    font-size: 14px;
    line-height: 19px;
    color: #FFFFFF;
}

.km-label2 {
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 19px;
    color: #FFFFFF;
}

.time-value2 {
    font-style: bold;
    font-weight: bold;
    font-size: 14px;
    line-height: 19px;
    color: #FFFFFF;
}

.time-label3 {
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 19px;
    color: #FFFFFF;
}

.time-value3 {
    font-style: bold;
    font-weight: bold;
    font-size: 14px;
    line-height: 19px;
    color: #FFFFFF;
}

.time-label4 {
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 19px;
    color: #FFFFFF;
}

.alert-value1 {
    font-style: bold;
    font-weight: bold;
    font-size: 14px;
    line-height: 19px;
    color: #FFFFFF;
}

.alert-label2 {
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 19px;
    color: #FFFFFF;
}

.trip-container {
    width: 100%;
    margin: 0;
    display: block;
}

.trip-block {
    width: 290px;
    height: 204px;
    background: #F3F4F6;
    margin-left: 5px;
    margin-top: 5px;
    position: relative;
}

.trip-block-date {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 0px;
    height: 40px;
}

.trip-block-date>.trip-block-date-item {
    margin: 0px;
}

.index {
    background: #009432;
    border: 2px solid #ffffff;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    font-style: normal;
    font-weight: bold;
    align-items: center;
    text-align: center;
    color: #FFFFFF;
    margin-left: 5px;
}

.time-label5 {
    font-style: bold;
    font-weight: bold;
    font-size: 14px;
    line-height: 19px;
    color: #333333;
}

.duration-value {
    white-space: nowrap;
    width: 63px;
    height: 19px;
    font-style: bold;
    font-weight: 900;
    font-size: 14px;
    line-height: 19px;
    text-align: right;
    color: #333333;
}

.duration-label1 {
    white-space: nowrap;
    width: 63px;
    height: 19px;
    font-size: 12px;
    line-height: 19px;
    text-align: right;
    color: #333333;
}

.duration-value2 {
    white-space: nowrap;
    width: 63px;
    height: 19px;
    font-style: bold;
    font-weight: 900;
    font-size: 14px;
    line-height: 19px;
    text-align: right;
    color: #333333;
}

.duration-label2 {
    white-space: nowrap;
    width: 63px;
    height: 19px;
    font-size: 12px;
    line-height: 19px;
    text-align: right;
    color: #333333;
}

.trip-block-location {
    height: 60px;
    margin: 0px;
}

.start-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    margin-top: 7px;
    margin-left: 10px;
    border-radius: 50%;
    background: #34C759;
}

.start-dot-label {
    position: absolute;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 240px;
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    color: #333333;
    top: 45px;
    left: 35px;
}

.line-3 {
    position: absolute;
    width: 20px;
    height: 0px;
    margin-top: 28px;
    margin-left: 4px;
    border: 1px dashed #CACACA;
    transform: rotate(90deg);
}

.end-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    margin-top: 40px;
    margin-left: 10px;
    border-radius: 50%;
    background: #f52906;
}

.end-dot-label {
    position: absolute;
    width: 240px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    color: #333333;
    top: 76px;
    left: 35px;
}

.line-4 {
    position: absolute;
    width: 258px;
    height: 0px;
    margin-top: 0px;
    margin-left: 13px;
    border: 1px solid #DDDDDD;
}

.trip-block-distance {
    height: 49px;
    margin-left: 13px;
    margin-right: 13px;
}

.trip-label-container {
    width: 100%;
    margin-top: 10px;
}

.trip-label {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}

.trip-label>.trip-label-items {
    margin: 0;
    text-align: center;
}

.distance-label {
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    color: #333333;
}

.max-speed-label {
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    color: #333333;
}

.avg-speed-label {
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    color: #333333;
}

.alert-label3 {
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    color: #333333;
}

.trip-values-container {
    width: 100%;
    height: 34px;
}

.trip-values {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}

.trip-values>.trip-values-items {
    margin: 0;
    text-align: left;
}

.distance {
    margin-left: 8px;
    font-style: normal;
    font-weight: bold;
    font-size: 12px;
    color: #333333;
}

.distance1 {
    font-size: 11px;
    color: #333333;
}

.max-speed {
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    color: #333333;
}

.max-speed1 {
    font-size: 11px;
    color: #333333;
}

.avg-speed {
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    color: #333333;
}

.avg-speed1 {
    font-size: 11px;
    color: #333333;
}

.alert-3 {
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    color: #333333;
}

.line-5 {
    position: absolute;
    width: 258px;
    height: 0px;
    border: 1px solid #DDDDDD;
    margin-left: 13px;
}

.trip-driver {
    height: 45px;
}

.driver-icon {
    position: absolute;
    width: 20px;
    height: 20px;
    margin-top: 10px;
    margin-left: 10px;
}

.driver-name {
    position: absolute;
    text-overflow: ellipsis;
    overflow: hidden;
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    color: #333333;
    left: 45px;
    line-height: 40px;
}

.playback-btn {
    margin-left: 245px;
    margin-top: 10px;
    position: absolute;
    height: 25px;
    width: 25px;
}

.icon-navigation {
	    background-image: url(../images/navigation.png);
	    display: block !important;
	    width: 8%;
	    background-size: 12px 12px;
	    background-repeat: no-repeat;
	    background-position: center center;
	}
	
	
.icon-navigation1 {
	    background-image: url(../images/navigation.png);
	    display: block !important;
	    width: 15%;
	    background-size: 12px 12px;
	    background-repeat: no-repeat;
	    background-position: center center;
	}