
<style>
/* === สีหัวตาราง ===  */
#submit{
    background-color:#3177ce;
}
#submit:hover {
    background-color: #2368BE;
}
.thead_color {
    background-color: white;
    font-weight: normal;
    color: #9c27b0;
    padding: 10px 18px;
    border-bottom: 1px solid #111 !important;
}

.list {
  color: black;
}

.list_red{
  color: red;
}

.list_green{
  color: green;
}

#sum_price {
  box-sizing: border-box;
  border: none;
  background-color: white;
}

thead tr th {
	font-size: 15px;
	text-align: center;
	color: #FFF;
	background-color: #666572;
	border: 1px solid #e6e6e6;
	border-bottom: 1px solid #e6e6e6;
}

.table-condensed thead tr th{
	background-color: white ;
	color: black !important;
}

.table-condensed thead tr th :hover{
	background-color: #666572 !important;
	border: 1px solid #666572 !important;
	color: black;
}

tbody tr td {
		font-size: 16px;
		vertical-align : middle;
		text-align: left;
		border: 1px solid #e6e6e6;
		border-bottom: 1px solid #e6e6e6;
}
/* สี numpage datatable */
.page-item.active .page-link{
  background-color: #6c757d;
  border-color: #6c757d;
}
.page-link{
  color: black;
}
 body{
  font-family: 'Sarabun', sans-serif;
} 
.pending{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem; 
  padding-left: 0.75rem;
  padding-right: 0.75rem; 
  margin: 0.5rem; 
  background-color: #FDE68A; 
  color: #D97706; 
  font-size: 0.875rem;
  line-height: 1.25rem; 
  font-weight: 600; 
  border-radius: 20px;
}
.approved{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem; 
  padding-left: 0.75rem;
  padding-right: 0.75rem; 
  margin: 0.5rem; 
  background-color: #A7F3D0; 
  color: #059669; 
  font-size: 0.875rem;
  line-height: 1.25rem; 
  font-weight: 600; 
  border-radius: 20px; 
}
.disapproval{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem; 
  padding-left: 0.75rem;
  padding-right: 0.75rem; 
  margin: 0.5rem; 
  background-color: #FECACA; 
  color: #DC2626; 
  font-size: 0.875rem;
  line-height: 1.25rem; 
  font-weight: 600; 
  border-radius: 20px; 
}

</style>
  <!-- sweetalert2-theme-bootstrap-4 -->
  <link rel="stylesheet" href="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css">
  <!--sweetalert2  -->
  <link rel="stylesheet" href="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/sweetalert2/sweetalert2.min.css">
  <!-- summernote -->
  <link rel="stylesheet" href="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/summernote/summernote.min.css">
  <!-- summernote -->
  <link rel="stylesheet" href="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/summernote/summernote-bs4.min.css">
  <!-- summernote -->
  <link rel="stylesheet" href="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/summernote/summernote-lite.min.css">
  <!-- select2-bootstrap4-theme -->
  <link rel="stylesheet" href="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
  <!-- select2 -->
  <link rel="stylesheet" href="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/select2/css/select2.min.css">
  <!-- jquery-ui  -->
  <link rel="stylesheet" href="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/jquery-ui/jquery-ui.min.css">
  <!-- icheck-bootstrap -->
  <link rel="stylesheet" href="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
  <!-- daterangepicker -->
  <link rel="stylesheet" href="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/daterangepicker/daterangepicker.css">
  <!-- chart.js -->
  <link rel="stylesheet" href="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/chart.js/Chart.min.css">
  <!-- bs-stepper -->
  <link rel="stylesheet" href="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/bs-stepper/css/bs-stepper.min.css">
  <!--adminlte.components.min  -->
  <link rel="stylesheet" href="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/dist/css/alt/adminlte.components.min.css">
  <!-- datatables-autofill -->
  <link rel="stylesheet" href="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/datatables-autofill/css/autoFill.bootstrap4.min.css">
  <!-- datatables-bs4 -->
  <link rel="stylesheet" href="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css"></script>
  <!-- datatables-buttons -->
  <link rel="stylesheet" href="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/datatables-buttons/css/buttons.bootstrap4.min.css"></script>
  <!-- datatables-colreorder -->
  <link rel="stylesheet" href="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/datatables-colreorder/css/colReorder.bootstrap4.min.css"></script>
  <!-- datatables-fixedcolumns -->
  <link rel="stylesheet" href="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/datatables-fixedcolumns/css/fixedColumns.bootstrap4.min.css"></script>
  <!-- datatables-fixedheader  -->
  <link rel="stylesheet" href="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/datatables-fixedheader/css/fixedHeader.bootstrap4.min.css"></script>
  <!-- datatables-keytable  -->
  <!-- <link rel="stylesheet" href="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/datatables-keytable/css/keyTable.bootstrap4.min.css"></script> -->
  <!-- datatables-responsive -->
  <link rel="stylesheet" href="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/datatables-responsive/css/responsive.bootstrap4.min.css"></script>
  <!-- datatables-rowgroup -->
  <link rel="stylesheet" href="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/datatables-rowgroup/css/rowGroup.bootstrap4.min.css"></script>
  <!-- datatables-rowreorder -->
  <link rel="stylesheet" href="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/datatables-rowreorder/css/rowReorder.bootstrap4.min.css"></script>
  <!-- datatables-scroller -->
  <link rel="stylesheet" href="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/datatables-scroller/css/scroller.bootstrap4.min.css"></script>
  <!-- datatables-searchbuilder -->
  <link rel="stylesheet" href="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/datatables-searchbuilder/css/searchBuilder.bootstrap4.min.css"></script>
  <!-- datatables-searchpanes -->
  <link rel="stylesheet" href="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/datatables-searchpanes/css/searchPanes.bootstrap4.min.css"></script>
  <!-- datatables-select -->
  <link rel="stylesheet" href="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/datatables-select/css/select.bootstrap4.min.css"></script>
  <!-- overlayScrollbars -->
  <link rel="stylesheet" href="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
  <!-- bootstrap4-duallistbox -->
  <link rel="stylesheet" href="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/bootstrap4-duallistbox/bootstrap-duallistbox.min.css">
  <!-- bootstrap-colorpicker -->
  <link rel="stylesheet" href="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css">
  <!-- bootstrap-switch -->
  <link rel="stylesheet" href="<?php echo base_url()?>assets/template/AdminLTE-3.2.0/plugins/bootstrap-switch/css/bootstrap3/bootstrap-switch.min.css">

  <link rel="stylesheet" href="<?php echo base_url()?>assets/plugins/font-awesome-4.7.0/css/font-awesome.css">

  <!-- jquery datatable-->
  <link rel="stylesheet" href="<?php echo base_url()?>assets/plugins/dataTables.jqueryui.css">
  <link rel="stylesheet" href="<?php echo base_url()?>assets/plugins/component-custom-switch.min.css">

	<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/css/datepicker.min.css" rel="stylesheet">

  <link rel="stylesheet" href="<?php echo base_url()?>assets/plugins/filepond-master/dist/filepond.css">

  <link rel="stylesheet" href="<?php echo base_url()?>assets/plugins/filepond-plugin-image-preview-master/dist/filepond-plugin-image-preview.css">



