:root {
  --page-padding: 2rem 0;
}
sparkle-root{
  overflow-y: auto;
}
.Layout {
  display: flex;
  overflow-x: hidden;
}

.Layout > stencil-route,
.Layout > stencil-route-switch {
  width: 100%;
}

.Layout.is-menu-toggled {
  --menu-transform: translateX(calc(-1 * var(--menu-width)));
  --page-margin-left: 0;
}

@media (max-width: 768px) {
  .Layout {
    --menu-transform: translateX(calc(-1 * var(--menu-width)));
    --page-padding: 1.5rem;
    --page-margin-left: 0;
  }

  .Layout.is-menu-toggled {
    --menu-transform: none;
    --page-transform: translateX(var(--menu-width));
  }

  .Layout.is-menu-toggled sparkle-page > * {
    opacity: 0.2;
    pointer-events: none;
  }

  body.scroll-lock {
    overflow-y: hidden;
  }
}

#messagesList {
  display: grid;
  font-size: 12px;
  font-weight: bold;
  grid-template-columns: 1fr minmax(0, var(--page-width, 720px)) 1fr;
  line-height: 2;
  margin-left: var(--page-margin-left);
  margin-top: var(--header-height);
  overflow-x: hidden;
  transform: var(--page-transform, none);
  margin-top: 56px;
  padding: 4px;
  background: #e50739;
  color: #fff;
}
