/* Basic styles */
body {
    font-family: Arial, sans-serif;
    padding: 0;
    margin: 0px;
}

.table-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    display: block;
/*    padding: 5px; */
    padding-bottom: 30px;
}

table.practice-order-table {
    width: 100%;
    border-collapse: collapse;
    margin: 5px 0;
    table-layout: auto; /* Allow columns to adjust naturally */
    font-size: 12px; /* Slightly increase font size for better readability */
}

.header-row {
    background-color: #ff6300; /* Header background color */
    color: black; /* Header text color */
    text-align: center; /* Center text */
    font-weight: bold;
    height: 35px;
    width: 100%; /* Full width */
}

.current-race {
    color: red;
    font-weight: bold;
}

.next-race {
    color: green;
    font-weight: bold;
}


.title-cell {
    font-size: 24px; /* Title font size */
    padding: 10px; /* Padding around the title */
        width: 100%; /* Full width */
}

.logo-row {
    height: 20px; /* Height for the logo row */
    text-align: center; /* Center text */
    width: 100%; /* Full width */
}

.logo-cell {
    width: 20px; /* Width for the logo cell */
    text-align: center; /* Center logo */
    font-weight: bold;
    font-size: 18px;
    
}

.responsive-logo {
    max-width: 20%; /* Scale logo */
    height: auto; /* Maintain aspect ratio */
}

.event-name {
    font-size: 24px; /* Adjust the font size */
    color: black; /* Text color */
    text-align: center; /* Center align the text */
    font-weight: bold; /* Make text bold if needed */
}

.table-header-row {
    background-color: #ff6300; /* Header row background color */
    text-align: center; /* Center logo */
    width: 100%; /* Full width */
    height: 35px;
    border: 2px solid black;
}

.results-header-row {
    background-color: #ff6300; /* Header background color */
    color: black; /* Header text color */
    text-align: center; /* Center text */
    font-weight: bold;
    height: 35px;

}



@keyframes pulseHighlight {
  0%   { background-color: #ff2d2d; }  /* Live red */
  50%  { background-color: #ff9999; } /* Soft red */
  100% { background-color: #ff2d2d; }
}

.active-race-row.highlighted-race {
  animation: pulseHighlight 1.2s ease-in-out infinite;
  font-weight: bold;
  color: white !important;
  transition: background-color 0.3s ease;
}

.active-race-row {
    animation: pulseHighlight 1.2s ease-in-out infinite;
  font-weight: bold;
  color: white !important;
  transition: background-color 0.3s ease;
}

.table-header-cell {
    padding: 0px; /* Padding for header cells */
    text-align: center; /* Center align the text in header cells */
    width: auto; /* Full width */
}

/* Adjust cell widths */
.table-header-cell:first-child, /* Practice Group */
.table-header-cell:nth-child(2) { /* Class */
    width: auto; /* Adjust width of these columns */
}

.table-header-cell:last-child { /* # Riders */
    width: auto; /* Adjust width of this column */
    text-align: center; /* Center logo */
}

.table-cell {
    padding: 8px;
    text-align: center;
    border: 1px solid #ddd;
    width: auto; /* Allow table to scale based on content */
}

/* Footer Row */
.footer-row {
    background-color: #f2f2f2; /* Light grey background for the footer */
    text-align: center; /* Center align text */
    font-weight: bold; /* Make text bold */
    padding: 1px; /* Add padding for spacing */
    font-size: 1rem; /* Adjust font size for the footer */
}

.footer-logo {
    max-width: 80px; /* Adjust logo size for the footer */
    height: auto; /* Maintain aspect ratio */
}

.powered-by {
    font-size: 0.9rem; /* Slightly smaller font for the powered by text */
}

.camera-container {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
        }
        iframe {
            width: 640px;
            height: 480px;
        }
        
.practice-order-table th,
.practice-order-table td {
    padding: 4px 3px;
    text-align: center;
    white-space: nowrap;
}

.practice-order-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 10px;
}

.practice-order-table .header-row .title-cell {
    font-size: 1.5em;
    padding: 6px;
}
   
.table-headerdate-cell {
    min-width: 10px;
    width: 15px;
    padding: 2px 3px;
    font-size: 12px;
    white-space: nowrap;
}        

/* Responsive Design */
@media screen and (max-width: 720px) {
    table.practice-order-table {
        font-size: 10px; /* Smaller font size on small screens */
        
    }
    
    .table-header-cell, .table-cell {
        padding: 4px; /* Less padding on smaller screens */
    }

    .title-cell {
        font-size: 10px; /* Smaller title font size */
    }

    .responsive-logo {
        max-width: 80px; /* Smaller logo on small screens */
    }
}