/* fix bootstrap rendering issue with SELECT elements */
.was-validated select.form-control:invalid {
	background-position: center right 1em;;
}
.was-validated select.form-control:valid {
	background-position: center right 1em;
}

/* allow feedback element that applies to entire form */
form:not(.was-validated) .a2-form-invalid-feedback {
	display: none !important;
}

form:valid .a2-form-invalid-feedback {
	display: none !important;
}

form:invalid.was-validated .a2-form-invalid-feedback {
	display: block;
	width: 100%;
	margin-top: .25rem;
	font-size: 80%;
	color: #dc3545;
}

/* override bootstrap blue to avantus blue */
.bg-primary {
	background-color: #0076BD !important;
}

.btn-primary {
	background-color: #0076BD;
	border-color: #0076BD;
}

a[href^="tel:"] {
	border-bottom: 0 !important;
	cursor: default !important;
	color: inherit !important;
	text-decoration: none !important;
}

/* changes for Bootstrap v5 migration */

label {
    margin-bottom: 0.5rem; /* was dropped in v5 due to encourage to use utility classes */
}

.form-group {
    margin-bottom: 1rem; /* was removed in v5, same reason */
}

.form-check-label {
    margin-bottom: 0; /* was removed in v5, same reason */
}

.was-validated .form-control:invalid {
    /* different icons are used for validation in v5 by default */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23dc3545' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E")
}

.form-select.is-valid:not([multiple]):not([size]),
.form-select.is-valid:not([multiple])[size="1"],
.was-validated .form-select:valid:not([multiple]):not([size]),
.was-validated .form-select:valid:not([multiple])[size="1"],

.form-select.is-invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple])[size="1"],
.was-validated .form-select:invalid:not([multiple]):not([size]),
.was-validated .form-select:invalid:not([multiple])[size="1"] {
    background-size: calc(.75em + .375rem) calc(.75em + .375rem); /* due to conflict with another rule background-size is decreased for <select> */
}