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



@layer components {

    h1 {
        @apply text-center font-extrabold text-4xl p-5
    }

    img {
        @apply mx-auto
    }

    h2 {
        @apply font-bold text-2xl;
    }

    h3 {
        @apply font-bold text-3xl;
    }

    h4 {
        @apply font-bold text-xl;
    }

    .card {
        @apply mb-16 mt-10 p-10 bg-white rounded-xl shadow-2xl
    }

    .yellow-card {
        @apply card shadow-yellow-500/50
    }

    .blue-card {
        @apply card shadow-blue-500/50
    }

    .cyan-card {
        @apply card shadow-cyan-500/50
    }

    .green-card {
        @apply card shadow-green-500/50
    }

    .pink-card {
        @apply card shadow-pink-500/50
    }

    .btn-primary {
        @apply rounded-lg py-3 px-5 bg-cyan-500 hover:bg-cyan-600 focus:bg-cyan-700 text-white inline-block font-medium cursor-pointer;
    }

    .btn-secondary {
        @apply ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium;
    }

    .form-field {
        @apply block rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0 px-3 py-2 mt-2 w-full;
    }

    .checkbox-field {
        @apply h-5 w-5 rounded border-transparent bg-gray-200 text-cyan-600 focus:border-cyan-300 focus:ring focus:ring-offset-0 focus:ring-cyan-200 focus:ring-opacity-50;
    }

    .radio-field-yes {
        @apply rounded-full mr-4 h-5 w-5 border-transparent bg-gray-200 text-green-600 focus:border-green-300 focus:ring focus:ring-offset-0 focus:ring-green-200 focus:ring-opacity-50;
    }

    .radio-field-no {
        @apply rounded-full mr-4 h-5 w-5 border-transparent bg-gray-200 text-red-600 focus:border-red-300 focus:ring focus:ring-offset-0 focus:ring-red-200 focus:ring-opacity-50;
    }

    .date-select-fields {
        @apply grid grid-cols-3 grid-rows-1 gap-4
    }

    .field-container {
        @apply my-5
    }

    .invalid {
        @apply border-pink-500 invalid:border-pink-500 invalid:text-pink-600 focus:invalid:border-pink-500 focus:invalid:ring-pink-500;
    }

    .invalid {
        @apply border-pink-500;
    }

    .error {
        /* col and row for form.date_select grids */
        @apply text-pink-500 col-start-1 col-end-3 row-start-2 order-last;
    }
}


/*
 * 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.
 *


 */