Form control

Form controls refer to the different visual states that data input components can take to help guide users in completing forms.

Examples

Input

Note: In webkit browsers, inputs with status icons that are autocompleted will have their icons removed by the user agent stylesheet. If the field does not need to use autocomplete, turn it off with autocomplete="off" to avoid the problem. Otherwise, use helper text instead to ensure that the status will remain visible if the field is autocompleted.

Select

Textarea

Readonly

Icon sprite Beta

Note: The icons for the success, invalid, calendar, etc varations in form control elemements are applied as background images 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 .pf-m-icon-sprite variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons.

Documentation

Accessibility

Attribute	Applied to	Outcome
`id`	`.pf-c-form-control`	Provides an `id` value that can be used with the `for` attribute on an associated `<label>` element to provide an accessible label for the form control element.
`aria-invalid="true"`	`.pf-c-form-control`	Indicates that the form control is in the error state and applies error state styling.
`aria-label="descriptive text"`	`.pf-c-form-control`	Provides an accessible label for assistive technology.
`aria-expanded="true"`	`.pf-c-form-control.pf-m-expanded`	Indicates that clicking in the form control has toggled something else to be expanded.

Usage

Class	Applied to	Outcome
`.pf-c-form-control`	`<input>`,`<textarea>`, `<select>`	Initiates an input, textarea or select. For styling of checkboxes or radios see the checkbox component or radio component. Required
`.pf-m-resize-vertical`	`textarea.pf-m-form-control`	Modifies a `textarea.pf-c-form-control` element so it can only be resized vertically along the y-axis.
`.pf-m-resize-horizontal`	`textarea.pf-m-form-control`	Modifies a `textarea.pf-c-form-control` element so it can only be resized horizontally along the x-axis.
`.pf-m-success`	`.pf-c-form-control`	Modifies a form control for the success state.
`.pf-m-warning`	`.pf-c-form-control`	Modifies a form control for the warning state.
`.pf-m-icon-sprite`	`.pf-c-form-control`	Modifies form control element to use an external SVG sprite instead of embedded data URIs for icons. For use with apps whose content security policies disallow the use of data URIs.
`.pf-m-icon`	`input.pf-c-form-control`	Modifies a form control text input to be able to specify a custom SVG background via `--pf-c-form-control--m-icon--BackgroundUrl`, and other optional vars for other background properties.
`.pf-m-calendar`	`.pf-c-form-control.pf-m-icon`	Modifies a form control to support the calendar icon.
`.pf-m-clock`	`.pf-c-form-control.pf-m-icon`	Modifies a form control to support the clock icon.
`.pf-m-expanded`	`input.pf-c-form-control`	Modifies a form control for the expanded state. This is used when clicking in the text input toggles something open/closed.
`.pf-m-placeholder`	`select.pf-c-form-control`	Modifies a form select for placeholder styles. This modifier is set programatically based on the chosen option.

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--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: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