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



@layer components {
  .card {
    @apply rounded-lg bg-white p-5 m-4 shadow;
  }

  .card-flex {
    @apply flex items-center justify-between;
  }

  .btn {
    @apply shadow text-white focus:ring-4 font-medium
           rounded-lg text-sm px-5 py-3 mb-4 lg:ml-1 
           focus:outline-none whitespace-nowrap;
  }

  .btn-default {
    @apply bg-blue-700
           hover:bg-blue-800
           focus:ring-blue-300;
  }

  .btn-light {
    @apply text-black
           bg-gray-200
           hover:bg-gray-300
           focus:ring-gray-400;
  }

  .btn-red {
    @apply bg-red-700
           hover:bg-red-800
           focus:ring-4
           focus:ring-red-300;
  }

  .page {
    @apply relative block py-1.5 px-3 rounded border-0 bg-transparent outline-none transition-all duration-300 rounded text-gray-800 hover:text-gray-800 hover:bg-gray-200 focus:shadow-none;
  }

  .current {
    @apply relative block py-1.5 px-3 rounded border-0 bg-blue-600 outline-none transition-all duration-300 rounded text-white hover:text-white hover:bg-blue-600 shadow-md focus:shadow-md;
  }

  hr {
    @apply w-48 h-1 mx-auto my-4 bg-gray-100 border-0 rounded md:my-10 dark:bg-gray-700;
  }
}


/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */