/*Buttons */

/*The ul element is the actual list of buttons if there are many*/
.btnContainer > ul {
	display: block;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	-webkit-margin-start: 0;
	-webkit-margin-end: 0;
	padding-inline-start: 0;
}

/*Inline block each button list element*/
.btnContainer > ul > li{
	display: inline-block;
}

/*Style of each button*/
.button {
	cursor:pointer;
	display:inline-block;
	border: solid 2px;
	border-radius: 5px;
	padding:5px;
	/* margin-left: 2.5px;
	margin-right:2.5px; */
	font-family:'Gotham Rounded',arial,sans-serif;
	font-weight: 350;
	font-style: normal;
	font-size:7pt;
	background-color: var(--secondary-key-color);
	color:var(--main-key-color);
	/*z-index: 1*/
}

.button > img {
	width:auto; 
	height:25px;
}

#more_info > img {
	height:21px;
	background-color: white;
	padding: 2px;
	border-radius: 2px;
}

/*Style of active buttons*/
.button.active {
	background-color: var(--main-active-color);
	border-color: var(--main-active-color-bg);
	color:#ffffff;
}

.button.disabled {
	background-color: var(--disabled-color);
	color:#ffffff;
}

.mapboxgl-popup-close-button {
	font-size: 20pt;
}


/*Responsive adjustments*/
@media only screen and (min-width: 520px) {
	/*Show disclaimer for bigger screens*/
	.button {
		font-size:9pt;
		margin-left: 2.5px;
		margin-right: 2.5px;
	}

	.button > img {
		height:30px;
	}

	#more_info > img {
		height:26px;
	}
	
}