body {
	color: #404040;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
}
#wave2map {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
}
/*put scale in bottom center*/
.mapboxgl-ctrl-bottom-left {
    bottom: 0;
    left: 50%;
}
.mapboxgl-ctrl-attrib.mapboxgl-compact{
		background-color: rgba(255, 255, 255, 0.7);
}
.mapboxgl-ctrl-attrib.mapboxgl-compact::after {
    background: url('https://cdn.wave2.io/images/buttonsprite.png') no-repeat top left;
    background-position: -786px 0px; width: 32px; height: 32px;
}
.mapboxgl-ctrl-attrib.mapboxgl-compact {
    padding-top: 8px;
    padding-bottom: 5px;
    padding-right: 34px;
    background-color: #fff;
}
.marker {
	border: none;
	cursor: pointer;
	height: 56px;
	width: 56px;
	background-image: url('https://cdn.wave2.io/images/tweak_marker.png');
	background-color: rgba(0, 0, 0, 0);
}
.mapboxgl-ctrl-buildings {
    background: url('https://cdn.wave2.io/images/buttonsprite.png') no-repeat top left;
    background-position: 0px 0px; width: 30px; height: 30px;
    margin: 1px;
}
.grayedOut {
	  cursor: default;
    opacity: 0.3;
    filter: alpha(opacity=30); /* For IE8 and earlier */
}


/*fallback CSS to control custom zoom, geolocate and reset zoom buttons*/
.fallback-control {
  position:absolute;
  top:10px;
  right:44px;
  z-index:2;
}

.fallback-buttons {
  position:absolute;
  top:0;
  left:0;
  z-index:1000;
}
.fallback-buttons .mybuttons {
    background:#fff;
    position:absolute;
    top:0;
    left:0;
    width:34px;
    height:34px;
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

.fallback-buttons .mybuttons.fbzoomin    { top:0px;
																					 background: url('https://cdn.wave2.io/images/buttonsprite.png') no-repeat top left;
    																			 background-position: -599px -1px; width: 32px; height: 32px;
																		     }
.fallback-buttons .mybuttons.fbzoomout   { top:38px;
																					 background: url('https://cdn.wave2.io/images/buttonsprite.png') no-repeat top left;
    																			 background-position: -693px 0px; width: 32px; height: 32px;
																		     }

.fallback-buttons .mybuttons {
    background:#fff;
    position:absolute;
    top:0;
    left:0;
    width:48px;
    height:48px;
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}
/*shift controls to right top for fallback as well*/
.fallback-control {
    top: 1px;
    right: 34px;
}