/*
	Styling for the client side validation and phone fields in the WebForms enquiry modules.
	See spawnitFormFields.js. These forms are Bootstrap 3, which has no is-invalid state of its
	own, so the field highlight is defined here rather than inherited from the framework.
*/

/* intl-tel-input wraps the input in a .iti div that is inline-block by default - make it fill
   its column so the phone field lines up with the inputs above and below it. The wrapper is
   tagged by the script, since it is created by the library rather than by our markup. */
.iti.intlPhoneFieldWrapper {
	display: block;
}

input.intlPhoneField {
	width: 100%;
}

/* the country list renders on body so a modal or panel cannot clip it - keep it on top */
.iti__dropdown-content {
	z-index: 1060;
}

/* a field the visitor still needs to fix */
.form-control.is-invalid,
input.is-invalid,
textarea.is-invalid,
select.is-invalid {
	border-color: #a94442;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

/* replaces the asp:ValidationSummary box these forms used to render */
[data-validate-summary] {
	display: none;
	color: #a94442;
	background-color: #f2dede;
	border: 1px solid #ebccd1;
	border-radius: 4px;
	padding: 10px 15px;
	margin-bottom: 15px;
}

[data-validate-summary] ul {
	margin: 0;
	padding-left: 20px;
}

[data-validate-summary] li {
	list-style: disc;
}