body {
  --app-header-height: 78px;
  --app-header-top-offset: 0px;

  --app-header-shift: calc(
    var(--app-header-height) + var(--app-header-top-offset)
  );
}

body.customize-support {
  --app-header-top-offset: 32px;
}

@media screen and (max-width: 782px) {
  body.customize-support {
    --app-header-top-offset: 46px;
  }
}

@media screen and (max-width: 600px) {
  body.customize-support {
    --app-header-top-offset: 0px;
  }
}

.app-header {
  position: sticky;
  z-index: 90;
  top: var(--app-header-top-offset);
}

.app-header .app-navbar {
  color: rgba(var(--theme-yellow-100));

  /* backdrop-filter: blur(10px);
  background-color: rgba(var(--theme-black-100), 80%); */
  background-color: rgba(var(--theme-black-100), 100%);

  border-bottom: 1px solid rgba(var(--app-border-header-footer));
}

.app-header .offcanvas-header {
    margin-top: var(--app-header-top-offset);
}

.app-header .app-navbar .app-logo {
  max-width: 150px;
}

.app-header .app-navbar .navbar-nav {
  --bs-nav-link-color: rgba(var(--theme-yellow-100));
  --bs-nav-link-hover-color: rgba(var(--theme-white-100));
  --bs-navbar-active-color: rgba(var(--theme-white-100));
}

.app-header .app-navbar .dropdown-menu {
  --bs-dropdown-link-color: rgba(var(--theme-yellow-100));

  --bs-dropdown-link-active-color: rgba(var(--theme-black-100));
  --bs-dropdown-link-active-bg: rgba(var(--theme-white-100));

  --bs-dropdown-link-hover-color: rgba(var(--theme-black-100));
  --bs-dropdown-link-hover-bg: rgba(var(--theme-yellow-100));
}

.app-header .app-navbar .btn-close {
  --bs-btn-close-color: rgba(var(--theme-white-100));
  --bs-btn-close-bg: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNlZGVmZjIiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS14LWljb24gbHVjaWRlLXgiPjxwYXRoIGQ9Ik0xOCA2IDYgMTgiLz48cGF0aCBkPSJtNiA2IDEyIDEyIi8+PC9zdmc+);
}

/*
.app-header .app-navbar .offcanvas {
  margin-top: var(--app-header-shift);
}
*/

.app-header .app-navbar .offcanvas,
.app-header .app-navbar .dropdown-menu {
  background-color: rgba(var(--theme-black-100));
}

.app-header .app-navbar .navbar-toggler {
  color: rgba(var(--theme-yellow-100));
  border-color: rgba(var(--theme-yellow-100));
}

.app-header .app-navbar .navbar-toggler-icon {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNiYWEwMGQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1tZW51LWljb24gbHVjaWRlLW1lbnUiPjxwYXRoIGQ9Ik00IDEyaDE2Ii8+PHBhdGggZD0iTTQgMThoMTYiLz48cGF0aCBkPSJNNCA2aDE2Ii8+PC9zdmc+);
}

.app-header .app-navbar .navbar-nav {
  gap: 1rem;
}