.shell-side-navigation-backdrop.ng-hide {
  opacity: 0;
}

.shell-side-navigation-backdrop.ng-hide-add, .shell-side-navigation-backdrop.ng-hide-remove {
  transition: opacity 450ms;
}

.shell-side-navigation-backdrop {
  width: 100vw;
  height: calc(100 * var(--window-inner-height));
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10999;
  outline: none;
  background-color: rgba(var(--backdrop-color));
}

.shell-side-navigation-backdrop.dark-mode {
  background-color: rgba(21, 21, 21, 0.42); /* todo: use variable */
}

.shell-side-navigation {
  display: flex;
  flex: 1;
  flex-direction: row;
  background-color: rgba(var(--background-content));
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
  min-width: 320px;
  height: calc(100 * var(--window-inner-height));
  box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  transform: translateX(320px);
  transition: transform 420ms ease;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 11000;
  border-top-left-radius: var(--default-radius-large);
  border-bottom-left-radius: var(--default-radius-large);
  overflow: hidden;
  outline: none;
  pointer-events: none;
}

.shell-side-navigation.is-visible {
  transform: translateX(0);
  pointer-events: auto;
}

.shell-side-navigation .shell-side-navigation-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  max-width: 256px;
}

.shell-side-navigation .shell-side-navigation-content .shell-side-navigation-toolbar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid rgba(var(--navbar-top-background));
  width: 100%;
  min-height: var(--navbar-top-height);
  max-height: var(--navbar-top-height);
  background-color: rgba(var(--navbar-top-background));
  padding-top: env(safe-area-inset-top, 0);
}

.shell-side-navigation .shell-side-navigation-content .shell-side-navigation-toolbar .shell-side-navigation-user-information, .shell-side-navigation .shell-side-navigation-content .shell-side-navigation-toolbar .shell-side-navigation-user-login {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  outline: none;
}

.shell-side-navigation .shell-side-navigation-content .shell-side-navigation-toolbar .shell-side-navigation-user-information .shell-side-navigation-user-avatar {
  border-radius: 50%;
  border: 0;
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  height: 40px;
  box-sizing: border-box;
  background-color: rgba(var(--background-content-accent));
  margin: 8px;
  padding: 2px;
}

.shell-side-navigation .shell-side-navigation-content .shell-side-navigation-toolbar .shell-side-navigation-user-information .shell-side-navigation-user {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}

.shell-side-navigation:not(.dark-mode) .shell-side-navigation-content .shell-side-navigation-toolbar .shell-side-navigation-user-information .shell-side-navigation-user {
  color: rgba(var(--font-color));
}

.shell-side-navigation .shell-side-navigation-content .shell-side-navigation-toolbar .shell-side-navigation-user-information .shell-side-navigation-user .shell-side-navigation-user-name {
  font-size: 12pt;
}

.shell-side-navigation .shell-side-navigation-content .shell-side-navigation-toolbar .shell-side-navigation-user-information .shell-side-navigation-user .shell-side-navigation-user-name, .shell-side-navigation .shell-side-navigation-content .shell-side-navigation-toolbar .shell-side-navigation-user-information .shell-side-navigation-user .shell-side-navigation-user-email {
  text-overflow: ellipsis;
  max-width: 200px;
  overflow: hidden;
  word-break: normal;
  white-space: nowrap;
}

.shell-side-navigation .shell-side-navigation-content .shell-side-navigation-modules {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
}

.shell-side-navigation .shell-side-navigation-content .shell-side-navigation-modules .shell-side-navigation-modules-wrapper {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.shell-side-navigation .shell-side-navigation-content .shell-side-navigation-modules .shell-side-navigation-modules-wrapper .shell-side-navigation-modules-divider {
  align-items: center;
  border-bottom: 1px solid rgba(var(--color-alpha-grey));
  display: flex;
  font-size: 10pt;
  height: 1px;
  justify-content: center;
  line-height: 0;
  margin: 8px 0;
  overflow: visible;
  padding: 0;
}

.shell-side-navigation .shell-side-navigation-content .shell-side-navigation-modules .shell-side-navigation-modules-wrapper .shell-side-navigation-modules-divider:last-of-type {
  flex: 1;
}

.shell-side-navigation .shell-side-navigation-content .shell-side-navigation-modules .shell-side-navigation-modules-wrapper .shell-side-navigation-modules-divider span {
  background-color: rgba(var(--background-content));
}

.shell-side-navigation .shell-side-navigation-content .shell-side-navigation-modules button {
  display: flex;
  flex: 1;
  margin: 0;
  min-width: 0;
  min-height: 48px;
  max-height: 48px;
  justify-content: center;
  border-right: 4px solid transparent;
  box-sizing: border-box;
  border-radius: 0;
  padding: 0 16px;
  color: rgba(var(--font-color));
}

.shell-side-navigation .shell-side-navigation-content .shell-side-navigation-modules button md-icon {
  transition: color 420ms ease;
  color: rgba(var(--font-color));
}

.shell-side-navigation .shell-side-navigation-content .shell-side-navigation-modules button:hover md-icon {
  color: rgba(var(--primary-color));
}

.shell-side-navigation .shell-side-navigation-content .shell-side-navigation-modules button span {
  flex: 1;
  text-align: left;
  padding-left: 16px;
  font-size: 9pt;
  text-overflow: ellipsis;
  max-width: 196px;
  overflow: hidden;
  box-sizing: border-box;
  color: rgba(var(--font-color));
}

.shell-side-navigation .shell-side-navigation-content .shell-side-navigation-modules button[disabled] span, .shell-side-navigation .shell-side-navigation-content .shell-side-navigation-modules button[disabled], .shell-side-navigation .shell-side-navigation-content .shell-side-navigation-toolbar .shell-side-navigation-user-login button[disabled], .shell-side-navigation .shell-side-navigation-right-spacer .shell-side-navigtion-logout-button[disabled], .shell-side-navigation .shell-side-navigation-right-spacer .shell-side-navigtion-login-button[disabled] {
  color: rgba(var(--font-color-disabled));
}

.shell-side-navigation .shell-side-navigation-content .shell-side-navigation-modules button[disabled] md-icon, .shell-side-navigation .shell-side-navigation-right-spacer .shell-side-navigtion-logout-button[disabled] md-icon, .shell-side-navigation .shell-side-navigation-right-spacer .shell-side-navigtion-login-button[disabled] md-icon {
  color: rgba(var(--font-color-disabled));
}

.shell-side-navigation .shell-side-navigation-content .shell-side-navigation-modules button.is-active {
  border-right: 4px solid rgba(var(--primary-color));
}

.shell-side-navigation .shell-side-navigation-right-spacer {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 64px;
  min-width: 64px;
  max-width: 64px;
  flex: 1;
  background-color: rgba(var(--background-content-accent));
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.dark-mode .shell-side-navigation .shell-side-navigation-right-spacer {
  background-color: rgba(var(--background-main));
}

.shell-side-navigation .shell-side-navigation-right-spacer .shell-side-navigation-right-spacer-button-wrapper {
  max-width: 64px;
  max-height: 93px;
}

.shell-side-navigation .shell-side-navigation-right-spacer .shell-side-navigation-right-spacer-button-wrapper .shell-side-navigtion-toggle-button {
  width: 64px;
  height: var(--navbar-top-height);
  min-width: 0;
  border: none;
  outline: none;
  background-color: rgba(var(--navbar-top-background));
  box-sizing: content-box;
  padding: 0;
  border-radius: 0;
  border-bottom: 1px solid rgba(var(--navbar-top-background));
  padding-top: env(safe-area-inset-top, 0);
}

.shell-side-navigation .shell-side-navigation-right-spacer .shell-side-navigation-right-spacer-button-wrapper .shell-side-navigtion-toggle-button md-icon {
  color: rgba(var(--navbar-top-icon-color));
}

.shell-side-navigation .shell-side-navigation-right-spacer .shell-side-navigtion-info-button md-icon {
  color: rgba(var(--primary-color));
}

.shell-side-navigation .shell-side-navigation-right-spacer .shell-side-navigtion-toggle-theme-button md-icon {
  color: rgba(var(--color-alpha-grey)) !important;
  fill: rgba(var(--color-alpha-grey)) !important;
}

.shell-side-navigation .shell-side-navigation-right-spacer .shell-side-navigtion-info-button, .shell-side-navigation .shell-side-navigation-right-spacer .shell-side-navigtion-logout-button, .shell-side-navigation .shell-side-navigation-right-spacer .shell-side-navigtion-info-button, .shell-side-navigation .shell-side-navigation-right-spacer .shell-side-navigtion-login-button, .shell-side-navigation .shell-side-navigation-right-spacer .shell-side-navigtion-toggle-theme-button {
  width: 64px;
  height: 48px;
  min-width: 0;
  border: none;
  outline: none;
}

.shell-side-navigation .shell-side-navigation-right-spacer .shell-side-navigtion-logout-button:not([disabled]), .shell-side-navigation .shell-side-navigation-right-spacer .shell-side-navigtion-logout-button:not([disabled]) md-icon {
  color: rgba(var(--color-error));
}

.shell-side-navigation .shell-side-navigation-right-spacer .shell-side-navigtion-login-button:not([disabled]), .shell-side-navigation .shell-side-navigation-right-spacer .shell-side-navigtion-login-button:not([disabled]) md-icon {
  color: rgba(var(--primary-color));
}

/* DARK MODE FOR CONFERENCE */

/* .shell-side-navigation.dark-mode {
  background-color: rgba(var(--color-dark-mode-light)) !important;
  color: #F4F4F4 !important;
} */

/* .shell-side-navigation.dark-mode md-icon, */

/* .shell-side-navigation.dark-mode button:not([disabled]),
.shell-side-navigation.dark-mode button:not([disabled]) span,
.shell-side-navigation.dark-mode button:not([disabled]) md-icon,
.shell-side-navigation.dark-mode .shell-side-navigation-content .shell-side-navigation-toolbar {
  color: #F4F4F4 !important;
  fill: #F4F4F4 !important;
}

.shell-side-navigation.dark-mode .shell-side-navigation-content .shell-side-navigation-toolbar,
.shell-side-navigation.dark-mode .shell-side-navigation-content .shell-side-navigation-modules .shell-side-navigation-modules-wrapper .shell-side-navigation-modules-divider,
.shell-side-navigation.dark-mode .shell-side-navigation-right-spacer .shell-side-navigation-right-spacer-button-wrapper .shell-side-navigtion-toggle-button {
  border-bottom: 1px solid rgba(var(--color-dark-mode-light)) !important;
}

.shell-side-navigation.dark-mode .shell-side-navigation-content .shell-side-navigation-toolbar,
.shell-side-navigation.dark-mode .shell-side-navigation-right-spacer .shell-side-navigation-right-spacer-button-wrapper,
.shell-side-navigation.dark-mode .shell-side-navigation-right-spacer .shell-side-navigation-right-spacer-button-wrapper .shell-side-navigtion-toggle-button {
  background-color: rgba(var(--color-dark-mode-dark)) !important;
  color: #F4F4F4 !important;
}

.shell-side-navigation.dark-mode .shell-side-navigation-right-spacer {
  background-color: rgba(var(--color-dark-mode-dark)) !important;
}

.shell-side-navigation.dark-mode .shell-side-navigation-content .shell-side-navigation-modules button.is-active {
  border-right: 4px solid #F4F4F4 !important;
} */

@media (max-width: 320px) {
  .shell-side-navigation {
    border-radius: 0;
  }
}