@layer utilities {
    .card-body {
        @apply shadow-md rounded-md overflow-hidden text-center p-0;
    }

    .card-header {
        @apply py-3 px-5 bg-gray-100;
    }

    .card-title {
        @apply text-xl font-semibold mb-2;
    }

    .card-content {
        @apply p-5 bg-white;
    }

    .card-content>p {
        @apply mb-4;
    }

    .card-footer {
        @apply py-3 px-5 bg-gray-100;
    }

    .ui-accordion h3.ui-accordion-header {
        @apply text-xl font-medium bg-white hover:bg-gray-100 hover:bg-opacity-50 duration-300 p-3 rounded-lg flex justify-between;
    }

    .ui-accordion div.ui-accordion-content {
        @apply text-xl font-medium bg-white bg-gray-100 bg-opacity-50 duration-300 p-3 rounded-lg rounded-b-none flex justify-between;
    }

    .btn-hamburger {
        @apply inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition;
    }

    .nav-item-active {
        @apply block pl-3 pr-4 py-2 border-l-4 border-indigo-400 text-base font-medium text-indigo-700 bg-indigo-50 focus:outline-none focus:text-indigo-800 focus:bg-indigo-100 focus:border-indigo-700 transition;
    }

    .nav-item-inactive {
        @apply block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-white hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition;
    }

    .badge-base {
        @apply text-xs px-2 font-medium text-white rounded-full py-0.5;
    }

    .badge-info {
        @apply text-xs px-2 font-medium bg-blue-500 text-white rounded-full py-0.5;
    }

    .badge-success {
        @apply text-xs px-2 font-medium bg-green-500 text-white rounded-full py-0.5;
    }

    .badge-warning {
        @apply text-xs px-2 font-medium bg-yellow-500 text-white rounded-full py-0.5;
    }

    .badge-danger {
        @apply text-xs px-2 font-medium bg-red-500 text-white rounded-full py-0.5;
    }

    .info-base {
        @apply block text-sm text-white h-10 flex items-center p-4 rounded-md;
    }

    .info-info {
        @apply block text-sm text-white bg-blue-500 h-10 flex items-center p-4 rounded-md;
    }

    .info-success {
        @apply block text-sm text-white bg-green-500 h-10 flex items-center p-4 rounded-md;
    }

    .info-warning {
        @apply block text-sm text-white bg-yellow-500 h-10 flex items-center p-4 rounded-md;
    }

    .info-danger {
        @apply block text-sm text-white bg-red-500 h-10 flex items-center p-4 rounded-md;
    }

    .info-border-base {
        @apply block text-sm text-indigo-600 bg-opacity-10 border border-indigo-400 h-10 flex items-center p-4 rounded-md;
    }

    .info-border-info {
        @apply block text-sm text-blue-600 bg-blue-500 bg-opacity-10 border border-blue-400 h-10 flex items-center p-4 rounded-md;
    }

    .info-border-success {
        @apply block text-sm text-green-600 bg-green-500 bg-opacity-10 border border-green-400 h-10 flex items-center p-4 rounded-md;
    }

    .info-border-warning {
        @apply block text-sm text-yellow-600 bg-yellow-500 bg-opacity-10 border border-yellow-400 h-10 flex items-center p-4 rounded-md;
    }

    .info-border-danger {
        @apply block text-sm text-red-600 bg-red-500 bg-opacity-10 border border-red-400 h-10 flex items-center p-4 rounded-md;
    }
/*
    .input-disabled {
        @apply bg-gray-100 !important;
    }
*/
    .notif-badge {
        @apply absolute text-white top-auto right-auto bottom-0 left-0 -translate-x-2/4 translate-y-1/2 rotate-0 skew-x-0 skew-y-0 scale-x-100 scale-y-100 p-1 pl-2 pr-2 text-xs rounded-full z-10
    }

    .notif-bg {
        @apply px-4 py-3 flex items-center justify-center text-center rounded-lg shadow-lg
    }

    .short-frame-body {
        @apply block rounded-lg shadow-lg bg-white;
    }

    .short-frame-bg {
        @apply overflow-hidden rounded-t-lg h-28;
    }

    .short-frame-content {
        @apply w-24 -mt-12 overflow-hidden border border-2 border-white rounded-full mx-auto bg-white;
    }

    .short-frame-title {
        @apply text-2xl font-semibold mb-4;
    }
}