/* 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: 100%;
  height: 100%;
  overflow: hidden;
}

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

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

/* Loading spinner overlay */
#loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
}

/* Image upload preview */
.upload-preview {
  max-width: 100%;
  height: auto;
  margin-top: 0.5rem;
}

/* ConfigLog grid container */
#config-log-grid {
  width: 100%;
  margin-top: 1rem;
}

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

/* HTML: <div class="loader"></div> - The .loader and @keyframes are for the Loading hourglass spinner */
.loader {
  --c1:#673b14;
  --c2:#f8b13b;
  width: 40px;
  height: 80px;
  border-top: 4px solid var(--c1);
  border-bottom: 4px solid var(--c1);
  background: linear-gradient(90deg, var(--c1) 2px, var(--c2) 0 5px,var(--c1) 0) 50%/7px 8px no-repeat;
  display: grid;
  overflow: hidden;
  animation: l5-0 2s infinite linear;
}
.loader::before,
.loader::after {
  content: "";
  grid-area: 1/1;
  width: 75%;
  height: calc(50% - 4px);
  margin: 0 auto;
  border: 2px solid var(--c1);
  border-top: 0;
  box-sizing: content-box;
  border-radius: 0 0 40% 40%;
  mask: 
    linear-gradient(#000 0 0) bottom/4px 2px no-repeat,
    linear-gradient(#000 0 0);
  mask-composite: destination-out;
          mask-composite: exclude;
  background: 
    linear-gradient(var(--d,0deg),var(--c2) 50%,#0000 0) bottom /100% 205%,
    linear-gradient(var(--c2) 0 0) center/0 100%;
  background-repeat: no-repeat;
  animation: inherit;
  animation-name: l5-1;
}
.loader::after {
  transform-origin: 50% calc(100% + 2px);
  transform: scaleY(-1);
  --s:3px;
  --d:180deg;
}
@keyframes l5-0 {
  80%  {transform: rotate(0)}
  100% {transform: rotate(0.5turn)}
}
@keyframes l5-1 {
  10%,70%  {background-size:100% 205%,var(--s,0) 100%}
  70%,100% {background-position: top,center}
}