@clayui/css 3.136.0 → 3.138.0

package/lib/css/atlas.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /**
- * Clay 3.136.0
+ * Clay 3.138.0
  *
  * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
  * SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
@@ -5547,6 +5547,12 @@ input[type=button].btn-block {
   border-radius: 5000px;
   box-shadow: 0 0 0 1px #e7e7ed;
 }
+.sticker-xs {
+  font-size: 0.5rem;
+  height: 1rem;
+  line-height: 1rem;
+  width: 1rem;
+}
 .sticker-sm {
   font-size: 0.75rem;
   height: 1.5rem;
@@ -10745,6 +10751,26 @@ label.custom-control-label {
     min-width: 1.5rem;
   }
 }
+@media (max-width: 575.98px) {
+  .date-picker .input-group-text {
+    font-size: inherit;
+    height: 2rem;
+    min-width: 1.5rem;
+  }
+}
+@media (max-width: 575.98px) {
+  .date-picker .clay-time .form-control {
+    border-radius: 0.25rem;
+    font-size: 0.875rem;
+    height: 2rem;
+    line-height: 1.5;
+    min-height: 2rem;
+    padding-bottom: 0.25rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    padding-top: 0.25rem;
+  }
+}
 @media (max-width: 575.98px) {
   .date-picker .clay-time .form-control {
     border-radius: 0.25rem;
@@ -10776,6 +10802,14 @@ label.custom-control-label {
     max-width: 264px;
   }
 }
+@media (max-width: 575.98px) {
+  .date-picker-dropdown-menu {
+    font-size: 0.75rem;
+    margin: 0;
+    max-height: 255px;
+    max-width: 264px;
+  }
+}
 
 .date-picker-nav {
   display: flex;
@@ -10834,6 +10868,15 @@ label.custom-control-label {
     min-width: 1.5rem;
   }
 }
+@media (max-width: 575.98px) {
+  .date-picker-nav .nav-btn-monospaced {
+    font-size: 0.75rem;
+    height: 1.5rem;
+    max-height: 1.5rem;
+    max-width: 1.5rem;
+    min-width: 1.5rem;
+  }
+}
 .date-picker-nav select.form-control {
   background-color: transparent;
   border-color: transparent;
@@ -10851,6 +10894,12 @@ label.custom-control-label {
     height: 1.5rem;
   }
 }
+@media (max-width: 575.98px) {
+  .date-picker-nav select.form-control {
+    font-size: 0.75rem;
+    height: 1.5rem;
+  }
+}
 .date-picker-nav select.form-control:hover, .date-picker-nav select.form-control.hover {
   background-color: #f1f2f5;
   color: #272833;
@@ -10881,6 +10930,12 @@ label.custom-control-label {
     height: 1.5rem;
   }
 }
+@media (max-width: 575.98px) {
+  .date-picker-nav .form-control-select {
+    font-size: 0.75rem;
+    height: 1.5rem;
+  }
+}
 .date-picker-nav .form-control-select:hover, .date-picker-nav .form-control-select.hover {
   background-color: #f1f2f5;
   color: #272833;
@@ -10929,6 +10984,14 @@ label.custom-control-label {
     padding-top: 0.5rem;
   }
 }
+@media (max-width: 575.98px) {
+  .date-picker-calendar-header {
+    padding-bottom: 0.25rem;
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+    padding-top: 0.5rem;
+  }
+}
 
 .date-picker-calendar-body {
   padding-left: 0.5rem;
@@ -10942,6 +11005,13 @@ label.custom-control-label {
     padding-bottom: 0.25rem;
   }
 }
+@media (max-width: 575.98px) {
+  .date-picker-calendar-body {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+    padding-bottom: 0.25rem;
+  }
+}
 
 .date-picker-calendar-footer {
   border-color: #cdced9;
@@ -10959,6 +11029,13 @@ label.custom-control-label {
     padding-top: 0.4375rem;
   }
 }
+@media (max-width: 575.98px) {
+  .date-picker-calendar-footer {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+    padding-top: 0.4375rem;
+  }
+}
 
 .date-picker-calendar-item {
   align-items: center;
@@ -10994,6 +11071,12 @@ label.custom-control-label {
   transition: none;
 }
 
+@media (max-width: 575.98px) {
+  .date-picker-calendar-item {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+}
 .date-picker-calendar-item:disabled, .date-picker-calendar-item.disabled {
   cursor: not-allowed;
 }
@@ -11024,6 +11107,12 @@ label.custom-control-label {
     margin-top: 0.25rem;
   }
 }
+@media (max-width: 575.98px) {
+  .date-picker-row {
+    margin-bottom: 0.25rem;
+    margin-top: 0.25rem;
+  }
+}
 
 .date-picker-col {
   display: flex;
@@ -11060,6 +11149,11 @@ label.custom-control-label {
     margin-bottom: 0.25rem;
   }
 }
+@media (max-width: 575.98px) {
+  .date-picker-days-row {
+    margin-bottom: 0.25rem;
+  }
+}
 
 .date-picker-day {
   height: 1.3125rem;
@@ -11363,29 +11457,47 @@ label.custom-control-label {
   overflow-wrap: break-word;
   word-wrap: break-word;
 }
+.form-text.blockquote {
+  font-style: italic;
+  font-weight: 400;
+  margin-bottom: 0;
+  margin-top: 0.75rem;
+  padding-left: 0.75rem;
+  position: relative;
+}
+.form-text.blockquote::before {
+  background-color: #a7a9bc;
+  bottom: 0;
+  content: "";
+  display: block;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 0.125rem;
+}
 
 .was-validated .form-control:valid,
 .was-validated .form-control.is-valid {
   background-color: #edf9f0;
   border-color: #5aca75;
-  box-shadow: 0 0 rgba(0, 0, 0, 0);
+  box-shadow: c-unset;
   color: #272833;
 }
 .was-validated .form-control:valid:focus,
 .was-validated .form-control.is-valid:focus {
-  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem #5791ff;
+  box-shadow: c-unset;
 }
 
 .was-validated .form-control:invalid,
 .was-validated .form-control.is-invalid {
   background-color: #feefef;
   border-color: #f48989;
-  box-shadow: 0 0 rgba(0, 0, 0, 0);
+  box-shadow: c-unset;
   color: #272833;
 }
 .was-validated .form-control:invalid:focus,
 .was-validated .form-control.is-invalid:focus {
-  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem #5791ff;
+  box-shadow: c-unset;
 }
 
 .has-error .custom-control-label,
@@ -11395,11 +11507,12 @@ label.custom-control-label {
 .has-error .form-control {
   background-color: #feefef;
   border-color: #f48989;
-  box-shadow: 0 0 rgba(0, 0, 0, 0);
   color: #272833;
 }
-.has-error .form-control.focus, .has-error .form-control:focus-visible, .c-prefers-focus .has-error .form-control:focus {
-  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem #5791ff;
+.has-error .form-control:focus-within:has(input:focus) {
+  background-color: #feefef;
+  border-color: #f48989;
+  color: #272833;
 }
 .has-error .form-control[readonly] {
   background-color: #fff;
@@ -11420,9 +11533,6 @@ label.custom-control-label {
 .has-error select.form-control[multiple] {
   background-image: none;
 }
-.has-error .input-group-item.focus {
-  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem #5791ff;
-}
 .has-error .input-group-item.focus .input-group-inset {
   background-color: #feefef;
   border-color: #f48989;
@@ -11434,7 +11544,6 @@ label.custom-control-label {
 .has-error .input-group-item .input-group-inset ~ .input-group-inset-item {
   background-color: #feefef;
   border-color: #f48989;
-  box-shadow: 0 0 rgba(0, 0, 0, 0);
 }
 .has-error .input-group-item .input-group-inset:focus {
   box-shadow: none;
@@ -11451,11 +11560,12 @@ label.custom-control-label {
 .has-warning .form-control {
   background-color: #fff4ec;
   border-color: #ff8f39;
-  box-shadow: 0 0 rgba(0, 0, 0, 0);
   color: #272833;
 }
-.has-warning .form-control.focus, .has-warning .form-control:focus-visible, .c-prefers-focus .has-warning .form-control:focus {
-  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem #5791ff;
+.has-warning .form-control:focus-within:has(input:focus) {
+  background-color: #fff4ec;
+  border-color: #ff8f39;
+  color: #272833;
 }
 .has-warning .form-control[readonly] {
   background-color: #fff;
@@ -11476,9 +11586,6 @@ label.custom-control-label {
 .has-warning select.form-control[multiple] {
   background-image: none;
 }
-.has-warning .input-group-item.focus {
-  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem #5791ff;
-}
 .has-warning .input-group-item.focus .input-group-inset {
   background-color: #fff4ec;
   border-color: #ff8f39;
@@ -11490,7 +11597,6 @@ label.custom-control-label {
 .has-warning .input-group-item .input-group-inset ~ .input-group-inset-item {
   background-color: #fff4ec;
   border-color: #ff8f39;
-  box-shadow: 0 0 rgba(0, 0, 0, 0);
 }
 .has-warning .input-group-item .input-group-inset:focus {
   box-shadow: none;
@@ -11507,11 +11613,12 @@ label.custom-control-label {
 .has-success .form-control {
   background-color: #edf9f0;
   border-color: #5aca75;
-  box-shadow: 0 0 rgba(0, 0, 0, 0);
   color: #272833;
 }
-.has-success .form-control.focus, .has-success .form-control:focus-visible, .c-prefers-focus .has-success .form-control:focus {
-  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem #5791ff;
+.has-success .form-control:focus-within:has(input:focus) {
+  background-color: #edf9f0;
+  border-color: #5aca75;
+  color: #272833;
 }
 .has-success .form-control[readonly] {
   background-color: #fff;
@@ -11532,9 +11639,6 @@ label.custom-control-label {
 .has-success select.form-control[multiple] {
   background-image: none;
 }
-.has-success .input-group-item.focus {
-  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem #5791ff;
-}
 .has-success .input-group-item.focus .input-group-inset {
   background-color: #edf9f0;
   border-color: #5aca75;
@@ -11546,7 +11650,6 @@ label.custom-control-label {
 .has-success .input-group-item .input-group-inset ~ .input-group-inset-item {
   background-color: #edf9f0;
   border-color: #5aca75;
-  box-shadow: 0 0 rgba(0, 0, 0, 0);
 }
 .has-success .input-group-item .input-group-inset:focus {
   box-shadow: none;
@@ -14353,6 +14456,12 @@ label.custom-control-label {
 .menubar-vertical-expand-md {
   max-width: 15.625rem;
 }
+@media (max-width: 767.98px) {
+  .menubar-vertical-expand-md {
+    margin-bottom: 1rem;
+    max-width: none;
+  }
+}
 .menubar-vertical-expand-md .menubar-collapse {
   display: block;
 }
@@ -14417,6 +14526,11 @@ label.custom-control-label {
     color: #272833;
   }
 }
+@media (max-width: 767.98px) {
+  .menubar-vertical-expand-md.menubar-transparent {
+    background-color: #fff;
+  }
+}
 .menubar-vertical-expand-md.menubar-transparent .nav-link {
   border-radius: 0.25rem;
   color: #6b6c7e;
@@ -14601,6 +14715,12 @@ label.custom-control-label {
 .menubar-vertical-expand-lg {
   max-width: 15.625rem;
 }
+@media (max-width: 991.98px) {
+  .menubar-vertical-expand-lg {
+    margin-bottom: 1rem;
+    max-width: none;
+  }
+}
 .menubar-vertical-expand-lg .menubar-collapse {
   display: block;
 }
@@ -14665,6 +14785,11 @@ label.custom-control-label {
     color: #272833;
   }
 }
+@media (max-width: 991.98px) {
+  .menubar-vertical-expand-lg.menubar-transparent {
+    background-color: #fff;
+  }
+}
 .menubar-vertical-expand-lg.menubar-transparent .nav-link {
   border-radius: 0.25rem;
   color: #6b6c7e;
@@ -18798,6 +18923,12 @@ label.custom-control-label {
   display: flex;
   flex-wrap: wrap;
 }
+@media (max-width: 767.98px) {
+  .pagination-bar {
+    flex-direction: column;
+    justify-content: center;
+  }
+}
 @media (max-width: 767.98px) {
   .pagination-bar {
     flex-direction: column;
@@ -20319,6 +20450,12 @@ label.custom-control-label {
     margin-right: -1rem;
   }
 }
+@media (max-width: 767.98px) {
+  .sheet-row {
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
+}
 
 .sheet-header {
   margin-bottom: 3rem;
@@ -20704,23 +20841,19 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
   overflow: auto;
   -webkit-overflow-scrolling: touch;
 }
-.sidebar:focus, .sidebar.focus {
-  box-shadow: inset 0 0 0 0.125rem #5791ff, inset 0 0 0 0.25rem #fff;
-  outline: 0;
-}
 .sidebar .container-fluid {
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
 }
 
 .sidebar-header {
   padding-bottom: 1rem;
-  padding-left: 1rem;
+  padding-left: 1.5rem;
   padding-right: 1rem;
   padding-top: 1rem;
 }
 .sidebar-header .component-title {
-  font-size: 1.25rem;
+  font-size: 1rem;
   overflow-wrap: break-word;
   word-wrap: break-word;
 }
@@ -20729,17 +20862,26 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
   color: #272833;
 }
 .sidebar-header .component-subtitle {
-  font-size: 0.75rem;
+  font-size: 0.875rem;
   font-weight: 400;
   margin-bottom: 0;
   overflow-wrap: break-word;
   word-wrap: break-word;
 }
+.sidebar-header .autofit-row {
+  margin-left: -0.25rem;
+  margin-right: -0.25rem;
+  width: auto;
+}
+.sidebar-header .autofit-row > .autofit-col {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
 
 .sidebar-footer {
   padding-bottom: 1rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
   padding-top: 1rem;
 }
 
@@ -20747,8 +20889,8 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
   overflow: auto;
   -webkit-overflow-scrolling: touch;
   padding-bottom: 1rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
   padding-top: 1rem;
 }
 .sidebar-body > .sidebar-section {
@@ -20825,6 +20967,7 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
 
 .sidebar-sm {
   font-size: 0.875rem;
+  font-size: 0.875rem;
 }
 .sidebar-light {
   background-color: #fff;
@@ -20832,18 +20975,25 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
   border-left-width: 0px;
   color: #272833;
   box-shadow: -0.25rem 0 0.5rem -0.25rem rgba(0, 0, 0, 0.1);
+  background-color: #fff;
+  border-color: #e7e7ed;
+  border-left-width: 0px;
+  color: #272833;
+  box-shadow: -0.25rem 0 0.5rem -0.25rem rgba(0, 0, 0, 0.1);
 }
 .sidenav-start .sidebar-light,
 .sidenav-left .sidebar-light {
   box-shadow: 0.25rem 0 0.5rem -0.25rem rgba(0, 0, 0, 0.1);
 }
-.sidenav-start .sidebar-light.focus, .sidenav-start .sidebar-light:focus-visible, .c-prefers-focus .sidenav-start .sidebar-light:focus,
-.sidenav-left .sidebar-light.focus,
-.sidenav-left .sidebar-light:focus-visible,
-.c-prefers-focus .sidenav-left .sidebar-light:focus {
-  box-shadow: 0.25rem 0 0.5rem -0.25rem rgba(0, 0, 0, 0.1), inset 0 0 0 0.125rem #5791ff, inset 0 0 0 0.25rem #fff;
-}
 
+.sidebar-light .sidebar-header {
+  background-color: inherit;
+  border: 0px solid #e7e7ed;
+}
+.sidebar-light .sidebar-footer {
+  background-color: inherit;
+  border: 0px solid #e7e7ed;
+}
 .sidebar-light .sidebar-list-group .list-group-title {
   font-size: 1rem;
 }
@@ -20905,10 +21055,57 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
 .sidebar-light .component-navigation-bar .navbar-overlay {
   background-color: #fff;
 }
+.sidebar-light .sidebar-header {
+  background-color: inherit;
+  border: 0px solid #e7e7ed;
+}
+.sidebar-light .sidebar-footer {
+  background-color: inherit;
+  border: 0px solid #e7e7ed;
+}
+.sidebar-light .sidebar-dd .href {
+  color: #272833;
+}
+.sidebar-light .sidebar-panel {
+  background-color: #f1f2f5;
+}
+.sidebar-light .sidebar-list-group .list-group-title {
+  font-size: 1rem;
+}
+.sidebar-light .sidebar-list-group .list-group-title .href {
+  color: #272833;
+}
+.sidebar-light .component-navigation-bar {
+  background-color: #fff;
+  border-color: #cdced9;
+}
+.sidebar-light .component-navigation-bar .navbar-nav .nav-link {
+  color: #6b6c7e;
+}
+.sidebar-light .component-navigation-bar .navbar-nav .nav-link:hover {
+  color: #6b6c7e;
+}
+.sidebar-light .component-navigation-bar .navbar-nav .nav-link:active {
+  color: #272833;
+}
+.sidebar-light .component-navigation-bar .navbar-nav .nav-link:disabled {
+  color: #a7a9bc;
+}
+.sidebar-light .sidenav-start {
+  box-shadow: 0.25rem 0 0.5rem -0.25rem rgba(0, 0, 0, 0.1);
+}
+.sidebar-light .sidebar-dt {
+  color: #6b6c7e;
+}
+.sidebar-light .panel-unstyled .header .link:focus {
+  box-shadow: 0 0 0 0.25rem #fff, 0 0 0 0.375rem #5791ff;
+}
 
 .sidebar-dark {
   background-color: #272833;
   color: #fff;
+  background-color: #272833;
+  color: #fff;
 }
 .sidebar-dark .close {
   color: #a7a9bc;
@@ -20969,9 +21166,62 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
 .sidebar-dark .nav-nested .nav-link[aria-expanded=true], .sidebar-dark .nav-nested .nav-link.show {
   color: #fff;
 }
+.sidebar-dark .sidebar-header .component-title {
+  color: inherit;
+}
+.sidebar-dark .sidebar-header .component-title .href {
+  color: inherit;
+}
+.sidebar-dark .sidebar-header .component-subtitle {
+  color: inherit;
+}
+.sidebar-dark .sidebar-header .component-subtitle .href {
+  color: inherit;
+}
+.sidebar-dark .close {
+  color: #a7a9bc;
+}
+.sidebar-dark .close:hover {
+  color: #fff;
+}
+.sidebar-dark .nav-nested .nav-link {
+  border-radius: 0.25rem;
+  color: #a7a9bc;
+  transition: box-shadow 0.15s ease-in-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .sidebar-dark .nav-nested .nav-link {
+    transition: none;
+  }
+}
+.c-prefers-reduced-motion .sidebar-dark .nav-nested .nav-link {
+  transition: none;
+}
+
+.sidebar-dark .nav-nested .nav-link:hover {
+  color: #fff;
+}
+.sidebar-dark .nav-nested .nav-link:focus {
+  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem #5791ff;
+  outline: 0;
+}
+.sidebar-dark .nav-nested .nav-link:active {
+  color: #fff;
+}
+.sidebar-dark .nav-nested .nav-link:disabled {
+  box-shadow: none;
+  color: #a7a9bc;
+  opacity: 0.65;
+}
+.sidebar-dark .nav-nested .nav-link:disabled:active {
+  pointer-events: none;
+}
+
 .sidebar-dark-l2 {
   background-color: #393a4a;
   color: #fff;
+  background-color: #393a4a;
+  color: #fff;
 }
 .sidebar-dark-l2 .close {
   color: #a7a9bc;
@@ -21032,7 +21282,63 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
 .sidebar-dark-l2 .nav-nested .nav-link[aria-expanded=true], .sidebar-dark-l2 .nav-nested .nav-link.show {
   color: #fff;
 }
+.sidebar-dark-l2 .sidebar-header .component-title {
+  color: inherit;
+}
+.sidebar-dark-l2 .sidebar-header .component-title .href {
+  color: inherit;
+}
+.sidebar-dark-l2 .sidebar-header .component-subtitle {
+  color: inherit;
+}
+.sidebar-dark-l2 .sidebar-header .component-subtitle .href {
+  color: inherit;
+}
+.sidebar-dark-l2 .close {
+  color: #a7a9bc;
+}
+.sidebar-dark-l2 .close:hover {
+  color: #fff;
+}
+.sidebar-dark-l2 .nav-nested .nav-link {
+  border-radius: 0.25rem;
+  color: #a7a9bc;
+  transition: box-shadow 0.15s ease-in-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .sidebar-dark-l2 .nav-nested .nav-link {
+    transition: none;
+  }
+}
+.c-prefers-reduced-motion .sidebar-dark-l2 .nav-nested .nav-link {
+  transition: none;
+}
+
+.sidebar-dark-l2 .nav-nested .nav-link:hover {
+  color: #fff;
+}
+.sidebar-dark-l2 .nav-nested .nav-link:focus {
+  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem #5791ff;
+  outline: 0;
+}
+.sidebar-dark-l2 .nav-nested .nav-link:active {
+  color: #fff;
+}
+.sidebar-dark-l2 .nav-nested .nav-link:disabled {
+  box-shadow: none;
+  color: #a7a9bc;
+  opacity: 0.65;
+}
+.sidebar-dark-l2 .nav-nested .nav-link:disabled:active {
+  pointer-events: none;
+}
+
+.c-slideout-start .sidebar-light {
+  box-shadow: 0.25rem 0 0.5rem -0.25rem rgba(0, 0, 0, 0.1);
+}
+
 .c-slideout-transition-in {
+  overflow: hidden;
   transition: all 0.3s ease-in-out;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -21045,6 +21351,7 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
 }
 
 .c-slideout-transition-out {
+  overflow: hidden;
   transition: all 0.2s ease-in;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -21064,6 +21371,29 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
   position: absolute;
 }
 
+.c-slideout-container {
+  min-height: 480px;
+  position: relative;
+}
+
+.c-slideout-push-start {
+  padding-left: 320px;
+}
+@media (max-width: 991.98px) {
+  .c-slideout-push-start {
+    padding-left: 0;
+  }
+}
+
+.c-slideout-push-end {
+  padding-right: 320px;
+}
+@media (max-width: 991.98px) {
+  .c-slideout-push-end {
+    padding-right: 0;
+  }
+}
+
 .c-slideout {
   display: flex;
   overflow: hidden;
@@ -21075,15 +21405,40 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
 .c-slideout .sidebar {
   display: none;
   flex-shrink: 0;
-  overflow: visible;
   position: relative;
   width: 320px;
+  display: none;
+  flex-shrink: 0;
+  position: relative;
+  width: 320px;
+}
+.c-slideout .sidebar .sidebar-header {
+  border-bottom-width: 1px;
+}
+.c-slideout .sidebar .sidebar-body {
+  flex-grow: 1;
+  overflow: visible;
+}
+.c-slideout .sidebar .sidebar-footer {
+  border-top-width: 1px;
+}
+.c-slideout .sidebar .sidebar-header {
+  border-bottom-width: 1px;
+}
+.c-slideout .sidebar .sidebar-body {
+  flex-grow: 1;
+  overflow: visible;
+}
+.c-slideout .sidebar .sidebar-footer {
+  border-top-width: 1px;
 }
 .c-slideout .sidebar.c-slideout-show {
-  display: block;
+  display: flex;
+  flex-direction: column;
 }
 .c-slideout .sidebar.c-slideout-transition {
-  display: block;
+  display: flex;
+  flex-direction: column;
 }
 .c-slideout .sidebar.c-slideout-transition .c-horizontal-resizer {
   display: none;
@@ -21105,6 +21460,7 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
 @media (max-width: 767.98px) {
   .c-slideout .sidebar {
     width: 280px;
+    width: 280px;
   }
 }
 
@@ -21119,6 +21475,8 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
 .c-slideout-start .sidebar {
   left: -360px;
   width: 320px;
+  left: -360px;
+  width: 320px;
 }
 .c-slideout-start .sidebar.c-slideout-show {
   left: 0;
@@ -21136,6 +21494,8 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
   .c-slideout-start .sidebar {
     left: -320px;
     width: 280px;
+    left: -320px;
+    width: 280px;
   }
   .c-slideout-start .tbar-stacked {
     left: -40px;
@@ -21152,6 +21512,7 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
 }
 .c-slideout-end .sidebar {
   right: -360px;
+  right: -360px;
 }
 .c-slideout-end .sidebar.c-slideout-show {
   right: 0;
@@ -21172,6 +21533,7 @@ a.sheet-subtitle.focus, a.sheet-subtitle:focus-visible, .c-prefers-focus a.sheet
   }
   .c-slideout-end .sidebar {
     right: -320px;
+    right: -320px;
   }
   .c-slideout-end .tbar-stacked {
     right: -40px;
@@ -30371,6 +30733,14 @@ button.bg-dark:focus {
   z-index: 1030;
 }
 
+@supports (position: sticky) {
+  .sticky-bottom {
+    bottom: 0;
+    position: sticky;
+    z-index: 1020;
+  }
+}
+
 @supports (position: sticky) {
   .sticky-top {
     position: sticky;