/* Css per fatturazione ticket */


.fa-clock {
  animation: tickAndBounce 2s ease-in-out infinite;
}
.fa-circle-notch {
  animation: popIn 0.8s ease-out forwards, spin 1s linear infinite 0.8s;
}
@keyframes popIn {
  0% { opacity: 0; transform: scale(0.5) translateY(5px); }
  80% { opacity: 1; transform: scale(1.2) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes tickAndBounce {
  0% { transform: translateY(0) rotate(0deg); }
  20% { transform: translateY(-3px) rotate(0deg); } /* Rimbalzo */
  40% { transform: translateY(0) rotate(0deg); }
  60% { transform: rotate(-4deg); } /* Ticchettio */
  80% { transform: rotate(4deg); }
  100% { transform: rotate(0deg); }
}


.fa-lock {
  animation: lockAndShake 2s ease-in-out infinite;
}
@keyframes lockAndShake {
  0% { transform: translateY(0); }
  25% { transform: translateY(2px); } /* Simula la chiusura */
  50% { transform: translateY(0); }
  75% { transform: rotate(-3deg); } /* Oscillazione */
  85% { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}


.fa-file-invoice-dollar {
  animation: bounceAndShake 2s ease-in-out infinite;
}
.fa-check-circle {
  animation: popIn 0.8s ease-out forwards;
}
@keyframes popIn {
  0% { opacity: 0; transform: scale(0.5) translateY(5px); }
  80% { opacity: 1; transform: scale(1.2) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes bounceAndShake {
  0% { transform: translateY(0) rotate(0deg); }
  20% { transform: translateY(-3px) rotate(0deg); } /* Rimbalzo */
  40% { transform: translateY(0) rotate(0deg); }
  60% { transform: rotate(-4deg); } /* Oscillazione */
  80% { transform: rotate(4deg); }
  100% { transform: rotate(0deg); }
}

/* Css per manutenzioni */

.gear-container {
    position: relative;
    display: inline-block;
}

.gear-main {
    color: #FFC107;
    font-size: 20px;
}

.gear-small {
    color: #ffffff;
    font-size: 12px;
    position: absolute;
    top: -4px;
    color: #FFC107;
    border-radius: 50%;
    padding: 2px;
}

.rotate-clockwise {
    animation: rotate-clockwise 3s infinite linear;
}

.rotate-counterclockwise {
    animation: rotate-counterclockwise 3s infinite linear;
}

@keyframes rotate-clockwise {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes rotate-counterclockwise {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}



.trophy-container {
    position: relative;
    display: inline-block;
}

.trophy-main {
    color: #28a745;
    font-size: 20px;
    animation: bounce 1s ease-in-out infinite;
}

.sparkle {
    color: #ffffff;
    font-size: 10px;
    position: absolute;
    background-color: #28a745;
    border-radius: 50%;
    padding: 2px;
}

.sparkle-1 {
    top: -6px;
    right: -10px;
    animation: sparkle 1.2s ease-in-out infinite;
}


@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes sparkle {
    0% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1.2); }
    100% { opacity: 0; transform: scale(0.5); }
}