@import url("https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    @layer components {
    * {
        font-family: "Prompt", sans-serif;
    }

    ::-webkit-scrollbar {
        display: none;
        -ms-overflow-style:
            none;
        scrollbar-width: none;
    }

    body {
        @apply bg-gradient-to-t from-[#19b6bc] via-[#18a6b3] to-[#19b6bc];
    }

    .card_form_input {
        @apply w-4/5 md:w-3/5 lg:w-96 p-4 bg-gray-200 rounded-lg shadow-lg;
    }

    .box-form-input {
        @apply w-full h-[45px] bg-[#ecf0f3] rounded-3xl p-3;
        box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;
    }

    .input_form {
        @apply w-full h-full bg-transparent border-none outline-none text-black px-2 text-base;
    }

    .form_input {
        @apply w-full h-9 lg:h-8 px-2 lg:px-3 py-1 lg:py-2 rounded-lg text-[10px] border border-gray-400;
    }

    .btn_mini {
        @apply w-auto h-7 lg:h-6 rounded-lg p-1 text-[10px] border border-gray-400;
    }

    .input_form_file {
        @apply block w-full h-9 px-2 py-1 text-xs font-normal text-black bg-white bg-clip-padding border border-solid border-gray-300 rounded-md transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none;
    }

    .input_textarea {
        @apply w-full h-auto px-2 py-1 bg-transparent rounded border border-solid border-gray-300 outline-none text-xs;
    }

    .textAlert {
        @apply text-[10px] text-red-600;
    }

    .btn_sign_in {
        @apply w-full h-[40px] bg-[#18a6b3] hover:bg-[#19b6bc] text-white rounded-3xl;
    }

    .box_how_press_pin {
        @apply w-full h-auto flex justify-center;
    }

    .circle_position_1,
    .circle_position_2,
    .circle_position_3,
    .circle_position_4,
    .circle_position_5,
    .circle_position_6 {
        @apply w-4 h-4 bg-transparent border-2 border-black rounded-full mx-1;
    }

    .box_number_pin {
        @apply w-20 h-20 flex justify-center items-center text-xl bg-slate-200 text-gray-500 active:text-[#292929] active:shadow-none rounded-full cursor-pointer select-none;
        box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;
    }

    .header_page {
        @apply w-full h-[40px] bg-[#18a6b3] text-white flex justify-between items-center p-2;
    }

    .footer_memnu {
        @apply fixed left-0 bottom-0 w-full h-auto overflow-auto;
    }

    .panel_status_dashboard {
        @apply w-full h-auto p-[15px] bg-white hover:bg-slate-100 text-gray-500 flex justify-between items-center rounded cursor-pointer shadow-md;
    }

    .panel_page {
        @apply w-full h-auto bg-[#465760] text-white text-xs rounded-2xl m-1 p-1;
    }

    .menu_bottom {
        @apply w-full h-auto list-none flex justify-start;
    }

    .sub_link_menu {
        @apply relative xl:w-full flex flex-wrap items-end;
    }

    .tag_a {
        @apply w-[180px] xl:w-full h-[50px] block;
    }

    .nav_link {
        @apply flex justify-center items-center w-full h-full bg-gradient-to-t from-[#19b6bc] via-[#18a6b3] to-[#19b6bc] hover:bg-gray-900 text-white hover:text-gray-100 text-xs border-2 border-slate-400;
    }

    .nav_link_active {
        @apply bg-gray-900;
    }

    .dropdown_menu {
        @apply relative hidden left-0 xl:left-auto w-[180px] bg-gray-900 text-white;
    }

    .drop_menu_link {
        @apply block p-2 text-xs hover:text-yellow-400 border border-slate-200 hover:bg-gray-600 cursor-pointer;
    }

    .drop_menu_link:hover::before {
        content: ">> ";
    }

    .drop_menu_link_active {
        @apply bg-gray-600 text-yellow-400;
    }

    .drop_menu_link_active::before {
        content:">> ";
    }

    table {
        @apply border-collapse;
    }

    th,
    td {
        @apply p-2 border border-collapse border-stone-500;
    }

    tr:nth-child(even) {
        @apply bg-slate-300;
    }

    th {
        @apply bg-slate-600 text-white;
    }

    .label_input {
        @apply text-[12px] text-gray-600;
    }

    .grid_check_privilege {
        @apply grid grid-cols-3 md:grid-cols-6 xl:grid-cols-10 gap-1 text-[8px] lg:text-xs;
    }

    .loadingPage {
        @apply hidden fixed z-50 top-0 left-0 bg-slate-700;
    }

    .loadingContent {
        @apply w-screen h-screen flex justify-center items-center;
    }

    .body_main_page {
        @apply overflow-auto mb-10 w-screen h-screen;
    }

    .btn_search {
        @apply form_input bg-green-600 hover:bg-green-500 text-white;
    }

    .btn_add {
        @apply form_input bg-indigo-600 hover:bg-indigo-500 text-white;
    }
    .display_car {
        margin-top: 0.25rem;
        display: -webkit-box;
        width: 100vw;
        overflow-x: scroll;
        padding: 0.25rem;
    }
    .pick_item_car {
        @apply w-[225px] p-1 rounded-md border bg-gray-300 hover:bg-green-300 border-gray-600 hover:border-green-500 cursor-pointer m-1;
    }
    .pick_item_car_active {
        @apply bg-green-400 border-green-600;
    }
    .btn-sm {
        @apply text-xs;
    }
}