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

@layer utilities {

    body {
        @apply text-gray-800;
    }

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

    h2 {
        @apply text-xl font-medium;
    }
    
    h3 {
        @apply text-lg font-medium;
    }

    .hide {
        display: none;
    }

    .btn {
        @apply text-sm font-medium rounded-md px-4 py-2 transition bg-gray-200 m-1;
    }
    .btn-sm {
        @apply text-xs font-medium rounded-md px-2 py-2 transition;
    }
    .btn-success {
        @apply text-white bg-green-500 hover:bg-green-700;
    }
    .btn-primary {
        @apply text-white bg-blue-500 hover:bg-blue-700;
    }
    .btn-link {
        @apply bg-gray-400 hover:bg-gray-200;
    }
    .panel {
        @apply block rounded-lg border border-gray-400 mb-2;
    }
    .panel-heading {
        @apply text-white bg-blue-500 hover:bg-blue-600 px-2 py-1.5;
    }
    .panel-body {
        @apply p-2;
        transition: max-height 0.2s ease-in;
        max-height: 0px;
    }
   
    .alert-info {
        @apply text-blue-900 border-blue-900 bg-blue-200 rounded-lg p-4;
    }

    .collapse-title:after {
        content: '\002B';
        color: white;
        font-weight: bold;
        float: right;
        margin-right: 5px;
    }

    .active .collapse-title:after  {
        content: '\2212';
    }

    label {
        @apply font-bold;
    }

    .form-group, .checkbox {
        @apply px-2 py-4;
    }

    .form-control {
        @apply block w-full rounded-md border-gray-300;
    }

    .help-block {
        @apply text-gray-500 text-sm;
    }

    .tip {
        @apply italic p-2;
    }

    .has-error {
        @apply bg-red-200;
    }
}