// Ensure html and body take full height for percentage-based heights to work
html, body {
  height: 100%;
}

.app-body {
  display: grid;
  height: 100%;
  max-height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: $white;
  color: #000;
  grid-template-areas:  "header header header"
                        "sidebar test-header test-header"
                        "sidebar main aside"
                        "sidebar chat-container chat-container"
                        "sidebar footer footer";
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
}

.main-content {
  grid-area: main;
  position: relative;
  overflow-x: hidden;
  overflow-y: scroll;
  max-height: 100%;
  padding: $body-padding-mobile;
  padding-bottom: $spacing-lg;
  @include media-breakpoint-up(sm) {
    padding: $body-padding-tablet;
  }
  @include media-breakpoint-up(xl) {
    padding: $spacing $body-padding-desktop $body-padding-desktop;
  }
}

.form-page-wrapper {
  display: contents;
}

.page-content {
  margin-top: $header-height + $spacing;
  padding-bottom: $spacing-lg;
}

.content-wrapper {
  width: 100%;
  overflow-x: hidden;
  margin-top: $header-height;
  padding-bottom: $spacing-lg;
}

.navbar-margin-top {
  margin-top: $header-height;
}

.actionbar-padding-bottom {
  padding-bottom: $spacing-lg;
}

@media (max-width: $sidebar-breakpoint) {
  .offset .content-wrapper, .meta-header {
    transition: all .25s ease-out;

  }
  .content-wrapper, .meta-header {
    transition: all .25s ease-out;
  }
}

@media (min-width: $sidebar-breakpoint) {
  .content-wrapper {
    padding-left: $sidebar-width;
    overflow-x: hidden;
  }
  .meta-header {
    padding-left: $sidebar-width;
  }
}

.page-header {
  padding: $spacing $body-padding-desktop;

  .page-title {
    margin: 0;

    .label {
      padding: 0;
      vertical-align: super;
      color: $gray;
      background: transparent;
      font-weight:normal;
      font-size:.35em;
      position:relative;
      top:-7px;
    }

  }

  @include media-breakpoint-down(sm) {
    padding: $spacing $body-padding-mobile;
  }
}