html, body {
			height: 100%;
			margin: 0;
			display: flex;
			flex-direction: column;
		}

		main {
			flex: 1;
		}
		body {
			background-color: #f1f2fa87;
			font-family: 'Segoe UI', sans-serif;
			/* Background image settings (if needed, you can adjust as required) */
			background-image: url('bg1.png');
			background-size: cover;
			background-repeat: no-repeat;
		}
		.module-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
			border-left: 1px dotted #bbb;
			border-top: 1px dotted #bbb;
		}

		.module-cell {
			border-right: 1px dotted #bbb;
			border-bottom: 1px dotted #bbb;
			padding: 12px 16px;
			font-size: 15px;
			min-height: 50px;
			background-color: #fff;
			display: flex;
			align-items: center;
		}

		.module-cell a {
			display: flex;
			align-items: center;
			gap: 8px;
			color: #333;
			text-decoration: none;
			width: 100%;
		}

		.module-cell a:hover {
			color: #0d6efd;
		}

		.module-cell i.bi {
			margin-right: 10px;
			color: #666;
			font-size: 16px;
			width: 20px;
			text-align: center;
		}

		.completed a {
			color: #198754;
			font-weight: 600;
		}

		.completed i.bi-check-circle-fill {
			color: #198754;
			font-size: 125%;
		}

		.header-title {
			font-size: 20px;
			font-weight: 600;
			margin: 20px 0 10px;
		}

		.container {
			max-width: 1100px;
		}

		@media (min-width: 576px) {
			.module-grid {
				grid-template-columns: repeat(2, 1fr);
			}
		}

		@media (min-width: 768px) {
			.module-grid {
				grid-template-columns: repeat(3, 1fr);
			}
		}

		@media (min-width: 992px) {
			.module-grid {
				grid-template-columns: repeat(4, 1fr);
			}
		}

		.action-buttons {
			margin: 40px 0 20px;
		}

		.btn-group-row {
			display: flex;
			flex-wrap: wrap;
			gap: 16px;
			justify-content: center;
			margin-top: 20px;
		}
		.card-header {
			background-color: rgba(220, 240, 255, 0.85);
		}

		.required::after {
			content: "*";
			color: red;
			margin-left: 4px;
		}
		/* Reduce vertical spacing between form groups */
		.form-label {
			margin-bottom: 0.25rem;
			font-size: 0.875rem; /* Slightly smaller font */
		}

		.form-control-sm,
		.form-select-sm {
			padding-top: 0.25rem;
			padding-bottom: 0.25rem;
			font-size: 0.8125rem;
			height: calc(1.5em + 0.5rem + 2px);
		}

		/* Reduce gutter between columns */
		.row.g-3 {
			--bs-gutter-y: 0.5rem;
		}
		/* Section title style with map icon */
		.section-title {
			display: flex;
			align-items: center;
			font-weight: 600;
			font-size: 1rem;
			color: #343a40;
			margin-top: 0.5rem;
			margin-bottom: 0.5rem;
		}
		.section-title i.bi {
			margin-right: 8px;
			font-size: 1.1rem;
			color: #0d6efd; /* Optional primary color */
		}
		.custom-file-upload {
			display: inline-block;
			color: #0d6efd;
			font-size: 1.25rem;
			cursor: pointer;
			padding: 0.5rem 0.75rem;
			border: 1px solid #ddd;
			border-radius: 4px;
			text-align: center;
			width: 100%;
			background: #f8f9fa;
		}
		.custom-file-upload:hover {
			background: #e9ecef;
		}
		.file-upload-wrapper input[type="file"] {
			display: none;
		}