#screen.dialog #left-panel,
#screen.dialog #right-panel,
#screen.screenreader .gesture-panel,
.gesture-panel.disabled {
  visibility: hidden;
}

#top-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2rem;
}

#screen.rocketbar-focused #left-panel,
#screen.rocketbar-focused #right-panel {
  pointer-events: none;
}

#left-panel {
  position: absolute;
  height: calc(100% - 10rem);
  width: 2rem;
  left: 0;
  top: 6rem;

  border-radius: 0 4rem 4rem 0;

  background-color: red;
  opacity: 0;
}

#right-panel {
  position: absolute;
  height: calc(100% - 10rem);
  width: 2rem;
  right: 0;
  top: 6rem;

  border-radius: 4rem 0 0 4rem;

  background-color: green;
  opacity: 0;
}

#screen.edges-debug .gesture-panel {
  opacity: 0.5;
}

@media (orientation: portrait) {
  #screen.software-button-enabled #right-panel,
  #screen.software-button-enabled #left-panel {
    height: calc(100% - 10rem - var(--software-home-button-height));
  }
}

@media (orientation: landscape) {
  #screen:not(:-moz-full-screen-ancestor).software-button-enabled #right-panel {
    width: 7rem;
    border-radius: 2rem 0 0 2rem;
  }
}