.form-group {
	position: relative;
	margin-bottom: 1.0em;

	label {
		display: inline-block;
		max-width: 100%;
		margin-bottom: 5px;

		color: $textColor;
		font-weight: $fontNormal;

		text-shadow: 0 0 2px rgba(#000, 0.6);

	} // label

	.form-control {
		display: block;
		width: 100%;
		padding: 6px 12px;

		color: $textColor;
		border: 1px solid $color2-light;
		border-radius: 5px;
		outline: 0;

		background-color: $color2-dark;		
		@if $glassTheme {
			background-color: rgba(0,0,0,.15);		
		}		

		font-size: 1.0em;
		font-family: $fontFamily;
		line-height: 1.2em;

		box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
		transition: border-color ease-in-out .2s, box-shadow ease-in-out .2s;

		@include placeholderStyle {
			color: $textColor;
			font-family: $fontFamily;
			opacity: 0.4;
		}

		&[disabled] {
			cursor: not-allowed;	
		}

		@include setFocusHighLight($secondColor);

	} // .form-control

	select {
		//appearance: none;

		option {
			background: $color2;
		}
		
	}

	&.has-icon {
		.form-control {
			padding-right: 2.0em;
		}

		.icon {
			position: absolute;
			right: 0.4em;
			top: 1.6em;
			display: block;
			font-size: 1.2em;
		}

	}

	.hint {
		font-style: italic;
		font-size: 0.8em;	
		color: rgba($textColor, 0.8);
	}

	.errors {
		color: lighten($dangerColor, 35%);
		font-size: 0.80em;
		text-shadow: 0 0 2px rgba(#000, 0.6);

		span {
			&:before {
				// exclamation-triangle icon
				content: "\f071";
				font-family: FontAwesome;
				padding-right: 0.5em;
			}

			display: block;
			background-image: null !important;
			margin-top: 0.2em;
			margin-left: 0.3em;
			font-weight: 600;
		}
	}

	&.valid {
		$c: lighten($successColor, 15%);
		label {
			color: $c;
		}

		.form-control {
			border: 1px solid $c;
			background-color: rgba($successColor, 0.10);
		}

	} // .valid

	&.error {
		$c: lighten($dangerColor, 35%);
		label {
			color: $c;
		}

		.form-control {
			border: 1px solid $c;
			background-color: rgba(red, 0.15);
		}

	} // .error

} // .form-group

.form-option {
	position: relative;
	width: 100%;
	
	input {
		display: none;
	}
	
	label {
		width: 100%;			
		display: block;
		font-family: $fontFamily;
		font-size: 1rem;
		padding-top: 1.0rem;
		padding-bottom: 1.0rem;
		padding-left: 2.4rem;
		user-select: none;
		cursor: pointer;
		
		&:before {
			background-color: $color2-dark;
			border: 1px solid $color2-light;
			box-shadow: 0 0 1px $color2-light, 0 0 1px $color2-light inset;
			content: '';
			display: block;
			position: absolute;
			top: 0.98em;
			left: .75em;
			height: 16px;
			width: 16px;
			border-radius: 2px;

		} // &:before
		
	} // label
	
	input:checked + label:after {
		background-color: $secondColor;
		content: '';
		display: block;
		width: 10px;
		height: 10px;
		position: absolute;
		top: 1.25em;
		left: 1em;
		border-radius: 1px;
	} // input:checked + label:after

	input[type="radio"] + label:before {
		border-radius: 9px;
	}
	
	input[type="radio"]:checked + label:after {
		border-radius: 6px;
	}

} // .form-option

fieldset {

	border: 0;
	margin: 0.5em 0;
	padding-left: 1.2em;

	legend {
		display: block;
		width: 100%;
		margin-left: -1.2em;
		margin-bottom: 0.6em;
		padding: 0.3em 0;
		border-bottom: 2px solid $color2-light;

		font-family: $fontFamilyHeader;
		font-weight: 300;
		font-size: 1.2em;
		text-transform: uppercase;
	} // legend

} // fieldset