@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;	
}

/* ------------------------------------ Dropzone ------------------------------------------------------------*/
  #dropzone{
  	 width: 150px;
  	 height: 150px;
     border: 2px dashed #bbb;
     border-radius: 10px;
     padding: 30px;
     text-align: center;
     color: #555;
     transition: 0.2s;
   }
   
  .preview{
     border: 2px dashed #bbb;
     border-radius: 10px;
     padding: 0;
  	 background: none;
     text-align: center;
     color: #555;
     transition: 0.2s;
   	 width: 150px;
  	 height: 150px;
   }
   
    .preview img {
      width:  100%;
      height: 100%;
      object-fit: cover;     /* passt Bildausschnitt an, füllt Fläche */
	  border: none;
 	  background: none;
      display: block;

    }
   
   #dropzone.dragover {
     border-color: #2a9;
     background: #f9fff9;
     color: #060;
   }
   .result { margin-top: 1rem; }
   .ok { color: #0a7; }
   .err { color: #c33; }
   
 /*
  * --------------------------------- Bilder zoomen --------------------------------*/
.zoomable {
    transition: transform 0.4s ease;  /* sanfte Animation */
    transform-origin: right bottom;  /* von der Mitte vergrößern */
	position: sticky;
}

.card, .card-content, .card-action {
    overflow: visible !important;
	z-index: 1 !important;
}

.zoomable.hovered {
    transform: scale(4);  /* 300% = Faktor 3 */
	z-index: 999999999999;
	position: sticky;
}
  */