@charset "utf-8";

/* form */
.formBox {
	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:10px solid #B3C8D9;
	padding:2px;
	margin:1.5em auto 2em;
}
.formAlt {
	background:#FFF;
	margin:1em auto 3em;
}
.form-content {
	text-align:left;
}
.formBox .form-content {
	border:1px solid #96B4CB;
	text-align:left;
	padding:0.6em 1.5em 0.8em;
	background:#EAF0F7;
}
.form-content h2 {
	font-size:1.4em;
	color:#000;
	padding:0.5em 0;
	z-index:1;
}
.form-content h3 {
	font-size:1.3em;
	color:#111;
	padding:0.4em 0;
	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 { border:none; background:none; border-bottom:2px dotted #96B4CB; margin:1em 0.5em 1.5em; }
.form-content .btn { z-index:9999; }

form,
.form {
	padding:1em 0;
	margin:0 auto;
	text-align:left;
}

@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: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 input[type=text],
.form-content fieldset input[type=textbox],
.form-content fieldset input[type=number],
.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 {
	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; }
.formAlt .form-content fieldset div .input,
.formAlt .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 .formTickRow label { float:left; width:95%; font-weight:400;}

.form-content fieldset .formColSpan2 input,
.form-content fieldset .formColSpan2 .input,
.form-content fieldset .formColSpan2 select {
	padding: 7px 3% 5px;
	width:100%;
}

.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;
	padding: 0.3em 4px;
}
label.checkbox-input {
  display: block;
  width: 2.2em;
  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.formradiobtn {
  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;
}
.formradiobtn input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
  padding:0 !important;
}
.formradiobtn .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #ECECFB;
  border:1px solid #9797A6;
  border-radius:50%;
}
.formradiobtn:hover input ~ .checkmark {
  background-color: #FFC;
  border:1px solid #FC6;
}
.formradiobtn input:checked ~ .checkmark {
  background-color: #ED3454;
  border:1px solid #E73857;
}
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.formradiobtn input:checked ~ .checkmark:after {
  display: block !important;
}
.formradiobtn .checkmark:after {
	left: 4px;
    top: 4px;
    width: 10px;
    height: 10px;
	background:#FFF;
	border-radius:50%;
}


/* radio options */
.form-content fieldset .radioOption {
	color:#000;
	font-size:1.1em;
	font-weight:700;
	padding-bottom:1em;
}
.form-content fieldset .radioOption 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;
}

/* 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 .optionYes {}
.form-content fieldset .optionNo { margin-left:1em !important; } 
.form-content fieldset .optionYes.selected { color:#FFF; background:#090; border-color:#090; font-weight:700; }
.form-content fieldset .optionNo.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.optionYes:hover { color:#090; background:#FFF; border-color:#090; }
.form-content fieldset a.option.optionNo:hover { color:#F00; background:#FFF; border-color:#F00; }
.form-content fieldset a.option.optionOn:hover { color:#009; background:#FFF; border-color:#009; }
.form-content fieldset a.option.optionOff:hover { color:#606; background:#FFF; border-color:#606; }

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

::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-content .formBtn,
.form-content p.formBtn {
	min-height:50px;
	padding-right:5px;
}

.form-content button { float:right; }

.form-content .asterisk { color:#C00; }
.form-content .required {}

.formCover {
	display:none;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
    background:#1083B2;
	border: 4px solid #FFF;
	z-index:999999;
}
.formCover .lds-roller {
	/* see main.css -> .lds-roller */
	position:absolute;
	top:50%; left:50%;
	width:50px; height:50px;
	margin:-25px 0 0 -25px;
}

.form-content input.uploadFile {
	border:none;
	box-shadow:none;
}

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

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

@media only screen and (max-width:900px){
	.formBox { border-width:7px; margin:1.3em auto 1.7em; /*padding:2px;*/ }
	.formBox .boxContent { padding:0.5em 1.4em 0.7em; }
}

@media only screen and (max-width:700px){
	.formBox { border-width:5px; margin:1.2em auto 1.5em; /*padding:2px;*/ }
	/*.formBox .boxContent { padding:0.5em 1.4em 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%; }
}
@media only screen and (max-width:600px){
	.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;
	}
	
	.required,
	#loginForm .required { float:none; margin:0 0 1.5em; }
}
@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 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:374px){
	.formBox { border-width:3px; margin:1em auto 1.2em; padding:1px; }
	.formBox .boxContent { padding:0.4em 1.2em 0.5em; }
}