// <uniquifier>: Use a unique and descriptive class name
	// <weight>: Use a value from 200 to 900
	
	.inconsolata-<uniquifier> {
		font-family: "Inconsolata", serif;
		font-optical-sizing: auto;
		font-weight: <weight>;
		font-style: normal;
		font-variation-settings:"wdth" 100;
		}
	.montserrat-<uniquifier> {
		font-family: "Montserrat", serif;
		font-optical-sizing: auto;
		font-weight: 500;
		font-style: normal;
		}
	
	body {
		font-family: inconsolata, sans-serif;
		background-color: #f8f9fa;
		padding: 20px;
		}
		
	h1 {
		font-family: inconsolata, sans-serif;
		text-align: left;
		color: #343a40;
		}		
		
	h2, h3 {
		font-family: inconsolata, sans-serif;
		text-align: center;
		color: #343a40;
		}
	table {
		width: 100%;
		border-collapse: collapse;
		margin: 20px 0;
		background: #fff;
		}
	table th, table td {
		border: 1px solid #dee2e6;
		padding: 10px;
		text-align: left;
		}
	table th {
		background-color: #343a40;
		color: #fff;
		cursor: pointer;
		}
	table tbody tr:nth-child(even) {
		background-color: #f8f9fa;
		}
	table tr:hover {
		background-color: #f0f0f0 !important;
		color: #333 !important;
		}
	td {
		font-size: 1.2em;
		}
			
	form {
		margin-bottom: 20px;
		background: #fff;
		padding: 20px;
		border-radius: 5px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		}
	label {
		display: inline-grid;
		margin-top: 10px;
		}
	
	input, select, button {
		
		margin: 5px 0;
		border: 1px solid #ced4da;
		border-radius: 4px;
		}
	button {
		background-color: #007bff;
		color: #fff;
		border: none;
		padding: 10px 20px;
		font-size: 16px;
		cursor: pointer;
		border-radius: 5px;
		}
	button:hover {
		background-color: #0056b3;
		}
		
	[type=text], [type=password], [type=date], [type=datetime], [type=datetime-local], [type=month], [type=week], [type=email], [type=number], [type=search], [type=tel], [type=time], [type=url], [type=color], textarea {
		
		
	}
	select {
		
	}
	
	.mainFilters {
		
		}	
	.aria  {
		text-align: center;
		}
	.status-icon {
		font-size: 1.5em;
		}
	.active-row {
		background-color: #d4edda;
		}
	.inactive-row {
		background-color: #f8d7da;
		}
	.close {
		color: #aaa;
		float: right;
		font-size: 28px;
		font-weight: bold;
		}
	.close:hover,
	.close:focus {
		color: black;
		text-decoration: none;
		cursor: pointer;
		}	
	.close-btn {
		color: #000;
		float: right;
		font-size: 28px;
		font-weight: bold;
		cursor: pointer;
		}
	.close-btn:hover {
		color: #ff0000;
		}		
	.no-records {
		text-align: center;
		color: #6c757d;
		}
	.logo {
		width:275px;
		margin:0;
	}
	p .logo-sm {
		width:180px;
		margin:0;
	}
	
	#loadingIndicator{
	
	}
	
	#detailsModal {
		display: none;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: white;
		border: 1px solid #ddd;
		border-radius: 5px;
		padding: 20px;
		z-index: 1000;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
		}

	/* Dark mode */		
		:root {
			--bg-color: #f8f9fa;
			--text-color: #343a40;
			--table-bg: #fff;
			--table-border: #dee2e6;
		}

		[data-theme="dark"] {
			--bg-color: #343a40;
			--text-color: #f8f9fa;
			--table-bg: #495057;
			--table-border: #6c757d;
		}

		body {
			background-color: var(--bg-color);
			color: var(--text-color);
		}

		table {
			background-color: var(--table-bg);
		}

		table th, table td {
			border-color: var(--table-border);
		}	


	
	/* Modal styles */
	.modal {
		display: none;
		position: fixed;
		z-index: 1;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: auto;
		background-color: rgba(0, 0, 0, 0.5);
		}
	
	.modal-content {
		background-color: #fff;
		margin: 10% auto;
		padding: 20px;
		border-radius: 5px;
		width: 80%;
		max-width: 600px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
		}
	
	.modal-content label {
		display: block;
		font-weight: bold;
		margin-top: 10px;
		}
	
	.modal-content input, .modal-content select {
		width: 95%;
		padding: 10px;
		margin: 10px 0;
		border: 1px solid #ced4da;
		border-radius: 4px;
		}
	
	#campaignChart{
		max-height:380px;
	}
	/* Responsive */		
	@media (max-width: 768px) {
		table {
			font-size: 0.9em;
			}
			table th, table td {
				padding: 8px;
				}
		}