/* indicator when using htmx */
.htmx-indicator {
    display: none;
    opacity: 0.8 !important;
    /* fixed z-10 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 */
    position: fixed;
    z-index: 10;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.htmx-indicator.htmx-request{
    display: block;
}
.htmx-indicator .htmx-request{
    display: block;
}

/* indicator when using vanilla js */
.loading {
  opacity: 0.5; /* Reduce opacity to indicate loading */
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50px 50px; /* Adjust size as needed */
}
#loader {
    background: url('/static/images/loading.webp') center/contain no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -10;
}