@import url("https://fonts.googleapis.com/css2?family=Engagement&family=Epilogue:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100..900&display=swap');
table {
  font-family: "Noto Sans Thai", sans-serif;
  color: #003664;
}

#example th,#example td{
  padding: 20px;
}

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

/***Start: Add checkbox to virtual columns selection**/

.dt-button.buttons-columnVisibility{
  text-align:left;
}

.dt-button.buttons-columnVisibility:before {
   font-family: "FontAwesome";
   content: "\f096";
   display: inline-block;
   padding-right: 3px;
}

.dt-button.buttons-columnVisibility.active:before {
   font-family: "FontAwesome";
   content: "\f046";
   display: inline-block;
   padding-right: 3px;
}

#example .title{
  white-space: normal;
  text-overflow: ellipsis;
}

.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate{
  color: #003664;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
  background-color: #d44576 !important;
}

/***End: Add checkbox to virtual columns selection**/