@font-face {
   font-family: 'NotoSansThai';
   src: url('font-face/NotoSansThai-Regular.eot');
   src: url('font-face/NotoSansThai-Regular.eot?#iefix') format('embedded-opentype'),
      url('font-face/NotoSansThai-Regular.woff2') format('woff2'),
      url('font-face/NotoSansThai-Regular.woff') format('woff'),
      url('font-face/NotoSansThai-Regular.ttf') format('truetype'),
      url('font-face/NotoSansThai-Regular.svg#NotoSansThai-Regular') format('svg');
   font-weight: normal;
   font-style: normal;
}
[data-bs-theme=dark] {
   --bs-text-muted: #636674;
   --bs-gray-100: #1B1C22;
   --bs-gray-100-rgb: 27, 28, 34;
   --bs-gray-200: #26272F;
   --bs-gray-200-rgb: 38, 39, 47;
   --bs-gray-300: #363843;
   --bs-gray-300-rgb: 54, 56, 67;
   --bs-gray-400: #464852;
   --bs-gray-400-rgb: 70, 72, 82;
   --bs-gray-500: #636674;
   --bs-gray-500-rgb: 99, 102, 116;
   --bs-gray-600: #808290;
   --bs-gray-600-rgb: 128, 130, 144;
   --bs-gray-700: #9A9CAE;
   --bs-gray-700-rgb: 154, 156, 174;
   --bs-gray-800: #B5B7C8;
   --bs-gray-800-rgb: 181, 183, 200;
   --bs-gray-900: #F5F5F5;
   --bs-gray-900-rgb: 245, 245, 245;
   --bs-light: #1B1C22;
   --bs-primary: #4dabab;
   --bs-secondary: #363843;
   --bs-success: #00A261;
   --bs-info: #85b3ee;
   --bs-warning: #ffcc33;
   --bs-danger: #ff5c5c;
   --bs-dark: #bababa;
   --bs-primary-active: #00908e;
   --bs-secondary-active: #464852;
   --bs-light-active: #1F212A;
   --bs-success-active: #01BF73;
   --bs-info-active: #6a9cdc;
   --bs-warning-active: #ffcc33;
   --bs-danger-active: #ff5c5c;
   --bs-dark-active: #a1a1a1;
   --bs-primary-light: #172331;
   --bs-secondary-light: #363843;
   --bs-success-light: #1F212A;
   --bs-info-light: #272134;
   --bs-warning-light: #242320;
   --bs-danger-light: #302024;
   --bs-dark-light: #1E2027;
   --bs-light-light: #1F212A;
   --bs-primary-inverse: #ffffff;
   --bs-secondary-inverse: #ffffff;
   --bs-light-inverse: #808290;
   --bs-success-inverse: #ffffff;
   --bs-info-inverse: #ffffff;
   --bs-warning-inverse: #ffffff;
   --bs-danger-inverse: #ffffff;
   --bs-dark-inverse: #ffffff;
   --bs-primary-clarity: rgba(0, 106, 230, 0.2);
   --bs-secondary-clarity: rgba(54, 56, 67, 0.2);
   --bs-success-clarity: rgba(0, 162, 97, 0.2);
   --bs-info-clarity: rgba(136, 63, 255, 0.2);
   --bs-warning-clarity: rgba(197, 154, 0, 0.2);
   --bs-danger-clarity: rgba(228, 40, 85, 0.2);
   --bs-dark-clarity: rgba(39, 42, 52, 0.2);
   --bs-light-clarity: rgba(31, 33, 42, 0.2);
   --bs-light-rgb: 27, 28, 34;
   --bs-primary-rgb: 25, 191, 189;
   --bs-secondary-rgb: 54, 56, 67;
   --bs-success-rgb: 0, 162, 97;
   --bs-info-rgb: 136, 63, 255;
   --bs-warning-rgb: 197, 154, 0;
   --bs-danger-rgb: 228, 40, 85;
   --bs-dark-rgb: 39, 42, 52;
   --bs-text-white: #ffffff;
   --bs-text-primary: #00aeac;
   --bs-text-secondary: #363843;
   --bs-text-light: #1B1C22;
   --bs-text-success: #00A261;
   --bs-text-info: #33ccff;
   --bs-text-warning: #ffcc33;
   --bs-text-danger: #ff5c5c;
   --bs-text-dark: #bababa;
   --bs-text-muted: #636674;
   --bs-text-gray-100: #1B1C22;
   --bs-text-gray-200: #26272F;
   --bs-text-gray-300: #363843;
   --bs-text-gray-400: #464852;
   --bs-text-gray-500: #636674;
   --bs-text-gray-600: #808290;
   --bs-text-gray-700: #9A9CAE;
   --bs-text-gray-800: #B5B7C8;
   --bs-text-gray-900: #F5F5F5;
   --bs-border-color: #26272F;
   --bs-border-dashed-color: #363843;
   --bs-component-active-color: #ffffff;
   --bs-component-active-bg: #006AE6;
   --bs-component-hover-color: #006AE6;
   --bs-component-hover-bg: #1B1C22;
   --bs-component-checked-color: #ffffff;
   --bs-component-checked-bg: #006AE6;
   --bs-box-shadow-xs: 0 0.1rem 0.75rem 0.25rem rgba(0, 0, 0, 0.05);
   --bs-box-shadow-sm: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05);
   --bs-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
   --bs-box-shadow-lg: 0 1rem 2rem 1rem rgba(0, 0, 0, 0.1);
   --bs-input-color: var(--bs-gray-700);
   --bs-input-bg: var(--bs-body-bg);
   --bs-input-solid-color: var(--bs-gray-700);
   --bs-input-solid-bg: var(--bs-gray-100);
   --bs-input-solid-bg-focus: var(--bs-gray-200);
   --bs-input-solid-placeholder-color: var(--bs-gray-500);
   --bs-tooltip-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.15);
   --bs-root-card-box-shadow: none;
   --bs-root-card-border-color: #1E2027;
   --bs-table-striped-bg: rgba(27, 28, 34, 0.75);
   --bs-table-loading-message-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
   --bs-dropdown-bg: #1C1D22;
   --bs-dropdown-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
   --bs-code-bg: #2b2b40;
   --bs-code-shadow: rgba(0, 0, 0, 0.08) 0px 3px 9px 0px;
   --bs-code-border-color: transparent;
   --bs-code-color: #b93993;
   --bs-symbol-label-color: #B5B7C8;
   --bs-symbol-label-bg: #1B1C22;
   --bs-symbol-border-color: rgba(255, 255, 255, 0.5);
   --bs-bullet-bg-color: #464852;
   --bs-scrolltop-opacity: 0;
   --bs-scrolltop-opacity-on: 0.3;
   --bs-scrolltop-opacity-hover: 1;
   --bs-scrolltop-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
   --bs-scrolltop-bg-color: #1B84FF;
   --bs-scrolltop-bg-color-hover: #1B84FF;
   --bs-scrolltop-icon-color: #ffffff;
   --bs-scrolltop-icon-color-hover: #ffffff;
   --bs-drawer-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
   --bs-drawer-bg-color: #1C1D22;
   --bs-drawer-overlay-bg-color: rgba(0, 0, 0, 0.4);
   --bs-menu-dropdown-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
   --bs-menu-dropdown-bg-color: #1C1D22;
   --bs-menu-heading-color: #636674;
   --bs-menu-link-color-hover: #006AE6;
   --bs-menu-link-color-show: #006AE6;
   --bs-menu-link-color-here: #006AE6;
   --bs-menu-link-color-active: #006AE6;
   --bs-menu-link-bg-color-hover: #1B1C22;
   --bs-menu-link-bg-color-show: #1B1C22;
   --bs-menu-link-bg-color-here: #1B1C22;
   --bs-menu-link-bg-color-active: #1B1C22;
   --bs-scrollbar-color: #26272F;
   --bs-scrollbar-hover-color: #363843;
   --bs-overlay-bg: rgba(255, 255, 255, 0.05);
   --bs-blockui-overlay-bg: rgba(255, 255, 255, 0.05);
   --bs-rating-color-default: #464852;
   --bs-rating-color-active: #FFAD0F;
   --bs-ribbon-label-box-shadow: 0px -1px 5px 0px rgba(255, 255, 255, 0.1);
   --bs-ribbon-label-bg: #1B84FF;
   --bs-ribbon-label-border-color: #0053b4;
   --bs-ribbon-clip-bg: #F9F9F9;
   --bs-engage-btn-bg: #26272F;
   --bs-engage-btn-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
   --bs-engage-btn-border-color: #26272F;
   --bs-engage-btn-color: #B5B7C8;
   --bs-engage-btn-icon-color: #808290;
   --bs-engage-btn-color-active: #B5B7C8;
   --bs-font-sans-serif: Inter, Helvetica, "sans-serif";
   --bs-font-noto-sans: "NotoSansThai";
   --bs-body-font-family: var(--bs-font-noto-sans);
   --bs-border-radius: 0.75rem;
}

[data-bs-theme=light] {
   --bs-text-muted: #99A1B7;
   --bs-gray-100: #F9F9F9;
   --bs-gray-100-rgb: 249, 249, 249;
   --bs-gray-200: #F1F1F4;
   --bs-gray-200-rgb: 241, 241, 244;
   --bs-gray-300: #DBDFE9;
   --bs-gray-300-rgb: 219, 223, 233;
   --bs-gray-400: #C4CADA;
   --bs-gray-400-rgb: 196, 202, 218;
   --bs-gray-500: #99A1B7;
   --bs-gray-500-rgb: 153, 161, 183;
   --bs-gray-600: #78829D;
   --bs-gray-600-rgb: 120, 130, 157;
   --bs-gray-700: #4B5675;
   --bs-gray-700-rgb: 75, 86, 117;
   --bs-gray-800: #252F4A;
   --bs-gray-800-rgb: 37, 47, 74;
   --bs-gray-900: #071437;
   --bs-gray-900-rgb: 7, 20, 55;
   --bs-light: #F9F9F9;
   --bs-primary: #4dabab;
   --bs-secondary: #8e80b1;
   --bs-success: #17C653;
   --bs-info: #85b3ee;
   --bs-warning: #F6C000;
   --bs-danger: #d44b4c;
   --bs-dark: #1E2129;
   --bs-primary-active: #00908e;
   --bs-secondary-active: #826fb2;
   --bs-light-active: #F1F1F4;
   --bs-success-active: #04B440;
   --bs-info-active: #6a9cdc;
   --bs-warning-active: #DEAD00;
   --bs-danger-active: #e61e1f;
   --bs-dark-active: #111318;
   --bs-primary-light: #E9F3FF;
   --bs-secondary-light: #F9F9F9;
   --bs-success-light: #DFFFEA;
   --bs-info-light: #F8F5FF;
   --bs-warning-light: #FFF8DD;
   --bs-danger-light: #FFEEF3;
   --bs-dark-light: #F9F9F9;
   --bs-light-light: #ffffff;
   --bs-primary-inverse: #ffffff;
   --bs-secondary-inverse: #252F4A;
   --bs-light-inverse: #252F4A;
   --bs-success-inverse: #ffffff;
   --bs-info-inverse: #ffffff;
   --bs-warning-inverse: #ffffff;
   --bs-danger-inverse: #ffffff;
   --bs-dark-inverse: #ffffff;
   --bs-primary-clarity: rgba(27, 132, 255, 0.2);
   --bs-secondary-clarity: rgba(249, 249, 249, 0.2);
   --bs-success-clarity: rgba(23, 198, 83, 0.2);
   --bs-info-clarity: rgba(114, 57, 234, 0.2);
   --bs-warning-clarity: rgba(246, 192, 0, 0.2);
   --bs-danger-clarity: rgba(248, 40, 90, 0.2);
   --bs-dark-clarity: rgba(30, 33, 41, 0.2);
   --bs-light-clarity: rgba(255, 255, 255, 0.2);
   --bs-light-rgb: 249, 249, 249;
   --bs-primary-rgb: 0, 150, 136;
   --bs-secondary-rgb: 241, 241, 244;
   --bs-success-rgb: 23, 198, 83;
   --bs-info-rgb: 114, 57, 234;
   --bs-warning-rgb: 246, 192, 0;
   --bs-danger-rgb: 248, 40, 90;
   --bs-dark-rgb: 30, 33, 41;
   --bs-text-white: #ffffff;
   --bs-text-primary: #00aeac;
   --bs-text-secondary: #F1F1F4;
   --bs-text-light: #F9F9F9;
   --bs-text-success: #17C653;
   --bs-text-info: #33ccff;
   --bs-text-warning: #F6C000;
   --bs-text-danger: #ff5c5c;
   --bs-text-dark: #1E2129;
   --bs-text-muted: #99A1B7;
   --bs-text-gray-100: #F9F9F9;
   --bs-text-gray-200: #F1F1F4;
   --bs-text-gray-300: #DBDFE9;
   --bs-text-gray-400: #C4CADA;
   --bs-text-gray-500: #99A1B7;
   --bs-text-gray-600: #78829D;
   --bs-text-gray-700: #4B5675;
   --bs-text-gray-800: #252F4A;
   --bs-text-gray-900: #071437;
   --bs-border-color: #F1F1F4;
   --bs-border-dashed-color: #DBDFE9;
   --bs-component-active-color: #ffffff;
   --bs-component-active-bg: #1B84FF;
   --bs-component-hover-color: #1B84FF;
   --bs-component-hover-bg: #F9F9F9;
   --bs-component-checked-color: #ffffff;
   --bs-component-checked-bg: #1B84FF;
   --bs-box-shadow-xs: 0 0.1rem 0.75rem 0.25rem rgba(0, 0, 0, 0.05);
   --bs-box-shadow-sm: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05);
   --bs-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
   --bs-box-shadow-lg: 0 1rem 2rem 1rem rgba(0, 0, 0, 0.1);
   --bs-input-bg: var(--bs-body-bg);
   --bs-input-color: var(--bs-gray-700);
   --bs-input-solid-color: var(--bs-gray-700);
   --bs-input-solid-bg: var(--bs-gray-100);
   --bs-input-solid-bg-focus: var(--bs-gray-200);
   --bs-input-solid-placeholder-color: var(--bs-gray-500);
   --bs-root-card-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
   --bs-root-card-border-color: #F1F1F4;
   --bs-tooltip-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.15);
   --bs-table-striped-bg: rgba(var(--bs-gray-100-rgb), 0.75);
   --bs-table-loading-message-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
   --bs-dropdown-bg: var(--bs-body-bg);
   --bs-dropdown-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
   --bs-code-bg: #f1f3f8;
   --bs-code-shadow: 0px 3px 9px rgba(0, 0, 0, 0.08);
   --bs-code-border-color: transparent;
   --bs-code-color: #b93993;
   --bs-symbol-label-color: var(--bs-gray-800);
   --bs-symbol-label-bg: var(--bs-gray-100);
   --bs-symbol-border-color: rgba(#ffffff, 0.5);
   --bs-bullet-bg-color: var(--bs-gray-400);
   --bs-scrolltop-opacity: 0;
   --bs-scrolltop-opacity-on: 0.3;
   --bs-scrolltop-opacity-hover: 1;
   --bs-scrolltop-box-shadow: var(--bs-box-shadow);
   --bs-scrolltop-bg-color: var(--bs-primary);
   --bs-scrolltop-bg-color-hover: var(--bs-primary);
   --bs-scrolltop-icon-color: var(--bs-primary-inverse);
   --bs-scrolltop-icon-color-hover: var(--bs-primary-inverse);
   --bs-drawer-box-shadow: 0px 1px 9px -3px rgba(0, 0, 0, 0.05);
   --bs-drawer-bg-color: #ffffff;
   --bs-drawer-overlay-bg-color: rgba(0, 0, 0, 0.2);
   --bs-menu-dropdown-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
   --bs-menu-dropdown-bg-color: var(--bs-body-bg);
   --bs-menu-heading-color: #99A1B7;
   --bs-menu-link-color-hover: #1B84FF;
   --bs-menu-link-color-show: #1B84FF;
   --bs-menu-link-color-here: #1B84FF;
   --bs-menu-link-color-active: #1B84FF;
   --bs-menu-link-bg-color-hover: #F9F9F9;
   --bs-menu-link-bg-color-show: #F9F9F9;
   --bs-menu-link-bg-color-here: #F9F9F9;
   --bs-menu-link-bg-color-active: #F9F9F9;
   --bs-scrollbar-color: #F1F1F4;
   --bs-scrollbar-hover-color: #DBDFE9;
   --bs-overlay-bg: rgba(0, 0, 0, 0.05);
   --bs-blockui-overlay-bg: rgba(0, 0, 0, 0.05);
   --bs-rating-color-default: #C4CADA;
   --bs-rating-color-active: #FFAD0F;
   --bs-ribbon-label-box-shadow: 0px -1px 5px 0px rgba(30, 33, 41, 0.1);
   --bs-ribbon-label-bg: #1B84FF;
   --bs-ribbon-label-border-color: #0053b4;
   --bs-ribbon-clip-bg: #1E2129;
   --bs-engage-btn-bg: #ffffff;
   --bs-engage-btn-box-shadow: 0px 0px 22px #E0E0E0;
   --bs-engage-btn-border-color: #E8E8E8;
   --bs-engage-btn-color: #252F4A;
   --bs-engage-btn-icon-color: #78829D;
   --bs-engage-btn-color-active: #252F4A;
   --bs-font-sans-serif: Inter, Helvetica, "sans-serif";
   --bs-font-noto-sans: "NotoSansThai";
   --bs-body-font-family: var(--bs-font-noto-sans);
   --bs-border-radius: 0.75rem;
}

body, html {
   font-family: var(--bs-body-font-family);
   letter-spacing: 0.5px;
   line-height: normal !important;
}

table.dataTable tfoot td, table.dataTable tfoot th, table.dataTable thead td, table.dataTable thead th {
   text-align: center;
}

table.dataTable>thead>tr>td:not(.sorting_disabled), table.dataTable>thead>tr>th:not(.sorting_disabled) {
   padding-right: 0.75rem;
}
.table:not(.table-bordered) td:last-child, .table:not(.table-bordered) th:last-child, .table:not(.table-bordered) tr:last-child {
   padding-right: 0.75rem;
}

div.dt-container div.dt-search input {
   margin-left: .5em;
   display: inline-block;
   width: auto;
}

.dt-paging {
   padding: 1rem 0 0;
}

input[type=file]{
   display: none !important;
}
.tmp-input-file{
   position: relative;
   overflow: hidden;
   padding: 0;
   width: 100%;
   white-space: nowrap;
}

.tmp-input-file .preview{
   width: 100%;
   height: 20vh;
   margin-top: 5px;
   background-color: #f8f8f8;
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
   background-image: url(../img/no-image/image-not-available.png);
}

.preview-image{
   cursor: pointer;
}

.modal.preview-image-modal .modal-dialog{
   max-width: 100%;
   margin: 0;
   height: 100%;
   align-content: center;
}
.modal.preview-image-modal .modal-content{
   width: fit-content;
   background: none !important;
   box-shadow: none;
   margin: auto;
}
.modal.preview-image-modal .modal-content .modal-body{
   max-width: 80%;
   padding: 0;
}
.modal.preview-image-modal .modal-content .modal-body img{
   max-height: 100%;
}

.avatar{
   background-color: #ced4da;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   width: 36px;
   height: 36px;
   /*overflow: hidden;*/
   position: relative;
   border-radius: 50%;
   border-style: solid;
   border-width: 1px;
   border-color: #ced4da;
}
.avatar.avatar-square{
   border-radius: 12px;
}
.avatar.avatar-xs{
   width: 16px;
   height: 16px;
}
.avatar.avatar-sm{
   width: 24px;
   height: 24px;
}
.avatar.avatar-md{
   width: 48px;
   height: 48px;
}
.avatar.avatar-lg{
   width: 57px;
   height: 57px;
}
.avatar.avatar-xl{
   width: 84px;
   height: 84px;
}
.avatar.avatar-xxl{
   width: 120px;
   height: 120px;
}
.avatar.avatar-xxxl{
   width: 160px;
   height: 160px;
}

.avatar.avatar-xxxxl{
   width: 240px;
   height: 240px;
}

.avatar.avatar-xxxxxl{
   width: 300px;
   height: 300px;
}

table.dataTable {
   td, th {
      vertical-align: middle !important;
   }
}

.form-group{
   margin-top: 10px;
   margin-bottom: 0;
}

.list-group {
   --bs-list-group-bg: rgb(255 255 255 / 0%);
}

.has-error.has-danger .form-control:invalid {
   padding-right: calc(1.5em + 0.75rem);
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: right calc(1em + 0.1875rem) center;
   background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.has-error.has-danger .form-control{
   border-color: #E91E63;
}

.help-block.with-errors {
   color: #E91E63;
   margin-top: 5px;
}

.btn{
   white-space: nowrap;
   --bs-btn-border-radius: 0.75rem;
   border-radius: var(--bs-btn-border-radius);
}

.list-unstyled {
   margin-bottom: 0;
}

[data-bs-theme=light] body:not(.app-blank) {
   background-image: url(../img/bg/head.jpg);
}
@media (max-width: 991.98px) {
   body {
      background-size: auto 200px;
   }
}

.border-solid {
   border-style: solid !important;
   border-color: var(--bs-border-dashed-color);
}

.datepicker table tr td.active.active, .datepicker table tr td.active.highlighted.active, .datepicker table tr td.active.highlighted:active, .datepicker table tr td.active:active {
   color: #fff;
   background-color: var(--bs-primary);
   border-color: var(--bs-primary-active);
}

.datepicker table tr td.active.active.focus,.datepicker table tr td.active.active:focus,.datepicker table tr td.active.active:hover,.datepicker table tr td.active.highlighted.active.focus,.datepicker table tr td.active.highlighted.active:focus,.datepicker table tr td.active.highlighted.active:hover,.datepicker table tr td.active.highlighted:active.focus,.datepicker table tr td.active.highlighted:active:focus,.datepicker table tr td.active.highlighted:active:hover,.datepicker table tr td.active:active.focus,.datepicker table tr td.active:active:focus,.datepicker table tr td.active:active:hover {
   color: #fff;
   background-color: var(--bs-primary-active);
   border-color: var(--bs-primary-active);
}

.card {
   --bs-card-border-radius: 1.5rem;
   border-radius: var(--bs-card-border-radius);
}

.card-rounded {
   border-radius: 1.5rem;
}
.rounded {
   border-radius: 1.5rem !important;
}