.sarabun-thin {
  font-family: "Sarabun", sans-serif;
  font-weight: 100;
  font-style: normal;
}

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

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

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

.sarabun-medium {
  font-family: "Sarabun", sans-serif;
  font-weight: 500;
  font-style: normal;
}

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

.sarabun-bold {
  font-family: "Sarabun", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.sarabun-extrabold {
  font-family: "Sarabun", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.sarabun-thin-italic {
  font-family: "Sarabun", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.sarabun-extralight-italic {
  font-family: "Sarabun", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.sarabun-light-italic {
  font-family: "Sarabun", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.sarabun-regular-italic {
  font-family: "Sarabun", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.sarabun-medium-italic {
  font-family: "Sarabun", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.sarabun-semibold-italic {
  font-family: "Sarabun", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.sarabun-bold-italic {
  font-family: "Sarabun", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.sarabun-extrabold-italic {
  font-family: "Sarabun", sans-serif;
  font-weight: 800;
  font-style: italic;
}












a {text-decoration:none;}

.font12 {font-size:12px}
.font13 {font-size:13px}
.font14 {font-size:14px}
.font16 {font-size:16px}
.font18 {font-size:18px}
.font20 {font-size:20px}

    html, body {font-family:'Sarabun','sans-serif';}   
/*	
    html, body, div, li {
	  font-family: "Sarabun", sans-serif;
	  font-weight: 100;
	  font-style: normal;
	}
*/	
	
	
	
	
	body {background-color:#f6fef6;}
	.text-logo {color:yellow;font-weight:bold;}
	.bg-lightyellow {background-color:lightyellow;}



	
	body {margin-top:0;}
	th, td {font-size:13px;}
	
	.border_solid {border: 1px solid;border-color:#aaaaaa;}
	.bg_cyan {background-color:cyan}
	.bg_lightcyan {background-color:lightcyan}
	.bg_green {background-color:lightgreen}	

	.ui-widget-header {
		border: 1px solid #dddddd;
		background: #9fccf4;
		color: #335533;
		font-weight: normal;
	}

	html .ui-button.ui-state-default:hover {
		border: 1px solid #000000;
		background: #0000ff;
		font-weight: normal;
		color: #ffffff;
	}

	.dataTables_length, .dataTables_filter {
		background-color: #ffffff;
	}
	
	.ui-corner-tr {
		background-color: #f5f5f5;
	}

  .add_button {
	display: inline-block;
	padding: 5px 5px;
	text-align: center;
	text-decoration: none;
	color: #000000;
	background-color: #ffd700;
	border-radius: 4px;
	outline: none;
  }

  .edit_button {
	display: inline-block;
	padding: 4px 4px;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	background-color: #0000ff;
	border-radius: 4px;
	outline: none;
  }
 
 
 /* Ensure that the table scrolls */
    th, td { white-space: nowrap; }
    div.dataTables_wrapper {
        width: 100px;
        margin: 0 auto;
    }
 
 
li:hover.list-group-item-action { background-color: lightyellow; }