BODY { background-image: url(/starnet/images/nothing.gif); overflow: hidden; }

@media print
{
	#container {width: 100%; top: 0px; bottom: 0px; position: absolute; background-color: white;}
	#markerListViewOnlyHolder { display: none; }
}
@media screen  {
	#container { overflow: hidden;width: 100%; top: 40px; bottom: 0px; position: absolute; background-color: white;}
    #mapContainer { bottom: 0px; top: 0px; right: 0px; left: 0px;  position: absolute;  }
	#map-canvas { width: 100%; height: 100%; }
	#map-canvas { display: none;  z-index: 3; position: absolute;}
	#leftContainer {width: 250px; display: none; overflow: hidden;  }
	#directionsContainer, #searchContainer, #editOverlayContainer {  -moz-user-select: none;        -khtml-user-select: none;  -webkit-user-select: none;        -o-user-select: none;user-select: none; background-color: #4285f4; color: white; padding: 5px;position: relative; width: 250px; display: none;  float: left;border-radius: 4px; z-index:400; margin: 5px;}
	#searchContainer { background-color: #008000; color: white; padding: 5px;position: relative; width: 250px; display: none;  float: left;border-radius: 4px; z-index:400; margin: 5px;}
	#markerListContainer {box-sizing: border-box; width: 100%; float:left; overflow: auto; z-index: 99; position: relative; overflow-x: hidden;}
	#editOverlayContainer  { align-items: center; background-color: #ffffff; color: white; padding: 5px;position: relative; width: 250px; display: none;  float: left;border-radius: 4px; z-index:400; margin: 5px;display: none;}
	.cancelMarkerDirections { width: 10px !important; xposition: absolute; right: 0px; cursor: pointer; opacity: 0; top: 0px; bottom: 0px;}
	.cancelMarkerDirections IMG { width: 10px !important; }
	.fromMarkerDiv:hover .cancelMarkerDirections, .toMarkerDiv:hover .cancelMarkerDirections { opacity: 0.8;}
	.fromMarkerDiv .indicatorDiv { background-size: 96px 240px; background-image: url(/go/images/maps/directionsSprite.png); background-position: 0 -48px;margin-top: 2px;margin-bottom: 1px; width: 24px; height: 24px;}
	.toMarkerDiv .indicatorDiv { background-size: 96px 240px; background-image: url(/go/images/maps/directionsSprite.png); background-position: -24px -48px;margin-top: 2px;margin-bottom: 1px; width: 24px; height: 24px;}
	.directionsMarkerHolder { width: 80%; position: relative; }
	.directionsDividerDiv { height: 1px; background-color: #fff3; width: 70%; float: right; margin-right: 40px;}
	.dots { background-repeat: repeat-y;width: 24px; xbackground-position: -48px -24px;background-image: url(/go/images/maps/connector.png); position: absolute; background-size: 13px 26px;; top: 20px; bottom: 20px; left: 9px}
	.vTime { font-style: italic; }
	.vMovement { margin-left: 30px; }
	.batteryDiv { position: absolute; top: 5px; right: 2px;}
	.movingStatusImage { display: inline; }
	#socketStatusDiv { height: 20px; border-radius: 5px; margin: 5px -5px 5px 5px;  text-align: center;}
	#historyDiv { position: absolute; bottom: 0px;  border-top: 1px solid #dedede;  right: 0px; xleft: 210px;}
	#mapContainer { display: none; }
	.access1 { margin-left: 0px; }
	.access2, .access3 { xmargin-left: 210px; }
	.access3x { margin-left: 0px; }
	.historyLocation { height: 20px; float: left; width: 280px; overflow: hidden; }
	.historySpeed { float: left; width: 75px; overflow: hidden; }
	.historyBearing { float: left; width: 120px; }
	.historyBattery { float: left; width: 50px; text-align: center;overflow: hidden;}
	.overlayMoveDiv, .overlayMoveDiv IMG { width: 80px; height: 80px; position : relative;}
	.overlayMoveDivtop { position: absolute; top: 0px; height: 30%; width: 30%; margin: 0% 35%; cursor : pointer;}
	.overlayMoveDivbottom { position: absolute; bottom: 0px; height: 30%; width: 30%; margin: 0% 35%; cursor : pointer; }
	.overlayMoveDivleft { position: absolute; left: 0px; height: 30%; width: 30%; margin: 35% 0%; cursor : pointer;top: 0px;}
	.overlayMoveDivright { position: absolute; right: 0px; height: 30%; width: 30%; margin: 35% 0%; cursor : pointer;top: 0px;}
	.overlayMoveDiv { float: left;}
	.overlayRotateDiv { float: left; xclear: left; margin-left: 10px; margin: 5px 10px; position: relative;  }
	.overlayRotateDiv IMG { width: 23px; cursor: pointer; margin-right: 5px;}
	.overlayRotateDiv IMG:hover { opacity: 0.5;}
	.editOverlayHolder { display: flex; align-items: center; float: left;}
	.overlayRotateDiv DIV { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;}
	.overlayButtonHolder { display: flex; justify-content: center; color: black; float: left; width: 100%; margin-top: 10px;}
	.overlayButtonHolder DIV { border-radius: 4px; margin: 3px; width: auto;  float: left; font-weight: bold; padding: 3px;}
	.overlayButtonHolder DIV:hover { opacity: 0.6; cursor: pointer;}
	.overlaySaveButton { background-color: #50c843; color: white; }
	.overlayCancelButton { background-color: #c0c0c0 }
}
#roadmapIcon { display: none;}
#satelliteIcon, #roadmapIcon { border: 1px solid white; border-radius: 2px; width: 60px; -webkit-box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.61);
-moz-box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.61);
box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.61);}
#mapTypeHolder { z-index: 99; position: absolute; top: 10px; right: 10px; }
.borderLeftHolder { min-height: 250px; width: 250px;box-sizing: border-box; float:left; xpadding: 7px; background: rgba(255,255,255,1); xborder: 1px solid #7B7A7A; xborder-radius: 3px; margin-top: 5px;  margin-left: 2px;}
#markerListContainer, #markerListViewOnlyHolder {  scrollbar-width: thin; box-sizing: border-box; xpadding: 2px; background: rgba(255,255,255,0.8);   xborder: 1px solid #7B7A7A; xborder-radius: 3px; margin: 0px; }
#markerListViewOnlyHolder { float: left; width: 250px; }

.goBackButton {  z-index: 5000; position: relative; width: 194px; padding: 2px; text-align: center; margin: 3px 2px -3px 2px; xborder: 1px solid #aaa; background-color: #8fff83; xborder-radius: 3px; cursor: pointer; font-weight: bold;}
.goBackButton:hover { background-color: #50c843; color: white;}

ul {
    list-style: none;
    padding-left: 0;
}​
@media screen and (max-width: 480px) {

	#leftContainer {width: 50px; }
	.vTime { display: none; }
	.vMovement { display: none; }
	.batteryDiv { display: none;}
	.movingStatusImage { display: none; }
	.dashSpan { display: none;}
	#socketStatusDiv {font-size: 9px; height: 14px; border-radius: 5px; margin: 5px -5px 5px 5px;  text-align: center;}
	#historyDiv { position: absolute; bottom: 0px;  border-top: 1px solid #dedede;  right: 0px; left: 60px;}
	#mapContainer { xmargin-left: 60px; }
	.historyLocation, .historySpeed, .historyBearing, .historyBattery  { display: none; }


}
#mapListDiv { padding-top: 20px; margin: 0 auto; width: 1250px; z-index: 100000;}
#accountsListDiv { display: none;padding-top: 20px; margin: 0 auto; width: 80%; z-index: 100000; font-size: 14px;}

.mapListItem { width: 200px; height: 112px; border: 2px solid #fff;  xborder-radius: 8px; cursor: pointer; text-align: center; font-size: 100px; color: #ccc; line-height: 130px; }
.mapListItemNew { width: 200px; height: 112px; border: 3px dashed #ccc;  xborder-radius: 8px; cursor: pointer; text-align: center; font-size: 100px; color: #ccc; line-height: 105px; }
.mapListHolder:hover { opacity: 0.5; }
.default1 { border: 2px solid rgba(29,130,59,1) !important; }
.editAccounts { width: 200px; height: 112px; background: url(/go/images/maps/users.png) no-repeat; cursor: pointer; background-size: 100px 100px; background-position-x: 50px; background-position-y: 6px; opacity: 0.6; background-color: #eee; border: .1px solid black; }

.mapListHolder {margin-left: 10px; margin-bottom: 10px; float: left; text-align: center; color: #aaa; font-size: 14px; font-weight: bold;}

#iconHolder { margin: 0 0 0 0px; max-height: 250px; overflow-y: auto; overflow-x: hidden; position: relative; height: 250px; padding: 3px;}
.markerContainer { float: left; margin: 0px 3px; z-index: 300; display: flex; min-height: 37px; min-width: 24px; align-items: center;}
.markerContainer IMG { z-index: 300;  margin: 0px auto; max-width: 24px;}

.markerListHolder { position: relative;  display: block; text-shadow: 0 0 3px #fff, 0 0 4px #fff;box-sizing: border-box; font-size: 12px; width: 100%; float: left; cursor: pointer; padding: 2px 0px; xpadding-left: 10px; }
.markerListHolder IMG { margin-right: 3px; width: 18px; height: 18px; vertical-align: middle;}
.markerListAdmin span { padding-right: 20px; }
.markerListHolder:hover { background: #f1f1f1;  }
x.markerListHolder SPAN { padding-right: 10px; }
.markerListHolder .editListImageDiv, .sortLayerImageDiv { display: none; cursor: s-resize;}
.markerListHolder:hover .editListImageDiv, x.layerHeaderHolder:hover .sortLayerImageDiv { display: block; }
.markerListHolder .unconfirmedListImageDiv { float: right; opacity: 0.6; position: absolute; right: 0px; top: 0px; bottom: 0px; display: flex; align-items: center; }
.markerListHeader { background-color: #fff; margin-top: -2px; cursor: pointer; xborder-bottom: 1px solid #333; text-shadow: 0 0 3px #fff, 0 0 4px #fff; box-sizing: border-box; font-size: 11px; width: 195px; position: fixed; float: left; text-align: center; font-weight: bold;  padding: 2px;}

.layerHeaderHolder {position: relative; -moz-user-select: none;        -khtml-user-select: none;        -webkit-user-select: none;        -o-user-select: none;user-select: none; border-top: 1px solid #ececec;  margin: -1px 0px 0px 0px; user-select: none; background-color: #f8f8f8; font-weight: bold; display: block;  text-shadow: 0 0 3px #fff, 0 0 4px #fff;box-sizing: border-box; font-size: 13px; width: 100%; float: left;  padding: 6px; }
.layerHidden { opacity: 0.6; background-color: white;}
.collapsedLayer { background-color: #333; color: white; text-shadow: 0 0 0px #fff, 0 0 0px #fff; font-weight: normal;}
.hideCollapseIcon .expandCollapseImageDiv { display: none; }
.xlayerHeaderHolder DIV { padding-bottom: 2px; float: left; user-select: none;}

.collapsedLayer INPUT { color: white;}
.currentActiveLayer INPUT { color: black;}
#mapName { padding: 5px; xwidth: 100%; xborder-radius: 2px; xborder: 1px solid #ccc; xmargin: 0px; font-size: 16px;}
#mapDescription { margin-bottom: 5px; resize: none;xwidth: 100%; opacity: 0.8;  font-style: italic;padding: 0px 5px 5px 5px; }


#mapNameHolder { margin: 0px 3px 0px 0px; }
#mapNameHolder SPAN { 	text-shadow: 0 0 3px #fff, 0 0 4px #fff;}

.cancelEdit { padding: 2px; text-align: center; margin: 3px 2px 10px 2px; xborder: 1px solid #aaa; background-color: #eee; xborder-radius: 3px; cursor: pointer; font-weight: bold;}
.cancelEdit:hover { background-color: #ddd; }
.addNewMapButton { padding: 2px;  text-align: center; margin: 3px 2px; xborder: 1px solid #aaa; background-color: #8fff83; xborder-radius: 3px; cursor: pointer; font-weight: bold;}
.addNewMapButton:hover { background-color: #50c843; color: white;}
.saveMapButton { padding: 2px; text-align: center; margin: 3px 2px; xborder: 1px solid #aaa; background-color: #8fff83; xborder-radius: 3px; cursor: pointer; font-weight: bold;}
.saveMapButton:hover { background-color: #50c843; color: white; }
.importKMZbutton { padding: 2px; text-align: center; margin: 3px 2px; xborder: 1px solid #aaa;  xborder-radius: 3px; cursor: pointer; font-weight: bold;background-color: #eeff83;}
.importKMZbutton:hover { background-color: #a1b811; color: white; }



#cancelEditShapeButton { display: none; }
#transparencySlider, #strokeSlider { width: 80%; margin-left: 10px; margin-top: 5px;}
.deleteMapButton { padding: 2px; text-align: center; margin: 3px 2px; xborder: 1px solid #c70202; background-color: #ff6c6c; xborder-radius: 3px; cursor: pointer; font-weight: bold;}
.deleteMapButton:hover { background-color: #c70202; color: white; }
.marker-draggable { width: 24px; height: 24px; }

.markerInfoDiv {width: 320px; xheight: 240px; position: relative;}
#infoWindowIcon { position: absolute; display: flex; min-height: 37px; min-width: 24px; align-items: center; max-width: 32px;}
.markerInfoDiv H2 { margin-left: 50px; }
.markerInfoDiv .textInput { border-radius: 2px; border: 1px solid #ccc; width: 218px;}
.textInputShape { border-radius: 2px; border: 1px solid #ccc; width: 108px;}
.markerInfoDiv TEXTAREA { resize: none;border-radius: 2px; border: 1px solid #ccc; width: 218px; height: 34px;}
.markerInfoDiv TD { padding: 2px; }
.iconHeader { font-weight: bold; clear: both; border-bottom: 1px solid #ccc;}
.drawText { line-height: 50px; margin-left: 20px; }
.editShapeTD:hover {background-color: #eee; }

#shapeEditDiv { display: none; border: 1px solid #ccc; border-radius: 3px; padding: 2px; margin-top: 0px; }
.directionsButton { border: 1px solid #ccc; background-color: #65fa73; font-size: 11px;}
.overlayEditButton { cursor: pointer; opacity: 0.7; width: 30px; margin: 2px; }
.overlayListDiv { padding: 3px; border-bottom: 1px dotted #ccc;}
#overlayHolder {  }
#overlayHolder DIV:hover {background-color: #eee;}
.editOverlay { background-color: #eee; border: 1px solid #ccc; border-radius: 3px; padding: 2px; }
.editOverlay:hover { background-color: #eee;  }
#overlayTransparencySlider { width: 100%; float: right; margin-left: 10px; margin-top: 5px;}
#xaddNewOverlay { background-color: #ccc; text-align: center; opacity: 0.2; cursor: pointer; }

#addNewOverlay { text-align: center; padding-top: 5px;box-sizing: border-box;  xposition: absolute; background-color: #eee; bottom: 0px; right: 0px; left: 0px; cursor: pointer; opacity: 0.1 }
#addNewOverlay:hover { opacity: 1; }
#overlayName { xborder: 1px solid #ddd; border-radius: 3px;}


.labels {
     color: white;
	border-radius: 3px;
     background-color: black;
     font-size: 11px;
	font-weight: bold;
     text-align: center;
	padding: 3px;
     white-space: nowrap;
   }
.hiddenLabel { display: none; opacity: 0.0; visibility: hidden; width: 0px; height: 0px;}

.layerRow { position: relative; text-align: center; cursor: pointer; border-radius: 3px; border: 1px solid #ccc; background-color: #eee; padding: 3px; margin: 1px 8px; }
.layerRow:hover { background-color: #ccc; }
.layerCheck { position: absolute; }
.newLayerRow { opacity: 0; }
.newLayerRow:hover { opacity: 1; }


.pickColor { cursor: pointer; position: relative; width: 14px; height: 14px; border: 1px solid #333; border-radius: 3px; float: left; margin: 0px 2px 0px 0px; }
.pickColor:hover {opacity: 0.3; }
#markerColorPicker {  padding: 2px 0px 2px 2px; box-shadow: 0px 0px 5px #888888; background-color: white; z-index: 6000; position: absolute; display: none; float: left; border: 1px solid #333; border-radius: 3px; }
#shapeColorPicker {  padding: 2px 0px 0px 2px; box-shadow: 0px 0px 5px #888888; background-color: white; z-index: 6000; position: relative; float: left; border: 1px solid #333; border-radius: 3px; }
#shapeColorPicker DIV { margin-bottom: 2px; }
.redPicker { background-color: #BF0000; }
.bluePicker { background-color: #060aab; }
.yellowPicker { background-color: yellow; }
.orangePicker { background-color: orange; }
.burntOrangePicker { background-color: #CF5300; }
.grey2Picker { background-color: #7F7F7F; }

.greenPicker { background-color: green; }
.blackPicker { background-color: black; }
.whitePicker { background-color: white; }
.purplePicker { background-color:#6a026a; }
.greyPicker { background-color: #848482; }
.tealPicker { background-color: #016268; }
#labelLocation { font-size: 10px; padding: 0px; }
.layerID { font-size: 10px; padding: 0px; }


#geoFenceEditDiv { display: none; margin: 5px; font-size: 12px; z-index: 400; padding: 5px; background-color: white; position: absolute; width: 190px; border: 2px solid black; border-radius: 3px; min-height: 300px;}
.geoTitle { font-weight: bold; font-size: 16px; clear: both; }
.geoSelectMulti {width: 100%; background-color: white; border: 1px dotted grey; font-size: 12px; border-radius: 2px;}
#geoFenceEditDiv TD { font-size: 12px;}

  	.rotateClass0 {
  -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
       -o-transform: rotate(180deg);
          transform: rotate(180deg);
      -webkit-transition: all 1500ms ease-in-out;
      -moz-transition: all 1500ms ease-in-out;
      -o-transition: all 1500ms ease-in-out;
      -ms-transition: all 1500ms ease-in-out;
             /* IE6�IE9 */
             filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');
               zoom: 1;
  }

  	.rotateClass1 {
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
       -o-transform: rotate(360deg);
          transform: rotate(360deg);
      -webkit-transition: all 1500ms ease-in-out;
      -moz-transition: all 1500ms ease-in-out;
      -o-transition: all 1500ms ease-in-out;
      -ms-transition: all 1500ms ease-in-out;
             /* IE6�IE9 */
             filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');
               zoom: 1;
  }


  .label-centre {
    font-size: 11px;
    height: 18px;
    line-height: 18px;
    overflow: visible !important;
    z-index: -6 !important;
}


.label-centre span.centred {
    color: black;
    text-shadow: 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 3px rgba(255, 255, 255, 1), 0px 0px 4px rgba(255, 255, 255, 1);
    -webkit-text-stroke-width: .0px;
  	-webkit-text-stroke-color: white;
    xbackground-color: black;
    display: block;
    margin-left: -50%;
    text-align: center;
    font-weight: bold;
    padding: 0px 5px 0px 5px;
    height: 18px;
    width: auto;
    display: inline-block;
    xborder: 1px solid #000;
    xborder-radius:3px;
    white-space: nowrap;
    xbox-shadow: 3px 3px 5px rgba(0,0,0,0.15);
}
.label-centre span.righted {
    color: black;
    text-shadow: 1px 1px 1px #FFFFFF;
    xbackground-color: black;
    display: block;
    text-align: center;
    font-weight: bold;
    padding: 0px 5px 0px 5px;
    height: 18px;
    width: auto;
    display: inline-block;
    xborder: 1px solid #000;
    xborder-radius:3px;
    white-space: nowrap;
    xbox-shadow: 3px 3px 5px rgba(0,0,0,0.15);
    margin-top: 5%;
    margin-left: -3%;
}
.showHideLabels { margin: 3px 2px; background-color: #eee; xborder: 1px solid #ccc;line-height: 20px; padding: 1px; font-weight: bold;  bxorder-radius: 3px; cursor: pointer;}
.showHideLabels:hover { background-color: #aaa; }

.confirmKMZuploadDiv { display: none; width: 100%; min-height: 200px; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;}
#listLoaderIMG { margin-top: 100px; margin-left: 45%;}
.uploadKMZlayerDiv { float: left; width: 100%; background-color: #eee;  clear: both; margin-top: 10px; margin-bottom: 4px; padding: 5px;box-sizing: border-box;font-weight: bold;}
.markerUploadDiv { width: 33%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;box-sizing: border-box; float: left; font-size: 11px;}
.markerUploadDiv IMG {width: 18px; margin-bottom: -5px; }
.xxmarkerUploadDiv:nth(n+1) { padding-left: 5px; }
.importLayerInfoDiv { font-size: 11px; margin: 2px 10px 5px 20px; float: left; clear: both;}
.importLayerInfoDiv INPUT { border: 1px solid #ccc; border-radius: 2px; }
.submitKMZuploadButtonDiv { text-align: center;  float: left; width: 100%; margin-top: 10px;}
.submitKMZuploadButtonDiv BUTTON  { padding: 5px; }

.shapeHighlight { border: 2px solid white; }
.shapeInfoWindowMenu { z-index: 2;position: absolute; bottom: 0px; left: 0px; right: 0px; text-align: right; margin-right: 0px; }
.shapeInfoWindowMenu IMG , .shapeInfoWindowMenuLeft IMG{ width: 17px; opacity: 0.5; margin: 0px 0px 0px 10px; cursor: pointer; vertical-align: middle;}
.shapeInfoWindowMenu IMG:hover {opacity: 1;}
#markerAddress IMG { width: 12px; opacity: 0.5; margin: 0px 3px 0px 2px; vertical-align: middle; }
#markerAddress SPAN { height: 17px;   vertical-align: middle;}
.shapeInfoWindowMenuLeft { position: absolute; bottom: 0px; left: 0px; right: 0px; text-align: left; margin-right: 0px;vertical-align: middle; }
.shapeInfoWindowMenuLeft SPAN { height: 17px;  font-size: 10px; color: #454545; vertical-align: middle;}
[contenteditable=true]:empty:before{
  content: attr(placeholder);
  display: block; /* For Firefox */
  color: #919191;
  
  font-weight: normal;
  font-style: italic;
}

#stylepopup-popup { display: none;z-index: 999;background: #fff;position: absolute;box-shadow: rgba(0,0,0,.2) 0 4px 16px;-moz-box-shadow: rgba(0,0,0,.2) 0 4px 16px;border: 1px solid #acacac;outline: none;-moz-outline: 0;width: 220px;max-width: 220px;}
#stylepopup-container {
    margin: 10px 14px 14px 14px;
}
.TvD9Pc { cursor: pointer; }
.TvD9Pc::after {
    content: '';
    display: block;
    width: 22px;
    height: 22px;
    position: absolute;
    top: 10px;
    right: 10px;
    background: url('//www.gstatic.com/mapspro/images/icons-app-000.svg') no-repeat;
        background-position-x: 0%;
        background-position-y: 0%;
    background-position: -42px 0;
}
.TvD9Pc.purZT::after {
    width: 16px;
    height: 16px;
    top: 0;
    right: 0;
    background-position: -65px -3px;
}
.eCT9zd-V67aGc {
    font-size: 11px;
    color: #808080;
    margin-bottom: 2px;
    margin-top: 12px;
}
#stylepopup-container .VIpgJd-nEeMgc-jAhtR {
    position: relative;
    height: 12px;
    width: 12px;
    border: 1px solid #fff;
}
#stylepopup-container .VIpgJd-nEeMgc-eEDwDf {
    text-align: center;
    font-size: 1px;
    cursor: pointer;
}
#stylepopup-container .VIpgJd-nEeMgc-jAhtR:hover { width: 24px !important; height: 24px; border: 2px solid white; margin: -7px; z-index: 10000;}
.styleColourSelected { border: 2px solid black !important; margin: -1px; z-index: 100;}

.ui-slider-horizontal {
    height: 0px;
    margin: 9px;
}

.ui-slider-horizontal .ui-slider-handle {
    top: -8px;
    margin-left: -.6em;

}

.eCT9zd-vEUbZd-SmKAyb.QV5wG-LJSvSb-purZT {
    height: 20px;
    margin: 0 3px 0 0;
}
.eCT9zd-vEUbZd-SmKAyb {
    width: 18px;
    height: 18px;
    margin: 2px 2px 0 0;
    display: inline-block;
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
}
.QV5wG-LJSvSb-purZT {
    background-image: url(//www.gstatic.com/mapspro/images/stock/extended-icons5.png);
    background-size: 480px 340px;
}
.VIpgJd-INgbqf-LgbsSe-SmKAyb-Q4BLdf, .VIpgJd-INgbqf-xl07Ob-LgbsSe-SmKAyb-Q4BLdf {
    text-align: center;
}
#stylepopup-container .VIpgJd-INgbqf-ornU0b-LgbsSe {
    cursor: pointer;
}
.VIpgJd-INgbqf-LgbsSe, .VIpgJd-INgbqf-xl07Ob-LgbsSe {
    color: #333;
    line-height: 15px;
    list-style: none;
    font-size: 11px;
    font-weight: bold;
    cursor: default;
}
.VIpgJd-INgbqf-LgbsSe-SmKAyb-Q4BLdf, .VIpgJd-INgbqf-xl07Ob-LgbsSe-SmKAyb-Q4BLdf {
    height: 25px;
    min-width: 20px;
    padding: 0;
    text-align: center;
}
.VIpgJd-TzA9Ye-eEGnhe {
    position: relative;
    display: -moz-inline-box;
    display: inline-block;
}
#stylepopup-container .VIpgJd-INgbqf-ornU0b-LgbsSe {
    cursor: pointer;
}

.moreIconsButton { font-size: 11px; height: 22px; line-height: 20px; border-radius: 2px;  border: 1px solid #ccc;}

div.XKSfm-Sx9Kwc {
    border: 1px solid #acacac;
    font-size: 13px;
    line-height: 18px;
}
:focus {
    outline: 0 none;
}
.y1wT6-Sx9Kwc {
    background: #fff;
    position: relative !important;
    width: 937px;
    box-shadow: rgba(0,0,0,.2) 0 4px 16px;
    -moz-box-shadow: rgba(0,0,0,.2) 0 4px 16px;
    border: 1px solid #acacac;
    outline: none;
    -moz-outline: 0;
    opacity: 1;
    display: block;
    margin: 0 auto;
}
.XKSfm-Sx9Kwc {
    color: #000;
    padding: 30px 42px;
}
.VIpgJd-TUo6Hb, .XKSfm-Sx9Kwc {
    -moz-box-shadow: 0 4px 16px rgba(0,0,0,.2);
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    background: #fff;
    background-clip: padding-box;
    border: 1px solid #acacac;
    border: 1px solid rgba(0,0,0,.333);
    outline: 0;
    position: absolute;
}
.XKSfm-Sx9Kwc, .VIpgJd-TUo6Hb {
    z-index: 1003;
}
.y1wT6-vEUbZd a.QV5wG-LJSvSb {

    left: 0;
    top: 0;
    width: 32px;
    height: 32px;

}
.y1wT6-vEUbZd a {

    position: absolute;
    display: inline-block;
    overflow: hidden;
    background-repeat: no-repeat;

}
.XKSfm-Sx9Kwc a {

    color: #15c;

}
a:link {

    color: #15c;

}
.QV5wG-LJSvSb {

    background-image: url(//www.gstatic.com/mapspro/images/stock/extended-icons5.png);
    background-size: 768px 544px;

}
:focus {

    outline: 0 none;

}
.y1wT6-vEUbZd {

    width: 32px;
    height: 32px;
    xmargin: 5px;
    text-align: center;
    overflow: hidden;
    z-index: 1000;
    display: inline-block;
    position: relative;

}
.XKSfm-Sx9Kwc-bN97Pc {

    line-height: 1.4em;
    word-wrap: break-word;

}
div.XKSfm-Sx9Kwc {

    font-size: 13px;
    line-height: 18px;

}
.XKSfm-Sx9Kwc {

    color: #000;

}
.y1wT6-Bz112c-haAclf {

    overflow-y: auto;
    border: 1px solid #eee;
    padding: 10px;
    position: relative;
    clear: both;
    margin-top: 16px;

}
.XKSfm-Sx9Kwc-bN97Pc {

    background-color: #fff;
    line-height: 1.4em;
    word-wrap: break-word;

}
.y1wT6-Fs2VSc {
    margin-top: 21px;
    font-weight: bold;
}
.XKSfm-Sx9Kwc-c6xFrd .VIpgJd-ldDVFe-JIbuQc {
    background-color: #4d90fe;
    background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
    background-image: linear-gradient(top,#4d90fe,#4787ed);
    border: 1px solid #3079ed;
    color: #fff;
}
.XKSfm-Sx9Kwc-c6xFrd button {
    -moz-border-radius: 2px;
    border-radius: 2px;
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top,#f5f5f5,#f1f1f1);
    background-image: linear-gradient(top,#f5f5f5,#f1f1f1);
    border: 1px solid #dcdcdc;
    border: 1px solid rgba(0,0,0,0.1);
    color: #333;
    cursor: default;
    font-family: inherit;
    font-size: 11px;
    font-weight: bold;
    height: 29px;
    line-height: 27px;
    margin: 0 16px 0 0;
    min-width: 72px;
    outline: 0;
    padding: 0 8px;
}
.XKSfm-Sx9Kwc-c6xFrd {
    margin-top: 16px;
}
.y1wT6-Fs2VSc-oYxtQd {

    color: #3a84df;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    padding-right: 16px;
    -moz-user-select: none;

}
.XKSfm-Sx9Kwc-r4nke {

    color: #000;
    cursor: default;
    font-size: 16px;
    font-weight: normal;
    line-height: 24px;

}
  .ui-tooltip, .arrow:after {
    background: #333;
    border: 0px solid #333;
  }
  .ui-tooltip {
    padding: 5px 10px;
    color: white;
    font-size: 12px;
    border-radius: 0px;
    box-shadow: 0 0 7px black;
  }
  
.selectedIcon {
    margin: 0px;
    xborder: 2px solid #ff0000;
    border-radius: 21px;
    -moz-border-radius: 21px;
    background-color: #ff00004d;
}
.XKSfm-Sx9Kwc-r4nke-TvD9Pc {
    height: 11px;
    opacity: .7;
    padding: 17px;
    position: absolute;
    right: 0;
    top: 0;
    width: 11px;
}
.XKSfm-Sx9Kwc-r4nke {
    color: #000;
    cursor: default;
    font-size: 16px;
    font-weight: normal;
    line-height: 24px;
    cursor: pointer;
}
.XKSfm-Sx9Kwc-r4nke-TvD9Pc::after {

    content: '';
    background: url(//ssl.gstatic.com/ui/v1/dialog/close-x.png);
    position: absolute;
    height: 11px;
    width: 11px;
    right: 17px;

}
.y1wT6-yOOK0-YPqjbf {
    height: 18px;
    width: 100px;
    vertical-align: top;
    font-size: 12px;
    resize: none;
}
.y1wT6-yOOK0-haAclf {
    float: right;
    font-size: 12px;
}
.y1wT6-yOOK0-V67aGc {
    display: inline-block;
    margin-right: 8px;
}
.mapTopMenu { background-color:#0b3c26; box-sizing: border-box;  padding: 10px; float: left; width: 100%; margin:0px; display: flex; justify-content: space-evenly;}
.mapTopMenu IMG { width: 16px; cursor: pointer; opacity: 0.8;}
.mapTopMenu IMG:hover { opacity: 1.0;}
.mapTopMenu2 LI, .mapTopMenu3 LI { xwidth: 16.6%; float: left;text-align: center; }
.mapTopMenu2 LI DIV, .mapTopMenu3 LI DIV { display: flex; align-items: center; justify-content: center; }
.mapTopMenu1 { display: flex;  justify-content: center;}
.mapTopMenu1 LI { 	text-align: center; display: flex; flex-grow: 1;  justify-content: center;}
.editListImage { width: 15px !important;}
.editListImageDiv { position: absolute; right: 0px; top: 3px; opacity: 0.7; }

.sortLayerImage { width: 15px !important;}
.sortLayerImageDiv { width: 15px; height: 15px; position: absolute; right: 5px; top: 8px; opacity: 0.7; background: url(/go/images/maps/sort.png); background-size: 15px 15px;}
.sharedLayerImageDiv { cursor: pointer;width: 15px; height: 15px; position: absolute; right: 22px; top: 8px; opacity: 0.7; background: url(/go/images/maps/linkedGreen.png); background-size: 15px 15px;}
.sharedLayerImageDiv:hover { opacity: 0.5; }
.sharedLayerHiddenImageDiv { cursor: pointer;width: 15px; height: 15px; position: absolute; right: 22px; xtop: 8px; opacity: 0; background: url(/go/images/maps/linked.png); background-size: 15px 15px;}
.collapsedLayer .sharedLayerHiddenImageDiv { cursor: pointer;width: 15px; height: 15px; position: absolute; right: 22px; top: 8px; opacity: 0; background: url(/go/images/maps/linkedWhite.png); background-size: 15px 15px;}

.collapsedLayer .sortLayerImageDiv {background: url(/go/images/maps/sortwhite.png); background-size: 15px 15px;}
.collapsedLayer .sharedLayerImageDiv { background: url(/go/images/maps/linkedGreen.png); background-size: 15px 15px;}
#copyLayerInnerDiv { width: 100%; min-height: 300px; position: relative;}
  .ui-state-highlight { height: 1.5em; line-height: 1.2em; }
  .highlightitem { background-color: #f4fe7099;}
  .layerNameDiv { float: left; min-width: 50%; max-width: 150px; background: rgba(0,0,0,0); border: 0px; font-weight: bold;}
  #markerListContainer .isAdminfalse .layerNameDiv { max-width: inherit; margin-right: 20px;}
  .disableInputClass { pointer-events:none;}
  .currentActiveLayer { background-color: #e9ff78; }
  .layerHeaderHolder INPUT { float: left; margin: 0px 2px; text-overflow: ellipsis;}
  .layerSelectHideItems, .hideShapeLabel { display: none !important; }
  #layerMenu { display: none; position: absolute; background-color: white; width: 150px; right: 5px;z-index: 10000; box-shadow: 0 1px 3px rgba(0,0,0,.25) !important;}
  #layerMenu UL { margin: 0px; }
  #layerMenu LI {cursor: pointer; padding: 3px; text-indent: 5px; -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;}
  #layerMenu LI:hover { background-color: #eee;}
  .finishSortLayer, .cancelDeleteLayerDiv, .cancelCollapseLayerDiv, .hideLayerMenuItem { display: none; }
  .deleteLayerImage, .sortItemsLayerImage, .collapsedLayerImage { width: 15px !important;}
	.deleteLayerImageDiv, .sortItemsLayerImageDiv { display: none;position: absolute; right: 39px; xtop: 7px; opacity: 0.7; cursor: pointer;}
	.visibleLayerImageDiv { display: flex;position: absolute; right: 56px;  opacity: 0.7; cursor: pointer; align-items: center;}
	.expandCollapseImageDiv { position: absolute; right: 5px; xtop: 7px; opacity: 0.7; cursor: pointer; width: 15px; height: 15px; background: url(/go/images/maps/expandup.png); background-size: 15px 15px;}
	.collapsedLayer .expandCollapseImageDiv { background: url(/go/images/maps/expandupwhite.png); background-size: 15px 15px;}
	.collapsedLayerImageDiv { display: none;position: absolute; right: 75px; top: 0px; bottom: 0px; opacity: 0.7; align-items: center;}
	.collapsedLayer .collapsedLayerImageDiv { display: flex; align-items: center;}
	.collapsedLayerImage { border-radius: 2px; background: #5c5c5c;}
	
	.sharedLayerHiddenImageDiv:hover { opacity: 0.4;}
	.layerHeaderHolder:hover .sortItemsLayerImageDiv { display: flex; }
	
	#markerListLoading { z-index: 100;position: absolute; top: 0px; bottom: 0px; left:0px; right: 0px; background-color: rgba(255,255,255,.5); display: flex; align-items: center; justify-content: center;}
	.hideItem { display: none !important; }
	.ui-dialog { z-index: 10000; }
	.customIconDiv IMG { width: 32px;}
	.arrowRadioHolder { position: relative;}
	.arrowRadioHolder SPAN, .arrowRadioHolder LABEL { vertical-align: middle; }
	.arrowRadioHolder IMG { width: 10px; margin-bottom: -2px; margin-right: 4px;}
	
	.listItem, .mapName1, .mapDescription1 { display: flex; align-items: center; -moz-user-select: none;        -khtml-user-select: none;        -webkit-user-select: auto;        -o-user-select: none; user-select: none;}
	.listItemShared { background: linear-gradient(90deg, #16E000,#16E000 4px, #fff 4px); padding-left: 5px; user-select: none;}
	.listItemBlocked { opacity: 0.2; cursor: no-drop;}
	
	#sharedModal { position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; background-color: rgba(0,0,0,.2); z-index: 100000; display: flex;}
	#editSharedLayerDiv { padding: 20px; position: relative; overflow: auto; width: 50%; height: 50%; margin: auto; background-color: white; border-radius: 2px; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; }
	.editSharedLoadingDiv, .accountsListLoadingDiv { z-index: 1000; background-color: rgba(0,0,0,.1);position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; display: flex; }
	.editSharedLoadingDiv IMG, .accountsListLoadingDiv IMG { margin: auto; }
	.editSharedOwnerDiv IMG { width: 15px; }
	.editSharedCurrent, .editSharedAdd { margin: 20px; position: absolute; top: 50px; bottom: 0px; overflow: auto; box-sizing: border-box; width: 47%; float: left; padding: 10px; min-height: 50px; margin-top: 10px; border-radius: 2px; }
	.editSharedCurrent { background-color: #eee; left: 0px;}
	.editSharedAdd { right: 0px; }
	.sharedLogo { width: 19px; }
	.deleteSharedLayer { width: 12px; opacity: 0.7; cursor: pointer; margin-right: 5px;}
	.deleteSharedLayer:hover { opacity: 1.0; }
	
	.accountsListSubHeaderDivDiv IMG { width: 15px; height: 15px;}
	.accountsListSubHeaderDivDiv { justify-content: center; text-align: center; font-weight: bold;width: 32.2%; float: left; border-radius: 2px; background-color: #333; color: white; padding: 4px;  margin-right: 3px; margin-bottom: 3px; display: flex; align-contents: center; }
	.accountsListUsersDiv { position: relative; max-height: 300px; overflow: auto; min-height: 300px; width: 32.2%; float: left; border-radius: 2px; background-color: #eee; padding: 4px; margin-right: 3px;}
	.accountListCurrentAccessDiv { max-height: 300px; overflow: auto; position: relative; min-height: 300px; width: 32.2%; float: left; border-radius: 2px; background-color: #e7e7e7;padding: 4px;margin-right: 3px;}
	.accountsListAddMapsDiv { max-height: 300px; overflow: auto; position: relative;  min-height: 300px; width: 32.2%; float: left;border-radius: 2px; background-color: #d7d7d7; padding: 4px;}
	.accountsListHeaderDiv { font-size: 18px; margin-bottom: 11px; position: relative; display: flex; align-items: center;}
	.accountsListHeaderDiv IMG { width: 20px; height: 20px; margin-left: 10px; opacity: .5; cursor: pointer; }
	.accountsListHeaderDiv IMG:hover { opacity: 1; }
	.accountsListCloseDiv { position: absolute; top: 0px; right: 0px; cursor: pointer;}
	.accountsListCloseDiv IMG { height: 20px; width: 20px; }
	.accountsListCloseDiv IMG:hover { opacity: .7;}
	.currentMapEventDiv { color: #333; font-weight: bold; background-color: white; text-indent: 10px;}

	.currentMapAccountDiv, .currentMapEventDiv { margin-bottom: 9px;  display: flex; align-items: center; padding: 2px;}
	.editSharedAdd .currentMapEventDiv { border-radius: 4px; background-color: #d9d9d9; margin-bottom: 1px;}
	.currentMapAccountDiv:hover { opacity: 0.6; cursor: pointer;}
	.currentMapAccountDiv IMG { width: 16px; margin: 0px 2px;}
	.currentMapAccountDiv .hideIcon { opacity: 0.1;}
	.currentMapAccountDiv:hover .hideIcon { opacity: 1;}
	.selectedAccount { background-color: #9ffea0; color: black;}
	.emptyAccountDiv { position: absolute; top: 0px; left: 0px; right: 0px; bottom:0px;  display: flex; align-items: center;}
	.emptyAccountDiv IMG { width: 40px; opacity: 0.6; margin: auto;}
	#accountStatus { float: right; margin-right: 60px; position: absolute; right: 0px;}
	#accountStatus .assessmentRadio .ui-tabs .ui-widget-header, #accountStatus .ui-tabs .ui-state-active, #accountStatus .ui-state-default, #accountStatus .ui-widget-content .ui-state-default, #accountStatus .ui-widget-header .ui-state-default
	{ font-size: 11px; }
	.ui-button .ui-state-active, .ui-state-active .ui-button-text, .myRidesActive .ui-button-text {background-color: #80b026; color: white;}
	.editAccountTable TD { padding: 2px;}
	.editAccountTable INPUT { border-radius: 2px; border: 1px solid #aaa;}
	
	.mapChooserRow { width: 100%; cursor: pointer; border-bottom: 1px solid #ccc; clear: both; min-height: 40px; display: flex; align-items: center;border-radius: 4px; }
	.mapChooserRow:hover { background-color: #eee; }
	.selectedMap { background-color: #eee;}
	.mapChooserRow IMG { max-width: 40px; width: auto; max-height: 40px; margin-right: 20px; margin-top: 3px; margin-bottom: 3px;}
	.mapChooserDiv { display: none; }
	
	.no-close .ui-dialog-titlebar-close {
  display: none;
}
	.filterIconsText { border: 1px solid #ccc !important; border-radius: 2px !important; }
	.loginTable INPUT { border: 1px solid #eee; border-radius: 3px; border-style: solid;}
	.loginTable BUTTON { padding: 3px; border: 1px solid #333; border-radius: 3px; }
	
	.directionsTitle { font-size: 16px; display: flex; align-items: center; font-weight: bold; margin-bottom: 5px; }
	.directionsTitle IMG  { width: 20px; margin-right: 5px; }
	.reverseVenues IMG { width: 20px; opacity: 0.6; cursor: pointer; }
	.reverseVenues IMG:hover { opacity: 1.0;}
	.reverseVenues { position: absolute; right: 0px; top: 0px; bottom: 0px; width: 25px; display: flex; align-items: center; justify-content: center; align-content: center; }
	.directionMarkersHolder { position: relative; }
	.toMarkerDiv, .fromMarkerDiv { position: relative; padding: 3px; font-size: 14px; xborder-bottom: 1px solid #fffefe33; width: 220px; display: flex; align-items: center;}
	.toMarkerDiv IMG, .fromMarkerDiv IMG { background-color: #4285f4;width: 18px; margin-right: 5px; margin-left: 5px;}
	.directionsDurationDiv { margin-bottom: 4px; font-style: italic; display: flex; justify-content: center; align-items: center;}
	.directionsDurationDiv IMG { width: 12px; margin: 0px 3px; }
	#closeDirections { position: absolute; top: 5px; right: 5px;}
	#closeDirections IMG { width: 15px; cursor: pointer; opacity: 0.7;}
	#closeDirections IMG:hover { opacity: 1.0;}
	
	
	img[src='/go/images/maps/current-location.png']  {
    animation: pulse .5s infinite alternate !important;
    -webkit-animation: pulse .5s infinite alternate !important;
    transform-origin: center;
    -webkit-transform-origin: center;
}

.dashTitleHolderDiv LABEL { display: flex; align-items: center;}
.polylineDashHolderDiv { position: relative; padding-bottom: 5px; border-radius: 2px;}
.polylineDashDisableDiv, .polylineDashDisableStrokeHolderDiv { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; background-color: black; opacity: 0.1; z-index: 10;}
.polylineDashDisableStrokeHolderDiv { display: none;}
.polylineDashStrokeHolderDiv { position: relative;padding-bottom: 5px; }

#searchDiv { float: left; width: 100%;   background-color: #cacaca; padding: 6px; box-sizing: border-box;}
  .search-icon {
    position: absolute;
    xtop: 6px;
    left: 8px;
    width: 14px;
  }

  .clear-icon {
    position: absolute;
    xtop: 8px;
    right: 8px;
    width: 10px;
    cursor: pointer;
    visibility: hidden;
  }
.wrapper-search {
    position: relative;
    display: flex;
    min-width: 100px;
    align-items: center;
  }
   .search {
   border: 1px solid grey;
   border-radius: 5px;
   height: 20px;
   width: 100%;
   padding: 2px 23px 2px 30px;
   outline: 0;
   background-color: #f5f5f5;
 }
 
#currentModulesDiv, #availableModulesDiv { height: 200px; overflow-y: auto; border-radius: 4px; padding: 10px; background-color: #eee; margin-bottom: 10px; position: relative;}
.moduleLoaderIMG { display: flex; align-items: center; justify-content: center; position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px; }
.moduleLoaderIMG IMG { width: 35px; }
 
 #currentModulesDiv DIV, #availableModulesDiv DIV { border-bottom: 1px solid #ddd;}
 .moduleRow { cursor: pointer ; font-size: 11px; display: flex; align-items: center; padding: 2px 0px;}
 .moduleRow:hover { opacity: 0.7; }
 .moduleRow IMG { width: 15px; margin: 0 5px;}
 
 .addLayerDiv { cursor: pointer; border-radius: 2px; }
 .addLayerDiv:hover { background-color: #eee;}
 .addLayerMapName { display: flex; align-items: center; border-radius: 3px; background: #333; color: white; padding: 3px; font-weight: bold;}
 .addLayerMapName IMG { width: 22px; margin-right: 4px;}