@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-color: #eef5fb;
    background-image: none;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-clip: bord;
}

.appbar {
    background: var(--mud-palette-primary);
    color: #ffffff !important;
    z-index: 1303 !important;
}

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

.footer {
    background: linear-gradient(135deg, #8db9bf, #5d97b8);
    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: #4098cf !important;
    --mud-palette-primary-rgb: 64, 152, 207 !important;
    --mud-palette-primary-text: rgba(255, 255, 255, 1);
    --mud-palette-primary-darken: #2f7fb2 !important;
    --mud-palette-primary-lighten: rgb(159, 210, 239) !important;
    --mud-palette-primary-hover: rgba(64, 152, 207, 0.12) !important;
    --mud-palette-secondary: #6C757D;
    --mud-palette-secondary-rgb: 108, 117, 125;
    --mud-palette-secondary-text: rgba(255, 255, 255, 1);
    --mud-palette-secondary-darken: #5C636A;
    --mud-palette-secondary-lighten: #ADB5BD;
    --mud-palette-secondary-hover: rgba(108, 117, 125, 0.12);
    --mud-palette-tertiary: #6F42C1;
    --mud-palette-tertiary-rgb: 111, 66, 193;
    --mud-palette-tertiary-text: rgba(255, 255, 255, 1);
    --mud-palette-tertiary-darken: #5A32A3;
    --mud-palette-tertiary-lighten: #A98EDA;
    --mud-palette-tertiary-hover: rgba(111, 66, 193, 0.12);
    --mud-palette-info: #0DCAF0;
    --mud-palette-info-rgb: 13, 202, 240;
    --mud-palette-info-text: rgba(0, 0, 0, 0.87);
    --mud-palette-info-darken: #31D2F2;
    --mud-palette-info-lighten: #9EEAF9;
    --mud-palette-info-hover: rgba(13, 202, 240, 0.12);
    --mud-palette-success: #198754;
    --mud-palette-success-rgb: 25, 135, 84;
    --mud-palette-success-text: rgba(255, 255, 255, 1);
    --mud-palette-success-darken: #157347;
    --mud-palette-success-lighten: #75B798;
    --mud-palette-success-hover: rgba(25, 135, 84, 0.12);
    --mud-palette-warning: #FFC107;
    --mud-palette-warning-rgb: 255, 193, 7;
    --mud-palette-warning-text: rgba(0, 0, 0, 0.87);
    --mud-palette-warning-darken: #FFCA2C;
    --mud-palette-warning-lighten: #FFDA6A;
    --mud-palette-warning-hover: rgba(255, 193, 7, 0.16);
    --mud-palette-error: #DC3545;
    --mud-palette-error-rgb: 220, 53, 69;
    --mud-palette-error-text: rgba(255, 255, 255, 1);
    --mud-palette-error-darken: #BB2D3B;
    --mud-palette-error-lighten: #EA868F;
    --mud-palette-error-hover: rgba(220, 53, 69, 0.12);
    --mud-palette-dark: #212529;
    --mud-palette-dark-rgb: 33, 37, 41;
    --mud-palette-dark-text: rgba(255, 255, 255, 1);
    --mud-palette-dark-darken: #1A1E21;
    --mud-palette-dark-lighten: #495057;
    --mud-palette-dark-hover: rgba(33, 37, 41, 0.12);
    --mud-palette-text-primary: rgba(33, 37, 41, 1);
    --mud-palette-text-secondary: rgba(108, 117, 125, 1);
    --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;
    line-height: 1.7 !important;
}

/* ตัวหุ้มหลัก */
.center-alert {
    width: 100%;
}

    /* จัด flex หลัก (ชนะ justify-sm-start) */
    .center-alert .mud-alert-position {
        display: flex !important;
        justify-content: center !important; /* กลางแนวนอน */
        align-items: center !important; /* กลางแนวตั้ง */
        width: 100%;
    }

    /* ตัวข้อความ */
    .center-alert .mud-alert-message {
        text-align: center;
        width: auto;
    }

    /* กรณีมี icon (สำคัญมาก) */
    .center-alert .mud-alert-icon {
        margin-right: 8px; /* เว้นระยะ icon */
    }





/* Profile Avatar */

/* Circle + Border Version */
.profile-avatar-circle-border-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

    .profile-avatar-circle-border-wrapper .profile-avatar-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .profile-avatar-circle-border-wrapper .profile-avatar-full {
        margin-left: -24px;
        margin-right: -24px;
    }

/* Square + Border Version */
.profile-avatar-square-border-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    border: 4px solid #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

    .profile-avatar-square-border-wrapper .profile-avatar-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .profile-avatar-square-border-wrapper .profile-avatar-full {
        margin-left: -24px;
        margin-right: -24px;
    }

/* Circle Version */
.profile-avatar-circle-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
}

    .profile-avatar-circle-wrapper .profile-avatar-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .profile-avatar-circle-wrapper .profile-avatar-full {
        margin-left: -24px;
        margin-right: -24px;
    }

/* Square Version */
.profile-avatar-square-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
}

    .profile-avatar-square-wrapper .profile-avatar-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .profile-avatar-square-wrapper .profile-avatar-full {
        margin-left: -24px;
        margin-right: -24px;
    }

.spin-loop {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


.stat-card {
    padding: 20px !important;
    border-radius: 25px !important;
    text-align: center !important;
    transition: 0.25s !important;
}

    .stat-card:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
    }

.stat-number {
    font-size: 32px !important;
    font-weight: 700 !important;
    margin-top: 8px !important;
}

.stat-label {
    font-size: 14px !important;
    opacity: .8 !important;
}

/* colors */

.stat-blue {
    color: #1976d2 !important;
}

.stat-green {
    color: #2e7d32 !important;
}

.stat-purple {
    color: #6a1b9a !important;
}

.stat-orange {
    color: #ef6c00 !important;
}

.stat-cyan {
    color: #00838f !important;
}

.stat-indigo {
    color: #3949ab !important;
}

.stat-red {
    color: #d32f2f !important;
}

.note-editor {
    box-shadow: none !important;
    border: 1px solid #bdbdbd !important;
}

.note-editor .note-dropdown-menu,
.note-editor .note-modal-footer {
    box-sizing: content-box;
}