body{
	background-color: #e1e0ff;
	margin: 0;
	padding: 0;
	border: 0;
}
#container {
	width: 95%; /* Changed from 910px to 95% for a wide look */
	max-width: 1200px; /* Optional: keeps it from getting TOO wide on giant monitors */
	margin: 0px auto;
	padding: 20px; /* Added some breathing room */

/*	width: 910px;
	margin: 0px auto;
	padding: 0;
*/	border: 0;
	background-color: #e1e0ff;
	background-image: url('../images/newchakra_bg.jpg'),;
	font-family: Arial, sans-serif;
	font-size: 20px;
}
#column_l {
/*	width: 700px;
	padding: 0 205px;
*/	position: relative;
	/*float: left;*/
	margin: 0;
}
#column_report {
/*	width: 600px;
	padding: 0 155px;
*/	position: relative;
	/*float: left;*/
	margin: 0;
}
#column_l img {
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
#column_l p{
	/*text-align:justify;
	text-indent:30px;*/
}
        .w3{width:200px }
        .report{width:85%}
        /*.bdr{width:700px;}*/
        .greyele{font:normal 20px verdana,Arial; color:#800000}
        .lightele{font:normal 20px verdana,Arial; color:#1F586D}
        .bele{font:normal 17px verdana,Arial;}
        div.spacert{ background-color:#ffe5cc; border-top:1px solid #ffc891; clear: both; line-height:5px}
        div.spacerb{ background-color:#ffe5cc; border-bottom:1px solid #ffc891; clear: both; line-height:5px}
        .textbox {FONT-SIZE: 12px; FONT-FAMILY: verdana,Arial}
        div.leftflow{ float:left; margin-left:5px;}
        div.spacer {clear: both; line-height:5px}
        div.spacer15 {clear: both; line-height:15px}
        .pad4{ padding:4px 4px 4px 4px}


/* Allow the right-side container to take up the remaining space */
div.leftflow.bele:not(.w3) {
	float: none;
	overflow: hidden;
	display: block;
}

/* Make the textboxes expand to 100% of their container */
#nameTextBox, #cityTextBox, #EmailTextBox {
	width: 100% !important;
	max-width: 400px; /* Limits how wide they get so they don't look stretched on huge screens */
	box-sizing: border-box; /* Ensures padding doesn't break the width */
}

/* Ensure the DropDowns stay neatly aligned */
select {
	margin-bottom: 5px;
}

/* Mobile Styles */
@media screen and (max-width: 600px) {
	#container {
		width: 100%;
		padding: 10px;
	}

	/* Make labels and input containers stack vertically */
	div.leftflow {
		float: none !important;
		width: 100% !important;
		margin-left: 0 !important;
		display: block;
	}

	/* Make the textboxes and dropdowns fill the screen width */
	input[type="text"], select {
		width: 100% !important;
		margin-bottom: 10px;
		font-size: 16px !important; /* Prevents iOS from auto-zooming on focus */
	}

	/* Adjust the header image for small screens */
	#column_l img {
		width: 100% !important;
		height: auto;
	}

	/* Remove those spacer divs that might create too much gaps on mobile */
	.spacer15 {
		line-height: 10px;
	}
	/* On mobile, we want the labels above, but the dropdowns stay together */
	.inline-group {
		width: 100%;
	}

		/* Make the individual dropdowns grow to fill the row equally */
		.inline-group select {
			flex: 1;
			min-width: 0; /* Prevents dropdowns from pushing off screen */
			width: auto !important; /* Overrides the fixed widths */
		}

}
/* This ensures the dropdowns stay side-by-side even on small screens */
.inline-group {
	display: inline-flex;
	flex-wrap: nowrap; /* Prevents them from jumping to the next line */
	gap: 5px; /* Adds a nice little space between boxes */
	align-items: center;
}

#reset, #continueButton, #backButton {
	padding: 8px 15px;
	cursor: pointer;
	border-radius: 4px;
	border: 1px solid #ffc891;
	background-color: #fff;
	transition: background 0.3s;
}

	#reset:hover, #continueButton:hover, #backButton:hover {
		background-color: #ffe5cc;
	}

/* Target the city/town container specifically */
/*#form2 .leftflow.bele {
	display: inline-flex;
	align-items: flex-start;*/ /* Aligns with the top of the colon */
	/*gap: 10px;
	width: auto;
}*/

/* Ensure the city textbox/dropdown stays contained */
/*#cityTextBox, .city-selector-class {
	display: inline-block;
	vertical-align: top;
	margin-top: -2px;*/ /* Micro-adjustment to snap it to the colon height */
/*}*/


/* This targets the container holding the image and the text */
.chart-header-container {
	display: flex;
	align-items: center; /* Vertical centering */
	gap: 40px; /* This is your "breathing room" */
	margin-bottom: 30px; /* Space before the text starts below */
}

/* Ensure the birth data text stands out */
.birth-data-text {
	line-height: 1.6;
	font-size: 1.1em;
}

@media screen and (max-width: 600px) {
	.chart-header-container {
		flex-direction: column; /* Stack them on mobile */
		gap: 20px;
		text-align: center;
	}
}

.logo-wrapper {
	width: 100% !important;
	display: block !important; /* Switch to block for margin-auto support */
	text-align: center !important; /* Traditional centering */
	padding: 15px 0;
	clear: both !important; /* Breaks away from any floats above it */
	position: relative;
}

.centered-logo {
	display: inline-block !important; /* Allows text-align: center to work */
	margin: 0 auto !important; /* Centers it if it acts like a block */
	width: auto !important; /* Keeps original resolution */
	max-width: 100% !important; /* Mobile safety */
	height: auto;
}