@font-face {
  font-display: swap;
  font-family: Sawton Industrial;
  font-style: normal;
  font-weight: 400;
  src: url(/static/media/SawtonIndustrial-Regular.44f694701202c9432852.woff2) format("woff2"), url(/static/media/SawtonIndustrial-Regular.cbae0ffb6fdb3fb0c987.woff) format("woff")
}

@font-face {
  font-display: swap;
  font-family: Sawton Industrial;
  font-style: normal;
  font-weight: 700;
  src: url(/static/media/SawtonIndustrial-Bold.bac79d17930f5a74b12f.woff2) format("woff2"), url(/static/media/SawtonIndustrial-Bold.66e4948499907fbd8db3.woff) format("woff")
}

body,
html {
  font-family: Sawton Industrial, sans-serif;
  height: 100%;
  margin: 0;
}

/* Navbar Styles */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-brand img {
  height: auto;
  /* Adjust as necessary */
  width: auto;
  /* Adjust as necessary */
  max-height: 40px;
  /* Adjust as necessary */
}

.nav-link {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}

.nav-link:last-child {
  margin-right: 0;
}

.nav-item {
  margin-right: 1rem;
  /* Add some space between nav items */
  position: relative;
  /* Dropdown positioning context */
}

.nav-item:last-child {
  margin-right: 0;
  /* No margin for the last item */
}

.navbar .utility-link,
.navbar .utility-link:hover,
.navbar .utility-link:active,
.navbar .utility-link:focus {
  text-decoration: none;
  /* Ensures no underline appears */
  color: #228B22;
  /* Forest Green */
}

.navbar-nav {
  display: flex;
  flex-direction: row; 
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  margin: 0 1rem; 

  .nav-link {
    padding: 0.5rem 1rem; 
  }
}

/* Fix for utility icons underline issue */
.utility-link i {
  text-decoration: none;
  /* Removes underline from icons */
}

.user-area,
.navbar-utils {
  display: flex;
  align-items: center;
  /* Align items vertically */
}

.user-dropdown .nav-link {
  display: flex;
  align-items: center;
  /* Aligns the text and image vertically */
  white-space: nowrap;
  /* Prevents the text from wrapping */
}

.utility-link {
  margin-left: 1rem;
  /* Space out utility links */
  display: flex;
  align-items: center;
  /* Aligns the icons vertically */
}

.user-dropdown {
  display: flex;
  align-items: center;
  /* This will vertically center the dropdown with the avatar */
}


/* Fix for avatar and username alignment */
.user-area .user-name,
.user-area .user-avatar {
  display: flex;
  align-items: center;
  margin-right: 0.5rem;
  /* Space between username and avatar */
}

.user-info {
  display: flex;
  align-items: center;
  /* Vertically aligns avatar and greeting text */
  text-decoration: none;
  /* Removes underline from links */
  color: inherit;
  /* Inherits text color from parent */
  padding: 0.5rem 1rem;
  /* Adjust padding as needed */
}

.user-avatar {
  background-color: #228B22;
  /* Forest Green */
  width: 40px;
  /* Adjust size as needed */
  height: 40px;
  /* Adjust size as needed */
  border-radius: 50%;
  /* Circle shape */
  color: white;
  /* Text color */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  /* Adjust text size as needed */
  text-transform: uppercase;
  /* Uppercase letters */
  margin-right: 0.5rem;
}

/* Style for the user's name */
.user-name {
  font-size: 1rem;
  /* Adjust as needed */
  margin-right: 0.5rem;
  /* Gives some space before the dropdown arrow */
}

/* Ensure the dropdown menu items are properly styled */
.dropdown-menu {
  display: none;
  /* Hide dropdown by default */
  top: 100%;
  /* Position it right below the nav item */
  left: 0;
  position: absolute;
  /* Position it absolutely within the relative parent */
  right: 0;
  /* Aligns the dropdown to the right of the parent */
  background-color: #fff;
  /* Background color for the dropdown */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  /* Optional: Adds a shadow for depth */
  border-radius: 4px;
  /* Optional: Rounds the corners */
  z-index: 1000;
  /* Ensures the dropdown is above other content */
}

.dropdown-menu.show {
  display: block;
  /* Show dropdown when toggled */
}

/* Style the dropdown items */
.dropdown-item {
  display: block;
  padding: 0.5rem 1rem;
  color: #333;
  text-decoration: none;
}

.dropdown-item:hover {
  background-color: #f8f8f8;
  /* Change as per your theme */
}

.nav-item {
  position: relative;
  /* Needed for absolute positioning of dropdown-menu */
}