/** FILL KEY FRAMES **/

.hovrFillPulse {
  animation-duration: var(--hovr-fill-duration) !important;
  animation-iteration-count: var(--hovr-fill-iteration-count) !important;
  animation-name: hovrPulse;
}

@keyframes hovrPulse {
  0% {
      transform: scale(1);
  }

  50% {
      transform: scale(.95);
  }

  100% {
      transform: scale(1);
  }
}

.hovrFillOpacity {
  animation-duration: var(--hovr-fill-duration) !important;
  animation-iteration-count: var(--hovr-fill-iteration-count) !important;
  animation-name: hovrFade;
}

@keyframes hovrFade {
  0% {
      opacity: 1;
  }

  50% {
      opacity: .6;
  }

  100% {
    opacity: 1;
  }
}

.hovrFillShake {
  animation-duration: var(--hovr-fill-duration) !important;
  animation-iteration-count: var(--hovr-fill-iteration-count) !important;
  animation-name: hovrShake;
}
@keyframes hovrShake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.FillStyleEditor {
  outline: none !important;
  background-color: #191D20;
  position: absolute;
  border-radius: 8px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  height: auto;
  max-height: 700px;
  display: flex;
  flex-direction: row;
  z-index: 99999;
}