/* CSS Document */

/*
@import url('https://fonts.googleapis.com/css2?family=Niramit&display=swap');
@import url('https://fonts.googleapis.com/css?family=Kanit|Prompt');
body{
  font-family: 'Kanit', sans-serif;
}
h1,h2,h3,h4{
  font-family: 'Kanit', sans-serif;
}
*/
@import url('https://fonts.googleapis.com/css2?family=Niramit&display=swap');

body{font-family: 'Niramit', sans-serif;}

h1,h2,h3,h4{
    font-family: 'Niramit', sans-serif;
}

a{  font-family: 'Niramit', sans-serif;}

.bt-paid {
  background-color:#2980B9; /* Green */
  border: none;
  color: #FFF;
  padding: 4px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1-px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius:5px;
} 

.bt-edit {
  background-color:#FF9900; /* Green */
  border: none;
  color: white;
  padding: 4px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius:5px;
} 

.bt-add {
  background-color:#154360; /* Green */
  border: none;
  color: white;
  padding: 8px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius:5px;
} 

.bt-dc {
  background-color:#7D3C98; /* Green */
  border: none;
  color: white;
  padding: 4px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius:5px;
} 
.bt-del {
  background-color:#666666; /* Green */
  border: none;
  color: white;
  padding: 4px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius:5px;
} 


.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 10px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 4px;
}

.button1 {
  background-color: white; 
  color: black; 
  border: 2px solid #4CAF50;
}

.button1:hover {
  background-color: #4CAF50;
  color: white;
}

.button2 {
  background-color: white; 
  color: black; 
  border: 2px solid /*#008CBA*/#13497F;
}

.button2:hover {
  background-color: /*#008CBA*/#13497F;
  color: white;
}

.button3 {
  background-color: white; 
  color: black; 
  border: 2px solid #f44336;
}

.button3:hover {
  background-color: #f44336;
  color: white;
}

.button4 {
  background-color: white;
  color: black;
  border: 2px solid #e7e7e7;
}

.button4:hover {background-color: #e7e7e7;}

.button5 {
  background-color: white;
  color: black;
  border: 2px solid #555555;
}

.button5:hover {
  background-color: #555555;
  color: white;
}

input[type=text], select {
  width: 100%;
  padding: 6px 4px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 2px;
  box-sizing: border-box;
  font-family: 'Niramit', sans-serif;
}

.txt1{
  width: 100%;
  padding: 8px 4px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 2px;
  box-sizing: border-box;
}


.select1 {
  width: 100%;
  padding: 5px 4px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 2px;
  box-sizing: border-box;
  cursor: pointer;
  font-family: 'Niramit', sans-serif;
}


.select2{
  background: #FFF ;
  padding:5px;
  box-shadow: 5px 5px #EAE5E7;
  font-family: 'Niramit', sans-serif;
  margin-bottom: 6px;
  width: 100%;
  outline: none;
  font-size:14px;
  border: solid 1px #CCCCCC;
  border-radius: 2px;
  cursor:pointer;
}

#customers {
  /*font-family: "Kanit", Arial, Helvetica, sans-serif;*/
  font-family: 'Niramit', sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #D5D8DC/*#F2F4F4*/;
  padding: 4px;
}

#customers tr:nth-child(even){background-color:#F4F6F6 /*#f2f2f2*/;}

#customers tr:hover {background-color:#EAF2F8/* #ddd*/;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color:#13497F /*#4CAF50*/;
  color: white;
}


#customers2 {
 font-family: 'Niramit', sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers2 td, #customers2 th {
  border: 1px solid #ddd;
  padding: 4px;
}

#customers2 tr:nth-child(even){background-color: #f2f2f2;}

#customers2 tr:hover {background-color: #ddd;}

#customers2 th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color:#5B2C6F/*#4CAF50*/;
  color: white;
}
a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  color:#FF0000;
}

a:active {
	color:#00FF00;
  text-decoration: none;
}