/* Typography */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");

/* Icons */
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css");

/* Base Styles */
html,
body {
  height: 100%;
  margin: 0;
  font-family: "Roboto", sans-serif;
  /* background-color: #002244; */
  color: #f4f4f4;
  overflow-y: visible;
}

/* Navbar */
/* .navbar {
  width: 100%;
  background-color: #004488;
  color: white;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  z-index: 1050;
  flex-wrap: wrap;
}

.navbar .logo {
  height: 50px;
  margin-right: 10px;
}

.navbar .company-name {
  font-size: 24px;
  margin-left: 10px;
  font-weight: bold;
}

.navbar .left-content,
.navbar .search-bar {
  margin-left: auto;
  flex-grow: 1;
  max-width: calc(100% - 250px);
  padding: 0 20px;
}

.navbar .search-bar input[type="text"] {
  width: 100%;
  padding: 10px;
  font-size: 17px;
  border: none;
  background-color: #f4f4f4;
  color: #333;
  border-radius: 4px;
  margin-right: 10px;
}

.navbar .search-bar button {
  padding: 10px 15px;
  background-color: #336699;
  color: white;
  border: none;
  border-radius: 4px;
  margin-left: 10px;
  transition: background-color 0.3s;
}

.navbar .search-bar button:hover {
  background-color: #2678b2;
} */

/* .nav-tabs {
  display: flex;
  align-items: center;
  padding-right: 20px;
} */
/* 
.nav-tabs a {
  color: #fff;
  text-decoration: none;
  padding: 10px 15px;
  margin: 0;
  transition: background-color 0.3s;
}

.nav-tabs a:hover,
.nav-tabs a.active {
  background-color: #3a5068;
} */

.chartTitle {
  width: 135px;
  font-size: small;
}

.dashboard-container {
  display: flex;
  height: calc(100% - 60px);
  /* margin-bottom: 75px; */
}

.map-container {
  flex: 0 0 45%;
  position: relative;
  height: 100%;
  /* margin-top: 75px; */
}

#map {
  width: 100%;
  height: 100%;
  min-height: 300px;
}

.cards-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 10px;
  overflow-y: auto;
  z-index: 1;
  /* margin-top: 75px; */
}

.card {
  background-color: #003366;
  color: white;
  margin-bottom: 20px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.card-title {
  margin: 0;
}

/* .button {
  padding: 10px 15px;
  background-color: #336699;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
  display: inline-flex;
  align-items: center;
  margin-right: 10px;
  padding-left: 30px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  font-weight: bold;
}

.button:hover {
  background-color: #0077cc;
}

.button .icon {
  margin-right: 8px;
} */

.card h2 {
  margin-top: 0;
  font-family: "Roboto", sans-serif;
  color: #ffffff;
}

/* Footer styles - making sure it doesn't overlap with the content */
.footer {
  position: relative; /* If you want the footer to be at the bottom of all content */
  bottom: 0;
  width: 100%;
  background-color: #001833;
  color: white;
  text-align: center;
  padding: 20px 0; /* More padding for aesthetic spacing */
  margin-top: 50px; /* Ensure there is space between the content and footer */
}

.footer p {
  margin: 0;
  font-size: 16px;
  font-family: "Nunito Sans", sans-serif;
}

.button i {
  margin-right: 10px;
}

/* .mapboxgl-ctrl-custom-panel {
  background-color: transparent;
  color: white;
  margin-bottom: 20px;
  padding: 20px;

  box-shadow: none !important;
  font-family: "Roboto", sans-serif;
  border-radius: 4px;
  width: 200px;
  border: none;
} */

/* .mapboxgl-ctrl-custom-panel .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.mapboxgl-ctrl-custom-panel h2 {
  font-size: 18px;
  color: #ffffff;
}

.mapboxgl-ctrl-custom-panel .button {
  background-color: #17cfa7;
  color: rgb(35, 33, 33);
  padding: 10px 15px;
  text-align: left;
  border: none;
  cursor: pointer;
  display: block;
  width: 100%;
  margin-bottom: 5px;
  transition: background-color 0.3s;
}

.mapboxgl-ctrl-custom-panel .button:hover {
  background-color: #0077cc;
}

.mapboxgl-ctrl-custom-panel .button i {
  margin-right: 8px;
} */

/* Table base styling */
.table-class {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto; /* Adjusts column width based on content */
}

/* Table header styling */
.table-class thead th {
  position: sticky;
  top: 0;
  z-index: 10; /* Ensures the header stays above other content */
  background: linear-gradient(180deg, #336699 0%, #27496d 100%);
  color: #fff;
  padding: 12px 10px;
  border-bottom: 2px solid #27496d;
  border-top: 1px solid #27496d;
  text-align: left;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 700;
}

/* Table body styling */
.table-class tbody td {
  background-color: #003366;
  color: #fff;
  padding: 12px 10px;
  border: 1px solid #27496d;
  text-align: left;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
}

/* Zebra striping for rows */
.table-class tbody tr:nth-child(odd) td {
  background-color: #002244;
}

/* Scrollable container for the table */
.scrollable-table-container {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 725px;
  margin-bottom: 20px;
}

/* Hover effect for rows */
.table-class tbody tr:hover td {
  background-color: #27496d;
}

/* Accessibility: Focus styles for interactive table elements */
.table-class tbody tr:focus-within td,
.table-class tbody tr:hover td {
  outline: thin dotted;
  outline-offset: -1px;
}

/* Typography */
.table-class,
.table-class th,
.table-class td {
  font-family: "Roboto", sans-serif;
}

/* Alignment */
.table-class td.right-aligned {
  text-align: right;
}

/* Highlighting */
.table-class tbody tr:hover td {
  box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.5);
}

.image-logo {
  width: 250px; /* Adjust as needed */
  height: auto; /* Maintains aspect ratio */
}


.chart-container {
  position: relative;
  height: 400px; /* Set a fixed height for the container */
}

/* .tooltip-icon-container {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 100;  */

.tooltip-icon {
  width: 15px; /* Size of your icon */
  height: 15px; /* Size of your icon */
}


/* .tooltip-icon-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
} */

.tooltip-icon-container {
  position: absolute;
  top: -4px;
  right: 2px;
  z-index: 100;
  cursor: pointer;
}

.tooltip-text {
  visibility: hidden;
  width: 360px;
  background-color: rgb(29, 27, 27);
  color: #c0c0c0;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 25%;
  margin-left: -60px; /* Centers the tooltip */
  ::after {
    content: "";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
  }
}

.tooltip-icon:hover + .tooltip-text {
  visibility: visible; /* Show the tooltip text on hover */
}