/* This is a workaround file to use the new module system in scss
Bootstrap 5.2.3 doesn't support the new @use feature but is's getting deprecated and will be removed
in October 2022 from the newest SCSS Release

*/
/* Displays the Logo with The brand Name in horizontal direction */
#main-navbar .brand {
  display: flex;
  flex-direction: row;
  word-wrap: break-word;
  justify-content: center;
}
#main-navbar .logo-wrapper .logo {
  min-height: 20px;
  max-height: 8vh;
}
#main-navbar .brand-name-wrapper {
  text-align: center;
  display: flex;
  align-items: center;
}
#main-navbar .brand-name-wrapper .navbar-brand {
  margin-left: 1rem;
  white-space: normal;
  font-family: var(--font-modern-1);
  color: white;
}
#main-navbar .container-fluid {
  align-items: center;
  flex-direction: column;
  flex-wrap: nowrap;
}
#main-navbar #main-navbar-navigation {
  font-family: var(--font-modern-1);
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}
#main-navbar #main-navbar-navigation ul.navbar-nav {
  height: auto;
}
#main-navbar #main-navbar-navigation ul.navbar-nav > li.nav-item > a {
  font-size: 1.2rem;
  font-weight: bold;
  color: white;
}
#main-navbar #main-navbar-navigation ul.navbar-nav li.nav-item > a:hover {
  text-decoration: underline;
}
#main-navbar .navbar-collapse {
  flex-basis: auto !important;
  flex-grow: 0 !important;
}

@keyframes fade-out {
  0% {
    height: 100px;
  }
  100% {
    height: 0px;
  }
}
@media (max-width: 991.98px) {
  #main-navbar #main-navbar-navigation:is(.collapsing, .show) {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  #main-navbar #main-navbar-navigation:is(.collapsing, .show) ul.navbar-nav {
    order: 1;
    justify-content: center;
    width: 100%;
  }
  #main-navbar #main-navbar-navigation:is(.collapsing, .show) ul.navbar-nav li {
    width: 100%;
  }
}
@media (max-width: 575.98px) {
  /* Stack Logo and Title on top of eachother*/
  #main-navbar .brand {
    flex-direction: column;
  }
  #main-navbar .logo-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
  }
  #main-navbar .logo-wrapper .logo {
    max-height: 10vh;
  }
  #main-navbar .brand-name-wrapper {
    margin-bottom: 1rem;
  }
}
/* Dropdown */
@media all and (min-width: 992px) {
  .dropdown-menu li {
    position: relative;
  }
  .dropdown-menu .submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -7px;
  }
  .dropdown-menu .submenu-left {
    right: 100%;
    left: auto;
  }
  .dropdown-menu > li:is(:hover) {
    background-color: #f1f1f1;
  }
  .dropdown-menu > :is(li):is(:hover, :active, :focus) > .submenu {
    display: block;
  }
  .dropdown-menu > li:has(a:is(:hover, :active, :focus)) > .submenu {
    display: block;
  }
}
/* ============ desktop view .end// ============ */
/* ============ Dropdown for small devices ============ */
@media (max-width: 991px) {
  .dropdown-menu .dropdown-menu {
    margin-left: 0.7rem;
    margin-right: 0.7rem;
    margin-bottom: 0.5rem;
  }
}/*# sourceMappingURL=main-navbar.css.map */