/* You can add global styles to this file, and also import other style files */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

html,
body {
    height: 100%;
}
body {
    margin: 0;
}

*:not(.material-icons) {
    font-family: "Sarabun" !important;
    font-size: 16px;
    // font-weight: 100;
    font-style: normal;
    line-height: 26px;
}

mat-icon {
    @apply cursor-pointer;
}

*:focus {
    outline: 0 !important;
}

select {
    @apply form-select appearance-none px-4 py-2 border focus:ring-gray-500 focus:border-gray-900 w-full border-gray-300 rounded-md focus:outline-none text-gray-600;
}

textarea {
    @apply form-textarea px-4 py-2 border focus:ring-gray-500 focus:border-gray-900 w-full border-gray-300 rounded-md focus:outline-none text-gray-600;
}

input {
    @apply form-input px-4 py-2 border focus:ring-gray-500 focus:border-gray-900 w-full border-gray-300 rounded-md focus:outline-none text-gray-600 disabled:opacity-50;
}

textarea.ng-invalid {
    @apply form-textarea px-4 py-2 border-2 focus:ring-red-300 focus:border-red-300 w-full border-red-300 rounded-md focus:outline-none text-gray-600;
}

input.ng-invalid {
    @apply form-input px-4 py-2 border-2 focus:ring-red-300 focus:border-red-300 w-full border-red-300 rounded-md focus:outline-none text-gray-600 disabled:opacity-50 ;
}

select.ng-invalid {
    @apply form-select appearance-none px-4 py-2 border-2 focus:ring-red-300 focus:border-red-300 w-full border-red-300 rounded-md focus:outline-none text-gray-600;
}

input::placeholder {
    @apply text-gray-400;
    line-height: 26px;
}

input:read-only {
    @apply bg-gray-300 cursor-pointer;
}

editor {
    @apply mt-2;
}

::-webkit-scrollbar {
    width: 5px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
}

::-webkit-scrollbar-track:horizontal {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:horizontal{
    background: #888;
    border-radius: 10px;
}

.custom-modalbox {
    mat-dialog-container {
        padding: unset;
    }
}

.tox-notifications-container {
    display: none !important;
}

.error-text{
    @apply text-red-500 text-xs
}

.search-button {
    @apply rounded h-10 text-white disabled:opacity-50;
    background: #54c6ec;
    min-width: 100px !important;
}

.confirm-button {
    @apply rounded h-10 text-white disabled:opacity-50;
    background: #609b35;
    min-width: 100px !important;
}

.payment-button {
    @apply rounded h-10 text-white disabled:opacity-50;
    background: #2a56c6;
    min-width: 100px !important;
}

.clear-button {
    @apply rounded h-10 text-white disabled:opacity-50;
    background: #576071;
    min-width: 100px !important;
}

.add-button {
    @apply rounded h-10 text-white disabled:opacity-50;
    background: #ec8d4b;
    min-width: 100px !important;
}

.copy-button {
    @apply rounded h-10 text-white disabled:opacity-50;
    background: #666666;
    min-width: 100px !important;
}

.copy-button-active {
    @apply rounded h-10 text-white disabled:opacity-50;
    background: #3176d7;
    min-width: 100px !important;
}

.cancel-button {
    @apply rounded h-10 text-white disabled:opacity-50;
    background: #9a9fa1;
    min-width: 100px !important;
}

.cancel-button-active {
    @apply rounded h-10 text-white disabled:opacity-50;
    background: #ec8d4b;
    min-width: 100px !important;
}

.delete-button {
    @apply rounded h-10 text-white disabled:opacity-50;
    background: darkred;
    min-width: 100px !important;
}

.delete-button-brown {
    @apply rounded h-10 text-white disabled:opacity-50;
    background: #666666;
    min-width: 100px !important;
}

.del-but{
    @apply rounded h-10 text-white disabled:opacity-50;
    background: #666666;
}

.add-but{
    @apply rounded h-10 text-white disabled:opacity-50;
    background: #ec8d4b;
}

.main {
    @apply bg-gray-200 p-3 space-y-4;
}

.title {
    @apply font-light text-xl;
}

.dafalut-page {
    @apply font-light text-2xl;
}

table {
    overflow-x: auto;
    // min-width: 100vh;
    // max-width: 100vw;
    width: 100%
}

.card {
    @apply shadow bg-white rounded-md p-6;
}

.mat-form-field-appearance-outline .mat-form-field-infix {
    border-top: none;
    padding: 1em 0 0.8em 0;
}
.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float
    .mat-form-field-label {
    transform: translateY(-1.1em) scale(0.75);
    width: 133.33333%;
}

.mat-form-field-label-wrapper {
    top: -0.5em;
}
.mat-form-field-appearance-fill .mat-form-field-flex {
    padding: 0 0.5em 0 0.5em !important;
}

.mat-form-field {
    line-height: 1.32;
}

.mat-form-field-appearance-fill .mat-select-arrow-wrapper {
    transform: translateY(0%) !important;
}

.mat-accordion .mat-expansion-panel:last-of-type {
    border-radius: 0px !important;
}

.mat-expansion-panel:not([class*="mat-elevation-z"]) {
    box-shadow: unset;
}

.mat-expansion-panel-body {
    background-color: #576071;
    padding: 0 !important;
}

.mat-expansion-panel-header {
    background-color: #576071 !important;
    padding: 0 10px 0 0 !important;
    min-height: 60px;
}

.mat-expansion-panel-content {
    background-color: #576071;
}

.mat-expanded {
    background-color: #576071;
}

.mat-expansion-indicator::after {
    content: "";
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

.swal2-title {
    line-height: 40px !important;
}

.mat-form-field-wrapper {
    // change sapce bottom input
    margin-bottom: 10px;
    padding-bottom: 0 !important;

    .mat-form-field-flex {
        input {
            @apply form-input px-4 py-2 border focus:ring-transparent focus:border-transparent w-full border-gray-300 rounded-md focus:outline-none text-gray-600 disabled:opacity-50;
        }
        position: relative;
        display: flex;
        align-items: stretch;
        min-height: 44px !important;
        border-radius: 6px;
        padding: 0 16px;
        border-width: 1px;
        @apply bg-white border-gray-300    #{'!important'};

        .mat-form-field-prefix {
            > .mat-icon {
                margin-right: 12px !important;
            }

            > .mat-icon-button {
                margin: 0 4px 0 -10px !important;
            }

            > .mat-select {
                margin-right: 10px !important;
            }

            > .mat-datepicker-toggle {
                margin-left: -8px !important;
            }

            > *:not(.mat-icon):not(.mat-icon-button):not(.mat-select):not(.mat-datepicker-toggle) {
                margin-right: 12px !important;
            }
        }

        .mat-form-field-suffix {
            > .mat-icon {
                margin-left: 12px;
            }

            > .mat-icon-button {
                margin: 0 -10px 0 4px;
            }

            > .mat-select {
                margin-left: 10px;
            }

            > .mat-datepicker-toggle {
                margin-right: -8px;
                margin-top: 5px;
            }
        }

        .mat-form-field-prefix,
        .mat-form-field-suffix {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            .mat-datepicker-toggle-default-icon {
                width: 1.5rem;
                height: 1.5rem;
                min-width: 1.5rem;
                min-height: 1.5rem;
                font-size: 1.5rem;
                line-height: 1.5rem;
            }
        }

        .mat-form-field-infix {
            position: static;
            display: flex;
            align-items: center;
            width: 88px;
            padding: 0;
            border: 0;
            // change text input size here
            .mat-input-element {
                padding: 0;
                font-size: 18px;
                margin-top: 0;
            }

            /* Select */
            .mat-select {
                font-size: 18px;
                display: inline-flex;

                .mat-select-trigger {
                    display: inline-flex;
                    align-items: center;
                    width: 100%;

                    .mat-select-value {
                        display: flex;
                        position: relative;
                        max-width: none;

                        .mat-select-value-text {
                            display: inline-flex;

                            > * {
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                            }
                        }
                    }
                }

                .mat-select-arrow-wrapper {
                    transform: translateY(0);

                    .mat-select-arrow {
                        margin: 0 0 0 8px;
                    }
                }
            }

            .mat-chip-list {
                width: 100%;
                margin: 0 -8px;

                .mat-chip-input {
                        margin: 0 0 0 8px;
                }
            }

            .mat-chip-list {
                width: 100%;
                margin: 0 -8px;

                .mat-chip-input {
                        margin: 0 0 0 8px;
                }
            }
        }
    }

    /* Remove the underline */
    .mat-form-field-underline {
        display: none;
    }


}



.mat-paginator {
    .mat-paginator-container {
        padding: 8px 16px;
        justify-content: space-between;

        @screen sm {
            justify-content: flex-end;
        }

        /* Page size select */
        .mat-paginator-page-size {
            align-items: center;
            min-height: 40px;
            margin: 8px;

            .mat-paginator-page-size-label {
                display: none;
                margin-right: 12px;

                @screen sm {
                    display: block;
                }
            }

            .mat-paginator-page-size-select {
                margin: 0;
                width: 70px !important;

                .mat-form-field-wrapper {
                    margin-bottom: 0;

                    .mat-form-field-flex {
                        min-height: 32px;
                        padding: 0 10px;
                    }
                }
            }
        }

        /* Range actions */
        .mat-paginator-range-actions {
            margin: 8px 0;

            .mat-paginator-range-label {
                margin-right: 16px;
            }
        }
    }
}

.mat-paginator-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.error {
    @apply text-red-500 text-xs;
}
