.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;
}

.panel-in-fullscreen {
  .main-view {
    background: $edit-gradient;
  }
}

.page-scrollbar-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

.page-scrollbar-content {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  width: 100%;
}

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

.page-full {
  margin-left: $page-sidebar-margin;
  padding-left: $spacer;
  padding-right: $spacer;
  @include clearfix();
}

.scroll-canvas {
  position: absolute;
  width: 100%;
  overflow: auto;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;

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

  > div {
    flex-grow: 1;
  }

  > .footer {
    flex-shrink: 0;
  }

  // Render in correct position even ng-view div is not rendered yet
  > .footer:first-child {
    flex-grow: 1;
    display: flex;

    > * {
      width: 100%;
      align-self: flex-end;
    }
  }
}

// fix for phantomjs
.body--phantomjs {
  .scroll-canvas {
    overflow: hidden;
  }
}

.page-body {
  padding-top: $spacer * 2;
}

.page-heading {
  font-size: $font-size-h4;
  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-sub-heading-icon {
  margin-left: $spacer;
  vertical-align: 6px;
  font-size: 13px;
}

.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;
}