body {
			background-color: cornsilk;
			font-family: 'Cairo', sans-serif;
		}

		.nav-tabs .nav-link {
			color: #495057;
			font-weight: 500;
		}

		.nav-tabs .nav-link.active {
			font-weight: bold;
			background-color: #f8f9fa;
		}

		.tab-content {
			background-color: #f8f9fa;
			border: 1px solid #dee2e6;
			border-top: none;
			padding: 20px;
			border-radius: 0 0 0.375rem 0.375rem;
			
		}

		.table-container {
			margin-top: 20px;
		}

		.action-buttons {
			display: flex;
			gap: 5px;
			flex-wrap: wrap;
		}

		.action-buttons .btn {
			font-size: 0.8rem;
			padding: 0.25rem 0.5rem;
		}

		.search-container {
			margin-bottom: 20px;
		}

		.receipt-preview {
			background-color: white;
			padding: 20px;
			border-radius: 5px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
			margin-top: 20px;
		}

		.form-container {
			background-color: white;
			padding: 20px;
			border-radius: 5px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		}

		.edit-mode {
			background-color: #fff3cd;
			border-left: 4px solid #ffc107;
			padding: 15px;
			margin-bottom: 20px;
		}

		.message-modal .modal-dialog {
			max-width: 400px;
		}

		.message-modal .modal-content {
			text-align: center;
		}

		.message-modal .modal-header {
			border-bottom: none;
			justify-content: center;
		}

		.message-modal .modal-footer {
			border-top: none;
			justify-content: center;
		}

		.import-section {
			background-color: #f8f9fa;
			padding: 15px;
			border-radius: 5px;
			margin-top: 20px;
			border: 1px dashed #dee2e6;
		}

		.file-input-container {
			position: relative;
			overflow: hidden;
			display: inline-block;
		}

		.file-input-container input[type=file] {
			position: absolute;
			left: 0;
			top: 0;
			opacity: 0;
			width: 100%;
			height: 100%;
			cursor: pointer;
		}

		.summary-total {
			background-color: var(--light-color);
			font-weight: bold;
			font-size: 1.1em;
			color: var(--text-color);
		}

		.logo-container {
			text-align: center;
			margin-bottom: 20px;
		}

		.logo-container h1 {
			color: #2c3e50;
			font-weight: bold;
			margin-bottom: 5px;
		}

		.logo-container h2 {
			color: #3498db;
			font-size: 1.2rem;
			margin-bottom: 0;
		}

		.fully-paid {
			background-color: #d4edda !important;
		}

		.balance-info {
			font-size: 0.9em;
			color: #666;
		}

		.remaining-balance {
			color: #dc3545;
			font-weight: bold;
		}

		.paid-amount {
			color: #28a745;
			font-weight: bold;
		}

		.payment-status {
			font-weight: bold;
		}

		.status-paid {
			color: #28a745;
		}

		.status-pending {
			color: #ffc107;
		}

		.pupil-id {
			font-family: monospace;
			background-color: #f8f9fa;
			padding: 2px 6px;
			border-radius: 3px;
			font-size: 0.9em;
		}

		/* Updated Dashboard Styles */
		.dashboard-card {
			background-color: white;
			border-radius: 8px;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			padding: 20px;
			margin-bottom: 20px;
		}

		.dashboard-stats .card {
			text-align: center;
			transition: transform 0.2s, background-color 0.2s;
		}

		.dashboard-stats .card:hover {
			transform: translateY(-5px);
			filter: brightness(1.1);
		}

		.dashboard-stats .card-title {
			font-size: 1.2rem;
			margin-bottom: 10px;
		}

		.dashboard-stats .card-text {
			font-size: 2rem;
			font-weight: bold;
		}

		/* Specific card styles */
		.card-total-students {
			background-color: #007bff;
			border-color: #0056b3;
			color: white;
		}

		.card-total-due {
			background-color: #28a745;
			border-color: #218838;
			color: white;
		}

		.card-total-paid {
			background-color: #17a2b8;
			border-color: #138496;
			color: white;
		}

		.card-total-remaining {
			background-color: #fd7e14;
			border-color: #e0a800;
			color: white;
		}

		.card-fully-paid {
			background-color: #6f42c1;
			border-color: #5a32a3;
			color: white;
		}

		.card-current-month {
			background-color: #20c997;
			border-color: #1ba87e;
			color: white;
		}

		.card-class-kg1 {
			background-color: #5bc0de;
			border-color: #46b8da;
			color: #1a3c34;
		}

		.card-class-kg2 {
			background-color: #28a745;
			border-color: #218838;
			color: #1a3c34;
		}

		.card-class-club {
			background-color: #d1c4e9;
			border-color: #b39ddb;
			color: #1a3c34;
		}

		.backcolor {
			background-color: black;
		}

		.logo {
			position: fixed;
			/* or absolute if you prefer */
			top: 0;
			left: 0;
			margin: 10px;
			z-index: 999;
		}

		.logo2 {
			position: fixed;
			/* or absolute if you prefer */
			top: 0;
			right: 0;
			margin: 10px;
			z-index: 999;
		}

		.button-link {
			display: inline-block;
			padding: 5px 10px;
			background-color: red;
			color: white;
			text-decoration: none;
			border-radius: 5px;
			font-size: 16px;
			transition: background-color 0.3s ease;
		}

		.button-link:hover {
			background-color: black;
			color: white;
		}

		/* Updated Dashboard Card Styles */
		.dashboard-stats .card {
			text-align: center;
			transition: transform 0.2s, background-color 0.2s;
			min-height: 150px;
			display: flex;
		}

		.dashboard-stats .card:hover {
			transform: translateY(-5px);
			filter: brightness(1.05);
		}

		.dashboard-stats .card-title {
			font-size: 1.1rem;
			margin-bottom: 10px;
			font-weight: bold;
		}

		.dashboard-stats .card-text {
			font-size: 1.8rem;
			font-weight: bold;
			margin: 0;
		}

		/* Ensure all cards have the same height */
		.h-100 {
			height: 100% !important;
		}

	.modal-header {
  background-color: green;
  color: white;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

/* Make the close button white */
.modal-header .btn-close {
  filter: invert(1);           /* Inverts the default black SVG to white */
  opacity: 1;                  /* Make sure it's fully visible */
}

/* Optional: remove hover background */
.modal-header .btn-close:hover {
  background-color: rgba(255, 255, 255, 0.2); /* Light white hover effect */
}
.modal-dialog {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 1rem); /* Full screen minus a bit for spacing */
}
/* Payment Status Colors */
.bg-success {
    background-color: #28a745 !important;
}

.bg-info {
    background-color: #17a2b8 !important;
}

.bg-warning {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

.bg-danger {
    background-color: #dc3545 !important;
}

/* Status icons */
.payment-status i {
    font-size: 0.9em;
}