/* ============================================================
   Raktárkezelő — CSAK az ELSŐ lapbetöltés jelzője
   ------------------------------------------------------------
   Külön, apró fájl, és a főoldal fejlécében ELSŐNEK töltődik be
   a bootstrap.min.css ELŐTT — így a jelző stílusa akkor is kész,
   amikor a nagy stíluslap még úton van.
   A jelölés a layout/main.php tetején áll, és a betöltés végén
   az app.js veszi ki a lapról. A fetch-es pörgőhöz semmi köze:
   az a components/loading.php és az app.js spinner() dolga.
   ============================================================ */

/* elso betoltés js nélkül:*/
.loading-animation-container {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 9999;
}

.loading-animation {
   border: 8px solid rgba(0, 0, 0, 0.1);
   border-left-color: #09f;
   border-radius: 50%;
   width: 60px;
   height: 60px;
   animation: loading-animation 1s linear infinite;
}

@keyframes loading-animation {
   to {
      transform: rotate(360deg);
   }
}

body.first-loading-background::before {
   content: '';
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background:linear-gradient(135deg, #ff0000 0, #ff0000 28px, #ffffff 29px, #ffffff 55px, #29ab00 56px, #29ab00 80px, #3f3f3f 62px);
   z-index: 9998;
}