/* Converted from SASS to CSS */

.top-header {
  position: relative;
  z-index: 980;
  top: 0;
  width: inherit;
  background: #ffffff;
  padding: 0;
}

.top-header .top-header-container .navbar {
  justify-content: flex-start;
  margin-inline: calc(var(--bs-gutter-x) * -0.5);
  padding-left: calc(var(--bs-gutter-x) );
  padding-right: calc(var(--bs-gutter-x) );
  background-image: linear-gradient(to right, #dee2e6, #dee2e6);
  background-size: 100% 2px;
  background-position: center bottom;
  background-repeat: no-repeat;
}

.top-header .top-header-container .navbar .page-logo {
  min-width: 100px;
}

.top-header .top-header-container .navbar .navbar-collapse {
  flex-wrap: nowrap;
}

.top-header .navbar-nav {
  flex-wrap: nowrap;
}

.top-header .navbar-nav .nav-item {
  padding: 0;
}

.top-header .navbar-nav .nav-item .nav-link {
  --padding-x: 1.5rem;
  position: relative;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 24px;
  padding: 0 var(--padding-x);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--bs-text-default, #212529);
  border-radius: 0.375rem;
  transition: color 0.1s, background-color 0.1s, filter 0.1s;
}

.top-header .navbar-nav .nav-item .nav-link .text {
  display: inline-block;
  padding: 1.5rem 0;
  position: relative;
  transition: inherit;
	width:auto !important;						
}

.top-header .navbar-nav .nav-item .nav-link .text::before {
  content: '';
  transition: inherit;
  position: absolute;
  height: 6px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding-inline: calc(50% + min(8px, calc(var(--padding-x) - 4px)));
  border-radius: 50rem;
  display: none;
}

.top-header .navbar-nav .nav-item .nav-link:hover .text::before,
.top-header .navbar-nav .nav-item .nav-link:active .text::before,
.top-header .navbar-nav .nav-item .nav-link.active .text::before,
.top-header .navbar-nav .nav-item .nav-link.collapse-toggle .text::before {
  display: block;
}

.top-header .navbar-nav .nav-item .nav-link:hover,
.top-header .navbar-nav .nav-item .nav-link.collapse-toggle.collapsed:hover {
  background-color: var(--bs-gray-100, #f8f9fa);
}

.top-header .navbar-nav .nav-item .nav-link:hover .text::before,
.top-header .navbar-nav .nav-item .nav-link.collapse-toggle.collapsed:hover .text::before {
  display: block;
  background-color: var(--bs-gray-400, #ced4da);
}

.top-header .navbar-nav .nav-item .nav-link:active,
.top-header .navbar-nav .nav-item .nav-link.collapse-toggle {
  background-color: var(--bs-gray-200, #e9ecef);
}

.top-header .navbar-nav .nav-item .nav-link:active .text::before,
.top-header .navbar-nav .nav-item .nav-link.collapse-toggle .text::before {
  background-color: #000000;
}

.top-header .navbar-nav .nav-item .nav-link:active.collapsed,
.top-header .navbar-nav .nav-item .nav-link.collapse-toggle.collapsed {
  background-color: transparent;
}

.top-header .navbar-nav .nav-item .nav-link:active.collapsed .text::before,
.top-header .navbar-nav .nav-item .nav-link.collapse-toggle.collapsed .text::before {
  display: none;
}

.top-header .navbar-nav .nav-item .nav-link.active,
.top-header .navbar-nav .nav-item .nav-link.collapse-toggle.active {
  color: #ffffff;
  display: inline-block;
  overflow: visible;
  background-color: var(--bs-nav-primary, #007d65);
}

.top-header .navbar-nav .nav-item .nav-link.active .text i,
.top-header .navbar-nav .nav-item .nav-link.active .text::after,
.top-header .navbar-nav .nav-item .nav-link.collapse-toggle.active .text i,
.top-header .navbar-nav .nav-item .nav-link.collapse-toggle.active .text::after {
  transition: inherit;
  filter: invert(1) brightness(2);
}

.top-header .navbar-nav .nav-item .nav-link.active .text::before,
.top-header .navbar-nav .nav-item .nav-link.collapse-toggle.active .text::before {
  display: block;
}

.top-header .navbar-nav .nav-item .nav-link.active:hover,
.top-header .navbar-nav .nav-item .nav-link.collapse-toggle.active:hover {
  background-color: #1b8354;
}

.top-header .navbar-nav .nav-item .nav-link.active:active,
.top-header .navbar-nav .nav-item .nav-link.collapse-toggle.active:active {
  background-color: #046452;
}

.top-header .navbar-nav .nav-item .nav-link.active .text::before,
.top-header .navbar-nav .nav-item .nav-link.active:hover .text::before,
.top-header .navbar-nav .nav-item .nav-link.active.collapse-toggle.show .text::before,
.top-header .navbar-nav .nav-item .nav-link.collapse-toggle.active .text::before,
.top-header .navbar-nav .nav-item .nav-link.collapse-toggle.active:hover .text::before,
.top-header .navbar-nav .nav-item .nav-link.collapse-toggle.active.collapse-toggle.show .text::before {
  background-color: #c2d2d0;
}

.top-header .navbar-nav .nav-item .nav-link:focus-visible,
.top-header .navbar-nav .nav-item .nav-link.collapse-toggle:focus-visible {
  z-index: 985;
}

.top-header .navbar-nav .nav-item.collapse {
  position: unset;
}

.top-header .navbar-nav .nav-item.collapse .collapse-toggle.show .text::after {
  transform: rotate(180deg);
}

/* Navbar toggler styles would be imported separately */
/* .navbar-toggler styles */

.has-control-menu {
  --liferay-controls-height: 56px;
}

.has-control-menu.has-edit-mode-menu {
  --liferay-controls-height: calc(56px + 65px);
}

.has-control-menu .top-header {
  top: calc(var(--liferay-controls-height));
}

.has-control-menu .top-header .top-header-container .navbar .navbar-collapse .site-menu {
  max-height: calc(100 * var(--vh) - 72px - var(--liferay-controls-height) - 2rem - 4rem);
}

header .user-personal-bar .user-avatar-link .panel-notifications-count,
.top-header .top-menu .navbar-nav .nav-user .panel-notifications-count {
  inset-inline-end: calc(100% - 1.6rem);
  inset-inline-start: auto;
  top: -2%;
}

header .user-personal-bar .user-avatar-link .panel-notifications-count .badge-red,
.top-header .top-menu .navbar-nav .nav-user .panel-notifications-count .badge-red {
  margin-right: 0;
  margin-left: 0;
}

header#banner .logo h1 {
  display: none;
}

header#banner .navbar-light {
  display: none;
}
.nav-user i {
    font-size: 18px;
    font-weight: 600;
    padding-inline-end: 4px;
  }
/* Additional CSS variables that would replace SASS variables */
:root {
  --bs-white: #ffffff;
  --bs-black: #000000;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-nav-primary: #007d65;
  --bs-nav-primary-400: #6ea8fe;
  --bs-nav-primary-700: #0a58ca;
  --bs-nav-primary-900: #084298;
  --bs-text-default: #212529;
  --bs-border-radius-sm: 0.375rem;
  --bs-border-radius-pill: 50rem;
  --bs-gutter-x: 1.5rem;
  --bs-font-size-md: 1.125rem;
}

/* Mobile padding equivalent */
@media (max-width: 767.98px) {
  .mobile-bottom-padding {
    padding-bottom: 2rem;
  }
}