[data-ajax-placeholder] {
  opacity: 0.2;
}
[data-ajax-placeholder] .ajax-big-pipe-loader {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
  margin: 25px auto;
  position: relative;
  color: #000000;
  box-sizing: border-box;
  animation: animloader 2s linear infinite;
}
@keyframes animloader {
  0% {
    box-shadow: 14px 0 0 -2px,  38px 0 0 -2px,  -14px 0 0 -2px,  -38px 0 0 -2px;
  }
  25% {
    box-shadow: 14px 0 0 -2px,  38px 0 0 -2px,  -14px 0 0 -2px,  -38px 0 0 2px;
  }
  50% {
    box-shadow: 14px 0 0 -2px,  38px 0 0 -2px,  -14px 0 0 2px,  -38px 0 0 -2px;
  }
  75% {
    box-shadow: 14px 0 0 2px,  38px 0 0 -2px,  -14px 0 0 -2px,  -38px 0 0 -2px;
  }
  100% {
    box-shadow: 14px 0 0 -2px,  38px 0 0 2px,  -14px 0 0 -2px,  -38px 0 0 -2px;
  }
}


.skeleton-header,
.skeleton-row,
.skeleton-content-full,
.skeleton-subtitle,
.skeleton-paragraph {
  background-color: #333;
  border-radius: 0.25rem;
  margin-bottom: 0.625rem;
  position: relative;
  overflow: hidden;
}

.skeleton-row-container {
  display: flex;
  gap: 15px;
}

.skeleton-header {
  width: 60%;
  height: 3em;
}
.skeleton-subtitle {
  width: 40%;
  height: 2em;
}

.skeleton-paragraph {
  width: 100%;
  height: 2em;
}

.skeleton-row {
  width: 100%;
  height: 15em;
}

.skeleton-content-full {
  width: 100%;
  height: 50vh;
}

/* Animation for skeleton elements */
.skeleton-animation::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -100%;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(214, 173, 96, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
  animation: loading 1.5s cubic-bezier(0.57, -0.01, 0.21, 0.89) infinite;
}

/* Keyframes for the loading animation */
@keyframes loading {
  0% {
    left: -100%;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}