.logger {
  opacity: 1;
  color: black;
  background-color: rgba(128, 128, 128, 0.905);
  position: absolute;
  display: block;
  width: 50%;
  height: 70%;
  top: 0;
  left: 0;
}

.content {
  display: block;
}

.title {
  display: block;
  margin-bottom: 10px;
  text-align: center;
  font-size: 20px;
}

#log {
  position: relative;
  background-color: transparent;
  font-size: 10px;
  overflow-y: scroll;
  width: 100%;
  height: 90%;
}
@media screen and (min-width: 1281px) and (max-width: 1920px) {
  #label {
    width: 1920px;
    height: 100px;
    font-size: 32px;
  }
  .ready {
    height: 60px;
    font-size: 42px;
    line-height: 60px;
  }
  .status {
    height: 30px;
    font-size: 25px;
    line-height: 30px;
  }
}
@media screen and (min-width: 400px) and (max-width: 1280px) {
  #label {
    width: 1280px;
    height: 67px;
    font-size: 21px;
  }
  .ready {
    height: 40px;
    font-size: 28px;
    line-height: 40px;
  }
  .status {
    height: 20px;
    font-size: 16px;
    line-height: 20px;
  }
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  background-color: black;
}

#label {
  position: absolute;
  color: rgba(255, 255, 255, 0.6);
  display: block;
  top: 70%;
  z-index: 1;
  text-align: center;
  font-family: 'Roboto', sans-serif;
}


cast-media-player {
  --theme-hue: 100;
  --break-color: green;
  --progress-color: #fff;
  --font-family: 'Roboto';
  --splash-size: cover;
  --logo-background: #252525;
  --slideshow-interval: 5;

  /* disable for SOTT projects */
  /*--splash-background: url('./img/24i_logo.png');*/
  /*--logo-image: url('./img/24i_logo.png');*/
  /*--playback-logo-image: url('./img/24i_logo.png');*/
  /*--watermark-image: url('./img/24i_watermark.png');*/

  /* enable for SOTT projects */
  /*--splash-background: url('');*/
  /*--logo-image: url('');*/
  /*--playback-logo-image: url('');*/
  /*--watermark-image: url('');*/

  /* template for slideshows max 10 */
  /*--slideshow-image-1: url('https://via.placeholder.com/1280x720/aaaaaa/FFFFFF/?text=Slide1');
  --slideshow-image-2: url('https://via.placeholder.com/1280x720/888888/FFFFFF/?text=Slide2');
  --slideshow-image-3: url('https://via.placeholder.com/1280x720/444444/FFFFFF/?text=Slide3');
  */
}

/* enable it for SOTT projects */
/*cast-media-player.cover24i {*/
  /*--splash-background: url('./img/24i_logo.png');*/
  /*--logo-image: url('./img/24i_logo.png');*/
  /*--playback-logo-image: url('./img/24i_logo.png');*/
  /*--watermark-image: url('./img/24i_watermark.png');*/
/*}*/

#root {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

#root #fade {
  height: 100%;
  width: 100%;
  background-color: black;
  /* transition the background-color over 1s with a linear animation */
  transition: background-color 1s linear;
}

/* the :hover that causes the background-color to change */
.faded {
  background-color: transparent !important;
}

.ready {
  color: #FFFFFF;
  font-weight: bold;
  text-align: center;
}


.status {
  opacity: 0.6;
  color: #FFFFFF;
  font-weight: 500;
  text-align: center;
}