/*Panel Positions and Styles*/

/*Map panel*/
#mapPanel {
	position:absolute;
	left: 0;
	top: 0;
	width: 100%;
    height: 100%;
}

/*Control panel*/
#controlPanel {
	position: absolute;
	left: 5px;
	top: 5px;
	/*transform: translateX(-50%);*/
	width: calc(100% - 10px);
	max-width: 500px;
	background-color: #ffffff;
	border-color: var(--main-key-color);
	border: solid 1px;
	border-radius: 4px;
	font-family:'Gotham Rounded',arial,sans-serif;
	font-weight: 300;
}

	/* Container divs inside control panel*/
	.btnContainer {
		padding-right: 5px;
		padding-left: 5px;
		display: block;
		text-align: center;
		font-size: 7pt;
	}

	.btnContainer > ul > a {
		font-family:'Gotham Rounded',arial,sans-serif;
		font-weight: 300;
		text-align: left;
		font-size: 7pt;
	}

	.btnContainer hr  {
		width: 50%;
		margin-top: 5px;
		margin-bottom: 5px;
	}

	#controlPanelTitleBox{
		display: flex;
		background-color: var(--main-key-color);
		margin-bottom: 5px;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
		justify-content: center;
		align-items: center;

	}

	#controlPanelTitleBox>img{
		height:30px;
		padding: 5px;
	}

		/*Geocoder*/
		#from-geocoder {
			display: inline-block;
			margin-top: 5px;
			margin-bottom: 5px;
		    width:80%;
		}

		.suggestions > li {
			font-family:arial,sans-serif;
			text-align: left;
		}

		/*Access*/
		#accessButtons {
			display: none;
		}

		/*Info*/
		#infoContainer {
			margin-bottom: 5px;
		}

	#isoBtnContainer {
		display: none;
	}

	#accessBtnContainer {
		display: none;
	}

	#taskHelper, #conceptHelper {
		display: none;
	}

	.mapboxgl-ctrl-geocoder input,.mapboxgl-ctrl-geocoder .suggestions a {
		font-family: 'Gotham Rounded';
		font-weight: 300;
	}


/*Responsive adjustments*/
@media only screen and (min-width: 520px) {
	/*Show disclaimer for bigger screens*/
	.btnContainer {
		font-size: 10pt;
	}

	.btnContainer > ul > a {
		font-size: 9pt;
	}

	#controlPanelTitleBox>img{
		height:40px;
		padding: 5px;
	}
}