@CHARSET "UTF-8";

/* spin materialize icon */
span.spin
{
    animation: spin-animation 3s infinite;
    animation-timing-function: linear;
    display: inline-block;
}

@keyframes spin-animation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* schreibt in ein DIV wartende animiert dots*/
.dotswait {
  --s: 48px;
  width: var(--s);
  aspect-ratio: 2;  
  margin-left: 33%;
  --_g: #000 90%,#0000;
  background: 
    radial-gradient(farthest-side,var(--_g)) 0   50%/25% 50%,

    radial-gradient(farthest-side at bottom,var(--_g)) 50%  calc(50% - var(--s)/16)/25% 25%,
    radial-gradient(farthest-side at top   ,var(--_g)) 50%  calc(50% + var(--s)/16)/25% 25%,

    radial-gradient(farthest-side at bottom,var(--_g)) 100% calc(50% - var(--s)/16)/25% 25%,
    radial-gradient(farthest-side at top   ,var(--_g)) 100% calc(50% + var(--s)/16)/25% 25%;
  background-repeat: no-repeat;
  animation: d4 1s infinite;
}
@keyframes d4 {
    25%  {background-position:0    50%,50% 0,50% 100%,100% 0,100% 100%}
    50%  {background-position:100% 50%,0   0,0   100%,50%  0,50%  100%}
    75%,
    100% {background-position:100% 50%,0 calc(50% - var(--s)/16),0 calc(50% + var(--s)/16),50% calc(50% - var(--s)/16),50% calc(50% + var(--s)/16)}
}

.dotssleep {
  	width: 15px;
  	aspect-ratio: 1;
	margin-left: 33%;
  	border-radius: 50%;
  	animation: d5 1s infinite linear alternate;
	justify-content: center;
	align-items: center;
}
@keyframes d5 {
    0%  {box-shadow: 20px 0 #000, -20px 0 #0002;background: #000 }
    33% {box-shadow: 20px 0 #000, -20px 0 #0002;background: #0002}
    66% {box-shadow: 20px 0 #0002,-20px 0 #000; background: #0002}
    100%{box-shadow: 20px 0 #0002,-20px 0 #000; background: #000 }
}


/* ---------------------------------------------------------- DATA TABLES --------------------------------------*/
div.dataTables_length 
{
	max-width: 70px;
}

button.dt-button
{
	margin-top: 21px;
	left: 15px;	
}