/* Custom Styles */
    .navbar-brand {
      font-weight: bold;
    }

    .navbar-nav {
      text-align: center;
      margin-top: 10px;
    }

    .nav-link {
      margin: 0 15px;
      font-weight: bold;
    }

    .navbar-toggler-icon {
      background-color: #333; /* Change the color of the toggle icon */
    }

    .navbar-toggler {
      border-color: #333; /* Change the border color of the toggle button */
    }

    /* Optional: Add some padding to the navbar */
    .navbar {
      padding: 15px;
    }

    .scroll-container {
      max-height: 800px; /* Set the maximum height as needed */
      overflow-y: auto;
    }
    /* Custom styling for the select box */
    .custom-select-wrapper {
      position: relative;
      display: inline-block;
    }

    .custom-select {
      display: block;
      width: 100%;
      padding: 0.375rem 2.25rem 0.375rem 0.75rem;
      line-height: 1.5;
      color: #030303;
      background-color: #ffffff;
      background-clip: padding-box;
      border: 1px solid #ced4da;
      border-radius: 0.25rem;
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    .custom-select-arrow {
      position: absolute;
      top: 50%;
      right: 0.75rem;
      transform: translateY(-50%);
      pointer-events: none;
    }

/* Add or modify these styles in your CSS */
.navbar-toggler {
  background-color: white !important; /* Set the background color to white using !important */
  border: none !important; /* Remove the border using !important */
  outline: none !important; /* Remove the outline when the button is focused using !important */
}

.custom-icon {
  color: white !important; /* Set icon color using !important */
  font-size: 24px !important; /* Adjust icon size using !important */
  transition: color 0.3s ease; /* Add transition for smooth color change */
}

.custom-icon:hover {
  color: green !important; /* Change color on hover using !important */
}

/* ... rest of your styles ... */


/* Custom Styles for dryer box type */
.btn-outline-green {
  color: green;
  background-color: transparent;
  border-color: green;
  padding: 0.375rem 0.75rem;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 0.25rem;
  display: inline-block;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* Add a smooth transition effect */

  /* Ensure these styles are explicitly set */
  background-image: none;
  box-shadow: none;
}

/* Dryer box Hover effect */
.btn-outline-green:hover {
  background-color: green; /* Set a different background color on hover */
  border-color: green; /* Adjust border color on hover */
  color: #fff; /* Adjust text color on hover */
}

/* Style for the checked state */
.btn-outline-green:checked {
  background-color: red; /* Set a solid background color when checked */
  color: #fff;
}