@cloudscape-design/components 3.0.296 → 3.0.298

package/app-layout/visual-refresh/styles.scoped.css

@@ -90,177 +90,48 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-section.awsui_appbar_hyvsj_1s8d9_93:not(#\9) {
-  align-items: center;
-  box-sizing: border-box;
-  display: grid;
-  grid-column: 3;
-  grid-row: 2;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  /* 
-  Because the Breadcrumbs component cannot be styled directly it is 
-  wrapped in a generic element that will apply style adjustments as needed.
-  */
-  /*
-  In large viewports the buttons that trigger the Navigation and Tools 
-  drawers from the AppBar are suppressed and replaced by the buttons 
-  that render in the Navigation and Tools components. Additionally, 
-  the content wrapper around the breadcrumbs component has variable 
-  top and bottom padding based on whether or not the Notifications 
-  and Header components exist.
-  */
-  /*
-  In mobile viewports the AppBar becomes sticky and is repositioned to
-  span the entire column definition of the Layout grid.
-  */
-}
-section.awsui_appbar_hyvsj_1s8d9_93 > .awsui_appbar-nav_hyvsj_1s8d9_117:not(#\9) {
-  grid-column: 1;
-  margin-right: var(--space-m-sptmsg, 16px);
+div.awsui_background_hyvsj_tfl2k_93:not(#\9) {
+  display: contents;
 }
-section.awsui_appbar_hyvsj_1s8d9_93 > .awsui_breadcrumbs_hyvsj_1s8d9_121:not(#\9) {
-  grid-column: 2;
+div.awsui_background_hyvsj_tfl2k_93 > .awsui_scrolling-background_hyvsj_tfl2k_96:not(#\9) {
   background-color: var(--color-background-layout-main-iz43sl, #ffffff);
+  color: var(--color-text-body-default-01bwmw, #000716);
+  grid-column: 1/span 5;
+  grid-row: 1/10;
 }
-section.awsui_appbar_hyvsj_1s8d9_93 > .awsui_appbar-tools_hyvsj_1s8d9_125:not(#\9),
-section.awsui_appbar_hyvsj_1s8d9_93 > .awsui_drawers-mobile-triggers-container_hyvsj_1s8d9_126:not(#\9) {
-  grid-column: 3;
-  margin-left: var(--space-m-sptmsg, 16px);
+div.awsui_background_hyvsj_tfl2k_93 > .awsui_sticky-background_hyvsj_tfl2k_102:not(#\9) {
+  background-color: var(--color-background-layout-main-iz43sl, #ffffff);
+  grid-column: 1/span 5;
+  grid-row: 1/10;
+  position: sticky;
+  top: var(--awsui-header-height-en6003);
+  z-index: 799;
 }
-@media (min-width: 689px) {
-  section.awsui_appbar_hyvsj_1s8d9_93:not(#\9) {
-    /*
-    If Breadcrumbs do not exist then the AppBar should be suppressed
-    because in large viewports the triggers are rendered
-    in the Navigation and Tools components.
-    */
-    /*
-    If there is no Notifications content then the AppBar should 
-    appear to be the first rendered content even though the 
-    Notifications DOM node will still exist. The top padding 
-    should vertically align it with the Navigation and Tools circular buttons.
-    */
-    /*
-    If there is Notifications content then the AppBar should have 
-    minimal top padding in addition to the bottom margin on the 
-    Notifications component.
-    */
-    /*
-    If the Header does not exist then the AppBar is the last 
-    rendered content before the Main component. Additional 
-    bottom padding is added to create space between the 
-    Breadcrumbs and Main components that expands the height 
-    of the dark header.
-    */
-    /*
-    Table and cards content types implement a custom dark header. 
-    Minimal bottom padding should be on the breadcrumbs to
-    reduce the the vertical distance from the main content.
-    */
-    /*
-    If a child component tells the AppLayout to have a sticky 
-    background (typically because of a stickyHeader with a 
-    full-page variant) the z-index of the breadcrumbs needs to 
-    be lifted so it doesn't render behind the background element.
-    */
-  }
-  section.awsui_appbar_hyvsj_1s8d9_93:not(#\9):not(.awsui_has-breadcrumbs_hyvsj_1s8d9_167) {
-    display: none;
-  }
-  section.awsui_appbar_hyvsj_1s8d9_93 > .awsui_appbar-nav_hyvsj_1s8d9_117:not(#\9),
-  section.awsui_appbar_hyvsj_1s8d9_93 > .awsui_appbar-tools_hyvsj_1s8d9_125:not(#\9),
-  section.awsui_appbar_hyvsj_1s8d9_93 > .awsui_drawers-mobile-triggers-container_hyvsj_1s8d9_126:not(#\9) {
-    display: none;
-  }
-  section.awsui_appbar_hyvsj_1s8d9_93 > .awsui_breadcrumbs_hyvsj_1s8d9_121:not(#\9):not(.awsui_has-notifications-content_hyvsj_1s8d9_175) {
-    padding-top: var(--space-scaled-m-9q5ipc, 16px);
-  }
-  section.awsui_appbar_hyvsj_1s8d9_93 > .awsui_breadcrumbs_hyvsj_1s8d9_121.awsui_has-notifications-content_hyvsj_1s8d9_175:not(#\9) {
-    padding-top: var(--space-scaled-2x-s-iaysam, 12px);
-  }
-  section.awsui_appbar_hyvsj_1s8d9_93 > .awsui_breadcrumbs_hyvsj_1s8d9_121:not(#\9):not(.awsui_has-header_hyvsj_1s8d9_181):not(.awsui_has-dynamic-overlap-height_hyvsj_1s8d9_181),
-  section.awsui_appbar_hyvsj_1s8d9_93 > .awsui_breadcrumbs_hyvsj_1s8d9_121:not(#\9):not(.awsui_has-header_hyvsj_1s8d9_181).awsui_content-type-wizard_hyvsj_1s8d9_182 {
-    padding-bottom: var(--space-m-sptmsg, 16px);
-  }
-  section.awsui_appbar_hyvsj_1s8d9_93 > .awsui_breadcrumbs_hyvsj_1s8d9_121.awsui_content-type-cards_hyvsj_1s8d9_185:not(#\9),
-  section.awsui_appbar_hyvsj_1s8d9_93 > .awsui_breadcrumbs_hyvsj_1s8d9_121.awsui_content-type-table_hyvsj_1s8d9_186:not(#\9) {
-    padding-bottom: var(--space-xxs-a6783b, 4px);
-  }
-  section.awsui_appbar_hyvsj_1s8d9_93 > .awsui_breadcrumbs_hyvsj_1s8d9_121.awsui_has-sticky-background_hyvsj_1s8d9_189:not(#\9) {
-    z-index: 799;
-  }
+div.awsui_background_hyvsj_tfl2k_93 > .awsui_sticky-background_hyvsj_tfl2k_102:not(#\9):not(.awsui_has-sticky-notifications_hyvsj_tfl2k_110) {
+  height: calc(var(--space-scaled-s-gczsk7, 12px) + var(--awsui-overlap-height-en6003));
 }
-@media (max-width: 688px) {
-  section.awsui_appbar_hyvsj_1s8d9_93:not(#\9) {
-    background-color: var(--color-background-home-header-uszgqm, #000716);
-    border-bottom: 1px solid var(--color-border-divider-default-4spq70, #e9ebed);
-    box-shadow: var(--shadow-panel-toggle-0lutgw, 0px 6px 12px 1px rgba(0, 7, 22, 0.12));
-    grid-column: 1/span 5;
-    grid-row: 1;
-    height: var(--awsui-mobile-bar-height-rrnppm);
-    padding: 0 var(--space-m-sptmsg, 16px);
-    position: sticky;
-    top: var(--awsui-offset-top-rrnppm);
-    z-index: 1000;
-    /*
-    Remove any existing top and bottom padding from the Breadcrumbs since
-    they are now sticky positioned in the viewport with the AppBar.
-    */
-  }
-  section.awsui_appbar_hyvsj_1s8d9_93 > .awsui_appbar-nav_hyvsj_1s8d9_117:not(#\9),
-  section.awsui_appbar_hyvsj_1s8d9_93 > .awsui_appbar-tools_hyvsj_1s8d9_125:not(#\9),
-  section.awsui_appbar_hyvsj_1s8d9_93 > .awsui_drawers-mobile-triggers-container_hyvsj_1s8d9_126:not(#\9) {
-    display: block;
-  }
-  section.awsui_appbar_hyvsj_1s8d9_93 > .awsui_breadcrumbs_hyvsj_1s8d9_121:not(#\9) {
-    padding: 0;
-  }
+div.awsui_background_hyvsj_tfl2k_93 > .awsui_sticky-background_hyvsj_tfl2k_102.awsui_has-sticky-notifications_hyvsj_tfl2k_110:not(#\9) {
+  height: calc(
+        var(--awsui-notifications-gap-en6003) + var(--awsui-notifications-height-en6003) + var(--space-s-rd607g, 12px) + var(--awsui-overlap-height-en6003)
+      );
 }
 
 /*
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-div.awsui_background_hyvsj_1s8d9_224:not(#\9) {
-  display: contents;
-}
-div.awsui_background_hyvsj_1s8d9_224 > .awsui_notifications-appbar-header_hyvsj_1s8d9_227:not(#\9) {
-  background-color: var(--color-background-layout-main-iz43sl, #ffffff);
-  grid-column: 1/span 5;
-  grid-row: 1/span 3;
-  color: var(--color-text-body-default-01bwmw, #000716);
-  /*
-  The cards and table content types have a sticky dark header that is 
-  offset beneath the sticky notifications if they exist. If the background 
-  is not sticky then it will scroll out of the viewport leaving a white space
-  behind the notifications above the content dark header.
-  */
-}
-@media (min-width: 689px) {
-  div.awsui_background_hyvsj_1s8d9_224 > .awsui_notifications-appbar-header_hyvsj_1s8d9_227.awsui_has-sticky-background_hyvsj_1s8d9_189.awsui_has-notifications-content_hyvsj_1s8d9_175.awsui_sticky-notifications_hyvsj_1s8d9_240:not(#\9) {
-    position: sticky;
-    top: var(--awsui-offset-top-rrnppm);
-    z-index: 799;
-  }
-}
-div.awsui_background_hyvsj_1s8d9_224 > .awsui_overlap_hyvsj_1s8d9_246:not(#\9) {
+.awsui_breadcrumbs_hyvsj_tfl2k_123:not(#\9) {
   background-color: var(--color-background-layout-main-iz43sl, #ffffff);
-  grid-column: 1/span 5;
-  grid-row: 4;
-  color: var(--color-text-body-default-01bwmw, #000716);
+  grid-area: breadcrumbs;
   /*
-  The cards and table content types can have sticky header content that 
-  will retain position on viewport scroll. The overlap background needs to 
-  be sticky in desktop viewports to prevent light background gutters with 
-  the high contrast header background only in the content area.
+  If a child component tells the AppLayout to have a sticky 
+  background (typically because of a stickyHeader with a 
+  full-page variant) the z-index of the breadcrumbs needs to 
+  be lifted so it doesn't render behind the background element.
   */
 }
-@media (min-width: 689px) {
-  div.awsui_background_hyvsj_1s8d9_224 > .awsui_overlap_hyvsj_1s8d9_246.awsui_has-sticky-background_hyvsj_1s8d9_189:not(#\9) {
-    position: sticky;
-    top: var(--awsui-offset-top-with-notifications-rrnppm);
-    z-index: 799;
-  }
+.awsui_breadcrumbs_hyvsj_tfl2k_123.awsui_has-sticky-background_hyvsj_tfl2k_133:not(#\9) {
+  z-index: 799;
 }
 
 /*
@@ -271,41 +142,41 @@ div.awsui_background_hyvsj_1s8d9_224 > .awsui_overlap_hyvsj_1s8d9_246:not(#\9) {
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_drawers-container_hyvsj_1s8d9_274:not(#\9) {
+.awsui_drawers-container_hyvsj_tfl2k_145:not(#\9) {
   background-color: transparent;
   display: flex;
   grid-column: 5;
-  grid-row: 1/span 5;
-  height: var(--awsui-content-height-rrnppm);
+  grid-row: 1/span 10;
+  height: var(--awsui-content-height-en6003);
   pointer-events: none;
   position: sticky;
-  top: var(--awsui-offset-top-rrnppm);
+  top: var(--awsui-offset-top-en6003);
   z-index: 830;
   transition: background-color var(--motion-duration-refresh-only-fast-n43vlu, 115ms);
 }
-.awsui_drawers-container_hyvsj_1s8d9_274.awsui_has-open-drawer_hyvsj_1s8d9_286:not(#\9) {
+.awsui_drawers-container_hyvsj_tfl2k_145.awsui_has-open-drawer_hyvsj_tfl2k_157:not(#\9) {
   background-color: var(--color-background-container-content-em2lah, #ffffff);
   box-shadow: var(--shadow-panel-bf68qm, 0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_drawers-container_hyvsj_1s8d9_274:not(#\9) {
+  .awsui_drawers-container_hyvsj_tfl2k_145:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_drawers-container_hyvsj_1s8d9_274:not(#\9), .awsui-mode-entering .awsui_drawers-container_hyvsj_1s8d9_274:not(#\9) {
+.awsui-motion-disabled .awsui_drawers-container_hyvsj_tfl2k_145:not(#\9), .awsui-mode-entering .awsui_drawers-container_hyvsj_tfl2k_145:not(#\9) {
   animation: none;
   transition: none;
 }
 @media (min-width: 689px) {
-  .awsui_drawers-container_hyvsj_1s8d9_274:not(#\9) {
+  .awsui_drawers-container_hyvsj_tfl2k_145:not(#\9) {
     /* stylelint-disable scss/operator-no-newline-after */
-    max-width: calc(var(--awsui-layout-width-rrnppm) - var(--awsui-main-offset-left-rrnppm) - var(--awsui-default-min-content-width-rrnppm) - var(--awsui-content-gap-right-rrnppm));
+    max-width: calc(var(--awsui-layout-width-en6003) - var(--awsui-main-offset-left-en6003) - var(--awsui-default-min-content-width-en6003) - var(--awsui-content-gap-right-en6003));
     /* stylelint-enable scss/operator-no-newline-after */
   }
 }
 @media (max-width: 688px) {
-  .awsui_drawers-container_hyvsj_1s8d9_274:not(#\9) {
+  .awsui_drawers-container_hyvsj_tfl2k_145:not(#\9) {
     position: fixed;
     right: 0;
     z-index: 1001;
@@ -317,12 +188,12 @@ div.awsui_background_hyvsj_1s8d9_224 > .awsui_overlap_hyvsj_1s8d9_246:not(#\9) {
     relative to the body.
     */
   }
-  .awsui_drawers-container_hyvsj_1s8d9_274.awsui_disable-body-scroll_hyvsj_1s8d9_320:not(#\9) {
-    top: var(--awsui-header-height-rrnppm);
+  .awsui_drawers-container_hyvsj_tfl2k_145.awsui_disable-body-scroll_hyvsj_tfl2k_191:not(#\9) {
+    top: var(--awsui-header-height-en6003);
   }
 }
 
-.awsui_drawers-desktop-triggers-container_hyvsj_1s8d9_325:not(#\9) {
+.awsui_drawers-desktop-triggers-container_hyvsj_tfl2k_196:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -366,39 +237,39 @@ div.awsui_background_hyvsj_1s8d9_224 > .awsui_overlap_hyvsj_1s8d9_246:not(#\9) {
   overflow-x: hidden;
   overscroll-behavior-y: contain;
 }
-.awsui_drawers-desktop-triggers-container_hyvsj_1s8d9_325:not(#\9):not(.awsui_has-multiple-triggers_hyvsj_1s8d9_343).awsui_has-open-drawer_hyvsj_1s8d9_286 {
+.awsui_drawers-desktop-triggers-container_hyvsj_tfl2k_196:not(#\9):not(.awsui_has-multiple-triggers_hyvsj_tfl2k_214).awsui_has-open-drawer_hyvsj_tfl2k_157 {
   width: 0;
 }
-.awsui_drawers-desktop-triggers-container_hyvsj_1s8d9_325.awsui_has-multiple-triggers_hyvsj_1s8d9_343.awsui_has-open-drawer_hyvsj_1s8d9_286:not(#\9) {
+.awsui_drawers-desktop-triggers-container_hyvsj_tfl2k_196.awsui_has-multiple-triggers_hyvsj_tfl2k_214.awsui_has-open-drawer_hyvsj_tfl2k_157:not(#\9) {
   background-color: var(--color-background-container-content-em2lah, #ffffff);
   transition: background-color var(--motion-duration-refresh-only-fast-n43vlu, 115ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_drawers-desktop-triggers-container_hyvsj_1s8d9_325.awsui_has-multiple-triggers_hyvsj_1s8d9_343.awsui_has-open-drawer_hyvsj_1s8d9_286:not(#\9) {
+  .awsui_drawers-desktop-triggers-container_hyvsj_tfl2k_196.awsui_has-multiple-triggers_hyvsj_tfl2k_214.awsui_has-open-drawer_hyvsj_tfl2k_157:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_drawers-desktop-triggers-container_hyvsj_1s8d9_325.awsui_has-multiple-triggers_hyvsj_1s8d9_343.awsui_has-open-drawer_hyvsj_1s8d9_286:not(#\9), .awsui-mode-entering .awsui_drawers-desktop-triggers-container_hyvsj_1s8d9_325.awsui_has-multiple-triggers_hyvsj_1s8d9_343.awsui_has-open-drawer_hyvsj_1s8d9_286:not(#\9) {
+.awsui-motion-disabled .awsui_drawers-desktop-triggers-container_hyvsj_tfl2k_196.awsui_has-multiple-triggers_hyvsj_tfl2k_214.awsui_has-open-drawer_hyvsj_tfl2k_157:not(#\9), .awsui-mode-entering .awsui_drawers-desktop-triggers-container_hyvsj_tfl2k_196.awsui_has-multiple-triggers_hyvsj_tfl2k_214.awsui_has-open-drawer_hyvsj_tfl2k_157:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_drawers-desktop-triggers-container_hyvsj_1s8d9_325:not(#\9):not(.awsui_has-multiple-triggers_hyvsj_1s8d9_343):not(.awsui_has-open-drawer_hyvsj_1s8d9_286) {
+.awsui_drawers-desktop-triggers-container_hyvsj_tfl2k_196:not(#\9):not(.awsui_has-multiple-triggers_hyvsj_tfl2k_214):not(.awsui_has-open-drawer_hyvsj_tfl2k_157) {
   width: calc(var(--space-layout-toggle-padding-mgz0u7, 20px) * 2 + var(--space-layout-toggle-diameter-e6hjiu, 40px));
   transition: width var(--motion-duration-refresh-only-fast-n43vlu, 115ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_drawers-desktop-triggers-container_hyvsj_1s8d9_325:not(#\9):not(.awsui_has-multiple-triggers_hyvsj_1s8d9_343):not(.awsui_has-open-drawer_hyvsj_1s8d9_286) {
+  .awsui_drawers-desktop-triggers-container_hyvsj_tfl2k_196:not(#\9):not(.awsui_has-multiple-triggers_hyvsj_tfl2k_214):not(.awsui_has-open-drawer_hyvsj_tfl2k_157) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_drawers-desktop-triggers-container_hyvsj_1s8d9_325:not(#\9):not(.awsui_has-multiple-triggers_hyvsj_1s8d9_343):not(.awsui_has-open-drawer_hyvsj_1s8d9_286), .awsui-mode-entering .awsui_drawers-desktop-triggers-container_hyvsj_1s8d9_325:not(#\9):not(.awsui_has-multiple-triggers_hyvsj_1s8d9_343):not(.awsui_has-open-drawer_hyvsj_1s8d9_286) {
+.awsui-motion-disabled .awsui_drawers-desktop-triggers-container_hyvsj_tfl2k_196:not(#\9):not(.awsui_has-multiple-triggers_hyvsj_tfl2k_214):not(.awsui_has-open-drawer_hyvsj_tfl2k_157), .awsui-mode-entering .awsui_drawers-desktop-triggers-container_hyvsj_tfl2k_196:not(#\9):not(.awsui_has-multiple-triggers_hyvsj_tfl2k_214):not(.awsui_has-open-drawer_hyvsj_tfl2k_157) {
   animation: none;
   transition: none;
 }
 
-.awsui_drawers-trigger-content_hyvsj_1s8d9_375:not(#\9) {
+.awsui_drawers-trigger-content_hyvsj_tfl2k_246:not(#\9) {
   align-items: center;
   display: flex;
   flex-direction: column;
@@ -406,34 +277,34 @@ div.awsui_background_hyvsj_1s8d9_224 > .awsui_overlap_hyvsj_1s8d9_246:not(#\9) {
   padding-top: var(--space-scaled-s-gczsk7, 12px);
   width: calc(var(--space-layout-toggle-padding-mgz0u7, 20px) * 2 + var(--space-layout-toggle-diameter-e6hjiu, 40px));
 }
-.awsui_drawers-trigger-content_hyvsj_1s8d9_375:not(#\9):not(.awsui_has-multiple-triggers_hyvsj_1s8d9_343).awsui_has-open-drawer_hyvsj_1s8d9_286 {
+.awsui_drawers-trigger-content_hyvsj_tfl2k_246:not(#\9):not(.awsui_has-multiple-triggers_hyvsj_tfl2k_214).awsui_has-open-drawer_hyvsj_tfl2k_157 {
   opacity: 0;
 }
-.awsui_drawers-trigger-content_hyvsj_1s8d9_375:not(#\9):not(.awsui_has-multiple-triggers_hyvsj_1s8d9_343):not(.awsui_has-open-drawer_hyvsj_1s8d9_286) {
+.awsui_drawers-trigger-content_hyvsj_tfl2k_246:not(#\9):not(.awsui_has-multiple-triggers_hyvsj_tfl2k_214):not(.awsui_has-open-drawer_hyvsj_tfl2k_157) {
   opacity: 1;
   transition: opacity var(--motion-duration-refresh-only-medium-af0v35, 165ms);
   transition-delay: calc(var(--motion-duration-refresh-only-fast-n43vlu, 115ms) / 1.5);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_drawers-trigger-content_hyvsj_1s8d9_375:not(#\9):not(.awsui_has-multiple-triggers_hyvsj_1s8d9_343):not(.awsui_has-open-drawer_hyvsj_1s8d9_286) {
+  .awsui_drawers-trigger-content_hyvsj_tfl2k_246:not(#\9):not(.awsui_has-multiple-triggers_hyvsj_tfl2k_214):not(.awsui_has-open-drawer_hyvsj_tfl2k_157) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_drawers-trigger-content_hyvsj_1s8d9_375:not(#\9):not(.awsui_has-multiple-triggers_hyvsj_1s8d9_343):not(.awsui_has-open-drawer_hyvsj_1s8d9_286), .awsui-mode-entering .awsui_drawers-trigger-content_hyvsj_1s8d9_375:not(#\9):not(.awsui_has-multiple-triggers_hyvsj_1s8d9_343):not(.awsui_has-open-drawer_hyvsj_1s8d9_286) {
+.awsui-motion-disabled .awsui_drawers-trigger-content_hyvsj_tfl2k_246:not(#\9):not(.awsui_has-multiple-triggers_hyvsj_tfl2k_214):not(.awsui_has-open-drawer_hyvsj_tfl2k_157), .awsui-mode-entering .awsui_drawers-trigger-content_hyvsj_tfl2k_246:not(#\9):not(.awsui_has-multiple-triggers_hyvsj_tfl2k_214):not(.awsui_has-open-drawer_hyvsj_tfl2k_157) {
   animation: none;
   transition: none;
 }
 
 @media (max-width: 688px) {
-  .awsui_drawers-trigger_hyvsj_1s8d9_375:not(#\9) {
+  .awsui_drawers-trigger_hyvsj_tfl2k_246:not(#\9) {
     width: 40px;
     text-align: right;
   }
 }
 
-.awsui_drawer_hyvsj_1s8d9_126:not(#\9) {
-  --awsui-active-drawer-width-rrnppm: 290px;
+.awsui_drawer_hyvsj_tfl2k_145:not(#\9) {
+  --awsui-active-drawer-width-en6003: 290px;
   background-color: var(--color-background-container-content-em2lah, #ffffff);
   border-color: transparent;
   display: grid;
@@ -449,43 +320,43 @@ div.awsui_background_hyvsj_1s8d9_224 > .awsui_overlap_hyvsj_1s8d9_246:not(#\9) {
   transition: var(--motion-duration-refresh-only-fast-n43vlu, 115ms);
   transition-property: border-color, opacity, width;
 }
-.awsui_drawer_hyvsj_1s8d9_126 > .awsui_drawer-close-button_hyvsj_1s8d9_426:not(#\9) {
+.awsui_drawer_hyvsj_tfl2k_145 > .awsui_drawer-close-button_hyvsj_tfl2k_297:not(#\9) {
   grid-column: 2;
   grid-row: 2;
   z-index: 1;
 }
-.awsui_drawer_hyvsj_1s8d9_126 > .awsui_drawer-content_hyvsj_1s8d9_431:not(#\9) {
+.awsui_drawer_hyvsj_tfl2k_145 > .awsui_drawer-content_hyvsj_tfl2k_302:not(#\9) {
   grid-column: 1/span 3;
   grid-row: 1/span 3;
-  width: var(--awsui-active-drawer-width-rrnppm);
+  width: var(--awsui-active-drawer-width-en6003);
 }
-.awsui_drawer_hyvsj_1s8d9_126:not(#\9):not(.awsui_is-drawer-open_hyvsj_1s8d9_436) {
+.awsui_drawer_hyvsj_tfl2k_145:not(#\9):not(.awsui_is-drawer-open_hyvsj_tfl2k_307) {
   opacity: 0;
   width: 0;
 }
-.awsui_drawer_hyvsj_1s8d9_126.awsui_is-drawer-open_hyvsj_1s8d9_436:not(#\9) {
+.awsui_drawer_hyvsj_tfl2k_145.awsui_is-drawer-open_hyvsj_tfl2k_307:not(#\9) {
   border-right: var(--border-divider-section-width-g0ay3c, 2px) solid var(--color-border-divider-default-4spq70, #e9ebed);
   opacity: 1;
-  width: var(--awsui-active-drawer-width-rrnppm);
+  width: var(--awsui-active-drawer-width-en6003);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_drawer_hyvsj_1s8d9_126:not(#\9) {
+  .awsui_drawer_hyvsj_tfl2k_145:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_drawer_hyvsj_1s8d9_126:not(#\9), .awsui-mode-entering .awsui_drawer_hyvsj_1s8d9_126:not(#\9) {
+.awsui-motion-disabled .awsui_drawer_hyvsj_tfl2k_145:not(#\9), .awsui-mode-entering .awsui_drawer_hyvsj_tfl2k_145:not(#\9) {
   animation: none;
   transition: none;
 }
 @media (min-width: 2541px) {
-  .awsui_drawer_hyvsj_1s8d9_126.awsui_is-drawer-open_hyvsj_1s8d9_436:not(#\9) {
-    --awsui-active-drawer-width-rrnppm: 320px;
+  .awsui_drawer_hyvsj_tfl2k_145.awsui_is-drawer-open_hyvsj_tfl2k_307:not(#\9) {
+    --awsui-active-drawer-width-en6003: 320px;
   }
 }
 @media (max-width: 688px) {
-  .awsui_drawer_hyvsj_1s8d9_126.awsui_is-drawer-open_hyvsj_1s8d9_436:not(#\9) {
-    --awsui-active-drawer-width-rrnppm: 100vw;
+  .awsui_drawer_hyvsj_tfl2k_145.awsui_is-drawer-open_hyvsj_tfl2k_307:not(#\9) {
+    --awsui-active-drawer-width-en6003: 100vw;
   }
 }
 
@@ -493,51 +364,8 @@ div.awsui_background_hyvsj_1s8d9_224 > .awsui_overlap_hyvsj_1s8d9_246:not(#\9) {
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-header.awsui_content_hyvsj_1s8d9_182:not(#\9) {
-  grid-column: 3;
-  grid-row: 3;
-  padding-bottom: var(--space-content-header-padding-bottom-98ndis, 24px);
-}
-@media (min-width: 689px) {
-  header.awsui_content_hyvsj_1s8d9_182:not(#\9) {
-    /*
-    If Notifications exist and Breadcrumbs do not then Notifications 
-    is the previous adjacent sibling to the Header. Add minimal top padding 
-    in addition to the bottom padding on the Notifications.
-    */
-    /*
-    If Breadcrumbs exists it is necessarily the previous adjacent 
-    sibling and the Header should have no padding. Add minimal top 
-    padding for vertical space between the Breadcrumbs and Header.
-    */
-    /*
-    If Notifications and Breadcrumbs do not exist then the Header 
-    is the first rendered center content. The top padding should 
-    vertically align the Header with the Navigation and Tools 
-    circular buttons.
-    */
-  }
-  header.awsui_content_hyvsj_1s8d9_182.awsui_has-notifications-content_hyvsj_1s8d9_175:not(#\9):not(.awsui_has-breadcrumbs_hyvsj_1s8d9_167) {
-    padding-top: var(--space-scaled-xs-u0e7ft, 8px);
-  }
-  header.awsui_content_hyvsj_1s8d9_182.awsui_has-breadcrumbs_hyvsj_1s8d9_167:not(#\9) {
-    padding-top: var(--space-xxs-a6783b, 4px);
-  }
-  header.awsui_content_hyvsj_1s8d9_182:not(#\9):not(.awsui_has-notifications-content_hyvsj_1s8d9_175):not(.awsui_has-breadcrumbs_hyvsj_1s8d9_167) {
-    padding-top: var(--space-scaled-xs-u0e7ft, 8px);
-  }
-}
-@media (max-width: 688px) {
-  header.awsui_content_hyvsj_1s8d9_182:not(#\9) {
-    padding: var(--space-m-sptmsg, 16px) 0 var(--space-content-header-padding-bottom-98ndis, 24px);
-    /*
-    Breadcrumbs has moved to first position and sticky so Notifications 
-    are now the previous adjacent sibling if they exist.
-    */
-  }
-  header.awsui_content_hyvsj_1s8d9_182.awsui_has-notifications-content_hyvsj_1s8d9_175:not(#\9) {
-    padding-top: var(--space-scaled-xs-u0e7ft, 8px);
-  }
+header.awsui_content_hyvsj_tfl2k_341:not(#\9) {
+  grid-area: header;
 }
 
 /*
@@ -545,41 +373,54 @@ header.awsui_content_hyvsj_1s8d9_182:not(#\9) {
  SPDX-License-Identifier: Apache-2.0
 */
 /*
-  The first and last column definitions have two responsibilities.
-  If Navigation and/or Tools exist then that will determine the width of
-  the first and last columns, respectively, and the content in these drawers
-  will create horizontal space from the center column content. However, if the
-  navigationHide and/or toolsHide properties have been set then the first
-  and last column width will default to the minimum content gap properties to
-  create the necessary visual space around the main content.
+The first and last column definitions have two responsibilities.
+If Navigation and/or Tools exist then that will determine the width of
+the first and last columns, respectively, and the content in these drawers
+will create horizontal space from the center column content. However, if the
+navigationHide and/or toolsHide properties have been set then the first
+and last column width will default to the minimum content gap properties to
+create the necessary visual space around the main content.
 
-  The minimum content width property is set to zero and applied under all
-  circumstances regardless of whether the minContentWidth property is
-  explicitly set in script.
-  */
-.awsui_layout_hyvsj_1s8d9_534:not(#\9) {
-  --awsui-content-gap-left-rrnppm: 0px;
-  --awsui-content-gap-right-rrnppm: 0px;
-  --awsui-content-height-rrnppm: calc(100vh - var(--awsui-header-height-rrnppm) - var(--awsui-footer-height-rrnppm));
-  --awsui-default-max-content-width-rrnppm: 1280px;
-  --awsui-default-min-content-width-rrnppm: 0px;
-  --awsui-footer-height-rrnppm: 0px;
-  --awsui-header-height-rrnppm: 0px;
-  --awsui-layout-width-rrnppm: 0px;
-  --awsui-main-offset-left-rrnppm: 0px;
-  --awsui-max-content-width-rrnppm: 0px;
-  --awsui-min-content-width-rrnppm: 280px;
-  --awsui-mobile-bar-height-rrnppm: calc(2 * var(--space-m-sptmsg, 16px) + var(--space-scaled-xs-u0e7ft, 8px));
-  --awsui-notifications-height-rrnppm: 0px;
-  --awsui-offset-top-rrnppm: 0px;
-  --awsui-offset-top-with-notifications-rrnppm: 0px;
-  --awsui-overlap-height-rrnppm: var(--space-dark-header-overlap-distance-d8wdqm, 36px);
+The minimum content width property is set to zero and applied under all
+circumstances regardless of whether the minContentWidth property is
+explicitly set in script.
+*/
+.awsui_layout_hyvsj_tfl2k_362:not(#\9) {
+  --awsui-breadcrumbs-gap-en6003: 0px;
+  --awsui-content-gap-left-en6003: 0px;
+  --awsui-content-gap-right-en6003: 0px;
+  --awsui-content-height-en6003: calc(100vh - var(--awsui-header-height-en6003) - var(--awsui-footer-height-en6003));
+  --awsui-default-max-content-width-en6003: 1280px;
+  --awsui-default-min-content-width-en6003: 0px;
+  --awsui-footer-height-en6003: 0px;
+  --awsui-header-gap-en6003: 0px;
+  --awsui-header-height-en6003: 0px;
+  --awsui-layout-width-en6003: 0px;
+  --awsui-main-gap-en6003: 0px;
+  --awsui-main-offset-left-en6003: 0px;
+  --awsui-main-template-rows-en6003: 1fr;
+  --awsui-max-content-width-en6003: 0px;
+  --awsui-min-content-width-en6003: 280px;
+  --awsui-mobile-bar-height-en6003: calc(2 * var(--space-m-sptmsg, 16px) + var(--space-scaled-xs-u0e7ft, 8px));
+  --awsui-notifications-gap-en6003: 0px;
+  --awsui-notifications-height-en6003: 0px;
+  --awsui-offset-top-en6003: var(--awsui-header-height-en6003);
+  --awsui-offset-top-with-notifications-en6003: 0px;
+  --awsui-overlap-height-en6003: var(--space-dark-header-overlap-distance-d8wdqm, 36px);
   background-color: var(--color-background-layout-main-iz43sl, #ffffff);
+  color: var(--color-text-body-default-01bwmw, #000716);
   display: grid;
-  grid-template-rows: repeat(3, auto) var(--awsui-overlap-height-rrnppm) 1fr;
-  grid-template-columns: min-content minmax(var(--awsui-content-gap-left-rrnppm), 1fr) minmax(var(--awsui-default-min-content-width-rrnppm), var(--awsui-default-max-content-width-rrnppm)) minmax(var(--awsui-content-gap-right-rrnppm), 1fr) min-content;
+  grid-template-areas: ". . mobileToolbar . ." ". . notificationsGap . ." ". . notifications . ." ". . breadcrumbsGap . ." ". . breadcrumbs . ." ". . headerGap . ." ". . header . ." ". . mainGap . ." ". . main . ." ". . main . .";
+  grid-template-columns: min-content minmax(var(--awsui-content-gap-left-en6003), 1fr) minmax(var(--awsui-default-min-content-width-en6003), var(--awsui-default-max-content-width-en6003)) minmax(var(--awsui-content-gap-right-en6003), 1fr) min-content;
+  grid-template-rows: auto var(--awsui-notifications-gap-en6003) auto var(--awsui-breadcrumbs-gap-en6003) auto var(--awsui-header-gap-en6003) auto var(--awsui-main-gap-en6003) var(--awsui-overlap-height-en6003) var(--awsui-main-template-rows-en6003);
+  min-height: var(--awsui-content-height-en6003);
   position: relative;
-  color: var(--color-text-body-default-01bwmw, #000716);
+  /*
+  Add unified max-width for AppLayout content based on breakpoints. Only use the max content 
+  width custom property for the middle column definition if the maxContentWidth property 
+  has been explicitly set to a non-zero value and subsequently set the has-max-content-width 
+  data attribute to true.
+  */
   /*
   Only use the max content width custom property for the middle column definition
   if the maxContentWidth property has been explicitly set to a non-zero value and
@@ -594,34 +435,14 @@ header.awsui_content_hyvsj_1s8d9_182:not(#\9) {
   isMobile breakpoint sets the drawers to overlay at 100vw.
   */
   /*
-  Override the dark header overlap height property if isOverlapDisabled is true.
-  The is computed state from props that can be found in the AppLayout context.
-  */
-  /*
-  If disableBodyScroll is false (this is the overwhelming majority
-  of use cases and the default scenario) then the scrollable element
-  will be the document body which is a parent of the AppLayout component.
-  The Layout should have a minimum but not fixed content height set to the
-  viewport height less the header and footer height set by the resize
-  observers in the component. The offset top value for components
-  with position: sticky (AppBar, Navigation, Notifications, Tools) will
-  be set to the header height value. The offset top value for AppLayout
-  contentMain children with position: sticky will be the combined value of the
-  header and notifications height in addition to the notifications top margin
-  and some additional vertical space for aesthetics.
-  */
-  /*
-  If disableBodyScroll is true (very uncommon use case) then the
-  AppLayout component and not the document body will be the scrollable
-  element. This requires a fixed height instead of a minimum height
-  with a vertical scroll policy. The offset top value for components
-  with position: sticky (AppBar, Navigation, Notifications, Tools) will
-  be set zero since the AppLayout is nearest scrollable parent and any
-  existing header does not matter. The offset top value for AppLayout
-  contentMain children with position: sticky will be the value of the
-  notifications height in addition to the notifications top margin
+  The offset top value for components with position: sticky (AppBar, Navigation, 
+  Notifications, Tools) will be set to the header height value. The offset top value 
+  for AppLayout contentMain children with position: sticky will be the combined value 
+  of the header and notifications height in addition to the notifications top margin
   and some additional vertical space for aesthetics.
   */
+  /* stylelint-disable scss/operator-no-newline-after */
+  /* stylelint-enable scss/operator-no-newline-after */
   /*
   In desktop viewports the content gap property for the left and right
   columns should override the default of zero if the navigationHide
@@ -629,122 +450,193 @@ header.awsui_content_hyvsj_1s8d9_182:not(#\9) {
   for the center column from the edges of the viewport when there is
   not left or right content.
 
-  Warning! If these design tokens change it will adversely impact the
-  calculation used to determine the Split Panel maximum width in the
+  Warning! If these design tokens change it will adversely impact the 
+  calculation used to determine the Split Panel maximum width in the 
   handleSplitPanelMaxWidth function in the context.
   */
   /*
   In mobile viewports the Navigation and Tools drawers are hidden
-  and triggered by the AppBar which then take up the entire viewport.
+  and triggered by the MobileToolbar which then take up the entire viewport.
   The center column needs permanent space from the horizontal viewport
   edges regardless of whether or not there is a Navigation or Tools.
   */
+  /*
+  Override the desktop gap values set above for the Notifications, Header, and Main
+  components for mobile viewports.
+  */
 }
 @media (min-width: 1401px) {
-  .awsui_layout_hyvsj_1s8d9_534:not(#\9):not(.awsui_has-max-content-width_hyvsj_1s8d9_618) {
-    --awsui-default-max-content-width-rrnppm: 1280px;
+  .awsui_layout_hyvsj_tfl2k_362:not(#\9):not(.awsui_has-max-content-width_hyvsj_tfl2k_443) {
+    --awsui-default-max-content-width-en6003: 1280px;
   }
 }
 @media (min-width: 1921px) {
-  .awsui_layout_hyvsj_1s8d9_534:not(#\9):not(.awsui_has-max-content-width_hyvsj_1s8d9_618) {
-    --awsui-default-max-content-width-rrnppm: 1440px;
+  .awsui_layout_hyvsj_tfl2k_362:not(#\9):not(.awsui_has-max-content-width_hyvsj_tfl2k_443) {
+    --awsui-default-max-content-width-en6003: 1440px;
   }
 }
 @media (min-width: 2541px) {
-  .awsui_layout_hyvsj_1s8d9_534:not(#\9):not(.awsui_has-max-content-width_hyvsj_1s8d9_618) {
-    --awsui-default-max-content-width-rrnppm: 1620px;
+  .awsui_layout_hyvsj_tfl2k_362:not(#\9):not(.awsui_has-max-content-width_hyvsj_tfl2k_443) {
+    --awsui-default-max-content-width-en6003: 1620px;
   }
 }
 @media (min-width: 1401px) {
-  .awsui_layout_hyvsj_1s8d9_534:not(#\9):not(.awsui_has-max-content-width_hyvsj_1s8d9_618).awsui_content-type-dashboard_hyvsj_1s8d9_633 {
-    --awsui-default-max-content-width-rrnppm: 1280px;
+  .awsui_layout_hyvsj_tfl2k_362:not(#\9):not(.awsui_has-max-content-width_hyvsj_tfl2k_443).awsui_content-type-dashboard_hyvsj_tfl2k_458 {
+    --awsui-default-max-content-width-en6003: 1280px;
   }
 }
 @media (min-width: 1921px) {
-  .awsui_layout_hyvsj_1s8d9_534:not(#\9):not(.awsui_has-max-content-width_hyvsj_1s8d9_618).awsui_content-type-dashboard_hyvsj_1s8d9_633 {
-    --awsui-default-max-content-width-rrnppm: 1620px;
+  .awsui_layout_hyvsj_tfl2k_362:not(#\9):not(.awsui_has-max-content-width_hyvsj_tfl2k_443).awsui_content-type-dashboard_hyvsj_tfl2k_458 {
+    --awsui-default-max-content-width-en6003: 1620px;
   }
 }
 @media (min-width: 2541px) {
-  .awsui_layout_hyvsj_1s8d9_534:not(#\9):not(.awsui_has-max-content-width_hyvsj_1s8d9_618).awsui_content-type-dashboard_hyvsj_1s8d9_633 {
-    --awsui-default-max-content-width-rrnppm: 2160px;
+  .awsui_layout_hyvsj_tfl2k_362:not(#\9):not(.awsui_has-max-content-width_hyvsj_tfl2k_443).awsui_content-type-dashboard_hyvsj_tfl2k_458 {
+    --awsui-default-max-content-width-en6003: 2160px;
   }
 }
-.awsui_layout_hyvsj_1s8d9_534.awsui_has-max-content-width_hyvsj_1s8d9_618:not(#\9) {
-  --awsui-default-max-content-width-rrnppm: var(--awsui-max-content-width-rrnppm);
+.awsui_layout_hyvsj_tfl2k_362.awsui_has-max-content-width_hyvsj_tfl2k_443:not(#\9) {
+  --awsui-default-max-content-width-en6003: var(--awsui-max-content-width-en6003);
+}
+.awsui_layout_hyvsj_tfl2k_362.awsui_is-overlap-disabled_hyvsj_tfl2k_475:not(#\9) {
+  --awsui-overlap-height-en6003: 0;
 }
 @media (min-width: 993px) {
-  .awsui_layout_hyvsj_1s8d9_534:not(#\9) {
-    --awsui-default-min-content-width-rrnppm: var(--awsui-min-content-width-rrnppm, 280px);
+  .awsui_layout_hyvsj_tfl2k_362:not(#\9) {
+    --awsui-default-min-content-width-en6003: var(--awsui-min-content-width-en6003, 280px);
   }
 }
 @media (max-width: 992px) {
-  .awsui_layout_hyvsj_1s8d9_534:not(#\9) {
-    --awsui-default-min-content-width-rrnppm: 0px;
+  .awsui_layout_hyvsj_tfl2k_362:not(#\9) {
+    --awsui-default-min-content-width-en6003: 0px;
   }
 }
-.awsui_layout_hyvsj_1s8d9_534.awsui_is-overlap-disabled_hyvsj_1s8d9_660:not(#\9) {
-  --awsui-overlap-height-rrnppm: 0;
+.awsui_layout_hyvsj_tfl2k_362:not(#\9):not(.awsui_has-sticky-notifications_hyvsj_tfl2k_110):not(.awsui_has-sticky-background_hyvsj_tfl2k_133) {
+  --awsui-offset-top-with-notifications-en6003: var(--awsui-header-height-en6003);
 }
-.awsui_layout_hyvsj_1s8d9_534:not(#\9):not(.awsui_disable-body-scroll_hyvsj_1s8d9_320) {
-  --awsui-offset-top-rrnppm: var(--awsui-header-height-rrnppm);
-  min-height: var(--awsui-content-height-rrnppm);
+.awsui_layout_hyvsj_tfl2k_362:not(#\9):not(.awsui_has-sticky-notifications_hyvsj_tfl2k_110).awsui_has-sticky-background_hyvsj_tfl2k_133 {
+  --awsui-offset-top-with-notifications-en6003: calc(var(--awsui-header-height-en6003) + var(--space-scaled-s-gczsk7, 12px));
 }
-.awsui_layout_hyvsj_1s8d9_534:not(#\9):not(.awsui_disable-body-scroll_hyvsj_1s8d9_320):not(.awsui_has-sticky-notifications_hyvsj_1s8d9_667) {
-  --awsui-offset-top-with-notifications-rrnppm: var(--awsui-header-height-rrnppm);
-}
-.awsui_layout_hyvsj_1s8d9_534:not(#\9):not(.awsui_disable-body-scroll_hyvsj_1s8d9_320).awsui_has-sticky-notifications_hyvsj_1s8d9_667 {
-  --awsui-offset-top-with-notifications-rrnppm: calc(
-      var(--awsui-header-height-rrnppm) + var(--awsui-notifications-height-rrnppm) + var(--space-xs-inub5w, 8px) + var(--space-xxxs-rq3iss, 2px)
+.awsui_layout_hyvsj_tfl2k_362.awsui_has-sticky-notifications_hyvsj_tfl2k_110:not(#\9):not(.awsui_has-sticky-background_hyvsj_tfl2k_133) {
+  --awsui-offset-top-with-notifications-en6003: calc(
+      var(--awsui-offset-top-en6003) + var(--awsui-notifications-gap-en6003) +
+        var(--awsui-notifications-height-en6003) + var(--space-xxxs-rq3iss, 2px)
     );
 }
-.awsui_layout_hyvsj_1s8d9_534.awsui_disable-body-scroll_hyvsj_1s8d9_320:not(#\9) {
-  --awsui-offset-top-rrnppm: 0px;
-  grid-template-rows: repeat(3, auto) var(--awsui-overlap-height-rrnppm) 1fr auto;
-  height: var(--awsui-content-height-rrnppm);
-  overflow-y: scroll;
-}
-.awsui_layout_hyvsj_1s8d9_534.awsui_disable-body-scroll_hyvsj_1s8d9_320.awsui_has-split-panel_hyvsj_1s8d9_681.awsui_split-panel-position-bottom_hyvsj_1s8d9_681:not(#\9) {
-  grid-template-rows: repeat(3, auto) var(--awsui-overlap-height-rrnppm) repeat(2, auto);
-}
-.awsui_layout_hyvsj_1s8d9_534.awsui_disable-body-scroll_hyvsj_1s8d9_320:not(#\9):not(.awsui_has-sticky-notifications_hyvsj_1s8d9_667) {
-  --awsui-offset-top-with-notifications-rrnppm: 0px;
-}
-.awsui_layout_hyvsj_1s8d9_534.awsui_disable-body-scroll_hyvsj_1s8d9_320.awsui_has-sticky-notifications_hyvsj_1s8d9_667:not(#\9) {
-  --awsui-offset-top-with-notifications-rrnppm: calc(
-      var(--awsui-notifications-height-rrnppm) + var(--space-xs-inub5w, 8px) + var(--space-xxs-a6783b, 4px)
+.awsui_layout_hyvsj_tfl2k_362.awsui_has-sticky-notifications_hyvsj_tfl2k_110.awsui_has-sticky-background_hyvsj_tfl2k_133:not(#\9) {
+  --awsui-offset-top-with-notifications-en6003: calc(
+      var(--awsui-offset-top-en6003) + var(--awsui-notifications-gap-en6003) +
+        var(--awsui-notifications-height-en6003) + var(--space-scaled-s-gczsk7, 12px)
     );
 }
 @media (min-width: 689px) {
-  .awsui_layout_hyvsj_1s8d9_534.awsui_has-content-gap-left_hyvsj_1s8d9_693:not(#\9) {
-    --awsui-content-gap-left-rrnppm: var(--space-scaled-2x-xxxl-4usad4, 40px);
+  .awsui_layout_hyvsj_tfl2k_362.awsui_has-content-gap-left_hyvsj_tfl2k_507:not(#\9) {
+    --awsui-content-gap-left-en6003: var(--space-scaled-2x-xxxl-4usad4, 40px);
   }
-  .awsui_layout_hyvsj_1s8d9_534.awsui_has-content-gap-right_hyvsj_1s8d9_696:not(#\9) {
-    --awsui-content-gap-right-rrnppm: var(--space-scaled-2x-xxxl-4usad4, 40px);
+  .awsui_layout_hyvsj_tfl2k_362.awsui_has-content-gap-right_hyvsj_tfl2k_510:not(#\9) {
+    --awsui-content-gap-right-en6003: var(--space-scaled-2x-xxxl-4usad4, 40px);
   }
 }
 @media (max-width: 688px) {
-  .awsui_layout_hyvsj_1s8d9_534:not(#\9) {
-    --awsui-content-gap-left-rrnppm: var(--space-l-ds615y, 20px);
-    --awsui-content-gap-right-rrnppm: var(--space-l-ds615y, 20px);
+  .awsui_layout_hyvsj_tfl2k_362:not(#\9) {
+    --awsui-content-gap-left-en6003: var(--space-l-ds615y, 20px);
+    --awsui-content-gap-right-en6003: var(--space-l-ds615y, 20px);
+  }
+}
+.awsui_layout_hyvsj_tfl2k_362.awsui_content-first-child-notifications_hyvsj_tfl2k_520:not(#\9) {
+  --awsui-notifications-gap-en6003: var(--space-xs-inub5w, 8px);
+}
+.awsui_layout_hyvsj_tfl2k_362.awsui_has-breadcrumbs_hyvsj_tfl2k_523:not(#\9) {
+  --awsui-breadcrumbs-gap-en6003: var(--space-scaled-m-9q5ipc, 16px);
+}
+.awsui_layout_hyvsj_tfl2k_362.awsui_content-first-child-header_hyvsj_tfl2k_526:not(#\9), .awsui_layout_hyvsj_tfl2k_362.awsui_content-first-child-notifications_hyvsj_tfl2k_520:not(#\9):not(.awsui_has-breadcrumbs_hyvsj_tfl2k_523).awsui_has-header_hyvsj_tfl2k_526 {
+  --awsui-header-gap-en6003: var(--space-scaled-xs-u0e7ft, 8px);
+}
+.awsui_layout_hyvsj_tfl2k_362.awsui_has-breadcrumbs_hyvsj_tfl2k_523.awsui_has-header_hyvsj_tfl2k_526:not(#\9) {
+  --awsui-header-gap-en6003: var(--space-scaled-xxs-ugy2pw, 4px);
+}
+.awsui_layout_hyvsj_tfl2k_362.awsui_content-first-child-notifications_hyvsj_tfl2k_520:not(#\9):not(.awsui_has-breadcrumbs_hyvsj_tfl2k_523):not(.awsui_has-header_hyvsj_tfl2k_526) {
+  --awsui-main-gap-en6003: var(--space-xs-inub5w, 8px);
+}
+.awsui_layout_hyvsj_tfl2k_362.awsui_has-breadcrumbs_hyvsj_tfl2k_523:not(#\9):not(.awsui_has-header_hyvsj_tfl2k_526).awsui_is-overlap-disabled_hyvsj_tfl2k_475 {
+  --awsui-main-gap-en6003: var(--space-scaled-m-9q5ipc, 16px);
+}
+.awsui_layout_hyvsj_tfl2k_362.awsui_has-breadcrumbs_hyvsj_tfl2k_523:not(#\9):not(.awsui_has-header_hyvsj_tfl2k_526):not(.awsui_is-overlap-disabled_hyvsj_tfl2k_475) {
+  --awsui-main-gap-en6003: var(--space-scaled-xxs-ugy2pw, 4px);
+}
+.awsui_layout_hyvsj_tfl2k_362.awsui_has-header_hyvsj_tfl2k_526:not(#\9) {
+  --awsui-main-gap-en6003: var(--space-scaled-xl-ozgbvg, 24px);
+}
+.awsui_layout_hyvsj_tfl2k_362.awsui_content-first-child-main_hyvsj_tfl2k_544:not(#\9):not(.awsui_is-overlap-disabled_hyvsj_tfl2k_475), .awsui_layout_hyvsj_tfl2k_362.awsui_content-first-child-main_hyvsj_tfl2k_544.awsui_is-overlap-disabled_hyvsj_tfl2k_475:not(#\9):not(.awsui_disable-content-paddings_hyvsj_tfl2k_544) {
+  --awsui-main-gap-en6003: var(--space-scaled-xs-u0e7ft, 8px);
+}
+@media (max-width: 688px) {
+  .awsui_layout_hyvsj_tfl2k_362.awsui_content-first-child-notifications_hyvsj_tfl2k_520:not(#\9) {
+    --awsui-notifications-gap-en6003: var(--space-scaled-s-gczsk7, 12px);
+  }
+  .awsui_layout_hyvsj_tfl2k_362.awsui_content-first-child-header_hyvsj_tfl2k_526:not(#\9) {
+    --awsui-header-gap-en6003: var(--space-scaled-s-gczsk7, 12px);
+  }
+  .awsui_layout_hyvsj_tfl2k_362.awsui_content-first-child-notifications_hyvsj_tfl2k_520:not(#\9):not(.awsui_has-breadcrumbs_hyvsj_tfl2k_523).awsui_has-header_hyvsj_tfl2k_526 {
+    --awsui-header-gap-en6003: var(--space-scaled-s-gczsk7, 12px);
+  }
+  .awsui_layout_hyvsj_tfl2k_362.awsui_content-first-child-notifications_hyvsj_tfl2k_520:not(#\9):not(.awsui_has-breadcrumbs_hyvsj_tfl2k_523):not(.awsui_has-header_hyvsj_tfl2k_526), .awsui_layout_hyvsj_tfl2k_362.awsui_content-first-child-main_hyvsj_tfl2k_544:not(#\9):not(.awsui_is-overlap-disabled_hyvsj_tfl2k_475) {
+    --awsui-main-gap-en6003: var(--space-scaled-s-gczsk7, 12px);
+  }
+  .awsui_layout_hyvsj_tfl2k_362.awsui_content-first-child-main_hyvsj_tfl2k_544.awsui_is-overlap-disabled_hyvsj_tfl2k_475:not(#\9):not(.awsui_disable-content-paddings_hyvsj_tfl2k_544) {
+    --awsui-main-gap-en6003: var(--space-scaled-m-9q5ipc, 16px);
   }
 }
 
+/*
+If disableBodyScroll is true (very uncommon use case) then the AppLayout component 
+and not the document body will be the scrollable element. This requires a fixed height 
+instead of a minimum height with a vertical scroll policy. The offset top value for 
+components with position: sticky (MobileToolbar, Navigation, Notifications, Tools) will be 
+set zero since the AppLayout is nearest scrollable parent and any existing header does 
+not matter. The offset top value for AppLayout contentMain children with 
+position: sticky will be the value of the notifications height in addition to the 
+notifications top margin and some additional vertical space for aesthetics.
+*/
+.awsui_layout_hyvsj_tfl2k_362.awsui_disable-body-scroll_hyvsj_tfl2k_191:not(#\9) {
+  --awsui-main-template-rows-en6003: 1fr auto;
+  --awsui-offset-top-en6003: 0px;
+  height: var(--awsui-content-height-en6003);
+  overflow-y: scroll;
+}
+.awsui_layout_hyvsj_tfl2k_362.awsui_disable-body-scroll_hyvsj_tfl2k_191.awsui_has-split-panel_hyvsj_tfl2k_581.awsui_split-panel-position-bottom_hyvsj_tfl2k_581:not(#\9) {
+  --awsui-main-template-rows-en6003: repeat(2, auto);
+}
+.awsui_layout_hyvsj_tfl2k_362.awsui_disable-body-scroll_hyvsj_tfl2k_191:not(#\9):not(.awsui_has-sticky-notifications_hyvsj_tfl2k_110) {
+  --awsui-offset-top-with-notifications-en6003: 0px;
+}
+.awsui_layout_hyvsj_tfl2k_362.awsui_disable-body-scroll_hyvsj_tfl2k_191.awsui_has-sticky-notifications_hyvsj_tfl2k_110:not(#\9) {
+  --awsui-offset-top-with-notifications-en6003: calc(
+      var(--awsui-notifications-height-en6003) + var(--space-xs-inub5w, 8px) + var(--space-xxs-a6783b, 4px)
+    );
+}
+
 /*
 This CSS class is applied to the document body to prevent overflow scrolling
 when the navigation or tools drawers are open in responsive viewports.
 */
-.awsui_block-body-scroll_hyvsj_1s8d9_711:not(#\9) {
+.awsui_block-body-scroll_hyvsj_tfl2k_597:not(#\9) {
   overflow: hidden;
 }
 
+/* stylelint-disable selector-max-universal, selector-combinator-disallowed-list */
+.awsui_unfocusable_hyvsj_tfl2k_602:not(#\9),
+.awsui_unfocusable_hyvsj_tfl2k_602 *:not(#\9) {
+  visibility: hidden !important;
+}
+
+/* stylelint-enable selector-max-universal, selector-combinator-disallowed-list */
 /*
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_container_hyvsj_1s8d9_719:not(#\9) {
-  grid-column: 3;
-  grid-row: 4/span 2;
+.awsui_container_hyvsj_tfl2k_612:not(#\9) {
+  grid-area: main;
   padding-bottom: var(--space-layout-content-bottom-nju4ze, 40px);
   /*
   If the split panel is in the bottom position additional padding will need to be
@@ -759,102 +651,68 @@ when the navigation or tools drawers are open in responsive viewports.
   start column by one. If the Tools or Split Panel (in side position) is open
   on the right, we decrement the column end by one.
   */
-  /*
-  If disableContentPaddings is not enabled (the majority of use cases) then
-  the following code block will compute the padding behavior for the Main
-  under various circumstances.
-  */
 }
-.awsui_container_hyvsj_1s8d9_719.awsui_has-split-panel_hyvsj_1s8d9_681.awsui_split-panel-position-bottom_hyvsj_1s8d9_681:not(#\9) {
-  padding-bottom: calc(var(--awsui-split-panel-height-rrnppm) + var(--space-layout-content-bottom-nju4ze, 40px));
+.awsui_container_hyvsj_tfl2k_612.awsui_has-split-panel_hyvsj_tfl2k_581.awsui_split-panel-position-bottom_hyvsj_tfl2k_581:not(#\9) {
+  padding-bottom: calc(var(--awsui-split-panel-height-en6003) + var(--space-layout-content-bottom-nju4ze, 40px));
 }
-.awsui_container_hyvsj_1s8d9_719.awsui_disable-content-paddings_hyvsj_1s8d9_745:not(#\9) {
+.awsui_container_hyvsj_tfl2k_612.awsui_disable-content-paddings_hyvsj_tfl2k_544:not(#\9) {
   grid-column: 1/6;
   padding: 0;
 }
 @media (min-width: 689px) {
-  .awsui_container_hyvsj_1s8d9_719.awsui_disable-content-paddings_hyvsj_1s8d9_745.awsui_is-navigation-open_hyvsj_1s8d9_750:not(#\9) {
+  .awsui_container_hyvsj_tfl2k_612.awsui_disable-content-paddings_hyvsj_tfl2k_544.awsui_is-navigation-open_hyvsj_tfl2k_637:not(#\9) {
     grid-column-start: 2;
   }
-  .awsui_container_hyvsj_1s8d9_719.awsui_disable-content-paddings_hyvsj_1s8d9_745.awsui_is-tools-open_hyvsj_1s8d9_753:not(#\9), .awsui_container_hyvsj_1s8d9_719.awsui_disable-content-paddings_hyvsj_1s8d9_745.awsui_is-split-panel-open_hyvsj_1s8d9_753.awsui_split-panel-position-side_hyvsj_1s8d9_753:not(#\9) {
+  .awsui_container_hyvsj_tfl2k_612.awsui_disable-content-paddings_hyvsj_tfl2k_544.awsui_is-tools-open_hyvsj_tfl2k_640:not(#\9), .awsui_container_hyvsj_tfl2k_612.awsui_disable-content-paddings_hyvsj_tfl2k_544.awsui_is-split-panel-open_hyvsj_tfl2k_640.awsui_split-panel-position-side_hyvsj_tfl2k_640:not(#\9) {
     grid-column-end: 5;
   }
 }
-@media (min-width: 689px) {
-  .awsui_container_hyvsj_1s8d9_719:not(#\9):not(.awsui_disable-content-paddings_hyvsj_1s8d9_745) {
-    /*
-    Notifications is the previous adjacent sibling to the Main in
-    desktop viewports if there are no Breadcrumbs or Header. Use additional
-    to padding on the Main.
-    */
-    /*
-    Main is the only rendered center content if there are no Notifications,
-    Breadcrumbs, or Header. Use minimal top padding.
-    */
-    /*
-    If the Header exists then it is necessarily the previous adjacent
-    sibling to the Main which requires no top padding.
-    */
-  }
-  .awsui_container_hyvsj_1s8d9_719:not(#\9):not(.awsui_disable-content-paddings_hyvsj_1s8d9_745).awsui_content-type-default_hyvsj_1s8d9_773.awsui_has-notifications-content_hyvsj_1s8d9_175:not(.awsui_has-breadcrumbs_hyvsj_1s8d9_167):not(.awsui_has-header_hyvsj_1s8d9_181):not(.awsui_has-dynamic-overlap-height_hyvsj_1s8d9_181), .awsui_container_hyvsj_1s8d9_719:not(#\9):not(.awsui_disable-content-paddings_hyvsj_1s8d9_745).awsui_content-type-form_hyvsj_1s8d9_773.awsui_has-notifications-content_hyvsj_1s8d9_175:not(.awsui_has-breadcrumbs_hyvsj_1s8d9_167):not(.awsui_has-header_hyvsj_1s8d9_181):not(.awsui_has-dynamic-overlap-height_hyvsj_1s8d9_181) {
-    padding-top: var(--space-scaled-m-9q5ipc, 16px);
-  }
-  .awsui_container_hyvsj_1s8d9_719:not(#\9):not(.awsui_disable-content-paddings_hyvsj_1s8d9_745).awsui_content-type-default_hyvsj_1s8d9_773:not(.awsui_has-notifications-content_hyvsj_1s8d9_175):not(.awsui_has-breadcrumbs_hyvsj_1s8d9_167):not(.awsui_has-header_hyvsj_1s8d9_181):not(.awsui_has-dynamic-overlap-height_hyvsj_1s8d9_181), .awsui_container_hyvsj_1s8d9_719:not(#\9):not(.awsui_disable-content-paddings_hyvsj_1s8d9_745).awsui_content-type-form_hyvsj_1s8d9_773:not(.awsui_has-notifications-content_hyvsj_1s8d9_175):not(.awsui_has-breadcrumbs_hyvsj_1s8d9_167):not(.awsui_has-header_hyvsj_1s8d9_181):not(.awsui_has-dynamic-overlap-height_hyvsj_1s8d9_181) {
-    padding-top: var(--space-scaled-xs-u0e7ft, 8px);
-  }
-  .awsui_container_hyvsj_1s8d9_719:not(#\9):not(.awsui_disable-content-paddings_hyvsj_1s8d9_745).awsui_has-header_hyvsj_1s8d9_181, .awsui_container_hyvsj_1s8d9_719:not(#\9):not(.awsui_disable-content-paddings_hyvsj_1s8d9_745).awsui_has-dynamic-overlap-height_hyvsj_1s8d9_181 {
-    padding-top: 0;
-  }
+
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+section.awsui_mobile-toolbar_hyvsj_tfl2k_649:not(#\9) {
+  align-items: center;
+  background-color: var(--color-background-home-header-uszgqm, #000716);
+  border-bottom: 1px solid var(--color-border-divider-default-4spq70, #e9ebed);
+  box-shadow: var(--shadow-panel-toggle-0lutgw, 0px 6px 12px 1px rgba(0, 7, 22, 0.12));
+  box-sizing: border-box;
+  height: var(--awsui-mobile-bar-height-en6003);
+  display: grid;
+  grid-area: mobileToolbar;
+  grid-column: 1/span 5;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  padding: 0 var(--space-m-sptmsg, 16px);
+  position: sticky;
+  top: var(--awsui-offset-top-en6003);
+  z-index: 1000;
 }
-@media (max-width: 688px) {
-  .awsui_container_hyvsj_1s8d9_719:not(#\9):not(.awsui_disable-content-paddings_hyvsj_1s8d9_745) {
-    /*
-    If the Notifications exist but the Header does not then the
-    Notifications is the previous adjacent sibling to the Main
-    requiring additional top padding. This is because the Breadcrumbs
-    are now rendered first and positioned sticky.
-    */
-    /*
-    Main is the only rendered center content if there are no Notifications or Header.
-    */
-    /*
-    If the Header exists then it is necessarily the previous adjacent
-    sibling to the Main which requires no top padding.
-    */
-  }
-  .awsui_container_hyvsj_1s8d9_719:not(#\9):not(.awsui_disable-content-paddings_hyvsj_1s8d9_745).awsui_content-type-default_hyvsj_1s8d9_773.awsui_has-notifications-content_hyvsj_1s8d9_175:not(.awsui_has-header_hyvsj_1s8d9_181):not(.awsui_has-dynamic-overlap-height_hyvsj_1s8d9_181), .awsui_container_hyvsj_1s8d9_719:not(#\9):not(.awsui_disable-content-paddings_hyvsj_1s8d9_745).awsui_content-type-form_hyvsj_1s8d9_773.awsui_has-notifications-content_hyvsj_1s8d9_175:not(.awsui_has-header_hyvsj_1s8d9_181):not(.awsui_has-dynamic-overlap-height_hyvsj_1s8d9_181) {
-    padding-top: var(--space-scaled-m-9q5ipc, 16px);
-  }
-  .awsui_container_hyvsj_1s8d9_719:not(#\9):not(.awsui_disable-content-paddings_hyvsj_1s8d9_745).awsui_content-type-default_hyvsj_1s8d9_773:not(.awsui_has-notifications-content_hyvsj_1s8d9_175):not(.awsui_has-header_hyvsj_1s8d9_181):not(.awsui_has-dynamic-overlap-height_hyvsj_1s8d9_181), .awsui_container_hyvsj_1s8d9_719:not(#\9):not(.awsui_disable-content-paddings_hyvsj_1s8d9_745).awsui_content-type-form_hyvsj_1s8d9_773:not(.awsui_has-notifications-content_hyvsj_1s8d9_175):not(.awsui_has-header_hyvsj_1s8d9_181):not(.awsui_has-dynamic-overlap-height_hyvsj_1s8d9_181) {
-    padding-top: var(--space-scaled-m-9q5ipc, 16px);
-  }
-  .awsui_container_hyvsj_1s8d9_719:not(#\9):not(.awsui_disable-content-paddings_hyvsj_1s8d9_745).awsui_has-header_hyvsj_1s8d9_181, .awsui_container_hyvsj_1s8d9_719:not(#\9):not(.awsui_disable-content-paddings_hyvsj_1s8d9_745).awsui_has-dynamic-overlap-height_hyvsj_1s8d9_181 {
-    padding-top: 0;
-  }
+section.awsui_mobile-toolbar_hyvsj_tfl2k_649 > .awsui_mobile-toolbar-nav_hyvsj_tfl2k_665:not(#\9) {
+  grid-column: 1;
+  margin-right: var(--space-m-sptmsg, 16px);
 }
-.awsui_container_hyvsj_1s8d9_719.awsui_content-type-cards_hyvsj_1s8d9_185:not(#\9), .awsui_container_hyvsj_1s8d9_719.awsui_content-type-table_hyvsj_1s8d9_186:not(#\9), .awsui_container_hyvsj_1s8d9_719.awsui_content-type-wizard_hyvsj_1s8d9_182:not(#\9) {
-  padding-top: 0;
+section.awsui_mobile-toolbar_hyvsj_tfl2k_649 > .awsui_mobile-toolbar-breadcrumbs_hyvsj_tfl2k_669:not(#\9) {
+  grid-column: 2;
+  background-color: var(--color-background-layout-main-iz43sl, #ffffff);
 }
-
-/* stylelint-disable selector-max-universal, selector-combinator-disallowed-list */
-.awsui_unfocusable_hyvsj_1s8d9_814:not(#\9),
-.awsui_unfocusable_hyvsj_1s8d9_814 *:not(#\9) {
-  visibility: hidden !important;
+section.awsui_mobile-toolbar_hyvsj_tfl2k_649 > .awsui_mobile-toolbar-tools_hyvsj_tfl2k_673:not(#\9) {
+  grid-column: 3;
+  margin-left: var(--space-m-sptmsg, 16px);
 }
 
-/* stylelint-enable selector-max-universal, selector-combinator-disallowed-list */
 /*
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_navigation-container_hyvsj_1s8d9_824:not(#\9) {
-  --awsui-navigation-width-rrnppm: 280px;
+.awsui_navigation-container_hyvsj_tfl2k_682:not(#\9) {
+  --awsui-navigation-width-en6003: 280px;
   display: flex;
   grid-column: 1;
-  grid-row: 1/span 5;
-  height: var(--awsui-content-height-rrnppm);
+  grid-row: 1/span 10;
+  height: var(--awsui-content-height-en6003);
   position: sticky;
-  top: var(--awsui-offset-top-rrnppm);
+  top: var(--awsui-offset-top-en6003);
   z-index: 830;
   /*
   The navigation and tools containers (that contain the toggle buttons)
@@ -869,12 +727,12 @@ when the navigation or tools drawers are open in responsive viewports.
   pointer-events: none;
 }
 @media (min-width: 2541px) {
-  .awsui_navigation-container_hyvsj_1s8d9_824:not(#\9) {
-    --awsui-navigation-width-rrnppm: 320px;
+  .awsui_navigation-container_hyvsj_tfl2k_682:not(#\9) {
+    --awsui-navigation-width-en6003: 320px;
   }
 }
 @media (max-width: 688px) {
-  .awsui_navigation-container_hyvsj_1s8d9_824:not(#\9) {
+  .awsui_navigation-container_hyvsj_tfl2k_682:not(#\9) {
     left: 0;
     position: fixed;
     z-index: 1001;
@@ -886,19 +744,19 @@ when the navigation or tools drawers are open in responsive viewports.
     relative to the body.
     */
   }
-  .awsui_navigation-container_hyvsj_1s8d9_824.awsui_disable-body-scroll_hyvsj_1s8d9_320:not(#\9) {
-    top: var(--awsui-header-height-rrnppm);
+  .awsui_navigation-container_hyvsj_tfl2k_682.awsui_disable-body-scroll_hyvsj_tfl2k_191:not(#\9) {
+    top: var(--awsui-header-height-en6003);
   }
 }
 
-nav.awsui_show-navigation_hyvsj_1s8d9_868:not(#\9) {
+nav.awsui_show-navigation_hyvsj_tfl2k_726:not(#\9) {
   padding: var(--space-scaled-s-gczsk7, 12px) var(--space-layout-toggle-padding-mgz0u7, 20px);
   /*
-  Apply the animation only in desktop viewports because the AppBar will
+  Apply the animation only in desktop viewports because the MobileToolbar will
   take control in responsive viewports.
   */
 }
-@keyframes awsui_showButtons_hyvsj_1s8d9_1 {
+@keyframes awsui_showButtons_hyvsj_tfl2k_1 {
   0% {
     opacity: 0;
   }
@@ -906,31 +764,31 @@ nav.awsui_show-navigation_hyvsj_1s8d9_868:not(#\9) {
     opacity: 1;
   }
 }
-nav.awsui_show-navigation_hyvsj_1s8d9_868.awsui_is-navigation-open_hyvsj_1s8d9_750:not(#\9) {
+nav.awsui_show-navigation_hyvsj_tfl2k_726.awsui_is-navigation-open_hyvsj_tfl2k_637:not(#\9) {
   display: none;
 }
 @media (min-width: 689px) {
-  nav.awsui_show-navigation_hyvsj_1s8d9_868:not(#\9):not(.awsui_is-navigation-open_hyvsj_1s8d9_750) {
+  nav.awsui_show-navigation_hyvsj_tfl2k_726:not(#\9):not(.awsui_is-navigation-open_hyvsj_tfl2k_637) {
     display: block;
   }
-  nav.awsui_show-navigation_hyvsj_1s8d9_868:not(#\9):not(.awsui_is-navigation-open_hyvsj_1s8d9_750).awsui_animating_hyvsj_1s8d9_890 {
-    animation: awsui_showButtons_hyvsj_1s8d9_1 var(--motion-duration-refresh-only-fast-n43vlu, 115ms);
+  nav.awsui_show-navigation_hyvsj_tfl2k_726:not(#\9):not(.awsui_is-navigation-open_hyvsj_tfl2k_637).awsui_animating_hyvsj_tfl2k_748 {
+    animation: awsui_showButtons_hyvsj_tfl2k_1 var(--motion-duration-refresh-only-fast-n43vlu, 115ms);
   }
 }
 @media (min-width: 689px) and (prefers-reduced-motion: reduce) {
-  nav.awsui_show-navigation_hyvsj_1s8d9_868:not(#\9):not(.awsui_is-navigation-open_hyvsj_1s8d9_750).awsui_animating_hyvsj_1s8d9_890 {
+  nav.awsui_show-navigation_hyvsj_tfl2k_726:not(#\9):not(.awsui_is-navigation-open_hyvsj_tfl2k_637).awsui_animating_hyvsj_tfl2k_748 {
     animation: none;
     transition: none;
   }
 }
 @media (min-width: 689px) {
-  .awsui-motion-disabled nav.awsui_show-navigation_hyvsj_1s8d9_868:not(#\9):not(.awsui_is-navigation-open_hyvsj_1s8d9_750).awsui_animating_hyvsj_1s8d9_890, .awsui-mode-entering nav.awsui_show-navigation_hyvsj_1s8d9_868:not(#\9):not(.awsui_is-navigation-open_hyvsj_1s8d9_750).awsui_animating_hyvsj_1s8d9_890 {
+  .awsui-motion-disabled nav.awsui_show-navigation_hyvsj_tfl2k_726:not(#\9):not(.awsui_is-navigation-open_hyvsj_tfl2k_637).awsui_animating_hyvsj_tfl2k_748, .awsui-mode-entering nav.awsui_show-navigation_hyvsj_tfl2k_726:not(#\9):not(.awsui_is-navigation-open_hyvsj_tfl2k_637).awsui_animating_hyvsj_tfl2k_748 {
     animation: none;
     transition: none;
   }
 }
 
-nav.awsui_navigation_hyvsj_1s8d9_824:not(#\9) {
+nav.awsui_navigation_hyvsj_tfl2k_682:not(#\9) {
   background-color: var(--color-background-container-content-em2lah, #ffffff);
   box-shadow: var(--shadow-panel-bf68qm, 0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1));
   bottom: 0;
@@ -947,43 +805,43 @@ nav.awsui_navigation_hyvsj_1s8d9_824:not(#\9) {
   prevent unwanted text wrapping.
   */
 }
-@keyframes awsui_openNavigation_hyvsj_1s8d9_1 {
+@keyframes awsui_openNavigation_hyvsj_tfl2k_1 {
   from {
     opacity: 0;
     width: calc(var(--space-layout-toggle-padding-mgz0u7, 20px) * 2 + var(--space-layout-toggle-diameter-e6hjiu, 40px));
   }
   to {
     opacity: 1;
-    width: var(--awsui-navigation-width-rrnppm);
+    width: var(--awsui-navigation-width-en6003);
   }
 }
-nav.awsui_navigation_hyvsj_1s8d9_824:not(#\9):not(.awsui_is-navigation-open_hyvsj_1s8d9_750) {
+nav.awsui_navigation_hyvsj_tfl2k_682:not(#\9):not(.awsui_is-navigation-open_hyvsj_tfl2k_637) {
   width: 0;
   display: none;
 }
-nav.awsui_navigation_hyvsj_1s8d9_824.awsui_is-navigation-open_hyvsj_1s8d9_750.awsui_animating_hyvsj_1s8d9_890:not(#\9) {
-  animation: awsui_openNavigation_hyvsj_1s8d9_1 var(--motion-duration-refresh-only-fast-n43vlu, 115ms);
+nav.awsui_navigation_hyvsj_tfl2k_682.awsui_is-navigation-open_hyvsj_tfl2k_637.awsui_animating_hyvsj_tfl2k_748:not(#\9) {
+  animation: awsui_openNavigation_hyvsj_tfl2k_1 var(--motion-duration-refresh-only-fast-n43vlu, 115ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  nav.awsui_navigation_hyvsj_1s8d9_824.awsui_is-navigation-open_hyvsj_1s8d9_750.awsui_animating_hyvsj_1s8d9_890:not(#\9) {
+  nav.awsui_navigation_hyvsj_tfl2k_682.awsui_is-navigation-open_hyvsj_tfl2k_637.awsui_animating_hyvsj_tfl2k_748:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled nav.awsui_navigation_hyvsj_1s8d9_824.awsui_is-navigation-open_hyvsj_1s8d9_750.awsui_animating_hyvsj_1s8d9_890:not(#\9), .awsui-mode-entering nav.awsui_navigation_hyvsj_1s8d9_824.awsui_is-navigation-open_hyvsj_1s8d9_750.awsui_animating_hyvsj_1s8d9_890:not(#\9) {
+.awsui-motion-disabled nav.awsui_navigation_hyvsj_tfl2k_682.awsui_is-navigation-open_hyvsj_tfl2k_637.awsui_animating_hyvsj_tfl2k_748:not(#\9), .awsui-mode-entering nav.awsui_navigation_hyvsj_tfl2k_682.awsui_is-navigation-open_hyvsj_tfl2k_637.awsui_animating_hyvsj_tfl2k_748:not(#\9) {
   animation: none;
   transition: none;
 }
-nav.awsui_navigation_hyvsj_1s8d9_824 > .awsui_animated-content_hyvsj_1s8d9_951:not(#\9) {
-  width: var(--awsui-navigation-width-rrnppm);
+nav.awsui_navigation_hyvsj_tfl2k_682 > .awsui_animated-content_hyvsj_tfl2k_809:not(#\9) {
+  width: var(--awsui-navigation-width-en6003);
 }
 @media (max-width: 688px) {
-  nav.awsui_navigation_hyvsj_1s8d9_824:not(#\9) {
-    --awsui-navigation-width-rrnppm: 100vw;
+  nav.awsui_navigation_hyvsj_tfl2k_682:not(#\9) {
+    --awsui-navigation-width-en6003: 100vw;
   }
 }
 
-.awsui_hide-navigation_hyvsj_1s8d9_960:not(#\9) {
+.awsui_hide-navigation_hyvsj_tfl2k_818:not(#\9) {
   position: absolute;
   right: var(--space-m-sptmsg, 16px);
   top: var(--size-vertical-panel-icon-offset-47mfcv, 15px);
@@ -993,50 +851,16 @@ nav.awsui_navigation_hyvsj_1s8d9_824 > .awsui_animated-content_hyvsj_1s8d9_951:n
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_notifications_hyvsj_1s8d9_227:not(#\9) {
-  grid-column: 3;
-  grid-row: 1;
-  z-index: 850;
+.awsui_notifications_hyvsj_tfl2k_828:not(#\9) {
   color: var(--color-text-body-default-01bwmw, #000716);
-  /*
-  In desktop viewports the notifications will always be the first
-  slot rendered in the center column. The padding should create
-  a centered vertical alignment with the circular buttons for the
-  navigation and tools drawers.
-  */
-  /*
-  In mobile viewports the notifications should never be sticky even
-  if the property is set. Padding is added to give adequate
-  vertical space from the sticky AppBar the subsequent adjacent sibling.
-  */
+  grid-area: notifications;
+  z-index: 850;
 }
 @media (min-width: 689px) {
-  .awsui_notifications_hyvsj_1s8d9_227:not(#\9) {
-    margin: var(--space-xs-inub5w, 8px) 0;
-    /*
-    var(--space-xs-inub5w, 8px) token needs to align with the $offsetTopWithNotifications
-    calculation in the layout CSS.
-    */
-  }
-  .awsui_notifications_hyvsj_1s8d9_227.awsui_sticky-notifications_hyvsj_1s8d9_240:not(#\9) {
+  .awsui_notifications_hyvsj_tfl2k_828.awsui_sticky-notifications_hyvsj_tfl2k_834:not(#\9) {
+    --awsui-flashbar-sticky-bottom-margin-en6003: var(--space-xxl-eiq7g3, 32px);
     position: sticky;
-    top: calc(var(--awsui-offset-top-rrnppm) + var(--space-xs-inub5w, 8px));
-    --awsui-flashbar-sticky-bottom-margin-rrnppm: var(--space-xxl-eiq7g3, 32px);
-  }
-  .awsui_notifications_hyvsj_1s8d9_227:not(#\9):not(.awsui_has-notifications-content_hyvsj_1s8d9_175) {
-    margin: 0;
-  }
-}
-@media (max-width: 688px) {
-  .awsui_notifications_hyvsj_1s8d9_227:not(#\9) {
-    grid-row: 2;
-    margin: var(--space-scaled-s-gczsk7, 12px) 0;
-  }
-  .awsui_notifications_hyvsj_1s8d9_227.awsui_sticky-notifications_hyvsj_1s8d9_240:not(#\9) {
-    position: static;
-  }
-  .awsui_notifications_hyvsj_1s8d9_227:not(#\9):not(.awsui_has-notifications-content_hyvsj_1s8d9_175) {
-    margin: 0;
+    top: calc(var(--awsui-offset-top-en6003) + var(--space-xs-inub5w, 8px));
   }
 }
 
@@ -1050,16 +874,16 @@ as the content area. This row is defined as 1 fractional unit which will
 consume the remaining vertical space in the grid after the notifications
 and breadcrumbs.
 */
-section.awsui_split-panel-bottom_hyvsj_1s8d9_1027:not(#\9) {
+section.awsui_split-panel-bottom_hyvsj_tfl2k_851:not(#\9) {
   /*
   The align self property will position the split panel at the bottom of the grid row.
   This could be off the viewport if the content area has enough content to be scrollable.
   */
   align-self: end;
-  bottom: var(--awsui-footer-height-rrnppm);
+  bottom: var(--awsui-footer-height-en6003);
   display: none;
   grid-column: 1/6;
-  grid-row: 5;
+  grid-row: 10;
   height: auto;
   /*
   The position sticky will work in conjunction with the align self: end; property.
@@ -1085,47 +909,47 @@ section.awsui_split-panel-bottom_hyvsj_1s8d9_1027:not(#\9) {
   apply the animation to the height property.
   */
 }
-@keyframes awsui_openSplitPanelBottom_hyvsj_1s8d9_1 {
+@keyframes awsui_openSplitPanelBottom_hyvsj_tfl2k_1 {
   from {
-    height: var(--awsui-split-panel-reported-header-size-rrnppm, 0);
+    height: var(--awsui-split-panel-reported-header-size-en6003, 0);
   }
   to {
-    height: var(--awsui-split-panel-reported-size-rrnppm);
+    height: var(--awsui-split-panel-reported-size-en6003);
   }
 }
-section.awsui_split-panel-bottom_hyvsj_1s8d9_1027.awsui_disable-body-scroll_hyvsj_1s8d9_320:not(#\9) {
+section.awsui_split-panel-bottom_hyvsj_tfl2k_851.awsui_disable-body-scroll_hyvsj_tfl2k_191:not(#\9) {
   bottom: 0;
 }
-section.awsui_split-panel-bottom_hyvsj_1s8d9_1027.awsui_is-navigation-open_hyvsj_1s8d9_750.awsui_position-bottom_hyvsj_1s8d9_1073:not(#\9) {
+section.awsui_split-panel-bottom_hyvsj_tfl2k_851.awsui_is-navigation-open_hyvsj_tfl2k_637.awsui_position-bottom_hyvsj_tfl2k_897:not(#\9) {
   grid-column-start: 2;
 }
-section.awsui_split-panel-bottom_hyvsj_1s8d9_1027.awsui_has-open-drawer_hyvsj_1s8d9_286.awsui_position-bottom_hyvsj_1s8d9_1073:not(#\9) {
+section.awsui_split-panel-bottom_hyvsj_tfl2k_851.awsui_has-open-drawer_hyvsj_tfl2k_157.awsui_position-bottom_hyvsj_tfl2k_897:not(#\9) {
   grid-column-end: 5;
 }
-section.awsui_split-panel-bottom_hyvsj_1s8d9_1027.awsui_position-bottom_hyvsj_1s8d9_1073:not(#\9) {
+section.awsui_split-panel-bottom_hyvsj_tfl2k_851.awsui_position-bottom_hyvsj_tfl2k_897:not(#\9) {
   display: block;
 }
-section.awsui_split-panel-bottom_hyvsj_1s8d9_1027:not(#\9):not(.awsui_is-split-panel-open_hyvsj_1s8d9_753).awsui_position-bottom_hyvsj_1s8d9_1073 {
+section.awsui_split-panel-bottom_hyvsj_tfl2k_851:not(#\9):not(.awsui_is-split-panel-open_hyvsj_tfl2k_640).awsui_position-bottom_hyvsj_tfl2k_897 {
   box-shadow: rgba(0, 7, 22, 0.1) 0px -32px 32px -24px;
 }
-section.awsui_split-panel-bottom_hyvsj_1s8d9_1027.awsui_is-split-panel-open_hyvsj_1s8d9_753.awsui_position-bottom_hyvsj_1s8d9_1073:not(#\9) {
+section.awsui_split-panel-bottom_hyvsj_tfl2k_851.awsui_is-split-panel-open_hyvsj_tfl2k_640.awsui_position-bottom_hyvsj_tfl2k_897:not(#\9) {
   box-shadow: var(--shadow-split-bottom-srmtki, 0px -36px 36px -36px rgba(0, 7, 22, 0.1));
 }
-section.awsui_split-panel-bottom_hyvsj_1s8d9_1027.awsui_is-split-panel-open_hyvsj_1s8d9_753.awsui_position-bottom_hyvsj_1s8d9_1073.awsui_animating_hyvsj_1s8d9_890:not(#\9) {
-  animation: awsui_openSplitPanelBottom_hyvsj_1s8d9_1 var(--motion-duration-refresh-only-fast-n43vlu, 115ms);
+section.awsui_split-panel-bottom_hyvsj_tfl2k_851.awsui_is-split-panel-open_hyvsj_tfl2k_640.awsui_position-bottom_hyvsj_tfl2k_897.awsui_animating_hyvsj_tfl2k_748:not(#\9) {
+  animation: awsui_openSplitPanelBottom_hyvsj_tfl2k_1 var(--motion-duration-refresh-only-fast-n43vlu, 115ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  section.awsui_split-panel-bottom_hyvsj_1s8d9_1027.awsui_is-split-panel-open_hyvsj_1s8d9_753.awsui_position-bottom_hyvsj_1s8d9_1073.awsui_animating_hyvsj_1s8d9_890:not(#\9) {
+  section.awsui_split-panel-bottom_hyvsj_tfl2k_851.awsui_is-split-panel-open_hyvsj_tfl2k_640.awsui_position-bottom_hyvsj_tfl2k_897.awsui_animating_hyvsj_tfl2k_748:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled section.awsui_split-panel-bottom_hyvsj_1s8d9_1027.awsui_is-split-panel-open_hyvsj_1s8d9_753.awsui_position-bottom_hyvsj_1s8d9_1073.awsui_animating_hyvsj_1s8d9_890:not(#\9), .awsui-mode-entering section.awsui_split-panel-bottom_hyvsj_1s8d9_1027.awsui_is-split-panel-open_hyvsj_1s8d9_753.awsui_position-bottom_hyvsj_1s8d9_1073.awsui_animating_hyvsj_1s8d9_890:not(#\9) {
+.awsui-motion-disabled section.awsui_split-panel-bottom_hyvsj_tfl2k_851.awsui_is-split-panel-open_hyvsj_tfl2k_640.awsui_position-bottom_hyvsj_tfl2k_897.awsui_animating_hyvsj_tfl2k_748:not(#\9), .awsui-mode-entering section.awsui_split-panel-bottom_hyvsj_tfl2k_851.awsui_is-split-panel-open_hyvsj_tfl2k_640.awsui_position-bottom_hyvsj_tfl2k_897.awsui_animating_hyvsj_tfl2k_748:not(#\9) {
   animation: none;
   transition: none;
 }
 
-section.awsui_split-panel-side_hyvsj_1s8d9_1102:not(#\9) {
+section.awsui_split-panel-side_hyvsj_tfl2k_926:not(#\9) {
   height: 100%;
   overflow-x: hidden;
   pointer-events: auto;
@@ -1140,41 +964,41 @@ section.awsui_split-panel-side_hyvsj_1s8d9_1102:not(#\9) {
   prevent unwanted text wrapping.
   */
 }
-@keyframes awsui_openSplitPanelSide_hyvsj_1s8d9_1 {
+@keyframes awsui_openSplitPanelSide_hyvsj_tfl2k_1 {
   from {
     opacity: 0;
-    width: var(--awsui-split-panel-min-width-rrnppm, 280px);
+    width: var(--awsui-split-panel-min-width-en6003, 280px);
   }
   to {
     opacity: 1;
-    width: var(--awsui-split-panel-reported-size-rrnppm);
+    width: var(--awsui-split-panel-reported-size-en6003);
   }
 }
-section.awsui_split-panel-side_hyvsj_1s8d9_1102:not(#\9):not(.awsui_is-split-panel-open_hyvsj_1s8d9_753), section.awsui_split-panel-side_hyvsj_1s8d9_1102.awsui_position-bottom_hyvsj_1s8d9_1073:not(#\9) {
+section.awsui_split-panel-side_hyvsj_tfl2k_926:not(#\9):not(.awsui_is-split-panel-open_hyvsj_tfl2k_640), section.awsui_split-panel-side_hyvsj_tfl2k_926.awsui_position-bottom_hyvsj_tfl2k_897:not(#\9) {
   width: 0;
 }
-section.awsui_split-panel-side_hyvsj_1s8d9_1102.awsui_is-split-panel-open_hyvsj_1s8d9_753.awsui_position-side_hyvsj_1s8d9_1130:not(#\9) {
+section.awsui_split-panel-side_hyvsj_tfl2k_926.awsui_is-split-panel-open_hyvsj_tfl2k_640.awsui_position-side_hyvsj_tfl2k_954:not(#\9) {
   box-shadow: var(--shadow-panel-bf68qm, 0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1));
-  max-width: var(--awsui-split-panel-max-width-rrnppm, 280px);
-  min-width: var(--awsui-split-panel-min-width-rrnppm, 280px);
+  max-width: var(--awsui-split-panel-max-width-en6003, 280px);
+  min-width: var(--awsui-split-panel-min-width-en6003, 280px);
 }
-section.awsui_split-panel-side_hyvsj_1s8d9_1102.awsui_is-split-panel-open_hyvsj_1s8d9_753.awsui_position-side_hyvsj_1s8d9_1130.awsui_animating_hyvsj_1s8d9_890:not(#\9) {
-  animation: awsui_openSplitPanelSide_hyvsj_1s8d9_1 var(--motion-duration-refresh-only-fast-n43vlu, 115ms);
+section.awsui_split-panel-side_hyvsj_tfl2k_926.awsui_is-split-panel-open_hyvsj_tfl2k_640.awsui_position-side_hyvsj_tfl2k_954.awsui_animating_hyvsj_tfl2k_748:not(#\9) {
+  animation: awsui_openSplitPanelSide_hyvsj_tfl2k_1 var(--motion-duration-refresh-only-fast-n43vlu, 115ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  section.awsui_split-panel-side_hyvsj_1s8d9_1102.awsui_is-split-panel-open_hyvsj_1s8d9_753.awsui_position-side_hyvsj_1s8d9_1130.awsui_animating_hyvsj_1s8d9_890:not(#\9) {
+  section.awsui_split-panel-side_hyvsj_tfl2k_926.awsui_is-split-panel-open_hyvsj_tfl2k_640.awsui_position-side_hyvsj_tfl2k_954.awsui_animating_hyvsj_tfl2k_748:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled section.awsui_split-panel-side_hyvsj_1s8d9_1102.awsui_is-split-panel-open_hyvsj_1s8d9_753.awsui_position-side_hyvsj_1s8d9_1130.awsui_animating_hyvsj_1s8d9_890:not(#\9), .awsui-mode-entering section.awsui_split-panel-side_hyvsj_1s8d9_1102.awsui_is-split-panel-open_hyvsj_1s8d9_753.awsui_position-side_hyvsj_1s8d9_1130.awsui_animating_hyvsj_1s8d9_890:not(#\9) {
+.awsui-motion-disabled section.awsui_split-panel-side_hyvsj_tfl2k_926.awsui_is-split-panel-open_hyvsj_tfl2k_640.awsui_position-side_hyvsj_tfl2k_954.awsui_animating_hyvsj_tfl2k_748:not(#\9), .awsui-mode-entering section.awsui_split-panel-side_hyvsj_tfl2k_926.awsui_is-split-panel-open_hyvsj_tfl2k_640.awsui_position-side_hyvsj_tfl2k_954.awsui_animating_hyvsj_tfl2k_748:not(#\9) {
   animation: none;
   transition: none;
 }
-section.awsui_split-panel-side_hyvsj_1s8d9_1102 > .awsui_animated-content_hyvsj_1s8d9_951:not(#\9) {
+section.awsui_split-panel-side_hyvsj_tfl2k_926 > .awsui_animated-content_hyvsj_tfl2k_809:not(#\9) {
   height: 100%;
   max-width: inherit;
-  width: var(--awsui-split-panel-reported-size-rrnppm);
+  width: var(--awsui-split-panel-reported-size-en6003);
 }
 
 /*
@@ -1190,30 +1014,30 @@ content width has a default value that can be set directly with the minContentWi
 property. The content gap right is computed in the Layout styles based on the
 viewport size and state of the Tools drawer.
 */
-.awsui_tools-container_hyvsj_1s8d9_1167:not(#\9) {
+.awsui_tools-container_hyvsj_tfl2k_991:not(#\9) {
   /* stylelint-disable scss/operator-no-newline-after */
-  --awsui-tools-max-width-rrnppm: calc(var(--awsui-layout-width-rrnppm) - var(--awsui-main-offset-left-rrnppm) - var(--awsui-default-min-content-width-rrnppm) - var(--awsui-content-gap-right-rrnppm));
+  --awsui-tools-max-width-en6003: calc(var(--awsui-layout-width-en6003) - var(--awsui-main-offset-left-en6003) - var(--awsui-default-min-content-width-en6003) - var(--awsui-content-gap-right-en6003));
   /* stylelint-enable scss/operator-no-newline-after */
-  --awsui-tools-width-rrnppm: 290px;
+  --awsui-tools-width-en6003: 290px;
   display: flex;
   grid-column: 5;
-  grid-row: 1/span 5;
-  height: var(--awsui-content-height-rrnppm);
-  max-width: var(--awsui-tools-max-width-rrnppm);
+  grid-row: 1/span 10;
+  height: var(--awsui-content-height-en6003);
+  max-width: var(--awsui-tools-max-width-en6003);
   position: sticky;
-  top: var(--awsui-offset-top-rrnppm);
+  top: var(--awsui-offset-top-en6003);
   z-index: 830;
   pointer-events: none;
 }
 @media (min-width: 2541px) {
-  .awsui_tools-container_hyvsj_1s8d9_1167:not(#\9) {
-    --awsui-tools-width-rrnppm: 360px;
+  .awsui_tools-container_hyvsj_tfl2k_991:not(#\9) {
+    --awsui-tools-width-en6003: 360px;
   }
 }
 @media (max-width: 688px) {
-  .awsui_tools-container_hyvsj_1s8d9_1167:not(#\9) {
-    --awsui-tools-max-width-rrnppm: none;
-    --awsui-tools-width-rrnppm: auto;
+  .awsui_tools-container_hyvsj_tfl2k_991:not(#\9) {
+    --awsui-tools-max-width-en6003: none;
+    --awsui-tools-width-en6003: auto;
     position: fixed;
     right: 0;
     z-index: 1001;
@@ -1225,12 +1049,12 @@ viewport size and state of the Tools drawer.
     relative to the body.
     */
   }
-  .awsui_tools-container_hyvsj_1s8d9_1167.awsui_disable-body-scroll_hyvsj_1s8d9_320:not(#\9) {
-    top: var(--awsui-header-height-rrnppm);
+  .awsui_tools-container_hyvsj_tfl2k_991.awsui_disable-body-scroll_hyvsj_tfl2k_191:not(#\9) {
+    top: var(--awsui-header-height-en6003);
   }
 }
 
-.awsui_tools_hyvsj_1s8d9_1167:not(#\9) {
+.awsui_tools_hyvsj_tfl2k_991:not(#\9) {
   background-color: var(--color-background-container-content-em2lah, #ffffff);
   box-shadow: var(--shadow-panel-bf68qm, 0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1));
   flex-shrink: 0;
@@ -1238,9 +1062,9 @@ viewport size and state of the Tools drawer.
   overflow-y: auto;
   overflow-x: hidden;
   overscroll-behavior-y: contain;
+  pointer-events: auto;
   position: relative;
   word-wrap: break-word;
-  pointer-events: auto;
   /*
   A non-semantic node is added with a fixed width equal to the final Tools
   width. This will create the visual appearance of horizontal movement and
@@ -1253,48 +1077,48 @@ viewport size and state of the Tools drawer.
   in the side position.
   */
 }
-@keyframes awsui_openTools_hyvsj_1s8d9_1 {
+@keyframes awsui_openTools_hyvsj_tfl2k_1 {
   from {
-    opacity: var(--awsui-tools-animation-starting-opacity-rrnppm, 0);
+    opacity: var(--awsui-tools-animation-starting-opacity-en6003, 0);
     width: calc(var(--space-layout-toggle-padding-mgz0u7, 20px) * 2 + var(--space-layout-toggle-diameter-e6hjiu, 40px));
   }
   to {
     opacity: 1;
-    width: var(--awsui-tools-width-rrnppm);
+    width: var(--awsui-tools-width-en6003);
   }
 }
-.awsui_tools_hyvsj_1s8d9_1167:not(#\9):not(.awsui_is-tools-open_hyvsj_1s8d9_753) {
+.awsui_tools_hyvsj_tfl2k_991:not(#\9):not(.awsui_is-tools-open_hyvsj_tfl2k_640) {
   width: 0;
   display: none;
 }
-.awsui_tools_hyvsj_1s8d9_1167.awsui_is-tools-open_hyvsj_1s8d9_753.awsui_animating_hyvsj_1s8d9_890:not(#\9) {
-  animation: awsui_openTools_hyvsj_1s8d9_1 var(--motion-duration-refresh-only-fast-n43vlu, 115ms);
+.awsui_tools_hyvsj_tfl2k_991.awsui_is-tools-open_hyvsj_tfl2k_640.awsui_animating_hyvsj_tfl2k_748:not(#\9) {
+  animation: awsui_openTools_hyvsj_tfl2k_1 var(--motion-duration-refresh-only-fast-n43vlu, 115ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_tools_hyvsj_1s8d9_1167.awsui_is-tools-open_hyvsj_1s8d9_753.awsui_animating_hyvsj_1s8d9_890:not(#\9) {
+  .awsui_tools_hyvsj_tfl2k_991.awsui_is-tools-open_hyvsj_tfl2k_640.awsui_animating_hyvsj_tfl2k_748:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_tools_hyvsj_1s8d9_1167.awsui_is-tools-open_hyvsj_1s8d9_753.awsui_animating_hyvsj_1s8d9_890:not(#\9), .awsui-mode-entering .awsui_tools_hyvsj_1s8d9_1167.awsui_is-tools-open_hyvsj_1s8d9_753.awsui_animating_hyvsj_1s8d9_890:not(#\9) {
+.awsui-motion-disabled .awsui_tools_hyvsj_tfl2k_991.awsui_is-tools-open_hyvsj_tfl2k_640.awsui_animating_hyvsj_tfl2k_748:not(#\9), .awsui-mode-entering .awsui_tools_hyvsj_tfl2k_991.awsui_is-tools-open_hyvsj_tfl2k_640.awsui_animating_hyvsj_tfl2k_748:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_tools_hyvsj_1s8d9_1167 > .awsui_animated-content_hyvsj_1s8d9_951:not(#\9) {
-  width: var(--awsui-tools-width-rrnppm);
+.awsui_tools_hyvsj_tfl2k_991 > .awsui_animated-content_hyvsj_tfl2k_809:not(#\9) {
+  width: var(--awsui-tools-width-en6003);
 }
 @media (min-width: 689px) {
-  .awsui_tools_hyvsj_1s8d9_1167.awsui_is-tools-open_hyvsj_1s8d9_753.awsui_has-tools-form-persistence_hyvsj_1s8d9_1261:not(#\9) {
+  .awsui_tools_hyvsj_tfl2k_991.awsui_is-tools-open_hyvsj_tfl2k_640.awsui_has-tools-form-persistence_hyvsj_tfl2k_1085:not(#\9) {
     border-right: var(--border-divider-section-width-g0ay3c, 2px) solid var(--color-border-divider-default-4spq70, #e9ebed);
   }
 }
 @media (max-width: 688px) {
-  .awsui_tools_hyvsj_1s8d9_1167:not(#\9) {
-    --awsui-tools-width-rrnppm: 100vw;
+  .awsui_tools_hyvsj_tfl2k_991:not(#\9) {
+    --awsui-tools-width-en6003: 100vw;
   }
 }
 
-.awsui_hide-tools_hyvsj_1s8d9_1271:not(#\9) {
+.awsui_hide-tools_hyvsj_tfl2k_1095:not(#\9) {
   position: absolute;
   right: var(--space-m-sptmsg, 16px);
   top: var(--size-vertical-panel-icon-offset-47mfcv, 15px);
@@ -1306,7 +1130,7 @@ Warning! If these design tokens for padding change it will adversely impact
 the calculation used to determine the Split Panel maximum width in the
 handleSplitPanelMaxWidth function in the context.
 */
-.awsui_show-tools_hyvsj_1s8d9_1283:not(#\9) {
+.awsui_show-tools_hyvsj_tfl2k_1107:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -1346,11 +1170,11 @@ handleSplitPanelMaxWidth function in the context.
   box-sizing: border-box;
   padding: var(--space-scaled-s-gczsk7, 12px) var(--space-layout-toggle-padding-mgz0u7, 20px);
   /*
-  Apply the animation only in desktop viewports because the AppBar will
+  Apply the animation only in desktop viewports because the MobileToolbar will 
   take control in responsive viewports.
   */
 }
-@keyframes awsui_showButtons_hyvsj_1s8d9_1 {
+@keyframes awsui_showButtons_hyvsj_tfl2k_1 {
   0% {
     opacity: 0;
   }
@@ -1358,33 +1182,33 @@ handleSplitPanelMaxWidth function in the context.
     opacity: 1;
   }
 }
-.awsui_show-tools_hyvsj_1s8d9_1283:not(#\9):not(.awsui_has-tools-form_hyvsj_1s8d9_1261) {
+.awsui_show-tools_hyvsj_tfl2k_1107:not(#\9):not(.awsui_has-tools-form_hyvsj_tfl2k_1085) {
   display: none;
 }
 @media (min-width: 689px) {
-  .awsui_show-tools_hyvsj_1s8d9_1283.awsui_has-tools-form_hyvsj_1s8d9_1261:not(#\9) {
+  .awsui_show-tools_hyvsj_tfl2k_1107.awsui_has-tools-form_hyvsj_tfl2k_1085:not(#\9) {
     display: flex;
     flex-direction: column;
     gap: var(--space-xs-inub5w, 8px);
   }
-  .awsui_show-tools_hyvsj_1s8d9_1283.awsui_has-tools-form_hyvsj_1s8d9_1261.awsui_animating_hyvsj_1s8d9_890:not(#\9) {
-    animation: awsui_showButtons_hyvsj_1s8d9_1 var(--motion-duration-refresh-only-fast-n43vlu, 115ms);
+  .awsui_show-tools_hyvsj_tfl2k_1107.awsui_has-tools-form_hyvsj_tfl2k_1085.awsui_animating_hyvsj_tfl2k_748:not(#\9) {
+    animation: awsui_showButtons_hyvsj_tfl2k_1 var(--motion-duration-refresh-only-fast-n43vlu, 115ms);
   }
 }
 @media (min-width: 689px) and (prefers-reduced-motion: reduce) {
-  .awsui_show-tools_hyvsj_1s8d9_1283.awsui_has-tools-form_hyvsj_1s8d9_1261.awsui_animating_hyvsj_1s8d9_890:not(#\9) {
+  .awsui_show-tools_hyvsj_tfl2k_1107.awsui_has-tools-form_hyvsj_tfl2k_1085.awsui_animating_hyvsj_tfl2k_748:not(#\9) {
     animation: none;
     transition: none;
   }
 }
 @media (min-width: 689px) {
-  .awsui-motion-disabled .awsui_show-tools_hyvsj_1s8d9_1283.awsui_has-tools-form_hyvsj_1s8d9_1261.awsui_animating_hyvsj_1s8d9_890:not(#\9), .awsui-mode-entering .awsui_show-tools_hyvsj_1s8d9_1283.awsui_has-tools-form_hyvsj_1s8d9_1261.awsui_animating_hyvsj_1s8d9_890:not(#\9) {
+  .awsui-motion-disabled .awsui_show-tools_hyvsj_tfl2k_1107.awsui_has-tools-form_hyvsj_tfl2k_1085.awsui_animating_hyvsj_tfl2k_748:not(#\9), .awsui-mode-entering .awsui_show-tools_hyvsj_tfl2k_1107.awsui_has-tools-form_hyvsj_tfl2k_1085.awsui_animating_hyvsj_tfl2k_748:not(#\9) {
     animation: none;
     transition: none;
   }
 }
 @media (min-width: 689px) {
-  .awsui_show-tools_hyvsj_1s8d9_1283.awsui_has-tools-form-persistence_hyvsj_1s8d9_1261:not(#\9) {
+  .awsui_show-tools_hyvsj_tfl2k_1107.awsui_has-tools-form-persistence_hyvsj_tfl2k_1085:not(#\9) {
     background-color: var(--color-background-container-content-em2lah, #ffffff);
     z-index: 1;
   }
@@ -1399,7 +1223,7 @@ Warning! If these design tokens for width change it will adversely impact
 the calculation used to determine the Split Panel maximum width in the 
 handleSplitPanelMaxWidth function in the context.
 */
-.awsui_trigger_hyvsj_1s8d9_1350:not(#\9) {
+.awsui_trigger_hyvsj_tfl2k_1174:not(#\9) {
   background: var(--color-background-layout-toggle-default-33dtxe, #192534);
   border: none;
   border-radius: 50%;
@@ -1411,14 +1235,14 @@ handleSplitPanelMaxWidth function in the context.
   pointer-events: auto;
   width: var(--space-layout-toggle-diameter-e6hjiu, 40px);
 }
-body[data-awsui-focus-visible=true] .awsui_trigger_hyvsj_1s8d9_1350:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_trigger_hyvsj_tfl2k_1174:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_trigger_hyvsj_1s8d9_1350:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_trigger_hyvsj_tfl2k_1174:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(3px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_trigger_hyvsj_1s8d9_1350:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_trigger_hyvsj_tfl2k_1174:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -1429,23 +1253,23 @@ body[data-awsui-focus-visible=true] .awsui_trigger_hyvsj_1s8d9_1350:not(#\9):foc
   border-radius: var(--border-radius-control-default-focus-ring-egwir5, 4px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-nwfxo7, #0972d3);
 }
-.awsui_trigger_hyvsj_1s8d9_1350:not(#\9):focus {
+.awsui_trigger_hyvsj_tfl2k_1174:not(#\9):focus {
   outline: none;
 }
-.awsui_trigger_hyvsj_1s8d9_1350:not(#\9):hover {
+.awsui_trigger_hyvsj_tfl2k_1174:not(#\9):hover {
   background: var(--color-background-layout-toggle-hover-0izolq, #354150);
 }
-.awsui_trigger_hyvsj_1s8d9_1350:not(#\9):active {
+.awsui_trigger_hyvsj_tfl2k_1174:not(#\9):active {
   background: var(--color-background-layout-toggle-active-hs5w7a, #354150);
 }
-.awsui_trigger_hyvsj_1s8d9_1350.awsui_selected_hyvsj_1s8d9_1389:not(#\9) {
+.awsui_trigger_hyvsj_tfl2k_1174.awsui_selected_hyvsj_tfl2k_1213:not(#\9) {
   background: var(--color-background-layout-toggle-selected-default-n9d2nz, #0972d3);
   color: var(--color-text-layout-toggle-selected-u0y67g, #ffffff);
 }
-.awsui_trigger_hyvsj_1s8d9_1350.awsui_selected_hyvsj_1s8d9_1389:not(#\9):hover {
+.awsui_trigger_hyvsj_tfl2k_1174.awsui_selected_hyvsj_tfl2k_1213:not(#\9):hover {
   background: var(--color-background-layout-toggle-selected-hover-uce2v9, #065299);
 }
-.awsui_trigger_hyvsj_1s8d9_1350.awsui_selected_hyvsj_1s8d9_1389:not(#\9):active {
+.awsui_trigger_hyvsj_tfl2k_1174.awsui_selected_hyvsj_tfl2k_1213:not(#\9):active {
   background: var(--color-background-layout-toggle-selected-active-y9z89z, #0972d3);
 }