.top {

  align-items: center;
  background-color: #031c17 !important;
  /*   border-bottom: 1px solid #ccc; */
  /*   border-right: 1px solid #fff; */

}

.top .brand {
  font-size: 2rem;
  white-space: nowrap;
  width: 100%;
  color: white;
}



.top .brand span {
  padding-left: .5rem;
  transition: opacity ease-in 200ms;
  transition-delay: 150ms;
}









.bg-dark-green {
  background-color: #021210 !important;

}

.bg-dark {
  background-color: #003026 !important;
}


#body-row {
  margin-left: 0;
  margin-right: 0;
  max-height: 100% !important;
}

#sidebar-container {
  z-index: 1000;
  background-color: #021210;
  padding: 0;
  position: relative;
  /* Keep sidebar fixed on the left */
  height: 100vh;
  /* Full height for the sidebar */
  overflow-y: auto;
  /* Enable vertical scrolling */
  -webkit-overflow-scrolling: touch;
  /* Enable momentum scrolling on touch devices */
  background: #f8f9fa;
  /* Light background */
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  /* Optional shadow for depth */
  width: 250px;
}

/* Sidebar sizes when expanded and expanded */
.sidebar-expanded {
  width: 250px;

}

.sidebar-collapsed {
  width: 60px;
}

/* Menu item*/
#sidebar-container .list-group a {
  height: 50px;
  color: white;
  background-color: #021210;
}

/* Submenu item*/
#sidebar-container .list-group .sidebar-submenu a {
  height: 45px;
  padding-left: 30px;
}

.sidebar-submenu {
  font-size: 0.9rem;
}

/* Separators */
.sidebar-separator-title {
  background-color: #021210;
  height: 35px;
}

.sidebar-separator {
  background-color: #021210;
  height: 25px;
}

.logo-separator {
  background-color: #021210;
  height: 60px;
}







/* Closed submenu icon */
#sidebar-container .list-group .list-group-item[aria-expanded="false"] .submenu-icon::after {
  content: " \f0d7";
  font-family: FontAwesome;
  display: inline;
  text-align: right;
  padding-left: 10px;
}

.list-group-item
{
  border:none !important;
}

/* Opened submenu icon */
#sidebar-container .list-group .list-group-item[aria-expanded="true"] .submenu-icon::after {
  content: " \f0da";
  font-family: FontAwesome;
  display: inline;
  text-align: right;
  padding-left: 10px;
}



/* scrollbar */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 255, 255, 0.3);
}




@media (max-width: 767px) {
  #sidebar-container {
    display: none;
  }

  #body-row {
    margin-left: 0;
  }

  #sidebar-container.sidebar-expanded {
    display: none !important;
  }

  #sidebar-container.sidebar-collapsed {
    display: block !important;
  }
}

.container {
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;

}



/* Sidebar container */
.sidebar {
  position: fixed;
  /* Make sidebar fixed on the screen */
  top: 0;
  left: 0;
  width: 250px;
  /* Adjust the width as needed */
  height: 100vh;
  /* 100% of the viewport height */
  background-color: #333;
 
}

/* Make sidebar items stack vertically */
.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  flex-grow: 1;
  /* Pushes the bottom element to the bottom */
}

.sidebar ul li {
   color: white;
  cursor: pointer;
}

/* Make the last item sticky */
.sidebar .bottom-option {
  position: sticky;
  bottom: 0;
  background-color: #444;
  /* Slightly different color for bottom item */
  padding: 10px 15px;
  text-align: center;
}

/* Hover effect for items */
#sidebar-container nav a:hover {
  background-color: #555 !important;
}

/* Optional: You can add transitions to smooth the hover effect */
.sidebar ul li {
  transition: background-color 0.3s ease;
}





















@media (max-width: 767px) {

  /* Media query for screens up to 767 pixels wide (typically mobile devices) */
  .card {
    width: 100%;
  }
}








.hidden-sidebar {
  display: none !important;
}


/* Add class for the thumbtack */
.thumbtack-icon-sidebar {
  cursor: pointer;
  /* Makes it look clickable */
  transition: opacity 0.3s ease;
  /* Smooth transition for opacity changes */
}

.thumbtack-icon-toolbar {
  cursor: pointer;
  /* Makes it look clickable */
  opacity: 0.5;
  /* Makes the icon see-through */
}



nav ul li a.active {
  color: white;
  background-color: #144537 !important;
  font-weight: bold;
  border-color: #3ecc9f !important;
}

.list-group {
  max-height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

#userProfiles {
  position: absolute;
  top: 5px;
  right: 0px;

  z-index: 1;

}

/* collapsible side menu */
summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Create a new custom triangle on the right side */
summary > span {
  margin-left: 1rem;
  display: inline-block;
  transition: 0.2s;
}

details[open] > summary > span {
  transform: rotate(180deg);
}