/*  *********************************************************** De styling van "Het Handje"   ***********************************************************    */
.input-hint-wrapper {
  position: relative;
  width: 100%;
}

.wijshandje {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  line-height: 1;
  pointer-events: none;
  animation: wiebel 1s infinite;
  opacity: 0.7;
  z-index: 2;
}

/* Zorg dat de tekst niet over het handje valt */
#inputValue {
  padding-left: 2.5rem;
}

/* ==========================  I => Een schrijvend en wiebelend handje  STAAT AAN ========================== */

@keyframes pulseWieg {
  0% {
    transform: translateY(-50%) scale(1) translateX(0);
  }

  25% {
    transform: translateY(-50%) scale(1.1) translateX(4px);
  }

  50% {
    transform: translateY(-50%) scale(1.2) translateX(0);
  }

  75% {
    transform: translateY(-50%) scale(1.1) translateX(-4px);
  }

  100% {
    transform: translateY(-50%) scale(1) translateX(0);
  }
}

.wijshandje {
  animation: pulseWieg 1.8s ease-in-out infinite;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  font-size: 1.5rem;
  pointer-events: none;
}

/* ==========================  II => Een alleen maar schrijvend handje STAAT UIT ========================== */
/*
        @keyframes wiebel {
            0% {
                transform: translateY(-50%) translateX(0);
            }

            50% {
                transform: translateY(-50%) translateX(4px);
            }

            100% {
                transform: translateY(-50%) translateX(0);
            }
        }
  */