body {
	font-family: 'Inter', sans-serif;
	background-color: #f0f2f5;
}
/* Custom styles to make DataTables look better with Tailwind */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
	padding: 1rem 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}
.dataTables_wrapper .dataTables_filter input {
	padding: 8px 12px;
	border-radius: 0.5rem; /* rounded-lg */
	border: 1px solid #e2e8f0; /* border-gray-300 */
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
	width: 100%;
	max-width: 300px; /* Adjust as needed */
	margin-left: 0.5rem;
	margin-right: 0.5rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
	padding: 8px 12px;
	border-radius: 0.5rem;
	border: 1px solid #cbd5e0; /* border-gray-300 */
	background-color: #ffffff; /* bg-white */
	margin: 0 4px;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	background-color: #3b82f6; /* bg-blue-500 */
	color: #ffffff; /* text-white */
	border-color: #3b82f6;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background-color: #f0f2f5; /* hover:bg-gray-100 */
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
table.dataTable thead th {
	background-color: #f8fafc;
	color: #4a5568;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.85rem;
	padding: 12px 15px;
	text-align: left;
	border-bottom: 1px solid #e2e8f0;
}
table.dataTable tbody td {
	padding: 12px 15px;
	border-bottom: 1px solid #e2e8f0;
}
table.dataTable tbody tr:nth-child(even) {
	background-color: #f0f4f8;
}
table.dataTable tbody tr:hover {
	background-color: #e2e8f0;
}
/* Make sure the search input style overrides DataTables default */
div.dataTables_filter input {
	width: auto; /* Allow DataTables to control width */
	margin-left: 0; /* Remove custom margin */
}

.dt-container .dt-length,
.dt-container .dt-search,
.dt-container .dt-info,
.dt-container .dt-paging {
	padding: 1rem 0;
   
}
.dt-container .dt-search
{
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	justify-content: flex-end;
}

.dt-container .dt-search input {
	padding: 8px 30px 8px 12px; /* Added right padding for the clear button */
	border-radius: 0.5rem; /* rounded-lg */
	border: 1px solid #e2e8f0; /* border-gray-300 */
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
	width: 100%;
	max-width: 300px; /* Adjust as needed */
	margin-left: 0.5rem;
	margin-right: 0.5rem;
}
.dt-container .dt-paging .dt-paging-button {
	padding: 8px 12px;
	border-radius: 0.5rem;
	border: 1px solid #cbd5e0; /* border-gray-300 */
	background-color: #ffffff; /* bg-white */
	margin: 0 4px;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}
.dt-container .dt-paging .dt-paging-button.current,
.dt-container .dt-paging .dt-paging-button.current:hover {
	background-color: #3b82f6; /* bg-blue-500 */
	color: #ffffff; /* text-white */
	border-color: #3b82f6;
}
.dt-container .dt-paging .dt-paging-button:hover {
	background-color: #f0f2f5; /* hover:bg-gray-100 */
}
.dt-container .dt-paging .dt-paging-button.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}


/* Make sure the search input style overrides DataTables default */
div.dt-search input {
	width: auto; /* Allow DataTables to control width */
	margin-left: 0; /* Remove custom margin */
}
/* Position the clear button relative to the dt-search div */
.dt-search {
	position: relative;
	display: flex; /* Use flexbox to align label, input, and button */
	align-items: center; /* Vertically center items */
	gap: 0.5rem; /* Space between elements within dt-search */
}
.dt-search label {
	display: flex; /* Make label a flex container for its contents */
	align-items: center; /* Vertically center items within label */
}
.clear-search-button-datatable {
	position: absolute;
	/* Position relative to the dt-search div, adjusted for input padding */
	right: 18px; /* This value needs to be carefully tuned */
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	color: #9ca3af;
	font-size: 1.25rem;
	line-height: 1;
	padding: 0;
	display: none;
	z-index: 10; /* Ensure it's above the input */
}



.chart-container {
	width: 100%;
	max-width: 800px;
	margin: 20px auto;
	padding: 20px;
	background-color: #fff;
	border-radius: 0.5rem;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}



.asset-card-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}
.asset-card-icon {
	font-size: 4rem; /* Adjust size as needed */
	opacity: 0.4;
	color: rgba(255, 255, 255, 0.8); /* Slightly less opaque white for icons */
}
.asset-card-info {
	text-align: right;
	flex-grow: 1; /* Allow info to take remaining space */
}