body {
	/* Initial padding-top, will be adjusted by JS */
	padding-top: 20px; /* This is your original top body padding */
	padding-bottom: 40px;
	background-color: #f8f9fa; /* Light gray background */
	transition: padding-top 0.3s ease-in-out; /* Smooth transition for padding change */
}

#fixed-alerts-container {
	position: fixed;
	bottom: 10px;
	right: 10px;
	width: 25%;
	z-index: 1050; /* Above most other content */
	background-color: rgba(248, 249, 250, 0.97); /* Slightly transparent background */
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	padding-top: 5px; /* Small padding above the first alert */
}

/* Ensure alerts inside the fixed container use Bootstrap's container for alignment */
#fixed-alerts-container .alert {
	margin-bottom: 10px; /* Space between alerts if both are shown */
}

/* No bottom margin for the last alert in the fixed container */
#fixed-alerts-container .alert:last-child {
	margin-bottom: 5px; /* Just a bit of padding at the bottom of the container */
}


.main-page-container { /* Renamed original container to avoid confusion */
	max-width: 900px; /* Max width for content */
	margin-left: auto;
	margin-right: auto;
}

.card {
	margin-bottom: 20px; /* Space between cards */
}

.form-group { /* Keep your custom padding if Bootstrap's margin isn't enough */
	padding: 5px 0;
}
/* Custom styles for specific elements if needed */
#info, #errors, #conversionsInfo, #output {
	margin-top: 15px;
	padding: 10px;
	border-radius: 5px;
}

#errors:not(:empty) { /* Only show border/padding if there's content */
	border: 1px solid #dc3545; /* Red border for errors */
}

#info:not(:empty) {
	border: 1px solid #0dcaf0; /* Info border */
}

label {
	font-weight: 500; /* Slightly bolder labels */
}

.post-back-note {
	font-size: 0.875em;
	color: #6c757d;
}