fieldset {
	padding-bottom: $relatedMargin;
}

legend {
	border: none;
	margin-bottom: 0;
	display: block;
	width: 100%;
	padding-top: $defaultMargin;
	font-size: 150%;
	line-height: 40px;
	border-bottom: 0px none;
	color: #FFF;
}

select,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="range"],
input[type="date"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
input[type="number"],
.uneditable-input {
	height: $unit;
	line-height: $unit - 4px;
	border: 2px solid $grayLight;
	background-color: $grayLight;
	color: $textOnGray;
	font-size: 14px;
	padding: 0 ($defaultMargin - 2px);
	margin: 0;
	@include font();
	@include box-sizing(border-box);
	@include box-shadow(none);
	@include transition(none);
	@include border-radius(0px);

	&:focus {
		background-color: #fff;
		border: 2px solid #fff;
		color: $textOnWhite;
		outline: none;
		@include box-shadow(none);
	}

	// Highlight changed elements in the Property Panel
	&.neos-modified {
		border: 2px solid $green;
	}
}

.select {
	position: relative;
	background-color: $grayLight;
	overflow: hidden;

	&:focus {
		outline: none;

		&:before,
		&:after {
			color: $textOnWhite;
		}
	}

	&:before,
	&:after {
		display: block;
		position: absolute;
		right: 0px;
		top: 0px;
		font-family: Arial;
		font-size: 17px;
		width: $unit;
		line-height: $unit - 4px;
		content: "▾";
		text-align: center;
		border-left: 1px solid $grayDark;
		@include box-sizing(content-box);
	}

	&:before {
		top: -1px;
		right: -1px;
		@include rotate(180deg);
	}

	&:after {
		padding-top: 6px;
	}

	select {
		@include appearance(none);
		-o-appearance: window;
		-moz-appearance: window;
		background-color: transparent;
		line-height: 18px;
		padding: 3px 14px;
		width: 100%;
		position: relative;
		z-index: 1;
		border: none;
		cursor: pointer;

		&:focus {
			color: #fff;
			background-color: transparent;
			border-color: transparent;
		}
	}
}

.form-footer {
	position: absolute;
	background-color: #141414;
	border-top: 1px solid #3F3F3F;
	padding: 15px 0px;
	left: 0px;
	right: 0px;
}


.has-error {
	.form-control {
		border-color: $warning;
		@include box-shadow(none)
	}

	.control-label,
	.help-block,
	.help-inline {
		color: $warning;
	}
}

.checkbox,
.radio {
	position: relative;
	display: inline-block;
	overflow: hidden;
	min-height: 22px;
	min-width: 22px;
	line-height: 22px;
	vertical-align: middle;
	padding: 0 !important;

	&.neos-inline {
		margin-right: $wideMargin;
	}

	input {
		position: absolute;
		left: -9999px;
		vertical-align: top;

		& + span {
			width: 22px;
			height: 22px;
			margin-right: $relatedMargin;
			overflow: hidden;
			float: left;
			position: relative;

			&::before {
				position: absolute;
				top: 0;
				left: 0;
				width: 20px;
				height: 20px;
				line-height: 20px;
				background-color: $grayLight;
				border: 1px solid $textSubtleLight;
				color: #fff;
				cursor: pointer;
				content: '';
			}
		}

		&:checked {
			& + span::before {
				@include font;
				background-color: $blueLight;
				border: 1px solid $blueLight;
				content: '\2713';
				font-size: 16px;
				text-align: center;
				font-weight: bold;
			}
		}

		&[type='radio'] {
			& + span::before {
				content: "";
				border-radius: 50%;
			}

			&:checked + span::after {
				content: "";
				position: absolute;
				width: 8px;
				height: 8px;
				left: 7px;
				top: 7px;
				background: #fff;
				border-radius: 50%;
			}
		}

		&:hover + span::before,
		&:focus + span::before {
			border-color: $blueLight;
		}

		&[disabled] {
			& + span {
				opacity: .35;
				cursor: not-allowed;

				&::before {
					border-color: $textSubtleLight;
				}
			}
		}
	}
}

.section-separator {
	margin: $defaultMargin 0;
	border-bottom: 1px solid white;
}