// Place all the styles related to the pages controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

[id^="DenpaioApp-react-component"] {
  width: 100%;
  height: 100%;
}

#denpaio-app {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  &::before {
    content: '';
    position: fixed;
    background-image: image-url('bg_line.png');
    background-repeat: repeat;
    width: 100%;
    height: 100%;
  }
  .player {
    background-color: rgba(0, 0, 0, 0.6);
    line-height: 32px;
    height: 32px;
    z-index: 1;

    &>* {
      vertical-align: top;
    }
  }
  .container {
    flex: 1;
    z-index: 1;
    overflow: scroll;
  }
  .navbar {
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
  }
}

// Place all the styles related to the pages controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

[id^="DenpaioApp-react-component"] {
  width: 100%;
  height: 100%;
}

#denpaio-app {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  &::before {
    content: '';
    position: fixed;
    background-image: image-url('bg_line.png');
    background-repeat: repeat;
    width: 100%;
    height: 100%;
  }
  .player {
    position: relative; /* Fix z-index of Safari */
    background-color: rgba(0, 0, 0, 0.6);
    line-height: 32px;
    height: 32px;
    z-index: 1;

    &>* {
      vertical-align: top;
    }
  }
  .container {
    position: relative; /* Fix z-index of Safari */
    flex: 1;
    z-index: 1;
    overflow: scroll;
  }
  .navbar {
    position: relative; /* Fix z-index of Safari */
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
  }
}

Fix application layout z-index of Safari
Fix application layout z-index of Safari
