/* General Styles */

.container {
	width: 75%;
	margin: 50px auto 0;
	padding: 20px;
	border: 1px solid #ccc;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	background: white;
}

.help-text {
	font-size: medium;
	margin: 2rem 0;
}

/* Form Layout */
form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.form-row {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.form-group {
	position: relative;
	width: calc(50% - 10px);
	margin-bottom: 20px;
}

/* Input and Label Styling */
label {
	font-weight: bold;
	display: block;
	margin-bottom: 5px;
}

input,
select {
	width: 100%;
	padding: 10px;
	/*border: 1px solid #ccc;*/
	/*border-radius: 4px;*/
	box-sizing: border-box;
	box-shadow: 0 1px 3px #0000001f, 0 1px 2px #0000003d;
}

input:focus,
select:focus {
	outline: none;
	/* Remove default focus outline */
	border-color: #0056b3;
	/* Add custom focus border color */
}

button {
	padding: 10px;
	background-color: #006dae;
	color: white;
	border: none;
	margin: 0 auto;
	width: 20%;
	cursor: pointer;
}

button:hover {
	background-color: #0289D4;
}

#results {
	margin-top: 20px;
}

table {
	table-layout: fixed;
	border-spacing: 0;
	border-collapse: collapse;
}

th,
td {
	width: 20%;
	/* Divides the table into equal columns assuming there are 5 columns */
	text-align: left;
	padding: 10px;
	border: 1px solid #ccc;
}

td:nth-child(6) {
	white-space: nowrap;
}

/* Overwite some main styles */
tbody tr:last-child td, th:not(:last-child) { 
    border-bottom: 1px solid #ccc;
}

/* Error Handling */
.error {
	color: red;
	font-size: 0.875em;
	/* position: absolute; */
	top: 100%;
	left: 0;
	white-space: nowrap;
	margin-top: 2px;
	display: block;
}

input.error,
select.error {
	border-color: red;
}

/* Prevent wrapping for the Date column */
td:nth-child(5) {
	white-space: nowrap;
}


/* Ensure the select element does not inherit the error text color */
select.error {
	color: initial;
}

.selectric-disabled {
    opacity: inherit;
}

@media (max-width: 768px) {
	.container {
		width: 95%;
		margin: 20px auto;
	}

	.form-group {
		width: 100%;
		margin-bottom: 10px; 
	}

	.form-row {
		flex-direction: column;
		/* Stack form elements vertically on smaller screens */
	}
	.error {
        font-size: 0.75em; 
        margin-bottom: 5px;
    }
}