/* Styles for the date/time pair validator (dynamicValidation.js).
   Kept to its own classes so the site-wide .regerror convention is left alone. */

/* Sits on its own grid line under the controls it refers to. Red is matched to
   the .regerror border rather than Bootstrap's .text-danger, which is a duller
   shade and reads as a mismatch next to the outlined fields. */
.dynamic-validation-message {
	margin-top: .35rem;
	color: #f00;
	font-size: 12px;
	line-height: 1.4;
}

/* The pair sits in narrow columns, so on small screens the hour/minute selects
   stack; keep the message tight to them rather than to the label. */
@media (max-width: 575.98px) {
	.dynamic-validation-message {
		margin-top: .5rem;
	}
}

/* bootstrap-datepicker styles its popup with .datepicker, and the same class is
   put on the input that opens it. The widget's own padding:4px / border-radius:4px
   therefore lands on the field, leaving date inputs 34px tall and slightly
   differently rounded next to their 38px hour/minute selects. Re-assert the
   form-control box so the three controls on the row match. */
input.form-control.datepicker {
	padding: .375rem .75rem;
	border-radius: .375rem;
}