#map {	
	height: 500px;
	width: 100%;
	border: 1px solid #dbdbdb;
	position: relative;
}

.boxarea {
	position: absolute;
	align: left;
	left: 8px;
	top: 10px;
	width: 330px;
	max-width: 90%;
	height: 50px; /*dummy for dropdown child*/
	z-index: 1001;
}

.boxdropdown {
	position: absolute;
/* 	max-height: 80%; */
	max-height: 350px; /*referring to parent (boxarea) dummy height*/
	max-width: 330px;
	z-index: 1010;
	background-color: white;
	overflow-y: auto; 
	overflow-x: hidden;
}


.dashboard {
	position: absolute;
	align: left;
	width: 380px;
	height: 100%;
	left: 0px;
	top: 0px;
	z-index: 1001;	
	background-color: #fff;
	border: 1px solid #dbdbdb;
	padding: 5px;
}

.dashboardControl {
	position: absolute;
	align: left;
	width: 24px;
	height: 50px;
	left: 382px;
	top: 0px;
	z-index: 1000;
	color: #fff;
	background-color: #66B245;
	border: 2px solid rgb(255, 255, 255);
    	border: 2px solid rgba(255, 255, 255, .9);
	border-radius: 4px;
	padding: 3px;
}

.dashboardControl.dashboardControlHidden {
/* 	position: absolute; */
/* 	align: left; */
	width: 35px;
	height: 35px;
	left: 8px;
/* 	z-index: 1000;	 */
}

.dashboardButton {
	color: #66B245;
	border: 1px solid #66B245;
	background: #fff;
	margin: 5px;
	border-radius: 3px;
}

.dashboardButtonFixed {
	color: #66B245;
	border: 1px solid #66B245;
	background: #fff;
	margin: 15px;
	border-radius: 3px;
}

.dashboardButtonRight {
	position: absolute;
	top: 10px;
	left: 120px;
	width: 20px;
	height: 20px;
	color: #fff;
	background: #ccc;
	border-radius: 10px;
	border: none;
	padding-left: 6px;
}

.cityButton {
	color: #66B245;
	background: transparent;
	border: none;	
}

.dashboardDiv {
	margin-top: 10px;
	padding: 5px;
	max-height: 80%;
	max-width: 100%;
 	overflow-y: auto; 
	overflow-x: hidden;
}


div.contentHidden {
	height: 0px;
	width: 0px;
	border: none;
	color: transparent;
	background-color: transparent;
	visibility: hidden;
}


/*board controls*/

#navboardControl.dashboardControlHidden {
	top: 140px;
}

#dashboardControl.dashboardControlHidden {
	top: 190px;
}

.routebox {	
	display: inline-block;
	height: 25px;
	margin-top: 0px;

}

.routeIconDiv {
	min-width: 30px;
	vertical-align: top;
}

.routeIcon {
	display: block; /*for the img inside your div */ 
	margin: auto;
	vertical-align: top;
}

.routingHelperButton {
	margin-left: 50px;
	margin-bottom: 10px;
	background: transparent;
	border: none;
}

.aliasInput {
	width: 180px;
	font-size: 9pt;	
}

.coordsInput {
	width: 130px;
	border: none;
	color: grey;
	font-size: 8pt;	
}

#routeDetails {
	max-height: 190px;
	overflow: auto;
}

.divIndent {
	margin-left: 15px;
}

.divSmall {
	font-size: 9pt;
}

.ul-default {
	list-style-type: circle !important;
}

/*other*/

#swipe {
	margin-top: 5px;
}

input[type=range] {
    /*removes default webkit styles*/
    -webkit-appearance: none;
    
    /*fix for FF unable to apply focus style bug */
    border: 1px solid white;
    
    /*required for proper track sizing in FF*/
    width: 100%;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
/*     background: goldenrod; */
    background: #66B245;
    margin-top: -4px;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}

input[type=range]::-moz-range-track {
    width: 100%;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
/*     background: goldenrod; */
 background: #66B245;
}

/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
    outline: 1px solid white;
    outline-offset: -1px;
}

input[type=range]::-moz-focus-outer {
    border: 0;
}
    
input[type=range]::-ms-track {
    width: 100%;
    height: 5px;
    
    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;
    
    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;

    /*remove default tick marks*/
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: #777;
    border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
    background: #ddd;
    border-radius: 10px;
}
input[type=range]::-ms-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
/*     background: goldenrod; */
 	background: #66B245;
}
input[type=range]:focus::-ms-fill-lower {
    background: #888;
}
input[type=range]:focus::-ms-fill-upper {
    background: #ccc;
}

/* Changed style for default ol zoom buttons */
.ol-zoom-in, .ol-zoom-out {
	width: 30px !important;
	background-color: #66B245 !important;
}

.ol-zoom {
	top: 60px;
}