.f10{font-size:10px;}
.f16{font-size:16px;}
.f18{font-size:18px;}
.f20{font-size:20px;}
.f23{font-size:23px;}
.f24{font-size:24px;}
.f25{font-size:25px;}
.f26{font-size:26px;}
.f28{font-size:28px;}
.f60{font-size:60px;}
.c_head,.hover-c_head:hover{color:#ffffff!important;background-color:#366473!important;}
.c_head2,.hover-c_head2:hover{color:#ffffff!important;background-color:#a6d493!important;}
.c_head3,.hover-c_head3:hover{color:#ffffff!important;background-color:#39306f!important;}
.border-c_head,.hover-border-orange:hover{border-color:#366473!important;}
body,h1,h2,h3,h4,h5,h6 {font-family: 'Kanit', sans-serif;}
body, html {
    height: 100%;
    color: #5f4b8b;
    line-height: 1.8;
}
.button1 { 
    color:#5f4b8b; 
    border: 2px solid #5f4b8b;
	background-color:#ffffff;
	padding: 8px 40px;
    font-size: 18px;
	border-radius: 30px;
}
.button:hover { 
	 background-color: #5f4b8b;
	 color: white;
}

/* Create a Parallax Effect */
.bgimg-1{
	background-image: url('img/bg3.png');
    background-repeat: no-repeat;
    background-size: cover;
}
.input_l {
    width: 100%;
    padding: 5px;
    margin: 1px 0;
    box-sizing: border-box;
    border: 3px solid #ccc;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
}

.input_l:focus {
    border: 3px solid #5f4b8b;
}
.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}
.font1{font-size:28px }
.font2{font-size:20px }
button:hover, button:focus{
	outline-style: none;
}
.font_l{
	color:#366473; 
}
.font_f{
	  font-size: 30px;
}
.font_16{
	  font-size: 20px;
}
.button_add { 
    color:#366473; 
    border: 2px solid #366473;
	background-color:#ffffff;
	padding: 4px 40px;
    font-size: 18px;
	border-radius: 30px;
}
.button_add:hover { 
	 background-color: #366473;
	 color: white;
}
table.minimalistBlack {
  border: 2px solid #5F4B8B;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}
table.minimalistBlack td, table.minimalistBlack th {
  border: 0px solid #5F4B8B;
  padding: 4px 4px;
}
table.minimalistBlack tbody td {
  font-size: 16px;
  color: #366473;
}
table.minimalistBlack thead {
    border-bottom: 3px solid #5F4B8B;
}
table.minimalistBlack thead th {
  font-size: 20px;
  font-weight: bold;
  color: #366473;
  text-align: left;
}
.input_a{
    width: 90%;
    padding: 3px;
    margin: 1px 0;
    box-sizing: border-box;
    border: 1px solid #ccc;
    outline: none;
}
.button_p { 
    color:#ffffff; 
    border: 2px solid #366473;
	background-color:#366473;
	padding: 3px 20px;
    font-size: 18px;
	border-radius: 5px;
}
.button_p:hover { 
	 background-color: #ffffff;
	 color: #000000;
}
.input_add{
    width: 100%;
    padding: 8px 20px;
    margin: 0px 0;
    box-sizing: border-box;
    border: 1px solid #ccc;
    outline: none;
	border-radius: 8px;
}
.form_container
{
	background:#e2e2e2;
	border:1px solid #dadada;
	margin:0 auto;
	text-align:left;
	border-radius: 5px;
	-webkit-border-radius: 5px 5px 5px 5px ;
	-moz-border-radius:5px 5px 5px 5px ;
}
.button_green { 
    color:#ffffff; 
    border: 2px solid #006600;
	background-color:green;
	padding: 4px 20px;
    font-size: 18px;
	border-radius: 10px;
}
.button_green:hover { 
	 background-color: #ffffff;
	 color: #000000;
}
.button_red { 
    color:#ffffff; 
    border: 2px solid #cc0033;
	background-color:red;
	padding: 4px 20px;
    font-size: 18px;
	border-radius: 10px;
}
.button_red:hover { 
	 background-color: #ffffff;
	 color: #000000;
}

.blueTable thead {
  background: #478396;
  background: -moz-linear-gradient(top, #75a2b0 0%, #598fa0 66%, #478396 100%);
  background: -webkit-linear-gradient(top, #75a2b0 0%, #598fa0 66%, #478396 100%);
  background: linear-gradient(to bottom, #75a2b0 0%, #598fa0 66%, #478396 100%);
  border-bottom: 1px solid #57A2BA;
}
.blueTable thead th {
  font-size: 18px;
  color: #FFFFFF;
}
.input_date{
    width: 20%;
    padding: 8px 20px;
    margin: 0px 0;
    box-sizing: border-box;
    border: 1px solid #ccc;
    outline: none;
	border-radius: 8px;
}