#container {
	display: flex;
	margin: 0 auto;
	padding: 0;
}
#time_sel {
	width: 400px;
	max-width: 450px;
}
fieldset {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px; /* Adds space (gutter) between items */
}
@media only screen and (max-width: 600px) {
	#num_sel, #date_sel, #time_sel, select {
		margin: 0 auto !important;
		width: 100%
	}
	#date, #time {
		padding: 0 !important;
	}
	.e-atc-qty-button-holder {
		margin: 0 auto;
	}
	select {
		text-align: center;
	}
	fieldset {
		padding: 0 !important;
	}
}
#date, #time {
	padding: 0 20px;
	margin: 0 auto;
}
#date-picker {
	display: none;
}
.nextMonthDay {
	color: rgba(57,57,57,0.7) !important;
}
.flatpickr-disabled {
	color: rgba(57,57,57,0.3) !important;
}
fieldset.radio-button-group {
	border: 0
}
.radio-button-group input[type="radio"] {
	/* Hide the default radio button visual, but keep it accessible for screen readers and keyboard navigation */
	display: none;
}

.radio-button-group label {
	/* Style the labels to look like buttons */
	text-align: center;
	padding: 10px 15px;
	border: 1px solid #ccc;
	border-radius: 4px;
	cursor: pointer;
	background-color: #f4f4f4;
	/* Add spacing between "buttons" */
	margin-right: 5px;
	margin-bottom: 5px;
	display: inline-block;
	width: 100px;
}

.radio-button-group input[type="radio"]:checked + label {
	/* Styles for the selected (checked) state */
	background-color: #42a5f5; /* Example: blue background for selected was #007bff*/
	color: white;
	border-color: #42a5f5;
}

.radio-button-group label:hover {
	/* Add hover effect */
	background-color: #e9e9e9;
}

.radio-button-group input[type="radio"]:checked + label:hover {
	background-color: #0056b3; /* Darker blue on hover for selected state */
}

/* Optional: improve focus management for keyboard users */
.radio-button-group input[type="radio"]:focus + label {
	outline: 2px solid #42a5f5;
	outline-offset: 2px;
}