.skeleton {
	position: relative;
	overflow: hidden;
	background: #e5e7eb !important;
	color: transparent !important;
	border-color: transparent !important;
	user-select: none;
	pointer-events: none;
    border-radius: 8px;
}

.skeleton::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.55),
		transparent
	);
	animation: skeleton-shimmer 1.2s infinite;
}

.skeleton,
.skeleton * {
	text-shadow: none !important;
}

.skeleton > * {
	visibility: hidden !important;
}

@keyframes skeleton-shimmer {
	100% {
		transform: translateX(100%);
	}
}

.skeleton.w-10 {
    width: 10%;
}

.skeleton.w-20 {
    width: 20%;
}

.skeleton.w-30 {
    width: 30%;
}

.skeleton.w-40 {
    width: 40%;
}

.skeleton.w-50 {
    width: 50%;
}

.skeleton.w-60 {
    width: 60%;
}

.skeleton.w-70 {
    width: 70%;
}

.skeleton.w-80 {
    width: 80%;
}

.skeleton.w-90 {
    width: 90%;
}

.skeleton.w-100 {
    width: 100%;
}

.skeleton.h-1 {
    height: 4px;
}

.skeleton.h-2 {
    height: 8px;
}

.skeleton.h-3 {
    height: 12px;
}


.skeleton.h-4 {
    height: 16px;
}

.skeleton.h-5 {
    height: 20px;
}

.skeleton.h-6 {
    height: 24px;
}

.skeleton.h-7 {
    height: 28px;
}

.skeleton.h-8 {
    height: 32px;
}

.skeleton.h-9 {
    height: 36px;
}

.skeleton.h-10 {
    height: 40px;
}

.skeleton.h-11 {
    height: 44px;
}

.skeleton.h-12 {
    height: 48px;
}

.skeleton.h-13 {
    height: 52px;
}

.skeleton.h-14 {
    height: 56px;
}

.skeleton.h-15 {
    height: 60px;
}

.skeleton.rounded-1 {
    border-radius: 4px;
}

.skeleton.rounded-2 {
    border-radius: 8px;
}

.skeleton.rounded-3 {
    border-radius: 12px;
}

.skeleton.rounded-full {
    border-radius: 9999px;
}