.modal-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1050;
}

.custom-modal {
	width: auto;
	background: white;
	padding: 20px;
	margin-right: 20px;
	margin-left: 20px;
	border-radius: 4px;
	z-index: 10000;
	overflow: auto;
}

.modal-content {
	width: auto;
	background-color: white;
	padding: 20px;
	border-radius: 5px;
	z-index: 1051;
	max-height: 70vh;
}

.modal-content-child {
	background-color: white;
	padding: 20px;
	border-radius: 5px;
	z-index: 1051;
	height: 60vh;
}

.modal-child {
	overflow-y: auto;
}

.modal-button-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr); /* Creates 5 columns */
	grid-gap: 10px; /* Spacing between buttons */
	margin-bottom: 20px; /* Space below the grid for the close button */
}

.modal-button-grid button {
	padding: 10px;
	background-color: #007bff;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

.modal-close-button {
	margin-top: 20px;
	background-color: red;
	color: white;
	padding: 10px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

.loader-dark {
	width: 15px;
	aspect-ratio: 1;
	border-radius: 50%;
	animation: loader-dark 1s infinite linear alternate;
}

@keyframes loader-dark {
	0% {
		box-shadow: 20px 0 #000, -20px 0 #0002;
		background: #000
	}
	33% {
		box-shadow: 20px 0 #000, -20px 0 #0002;
		background: #0002
	}
	66% {
		box-shadow: 20px 0 #0002, -20px 0 #000;
		background: #0002
	}
	100% {
		box-shadow: 20px 0 #0002, -20px 0 #000;
		background: #000
	}
}

.loader-light {
	width: 15px;
	aspect-ratio: 1;
	border-radius: 50%;
	animation: loader-light 1s infinite linear alternate;
}

@keyframes loader-light {
	0% {
		box-shadow: 20px 0 #FFF, -20px 0 #EEE; /* Adjusted for visibility */
		background: #FFF; /* White background at start */
	}
	33% {
		box-shadow: 20px 0 #FFF, -20px 0 #EEE; /* Consistent with light theme */
		background: #EEE; /* Light gray for mid transition */
	}
	66% {
		box-shadow: 20px 0 #EEE, -20px 0 #FFF; /* Swap shadows for dynamic effect */
		background: #EEE; /* Light gray background */
	}
	100% {
		box-shadow: 20px 0 #EEE, -20px 0 #FFF; /* Maintains end cycle visibility */
		background: #FFF; /* Ends with a white background */
	}
}

.button-loader {
	width: 40px;
	aspect-ratio: 4;
	--_g: no-repeat radial-gradient(circle closest-side, #ffffff 90%, #051036);
	background:
		var(--_g) 0%   50%,
		var(--_g) 50%  50%,
		var(--_g) 100% 50%;
	background-size: calc(100%/3) 100%;
	animation: l7 1s infinite linear;
}
@keyframes l7 {
	33%{background-size:calc(100%/3) 0%  ,calc(100%/3) 100%,calc(100%/3) 100%}
	50%{background-size:calc(100%/3) 100%,calc(100%/3) 0%  ,calc(100%/3) 100%}
	66%{background-size:calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%  }
}

.daterangepicker .calendar-table .day {
	padding: 10px;  /* Increase padding to make the day item bigger */
	font-size: 16px; /* Increase font size for better visibility */
	width: 40px;    /* Specify or increase width */
	height: 40px;   /* Specify or increase height */
}

.section-overlay {
	position: relative;
}

.section-overlay::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(270deg, rgb(5 16 54 / 11%) 0%, #05103629 72.43%);
	z-index: 1;
}

.section-overlay > * {
	position: relative;
	z-index: 2; /* Ensure the content appears above the overlay */
}

.home-page-overlay {
	position: relative;
}

.home-page-overlay::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(270deg, rgb(5 16 54 / 21%) 0%, #0510368a 72.43%);
	z-index: 1;
}

.home-page-overlay > * {
	position: relative;
	z-index: 2; /* Ensure the content appears above the overlay */
}