Form control

The form control is used to embed browser native input fields, text areas, and select lists into a form. Related design guidelines: Data input

Examples Documentation CSS Variables

Examples

Input

Select

Textarea

Readonly

Documentation

Overview

Input, textarea, and select are provided in the form controls component for use cases outside of forms. If they are used without label text ensure some sort of label for assistive technologies. (for example: aria-label)

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 check 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-search`	`.pf-c-form-control`	Modifies a form control for the search input.

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--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--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--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-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-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--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--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--focus--BackgroundColor	#f0f0f0
--pf-c-form-control--readonly--focus--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--focus--PaddingBottom	calc(0.375rem - 1px)
--pf-c-form-control--readonly--focus--PaddingBottom --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--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	#6a6e73
--pf-c-form-control--readonly--focus--BorderBottomColor --pf-global--disabled-color--100 $pf-global--disabled-color--100 $pf-color-black-600 #6a6e73
	.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--BackgroundPosition	calc(100% - 0.5rem) 0.5rem
--pf-c-form-control--invalid--BackgroundPosition calc(100% - --pf-c-form-control--PaddingLeft) --pf-c-form-control--PaddingLeft calc(100% - --pf-global--spacer--sm) --pf-global--spacer--sm calc(100% - $pf-global--spacer--sm) $pf-global--spacer--sm calc(100% - pf-size-prem(8px)) pf-size-prem(8px) calc(100% - 0.5rem) 0.5rem
	.pf-c-form-control	--pf-c-form-control--invalid--BackgroundSize	1rem 1rem
--pf-c-form-control--invalid--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--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) 0.5rem / 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") calc(100% - --pf-c-form-control--PaddingLeft) --pf-c-form-control--PaddingLeft / --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-global--spacer--sm) --pf-global--spacer--sm / --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) $pf-global--spacer--sm / $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)) pf-size-prem(8px) / 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) 0.5rem / 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) 0.5rem / 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") calc(100% - --pf-c-form-control--PaddingLeft) --pf-c-form-control--PaddingLeft / --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-global--spacer--sm) --pf-global--spacer--sm / --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) $pf-global--spacer--sm / $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)) pf-size-prem(8px) / 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)) pf-size-prem(8px) / 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) 0.5rem / 1rem 1rem no-repeat
	.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--BackgroundPosition	calc(100% - 0.5rem) 0.5rem
--pf-c-form-control--success--BackgroundPosition calc(100% - --pf-c-form-control--PaddingLeft) --pf-c-form-control--PaddingLeft calc(100% - --pf-global--spacer--sm) --pf-global--spacer--sm calc(100% - $pf-global--spacer--sm) $pf-global--spacer--sm calc(100% - pf-size-prem(8px)) pf-size-prem(8px) calc(100% - 0.5rem) 0.5rem
	.pf-c-form-control	--pf-c-form-control--success--BackgroundSize	1rem 1rem
--pf-c-form-control--success--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--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-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--PaddingLeft --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-search--Background	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") 0.5rem / 1rem 1rem no-repeat
--pf-c-form-control--m-search--Background --pf-c-form-control--m-search--BackgroundUrl --pf-c-form-control--m-search--BackgroundPosition / --pf-c-form-control--m-search--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='%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--PaddingLeft / --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='%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-global--spacer--sm / --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='%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-global--spacer--sm / $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='%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-size-prem(8px) / 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='%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") 0.5rem / 1rem 1rem no-repeat
	.pf-c-form-control	--pf-c-form-control__select--PaddingRight	1.5rem
--pf-c-form-control__select--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.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	0.875rem
	.pf-c-form-control	--pf-c-form-control__select--BackgroundPosition	calc(100% - 0.5rem) center
--pf-c-form-control__select--BackgroundPosition 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__select--invalid--PaddingRight	calc(0.5rem + 3rem)
--pf-c-form-control__select--invalid--PaddingRight calc(--pf-global--spacer--sm + --pf-global--spacer--2xl) calc($pf-global--spacer--sm + $pf-global--spacer--2xl) calc(pf-size-prem(8px) + pf-size-prem(48px)) calc(0.5rem + 3rem)
	.pf-c-form-control	--pf-c-form-control__select--success--PaddingRight	calc(0.5rem + 3rem)
--pf-c-form-control__select--success--PaddingRight calc(--pf-global--spacer--sm + --pf-global--spacer--2xl) calc($pf-global--spacer--sm + $pf-global--spacer--2xl) calc(pf-size-prem(8px) + pf-size-prem(48px)) calc(0.5rem + 3rem)
	.pf-c-form-control::placeholder	--pf-c-form-control--Color	#6a6e73
--pf-c-form-control--Color --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[readonly]	--pf-c-form-control--BorderBottomColor	#6a6e73
--pf-c-form-control--BorderBottomColor --pf-c-form-control--readonly--focus--BorderBottomColor --pf-global--disabled-color--100 $pf-global--disabled-color--100 $pf-color-black-600 #6a6e73
	.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:disabled	--pf-c-form-control--Color	#6a6e73
--pf-c-form-control--Color --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: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.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
	select.pf-c-form-control	--pf-c-form-control--PaddingRight	1.5rem
--pf-c-form-control--PaddingRight --pf-c-form-control__select--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	select.pf-c-form-control[aria-invalid="true"]	--pf-c-form-control--PaddingRight	calc(0.5rem + 3rem)
--pf-c-form-control--PaddingRight --pf-c-form-control__select--invalid--PaddingRight calc(--pf-global--spacer--sm + --pf-global--spacer--2xl) calc($pf-global--spacer--sm + $pf-global--spacer--2xl) calc(pf-size-prem(8px) + pf-size-prem(48px)) calc(0.5rem + 3rem)
	select.pf-c-form-control[aria-invalid="true"]	--pf-c-form-control--invalid--BackgroundPosition	calc(100% - 0.5rem - 1.5rem)
--pf-c-form-control--invalid--BackgroundPosition calc(100% - --pf-global--spacer--sm - --pf-global--spacer--lg) calc(100% - $pf-global--spacer--sm - $pf-global--spacer--lg) calc(100% - pf-size-prem(8px) - pf-size-prem(24px)) calc(100% - 0.5rem - 1.5rem)
	select.pf-c-form-control.pf-m-success	--pf-c-form-control--PaddingRight	calc(0.5rem + 3rem)
--pf-c-form-control--PaddingRight --pf-c-form-control__select--success--PaddingRight calc(--pf-global--spacer--sm + --pf-global--spacer--2xl) calc($pf-global--spacer--sm + $pf-global--spacer--2xl) calc(pf-size-prem(8px) + pf-size-prem(48px)) calc(0.5rem + 3rem)
	select.pf-c-form-control.pf-m-success	--pf-c-form-control--success--BackgroundPosition	calc(100% - 0.5rem - 1.5rem)
--pf-c-form-control--success--BackgroundPosition calc(100% - --pf-global--spacer--sm - --pf-global--spacer--lg) calc(100% - $pf-global--spacer--sm - $pf-global--spacer--lg) calc(100% - pf-size-prem(8px) - pf-size-prem(24px)) calc(100% - 0.5rem - 1.5rem)