@tailwind base;

@layer base {
    html {
        @apply text-neutral-800;

        /* Hiding Scrollbar */
        -ms-overflow-style: none;  /* IE 10+ */
        scrollbar-width: none;  /* Firefox */
    }
    * [dir='ltr'] {
        @apply font-sans !important;
    }

    *[dir='rtl'] {
        @apply font-serif !important;
    }
    html::-webkit-scrollbar {
        display: none;  /* Safari and Chrome */
    }

    html.dark {
        @apply text-neutral-50 bg-neutral-800;
    }

    p {
        @apply text-gray-900 dark:text-gray-100;
    }

    select {
        @apply mt-1
    }

}

@tailwind components;

@tailwind utilities;

.fancy-p {
    @apply p-6;
}

.test {
    @apply p-6 font-bold text-xl bg-amber-200 dark:bg-amber-700 text-red-600 dark:text-red-100;
}

.fancy-selector {
    @apply bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-purple-500 focus:border-purple-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-purple-500 dark:focus:border-purple-500
}
.fancy-selector-inline-textInput {
    @apply  bg-gray-50 border border-gray-300 border-r-0 text-gray-900 rounded-lg focus:ring-purple-500 ltr:rounded-r-none rtl:rounded-l-none focus:border-purple-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-purple-500 dark:focus:border-purple-500
}

.input-class{
    @apply block p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg w-full bg-gray-50 focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-purple-500 dark:focus:border-purple-500;
}

.ul-checkbox {
    @apply items-center w-full text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg lg:flex dark:bg-gray-700 dark:border-gray-600 dark:text-white
}
.li-checkbox {
    @apply w-full border-b border-gray-200 sm:border-b-0 sm:border-r dark:border-gray-600
}
.li-checkbox-input {
    @apply w-4 h-4 text-purple-600 bg-gray-100 border-gray-300 rounded focus:ring-purple-500 dark:focus:ring-purple-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500
}
.li-checkbox-label {
    @apply w-full py-3 ml-2 text-sm font-medium text-gray-900 dark:text-gray-300
}

.li-radio-input {
    @apply w-4 h-4 text-purple-600 bg-gray-100 border-gray-300 focus:ring-purple-500 dark:focus:ring-purple-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500
}
.li-radio-label {
    @apply w-full py-3 ml-2 text-sm font-medium text-gray-900 dark:text-gray-300
}
.ul-li-div-radio {
    @apply flex items-center pl-3
}



.table-thead {
    @apply text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400
}
.table-tr {
    @apply border-b dark:bg-gray-900 dark:border-gray-700
}
.table-th {
    @apply px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white
}
.table-td {
    @apply px-6 py-4
}

.card-header {
    @apply text-xl text-gray-900 dark:text-white
}
.card-subheader {
    @apply mb-2 ml-1 font-semibold text-gray-900 dark:text-white
}
.form {
    @apply mt-6 pt-0
}

/* VueDatePicker Dart Mode */
.dp__theme_dark{
    --dp-background-color:  #374151 !important;
    --dp-border-color: #4b5563 !important;
    --dp-primary-color: #642fd3 !important;
}
.dp__theme_light{
    --dp-primary-color: #642fd3 !important;
}