@tailwind base;

@tailwind components;

@tailwind utilities;

[x-cloak]{
  display:none;
}

svg {
    width:100%;
  }
  .wave {
    animation: wave 3s linear;
    animation-iteration-count:infinite;
    fill: #0069ff;
  }

  #wave2 {
    animation-duration:5s;
    animation-direction: reverse;
    opacity: .6
  }
  #wave3 {
    animation-duration: 7s;
    opacity:.3;
  }
  @keyframes drop {
    0% {
      transform: translateY(80%);
      opacity:.6;
    }
    80% {
      transform: translateY(80%);
      opacity:.6;
    }
    90% {
      transform: translateY(10%) ;
      opacity:.6;
    }
    100% {
      transform: translateY(0%) scale(1.5);
      stroke-width:0.2;
      opacity:0;
    }
  }
  @keyframes wave {
    to {transform: translateX(-100%);}
  }

  .form-control{
    @apply form-input w-full;
  }

/****** Form Input CLASSES **********/

.form-input, .form-textarea, .form-select {
    @apply appearance-none bg-white border border-gray-400 rounded-md py-2 px-3 text-base leading-normal transition duration-150 ease-in-out focus:outline-none focus:ring focus:ring-opacity-30 focus:ring-wave-500 focus:border-wave-400;
}

.form-select{
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7 7l3-3 3 3m0 6l-3 3-3-3' stroke='%239fa6b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right .5rem center;
    background-size: 1.5em 1.5em;
    padding:.5rem 2.5rem .5rem .75rem;
    background-repeat: no-repeat;
}