@font-face {
  font-family:"Gotham A";
  src: url("../fonts/Gotham/Gotham-Book.ttf") format("truetype");
}


html, body {
	font-family: "Gotham A", "Gotham B", Arial, Helvetica, "微軟正黑體", "Microsoft JhengHei", "Heiti TC", "LiHei Pro", "新細明體", PMingLiU, sans-serif;
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #ffffff;	
	font-style: normal;
    font-weight: 400;
    color: #000000;
    letter-spacing: 0.03em;
    line-height: 1.3em;
    font-size: 16px;
}

a {
  text-decoration: none;
  color: #6f99a5;
}

p a {
	color: #AAAAAA;
	text-decoration: none;
}

/* remove up down arrow for number */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* remove up down arrow for number */
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* Begin 210219 */
.formStyleMobileReset, 
input[type="text"],
input[type="email"],
input[type="password"], 
input[type="number"], 
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  width: 100%;
  height: 40px;
  border: 2px solid;
  border-color: rgba(111, 153, 165, 0.3) ;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4D6F99A5', endColorstr='#4D6F99A5');
  padding: 5px 10px;
  font-size: 13px;
  color: #999999;
  outline: 0;
  -moz-transition: all, 0.25s, ease-in-out;
  -o-transition: all, 0.25s, ease-in-out;
  -webkit-transition: all, 0.25s, ease-in-out;
  transition: all, 0.25s, ease-in-out;
}

.formStyleMobileReset:hover, 
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover, 
input[type="number"]:hover, 
select:hover {
  border-color: rgba(111, 153, 165, 0.5) ;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#806F99A5', endColorstr='#806F99A5');
}

.formStyleMobileReset:focus, 
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus, 
input[type="number"]:focus, 
select:focus {
  border-color: #6f99a5 ;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF6F99A5', endColorstr='#FF6F99A5');
}

.formStyleMobileSearchReset, 
input.searchSubmit[type="submit"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  width: 20px;
  height: 20px;
  line-height: 100%;
  padding: 0;
  font-size: 0;
  text-indent: -999px;
  color: transparent;
  border: 0px;
  background-color: transparent;
  cursor: pointer;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"] {
  font-family: "Gotham A", "Gotham B", Arial, Helvetica, "微軟正黑體", "Microsoft JhengHei", "Heiti TC", "LiHei Pro", "新細明體", PMingLiU, sans-serif;
  font-style: normal;
  font-weight: 400;
  color: #999999;
}

select {
  font-family: "Gotham A", "Gotham B", Arial, Helvetica, "微軟正黑體", "Microsoft JhengHei", "Heiti TC", "LiHei Pro", "新細明體", PMingLiU, sans-serif;
  font-style: normal;
  font-weight: 400;
  color: #999999;
  background-image: url("../img/uiSelectArrowM2X.png");
  background-repeat: no-repeat;
  background-size: 40px auto;
  background-position: 99% center;
  font-size: 13px; 
  background-color: transparent; /* Prevent being grey in android browser */
}

textarea {
  resize: none;
  padding: 0px;
  border: 0px;
  margin: 0px;
}

input:disabled, 
textarea:disabled {
  -webkit-text-fill-color: currentcolor; /* sets text fill to current color for safari */
  /*-webkit-text-fill-color: #919597;*/
  opacity: 1!important; /* correct opacity on iOS */
}


/* End 210219 */



.radio_span{
	height: 40px;
	line-height: 40px;
	vertical-align: top;
	display: inline-block;
}


.submit {

	display:inline-block;
	color:#ffffff;	
	font-size:15px;
	font-weight:bold;
	font-style:normal;
	
	width: 200px;
	display: block;
	margin: 0 auto;
	padding: 10px 0;
	border: 2px solid transparent !important;
    background-color: #9e254d;   
	
	text-align:center;
	text-decoration:none;
	
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	
	-moz-transition-property: all;
	-o-transition-property: all;
	-webkit-transition-property: all;
	transition-property: all;
	
	-moz-transition-duration: 0.7s;
	-o-transition-duration: 0.7s;
	-webkit-transition-duration: 0.7s;
	transition-duration: 0.7s;
		
}


.submit:hover {
	text-decoration:none;
	color:#ffffff;
    background-color: rgba(158, 37, 77, 0.5) !important;    
    border-color: rgba(158, 37, 77, 0.5) !important;    
}



.remk_eng{
	margin-left: 20px;
}
.required_field{
	color: red;
}

.check_label{
	vertical-align: middle;
	line-height: 20px;
	height: 30px;
	display: inline-block;
}


.p2 #country{
	width: 190px;
}
.p2 #state{
	width: 190px;
}

#agree{
	height: 15px;
	width: 15px;
	/*position: absolute;*/
	top: 8px;
}



.propertyIco {
  background-image: url("../img/property_icon.png");
  background-size: cover;
  background-repeat: no-repeat;
}

.btnReset {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 2px solid;
  border-color: rgba(111, 153, 165, 0.3) ;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4D6F99A5', endColorstr='#4D6F99A5');
  -moz-transition: all, 0.25s, ease-in-out;
  -o-transition: all, 0.25s, ease-in-out;
  -webkit-transition: all, 0.25s, ease-in-out;
  transition: all, 0.25s, ease-in-out;
  background-color: #FFFFFF;
  background-image: url("../img/uiForm.png");
  background-position: -140px -2px;
}


.survey_error_label,
.error_label
{
	vertical-align: top;
	padding-top:0px;	
	color: #9E254d;
	display:block;		
	margin-bottom:5px;
}

.error_label_small
{
	vertical-align: top;
	padding-top:0px;	
	color: #9E254d;
	display:block;		
	margin-bottom:5px;
	font-size:13px;
}


.loadingWrapper {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background-color: inherit;
	z-index: 9999;
}

.loadingInner {
	position: absolute;
	display: block;
	width: 70px;
	height: 70px;
	left: 50%;
	margin-left: -35px;
	top: 50%;
	margin-top: -35px;
	background: url("../img/loading.gif");
	background-size: 100% auto;
}


/* Begin Add 210217 */

.form-header-caption *,
label.section-header-caption
{
	color: #6f99a5;
	font-weight: bold;
}
label.section-header-caption-small
{
	color: #6f99a5;
	font-weight: bold;
	font-size: 11px;
}

.form-header-caption 
{
	border-bottom: 1px solid #d4e0e4;
}

.form-header-caption ul {
  list-style-position: inside;
  padding-left: 0;
}


.captchaImg * {
	vertical-align: top;	
}

.captchaImg span.errorType {
	display: inline-block;
	right: auto;
	bottom: 10px;
}

.captchaImg label[for=captchaInput] {
	margin-right: 10px;
}


p , label
{
	font-weight: 500;
	color: #292929;
}

p b, label b {
  font-weight: 1200;
} 

#banner-image {
	margin: 0 -15px; /* offset .container-fluid 's  padding to */
}

#banner-image img {
	/* max-height: 300px; */
}

#form-header #logo_nwc {
	max-height: 80px;
}

#form-header #logo_klub11 {	
	margin-top: 15%;
	max-height: 35px;
}

#form-footer #logo_csv {
	margin-top: 2.5rem;
	margin-bottom: 1rem;
}

#form-footer #logo_tam_nwd {
	margin-top: 1.5rem;
	margin-bottom: 1rem;
	max-width: 90%;
}

/* for Bootstrap screen side Small or lesser (<768px) */
@media (max-width: 767px){
	#form-footer #logo_csv ,
	#form-footer #logo_tam_nwd
	{
		margin-top: 2rem;
	}
}



/* End   Add 210217 */






/** Begin custom checkbox styles **/
/*   
	Sample Template :
	<label for="__THIS_IS_INPUT_ID__" class="checkboxWrapper">
		<input id="__THIS_IS_INPUT_ID__" class="checkItem" type="checkbox" name="__THIS_IS_INPUT_NAME__" value="VALUE_PASSED_WHEN_CHECKED">
		<span class="checkIco"></span>
		<span class="text">(Caption Text)</span>
	</label>
	
	Match the classes of above element to apply styles
*/

label.checkboxWrapper {
  position: relative;
  display: inline-block;
  *display: inline;
  *zoom: 1;
  cursor: pointer;
}

label.checkboxWrapper input[type="checkbox"] {
  display: none;
}

label.checkboxWrapper span.checkIco 
{
  position: absolute;
  display: block;
  width: 16px;
  height: 16px;
  top: 3px;
  left: 0px;
  background-image: url("../img/uiForm.png");
  background-position: 0px 0px;
}
label.checkboxWrapper:hover span.checkIco 
{
  background-image: url("../img/uiForm.png");
  background-position: 0px -16px;
}

/* For style of checked input */

/*label.checkboxWrapper span.checkIco.selected ,*/
label.checkboxWrapper input:checked ~ .checkIco
{
  background-image: url("../img/uiForm.png");
  background-position: 0px -32px;
}

/*label.checkboxWrapper:hover span.checkIco.selected */
label.checkboxWrapper:hover input:checked ~ .checkIco
{
  background-image: url("../img/uiForm.png");
  background-position: 0px -32px;
}

span.text {
  position: relative;  
  text-align: left;
  color: #000000;
  font-size: 13px;  
}

/* Check Box Text , Hyperlink in Text and link on hover */
label.checkboxWrapper span.text {
  position: relative;  
  margin-left: 30px;
  text-align: left;
  color: #000000;
  font-size: 13px;  
}

label.checkboxWrapper span.text a {
  text-decoration: none;
  color: #6f99a5;
}

label.checkboxWrapper span.text a:hover {
  text-decoration: underline;
}

/** End custom checkbox styles **/




/** Begin custom radio styles **/
/*   
	Sample Template :	
	
	<div class="radioOuterWrapper">
		<label class="radioWrapper" >...</label> <!-- 1 to n items -->
	</div>
	
	<!-- .radioWrapper -->
	<label for="__THIS_IS_INPUT_ID__" class="radioWrapper">
		<input id="__THIS_IS_INPUT_ID__" class="radioItem" type="radio" name="__THIS_IS_INPUT_NAME__" 
		value="VALUE_PASSED_WHEN_CHECKED" />
		<span class="checkIco"></span>
		<span class="text">(Caption Text)</span>
	</label>
	
	
	Match the classes of above element to apply styles
*/

 /*
  Amend 220915 : Remove ".radioOuterWrapper" hierarchy  in CSS styles
  eg:  
  from : .radioOuterWrapper label.radioWrapper
  to   : label.radioWrapper
  */

/* .radioOuterWrapper { } */

label.radioWrapper {
  position: relative;
  *zoom: 1;
  margin-right: 10px;
  cursor: pointer;
}

label.radioWrapper input[type="radio"] {
  display: none;
}

label.radioWrapper span.checkIco 
{
  position: absolute;
  display: block;
  width: 16px;
  height: 16px;
  top: 3px;
  left: 0px;
  background-image: url("../img/uiForm.png");
  background-position: -16px 0px;
}

label.radioWrapper:hover span.checkIco 
{
  background-image: url("../img/uiForm.png");
  background-position: -16px -16px;
}

/*.radioOuterWrapper label.radioWrapper span.checkIco.selected */
label.radioWrapper input:checked ~ .checkIco
{
  background-image: url("../img/uiForm.png");
  background-position: -16px -32px;
}

/*.radioOuterWrapper label.radioWrapper:hover span.checkIco.selected */
label.radioWrapper:hover input:checked ~ .checkIco
{
  background-image: url("../img/uiForm.png");
  background-position: -16px -32px;
}

label.radioWrapper span.text {
  position: relative;
  margin-left: 25px;
  text-align: left;
  color: #000000;
  font-size: 13px;
}

label.radioWrapper span.text a {
  text-decoration: none;
  color: #6f99a5;
}

label.radioWrapper span.text a:hover {
  text-decoration: underline;
}



/** End custom radio styles **/

/*
  Remarks 220624 : avoid to set "display" attribute to the 
  checkboxWrapper / radioWrapper 's label / span text 
  ( and other display label / span text )
  since this form is now multilingual and should be controlled by 
  " body *.lang-en " styles in the form pages
*/




/** Begin ".errorType" (Validation Result Icons) styles **/


span.errorType {
  position: absolute;
  display: block;
  bottom: 0px;
}

span.errorType .passIco,
span.errorType .errorIco {
  position: absolute;
  display: block;
  width: 30px;
  height: 30px;
  top: 0px;
  left: 0px;
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  opacity: 0;
  -moz-transition: all, 0.25s, ease-in-out;
  -o-transition: all, 0.25s, ease-in-out;
  -webkit-transition: all, 0.25s, ease-in-out;
  transition: all, 0.25s, ease-in-out;
}

span.errorType .passIco.selected,
span.errorType .errorIco.selected {
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

span.errorType .passIco {
  background-image: url("../img/uiForm.png");
  background-position: -108px 0px;
}

span.errorType .errorIco {
  background-image: url("../img/uiForm.png");
  background-position: -108px -30px;
}

span.errorType {
  width: 30px;
  height: 30px;
  right: -40px;
  bottom: 5px;
}

@media (max-width: 767px){ 	
	span.errorType {
	  right: 0px;	  
	}
}


/* 	Amend 210219 
	Display Pass/Error Icon on top of question div
	instead of bottom if parent element (div) has set
	below "data-input-type' attributes
*/
[data-input-type="checkbox"] span.errorType ,
[data-input-type="radio"] span.errorType
{
  bottom: 0px;
  top: -5px;
}


span.errorType {
	top: -5px;
}

.captchaImg span.errorType {
	top: inherit; /* cancel above top: -5px; for captcha error icon */
}


/** End ".errorType" (Validation Result Icons) styles **/



/* Begin Added 210928 - Uploader Styles */


/* line 321, scss/form.scss */
.uploadItem {
  position: relative;
  float: left;
  width: 100%;
  /*height: 40px;*/
  padding: 0px;
}
/* line 329, scss/form.scss */
.uploadItem.hide {
  display: none;
}
/* line 334, scss/form.scss */
.uploadItem .uploadInputField {
  position: relative;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0px 40px;
}
/* line 340, scss/form.scss */
.uploadItem .uploadInputField .innerInputWrapper {
  position: relative;
}
/* line 344, scss/form.scss */
.uploadItem .uploadInputField .innerInputWrapper input.uploadPath {
  border: 0px;
  padding: 0px;
  background-color: transparent;
  font-size: 12px;
  color: #000000;
}
/* line 355, scss/form.scss */
.uploadItem .uploadBtn {
  position: absolute;
  display: block;
  width: 40px;
  height: 40px;
  top: 50%;
  margin-top: -20px;
  left: 0px;
  overflow: hidden;
}
/* line 367, scss/form.scss */
.uploadItem input.fileUpload {
  opacity: 0;
  filter: Alpha(opacity=0);
  z-index: 10;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}
/* line 379, scss/form.scss */
.uploadItem .fileUpload {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0;
  border: 0;
  cursor: pointer;
  font-size: 0;
}
/* line 392, scss/form.scss */
.uploadItem .fileUpload object {
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
/* line 402, scss/form.scss */
.uploadItem .uploadify-button {
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 0px;
  margin: 0px;
  border: 0px;
  background: none;
}
/* line 413, scss/form.scss */
.uploadItem .uploadify-button-text {
  display: none;
}
/* line 418, scss/form.scss */
.uploadItem .uploadify-queue {
  margin-bottom: 0px;
  display: none;
}
/* line 424, scss/form.scss */
.uploadItem .resetUpload {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 50%;
  margin-top: -20px;
  right: 0px;
  /*background: url("../images/common/icoUploadClose.png");*/
  background: url("../img/icoUploadClose.png");
  display: none;
}

/* Add. styles */

.uploadItem .uploadBtn .uploadBtnImg {
  position: relative;
  left: -15px;
  top: -5px;
}

.uploadItem .uploadInputField .innerInputWrapper input.uploadPath.uploadError {
  color: #9e254d;
}

/* End Added 210928 - Uploader Styles */

.disabled, [disabled], [readonly] {
  pointer-events:none;
  background:rgb(230, 230, 230);
}

h5 {
  font-weight: 1000;
}