html, body {
  height: 100%;
  width: auto !important;
  overflow-x: hidden !important;
  margin: 0;
}

[x-cloak] { display: none !important; }

tr.htmx-swapping {
  opacity: 0;
  height: 0;
  transition: opacity 1s ease-out, height 1s ease-out;
}

.htmx-indicator{
  background-color: rgba(0, 0, 0, 0.5);
  opacity:0;
  transition: opacity 500ms ease-in;
}
.htmx-request .htmx-indicator{
  opacity:1;
}
.htmx-request.htmx-indicator{
  opacity:1;
}

/* Custom CSS for inverse indicator behavior */
.inverse-indicator {
  opacity: 1; /* Visible by default */
  transition: opacity 500ms ease-in;
}

.htmx-request .inverse-indicator {
  opacity: 0; /* Hide when request is in progress */
}