.textnoopacity {
				opacity: 1; /* Fully opaque  text */
			}
		
			.texte-avec-contour {
				opacity: 1;
				text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black; /* Contour blanc */
			}
		
		
			.button-bar {
				display: flex;
				justify-content: center;
				width:100%;
			}

			/* Style the button bar */
			.styled-button-bar {
				background-color: black;
				border-radius: 0 0 10px 10px;
				padding-left: 0px;
				padding-right: 0px;
			}
			/* Style the buttons to occupy 100% height */
			.styled-button-bar .btn {
				height: 100%;
				background-color: #343a40; /* Dark gray background color */
				border: none; /* Remove borders */
				color: white; /* White text color */
			}

			/* Style the gray vertical line */
			.styled-button-bar .btn:not(:last-child) {
				border-right: 1px solid gray;
			}

			/* Round the bottom left corner of the first button */
			.styled-button-bar .btn:first-child {
				border-radius: 0 0 0 10px;
			}
			
			.styled-button-bar .btn:last-child {
				border-radius: 0 0 10px 0;
			}

		
		
			/* Custom styles for the toggleable button */
			.btn-toggle2 {
				background-color: #CCCCCC; /* Default color for unchecked state */
				color: white;
				border-color: #FFFFFF;
				border-radius: 50%; /* Makes the button circular */
				text-align: center;
				line-height: 12px; /* Vertically center text */
				cursor: pointer;
			}
			.btn-toggle2.active {
				background-color: #27ae60; /* Color for checked state */
				color: white;
				border-color: #27ae60;
			}
			
			
			.btn-toggle {
				background-color: #E7E8EC; /* Default color for unchecked state */
				color: black;
				border-color: #232D23;
			}

			.btn-toggle.active {
				background-color: #27ae60; /* Color for checked state */
				color: white;
				border-color: #27ae60;
			}
		
			#info-div {
				position: absolute;
				background-color: #000000;
				opacity: 0.55;
				padding: 0px;
				margin-left:1px;
				margin-right:1px;
				min-width: 189px;
				display: block; /* Initially hidden */
			}
			#info-div-time {
				position: absolute;
				//background-color: #000000;
				opacity: 0.8;
				padding: 3px;
				fontsize: 13px;
				display: block; /* Initially hidden */
			}
			#gmap { top: 0; bottom: 0; width: 100%; min-height: 600px}
			@font-face{
			  font-family: "fbold";
			  src: url("fonts/futura_mdbtmedium.ttf") format("truetype");
			}



			a:link {
			  color: white;
			  background-color: transparent;
			  text-decoration: none;
			}

			a:visited {
			  color: white;
			  background-color: transparent;
			  text-decoration: none;
			}

			a:hover {
			  color: pink;
			  background-color: transparent;
			  text-decoration: underline;
			}

			a:active {
			  color: white;
			  background-color: transparent;
			  text-decoration: underline;
			}

			.white-popup {
				position: relative;
				background: #FFF;
				padding: 20px;
				width: auto;
				max-width: 500px;
				margin: 20px auto;
			  }
  
			.rounded-rectbottom {
				background: white;
				opacity:1.0;
				border-radius: 6px;
			}
			
			
			.rounded-rect {
				background: black;
				opacity:0.8;
				border-top-right-radius : 10px;
				border-bottom-right-radius : 10px;
				//box-shadow: 0 0 50px -25px black;
			}
			 
			.rounded-recticon {
				background: black;
				opacity:0.8;
				margin-left:0px;
				border-top-right-radius : 10px;
				border-bottom-right-radius : 10px;
				//box-shadow: 0 0 50px -25px black;
			}
			
			.flex-center {
				position: absolute;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			 
			.flex-center-bottom {
				position: absolute;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.flex-center.left {
				left: 0px;
			}
			 
			.flex-center.right {
				right: 0px;
			}
			 
			.flex-center.bottom {
				bottom: 0px;
			}
			
			.sidebar-content {
				position: absolute;
				width: 100%;
				top: 80px;
				height: 85%;
				font-family: Arial, Helvetica, sans-serif;
				font-size: 30px;
				color: gray;
			}
			 
			.sidebar-content-bottom {
				//position: absolute;
				  display: inline-block;
				  vertical-align: middle;
				width: 100%;
				top: 0px;
				height: 100%;
				font-family: Arial, Helvetica, sans-serif;
				font-size: 25px;
				color: gray;
			}
			
			.sidebar-toggle {
				position: absolute;
				width: 1.8em;
				height: 2.0em;
				overflow: visible;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			 
			.sidebar-toggle.left {
				right: -1.5em;
			}
			 
			.sidebar-toggle.right {
				left: -1.5em;
			}
			
			.sidebar-toggle.bottom {
				//bottom: -1.5em;
			}
			
			.sidebar-toggle:hover {
				color: #0aa1cf;
				cursor: pointer;
			}
			 
			.sidebar {
				transition: transform 1s;
				z-index: 1;
				width: 300px;
				height: 100%;
			}


			
			.left.collapsed {
				transform: translateX(-300px);
			}
			 
			.right.collapsed {
				transform: translateX(295px);
			}
			
			
			.sidebarbottom {
				transition: transform 1s;
				z-index: 1;
				width: 100%;
				height: 270px;
			}
			
			.bottom.collapsed {
				transform: translateY(245px);
			}

		
			.sidebarbottombig {
				transition: transform 1s;
				z-index: 1;
				width: 100%;
				height: 470px;
			}
			
			.bottom.collapsedbig {
				transform: translateY(445px);
			}
			
			
		.map-overlay-video {
			font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
			position: absolute;
			width: 25%;
			top: 10px;
			left:20px;
			z-index: 1;
			padding: 3px;
			transition: transform 1s;
			z-index: 1;
			resize: both; /* Enable resizing */
            overflow: auto; /* Enable scrollbars when content overflows */
		}
		.map-overlay-video .map-overlay-inner {
			background-color: #0092E9;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
			border-radius: 3px;
			padding: 10px;
			margin-bottom: 10px;
		}
		
		.map-overlay-btnData {
			font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
			position: absolute;
			width: 50%;
			top: 5px;
			left:5px;
			z-index: 1;
			padding: 3px;
			transition: transform 1s;
			z-index: 1;
		}
		
		
		.map-overlay-accelerometer {
			font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
			position: absolute;
			width: 50%;
			top: 60px;
			left:10px;
			z-index: 1;
			padding: 3px;
			transition: transform 1s;
			z-index: 1;
		}
		
		.map-overlay-sectors {
			font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
			position: absolute;
			width: 50%;
			top: 10px;
			left:50px;
			z-index: 1;
			padding: 3px;
			transition: transform 1s;
			z-index: 1;
		}
		.map-overlay-sectors .map-overlay-inner {
			background-color: #000000;
			opacity: 0.8;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
			border-radius: 3px;
			padding: 10px;
			margin-bottom: 10px;
		}
		
		.map-overlay-geocode {
			font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
			position: absolute;
			width: 60%;
			top: 10px;
			z-index: 1;
			margin-top: 7px;
			margin-left: 7px;
			padding: 3px;
			transition: transform 1s;
			left: 50%;
			transform: translate(-50%);
			z-index: 1;
		}
		.map-overlay-geocode .map-overlay-inner {
			background-color: #000000;
			opacity: 0.6;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
			border-radius: 3px;
			padding: 10px;
			margin-bottom: 10px;
		}
		
		.map-overlay {
			font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
			position: absolute;
			width: 95%;
			bottom: 270px;
			z-index: 1;
			margin-top: 7px;
			margin-left: 0px;
			padding: 3px;
			transition: transform 1s;
			left: 50%;
			transform: translate(-50%);
			z-index: 1;
		}
		 
		.map-overlay .map-overlay-inner {
			background-color: #000000;
			opacity: 0.6;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
			border-radius: 3px;
			padding: 10px;
			margin-bottom: 10px;
		}
		 
		.map-overlay-inner fieldset {
			border: none;
			padding: 0;
			margin: 0 0 10px;
		}
		 
		.map-overlay-inner fieldset:last-child {
			margin: 0;
		}
		 
		.map-overlay-inner select {
			width: 100%;
		}
		 
		.map-overlay-inner label {
			display: block;
			font-weight: bold;
			margin: 0 0 5px;
		}
		 

		 
		.map-overlay-inner button:focus {
			outline: none;
		}
		 
		.map-overlay-inner button:hover {
		box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.1);
		}
		
		.bottomcb.collapsed {
			transform: translate(-50%, 250px);
		}
		
		
		
		
				.custom-file-input {
			position: absolute;
			left: -9999px; /* Cache complètement l'input */
		}

		#uploadButton {
			height: 35px; /* Alignement avec le bouton Select */
			padding: 5px 15px;
		}

		#progressBar {
			height: 35px; /* Barre plus fine */
			border-radius: 5px;
		}
		.button-container {
			display: flex; /* Forces everything on one row */
			justify-content: space-between; /* Distributes items evenly */
			align-items: center; /* Centers items vertically */
			gap: 5px; /* Adds small spacing between buttons */
			flex-wrap: nowrap; /* Prevents wrapping onto a new line */
		}

		.styled-button-bar2 {
			display: grid;
			grid-template-columns: 40px 40px auto 100px; /* Fixe les largeurs des boutons, et laisse l'input prendre toute la place restante */
			align-items: center;
			width: 100%;
			background-color: black;
			border-radius: 0 0 10px 10px;
			padding: 5px;
			gap: 5px;
		}

		.styled-button-bar3 {
			display: grid;
			grid-template-columns: auto 40px 40px auto; /* Fixe les largeurs des boutons, et laisse l'input prendre toute la place restante */
			align-items: center;
			width: 100%;
			background-color: black;
			border-radius: 0 0 10px 10px;
			padding: 5px;
			gap: 5px;
		}
		
		.styled-button-bar2 .btn {
			height: 40px;
			text-align: center;
			background-color: #343a40;
			border: none;
			color: white;
		}

		.styled-button-bar3 .btn {
			height: 40px;
			text-align: center;
			background-color: #343a40;
			border: none;
			color: white;
		}
		
		.sync-input {
			text-align: center;
			width: 100%; /* Important pour bien occuper l'espace */
			min-width: 60px;
		}
		
		
		.lap-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			padding: 5px 10px;
			flex-wrap: nowrap;
			overflow: hidden; /* Prevents unwanted text overflow */
		}

		.lap-info {
			flex-grow: 1; /* Allows text to take all available space */
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis; /* Adds "..." if text is cut */
		}

		.todo-actions {
			display: flex;
			gap: 5px;
			align-items: center;
			flex-shrink: 0; /* Prevents icons from shrinking */
		}

		/* Move icons below when no space */
		.icons-below {
			width: 100%;
			display: block;
			margin-top: 5px;
		}