body {
  overflow-y: scroll;
}

body[data-panel-state=expanded] {
  --app-panel-width: var(--app-panel-width--expanded);
  --stage-x-offset: var(--app-panel-width);
}

body[data-panel-state=collapsed] {
  --app-panel-width: var(--app-panel-width--collapsed);
  --stage-x-offset: var(--app-panel-width);
}

body[data-app-theme=v2] {
  background: var(--brand-gradient--fallback-bg);
  background: var(--brand-gradient);
  background-attachment: fixed;
}

body[data-page-bg] {
  background-color: var(--bs-brand-platinum);
  min-height: calc(100vh - var(--app-header-height));
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

body[data-page-bg=bg-1] {
  background-image: url("../../images/bg.jpg");
  background-position: bottom right;
}

body[data-page-bg=bg-2] {
  background-image: url("../../images/bg2.jpg");
  background-position: center center;
}

body[data-page-bg=bg-3] {
  background-image: url("../../images/bg3.jpg");
  background-position: center center;
}

.app-stage {
  padding: 24px;
}
@media (min-width: 992px) {
  [data-app-theme=v2] .app-stage {
    padding: 36px;
  }
}
@media (min-width: 1400px) {
  [data-app-theme=v2] .app-stage {
    padding: 48px;
  }
}

.app-main {
  position: relative;
  z-index: var(--z-index-app-main);
}
body[data-page-bg] .app-main {
  background: none;
  padding: 0;
}

[data-app-theme=v1][data-panel-placement=left] .app-main, [data-app-theme=v1][data-panel-placement=right] .app-main {
  width: 100%;
  max-width: 1320px;
}
@media (min-width: 992px) {
  [data-app-theme=v1][data-panel-placement=left] .app-main, [data-app-theme=v1][data-panel-placement=right] .app-main {
    padding: 1rem;
  }
}
[data-app-theme=v1][data-panel-placement=left] .app-main--full-width, [data-app-theme=v1][data-panel-placement=right] .app-main--full-width {
  width: 100%;
  max-width: 100%;
}

[data-app-theme=v2] .app-main {
  width: 100%;
  max-width: 1320px;
  box-shadow: var(--bs-box-shadow-sm);
  border-radius: var(--bs-border-radius);
  padding: 24px;
  background-color: #fff;
  margin: 0 auto;
}
@media (min-width: 992px) {
  [data-app-theme=v2] .app-main {
    padding: 36px;
  }
}
@media (min-width: 1400px) {
  [data-app-theme=v2] .app-main {
    padding: 48px;
  }
}
[data-app-theme=v2] .app-main--full-width {
  width: 100%;
  max-width: 100%;
}

@media (min-width: 992px) {
  .app-view.app-view--auth {
    padding: 2rem;
  }
}