.form-check {
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5em;
    margin-bottom: 0.125rem;
    margin-top: 0.8rem;
}

.flex-column {
    flex-direction: column !important;
    padding: 5px !important;
}

.lable-heard {
    display: inline-block;
    margin-top: 5px;
    color: red;
    margin-left: calc(var(--bs-gutter-x) * -0.5);
}

.form-label {
    margin-bottom: 0.1rem;
    margin-top: 5px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.form-validation {
    margin-bottom: 0.1rem;
    margin-top: 5px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: small;
    color: red;
}

.form-cash {
    background-color: black;
    color: greenyellow;
    font-weight: bold;
    font-size: medium;
}

.text-overflow {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.text-bold-md {
    font-size: 16px;
    font-weight: bold;
}

.profile-pic {
    padding: 10px;
}

    .profile-pic img {
        border-radius: 8%;
        box-shadow: 0px 0px 5px 0px #c1c1c1;
        cursor: pointer;
        width: 250px;
        height: 250px;
    }

.btn.btn-outline-secondary {
    margin-top: 5px;
}

.separator {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

    .separator .line {
        height: 1px;
        flex: 1;
        background-color: #000;
        margin: 0 0 0 0;
    }

    .separator .liner {
        height: 1px;
        flex: 0.09;
        background-color: #000;
        left: 1px;
    }

    .separator span {
        position: relative;
        top: 3px;
        padding: 0 0.5rem;
        color: #ff0000;
    }

.hr-icon {
    position: relative;
    top: 3px;
    color: #ff0000;
}

@media (min-width: 1200px) {
    .profile-pic {
        position: absolute;
        top: 0px;
        z-index: 50;
        margin-top: 55px;
    }

    .btn.btn-outline-secondary {
        margin-top: 0px;
    }

    .row .mt-button {
        margin-top: -35px;
    }

    .h-xl-100 {
        height: 100% !important;
    }
}

/* .row .mt-button {
  margin-top: -35px;
} */
@media (min-width: 575px) {
    .btn.btn-outline-secondary {
        margin-top: 0px;
    }

    /* .row .mt-button {
    margin-top: -35px;
  } */
}

@media (max-width: 575px) {
    .row .mt-button {
        margin-top: -35px;
    }
}

.custom-badge {
    padding: 10px 20px;
    text-align: center;
}

.step-button-container {
    /* text-align: right; */
}

/* .step-button-container .rz-button {
        margin-right: -0.5rem;
    } */

.custom-button {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

    .custom-button .rz-button-icon {
        margin-left: 8px; /* ปรับให้มีช่องว่างระหว่างข้อความกับไอคอน */
    }

.profile-menu-button {
    background-color: white !important;
    color: black !important;
}

.header-custom-button {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-evenly;
    box-shadow: none;
}

    .header-custom-button.rz-button.rz-button-md.rz-primary.rz-shade-default {
        background-color: var(--main-theme-color);
        color: #86808E;
        /*    box-shadow: none;*/
    }

        .header-custom-button.rz-button.rz-button-md.rz-primary.rz-shade-default:hover {
            /*background-color: var(--rz-primary-light);*/ /* สีพื้นหลังเมื่อโฮเวอร์ */
            /*color: white;*/ /* สีข้อความเมื่อโฮเวอร์ */
            background-color: var(--highlight-color);
            color: white;
        }

    .header-custom-button.icon-only .rz-button-text {
        display: none;
    }

@media (min-width: 1200px) {
    /* ปรับการแสดงผลเมื่อหน้าจอมีขนาด xl ขึ้นไป */
    .header-custom-button.icon-only .rz-button-text {
        display: inline-block;
    }
}

i.rzi.rz-navigation-item-icon-children {
    color: #2D2B30;
}

ul.rz-profile-menu {
    list-style: none;
    margin-bottom: 0;
    padding: 0.5rem;
    display: inline-block;
    background-color: transparent;
    border-left: var(--rz-profile-menu-border);
    position: relative;
    z-index: 3;
}

.header-button-text {
    font-size: 12px; /* สามารถปรับขนาดข้อความตามต้องการ */
    font-weight: bold;
    color: #86808E;
}

    .header-button-text:hover {
        color: #F77F00;
    }
/* css dialog */
.rz-dialog-wrapper {
    display: flex;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: var(--rz-dialog-zindex);
    align-items: center;
    justify-content: center;
}
/* ------------------- */
/* css table */
.rz-grid-table td, .rz-grid-table th {
    padding: 0.5rem;
}

.hide-expanded-row + .rz-expanded-row-content {
    display: none !important;
}
/* ------------------- */
/* css dropdown */
.rz-dropdown-items-wrapper {
    overflow: auto;
    margin: 0 0rem;
    border-radius: 4px;
    padding: 0 0rem;
}

.rz-dropdown-panel {
    padding: 0 0rem;
    width: auto !important;
}

li.rz-dropdown-item {
    padding: var(--rz-dropdown-item-padding);
    cursor: default;
    font-size: 1rem;
    transition: none;
    padding-left: 1rem;
}

.rz-dropdown-items {
    list-style: none;
    padding: var(--rz-dropdown-items-padding);
    margin: 0;
}

.dropdown-fixed-size {
    width: 200px !important; /* กำหนดความกว้างคงที่ */
    white-space: nowrap; /* ป้องกันการตัดข้อความลงบรรทัดใหม่ */
    overflow: hidden; /* ซ่อนข้อความที่เกินขอบเขต */
    text-overflow: ellipsis; /* แสดง "..." เมื่อข้อความเกิน */
}

.rz-dropdown-label {
    padding-inline: 0 0.25rem !important;
}

.rz-dropdown-filter-container {
    padding: 1rem 0.5rem;
}
/* ------------------- */
.rz-steps {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.rz-steps .rz-steps-next, .rz-steps .rz-steps-prev {
    display: none !important;
}

.rz-steps-buttons {
    display: none !important;
}

.bold-header {
    font-weight: bold;
}
/* layout */
.rz-layout {
    height: 100vh;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "rz-header rz-header"
        "rz-sidebar rz-body"
        "rz-footer rz-footer";
    background-color: transparent;
}
/* ------------------- */
/* header */
.rz-header {
    background-color: var(--rz-header-background-color);
    min-height: var(--rz-header-min-height);
    border-bottom: var(--rz-header-border);
    color: var(--rz-header-color);
    box-shadow: var(--rz-header-shadow);
}
/* ------------------- */
/* body */
.rz-body {
    margin: var(--rz-layout-body-margin);
    padding: var(--rz-layout-body-padding);
    border-radius: var(--rz-layout-body-border-radius);
}
/* ------------------- */
/* sidebar */
.sidebar-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.25rem 0;
    font-size: 16px;
    font-weight: bold;
}

.rz-sidebar-toggle {
    -webkit-appearance: none;
    border: none;
    padding: 0.5rem;
    margin: 0 1rem 0 1rem;
    border-right: var(--rz-sidebar-toggle-border);
    background-color: var(--rz-sidebar-toggle-background-color);
    color: white;
}

    .rz-sidebar-toggle:focus-visible, .rz-sidebar-toggle:hover {
        color: var(--rz-sidebar-toggle-hover-color);
        background: var(--highlight-color);
        border-radius: var(--rz-sidebar-toggle-hover-border-radius);
    }

/*.rz-sidebar-toggle {
    -webkit-appearance: none;
    border: none;
    padding: 0.5rem;
    margin: 0 1rem 0 1rem;
    border-right: var(--rz-sidebar-toggle-border);
    background-color: var(--rz-sidebar-toggle-background-color);
    color: var(--rz-sidebar-toggle-color);
}*/
.rz-sidebar {
    background-color: var(--rz-sidebar-background-color);
    color: var(--rz-sidebar-color);
    border-right: var(--rz-sidebar-border-right);
    position: fixed;
    overflow: auto;
    left: 0;
    top: 3rem;
    bottom: 0;
    z-index: var(--rz-sidebar-z);
    width: var(--rz-sidebar-width);
    opacity: 1;
    transition: var(--rz-transition-all);
}
/* ------------------- */
/* footer */
.rz-footer {
    padding: 0.15rem;
    border-top: var(--rz-footer-border);
    background-color: var(--rz-base-600);
    color: var(--rz-white);
}

.footer_text {
    font-size: 12px;
    font-weight: bold;
}
/* ------------------- */
/* fieldset text */
.rz-fieldset-legend-text {
    vertical-align: middle;
    font-weight: bold;
    font-size: 17px;
    color: #666;
}

.rz-fieldset {
    box-shadow: 2px 2px 2px 0px #00000037;
    border: 2px solid #bdbdbd91;
}
/* ------------------- */
:root {
    --bg-input-background-colors: var(--surface-secondary-color);
    --rz-dropdown-items-padding: 0.5rem 1;
    --rz-dropdown-item-padding: 0.1rem 0rem;
    --rz-sidebar-toggle-color: var(--rz-black);
    --rz-header-background-color: var(--rz-white);
    --rz-header-color: var(--rz-black);
    --rz-primary-light: #4dabf5;
    --rz-profile-menu-padding: 0 1rem 0 0.5rem;
    --rz-grid-column-resizer-helper-background-color: 7DAAF0;
    --rz-input-focus-shadow: insert 0 0 0 1px var(--main-theme-color);
    --rz-input-focus-border: var(--rz-border-width) solid var(--main-theme-color);
    --rz-form-field-start-end-padding-inline: 0.5rem;
    --rz-steps-number-selected-background: var(--highlight-color);
    --rz-steps-title-selected-color: var(--highlight-color);
    --rz-pager-numeric-button-selected-background-color: var(--surface-secondary-color);
    --rz-pager-numeric-button-selected-color: var(--highlight-color);
    --ra-input-backgrpound-color: #4dabf5;
    --rz-panel-menu-item-2nd-level-active-color: var(--main-theme-color);
    /* --rz-tabs-padding: 0 !important; */
}

.sec-icon {
    position: relative;
    display: inline-block;
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

    .sec-icon::before {
        content: "";
        position: absolute;
        height: 2px;
        left: -70px;
        background: #333333;
        width: 50px;
    }

    .sec-icon::after {
        content: "";
        position: absolute;
        height: 2px;
        right: -70px;
        background: #333;
        width: 50px;
    }

.text-span {
    display: flex;
    align-items: center;
    font-size: 1.19rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--bs-body-color);
    text-align: center;
    white-space: nowrap;
    background-color: #ffffff;
    border: none;
    justify-content: center;
    padding: 0.37rem;
}

.group-column {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

/* เส้นแบ่งหน้า  */
hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
/* -----------  */

/* โหลดหน้า เปิด */
.fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loader1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* ครอบคลุมทั้งความกว้างของ viewport */
    height: 100vh; /* ครอบคลุมทั้งความสูงของ viewport */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-family: sans-serif;
    font-size: 30px;
    background: rgba(255, 255, 255, 0.5); /* ตั้งค่าพื้นหลังเป็นสีหมอก */
    z-index: 9999; /* ให้ Loader อยู่ด้านบนสุด */
    background-image: linear-gradient(currentColor 0 0);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 3px;
    animation: l2 2s linear infinite;
}

    .loader1:before {
        content: "Loading..."; /* ข้อความใน Loader */
    }

@keyframes l2 {
    from {
        background-size: 0% 3px;
    }

    to {
        background-size: 100% 3px; /* Animation ของ Loader */
    }
}

/* โหลดหน้า ปิด */

/* ส่วนบน */
.icon-search {
    display: inline-flex !important;
    justify-content: space-evenly !important;
    align-items: center !important;
    position: relative !important;
    top: 3px !important;
    padding: 15px !important;
    flex-wrap: nowrap !important;
}

.table > :not(caption) > * > * {
    padding: 0.2rem 0.2rem;
}

.save_top {
    border: #adacac solid 1px;
}

.header-right {
    text-align: start;
}

.header-left {
    text-align: end;
}

.rz-fileupload-row {
    display: flex;
    color: transparent;
    align-items: center;
    justify-content: space-between;
    flex-direction: column-reverse;
    flex-direction: row;
    margin-top: 20px;
}

    .rz-fileupload-row img {
        width: 250px;
        margin-top: -4rem;
        max-height: 200px;
    }

    .rz-fileupload-row button {
        margin-left: 20rem;
        margin-top: 8px;
    }

.rz-fileupload-files {
    background-color: var(--rz-upload-files-background-color);
    padding: var(--rz-upload-files-padding);
    margin-top: -1.5rem;
}

.rz-fileupload-buttonbar {
    position: relative;
    background-color: transparent;
    padding: var(--rz-upload-button-bar-padding);
    border-radius: var(--rz-upload-button-bar-border-radius);
}

.rz-card.rz-variant-filled {
    box-shadow: var(--rz-base-background-color);
    margin-top: -5px;
}

.rz-card {
    padding: 0;
    box-sizing: var(--rz-base-background-color);
}

.label-group {
    margin-left: 10px;
}

.card {
    background-color: #f9f9f9;
}

/* สีปุ่ม */
.rz-button.rz-primary.rz-shade-default {
    background-color: var(--surface-primary-color);
    color: var(--font-color);
}

.header-left {
    color: #000000;
    font-size: 20px;
    font-weight: bold;
}

.text-head {
    color: #3399FF;
    font-weight: bold;
    text-decoration: underline;
}

/* --------------------------- */
/* ------------body page--------------- */
.page-card {
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    --bs-card-title-spacer-y: 0.5rem;
    --bs-card-title-color:;
    --bs-card-subtitle-color:;
    --bs-card-border-width: var(--bs-border-width);
    --bs-card-border-color: var(--bs-border-color-translucent);
    --bs-card-border-radius: var(--bs-border-radius);
    --bs-card-box-shadow:;
    --bs-card-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
    --bs-card-cap-padding-y: 0.5rem;
    --bs-card-cap-padding-x: 1rem;
    --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);
    --bs-card-cap-color:;
    --bs-card-height:;
    --bs-card-color:;
    --bs-card-bg: var(--bs-body-bg);
    --bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 0.75rem;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: var(--bs-card-height);
    color: var(--bs-body-color);
    word-wrap: break-word;
    background-color: var(--bs-card-bg);
    background-clip: border-box;
    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    border-radius: var(--bs-card-border-radius);
    box-shadow: 2px 2px 4px 0px #0000006e;
}

.page-card-index {
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    --bs-card-title-spacer-y: 0.5rem;
    --bs-card-title-color:;
    --bs-card-subtitle-color:;
    --bs-card-border-width: var(--bs-border-width);
    /*--bs-card-border-color: var(--bs-border-color-translucent);*/
    --bs-card-border-radius: var(--bs-border-radius);
    --bs-card-box-shadow:;
    --bs-card-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
    --bs-card-cap-padding-y: 0.5rem;
    --bs-card-cap-padding-x: 1rem;
    --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);
    --bs-card-cap-color:;
    --bs-card-height:;
    --bs-card-color:;
    /*--bs-card-bg: var(--bs-body-bg);*/
    --bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 0.75rem;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: var(--bs-card-height);
    color: var(--bs-body-color);
    word-wrap: break-word;
    background-color: var(--bs-card-bg);
    background-clip: border-box;
    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    border-radius: var(--bs-card-border-radius);
}

.form-viwe {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
    /* display: flex; */
    /* flex-wrap: wrap; */
    margin-right: calc(var(--bs-gutter-x)* .5);
    margin-left: calc(var(--bs-gutter-x) * .5);
    margin-top: calc(var(--bs-gutter-y) * .5);
    margin-bottom: calc(var(--bs-gutter-y) * .5);
}

.form-viwe-loan {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
    /*display: flex;*/
    /*flex-wrap: wrap;*/
    margin-right: calc(var(--bs-gutter-x)* .5);
    margin-left: calc(var(--bs-gutter-x) * .5);
    margin-top: calc(var(--bs-gutter-y) * .5);
    margin-bottom: calc(var(--bs-gutter-y) * .5);
}

.form-viwe-table {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
    /*display: flex;*/
    /*flex-wrap: wrap;*/
    margin-right: calc(var(--bs-gutter-x)* .5);
    margin-left: calc(var(--bs-gutter-x) * .5);
    margin-top: calc(var(--bs-gutter-y) * .5);
    margin-bottom: calc(var(--bs-gutter-y) * .5);
}


.form-obj {
    /* width: 100%; */
    margin-left: .5rem !important;
    margin-right: .5rem !important;
    /* margin-bottom: 0.5rem; */
}

/* --------------------------- */
.search-with-background {
    background-color: #f9f6bb; /* สีพื้นหลังปกติ */
}

    .search-with-background:focus {
        background-color: #f9f6bb !important; /* สีพื้นหลังเมื่อโฟกัส */
    }

    .search-with-background:not(:placeholder-shown) {
        background-color: #f9f6bb !important; /* สีพื้นหลังเมื่อกรอกข้อมูลแล้ว */
    }

    .search-with-background:hover {
        background-color: #f9f6bb !important; /* สีพื้นหลังเมื่อ hover */
    }

.search-close-background {
    background-color: #f9bdbb; /* สีพื้นหลังปกติ */
}

    .search-close-background:focus {
        background-color: #f9bdbb !important; /* สีพื้นหลังเมื่อโฟกัส */
    }

    .search-close-background:not(:placeholder-shown) {
        background-color: #f9bdbb !important; /* สีพื้นหลังเมื่อกรอกข้อมูลแล้ว */
    }

    .search-close-background:hover {
        background-color: #f9bdbb !important; /* สีพื้นหลังเมื่อ hover */
    }

.search-open-background {
    background-color: #f8bbd0; /* สีพื้นหลังปกติ */
}

    .search-open-background:focus {
        background-color: #f8bbd0 !important; /* สีพื้นหลังเมื่อโฟกัส */
    }

    .search-open-background:not(:placeholder-shown) {
        background-color: #f8bbd0 !important; /* สีพื้นหลังเมื่อกรอกข้อมูลแล้ว */
    }

    .search-open-background:hover {
        background-color: #f8bbd0 !important; /* สีพื้นหลังเมื่อ hover */
    }

.search-dep-background {
    background-color: #b3e5fc; /* สีพื้นหลังปกติ */
}

    .search-dep-background:focus {
        background-color: #b3e5fc !important; /* สีพื้นหลังเมื่อโฟกัส */
    }

    .search-dep-background:not(:placeholder-shown) {
        background-color: #b3e5fc !important; /* สีพื้นหลังเมื่อกรอกข้อมูลแล้ว */
    }

    .search-dep-background:hover {
        background-color: #b3e5fc !important; /* สีพื้นหลังเมื่อ hover */
    }

input:-webkit-autofill {
    background-color: transparent !important;
    color: #000000 !important;
    transition: background-color 5000s ease-in-out 0s !important;
}
/*.rz-numeric-input[readonly],
.rz-numeric input[type=number] .rz-numeric-input[readonly],
.rz-numeric input[type=text] .rz-numeric-input[readonly] {
    background-color: #e9ecef;
    opacity: 1 !important;
}*/
/*.custom-bg .rz-numeric-input[readonly],
.custom-bg .rz-numeric-input[readonly] {
    background-color: inherit !important;
}*/
.rz-numeric-input:disabled,
.rz-numeric input[type=number] .rz-numeric-input:disabled,
.rz-numeric input[type=text] .rz-numeric-input:disabled {
    background-color: #e9ecef !important;
    opacity: 1 !important;
}

.color-bg-black {
    .rz-numeric-input:disabled, .rz-numeric-input[readonly], .rz-numeric input[type=number], .rz-numeric input[type=text]

{
    background-color: black !important;
    opacity: 1;
}

}

.color-bg-red {
    .rz-numeric-input:disabled, .rz-numeric-input[readonly], .rz-numeric input[type=number], .rz-numeric input[type=text]

{
    background-color: red !important;
    opacity: 1;
}

}

.color-bg-lawngreen {
    .rz-numeric-input:disabled, .rz-numeric-input[readonly], .rz-numeric input[type=number], .rz-numeric input[type=text]

{
    background-color: lawngreen !important;
    opacity: 1;
}

}

/*.rz-textbox:disabled,*/
/*.rz-textbox[readonly] {
    background-color: #e9ecef !important;
    box-shadow: none !important;
    opacity: 1;
}*/

.form-control:disabled,
.form-control[readonly],
.form-control[readonly]:focus {
    background-color: #e9ecef;
    opacity: 1;
}


/* กำหนด input radzen เปิด */

/* เปลี่ยนสีช่อง disabled */
:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled,
:not(.rz-form-field-content) > .rz-numeric.rz-state-disabled,
:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled,
:not(.rz-form-field-content) > .rz-autocomplete-input:disabled,
:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete,
:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect,
:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown,
:not(.rz-form-field-content) > .rz-colorpicker:disabled,
.rz-lookup-search :not(.rz-form-field-content) > input:disabled,
:not(.rz-form-field-content) > .rz-numeric:disabled,
.rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled,
:not(.rz-form-field-content) > .rz-multiselect:disabled,
:not(.rz-form-field-content) > .rz-dropdown:disabled,
:not(.rz-form-field-content) > .mask:disabled,
:not(.rz-form-field-content) > .rz-textarea:disabled,
:not(.rz-form-field-content) > .rz-textbox:disabled {
    color: #9e9e9e;
    /*color: black;*/
    background-color: #e9ecef;
    box-shadow: none !important;
}

/*jimmy*/
/* เปลี่ยนสีช่อง disabled class disabled-black */
.disabled-black:not(.rz-form-field-content) > .rz-textbox:disabled,
.disabled-black:not(.rz-form-field-content) > .rz-numeric:disabled,
.disabled-black:not(.rz-form-field-content) > .rz-textarea:disabled,
.disabled-black:not(.rz-form-field-content) > .rz-dropdown:disabled,
.disabled-black:not(.rz-form-field-content) > .rz-multiselect:disabled,
.disabled-black:not(.rz-form-field-content) > .rz-colorpicker:disabled,
.disabled-black:not(.rz-form-field-content) > .rz-autocomplete-input:disabled,
.disabled-black:not(.rz-form-field-content) > .mask:disabled {
    color: black !important;
    background-color: #e9ecef !important;
    box-shadow: none !important;
}

.rz-form-field.rz-state-disabled.rz-variant-outlined .rz-form-field-content,
.rz-form-field.rz-state-disabled.rz-variant-filled .rz-form-field-content,
.rz-form-field.rz-state-disabled.rz-variant-flat .rz-form-field-content {
    border: var(--rz-input-disabled-border);
    background-color: #e9ecef;
}

/* เปล่ียนสีช่อง dropdown */
:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled .rz-inputtext,
:not(.rz-form-field-content) > .rz-numeric.rz-state-disabled .rz-inputtext,
:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled .rz-inputtext,
:not(.rz-form-field-content) > .rz-autocomplete-input:disabled .rz-inputtext,
:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete .rz-inputtext,
:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect .rz-inputtext,
:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown .rz-inputtext,
:not(.rz-form-field-content) > .rz-colorpicker:disabled .rz-inputtext,
.rz-lookup-search :not(.rz-form-field-content) > input:disabled .rz-inputtext,
:not(.rz-form-field-content) > .rz-numeric:disabled .rz-inputtext,
.rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled .rz-inputtext,
:not(.rz-form-field-content) > .rz-multiselect:disabled .rz-inputtext,
:not(.rz-form-field-content) > .rz-dropdown:disabled .rz-inputtext,
:not(.rz-form-field-content) > .mask:disabled .rz-inputtext,
:not(.rz-form-field-content) > .rz-textarea:disabled .rz-inputtext,
:not(.rz-form-field-content) > .rz-textbox:disabled .rz-inputtext {
    background-color: #e9ecef;
    color: #9e9e9e;
    /*color: black;*/
    border: none;
    opacity: 1;
}

/*jimmy*/
/* เปล่ียนสีช่อง dropdown class disabled-black*/
.disabled-black:not(.rz-form-field-content) > .rz-colorpicker.rz-state-disabled .rz-inputtext,
.disabled-black:not(.rz-form-field-content) > .rz-numeric.rz-state-disabled .rz-inputtext,
.disabled-black:not(.rz-form-field-content) > .rz-listbox.rz-state-disabled .rz-inputtext,
.disabled-black:not(.rz-form-field-content) > .rz-autocomplete-input:disabled .rz-inputtext,
.disabled-black:not(.rz-form-field-content) > .rz-state-disabled.rz-autocomplete .rz-inputtext,
.disabled-black:not(.rz-form-field-content) > .rz-state-disabled.rz-multiselect .rz-inputtext,
.disabled-black:not(.rz-form-field-content) > .rz-state-disabled.rz-dropdown .rz-inputtext,
.disabled-black:not(.rz-form-field-content) > .rz-colorpicker:disabled .rz-inputtext,
.disabled-black .rz-lookup-search :not(.rz-form-field-content) > input:disabled .rz-inputtext,
.disabled-black:not(.rz-form-field-content) > .rz-numeric:disabled .rz-inputtext,
.disabled-black .rz-datepicker:not(.rz-form-field-content) > .rz-inputtext:disabled .rz-inputtext,
.disabled-black:not(.rz-form-field-content) > .rz-multiselect:disabled .rz-inputtext,
.disabled-black:not(.rz-form-field-content) > .rz-dropdown:disabled .rz-inputtext,
.disabled-black:not(.rz-form-field-content) > .mask:disabled .rz-inputtext,
.disabled-black:not(.rz-form-field-content) > .rz-textarea:disabled .rz-inputtext,
.disabled-black:not(.rz-form-field-content) > .rz-textbox:disabled .rz-inputtext {
    background-color: #e9ecef !important;
    color: black !important;
    border: none !important;
    opacity: 1 !important;
}

/* กำหนด input วันที่ */
.rz-datepicker > .rz-inputtext {
    width: 100%;
    line-height: var(--rz-datepicker-line-height);
    padding-inline-end: calc(1rem + var(--rz-datepicker-trigger-icon-width));
    text-align: center;
}

/* กำหนด input วันที่ มีสี */
.rz-datepicker.color-bg-input > .rz-inputtext {
    color: var(--bs-body-color);
    background-color: var(--bg-input-background-colors) !important;
}

/*jimmy*/
/* กำหนด input วันที่  class disabled-black*/
.disabled-black .rz-datepicker .rz-inputtext:disabled {
    color: black !important;
    background-color: #e9ecef !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

/* กำหนด input radzen ปิด */

.form-checkbox {
    display: inline-flex;
    margin-top: 0.5rem;
    flex-wrap: nowrap;
    align-items: center;
}

/* กำหนด เส้นคัน */
hr .hr-list {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}


/* ซ่อมตัวหนังสือ */
.text-hidden-width {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



/*.active {
    .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper
    {
        margin-block: var(--rz-panel-menu-item-2nd-level-margin-block);
        margin-inline: var(--rz-panel-menu-item-2nd-level-margin-inline);
        border-radius: var(--rz-panel-menu-item-2nd-level-border-radius);
        background-color: var(--highlight-color);
        overflow: hidden;
    }
} */

/*.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover {
    background-color: var(--highlight-color);
    color: white;
}*/



/*.active {
    .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper

    {
        background-color: var(--highlight-color);
        color: #ffffff;
    }
}*/
/* หัวข้อเข้าสู่ระบบ*/
.header-login {
    text-align: center;
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

/* ปุ่มเข้าสู่ระบบ */
.btn-green-login {
    margin-top: 15px;
    background-color: var(--highlight-color);
    color: #fff;
    font-size: 12px;
    padding: 10px 45px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-size: 16px;
    text-transform: uppercase;
    margin-top: 10px;
    cursor: pointer;
    text-align: center;
}


/* ปรับสีกรอบ input เมื่อโฟกัส */
.rz-form-field
.rz-state-focused
.rz-form-field-content,
.rz-numeric:focus-within:not(.rz-state-disabled),
.rz-autocomplete:focus-within:not(.rz-state-disabled),
.rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus,
.rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus,
.rz-numeric:not(:disabled):not(.rz-state-disabled):focus, .rz-datepicker >
.rz-inputtext:not(:disabled):not(.rz-state-disabled):focus,
.rz-multiselect:not(:disabled):not(.rz-state-disabled):focus,
.rz-dropdown:not(:disabled):not(.rz-state-disabled):focus,
.mask:not(:disabled):not(.rz-state-disabled):focus,
.rz-textarea:not(:disabled):not(.rz-state-disabled):focus,
.rz-textbox:not(:disabled):not(.rz-state-disabled):focus {
    box-shadow: var(--rz-input-focus-shadow);
    border: var(--rz-input-focus-border);
    outline: var(--rz-input-focus-outline);
    outline-offset: var(--rz-input-focus-outline-offset);
    border-color: var(--main-theme-color);
    /*    box-shadow: none;*/
}


/* หัวข้อหน้า */
.bold-highlight {
    font-weight: bold;
    font-size: 25px;
    border-left: 6px solid var(--highlight-color);
}

/* หัวข้อหน้าย่อย */
.bold-highlight-sub {
    font-weight: bold;
    font-size: 17px;
    border-left: 6px solid var(--highlight-color);
}

/* หัวข้อหน้าย่อย ไม่หนา */
.highlight-sub {
    font-size: 17px;
}

.rz-accordion .rz-accordion-header > a span:not(.rz-accordion-toggle-icon) {
    flex-grow: 1;
    font-size: 17px;
    font-weight: bold;
    border-left: 6px solid var(--highlight-color);
    padding-left: 0.5rem;
}


/* ปรับสีแท็ป */
.rz-tabview-nav .rz-tabview-selected {
    background-color: var(--highlight-color) !important;
    color: var(--font-color) !important;
    position: relative;
}

/* สีเส้นเลือก Tab */
.rz-tabview.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected {
    border-top-width: 0;
    border-bottom: 3px solid var(--highlight-color);
}

.rz-tabview.rz-tabview-left > .rz-tabview-nav .rz-tabview-selected {
    border-left-width: 0;
    border-right: 4px solid var(--highlight-color);
}

/* DropDown list ที่เลือก */
.rz-state-highlight.rz-menuitem,
.rz-state-highlight.rz-autocomplete-list-item,
.rz-state-highlight.rz-multiselect-item,
.rz-autocomplete-items li.rz-state-highlight,
.rz-dropdown-items li.rz-state-highlight,
.rz-multiselect-items li.rz-state-highlight,
.rz-dropdown-item.rz-state-highlight {
    background-color: var(--highlight-color);
    color: white;
    box-shadow: var(--rz-dropdown-item-selected-shadow);
    border-radius: 0;
}

    /* เมื่อชี้list ที่เลือกอย่ */
    .rz-state-highlight.rz-menuitem:hover,
    .rz-state-highlight.rz-autocomplete-list-item:hover,
    .rz-state-highlight.rz-multiselect-item:hover,
    .rz-autocomplete-items li.rz-state-highlight:hover,
    .rz-dropdown-items li.rz-state-highlight:hover,
    .rz-multiselect-items li.rz-state-highlight:hover,
    .rz-dropdown-item.rz-state-highlight:hover {
        background-color: var(--highlight-color);
        color: white;
    }

/* chk box */
.rz-chkbox-box
.rzi {
    width: var(--rz-checkbox-icon-width);
    height: var(--rz-checkbox-icon-height);
    font-size: var(--rz-checkbox-icon-font-size);
    color: var(--rz-checkbox-checked-color);
    vertical-align: middle;
    background-color: var(--main-theme-color);
    border-radius: var(--rz-checkbox-checked-icon-border-radius);
}


/* hr dot */
.dots {
    --n: 5;
    width: 200px;
    height: 20px;
    margin: 20px auto;
    background: radial-gradient(circle closest-side,#EAF6F6 98%,#0000) 0/calc(100%/var(--n)) 100%;
}


/*แก้ไข tabs*/
.rz-tabview-nav li a, .rz-tabview-nav li a:not([href]):not([class]) {
    display: flex;
    align-items: center;
    color: inherit;
    padding-block: 0.55rem;
    padding-inline: var(--rz-tabs-tab-padding-inline);
    font-size: var(--rz-tabs-tab-font-size);
    line-height: var(--rz-tabs-tab-line-height);
    font-weight: var(--rz-tabs-tab-font-weight);
    text-transform: var(--rz-tabs-tab-text-transform);
    letter-spacing: var(--rz-tabs-tab-letter-spacing);
    text-decoration: none;
    cursor: pointer;
}

.rz-tabview-left > .rz-tabview-nav li {
    border-radius: 4px 0 0 4px;
}
/* ช่องที่ต้อง กรอกข้อมูลครั้งแรกของหน้าจอ */
.form-control-bg-input {
    display: block;
    width: 100%;
    /*    padding: .375rem .75rem;*/
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bg-input-background-colors) !important;
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.numeric-bg-input {
    width: 100%;
    background-color: var(--bg-input-background-colors);
}

/* ให้ tap ลำดับการทำงาน เป็น column เมือจอเล็ก */
@media screen and (max-width: 575px) {
    .rz-steps [role=tablist] {
        display: flex !important;
        flex-direction: column !important;
    }

    .rz-steps-item {
        display: inline-block !important;
        padding-bottom: 5px !important;
    }

    .rz-tabview-nav {
        list-style: none;
        flex-wrap: wrap;
        padding: 0;
        margin: 0;
    }
}

.rz-steps [role=tablist] {
    display: flex;
    flex-direction: row;
}

.rz-steps-item {
    display: block;
}

/*ให้ tap ลำดับการทำงาน เป็น column เมือจอเล็ก ปิด*/

.custom-from-field .rz-form-field-content {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: top;
    background-color: black;
    margin-block: 0;
    margin-inline: var(--rz-form-field-margin-inline);
    box-shadow: var(--rz-form-field-shadow);
    transition: var(--rz-input-transition);
}


/* ปุ่มค้นหา */
.btn-default {
    --rz-primary: var(--font-color);
    color: var(--rz-primary) !important;
    background-color: var(--highlight-color) !important;
    background-image: none;
    border-color: var(--highlight-color) !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-shadow: 1px 1px 3px 0px #0000006e;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.45, 0.05, 0.55, 0.95);
    border: var(--rz-input-border);
    border-radius: 4px;
}

.btn-border-btn-default {
    /*    border: 1px solid #c7c7c7 !important;*/
}

.btn-default:hover {
    color: var(--font-color) !important;
    background-color: var(--main-theme-color-rgb) !important;
    border-color: var(--main-theme-color-rgb) !important;
}
/*.btn-default:focus,
.btn-default.focus {
    box-shadow: 0 0 0 .2rem rgba(236, 128, 4, 0.5)
}*/

.btn-default.disabled,
.btn-default:disabled {
    color: #D3D3D3 !important;
    background-color: var(--highlight-color) !important;
    border-color: var(--highlight-color) !important;
}

.btn-default:not(:disabled):not(.disabled):active,
.btn-default:not(:disabled):not(.disabled).active,
.show > .btn-default.dropdown-toggle {
    color: #878787 !important;
    background-color: transparent !important;
    box-shadow: inset 0 0 15px rgb(0, 0, 0, 0.20) !important;
    border-color: #bdbdbd !important;
    /*    transform: translate3d(0px, -3px, 0px);*/
}

    .btn-default:not(:disabled):not(.disabled):active:focus,
    .btn-default:not(:disabled):not(.disabled).active:focus,
    .show > .btn-default.dropdown-toggle:focus {
        box-shadow: 0 0 0 .2rem rgba(236, 128, 4, 0.5)
    }

/* css sum total_amt*/
.sum-total {
    font-size: 50px !important;
    font-weight: bold;
    height: 7.75rem;
    background-color: black !important;
    color: lawngreen;
}

.count-number {
    color: red;
    font-weight: bold;
}


/* radiobutton */

.rz-radiobutton-box .rzi-circle-on {
    border-radius: var(--rz-radio-border-radius);
    vertical-align: middle;
    background-color: var(--highlight-color);
    box-shadow: var(--rz-radio-circle-shadow);
}

.rz-radiobutton-box.rz-state-active:hover:not(.rz-state-disabled) {
    background-color: var(--rz-radio-checked-hover-background-color);
    border: 1px solid var(--highlight-color);
    box-shadow: var(--rz-radio-checked-hover-shadow);
    border-width: var(--rz-radio-border-width);
}

.rz-radiobutton-box.rz-state-active {
    background-color: var(--main-theme-color);
    border: 1px solid var(--highlight-color);
    border-width: var(--rz-radio-border-width);
}

.rz-chkbox-icon.rzi.rzi-check {
    background-color: var(--highlight-color);
    border: 1px solid var(--highlight-color);
}

/*.rz-button-icon-left.rzi {
    color: #424242;
}*/

.rz-selectbutton .rz-button.rz-button-md.rz-state-active {
    background-color: var(--highlight-color);
    color: var(--main-theme-color);
}

/* เมาส์ชี้ */
.pointer {
    cursor: pointer;
}


/* ปรับ nvabar / sidebar */


.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper {
    margin-block: var(--rz-panel-menu-item-2nd-level-margin-block);
    margin-inline: var(--rz-panel-menu-item-2nd-level-margin-inline);
    border-radius: var(--rz-panel-menu-item-2nd-level-border-radius);
    background-color: #f5f5f5;
    overflow: hidden;
}

    .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover {
        background-color: var(--highlight-color);
        color: var(--main-theme-color);
    }

.rz-panel-menu .rz-navigation-menu .rz-navigation-item-active, .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active {
    background-color: none;
    color: #757575;
    font-weight: none;
}

.rz-panel-menu .rz-navigation-menu {
    list-style: none;
    padding: 0;
    margin-block-end: 0;
    overflow: hidden;
    background-color: #f5f5f5;
}

.content-with-fixed-header {
    margin-top: 64px;
}

.fixed-header {
    position: sticky;
    top: 0;
    width: 300px;
    z-index: 1000;
    background-color: #ff9822;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    color: white;
}

.rz-sidebar ::-webkit-scrollbar {
    display: none;
}

.rz-sidebar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.rz-layout .rz-sidebar {
    grid-area: rz-sidebar;
    position: static;
    border: 1px solid #dddcdc;
}

.rz-panel-menu .text-head-menu .rz-navigation-item-icon {
    height: 10px;
    width: 10px;
    color: var(--highlight-color);
    /*margin-inline: var(--rz-panel-menu-icon-margin-inline);*/
    font-size: var(--rz-panel-menu-icon-font-size);
    transition: var(--rz-panel-menu-item-transition);
    font-size: 12px;
}

.rz-navigation-item-link-active.rzi.rz-navigation-item-icon {
    height: 10px;
    width: 10px;
/*    color: var(--highlight-color);*/
    /*margin-inline: var(--rz-panel-menu-icon-margin-inline);*/
    font-size: var(--rz-panel-menu-icon-font-size);
    transition: var(--rz-panel-menu-item-transition);
    font-size: 12px;
}

.rz-panel-menu .rz-navigation-menu .rz-navigation-item-active .rz-navigation-item-icon, .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon {
    color: var(--highlight-color);
}

.rz-navigation-item-text {
    flex: auto;
    /*    color: #19202b;*/
}

.header-container-name {
    display: flex;
    flex-direction: column; /* จัดแนวบนล่าง */
    align-items: start; /* กึ่งกลางในแนวนอน */
    line-height: 14px;
}

.menuSubFotter {
    background-image: linear-gradient(to left bottom, var(--surface-secondary-color) 10%, rgb(255 255 255) 51%, transparent 51%);
    background-repeat: no-repeat;
    height: 50px;
}

.text-head-menu {
    font-size: 16px;
    color: #000;
    /*text-shadow: -1px -1px 2px rgba(255, 255, 255, 1);*/
}

.text-head-menu-sub {
    text-shadow: none;
    color: black;
}



.rz-panel-menu .rz-navigation-menu .rz-navigation-item.active-sidbar .rz-navigation-item-wrapper {
    margin-block: var(--rz-panel-menu-item-2nd-level-margin-block);
    margin-inline: var(--rz-panel-menu-item-2nd-level-margin-inline);
    border-radius: var(--rz-panel-menu-item-2nd-level-border-radius);
    background-color: var(--highlight-color) !important;
    color: var(--font-color);
    overflow: hidden;
    text-shadow: none;
}

/*ปรับระยะห่างของ radiobutton*/
.rz-radiobutton-label, .rz-radiobutton-template {
    margin-block: var(--rz-radio-label-margin-block);
    margin-inline: 10px;
}

.rz-radiobutton-box.rz-state-active.rz-state-disabled {
    background-color: var(--rz-radio-checked-background-color);
    border: 1px solid var(--highlight-color);
    border-width: var(--rz-radio-border-width);
    opacity: 0.5;
}

.amount-positive {
    color: green;
}

.amount-negative {
    color: red;
}

.dropdown-center {
    .rz-multiselect-label-container, .rz-dropdown-label

{
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-block: var(--rz-dropdown-label-padding-block);
    padding-inline: var(--rz-dropdown-label-padding-inline);
    margin: 0;
    text-align: center;
}

}

@media (max-width: 1199px) {
    .hide-on-small-screen {
        display: none !important;
    }
}

@media (min-width: 1199px) {
    .hide-on-large-screen {
        display: none !important;
    }
}

@media (max-width: 1399px) {
    /* ซ่อนแถบ Nav ของ Tabs บนหน้าจอขนาดเล็ก */
    .rz-tabview-nav {
        display: none;
    }

    /* ปรับให้แสดง Tab ในรูปแบบ Dropdown */
    .tabs-dropdown {
        display: block;
        width: 100%;
        margin-bottom: 10px;
    }
}

@media (min-width: 1399px) {
    /* ปรับแต่งเนื้อหาของ Tab ให้เต็มหน้าจอ */
    .rz-tabview-panels {
        margin-top: 10px;
    }

    /* ปรับให้ซ่อน Tab ในรูปแบบ Dropdown */
    .tabs-dropdown {
        display: none;
        width: 100%;
        margin-bottom: 10px;
    }
}

ul[role=tablist] {
    flex-wrap: wrap;
}

.custom-tab {
    background-color: #e3eaf2;
    /* สีพื้นหลัง */
    border-radius: 30px;
    /* มุมโค้งมน */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    /* เงาอ่อนๆ */
    color: #000;
    /* สีข้อความ */
    font-weight: 100%;
    text-align: center;
    cursor: pointer;
    margin-bottom: 10px;
}

.tab-container {
    overflow-x: auto; /* เปิดการเลื่อนในแนวนอน */
    white-space: nowrap; /* ป้องกันข้อความขึ้นบรรทัดใหม่ */
    scrollbar-width: thin; /* ปรับขนาด scrollbar (Firefox) */
    display: flex; /* ใช้ flex เพื่อให้แท็บอยู่ในแนวเดียวกัน */
    padding-bottom: 5px; /* เผื่อพื้นที่ใต้ scrollbar */
}

.custom-tab-loan {
    background-color: #e3eaf2;
    /* สีพื้นหลัง */
    border-radius: 30px;
    /* มุมโค้งมน */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    /* เงาอ่อนๆ */
    color: #000;
    /* สีข้อความ */
    font-weight: 100%;
    text-align: center;
    cursor: pointer;
    margin-bottom: 10px;
}


/* ปรับ ความห่างหัวตาราง */
.rz-datatable-thead th > div:not(.rz-cell-filter), .rz-grid-table thead th > div:not(.rz-cell-filter) {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    outline: none;
    padding: var(--rz-grid-header-cell-padding);
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

/* ขนาดตัวอักษร หัวตาราง */
rz-datatable-thead th .rz-column-title, .rz-grid-table thead th .rz-column-title {
    display: inline-flex;
    flex: auto;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
    font-size: 16px;
    line-height: var(--rz-grid-header-line-height);
    text-transform: var(--rz-grid-header-text-transform);
    color: #000000;
    padding-inline: 0;
    font-weight: var(--rz-grid-header-font-weight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    justify-content: center;
}

/* ขนาดตัวอักษร ข้อมูลในตาราง */
rz-datatable-data td .rz-cell-data, .rz-grid-table td .rz-cell-data {
    color: var(--rz-grid-cell-color);
    font-size: 14px;
    line-height: var(--rz-grid-cell-line-height);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ปรับ ความห่างท้ายตาราง */
.rz-grid-table tfoot, .rz-grid-table tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 1;
    padding: 0rem;
}

/* ปรับระยะห่าง ช่องกรอกข้อความ */
.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox {
    /*    padding-block: 0.5rem;*/
    /*padding-inline: 0.2rem;*/
    font-size: 14px;
}
.rz-data-grid {
    border-radius: 0.75rem;
}
.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .mask, .rz-textarea, .rz-textbox {
    box-shadow: inset -4px -4px 6px rgb(0, 0, 0, 0.1) !important;
}

.rz-dropdown {
    box-shadow: 1px 1px 3px 0px #0000006e;
}

    .rz-dropdown:not(:disabled):not(.rz-state-disabled):active {
        box-shadow: inset 0 0 17px rgb(0, 0, 0, 0.20) !important;
    }

    .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus {
        box-shadow: 1px 1px 3px 0px #0000006e;
        border: var(--rz-input-border);
        outline: none;
        outline-offset: 0;
    }

.form-control {
    /*display: block;
    width: 100%;
    padding: .375rem .75rem;*/
    font-size: 14px !important;
    /*font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;*/
}

.rz-form-field-content {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: top;
    margin-block: -1px;
    margin-inline: var(--rz-form-field-margin-inline);
    box-shadow: var(--rz-form-field-shadow);
    transition: var(--rz-input-transition);
}
/*pream*/
.custom-dialog-header .rz-dialog-titlebar {
    background-color: var(--highlight-color);
    display: flex;
    justify-content: center;
    padding: 10px;
}
/*pream*/
.custom-dialog-header .rz-dialog-title {
    color: #ffffff;
    font-weight: bold;
}

/*pream*/
.rz-datepicker.custom-cursor-readonly input[readonly] {
    cursor: text !important;
}
/*pream*/
.custom-r-numeric input {
    text-align: right;
}

/*jimmy*/
.custom-dialog-header2 .rz-dialog-titlebar-close {
    display: none;
}
/*jimmy*/
.custom-dialog-header2 .rz-dialog-titlebar {
    background-color: var(--main-theme-color);
    display: flex;
    justify-content: center;
    padding: 10px;
}
/*jimmy*/
.custom-dialog-header2 .rz-dialog-title {
    color: #ffffff;
    font-weight: bold;
}

/*faro*/
.rz-grid-table-fixed .rz-frozen-cell-right.rz-frozen-cell-right-end {
    box-shadow: -15px 0 15px -15px rgba(0, 0, 0, 0.12);
    border-inline-start: var(--rz-grid-frozen-cell-border) !important;
}

/* โฟกัสเลือกตาราง ตัวอักษร */
.rz-selectable tbody tr.rz-data-row.rz-state-highlight .rz-cell-data {
    color: black;
}
.rz-datatable-data td,
.rz-datatable-data th {
    border: 1px solid #dee2e6 !important;
}

.rz-grid-table {
    border-collapse: collapse !important;
}


/* ปิดกรอบ ของ data list */
.data-list-non-border {
    .rz-g > div, .rz-datalist-data > li

{
    border-radius: 0;
    border: 0;
    box-shadow: var(--rz-datalist-item-shadow);
    padding: 0;
    background-color: #f0f8ff00;
}

}

.rz-selectbutton.open .rz-button.rz-button-sm.rz-state-active {
    background-color: var(--highlight-color);
    color: #ffffff;
}

.rz-selectbutton .rz-button.rz-button-sm.rz-state-active {
    background-color: #F44336;
    color: #ffffff;
}

.rz-button.rz-success.rz-shade-default {
    background-color: var(--rz-success) !important;
    color: var(--rz-on-success) !important;
}

.rz-button.rz-danger.rz-shade-default {
    background-color: var(--rz-danger) !important;
    color: var(--rz-on-danger) !important;
}

/*ปรับการแสดงผล Tab*/
ul[role=tablist] {
    flex-wrap: wrap;
}

.custom-tab {
    background-color: #e3eaf2; /* สีพื้นหลัง */
    border-radius: 30px; /* มุมโค้งมน */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* เงาอ่อนๆ */
    color: #000; /* สีข้อความ */
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    margin-bottom: 10px;
}

    .custom-tab.selected {
        background-color: #d1dae3; /* สีพื้นหลังเมื่อถูกเลือก */
    }

.custom-tab-item {
    margin: 5px 10px 0 2px; /* เพิ่มระยะห่างระหว่างแท็บแต่ละอัน */
}

/* css sum total_amt*/
.sum-total-Ass {
    font-size: 15px !important;
    font-weight: bold;
    height: 3.75rem;
    background-color: black !important;
    color: lawngreen;
}

/* css sum total_amt mini*/
.sum-total-mini {
    background-color: black !important;
    color: lawngreen !important;
}

input[type='radio'] {
    accent-color: var(--highlight-color);
}

/* DdDataGridMembGroup */
#popup-DdDataGridMembGroup {
    min-width: 700px !important;
}

/* hr-underline-sub */
.hr-underline-sub {
    /*border: 1px solid var(--main-theme-color);*/
    border: 1px solid var(--highlight-color);
}
/*css app index*/
.group-app {
    text-align: center;
}

.icons-app {
    font-size: 100px;
}

.text-app {
    margin-top: 10px;
}

.sec-icon {
    position: relative;
    display: inline-block;
    padding: 0;
    margin: 0 auto;
}

    .sec-icon::before {
        content: "";
        position: absolute;
        height: 1px;
        left: -70px;
        margin-top: -5.5px;
        top: 60%;
        background: #333333;
        width: 50px;
    }

    .sec-icon::after {
        content: "";
        position: absolute;
        height: 1px;
        right: -70px;
        margin-top: -5.5px;
        top: 60%;
        background: #333;
        width: 50px;
    }

.advertisers-service-sec {
    /*background-color: #f5f5f5;*/
}

    .advertisers-service-sec span {
        color: rgb(255, 23, 131);
    }

    .advertisers-service-sec .col {
        text-align: center;
        width: 20%
    }

    .advertisers-service-sec .service-card {
        padding: 1rem 1rem;
        border-radius: 5px;
        box-shadow: 0 0 35px rgba(0, 0, 0, 0.12);
        cursor: pointer;
        transition: 0.5s;
        position: relative;
        z-index: 2;
        overflow: hidden;
        background: #fff;
        border-radius: 10px;
        text-align: center;
    }

        .advertisers-service-sec .service-card::after {
            content: "";
            width: 100%;
            height: 100%;
            /*  background: linear-gradient(#0dcaf0, rgb(255, 23, 131)); */
            /* background: linear-gradient(#0df02f, rgb(64 216 195)); */
            background: var(--highlight-color);
            position: absolute;
            left: 0%;
            top: -98%;
            z-index: -2;
            transition: all 0.4s cubic-bezier(0.77, -0.04, 0, 0.99);
        }

    .advertisers-service-sec h3 {
        font-size: 14px;
        text-transform: capitalize;
        font-weight: bold;
        color: #1f194c;
        margin: 0.5rem 0;
    }

    .advertisers-service-sec p {
        color: #575a7b;
        font-size: 15px;
        line-height: 1.6;
        letter-spacing: 0.03em;
        z-index: 3;
    }

    .advertisers-service-sec .icon-wrapper {
        position: relative;
        font-size: 20px;
        margin: auto;
        height: 5.5em;
        width: 5.5em;
        color: #ffffff;
        border-radius: 50%;
        display: grid;
        place-items: center;
        transition: 0.5s;
        z-index: 3;
    }

    .advertisers-service-sec .service-card:hover:after {
        top: 0%;
    }

.service-card .icon-wrapper {
    background-color: #ffff;
    color: rgb(255, 23, 131);
    border-radius: 40px;
    border-radius: 25px;
}

.icon-wrapper .app-img {
    max-width: 5.5em;
    max-height: 5.5em;
}

.advertisers-service-sec .service-card:hover .icon-wrapper {
    color: #0dcaf0;
}

.advertisers-service-sec .service-card:hover h3 {
    color: #ffffff;
}

.advertisers-service-sec .service-card:hover p {
    color: #f0f0f0;
}

/* ขนาดช่องเงิน */
.big-numeric .rz-inputtext {
    font-size: 40px !important;
}

.rz-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 1000;
}

    .rz-dialog-overlay .dialog-card {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: calc(100% - 50px);
        min-width: 335px;
        max-width: 500px;
    }

/* Config */
.rz-panel-menu .rz-navigation-item-active, .rz-panel-menu .rz-navigation-item-wrapper-active {
    background-color: var(--highlight-color);
    color: var(--font-color);
}

    .rz-panel-menu .rz-navigation-item-active .rz-navigation-item-icon, .rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon {
        color: var(--font-color);
    }

.rz-panel-menu .rz-navigation-item-link:hover {
    background-color: var(--highlight-color);
    color: var(--main-theme-color)
}


/*start off - on */
.checkbox-wrapper-8 .tgl {
    display: none;
}

    .checkbox-wrapper-8 .tgl,
    .checkbox-wrapper-8 .tgl:after,
    .checkbox-wrapper-8 .tgl:before,
    .checkbox-wrapper-8 .tgl *,
    .checkbox-wrapper-8 .tgl *:after,
    .checkbox-wrapper-8 .tgl *:before,
    .checkbox-wrapper-8 .tgl + .tgl-btn {
        box-sizing: border-box;
    }

        .checkbox-wrapper-8 .tgl::-moz-selection,
        .checkbox-wrapper-8 .tgl:after::-moz-selection,
        .checkbox-wrapper-8 .tgl:before::-moz-selection,
        .checkbox-wrapper-8 .tgl *::-moz-selection,
        .checkbox-wrapper-8 .tgl *:after::-moz-selection,
        .checkbox-wrapper-8 .tgl *:before::-moz-selection,
        .checkbox-wrapper-8 .tgl + .tgl-btn::-moz-selection,
        .checkbox-wrapper-8 .tgl::selection,
        .checkbox-wrapper-8 .tgl:after::selection,
        .checkbox-wrapper-8 .tgl:before::selection,
        .checkbox-wrapper-8 .tgl *::selection,
        .checkbox-wrapper-8 .tgl *:after::selection,
        .checkbox-wrapper-8 .tgl *:before::selection,
        .checkbox-wrapper-8 .tgl + .tgl-btn::selection {
            background: none;
        }

        .checkbox-wrapper-8 .tgl + .tgl-btn {
            outline: 0;
            display: block;
            width: 4em;
            height: 2em;
            position: relative;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

            .checkbox-wrapper-8 .tgl + .tgl-btn:after,
            .checkbox-wrapper-8 .tgl + .tgl-btn:before {
                position: relative;
                display: block;
                content: "";
                width: 50%;
                height: 100%;
            }

            .checkbox-wrapper-8 .tgl + .tgl-btn:after {
                left: 0;
            }

            .checkbox-wrapper-8 .tgl + .tgl-btn:before {
                display: none;
            }

        .checkbox-wrapper-8 .tgl:checked + .tgl-btn:after {
            left: 50%;
        }

.checkbox-wrapper-8 .tgl-skewed + .tgl-btn {
    overflow: hidden;
    transform: skew(-10deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: all 0.2s ease;
    font-family: sans-serif;
    background: #888;
}

    .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:after,
    .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:before {
        transform: skew(10deg);
        display: inline-block;
        transition: all 0.2s ease;
        width: 100%;
        text-align: center;
        position: absolute;
        line-height: 2em;
        font-weight: bold;
        color: #fff;
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    }

    .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:after {
        left: 100%;
        content: attr(data-tg-on);
    }

    .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:before {
        left: 0;
        content: attr(data-tg-off);
    }

    .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:active {
        background: #888;
    }

        .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:active:before {
            left: -10%;
        }

.checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn {
    background: var(--surface-primary-color);
}

    .checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn:before {
        left: -100%;
    }

    .checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn:after {
        left: 0;
    }

    .checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn:active:after {
        left: 10%;
    }


/*end off - on */

/* Apv_mbshr_appl Grid Styling */
/*.apv-grid-lines .rz-grid-table-fixed .rz-frozen-cell-left,
.apv-grid-lines .rz-grid-table-fixed .rz-frozen-cell-right,
.apv-grid-lines .rz-grid-table-fixed .rz-frozen-cell-left-inner,
.apv-grid-lines .rz-grid-table-fixed .rz-frozen-cell-right-inner {
    background-color: #f0f0f0 !important;
}*/

.btn-custom-outline {
    color: #7DAAF0;
    border-color: #7DAAF0;
}

    .btn-custom-outline:hover {
        color: #fff; /* สีข้อความเมื่อวางเมาส์ */
        background-color: #7DAAF0; /* สีพื้นหลังเมื่อวางเมาส์ */
        border-color: #7DAAF0; /* สีกรอบเมื่อวางเมาส์ */
    }

/* Custom Tab Filter Buttons */
.custom-tab-filter {
    background-color: #e3eaf2;
    border-radius: 30px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    color: #000;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    border: 1px solid #ccc;
    padding: 8px 20px;
    font-size: 13px;
    transition: all 0.3s ease;
    margin: 5px 5px 5px 2px;
    white-space: nowrap;
}

.custom-tab-filter:hover {
    background-color: #d1dae3;
}

/* ปุ่มที่ถูกเลือก - สีส้ม */
.custom-tab-filter.selected {
    background-color: var(--highlight-color, #F77F00) !important;
    color: #fff !important;
    border-color: var(--highlight-color, #F77F00) !important;
}

.custom-tab-filter.selected:hover {
    background-color: var(--highlight-color, #F77F00) !important;
}