/* Generated using https://graphistichub.com/free-skeleton-loader-css-generator/ */

/* 1. Add this animation to your CSS */
@keyframes animloader {
0% {
  background-position: -100% 0;
}
100% {
  background-position: 200% 0;
}
}

/* 2. Add these helper classes */
/* This is the base class for the skeleton elements */
.skeleton-loader {
position: relative;
overflow: hidden;
background-color: #1b1b1b;
border-radius: 3px;
box-sizing: border-box;
}
.skeleton-loader::after {
content: '';  
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: 
  linear-gradient(100deg, 
      transparent 25%, 
      rgba(0, 24, 75, 0.5) 50%, 
      transparent 75%);
background-repeat: no-repeat;
background-size: 200px 100%;
background-position: -100% 0;
box-sizing: border-box;
animation: animloader 1.4s linear infinite;
}

/* 3. Add any shape helpers you need */
.skeleton-text {
height: 1em;
margin-bottom: 0.5rem;
}
.skeleton-circle {
border-radius: 50%;
aspect-ratio: 1/1;
}
.skeleton-block {
width: 100%;
aspect-ratio: 16/9;
}