@import '../../../styles/mixins.scss';

  .lowerSection {
    padding: var(--content-padding);
  }

  .lowerSectionMobile {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 0;
    padding: 0.3em;
    position: absolute;
    bottom: 0;
    width: 100%;

  @include screen(tablet) {
    //sets the position of tabbed content for online mode
    top: 430px;
  }

  @include screen(mobile) {
    //sets the position of tabbed content for online mode
  top: 280px;
  }
      
  }

.mobileNoTabs {
  padding-top: 20px;
} 

.topSectionElement {
  background-color: var(--theme-color-components-video-background);
  @include screen(tablet) {
    // "sticks" the stream to the top of the page
    position: sticky;
    z-index: 100;
  }
}

.offlineBanner {
  color: var(--theme-color-background-main);
}

.mobileActionButtonMenu {
  position: absolute;
  top: 4px;
  right: 10px;
  z-index: 200;
}

//not sure if this is needed
.statusBar {
  flex-shrink: 0;
}

// not sure if this is needed
.loadingSpinner {
  display: grid;
}

.defaultTabBar {
  width: 85%;
}

.bottomPageContentContainer {
  background-color: var(--theme-color-components-content-background);
  padding: calc(2 * var(--content-padding));
  border-radius: var(--theme-rounded-corners);
  width: 100%;

  h1:first-child,
  h2:first-child,
  h3:first-child {
    margin-top: unset;
  }
}