/* General styling */
 body {
	padding: 0;
	margin: 0;
	height: 100%;
	font-family: 'Inter', 'Open San', sans-serif;
	color: rgba(255, 255, 255, .8) !important; 
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -.01em;
}

#map-container {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100vh;
	z-index: 0; /* Ensures the map is behind other content */
}

#search-input {
	background-color: rgba(22, 22, 23, .8) !important;
	backdrop-filter: saturate(140%) blur(6px);
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: rgba(255, 255, 255, .8);
	opacity: 1; /* Firefox */
	font-size: 14px;
	font-weight: 400;
    letter-spacing: -.01em;
}

.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: rgba(255, 255, 255, .8);
	font-size: 14px;
	font-weight: 400;
}

.form-control::-ms-input-placeholder { /* Microsoft Edge */
	color: rgba(255, 255, 255, .8);
	font-size: 14px;
	font-weight: 400;
}

.input-group-text {
    border-top-left-radius: 1rem; /* Adjust the radius as needed */
    border-bottom-left-radius: 1rem; /* Adjust the radius as needed */
    border-right: 0; /* Remove the border between the icon and the input */
	background-color: rgba(22, 22, 23, .8) !important;
	backdrop-filter: saturate(140%) blur(6px);
}

.form-control {
    border-top-left-radius: 0; /* Remove the left border-radius */
    border-bottom-left-radius: 0; /* Remove the left border-radius */
    border-top-right-radius: 1rem; /* Bigger radius on the right side */
    border-bottom-right-radius: 1rem; /* Bigger radius on the right side */
}


.icon {
	z-index: 1031;
	font-size: 22px !important;
	font-weight: 400;
	padding: 6px !important;
}
.user-picture {
	width: 34px; /* Set the width */
	height: auto;
    border-radius: 50%; /* Make the image circular */
}
/* .nav-icon-picture {
	background-color: transparent !important;
	backdrop-filter: saturate(140%) blur(6px) !important;
	box-shadow: 0px 2px 4px rgba(0,0,0,0.5) !important;
} */
.nav-icon {
	background-color: rgba(22, 22, 23, .8) !important;
	backdrop-filter: saturate(140%) blur(6px) !important;
	color: rgba(255, 255, 255, .8) !important;
	box-shadow: 0px 2px 4px rgba(0,0,0,0.5) !important;
}

.control-items {
    z-index: 1032; /* Higher z-index to ensure it's above the map */
}

#side-menu {
	background-color: rgba(22, 22, 23, .8);
	backdrop-filter: saturate(140%) blur(6px);
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.menu-text {
	color: rgba(255, 255, 255, .8) !important; 
	font-size: 12px;
	font-weight: 400;
	letter-spacing: -.01em;
}

.menu-icon {
	color: rgba(255, 255, 255, .8) !important; 
	font-size: 18px;
	font-weight: 400;
}

.tab-bar {
	background-color: rgba(22, 22, 23, .8) !important;
	backdrop-filter: saturate(140%) blur(6px);
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	z-index: 1033;
}

#colapse-content input {
	background-color: rgba(255, 255, 255, .8) !important; 
	color: rgba(22, 22, 23, .8) !important;
}

/* Target the checkbox when it is checked */
#flexCheckDefault:checked {
    /* Set the background color when checked */
    background-color: rgba(22, 22, 23, .8) !important;
    color: rgba(255, 255, 255, .8) !important; 
}

#collapse-content {
	width: 0; /* Start with zero width */
	overflow: hidden; /* Prevent content from showing when width is zero */
	transition: width 0.3s ease-in-out; /* Smooth transition for width */
	white-space: nowrap; /* Keep the content in a single line during transition */
}

#collapse-content.show {
	width: 370px; /* Normal width when expanded, adjust as needed */
}

#flights-ul a {
	text-decoration: none;
	color: rgba(255, 255, 255, .8);
	border: none;
	border-bottom: 2px solid transparent;
}

#flights-ul a:hover {
	background-color: rgba(0, 0, 0, 1);
}

#flights-ul a.active {
	background-color: transparent;
	color: white;
	border-bottom: 2px solid white;
	border-radius: 0;
}

#close-collapse {
	color: rgba(255, 255, 255, .8);
	font-size: 18px;
	font-weight: 400;
}

#close-collapse:hover {
	color: white;
}
#close-collapse:focus {
    border: none; /* Removes the border on focus */
    outline: none; /* Removes the outline on focus for accessibility, you might want to add other focus indicators */
    box-shadow: none; /* Optional: Removes the shadow if present */
}

#side-menu-list ul li a:hover,
#side-menu-list ul li a:hover .menu-icon,
#side-menu-list ul li a:hover .menu-text {
    color: white !important;
}

#side-menu-list ul li a.active,
#side-menu-list ul li a.active .menu-icon,
#side-menu-list ul li a.active .menu-text {
    color: white !important;
}

.dropdown-toggle::after {
    display: none;
}
.dropdown-menu {
	--bs-dropdown-border-color: rgba(22, 22, 23, .8) !important;
}
.dropdown-menu .dropdown-item {
    font-family: 'Inter', 'Open Sans', sans-serif;
    color: rgba(255, 255, 255, .8) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: -.01em !important;
}

.dropdown-menu .dropdown-item:hover {
    background-color: rgba(172, 226, 241, 0.2) !important;
}

.areas-filter .dropdown-item:hover {
	background-color: transparent !important;
	color: rgba(255, 255, 255, .8) !important;
}

/* For the "Airports" switch */
.airport-switch:checked {
    background-color: var(--airport-color) !important;
    border-color: var(--airport-color) !important;
}

/* For the "CTR" switch */
.ctr-switch:checked {
    background-color: var(--ctr-color);
    border-color: var(--ctr-color);
}

/* For the "Military" switch */
.military-switch:checked {
    background-color: var(--military-color) !important;
    border-color: var(--military-color) !important;
}

/* For the "NOTAMs" switch */
.notam-switch:checked {
    background-color: var(--notam-color) !important;
    border-color: var(--notam-color) !important;
}

  .list-group * {
	background-color: transparent !important;
  }

  .list-group-item {
	color: rgba(255, 255, 255, .8) !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	letter-spacing: -.01em !important;
  }

  #add-drone-btn {
	background-color: #0071e3 !important;
	color: rgba(255, 255, 255, .8) !important;
  }

  #add-drone-btn:hover {
	background-color: #0077ED !important;
  }

.custom-btn {
	background-color: #0071e3 !important;
	border-color: #0071e3 !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	letter-spacing: -.01em !important;
  }

.custom-btn:hover {
	background-color: #0077ED !important;
}

  .modal-footer button {
	font-size: 14px !important;
	font-weight: 400 !important;
	letter-spacing: -.01em !important;
  }

  .badge {
	font-size: .6em !important;
  }

  #fpl-form {
	width: 90%;
	margin: 0 auto
  }

  .form-control {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}

h6 {
	font-size: 16px;
	font-weight: 500;
	letter-spacing: .012em;
}

#fpl-form input::placeholder {
	color: gray;
	opacity: 1;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: -.01em;
}

#fpl-form textarea::placeholder {
	color: gray;
	opacity: 1;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: -.01em;
}

#missionDate {
	color: gray;
	opacity: 1;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: -.01em;
}

#area-info {
	color: rgba(22, 22, 23, .8);
	font-size: 12px;
}

#fpl-form .form-select {
    font-size: 12px !important;
}

#profile-time {
	background-color: rgba(22, 22, 23, .8);
	backdrop-filter: saturate(140%) blur(6px) !important;
	color: rgba(255, 255, 255, .8) !important;
	box-shadow: 0px 2px 4px rgba(0,0,0,0.5) !important;
}

#center-coordinates {
	text-decoration: none;
	color: rgba(22, 22, 23, .8);
}

.drone-item-list {
	background-color: rgb(90, 90, 90);
}

.drone-item-list:hover {
	background-color: rgb(100, 100, 100);
}

.mission-item-list {
	background-color: rgb(90, 90, 90);
}

.mission-item-list:hover {
	background-color: rgb(100, 100, 100);
}

.dynamic-data-container {
    max-height: 100%; /* Constrain the height */
    overflow-y: auto; /* Enable vertical scrolling */
    padding-right: 1rem; /* Add some padding for a better user experience */
    scrollbar-width: thin; /* For Firefox, optional */
    scrollbar-color: #888 #f1f1f1; /* Optional: Scrollbar styling */
}

/* Optional: Scrollbar styling for WebKit browsers */
.dynamic-data-container::-webkit-scrollbar {
    width: 8px;
}

.dynamic-data-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.dynamic-data-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.dynamic-data-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.alert {
	background-color: rgba(22, 22, 23, .8) !important;
	backdrop-filter: saturate(140%) blur(6px);
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	font-size: 12px !important;
}

.btn-close {
	width: 2px !important
}

#profile-time {
	border-radius: 50rem !important;
}