.shell {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: calc(100 * var(--window-inner-height));
  max-height: calc(100 * var(--window-inner-height));
  min-height: calc(100 * var(--window-inner-height));
  width: 100vw;
  max-width: 100vw;
  min-width: 100vw;
  align-items: center;
}

/* Shell Toolbar */

.shell .shell-toolbar {
  display: flex;
  width: 100%;
  flex: 1;
  justify-content: center;
  align-items: center;
  height: calc(var(--navbar-top-height) + env(safe-area-inset-top, 0));
  min-height: calc(var(--navbar-top-height) + env(safe-area-inset-top, 0));
  max-height: calc(var(--navbar-top-height) + env(safe-area-inset-top, 0));
  background-color: rgba(var(--navbar-top-background)) !important;
  z-index: 4;
  padding-top: env(safe-area-inset-top, 0);
  box-sizing: border-box;
}

.shell .shell-toolbar img {
  outline: none;
}

.shell .shell-toolbar.elevate {
  box-shadow: 0 2px 4px rgba(var(--color-alpha-grey));
}

.shell .shell-toolbar-content {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  max-height: var(--navbar-top-height);
  position: relative;
}

.shell .shell-toolbar-content .shell-previous-wrapper {
  /* display: flex; */
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 64px;
  min-height: 64px;
  max-height: 64px;
  min-width: 48px;
  max-width: 48px;
  display: none;
  /* TODO */
}

.shell .shell-toolbar .md-button:not([disabled]) md-icon, .shell .shell-toolbar .md-button:not([disabled]) span {
  color: rgba(var(--navbar-top-icon-color));
}

.shell .shell-toolbar .notification-center-trigger-button {
  position: relative;
}

.shell .shell-toolbar .notification-center-trigger-button i {
  position: absolute;
  top: 6px;
  right: calc(50% - 20px);
  width: 8px;
  height: 8px;
  transform: translateX(-50%);
  border-radius: 50%;
  background-color: rgba(var(--notifcation-indicator-color));
}

.shell .shell-toolbar .notification-center-trigger-button.has-unread-notifications md-icon[md-svg-icon="social:notifications"] {
  -moz-animation: ring 5s ease-in-out 5s infinite;
  -moz-transform-origin: 50% 4px;
  -o-animation: ring 5s ease-in-out 5s infinite;
  -o-transform-origin: 50% 4px;
  -webkit-animation: ring 5s ease-in-out 5s infinite;
  -webkit-transform-origin: 50% 4px;
  -ms-animation: ring 5s ease-in-out 5s infinite;
  -ms-transform-origin: 50% 4px;
  animation: ring 5s ease-in-out 5s infinite;
  transform-origin: 50% 4px;
}

.shell .shell-toolbar .side-navigation-trigger-button {
  width: 64px;
  height: 64px;
  min-width: 64px;
  min-height: 64px;
  padding: 0;
  margin: 0;
}

.shell .shell-toolbar .md-toolbar-tools {
  align-items: center;
  padding: 0;
}

.shell .shell-toolbar .shell-toolbar-button-wrapper-not-logged-in, .shell .shell-toolbar .shell-toolbar-button-wrapper-logged-in {
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.shell .shell-toolbar .shell-toolbar-split {
  display: flex;
}

/* Connection Settings */

.shell .connection-GPRS md-icon, .shell .connection-EDGE md-icon {
  color: rgba(var(--color-error)) !important;
  fill: rgba(var(--color-error)) !important;
}

.shell .connection-UMTS md-icon {
  color: rgba(var(--color-info)) !important;
  fill: rgba(var(--color-info)) !important;
}

.shell .connection-HSDPA md-icon, .shell .connection-LTE md-icon {
  color: rgba(var(--color-success)) !important;
  fill: rgba(var(--color-success)) !important;
}

.shell .connection-BEST md-icon {
  color: rgba(var(--navbar-top-icon-color)) !important;
  fill: rgba(var(--navbar-top-icon-color)) !important;
}

.shell .logo-and-claim-container {
  display: flex;
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  padding-left: 8px;
  max-width: 256px;
  height: 100%;
}

.shell .logo-and-claim-container .logo-container {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.shell .logo-and-claim-container .logo-container .smart-glasses-command {
  position: absolute;
  bottom: -20px;
  text-transform: uppercase;
  color: rgba(var(--primary-color));
}

.shell .logo-and-claim-container .logo-container.is-vuzix .logo-app {
  display: none;
}

.shell .logo-and-claim-container .logo-container .logo-app {
  cursor: pointer;
  max-width: 256px;
  max-height: 48px;
  min-height: 48px;
}

.shell .logo-and-claim-container .logo-container .logo-app.logo-app-dark-mode {
  display: none;
}

.dark-mode .shell .logo-and-claim-container .logo-container .logo-app:not(.logo-app-dark-mode) {
  display: none;
}

.dark-mode .shell .logo-and-claim-container .logo-container .logo-app.logo-app-dark-mode {
  display: block;
}

.shell .logo-and-claim-container .logo-container .logo-app.is-vuzix {
  max-width: 200px;
}

.shell .logo-and-claim-container .logo-container .icon-app {
  cursor: pointer;
  width: 48px;
  max-width: 48px;
  min-width: 48px;
  height: 48px;
  max-height: 48px;
  min-height: 48px;
  display: none;
}

.shell .logo-and-claim-container .logo-container.is-vuzix .icon-app {
  box-sizing: border-box;
  border: 2px solid transparent;
  border-radius: var(--default-radius);
}

.shell .logo-and-claim-container .logo-container.is-vuzix .icon-app {
  display: block;
}

.shell .logo-and-claim-container .logo-container.is-vuzix .icon-app:focus {
  border: 2px solid rgba(var(--vuzix-focus-color));
}

.shell .logo-and-claim-container .claim-container {
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.shell .logo-and-claim-container .claim-container img {
  max-width: 112px;
  margin: 0 8px;
}

/* Content */

.shell .shell-content-wrapper {
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100vw;
  box-sizing: border-box;
  height: 100%;
}

.shell .shell-content-wrapper [ui-view], .shell .shell-content-wrapper ui-view {
  width: 100%;
  height: 100%;
  padding-left: env(safe-area-inset-left, 0) !important;
  padding-right: env(safe-area-inset-right, 0) !important;
  box-sizing: border-box;
}

.shell .shell-content-wrapper.is-smartglasses {
  padding-bottom: 0;
}

/* Bottom Navigation */

.shell .shell-bottom-navigation {
  display: flex;
  height: calc(var(--navbar-bottom-height) + env(safe-area-inset-bottom, 0));
  min-height: calc(var(--navbar-bottom-height) + env(safe-area-inset-bottom, 0));
  width: 100%;
  background-color: rgba(var(--navbar-bottom-background));
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  z-index: 2;
}

.shell-bottom-button-wrapper {
  display: flex;
  flex: 1;
  justify-content: space-evenly;
  align-items: center;
  max-width: 960px;
}

.shell-bottom-info-button-wrapper {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: flex-start;
  max-width: 960px;
  height: 100%;
}

.shell-bottom-info-button-wrapper .md-button:first-child {
  min-width: 36px !important;
}

.shell-bottom-info-button-wrapper .md-button:last-child {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}

@media (max-width: 960px) {
  .shell-toolbar .md-button:not(.side-navigation-trigger-button):not(.smart-glasses-button) {
    max-width: 42px;
    min-width: 42px;
    min-height: 42px;
    max-height: 42px;
    margin: 0;
  }
  .shell-toolbar .md-button:not(.side-navigation-trigger-button):not(.availability-directive-save-button):not(.smart-glasses-button) span {
    display: none;
  }
}

@media (max-width: 600px) {
  .shell .shell-toolbar-content .spacer {
    display: none;
  }
  .shell .shell-toolbar-content .shell-previous-wrapper {
    display: none;
  }
  .shell .logo-and-claim-container .logo-container:not(.is-logged-in) .logo-app {
    max-width: 210px;
  }
}

@media (max-width: 599px) {
  .shell-toolbar .md-toolbar-tools, .shell-toolbar .md-button {
    padding: 0;
  }
  .shell-toolbar .shell-toolbar-button-wrapper-not-logged-in {
    padding-right: 8px;
  }
}

@media (max-width: 400px) {
  .shell .logo-and-claim-container .logo-container {
    justify-content: flex-start;
  }
  .shell .logo-and-claim-container .logo-container .logo-app {
    max-width: 210px;
  }
  .shell .logo-and-claim-container .logo-container:not(.is-logged-in) .logo-app {
    display: none !important;
  }
  .shell .logo-and-claim-container .logo-container:not(.is-logged-in) .icon-app {
    display: block;
  }
}

@media (max-width: 374px) {
  .shell .logo-and-claim-container .logo-container {
    justify-content: flex-start;
  }
  .shell .logo-and-claim-container .logo-container .logo-app {
    display: none !important;
  }
  .shell .logo-and-claim-container .logo-container .icon-app {
    display: block;
  }
}

.shell .shell-toolbar-debug-text {
  border: 2px solid rgba(var(--font-color));
  border-radius: var(--default-radius);
  padding: 2px 4px;
  background-color: rgba(var(--navbar-top-background));
  font-weight: 600;
}

/* Animations */
@-moz-keyframes ring {
  0% { -moz-transform: rotate(0); }
  1% { -moz-transform: rotate(30deg); }
  3% { -moz-transform: rotate(-28deg); }
  5% { -moz-transform: rotate(34deg); }
  7% { -moz-transform: rotate(-32deg); }
  9% { -moz-transform: rotate(30deg); }
  11% { -moz-transform: rotate(-28deg); }
  13% { -moz-transform: rotate(26deg); }
  15% { -moz-transform: rotate(-24deg); }
  17% { -moz-transform: rotate(22deg); }
  19% { -moz-transform: rotate(-20deg); }
  21% { -moz-transform: rotate(18deg); }
  23% { -moz-transform: rotate(-16deg); }
  25% { -moz-transform: rotate(14deg); }
  27% { -moz-transform: rotate(-12deg); }
  29% { -moz-transform: rotate(10deg); }
  31% { -moz-transform: rotate(-8deg); }
  33% { -moz-transform: rotate(6deg); }
  35% { -moz-transform: rotate(-4deg); }
  37% { -moz-transform: rotate(2deg); }
  39% { -moz-transform: rotate(-1deg); }
  41% { -moz-transform: rotate(1deg); }

  43% { -moz-transform: rotate(0); }
  100% { -moz-transform: rotate(0); }
}

@-o-keyframes ring {
  0% { -webkit-transform: rotateZ(0); }
  1% { -webkit-transform: rotateZ(30deg); }
  3% { -webkit-transform: rotateZ(-28deg); }
  5% { -webkit-transform: rotateZ(34deg); }
  7% { -webkit-transform: rotateZ(-32deg); }
  9% { -webkit-transform: rotateZ(30deg); }
  11% { -webkit-transform: rotateZ(-28deg); }
  13% { -webkit-transform: rotateZ(26deg); }
  15% { -webkit-transform: rotateZ(-24deg); }
  17% { -webkit-transform: rotateZ(22deg); }
  19% { -webkit-transform: rotateZ(-20deg); }
  21% { -webkit-transform: rotateZ(18deg); }
  23% { -webkit-transform: rotateZ(-16deg); }
  25% { -webkit-transform: rotateZ(14deg); }
  27% { -webkit-transform: rotateZ(-12deg); }
  29% { -webkit-transform: rotateZ(10deg); }
  31% { -webkit-transform: rotateZ(-8deg); }
  33% { -webkit-transform: rotateZ(6deg); }
  35% { -webkit-transform: rotateZ(-4deg); }
  37% { -webkit-transform: rotateZ(2deg); }
  39% { -webkit-transform: rotateZ(-1deg); }
  41% { -webkit-transform: rotateZ(1deg); }

  43% { -webkit-transform: rotateZ(0); }
  100% { -webkit-transform: rotateZ(0); }
}

@-webkit-keyframes ring {
  0% { -webkit-transform: rotateZ(0); }
  1% { -webkit-transform: rotateZ(30deg); }
  3% { -webkit-transform: rotateZ(-28deg); }
  5% { -webkit-transform: rotateZ(34deg); }
  7% { -webkit-transform: rotateZ(-32deg); }
  9% { -webkit-transform: rotateZ(30deg); }
  11% { -webkit-transform: rotateZ(-28deg); }
  13% { -webkit-transform: rotateZ(26deg); }
  15% { -webkit-transform: rotateZ(-24deg); }
  17% { -webkit-transform: rotateZ(22deg); }
  19% { -webkit-transform: rotateZ(-20deg); }
  21% { -webkit-transform: rotateZ(18deg); }
  23% { -webkit-transform: rotateZ(-16deg); }
  25% { -webkit-transform: rotateZ(14deg); }
  27% { -webkit-transform: rotateZ(-12deg); }
  29% { -webkit-transform: rotateZ(10deg); }
  31% { -webkit-transform: rotateZ(-8deg); }
  33% { -webkit-transform: rotateZ(6deg); }
  35% { -webkit-transform: rotateZ(-4deg); }
  37% { -webkit-transform: rotateZ(2deg); }
  39% { -webkit-transform: rotateZ(-1deg); }
  41% { -webkit-transform: rotateZ(1deg); }

  43% { -webkit-transform: rotateZ(0); }
  100% { -webkit-transform: rotateZ(0); }
}

@keyframes ring {
  0% { transform: rotate(0); }
  1% { transform: rotate(30deg); }
  3% { transform: rotate(-28deg); }
  5% { transform: rotate(34deg); }
  7% { transform: rotate(-32deg); }
  9% { transform: rotate(30deg); }
  11% { transform: rotate(-28deg); }
  13% { transform: rotate(26deg); }
  15% { transform: rotate(-24deg); }
  17% { transform: rotate(22deg); }
  19% { transform: rotate(-20deg); }
  21% { transform: rotate(18deg); }
  23% { transform: rotate(-16deg); }
  25% { transform: rotate(14deg); }
  27% { transform: rotate(-12deg); }
  29% { transform: rotate(10deg); }
  31% { transform: rotate(-8deg); }
  33% { transform: rotate(6deg); }
  35% { transform: rotate(-4deg); }
  37% { transform: rotate(2deg); }
  39% { transform: rotate(-1deg); }
  41% { transform: rotate(1deg); }

  43% { transform: rotate(0); }
  100% { transform: rotate(0); }
}