/* TRY NOT TO TOUCH */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,432;1,432&display=swap");

:root {
  --primary-text-color: #0077b6;
  --primary-bg-color: rgba(214, 214, 214, 0.9);
  --list-hover-black: #00adb520;
  --list-hover-white: #333333;
  --primary-color: #0077b6;
  --secondary-color: #c1d3e5;
  --text-color-on-primary: aliceblue;
  --text-color-on-secondary: #222222;
  --gray-1: #dddddd;
  --gray-2: #cccccc;
  --gray-3: #bbbbbb;
  --default-bg: #ffffff;
  --theme-bg-color: #f6f8fc;
  --theme-color-05: #ececec;
  --success-color: #28a745;
  --info-color: #0077b6;
  --warning-color: #f18f01;
  --danger-color: #c73e1d;
  --utility-color: #00171f;
  --dangerText: #8f2129;
  overflow: hidden;
  font-size: 12px;
}
html,
body {
  font-family: var(--main-font) !important;
  font-size: var(--font-size-base);
  width: 100vw;
  height: 100vh;
  color: var(--primary-color);
  background-color: var(--theme-color-05);
}

#map {
  position: relative;
  height: 100%;
}

.over_map {
  position: absolute;
  z-index: 1;
  background-color: var(--primary-bg-color);
  color: var(--primary-text-color);
  z-index: 299;
}
.scrollable-section {
  max-height: 150px;
  /* Adjust height for individual scrollable sections */
  overflow-y: auto;
  /* Enable vertical scrolling */
  border-radius: 4px;
  margin-bottom: 16px;
  /* Space between sections */
}

.scrollable-section::-webkit-scrollbar {
  width: 8px;
  /* Width of the scrollbar */
}

.scrollable-section::-webkit-scrollbar-track {
  background: #f0f0f0;
  /* Background of the scrollbar track */
}

.scrollable-section::-webkit-scrollbar-thumb {
  background: #888;
  /* Color of the scrollbar thumb */
  border-radius: 4px;
}

.scrollable-section::-webkit-scrollbar-thumb:hover {
  background: #555;
  /* Color of the scrollbar thumb on hover */
}

.collection-item {
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  padding: 16px;
  /* Increase padding for a better touch target */
}

.collection-item:hover {
  background-color: #f0f0f0;
  /* Light grey background on hover */
}

.collection-item.selected {
  /* Blue background for selected item */
  color: white;
  /* White text for selected item */
  background-color: #00000038;
}

.section-header {
  font-weight: bold;
  padding: 8px 16px;
  background-color: #e0e0e0;
  /* Light grey background for section headers */
  margin-bottom: 0;
}

/* Tabs Container Styling */
.tabs {
  list-style: none;
  display: flex;
  border-bottom: 2px solid #ddd;
  background-color: #fff;
  padding: 0;
}

/* Tab Item Styling */
.tab {
  flex: 1;
  margin: 0;
}

/* Tab Link Styling */
.tab a {
  display: block;
  padding: 4px;
  text-align: center;
  text-decoration: none;
  color: #333;
  font-size: 1rem;
  font-weight: 800;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}

/* Active Tab Styling */
.tab a.active {
  background-color: #fff;
  color: var(--primary-color);
  border-bottom: 2px solid var(--primary-color);
}

/* Inactive Tab Styling */
.tab a:not(.active):hover {
  background-color: #f0f0f0;
  color: var(--primary-color);
  border-color: #ddd;
}

/* Custom CSS for Dark Bootstrap Tooltips */
.tooltip {
  z-index: 999999999999999; /* Ensure the tooltip appears above other elements */
}

.tooltip.bs-tooltip-top .arrow::before {
  border-top-color: #333 !important; /* Arrow color */
}

.tooltip.bs-tooltip-right .arrow::before {
  border-right-color: #333 !important; /* Arrow color */
}

.tooltip.bs-tooltip-bottom .arrow::before {
  border-bottom-color: #333 !important; /* Arrow color */
}

.tooltip.bs-tooltip-left .arrow::before {
  border-left-color: #333 !important; /* Arrow color */
}