\n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n\n#success"); --pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl: url("\n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n\n#warning"); --pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl: url("\n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n\n#invalid"); --pf-c-form-control--m-icon-sprite__select--BackgroundUrl: url("\n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n\n#select"); --pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl: url("\n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n\n#search"); --pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl: url("\n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n\n#calendar"); --pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl: url("\n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n\n#clock"); --pf-c-form-control--m-icon-sprite__select--BackgroundSize: var(--pf-c-form-control--FontSize); --pf-c-form-control--m-icon-sprite__select--BackgroundPositionX: calc(100% - var(--pf-global--spacer--md) + 7px); --pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) + 1px - var(--pf-global--spacer--lg)); --pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) - var(--pf-global--spacer--lg) + 0.0625rem); --pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) - var(--pf-global--spacer--lg)); color: var(--pf-c-form-control--Color); width: var(--pf-c-form-control--Width); padding: var(--pf-c-form-control--PaddingTop) var(--pf-c-form-control--PaddingRight) var(--pf-c-form-control--PaddingBottom) var(--pf-c-form-control--PaddingLeft); font-size: var(--pf-c-form-control--FontSize); line-height: var(--pf-c-form-control--LineHeight); background-color: var(--pf-c-form-control--BackgroundColor); background-repeat: no-repeat; border: var(--pf-c-form-control--BorderWidth) solid; border-color: var(--pf-c-form-control--BorderTopColor) var(--pf-c-form-control--BorderRightColor) var(--pf-c-form-control--BorderBottomColor) var(--pf-c-form-control--BorderLeftColor); border-radius: var(--pf-c-form-control--BorderRadius); -moz-appearance: none; -webkit-appearance: none; } .pf-c-form-control::placeholder { color: var(--pf-c-form-control--placeholder--Color); } .pf-c-form-control:not(textarea) { height: var(--pf-c-form-control--Height); text-overflow: ellipsis; } .pf-c-form-control[readonly] { background-color: var(--pf-c-form-control--readonly--BackgroundColor); } .pf-c-form-control[readonly]:not(.pf-m-success):not([aria-invalid=true]):hover { --pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--readonly--hover--BorderBottomColor); } .pf-c-form-control[readonly]:not(.pf-m-success):not([aria-invalid=true]):focus { --pf-c-form-control--focus--PaddingBottom: var(--pf-c-form-control--readonly--focus--PaddingBottom); --pf-c-form-control--focus--BorderBottomWidth: var(--pf-c-form-control--readonly--focus--BorderBottomWidth); --pf-c-form-control--focus--BorderBottomColor: var(--pf-c-form-control--readonly--focus--BorderBottomColor); } .pf-c-form-control[readonly].pf-m-plain { --pf-c-form-control--readonly--BackgroundColor: var(--pf-c-form-control--readonly--m-plain--BackgroundColor); --pf-c-form-control--inset--base: var(--pf-c-form-control--readonly--m-plain--inset--base); border-color: transparent; } .pf-c-form-control:hover { --pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--hover--BorderBottomColor); } .pf-c-form-control:focus { --pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--focus--BorderBottomColor); padding-bottom: var(--pf-c-form-control--focus--PaddingBottom); border-bottom-width: var(--pf-c-form-control--focus--BorderBottomWidth); } .pf-c-form-control.pf-m-expanded { --pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--m-expanded--BorderBottomColor); padding-bottom: var(--pf-c-form-control--m-expanded--PaddingBottom); border-bottom-width: var(--pf-c-form-control--m-expanded--BorderBottomWidth); } .pf-c-form-control:disabled { --pf-c-form-control--BackgroundColor: var(--pf-c-form-control--disabled--BackgroundColor); color: var(--pf-c-form-control--disabled--Color); cursor: not-allowed; border-color: var(--pf-c-form-control--disabled--BorderColor); } .pf-c-form-control[aria-invalid=true] { --pf-c-form-control--PaddingRight: var(--pf-c-form-control--invalid--PaddingRight); --pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--invalid--BorderBottomColor); padding-bottom: var(--pf-c-form-control--invalid--PaddingBottom); background-image: var(--pf-c-form-control--invalid--BackgroundUrl); background-position: var(--pf-c-form-control--invalid--BackgroundPosition); background-size: var(--pf-c-form-control--invalid--BackgroundSize); border-bottom-width: var(--pf-c-form-control--invalid--BorderBottomWidth); } .pf-c-form-control[aria-invalid=true].pf-m-icon { --pf-c-form-control--PaddingRight: var(--pf-c-form-control--m-icon--icon--PaddingRight); background-image: var(--pf-c-form-control--m-icon--invalid--BackgroundUrl); background-position: var(--pf-c-form-control--m-icon--invalid--BackgroundPosition); background-size: var(--pf-c-form-control--m-icon--invalid--BackgroundSize); } .pf-c-form-control.pf-m-success { --pf-c-form-control--PaddingRight: var(--pf-c-form-control--success--PaddingRight); --pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--success--BorderBottomColor); padding-bottom: var(--pf-c-form-control--success--PaddingBottom); background-image: var(--pf-c-form-control--success--BackgroundUrl); background-position: var(--pf-c-form-control--success--BackgroundPosition); background-size: var(--pf-c-form-control--success--BackgroundSize); border-bottom-width: var(--pf-c-form-control--success--BorderBottomWidth); } .pf-c-form-control.pf-m-success.pf-m-icon { --pf-c-form-control--PaddingRight: var(--pf-c-form-control--m-icon--icon--PaddingRight); background-image: var(--pf-c-form-control--m-icon--success--BackgroundUrl); background-position: var(--pf-c-form-control--m-icon--success--BackgroundPosition); background-size: var(--pf-c-form-control--m-icon--success--BackgroundSize); } .pf-c-form-control.pf-m-warning { --pf-c-form-control--PaddingRight: var(--pf-c-form-control--m-warning--PaddingRight); --pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--m-warning--BorderBottomColor); padding-bottom: var(--pf-c-form-control--m-warning--PaddingBottom); background-image: var(--pf-c-form-control--m-warning--BackgroundUrl); background-position: var(--pf-c-form-control--m-warning--BackgroundPosition); background-size: var(--pf-c-form-control--m-warning--BackgroundSize); border-bottom-width: var(--pf-c-form-control--m-warning--BorderBottomWidth); } .pf-c-form-control.pf-m-warning.pf-m-icon { --pf-c-form-control--PaddingRight: var(--pf-c-form-control--m-icon--icon--PaddingRight); background-image: var(--pf-c-form-control--m-icon--m-warning--BackgroundUrl); background-position: var(--pf-c-form-control--m-icon--m-warning--BackgroundPosition); background-size: var(--pf-c-form-control--m-icon--m-warning--BackgroundSize); } .pf-c-form-control.pf-m-search { --pf-c-form-control--PaddingLeft: var(--pf-c-form-control--m-search--PaddingLeft); background-image: var(--pf-c-form-control--m-search--BackgroundUrl); background-position: var(--pf-c-form-control--m-search--BackgroundPosition); background-size: var(--pf-c-form-control--m-search--BackgroundSize); } .pf-c-form-control.pf-m-icon { --pf-c-form-control--PaddingRight: var(--pf-c-form-control--m-icon--PaddingRight); background-image: var(--pf-c-form-control--m-icon--BackgroundUrl); background-position: var(--pf-c-form-control--m-icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY); background-size: var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY); } .pf-c-form-control.pf-m-icon.pf-m-calendar { --pf-c-form-control--m-icon--BackgroundUrl: var(--pf-c-form-control--m-calendar--BackgroundUrl); } .pf-c-form-control.pf-m-icon.pf-m-clock { --pf-c-form-control--m-icon--BackgroundUrl: var(--pf-c-form-control--m-clock--BackgroundUrl); } .pf-c-form-control.pf-m-icon-sprite { --pf-c-form-control--success--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--success--BackgroundUrl); --pf-c-form-control--m-warning--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl); --pf-c-form-control--invalid--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl); --pf-c-form-control__select--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite__select--BackgroundUrl); --pf-c-form-control--m-search--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl); --pf-c-form-control--m-calendar--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl); --pf-c-form-control--m-clock--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl); --pf-c-form-control__select--BackgroundSize: var(--pf-c-form-control--m-icon-sprite__select--BackgroundSize); --pf-c-form-control__select--BackgroundPositionX: var(--pf-c-form-control--m-icon-sprite__select--BackgroundPositionX); --pf-c-form-control__select--success--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition); --pf-c-form-control__select--m-warning--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition); --pf-c-form-control__select--invalid--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition); } select.pf-c-form-control { --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--PaddingRight); --pf-c-form-control--PaddingLeft: var(--pf-c-form-control__select--PaddingLeft); background-image: var(--pf-c-form-control__select--BackgroundUrl); background-position: var(--pf-c-form-control__select--BackgroundPosition); background-size: var(--pf-c-form-control__select--BackgroundSize); } @-moz-document url-prefix() { select.pf-c-form-control { --pf-c-form-control--PaddingRight: calc(var(--pf-c-form-control__select--PaddingRight) - 1px); --pf-c-form-control--PaddingLeft: calc(var(--pf-c-form-control__select--PaddingLeft) - 4px); } } select.pf-c-form-control[aria-invalid=true] { --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--invalid--PaddingRight); --pf-c-form-control--invalid--BackgroundPosition: var(--pf-c-form-control__select--invalid--BackgroundPosition); background-image: var(--pf-c-form-control__select--BackgroundUrl), var(--pf-c-form-control--invalid--BackgroundUrl); background-position: var(--pf-c-form-control__select--BackgroundPosition), var(--pf-c-form-control--invalid--BackgroundPosition); background-size: var(--pf-c-form-control__select--BackgroundSize), var(--pf-c-form-control--invalid--BackgroundSize); } select.pf-c-form-control.pf-m-success { --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--success--PaddingRight); --pf-c-form-control--success--BackgroundPosition: var(--pf-c-form-control__select--success--BackgroundPosition); background-image: var(--pf-c-form-control__select--BackgroundUrl), var(--pf-c-form-control--success--BackgroundUrl); background-position: var(--pf-c-form-control__select--BackgroundPosition), var(--pf-c-form-control--success--BackgroundPosition); background-size: var(--pf-c-form-control__select--BackgroundSize), var(--pf-c-form-control--success--BackgroundSize); } select.pf-c-form-control.pf-m-warning { --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--m-warning--PaddingRight); background-image: var(--pf-c-form-control__select--BackgroundUrl), var(--pf-c-form-control--m-warning--BackgroundUrl); background-position: var(--pf-c-form-control__select--BackgroundPosition), var(--pf-c-form-control__select--m-warning--BackgroundPosition); background-size: var(--pf-c-form-control__select--BackgroundSize), var(--pf-c-form-control--m-warning--BackgroundSize); } select.pf-c-form-control.pf-m-placeholder { color: var(--pf-c-form-control--placeholder--Color); } select.pf-c-form-control.pf-m-placeholder * { color: var(--pf-c-form-control--placeholder--child--Color); } select.pf-c-form-control.pf-m-placeholder *:disabled { color: revert; } textarea.pf-c-form-control { --pf-c-form-control--success--BackgroundPositionY: var(--pf-c-form-control--textarea--success--BackgroundPositionY); --pf-c-form-control--invalid--BackgroundPositionY: var(--pf-c-form-control--textarea--invalid--BackgroundPositionY); --pf-c-form-control--m-warning--BackgroundPositionY: var(--pf-c-form-control--textarea--m-warning--BackgroundPositionY); width: var(--pf-c-form-control--textarea--Width); height: var(--pf-c-form-control--textarea--Height); vertical-align: bottom; } .pf-c-form-control.pf-m-resize-vertical { resize: vertical; } .pf-c-form-control.pf-m-resize-horizontal { resize: horizontal; } :where(.pf-theme-dark) .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='%23e0e0e0' 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--BorderTopColor: transparent; --pf-c-form-control--BorderRightColor: transparent; --pf-c-form-control--BorderBottomColor: var(--pf-global--BorderColor--400); --pf-c-form-control--BorderLeftColor: transparent; --pf-c-form-control--BackgroundColor: var(--pf-global--BackgroundColor--400); --pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--300); --pf-c-form-control--disabled--BackgroundColor: var(--pf-global--disabled-color--200); --pf-c-form-control--readonly--BackgroundColor: var(--pf-global--BackgroundColor--400); color: var(--pf-global--Color--100); } :where(.pf-theme-dark) .pf-c-form-control::-webkit-calendar-picker-indicator { filter: invert(1); } :where(.pf-theme-dark) .pf-c-form-control[readonly] { border-bottom-color: var(--pf-global--palette--black-700); } :where(.pf-theme-dark) .pf-c-form-control:disabled { color: var(--pf-global--palette--black-100); }