/* import */
    /* @import url('https://fonts.googleapis.com/css2?family=Itim&display=swap'); */
/* import */

/* นัท */
    :root {
        /* --primary: rgba(157, 157, 157, 0.384); */
        --primary: #d4d4d4;
        /* --primary: #366092; */
        --primary-001: #ebebeb;
        --light-primary: #f2f2f2;
        --secondary: #737373;
        --white: white;
        --dark: black;
        --danger: rgb(255, 71, 71);
        --red: red;
        --light-danger: rgb(255, 222, 222);
        --placeholder: #aaa;
        --required: rgb(255, 248, 248);
        --bg-blur: rgba(0, 0, 0, 0.5);
        --empty001: #bbb;
        --empty002: #ccc;
        --blue: #4070f4;
        --light-blue: rgb(217, 217, 252);
        --row-even: rgb(226, 226, 226);

        --blue-hover: rgb(215, 215, 255);
        --info-hover: rgb(202, 238, 251);
        --secondary-hover: #ccc;
        --success-hover: rgb(214, 255, 214);
        --danger-hover: rgb(255, 218, 218);

        --smoot-100: 100ms ease;
        --smoot-200: 200ms ease;
        --smoot-300: 300ms ease;
        --shadow-primary: 0 4px 6px var(--light-primary);
        --border-radius: 4px;

        --content-admin: #f8f9ff;
        --text-in-bg-primary: #000;
        --backdrop-modal: #000;
        --input-required: rgb(255, 236, 236);

        --bg-th: #4070f4;
        --text-in-th: white;

        --bg-th-orange: #ff7000;
        --text-in-th-orange: white;

        --bg-th-purple: purple;
        --text-in-th-purple: white;

        --bg-th-green: green;
        --text-in-th-green: white;

        --tr-hover: rgb(208, 242, 255);
    }


    @font-face {
        font-style: normal;
        font-weight: normal;
        src: url('/font/Sarabun-Regular.ttf') format('truetype');
        font-family: 'Sarabun';
    }

    * {
        font-size: 12px;
        font-family: "Sarabun", sans-serif;
    }

    .text-in-bg-primary {
        color: var(--text-in-bg-primary) !important;
    }

    #content {
        width: calc(100vw - 110px);
    }

    .component {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    html {
        width: 100vw !important;
        overflow: hidden;
    }

    body {
        width: 100vw;
        min-width: 100vw;
        max-width: 100vw;
        overflow: hidden;
    }


    @media (min-width: 768px) {
        body {
            height: 100vh;
            overflow: hidden;
        }
    }


    .slk-tab-menu {
        padding: 0 10px;
        height: 30px;
    }


    .slk-tab-menu2 {
        padding: 0 10px;
        height: 30px;
    }

    .slk-sidebar {
        width: 100px;
        height: calc(100vh - 60px);
    }


    .table-absolute {
        position: absolute;
        top: 0;
        left: 0;
    }


    .content--sidebar {
        width: calc(100vw - 106px);
    }

    .z-tooltips {
        z-index: 100 !important;
    }

    .h-30 {
        height: 30px;
    }


    .loading {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .loading-spinner {
        border-width: 10px !important;
        width: 10rem;
        height: 10rem;
    }

    .z-max {
        z-index: 999999;
    }

    .drag-h {
        height: 30px;
    }

    .x-modal-center {
        transform: translate(-50%, -50%);
    }

    .x-modal {
        position  :    absolute;
        top       :    50%;
        left      :    50%;
        transform :    translateY(-50%);
        border    :    1px solid #888;
    }

    .x-modal-in-content {
        position: absolute;
        top: 30%;
        left: 50%;
        border: 1px solid #888;
    }

    .x-modal-300 {
        width: 100%;
        max-width: 300px;
    }

    .x-modal-sm {
        width: 100%;
        max-width: 400px;
    }

    .x-modal-md {
        width: 100%;
        max-width: 500px;
    }

    .x-modal-lg {
        width: 100%;
        max-width: 600px;
    }

    .x-modal-xl {
        width: 100%;
        max-width: 700px;
    }

    .x-modal-xxl {
        width: 100%;
        max-width: 800px;
    }

    .x-modal-1010px {
        width: 100%;
        max-width: 1010px;
    }

    .x-modal-close {
        position: absolute;
        top: -25px;
        right: 10px;
    }

    .x-modal-title {
        position: absolute;
        top: -25px;
        left: 10px;
    }

    .x-modal-input {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 90;
        width: 300px;
    }

    .z-modal-global {
        z-index: 100;
    }

    .modal-z-120 {
        z-index: 120;
    }

    .z-modal-1 {
        z-index: 110;
    }

    .z-modal-2 {
        z-index: 120;
    }

    .z-modal-3 {
        z-index: 130;
    }

    .modal-h-v1 {
        height: 40vh !important;
    }

    .modal-h-v2 {
        height: 50vh !important;
    }

    .modal-h-v3 {
        height: 60vh !important;
    }

    .modal-not-overflow {
        overflow: hidden;
    }

    .modal-h-700px {
        height: 700px !important;
    }



    .backdrop-1 {
        position: absolute;
        opacity: 0.1;
        z-index: 109;
        inset: 0;
        background-color: var(--primary);
    }

    .backdrop-z-119 {
        position: absolute;
        opacity: 0;
        z-index: 119;
        inset: 0;
        background-color: var(--primary);
    }


    .backdrop-2 {
        position: absolute;
        opacity: 0;
        z-index: 119;
        inset: 0;
        background-color: var(--primary);
    }

    .backdrop-3 {
        position: absolute;
        opacity: 0;
        z-index: 129;
        inset: 0;
        background-color: var(--primary);
    }

    .backdrop-001 {
        position: absolute;
        opacity: 0.1;
        z-index: 109;
        inset: 0;
        background-color: var(--primary);
    }

    .backdrop-002 {
        position: absolute;
        opacity: 0.1;
        z-index: 119;
        inset: 0;
        background-color: var(--primary);
    }


    .not-use {
        filter: contrast(25%) !important;
    }

    .no-select {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .gutter-x-0 {
        --bs-gutter-x: 0 !important;
    }

    .text-ellipsis {
        text-overflow: ellipsis;
    }


    /* ? ******************* Start Tooltips ******************* */
    .parent-tooltips:hover .child-tooltips {
        display: block;
        bottom: calc(100% + 10px);
        visibility: visible;
        opacity: 1;
    }

    .child-tooltips {
        position: absolute;
        right: 0;
        bottom: 100%;
        visibility: hidden;
        opacity: 0;
        z-index: 20;

        transition: var(--smoot-300);
        white-space: nowrap;
    }

    .child-tooltips:hover {
        display: none !important;
    }

    .child-tooltips-bottom {
        position: absolute;
        top: 100%;
        right: 0;
        visibility: hidden;
        opacity: 0;
        z-index: 20;

        transition: var(--smoot-300);
        white-space: nowrap;
    }

    .child-tooltips:hover,
    .child-tooltips-bottom:hover {
        display: none !important;
    }
    /* ? ******************* End Tooltips ******************* */


    /* * ******************* Start Background ******************* */
    /* * ******************* Start Background ******************* */
    /* * ******************* Start Background ******************* */
    .bg-l-info {
        background-color: var(--info-hover);
    }

    .bg-blue {
        background-color: var(--blue);
    }

    .bg-l-blue {
        background-color: var(--blue-hover);
    }

    .bg-l-success {
        background-color: var(--success-hover);
    }

    .bg-primary {
        background-color: var(--primary) !important;
    }

    .bg-l-primary {
        background-color: var(--light-primary) !important;
    }

    .bg-l-danger {
        background-color: var(--danger-hover) !important;
    }

    .bg-l-secondary {
        background-color: var(--secondary-hover) !important;
    }
    /* * ******************* End Background ******************* */
    /* * ******************* End Background ******************* */
    /* * ******************* End Background ******************* */


    /* ? ******************* Start Background ******************* */
    .text-blue {
        color: var(--blue);
    }
    .text-red {
        color: var(--red);
    }
    .text-empty {
        color: var(--empty001);
    }
    /* ? ******************* End Background ******************* */

    /* start bootstrap modify */
    /* start bootstrap modify */
    /* start bootstrap modify */

    .text-primary {
        color: var(--primary) !important;
    }

    .text-secondary {
        color: var(--secondary) !important;
    }
    .text-white {
        color: var(--white) !important;
    }

    .wrap-text {
        word-wrap: break-word; /* ตัดคำลงบรรทัดใหม่เมื่อคำยาวเกิน */
        overflow-wrap: break-word; /* รองรับในเบราว์เซอร์ใหม่ */
    }


    /* end bootstrap modify */
    /* end bootstrap modify */
    /* end bootstrap modify */



    .content {
        padding: 1rem 0;
    }

    * {
        box-sizing: border-box;
        /* font-family: "Itim", cursive; */
    }

    a {
        color: var(--dark);
        text-decoration: none;
    }

    ul {
        padding: 0;
    }

    li {
        list-style: none;
    }

    table .v-top * {
        vertical-align: top !important;
    }

    .x-table-form * {
        vertical-align: top !important;
    }

    .table-resizable .resize-bar {
        cursor: col-resize;
        -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 5px;
        height: 100%;
                user-select: none;
    }

    .table-resizable th, .table-resizable td {
        position: relative;
    }

    table {
        width: 100%;
        table-layout: auto;
    }

    table th {
        white-space: nowrap;
    }

    table * {
        vertical-align: middle;
    }

    .table th,
    .table td {
        padding: 1px 3px !important;
    }

    table:not(.table) th,
    table:not(.table) td {
        position: relative;
        padding: 1px;
    }

    .bg-th {
        background-color: var(--bg-th) !important;
    }

    .text-in-th {
        color: var(--text-in-th) !important;
    }

    .th-count-row,
    .td-count-row {
        position: sticky;
        left: 0;
        background-color: var(--bg-th) !important;
        width: 22px;
        color: var(--text-in-th) !important;
        text-align: center;
    }

    .th-count-row {
        top: 0 !important;
    }


    .resizer {
        position: absolute;
        top: 0;
        right: 0;
        opacity: 0;
        cursor: col-resize;
        width: 5px;
        user-select: none;
    }

    .outline-none {
        outline: none !important;
    }

    /* .tbody-global tr:nth-child(even) td {
        background-color: var(--row-even);
    } */

    .tbody-global tr:hover > td {
        background-color: var(--tr-hover);
    }

    .thead-global {
        transform: translateY(-1px) !important;
    }

    .thead-global tr th {
        background-color: var(--bg-th) !important;
        color: var(--text-in-th) !important;
        font-weight: 400;
    }

    .thead-orange-global tr th {
        background-color: var(--bg-th-orange) !important;
        color: var(--text-in-th-orange) !important;
        font-weight: 400;
    }

    .thead-purple-global tr th {
        background-color: var(--bg-th-purple) !important;
        color: var(--text-in-th-purple) !important;
        font-weight: 400;
    }

    .thead-green-global tr th {
        background-color: var(--bg-th-green) !important;
        color: var(--text-in-th-green) !important;
        font-weight: 400;
    }

    .td-first {
        background-color: var(--bg-th) !important;
        color: var(--text-in-th) !important;
    }

    .td-selected {
        background-color: var(--bg-th) !important;
        color: var(--text-in-th) !important;
    }

    .focus-row {
        background-color: var(--bg-th) !important;
        color: var(--text-in-th) !important;
    }

    .word-wrap {
        word-wrap: break-word;
    }

    .w-default {
        margin-inline: auto;
        /* width: 98%; */
        width: 70%;
    }

    .px-default {
        padding-inline: 5rem;
    }

    .space-nowrap {
        white-space: nowrap;
    }

    .span-delete {
        visibility: hidden;
    }

    .pointer {
        cursor: pointer;
    }

    .context-menu {
        cursor: context-menu;
    }

    .context-menu-important {
        cursor: context-menu !important;
    }


    .wait {
        cursor: wait;
    }

    .move {
        cursor: move;
    }

    .alias {
        cursor: alias;
    }

    .context-menu {
        cursor: context-menu;
    }

    .events-none {
        pointer-events: none !important;
    }

    .no-drop {
        cursor: no-drop !important;
    }

    .w-fit {
        width: fit-content;
    }

    /* * ******************* Start Text Size ******************* */
    /* * ******************* Start Text Size ******************* */
    /* * ******************* Start Text Size ******************* */
    .text-bs-primary {
        color: var(--bs-primary) !important;
    }
    /* * ******************* End Text Size ******************* */
    /* * ******************* End Text Size ******************* */
    /* * ******************* End Text Size ******************* */



    /* ? ******************* Start Text Size ******************* */
    /* ? ******************* Start Text Size ******************* */
    /* ? ******************* Start Text Size ******************* */
    .ts-8 {
        font-size: 10px !important;
    }
    .ts-9 {
        font-size: 10px !important;
    }
    .ts-10 {
        font-size: 10px !important;
    }
    .ts-11 {
        font-size: 11px !important;
    }
    .ts-12 {
        font-size: 12px !important;
    }
    .ts-13 {
        font-size: 13px !important;
    }
    .ts-14 {
        font-size: 14px !important;
    }
    .ts-15 {
        font-size: 15px !important;
    }
    .ts-16 {
        font-size: 16px !important;
    }
    .ts-17 {
        font-size: 17px !important;
    }
    .ts-18 {
        font-size: 18px !important;
    }
    .ts-19 {
        font-size: 19px !important;
    }
    .ts-20 {
        font-size: 20px !important;
    }
    .ts-21 {
        font-size: 21px !important;
    }
    .ts-22 {
        font-size: 22px !important;
    }
    .ts-23 {
        font-size: 23px !important;
    }
    .ts-24 {
        font-size: 24px !important;
    }
    /* ? ******************* End Text Size ******************* */
    /* ? ******************* End Text Size ******************* */
    /* ? ******************* End Text Size ******************* */


    /* ? ******************* Start button ******************* */
    /* ? ******************* Start button ******************* */
    /* ? ******************* Start button ******************* */
    button {
        outline: none;
        line-height: 1.5 !important;
    }

    .button-primary {
        transition: var(--smoot-300);
        border: none;
        border: 1px solid var(--primary);
        border-radius: var(--border-radius);
        background-color: var(--primary);
        /* color: var(--white); */
        color: #000 !important;
    }

    .button-primary:hover {
        border: 1px solid var(--light-primary);
        background-color: var(--light-primary);
        color: var(--primary);
    }

    .button-l-primary {
        transition: var(--smoot-300);
        border: none;
        border: 1px solid var(--light-primary);
        border-radius: var(--border-radius);
        background-color: var(--light-primary);
        color: var(--primary);
    }

    .button-l-primary:hover {
        border: 1px solid var(--primary);
        background-color: var(--primary);
        color: var(--white);
    }

    .button-empty {
        transition: var(--smoot-300);
        border: none;
        border: 1px solid var(--empty002);
        border-radius: var(--border-radius);
        background-color: var(--empty002);
        color: var(--dark);
    }


    /* .button-empty:hover {
        background-color: var(--primary);
        color: var(--white);
    } */

    .button-danger {
        transition: var(--smoot-300);
        border: none;
        border-radius: var(--border-radius);
        background-color: var(--danger);
        color: var(--white);
    }

    .button-danger:hover {
        background-color: var(--light-danger);
        color: var(--primary);
    }

    .btn-primary,
    .btn-danger,
    .btn-secondary,
    .btn-info,
    .btn-success {
        transition: var(--smoot-300) !important;
    }


    .btn-primary:hover {
        border: 1px solid var(--light-blue) !important;
        background-color: var(--light-blue) !important;
        color: var(--blue) !important;
    }


    .btn-secondary:hover {
        border: 1px solid var(--secondary-hover) !important;
        background-color: var(--secondary-hover) !important;
        color: var(--black) !important;
    }

    .btn-danger:hover {
        border: 1px solid var(--danger-hover) !important;
        background-color: var(--danger-hover) !important;
        color: var(--danger) !important;
    }

    .btn-success:hover {
        border: 1px solid var(--success-hover) !important;
        background-color: var(--success-hover) !important;
        color: var(--bs-success) !important;
    }

    .btn-info:hover {
        border: 1px solid var(--info-hover) !important;
        background-color: var(--info-hover) !important;
        color: var(--blue) !important;
    }

    /* ? ******************* End button ******************* */
    /* ? ******************* End button ******************* */
    /* ? ******************* End button ******************* */


    /* ? ******************* Start View Image ******************* */
    /* ? ******************* Start View Image ******************* */
    /* ? ******************* Start View Image ******************* */
    .img-not-use {
        opacity: 0.6;
        filter: grayscale(100%) ;
    }

    @media (min-width: 562px) {
        .img-view-tag {
            width: 450px;
        }
    }

    @media (max-width: 562px) {
        .img-view-tag {
            width: 90%;
        }
    }
    /* ? ******************* End View Image ******************* */
    /* ? ******************* End View Image ******************* */
    /* ? ******************* End View Image ******************* */


    .shadow-primary {
        box-shadow: var(--shadow-primary);
    }

    .admin-content {
        background-color: var(--light-primary);
        min-height: 100vh;
    }

    .color-primary {
        color: var(--primary);
    }

    .color-secondary {
        color: var(--secondary);
    }

    ::placeholder {
        color: var(--placeholder) !important;
    }

    .bg-required-input {
        background-color: var(--input-required);
    }

    .input-required {
        background-color: var(--input-required) !important;
    }

    input[type="date"] {
        outline: none !important;
    }

    .icon-input-global {
        position: absolute;
        top: 50%;
        right: 6px;
        transform: translateY(-50%);
        width: 10px;
        height: 10px;
    }

    .input-global {
        padding: 0;
        height: 20px;
    }

    .input-mini {
        width: 50px;
        min-width: 50px;
        max-width: 50px;
    }

    .input-sm {
        width: 80px;
        min-width: 80px;
        max-width: 80px;
    }

    .input-0 {
        width: 100px;
        min-width: 100px;
        max-width: 100px;
    }
    .input-1 {
        width: 100%;
        min-width: 110px;
        max-width: 110px;
    }
    .input-2 {
        width: 100%;
        min-width: 120px;
        max-width: 120px;
    }
    .input-3 {
        width: 130px;
        min-width: 130px;
        max-width: 130px;
    }
    .input-4 {
        width: 100%;
        min-width: 140px;
        max-width: 140px;
    }
    .input-5 {
        width: 150px;
        min-width: 150px;
        max-width: 150px;
    }
    .input-6 {
        width: 160px;
        min-width: 160px;
        max-width: 160px;
    }
    .input-6 {
        width: 170px;
        min-width: 170px;
        max-width: 170px;
    }
    .input-8 {
        width: 180px;
        min-width: 180px;
        max-width: 180px;
    }
    .input-9 {
        width: 190px;
        min-width: 190px;
        max-width: 190px;
    }
    .input-20 {
        width: 200px;
        min-width: 200px;
        max-width: 200px;
    }

    .input-22 {
        width: min(220px, 220px);
    }

    .input-180px {
        width: 180px;
        min-width: 180px;
        max-width: 180px;
    }

    .label-group {
        position: absolute;
        top: -12px;
        left: 10px;
        background: white;
        padding-inline: 5px;
    }

    .label-sm {
        width: 85px;
        min-width: 85px;
        max-width: 85px;
    }

    .label-0 {
        width: 100px;
        min-width: 100px;
        max-width: 100px;
    }
    .label-1 {
        width: 100%;
        min-width: 110px;
        max-width: 110px;
    }
    .label-2 {
        width: 100%;
        min-width: 120px;
        max-width: 120px;
    }
    .label-3 {
        width: 130px;
        min-width: 130px;
        max-width: 130px;
    }
    .label-4 {
        width: 140px;
        min-width: 140px;
        max-width: 140px;
    }
    .label-5 {
        width: 150px;
        min-width: 150px;
        max-width: 150px;
    }
    .label-6 {
        width: 160px;
        min-width: 160px;
        max-width: 160px;
    }
    .label-7 {
        width: 170px;
        min-width: 170px;
        max-width: 170px;
    }
    .label-8 {
        width: 180px;
        min-width: 180px;
        max-width: 180px;
    }

    .label-22 {
        width: 220px;
        min-width: 220px;
        max-width: 220px;
    }

    .label-120px {
        width: 120px;
        min-width: 120px;
        max-width: 120px;
    }

    .label-130px {
        width: 130px;
        min-width: 130px;
        max-width: 130px;
    }

    .label-140px {
        width: 140px;
        min-width: 140px;
        max-width: 140px;
    }

    .label-160px {
        width: 160px;
        min-width: 160px;
        max-width: 160px;
    }

    .text-l-secondary {
        color: var(--empty001) !important;
    }

    .input-item-list {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 100;
        background-color: var(--primary);
        width: auto;
        min-width: calc(100% - 19px);
        height: auto;
        max-height: 140px;
        overflow-y: scroll;
    }

    .input-item-list tr:hover td {
        background-color: var(--tr-hover);
    }

    /* สำหรับ WebKit (Chrome, Safari, Edge) */
    input[type="number"].spin-none::-webkit-outer-spin-button,
    input[type="number"].spin-none::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* สำหรับ Firefox */
    input[type="number"].spin-none {
        -moz-appearance: textfield;
    }

    .vh-90 {
        height: 90vh;
    }

    .vh-91 {
        height: 91vh;
    }

    .vh-92 {
        height: 92vh;
    }

    .vh-93 {
        height: 93vh;
    }

    .vh-94 {
        height: 94vh;
    }

    .vh-95 {
        height: 95vh;
    }

    .vh-96 {
        height: 96vh;
    }

    .vh-97 {
        height: 97vh;
    }

    .vh-98 {
        height: 98vh;
    }

    .vh-99 {
        height: 99vh;
    }

    .print-show {
        display: none;
    }


    @media (min-width: 768px) {
        .table-overflow-x::-webkit-scrollbar {
            display: none;
        }
    }

    @media (max-width: 992px) {
        .w-default {
            margin-inline: auto;
            width: 80%;
        }

        .content {
            padding: 2rem 0;
        }
    }

    @media (max-width: 576px) {
        .w-default {
            margin-inline: auto;
            width: 90%;
        }
    }

    @media print {
        body {
            overflow: auto !important;
            overflow: visible !important;
        }

        .print-show {
            display: block !important;
        }

        .print-hide {
            display: none !important;
        }
        ::-webkit-scrollbar {
            display: none !important;
        }

        .print-ts-14 {
            font-size: 14px !important;
        }

        .print-ts-16 {
            font-size: 16px !important;
        }

        .print-ts-18 {
            font-size: 18px !important;
        }

        .print-ts-20 {
            font-size: 20px !important;
        }

        .print-border-0 {
            border: none !important;
        }

        .page-break {
            page-break-before: always; /* บังคับให้ขึ้นหน้าใหม่ */
        }

        .x-modal {
            display: none !important;
        }

        .vh-print-100 {
            height: 100vh;
        }
    }
/* นัท */

/* all */
	/* body {
		all              :    unset;
		background-color :    whitesmoke;
	} */

	* {
		/* box-sizing  :    border-box;
		object-fit  :    scale-down; */
		/* font-style  :    normal;
		font-weight :    400;
		font-size   :    16px;
		font-family :    "Sarabun", sans-serif !important; */
	}

	/* a {
		text-decoration :    none;
	} */

	/* img, svg {
		max-width  :    100%;
		max-height :    100%;
		object-fit :    scale-down;
	} */

	/* button, input, textarea {
		outline :    none;
		border  :    none;
	} */
/* all */


.c-account-data-processing {
	height :    80vh;

	img, svg {
		max-width  :    100%;
		max-height :    100%;
		object-fit :    scale-down;
	}

	>.modals{
		position       :    absolute;
		top            :    50%;
		left           :    50%;
		transform      :    translateY(-50%);
		border         :    1px solid #888;
		display        :    flex;
		flex-direction :    column;

		>.title{
			display          :    flex;
			flex-direction   :    row;
			align-items      :    center;
			background-color :    #E9E9E9;
			padding          :    1rem;
			height           :    30px;

			>.darg {
				flex-grow :    1;
				cursor    :    move;

				>.text{
					font-size :    14px;
				}
			}

			>.close{
				cursor :    pointer;
				width  :    20px;
				height :    20px;
			}
		}

		>.body {
			display        :    flex;
			flex-direction :    column;
			position       :    relative;
			flex           :    1 1 auto;
			padding        :    1rem;
			overflow-y     :    auto;
			max-height     :    70vh;

			>.box1 {
				display        :    flex;
				flex-direction :    row;
				gap            :    2px;

				>.left {

				}

				>.right {
					
				}
			}
		}
	}
}
.c-f2 {
    >.Body {
        background-color: red;
        padding: 10px;
    }
}
.c-tabicon {
	display        :    flex;
	align-items    :    center;
	gap            :    1rem;
	margin-bottom  :    0.25rem;
	padding-bottom :    0 !important;
	padding-left   :    1rem;

	>.input-dropdown {
		>select {
			display          :    block;
			transition       :    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
			border           :    1px solid #ced4da;
			border-radius    :    0;
			background-clip  :    padding-box;
			background-color :    #fff;
			padding-right    :    0.375rem;
			padding-left     :    0.375rem;
			width            :    120px;
			height           :    20px;
			color            :    #212529;
			font-weight      :    500;
			font-size        :    1rem;
			line-height      :    1.5;
		}
	}

	.v1 {
		display  :    inline-block;
		position :    relative;
		cursor   :    pointer;

		>.icon {
			opacity        :    0.25;
			width          :    18px;
			height         :    18px;
			pointer-events :    none;
		}

		>.text {
			display          :    none;
			position         :    absolute;
			top              :    -180%;
			z-index          :    1050;
			background-color :    #F2F2F2;
			padding          :    0 5px;
			color            :    #212529;
			font-size        :    0.875rem;
			white-space      :    nowrap;
		}

		&:hover {
			> .text {
				display :    block;
			}
		} 
	}

	@media print {
		.custom-class {
			display: none !important;
		}
	}
}
.c-config {
	>.backdrop {
		position         :    absolute;
		opacity          :    0;
		z-index          :    50;
		inset            :    0;
		background-color :    darkgray;
	}

	>.box1 {
		display         :    flex;
		position        :    relative;
		justify-content :    center;
		align-items     :    center;
		height          :    80vh;

		>.box2 {
			z-index          :    1050;
			border           :    1px solid #dee2e6;
			background-color :    #fff;
			width            :    680px;
			min-height       :    300px;

			>.box3 {
				display          :    flex;
				align-items      :    center;
				cursor           :    move;
				background-color :    #E7E7E7;
				padding          :    1rem;
				
				&.drag-h {
					/* คุณสามารถใส่ style drag handler เพิ่มเติมที่นี่ */
				}
			}

			>.body {
				display        :    flex;
				position       :    relative;
				flex-direction :    column;
				padding        :    1rem;

				>.form {
					>form {
						>.titel {
							margin-top: 12px;
						}

						>.table {
							border  :    1px black solid;
							padding :    0.75rem;

							>table {
								width :    fit-content;
							}
						}

						>.under {
							display         :    flex;
							justify-content :    flex-end;
							gap             :    12px;
							margin-top      :    1rem;

							>button {
								border           :    none;
								background-color :rgb(159 159 159)C0C0;
								padding          :    0.5rem 1rem;
								color            :    black;
							}
						}

						>.delete {
							z-index          :    60;
							background-color :    white;
							width            :    250px;

							>.title {
								display          :    flex;
								align-items      :    center;
								background-color :    rgb(219, 219, 219);
								padding          :    1rem;
							}

							>.body {
								display         :    flex;
								position        :    relative;
								justify-content :    flex-end;
								gap             :    0.5rem;
								padding         :    1rem;

								>.close {
									>.image {
										cursor :    pointer;
										width  :    20px;
									}
								}

								>.confirm {
									border           :    1px solid #D5D5D5;
									border-radius    :    0;
									background-color :    #F11E1E;
									padding          :    0.375rem 0.75rem;
									color            :    #fff;
									font-weight      :    500;
								}

								>.cancel {
									border           :    1px solid #D5D5D5;
									border-radius    :    0;
									background-color :    #D0D0D0;
									padding          :    0.375rem 0.75rem;
									color            :    #000000;
									font-weight      :    500;
								}
							}
						}
					}
				}

				>.table {

				}
			}
		}
	}
}
.c-master {
	/* ความกว้างของ scrollbar */
	.x-option::-webkit-scrollbar {
		width: 6px;
	}

	/* พื้นหลังของ track */
	.x-option::-webkit-scrollbar-track {
		background: #f1f1f1;
	}

	/* ตัวแถบ scrollbar */
	.x-option::-webkit-scrollbar-thumb {
		border-radius: 4px;
		background: #888;
	}

	/* เมื่อ hover บน scrollbar */
	.x-option::-webkit-scrollbar-thumb:hover {
		background: #555;
	}
}