form.jf
{
	--check:white;
	--accent:#007FFF;
	--error:#e4002d;
	--error-bg:rgba(235,94,89,.1);

	--row-spacing:1.25em;
	--col-spacing:1em;

	position:relative;
	margin:2em;
	text-align:left;
}
form.jf *
{
	box-sizing: border-box;
  -moz-box-sizing: border-box;
}

form.jf .section:not(:empty)
{
	margin-bottom:var(--row-spacing);
}
form.jf .section > .header:empty,
form.jf .section > .guide:empty
{
	display:none;
}
form.jf .section > .header:not(:empty) + .guide:not(:empty)
{
	margin-top:-.8em;
}
form.jf .section > .guide
{
	margin:1em 0;
}
form.jf .section > label,
form.jf .section > div.label
{
	position:relative;
	display:flex;
	flex-direction: column;
	margin:0 0 var(--row-spacing) 0;
	color:inherit;
}
form.jf .section > label:has(input[type="hidden"])
{
	margin-bottom:0;
}
form.jf .columns
{
	margin-bottom:var(--row-spacing);
	display:flex;
	justify-content:space-between;
}
form.jf .columns .two-columns,
form.jf .columns .columns-2
{
	flex-basis:calc((100% - var(--col-spacing)) / 2);
}
form.jf .columns .columns-3
{
	flex-basis:calc((100% - (var(--col-spacing) * 2)) / 3);
}
form.jf .columns .columns-4
{
	flex-basis:calc((100% - (var(--col-spacing) * 3)) / 4);
}

form.jf label > a,
form.jf .label > a
{
	text-decoration:underline;
}
form.jf .caption.error
{
	font-size:.8125em;
	line-height:1.46;
	color:var(--error);
}

form.jf input,
form.jf textarea,
form.jf select,
form.jf label.input,
form.jf div.drop
{
	position:relative;
	display:inline-block;
	
	border:1px solid;
	border-radius:5px;
	padding:.375em;
	margin:.375em 0 .125em 0;
	width:100%;
	
	background-color:transparent;

	-webkit-appearance:none;
	-moz-appearance:none;
	-ms-appearance:none;
	
	font-family:inherit;
	font-size:1em;
	color:inherit;
	
	outline:none;
}
form.jf input::placeholder,
form.jf textarea::placeholder
{
	color:inherit;
	opacity:.4;
}
form.jf input:disabled
{
	opacity:.5;
}
form.jf select.is-placeholder:not(:focus)
{
	color: color-mix(in srgb, currentColor 40%, transparent);
	/* NOTE this dimms border as well, override with actual color if desired in the app's stylesheet */
}
form.jf textarea
{
	min-height:10em;
	resize: none;
}
form.jf textarea.auto-size
{
	height:auto;
	min-height:0;	
}
form.jf input[type="file"]
{
	margin:0;
	padding:0;
	width:.1px;
	height:.1px;
	opacity:0;
	overflow:hidden;
	position:absolute;
	z-index:-1;
}
form.jf em.guide
{
	padding-left:.5em;
	display:inline-block;
	opacity:.5;
	font-size:.875em;
	font-style:normal;
}
form.jf em.guide.total
{
	display:block;
	margin-bottom:10px;
}
form.jf .error + em.guide
{
	display:none;
}
form.jf input:focus,
form.jf textarea:focus,
form.jf select:focus,
form.jf label.input:hover,
form.jf .drop.focus
{
	border-color:var(--accent);
}
form.jf input.error,
form.jf label.input.error,
form.jf textarea.error,
form.jf .drop.error,
form.jf select.error
{
	color:var(--error);
	background-color:var(--error-bg);
	border-color:var(--error) !important;
}
form.jf input[type="checkbox"],
form.jf input[type="radio"]
{
	width:auto;
}
form.jf div.check
{
	font-size:1em;
	line-height:1.3333;
	
	padding:2px .375em;
	margin:.375em 0 2px 0;
	border:1px solid;
	border-radius: 5px;
}
form.jf div.check
{
	height:auto;
	line-height:30px;
}
form.jf div.check.focus
{
	border-color:var(--accent);
}
form.jf div.check label,
form.jf div.slider label
{
	display:block;
	position:relative;
}
form.jf div.check input
{
	opacity:0;
	margin:0 1.2em 0 0;
	padding:0;
	vertical-align:middle;
}
form.jf div.check .checkbox
{
	position:absolute;
	left:2px;
	top:.5em;
	background-color:transparent;
	border:none;
}
form.jf div.check.group .checkbox
{
	top:9px;
}
form.jf svg.icon.expand,
form.jf svg.icon.locked
{
	position:absolute;
	right:6px;
	top:2em;
	background-color:transparent;
	border:none;

	pointer-events:none;
}
form.jf svg.icon.locked
{
	right:12px;
	top:2.175em;
}
form.jf .error svg.icon.checkbox path
{
	fill:var(--error);
}
form.jf svg.icon.checkbox rect,
form.jf svg.icon.checkbox path.check
{
	fill:transparent;
}
form.jf svg.icon.checkbox.checked rect,
form.jf svg.icon.checkbox.checked path:not(.check)
{
	fill:currentColor;
}
form.jf svg.icon.checkbox.checked path.check
{
	fill:var(--check);
}

form.jf input[type="submit"]
{
	width:auto;
	margin:0;
	padding:.375em .875em;
	cursor:pointer;
}

/* file uploads */

form.jf div.drop
{
	height:auto;
	min-height:152px;
	padding:10px 15px;
}
form.jf div.drop em
{
	opacity:.45;
	font-style:normal;
}
form.jf form.jf em.guide a
{
	cursor:pointer;
}
form.jf div.drop .uploaded.ui-sortable-helper
{
	top:auto !important; /* prevents display bug in FF, review later */
}
form.jf div.drop .uploaded.pdf.ui-sortable-helper
{
	background-color:#fcfcfc;
}

form.jf div.drop .uploaded
{
	position:relative;
	float:left;
	margin:0 10px 10px 0;
	width:120px;
	height:120px;
	border-radius:5px;
	background-color:rgba(30,30,30,.05);
}
form.jf div.drop .uploaded.image
{
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:contain;
}
form.jf div.drop .uploaded.pdf
{
	background:transparent url(../media/pdf.svg) no-repeat 50% 8px;
}
form.jf div.drop .uploaded textarea,
form.jf div.drop .uploaded .filename
{
	margin:52px auto 0 auto;
	resize: none;
	width:90%;
	min-width:90%;
	height:63px;
	min-height:63px;

	font-size:.875rem;
	text-align:center;
}
form.jf div.drop .uploaded a
{
	display:none;
	
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	line-height:30px;
	text-align:center;
	
	color:var(--light);
	text-shadow:1px 1px 5px rgba(0,0,0,.3);
}
form.jf div.drop .uploaded.uploading a,
form.jf div.drop .uploaded:hover a
{
	display:block;
}
form.jf div.drop .uploaded:not(.uploading) a
{
	cursor:pointer;
}
form.jf div.drop .uploaded:not(.uploading) a:hover
{
	color:var(--accent);
	/* background-color:rgba(0,0,0,.1	); */
/* 
	border-color:#646464;
	background-color:#e5e5e5;
 */
}
form.jf div.drop .uploaded a .progress
{
	position:absolute;
	left:0;
	top:0;
	height:100%;
	width:0;
}
form.jf div.drop .uploaded a span
{
	position:relative;
	z-index:1;
	pointer-events:none;
}

@media (max-width:900px)
{
	form.jf .columns
	{
		flex-wrap:wrap;
	}
	form.jf .columns .two-columns
	{
		flex-basis:100%;
	}
	form.jf .columns .two-columns:first-child
	{
		margin-bottom:var(--row-spacing);
	}
}