/* Bootstrap 5: Fluid width navbar using flexbox */
@media (min-width: 768px) {
  .navbar-fluid-width .container-fluid {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .navbar-fluid-width .navbar-nav {
    display: flex;
    flex-direction: row;
    width: 100%;
  }

  .navbar-fluid-width .navbar-nav > .nav-item {
    flex: 1 1 auto;
  }

  .navbar-fluid-width .navbar-nav > .nav-item > .nav-link {
    text-align: center;
    white-space: nowrap;
    padding-left: 0;
    padding-right: 0;
  }

  .navbar-fluid-width .navbar-nav > .nav-item > .dropdown-menu {
    min-width: 100%;
  }
}

@media (min-width: 768px) {
  .navbar-fluid-width-combined .navbar-container {
    display: flex;
    width: 100%;
  }

  .navbar-fluid-width-combined .navbar-container .container-fluid {
    padding-right: 0;
  }

  .navbar-fluid-width-combined .navbar-nav {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-left: auto;
  }

  .navbar-fluid-width-combined .navbar-nav > .nav-item {
    flex: 1 1 auto;
    width: 1%;
  }

  .navbar-fluid-width-combined .navbar-nav > .nav-item > .nav-link {
    text-align: center;
    padding-left: 0;
    padding-right: 0;
  }
}