:root {
    --rz-text-font-family: "Anuphan", sans-serif; /* กำหนด font family ของตัวอักษร */
    --rz-base-font-size: 3.125rem; /* เพิ่มตัวนี้เพื่อกำหนด base font size ของ Radzen */

    --rz-body-background-color: #f5eedd; /* สีพื้นหลังของ Body */
    --rz-layout-body-background-color: #ffffff; /* สีพื้นหลังของ Layout Body */

    --rz-primary: #ed6c00 !important; /* สีพื้นหลังของ Primary */
    --rz-on-primary: #ffffff !important; /* สีตัวอักษรบน Primary */
    --rz-secondary: #ff9c19 !important; /* สีพื้นหลังของ Secondary */
    --rz-on-secondary: white !important; /* สีตัวอักษรบน Secondary */

    --rz-header-color: #e17100; /* สีตัวอักษรบน Header */
    --rz-header-background-color: #221f20; /* สีพื้นหลัง Header */

    --rz-footer-color: #ffffff; /* สีตัวอักษรของ Footer */
    --rz-footer-background-color: #186a91; /* สีพื้นหลังของ Footer */
    --rz-footer-padding: 1rem;
    --rz-footer-border: none;

    /* Input */
    --rz-input-background-color: #ffffff; /* สีพื้นหลังของ Input */
    --rz-input-hover-background-color: #f4f4f4; /* สีพื้นหลังของ Input เมื่อ mouse hover */
    --rz-input-focus-background-color: #ffffff; /* สีพื้นหลังของ Input เมื่อ focus */

    /* Grid */
    --rz-grid-header-color: black;
    --rz-grid-header-background-color: #fad3b3; /* สีพื้นหลังของ Header Grid */
    --rz-grid-filter-color: black;
    --rz-grid-filter-background-color: #ed6c00;
    --grid-header-border-color: #ffffff;
    --grid-body-border-color: #ffffff;

    /* Check Box */
    --rz-checkbox-checked-color: black; /* สีเครื่องหมายของ Checkbox เมื่อถูกเลือก */
    --rz-checkbox-checked-background-color: #f5eedd; /* สีพื้นหลังของ Checkbox เมื่อถูกเลือก */
    --rz-checkbox-checked-hover-background-color: #f5eedd; /* สีพื้นหลังของ Checkbox เมื่อ mouse hover */

    /* Panel Menu & Sidebar */
    --rz-sidebar-background-color: #646464; /* สีพื้นหลังของ Sidebar */
    --rz-panel-menu-item-background-color: #323232; /* สีพื้นหลังของ Panel Menu Item */
    --rz-panel-menu-icon-color: #ffffff; /* สี icon มีผลทั้ง (Menu Group) และ (Menu Item) */
    --rz-panel-menu-item-border: 0px none black; /* สี border ขอบล่างของ Menu Panel (ของแต่ละ Group) */
    --rz-panel-menu-item-border-radius: 0; /* ความโค้ง border ขอบล่างของ Menu Panel (ของแต่ละ Group) */
    --rz-panel-menu-icon-font-size: 1.5rem; /* ขนาด icon (Menu Group) */
    --rz-panel-menu-icon-width: 1rem; /* ความกว้าง icon (Menu Group) */
    --rz-panel-menu-icon-height: 1rem; /* ความสูง icon (Menu Group) */
    --rz-panel-menu-font-size: 18px; /* ขนาดของตัวอักษร (Menu Group) */
    --rz-panel-menu-font-weight: 700; /* ความหนาตัวอักษร (Menu Group) */
    --rz-panel-menu-item-color: #ffffff; /* สีตัวอักษร (Menu Group) */

    --rz-navigation-item-link: #323232 !important; /* สีพื้นหลังของ (Menu Group) */
    --rz-panel-menu-background-color: #323232 !important;
    
    --rz-navigation-menu:#646464 !important;

    --rz-panel-menu-item-hover-color: #196A90; /* สีตัวอักษรเมื่อ mouse hover (Menu Group) */
    --rz-panel-menu-item-hover-background-color: transparent; /* สีพื้นหลัง mouse hover (Menu Group) */
    --rz-panel-menu-icon-2nd-level-icon-size: 1.5rem; /* ขนาด icon (Menu Item) */
    --rz-panel-menu-item-2nd-level-font-size: 14px; /* ขนาดของตัวอักษร (Menu Item) */
    --rz-panel-menu-item-2nd-level-font-weight: 400; /* ความหนาตัวอักษร (Menu Item) */
    --rz-panel-menu-item-2nd-level-color: #ffffff; /* สีตัวอักษร (Menu Item) */
    --rz-panel-menu-item-2nd-level-background-color: #646464; /* สีพื้นหลัง (Menu Item) */
    --rz-panel-menu-item-2nd-level-border-radius: 1.5rem; /* ความโค้ง boder (Menu Item) */
    --rz-panel-menu-item-2nd-level-hover-color: #ff9c18; /* สีตัวอักษรเมื่อ mouse hover (Menu Item) */
    --rz-panel-menu-item-2nd-level-hover-background-color: #ffdcb6; /* สีพื้นหลัง mouse hover (Menu Item) */
    --rz-panel-menu-item-2nd-level-active-color: #196a90; /* สีตัวอักษรรายการที่ active อยู่ (Menu Item) */
    --rz-panel-menu-item-2nd-level-active-background-color: #eeddcb; /* สีพื้นหลังรายการที่ active อยู่ (Menu Item) */

    /* Hamburger Button */
    --hamburger-button-color: #ffffff; /* สีของ Hamburger Button */

    /* Circle Icon */
    --circle-icon-color: #ffffff; /* สี circle icon */
    --circle-icon-background-color: #ff9c18; /* สีพื้นหลัง circle icon */
    --circle-icon-border: 0px solid black; /* กำหนด border ให้ circle icon */
    --circle-icon-box-shadow: 0 0 2px #000000; /* กำหนดเงาให้ circle icon */

    /* Change Password Icon */
    --change-password-icon-color: #ffffff; /* สี change password icon */
    --change-password-icon-background-color: #ff9c18; /* สีพื้นหลัง change password icon */
    --change-password-icon-border: 0px solid black; /* กำหนด border ให้ change password icon */
    --change-password-icon-box-shadow: 0 0 2px #000000; /* กำหนดเงาให้ change password icon */

    /* Dialog Icon */
    --icon-info: #196a90; /* สี icon info */
    --icon-warning: #ff9c19; /* สี icon warning */
    --icon-error: #ff2327; /* สี icon error */

    /* Upload */
    --upload-color: white; /* สีตัวอักษรของ Upload */
    --upload-background-color: #646464; /* สีพื้นหลังของ Upload */
    --upload-border-color: #646464; /* สี border ของ Upload */

    /* Notification Panel */
    --noti-empty-color: #6b7280; /* สี icon empty notification */
    --noti-info-color: #2196f3; /* สี icon ข้อความแจ้งเตือนประเภท ข้อมูล */
    --noti-success-color: #4caf50; /* สี icon ข้อความแจ้งเตือนประเภท สำเร็จ */
    --noti-warning-color: #ff9800; /* สี icon ข้อความแจ้งเตือนประเภท เตือน */
    --noti-error-color: #f44336; /* สี icon ข้อความแจ้งเตือนประเภท ข้อผิดพลาด */
    --noti-remove-item-icon: #000000; /* สี icon สำหรับลบรายการแจ้งเตือน */

    --validate-color1: #ff2327; /* สีสำหรับข้อความ Validate */

    --readonly-textbox-color: #000; /* กำหนดสีตัวอักษรของ readonly textbox */
    --readonly-textbox-background-color: red !important; /* กำหนดสีพื้นหลังของ readonly textbox */
    --readonly-textbox-border: 2px solid #196a90 !important; /* กำหนดสี border ของ readonly textbox */

    --content-card-padding: 2rem; /* กำหนดระยะ padding ของ card */
    --content-card-margin: 2rem 0 0 0; /* กำหนดระยะ margin ของ card */
    --content-card-background-color: white; /* กำหนดสี backgrouund ของ card */
    --content-card-border: 1px solid #196A90; /* กำหนดสี border ของ card */
    --content-card-border-radius: 1.5rem; /* ปรับความโค้งมนของขอบ card */
    --content-card-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25); /* กำหนดเงาให้ card */

    --dialog-background-color: white; /* กำหนดสี background ของ dialog */
    --dialog-border: 1px solid #196A90; /* กำหนดสี border ของ dialog */
    --dialog-border-radius: 1.5rem; /* กำหนดความโค้งมนของขอบ dialog */
    --dialog-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25); /* กำหนดเงาให้ dialog */

    --column-inactive-color: #bcbcbc; /* สีสำหรับคอลัมน์ที่ไม่ใช้งาน */

    /* Status text highlight */
    --status-highlight-background-color-accept: rgba(60, 203, 58, .7);
    --status-highlight-text-color-accept: white;
    --status-highlight-background-color-reject: gba(222, 18, 18, .7);
    --status-highlight-text-color-reject: white;
    --status-highlight-background-color-pending: rgba(181, 181, 181, .7);
    --status-highlight-text-color-pending: black;


    --rz-upload-choose-color: white;
    --rz-upload-choose-background-color: #646464;
}

img.layout-logo-image {
    height: 60px;
    padding: 0.75rem 0;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.7));
}

/*.layout-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 70px;
    width: 100%;
    background-image: url('/images/edo/Navbar_BG5.png');
    background-repeat: no-repeat;
    background-position: right top;
    opacity: 0.4;
    z-index: -1;
}*/

.rz-textbox.rz-state-readonly input {
    background-color: red !important;
    border: 1px solid green !important;
}

/* กำหนด font กันกรณีบางส่วนไม่ได้ใช้ตัวแปรของ Radzen */
body {
    font-family: "Anuphan", sans-serif;
    font-variation-settings: "wght" 420;
}

/* h1 / page title */
h1 {
    font-variation-settings: "wght" 650;
}

/* h2 */
h2 {
    font-variation-settings: "wght" 600;
}

/* h3 */
h3 {
    font-variation-settings: "wght" 560;
}

/* sidebar / menu */
.sidebar, .rz-menu {
    font-variation-settings: "wght" 480;
}