:host {
  --header-height: 3.5625rem;

  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  height: 100%;
}

  :host * {
    box-sizing: border-box;
  }

.app-layout {
  display: flex;
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
}

.app-layout__grid {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: 100%;
  grid-template-rows: var(--header-height) 1fr;
  grid-template-areas:
    "body"
    "body";
}

.app-layout:not(.app-layout--has-navigation) .app-layout__header,
  .app-layout:not(.app-layout--has-navigation) .app-layout__navigation {
    display: none;
  }

.app-layout:not(.app-layout--has-sidebar) .app-layout__sidebar {
    display: none;
  }

@media (max-width: 767px) {
    .app-layout:not(.app-layout--mobile-view-body) .app-layout__body {
      display: none;
    }
  }

@media (max-width: 767px) {
    .app-layout:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar {
      display: none;
    }
  }

.app-layout:not(.app-layout--has-app-bar-mobile-menu-button) .app-layout__app-bar-mobile-menu-button {
    display: none;
  }

.app-layout--has-navigation .app-layout__grid {
    grid-template-columns: 100%;
    grid-template-areas:
      "header"
      "navigation";
  }

@media (min-width: 768px) {

.app-layout--has-navigation .app-layout__grid {
      grid-template-columns: min(50%, 22.5rem) 1fr;
      grid-template-areas:
        "header body"
        "navigation body"
  }
    }

@media (min-width: 1440px) {

.app-layout--has-navigation .app-layout__grid {
      grid-template-columns: min(50%, 25rem) 1fr
  }
    }

@media (min-width: 768px) {

.app-layout--has-navigation .app-layout__app-bar-mobile-menu-button {
      display: none
  }
    }

@media (min-width: 992px) {
        .app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-collapsed .app-layout__grid {
          grid-template-columns: 0 1fr;
        }
        .app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__grid {
          grid-template-columns: 0 1fr;
        }

        .app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__header,
        .app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__navigation {
          position: absolute;
          z-index: 4;
          top: 0;
          left: 0;
          width: 22.5rem;
          animation: app-layout-nav-overlay-slide-in-desktop 0.1s;
          animation-fill-mode: forwards;
        }
          .app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__header:after {
            position: absolute;
            z-index: 1;
            top: 0;
            left: calc(100% + var(--s-border-width-default));
            display: block;
            width: 2rem;
            height: 100vh;
            background-image: linear-gradient(
              to right,
              rgba(0, 0, 0, 0.05) 0,
              rgba(0, 0, 0, 0) 80%,
              rgba(0, 0, 0, 0) 100%
            );
            content: "";
          }

        .app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__navigation {
          z-index: 3;
          bottom: 0;
        }
    }

@media (min-width: 1440px) {
        .app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__header,
        .app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__navigation {
          width: 25rem;
          animation: app-layout-nav-overlay-slide-in-large-desktop 0.1s;
        }
    }

@media (min-width: 768px) {
        .app-layout--has-sidebar:not(.app-layout--has-navigation):not(
      .app-layout--sidebar-positioning-overlay
    ).app-layout--sidebar-opening .app-layout__grid {
          animation: app-layout-no-nav-sidebar-slide-in 0.3s;
        }

          @media (prefers-reduced-motion) {
        .app-layout--has-sidebar:not(.app-layout--has-navigation):not(
      .app-layout--sidebar-positioning-overlay
    ).app-layout--sidebar-opening .app-layout__grid {
            animation: none
        }
          }
      }

@media (min-width: 768px) {
        .app-layout--has-sidebar:not(.app-layout--has-navigation):not(
      .app-layout--sidebar-positioning-overlay
    ).app-layout--sidebar-closing .app-layout__grid {
          animation: app-layout-no-nav-sidebar-slide-out 0.3s;
        }

          @media (prefers-reduced-motion) {
        .app-layout--has-sidebar:not(.app-layout--has-navigation):not(
      .app-layout--sidebar-positioning-overlay
    ).app-layout--sidebar-closing .app-layout__grid {
            animation: none
        }
          }
      }

@media (min-width: 768px) {
      .app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid, .app-layout--has-sidebar.app-layout--sidebar-opening .app-layout__grid {
        grid-template-columns: 1fr min(50%, 25rem);
        grid-template-areas:
          "body sidebar"
          "body sidebar";
      }
    }

.app-layout--has-sidebar .app-layout__grid {
    grid-template-columns: 100%;
    grid-template-areas:
      "body"
      "body";
  }

@media (min-width: 1800px) {

.app-layout--has-navigation.app-layout--has-sidebar:not(
    .app-layout--sidebar-positioning-overlay
  ) .app-layout__sidebar {
      position: static;
      z-index: auto;
      width: 25rem;
      animation: none;
      box-shadow: none;
      background-color: var(--s-background-default)
  }
    }

@media (min-width: 1800px) {

.app-layout--has-navigation.app-layout--has-sidebar:not(
    .app-layout--sidebar-positioning-overlay
  ).app-layout--sidebar-opening .app-layout__grid, .app-layout--has-navigation.app-layout--has-sidebar:not(
    .app-layout--sidebar-positioning-overlay
  ).app-layout--sidebar-active .app-layout__grid {
        grid-template-columns: 25rem 1fr 25rem;
        grid-template-areas:
          "header body sidebar"
          "navigation body sidebar"
    }
      }

@media (min-width: 1800px) {
      .app-layout--has-navigation.app-layout--has-sidebar:not(
    .app-layout--sidebar-positioning-overlay
  ).app-layout--sidebar-opening .app-layout__grid {
        animation: app-layout-sidebar-slide-in 0.3s;
        animation-fill-mode: forwards;
      }

        @media (prefers-reduced-motion) {
      .app-layout--has-navigation.app-layout--has-sidebar:not(
    .app-layout--sidebar-positioning-overlay
  ).app-layout--sidebar-opening .app-layout__grid {
          animation: none
      }
        }
        .app-layout--has-navigation.app-layout--has-sidebar:not(
    .app-layout--sidebar-positioning-overlay
  ).app-layout--sidebar-opening.app-layout--nav-collapsed .app-layout__grid, .app-layout--has-navigation.app-layout--has-sidebar:not(
    .app-layout--sidebar-positioning-overlay
  ).app-layout--sidebar-opening.app-layout--nav-overlayed .app-layout__grid {
          animation: app-layout-sidebar-slide-in-with-collapsed-nav 0.3s;
        }
    }

@media (min-width: 1800px) {
      .app-layout--has-navigation.app-layout--has-sidebar:not(
    .app-layout--sidebar-positioning-overlay
  ).app-layout--sidebar-closing .app-layout__grid {
        animation: app-layout-sidebar-slide-out 0.3s;
      }

        @media (prefers-reduced-motion) {
      .app-layout--has-navigation.app-layout--has-sidebar:not(
    .app-layout--sidebar-positioning-overlay
  ).app-layout--sidebar-closing .app-layout__grid {
          animation: none
      }
        }
        .app-layout--has-navigation.app-layout--has-sidebar:not(
    .app-layout--sidebar-positioning-overlay
  ).app-layout--sidebar-closing.app-layout--nav-collapsed .app-layout__grid, .app-layout--has-navigation.app-layout--has-sidebar:not(
    .app-layout--sidebar-positioning-overlay
  ).app-layout--sidebar-closing.app-layout--nav-overlayed .app-layout__grid {
          animation: app-layout-sidebar-slide-out-with-collapsed-nav 0.3s;
        }
    }

@media (min-width: 768px) {

.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid {
      grid-template-columns: min(50%, 22.5rem) 1fr;
      grid-template-areas:
        "header body"
        "navigation body"
  }
    }

@media (min-width: 992px) {

.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid {
      grid-template-columns: 22.5rem 1fr
  }
    }

@media (min-width: 1440px) {

.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid {
      grid-template-columns: 25rem 1fr
  }
    }

@media (min-width: 992px) {
        .app-layout--has-navigation.app-layout--has-sidebar.app-layout--nav-collapsible.app-layout--nav-collapsed .app-layout__grid {
          grid-template-columns: 0 1fr;
        }
        .app-layout--has-navigation.app-layout--has-sidebar.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__grid {
          grid-template-columns: 0 1fr;
        }
    }

@media (min-width: 768px) {
    .app-layout--has-navigation.app-layout--has-sidebar .app-layout__sidebar {
      position: absolute;
      z-index: 3;
      top: 0;
      right: 0;
      bottom: 0;
      width: min(40%, 25rem);
    }

    .app-layout--has-navigation.app-layout--has-sidebar:not(.app-layout--rounded-corners) {
      border-left: var(--s-border-width-default) solid var(--s-border-default);
      box-shadow: var(--s-shadow-level-3);
    }
  }

@media (max-width: 767px) {
    .app-layout--mobile-view-navigation .app-layout__grid {
      grid-template-areas:
        "header"
        "navigation";
    }

    .app-layout--mobile-view-navigation .app-layout__body,
    .app-layout--mobile-view-navigation .app-layout__sidebar {
      display: none;
    }
  }

@media (max-width: 767px) {
    .app-layout--mobile-view-body .app-layout__grid {
      grid-template-areas:
        "body"
        "body";
    }

    .app-layout--mobile-view-body .app-layout__header,
    .app-layout--mobile-view-body .app-layout__navigation,
    .app-layout--mobile-view-body .app-layout__sidebar {
      display: none;
    }
  }

@media (max-width: 767px) {
    .app-layout--mobile-view-sidebar .app-layout__grid {
      grid-template-areas:
        "sidebar"
        "sidebar";
    }

    .app-layout--mobile-view-sidebar .app-layout__header,
    .app-layout--mobile-view-sidebar .app-layout__navigation,
    .app-layout--mobile-view-sidebar .app-layout__body {
      display: none;
    }
  }

.app-layout--has-sidebar:not(.app-layout--sidebar-active):not(
    .app-layout--sidebar-opening
  ) .app-layout__sidebar {
    display: none;
  }

@media (min-width: 768px) {

.app-layout--sidebar-closing .app-layout__sidebar {
      animation: app-layout-sidebar-overlay-slide-out 0.3s
  }

      @media (prefers-reduced-motion) {

.app-layout--sidebar-closing .app-layout__sidebar {
        animation: none
  }
      }
    }

@media (min-width: 1800px) {

.app-layout--sidebar-closing:not(.app-layout--sidebar-positioning-overlay) .app-layout__sidebar {
        animation: none
    }
      }

.app-layout--has-app-bar-controls .app-layout__app-bar-controls {
    display: block;
  }

.app-layout--has-bottom-bar .app-layout__body {
    grid-template-rows: minmax(var(--header-height), auto) auto 1fr auto;
    grid-template-areas:
      "app-bar"
      "banner"
      "content"
      "bottom-bar";
  }

.app-layout--has-bottom-bar .app-layout__content {
    border-bottom: var(--s-border-width-default) solid transparent;
  }

.app-layout--has-bottom-bar .app-layout__bottom-bar {
    display: block;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

.app-layout--has-bottom-banner .app-layout__bottom-banner {
    display: block;
  }

.app-layout--has-custom-app-bar-back-button .app-layout__custom-app-bar-back-button {
    display: block;
  }

.app-layout--has-custom-sidebar-header .app-layout__sidebar-header {
    display: none;
  }

.app-layout--has-custom-sidebar-header .app-layout__custom-sidebar-header {
    display: block;
  }

.app-layout--has-floating-action-button .app-layout__floating-action-button {
    display: block;
  }

.app-layout--hide-app-bar .app-layout__body {
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "banner"
      "content"
      "bottom-bar";
  }

.app-layout--content-scrollable:not(.app-layout--content-scrolled-to-top) .app-layout__app-bar {
      border-bottom-color: var(--s-border-default);
    }

.app-layout--content-scrollable.app-layout--has-bottom-bar:not(.app-layout--content-scrolled-to-bottom):not(
      .app-layout--has-bottom-banner
    ) .app-layout__content {
      border-bottom-color: var(--s-border-default);
    }

.app-layout--nav-scrollable:not(.app-layout--nav-scrolled-to-top) .app-layout__header {
      border-bottom-color: var(--s-border-default);
    }

.app-layout--sidebar-scrollable:not(.app-layout--sidebar-scrolled-to-top) .app-layout__sidebar-header,
    .app-layout--sidebar-scrollable:not(.app-layout--sidebar-scrolled-to-top) .app-layout__custom-sidebar-header {
      border-bottom-color: var(--s-border-default);
    }

.app-layout--prevent-content-overflow .app-layout__content {
    overflow: hidden;
  }

.app-layout--prevent-content-overflow .app-layout__content-inner {
    max-height: 100%;
  }

.app-layout__header {
  z-index: 1;
  display: flex;
  min-width: 0;
  height: var(--header-height);
  padding-top: var(--s-space-12);
  padding-right: var(--s-space-8);
  padding-bottom: var(--s-space-12);
  padding-left: var(--s-space-8);
  align-items: center;
  border-bottom: var(--s-border-width-default) solid transparent;
  background-color: var(--s-background-default);
  grid-area: header;
  gap: var(--s-space-8);
}

@media (min-width: 768px) {

.app-layout__header {
    border-right: var(--s-border-width-default) solid var(--s-border-default)
}
  }

@media (min-width: 992px) {

.app-layout__header {
    padding-right: var(--s-space-16);
    padding-left: var(--s-space-16)
}
  }

.app-layout__app-name {
  min-width: 0;
}

.app-layout__app-name .heading {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

.app-layout__app-bar-mobile-menu-button,
.app-layout__navigation-mobile-menu-button {
  flex-shrink: 0;
}

@media (min-width: 992px) {

.app-layout__app-bar-mobile-menu-button,
.app-layout__navigation-mobile-menu-button {
    display: none
}
  }

.app-layout__app-bar-mobile-menu-button {
  padding-left: var(--s-space-8);
}

.app-layout__navigation-back-button {
  margin-left: calc(-1 * var(--s-space-4));
}

.app-layout__floating-action-button {
  position: absolute;
  z-index: 4;
  right: var(--s-space-16);
  bottom: var(--s-space-16);
  display: none;
}

.app-layout__navigation-controls {
  flex-shrink: 0;
}

.app-layout__navigation {
  overflow-y: auto;
  border-right: var(--s-border-width-default) solid var(--s-border-default);
  background-color: var(--s-background-default);
  grid-area: navigation;
}

.app-layout__nav-overlay-toggle,
.app-layout__nav-expansion-toggle {
  display: none;
}

@media (min-width: 992px) {

.app-layout__nav-overlay-toggle,
.app-layout__nav-expansion-toggle {
    display: block
}
  }

.app-layout__nav-expansion-toggle {
  padding-left: var(--s-space-16);
}

.app-layout__body {
  z-index: 2;
  display: grid;
  width: 100%;
  height: 100%;
  background-color: var(--s-background-default);
  grid-area: body;
  grid-template-rows: minmax(var(--header-height), auto) auto 1fr;
  grid-template-areas:
    "app-bar"
    "banner"
    "content";
}

.app-layout__app-bar {
  --swirl-tab-bar-border-width: 0;
  --swirl-tab-bar-height: 3.5rem;

  display: flex;
  min-width: 0;
  align-items: center;
  border-bottom: var(--s-border-width-default) solid transparent;
  grid-area: app-bar;
  gap: var(--s-space-8);
}

.app-layout__bottom-bar {
  display: none;
  min-width: 0;
  align-items: center;
  grid-area: bottom-bar;
}

.app-layout__back-to-navigation-button {
  padding-left: var(--s-space-8);
}

@media (min-width: 768px) {

.app-layout__back-to-navigation-button {
    display: none
}
  }

.app-layout__banner {
  grid-area: banner;
}

.app-layout__app-bar-content {
  min-width: 0;
  flex-grow: 1;
}

.app-layout__custom-app-bar-back-button {
  display: none;
  padding-left: var(--s-space-8);
}

.app-layout__app-bar-controls {
  display: none;
  padding-right: var(--s-space-8);
}

@media (min-width: 768px) {

.app-layout__app-bar-controls {
    padding-right: var(--s-space-16)
}
  }

.app-layout__content {
  overflow: auto;
  grid-area: content;
  display: flex;
  flex-direction: column;
}

.app-layout__content-inner {
  flex-grow: 1;
}

.app-layout__sidebar {
  display: grid;
  width: 100%;
  height: 100%;
  border-left: var(--s-border-width-default) solid var(--s-border-default);
  background-color: var(--s-background-default);
  grid-area: sidebar;
  grid-template-rows: var(--header-height) 1fr;
  grid-template-areas:
    "sidebar-header"
    "sidebar-content";
}

@media (min-width: 768px) {

.app-layout__sidebar {
    animation: app-layout-slide-in 0.3s
}

    @media (prefers-reduced-motion) {

.app-layout__sidebar {
      animation: none
}
    }
  }

.app-layout__custom-sidebar-header {
  display: none;
  min-width: 0;
  border-bottom: var(--s-border-width-default) solid transparent;
  grid-area: sidebar-header;
}

.app-layout__sidebar-header {
  display: flex;
  min-width: 0;
  padding-top: var(--s-space-12);
  padding-right: var(--s-space-8);
  padding-bottom: var(--s-space-12);
  padding-left: var(--s-space-8);
  align-items: center;
  border-bottom: var(--s-border-width-default) solid transparent;
  grid-area: sidebar-header;
  gap: var(--s-space-8);
}

@media (min-width: 768px) {

.app-layout__sidebar-header {
    padding-right: var(--s-space-16);
    padding-left: var(--s-space-16)
}
  }

.app-layout__sidebar-heading {
  min-width: 0;
  flex-grow: 1;
}

.app-layout__sidebar-heading .heading {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

.app-layout__sidebar-close-button {
  margin-left: calc(-1 * var(--s-space-4));
}

.app-layout__sidebar-content {
  overflow-y: auto;
  grid-area: sidebar-content;
}

.app-layout__bottom-banner {
  display: none;
  position: sticky;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
}

@media (min-width: 768px) {
    .app-layout--rounded-corners .app-layout__grid {
      -moz-column-gap: var(--s-space-8);
           column-gap: var(--s-space-8);
    }

    .app-layout--rounded-corners .app-layout__header {
      border-right: none;
      border-radius: var(--s-border-radius-l) var(--s-border-radius-l) 0 0;
    }

    .app-layout--rounded-corners .app-layout__navigation {
      border-right: none;
      border-radius: 0 0 var(--s-border-radius-l) var(--s-border-radius-l);
    }

    .app-layout--rounded-corners .app-layout__body,
    .app-layout--rounded-corners .app-layout__sidebar {
      overflow: hidden;
      border-radius: var(--s-border-radius-l);
    }

    .app-layout--rounded-corners .app-layout__sidebar {
      border-left: none;
      /* adaptation of shadow-level-3 to support rounded corners */
      box-shadow: -12px 0 32px -10px rgba(23, 23, 23, 0.12),
        -8px 4px 12px -8px rgba(23, 23, 23, 0.08);
      background-color: var(--s-surface-overlay-default);
    }
  }

@media (min-width: 768px) {
      .app-layout--sidebar-positioning-overlay:not(
    .app-layout--has-navigation
  ).app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid, .app-layout--sidebar-positioning-overlay:not(
    .app-layout--has-navigation
  ).app-layout--has-sidebar.app-layout--sidebar-opening .app-layout__grid {
        grid-template-columns: 100%;
        grid-template-areas:
          "body"
          "body";
      }
    }

@media (min-width: 768px) {
    .app-layout--sidebar-positioning-overlay:not(
    .app-layout--has-navigation
  ).app-layout--has-sidebar .app-layout__sidebar {
      position: absolute;
      z-index: 3;
      top: 0;
      right: 0;
      bottom: 0;
      width: min(50%, 25rem);
      border-left: var(--s-border-width-default) solid var(--s-border-default);
      box-shadow: var(--s-shadow-level-3);
    }
  }

@keyframes app-layout-nav-overlay-slide-in-desktop {
  from {
    width: 0;
  }

  to {
    width: 22.5rem;
  }
}

@keyframes app-layout-nav-overlay-slide-in-large-desktop {
  from {
    width: 0;
  }

  to {
    width: 25rem;
  }
}

@media print {
  .app-layout__content {
    overflow: visible;
  }

  :host,
  .app-layout,
  .app-layout__grid,
  .app-layout__body {
    height: auto;
    overflow: visible;
  }
}

/* Transition Styles */

@media (max-width: 767px) {
      .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(
      .app-layout--mobile-view-body
    ) .app-layout__grid, .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
      .app-layout--mobile-view-navigation
    ) .app-layout__grid {
        grid-template-columns: 100%;
        grid-template-areas:
          "header"
          "navigation";
      }

      .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(
      .app-layout--mobile-view-body
    ) .app-layout__body, .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
      .app-layout--mobile-view-navigation
    ) .app-layout__body {
        position: absolute;
        top: 0;
        left: 0;
        display: grid;
        width: 100%;
        transform: translate3d(100%, 0, 0);
      }
    }

@media (max-width: 767px) {
      .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
      .app-layout--mobile-view-navigation
    ) .app-layout__header {
        display: flex;
      }

      .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
      .app-layout--mobile-view-navigation
    ) .app-layout__navigation {
        display: block;
      }
    }

@media (max-width: 991px) {
      .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(
      .app-layout--mobile-view-sidebar
    ) .app-layout__grid, .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
      .app-layout--mobile-view-body
    ) .app-layout__grid {
        grid-template-columns: 100%;
        grid-template-areas:
          "body"
          "body";
      }

      .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(
      .app-layout--mobile-view-sidebar
    ) .app-layout__sidebar, .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
      .app-layout--mobile-view-body
    ) .app-layout__sidebar {
        position: absolute;
        top: 0;
        left: 0;
        display: grid;
        border-left: var(--s-border-width-default) solid var(--s-border-default);
      }
    }

@media (max-width: 991px) {
      .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
      .app-layout--mobile-view-body
    ) .app-layout__body {
        display: grid;
      }

      .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
      .app-layout--mobile-view-body
    ) .app-layout__sidebar {
        display: grid;
      }
    }

/* Transition Style "Slides" */

@media (max-width: 767px) {
      .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(
      .app-layout--mobile-view-body
    ) .app-layout__header,
      .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(
      .app-layout--mobile-view-body
    ) .app-layout__navigation,
      .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
      .app-layout--mobile-view-navigation
    ) .app-layout__header,
      .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
      .app-layout--mobile-view-navigation
    ) .app-layout__navigation {
        animation: app-layout-slide-out 0.4s;
      }

        @media (prefers-reduced-motion) {
      .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(
      .app-layout--mobile-view-body
    ) .app-layout__header,
      .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(
      .app-layout--mobile-view-body
    ) .app-layout__navigation,
      .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
      .app-layout--mobile-view-navigation
    ) .app-layout__header,
      .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
      .app-layout--mobile-view-navigation
    ) .app-layout__navigation {
          animation: none
      }
        }

      .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(
      .app-layout--mobile-view-body
    ) .app-layout__body, .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
      .app-layout--mobile-view-navigation
    ) .app-layout__body {
        animation: app-layout-slide-in 0.4s;
      }

        @media (prefers-reduced-motion) {

      .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(
      .app-layout--mobile-view-body
    ) .app-layout__body, .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
      .app-layout--mobile-view-navigation
    ) .app-layout__body {
          animation: none
      }
        }

        .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(
      .app-layout--mobile-view-body
    ) .app-layout__body:after, .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
      .app-layout--mobile-view-navigation
    ) .app-layout__body:after {
          position: absolute;
          top: 0;
          right: 100%;
          bottom: 0;
          display: block;
          width: 100%;
          background-color: rgba(0, 0, 0, 0.3);
          content: "";
          animation: app-layout-fade-in 0.4s;
        }

          @media (prefers-reduced-motion) {

        .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(
      .app-layout--mobile-view-body
    ) .app-layout__body:after, .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
      .app-layout--mobile-view-navigation
    ) .app-layout__body:after {
            animation: none
        }
          }
    }

@media (max-width: 767px) {
      .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
      .app-layout--mobile-view-navigation
    ) .app-layout__header {
        animation-direction: reverse;
      }

      .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
      .app-layout--mobile-view-navigation
    ) .app-layout__navigation {
        animation-direction: reverse;
      }

      .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
      .app-layout--mobile-view-navigation
    ) .app-layout__body {
        animation-direction: reverse;
      }

        .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
      .app-layout--mobile-view-navigation
    ) .app-layout__body:after {
          animation-direction: reverse;
        }
    }

@media (max-width: 991px) {
      .app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(
      .app-layout--mobile-view-sidebar
    ) .app-layout__body, .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
      .app-layout--mobile-view-body
    ) .app-layout__body {
        animation: app-layout-slide-out 0.4s;
      }

        @media (prefers-reduced-motion) {
      .app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(
      .app-layout--mobile-view-sidebar
    ) .app-layout__body, .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
      .app-layout--mobile-view-body
    ) .app-layout__body {
          animation: none
      }
        }

      .app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(
      .app-layout--mobile-view-sidebar
    ) .app-layout__sidebar, .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
      .app-layout--mobile-view-body
    ) .app-layout__sidebar {
        animation: app-layout-slide-in 0.4s;
      }

        @media (prefers-reduced-motion) {

      .app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(
      .app-layout--mobile-view-sidebar
    ) .app-layout__sidebar, .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
      .app-layout--mobile-view-body
    ) .app-layout__sidebar {
          animation: none
      }
        }

        .app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(
      .app-layout--mobile-view-sidebar
    ) .app-layout__sidebar:after, .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
      .app-layout--mobile-view-body
    ) .app-layout__sidebar:after {
          position: absolute;
          top: 0;
          right: 100%;
          bottom: 0;
          display: block;
          width: 100%;
          background-color: rgba(0, 0, 0, 0.3);
          content: "";
          animation: app-layout-fade-in 0.4s;
        }

          @media (prefers-reduced-motion) {

        .app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(
      .app-layout--mobile-view-sidebar
    ) .app-layout__sidebar:after, .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
      .app-layout--mobile-view-body
    ) .app-layout__sidebar:after {
            animation: none
        }
          }
    }

@media (max-width: 991px) {
      .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
      .app-layout--mobile-view-body
    ) .app-layout__body {
        animation-direction: reverse;
      }

      .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
      .app-layout--mobile-view-body
    ) .app-layout__sidebar {
        animation-direction: reverse;
      }

        .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
      .app-layout--mobile-view-body
    ) .app-layout__sidebar:after {
          animation-direction: reverse;
        }
    }

/* Transition Style "Dialog" */

@media (max-width: 767px) {
      .app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(
      .app-layout--mobile-view-body
    ) .app-layout__body, .app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
      .app-layout--mobile-view-navigation
    ) .app-layout__body {
        animation: app-layout-scale-in 0.3s;
      }

        @media (prefers-reduced-motion) {
      .app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(
      .app-layout--mobile-view-body
    ) .app-layout__body, .app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
      .app-layout--mobile-view-navigation
    ) .app-layout__body {
          animation: none
      }
        }
    }

@media (max-width: 767px) {
      .app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
      .app-layout--mobile-view-navigation
    ) .app-layout__header {
        animation-direction: reverse;
      }

      .app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
      .app-layout--mobile-view-navigation
    ) .app-layout__navigation {
        animation-direction: reverse;
      }

      .app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
      .app-layout--mobile-view-navigation
    ) .app-layout__body {
        animation-direction: reverse;
      }
    }

@media (max-width: 991px) {
      .app-layout--transition-style-dialog.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(
      .app-layout--mobile-view-sidebar
    ) .app-layout__sidebar, .app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
      .app-layout--mobile-view-body
    ) .app-layout__sidebar {
        animation: app-layout-scale-in 0.3s;
      }

        @media (prefers-reduced-motion) {
      .app-layout--transition-style-dialog.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(
      .app-layout--mobile-view-sidebar
    ) .app-layout__sidebar, .app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
      .app-layout--mobile-view-body
    ) .app-layout__sidebar {
          animation: none
      }
        }
    }

@media (max-width: 991px) {
      .app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
      .app-layout--mobile-view-body
    ) .app-layout__body {
        animation-direction: reverse;
      }

      .app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
      .app-layout--mobile-view-body
    ) .app-layout__sidebar {
        animation-direction: reverse;
      }
    }

@keyframes app-layout-sidebar-overlay-slide-out {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes app-layout-slide-in {
  0% {
    transform: translate3d(100%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes app-layout-slide-out {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-20%, 0, 0);
  }
}

@keyframes app-layout-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes app-layout-scale-in {
  from {
    transform: scale(0);
    box-shadow: 0 0 0 100rem rgba(0, 0, 0, 0);
  }
  to {
    transform: scale(1);
    box-shadow: 0 0 0 100rem rgba(0, 0, 0, 0.25);
  }
}

@keyframes app-layout-sidebar-slide-in {
  from {
    overflow: hidden;
    grid-template-columns: 25rem 1fr 0;
  }
  to {
    overflow: hidden;
    grid-template-columns: 25rem 1fr 25rem;
  }
}

@keyframes app-layout-sidebar-slide-in-with-collapsed-nav {
  from {
    overflow: hidden;
    grid-template-columns: 0 1fr 0;
  }
  to {
    overflow: hidden;
    grid-template-columns: 0 1fr 25rem;
  }
}

@keyframes app-layout-sidebar-slide-out {
  from {
    overflow: hidden;
    grid-template-columns: 25rem 1fr 25rem;
  }
  to {
    overflow: hidden;
    grid-template-columns: 25rem 1fr 0;
  }
}

@keyframes app-layout-sidebar-slide-out-with-collapsed-nav {
  from {
    overflow: hidden;
    grid-template-columns: 0 1fr 25rem;
  }
  to {
    overflow: hidden;
    grid-template-columns: 0 1fr 0;
  }
}

@keyframes app-layout-no-nav-sidebar-slide-in {
  from {
    overflow: hidden;
    grid-template-columns: 1fr 0;
  }
  to {
    overflow: hidden;
    grid-template-columns: 1fr 25rem;
  }
}

@keyframes app-layout-no-nav-sidebar-slide-out {
  from {
    overflow: hidden;
    grid-template-columns: 1fr 25rem;
  }
  to {
    overflow: hidden;
    grid-template-columns: 1fr 0;
  }
}