html,
body,
#app,
#content,
#content-scrollable,
.pf-c-page__main-section {
  height: 100%; // so .co-p-has-sidebar, .yaml-editor are full height
}

#content {
  display: flex;
  flex-direction: column;
  font-size: $font-size-base; // so PatternFly 4's PatternFly 3 shield rules don't override
}

#content-scrollable {
  overflow-x: auto; // so catalog is scrollable at mobile
  overflow-y: auto;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

.absolute-zero {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

.full-width-and-height {
  width: 100%;
  height: 100%;
}

.co-p-has-sidebar {
  position: relative;
  @media(min-width: $screen-md-min) {
    display: flex;
    height: 100%;
  }

  &__body {
    flex: 1 1 700px;
  }

  &__sidebar {
    @media(min-width: $screen-md-min) {
      flex: 1 0 300px;
      overflow-y: auto;
    }

    &--bordered {
      @media(max-width: $screen-sm-max) {
        border-top: 1px solid #ccc;
      }
      @media(min-width: $screen-md-min) {
        border-left: 1px solid #ccc;
      }
    }
  }

  &__sidebar-heading {
    font-size: 18px;
    margin-bottom: 20px;
    margin-top: 45px;
  }

  &__sidebar-heading--first {
    margin-top: 0;
  }

  &__sidebar--hidden {
    position: absolute;
    right: 13px;
    top: 8px;
    z-index: 1;
  }
}
