@import 'tailwindcss';
@import './extra.css';
@import './../../node_modules/@fortawesome/fontawesome-free/css/all.min.css';
@source "./../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views";
@source "../views";
@custom-variant dark (&:where(.dark, .dark *));
@theme {
  --color-primary: #3c8dbc;
  --color-secondary: #F6F6F7;
}

h1 {
    @apply text-4xl text-gray-900 dark:text-gray-300;
}

h2 {
    @apply py-2 text-3xl text-gray-900 dark:text-gray-300;
}

h3 {
    @apply py-2 text-2xl text-gray-900 dark:text-gray-300;
}

h4 {
    @apply py-2 text-xl text-gray-900 dark:text-gray-300;
}

p {
    @apply py-2 text-gray-600 dark:text-gray-300;
}

p a {
    @apply text-sky-600 dark:text-sky-300;
}

hr {
    @apply border-t border-gray-300;
}

/** Tables */

table {
    @apply w-full table-auto rounded mb-5;
}

thead tr {
    @apply px-6 py-3 text-left text-xs font-medium bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-200 uppercase;
}

thead th {
    @apply px-2 py-3;
}

thead tr a {
    @apply text-sky-600 dark:text-sky-300;
}

tbody tr {
    @apply bg-white dark:bg-gray-800 dark:border-gray-700 border-b border-gray-200;
}

tbody td {
    @apply px-2 py-4 whitespace-nowrap text-left text-gray-700 dark:text-gray-300;
}

tbody td a {
    @apply text-sky-600 dark:text-sky-300;
}

.error {
    @apply text-red-500 dark:text-red-300
}

.card {
    @apply bg-white dark:bg-gray-800 dark:text-white shadow rounded-md p-5 my-5;
}