@charset "utf-8";
/* CSS Document */

@font-face {
    font-family:'PSL162';
    src: url('../fonts/PSL162.eot');
    src: url('../fonts/PSL162.eot?#iefix') format('embedded-opentype'),
         url('../fonts/PSL162.woff') format('woff'),
         url('../fonts/PSL162.ttf') format('truetype'),
         url('../fonts/PSL162.svg#thaisans_neueregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family:'thaisans_neueregular';
    src: url('../fonts/thaisansneue-regular-webfont.eot');
    src: url('../fonts/thaisansneue-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/thaisansneue-regular-webfont.woff') format('woff'),
         url('../fonts/thaisansneue-regular-webfont.ttf') format('truetype'),
         url('../fonts/thaisansneue-regular-webfont.svg#thaisans_neueregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body{
	margin:0px;
	padding:0px;	
	font-family:Tahoma, Geneva, sans-serif;
	background:url("../images/bg2.jpg") no-repeat center top fixed #fff ;
}

a:link {text-decoration:none; color:#FFF;  }
a:hover {text-decoration:none; }
img{ max-width:100% ; background-size:100% auto; }
.wrapper{ width:100%; height:auto; margin:0 auto; overflow:hidden;}

.login-box{
	max-width: 600px;
    height: auto;
    background: #d92a75;
    padding-bottom: 0px;
    margin: auto;
    margin-top: 90px;
    margin-bottom: 30px;
    text-align: center;
    color: #FFF;
}
.sub-box{ width:85%; height:auto; overflow:hidden; display:block; margin:10px auto; text-align:left; font-size:20px;}
h.a1{font-size:50px; color:#ffff; font-family: 'PSL162'; }/* topic  text */
.input-field{
	display: block;
	top:30px;	
	margin:10px auto;
	width:100%;
	background: #fff;
	border:1px solid #ff8a9a;
	color:grey;
	padding: 8px;	
	font-size:20px;
	text-align:left;
}
.input-code{
	display: block;
	top:30px;	
	margin-bottom:10px;
	width:220px;
	background: #fff;
	border:1px solid #ff8a9a;
	color:black;
	padding: 8px;	
	font-size:20px;
	text-align:left;
	
}
.input-file{
	color:white;
}
.row{
	width: 160%;
}

.select-field{
	display: block;
	top:30px;	
	margin:10px auto;
	width:20%;
	background: #fff;
	
	color:grey;
	padding: 8px;	
	font-size:20px;
	text-align:center;
	margin-right: 10px;
	float: left;
}
.input-fieldgrey{
	display: block;
	top:30px;	
	margin:10px auto;
	width:100%;
	background: #ddd;
	border:1px solid #ff8a9a;
	color: grey;
	padding: 8px;	
	font-size:20px;
	text-align:left;
}
.input-area_address{
	display: block;
	top:30px;
	color:grey;
	margin:5px auto;
	width:95%;
	height:150px;
	background: #fff;
	padding: 10px;	
	font-size:18px;
	overflow: auto;
}
.input-area{
	display: block;
	top:30px;
	margin:10px auto;
	width:95%;
	height:400px;
	background: #fff;
	border:1px solid #ff8a9a;
	color:#d92a75;
	padding: 10px;	
	font-size:12px;
	text-align:justify;
	overflow: auto;
}



.input-areagrey{
	display: block;
	top:30px;
	color:grey;
	margin:5px auto;
	width:95%;
	height:150px;
	background: #ddd;
	padding: 10px;	
	font-size:18px;
	overflow: auto;
}
.select-fieldgrey{
	display: block;
	top:30px;	
	margin:10px auto;
	width:20%;
	background: #ddd;
	
	color:grey;
	padding: 8px;	
	font-size:20px;
	text-align:center;
	margin-right: 10px;
	float: left;
}
.approve-area{
	display: block;
	top:30px;
	margin:10px auto;
	width:95%;
	/*height:100px;*/
	background: #cefdce;
	border:1px solid DarkGreen;
	color: DarkGreen;
	padding: 10px;	
	font-size:20px;
	text-align:center;
	overflow: auto;
	vertical-align: middle;
}
.reject-area{
	display: block;
	top:30px;
	margin:10px auto;
	width:95%;
	/*height:100px;*/
	background: #ffccd4;
	border:1px solid DarkRed;
	color:DarkRed;
	padding: 10px;	
	font-size:20px;
	text-align:center;
	overflow: auto;
	vertical-align: middle;
}
.confirm-area{
	display: block;
	top:30px;
	margin:10px auto;
	width:95%;
	/*height:100px;*/
	background: #d8f0f3;
	border:1px solid MidnightBlue;
	color: MidnightBlue;
	padding: 10px;	
	font-size:20px;
	text-align:center;
	overflow: auto;
	vertical-align: middle;
}
.bt {
    width: 200px;
    height: auto;
    padding: 10px;
    overflow: hidden;
    border-radius: 30px;
    background: #f6ff00;
    font-size: 18px;
    font-weight: bold;
    color: #d92a75;
    text-align: center;
    box-shadow: 2px 2px 5px #89023c;
    cursor: pointer;
}
.bt:hover { opacity:0.8; }

.red-star {
    color: #9D0606;
	vertical-align: text-bottom;
	font-size: 15px;
	margin-left: 5px;
	font-weight: bold;
}

.input-note {
	font-size: 12px;
    font-weight: 500;
    color: white;
}




a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;} 
a.tooltip span {
    z-index:10;display:none; padding:14px 20px;
    margin-top:-30px; margin-left:28px;
    width:300px; line-height:16px;
}
a.tooltip:hover span{
    display:inline; position:absolute; color:#111;
    border:1px solid #DCA; background:#fffAF0;}
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}
    
/*CSS3 extras*/
a.tooltip span
{
    border-radius:4px;
    box-shadow: 5px 5px 8px #CCC;
}


@media screen and (max-width: 768px){
.login-box{ width:100%; margin-top: 0px; }
}