/**
 * Styles CSS des cartes OpenStreetMap
 */

div.map {
	max-height: 350px;
	aspect-ratio: 4 / 3;
	border: 1px solid transparent;
}

div.map:hover {
	border-color: black;
}

div.map, div.map + figcaption {
	font-style: italic;
}

div.map, div.map + figcaption > a > span.material-icons {
	font-style: normal;
	font-size: 20px;
}

div.map div.ol-control {
	margin: 0 0 0 .5em;
	height: 32px;
}

div.map div.ol-control:first-child,
div.map div.ol-control:nth-child(3) {
	margin-top: .5em;
}

div.map div.ol-control, div.map div.ol-control > button {
	width: 26px;
}

div.map div.ol-control > button {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 0 3px 6px;
	font-size: 20px;
	font-weight: bold;
	font-style: normal;
}

div.map div.ol-control > button.ol-search-location,
div.map div.ol-control > button.ol-center-on-marker,
div.map div.ol-control > button.ol-mark-center {
	padding: 0;
}

div.map div.ol-attribution > button {
	display: none;
}

div.map div.ol-attribution > ul {
	position: absolute;
	bottom: .5em;
	right: .5em;
	margin: 0;
	padding: .1em;
	list-style-type: none;
	font-size: small;
	background-color: rgba(255,255,255,0.5);
	border-radius: .7em;
}

div.map fieldset {
	position: absolute;
	top: 0;
	padding: 1rem;
	background-color: whitesmoke;
	border: 1px solid darkgray;
	box-shadow: 2px 1px 1px 1px #dadada;
}

div.map fieldset legend,
div.map fieldset span {
	font-size: small;
}

div.map fieldset legend {
	margin-bottom: 0;
}

div.map fieldset div.action-set {
	width: 100%;
	padding: 0;
	margin: 1em auto 0 auto;
	display: flex;
}

div.map fieldset div.action-set > button {
	width: 32px;
	height: 32px;
	padding: 0;
	margin: 0 auto;
}

div.map #search-location-dlg {
	z-index: 2;
	display: flex;
	flex-direction: column;
	width: 20rem;
}

div.map #search-location-dlg input {
	margin-top: 1em;
}

div.map #select-location-dlg {
	z-index: 3;
	min-width: 20rem;
	max-width: calc( ((4 / 3) * 350px) - 0.5em);
}

div.map #select-location-dlg ul {
	max-height: 300px;
	margin: 1em 0;
	padding: 0;
	list-style-type: none;
	overflow-y: auto;
}

div.map #select-location-dlg li {
	display: flex;
	text-align: left;
}

div.map #select-location-dlg label {
	display: block;
	float: none;
	width: 100%;
	margin: 0;
	padding: 1em;
	font-size: small;
	font-weight: normal;
}

div.map #select-location-dlg li:nth-child(odd) label {
	background-color: var(--table-row-bg-odd);
}

div.map #select-location-dlg li:nth-child(even) label {
	background-color: var(--table-row-bg-even);
}

div.map #select-location-dlg li label:hover {	
	background-color: var(--table-row-bg-hov);
}