.wrapper-form {	
	width:100%;
	margin:0 auto;
	position:relative;	
}

 .porlet-form{	
    border-radius: 5px;
	background: #ededed ;
    border: 1px solid #e3e3e3;    
	margin:12px 0px 12px 0px;
	/*text-shadow:0 1px 0 #FFF;	*/
	-webkit-border-radius:5px;
	-moz-border-radius:5px;		
	}
/*
select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea {
		width:100%;
		color:#333333;
		font:normal 12px Arial,Tahoma, Verdana, Helvetica, sans-serif;
		background:#ffffff;
		border-top: #bbbbbb  1px solid;
		border-left: #bbbbbb  1px solid; 
		border-right: #dddddd 1px solid;	
		border-bottom: #dddddd 1px solid;
		BORDER-COLLAPSE: collapse    border=1;
		-moz-box-sizing: border-box;   
		border-radius: 2px 2px 2px 2px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) inset;
	    margin: 2px 0px 2px 0px;
		padding: 2px 0px 2px 0px !important;
}
textarea:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
textarea:hover {
	border-color: rgba(82, 168, 236, 0.8) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(82, 168, 236, 0.6) !important;
    outline: 0 none ;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s !important;
}


input[type="text" ][disabled] 
{
	color:#656565;
	font:normal 12px Arial,Tahoma, Verdana, Helvetica, sans-serif;
	background:#ffffe5 !important;
	border-top: #ffd86f  1px solid !important;
	border-left: #ffd86f  1px solid !important; 
	border-right: #ffd86f 1px solid !important;	
	border-bottom: #ffd86f 1px solid !important;
	BORDER-COLLAPSE: collapse    border=1;
	-moz-box-sizing: border-box;   
    border-radius: 2px 2px 2px 2px !important;    
     margin: 2px 0px 2px 0px;
    padding: 3px 0px 3px 0px ;
	width:100%;	
}
*/
.input-form-auto {
		color:#333333 !important;
		background:#ffffff !important;
		margin: 2px 0px 2px 0px !important;
		padding:5px 0px 5px 0px !important;       
		border-top:#cccccc  1px solid !important;
		border-left:#cccccc  1px solid !important;
		border-right:#dddddd 1px solid !important;	
		border-bottom:#dddddd 1px solid !important;
		font:normal 12px Arial, Helvetica, sans-serif !important; 
		-moz-border-radius:3px !important;
		-webkit-border-radius:3px !important;
		border-radius:3px !important;
		 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) inset !important;
		/*box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF;*/
		-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) inset !important;
		-moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) inset !important;
}
.input-form {
		width:100% !important;
		color:#333333 !important;
		font:normal 12px Arial,Tahoma, Verdana, Helvetica, sans-serif;
		background:#ffffff !important;
		border-top: #dfdfdf  1px solid !important;
		border-left: #dfdfdf  1px solid !important; 
		border-right: #dfdfdf 1px solid !important;	
		border-bottom: #dfdfdf 1px solid !important;
		BORDER-COLLAPSE: collapse    border=1 !important;
		-moz-box-sizing: border-box !important;   
		border-radius: 2px 2px 2px 2px !important;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) inset !important;
	    margin: 2px 0px 2px 0px !important;
		padding: 5px 0px 5px 0px !important;
	}


/* new */
.form-input {
	clear:both;
	margin:12px 12px 12px 12px;
}
.form-input > p {
	font-size:13px;
	font-weight:300;
	font-family:Arial,Tahoma, Helvetica, sans-serif;
	padding:10px 0px 10px 0px;
}

.form-input > div.row-option {
	background:#cbecfb;
	padding:5px 5px 0px 5px;
}

.form-input > div.head-topic h4 {
	clear:both;
	color:#007dcf;
	font-family:Arial,Tahoma, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 300;
	margin-top:5px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    position: relative;
    text-transform: uppercase;
}
.form-input > div.head-topic h4 .head-line {
	-moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    background-color: #e7ab0a;
    bottom: 0;
    display: block;
    height: 4px;
    left: 0;
    margin: 0;
    position: absolute;
    /*width: 64px;	*/
}

.form-input > div.title-sub-form {
	font-size:20px;
  	font-weight:700;
  	font-family:Arial,Tahoma, Helvetica, sans-serif;;
	line-height: 32px;	
	color:#c46200;	
	padding:0px 10px 0px 0px;
}	

.form-input > div {
  clear: both;
  overflow: hidden;
  padding: 0px;
  margin: 0px 0px 5px 0px;
}

.form-input > div > label{
  width: 40%;
  float: left;  
  color:#333333;
  font-size:13px;
  font-weight:300;
  font-family:Arial,Tahoma, Helvetica, sans-serif;
}

.form-input > div > label.cm-required:after {
	 color: #ff0000;
    content: "*";
    font-size: 130%;
    line-height: 1px;
    padding-right: 3px;
}
.form-input > div > label span.cm-required:after {
	 color: #ff0000;
    content: "*";
    font-size: 130%;
    line-height: 1px;
    padding-right: 3px;
}

.form-input > div > div {
  width: 60%;
  float: right;
  color:#007dcf;
  font-size:13px;
  font-weight:300;
  font-family:Arial,Tahoma, Helvetica, sans-serif;
}
.form-input > div > div {
	margin-bottom:5px;
	
}

/* chia 4 cot */
.form-input > div > label.col-100per{
  width: 100%;
  float: left;  
  color:#333333;
  font-size:13px;
  font-weight:300;
  font-family:Arial,Tahoma, Helvetica, sans-serif;
}
.form-input > div > label.col-100per span{
font-weight:bold; 
  padding-right:10px;
}

.form-input > div > label.col-25per{
  width: 25%;
  float: left;  
  color:#333333;
  font-size:13px;
  font-weight:300;
  font-family:Arial,Tahoma, Helvetica, sans-serif;
}
.form-input > div > label.col-25per span{
  float:right;
  padding-right:10px;
}
.form-input > div > label.col-25per span.cm-required:after {
	 color: #ff0000;
    content: "*";
    font-size: 130%;
    line-height: 1px;
    padding-right: 3px;
}

.form-input > div > div.col-25per {
  width: 25%;
  float: left;
  color:#007dcf;
  font-size:13px;
  font-weight:300;
  font-family:Arial,Tahoma, Helvetica, sans-serif;
}

.form-input > div > div.col-75per {
  width: 75%;
  float: left;
  color:#007dcf;
  font-size:13px;
  font-weight:300;
  font-family:Arial,Tahoma, Helvetica, sans-serif;
}
/* chia 4 cot */

.btn-blue {
	cursor:pointer;	
	font-size:13px;font-family:arial, helvetica, sans-serif; 
	padding: 3px 10px 3px 10px; 
	text-decoration:none;
	font-weight:bold;
	color: #ffffff;
	border:1px solid #0171bb;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;	 
	text-decoration:none;
	display:inline-block;	 
 	background-color: #0081cc; background-image: -webkit-gradient(linear, left top, left bottom, from(#0081cc), to(#0171bb));
    background-image: -webkit-linear-gradient(top, #0081cc, #0171bb);
    background-image: -moz-linear-gradient(top, #0081cc, #0171bb);
    background-image: -ms-linear-gradient(top, #0081cc, #0171bb);
    background-image: -o-linear-gradient(top, #0081cc, #0171bb);
    background-image: linear-gradient(to bottom, #0081cc, #0171bb);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#0081cc, endColorstr=#0171bb);
	
	}	
.btn-blue:hover {
	color: #ffffff;
	border:1px solid #0069b3;
  	background-color: #faf68f; background-image: -webkit-gradient(linear, left top, left bottom, from(#0171bb), to(#0069b3));
    background-image: -webkit-linear-gradient(top, #0171bb, #0069b3);
    background-image: -moz-linear-gradient(top, #0171bb, #0069b3);
    background-image: -ms-linear-gradient(top, #0171bb, #0069b3);
    background-image: -o-linear-gradient(top, #0171bb, #0069b3);
    background-image: linear-gradient(to bottom, #0171bb, #0069b3);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#0171bb, endColorstr=#0069b3);
}
.btn-yellow {
	cursor:pointer;	
	font-size:13px;font-family:arial, helvetica, sans-serif; 
	padding: 6px 20px 6px 20px; 
	text-decoration:none;
	font-weight:bold;
	color: #007dcf;
	border:1px solid #ffc826;
	 -webkit-border-radius: 20px;
	  -moz-border-radius: 20px;
	  border-radius: 20px;	 
	  text-decoration:none;
	  display:inline-block;	 
 	background-color: #fcde11; background-image: -webkit-gradient(linear, left top, left bottom, from(#fcde11), to(#ffcd00));
    background-image: -webkit-linear-gradient(top, #fcde11, #ffcd00);
    background-image: -moz-linear-gradient(top, #fcde11, #ffcd00);
    background-image: -ms-linear-gradient(top, #fcde11, #ffcd00);
    background-image: -o-linear-gradient(top, #fcde11, #ffcd00);
    background-image: linear-gradient(to bottom, #fcde11, #ffcd00);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#fcde11, endColorstr=#ffcd00);
	
	}	
.btn-yellow:hover {
	color: #f20607;
	border:1px solid #ffcd00;
    background-color: #faf68f; background-image: -webkit-gradient(linear, left top, left bottom, from(#ffc20e), to(#ffcd00));
    background-image: -webkit-linear-gradient(top, #ffc20e, #ffcd00);
    background-image: -moz-linear-gradient(top, #ffc20e, #ffcd00);
    background-image: -ms-linear-gradient(top, #ffc20e, #ffcd00);
    background-image: -o-linear-gradient(top, #ffc20e, #ffcd00);
    background-image: linear-gradient(to bottom, #ffc20e, #f3ed53);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffc20e, endColorstr=#ffcd00);
}

.btn-orange {
	cursor:pointer;	
	font-size:13px;font-family:arial, helvetica, sans-serif; 
	padding: 6px 20px 6px 20px; 
	text-decoration:none;
	font-weight:bold;
	color: #ffffff;
	border:1px solid #ff5700;
	 -webkit-border-radius: 2px;
	  -moz-border-radius: 2px;
	  border-radius: 2px;	 
	  text-decoration:none;
	  display:inline-block;	 
 	background-color: #ff6600; background-image: -webkit-gradient(linear, left top, left bottom, from(#ff7f00), to(#ff6600));
    background-image: -webkit-linear-gradient(top, #ff7f00, #ff6600);
    background-image: -moz-linear-gradient(top, #ff7f00, #ff6600);
    background-image: -ms-linear-gradient(top, #ff7f00, #ff6600);
    background-image: -o-linear-gradient(top, #ff7f00, #ff6600);
    background-image: linear-gradient(to bottom, #ff7f00, #ff6600);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ff7f00, endColorstr=#ff6600);
	
	}	
.btn-orange:hover {
	color: #ffffff;
	border:1px solid #ff5700;
    background-color: #ff7f00; background-image: -webkit-gradient(linear, left top, left bottom, from(#ff6600), to(#ff7f00));
    background-image: -webkit-linear-gradient(top, #ff6600, #ff7f00);
    background-image: -moz-linear-gradient(top, #ff6600, #ff7f00);
    background-image: -ms-linear-gradient(top, #ff6600, #ff7f00);
    background-image: -o-linear-gradient(top, #ff6600, #ff7f00);
    background-image: linear-gradient(to bottom, #ff6600, #ff7f00);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ff6600, endColorstr=#ff7f00);
}
.row-btn-r {
	clear:both;	
	margin:5px 0px 5px 0px;	
	width:100%;	
	text-align:right;
	
}
.row-btn-c {
	clear:both;	
	margin:0px 0px 0px 0px;	
	padding:5px 0px 5px 0px;
	width:100%;	
	text-align:center;
}
.row-btn-l {	
	margin:5px 0px 5px 0px;	
	width:100%;	
	text-align:left;
}

@media (max-width: 600px) {
  .form-input > div {
    margin: 0 0 5px 0; 
  }
  .form-input > div > label,
  legend {
	width: 100%;
    float: none;
    margin: 0 0 5px 0;
  }
  .form-input > div > div,
  .form-input > div > fieldset > div {
    width: 100%;
    float: none;
  }
  input[type=text],
  input[type=email],
  input[type=url],
  input[type=password],
  textarea,
  select {
    width: 100%; 
  }  

 /* chia 4 cot */
.form-input > div > label.col-25per{
 width: 100%;
    float: none;
    margin: 5px 0px 0px 0px;
}

.form-input > div > label.col-25per span{
  float:left;
  padding-right:10px;
}

.form-input > div > div.col-25per {
  width: 100%;
  float: left;
 
}

.form-input > div > div.col-75per {
  width: 100%;
  float: left;
 
}
/* chia 4 cot */ 

}
@media (min-width: 1200px) {
  .form-input > div > label,
	legend {
  	text-align: left;
  }
}

/* Grid */
.table-container
	{
	 width: 100%;
	 overflow-x: auto;
	 _overflow: auto;
	 margin:1em  0 1em 0;
	}
	
.table-container::-webkit-scrollbar
	{
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
	}
	
.table-container::-webkit-scrollbar-thumb
	{
	border-radius: 8px;
	border: 3px solid #fff;
	background-color: rgba(0, 0, 0, .3);
	}
	
table.tablegrid-view {	
	width:100%;	
    border-collapse:collapse;
	
	 }
table.tablegrid-view tr td {
	 padding:5px 5px 5px 5px;
	 font-size:13px;
	 font-weight:500;
	 font-family:Arial,Tahoma, Helvetica, sans-serif;
	 color: #202020;	 
	 border:1px solid #A6D3FF !important;	
}
table.tablegrid-view tr.row-odd td{
	 background:#ffffff;		
}
table.tablegrid_view tr.row-even td{
	 background:#f1f1f1;	 
}
table.tablegrid-view tr.row-odd:hover td {
    background:#c7edfc !important;
    cursor: pointer;
}
table.tablegrid-view tr.row-even:hover td {
    background:#c7edfc !important;
    cursor: pointer;
}

table.tablegrid-view tr.row-head td{ 
	 background: url(../data/bghead.png) repeat-x scroll 50% 50%;			
	 color:#000000;
	 font-family:Arial,Tahoma, Helvetica, sans-serif;
	 font-weight:700;
	 font-size:13px;
	 text-decoration:none;
	 padding:10px 4px 6px 6px 4px;	 
	 border-bottom: 1px solid #71d0ff !important;
}
table.tablegrid-view tr th{ 
	 background: url(../data/bghead.png) repeat-x scroll 50% 50%;			
	 color:#000000;
	 font-family:Arial,Tahoma, Helvetica, sans-serif;
	 font-weight:700;
	 font-size:13px;
	 text-decoration:none;
	 padding:10px 4px 6px 6px 4px;	 
	 border: 1px !important;
     border-color: #71d0ff !important;
     border-style:solid !important;
     text-align:center;
     padding-top: 5px;
}
table.tablegrid-view tr.row-head th{ 
	 background: url(../data/bghead.png) repeat-x scroll 50% 50%;			
	 color:#000000;
	 font-family:Arial,Tahoma, Helvetica, sans-serif;
	 font-weight:700;
	 font-size:13px;
	 text-decoration:none;
	 padding:10px 4px 6px 6px 4px;	 
	border-bottom: 1px solid #71d0ff !important;
}
table.tablegrid-view tr.row-odd td.link-control {	  
	  color:#ff0000;
	  font-family:Arial,Tahoma, Helvetica, sans-serif;
	  font-weight:700;
	  font-size:13px;
	  text-align:left;
	  }
	  
table.tablegrid-view tr.row-odd td.link-control a {	
	color: #ff0000;	
	text-decoration:none;
}

table.tablegrid-view tr.row-odd td.link-control a:hover{	
	color: #ff0000;	
	text-decoration:underline;
}

table.tablegrid-view tr.row-even td.link-control {	  
	  color:#ff0000;
	  font-family:Arial,Tahoma, Helvetica, sans-serif;
	  font-weight:700;
	  font-size:13px;
	  text-align:left;
	  }
	  
table.tablegrid-view tr.row-even td.link-control a {	
	color: #ff0000;	
	text-decoration:none;
}

table.tablegrid-view tr.row-even td.link-control a:hover{	
	color: #ff0000;	
	text-decoration:underline;
}

table.tablegrid-view tr.row-odd td.code-list {	  
	  color:#007dcf;
	  font-family:Arial,Tahoma, Helvetica, sans-serif;
	  font-weight:700;
	  font-size:13px;
	  text-align:left;
	  }	
table.tablegrid-view tr.row-even td.code-list {	  
	  color:#007dcf;
	  font-family:Arial,Tahoma, Helvetica, sans-serif;
	  font-weight:700;
	  font-size:13px;
	  text-align:left;
	  }		  
/*================= Paging======================*/
.pages {
 font: 100%/1.4 arial, helvetica, sans-serif;
    padding:0em 0em em 0em;
    margin: 0.8em 0;
    clear: left;
	float:right;
    
}
.pages a, .pages span {
	color:#000000;
    display: block;
    float: left;
    padding: 3px 8px;
    margin-right: 5px;
    border: 1px solid #fff;
    background: #fff;
}

.pages span.current {
    border: 1px solid #2E6AB1;
    font-weight: bold;
    background: #007dcf;
    color: #fff;
}

.pages a {
    border: 1px solid #78bdff;
    text-decoration: none;
}

.pages a:hover {
    border-color: #0174bf;
	background:#007dcf;
	color:#ffffff;
}

.pages a.nextprev {
    font-weight: bold;
}

.pages span.nextprev {
    color: #666;
}

.pages span.nextprev {
    border: 1px solid #ddd;
    color: #999;
}

.pages .nextprev-next {
    float: right;
}
/* Field requires alert */  
span .fieldRequired {
	color:#DD0000;
}
.fieldRequired {
	background-attachment:scroll;
	background-color:transparent;
	background-image:url("../images/required.gif");
	background-position:center;
	background-repeat:no-repeat;
	color:#DD0000;
	padding-bottom:0px;
	padding-left:8px;
	padding-right:5px;
	padding-top:0px;
}
/* ============  het div pages====================== */