/* 
 * /static/css/waypointtracker.css 
 * */

	body {/* padding-top:42px;  background-color:#707070; color:white; */}
	#titlebar {background-color:lightblue; color:black; font-size:1.5em; display:none;}
	#quitApp {font-size:1.5em; line-height:1; padding:0; border:none; background:transparent; color:black;}
	#status {
		background-color:#11ffee00; 
		color:blue; 
		/* font-size: smaller; */
		margin:0;
		padding:5px;;}
	#mode {margin:10px;}
	#settings {display:block}
	#whoami {
	  display: flex;
	  justify-content: space-between;
	  padding: 6px 12px;
	  font-size: 14px;
	  background-color: #f9f9f9; /* Optional für Sichtbarkeit */
	  border-bottom: 1px solid #ddd; /* Optional */
	}
	#controls {padding-left:5px;}
	#debriefing {
		margin-top:0; padding:0; color:green; 		
	}
	
	#info-and-now-container {
		display: flex;               /* Flexbox aktivieren */
		justify-content: space-between; /* Platz zwischen den Divs */
		align-items: flex-start; 	/* Ausrichtung oben */
    	width: 100%;                 /* Volle Breite nutzen */
		margin: 0x 0;             /* Abstände oben/unten */
		padding: 0 10px;            /* Innenabstände links/rechts */
		box-sizing: border-box;     /* Padding in Breite einbeziehen */
	}

	#infos {
		flex: 5;                    /* 3/4 der Breite */
		text-align: left;          /* Text linksbündig */
		padding-right: 10px;       /* Abstand zum rechten Div */
		background-color: #f9f9f9; /* Optional: Hintergrund */
		min-width: 0; 				/* Verhindert Überlauf */
		font-style:italic; 
		font-weight:bold; 
	}

	#now {
		flex: 3; /* 1/4 der Breite */
		display: flex;
		flex-direction: column; /* Speed und Distanz übereinander */
		align-items: flex-end; /* Rechtsbündig */
		gap: 0px; /* Abstand zwischen Speed und Distanz */
		text-align: right;
		padding-left: 10px;
		background-color: #f9f9f9;
		border-radius: 4px;
		font-weight: bold;
		color: blue;		
	}
	
	/* Speed und Distanz */
	#speed, #totalDistance {
		font-weight: bold;
		width: 100%;
		text-align: right;
	}

	#logContainer {
		margin-top: 2px;
		padding: 2px;
	}

	#logbook {
		height: 22px; /* Einzeiler */
		margin-top: 2px;
		padding-left: 5px;
		background-color: #f8f9fc; 
		color: black;
		transition: height 0.3s ease;
		overflow: scroll;
	}
	#map {max-height:80vH; height:60vH; width:100%; margin-top:2px;}
	#legend {margin:0; padding:5px; background:#f9f9f9;}
	#footer {background:darkgrey; color:white; margin-top:3px; padding-left:5px;}
	
	.XXdropdown {
		position: fixed;
		top: 0;
		right: 10px; /* Etwas Abstand vom rechten Rand */
		z-index: 1000; /* Um sicherzustellen, dass es über anderen Inhalten liegt */
	}
	.dropdown-toggle {
		background: none;
		border: none;
		padding: 8px;
		font-size: 1.5em;
		line-height: 1;
		color: #333; /* Passe die Farbe an */
	}
	.dropdown-toggle::after {
			content: none !important;
	}
	.dropdown-menu {
		right: 0;
		padding-right: 5px;
		left: auto !important; /* Sicherstellen, dass es rechts ausgerichtet ist */