@tailwind base;

/* Write your own custom base styles here */

/* Start purging... */
@tailwind components;
/* Stop purging. */

/* Your own custom utilities */

.wrapper {
  @apply mx-3 flex flex-col min-h-screen;
}

@screen sm {
  .wrapper {
    @apply w-3/4 max-w-xl m-auto;
  }
}

.main {
  @apply flex-grow;
}

.footer {
  @apply mt-5 mb-2;
}

.form {
  @apply w-full bg-blue-100 p-6 rounded;
}

.fsw {
  @apply flex flex-wrap -mx-3 mb-2;
}

.fs {
  @apply w-full px-3 mb-2;
}

.flabel {
  @apply block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2;
}

.input-text {
  @apply appearance-none bg-gray-100 text-gray-700 border rounded py-2 px-3 mb-3 leading-tight w-full;
}

.input-text:disabled {
  @apply bg-gray-300 cursor-not-allowed;
}

.input-text:focus {
  @apply outline-none bg-white;
}

.input-text.input-changed:invalid {
  @apply border-red-500;
}

.ibtn {
  @apply py-2 px-2 text-gray-400 w-10 h-10;
}

.ibtn:hover {
  @apply text-gray-500;
}

.ibtn:active {
  @apply text-gray-800;
}

.btn {
  @apply font-bold py-2 px-4 rounded mx-2;
}

.btn:first-child {
  @apply ml-0;
}

.btn-blue {
  @apply bg-blue-500 text-white;
}

.btn-blue:hover {
  @apply bg-blue-700;
}

.btn-red {
  @apply bg-red-500 text-white;
}

.btn-red:hover {
  @apply bg-red-700;
}

.btn-gray {
  @apply bg-gray-500 text-white;
}

.btn-gray:hover {
  @apply bg-gray-700;
}

.link {
  @apply font-medium text-blue-500 underline;
}

.link:hover {
  @apply text-blue-700;
}

/* Start purging... */
@tailwind utilities;
/* Stop purging. */