/* ----------------------------- SKELETON LOADER ---------------------------- */
.skeleton-loader {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.skeleton-loader .block {
	width: 100%;
}

.skeleton-loader .block .circle,
.skeleton-loader .block .line {
	position: relative;
	overflow: hidden;
	float: left;
	background-color: inherit;
}

/* circle skeleton */
.skeleton-loader .block .circle {
	border-radius: 50%;
}

/* line skeleton */
.skeleton-loader .block .line {
	border-radius: 7px;
}
/* -------------------------------------------------------------------------- */

/* ---------------- SKELETON LOADER ANIMATION PSEUDO ELEMENT ---------------- */
.skeleton-loader .block .circle,
.skeleton-loader .block .line {
	background-color: var(--panel-color);
}
.skeleton-loader .block .circle::after,
.skeleton-loader .block .line::after {
	content: "";
	display: block;
	position: absolute;
	background: linear-gradient(
		90deg,
		transparent,
		var(--panel-alt-color),
		transparent
	);
	animation: loading 1.3s infinite;
	transform: translateX(-100%);
	height: 100%;
	width: 100%;
}
/* -------------------------------------------------------------------------- */

/* ----------------------- LOADING KEYFRAME ANIMATION ----------------------- */
@keyframes loading {
	100% {
		transform: translateX(100%);
	}
}
/* -------------------------------------------------------------------------- */

/* ---------------------------- PROJECT SKELETONS --------------------------- */
.card-row-small.skeleton-loader > div {
	padding: 0 0 0 19px;
	height: 89px;
}
/* -------------------------------------------------------------------------- */