/*---------------------------------
	Forms CSS
-----------------------------------*/
.Form {margin-top: 2rem;margin-bottom: 2rem;}
.Form ol {list-style:none;padding-left: 0;margin:auto;}
.Form p {margin:1rem auto;}
.Form ol li {margin-bottom: 0.3rem; position: relative;}
.Form b  {color: #d16565;display: inline-block;margin-left: 0.125rem;}
.Form input[type='text'],
.Form input[type='email'],
.Form input[type='url'],
.Form input[type='tel'],
.Form select,
.Form textarea
{
	width:100%;
	border: 1px solid #b0b2b4;
	padding:0.75rem 1rem; margin-bottom: 0.25rem;
	border-radius: 0.1875rem;
	line-height: 1.6;
}
.Form input[type='checkbox'],
.Form input[type='radio'] {
	height:1rem;
	width:1rem;
	position: relative;
	top:0.24rem;
	display: inline-block;
	margin-bottom: 0.35rem;	
}
.Form .formnote {margin-left: 0;margin-bottom: 1rem;}

/*---------------------------------
	Labels
-----------------------------------*/
.Form label {color:#255B91;}
.Form label.label, .Form li>label {display: block;margin-bottom: 0.25rem; margin-top: 0.5rem; padding-left: 0.05rem; font-size:0.8rem;}
.Form label input[type='checkbox'],
.Form label input[type='radio'] {
	margin-left: 1rem;
}
.Form input[type='checkbox']+label {margin-left: 0.5rem;}
.Form label+label {display:inline-block;margin-left: -1rem;margin-bottom: 0.2rem;}
.Form label.inline-block {display: inline-block;}


/*---------------------------------
	Fieldsets; checkbox list
-----------------------------------*/
.Form fieldset {margin: 0 0 1.5rem 0; padding-top: 1.5rem; padding-bottom: 1.5rem; background-color: #f0f0f2}
.Form>fieldset {padding-right: 5%; padding-left: 5%;}
.Form legend {display: block;text-align: center;background-color: #666; color:#FFF; padding:0.25rem 1.45rem 0.425rem; border-radius: 1rem}
.Form fieldset.checkboxlist  {padding:0.5rem;}

.Form .checkboxlist>div  {float:left; width:11rem;font-size:0.8rem;}
.Form .checkboxlist.widelabels>div  {width:18rem;}

/*---------------------------------
	Form submit section (buttons)
-----------------------------------*/
.Form .formSubmit {text-align: center;margin-bottom: 1rem;background: #dfdfdf;padding: 0.5rem 5%;margin-top: -1.6rem;border: 1px solid #c0c0c0;}
.Form .formSubmit input[type="submit"], 
.Form .formSubmit input[type="button"]
  {padding:0.5rem 2.5rem; border-radius: 0}
.Form .formSubmit .submit-button2.subtle:not(:hover) {background:#c2bcbc;}
.Form .formSubmit::after {content: ""; clear:both;display: table;} /*clearfix for floated buttons b*/
.Form .formSubmit .paybutton {float:right;}
.Form .formSubmit .backbutton {float:left;}

@media screen and (max-width:768px) {
	.Form .formSubmit {text-align: center;}	
}

/*---------------------------------
	Job Submission specific
-----------------------------------*/
.Form .chkJobCategories {float:left;width:11rem; font-size: .75rem}

/*---------------------------------
	Recaptcha V2
-----------------------------------*/
.Form .captchalabel {margin-top:2rem;}
.Form .g-recaptcha { background: #FFF; padding: 1rem;border:1px solid #CCC;}

/*---------------------------------
	'token captcha', e.g. on events.
-----------------------------------*/
.Form span#tokenDisplay {font-weight: bold; color:#e10000; font-size: larger; display: inline-block; background:#FFF; padding:2px 4px; border:1px solid #CCC;}
.Form .formfield#tokenSupplied {max-width: 26rem;}

/*---------------------------------
	Form page
-----------------------------------*/
.formPage .getnoticed {margin-top: 2rem;padding:1rem; background-color: #fae6c9;}
.formPage p.togglebuttons {margin: 3em auto;}
.formPage .togglebuttons .morelink {
	padding:0.5rem 1rem;
	border-radius: 0;
}
.formPage .togglebuttons .morelink.subtle {
	border:none;
}

/*---------------------------------
	Forms with help buttons, e.g. event submit
-----------------------------------*/
.Form.hasHelp input[type='text'],
.Form.hasHelp input[type='email'],
.Form.hasHelp input[type='url'],
.Form.hasHelp input[type='tel'],
.Form.hasHelp textarea
{ padding-right: 2rem;} /*make room for popup help button*/
.Form .popuphelp {position: absolute;right:0.3rem; top:1.6rem;}

/*---------------------------------
	Other
-----------------------------------*/
.sagepaycards {border:1px solid #d3d3d3; padding:1rem;margin:1rem auto;}

/*---------------------------------
	Table row formatting (e.g. amount)
-----------------------------------*/

.Form td {vertical-align: top;}
.Form td.tar {padding-right: 10px;}
.Form td.strong {font-weight: bold;}
.Form tr.amount td{font-size:130%;}
.Form tr.amount td.price {color: #336699; font-weight: bold;}

/*---------------------------------
	Event promotion form specific ?
-----------------------------------*/
.Form span.note {font-size: 0.8em; color:#555;}
.Form li.explanation, p.explanation {background-color: #fff; padding:10px; border:1px solid #CCC; margin:1rem auto;}
.Form a.underline {text-decoration: underline;}
.Form .duration li span {display: inline-block; padding:0.2rem;}