@font-face {
    font-family: "THSarabunNew";
    src: url('../fonts/THSarabunNew.ttf');
    /* src: url('../fonts/THSarabunNewBold.ttf'); */
}
@font-face {
    font-family: "THSarabunNewBold";
    src: url('../fonts/THSarabunNewBold.ttf');
}
@font-face {
    font-family: "THSarabunNewBoldItalic";
    src: url('../fonts/THSarabunNewBoldItalic.ttf');
}
@font-face {
    font-family: "THSarabunNewItalic";
    src: url('../fonts/THSarabunNewItalic.ttf');
}

body {
    font-family: "THSarabunNew", sans-serif !important; 
    /* font-family: "Sarabun", serif; */
    font-weight: 500;
    font-style: normal;
}        
.thsarabun-thin {
    font-family: "THSarabunNew", sans-serif;
    font-weight: 100;
    font-style: normal;
}

.thsarabun-extralight {
    font-family: "THSarabunNew", sans-serif;
    font-weight: 200;
    font-style: normal;
}

.thsarabun-light {
    font-family: "THSarabunNew", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.thsarabun-regular {
    font-family: "THSarabunNew", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.thsarabun-medium {
    font-family: "THSarabunNewBold", sans-serif;
    /* font-weight: 500;
    font-style: normal; */
}

.thsarabun-semibold {
    font-family: "THSarabunNewBold", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.thsarabun-bold {
    font-family: "THSarabunNewBold", sans-serif;
    font-weight: 700;
   /* font-style: normal; */
}


[data-theme=default] {
    --tb-font-sans-serif: "THSarabunNew", sans-serif, "Poppins", sans-serif; 
    --tb-font-monospace: "THSarabunNew", sans-serif, "Poppins", sans-serif; 
    --tb-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    --tb-shadow-sm: 0 .125rem .25rem rgba(#000, .075);
    --tb-shadow-lg: 0 5px 10px rgba(30, 32, 37, 0.12);
    --tb-element-shadow: none;
    --tb-grid-gutter-width: 1.25rem;
    --tb-card-border-width-custom: 0;
    --tb-card-header-border-width: 0;
    --tb-card-bottom-padding: 0;
    --tb-card-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    --tb-email-bg: #f8f9fd;
    --tb-email-sidebar-bg: #ebf2fb;
    --tb-vertical-menu-width: 250px;
    --tb-vertical-menu-width-md: 180px;
    --tb-vertical-menu-width-sm: 70px;
    --tb-header-height: 70px;
    --tb-twocolumn-menu-width: 220px;
    --tb-twocolumn-menu-iconview-width: 70px;
    --tb-twocolumn-menu-box-shadow: 0 2px 4px rgba(15, 34, 58, 0.12);
    --tb-page-title-box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
    --tb-page-title-border: none;
    --tb-vertical-menu-box-shadow: 0 2px 4px rgba(15, 34, 58, 0.12);
    --tb-vertical-menu-item-font-size: 0.8125rem;
    --tb-vertical-menu-sub-item-font-size: 0.8125rem;
    --tb-vertical-menu-item-font-weight: 400;
    --tb-footer-bg: #fff;
    --tb-footer-color: #98a6ad;
    --tb-twocolumn-menu-bg: #fff;
    --tb-boxed-body-bg: #f5f5f5;

    --tb-font-3xs: 0.825rem;
    --tb-font-2xs: 10.875rem;
    --tb-font-xs: 0.95rem;
    --tb-font-sm: 1.15rem;
    --tb-font-md: 1.075rem;
    --tb-font-base: 1.4rem;

    --tb-font-lg: 1.5rem;
    --tb-font-xl: 2.0625rem;
    --tb-font-2xl: 2.125rem;
    --tb-font-3xl: 2.0rem;
    --tb-font-4xl: 2.375rem;
    --tb-font-5xl: 2.5rem;
    --tb-font-weight-light: 300;
    --tb-font-weight-normal: 400;
    --tb-font-weight-medium: 500;
    --tb-font-weight-semibold: 600;
    --tb-font-weight-bold: 700;

    --tb-body-color: var(--primary700);
    --tb-border-radius: 0.8rem;
    --tb-link-color-rgb: var(--orange500) !important;
}




:root,[data-bs-theme=light] {
 

    --primary: #3A2218;
    --primary900: #180e0a;
    --primary800: #20130d;
    --primary700: #291811;
    --primary600: #351f16; 
    --primary500: #3A2218;
    --primary400: #614e46;
    --primary300: #7b6b64;
    --primary200: #a49995;
    --primary100: #c2bab7;
    --primary50: #ebe9e8;
    
    --brown900: #180e0a;
    --brown800: #20130d;
    --brown700: #291811;
    --brown600: #351f16;
    --brown500: #3A2218;
    --brown400: #614e46;
    --brown300: #7b6b64;
    --brown200: #a49995;
    --brown100: #c2bab7;
    --brown50: #ebe9e8;


    --brown2_900: #483321;
    --brown2_800: #5f432b;
    --brown2_700: #7a5637;
    --brown2_600: #9d6e47;
    --brown2_500: #ac794e;
    --brown2_400: #bd9471;
    --brown2_300: #c7a588;
    --brown2_200: #d9c1ae;
    --brown2_100: #e5d5c8;
    --brown2_50: #f7f2ed;

    --orange900: #551600;
    --orange800: #6f1d00;
    --orange700: #8f2500;
    --orange600: #b82f00;
    --orange500: #ca3400;
    --orange400: #d55d33;
    --orange300: #db7754;
    --orange200: #e7a28a;
    --orange100: #efc0b0;
    --orange50: #faebe6;

    --buttery900: #6b5848;
    --buttery800: #8c745e;
    --buttery700: #b59579;
    --buttery600: #e8bf9c;
    --buttery500: #ffd2ab;
    --buttery400: #ffdbbc;
    --buttery300: #ffe1c7;
    --buttery200: #ffead8;
    --buttery100: #fff1e5;
    --buttery50:  #fffbf7;
    
    --secondary900: var(--brown2_900);
    --secondary800: var(--brown2_800);
    --secondary700: var(--brown2_700);
    --secondary600: var(--brown2_600);
    --secondary500: var(--brown2_500);
    --secondary400: var(--brown2_400);
    --secondary300: var(--brown2_300);
    --secondary200: var(--brown2_200);
    --secondary100: var(--brown2_100);
    --secondary50: var(--brown2_50);


    /* --secondary: #09082C;
    --secondary900: #09082C;
    --secondary800: #0C0B3A ;
    --secondary700: #0F0E4B ;
    --secondary600: #131260;
    --secondary500: #151469;
    --secondary400: #444387;
    --secondary300: #62629B ; 
    --secondary200: #9393BA ;
    --secondary100: #B6B6D1 ;
    --secondary50: #E8E8F0; */
  
  
    --cyan900: #09566B;
    --cyan800: #0C718C ;
    --cyan700: #0F92B5;
    --cyan600: #13BBE8;  
    --cyan100:#B6F0FF;
    --cyan50:#E8FAFF;
   
    --success: #096110;
    --success700: #034108;
    --success500: #084f0e;
    --success300: #096110; 

    --success200: #28A338;
    --success100: #9CD5A3;
    --success50: #EAF6EB;
    --success80: #0B7914;

  
    --warning: #7D511D;
    --warning300: #7D511D; 
    --warning200: #E49435;
    --warning100: #F3CEA2;
    --warning50: #FCF4EB;
  
    --danger: #DB2323;
    --danger900: #bc0707;
    --danger700: #be1f1f;
    --danger500: #DB2323;
    --danger300: #f43737;
    --danger200: #fa4d4d; 
    
    --danger100: #ECA0A0;
    --danger50: #FBEAEA;
  
    --info: #03A9F4; 
  
    --gray: #868e96;
    --gray-dark: #343a40;
    --gray800: #3C3C3C;
    --gray500: #6D6D6D;
    --gray300: #9D9D9D;

    --gray3001: #969696;

    --disabled: #BBBBBB;
   

    --white: #FFFFFF;
    --white01: #FFFFFF;
    --white02: #e1e1e1;
    --white03: #bcbcbc;
    --white04: #F3F2F7;
   
    --black: #1E1E1E;
    --tb-black-rgb: #1E1E1E;
    /* --bs-border-color: #dde1ef; */
    /* --tb-body-color: #dde1ef; */

    
    --tb-nav-pills-link-active-color: var(--white) !important;  
    --tb-nav-pills-link-active-bg: var(--orange500) !important;  
    --tb-danger: var(--danger) !important;  
    --tb-link-color: var(--orange500) !important;  
    --tb-border-radius: 0;
}
.pagination {
    font-family: "THSarabunNewBold", "THSarabunNew"  !important;
    --tb-pagination-padding-x: 1.2rem;
    --tb-pagination-padding-y: 0.375rem;
    --tb-pagination-active-color: var(--white)  !important;  
    --tb-pagination-active-bg: var(--orange500) !important;  
    --tb-pagination-active-border-color: var(--orange500) !important;  
    --tb-pagination-hover-color:  var(--white) !important;  
    --tb-pagination-hover-bg:  var(--orange500) !important;  
    --tb-pagination-hover-border-color:  var(--orange500) !important;  
    --tb-pagination-focus-color:  var(--orange500) !important;  

}
.active>.page-link, .page-link.active {
    z-index: 3;
    color: var(--tb-pagination-active-color) !important;  
    background-color: var(--tb-pagination-active-bg) !important;  
    border-color: var(--tb-pagination-active-border-color) !important;  
}
/* 
.btn-outline-danger {
    --tb-btn-color: var(--danger);
    --tb-btn-bg: transparent;
    --tb-btn-border-color: var(--danger700);
    --tb-btn-hover-bg: var(--danger700);
    --tb-btn-hover-border-color: var(--danger700);
    --tb-btn-focus-shadow-rgb: var(--danger300);
    --tb-btn-active-bg: var(--danger300);
    --tb-btn-active-border-color: var(--danger300);
} */


.btn-outline-danger {
    --tb-btn-color: var(--danger);
    --tb-btn-bg: transparent;
    --tb-btn-border-color: var(--danger); 
}
.btn-outline-danger:hover{
    color: var(--danger900);
    background-color: transparent;
    border-color: var(--danger900); 
}


.btn-outline-orange {
    color: var(--orange500);
}

/* ######################################################################################## */
/* ######################################################################################## */



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

.text-left{
    text-align: left;
}
.text-right{
    text-align: right;
}
.text-center{
    text-align: center;
}
.text-primary400{
    color: var(--primary400);
}
.border1{
    border: 1px solid var(--gray);
}
.hr1{
    margin: 0.5rem 0rem;
}
.form-label2{
    font-weight: 500;
    color: var(--gray);
}

.btn_icon{
    width: 34px;
    height: 31px;
}
.btn_icon.btn-danger.delete{
    padding-left: 0.7rem;
    padding-right: 0.7rem;
}

.bg-danger{
   
    background-color:  var(--danger) !important;
    color: var(--white);
}
.bg-primary100{
    border-color: var(--primary100);
    background-color: var(--primary100);
}
.btn-primary100{
    border-color: var(--primary100);
    background-color: var(--primary100);

    color: var(--white);
}
.btn-primary200{
    border-color: var(--primary200);
    background-color: var(--primary200);
    color: var(--white);
}
.btn-primary200:hover{
    border-color: var(--primary300);
    background-color: var(--primary300);
    color: var(--white);
}
 
.text-primary{
    color: var(--primary) !important;
}
.text-secondary{
    color: var(--orange500) !important;
}
.text-success{
    color: var(--success500) !important;
}
.text-success80{
    color: var(--success80) !important;
}
 

.text-warning{
    color: var(--warning200) !important;
}
.text-danger{
    color: var(--danger500) !important;
}
.text-info{
    color: var(--info) !important;
}
/* .text-secondary{
    color: var(--secondary) !important;
} */
.text-gray500{
    color: var(--gray500) !important;
}
.text-gray300{
    color: var(--gray300) !important;
}

.bg-secondary{
    background-color: var(--orange500) !important;
    color: var(--white) !important;
}

.bg-secondary50{
    background-color: var(--secondary50) !important;
    color: var(--gray300) !important;
}
.badge{
    vertical-align: middle;
}

.bg-success-subtle {
    background-color: var(--success50) !important;
}

.bg-success80 {
    background-color: var(--success80) !important;
}
.bg-primary{
    background-color: var(--primary) !important;
}
.bg-primary800{
    background-color: var(--primary800) !important;
}
.alert-orange {
    --tb-alert-color: var(--orange500);
    --tb-alert-bg:  var(--orange50);
    --tb-alert-border-color: var(--orange500);
    --tb-alert-link-color: var(--orange500);
    --tb-border-width: 2px;
    --tb-alert-border-radius: 12px;
}

.alert button.right{
    position: absolute;
    right: 2rem;
    top: 1.4rem;
}

.alert-dismissible {
    /* padding-right: 3rem; */
    padding-left: 1.5rem;
}


.bg-orange-subtle {
    background-color: var(--orange500) !important;
}
.bg-orange-light-subtle {
    background-color: var(--orange50) ;
    color: var(--orange500);
}
.form-control.is-valid, .was-validated .form-control:valid{
    background-image: unset !important;
    border: var(--tb-border-width) solid var(--tb-border-color-translucent) !important;
}
.form-control:disabled{
    color: var(--black) !important;
}
.form-check-input:disabled~.form-check-label, .form-check-input[disabled]~.form-check-label {
    cursor: default;
    opacity: 1;
}
table.dataTable th, table.dataTable td, table.dataTable.table-bordered th, table.dataTable.table-bordered td{
    border-bottom: 1px solid #d5d5d5;
} 

/*   
table.table.dataTable.table-hover > tbody > tr:hover > * { 
    border-bottom: 2px solid var(--primary500 );
    box-shadow: inset 0 0 0 9999px rgb(198 217 232 / 7%); 

} 
*/
table.table.dataTable.table-indicator > tbody > tr{
    position: relative;
}
table.table.dataTable.table-indicator > tbody > tr:hover > * { 
    border-bottom: 1.3px solid var(--primary500 );
    box-shadow:  inset 0 0 0 9999px rgb(169 80 58 / 7%)
}

table.table.dataTable.table-indicator > tbody > tr:hover::after {
    display: block;
} 
 
table.table.dataTable.table-indicator > tbody > tr::after {
    position: absolute;
    left: -5px;
    bottom: 0;
    content: "";
    transform: translateY(53%);
    z-index: 4;
    display: none;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid var(--primary500);
}
/*
table.table.dataTable.table-hover{
    tbody {
        tr {
            position: relative;
            &:hover {
                border-bottom: 2px solid var(--primary500);
                &::after {
                    display: block;
                }
            }

            &::after {
                position: absolute;
                left: -5px;
                bottom: 0;
                content: "";
                transform: translateY(53%);
                z-index: 4;
                display: none;
                width: 0;
                height: 0;
                border-top: 10px solid transparent;
                border-bottom: 10px solid transparent;
                border-left: 10px solid var(--primary500);
            }
        }
    }
}*/

.btn-primary:disabled {
    background-color: var(--primary50) !important;
    border-color: var(--primary50) !important;
    color: var(--primary500) !important;
}
.btn-primary-disabled {
    background-color: var(--primary50) !important;
    border-color: var(--primary50) !important;
    color: var(--primary500) !important;
}
/* #################     full calendar     ################# */
.fc .fc-toolbar.fc-header-toolbar {
    padding: 16px 0px;
}
.fc .fc-dayGridMonth-view {
    padding: var(--tb-card-spacer-y)  0px;
}
.fc .fc-toolbar.fc-header-toolbar{
    border: unset !important;
}
.fc-list-table {
    border: 1.5px solid var(--secondary100) !important;
}
.fc-button-primary{
    /* background-color: var(--primary500) !important ;
    border-color: var(--primary500) !important ; */
 
    background-color: var(--primary50) !important;
    border-color: var(--primary50) !important;
    color: var(--primary500) !important;  
}
.fc-button-primary:disabled {
    background-color: var(--primary50) !important;
    border-color: var(--primary50) !important;
    color: var(--primary500) !important;
}
.fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active {
    background-color: var(--primary500) !important ;
    border-color: var(--primary500) !important ;
    /* background-color: var(--primary50) !important;
    border-color: var(--primary50) !important;
    color: var(--primary500) !important; */
}
.fc-prev-button, .fc-next-button{
    margin-right: 2px;
    background-color: var(--primary500) !important ;
    border-color: var(--primary500) !important ;
    color: var(--primary50) !important; 
}
.fc-prev-button{
    margin-right: 2px  !important; 
}
.fc-unthemed .fc-divider, .fc-unthemed .fc-popover .fc-header, .fc-unthemed .fc-list-heading td {
    background: var(--secondary50) !important; 
}
.fc th.fc-widget-header{
    /* padding: 10px 10px; */
}

.fc table.fc-list-table .fc-scrollgrid, .fc  table.fc-list-table td, .fc  table.fc-list-table th {
    /* border: unset !important; */
    border: 1.5px solid  var(--secondary100) !important;
    border-left: 0 !important;
    border-right: 0 !important;
  
}
.fc-day-grid-event .fc-time {
    font-weight: normal !important;
} 
.fc-event .fc-content {
    color: unset !important;
    font-weight: normal !important;
}
.fc-event-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
}
.fc-event { 
    font-size: 0.75rem !important;
}
.fc-button:disabled {
    opacity: 1 !important;
}
.fc th.fc-widget-header {
    background: #FFF !important;
    color: var(--gray300);
}
.fc th ,.fc td{
    text-align: left !important; 
}

.fc th ,.fc td  {
    padding: 10px 10px  !important;  
}

td.fc-head-container.fc-widget-header ,.fc td.fc-widget-content , .fc td.fc-event-container{
    padding: 0px  !important;  
}

table.fc-list-table  td.fc-widget-header, .fc table.fc-list-table  td.fc-widget-content, .fc  table.fc-list-table  td.fc-event-container {
    padding: 5px 18px !important;
}

.fc-ltr .fc-dayGrid-view .fc-day-top .fc-day-number {
    float: none  !important;
}
.fc .fc-row .fc-content-skeleton table, .fc .fc-row .fc-content-skeleton td, .fc .fc-row .fc-mirror-skeleton td{
    color: var(--gray3001);
}

.page-title-box {
    padding: 0!important;
    color: var(--black);
    font-family: 'THSarabunNewBold';
}
.page-title-box h4 {
    /* font-weight: var(--tb-font-weight-bold); */
  
    font-weight: 900;
    font-size: 35px !important;
    color: var(--black);
}

/* ######################################################################################## */ 

.btn-primary {
    --tb-btn-bg: var(--primary500);
    --tb-btn-border-color: var(--primary500);
    --tb-btn-hover-bg: var(--primary700);
    --tb-btn-hover-border-color: var(--primary700);
    --tb-btn-focus-shadow-rgb: var(--primary700);
    --tb-btn-active-bg: var(--primary800);
    --tb-btn-active-border-color: var(--primary800);
}

.btn-outline-primary {
    --tb-btn-color:var(--primary500);
    --tb-btn-bg: transparent;
    --tb-btn-border-color:var(--primary500);
    --tb-btn-hover-bg: var(--primary700);
    --tb-btn-hover-border-color: var(--primary700);
    --tb-btn-focus-shadow-rgb:var(--primary700);
    --tb-btn-active-bg: var(--primary800);
    --tb-btn-active-border-color: var(--primary800);
}

.btn-secondary {
    --tb-btn-bg: var(--orange500);
    --tb-btn-border-color: var(--orange500);
    --tb-btn-hover-bg: var(--orange700);
    --tb-btn-hover-border-color: var(--orange700);
    --tb-btn-focus-shadow-rgb: var(--orange700);
    --tb-btn-active-bg: var(--orange800);
    --tb-btn-active-border-color: var(--orange800);
}

.btn-outline-secondary {
    --tb-btn-color:var(--orange500);
    --tb-btn-bg: transparent;
    --tb-btn-border-color:var(--orange500);
    --tb-btn-hover-bg: var(--orange700);
    --tb-btn-hover-border-color: var(--orange700);
    --tb-btn-focus-shadow-rgb:var(--orange700);
    --tb-btn-active-bg: var(--orange800);
    --tb-btn-active-border-color: var(--orange800);
}


.btn-success {
    --tb-btn-bg: var(--success);
    --tb-btn-border-color: var(--success);
    --tb-btn-hover-bg: var(--success700);
    --tb-btn-hover-border-color: var(--success700);
    --tb-btn-focus-shadow-rgb: var(--success);
    --tb-btn-active-bg: var(--success300);
    --tb-btn-active-border-color:var(--success300);
} 

.btn-outline-success {
    --tb-btn-color: var(--success);
    --tb-btn-border-color: var(--success);
    --tb-btn-hover-bg: var(--success);
    --tb-btn-hover-border-color: var(--success200);
    --tb-btn-focus-shadow-rgb: var(--success200);
    --tb-btn-active-bg: var(--success50);
    --tb-btn-active-border-color:var(--success50);
}



.btn-warning {
    --tb-btn-bg: var(--warning200);
    --tb-btn-border-color: var(--warning200);
    --tb-btn-hover-bg: var(--warning100);
    --tb-btn-hover-border-color: var(--warning100);
    --tb-btn-focus-shadow-rgb: var(--warning200);
    --tb-btn-active-bg: var(--warning300);
    --tb-btn-active-border-color:var(--warning300);
} 
.btn-danger {
    --tb-btn-bg: var(--danger500);
    --tb-btn-border-color: var(--danger500);
    --tb-btn-hover-bg: var(--danger700);
    --tb-btn-hover-border-color: var(--danger700);
    --tb-btn-focus-shadow-rgb: var(--danger300);
    --tb-btn-active-bg: var(--danger300);
    --tb-btn-active-border-color:var(--danger300);
} 




table.dataTable.table-sm > thead > tr th.dt-orderable-asc, table.dataTable.table-sm > thead > tr th.dt-orderable-desc, table.dataTable.table-sm > thead > tr th.dt-ordering-asc, table.dataTable.table-sm > thead > tr th.dt-ordering-desc, table.dataTable.table-sm > thead > tr td.dt-orderable-asc, table.dataTable.table-sm > thead > tr td.dt-orderable-desc, table.dataTable.table-sm > thead > tr td.dt-ordering-asc, table.dataTable.table-sm > thead > tr td.dt-ordering-desc{
    --tb-border-color:  var(--primary500) !important;
    background-color:  var(--primary500) !important;
    color: var(--white) !important;
} 
table.dataTable.table-bordered th {
    --tb-border-color: var(--primary500) !important;
    background-color: var(--primary500) !important;
    color: var(--white) !important; 
}



table.table-bordered th {
    --tb-border-color: var(--primary500) !important;
    background-color: var(--primary500) !important;
    color: var(--white) !important;
}
table.table.table-indicator > tbody > tr {
    position: relative;
}
table.table.table-indicator > tbody > tr:hover > * {
    border-bottom: 1.3px solid var(--primary500)  !important;
    box-shadow: inset 0 0 0 9999px rgb(169 80 58 / 7%)  !important;
}
table.table.table-indicator > tbody > tr:hover::after {
    /* display: block; */
}
table.table.table-indicator > tbody > tr::after {
    position: absolute;
    left: -5px;
    bottom: 0;
    content: "";
    transform: translateY(53%);
    z-index: 4;
    display: none;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid var(--primary500) !important;
}


.table>:not(caption)>*>* {
    /* padding: .75rem .6rem; */
   
}


table.dataTable.table-sm > tbody > tr td.dt-orderable-asc, table.dataTable.table-sm >    tr td.dt-orderable-desc, table.dataTable.table-sm > tbody > tr td.dt-ordering-asc, table.dataTable.table-sm > tbody> tr td.dt-ordering-desc, table.dataTable.table-sm > tbody > tr td.dt-orderable-asc, table.dataTable.table-sm > tbody > tr td.dt-orderable-desc, table.dataTable.table-sm > tbody > tr td.dt-ordering-asc, table.dataTable.table-sm > tbody > tr td.dt-ordering-desc{
  
    color: var(--primary) !important;
} 


.table thead > tr th{
    font-family: "THSarabunNewBold", "THSarabunNew"  !important;
}

/* ######################################################################################## */
/* ######################################################################################## */

[data-theme=default][data-sidebar=dark] {
    --tb-vertical-menu-bg: var(--primary800);
    --tb-vertical-menu-border:  var(--primary800);
    --tb-vertical-menu-item-color:  var(--white);
    --tb-vertical-menu-item-hover-color: #eef0f7;
    --tb-vertical-menu-item-hover-bg: #222328;
    --tb-vertical-menu-item-active-color: #eef0f7;
    --tb-vertical-menu-item-active-bg: #222328;
    --tb-vertical-menu-sub-item-color: #97979a;
    --tb-vertical-menu-sub-item-hover-color: #eef0f7;
    --tb-vertical-menu-sub-item-active-color: #eef0f7;
    --tb-vertical-menu-title-color: #97979a;
    --tb-twocolumn-menu-iconview-bg: #161515;
} 
[data-theme=default] {
    --tb-header-height: 20px;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
    font-family: 'THSarabunNewBold';
    /* color: var(--gray800); */
    color: var(--primary);
    line-height: 1.0;
}

.font-w400{
    font-weight: 400;
}
.font-w500{
    font-weight: 500;
}
.font-w600{
    font-weight: 600;
}
/* ######################################################################################## */
/* ######################################################################################## */
 
table.dataTable.table-bordered th, table.dataTable.table-bordered td { 
    /* border-top-width: 1px; */
    border-top-width: 0px;
}

table.dataTable.table-bordered tr:last-child th, table.dataTable.table-bordered tr:last-child td {
    /* border-bottom-width: 1px; */
    border-bottom-width: 1.6px;
}

table.dataTable.table-sm > thead > tr th.dt-orderable-asc, table.dataTable.table-sm > thead > tr th.dt-orderable-desc, table.dataTable.table-sm > thead > tr th.dt-ordering-asc, table.dataTable.table-sm > thead > tr th.dt-ordering-desc, table.dataTable.table-sm > thead > tr td.dt-orderable-asc, table.dataTable.table-sm > thead > tr td.dt-orderable-desc, table.dataTable.table-sm > thead > tr td.dt-ordering-asc, table.dataTable.table-sm > thead > tr td.dt-ordering-desc {
    padding: 0.6rem 2px 0.6rem;
    background-color: var(--white04);
}

/* ######################################################################################## */
/* ######################################################################################## */

.navbar-menu  .navbar-nav{
    padding-left: 8px;
    padding-top: 8px;
}
.navbar-menu .navbar-nav  .menu-title { 
    color: var(--white02);
    border-bottom: 0px solid var(--white02);
    padding: .75rem 0.7rem;
    margin: 0px auto;
    width: 95%;
    font-size: 1rem;
    font-weight: normal;
}
.menu-title span {
    padding: 12px 0px; 
}

.navbar-menu .navbar-nav a.nav-link.nav_lev2{ 
    padding: .4rem 0.8rem;
    margin: 1px 0px;
    font-size: 1.2rem;
}
.navbar-menu .navbar-nav li.nav_lev2{  
    border-bottom: 0px solid  var(--white02);
    width: 98%;
    margin: 0 auto;
}
.navbar-menu .navbar-nav li.nav_lev2.active {  
    background-color: var(--brown600) !important;
}

.navbar-menu .navbar-nav a.nav-link.nav_lev2:hover{
    /* color: var(--white03);  */
    color: var(--orange500); 
}
.navbar-menu .navbar-nav .nav-sm {
    padding-left: 1.3rem;
}
.navbar-menu .navbar-nav .nav-sm .nav-link {
    padding: .55rem 1.4rem;
}
.navbar-menu .navbar-nav .nav-link[data-bs-toggle=collapse]:after {
    right: 26px;
    color: var(--white);
}
.navbar-menu .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true] {
    color: var(--tb-vertical-menu-item-active-color);
    background-color: #22232824;
}



.navbar-menu .navbar-nav .nav-sm .nav-link {
    padding: .55rem 0.5rem  0.5rem 1.3rem;
    color: var(--white);
} 
.navbar-menu .navbar-nav .nav-sm a.nav-link:hover{
    color: var(--white03); 
}
 
.navbar-menu .navbar-nav .nav-sm .nav-link:before {
    content: "";
    width: 3.5px;
    height: 3.5px;
    background-color: var(--white);
} 

.navbar-menu .navbar-nav .nav-link.active {
    color: var(--tb-vertical-menu-item-active-color);
    background-color: #22232824 !important;
}


[data-layout=vertical][data-sidebar-size=sm] .navbar-menu .navbar-nav li.nav_lev2{  
    width: 100%;
    margin: 0 auto;
}
[data-layout=vertical][data-sidebar-size=sm] .navbar-menu .navbar-nav .menu-title{
    display: none;
}
[data-layout=vertical][data-sidebar-size=sm] .navbar-menu .navbar-nav .menu-title , [data-layout=vertical][data-sidebar-size=sm] .navbar-menu .navbar-nav li.nav_lev2{
    border-bottom: 0px solid var(--white02);
}
[data-layout=vertical][data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item>a.menu-link {
    margin: 8px 12px 0px
}
[data-layout=vertical][data-sidebar-size=sm] .navbar-menu .navbar-nav a.nav-link.nav_lev2 {
    padding: .75rem 0.8rem;
    font-size: 0.85rem;
    height: 2.5rem;
} 

[data-layout=vertical][data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover>a.menu-link {
    color: var(--white);
    background: var(--primary900); 
}
 
[data-layout=vertical][data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover>.menu-dropdown{
    background: var(--primary900); 
}

[data-layout=vertical][data-sidebar-size=sm] .navbar-menu .navbar-nav{
    padding-left: 0;
}

 


#page-topbar{
    /* background-color: var(--primary700); */
    background-color: var(--white);
}
.navbar-header{
    height: 52px;
}
.navbar-header .user-name-text {
    color: var(--primary);
    line-height: 21px;
    font-family: "THSarabunNewBold";
    font-size: 1.25rem; 
} 
.navbar-header .user-name-sub-text{
    color: var(--orange500);
    font-family: "THSarabunNewBold";
    font-size: 1.25rem; 
}
.navbar-header .user-name-sub-text.text-time{
    font-size: 0.6rem !important;
}
.text_topbar{
    color: var(--orange500);
    font-size: 1rem;
    font-weight: 600;
}
.hamburger-icon span{
    background-color:  var(--orange500);
}
button#page-header-user-dropdown{
    line-height: 0.8;
}
.topbar-user i{
    color:  var(--orange500);
    font-size: 1.75rem;
}
.navbar-brand-box {
    padding: 0;
   height: 52px;
   background-color: var(--primary);
}
.navbar-brand-box .logo-lg img{
    width: 100%;
}
.logo {
    line-height: 3rem;
}

.btn {
    --tb-btn-padding-x: 0.6rem;
    --tb-btn-padding-y: 0.37rem;
    --tb-btn-border-radius: 2px; 
}
.btn-icon { 
    height: calc(0.8rem + 1.5em + 0px);
    width: calc(0.9rem + 1.5em + 0px); 
}

.padding-x05{
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.padding-x1{
    padding-left: 1rem;
    padding-right: 1rem;
}
.padding-y05{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
} 
.padding-y1{
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.form-label {
    margin-bottom: .3rem; 
}


.form-control.is-valid, .was-validated .form-control:valid{
    background-size: calc(.75em + .525rem) calc(.75em + .2rem);
} 
.form-icon .form-control-icon{
    padding-left: 2rem;
}
.form-icon i{
    color: var(--gray300);
    left: 12px;
}
.blank-error.invalid{
    color: var(--danger200);
    padding-top: 0px;
    padding-left: 10px;
    position: absolute;
}
.btn-sm, .btn-group-sm>.btn {
    --tb-btn-padding-y: .25rem;
    --tb-btn-padding-x: .5rem;
    --tb-btn-font-size: calc(var(--tb-font-base)* .875);
    --tb-btn-border-radius: .2rem;
}

.select2-dropdown{
    border: var(--tb-border-width) solid var(--tb-border-color-translucent) !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--gray800) !important;
    padding-left: 0rem !important;
    /* #181818 */
}
.select2-container--default .select2-selection--single{
    border: var(--tb-border-width) solid var(--tb-border-color-translucent) !important;
} 
.select2-container .select2-selection--single{
    height: 36px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height: 36px !important;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 32px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: var(--tb-border-width) solid var(--tb-border-color-translucent) !important;
    padding-left: 1.5rem;
}
.select2-container--default .select2-selection--multiple {
    border: var(--tb-border-width) solid var(--tb-border-color-translucent) !important;
    padding-left: 1.5rem  !important;
    min-height: 36px  !important;
    line-height: 23px !important;
    font-family: "THSarabunNew", sans-serif, "Poppins", sans-serif  !important;
    /* --tb-font-sans-serif: */
    height: auto !important;
}
.select2-results__option {
    padding: 8px !important;
}
.select2-container--default .select2-selection--single .select2-selection__clear{
    height: 34px !important;
    color: var(--gray800) !important;
}
.select2-container .select2-search--inline .select2-search__field{
    margin-top: 6px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
    background-color: #ffffff !important;
    border: 1px solid  var(--primary500) !important;
    color: var(--primary500) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
    color: var(--primary500) !important;
    border-right: 1px solid var(--primary500)  !important;
}
textarea.select2-search__field{
    font-family: "THSarabunNew", sans-serif, "Poppins", sans-serif  !important;
}
.select2-container{
    width: 100% !important;
}
/*   ###############################   SweetAlert  ############################### */ 
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
    border: 0;
    border-radius: .25em;
    background: initial;
    background-color: var(--primary500);
    color: #fff;
    font-size: 0.9em;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    
    padding-left: 1rem;
    padding-right: 1rem;
    
    --tb-btn-padding-x: 0.6rem;
    --tb-btn-padding-y: 0.3rem;
    --tb-btn-border-radius: 2px; 
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel{
    border: 0;
    border-radius: .25em;
    background: initial;
    background-color: var(--white);
    border: 1px solid var(--primary500);
    color: var(--primary500);
    font-size: 0.9em;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    
    padding-left: 1rem;
    padding-right: 1rem;
    
    --tb-btn-padding-x: 0.6rem;
    --tb-btn-padding-y: 0.3rem;
    --tb-btn-border-radius: 2px; 
}
div:where(.swal2-icon){
    margin: 2em auto .6em;
}

.swal2-container .swal2-title {
    padding: 8px 23px 0;
}
div:where(.swal2-container) .swal2-html-container { 
    margin: 0.4em 1.6em .3em;
}
div:where(.swal2-container) div:where(.swal2-actions) { 
    /* margin: 0.4em auto 0;  */
    margin: 1.25em auto 0.5em;
}
div:where(.swal2-container) .text_swal{
    font-size: 5rem;
    color: var(--primary500);
}
div:where(.swal2-icon) {
    /* border: 0 solid rgba(0, 0, 0, 0);   */
}
.swal2-icon.swal2-warning{
  
     /* border: 0.25em solid rgba(0, 0, 0, 0);    */
}

div:where(.swal2-container) .swal2-html-container {
    margin: 0.4em 1.6em 0em;
}



/*   ###############################   SweetAlert  ############################### */ 
 
.modal_lg .modal-header{
    width: 96%;
}
.modal-header{
    border-bottom: 1px solid #9d9d9d;
    padding-bottom: 8px;
    width: 92%;
    margin: 0 auto;
    padding-left: 2px;
    padding-right: 2px;
}
.modal-dialog:not(.modal-dialog-scrollable) .modal-header {
    padding-bottom:  8px;
}

.modal-title i{
    margin-right: 4px;
}
.display-none{
    display: none !important;
    /* visibility: hidden; */
}
.visible-hidden{
    /* display: none; */
    visibility: hidden;
}


/*   ###############################  End SweetAlert  ############################### */ 
 
.navbar-menu .navbar-nav .nav-sm .nav-link.active{
    /* color: #2196F3; */
    background-color: #22232824;
}
label{
    font-weight: 500;
}
.choices__list--dropdown .choices__item { 
    padding: .4rem 1rem .4rem 16px;
}
.text-right{
    text-align: right;
}

.box_bgque{
    /* background-image: url('/app-assets/images/bg/bg_q1.png'); 
    background-repeat: no-repeat; */
}
.box_bgque1{
    /* position: absolute; */
    position: fixed;
    width: 17%;
    left: 18%;; 
    bottom: 10%;
}
.box_bgque2{
    /* position: absolute; */
    position: fixed;
    width: 17%;
    right: 0;
    bottom: 10%;
}
.w-100p{
    width: 100% !important;
}
.w-140{
    width: 140px !important;
}
.w-120{
    width: 120px !important;
}
.w-100{
    width: 100px !important;
}
.w-90{
    width: 90px !important;
}
.ml-2{
    margin-left: 2px;
}
.fc .fc-row .fc-content-skeleton table, .fc .fc-row .fc-content-skeleton td, .fc .fc-row .fc-mirror-skeleton td { 
    border-color: transparent !important;
}

.nav-tabs .nav-link{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
/* 
.upload-Nocolor {
    border: 2px solid #ccc;
    background-color: #f0f0f0;
} */

.icon_end_box{
    position: absolute;
    right: 1rem;
    bottom: 1rem;
}
.box_border_1{
    border-radius: 4px;
    box-shadow: 8px 8px 6px -9px #d5d5d5;
}
.cursor-pointer{
    cursor: pointer;
}
.footer{
    height: 52px;
}

.fa, .fas {
    font-weight: normal;
}


.box_btn_head{
    position: absolute;
    right: 1rem;
    top: -54px;
}

.pl-05{
    padding-left: 0.5rem !important;
}

.display-inline-block{
    display: inline-block;
}
.avatar-sm {
    height: 3.5rem;
    width: 3.5rem;
}
.lh18{
    line-height: 1.8rem;
}
h5.card-title, h4.card-title  {
    color: var(--orange500);
}
h5.title{
    color: var(--orange500);
}
h6.title{
    color: var(--orange500);
    font-size: 1.5rem;
}
h6.card-title{
    display: inline-block;
}
.txt_datetime{  
    color: var(--orange500);
    font-size: 1.2rem;
}

a, a.stretched-link{
    font-family: 'THSarabunNewBold';
    color:  var(--orange500) ;
}
.btn {
    --tb-btn-line-height: 1 !important;
}
p.box_news_desc{
    min-height: 77px;
    height: 77px;
    margin-bottom: 0.2rem;
    line-height: 1.2;
    overflow: hidden;
}
h6.title{
    margin-bottom: .2rem  !important;
}
.box_faq{
    /* border: 1px solid   var(--orange500); */
    padding: 1rem;
}
hr.sc1{ 
    margin: 0;
    border-top: 2px solid;
    opacity: .1;
}
.box_pd2{
    padding: 0 1rem;
}

.bg-orange-subtle i{
    font-size: 1.7rem;
}
.btn-size1{
    height: 42px;
}


.box-orange {
    color: var(--orange500);
    background-color:  var(--orange50);
    border: 2px solid var(--orange500);  
    border-radius: 12px;
}
.box-orange a{
    color: var(--orange500);
}
.border-primary-1{
    border: 1px solid var(--primary);
}


.box_score{
    line-height: 1.1;
}
.box_score .txt_title{
    color: var(--black);
    font-family: "THSarabunNewBold";
    font-size: 1.2rem;
}
.box_score .txt_score_1{
    color: var(--orange500);
    font-size: 2rem;
    font-weight: 700;
}
.box_score .txt_score_sub{
    color: var(--orange500);
    font-size: 1.5rem;
    font-weight: 700;
}
.box_score .txt_score{
    font-size: 1.2rem;
}
.box_score .txt_score_sub2{
    color: var(--brown200);
}

.box_circle{
    width: 40px;
    height: 40px;
    border-radius: 100%;
    color: var(--orange500);
    background-color: var(--orange50);
    font-size: 2rem;
    text-align: center;
    font-weight: 900;
}
.border-r-1{
    border-right: 1px solid var(--brown200);
    padding-right: 1rem !important;
}
.border-l-1{
    border-right: 1px solid var(--brown200);
}

.nav-pills .nav-link {
    border-radius: 1px;
    border: 1px solid var(--disabled); 
    color: var(--primary700) !important;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: var(--tb-nav-pills-link-active-color);
    background-color: var(--tb-nav-pills-link-active-bg);
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: var(--white);
    background-color: var(--primary700);
    border-color: var(--primary700);
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color:  var(--white) !important;  
    background-color: var(--orange500) !important;  
}

.badge { 
    --tb-badge-font-size: 1.2rem;
    --tb-badge-font-weight: unset;
}
.link-orange{
    /* color: RGBA( var(--orange500), var(--orange500 , 1)) !important; 
    text-decoration-color: RGBA( var(--orange500) , var(--tb-link-underline-opacity, 1)) !important; */

    color:  var(--orange500)  !important; 
    text-decoration-color:  var(--orange500)   !important;
}
.img_icon_eva{
    width: 50px;
    height: 55px;
}

.tab-eva-main .card-body {
    padding: 0.2rem 1rem !important; 
}
.tab-eva-main .card-footer {
    padding: 0.5rem 2rem !important; 
}
.tab-eva-main .card-title { 
    margin: 0 0 0px 0;
}
#tab_uleva.nav-pills .nav-link i{
    font-size: 1rem  !important; 
}

button.btn{
    line-height: 1.7rem;
}
button.btn i {
    font-size: 1rem;
}
#tab_uleva.nav {
    --tb-nav-link-padding-x: 0.6rem !important;
}
.modal-footer{
    -webkit-box-pack: justify  !important;
    -ms-flex-pack: unset !important;
    justify-content: space-between !important;
}
.modal-title.text-secondary{

}
 
.box_circle2 {
    width: 36px;
    height: 36px;
    border-radius: 100%;
    color: var(--orange500);
    background-color: var(--orange50); 
    text-align: center;
    font-weight: 900;
}
.modal-title .box_circle2  i {
    margin-right: 0px;
    font-size: 1.2rem;
}
.modal-dialog:not(.modal-dialog-scrollable) .modal-header .btn-close{
    font-size: 0.8rem !important;
    color: var(--black)!important;
}
.swal2-html-container{
    font-size: 1.6rem !important;   
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm , div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel{
    font-size: 1.3rem !important; 
}
.swal2-html-container img.img_icons_sw{
    width: 70px;
    margin: 1.5rem;
}
/* .form-control */
input:read-only ,input:readonly{
    background-color: #f0f0f0 !important; 
}
.form-select.is-valid, .was-validated .form-select:valid {
    border-color: var(--tb-border-color-translucent) !important; 
}
.form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"], .was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"] {
    --tb-form-select-bg-icon: none !important;
    padding-right: 4.95rem;
    background-position: right .9rem center, center right 2.7rem;
    background-size: 16px 12px, calc(.75em + .525rem) calc(.75em + .525rem);
}
.form-check-input.is-valid~.form-check-label, .was-validated .form-check-input:valid~.form-check-label {
    color:  unset !important; 
}
 
.box_score_detail{
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--orange500);
    background-color: var(--brown2_100);
}

/* input:read-only {
    background-color: #f0f1f5 !important;
} */
/* readonly */
input:readonly {
    background-color: #f0f1f5 !important;
}
.eval_form-check p.card-text {
    padding-left: 2.3rem;
}
.form-label {
    /* margin-bottom: .3rem; */
    font-family: 'THSarabunNewBold' !important;
}
.bg_gray{
    background-color: var(--white04)  !important;
}

.swal2-close { 
    font-size: 34px  !important;
}

.table-card td:first-child, .table-card th:first-child {
    padding-left: 0;
}
.table-card td:last-child, .table-card th:last-child{
    padding-right: 0;
}
table th.w-7{
    width: 7%;
}
table th.w-10{
    width: 10%;
}
table th.w-20{
    width: 20%;
}
table th.w-25{
    width: 25%;
}
table th.w-30{
    width: 30%;
}
table th.w-35{
    width: 35%;
}
table th.w-40{
    width: 40%;
}
table th.w-45{
    width: 45%;
}table th.w-50{
    width: 50%;
}
.btn-outline-orange{
    --tb-btn-padding-x: 0.1rem;
}
.text-gray700{
    color: #525252  !important;
}

a.a-link{
    text-decoration: underline;
}
a.a-link:hover{
    text-decoration: underline;
}

a.nav-link.mtab{
    min-width: 190px;

}
#back-to-top{
    opacity: 0.9;
}

table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:after, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:before, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:after, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:after, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after, table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:before, table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:after, table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:before, table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:after, table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:after, table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:before, table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after{
    left: 0;
    opacity: 0.125;
    line-height: 5px;
    font-size: 0.5em;
}
table.dataTable.table-sm > thead > tr th.dt-orderable-asc, table.dataTable.table-sm > thead > tr th.dt-orderable-desc, table.dataTable.table-sm > thead > tr th.dt-ordering-asc, table.dataTable.table-sm > thead > tr th.dt-ordering-desc, table.dataTable.table-sm > thead > tr td.dt-orderable-asc, table.dataTable.table-sm > thead > tr td.dt-orderable-desc, table.dataTable.table-sm > thead > tr td.dt-ordering-asc, table.dataTable.table-sm > thead > tr td.dt-ordering-desc {
    padding: 0.4rem 2px 0.4rem  !important;
}

.table-sm>:not(caption)>*>* {
    padding: .1rem .25rem;
}
.text-inform{
    color: var(--brown500);
    font-family: 'THSarabunNewBold' !important;
}

/* ############################### */
.loader {
    width: 48px;
    height: 48px;
    border: 5px solid;
    border-color: #FF3D00 transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
  }
  
#modal_loading .modal-content{
    background-color: #ffffff00 !important;
    border: 0 !important;
}

.tb_datatable span i{
    font-size: 1.2rem  !important;

}  

.tb_datatable span {
    font-family: 'THSarabunNewBold' !important;
}
.badge .badge-sm{
    font-family: 'THSarabunNewBold' !important;
}

.form-check-success .form-check-input:checked {
    background-color: var(--orange500) !important;
    border-color:  var(--orange500) !important;
}
.form-check-input:checked {
    background-color: var(--orange500) !important;
    border-color: var(--orange500) !important;
}

.box_e_status{
    position: absolute;top: -60px;right: 16px;
}
.px-4 {
    padding-right: 1.2rem !important;
    padding-left: 1.2rem !important;
}
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 
 
@media screen and (max-width: 1200px) {
    .box_bgque1{
        display: none;
    }
    .box_bgque2{
        display: none;
    }
}

@media screen and (max-width: 975px) {
    #tab_uleva.nav-pills .nav-link{
        font-size: 1.2rem !important;
    }
}

[data-layout=vertical][data-sidebar-size=sm] .navbar-menu .navbar-nav {
    padding-left: 0;
    padding-top: 30px;
}