body {
  margin: 0;
  -webkit-tap-highlight-color: transparent;
}

@supports (padding-top: env(safe-area-inset-top)){
  html {
    height: calc(100% + env(safe-area-inset-top) + env(safe-area-inset-bottom));
  }
}

#app {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

#app:after {
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #222a35;
  background-image: url("../images/logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 23%; /* value to have same size on TV as SOP logo */
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#app:before {
  content: " ";
  z-index: 100;
  position: fixed;
  background-image: url("../images/spinner_blanc.png");
  background-repeat: no-repeat;
  background-size: cover;
  animation: 1s linear 0s infinite spin;
  left: calc(50vw - 50px);
  top: calc(50vh + 150px);
  width: 100px;
  height: 100px;
}

/* rule used to apply fadeout and remove the background after the fadeout*/


.loaded #app:before {
  /* animation: none has no effect on nominal cases but is required on webkit
    as animation still loop event with display: none
  */
  content: none;
  animation: none;
  display: none;
}
.loaded #app:after {
  opacity: 0;
  height: 0;
  transition: opacity 300ms 300ms, height 0ms 600ms;
}