/*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: none;
/*	border-radius: 5px;*/
	padding:5px;
	margin-left: 2.5px;
	margin-right:2.5px;
	font-family:soleil,arial,sans-serif;
	font-weight: 600;
	font-size:7pt;
	background-color: #CCC; 
	/*var(--main-key-color);*/
	color: var(--main-active-color);
	/*#ffffff;*/
	/*z-index: 1*/
}

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

/*Style of active buttons*/
.button.active {
	background-color: var(--secondary-key-color);
	box-shadow: 4px 4px var(--main-active-color);
	color: var(--main-active-color);
	font-size:10pt;
/*	color:#000000;*/
}

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

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


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

	.button > img {
		height:30px;
	}
}