.grafana-app {
  display: flex;
  align-items: stretch;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.main-view {
  position: relative;
  flex-grow: 1;
  background: $page-gradient;
}

.page-container {
  margin-left: auto;
  margin-right: auto;
  padding-left:  $spacer*2;
  padding-right: $spacer*2;
  max-width: 980px;
  @include clearfix();
}

.scroll-canvas {
  position: absolute;
  width: 100%;
  overflow: auto;
  height: 100%;

  &--dashboard {
    height: calc(100% - 54px);
  }
}

.page-body {
  padding-top: $spacer*2;
  min-height: 500px;
}

.page-heading {
  font-size: 1.25rem;
  margin-top: 0;
  margin-bottom: $spacer * 0.7;
}

.page-action-bar {
  margin-bottom: $spacer * 2;
  display: flex;
  align-items: flex-start;

  > a, > button {
    margin-left: $spacer;
  }
}

.page-action-bar--narrow {
  margin-bottom: 0;
}

.page-action-bar__spacer {
  width: $spacer * 2;
  flex-grow: 1;
}

.sidebar-content {
  width: calc(100% - #{$page-sidebar-width + $page-sidebar-margin}); // sidebar width + margin
}

.sidebar-container {
  @include media-breakpoint-up(md) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.page-sidebar {
  @include media-breakpoint-up(md) {
    width: $page-sidebar-width;
    margin-left: $page-sidebar-margin;
  }
}

.page-sub-heading {
  margin-bottom: $spacer;
}

.page-sidebar {
  color: $text-color-weak;
  h4 {
    font-size: $font-size-base;
    font-weight: $font-weight-semi-bold;
  }
  h5 {
    font-size: $font-size-base;
    font-weight: $font-weight-semi-bold;
  }
}

.page-sidebar-section {
  margin-bottom: $spacer*2;
}