/*--------------------------------------------- start embed font ---------------------------------------------*/

@font-face {
  font-family: kanit-regular;
  src: url("/regc-app/javax.faces.resource/fonts/Kanit-Regular.ttf.xhtml?ln=primefaces-spark") format('truetype');
}

@font-face {
  font-family: kanit-medium;
  src: url("/regc-app/javax.faces.resource/fonts/Kanit-Medium.ttf.xhtml?ln=primefaces-spark") format('truetype');
}

@font-face {
  font-family: kanit-semibold;
  src: url("/regc-app/javax.faces.resource/fonts/Kanit-SemiBold.ttf.xhtml?ln=primefaces-spark") format('truetype');
}

/*--------------------------------------------- end embed font ---------------------------------------------*/

html , body, div, p, h1, h2, h3, ul, ol, li{
	margin:0;
	padding:0;
	font-family:"kanit-regular", "tahoma";
}

body{
	background:#ffffff;
}

img { 
	border: 0; 
}

.clear{
	clear: both;
	line-height:0;
	height:0;
}

/*---------------------------------------------------------------------------------------*/

.font-purple{
	color:#602d90;
}

.font-orange{
	color:#f7a51b;
}

/*---------------------------------------------------------------------------------------*/

.wrapper{
	width:100%;
	height:100%;
}

.container{
	width:726px;
	margin-left:auto;
	margin-right:auto;
}

#header{
	background: url("/regc-app/javax.faces.resource/images/bg-login-header.png.xhtml")  repeat-x;
	background-position:0 86px;
	height:111px;
	font-family: "kanit-medium";
	font-size:20px;
	line-height:25px;
	text-align:center;
}

#header .container{
	padding-top:25px;
}

#logo, #sys-name{
	display:inline-block;
}

#logo{
	vertical-align:top;
}

#sys-name{
	text-align:left;
}

#banner{
	background: url("/regc-app/javax.faces.resource/images/bg-login-banner.png.xhtml")  repeat-y;
	text-align:center;
	background-position:center;
}

#banner .container{
	background: url("/regc-app/javax.faces.resource/images/login-banner.png.xhtml")  no-repeat;
	background-position:center;
	height:269px;
}

#content{
	width:100%;
	padding-bottom:20px;
}

#login-box{
	width:45%;
	padding:15px;
	margin-left: auto;
	margin-right: auto;
}

#login-head{
	font-family:"kanit-semibold";
	font-size:17px;
	color:#72598f;
	border-bottom: 2px solid #72598f; 
	padding:3px 10px;
}

#login-head i{
	font-size:20px;
}

#login{
	padding:18px 10px 10px;
	color:#464646;
	font-size:14px;
	font-family:"kanit-regular", "tahoma";
	height: 126px;
}

ul{
	list-style-type: none;
}

li {
  padding-left: 10px;
  padding-bottom: 5px;
}

li::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f013";
  display: inline-block;
  margin-left: -20px;
  width: 20px;
  color:#b099cb;
}

#login{
	font-size:15px;
}

.login-text{
	width:70px;
	display:inline-block;
}

.ui-inputfield{
	border:0;
	background-color:#d5e9f7;
	color:#464646;
	font-size:14px;
	font-family:"kanit-regular", "tahoma" !important;
	padding:5px !important;
	margin:0 0 16px 0;
	width:200px;
	border-radius: 0;
}

.ui-inputfield.ui-state-hover, .ui-inputfield.ui-state-focus{
	border:0;
	color:#464646 !important;
	background-color: #F9FBFC;
}

.ui-button{
	background: url("/regc-app/javax.faces.resource/images/btt-login2.png.xhtml")  repeat-x;
	text-decoration:none;
	width:100%;
	display:block;
	line-height:32px;
	border:0;
	border-radius:8px;
	text-align:center;
	box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
}

.ui-button-text{
	background: none;	
	font-family:"kanit-semibold";
	font-size:16px;
	color:#fff;
}

.ui-button-text-only .ui-button-text{
	padding:0 !important;
}

.ui-button.ui-state-hover .ui-button-text, .ui-buttonset .ui-state-hover .ui-button-text{
	background:none !important;
}

.link{
	color:#1e85ab;
	font-family:"kanit-semibold";
	font-size:14px;
	text-decoration:none;
	display:block;
	text-align:right;
	padding-right:10px;
}

#footer{
	color:#4c4652;
	text-align:center;
	font-size:14px;
	font-family:"kanit-regular", "tahoma";
}

/*----------------------------------------------------------------------- */

@media screen and (max-width: 767px){

	.container{
		width:100%;
		margin-left:auto;
		margin-right:auto;
	}

	#header{
		background: url("/regc-app/javax.faces.resource/images/bg-login-header.png.xhtml")  repeat-x;
		background-position:0 110px;
		height:135px;
		font-size:16px;
		line-height:20px;
		text-align:center;
	}

	#header .container{
		padding-top:17px;
	}

	#logo, #sys-name{
		display:block;
	}

	#logo{
		padding-bottom:10px;
	}

	#sys-name{
		text-align:center;
	}

	#banner .container{
		height:240px;
		background-size:contain
	}

}

/*----------------------------------------------------------------------- */

@media screen and (max-width: 660px){
	
	#content{
		padding-bottom:0;
	}

	#content .container{
		padding:10px;
		width:calc(100% - 20px);
	}

	#login-box{
		width:calc(100% - 30px);
		float:none;
	}

	.login-text{
		display:block;
	}

	.ui-inputfield{
		width:calc(100% - 10px);
	}

	#login{
		height:auto;
	}

	#footer span{
		display:block;
	}

}

/*----------------------------------------------------------------------- */


@media screen and (max-width: 525px){
	
	#header{
		background:transparent;
	}

	#banner{
		display:none;
	}

}