/* style.css */

/* Global settings */
body {
  margin: 0;
  padding: 0;
  border: 0;
  height:100vh;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #000;
  color: #000;
}

/* Remove all borders, padding and margins from the iframe used by the <tableau-viz> element */
iframe {
  border: 0;
  padding: 0;
  margin: 0;
}

/* Kiosk display container */
#slideshow-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.dashboardimage {
  width: 100cqw;
}

/* Slides  - Initially set the slides up as invisible with no pointer events. */
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100cqw;
  height: 100cqh;
  /* start invisible and perform the 2s fade-in/fade-out */
  opacity: 1;
  transition: opacity 2s ease-in-out;
  /* keep it in the flow for transitions */
  pointer-events: auto;
}

/* Set the Active slide as visible and enable pointer-events */
.slide.active {
  opacity: 1;
  pointer-events: auto;
}

#errorOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 0, 0, 0.7); /* Semi-transparent red */
    color: white;
    text-align: center;
    padding-top: 20%;
    font-size: 24px;
    z-index: 1000; /* Ensure it's on top */
}
#directoryErrorOverlay {
    display: none;
    /* Additional styles for directory error overlay if needed */
}
#fileErrorOverlay {
    display: none;
    /* Additional styles for file error overlay if needed */
}

/* Responsive tweaks */
@media screen and (max-width: 1920px) {
  #slideshow-container {
    height: 100vh;
  }
}