@tailwind base;
@tailwind components;
@tailwind utilities;


form#form p, form#form div {
  @apply flex flex-col;
}

form#form label {
  @apply text-gray-700 font-bold text-sm;
}

form#form input:not([type='checkbox']),
textarea {
  @apply p-1 ps-2 transition ease-in-out focus:outline-none border-b-2 border-b-gray-400 mb-2 focus:bg-gray-100 focus:border-gray-600 appearance-none;
}

.error {
  @apply !bg-red-200 ring-2 ring-red-400;
}

form#form select {
  @apply p-2 ps-2 rounded-md bg-gray-100;
}

select.form {
  @apply p-2 ps-2 rounded-md bg-gray-200;
}

.dropdown:focus-within .dropdown-menu {
  /* @apply block; */
  display: block;
}

@layer components {
  button {
    @apply std-btn
  }

  .prose-with-table {
    @apply prose-table:max-w-screen-2xl prose-table:text-center max-w-screen-xl w-full prose-td:py-1 prose-td:px-2 prose-th:py-1 prose-th:px-2 prose-td:align-middle prose-th:align-middle prose-thead:mx-auto;
  }

  .std-btn {
    @apply inline-flex text-center justify-center items-center no-underline px-3 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md hover:text-gray-700 focus:outline-none focus:border-blue-300 active:bg-gray-50 active:text-gray-800;
  }

  .std-menu-item {
    @apply text-gray-700 flex justify-between w-full px-4 py-2 text-sm leading-5 text-left
  }
}