@font-face {
    font-family: 'psu-stidti-regular';
    src: url('/font/PSU_Stidti/WOFF/psu-stidti-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'psu-stidti-bold';
    src: url('/font/PSU_Stidti/WOFF/psu-stidti-bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'psu-stidti-bolditalic';
    src: url('/font/PSU_Stidti/WOFF/psu-stidti-bolditalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'psu-stidti-italic';
    src: url('/font/PSU_Stidti/WOFF/psu-stidti-italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'psu-stidti-light';
    src: url('/font/PSU_Stidti/WOFF/psu-stidti-light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'psu-stidti-lightitalic';
    src: url('/font/PSU_Stidti/WOFF/psu-stidti-lightitalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'psu-stidti-regular', sans-serif !important;
}

body {
    font-family: 'psu-stidti-regular', sans-serif !important;
}

h1 {
    font-family: 'psu-stidti-bold', sans-serif !important;
}

em {
    font-family: 'psu-stidti-italic', sans-serif !important;
}

body {
    background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-clip: bord;
}

.appbar {
    background: linear-gradient(135deg, #89b6b8, #457b9d);
    color: #ffffff !important;
}

.appbar-home {
    background: linear-gradient(358deg, #f2f9fa, #ffffff);
    color: #ffffff !important;
}

.footer {
    background: linear-gradient(135deg, #89b6b8, #457b9d);
    color: #ffffff !important;
}
.card-container {
    border-radius: 25px !important;
    overflow: hidden !important;
}

:root {
    --font-family-line: 'LINESeedSansTH-Regular', 'LINESeedSansTH-Bold', 'LINESeedSansTH-ExtraBold', sans-serif;
}

:root {
    --mud-palette-black: rgba(39, 44, 52, 1);
    --mud-palette-white: rgba(255, 255, 255, 1);
    --mud-palette-primary: #7DA6B8 !important;
    --mud-palette-primary-rgb: 69, 123, 157 !important;
    --mud-palette-primary-text: rgba(255, 255, 255, 1);
    --mud-palette-primary-darken: #5C8296 !important;
    --mud-palette-primary-lighten: rgb(180, 215, 226) !important;
    --mud-palette-primary-hover: rgba(168, 218, 220, 0.058823529411764705) !important;
    --mud-palette-secondary: rgba(255, 64, 129, 1);
    --mud-palette-secondary-rgb: 255, 64, 129;
    --mud-palette-secondary-text: rgba(255, 255, 255, 1);
    --mud-palette-secondary-darken: rgb(255, 31, 105);
    --mud-palette-secondary-lighten: rgb(255, 102, 153);
    --mud-palette-secondary-hover: rgba(255, 64, 129, 0.058823529411764705);
    --mud-palette-tertiary: rgba(30, 200, 165, 1);
    --mud-palette-tertiary-rgb: 30, 200, 165;
    --mud-palette-tertiary-text: rgba(255, 255, 255, 1);
    --mud-palette-tertiary-darken: rgb(25, 169, 140);
    --mud-palette-tertiary-lighten: rgb(42, 223, 187);
    --mud-palette-tertiary-hover: rgba(30, 200, 165, 0.058823529411764705);
    --mud-palette-info: rgba(33, 150, 243, 1);
    --mud-palette-info-rgb: 33, 150, 243;
    --mud-palette-info-text: rgba(255, 255, 255, 1);
    --mud-palette-info-darken: rgb(12, 128, 223);
    --mud-palette-info-lighten: rgb(71, 167, 245);
    --mud-palette-info-hover: rgba(33, 150, 243, 0.058823529411764705);
    --mud-palette-success: rgba(0, 200, 83, 1);
    --mud-palette-success-rgb: 0, 200, 83;
    --mud-palette-success-text: rgba(255, 255, 255, 1);
    --mud-palette-success-darken: rgb(0, 163, 68);
    --mud-palette-success-lighten: rgb(0, 235, 98);
    --mud-palette-success-hover: rgba(0, 200, 83, 0.058823529411764705);
    --mud-palette-warning: rgba(255, 152, 0, 1);
    --mud-palette-warning-rgb: 255, 152, 0;
    --mud-palette-warning-text: rgba(255, 255, 255, 1);
    --mud-palette-warning-darken: rgb(214, 129, 0);
    --mud-palette-warning-lighten: rgb(255, 167, 36);
    --mud-palette-warning-hover: rgba(255, 152, 0, 0.058823529411764705);
    --mud-palette-error: rgba(244, 67, 54, 1);
    --mud-palette-error-rgb: 244, 67, 54;
    --mud-palette-error-text: rgba(255, 255, 255, 1);
    --mud-palette-error-darken: rgb(242, 28, 13);
    --mud-palette-error-lighten: rgb(246, 96, 85);
    --mud-palette-error-hover: rgba(244, 67, 54, 0.058823529411764705);
    --mud-palette-dark: rgba(66, 66, 66, 1);
    --mud-palette-dark-rgb: 66, 66, 66;
    --mud-palette-dark-text: rgba(255, 255, 255, 1);
    --mud-palette-dark-darken: rgb(46, 46, 46);
    --mud-palette-dark-lighten: rgb(87, 87, 87);
    --mud-palette-dark-hover: rgba(66, 66, 66, 0.058823529411764705);
    --mud-palette-text-primary: rgba(66, 66, 66, 1);
    --mud-palette-text-secondary: rgba(0, 0, 0, 0.5372549019607843);
    --mud-palette-text-disabled: rgba(0, 0, 0, 0.3764705882352941);
    --mud-palette-action-default: rgba(0, 0, 0, 0.5372549019607843);
    --mud-palette-action-default-hover: rgba(0, 0, 0, 0.058823529411764705);
    --mud-palette-action-disabled: rgba(0, 0, 0, 0.25882352941176473);
    --mud-palette-action-disabled-background: rgba(0, 0, 0, 0.11764705882352941);
    --mud-palette-surface: rgba(255, 255, 255, 1);
    --mud-palette-background: rgba(255, 255, 255, 1);
    --mud-palette-background-gray: rgba(245, 245, 245, 1);
    --mud-palette-drawer-background: rgba(255, 255, 255, 1);
    --mud-palette-drawer-text: rgba(66, 66, 66, 1);
    --mud-palette-drawer-icon: rgba(97, 97, 97, 1);
    --mud-palette-appbar-background: rgba(89, 74, 226, 1);
    --mud-palette-appbar-text: rgba(255, 255, 255, 1);
    --mud-palette-lines-default: rgba(0, 0, 0, 0.11764705882352941);
    --mud-palette-lines-inputs: rgba(189, 189, 189, 1);
    --mud-palette-table-lines: rgba(224, 224, 224, 1);
    --mud-palette-table-striped: rgba(0, 0, 0, 0.0196078431372549);
    --mud-palette-table-hover: rgba(0, 0, 0, 0.0392156862745098);
    --mud-palette-divider: rgba(224, 224, 224, 1);
    --mud-palette-divider-light: rgba(0, 0, 0, 0.8);
    --mud-palette-skeleton: rgba(0, 0, 0, 0.10980392156862745);
    --mud-palette-gray-default: #9E9E9E;
    --mud-palette-gray-light: #BDBDBD;
    --mud-palette-gray-lighter: #E0E0E0;
    --mud-palette-gray-dark: #757575;
    --mud-palette-gray-darker: #616161;
    --mud-palette-overlay-dark: rgba(33, 33, 33, 0.4980392156862745);
    --mud-palette-overlay-light: rgba(255, 255, 255, 0.4980392156862745);
    --mud-ripple-color: var(--mud-palette-text-primary);
    --mud-ripple-opacity: 0.1;
    --mud-ripple-opacity-secondary: 0.2;
    --mud-elevation-0: none;
    --mud-elevation-1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    --mud-elevation-2: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
    --mud-elevation-3: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
    --mud-elevation-4: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
    --mud-elevation-5: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
    --mud-elevation-6: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
    --mud-elevation-7: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12);
    --mud-elevation-8: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
    --mud-elevation-9: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12);
    --mud-elevation-10: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12);
    --mud-elevation-11: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12);
    --mud-elevation-12: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
    --mud-elevation-13: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
    --mud-elevation-14: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12);
    --mud-elevation-15: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12);
    --mud-elevation-16: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
    --mud-elevation-17: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12);
    --mud-elevation-18: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12);
    --mud-elevation-19: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12);
    --mud-elevation-20: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12);
    --mud-elevation-21: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12);
    --mud-elevation-22: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12);
    --mud-elevation-23: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12);
    --mud-elevation-24: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
    --mud-elevation-25: 0 5px 5px -3px rgba(0, 0, 0, .06), 0 8px 10px 1px rgba(0, 0, 0, .042), 0 3px 14px 2px rgba(0, 0, 0, .036);
    --mud-default-borderradius: 4px;
    --mud-drawer-width-left: 240px;
    --mud-drawer-width-right: 240px;
    --mud-drawer-width-mini-left: 56px;
    --mud-drawer-width-mini-right: 56px;
    --mud-appbar-height: 64px;
}

/* Sort icon âªÇìµÅÍ´ */
.mud-data-grid .mud-table-cell .column-header .mud-icon-button {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex !important;
}

.mud-data-grid .mud-icon-button.sort-direction-icon {
    opacity: 1 !important;
    visibility: visible !important;
}

/* »ØèÁàÁ¹Ù¤ÍÅÑÁ¹ì âªÇìµÅÍ´ */
.mud-data-grid .mud-menu {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex !important;
}

label.required:after {
    content: "\00a0*";
    color: #dc3545;
}


@keyframes gradientLoop {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.animated-gradient {
    height: auto;
    background: linear-gradient(135deg, #000398, #000398, #2196f3, #2196f3, #000398, #000398);
    background-size: 400% 400%;
    animation: gradientLoop 10s ease infinite;
    color: #ffffff !important;
}

.mud-input > textarea.mud-input-root-outlined {
    mask-image: none !important;
}