[class^='form+'] {
	align-items: center;
	background-color: #F6F7F8;
	border: 1px solid #D6D9DC;
	border-radius: 10px;
	box-sizing: border-box;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	margin: 10px auto;
	padding: 10px 5px;
	width: 100%;
}

[class^='form+'] [class^='form+'] {
	align-items: center;
	background-color: transparent;
	border-style: none;
	box-sizing: border-box;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	margin: 0;
	padding: 0;
	width: 100%;
}

[class^='form+'] > * {
	margin: 5px;
}

[class^='form+'] button,
[class^='form+'] input[type='button'],
[class^='form+'] input[type='reset'],
[class^='form+'] input[type='submit'] {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

@media (min-width: 500px) {
	[class^='form+'] button,
	[class^='form+'] input[type='button'],
	[class^='form+'] input[type='reset'],
	[class^='form+'] input[type='submit'] {
		width: auto;
	}
}

/*----------------------------------------------------------------------------------------------------
 * Input, Selection, and Textarea
 *----------------------------------------------------------------------------------------------------*/
[class^='form+'] input,
[class^='form+'] select,
[class^='form+'] textarea {
	background-color: white;
	border: 1px solid #D6D9DC;
	border-radius: 3px;
	padding: 5px 8px;
}

[class^='form+'] input:read-only,
[class^='form+'] textarea:read-only {
	background-color: transparent;
}

[class^='form+entry'] div[data-field] {
	border: 1px solid #D6D9DC;
	border-radius: 3px;
	padding: 5px 8px;
	min-height: 30px;
}

[class^='form+'] select {
	background-color: white;
	padding: 4px;
}

/*----------------------------------------------------------------------------------------------------
 * Button, Submit, and Reset
 *----------------------------------------------------------------------------------------------------*/
[class^='form+'] button,
[class^='form+'] input[type='button'],
[class^='form+'] input[type='reset'],
[class^='form+'] input[type='submit'] {
	background-color: #5995DA;
	border: none;
	border-radius: 3px;
	color: white;
	cursor: pointer;
	font-size: 125%;
	font-weight: bold;
	padding: 7px 50px;
}

[class^='form+'] button:hover,
[class^='form+'] input[type='button']:hover,
[class^='form+'] input[type='reset']:hover,
[class^='form+'] input[type='submit']:hover	{
	background-color: #76AEED;
}

[class^='form+'] button:active,
[class^='form+'] input[type='button']:active,
[class^='form+'] input[type='reset']:active,
[class^='form+'] input[type='submit']:active {
	background-color: #407FC7;
}

[class^='form+'] button:disabled,
[class^='form+'] input[type='button']:disabled,
[class^='form+'] input[type='reset']:disabled,
[class^='form+'] input[type='submit']:disabled {
	background-color: #aaa;
}

[class^='form+'] input:focus,
[class^='form+'] textarea:focus,
[class^='form+'] select:focus,
[class^='form+'] input[type="checkbox"]:focus + label::before,
[class^='form+'] input[type="radio"]:focus + label::before {
	-moz-box-shadow: inset 0 0 3px #5995da;
	-webkit-box-shadow: inset 0 0 3px #5995da;
	box-shadow: inner 0 0 3px #5995da;
}

[class^='form+'] input[type='checkbox'] {
	opacity: 0;
	position: absolute;
}

[class^='form+'] .form-multi input[type="checkbox"] + label {
	background-color: white;
	border: 1px solid #D6D9DC;
	border-radius: 10px;
	display: inline-block;
	padding: 5px 10px;
}

[class^='form+'] input[type="checkbox"] + label::before {
	background-color: white;
	border: 1px solid #D6D9DC;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	content: "";
	display: inline-block;
	height: 24px;
	width: 24px;
	margin-right: 7px;
	vertical-align: -35%;
}

[class^='form+'] input[type="checkbox"]:checked + label::before {
	background: black url("../../images/shared/check.svg#white") no-repeat 0 0/22px;
}

[class^='form+'] input[type="checkbox"]:disabled + label::before {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	opacity: 0.3;
}

[class^='form+'] input[type="radio"] {
	opacity: 0;
	position: absolute;
}

[class^='form+'] input[type="radio"] + label::before {
	background-color: white;
	border: 1px solid #D6D9DC;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	content: "";
	display: inline-block;
	height: 24px;
	width: 24px;
	margin-right: 7px;
	vertical-align: -35%;
}

[class^='form+'] .form-multi input[type="radio"] + label {
	background-color: white;
	border: 1px solid #D6D9DC;
	border-radius: 10px;
	display: inline-block;
	padding: 5px 10px;
}

[class^='form+'] input[type="radio"]:checked + label::before {
	background: black url("../../images/shared/check.svg#white") no-repeat 1px 1px/20px;
}

[class^='form+'] input[type="radio"]:disabled + label {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	opacity: 0.3;
}

[class^='form+'] .form-multi {
	align-items: flex-start;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin: -5px;
}

[class^='form+'] .form-multi > * {
	margin: 5px;
}

.form-block {
	display: block;
}

.form-field p {
	margin-bottom: 10px;
}

.form-field p:last-child {
	margin-bottom: 0;
}

/*----------------------------------------------------------------------------------------------------
 * Form Fields
 *----------------------------------------------------------------------------------------------------*/
.form-field {
	align-items: stretch;
	display: flex;
	flex-flow: column wrap;
	justify-content: flex-start;
	margin-bottom: 10px;
	width: 100%;
}

@media (min-width: 500px) {
	.form-field {
		align-items: flex-start;
		flex-flow: row nowrap;
		margin-bottom: 8px;
	}
}

.form-field input:not([type="radio"]):not([type="checkbox"]):not([type="button"]):not([type="reset"]):not([type="submit"]),
.form-field select,
.form-field textarea,
.form-field div[data-field] {
	width: 100%;
}

.form-field textarea {
	min-height: 100px;
}

/*----------------------------------------------------------------------------------------------------
 * Prefix Labels
 *----------------------------------------------------------------------------------------------------*/
.form-field label:first-child,
.form-field .form-label:first-child,
.form-field .form-prefix:first-child {
	color: #777;
	margin-top: 0;
	margin-bottom: 5px;
	margin-right: 0;
	min-width: auto;
	text-align: left;
	width: auto;
}

@media (min-width: 500px) {
	[class^='form+entry'] .form-field label:first-child,
	[class^='form+entry'] .form-field .form-label:first-child {
		margin-top: 6px; /* Approximates text baseline with input fields */
	}
	
	.form-field label:first-child,
	.form-field .form-label:first-child,
	.form-field .form-prefix:first-child {
		margin-bottom: 0;
		margin-right: 20px;
		min-width: 150px;
		text-align: right;
		width: 150px;
	}
}

/*----------------------------------------------------------------------------------------------------
 * Columns
 *----------------------------------------------------------------------------------------------------*/
@media (min-width: 800px) {
	.form-field.form-2col {
		width: 48%;
	}
}

@media (min-width: 1180px) {
	.form-field.form-3col {
		width: 32%;
	}
}

/*----------------------------------------------------------------------------------------------------
 * Errors
 *----------------------------------------------------------------------------------------------------*/
.form-error {
	color: red;
	padding-bottom: 5px;
	width: 100%;
}