/* Navbar customization */

.navbar-custom {
  background-color: #002561; /* Navbar background */
  color: #f5f5f5; /* Text color */
  z-index: 1000; /* Ensure it stays above other content */
}
.navbar-customMobile {
  background-color: #002561; /* Navbar background */
  color: #f5f5f5; /* Text color */
  z-index: 1000; /* Ensure it stays above other content */
}
/* General link styles */
.navbar .nav-item .nav-link {
  color: #f5f5f5; /* Link color */
  margin-right: 20px;
  padding: 10px;
}

.navbar .nav-item .nav-link:hover {
  color: #999; /* Hover effect for links */
}

.navbar .nav-item .nav-link.active {
  color: #777; /* Active link color */
}
  
/* Responsive mobile-specific styles */
@media (max-width: 768px) {
  #main-navbar {
    bottom: 0;
    top: auto;
    position: fixed;
    max-height: 100vh; /* Ensure it does not push other content */
    overflow: visible; /* Allow overflow */
    width: 100%; /* Full width on mobile */
    z-index: 1000; /* Ensure it stays above other content */
  }

  #main-navbar .navbar-nav {
    flex-direction: row;
  }

  #top-navbar {
    display: none;
  }

  .navbar .nav-item {
    text-align: center; /* Center the items on mobile */
  }

  .nav-link span {
    display: block; /* Ensure text appears under icons */
  }

  .user-name {
    display: none;
  }

 /* Ensure the dropup container is relatively positioned */
#main-navbar .nav-item.dropup {
  position: relative;
}

/* Position the dropup menu absolutely */
#main-navbar .dropup .dropdown-menu {
  position: absolute;
  bottom: 100%; /* Position it above the toggle button */
  left: auto;      /* Align to the left */
  right: 0;  /* Reset right alignment */
  transform: none;
  z-index: 1050;
}

  /* Ensure toggle icon doesn't appear for dropdown in mobile */
  #main-navbar .dropdown-toggle::after {
    display: none;
  }

  /* Align account dropdown icon */
  #account-nav .nav-item {
    margin-left: auto;
    margin-right: 15px;
  }
}
/* Desktop-specific styling */
@media (min-width: 768px) {
  #main-navbar {
    display: none;
  }

  #top-navbar {
    top: 0;
    bottom: auto;
    position: sticky; /* Ensure it sticks to the top */
  }

  .navbar .nav-link span {
    display: inline; /* Inline on larger screens */
  }

  .navbar .user-initials {
    margin-right: 10px;
  }

  /* Dropup for desktop */
  .dropup .dropdown-menu {
    bottom: 100%; /* Open above the button */
    top: auto;
  }
}
/* Dropdown toggle styling */
.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}

.status-available {
  background-color: green;
}

.status-busy {
  background-color: red;
}

.status-call {
  background-color: red;
}

.status-conference-call {
  background-color: purple;
}

.status-away {
  background-color: rgb(255, 196, 0);
}

.status-presenting {
  background-color: blue;
}

.dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  
}

.dropdown-menu .dropdown-item .status-dot {
  margin-right: 10px;
  
}    

/* Custom styles for the dropleft dropdown */
.dropdown.dropleft .dropdown-menu {
  left: auto;
  right: 0%;
  
}
#vesselTablesContainer {
  overflow-x: auto;
}

/*.table {
  min-width: 800px; 
  margin-bottom: 2rem;
  padding: 8px 10px;
}
*/
/*.table th[colspan="5"] {
  font-size: 1.2rem;
}
*/
.editable-field {
  padding: 8px 12%;
  border-radius: 3px;
  transition: background-color 0.3s ease;
}

.editable-field:hover {
  background-color: #493cfb88;

}

.editable-field:focus {
  background-color: #9b9b9b;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
  padding: 8px 50px;
}
.autocomplete-list li:hover {
  background-color: #f0f0f0;
  width: 150px;
}
.autocomplete-list {
padding: 10px;
cursor: pointer;
width: 150px;
}

@media (max-width: 768px) {
  .table {
      font-size: 0.9rem;
  }
}
.bg-primary2 {
  background-color: #002561 !important;
}