a {
 
  color: white;
  text-align: center;

  text-decoration: none;
}

a:hover {
  background-color: #F1F7F7;
  color: black;
  text-decoration: none;
  
}
.a2 {
 
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
.a2:hover {
  
  color: #0B192C;
}
.a3 { 
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
.a3:hover {
  
  color: #0B192C;
}
.a3:active {
  background-color: none;
}

.active {
    background-color: #ffffff;
  }



.button {
padding: 5px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
}

.button1 {
    background-color: #e4e1e1;
    color: black;
   /* border: 2px solid #555555*/
 }  
  .button:hover {
    background-color: #c9c6c6;
    color: black;
  }
  body {font-family: "Kanit"}

body, html {
  height: 100%;
  line-height: 1.8;
}

/* Full height image header */
.bgimg-1 {
  background-position: center;
  background-size: cover;
 
  background-image: url("assets/images/cover_1.jpg");
  min-height: 100%;
}
.bg-1 {
  background-color: #ECF8F8;
 
}
.bg-2 {
  background-color: #9cadce;
 
}


.w3-bar .w3-button {
  padding: 16px;
}
input[type=password] {
 
 
 /* border: 2px solid #ccc; */
  border-radius: 4px; 
  font-size: 16px;
  background-color: white;
 
  width:100%;
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  /*padding: 12px 20px 12px 40px; */
}
#text1 {display:none;color:red}

.login_oueter {
  width: 360px;
  max-width: 100%;
}
.logo_outer{
  text-align: center;
}
.logo_outer img{
  width:120px;
  margin-bottom: 40px;
}

.colornv{
  background: linear-gradient(135deg, #2a9bd0 10%, #bc81b4);
  color: white;
}
.colornv2{
  background: linear-gradient(135deg, #274e49 10%, #a5d4d4);
}
.color-dash-blue{background: linear-gradient(135deg, #1e7aa5, #3a34b8);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;}

.color1{
  background: linear-gradient(
    to right bottom,
    rgba(52, 56, 91, 0.9),
    rgba(150, 178, 231, 0.9)
  );
  color:white;
}
.color2{
  background: linear-gradient(
    to right bottom,
    rgba(151, 207, 207,0.9),
    rgba(252, 209, 209, 0.9)
  );
}
.color3{
  background: linear-gradient(
    to right bottom,
    rgba(151, 207, 207,0.9),
    rgba(172, 222, 168, 0.9)
  ); 
}
.color4{
  background: linear-gradient(
    to right bottom,
    rgba(190, 190, 190,0.9),
    rgba(211, 211, 211, 0.9)
  );
}
.color12{
  background: linear-gradient(135deg, #36468D 20%, #70A1FF);
}

.color5{
  /*background-color: rgba(52, 56, 91, 0.9);*/
  background-color:#a0c4ff;
  border: 0px;
  border-radius:2px;
  padding: 4px;
  color:#2E3136;
  
  
}
.color5_1{
  /*background-color: rgba(52, 56, 91, 0.9);*/
  background-color:#a0c4ff;
 
  color:#2E3136;
  
  
}
.color5_2{
  /*background-color: rgba(52, 56, 91, 0.9);*/
  background-color:#002952;
 
  color:#FFFFFF;
  
  
}
.color6{
  background-color:rgba(211, 211, 211, 0.9);
}
.color6_1{
  background-color:#004182;
}
.color7{
  /*background-color: rgba(52, 56, 91, 0.9);*/
  background-color:#F3D6CE;
  border: 0px;
  border-radius:2px;
  padding: 4px;
  color:#2E3136;
  
}
.color7_1{
  /*background-color: rgba(52, 56, 91, 0.9);*/
  background-color:#F3D6CE;
  color:#2E3136;
  
}
.color8{
  /*background-color: rgba(52, 56, 91, 0.9);*/
  background-color:#E4F1EE;
  border: 0px;
  border-radius:2px;
  padding: 4px;
  color:#2E3136;
  
}
.color9{
  /*background-color: rgba(52, 56, 91, 0.9);*/
  background-color:#FCF4DD;
  border: 0px;
  border-radius:2px;
  padding: 4px;
  color:#2E3136;
  
}
.color10{
  /*background-color: rgba(52, 56, 91, 0.9);*/
  background-color:#52b2cf;
  border: 0px;
  border-radius:2px;
  padding: 4px;
  color:#2E3136;
  
}
.color10_1{
  /*background-color: rgba(52, 56, 91, 0.9);*/
  background-color:#52b2cf;
   color:#2E3136;
  
}
.color11{
  /*background-color: rgba(52, 56, 91, 0.9);*/
  background-color:#F2A490;
 
  color:#FFFFFF;
  
  
}
.cfont1{
  color:#013d5a;
}
#div2 {
 
  background-color: white;
  width: 200px;
  height: 100px;
  position: relative;
  top: 140px;
  left: 20px;
  padding: 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 12px;
  opacity: 0.4;
}
#div1 {
  
  position: relative;
  left: 50px;
  padding: 20px;
 
  width: 200px;
  height: 100px;
  
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
  padding: 14px 16px;
}

li a {
  display: block;
  
  text-align: center;
  
  color:#534145;
  text-decoration: none;
}

li a:hover:not(.active) {
  
  color:#111;
}

.active {
  background-color: #04AA6D;
}
.style1{
  color:#FFFFFF;
  font-weight: bold;
  
}
.style2{
  color:#ffffff;
  font-weight: bold;
  vertical-align: middle;
  
}
span a {
  display: block;
  
  text-align: center;
  color:#ffffff;
  /*color:#534145;*/
  
  text-decoration: none;
}

span a:hover:not(.active) {
  
  color:#E7E7E7;
}
.table1 {
  width: 100%;
  border-collapse: collapse;
}
.text1{
	 text-align:right;
  
	}
 
.text2{
	 text-align:center;
	}
.text3{
	font-size:14px;
	font-weight:normal;
	 
	}
  
.textbox_transparent{
  background-color:transparent;
  border: 0px;
}
.th1 {
	position: sticky;
	top:-1px;
	background-color:#DEEDF0;

 color:#354259;

}	
.table-wrapper{
  max-height: 400px;
 /* overflow-y: scroll;*/
  
  }
.table-wrapper{
max-height: 100%;


}
.outer-wrapper{
  box-shadow: 0px 0px 5px #87A7B3;
  border-radius:0px;

}
.sticky{
 
  position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 30px;
    z-index: 9999; /* ตั้งค่า z-index เพื่อให้อยู่ด้านหน้า */
  }