.wrapper.svelte-1e9ptjj {
  display: grid;
  grid-template-areas: "main" "separator" "sidenav" "breadcrumb"
}

@media (min-width: 768px) {
  .wrapper.svelte-1e9ptjj {
    grid-template-areas: "main sidenav" "breadcrumb sidenav";
    grid-template-columns: calc(var(--custom-rem, 1rem) * 116) auto
  }
}

.main.svelte-1e9ptjj {
  grid-area: main
}

.main[data-padding-mode=auto].svelte-1e9ptjj {
  padding: calc(var(--custom-rem, 1rem) * 6) calc(var(--custom-rem, 1rem) * 3) 0
}

@media (min-width: 768px) {
  .main[data-padding-mode=auto].svelte-1e9ptjj {
    padding: calc(var(--custom-rem, 1rem) * 10) calc(var(--custom-rem, 1rem) * 12) calc(var(--custom-rem, 1rem) * 16)
  }
}

.sidenav.svelte-1e9ptjj {
  grid-area: sidenav;
  padding: 0 calc(var(--custom-rem, 1rem) * 3) calc(var(--custom-rem, 1rem) * 4);
  position: relative
}

@media (min-width: 768px) {
  .sidenav.svelte-1e9ptjj {
    padding: calc(var(--custom-rem, 1rem) * 10) calc(var(--custom-rem, 1rem) * 4) calc(var(--custom-rem, 1rem) * 20);
    border-left: 1px solid #DFE2E5
  }
}

.breadcrumb.svelte-1e9ptjj {
  grid-area: breadcrumb
}

.separator.svelte-1e9ptjj {
  grid-area: separator;
  width: 100%;
  height: 4px;
  background-color: #f3f5fa;
  margin-top: calc(var(--custom-rem, 1rem) * 12);
  margin-bottom: calc(var(--custom-rem, 1rem) * 8);
  box-shadow: inset 0 2px 4px #0e336c1a
}

@media (min-width: 768px) {
  .separator.svelte-1e9ptjj {
    display: none
  }
}