@charset "utf-8";

/* form */
.form-box {
	background:#FFF; /* For browsers that do not support gradients */
    /*background: -webkit-linear-gradient(#FFF, #EEE);  For Safari 5.1 to 6.0 */
    /*background: -o-linear-gradient(#FFF, #EEE);  For Opera 11.1 to 12.0 */
    /*background: -moz-linear-gradient(#FFF, #EEE);  For Firefox 3.6 to 15 */
    /*background: linear-gradient(#FFF, #EEE);  Standard syntax */
	border:1px solid #C1CFDB;
	border-radius:7px;
	padding:1px;
	margin:1.5em auto 2em;
}
.form-alt {
	background:#FFF;
	margin:1em auto 3em;
}
.form-content {
	text-align:left;
}
.form-box .form-content {
	/*border:1px solid #A8BCC1;*/
	border-radius:5px;
	text-align:left;
	padding:0.8em 1.5em 1em;
	background:#ECF1F2;
}
.form-content h2 {
	font-size:2em;
	font-weight:300;
	color:#0086B9;
	margin:0.4em 0 0.2em;
	z-index:1;
}
.form-content h3 {
	font-size:1.8em;
	color:#111;
	margin:0.5em 0 0.3em;
	z-index:1;
}
.form-content h4 {
	border-top:2px dashed #ECECFB;
	padding:1.2em 0 0.4em;
	margin-top:1.5em;
	font-size:1.2em;
	color:#333;
	z-index:1;
}
.form-content hr,
.details-content hr { width:calc(100% - 12px); border:none; background:none; border-top:2px dotted #96B4CB; height:0.5em; margin:1.5em 12px; }
.form-content .btn { z-index:2; }

form,
.form {
	padding:1px 0 2em;
	margin:0 auto;
}

@media only screen and (min-width: 600px){
	.form-content { font-size: calc(100% - 1px) }
}

.form-content .form-fields {
	display:flex; flex-direction:row; align-items:stretch; justify-content:left; flex-wrap:wrap;
	padding:0;
	margin:0 -10px;
}
.form-fields fieldset {
	border:none;
	padding: 0.5em 0;
	margin:0;
}
.form-fields fieldset,
.form-fields .form-line {
	padding-left:10px !important; 
	padding-right:10px !important;
}
.form-fields p.form-line,
.form-fields h1.form-line,
.form-fields h2.form-line,
.form-fields h3.form-line,
.form-fields h4.form-line,
.form-fields .fieldset1 { width:100%; }
.form-fields .fieldset2 { width:50%; }
.form-fields .fieldset3 { width:33.33%; }
.form-fields .fieldset4 { width:25%; }
.form-fields .fieldset5 { width:20%; }
.form-fields .fieldset6 { width:16.67%; }
.form-fields .fieldset7 { width:14.28%; }


.form-content fieldset .field-content { padding:0 10px; }

.form-content fieldset .label {
	display:inline-block;
	text-align:left;
	padding: 0.3em 4px 0.1em;
	color:#111;
	font-weight:700;
}
.form-content fieldset .label .txt-info { font-weight:400; font-size:0.8em; }

.form-content fieldset .value { display:inline-block; padding-left:0.5em; }

.form-content fieldset input[type=text],
.form-content fieldset input[type=password],
.form-content fieldset input[type=textbox],
.form-content fieldset input[type=number],
.form-content fieldset input[type=date],
.form-content fieldset input[type=email],
.form-content fieldset input[type=file],
.form-content fieldset .Input,
.form-content fieldset .input,
.form-content fieldset select,
.form-content fieldset textarea,
.form-content fieldset .Textarea,
.form-content fieldset .textarea,
.nicEdit-main,
.form-content .usrDob,
.form-content .txtDate {
	display:block;
	padding: 0.5em 1.5%;
	width:100%;
   
    background-color: #FFF;
    border: 1px solid #CACAD9;
    
	color:#000;
	font-size: 1.2em;
	text-align:left;
}
.form-content fieldset .Input { min-height:20px; color:#CCC; display:inline-block; }
.form-content fieldset .Textarea { min-height:8em; color:#CCC;}

.form-content fieldset .input,
.form-content fieldset .textarea { background:#EEE; box-shadow:none; min-height:39px; cursor:not-allowed; }
.form-alt .form-content fieldset div .input,
.form-alt .form-content fieldset div .textarea { box-shadow:inset 1px 1px 1px #CCC; }
.form-content fieldset .textBox {}
.form-content fieldset select {}
.form-content fieldset textarea,
.form-content fieldset .textarea { min-height:8em !important;}
.form-content fieldset .form-tick-row .label { float:left; width:95%; font-weight:400;}

.form-content fieldset p {
	padding: 0.1em 4px 0.3em;
	margin:0;
}
/* old
.form-content .checkbox {
	display:inline-block;
	margin:0 0.6em;
	width:auto !important;
	box-shadow:none;
}*/

.form-content fieldset .input .input-txt { 
	float:right;
}
.form-content fieldset .input .input-btn { 
	/*float:right;*/
	position: absolute;
	top: 0;
	right: 0;
}


/* New Checkbox */
.form-content fieldset .checkbox-row {
	display:flex;
	gap:1em;
	padding: 0.3em 4px;
}
.checkbox-row .checkbox-input {
  display: block;
  width: 1.4em;
  flex-basis: 1.4em;
  flex-grow: 0;
  flex-shrink: 0;
  padding: 0;
  cursor: pointer;
  font-size:1em !important;
  color:#575748 !important;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.checkbox-input input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
  padding:0 !important;
}
.checkbox-input .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 1.4em;
  width: 1.4em;
  background-color: #ECECFB;
  border:1px solid #9797A6;
  border-radius:0.1em;
}
.checkbox-input:hover input ~ .checkmark {
  background-color: #FFC;
  border:1px solid #FC6;
}
.checkbox-input input:checked ~ .checkmark {
  background-color:#0C0;
  border:1px solid #090;
}
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.checkbox-input input:checked ~ .checkmark:after {
  display: block !important;
}
.checkbox-input .checkmark:after {
	left: 0.4em;
    top: 0.15em;
    width: 0.5em;
    height: 0.85em;
    border: solid white;
    border-width: 0 0.2em 0.2em 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* radio buttons */
.form-radio-options 		{ display:block; padding:0.5em 0; }
.form-radio-option  		{ display:inline-block; margin-right:2.5em; padding-left:0.1em; }
.form-radio-option input 	{ margin-right:0.5em; }
.form-radio-option-txt		{}

/* New radio button ??? */
span.formradiotxt {
  display: block;
  padding-left:50px;
  z-index:1;
}
.label.form-radio-btn {
  display: block !important;
  position:absolute !important;
  top:4px;
  left:15px;
  padding: 0 !important;
  cursor: pointer !important;
  font-size:1em !important;
  color:#575748 !important;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index:2;
}
.form-radio-btn input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
  padding:0 !important;
}
.form-radio-btn .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #ECECFB;
  border:1px solid #9797A6;
  border-radius:50%;
}
.form-radio-btn:hover input ~ .checkmark {
  background-color: #FFC;
  border:1px solid #FC6;
}
.form-radio-btn input:checked ~ .checkmark {
  background-color: #ED3454;
  border:1px solid #E73857;
}
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.form-radio-btn input:checked ~ .checkmark:after {
  display: block !important;
}
.form-radio-btn .checkmark:after {
	left: 4px;
    top: 4px;
    width: 10px;
    height: 10px;
	background:#FFF;
	border-radius:50%;
}


/* radio options */
.form-content fieldset .form-radio-option {
	color:#000;
	font-size:1.1em;
	font-weight:700;
	padding-bottom:1em;
}
.form-content fieldset .form-radio-option input {
	display:inline-block;
    background:none;
    border: none;
	box-shadow: none;
    border-radius: 0;
	width:auto;
	padding:5px 0 0 0;
	margin:0.2em 0.3em 0;
}

/* Msg Box */
.form-content fieldset .msg-box { margin:0; }

/* Yes No option */
.form-content fieldset .options {
	padding:1em 0;
}
.form-content fieldset a.option {
	display:inline-block;
	padding:0.4em 0.8em;
	margin:0;
	border:5px solid #999;
	font-size:1.5em;
	text-decoration:none;
	color:#666;
	cursor:pointer;
} 
.form-content fieldset .option-yes {}
.form-content fieldset .option-no { margin-left:1em !important; } 
.form-content fieldset .option-yes.selected { color:#FFF; background:#090; border-color:#090; font-weight:700; }
.form-content fieldset .option-no.selected { color:#FFF; background:#F00; border-color:#F00; font-weight:700; }

.form-content fieldset a.option:hover { color:#000; border-color:#000; }
.form-content fieldset a.option.option-yes:hover { color:#090; background:#FFF; border-color:#090; }
.form-content fieldset a.option.option-no:hover { color:#F00; background:#FFF; border-color:#F00; }
.form-content fieldset a.option.option-on:hover { color:#009; background:#FFF; border-color:#009; }
.form-content fieldset a.option.option-off:hover { color:#606; background:#FFF; border-color:#606; }

.form-content .form-error .label,
.form-content .form-error .form-radio-option { color:#FF0000 !important; }
.form-content .form-error input,
.form-content input.form-error,
.form-content .form-error .input,
.form-content .form-error select,
.form-content .form-error textarea,
.form-content .form-error .textarea,
.form-error .nicEdit-main { /*background:#FFE8E8;*/ border-color:#D79D9D !important; }

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color:#AAA;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color:#DDD;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color:#DDD;
}

/* form button */
.form-content .form-btn,
.form-content p.form-btn {
	padding-top:1em;
	min-height:50px;
	padding-right:0.5em;
}
.form-content .required { float:left; }
.form-content button { float:right; }
.form-content button.float-none { float:none; }
.form-content button.btn-center { float:none; margin:0 auto; }
.form-content button.btn-full { display:block; float:none; width:100%; }

.form-content .asterisk { color:#007D84; }
.svg-asterisk { display:inline-block; height:1em; width:1em; background:url(../images/icon/asterisk.png) no-repeat center; background-size:contain; }

/* form cover */
.form-cover {
	display:none;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
    background:#CAD6D9;
	border: 1px dotted #999;
	z-index:2;
}
.form-box .form-cover {
    background:#CAD6D9;
	border: 4px solid #FFF;
}
.form-cover .lds-roller {
	/* see main.css -> .lds-roller */
	position:absolute;
	top:50%; left:50%;
	width:80px; height:80px;
	margin:-40px 0 0 -40px;
}
.form-cover .lds-roller div:after { background:#042974; }
.form-box .form-cover .lds-roller div:after { background:#fff; }

/* input file */
.form-content input.upload-file,
.form-content fieldset input[type=file] {
	border:none;
	box-shadow:none;
}
	
/* multiple file */
.file-input {
  display: flex;
  position: relative;
  align-items: center;
}
.file-input input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.file-input span {
  padding: 10px;
}

/* terms */
#termsBox {
	position:relative;
	padding: 5px;
	width:100%;
	margin:2em auto;
   
    background: #EEE;
    border: 1px solid #CACAD9;
    border: none;
	box-shadow: inset 1px 1px 1px #999;
    border-radius: 0.4em;
}
.form-box #termsBox { background:#FFF; }
#termsContent {
	position:relative;
	padding: 2em 1em;
	height:300px;
	overflow-y:scroll;
    
	color:#333;
	font-size: 0.9em;
	text-align:left;
}
#termsContent strong { font-size:calc(1em + 1px); color:#222; }

#termsBox ol,
#termsBox ul { padding-top:0.2em; padding-left:2em !important; line-height:130%; }
#termsBox ol li,
#termsBox ul li { padding-bottom:0.4em; padding-left:0.5em; }

#termsBox ol li ol { padding-top:0.2em; }
#termsBox ol li ol > li {}

/* payment methods 
#changePasswordForm,
#paymentMethodDetails .paymentMethodDetails {
	display:none;
}*/


/* Details Box */
.details-box {
	background:#FFF;
	border:5px solid #CAD6D9;
	padding:2px;
	margin:1.5em auto 2em;
}
.details-box .details-content {
	border:1px solid #A8BCC1;
	text-align:left;
	padding:1.2em 1.5em 1.2em;
	background:#F2F2F2;
}	
.details-content a.btn-right {
	background:#001A66 !important;
	border-color:#001A66 !important;
	color:#FFF !important;
	border-radius:2px;
    padding: 7px 13px 6px;
    font-size: 13px;
}
.details-content a.btn-right:hover {
    /*
	background: #F67A06 !important; 
	border-color:#F67A06 !important;
	color:#FFF !important;
	transition:linear 0.2s;
	*/
}
.details-fields h3 { font-size:1.4em; margin-bottom:0.6em; }
.details-fields h3:first-child { margin-top:0.7em; } 
.details-fields fieldset {
	border:none;
	padding: 0.3em 0;
	margin:0;
}
fieldset.display-value .label, 
.details-fields fieldset .label {
	display:inline-block;
	width:170px;
	color:#757584;
	font-weight:400;
	font-size:calc(1em - 2px);
	vertical-align:top;
}
.details-fields fieldset .img,
.details-fields fieldset .value,
.details-fields fieldset .textarea { display:inline-block; }
.details-fields fieldset .txt-info { display:inline-block; padding-left:2em; padding-top:2px; font-size:calc(1em - 4px) !important; }
.details-fields .btn-row { padding:1em 0 1em 170px !important; margin:0; }
.details-fields .value .value-action-btn { display:inline-block; padding-left:1.5em; }

.details-fields fieldset.display-img .img		{ max-width:300px; }
.details-fields fieldset.display-img .img img 	{ display:block; width:100%; }
.details-fields fieldset.display-img .txt-info 	{ /*display:block; padding-left:0;*/ vertical-align:top; }


@media only screen and (max-width:1024px){
}
@media only screen and (max-width:900px){
	.form-box {}
	.form-box .boxContent { padding:0.5em 1.4em 0.7em; }
	.form-box .form-content { padding:0.5em 1.3em 0.7em; }
	
	.form-content fieldset .label { padding-left:3px; }

	#termsBox ol,
	#termsBox ul { padding-left:1.8em !important; }
	#termsBox ol li,
	#termsBox ul li { padding-left:0.4em; }
}

@media only screen and (max-width:700px){
	.form-box { /*border-width:5px;*/ }
	.form-box .form-content { padding:0.5em 1.2em 0.7em; }

	.form-content .form-fields { margin:0 -7px; }
	.form-fields fieldset,
	.form-fields .form-line { 
		padding-left:7px !important; 
		padding-right:7px !important;
	}
	.form-content .fieldset2,
	.form-content .fieldset3 { width:100%; }

	#termsBox ol,
	#termsBox ul { padding-left:1.6em !important; }
	#termsBox ol li,
	#termsBox ul li { padding-left:0.3em; }
}
@media only screen and (max-width:600px){
	/* form */
	.form-box {
		background:none;
		border:none;
		padding:0;
		margin:1em auto 2em;
	}
	.form-box .form-content {
		border:none;
		padding:1em 0;
		background:none;
	}
	.form-content h2 { font-size:1.9em; }

	.form-content .form-fields { margin:0 -5px; }
	.form-fields fieldset,
	.form-fields .form-line { 
		padding-left:5px !important; 
		padding-right:5px !important;
	}
	.form-content .fieldset4 { width:100%; }
	
	/* alt login btn */
	.form-content #btnLogin,
	.form-content #altLogin { text-align:center; }
	.form-content button,
	.form-content #altLogin a {
		margin:0;
		min-width:150px;
	}
	
	/* form button */
	.form-content .required,
	.form-content button { float:none; }
	.required { display:block; padding:0.2em 0 1.2em; }
	
	#termsBox ol,
	#termsBox ul { padding-left:1.4em !important; }
	#termsBox ol li,
	#termsBox ul li { padding-left:0.2em; }
}
@media only screen and (max-width:550px){
	.form-content .form-fields { margin:0; }
	.form-fields fieldset,
	.form-fields .form-line { 
		padding-left:0 !important; 
		padding-right:0 !important;
	}
	.form-content .fieldset5,
	.form-content .fieldset6,
	.form-content .fieldset7 { width:100%; }
	.form-content fieldset .label { padding-left:2px; }
	
	/* Form Details -> Table */
	.formDetails {}
	.formDetails table { display:block; line-height:140%; }
	.formDetails table tr { display:block; padding:0.1em 0 1em; }
	.formDetails table tr td { display:block; }
	.formDetails table tr td.label { padding:0 0 0.1em; }
	.formDetails table tr td.value { padding:0; color:#000; }
}
@media only screen and (max-width:450px){
	.form-content h2 { font-size:1.8em; }
	
	#termsBox ol,
	#termsBox ul { padding-left:1.2em !important; }
	#termsBox ol li,
	#termsBox ul li { padding-left:0.1em; }
}
@media only screen and (max-width:374px){
}