form {
	/*max-width: 800px;*/
}

fieldset {
	border: 0;
}

input,
textarea,
select {
	box-sizing: border-box;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	vertical-align: middle;
}

input[type="text"],
input[type="date"],
input[type="number"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="submit"],
input[type="tel"],
button,
.select-style,
textarea {
	-webkit-appearance: none;
	border: 0;
	border: 0;
	display: inline-block;
	font-size: 1em;
	margin: .3em 0;
	padding: .5em 1em;
}
input[type="text"],
input[type="date"],
input[type="number"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="tel"],
.select-style,
textarea {
	background-color: #eaeaea;
	border-radius: .3em;
}

.form-subtitle.has-errors, #edit-camper-sections nav li.active a[data-toggle].form-subtitle.has-errors, #edit-camper-sections nav a[data-toggle].form-subtitle.has-errors:is(:hover, :focus, :active) {
	color: red !important;
}

.form-subtitle.has-errors:before {
	border-color: red !important;
	background-color: white !important;
}

input[required]:user-invalid {
	border: 2px solid red !important;
}

.select-style:has(:user-invalid) {
	border: 2px solid red !important;
}

.toggle-checkbox-style:has(:user-invalid) span:after, .toggle-checkbox-style.has-errors span:after {
	background-color: red;
}

.div:has(:user-invalid) > label {
	color: red;
}

textarea {
	min-height: 8em;
}

::-webkit-input-placeholder {
	color: #707070;
}
:-moz-placeholder {
	color: #707070;
	opacity: 1;
}
::-moz-placeholder {
	color: #707070;
	opacity: 1;
}
:-ms-input-placeholder {
	color: #707070;
}


input[type="radio"],
input[type="checkbox"] {
	display: inline-block;
	margin: .3em .5em .3em 0;
}
input[type="radio"] + label,
input[type="checkbox"] + label {
	display: inline-block;
	overflow: visible;
	height: auto;
	max-width: calc(100% - 4em);
}



/* submit, button */
input[type="submit"],
button,
.block-link {
	background: transparent;
	border: 1px solid #1d1d1b;
	border-radius: .3em;
	color: #1d1d1b;
	cursor: pointer;
	font-family: 'KG Second Chances', Helvetica, Arial, sans-serif;
	font-size: 1em;
	padding: .5em 1em;
	pointer-events: initial;
	width: auto;
}
.block-link + .block-link {
	margin-left: 1em;
}
input[type="submit"]:hover,
input[type="submit"]:focus,
button:hover,
button:focus,
a.block-link:hover,
a.block-link:focus {
	background-color: #1d1d1b;
	border-color: #1d1d1b;
	color: #FFFFFF;
	text-decoration: none;
}

/* image */
input[type="image"] {
	background: transparent;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	display: inline-block;
	margin: .3em 0;
	padding: 0;
	width: auto; height: 2em;
	vertical-align: middle;
}
input[type="image"]:hover,
input[type="image"]:focus {
	opacity: .8;
}



/* select style (requires wrapper .select-style) */
.select-style {
	padding: 0;
	margin: .3em 0;
	overflow: hidden;
	position: relative;
	vertical-align: middle;
}
form .select2.select2-container .select2-selection--single {
	background-color: var(--wp--preset--color--light-grey);
	border: 1px solid var(--wp--preset--color--light-grey);
	padding: 0.5rem;
	height: auto;
}

form .select2.select2-container--open .select2-selection--single {
	background-color: white;
}
.select2-container--open .select2-dropdown {
	border-color: var(--wp--preset--color--light-grey);
}

.select2-container--open .select2-search--dropdown {
	padding: .5rem;
}
.select2-container--open .select2-search--dropdown .select2-search__field {
	background-color: var(--wp--preset--color--light-grey);
	color: #333;
	border: none;
	padding: .5em 1em;
	margin: 0;
}
.select-style input[type=text] {
	margin-bottom: 0;
}

.select2-container--open .select2-results__option {
	padding: .5em;
}

.select2-container--open .select2-results__option:hover {
	background-color: var(--wp--preset--color--blue);
	color: white;
	cursor: pointer;
}


.select-style select {
		-webkit-appearance: none;
		background: none;
		border: 0;
		border-radius: 0;
		color: inherit;
		display: block;
		padding: .5em 3em .5em 1em;
		position: relative;
		text-transform: inherit;
		width: calc(100% + 2em);
	}
		.select-style select option {
			color: #1d1d1b;
			padding: 0 2em 0 0;
		}
	.select-style:after, .select2:after {
		background: url('../images/arrow-down.svg') center/50% auto no-repeat var(--wp--preset--color--light-grey);
		border-radius: .3em;
		content: '';
		display: block;
		pointer-events: none;
		position: absolute; top: 0; right: 0;
		width: 2em; height: 100%;
	}
.select-style.bold,
.select-style.feature {
	background: #33332f;
	color: #FFFFFF;
	font-family: 'KG Second Chances', Helvetica, Arial, sans-serif;
}
	.select-style.bold:after,
	.select-style.feature:after {
		background-color: #33332f;
		background-image: url('../images/arrow-down-white.svg');
	}
.select-style.feature {
	background-color: #376898;/*background-color: #009ade;*/
	text-transform: uppercase;
}
	.select-style.feature:after {
		background-color: #376898;/*background-color: #009ade;*/
	}



/* gender radios */
.male,
.female {
	cursor: pointer;
	margin-right: .5em;
	position: relative;
}
.male:hover,
.female:hover {
	opacity: .7;
}
	.male input[type="radio"],
	.female input[type="radio"] {
		opacity: 0;
		position: absolute;
		z-index: 1;
	}
	.male:after,
	.female:after {
		background: center/contain no-repeat transparent;
		content: '';
		display: block;
		position: relative;
		width: 1.3em; height: 2em;
		z-index: 2;
	}
	.male:after {
		background-image: url('../images/gender/male-primary.svg');
	}
	.female:after {
		background-image: url('../images/gender/female-primary.svg');
	}
.male,
.female {
	opacity: .3;
}
.male.active,
.female.active {
	opacity: 1;
}
label.male, label.female {
	padding: 0.5em 0.95em;
	border: 1px solid;
	border-radius: 3px;
	color: var(--wp--preset--color--blue);
}

/* toggle-style checkbox */
.toggle-checkbox-style > span {
	background-color: #CCCCCC;
	border-radius: .75em;
	display: inline-block;
	position: relative;
	transition: background .3s ease;
	vertical-align: middle;
	width: 3em; height: 1.5em;
}
.toggle-checkbox-style.active > span {
	background-color: #004c91;
}
	.toggle-checkbox-style > span > input[type="checkbox"] {
		opacity: 0;
		position: absolute;
		z-index: 1;
	}
	.toggle-checkbox-style > span:after {
		background: #80bc00;
		border-radius: .75em;
		content: '';
		position: absolute; top: 0; left: 0;
		transition: left .3s ease;
		width: 1.5em; height: 1.5em;
	}
	 .toggle-checkbox-style.active > span:after {
		left: 50%;
	}

