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

[x-cloak] {
    display: none;
}

body::-webkit-scrollbar {
    width: 0.3em;
}

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    outline: 1px solid slategrey;
    border-radius: 4px;
}

.custom-input {
    width: 100%;
    padding: 8px 0;
    /* Adjust padding to match the input look */
    border: none;
    border-bottom: 2px solid #ccc;
    /* Bottom border */
    outline: none;
    font-size: 16px;
    /* Adjust the font size */
    transition: border-color 0.3s ease;
}

.custom-input::placeholder {
    color: #aaa;
    /* Placeholder text color */
    font-style: italic;
}

.custom-input:focus {
    border-bottom: 2px solid #007bff;
    /* Change border color on focus */
    outline: none;
}

.pdf-input {
    width: 60%;
    border: none;
    border-bottom: 1.2px solid #0c0303;
    outline: none;
    font-size: 12px;
    /* Adjust the font size */
    transition: border-color 0.3s ease;
    font-style: bolder !important;
    color: #0c0303 !important;
}

.custom-select:focus,
.custom-textarea:focus {
    border-bottom: 2px solid #007bff;
}

@keyframes shake {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    50% {
        transform: translateX(5px);
    }
    75% {
        transform: translateX(-5px);
    }
    100% {
        transform: translateX(0);
    }
}

.shake {
    animation: shake 0.5s;
    border-bottom: 2px solid red;
}