Form select

A form select embeds browser native select lists into a form.

Examples

Basic

Validated

Disabled

Grouped

Icon sprite variant

Note: The dropdown toggle icon is applied as a background image to the form element. By default, the image URLs for these icons are data URIs. However, there may be cases where data URIs are not ideal, such as in an application with a content security policy that disallows data URIs for security reasons. The isIconSprite variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons.

Props

FormSelect

*required
Name	Type	Default	Description
childrenrequired	React.ReactNode		content rendered inside the FormSelect
aria-label	string		Custom flag to show that the FormSelect requires an associated id or aria-label.
className	string	''	additional classes added to the FormSelect control
isDisabled	boolean	false	Flag indicating the FormSelect is disabled
isIconSprite	boolean	false	Use the external file instead of a data URI
isRequired	boolean	false	Sets the FormSelect required.
onBlur	(event: React.FormEvent<HTMLSelectElement>) => void	(): any => undefined	Optional callback for updating when selection loses focus
onChange	(value: string, event: React.FormEvent<HTMLSelectElement>) => void	(): any => undefined	Optional callback for updating when selection changes
onFocus	(event: React.FormEvent<HTMLSelectElement>) => void	(): any => undefined	Optional callback for updating when selection gets focus
ouiaId	number \| string		Value to overwrite the randomly generated data-ouia-component-id.
ouiaSafe	boolean	true	Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.
validated	'success' \| 'warning' \| 'error' \| 'default'	'default'	Value to indicate if the select is modified to show that validation state. If set to success, select will be modified to indicate valid state. If set to error, select will be modified to indicate error state.
value	any	''	value of selected option

FormSelectOption

*required
Name	Type	Default	Description
labelrequired	string		the label for the option
className	string	''	additional classes added to the Select Option
isDisabled	boolean	false	flag indicating if the option is disabled
isPlaceholder	boolean	false	flag indicating if option will have placeholder styling applied when selected *
value	any	''	the value for the option

FormSelectOptionGroup

*required
Name	Type	Default	Description
labelrequired	string		the label for the option
children	React.ReactNode	null	content rendered inside the Select Option Group
className	string	''	additional classes added to the Select Option
isDisabled	boolean	false	flag indicating if the Option Group is disabled

CSS variables


	.pf-c-form-control	--pf-global--Color--100	#151515
--pf-global--Color--100 --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-form-control	--pf-global--Color--200	#6a6e73
--pf-global--Color--200 --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-form-control	--pf-global--BorderColor--100	#d2d2d2
--pf-global--BorderColor--100 --pf-global--BorderColor--dark-100 $pf-global--BorderColor--dark-100 $pf-color-black-300 #d2d2d2
	.pf-c-form-control	--pf-global--primary-color--100	#06c
--pf-global--primary-color--100 --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-form-control	--pf-global--link--Color	#06c
--pf-global--link--Color --pf-global--link--Color--dark $pf-global--link--Color--dark $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-form-control	--pf-global--link--Color--hover	#004080
--pf-global--link--Color--hover --pf-global--link--Color--dark--hover $pf-global--link--Color--dark--hover $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-form-control	--pf-global--BackgroundColor--100	#fff
--pf-global--BackgroundColor--100 --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-form-control	--pf-c-form-control--Color	#151515
--pf-c-form-control--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-form-control	--pf-c-form-control--FontSize	1rem
--pf-c-form-control--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-form-control	--pf-c-form-control--LineHeight	1.5
--pf-c-form-control--LineHeight --pf-global--LineHeight--md $pf-global--LineHeight--md 1.5
	.pf-c-form-control	--pf-c-form-control--BorderWidth	1px
--pf-c-form-control--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-form-control	--pf-c-form-control--BorderTopColor	#f0f0f0
--pf-c-form-control--BorderTopColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-form-control	--pf-c-form-control--BorderRightColor	#f0f0f0
--pf-c-form-control--BorderRightColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-form-control	--pf-c-form-control--BorderBottomColor	#8a8d90
--pf-c-form-control--BorderBottomColor --pf-global--BorderColor--200 $pf-global--BorderColor--200 $pf-color-black-500 #8a8d90
	.pf-c-form-control	--pf-c-form-control--BorderLeftColor	#f0f0f0
--pf-c-form-control--BorderLeftColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-form-control	--pf-c-form-control--BorderRadius	0
	.pf-c-form-control	--pf-c-form-control--BackgroundColor	#fff
--pf-c-form-control--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-form-control	--pf-c-form-control--Width	100%
	.pf-c-form-control	--pf-c-form-control--Height	calc(1rem * 1.5 + 1px * 2 + calc(0.375rem - 1px) + calc(0.375rem - 1px))
--pf-c-form-control--Height calc(--pf-c-form-control--FontSize * --pf-c-form-control--LineHeight + --pf-c-form-control--BorderWidth * 2 + --pf-c-form-control--PaddingTop + --pf-c-form-control--PaddingBottom) calc(--pf-global--FontSize--md * --pf-global--LineHeight--md + --pf-global--BorderWidth--sm * 2 + calc(--pf-global--spacer--form-element - --pf-global--BorderWidth--sm) + calc(--pf-global--spacer--form-element - --pf-global--BorderWidth--sm)) calc($pf-global--FontSize--md * $pf-global--LineHeight--md + $pf-global--BorderWidth--sm * 2 + calc($pf-global--spacer--form-element - $pf-global--BorderWidth--sm) + calc($pf-global--spacer--form-element - $pf-global--BorderWidth--sm)) calc(pf-font-prem(16px) * 1.5 + 1px * 2 + calc(pf-size-prem(6px) - 1px) + calc(pf-size-prem(6px) - 1px)) calc(1rem * 1.5 + 1px * 2 + calc(0.375rem - 1px) + calc(0.375rem - 1px))
	.pf-c-form-control	--pf-c-form-control--inset--base	0.5rem
--pf-c-form-control--inset--base --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-form-control	--pf-c-form-control--PaddingTop	calc(0.375rem - 1px)
--pf-c-form-control--PaddingTop calc(--pf-global--spacer--form-element - --pf-global--BorderWidth--sm) calc($pf-global--spacer--form-element - $pf-global--BorderWidth--sm) calc(pf-size-prem(6px) - 1px) calc(0.375rem - 1px)
	.pf-c-form-control	--pf-c-form-control--PaddingBottom	calc(0.375rem - 1px)
--pf-c-form-control--PaddingBottom calc(--pf-global--spacer--form-element - --pf-global--BorderWidth--sm) calc($pf-global--spacer--form-element - $pf-global--BorderWidth--sm) calc(pf-size-prem(6px) - 1px) calc(0.375rem - 1px)
	.pf-c-form-control	--pf-c-form-control--PaddingRight	0.5rem
--pf-c-form-control--PaddingRight --pf-c-form-control--inset--base --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-form-control	--pf-c-form-control--PaddingLeft	0.5rem
--pf-c-form-control--PaddingLeft --pf-c-form-control--inset--base --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-form-control	--pf-c-form-control--hover--BorderBottomColor	#06c
--pf-c-form-control--hover--BorderBottomColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-form-control	--pf-c-form-control--focus--BorderBottomWidth	2px
--pf-c-form-control--focus--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-form-control	--pf-c-form-control--focus--PaddingBottom	calc(0.375rem - 2px)
--pf-c-form-control--focus--PaddingBottom calc(--pf-global--spacer--form-element - --pf-c-form-control--focus--BorderBottomWidth) calc($pf-global--spacer--form-element - --pf-global--BorderWidth--md) calc($pf-global--spacer--form-element - $pf-global--BorderWidth--md) calc(pf-size-prem(6px) - 2px) calc(0.375rem - 2px)
	.pf-c-form-control	--pf-c-form-control--focus--BorderBottomColor	#06c
--pf-c-form-control--focus--BorderBottomColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-form-control	--pf-c-form-control--m-expanded--BorderBottomWidth	2px
--pf-c-form-control--m-expanded--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-form-control	--pf-c-form-control--m-expanded--PaddingBottom	calc(0.375rem - 2px)
--pf-c-form-control--m-expanded--PaddingBottom calc(--pf-global--spacer--form-element - --pf-c-form-control--focus--BorderBottomWidth) calc($pf-global--spacer--form-element - --pf-global--BorderWidth--md) calc($pf-global--spacer--form-element - $pf-global--BorderWidth--md) calc(pf-size-prem(6px) - 2px) calc(0.375rem - 2px)
	.pf-c-form-control	--pf-c-form-control--m-expanded--BorderBottomColor	#06c
--pf-c-form-control--m-expanded--BorderBottomColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-form-control	--pf-c-form-control--placeholder--Color	#6a6e73
--pf-c-form-control--placeholder--Color --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-form-control	--pf-c-form-control--placeholder--child--Color	#151515
--pf-c-form-control--placeholder--child--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-form-control	--pf-c-form-control--disabled--Color	#6a6e73
--pf-c-form-control--disabled--Color --pf-global--disabled-color--100 $pf-global--disabled-color--100 $pf-color-black-600 #6a6e73
	.pf-c-form-control	--pf-c-form-control--disabled--BackgroundColor	#f0f0f0
--pf-c-form-control--disabled--BackgroundColor --pf-global--disabled-color--300 $pf-global--disabled-color--300 $pf-color-black-200 #f0f0f0
	.pf-c-form-control	--pf-c-form-control--disabled--BorderColor	transparent
	.pf-c-form-control	--pf-c-form-control--readonly--BackgroundColor	#f0f0f0
--pf-c-form-control--readonly--BackgroundColor --pf-global--disabled-color--300 $pf-global--disabled-color--300 $pf-color-black-200 #f0f0f0
	.pf-c-form-control	--pf-c-form-control--readonly--hover--BorderBottomColor	#8a8d90
--pf-c-form-control--readonly--hover--BorderBottomColor --pf-global--BorderColor--200 $pf-global--BorderColor--200 $pf-color-black-500 #8a8d90
	.pf-c-form-control	--pf-c-form-control--readonly--focus--PaddingBottom	calc(0.375rem - 1px)
--pf-c-form-control--readonly--focus--PaddingBottom calc(--pf-global--spacer--form-element - --pf-global--BorderWidth--sm) calc($pf-global--spacer--form-element - $pf-global--BorderWidth--sm) calc(pf-size-prem(6px) - 1px) calc(0.375rem - 1px)
	.pf-c-form-control	--pf-c-form-control--readonly--focus--BorderBottomWidth	1px
--pf-c-form-control--readonly--focus--BorderBottomWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-form-control	--pf-c-form-control--readonly--focus--BorderBottomColor	#8a8d90
--pf-c-form-control--readonly--focus--BorderBottomColor --pf-global--BorderColor--200 $pf-global--BorderColor--200 $pf-color-black-500 #8a8d90
	.pf-c-form-control	--pf-c-form-control--readonly--m-plain--BackgroundColor	transparent
	.pf-c-form-control	--pf-c-form-control--readonly--m-plain--inset--base	0
	.pf-c-form-control	--pf-c-form-control--success--BorderBottomWidth	2px
--pf-c-form-control--success--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-form-control	--pf-c-form-control--success--PaddingBottom	calc(0.375rem - 2px)
--pf-c-form-control--success--PaddingBottom calc(--pf-global--spacer--form-element - --pf-c-form-control--success--BorderBottomWidth) calc($pf-global--spacer--form-element - --pf-global--BorderWidth--md) calc($pf-global--spacer--form-element - $pf-global--BorderWidth--md) calc(pf-size-prem(6px) - 2px) calc(0.375rem - 2px)
	.pf-c-form-control	--pf-c-form-control--success--BorderBottomColor	#3e8635
--pf-c-form-control--success--BorderBottomColor --pf-global--success-color--100 $pf-global--success-color--100 $pf-color-green-500 #3e8635
	.pf-c-form-control	--pf-c-form-control--success--PaddingRight	2rem
--pf-c-form-control--success--PaddingRight --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-form-control	--pf-c-form-control--success--BackgroundPositionX	calc(100% - 0.5rem)
--pf-c-form-control--success--BackgroundPositionX calc(100% - --pf-c-form-control--PaddingLeft) calc(100% - --pf-c-form-control--inset--base) calc(100% - --pf-global--spacer--sm) calc(100% - $pf-global--spacer--sm) calc(100% - pf-size-prem(8px)) calc(100% - 0.5rem)
	.pf-c-form-control	--pf-c-form-control--success--BackgroundPositionY	center
	.pf-c-form-control	--pf-c-form-control--success--BackgroundPosition	calc(100% - 0.5rem) center
--pf-c-form-control--success--BackgroundPosition --pf-c-form-control--success--BackgroundPositionX --pf-c-form-control--success--BackgroundPositionY calc(100% - --pf-c-form-control--PaddingLeft) center calc(100% - --pf-c-form-control--inset--base) center calc(100% - --pf-global--spacer--sm) center calc(100% - $pf-global--spacer--sm) center calc(100% - pf-size-prem(8px)) center calc(100% - 0.5rem) center
	.pf-c-form-control	--pf-c-form-control--success--BackgroundSizeX	1rem
--pf-c-form-control--success--BackgroundSizeX --pf-c-form-control--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-form-control	--pf-c-form-control--success--BackgroundSizeY	1rem
--pf-c-form-control--success--BackgroundSizeY --pf-c-form-control--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-form-control	--pf-c-form-control--success--BackgroundSize	1rem 1rem
--pf-c-form-control--success--BackgroundSize --pf-c-form-control--success--BackgroundSizeX --pf-c-form-control--success--BackgroundSizeY --pf-c-form-control--FontSize --pf-c-form-control--FontSize --pf-global--FontSize--md --pf-global--FontSize--md $pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) pf-font-prem(16px) 1rem 1rem
	.pf-c-form-control	--pf-c-form-control--success--BackgroundUrl	url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%233e8635' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E")
	.pf-c-form-control	--pf-c-form-control--m-warning--BorderBottomWidth	2px
--pf-c-form-control--m-warning--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-form-control	--pf-c-form-control--m-warning--PaddingBottom	calc(0.375rem - 2px)
--pf-c-form-control--m-warning--PaddingBottom calc(--pf-global--spacer--form-element - --pf-c-form-control--m-warning--BorderBottomWidth) calc($pf-global--spacer--form-element - --pf-global--BorderWidth--md) calc($pf-global--spacer--form-element - $pf-global--BorderWidth--md) calc(pf-size-prem(6px) - 2px) calc(0.375rem - 2px)
	.pf-c-form-control	--pf-c-form-control--m-warning--BorderBottomColor	#f0ab00
--pf-c-form-control--m-warning--BorderBottomColor --pf-global--warning-color--100 $pf-global--warning-color--100 $pf-color-gold-400 #f0ab00
	.pf-c-form-control	--pf-c-form-control--m-warning--PaddingRight	2rem
--pf-c-form-control--m-warning--PaddingRight --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-form-control	--pf-c-form-control--m-warning--BackgroundPositionX	calc(100% - calc(0.5rem - 0.0625rem))
--pf-c-form-control--m-warning--BackgroundPositionX calc(100% - calc(--pf-c-form-control--PaddingLeft - 0.0625rem)) calc(100% - calc(--pf-c-form-control--inset--base - 0.0625rem)) calc(100% - calc(--pf-global--spacer--sm - 0.0625rem)) calc(100% - calc($pf-global--spacer--sm - 0.0625rem)) calc(100% - calc(pf-size-prem(8px) - 0.0625rem)) calc(100% - calc(0.5rem - 0.0625rem))
	.pf-c-form-control	--pf-c-form-control--m-warning--BackgroundPositionY	center
	.pf-c-form-control	--pf-c-form-control--m-warning--BackgroundPosition	calc(100% - calc(0.5rem - 0.0625rem)) center
--pf-c-form-control--m-warning--BackgroundPosition --pf-c-form-control--m-warning--BackgroundPositionX --pf-c-form-control--m-warning--BackgroundPositionY calc(100% - calc(--pf-c-form-control--PaddingLeft - 0.0625rem)) center calc(100% - calc(--pf-c-form-control--inset--base - 0.0625rem)) center calc(100% - calc(--pf-global--spacer--sm - 0.0625rem)) center calc(100% - calc($pf-global--spacer--sm - 0.0625rem)) center calc(100% - calc(pf-size-prem(8px) - 0.0625rem)) center calc(100% - calc(0.5rem - 0.0625rem)) center
	.pf-c-form-control	--pf-c-form-control--m-warning--BackgroundSizeX	1.25rem
	.pf-c-form-control	--pf-c-form-control--m-warning--BackgroundSizeY	1rem
--pf-c-form-control--m-warning--BackgroundSizeY --pf-c-form-control--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-form-control	--pf-c-form-control--m-warning--BackgroundSize	1.25rem 1rem
--pf-c-form-control--m-warning--BackgroundSize --pf-c-form-control--m-warning--BackgroundSizeX --pf-c-form-control--m-warning--BackgroundSizeY 1.25rem --pf-c-form-control--FontSize 1.25rem --pf-global--FontSize--md 1.25rem $pf-global--FontSize--md 1.25rem pf-font-prem(16px) 1.25rem 1rem
	.pf-c-form-control	--pf-c-form-control--m-warning--BackgroundUrl	url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23f0ab00' d='M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E")
	.pf-c-form-control	--pf-c-form-control--invalid--BorderBottomWidth	2px
--pf-c-form-control--invalid--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-form-control	--pf-c-form-control--invalid--PaddingBottom	calc(0.375rem - 2px)
--pf-c-form-control--invalid--PaddingBottom calc(--pf-global--spacer--form-element - --pf-c-form-control--invalid--BorderBottomWidth) calc($pf-global--spacer--form-element - --pf-global--BorderWidth--md) calc($pf-global--spacer--form-element - $pf-global--BorderWidth--md) calc(pf-size-prem(6px) - 2px) calc(0.375rem - 2px)
	.pf-c-form-control	--pf-c-form-control--invalid--BorderBottomColor	#c9190b
--pf-c-form-control--invalid--BorderBottomColor --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-form-control	--pf-c-form-control--invalid--PaddingRight	2rem
--pf-c-form-control--invalid--PaddingRight --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-form-control	--pf-c-form-control--invalid--BackgroundPositionX	calc(100% - 0.5rem)
--pf-c-form-control--invalid--BackgroundPositionX calc(100% - --pf-c-form-control--PaddingLeft) calc(100% - --pf-c-form-control--inset--base) calc(100% - --pf-global--spacer--sm) calc(100% - $pf-global--spacer--sm) calc(100% - pf-size-prem(8px)) calc(100% - 0.5rem)
	.pf-c-form-control	--pf-c-form-control--invalid--BackgroundPositionY	center
	.pf-c-form-control	--pf-c-form-control--invalid--BackgroundPosition	calc(100% - 0.5rem) center
--pf-c-form-control--invalid--BackgroundPosition --pf-c-form-control--invalid--BackgroundPositionX --pf-c-form-control--invalid--BackgroundPositionY calc(100% - --pf-c-form-control--PaddingLeft) center calc(100% - --pf-c-form-control--inset--base) center calc(100% - --pf-global--spacer--sm) center calc(100% - $pf-global--spacer--sm) center calc(100% - pf-size-prem(8px)) center calc(100% - 0.5rem) center
	.pf-c-form-control	--pf-c-form-control--invalid--BackgroundSizeX	1rem
--pf-c-form-control--invalid--BackgroundSizeX --pf-c-form-control--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-form-control	--pf-c-form-control--invalid--BackgroundSizeY	1rem
--pf-c-form-control--invalid--BackgroundSizeY --pf-c-form-control--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-form-control	--pf-c-form-control--invalid--BackgroundSize	1rem 1rem
--pf-c-form-control--invalid--BackgroundSize --pf-c-form-control--invalid--BackgroundSizeX --pf-c-form-control--invalid--BackgroundSizeY --pf-c-form-control--FontSize --pf-c-form-control--FontSize --pf-global--FontSize--md --pf-global--FontSize--md $pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) pf-font-prem(16px) 1rem 1rem
	.pf-c-form-control	--pf-c-form-control--invalid--BackgroundUrl	url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E")
	.pf-c-form-control	--pf-c-form-control--invalid--exclamation--Background	url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E") calc(100% - 0.5rem) center / 1rem 1rem no-repeat
--pf-c-form-control--invalid--exclamation--Background --pf-c-form-control--invalid--BackgroundUrl --pf-c-form-control--invalid--BackgroundPosition / --pf-c-form-control--invalid--BackgroundSize no-repeat url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E") --pf-c-form-control--invalid--BackgroundPositionX --pf-c-form-control--invalid--BackgroundPositionY / --pf-c-form-control--invalid--BackgroundSizeX --pf-c-form-control--invalid--BackgroundSizeY no-repeat url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E") calc(100% - --pf-c-form-control--PaddingLeft) center / --pf-c-form-control--FontSize --pf-c-form-control--FontSize no-repeat url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E") calc(100% - --pf-c-form-control--inset--base) center / --pf-global--FontSize--md --pf-global--FontSize--md no-repeat url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E") calc(100% - --pf-global--spacer--sm) center / $pf-global--FontSize--md $pf-global--FontSize--md no-repeat url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E") calc(100% - $pf-global--spacer--sm) center / $pf-global--FontSize--md $pf-global--FontSize--md no-repeat url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E") calc(100% - pf-size-prem(8px)) center / pf-font-prem(16px) pf-font-prem(16px) no-repeat url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E") calc(100% - 0.5rem) center / 1rem 1rem no-repeat
	.pf-c-form-control	--pf-c-form-control--invalid--Background	#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E") calc(100% - 0.5rem) center / 1rem 1rem no-repeat
--pf-c-form-control--invalid--Background --pf-c-form-control--BackgroundColor --pf-c-form-control--invalid--exclamation--Background --pf-global--BackgroundColor--100 --pf-c-form-control--invalid--BackgroundUrl --pf-c-form-control--invalid--BackgroundPosition / --pf-c-form-control--invalid--BackgroundSize no-repeat $pf-global--BackgroundColor--100 url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E") --pf-c-form-control--invalid--BackgroundPositionX --pf-c-form-control--invalid--BackgroundPositionY / --pf-c-form-control--invalid--BackgroundSizeX --pf-c-form-control--invalid--BackgroundSizeY no-repeat $pf-global--BackgroundColor--100 url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E") calc(100% - --pf-c-form-control--PaddingLeft) center / --pf-c-form-control--FontSize --pf-c-form-control--FontSize no-repeat $pf-global--BackgroundColor--100 url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E") calc(100% - --pf-c-form-control--inset--base) center / --pf-global--FontSize--md --pf-global--FontSize--md no-repeat $pf-global--BackgroundColor--100 url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E") calc(100% - --pf-global--spacer--sm) center / $pf-global--FontSize--md $pf-global--FontSize--md no-repeat $pf-global--BackgroundColor--100 url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E") calc(100% - $pf-global--spacer--sm) center / $pf-global--FontSize--md $pf-global--FontSize--md no-repeat $pf-color-white url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E") calc(100% - pf-size-prem(8px)) center / pf-font-prem(16px) pf-font-prem(16px) no-repeat #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E") calc(100% - pf-size-prem(8px)) center / pf-font-prem(16px) pf-font-prem(16px) no-repeat #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E") calc(100% - 0.5rem) center / 1rem 1rem no-repeat
	.pf-c-form-control	--pf-c-form-control--m-search--PaddingLeft	2rem
--pf-c-form-control--m-search--PaddingLeft --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-form-control	--pf-c-form-control--m-search--BackgroundPosition	0.5rem
--pf-c-form-control--m-search--BackgroundPosition --pf-c-form-control--PaddingRight --pf-c-form-control--inset--base --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-form-control	--pf-c-form-control--m-search--BackgroundSize	1rem 1rem
--pf-c-form-control--m-search--BackgroundSize --pf-c-form-control--FontSize --pf-c-form-control--FontSize --pf-global--FontSize--md --pf-global--FontSize--md $pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) pf-font-prem(16px) 1rem 1rem
	.pf-c-form-control	--pf-c-form-control--m-search--BackgroundUrl	url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236a6e73' d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E")
	.pf-c-form-control	--pf-c-form-control--m-icon--PaddingRight	calc(0.5rem + 1rem + 0.5rem)
--pf-c-form-control--m-icon--PaddingRight calc(--pf-c-form-control--inset--base + --pf-c-form-control--m-icon--BackgroundSizeX + --pf-c-form-control--m-icon--icon--spacer) calc(--pf-global--spacer--sm + --pf-c-form-control--FontSize + --pf-global--spacer--sm) calc($pf-global--spacer--sm + --pf-global--FontSize--md + $pf-global--spacer--sm) calc($pf-global--spacer--sm + $pf-global--FontSize--md + $pf-global--spacer--sm) calc(pf-size-prem(8px) + pf-font-prem(16px) + pf-size-prem(8px)) calc(0.5rem + 1rem + 0.5rem)
	.pf-c-form-control	--pf-c-form-control--m-icon--BackgroundUrl	none
	.pf-c-form-control	--pf-c-form-control--m-icon--BackgroundPositionX	calc(100% - 0.5rem)
--pf-c-form-control--m-icon--BackgroundPositionX calc(100% - --pf-c-form-control--inset--base) calc(100% - --pf-global--spacer--sm) calc(100% - $pf-global--spacer--sm) calc(100% - pf-size-prem(8px)) calc(100% - 0.5rem)
	.pf-c-form-control	--pf-c-form-control--m-icon--BackgroundPositionY	center
	.pf-c-form-control	--pf-c-form-control--m-icon--BackgroundSizeX	1rem
--pf-c-form-control--m-icon--BackgroundSizeX --pf-c-form-control--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-form-control	--pf-c-form-control--m-icon--BackgroundSizeY	1rem
--pf-c-form-control--m-icon--BackgroundSizeY --pf-c-form-control--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-form-control	--pf-c-form-control--m-icon--icon--spacer	0.5rem
--pf-c-form-control--m-icon--icon--spacer --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-form-control	--pf-c-form-control--m-icon--icon--PaddingRight	calc(0.5rem + 1rem + 0.5rem + 1rem + 0.5rem)
--pf-c-form-control--m-icon--icon--PaddingRight calc(--pf-c-form-control--inset--base + --pf-c-form-control--invalid--BackgroundSizeX + --pf-c-form-control--m-icon--icon--spacer + --pf-c-form-control--m-icon--BackgroundSizeX + --pf-c-form-control--m-icon--icon--spacer) calc(--pf-global--spacer--sm + --pf-c-form-control--FontSize + --pf-global--spacer--sm + --pf-c-form-control--FontSize + --pf-global--spacer--sm) calc($pf-global--spacer--sm + --pf-global--FontSize--md + $pf-global--spacer--sm + --pf-global--FontSize--md + $pf-global--spacer--sm) calc($pf-global--spacer--sm + $pf-global--FontSize--md + $pf-global--spacer--sm + $pf-global--FontSize--md + $pf-global--spacer--sm) calc(pf-size-prem(8px) + pf-font-prem(16px) + pf-size-prem(8px) + pf-font-prem(16px) + pf-size-prem(8px)) calc(0.5rem + 1rem + 0.5rem + 1rem + 0.5rem)
	.pf-c-form-control	--pf-c-form-control--m-icon--icon--BackgroundPositionX	calc(calc(100% - 0.5rem) - 0.5rem - 1rem)
--pf-c-form-control--m-icon--icon--BackgroundPositionX calc(--pf-c-form-control--m-icon--BackgroundPositionX - --pf-c-form-control--m-icon--icon--spacer - --pf-c-form-control--invalid--BackgroundSizeX) calc(calc(100% - --pf-c-form-control--inset--base) - --pf-global--spacer--sm - --pf-c-form-control--FontSize) calc(calc(100% - --pf-global--spacer--sm) - $pf-global--spacer--sm - --pf-global--FontSize--md) calc(calc(100% - $pf-global--spacer--sm) - $pf-global--spacer--sm - $pf-global--FontSize--md) calc(calc(100% - pf-size-prem(8px)) - pf-size-prem(8px) - pf-font-prem(16px)) calc(calc(100% - 0.5rem) - 0.5rem - 1rem)
	.pf-c-form-control	--pf-c-form-control--m-icon--invalid--BackgroundUrl	url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E"), none
--pf-c-form-control--m-icon--invalid--BackgroundUrl --pf-c-form-control--invalid--BackgroundUrl, --pf-c-form-control--m-icon--BackgroundUrl url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E"), none
	.pf-c-form-control	--pf-c-form-control--m-icon--invalid--BackgroundPosition	calc(100% - 0.5rem) center, calc(calc(100% - 0.5rem) - 0.5rem - 1rem) center
--pf-c-form-control--m-icon--invalid--BackgroundPosition --pf-c-form-control--invalid--BackgroundPosition, --pf-c-form-control--m-icon--icon--BackgroundPositionX --pf-c-form-control--m-icon--BackgroundPositionY --pf-c-form-control--invalid--BackgroundPositionX --pf-c-form-control--invalid--BackgroundPositionY, calc(--pf-c-form-control--m-icon--BackgroundPositionX - --pf-c-form-control--m-icon--icon--spacer - --pf-c-form-control--invalid--BackgroundSizeX) center calc(100% - --pf-c-form-control--PaddingLeft) center, calc(calc(100% - --pf-c-form-control--inset--base) - --pf-global--spacer--sm - --pf-c-form-control--FontSize) center calc(100% - --pf-c-form-control--inset--base) center, calc(calc(100% - --pf-global--spacer--sm) - $pf-global--spacer--sm - --pf-global--FontSize--md) center calc(100% - --pf-global--spacer--sm) center, calc(calc(100% - $pf-global--spacer--sm) - $pf-global--spacer--sm - $pf-global--FontSize--md) center calc(100% - $pf-global--spacer--sm) center, calc(calc(100% - $pf-global--spacer--sm) - $pf-global--spacer--sm - $pf-global--FontSize--md) center calc(100% - pf-size-prem(8px)) center, calc(calc(100% - pf-size-prem(8px)) - pf-size-prem(8px) - pf-font-prem(16px)) center calc(100% - 0.5rem) center, calc(calc(100% - 0.5rem) - 0.5rem - 1rem) center
	.pf-c-form-control	--pf-c-form-control--m-icon--invalid--BackgroundSize	1rem 1rem, 1rem 1rem
--pf-c-form-control--m-icon--invalid--BackgroundSize --pf-c-form-control--invalid--BackgroundSize, --pf-c-form-control--m-icon--BackgroundSizeX --pf-c-form-control--m-icon--BackgroundSizeY --pf-c-form-control--invalid--BackgroundSizeX --pf-c-form-control--invalid--BackgroundSizeY, --pf-c-form-control--FontSize --pf-c-form-control--FontSize --pf-c-form-control--FontSize --pf-c-form-control--FontSize, --pf-global--FontSize--md --pf-global--FontSize--md --pf-global--FontSize--md --pf-global--FontSize--md, $pf-global--FontSize--md $pf-global--FontSize--md $pf-global--FontSize--md $pf-global--FontSize--md, $pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) pf-font-prem(16px), pf-font-prem(16px) pf-font-prem(16px) 1rem 1rem, 1rem 1rem
	.pf-c-form-control	--pf-c-form-control--m-icon--success--BackgroundUrl	url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%233e8635' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E"), none
--pf-c-form-control--m-icon--success--BackgroundUrl --pf-c-form-control--success--BackgroundUrl, --pf-c-form-control--m-icon--BackgroundUrl url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%233e8635' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E"), none
	.pf-c-form-control	--pf-c-form-control--m-icon--success--BackgroundPosition	calc(100% - 0.5rem) center, calc(calc(100% - 0.5rem) - 0.5rem - 1rem) center
--pf-c-form-control--m-icon--success--BackgroundPosition --pf-c-form-control--success--BackgroundPosition, --pf-c-form-control--m-icon--icon--BackgroundPositionX --pf-c-form-control--m-icon--BackgroundPositionY --pf-c-form-control--success--BackgroundPositionX --pf-c-form-control--success--BackgroundPositionY, calc(--pf-c-form-control--m-icon--BackgroundPositionX - --pf-c-form-control--m-icon--icon--spacer - --pf-c-form-control--invalid--BackgroundSizeX) center calc(100% - --pf-c-form-control--PaddingLeft) center, calc(calc(100% - --pf-c-form-control--inset--base) - --pf-global--spacer--sm - --pf-c-form-control--FontSize) center calc(100% - --pf-c-form-control--inset--base) center, calc(calc(100% - --pf-global--spacer--sm) - $pf-global--spacer--sm - --pf-global--FontSize--md) center calc(100% - --pf-global--spacer--sm) center, calc(calc(100% - $pf-global--spacer--sm) - $pf-global--spacer--sm - $pf-global--FontSize--md) center calc(100% - $pf-global--spacer--sm) center, calc(calc(100% - $pf-global--spacer--sm) - $pf-global--spacer--sm - $pf-global--FontSize--md) center calc(100% - pf-size-prem(8px)) center, calc(calc(100% - pf-size-prem(8px)) - pf-size-prem(8px) - pf-font-prem(16px)) center calc(100% - 0.5rem) center, calc(calc(100% - 0.5rem) - 0.5rem - 1rem) center
	.pf-c-form-control	--pf-c-form-control--m-icon--success--BackgroundSize	1rem 1rem, 1rem 1rem
--pf-c-form-control--m-icon--success--BackgroundSize --pf-c-form-control--success--BackgroundSize, --pf-c-form-control--m-icon--BackgroundSizeX --pf-c-form-control--m-icon--BackgroundSizeY --pf-c-form-control--success--BackgroundSizeX --pf-c-form-control--success--BackgroundSizeY, --pf-c-form-control--FontSize --pf-c-form-control--FontSize --pf-c-form-control--FontSize --pf-c-form-control--FontSize, --pf-global--FontSize--md --pf-global--FontSize--md --pf-global--FontSize--md --pf-global--FontSize--md, $pf-global--FontSize--md $pf-global--FontSize--md $pf-global--FontSize--md $pf-global--FontSize--md, $pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) pf-font-prem(16px), pf-font-prem(16px) pf-font-prem(16px) 1rem 1rem, 1rem 1rem
	.pf-c-form-control	--pf-c-form-control--m-icon--m-warning--BackgroundUrl	url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23f0ab00' d='M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E"), none
--pf-c-form-control--m-icon--m-warning--BackgroundUrl --pf-c-form-control--m-warning--BackgroundUrl, --pf-c-form-control--m-icon--BackgroundUrl url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23f0ab00' d='M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E"), none
	.pf-c-form-control	--pf-c-form-control--m-icon--m-warning--BackgroundPosition	calc(100% - calc(0.5rem - 0.0625rem)) center, calc(calc(100% - 0.5rem) - 0.5rem - 1rem) center
--pf-c-form-control--m-icon--m-warning--BackgroundPosition --pf-c-form-control--m-warning--BackgroundPosition, --pf-c-form-control--m-icon--icon--BackgroundPositionX --pf-c-form-control--m-icon--BackgroundPositionY --pf-c-form-control--m-warning--BackgroundPositionX --pf-c-form-control--m-warning--BackgroundPositionY, calc(--pf-c-form-control--m-icon--BackgroundPositionX - --pf-c-form-control--m-icon--icon--spacer - --pf-c-form-control--invalid--BackgroundSizeX) center calc(100% - calc(--pf-c-form-control--PaddingLeft - 0.0625rem)) center, calc(calc(100% - --pf-c-form-control--inset--base) - --pf-global--spacer--sm - --pf-c-form-control--FontSize) center calc(100% - calc(--pf-c-form-control--inset--base - 0.0625rem)) center, calc(calc(100% - --pf-global--spacer--sm) - $pf-global--spacer--sm - --pf-global--FontSize--md) center calc(100% - calc(--pf-global--spacer--sm - 0.0625rem)) center, calc(calc(100% - $pf-global--spacer--sm) - $pf-global--spacer--sm - $pf-global--FontSize--md) center calc(100% - calc($pf-global--spacer--sm - 0.0625rem)) center, calc(calc(100% - $pf-global--spacer--sm) - $pf-global--spacer--sm - $pf-global--FontSize--md) center calc(100% - calc(pf-size-prem(8px) - 0.0625rem)) center, calc(calc(100% - pf-size-prem(8px)) - pf-size-prem(8px) - pf-font-prem(16px)) center calc(100% - calc(0.5rem - 0.0625rem)) center, calc(calc(100% - 0.5rem) - 0.5rem - 1rem) center
	.pf-c-form-control	--pf-c-form-control--m-icon--m-warning--BackgroundSize	1.25rem 1rem, 1rem 1rem
--pf-c-form-control--m-icon--m-warning--BackgroundSize --pf-c-form-control--m-warning--BackgroundSize, --pf-c-form-control--m-icon--BackgroundSizeX --pf-c-form-control--m-icon--BackgroundSizeY --pf-c-form-control--m-warning--BackgroundSizeX --pf-c-form-control--m-warning--BackgroundSizeY, --pf-c-form-control--FontSize --pf-c-form-control--FontSize 1.25rem --pf-c-form-control--FontSize, --pf-global--FontSize--md --pf-global--FontSize--md 1.25rem --pf-global--FontSize--md, $pf-global--FontSize--md $pf-global--FontSize--md 1.25rem $pf-global--FontSize--md, $pf-global--FontSize--md $pf-global--FontSize--md 1.25rem pf-font-prem(16px), pf-font-prem(16px) pf-font-prem(16px) 1.25rem 1rem, 1rem 1rem
	.pf-c-form-control	--pf-c-form-control--m-calendar--BackgroundUrl	url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236a6e73' d='M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z'/%3E%3C/svg%3E")
	.pf-c-form-control	--pf-c-form-control--m-clock--BackgroundUrl	url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236a6e73' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z'/%3E%3C/svg%3E")
	.pf-c-form-control	--pf-c-form-control__select--PaddingRight	calc(1.5rem + 1px + 1px)
--pf-c-form-control__select--PaddingRight calc(--pf-global--spacer--lg + --pf-c-form-control--BorderWidth + --pf-c-form-control--BorderWidth) calc($pf-global--spacer--lg + --pf-global--BorderWidth--sm + --pf-global--BorderWidth--sm) calc($pf-global--spacer--lg + $pf-global--BorderWidth--sm + $pf-global--BorderWidth--sm) calc(pf-size-prem(24px) + 1px + 1px) calc(1.5rem + 1px + 1px)
	.pf-c-form-control	--pf-c-form-control__select--PaddingLeft	calc(0.5rem - 1px)
--pf-c-form-control__select--PaddingLeft calc(--pf-global--spacer--sm - --pf-c-form-control--BorderWidth) calc($pf-global--spacer--sm - --pf-global--BorderWidth--sm) calc($pf-global--spacer--sm - $pf-global--BorderWidth--sm) calc(pf-size-prem(8px) - 1px) calc(0.5rem - 1px)
	.pf-c-form-control	--pf-c-form-control__select--BackgroundUrl	url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E")
	.pf-c-form-control	--pf-c-form-control__select--BackgroundSize	.625em
	.pf-c-form-control	--pf-c-form-control__select--BackgroundPositionX	calc(100% - 1rem + 1px)
--pf-c-form-control__select--BackgroundPositionX calc(100% - --pf-global--spacer--md + 1px) calc(100% - $pf-global--spacer--md + 1px) calc(100% - pf-size-prem(16px) + 1px) calc(100% - 1rem + 1px)
	.pf-c-form-control	--pf-c-form-control__select--BackgroundPositionY	center
	.pf-c-form-control	--pf-c-form-control__select--BackgroundPosition	calc(100% - 1rem + 1px) center
--pf-c-form-control__select--BackgroundPosition --pf-c-form-control__select--BackgroundPositionX --pf-c-form-control__select--BackgroundPositionY calc(100% - --pf-global--spacer--md + 1px) center calc(100% - $pf-global--spacer--md + 1px) center calc(100% - pf-size-prem(16px) + 1px) center calc(100% - 1rem + 1px) center
	.pf-c-form-control	--pf-c-form-control__select--success--PaddingRight	4rem
--pf-c-form-control__select--success--PaddingRight --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-c-form-control	--pf-c-form-control__select--success--BackgroundPosition	calc(calc(100% - 1rem + 1px) - 1.5rem)
--pf-c-form-control__select--success--BackgroundPosition calc(--pf-c-form-control__select--BackgroundPositionX - --pf-global--spacer--lg) calc(calc(100% - --pf-global--spacer--md + 1px) - $pf-global--spacer--lg) calc(calc(100% - $pf-global--spacer--md + 1px) - $pf-global--spacer--lg) calc(calc(100% - pf-size-prem(16px) + 1px) - pf-size-prem(24px)) calc(calc(100% - 1rem + 1px) - 1.5rem)
	.pf-c-form-control	--pf-c-form-control__select--m-warning--PaddingRight	4rem
--pf-c-form-control__select--m-warning--PaddingRight --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-c-form-control	--pf-c-form-control__select--m-warning--BackgroundPosition	calc(calc(100% - 1rem + 1px) - 1.5rem + 0.0625rem)
--pf-c-form-control__select--m-warning--BackgroundPosition calc(--pf-c-form-control__select--BackgroundPositionX - --pf-global--spacer--lg + 0.0625rem) calc(calc(100% - --pf-global--spacer--md + 1px) - $pf-global--spacer--lg + 0.0625rem) calc(calc(100% - $pf-global--spacer--md + 1px) - $pf-global--spacer--lg + 0.0625rem) calc(calc(100% - pf-size-prem(16px) + 1px) - pf-size-prem(24px) + 0.0625rem) calc(calc(100% - 1rem + 1px) - 1.5rem + 0.0625rem)
	.pf-c-form-control	--pf-c-form-control__select--invalid--PaddingRight	4rem
--pf-c-form-control__select--invalid--PaddingRight --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-c-form-control	--pf-c-form-control__select--invalid--BackgroundPosition	calc(calc(100% - 1rem + 1px) - 1.5rem)
--pf-c-form-control__select--invalid--BackgroundPosition calc(--pf-c-form-control__select--BackgroundPositionX - --pf-global--spacer--lg) calc(calc(100% - --pf-global--spacer--md + 1px) - $pf-global--spacer--lg) calc(calc(100% - $pf-global--spacer--md + 1px) - $pf-global--spacer--lg) calc(calc(100% - pf-size-prem(16px) + 1px) - pf-size-prem(24px)) calc(calc(100% - 1rem + 1px) - 1.5rem)
	.pf-c-form-control	--pf-c-form-control--textarea--Width	100%
--pf-c-form-control--textarea--Width --pf-c-form-control--Width 100%
	.pf-c-form-control	--pf-c-form-control--textarea--Height	auto
	.pf-c-form-control	--pf-c-form-control--textarea--success--BackgroundPositionY	0.5rem
--pf-c-form-control--textarea--success--BackgroundPositionY --pf-c-form-control--PaddingLeft --pf-c-form-control--inset--base --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-form-control	--pf-c-form-control--textarea--m-warning--BackgroundPositionY	0.5rem
--pf-c-form-control--textarea--m-warning--BackgroundPositionY --pf-c-form-control--PaddingLeft --pf-c-form-control--inset--base --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-form-control	--pf-c-form-control--textarea--invalid--BackgroundPositionY	0.5rem
--pf-c-form-control--textarea--invalid--BackgroundPositionY --pf-c-form-control--PaddingLeft --pf-c-form-control--inset--base --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-form-control	--pf-c-form-control--m-icon-sprite--success--BackgroundUrl	url("../../assets/images/status-icon-sprite.svg#success")
	.pf-c-form-control	--pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl	url("../../assets/images/status-icon-sprite.svg#warning")
	.pf-c-form-control	--pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl	url("../../assets/images/status-icon-sprite.svg#invalid")
	.pf-c-form-control	--pf-c-form-control--m-icon-sprite__select--BackgroundUrl	url("../../assets/images/status-icon-sprite.svg#select")
	.pf-c-form-control	--pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl	url("../../assets/images/status-icon-sprite.svg#search")
	.pf-c-form-control	--pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl	url("../../assets/images/status-icon-sprite.svg#calendar")
	.pf-c-form-control	--pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl	url("../../assets/images/status-icon-sprite.svg#clock")
	.pf-c-form-control	--pf-c-form-control--m-icon-sprite__select--BackgroundSize	1rem
--pf-c-form-control--m-icon-sprite__select--BackgroundSize --pf-c-form-control--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-form-control	--pf-c-form-control--m-icon-sprite__select--BackgroundPositionX	calc(100% - 1rem + 7px)
--pf-c-form-control--m-icon-sprite__select--BackgroundPositionX calc(100% - --pf-global--spacer--md + 7px) calc(100% - $pf-global--spacer--md + 7px) calc(100% - pf-size-prem(16px) + 7px) calc(100% - 1rem + 7px)
	.pf-c-form-control	--pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition	calc(100% - 1rem + 1px - 1.5rem)
--pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition calc(100% - --pf-global--spacer--md + 1px - --pf-global--spacer--lg) calc(100% - $pf-global--spacer--md + 1px - $pf-global--spacer--lg) calc(100% - pf-size-prem(16px) + 1px - pf-size-prem(24px)) calc(100% - 1rem + 1px - 1.5rem)
	.pf-c-form-control	--pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition	calc(100% - 1rem - 1.5rem + 0.0625rem)
--pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition calc(100% - --pf-global--spacer--md - --pf-global--spacer--lg + 0.0625rem) calc(100% - $pf-global--spacer--md - $pf-global--spacer--lg + 0.0625rem) calc(100% - pf-size-prem(16px) - pf-size-prem(24px) + 0.0625rem) calc(100% - 1rem - 1.5rem + 0.0625rem)
	.pf-c-form-control	--pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition	calc(100% - 1rem - 1.5rem)
--pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition calc(100% - --pf-global--spacer--md - --pf-global--spacer--lg) calc(100% - $pf-global--spacer--md - $pf-global--spacer--lg) calc(100% - pf-size-prem(16px) - pf-size-prem(24px)) calc(100% - 1rem - 1.5rem)
	.pf-c-form-control[readonly]:not(.pf-m-success):not([aria-invalid=true]):hover	--pf-c-form-control--BorderBottomColor	#8a8d90
--pf-c-form-control--BorderBottomColor --pf-c-form-control--readonly--hover--BorderBottomColor --pf-global--BorderColor--200 $pf-global--BorderColor--200 $pf-color-black-500 #8a8d90
	.pf-c-form-control[readonly]:not(.pf-m-success):not([aria-invalid=true]):focus	--pf-c-form-control--focus--PaddingBottom	calc(0.375rem - 1px)
--pf-c-form-control--focus--PaddingBottom --pf-c-form-control--readonly--focus--PaddingBottom calc(--pf-global--spacer--form-element - --pf-global--BorderWidth--sm) calc($pf-global--spacer--form-element - $pf-global--BorderWidth--sm) calc(pf-size-prem(6px) - 1px) calc(0.375rem - 1px)
	.pf-c-form-control[readonly]:not(.pf-m-success):not([aria-invalid=true]):focus	--pf-c-form-control--focus--BorderBottomWidth	1px
--pf-c-form-control--focus--BorderBottomWidth --pf-c-form-control--readonly--focus--BorderBottomWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-form-control[readonly]:not(.pf-m-success):not([aria-invalid=true]):focus	--pf-c-form-control--focus--BorderBottomColor	#8a8d90
--pf-c-form-control--focus--BorderBottomColor --pf-c-form-control--readonly--focus--BorderBottomColor --pf-global--BorderColor--200 $pf-global--BorderColor--200 $pf-color-black-500 #8a8d90
	.pf-c-form-control[readonly].pf-m-plain	--pf-c-form-control--readonly--BackgroundColor	transparent
--pf-c-form-control--readonly--BackgroundColor --pf-c-form-control--readonly--m-plain--BackgroundColor transparent
	.pf-c-form-control[readonly].pf-m-plain	--pf-c-form-control--inset--base	0
--pf-c-form-control--inset--base --pf-c-form-control--readonly--m-plain--inset--base 0
	.pf-c-form-control:hover	--pf-c-form-control--BorderBottomColor	#06c
--pf-c-form-control--BorderBottomColor --pf-c-form-control--hover--BorderBottomColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-form-control:focus	--pf-c-form-control--BorderBottomColor	#06c
--pf-c-form-control--BorderBottomColor --pf-c-form-control--focus--BorderBottomColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-form-control.pf-m-expanded	--pf-c-form-control--BorderBottomColor	#06c
--pf-c-form-control--BorderBottomColor --pf-c-form-control--m-expanded--BorderBottomColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-form-control:disabled	--pf-c-form-control--BackgroundColor	#f0f0f0
--pf-c-form-control--BackgroundColor --pf-c-form-control--disabled--BackgroundColor --pf-global--disabled-color--300 $pf-global--disabled-color--300 $pf-color-black-200 #f0f0f0
	.pf-c-form-control[aria-invalid=true]	--pf-c-form-control--PaddingRight	2rem
--pf-c-form-control--PaddingRight --pf-c-form-control--invalid--PaddingRight --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-form-control[aria-invalid=true]	--pf-c-form-control--BorderBottomColor	#c9190b
--pf-c-form-control--BorderBottomColor --pf-c-form-control--invalid--BorderBottomColor --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-form-control[aria-invalid=true].pf-m-icon	--pf-c-form-control--PaddingRight	calc(0.5rem + 1rem + 0.5rem + 1rem + 0.5rem)
--pf-c-form-control--PaddingRight --pf-c-form-control--m-icon--icon--PaddingRight calc(--pf-c-form-control--inset--base + --pf-c-form-control--invalid--BackgroundSizeX + --pf-c-form-control--m-icon--icon--spacer + --pf-c-form-control--m-icon--BackgroundSizeX + --pf-c-form-control--m-icon--icon--spacer) calc(--pf-global--spacer--sm + --pf-c-form-control--FontSize + --pf-global--spacer--sm + --pf-c-form-control--FontSize + --pf-global--spacer--sm) calc($pf-global--spacer--sm + --pf-global--FontSize--md + $pf-global--spacer--sm + --pf-global--FontSize--md + $pf-global--spacer--sm) calc($pf-global--spacer--sm + $pf-global--FontSize--md + $pf-global--spacer--sm + $pf-global--FontSize--md + $pf-global--spacer--sm) calc(pf-size-prem(8px) + pf-font-prem(16px) + pf-size-prem(8px) + pf-font-prem(16px) + pf-size-prem(8px)) calc(0.5rem + 1rem + 0.5rem + 1rem + 0.5rem)
	.pf-c-form-control.pf-m-success	--pf-c-form-control--PaddingRight	2rem
--pf-c-form-control--PaddingRight --pf-c-form-control--success--PaddingRight --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-form-control.pf-m-success	--pf-c-form-control--BorderBottomColor	#3e8635
--pf-c-form-control--BorderBottomColor --pf-c-form-control--success--BorderBottomColor --pf-global--success-color--100 $pf-global--success-color--100 $pf-color-green-500 #3e8635
	.pf-c-form-control.pf-m-success.pf-m-icon	--pf-c-form-control--PaddingRight	calc(0.5rem + 1rem + 0.5rem + 1rem + 0.5rem)
--pf-c-form-control--PaddingRight --pf-c-form-control--m-icon--icon--PaddingRight calc(--pf-c-form-control--inset--base + --pf-c-form-control--invalid--BackgroundSizeX + --pf-c-form-control--m-icon--icon--spacer + --pf-c-form-control--m-icon--BackgroundSizeX + --pf-c-form-control--m-icon--icon--spacer) calc(--pf-global--spacer--sm + --pf-c-form-control--FontSize + --pf-global--spacer--sm + --pf-c-form-control--FontSize + --pf-global--spacer--sm) calc($pf-global--spacer--sm + --pf-global--FontSize--md + $pf-global--spacer--sm + --pf-global--FontSize--md + $pf-global--spacer--sm) calc($pf-global--spacer--sm + $pf-global--FontSize--md + $pf-global--spacer--sm + $pf-global--FontSize--md + $pf-global--spacer--sm) calc(pf-size-prem(8px) + pf-font-prem(16px) + pf-size-prem(8px) + pf-font-prem(16px) + pf-size-prem(8px)) calc(0.5rem + 1rem + 0.5rem + 1rem + 0.5rem)
	.pf-c-form-control.pf-m-warning	--pf-c-form-control--PaddingRight	2rem
--pf-c-form-control--PaddingRight --pf-c-form-control--m-warning--PaddingRight --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-form-control.pf-m-warning	--pf-c-form-control--BorderBottomColor	#f0ab00
--pf-c-form-control--BorderBottomColor --pf-c-form-control--m-warning--BorderBottomColor --pf-global--warning-color--100 $pf-global--warning-color--100 $pf-color-gold-400 #f0ab00
	.pf-c-form-control.pf-m-warning.pf-m-icon	--pf-c-form-control--PaddingRight	calc(0.5rem + 1rem + 0.5rem + 1rem + 0.5rem)
--pf-c-form-control--PaddingRight --pf-c-form-control--m-icon--icon--PaddingRight calc(--pf-c-form-control--inset--base + --pf-c-form-control--invalid--BackgroundSizeX + --pf-c-form-control--m-icon--icon--spacer + --pf-c-form-control--m-icon--BackgroundSizeX + --pf-c-form-control--m-icon--icon--spacer) calc(--pf-global--spacer--sm + --pf-c-form-control--FontSize + --pf-global--spacer--sm + --pf-c-form-control--FontSize + --pf-global--spacer--sm) calc($pf-global--spacer--sm + --pf-global--FontSize--md + $pf-global--spacer--sm + --pf-global--FontSize--md + $pf-global--spacer--sm) calc($pf-global--spacer--sm + $pf-global--FontSize--md + $pf-global--spacer--sm + $pf-global--FontSize--md + $pf-global--spacer--sm) calc(pf-size-prem(8px) + pf-font-prem(16px) + pf-size-prem(8px) + pf-font-prem(16px) + pf-size-prem(8px)) calc(0.5rem + 1rem + 0.5rem + 1rem + 0.5rem)
	.pf-c-form-control.pf-m-search	--pf-c-form-control--PaddingLeft	2rem
--pf-c-form-control--PaddingLeft --pf-c-form-control--m-search--PaddingLeft --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-form-control.pf-m-icon	--pf-c-form-control--PaddingRight	calc(0.5rem + 1rem + 0.5rem)
--pf-c-form-control--PaddingRight --pf-c-form-control--m-icon--PaddingRight calc(--pf-c-form-control--inset--base + --pf-c-form-control--m-icon--BackgroundSizeX + --pf-c-form-control--m-icon--icon--spacer) calc(--pf-global--spacer--sm + --pf-c-form-control--FontSize + --pf-global--spacer--sm) calc($pf-global--spacer--sm + --pf-global--FontSize--md + $pf-global--spacer--sm) calc($pf-global--spacer--sm + $pf-global--FontSize--md + $pf-global--spacer--sm) calc(pf-size-prem(8px) + pf-font-prem(16px) + pf-size-prem(8px)) calc(0.5rem + 1rem + 0.5rem)
	.pf-c-form-control.pf-m-icon.pf-m-calendar	--pf-c-form-control--m-icon--BackgroundUrl	url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236a6e73' d='M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z'/%3E%3C/svg%3E")
--pf-c-form-control--m-icon--BackgroundUrl --pf-c-form-control--m-calendar--BackgroundUrl url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236a6e73' d='M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z'/%3E%3C/svg%3E")
	.pf-c-form-control.pf-m-icon.pf-m-clock	--pf-c-form-control--m-icon--BackgroundUrl	url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236a6e73' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z'/%3E%3C/svg%3E")
--pf-c-form-control--m-icon--BackgroundUrl --pf-c-form-control--m-clock--BackgroundUrl url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236a6e73' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z'/%3E%3C/svg%3E")
	.pf-c-form-control.pf-m-icon-sprite	--pf-c-form-control--success--BackgroundUrl	url("../../assets/images/status-icon-sprite.svg#success")
--pf-c-form-control--success--BackgroundUrl --pf-c-form-control--m-icon-sprite--success--BackgroundUrl url("../../assets/images/status-icon-sprite.svg#success")
	.pf-c-form-control.pf-m-icon-sprite	--pf-c-form-control--m-warning--BackgroundUrl	url("../../assets/images/status-icon-sprite.svg#warning")
--pf-c-form-control--m-warning--BackgroundUrl --pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl url("../../assets/images/status-icon-sprite.svg#warning")
	.pf-c-form-control.pf-m-icon-sprite	--pf-c-form-control--invalid--BackgroundUrl	url("../../assets/images/status-icon-sprite.svg#invalid")
--pf-c-form-control--invalid--BackgroundUrl --pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl url("../../assets/images/status-icon-sprite.svg#invalid")
	.pf-c-form-control.pf-m-icon-sprite	--pf-c-form-control__select--BackgroundUrl	url("../../assets/images/status-icon-sprite.svg#select")
--pf-c-form-control__select--BackgroundUrl --pf-c-form-control--m-icon-sprite__select--BackgroundUrl url("../../assets/images/status-icon-sprite.svg#select")
	.pf-c-form-control.pf-m-icon-sprite	--pf-c-form-control--m-search--BackgroundUrl	url("../../assets/images/status-icon-sprite.svg#search")
--pf-c-form-control--m-search--BackgroundUrl --pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl url("../../assets/images/status-icon-sprite.svg#search")
	.pf-c-form-control.pf-m-icon-sprite	--pf-c-form-control--m-calendar--BackgroundUrl	url("../../assets/images/status-icon-sprite.svg#calendar")
--pf-c-form-control--m-calendar--BackgroundUrl --pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl url("../../assets/images/status-icon-sprite.svg#calendar")
	.pf-c-form-control.pf-m-icon-sprite	--pf-c-form-control--m-clock--BackgroundUrl	url("../../assets/images/status-icon-sprite.svg#clock")
--pf-c-form-control--m-clock--BackgroundUrl --pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl url("../../assets/images/status-icon-sprite.svg#clock")
	.pf-c-form-control.pf-m-icon-sprite	--pf-c-form-control__select--BackgroundSize	1rem
--pf-c-form-control__select--BackgroundSize --pf-c-form-control--m-icon-sprite__select--BackgroundSize --pf-c-form-control--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-form-control.pf-m-icon-sprite	--pf-c-form-control__select--BackgroundPositionX	calc(100% - 1rem + 7px)
--pf-c-form-control__select--BackgroundPositionX --pf-c-form-control--m-icon-sprite__select--BackgroundPositionX calc(100% - --pf-global--spacer--md + 7px) calc(100% - $pf-global--spacer--md + 7px) calc(100% - pf-size-prem(16px) + 7px) calc(100% - 1rem + 7px)
	.pf-c-form-control.pf-m-icon-sprite	--pf-c-form-control__select--success--BackgroundPosition	calc(100% - 1rem + 1px - 1.5rem)
--pf-c-form-control__select--success--BackgroundPosition --pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition calc(100% - --pf-global--spacer--md + 1px - --pf-global--spacer--lg) calc(100% - $pf-global--spacer--md + 1px - $pf-global--spacer--lg) calc(100% - pf-size-prem(16px) + 1px - pf-size-prem(24px)) calc(100% - 1rem + 1px - 1.5rem)
	.pf-c-form-control.pf-m-icon-sprite	--pf-c-form-control__select--m-warning--BackgroundPosition	calc(100% - 1rem - 1.5rem + 0.0625rem)
--pf-c-form-control__select--m-warning--BackgroundPosition --pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition calc(100% - --pf-global--spacer--md - --pf-global--spacer--lg + 0.0625rem) calc(100% - $pf-global--spacer--md - $pf-global--spacer--lg + 0.0625rem) calc(100% - pf-size-prem(16px) - pf-size-prem(24px) + 0.0625rem) calc(100% - 1rem - 1.5rem + 0.0625rem)
	.pf-c-form-control.pf-m-icon-sprite	--pf-c-form-control__select--invalid--BackgroundPosition	calc(100% - 1rem - 1.5rem)
--pf-c-form-control__select--invalid--BackgroundPosition --pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition calc(100% - --pf-global--spacer--md - --pf-global--spacer--lg) calc(100% - $pf-global--spacer--md - $pf-global--spacer--lg) calc(100% - pf-size-prem(16px) - pf-size-prem(24px)) calc(100% - 1rem - 1.5rem)
	select.pf-c-form-control	--pf-c-form-control--PaddingRight	calc(1.5rem + 1px + 1px)
--pf-c-form-control--PaddingRight --pf-c-form-control__select--PaddingRight calc(--pf-global--spacer--lg + --pf-c-form-control--BorderWidth + --pf-c-form-control--BorderWidth) calc($pf-global--spacer--lg + --pf-global--BorderWidth--sm + --pf-global--BorderWidth--sm) calc($pf-global--spacer--lg + $pf-global--BorderWidth--sm + $pf-global--BorderWidth--sm) calc(pf-size-prem(24px) + 1px + 1px) calc(1.5rem + 1px + 1px)
	select.pf-c-form-control	--pf-c-form-control--PaddingLeft	calc(0.5rem - 1px)
--pf-c-form-control--PaddingLeft --pf-c-form-control__select--PaddingLeft calc(--pf-global--spacer--sm - --pf-c-form-control--BorderWidth) calc($pf-global--spacer--sm - --pf-global--BorderWidth--sm) calc($pf-global--spacer--sm - $pf-global--BorderWidth--sm) calc(pf-size-prem(8px) - 1px) calc(0.5rem - 1px)
	select.pf-c-form-control[aria-invalid=true]	--pf-c-form-control--PaddingRight	4rem
--pf-c-form-control--PaddingRight --pf-c-form-control__select--invalid--PaddingRight --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem
	select.pf-c-form-control[aria-invalid=true]	--pf-c-form-control--invalid--BackgroundPosition	calc(calc(100% - 1rem + 1px) - 1.5rem)
--pf-c-form-control--invalid--BackgroundPosition --pf-c-form-control__select--invalid--BackgroundPosition calc(--pf-c-form-control__select--BackgroundPositionX - --pf-global--spacer--lg) calc(calc(100% - --pf-global--spacer--md + 1px) - $pf-global--spacer--lg) calc(calc(100% - $pf-global--spacer--md + 1px) - $pf-global--spacer--lg) calc(calc(100% - pf-size-prem(16px) + 1px) - pf-size-prem(24px)) calc(calc(100% - 1rem + 1px) - 1.5rem)
	select.pf-c-form-control.pf-m-success	--pf-c-form-control--PaddingRight	4rem
--pf-c-form-control--PaddingRight --pf-c-form-control__select--success--PaddingRight --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem
	select.pf-c-form-control.pf-m-success	--pf-c-form-control--success--BackgroundPosition	calc(calc(100% - 1rem + 1px) - 1.5rem)
--pf-c-form-control--success--BackgroundPosition --pf-c-form-control__select--success--BackgroundPosition calc(--pf-c-form-control__select--BackgroundPositionX - --pf-global--spacer--lg) calc(calc(100% - --pf-global--spacer--md + 1px) - $pf-global--spacer--lg) calc(calc(100% - $pf-global--spacer--md + 1px) - $pf-global--spacer--lg) calc(calc(100% - pf-size-prem(16px) + 1px) - pf-size-prem(24px)) calc(calc(100% - 1rem + 1px) - 1.5rem)
	select.pf-c-form-control.pf-m-warning	--pf-c-form-control--PaddingRight	4rem
--pf-c-form-control--PaddingRight --pf-c-form-control__select--m-warning--PaddingRight --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem
	textarea.pf-c-form-control	--pf-c-form-control--success--BackgroundPositionY	0.5rem
--pf-c-form-control--success--BackgroundPositionY --pf-c-form-control--textarea--success--BackgroundPositionY --pf-c-form-control--PaddingLeft --pf-c-form-control--inset--base --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	textarea.pf-c-form-control	--pf-c-form-control--invalid--BackgroundPositionY	0.5rem
--pf-c-form-control--invalid--BackgroundPositionY --pf-c-form-control--textarea--invalid--BackgroundPositionY --pf-c-form-control--PaddingLeft --pf-c-form-control--inset--base --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	textarea.pf-c-form-control	--pf-c-form-control--m-warning--BackgroundPositionY	0.5rem
--pf-c-form-control--m-warning--BackgroundPositionY --pf-c-form-control--textarea--m-warning--BackgroundPositionY --pf-c-form-control--PaddingLeft --pf-c-form-control--inset--base --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines