@font-face {
    font-family: 'CalibriRegular';
    src: url('../fonts/calibri_0.eot');
    src: url('../fonts/calibri_0.eot') format('embedded-opentype'),
         url('../fonts/calibri_0.woff') format('woff'),
         url('../fonts/calibri_0.ttf') format('truetype'),
         url('../fonts/calibri_0.svg#CalibriRegular') format('svg');
    font-weight: normal;
	font-style: normal;
}
@font-face {
    font-family: 'SignikaSemibold';
    src: url('../fonts/signika-semibold.eot');
    src: url('../fonts/signika-semibold.eot') format('embedded-opentype'),
         url('../fonts/signika-semibold.woff') format('woff'),
         url('../fonts/signika-semibold.ttf') format('truetype'),
         url('../fonts/signika-semibold.svg#SignikaSemibold') format('svg');
}

// retina.less
@highdpi: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)";

.at2x(@path, @w: auto, @h: auto) {
  background-image: url(@path);
  @at2x_path: ~`@{path}.replace(/\.\w+$/, function(match) { return "@2x" + match; })`;

  @media @highdpi {
    background-image: url("@{at2x_path}");
    background-size: @w @h;
  }
}


@bgColor : #1d0a28;
@txColor : #FFF;
@fontFamily : 'CalibriRegular', Arial, Helvetica, sans-serif;

.bt{ color : #000; }
.setTransform(@trans){
	-webkit-transform: @trans;
   -moz-transform: @trans;
   -o-transform: @trans;
   -ms-transform: @trans;
   transform: @trans;
}
.setTransition(@trans){
	-webkit-transition : @trans;
   -moz-transition : @trans;
   -o-transition : @trans;
   -ms-transition : @trans;
   transition : @trans;
}
.setTransDelay(@delay){
	-webkit-transition-delay: @delay;
   -moz-transition-delay: @delay;
   -o-transition-delay: @delay;
   -ms-transition-delay: @delay;
   transition-delay: @delay;
}
.setOpac(@opac){
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=~@{opac})";
   filter: alpha(opacity=@opac);
   opacity: @opac;
}
.border-radius (@radius) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  -ms-border-radius : @radius;
  -o-border-radius : @radius;
  border-radius: @radius;
}
.box-shadow (@x: 0; @y: 0; @blur: 1px; @color: #000) {
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
  -ms-box-shadow : @arguments;
  -o-box-shadow : @arguments;
  box-shadow: @arguments;
}
.box(@width:100%; @height : auto; @boxColor : Transparent){
	width: @width;
	height : @height;
	background-color: @boxColor;
}
.makeThumbnail(@thumbBg : #eb6822; @w ; @h; @bgImg){
	background-color : @thumbBg;
	width : @w;
	height : @h;
	background-position : center center;
	.at2x(@bgImg, 32px, 32px);
	background-repeat:no-repeat;
	display:block;
}
.setAbsDiv(@w:auto;@h:auto;@t:auto;@r:auto;@b:auto;@l:auto;@z:1){
	position: absolute;
	width: @w;
	height : @h;
	top : @t;
	right : @r;
	bottom: @b;
	left: @l;
	z-index: @z;
}
.smBox(@bg){
	float: left;
	height: 8px;
	width: 8px;
	background: @bg;
	margin: 0px 10px 0 0;
}

body,html {
    background : @bgColor;
	background-size: cover;
	height : 100%;
	color  : @txColor;
	font-family : @fontFamily;
}
a { outline:none !important; }
a:hover { text-decoration:none; }
textarea:focus, input:focus{ outline: none !important; }
.row {  margin-right: 0px;  margin-left: 0px; }


.header{
	width:100%;
	height:34px;
	float: left;
	background-color : @bgColor;
	z-index: 1029;
	min-height: 20px;
}
.dashboard_wrap {
	float: left;
	width: 97.6%;
	margin-left: 2%;
}
#dashboard {
  	min-height: 100%;
  	margin-bottom: -30px;
  	float: left; 
}
#dashboard:after {
	content: "";
 	display: block;
}
#footer, #dashboard:after {
  	height: 30px; 
}
#footer{
	background: #191b1d;
	color: #fff;
	text-align: center;
	width: 100%;
	font-size: 14px;
	height: 30px;
	font-weight: bold;
	float: left;
	line-height: 30px;
	margin-top: -30px;
    position:relative;
    z-index:9999999;
}
.logo{
	font-size : 1.6em;
	float : left;
	margin-left: 5px;
	color: #FFF;
	margin-top: 0px;
	&:hover {
		cursor: pointer;
	}
}

.userInfo{
	float:right;
	width:auto;
}
.logout{
	.makeThumbnail(#eb6822,35px,35px,"../images/ic_logout.png");
	float: right;
}
.userStatus{
	span{
		width: 100%;
		clear: both;
		text-align: left;
		float: left;
		padding:4px 10px 0 10px;
		font-size: 14px;
	}
	span.uname{
		font-size:18px;
	}
}
.userImg{
	float: right;
	border: 2px solid #fff;
}
#dashboard{
	width: 100% !important;
	float: left;
	position: relative;
	margin: 0;
	padding: 30px 0 0 0;
}
.tiles(@w; @h; @bColor){
	width : @w;
	height : @h;
	background : @bColor;
	background-repeat : no-repeat;
	background-position: center;
	background-size: cover;
	padding : 10px;
	position:relative;
	float: left;
	margin : 7px 1%;
	overflow: hidden;
}
.tbox{
	> img{
		margin:0 0 0 10px;
	}
	span{
		position:relative;
		float:right;
		font-size:42px;
		color:#fff;
		width: 50%;
		text-align: left;
	}
	span.counts
	{
		text-align: right;
	}
	> div{
		.setAbsDiv(90%,auto,auto,auto,10px,20px,1);
		color:#fff;
		font-size:18px;
	}
	span.comName{
		font-size:24px;
	}
	.play{
		.setAbsDiv(30px,100%,0,0,auto,auto,2);
		background: rgba(0,0,0,0.6);
	}
	.play img{
		margin: 60px 5px 0 7px;
		float:left;
	}
}
.alerts{
	.tiles(33%,140px,#eb6822);
}
.menuItems{
	.tiles(33%,140px,"Transparent");
	margin-top: -150px;
	padding: 0 !important;
}
.poi{
	.tiles(15.5%,140px,#ce2135);
}
.geofence{
	.tiles(15.5%,140px,#ce2135);
}
.map{
	.tiles(45%,294px,url(../images/map.jpg));	
	clear : none !important;
}
.userSetting{
	.tiles(15%,140px,#eb6822);		
}
.routerM{
	.tiles(15%,140px,#eb6822);			
}
.vehicleM{
	.tiles(23%,140px,#eb6822);				
}
.transportation{
	.tiles(23%,140px,url(../images/transportation.jpg));	
}
.fleetStatus{
	.tiles(47%,140px,#0082b4);
	.lBox{
		width: 48%;
		float: left;
		position: relative;
		height: 100%;
		padding: 0;
		div.tileName{
			.setAbsDiv(100%,auto,auto,auto,0,0,1);
			color: #fff;
			font-size: 18px;
		}
	}
	.statusBox{
		width: 48%;
		float: left;
		position: relative;
		margin: 10px 0 0 0;
		div.statusLine{
			width: 100%;
			float: left;
			height: auto;
			span{
				width: 100%;
				font-size: 14px;
				color: #fff;
			}
			div.progress{
				width: 90%;
				float: left;
				margin: 3px 0;
				position: relative;
				border-radius: 5px;
				height:10px;
				> div{
					.setAbsDiv(auto,100%,0,auto,auto,0,1);
					border-radius: 5px;
				}
				div.on{
					width: 30%;
					background-color: #4bcb3f;
				}
				div.off{
					width: 20%;
					background-color: #c72525;
				}
				div.hold{
					width: 50%;
					background-color: #e7ed10;
				}
			}
		}
	}	
}
.reportStat{
	.tiles(31%,140px,#0082b4);				
}
.techplus{
	.tiles(31%,140px,#ce2135);	
}
.playback{
	.tiles(31%,140px,#ce2135);	
}


/* Tile hover effect */
.tbox .mask {
   .setOpac(0);
   .setTransition(all 0.4s ease-in-out);
   .setAbsDiv(100%,100%,0,auto,auto,0,1);
   background-color: rgba(0,0,0, 0.7);
   img{
		.setAbsDiv(0,auto,10px,auto,auto,50%,1);
   }
   span.tileTitle{
		.setAbsDiv(200px,auto,150px,auto,auto,50%,1);
		font-size: 16px;
		text-align: center;
		line-height: 30px;
		margin-left: -100px;
		opacity: 1;
	}
	p {
	   .setTransform(translateY(100px));
	   .setOpac(0);
	   .setTransition(all 0.2s linear);
	   .setAbsDiv(100%,auto,auto,auto,-10px,auto,1);
	   text-align: center;
	   color: #fff;
	   padding: 5px 2%;
	   line-height: 16px;
	   font-size: 13px;
	}
}
.tbox .mask.blue{
	background-color: rgba(0,130,180, 0.7);
	border:5px solid #0082b4;
	.setOpac(1);
}

.tbox:hover 
{
	.mask {
    	.setOpac(1);
    }
    span{
    	.setOpac(0);
    }
    span.tileTitle{
		.setOpac(1);
	}
	> img{
		display:none;
	}
	.tileName,.progress{
		display: block;
		.setAbsDiv(120px,auto,10px,auto,auto,50%,2);
		.setTransition(all 0.5s linear);
		text-align: center;
		margin-top: 34px;
		margin-left: -65px;
		font-size: 14px;
	}
	p
	{
	   .setOpac(1);
	   .setTransform(translateY(0px));
	   .setTransDelay(0.1s);
	   background-color: #000;
	}
	img{
		.setAbsDiv(30px,auto,10px,auto,auto,50%,1);
		.setTransition(all 0.5s linear);
		margin-left: -20px;
	}
}


.map:hover{
	img{
		top:100px;
	}
	span.tileTitle{
		top:150px;
	}
}

.no_mask{
	 > img {
		.setAbsDiv(auto,auto,80px,auto,auto,50.2%,1) !important;
		margin-left : -20px;
	 }

	span.tileTitle{
		.setOpac(1);
	 }
}

/* Live Tracking Page */
.live_tracking{
	padding: 0 !important;
}
.map_setting{
	padding : 0 !important;
	background : #f0f0f0;
	width: 260px;
}
.secTitle{
	width: 100%;
	background: Transparent;
	font-size: 20px;
	font-weight: bold;
	padding: 8px;
	position: absolute;
	top: 3px;
	left: 0;
	float: left;
	a{
		float : right;
		margin: 0 10px 0 0;
		background: rgba(0,0,0, 0.5);
		color: #FFF;
		padding: 3px 10px;
		.border-radius(3px);
		font-size:  14px;
		font-weight: normal;
		text-decoration: none;
	}
	span{
		background: rgba(0,0,0, 0.5);
		color: #FFF;
		padding: 3px 10px;
		.border-radius(3px);
		font-size: 14px;
		font-weight: normal;
	}
}
.secRTitle{
	width: 100%;
	font-size: 20px;
	font-weight: bold;
	padding: 8px;
	float: left;
	background: #191B1D;
	a{
		float : right;
		margin: 0 0 0 0;
		color: #FFF;
		padding: 3px 0px;
	}
}

.mapView{
	float: left;
	width: 100%;
	min-height: 200px;
	height: auto;
	overflow: hidden;
}
.mapView img{
	width: 100%;
	height: auto;
}
.mapOption{
	float: left;
	width: 100%;
	padding: 15px;
	border-bottom: 1px solid #a1a1a1;
	background: #f0f0f0;
	h4{
		color : #1c3872;
		font-size: 14px;
		width: 80% !important;
		float: left;
		margin: 0;
		background: Transparent;
		box-shadow: 0 0 0 rgba(0, 0, 0, 0);
		padding: 0;
	}
	.allOpt{
		width: 20%;
		float: left;
		div{
			float: left;
			color: #000;
			width: auto;
			margin-right: 10px;
		}
		div.styledCheckbox{
			float: left;
			margin: 2px 0 0 -3px;
		}
	}
	.mapOpt{
		width: 100%;
		float: left;
		color: #000;
		margin: 5px 0;
		div.styledCheckbox{
			float: left;
			margin:1px 5px 0 0;
		}
		div.checkbox{
			padding: 0;
			margin: 0;
		}
	}
}
.chkTxt{
	cursor: pointer;
}
.combobx{
	width: 100%;
	padding: 5px 10px 5px 5px;
	border:1px solid #a0a0a0 !important;
	color: #000 !important;
	background: #FFF !important;
}
.selectVehicle{
	float: left;
	width: 100%;
	.vehicleHead{
		width: 100%;
		float: left;
		background: #1c3872;
	}
	.vehicleTitle{
		width: 40%;
		float: left;
		font-size: 18px;
		color: #FFF;
		font-weight: bold;
		padding: 5px 10px;
	}
	.vSearch{
		width: 60%;
		float: left;
		input[type="text"]{
			width: 60%;
			margin: 5px 5px 0 0;
			float: right;
		}
		.btnSearch{
			float: right;
			margin: 4px 10px 0 0;
			height: 28px;
		}
	}
	.vehicleList{
		float:left;
		width: 100%;
		padding: 0;
		min-height: 200px;
		.vTable{
			margin-bottom:0;
			overflow : auto;
			thead{
				background: #ebebeb;
				color: #1c3872;
			}
			tbody{
				background: #FFF;
				color: #666;
			}
			th{
				text-align: left;
			}
			td{
				text-align: left;
				/*text-transform: uppercase;*/
			}
			a{
				text-decoration: underline;
				/*text-transform: uppercase;*/
			}
		}
	}
}
.btnSearch{
	background: #081e4b;
	span{
		color:#fff;
	}
}
.off{
	.smBox(#ff3725);
}
.on{
	.smBox(#78c200);
}
.halt,.hold{
	 .smBox(#FF6600);	
}
.smTxt{
	font-size: 10px;
	float: left;
}
.mapSettingBtn{
	left:-61px;
	top:150px;
	position: absolute;
	z-index: 10;
	color : #FFF;
	background-color: rgba(0,0,0,0.8);
	text-decoration: none;
	padding: 3px 12px;
	border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

/* Vehicle Manager Screen */
.chkBox{
	float : left;
	margin: 1px 5px 0 0;
}
.vmAction{
	float: right;
	width: auto;
	.btn{
		margin-right: 10px;
	}
	.popover{
		max-width: 170px;
	}
	.btnPopover{
		width: 140px;
	}
}
.modal-header{
	background: #468dc8;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	.close{
		color : #fff;
		.setOpac(1);
	}
}
.modal-body{
	padding-bottom: 0;
	.ppLbl{ 
		font-weight: bold;
		color: #000;
	}
	h5{
		color:#000;
		font-weight: bold;
	}
	.ppTable{
		color:#000;
		padding: 0;
		height: 250px;
		span.lbl{
			float: left;
		}
		a.del{
			float: right;
			.setOpac(1);
		}
	}
	.styledCheckbox{
		float: left;
		margin: 1px 5px 0 0;
	}
	.btnAdd{
		margin: 120px 0 0 0;
	}
	.listBx{
		height: 205px;
		overflow-y: auto;
	}
	textarea{
		width: 100%;
		height: 150px;
	}
}
.optVehicle(@url,@hurl,@bgPos){
	background: url(@url) no-repeat;
	background-position: @bgPos;
	background-size: 24px;
	&:hover{
		background: url(@hurl) no-repeat;
		background-position: @bgPos;
		background-size: 24px;
	}
}

@selVehicle : "../images/ic_car.png";
@bgvpos : 50px;
.selectedVeh{
	.optVehicle(@selVehicle,@selVehicle,@bgvpos);
}
.optCar{
	.optVehicle("../images/ic_car.png","../images/ic_car_wh.png",30px);
}
.optBus{
	.optVehicle("../images/ic_bus.png","../images/ic_bus_wh.png",30px);	
}
.optTruck{
	.optVehicle("../images/ic_truck.png","../images/ic_truck_wh.png",40px);		
}

.rghTxt{ text-align : right;}
.greyBg{ 
	background : #f8f8f8; 
	padding: 10px;
	.border-radius(5px); 
	border : 1px solid #CCC;
	.ppLbl{ margin-bottom : 0;}
	.blueTxt{ color : #418bd3; }
}

/* Login Screen */
.loginBody{
	background: url("../images/bg.jpg") no-repeat;
	background-size: cover;
	background-position: center;
	padding-top: 80px;
	background-color: #5778AE;
	.header{
		background: #FFF;
		border-bottom: 4px solid #17284c;
	}
	.logo{
		color: #4f73a9;
		font-weight: bold;
		font-family: 'SignikaSemibold';
		margin: -4px 0 0 0;
		span{
			color : #323f56;
		}
	}
}
.login-body{
	padding: 15px 30px;
	.border-radius(0px) !important; 
}
.loginTitle{
	font-size: 24px;
	color: #555557;
	padding: 0 0 10px 0;
	border-bottom: 1px solid #CCC;
}
.btn_contact{
	margin: 2px 0 0 0;
	float: right;
}
.loginFooter{
	background: rgba(255,255,255,0.1) !important;
}
.input-group-addon
{
    background-color: rgb(50, 118, 177);
    border-color: rgb(40, 94, 142);
    color: rgb(255, 255, 255);
    .border-radius(0px) !important; 
    padding: 6px 16px;
}
/*
.form-control:focus
{
    background-color: rgb(50, 118, 177);
    border-color: rgb(40, 94, 142);
    color: rgb(255, 255, 255);
}
*/
.form-signup input[type="text"],.form-signup input[type="password"] { 
	border: 1px solid rgb(50, 118, 177);  
	height: 50px;  
	.border-radius(0px) !important; 
}
.btnSignIn{
	height: 40px;
	padding: 10px 0 0 0;
	.border-radius(0px) !important; 
}
.forgotPwd{ 
	width: 100%; 
	float: left;
	color: #5e676b;
	font-weight: bold;
	margin-top: 10px;
}

/* POI Page */
.POI_body{
	padding: 0 !important;
}
.POI_title{
	width: 100%;
	background: #1d2123;
	font-size: 20px;
	font-weight: bold;
	padding: 8px;
	float: left;
	a{
		float : right;
		margin: 0 10px 0 0;
		color: #FFF;
		padding: 3px 10px;
		
		font-size:  16px;
		font-weight: bold;
		text-decoration: none;
	}
	span{
		color: #FFF;
		font-size: 20px;
		font-weight: bold;
	}

}
.POI_view{
	width: 100%;
	float: left;
	position: relative;
	overflow: hidden;
}
.POI_view img{
	width: 100%;
}
.ic_POI{
	float:left;
	margin: 5px 5px 0 0;
}
.POI_opt{
	width: 100%;
	float: left;
	.btn-sm{ padding: 5px 4px;}
	.glyphicon:empty{ width: auto;}
}
.POI_opt ul{
	float: left;
	margin : 0;
	padding: 10px 0;
	width: 100%;
	border-bottom:1px solid #a1a1a1;
}
.POI_opt ul li{
	width: 100%;
	float: left;
	line-height: 20px;
	padding: 4px;
	position: relative;
	.styledCheckbox{
		float: left;
		margin:2px 0 0 0;
	}
	span{
		color : #000;
		float : left;
		width : 180px;
		padding: 0 4px;
	}
	&:hover{
		line-height: 20px;
	}
}
.POI_opt ul li:hover span{
	background: Transparent;
	box-shadow: 0 0 0 rgba(0,0,0,0) !important;
}
.btnCreatePOI{
	width : 220px;
	/* margin: 10px 20px; */
	margin: 10px 20px 45px 20px;
}
.btnPopover{
	width : 210px;
	margin: 5px 0;
}
.POI_popup{
	position: absolute;
	width: 300px;
	top :20px;
	left : 10%;
	background: #FFF;
	padding: 0;
	color : #000;
	border:1px solid #949494;
	height: 115px;
}
.poi_tbl{
	padding:0;
	table{margin-bottom: 0;}
}
.poi_tbl:after{
	content : url("../images/pointedArrow.png");
	background: Transparent;
	position: absolute;
	left: 30%;
	top : 100%;
	margin-top:-1px;
}
.bld{
	font-weight: bold;
}
.map_setting .popover{
	max-width: 240px !important;
}
.popover-title{
	width: 100%;
	.border-radius(0px);
	background: #f7f7f7 !important;
	border-bottom: 1px solid #ededed;
	color : #000 !important;
	font-size: 16px !important;
	
	box-shadow : 0 0 0 rgba(0,0,0,0) !important;
}

.POI_opt .popover{
	max-width: 180px !important;
}

.POI_opt .btnPopover{
	font-size: 13px !important;
	width: 150px !important;
}

.shortMenu{
	position: fixed;
	top: 200px;
	z-index: 999;
	left: 0;
	display: none;
	ul{
		padding: 0;
		margin: 0;
		list-style: none;
	}
	li{
		margin: 5px 0;
		padding: 4px;
		background : #0082B4;
	}
}

/* Menu Panel */
.sidebar{
	height: 100%;
	width: 16px;
	background : rgba(0,0,0, 0.6);
	line-height: 100%;
	position: fixed;
	top:0;
	left: 0;
	z-index: 1028;
}
.sidebar img{
	margin-top: 200px;
	margin-left: 2px;
	width: 12px !important;
}
.sideLeftPanel{
	background-color: #000;
	z-index: 999999;
	position: fixed;
	left: -194px;
	top : 55px;
	height: 100%;
	width: 230px;
}
.sideLeftPanel img{
	width: 24px;
}
.sideLeftPanel ul{
	list-style: none;
	padding: 0;
	margin : 0;
	width: 230px;
	float:  left;
}
.sideLeftPanel ul li{
	float : left;
	width : 100%;
	padding: 0;
	margin: 0;
	border-bottom: 1px solid #400b5f;
	-webkit-transition: all 900ms ease;
	-moz-transition: all 900ms ease;
	-ms-transition: all 900ms ease;
	-o-transition: all 900ms ease;
	transition: all 900ms ease;
}
.sideLeftPanel ul li:hover {
	background-color: #eb6822;
	-webkit-transition: all 900ms ease;
	-moz-transition: all 900ms ease;
	-ms-transition: all 900ms ease;
	-o-transition: all 900ms ease;
	transition: all 900ms ease;
}
.sideLeftPanel ul li a{
	line-height: 40px;
	color : #FFF;
	text-indent: 10px;
}
.sideLeftPanel ul li img{
	float: left;
	margin: 8px 10px;
	background: #0082b4;
	position: absolute;
	right: -4px;
}
.menuTitle{
	font-size: 24px;
	width: 100%;
	float: left;
	margin: 10px 0 0 0;
}
.menuTitle span{
	float: left;
	margin: 2px 0 0 0;
}
.menuTitle img{
	margin: 4px 10px;
	float: left;
	cursor: pointer;
}

.sideRightPanel{
	background-color: #000;
	z-index: 999999;
	position: fixed;
	right: 0px;
	top : 0;
	width: 260px;
	height: 100%;
}
.menuPanel{
	padding-bottom: 20px;
	background : #1D0A28;
	overflow-y: auto;
	float: left;
	ul li a{
		width: 100%;
		float: left;
	}
}

.uname a {
	color: #fff;
}

.dashboard_Btn a {
	margin: 5px 0 0 8px;
}
.db_icon {
	position: absolute;
	right: 6px;
	margin-top: 4px;
	padding-top: 4px;
}
.orange_content {
	background-color: #c04808 !important;
}
.pink_content {
	background-color: #af1123 !important;
}
.blue_content {
	background-color: #005e82 !important;
}
.inner-pading{
  padding-left : 32px;
}

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
	padding: 0;
}

.imgIcon
{
  width:34px;
}



/* ================================================== */
	 /* #Media Queries */
/* ================================================== */

    @media (min-width: 992px) {
      .modal-lg {
        width: 900px;
      }
    }

	@media only screen and (max-width: 1200px) {

	}
		
	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 1024px) {
		
	}
	@media only screen and (max-width: 990px) {
		.modal-body .btnAdd{ margin: 0 !important; }
        .imgIcon{
           width : 32px;
        }
	}
	
	@media only screen and (max-width: 990px) and (max-width: 960px) {
      .imgIcon{
        width : 32px;
      }
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		.item { width: 31%; margin: 10px 1%; }
	 	.item.w2 { width: 31%; }
	 	.modal-body .btnAdd{ margin: -35px 0 0 0 !important; }
        .imgIcon{
          width : 28px;
        }
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {	
		.item { width: 48%; }
	 	.item.w2 { width: 48%; }
	 	.modal-body .btnAdd{ margin: -35px 0 0 0 !important; }
	 	.sticktoL{ float: left !important;}
	 	.loginBody{ padding-top: 30px; }
	 	.dashboard_wrap { float: left; width: 100%; margin-left: 0%; }
        .imgIcon{
          width : 26px;
        }
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		.dashboard_wrap { float: left; width: 100%; margin-left: 0%; }	
		.sidebar { display: none; }
		.sideLeftPanel { left: -230px; }
        .imgIcon{
          width : 24px;
        }
	}
	
	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
	 	.userImg{display: none;}
	 	.logo{font-size: 1.6em;}
	 	.logout{ width: 36px; height:36px; }
	 	.userStatus span.uname{font-size: 14px;}
	 	.userStatus span{ font-size: 12px; }
	 	#simple-menu{ top: 3px; }
	 	#dashboard{ padding-top: 60px; }
	 	.header{ height: 60px; }
	 	.selectVehicle{
		 	.vehicleTitle{width: 100%;}
		 	.vSearch{
		 		width: 100%;
		 		input[type="text"]{
					width: 80%;
					margin: 0 5px 5px 10px;
					float: left;
					border:1px solid #CCC;
				}
				.btnSearch{
					margin: 0 10px 0 0;
				}
		 	}
		 }
		 #footer{ font-size: 12px;}
		 .btn_contact{ margin: 5px 0 0 0; float: right; }
		 .loginBody{
		 	.logo{ font-size: 2.2em;}
		 }
		 .mapView{ min-height:auto;}
		 .selectVehicle{ min-height : auto;}
		 .dashboard_wrap { float: left; width: 100%; margin-left: 0%; }
		 .sidebar { display: none; }
		 .sideLeftPanel { left: -230px; }
          .imgIcon{
            width : 24px;
          }
	}
	
	/* Small Mobile devices */
	@media only screen and (max-width: 420px) {
		.item { width: 48%; margin: 10px 1%; }
	 	.item.w2 { width: 100%; margin: 10px 0 !important; }
        .imgIcon{
          width : 24px;
        }
	}
	
	/* Very Small Mobile devices */
	@media only screen and (max-width: 280px) {
      .imgIcon{
        width : 20px;
      }
	}