/* Row of input fields */
.inputs-row {
  border: 2px solid #ccc;
  border-radius: 5px;
  display: flex;
  margin-top: 10px;
}

/* Input field styles */
.input-field {
  width: 50px;
  height: 50px;
  margin: 8px;
  text-align: center;
  border: 2px solid #ccc;
  border-radius: 5px;
  font-size: 24px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-family: inherit;
  color: white;
  font-weight: bold;
}

/* Dashed border when dragging over input field */
.input-field.over {
  border: 2px dashed #ccc;
}

/* Styles for filled input fields */
.input-field.filled {
  animation: fillAnimation 0.5s ease;
  background-color: #ccc;
  border: 2px solid #0c0c0c;
  cursor: pointer;
}

/* Animation for filling input fields */
@keyframes fillAnimation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes wobble {
  0%,
  100% {
    transform: translateX(0%);
    transform-origin: 50% 50%;
  }

  15% {
    transform: translateX(-9px) rotate(-4deg);
  }

  30% {
    transform: translateX(4px) rotate(4deg);
  }

  45% {
    transform: translateX(-9px) rotate(-3.1deg);
  }

  60% {
    transform: translateX(3px) rotate(2deg);
  }

  75% {
    transform: translateX(-1px) rotate(-1deg);
  }
}

.redBorder {
  border: 2px solid red;
}

.wobbleAnimation {
  animation: wobble 0.8s ease-in-out 1; /* Wackelanimation für 1 Iterationen */
}