/* Styling for the reusable AlertBoxPropertyEditor / WarningBoxPropertyEditor (see
   Editors/AlertBox and Editors/WarningBox) — a read-only inline callout property editor usable on
   any DetailView, not just wizard steps. Kept separate from wizard.css's .wizard-step-description
   (the wizard's own built-in step-description block) on purpose: that class name and its
   wizard-only concerns (e.g. --wizard-step-max-width) don't belong to a general-purpose editor.

   Both variants use !important to beat Bootstrap's own .alert-primary/.alert-warning rule at
   equal specificity — those classes on their own are themed by DevExpress's dark-mode component
   tokens, which drift independently of this app's own --bs-primary/--bs-warning and render
   inconsistently across light/dark (e.g. purple in dark mode). Pinning the color to this app's own
   --lightblue/--warning variables (see CompanyService.BuildThemeCss) keeps each variant visually
   stable in both themes. */

.alert-box-callout {
	width: 100%;
	background-color: rgba(var(--lightblue), 0.15) !important;
	border-color: rgba(var(--lightblue), 0.3) !important;
	color: currentColor !important;
	border-radius: 10px !important;
	padding-top: 12px !important;
	padding-bottom: 12px !important;
	padding-left: 16px !important;
	padding-right: 16px !important;
	font-size: 0.875rem;
}

.dxbl-theme-dark .alert-box-callout {
	border-color: rgba(var(--lightblue), 0.5) !important;
	color: currentColor !important;
}

.alert-box-callout-warning {
	width: 100%;
	background-color: rgba(var(--warning), 0.15) !important;
	border-color: rgba(var(--warning), 0.35) !important;
	color: currentColor !important;
	border-radius: 10px !important;
	padding-top: 12px !important;
	padding-bottom: 12px !important;
	padding-left: 16px !important;
	padding-right: 16px !important;
	font-size: 0.875rem;
}

.dxbl-theme-dark .alert-box-callout-warning {
	border-color: rgba(var(--warning), 0.55) !important;
	color: currentColor !important;
}

.alert-box-icon {
	width: 20px;
	height: 20px;
	margin-right: 5px;
	margin-top: -1px;
	filter: var(--icon-filter-blue);
}

.alert-box-icon-warning {
	width: 20px;
	height: 20px;
	margin-right: 5px;
	margin-top: -1px;
	filter: var(--icon-filter-orange);
}