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

.disabled {
    cursor: not-allowed;
    pointer-events: none;
    color: #6d6d6d;
    background-color: #d6d6d6;
}
@layer base {
    .app-bg-clr {
        background-color: #f3f4f6;
    }

    .app-bg-blue-75 {
        background-color: #e0e7ff;
    }

    .app-bg-blue-300 {
        background-color: #0572E6;
    }

    .app-bg-blue-400 {
        background-color: #0568d1;
    }

    .app-bg-blue-800 {
        background-color: #016de0;
    }

    .app-color-blue-300 {
        color: #0572E6;
    }

    .app-color-blue-800 {
        color: #016de0;
    }

    .app-border-blue-300 {
        border-color: #0572E6;
    }

    .app-input {
        @apply placeholder-gray-500 relative block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 text-gray-900 focus:outline-none focus:app-border-blue-300 focus:z-10 focus:ring-1 sm:text-sm}

    .input-error {
        @apply focus:border-red-700}

    .img {
        @apply absolute inset-0 h-full w-full object-cover;
    }

    h2 {
        @apply mt-6 text-3xl font-bold text-gray-900;
    }

    .btn {
        @apply app-bg-blue-300 border-transparent ml-3 inline-flex justify-center rounded-md border px-4 py-2 text-sm font-medium text-white shadow-sm hover:app-bg-blue-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-600}

    .btn-indigo {
        @apply border-transparent ml-3 inline-flex justify-center rounded-md border bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500}

    .btn-white {
        @apply ml-3 inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400}

    .btn-danger {
        @apply inline-flex items-center justify-center rounded-md border border-gray-300 bg-red-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-red-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-700}

    .btn-bg-light {
        @apply border-transparent inline-flex items-center justify-center rounded-md border bg-indigo-100 px-4 py-2 text-base font-medium text-blue-800 hover:bg-indigo-200 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-600}

    .btn-sm {
        @apply h-7 px-2.5}

    /* .disabled {
        @apply cursor-not-allowed rounded bg-blue-500 px-4 py-2 font-bold text-white opacity-75} */
}

@layer components {


    .main-container {
        @apply mx-auto w-full max-w-sm;
    }

    .height {
        @apply flex h-full min-h-full}

    .main {
        @apply flex flex-1 flex-col justify-center px-4 sm:px-6 lg:flex-none lg:px-20 xl:px-24;
    }

    .label {
        @apply block text-sm font-medium text-gray-700;
    }

    .input {
        @apply placeholder-gray-400 block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm;
    }

    /* .btn {
        @apply border-transparent flex w-full justify-center rounded-md border bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
    } */

    .active-tab {
        @apply mt-12 mr-8 flex cursor-pointer items-center border-b-2 border-blue-500 pb-2 text-indigo-600 md:mt-0;
    }

    .non-active-tab {
        @apply border-transparent mt-12 mr-8 flex cursor-pointer items-center text-gray-500 md:mt-0;
    }

    .svg {
        @apply h-6 w-6 flex-shrink-0 text-gray-400 group-hover:mr-3;
    }

    .svg-a {
        @apply flex items-center rounded-md px-2 py-2 text-sm font-medium text-gray-600 hover:text-gray-900;
    }


}

.disabled {
    cursor: not-allowed;
    pointer-events: none;
    color: #6d6d6d;
    background-color: #d6d6d6;
}

.animate-spin {
    animation: spin 1s linear infinite;

    @keyframes spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }
}

.notification {
    animation: notification .3s forwards;
}

@keyframes notification {
    from {
        transform: translateX(100px);
    }

    to {
        transform: translateX(0);
    }

    enter {}
}