.mapboxgl-ctrl-top-left {
	top: 0;
	left: 0;
	margin: 0px;
	padding: 0px;
}
div[role="dialog"] {
	top: 89px !important;
	left: 12.5% !important;
}
div.mapboxgl-ctrl-top-left .mapboxgl-ctrl-directions.mapboxgl-ctrl {
	margin: 0px !important;
	padding: 8px 6px 6px;
	border: none;
	width: 320px;
	height: 160px;
}
div.mapboxgl-ctrl-top-left .mapboxgl-ctrl-directions.mapboxgl-ctrl.min {
	height: 36px;
}
.mapboxgl-ctrl-geocoder ul > li.active > a, .mapboxgl-ctrl-geocoder ul > li > a:hover {
	background-color: #bbb;
	text-decoration: none;
	cursor: pointer;
}
.mapboxgl-ctrl.mapboxgl-ctrl-group {
	position: absolute;
	top: 125px;
	right: 6px;
}
.mapboxgl-ctrl-directions {
	width: 33.3333%;
	min-width: 300px;
	max-width: 330px;
}
#closeCtrl, #minimizeCtrl {
	border: 0;
	border-radius: 5px;
	background: #efefef;
	color: black;
	top: 8px;
	cursor: pointer;
	width: 20px;
	height: 20px;
	text-align: center;
	z-index: 2;
	font-size: 1rem;
	position: absolute;
}
#closeCtrl {
	left: 294px;
}
#minimizeCtrl {
	left: 270px;
}
#closeCtrl:hover, #minimizeCtrl:hover {
}
#closeCtrl {
	background-image: url("../../../../assets/shared_images/icons/closeIcon.svg");
	background-repeat: no-repeat;
}

#minimizeCtrl.minime {
	background-image: url("../../../../assets/shared_images/icons/expandArrow.svg");
	background-repeat: no-repeat;
}
#minimizeCtrl.maxime {
	background-image: url("../../../../assets/shared_images/icons/collapseArrow.svg");
	background-repeat: no-repeat;
}
.directions-control {
	width: 100%;
	z-index: 1;
}
.directions-control.directions-control-directions {
	background: rgba(0,0,0,0.6);
}
#mapbox-directions-origin-input ul.suggestions,
#mapbox-directions-destination-input ul.suggestions{
	/* display: none !important; */
}
.mapbox-directions-profile {
	width: 89%;
	height: 29px;
	margin: 7px 0 0 !important;
}
.mapbox-directions-profile label {
	width: 33% !important;
	margin: 0;
	border-radius: 3px !important;
}
label[for="mapbox-directions-profile-driving"] {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.mapbox-directions-profile.mapbox-directions-component-keyline.mapbox-directions-clearfix {
	border-radius: 3px;
}
.directions-control.directions-control-inputs {
	top: 10px;
	left: 10px;
	padding: 10px 0 0 0;
}
.mapboxgl-ctrl > button:hover {
	background-color: rgba(0, 0, 0, 0.2);
}
.mapbox-directions-instructions {
	width: 100%;
}
div#alerts_ticker_container.dir-open {
	left: 275px !important;
	margin-left: 60px !important;
	top: 5px !important;
}
div#alerts_ticker_container.dir-closed {
	left: 325px !important;
	margin-left: 0 !important;
	top: 5px !important;
}
.mapboxgl-ctrl-top-left .mapboxgl-ctrl {
	margin: 7px 0 0 0px;
}
.mapboxgl-ctrl.mapboxgl-ctrl-beach {
	position: relative;
	float: none;
}
span.beachspan {
	color: #fff;
	font-weight: bold;
	cursor: pointer;
}
button.mapboxgl-ctrl-icon.mapboxgl-ctrl-beach:hover {
	background-color: #ccc;
}
.dropdown-toggle.mapboxgl-ctrl-beach::after {
	color: transparent;
}
button.mapboxgl-ctrl-icon.mapboxgl-ctrl-beach {
	background: url("../images/SC_PalmMoon.svg") no-repeat;
	width: 29px;
	height: 29px;
	border: 0px solid white;
	border-radius: 3px;
	background-color: #fff;
	cursor: pointer;
	margin-left: 6px;
	padding: 0;
}
div.text-light.dirHead {
	position: relative;
	font-size: 1rem;
	top: 0px;
	left: 0px;
	padding: 0 0 0 6px;
	margin: 0;
}
.directions-reverse {
	left: 41px;
}

@media (max-width: 640px) {
	.mapboxgl-ctrl-top-left {
		top: 40px;
		left: 0;
		margin: 0px;
		padding: 0px;
	}
	div#alerts_ticker_container.dir-open,
	div#alerts_ticker_container.dir-closed {
		left: 0px !important;
		margin-left: 5px !important;
		top: 5px !important;
	}
}
@media (max-width: 420px) {
	.directions-control.directions-control-instructions {
		width: 104%;
		margin-left: -6px;
	}
	.directions-control.directions-control-directions {
		margin: 6px 0 0;
		max-height: 28%;
		width: 104% !important;
	}
	.mapbox-directions-routes {
		margin: 0 5px;
	}
	.mapbox-directions-multiple {
		min-height: 30px;
	}
	.directions-control.directions-control {
		width: 100%;
		max-width: 104%;
	}
	.mapbox-directions-instructions {
		display: none;
	}
	.mapbox-directions-route-summary {
		line-height: 24px;
		background-color: #343a40!important;
	}
}
@media (max-width: 360px) {
	div.mapboxgl-ctrl-top-left .mapboxgl-ctrl-directions.mapboxgl-ctrl {
		width: 300px;
	}
	#closeCtrl {
		left: 274px;
	}
	#minimizeCtrl {
		left: 250px;
	}
	.mapboxgl-ctrl.mapboxgl-ctrl-group {
		top: 123px;
	}
	.mapbox-directions-profile {
		margin: 5px 0 0 !important;
	}
	.mapboxgl-ctrl.mapboxgl-ctrl-beach {
		top: 113px;
	}
	div.mapboxgl-ctrl-top-left .mapboxgl-ctrl-directions.mapboxgl-ctrl.max {
		height: 158px;
	}
}
@media (max-width: 320px) {
	.mapboxgl-ctrl-directions {
		min-width: 262px;
	}
	div.mapboxgl-ctrl-top-left .mapboxgl-ctrl-directions.mapboxgl-ctrl {
		width: 262px;
	}
	#closeCtrl {
		left: 236px;
	}
	#minimizeCtrl {
		left: 210px;
	}
	.mapbox-directions-profile {
		width: 73%;
		margin: 5px 0 0 !important;
	}
	.mapboxgl-ctrl-geocoder {
		min-width: calc(100% - 30px);
		margin-left: 30px;
	}
	.mapboxgl-ctrl-geocoder input[type='text'] {
		padding: 10px 10px 10px 10px;
	}
	.mapbox-form-label {
		width: 30px;
	}
	.mapbox-form-label .directions-icon {
		width: 30px;
	}
	.directions-reverse {
		left: 31px;
	}
}