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

@layer utilities {

    body {
        @apply text-gray-800;
    }

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

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

    .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-700 p-2 font-bold;
    }
    .panel-body {
        @apply p-2;
    }

    .alert-info {
        @apply text-blue-900 border-blue-900 bg-blue-200 rounded-lg p-4;
    }

    .active, .collapse-button:hover {
        background-color: #318ddc;
    }

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

    .expanded .collapse-title::after  {
        content: "\2212";
    }

    .collapsed {
        padding: 0px 15px 0px 15px;
    }

    .collapsible {
        max-height: 0px;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
    }

    label {
        @apply font-bold;
    }

    input {
        @apply rounded-lg;
    }

    .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;
    }
}