@charset "utf-8";

/* Base Styles */
body {
	font-family: "LatoWeb", Arial, sans-serif; /* Added fallback fonts */
	font-size: 16px; /* Use pixels or rem for better consistency */
	line-height: 1.6; /* Improved readability */
	margin: 0;
	padding: 0;
	background-color: #f8f9fa; /* Light grey background */
	color: #333; /* Darker text color */
}

/* Navigation Menu */
#menu {
	position: fixed;
	top: 0; /* Align to the very top */
    left: 0;
	height: 100vh; /* Full height */
	width: 200px; /* Slightly wider */
	background-color: #e9ecef; /* Light background for menu */
	padding-top: 20px; /* Add some top padding */
	border-right: 1px solid #dee2e6; /* Subtle border */
	overflow-y: auto; /* Allow scrolling if menu is long */
}

#nav {
	list-style: none;
	margin: 0;
	padding: 0 15px; /* Adjusted padding */
	width: 100%; /* Take full width of #menu */
}

#nav li {
	margin-bottom: 5px; /* Space between items */
}

#nav li a { /* Combined link states */
	display: block;
	padding: 8px 15px; /* Increased padding */
	text-decoration: none;
	color: #495057; /* Menu item color */
	border-radius: 4px; /* Slightly rounded corners */
	transition: background-color 0.2s ease, color 0.2s ease; /* Smooth transition */
}

#nav li a:hover,
#nav li a:focus { /* Hover/focus state */
	background-color: #dee2e6; /* Slightly darker background on hover */
	color: #212529; /* Darker text on hover */
}

#nav li a.active { /* Example active state class */
    background-color: #007bff; /* Example primary color */
    color: #fff;
}


/* Main Content Area */
#main {
	margin-left: 220px; /* Account for wider menu + padding */
	padding: 30px 40px; /* More padding */
	max-width: 960px; /* Use max-width for flexibility */
	background-color: #fff; /* White background for content */
	min-height: 100vh; /* Ensure it takes at least full height */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Subtle shadow */
    border-left: 1px solid #dee2e6; /* Match menu border */
}

/* Utility Classes (consider removing if not widely used) */
.large {
	font-size: 2.2rem; /* Use rem */
}

.waterfall {
	font-size: 10px;
	width:100%;
	overflow: hidden;
	text-shadow: 0px 0px 0px black;
	color: #000;
}

.size10{ font-size: 10px; }
.size11{ font-size: 11px; }
.size12{ font-size: 12px; }
.size13{ font-size: 13px; }
.size14{ font-size: 14px; }
.size16{ font-size: 16px; }
.size18{ font-size: 18px; }
.size20{ font-size: 20px; }
.size24{ font-size: 24px; }
.size30{ font-size: 30px; }
.size36{ font-size: 36px; }
.size48{ font-size: 48px; }
.size60{ font-size: 60px; }
.size72{ font-size: 72px; }
.size90{ font-size: 90px; }

/* Styles moved from inline block in scripts.php */
div.terms {
	width: 800px;
	height: 200px;
	border: 1px solid #ccc;
	background: #f2f2f2;
	padding: 6px;
	overflow: auto;
}

input.largerCheckbox {
    transform: scale(10); /* Note: This might need adjustment for cross-browser compatibility or better UI */
}

/* Retain specific input padding/margin, but allow Bootstrap border-radius */
input[type=text],
input[type=password] {
	padding: 5px;
	margin: 3px;
    /* border-radius: 0px !important; removed */
}

/* Keep sticky table header style */
table thead th {
    position: sticky !important; /* Keeping !important as it's likely needed for sticky positioning */
    top: 0; /* Added top: 0 for sticky positioning to work */
    background-color: #e9ecef; /* Added background to prevent content showing through */
    z-index: 100;
}