.iconify-icon {
	font-size: var(--dz-side-ico-size);
	vertical-align: middle;
}

/* This targets the full page background */
.bg-auth {
	background-color: rgb(167, 206, 250) !important;
}

/* This targets the right-side image panel */
.account-page-bg {
	background-color: rgb(167, 206, 250) !important;
	/* Optional: If you want the panel to be slightly darker/different than the page */
	/* background-color: rgba(81, 171, 245, 0.8) !important; */
}
/* Targeted fix for your specific group class */
.input-group.input-primary-o {
	align-items: stretch; /* Forces all children to be the same height */
}

.input-group.input-primary-o .form-select,
.input-group.input-primary-o .input-group-text {
	height: auto; /* Overrides any fixed heights */
	display: flex;
	align-items: center; /* Keeps the text centered vertically */
}
/* New custom background color */
.bg-primary-2 {
	background-color: rgb(3, 31, 87) !important;
	color: #ffffff !important;
}
.image-hover-overlay .overlay-menu {
   position: absolute;
   top: 8px;
   right: 8px;
   opacity: 0;
   transition: opacity 0.2s ease-in-out;
   z-index: 10;
 }
 
 .image-hover-overlay:hover .overlay-menu {
   opacity: 1;
 }
/* Custom Blue Row Class */
/* We target the table, then the body, then the row, then the cell */
table.table > tbody > tr.table-custom-blue > th,
table.table > tbody > tr.table-custom-blue > td {
	background-color: #082d8a !important;
	color: #ffffff !important;
	--bs-table-bg: #082d8a !important;
	--bs-table-color: #ffffff !important;
}

/* Ensure the text/images inside stay white */
tr.table-custom-blue th, 
tr.table-custom-blue td,
tr.table-custom-blue a {
	color: #ffffff !important;
}

.bg-primary-2 {
	background-color: rgb(3, 31, 87) !important;
	color: #ffffff !important;
}

/* Text utility */
.text-primary-2 {
	color: rgb(3, 31, 87) !important;
}

/* Link/Button utility */
.btn-primary-2 {
	background-color: rgb(3, 31, 87);
	border-color: rgb(3, 31, 87);
	color: #fff;
}

.btn-primary-2:hover, 
.btn-primary-2:focus {
	background-color: rgb(5, 45, 120);
	border-color: rgb(5, 45, 120);
	color: #fff;
}

/* Optional: Link that just changes color on hover */
a.text-primary-2:hover {
	color: rgb(5, 45, 120) !important;
	text-decoration: underline;
}

/* Star Ratings */
.star {
	font-size: 1.2rem;
	cursor: pointer;
	color: #6c757d; /* A slightly darker grey than #ccc for better contrast */
	transition: color 0.2s ease-in-out;
}

/* Active/Hovered/Selected State */
/* We include the Font Awesome classes to ensure we override any library defaults */
.star.hovered, 
.star.selected,
.star.fa-solid {
	color: #FFD700 !important; /* Gold */
}
   .map-container {
	 height: 300px;
	 width: 100%;
	 border: 1px solid #ccc;
	 margin-bottom: 1rem;
	 border-radius: 6px;
   }
   .image-hover-overlay .overlay-menu {
	  position: absolute;
	  top: 8px;
	  right: 8px;
	  opacity: 0;
	  transition: opacity 0.2s ease-in-out;
	  z-index: 10;
	}
	
	.image-hover-overlay:hover .overlay-menu {
	  opacity: 1;
	}
	.calendar-grid {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		gap: 2px;
	}
	
	.day-header {
		font-size: 0.6rem;
		font-weight: 800;
		color: #9da9bb;
		text-transform: uppercase;
		text-align: center;
		padding-bottom: 5px;
		
		cursor: default;      /* Change to 'pointer' if you want the hand */
		user-select: none;    /* Prevents the text-selection highlight */
	}
	
	.day-box {
		aspect-ratio: 1 / 1;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 0.75rem;
		position: relative !important; /* Required for the absolute stars/badges */
		border: 1px solid #f1f4f8;
		transition: all 0.2s ease;
	}
	
	/* --- 2. Sighting States & Colors --- */
	
	/* Standard Sighting */
	.sighting-active {
		background-color: #2c7be5 !important;
		color: white !important;
		font-weight: bold;
		border-radius: 4px;
	}
	
	/* Lifer (First time ever) */
	.day-lifer {
		background-color: #f5ad42 !important; /* Gold/Orange */
		color: white !important;
		font-weight: bold;
		border-radius: 4px;
		box-shadow: 0 0 10px rgba(245, 173, 66, 0.4);
	}
	
	/* Year First (First this year) */
	.day-year-first {
		background-color: #00d27a !important; /* Falcon Green */
		color: white !important;
		font-weight: bold;
		border-radius: 4px;
	}
	
	/* --- 3. Icon Indicators (Star/Check) --- */
	
	/* --- 4. Badges & Modals --- */
	.count-badge {
		position: absolute;
		bottom: -2px;
		right: -2px;
		font-size: 0.55rem;
		padding: 2px 4px;
		z-index: 6;
	}
	
	.bird-modal-img {
		width: 150px;
		height: 100px;
		object-fit: cover;
		display: block;
		border: 1px solid #d8e2ef;
	}
	
	#modalContent .list-group-item:hover {
		background-color: #f9fafd;
	}
	
	/* --- 5. Legend / Key at Bottom --- */
	.calendar-key {
		display: flex;
		flex-wrap: wrap;
		gap: 1.5rem;
		/*(padding: 1rem;*/
		border-top: 1px solid #edf2f9;
	}
	
	.key-item {
		display: flex;
		align-items: center;
		font-size: 0.75rem;
		font-weight: 600;
		color: #5e6e82;
	}
	
	.key-dot {
		width: 12px;
		height: 12px;
		border-radius: 3px;
		margin-right: 0.5rem;
	}
	
	.key-lifer { background-color: #f5ad42; }
	.key-year-first { background-color: #00d27a; }
	.key-standard { background-color: #2c7be5; }
	
	/* --- 6. Select2 Customization --- */
	
	/* 1. Ensure the rendered text container uses the full height and centers content */
	.select2-container--default .select2-selection--single .select2-selection__rendered {
		line-height: normal !important; /* Resets Select2's default 28px line-height */
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		display: flex !important;
		align-items: center !important;
		height: 100% !important;
	}
	
	/* 2. Reset the placeholder if it's still floating */
	.select2-container--default .select2-selection--single .select2-selection__placeholder {
		line-height: normal !important;
	}
	
	/* 3. Ensure the selection box itself has a consistent height */
	.select2-container--default .select2-selection--single {
		height: calc(2.1875rem + 2px) !important; /* Adjust this to match your Bootstrap input height */
		display: flex !important;
		align-items: center !important;
	}
	.select2-container--default .select2-selection--single {
		border: 1px solid #d8e2ef !important;
		height: calc(2.1875rem + 2px) !important;
		display: flex;
		align-items: center;
	}
	
	.select2-container--default .select2-selection--single .select2-selection__arrow {
		display: none;
	}
	.input-group {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: stretch;
	}
	
	/* Ensure Select2 takes up the remaining space and doesn't push the button down */
	.input-group > .select2-container--default {
		flex: 1 1 auto !important;
		width: 1% !important; /* Standard Bootstrap fix for input-groups */
		min-width: 0;
	}
	
	/* Ensure the button stays attached to the right side */
	.input-group > .btn {
		flex: 0 0 auto;
		border-top-left-radius: 0 !important;
		border-bottom-left-radius: 0 !important;
		margin-left: -1px; /* Overlap borders slightly for a clean look */
	}
	
	/* Adjust the Select2 corners when the button is present */
	.input-group > .select2-container--default .select2-selection--single {
		border-top-right-radius: 0 !important;
		border-bottom-right-radius: 0 !important;
	}
	.hover-lift {
		transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
	}
	
	.hover-lift:hover {
		transform: translateY(-5px); /* Moves the card up 5 pixels */
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important; /* Adds a deeper shadow */
	}
	/* Ensure the Select2 selection area has enough height for the flag */

	/* Fix the alignment inside the Select2 selection box */
	.select2-container--default .select2-selection--single .select2-selection__rendered {
		display: flex !important;
		align-items: center !important;
		height: 100% !important;
		padding-left: 10px !important;
	}
	
	/* Remove any browser-specific outlines/borders on the flex item */
	.select2-container--default .select2-selection--single .d-inline-flex:focus {
		outline: none !important;
		border: none !important;
	}
	
	/* Ensure the text doesn't have a weird baseline shift */
	.select2-text-align {
		line-height: 1;
		display: inline-block;
	}
	
	/* Optional: Subtle round on the flag to make it look cleaner */
	.select2-selection__rendered img {
		border-radius: 2px;
		box-shadow: 0 0 1px rgba(0,0,0,0.2); /* Soft border instead of a hard line */
	}
	.img-flag {
		display: inline-block;
		border-radius: 2px;
	}
	
	/* Styling the hover/highlight state in the dropdown list */
	.select2-container--default .select2-results__option--highlighted[aria-selected] {
		background-color: #021452 !important; /* Bootstrap Primary */
		color: white !important;
	}
	
	/* Styling the "selected" state in the dropdown list (already picked items) */
	.select2-container--default .select2-results__option[aria-selected=true] {
		background-color: #021452 !important; /* Light grey to show it's taken */
		color: #495057;
	}
	/* Keep the search input aligned and tidy among the badges */
	.select2-container--default .select2-search--inline .select2-search__field {
		margin-top: 7px !important;
		padding-left: 5px !important;
		font-family: inherit; /* Matches your site font */
	}
/* --- Select2 Multi-Select Customization --- */
	
	/* 1. Main Container: Fixes floating text and aligns with Bootstrap heights */
	.select2-container--default .select2-selection--multiple {
		border: 1px solid #d8e2ef !important;
		min-height: calc(2.1875rem + 2px) !important;
		display: flex !important;
		align-items: center !important;
		flex-wrap: wrap !important;
		padding: 2px 5px !important;
		border-radius: 0.375rem !important;
	}
	
	/* 2. Selected Badge: Custom Blue Background and Flex Layout */
	.select2-container--default .select2-selection--multiple .select2-selection__choice {
		background-color: #021452 !important;
		border: 1px solid #021452 !important;
		border-radius: 4px !important;
		color: #ffffff !important;
		display: inline-flex !important; 
		flex-direction: row;    /* Puts X on the left */
		align-items: center !important;
		padding: 8px 8px !important;
		margin-right: 5px !important;
		margin-top: 5px !important;
		cursor: default;
	}
	
	/* 3. Badge Text: Separation from the X */
	.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
		padding-left: 8px !important;
		padding-right: 8px !important; /* Space between text and X */
		color: #ffffff !important;
	}
	
	/* 4. The Remove (X) Button: Static positioning to prevent overlapping */
	.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
		position: static !important; 
		color: rgba(255, 255, 255, 0.7) !important;
		border: none !important;
		background: transparent !important;
		padding: 0 !important;
		margin-left: 2px !important;
		font-size: 18px;
		line-height: 1;
	}
	
	.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
		color: #ffffff !important;
		background: transparent !important;
	}
	
	/* 5. Dropdown Results: Primary Blue Highlight on Hover */
	.select2-container--default .select2-results__option--highlighted[aria-selected] {
		background-color: #021452 !important;
		color: white !important;
	}
	
	/* 6. Ensure all internal spans (including 'new' tags) stay white inside the badge */
	.select2-container--default .select2-selection--multiple .select2-selection__choice span,
	.select2-container--default .select2-selection--multiple .select2-selection__choice .text-primary {
		color: #ffffff !important;
	}
	.custom-bird-dropzone {
		/* Use relative positioning so internal absolute elements (previews) align to it */
		position: relative !important;
		
		/* Layout: Stacks icon, text, and previews vertically */
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		
		/* Appearance */
		padding: 2rem !important;
		width: 100%;
		min-height: 200px;
		border: 2px dashed #bbb;
		border-radius: 8px;
		background-color: #f9f9f9;
		transition: all 0.2s ease;
		cursor: pointer;
	}
	
	/* Fix the text bunching: use a wrapper or direct targeting */
	.custom-bird-dropzone .dz-message {
		width: 100%;
		text-align: center;
		margin: 0; /* Let flex gap or internal margins handle spacing */
	}
	
	.custom-bird-dropzone p, 
	.custom-bird-dropzone span {
		display: block !important;
		width: 100% !important;
		margin-bottom: 0.5rem !important;
		color: #444;
	}
	
	/* IMPORTANT: Hide the default file input entirely. 
	   Dropzone.js handles the file selection via the container click.
	   This prevents the input from "blocking" the drop event.
	*/
	.custom-bird-dropzone input[type="file"] {
		display: none !important;
	}
	
	.custom-bird-dropzone:hover {
		border-color: #2c7be5;
		background-color: #ffffff;
	}
	
	/* This class is added by Dropzone.js automatically when dragging a file over */
	.custom-bird-dropzone.dz-drag-hover {
		border-color: #00d27a !important;
		background-color: rgba(0, 210, 122, 0.05) !important;
		opacity: 0.8;
	}
	
	.upload-icon {
		font-size: 2rem; /* If using an icon font */
		margin-bottom: 15px;
		opacity: 0.6;
		transition: opacity 0.2s ease;
	}
	
	.custom-bird-dropzone:hover .upload-icon {
		opacity: 1;
	}
	
	/* Thumbnail styling - ensures they don't break the layout */
	.custom-bird-dropzone .dz-preview {
		margin: 10px 0;
		width: 100%;
		display: flex;
		justify-content: center;
	}
	
	.custom-bird-dropzone .dz-image {
		border-radius: 8px;
		overflow: hidden;
	}
	
	/* CUSTOM LIFER TABLE MESSAGE */
	/* 1. Subtle background for the whole lifer row */
	.table-lifer {
		background-color: #f0f7ff !important;
	}
	
	/* Target the cell inside the lifer row with higher specificity */
	.table tbody tr.table-lifer td:first-child {
		position: relative !important;
		padding-left: 35px !important; /* Increase this to ensure space */
		isolation: isolate;
	}
	
	/* Force the tab to appear */
	.table tbody tr.table-lifer td:first-child::before {
		content: "LIFER" !important;
		position: absolute !important;
		left: 0 !important;
		top: 0 !important;
		bottom: 0 !important;
		width: 24px !important;
		background-color: #01308A !important;
		color: #ffffff !important;
		font-size: 10px !important;
		font-weight: 900 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		writing-mode: vertical-rl !important;
		transform: rotate(180deg) !important;
		z-index: 99 !important;
	}
	
	/* Container styling */
	.overlay-container {
	  cursor: pointer;
	}
	
	/* Hide the menu initially */
	.overlay-menu {
	  background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
	  opacity: 0;
	  transition: opacity 0.3s ease-in-out;
	}
	
	/* Show the menu on hover */
	.overlay-container:hover .overlay-menu {
	  opacity: 1;
	}
	
	/* Force active sub-menu links to primary color */
	.ic-sidenav .metismenu ul a.mm-active {
		color: yellow !important;
	}
	
	/* Force active main-level links to primary color */
	.ic-sidenav .metismenu > li.mm-active > a {
		color: yellow !important;
	}
	
	/* Ensure the icon also turns primary if it's stuck on white/gray */
	.ic-sidenav .metismenu > li.mm-active > a i {
		color: yellow !important;
	}