/* Update default theme. */
#app-tab-title { border: none; }
#app-frame { border: none; }
[data-tab] { border: none; }

table { 
  width: 100%;
  border-collapse: collapse;
}
thead tr {
  height: 2rem;
  color: var(--color-ui-text);
  background-color: var(--color-main);
}

th { text-align: left; }

[data-image] {
  max-width: 100%;
  height: auto;
}

/* CAROUSEL */

.carousel { overflow: hidden; }

.slider {
  display: flex;  
  overflow-x: auto;
  scroll-snap-type: x mandatory;    
  scroll-behavior: smooth;
}

.slider > * {
  width: 100%;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  scroll-snap-align: start;
  transform-origin: center center;
  transform: scale(1);
  transition: transform 0.5s;
}

[data-slide].center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/*
.slider {  
  display: flex;
  position: relative;
  transform: translateX(calc(var(--slide, 0) * -100%));
  transition: all 400ms ease-in-out;  
}

.slider > * {
  width: 100%;
  flex-shrink: 0;
}*/

.carousel img { max-width: 100%; }
.carousel img[data-image] { max-height: 300px; }

.dots {
  display: flex;
  justify-content: center;
  position: relative;
  margin-top: 20px;
  z-index: 1;
}

.dots div {
  width: 20px;
  height: 20px;
  background-color: #888;
  margin: 0 5px;
  border: 1px solid white;
  border-radius: 50%;
  transition: all 300ms ease-in-out;
  cursor: pointer;
}

.dots div:hover { opacity: 0.8; }
.dots .selected { background-color: var(--color-main, hsla(72, 48.2%, 50.8%, 0.8)); }