/* Update this style in your existing CSS */
a {
	color: #007BFF; /* Set the link color to a pleasant blue (you can choose any color you prefer) */
	text-decoration: none; /* Remove underline */
}

a:hover {
	color: #0056b3; /* Change color on hover for visual feedback */
}

.driver-link {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: inherit; /* Inherit the text color from the parent */
}

.number-value {
	text-align: right;
}

.driver-link:hover {
	/* Optional: Add hover styles if needed */
	background-color: #ddd; /* Change the background color on hover */
}
body {
	font-family: Arial, sans-serif;
	background-color: #f2f2f2;
	margin: 0;
	padding: 0;
}

h1 {
	background-color: #333;
	color: #fff;
	padding: 15px;
	text-align: center;
	margin: 0;
}

button {
	background-color: #007BFF;
	color: #fff;
	padding: 10px 20px;
	border: none;
	cursor: pointer;
	margin: 5px;
	font-size: 14px;
}

button:hover {
	background-color: #0056b3;
}

.table-container {
	box-sizing: border-box; /* Include padding and border in the width calculation */
	float: left; /* Float the container to achieve side-by-side placement */
	margin-bottom: 20px; /* Adjust margin as needed */
	margin-left: 8px;
	margin-right: 8px;
}

.results-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 0px 0px 2px;
}


table {
	width: 100%;
	display: block; /* Set the display property to block */
	border-collapse: collapse;
	background-color: #fff;
	border: 1px solid #ddd;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

th, td {
	padding: 8px;
	text-align: left;
}

th {
	background-color: #333;
	color: #fff;
}

tr:nth-child(even) {
	background-color: #f2f2f2;
}

tr:hover {
	background-color: #ddd;
}

.tabs-container {
	display: flex;
	background-color: #f2f2f2;
	padding: 10px;
	clear: both;
}

/* CSS for Dropdown Tabs */
.tabs-dropdown .dropdown-tabs-container {
	position: relative;
	display: inline-block;
	background-color: #f2f2f2;
}

.tabs-dropdown .dropdown-tabs-container .dropdown-content {
	display: none;
	position: absolute;
	left: 0;
	background-color: #f9f9f9;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}


.tabs-dropdown .dropdown-tabs-container .dropdown-content a {
	color: black;
	padding: 10px;
	text-decoration: none;
	display: block;
}

.tabs-dropdown .dropdown-tabs-container .dropdown-content a:hover {
	background-color: #45a049;
	color: white;
}

.tabs-dropdown .dropdown-tabs-container:hover .dropdown-content {
	display: block;
}

.tabs-dropdown .dropdown-tabs-container.active .dropdown-content {
	display: block;
}

.tabs-dropdown .dropdown-tabs-container.active .round-tab {
	background-color: grey;
}

.tabs-dropdown .round-tab-dropdown::after {
	content: ' ▼';
}

/* Selected tab styling (disabled look) */
.tabs-dropdown .dropdown-content .selected {
	background-color: #d3d3d3; /* Light gray */
	color: #808080; /* Gray text */
	pointer-events: none;
	cursor: default;
}

.tabs-dropdown .dropdown-content .selected:hover {
	background-color: #45a049;
	color: white;
}

.round-tab {
	padding: 10px;
	margin-right: 10px;
	cursor: pointer;
	text-decoration: none;
	color: #333;
	border: 1px solid #ccc;
	border-radius: 5px;
	background-color: #fff;
	transition: background-color 0.3s ease;
}

.round-tab.selected {
	background-color: #4CAF50;
	color: #fff;
}

.round-tab:hover {
	background-color: #ddd;
}

.row-with-bar {
	position: relative;
}

.time-bar {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #4CAF50; /* Color of the bar */
	opacity: 0.3; /* Adjust the opacity as needed */
}


.summary-table {
	margin-top: 20px;
	width: 100%;
	border-collapse: collapse;
}

.summary-table th,
.summary-table td {
	border: 1px solid #ddd;
	padding: 8px;
	text-align: left;
}

.summary-table th {
	background-color: #4CAF50;
	color: #fff;
}

.highlighted-row {
	background-color: #fff176 !important; /* Use a cooler shade of yellow */
}
.highlighted-cell {
	background-color: #fff176 !important; /* Use a cooler shade of yellow */
}

.triangle-container {
	width: 30px;
	position: relative;
	display: inline-block;
}

.triangle-up {
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 16px solid #4CAF50; /* Green color, change it to your desired color */
	display: inline-block;
}

.triangle-down {
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 16px solid #FF0000; /* Red color, change it to your desired color */
	display: inline-block;
}

.number {
	position: absolute;
	top: 50%;
	left: 80%;
	transform: translate(-50%, -50%);
	color: #000; /* Text color, change it to your desired color */
	font-size: 14px; /* Font size, change it to your desired size */
	font-weight: bold;
	text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff; /* Border effect */
}

.table-set {
	clear: both; /* Ensure that the table set starts on a new line */
}

.completed-group {
	background-color: rgba(76, 175, 80, 0.6);
}

/* Add the following styles for highlighting the active and next groups */
.active-group {
	background-color: rgba(76, 175, 80, 0.9);
	color: #fff;
}

.last-call-group-text {
	animation: flash-last-call-text 1s infinite; /* Add a flashing animation for the next group */
}

.last-call-group {
	animation: flash-last-call 1s infinite; /* Add a flashing animation for the next group */
}
.next-group {
	animation: flash 1s infinite; /* Add a flashing animation for the next group */
}
.last-call-group-simulation {
	animation: flash-last-call 0.2s infinite; /* Add a flashing animation for the next group */
}
.next-group-simulation {
	animation: flash 0.2s infinite; /* Add a flashing animation for the next group */
}

.next-group .vest-number, .last-call-group .vest-number {
	font-weight: bold !important;
}

@keyframes flash-last-call {
	0% { background-color: red; color: white} /* Flashing color (yellow in this case) */
	50% { background-color: transparent;} /* Flashing color (orange in this case) */
	100% { background-color: red; color: white} /* Flashing color (yellow in this case) */
}

@keyframes flash-last-call-text {
	0% { color: white;} /* Flashing color (yellow in this case) */
	50% { color: red} /* Flashing color (orange in this case) */
	100% {color: white;} /* Flashing color (yellow in this case) */
}

@keyframes flash {
	0% { background-color: #FFFF00; } /* Flashing color (yellow in this case) */
	50% { background-color: #FFFF00; } /* Flashing color (orange in this case) */
	100% { background-color: #FFFF00; } /* Flashing color (yellow in this case) */
}

/* Add the following styles for the time indication in the header */
.group-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 10px;
	margin-bottom: 10px;
}

#qrcode {
	width: 200px;
	height: 200px;
}

.timeline-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 20px;
	margin-bottom: 60px;
	margin-left: 10px;
	margin-right: 10px
}

.timeline-event {
	position: relative;
	flex: 1;
	height: 20px;
	background-color: #ddd;
	border-radius: 15px 0px;
}

.timeline-event.completed {
}

.timeline-event.current {
	background-color: rgba(76, 175, 80, 0.9)
}

.timeline-event-text {
	font-size: 16px;
	font-weight: bold;
	color: #333;
	position: absolute;
	top: 30px;
	left: 10%;
	transform: translateX(-10%);
}


.podium {
	display: flex;
	justify-content: space-around;
	align-items: flex-end;
	margin-top: 50px;
	width:90%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50px;
}

.stand-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.stand {
	width: 120px;
	background-color: #ddd; /*#a9a9a9;*/ /* silver */
	border-radius: 5px;
	margin: 0 5px; /* reduced margin */
}

.gold .stand {
	height: 100px; /* 1x height of gold */
	order: 2; /* place gold in the middle */
}

.bronze .stand {
	height: 50px; /* 1/2 height of gold */
	order: 3; /* place silver on the right */
}

.silver .stand {
	height: 66.67px; /* 2/3 height of gold */
	order: 1; /* place bronze on the left */
}

.medal {
	font-size: 2em;
	margin-bottom: 10px;
	position: relative;
	bottom: -127px;
}

.rider-name {
	margin-top: 5px;
	text-align: center;
	font-size: 18px;
}


@keyframes glow {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
	100% {
		opacity: 1;
	}
}

@keyframes glow-absolute {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.2;
	}
	100% {
		opacity: 1;
	}
}

.glowing-text {
	font-size: 90%;
	color: white;
	font-weight: normal;
	animation: glow 2s infinite;
}

.glowing-text-simulation {
	font-size: 90%;
	color: white;
	font-weight: normal;
	animation: glow 0.2s infinite;
}

#hidden-image, #hidden-image-simulation {
	position: absolute;
	top: 0;
	left: -100%; /* Start off-screen */
	width: 100%;
	height: 100%;
	background-color: white;
	opacity: 0;
	display: flex;
	justify-content: center; /* Centers horizontally */
	align-items: center; /* Centers vertically */
}

#visible-image, #visible-image-simulation {
	position: absolute;
	top: 0;
	right: -100%; /* Start off-screen */
	width: 100%;
	height: 100%;
	background-color: white;
	opacity: 1;
	display: flex;
	justify-content: center; /* Centers horizontally */
	align-items: center; /* Centers vertically */
}

#hidden-image img, #hidden-image-simulation img, .vendor-logo, #visible-image img, #visible-image-simulation img {
	min-width: 95vw; /* 2/3 of the viewport width */
	min-height: 95vh; /* 2/3 of the viewport height */
	max-width: 100%; /* Prevents overflowing */
	max-height: 100%;
	transform: translate(-50%, -50%);
	position: absolute;
	top: 50%;
	left: 50%;
	object-fit: contain; /* Maintains aspect ratio */
}

tr.ok-row {
	background-color:rgba(76, 175, 80, 0.2)
}

tr.inactive-row {
	color: #777;
}

.highlight {
	background-color: yellow;
	animation: blink 1s forwards;
}

@keyframes blink {
	0% {
		background-color: yellow;
	}
	100% {
		background-color: transparent;
	}
}

#visible-image.hidden {
	animation: slideOut 1s ease-out forwards; /* Animation for sliding out */
	right: 100%;
	opacity: 0;
}

#hidden-image.visible {
	animation: slideIn 1s ease-out forwards; /* Animation for sliding in */
	left:-100%;
	opacity: 1;
}

#hidden-image-simulation.visible {
	animation: slideIn 0.3s ease-out forwards; /* Animation for sliding in */
	left:0;
	opacity: 1;
}

@keyframes slideIn {
	0% {
		left: 0; /* Start off-screen */
		opacity: 0;
	}
	100% {
		left: 0; /* Slide in from the left */
		opacity: 1;
	}
}

@keyframes slideOut {
	0% {
		right: 0; /* Start off-screen */
		opacity: 1;
	}
	99% {
		right: 0; /* Slide in from the left */
		opacity: 0;
	}
	100% {
		z-index: 0; /* Slide in from the left */
		opacity: 0;
	}
}

.personal-best-lap {
	color: green;              /* Sets the text color to green */
	font-weight: bold;         /* Makes the text bold */
	text-shadow:               /* Adds the white border */
			-1px -1px 0 #fff,
			1px -1px 0 #fff,
			-1px 1px 0 #fff,
			1px 1px 0 #fff;
}

.session-best-lap, .session-best-lap a {
	color: purple;              /* Sets the text color to green */
	font-weight: bold;         /* Makes the text bold */
	text-shadow:               /* Adds the white border */
			-1px -1px 0 #fff,
			1px -1px 0 #fff,
			-1px 1px 0 #fff,
			1px 1px 0 #fff;
}

/* ───────────────────────────────────────────────
   THREE‑BOX LAP INDICATOR  (pure styling only)
   ─────────────────────────────────────────────── */

.lap-boxes{
	text-align: center;
	min-width: 17px;
}

.lap-box{
	align-items:center;

	font:600 .85rem/1 sans-serif;  /* default digit size */
	color:#333;
	background:#f5f5f5;         /* default grey           */
	user-select:none;
	transition:background .15s,color .15s,font-size .15s;
}

/* ──STATE MODIFIERS───────────────────────────── */
.lap-boxes.current{            /* lap reached, running    */
	background:#fff176;        /* yellow                  */
}

.lap-boxes.flag{               /* race finished           */
	background:#fff176;        /* yellow                  */
	font-size:90%;          /* slightly bigger         */
}

.lap-boxes.done{               /* lap completed           */
	background:rgba(76, 175, 80, 0.4);      /* green                   */
	font-size:90%;
}