.data-fetching
{
	position: relative;
    overflow: hidden;
    border-radius: 5px;
	color: transparent !important;
	user-select: none;
}

.data-fetching::before
{
    content: "";
    border-radius: 5px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.11) linear-gradient(90deg,
        transparent 0px,
        rgba(255, 255, 255, 0.3) 30px,
        transparent 60px);
    background-size: 200px 100%;
	animation: data-fetching-animation 1s cubic-bezier(0.6, 0, 0.2, 1) infinite;
}

@keyframes data-fetching-animation {
    0% {
        background-position: -100px 0;
    }
    100% {
        background-position: 500px 0;
    }
}

.data-fetch-success
{
	border-radius: 5px;
    animation: data-fetch-success-animation 1.5s ease;
}

@keyframes data-fetch-success-animation
{
    0%
	{
    }
    50%
	{
        background-color: #d4edda;
        color: #28a745;
    }
    100%
	{
    }
}

.data-fetch-error
{
	color: #dc3545 !important;

	border-radius: 5px;

    animation: data-fetch-error-animation 1.5s ease;
}

@keyframes data-fetch-error-animation
{
    0%, 100%
	{
        color: #dc3545;
    }
    50%
	{
        background-color: #f8d7da;
    }
}

.data-fetching.p50
{
	padding: 0 calc(50% / 2);
}

.data-fetching.p100
{
	padding: 0 calc(100% / 2);
}

.data-fetching.w10
{
	padding: 0 5px;
}

.data-fetching.w20
{
	padding: 0 10px;
}

.data-fetching.w100
{
	padding: 0 50px;
}

.data-fetching.w200
{
	padding: 0 100px;
}