/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;


[x-cloak] {
    display: none !important;
}

html {
    word-spacing: 1px;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}

.shadow-scroll-x {
    overflow-x: auto;
    background-color: white;
    background-image: linear-gradient(to right, white 0%, white 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(to left, white 0%, white 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(to right, rgba(0, 0, 0, 0.1) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(to left, rgba(0, 0, 0, 0.1) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%);
    background-repeat: no-repeat;
    background-position: left center, right center, left center, right center;
    background-size: 10px 100%, 10px 100%, 10px 100%, 10px 100%;
    -webkit-overflow-scrolling: touch;
}

.shadow-scroll-x::-webkit-scrollbar {
    height: 10px;
    width: 10px;
    background-color: white;
}

.shadow-scroll-x::-webkit-scrollbar-thumb {
    background-color: #E0E0E0;
    border-radius: 5px;
    visibility: hidden;
    border: 2px solid white;
}

.shadow-scroll-x:hover::-webkit-scrollbar-thumb {
    visibility: visible;
}

.shadow-scroll-x::-webkit-scrollbar-button {
    display: none;
}

.custom-scrollbar {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #E0E0E0 transparent;
}

/* Webkit (Chrome, Edge, Safari) */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #E0E0E0;
    border-radius: 5px;
    border: 2px solid white;
    visibility: hidden;
}

.custom-scrollbar:hover::-webkit-scrollbar-thumb {
    visibility: visible;
}

.input-validation-error {
    @apply border-dekodiRed800 focus:border-dekodiRed800 active:border-dekodiRed800 focus:ring-0 !important;
}

@layer base {
    input, textarea, select {
        @apply appearance-none !border-gray-300 !rounded;
    }

    input:focus, textarea:focus {
        @apply outline-none ring-0 !border-gray-500;
        box-shadow: none !important;
    }

    input:focus-visible, textarea:focus-visible {
        @apply outline-none;
    }

    input:active, textarea:active {
        @apply outline-none ring-0 !border-gray-500;
        box-shadow: none !important;
    }
}

@layer utilities {
    .input-error {
        @apply border-dekodiRed800 focus:border-dekodiRed800 active:border-dekodiRed800 focus:ring-0;
    }
}

input[type="date"] {
    color: #111111;
}

input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
    color: #111111;
}

input[type="date"]:disabled,
input[type="date"][disabled] {
    color: #6b7280;
    opacity: 1;
}