/*
 * css/waypointtracker.css
 * Layout angelehnt an regatta.html
 * */

	#titlebar {background-color:lightblue; color:black; font-size:x-large; margin-bottom:5px; padding:5px 10px;}
	#controls {margin:10px 0;}

	#status {margin:5px 0 0 0; padding:6px 10px;}
	#status:empty {display:none;}

	#info-and-now-container {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		width: 100%;
		box-sizing: border-box;
	}

	#infos {
		flex: 5;
		text-align: left;
		padding-right: 10px;
		min-width: 0;				/* Verhindert Überlauf */
		font-style: italic;
		font-weight: bold;
	}

	#now {
		flex: 3;
		display: flex;
		flex-direction: column;		/* Speed und Distanz übereinander */
		align-items: flex-end;
		text-align: right;
		font-weight: bold;
		color: blue;
	}

	#speed, #totalDistance {
		width: 100%;
		text-align: right;
	}

	#debriefing {margin-top:10px; color:blue;}
	#timelapse input {vertical-align:middle; margin-left:8px; width:200px; max-width:60vw;}
	#animation-stats {margin:10px 0; padding:10px; background:#f8f9fa; border-radius:5px;}
	.stats-row {display:flex; justify-content:space-between; margin-bottom:5px;}
	.stats-row:last-child {margin-bottom:0;}

	#logbook {
		height: 22px;				/* Einzeiler */
		margin-top: 2px;
		color: black;
		overflow: hidden;
	}

	#map {height:50vh; margin-top:5px;}
	#footer {background-color:#cccccc; margin-top:3px; font-size:14px; padding:5px 10px;}

	/* wie in regatta.html: Eckenrundung, wenn Buttons einer btn-group ausgeblendet sind */
	.btn-group .btn:first-child:not(.d-none) {
		border-top-left-radius: 0.375rem !important;
		border-bottom-left-radius: 0.375rem !important;
	}
	.btn-group .btn:last-child {
		border-top-right-radius: 0.375rem !important;
		border-bottom-right-radius: 0.375rem !important;
	}