/*******************************/
/*********** SPINNER ***********/
/*******************************/

body div#preloader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    background: rgba(255, 255, 255, .8);
    z-index: 4000;
}

#preloader:before,
[data-spinner-container].htmx-request [data-spinner]:after,
.spinner {
  content: "";
  height: 60px;
  width: 60px;
  margin: -15px auto auto -15px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -30px;
  margin-left: -30px;
  border-width: 8px;
  border-style: solid;
  border-color: #08aa8b #ccc #ccc;
  border-radius: 100%;
  animation: rotation .7s infinite linear;
}

[data-spinner-container].htmx-request [data-spinner] * {
  visibility: hidden;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  } to {
    transform: rotate(359deg);
  }
}