/* Styling the dropdown select */
/* Style for the container to align elements */
.race-select-container {
    display: flex; /* Use flexbox to align elements horizontally */
    justify-content: space-between; /* Space between the dropdown and button */
    align-items: center; /* Align vertically in the center */
    max-width: 400px; /* Limit the container width (optional) */
    margin: 20px 0; /* Add margin to the container for spacing */
}

/* Style for the select dropdown */
.race-select {
    width: 70%; /* Make the dropdown take up 70% of the container width */
    padding: 8px 12px; /* Add padding for better readability */
    font-size: 14px; /* Adjust font size */
    border: 1px solid #ccc; /* Add a light border */
    border-radius: 4px; /* Rounded corners for the dropdown */
    outline: none; /* Remove the default focus outline */
}

/* Style for the button */
.race-button {
    background-color: #007bff; /* Set a blue background color */
    color: white; /* White text color */
    padding: 10px 12px; /* Decrease button height by reducing padding */
    font-size: 13px; /* Adjust font size to make it smaller */
    border: none; /* Remove the default border */
    border-radius: 4px; /* Rounded corners for the button */
    cursor: pointer; /* Change cursor to pointer */
    transition: background-color 0.3s ease; /* Add transition effect for hover */
    margin-left: 10px; /* Add a small margin to the left of the button */
}

    .race-button:hover {
        background-color: #0056b3; /* Darker blue on hover */
    }

    /* Optional: Add focus styling for accessibility */
    .race-select:focus, .race-button:focus {
        outline: none; /* Remove default outline */
        border-color: #007bff; /* Add a blue border on focus */
    }