UNPKG

@syncfusion/ej2-inputs

Version:

A package of Essential JS 2 input components such as Textbox, Color-picker, Masked-textbox, Numeric-textbox, Slider, Upload, and Form-validator that is used to get input from the users.

1,162 lines (1,056 loc) 381 kB
.e-signature.e-control { border: 1px solid; } .e-signature.e-control { background-color: var(--color-sf-base-white); border: 1px solid; border-color: var(--color-sf-border-secondary); } /* stylelint-disable property-no-vendor-prefix */ /* stylelint-disable */ .e-input:focus:not(.e-success):not(.e-warning).e-error, .e-float-input:not(.e-success):not(.e-warning).e-error:not(.e-input-group) input:focus, .e-float-input:not(.e-success):not(.e-warning).e-error:not(.e-input-group) textarea:focus, .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning).e-error:not(.e-input-group) input:focus, .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning).e-error:not(.e-input-group) textarea:focus, .e-float-input:not(.e-success):not(.e-warning).e-error:not(.e-input-group).e-input-focus input, .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning).e-error:not(.e-input-group).e-input-focus input { -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important; box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important; } .e-input:focus:not(.e-error):not(.e-warning).e-success, .e-float-input:not(.e-error):not(.e-warning).e-success:not(.e-input-group) input:focus, .e-float-input:not(.e-error):not(.e-warning).e-success:not(.e-input-group) textarea:focus, .e-float-input.e-control-wrapper:not(.e-error):not(.e-warning).e-success:not(.e-input-group) input:focus, .e-float-input.e-control-wrapper:not(.e-error):not(.e-warning).e-success:not(.e-input-group) textarea:focus, .e-float-input:not(.e-error):not(.e-warning).e-success:not(.e-input-group).e-input-focus input, .e-float-input.e-control-wrapper:not(.e-error):not(.e-warning).e-success:not(.e-input-group).e-input-focus input { -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important; box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important; } .e-input:focus:not(.e-success):not(.e-error).e-warning, .e-float-input:not(.e-success):not(.e-error).e-warning:not(.e-input-group) input:focus, .e-float-input:not(.e-success):not(.e-error).e-warning:not(.e-input-group) textarea:focus, .e-float-input.e-control-wrapper:not(.e-success):not(.e-error).e-warning:not(.e-input-group) input:focus, .e-float-input.e-control-wrapper:not(.e-success):not(.e-error).e-warning:not(.e-input-group) textarea:focus, .e-float-input:not(.e-success):not(.e-error).e-warning:not(.e-input-group).e-input-focus input, .e-float-input.e-control-wrapper:not(.e-success):not(.e-error).e-warning:not(.e-input-group).e-input-focus input { -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important; box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important; } .e-input-group.e-input-focus:not(.e-success):not(.e-warning).e-error, .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning).e-error { -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important; box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important; } .e-input-group.e-input-focus:not(.e-error):not(.e-warning).e-success, .e-input-group.e-control-wrapper.e-input-focus:not(.e-error):not(.e-warning).e-success { -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important; box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important; } .e-input-group.e-input-focus:not(.e-success):not(.e-error).e-warning, .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-error).e-warning { -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important; box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important; } .e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning).e-error, .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-warning).e-error { -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important; box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important; } .e-input-group:not(.e-disabled):active:not(.e-error):not(.e-warning).e-success, .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-error):not(.e-warning).e-success { -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important; box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important; } .e-input-group:not(.e-disabled):active:not(.e-success):not(.e-error).e-warning, .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-error).e-warning { -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important; box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important; } .e-float-input.e-error label.e-float-text, .e-float-input.e-control-wrapper.e-error label.e-float-text, .e-float-input.e-error input:focus ~ label.e-float-text, .e-float-input.e-control-wrapper.e-error input:focus ~ label.e-float-text, .e-float-input.e-error.e-input-focus input ~ label.e-float-text, .e-float-input.e-control-wrapper.e-error.e-input-focus input ~ label.e-float-text, .e-float-input.e-error textarea:focus ~ label.e-float-text, .e-float-input.e-control-wrapper.e-error textarea:focus ~ label.e-float-text { color: var(--color-sf-utility-danger) !important; } .e-outline.e-float-input.e-error.e-input-focus input:focus ~ label.e-float-text, .e-outline.e-float-input.e-input-group.e-error.e-valid-input label.e-label-top.e-float-text, .e-outline.e-float-input.e-bigger.e-error.e-input-focus input:focus ~ label.e-float-text, .e-bigger .e-outline.e-float-input.e-error.e-input-focus input:focus ~ label.e-float-text, .e-outline.e-float-input.e-small.e-error.e-input-focus input:focus ~ label.e-float-text, .e-small .e-outline.e-float-input.e-error input:focus ~ label.e-float-text, .e-outline.e-float-input.e-small.e-bigger.e-error input:focus ~ label.e-float-text, .e-bigger .e-outline.e-float-input.e-small:not(.e-error) input:focus ~ label.e-float-text, .e-outline.e-float-input.e-error textarea:focus ~ label.e-float-text, .e-outline.e-float-input.e-bigger.e-error textarea:focus ~ label.e-float-text, .e-bigger .e-outline.e-float-input.e-error textarea:focus ~ label.e-float-text, .e-outline.e-float-input.e-small.e-error textarea:focus ~ label.e-float-text, .e-small .e-outline.e-float-input.e-error textarea:focus ~ label.e-float-text, .e-outline.e-float-input.e-small.e-bigger.e-error textarea:focus ~ label.e-float-text, .e-bigger .e-outline.e-float-input.e-small.e-error textarea:focus ~ label.e-float-text, .e-outline.e-float-input.e-control-wrapper.e-error input:focus ~ label.e-float-text, .e-outline.e-float-input.e-control-wrapper.e-bigger.e-error input:focus ~ label.e-float-text, .e-bigger .e-outline.e-float-input.e-control-wrapper.e-error input:focus ~ label.e-float-text, .e-outline.e-float-input.e-control-wrapper.e-small.e-error input:focus ~ label.e-float-text, .e-small .e-outline.e-float-input.e-control-wrapper.e-error input:focus ~ label.e-float-text, .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-error input:focus ~ label.e-float-text, .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-error input:focus ~ label.e-float-text, .e-outline.e-float-input.e-control-wrapper.e-error textarea:focus ~ label.e-float-text, .e-outline.e-float-input.e-control-wrapper.e-bigger.e-error textarea:focus ~ label.e-float-text, .e-bigger .e-outline.e-float-input.e-control-wrapper.e-error textarea:focus ~ label.e-float-text, .e-outline.e-float-input.e-control-wrapper.e-small.e-error textarea:focus ~ label.e-float-text, .e-small .e-outline.e-float-input.e-control-wrapper.e-error textarea:focus ~ label.e-float-text, .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-error textarea:focus ~ label.e-float-text, .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-error textarea:focus ~ label.e-float-text, .e-outline.e-float-input.e-error label.e-float-text.e-label-top, .e-outline.e-float-input.e-input-group.e-error label.e-float-text.e-label-top, .e-outline.e-float-input.e-control-wrapper.e-error label.e-float-text.e-label-top, .e-outline.e-float-input.e-valid-input.e-error:not(.e-input-focus) input:valid ~ label.e-float-text.e-label-top, .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-error:not(.e-input-focus) input:focus ~ label.e-float-text.e-label-top, .e-outline.e-float-input.e-valid-input.e-error:not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-top, .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-error:not(.e-input-focus) textarea:focus ~ label.e-float-text.e-label-top, .e-outline.e-float-input.e-error.e-input-focus input ~ label.e-float-text, .e-outline.e-float-input.e-bigger.e-error.e-input-focus input ~ label.e-float-text, .e-bigger .e-outline.e-float-input.e-error.e-input-focus input ~ label.e-float-text, .e-outline.e-float-input.e-small.e-error.e-input-focus input ~ label.e-float-text, .e-small .e-outline.e-float-input.e-error.e-input-focus input ~ label.e-float-text, .e-outline.e-float-input.e-small.e-bigger.e-error.e-input-focus input ~ label.e-float-text, .e-bigger .e-outline.e-float-input.e-small:not(.e-error).e-input-focus input ~ label.e-float-text, .e-outline.e-float-input.e-control-wrapper.e-error.e-input-focus input ~ label.e-float-text, .e-outline.e-float-input.e-control-wrapper.e-bigger.e-error.e-input-focus input ~ label.e-float-text, .e-bigger .e-outline.e-float-input.e-control-wrapper.e-error.e-input-focus input ~ label.e-float-text, .e-outline.e-float-input.e-control-wrapper.e-small.e-error.e-input-focus input ~ label.e-float-text, .e-small .e-outline.e-float-input.e-control-wrapper.e-error.e-input-focus input ~ label.e-float-text, .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-error.e-input-focus input ~ label.e-float-text, .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-error.e-input-focus input ~ label.e-float-text { color: var(--color-sf-utility-danger) !important; } .e-filled.e-float-input.e-error label.e-float-text, .e-filled.e-float-input.e-control-wrapper.e-error label.e-float-text, .e-filled.e-float-input.e-error input:focus ~ label.e-float-text, .e-filled.e-float-input.e-control-wrapper.e-error input:focus ~ label.e-float-text, .e-filled.e-float-input.e-error textarea:focus ~ label.e-float-text, .e-filled.e-float-input.e-control-wrapper.e-error textarea:focus ~ label.e-float-text, .e-filled.e-float-input.e-error.e-input-focus input ~ label.e-float-text, .e-filled.e-float-input.e-control-wrapper.e-error.e-input-focus input ~ label.e-float-text { color: var(--color-sf-utility-danger) !important; } .e-float-input .e-clear-icon::before, .e-float-input.e-control-wrapper .e-clear-icon::before { content: "\e7e7"; font-family: "e-icons"; } .e-input-group .e-clear-icon::before, .e-input-group.e-control-wrapper .e-clear-icon::before { content: "\e7e7"; font-family: "e-icons"; } /*! input layout */ .e-input-group, .e-input-group.e-control-wrapper { display: table; line-height: 1.4; margin-bottom: 0; } input.e-input, .e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input, textarea.e-input, .e-input-group textarea.e-input, .e-input-group.e-control-wrapper textarea.e-input { border: 0 solid; border-width: 1px; height: auto; line-height: inherit; margin: 0; margin-bottom: 0; outline: none; padding: 4px 12px 4px 12px; text-indent: 12px; width: 100%; } input.e-input, textarea.e-input, .e-input-group, .e-input-group.e-control-wrapper, .e-input-group.e-disabled, .e-input-group.e-control-wrapper.e-disabled { font-family: "Inter"; font-size: 14px; font-weight: normal; -webkit-font-feature-settings: "calt" 0; font-feature-settings: "calt" 0; } .e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input, .e-input-group textarea.e-input, .e-input-group.e-control-wrapper textarea.e-input, .e-input-group.e-small .e-input, .e-input-group.e-small.e-control-wrapper .e-input, .e-small .e-input-group .e-input, .e-small .e-input-group.e-control-wrapper .e-input { font: inherit; } input.e-input, .e-input-group input.e-input, .e-input-group input, .e-input-group.e-control-wrapper input.e-input, .e-input-group.e-control-wrapper input, .e-float-input input, .e-float-input.e-input-group input, .e-float-input.e-control-wrapper input, .e-float-input.e-control-wrapper.e-input-group input, input.e-input:focus, .e-input-group input.e-input:focus, .e-input-group input:focus, .e-input-group.e-control-wrapper input.e-input:focus, .e-input-group.e-control-wrapper input:focus, .e-float-input input:focus, .e-float-input.e-input-group input:focus, .e-float-input.e-control-wrapper input:focus, .e-float-input.e-control-wrapper.e-input-group input:focus, .e-input-group.e-input-focus input.e-input, .e-input-group.e-input-focus input, .e-input-group.e-control-wrapper.e-input-focus input.e-input, .e-input-group.e-control-wrapper.e-input-focus input, .e-float-input.e-input-focus input, .e-float-input.e-input-group.e-input-focus input, .e-float-input.e-control-wrapper.e-input-focus input, .e-float-input.e-control-wrapper.e-input-group.e-input-focus input { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } input.e-input, .e-input-group input.e-input, .e-input-group input, .e-input-group.e-control-wrapper input.e-input, .e-input-group.e-control-wrapper input, .e-float-input input, .e-float-input.e-input-group input, .e-float-input.e-control-wrapper input, .e-float-input.e-control-wrapper.e-input-group input, .e-input-group, .e-input-group.e-control-wrapper, .e-float-input, .e-float-input.e-control-wrapper, .e-input.e-corner, .e-input-group.e-corner.e-rtl input.e-input:only-child, .e-input-group.e-control-wrapper.e-corner.e-rtl input.e-input:only-child, .e-input-group.e-input-focus.e-corner, .e-input-group.e-control-wrapper.e-input-focus.e-corner, textarea.e-input, .e-input-group textarea.e-input, .e-input-group textarea, .e-input-group.e-control-wrapper textarea.e-input, .e-input-group.e-control-wrapper textarea, .e-float-input textarea, .e-float-input.e-input-group textarea, .e-float-input.e-control-wrapper textarea, .e-float-input.e-control-wrapper.e-input-group textarea { border-radius: 8px; } .e-input.e-small, .e-input-group.e-small, .e-input-group.e-control-wrapper.e-small, .e-input-group.e-small .e-input, .e-input-group.e-small input, .e-input-group.e-control-wrapper.e-small .e-input, .e-input-group.e-control-wrapper.e-small input, .e-float-input.e-small input, .e-float-input.e-input-group.e-small input, .e-float-input.e-control-wrapper.e-small input, .e-float-input.e-control-wrapper.e-input-group.e-small input, .e-float-input.e-small, .e-float-input.e-control-wrapper.e-small, .e-small .e-input-group, .e-small .e-input-group.e-control-wrapper, .e-small .e-input-group .e-input, .e-small .e-input-group input, .e-small .e-input-group.e-control-wrapper .e-input, .e-small .e-input-group.e-control-wrapper input, .e-small .e-float-input input, .e-small .e-float-input.e-input-group input, .e-small .e-float-input.e-control-wrapper input, .e-small .e-float-input.e-control-wrapper.e-input-group input, .e-small .e-float-input, .e-small .e-float-input.e-control-wrapper { border-radius: 6px; } .e-input:focus { border-width: 1px; padding-bottom: 4px; } .e-input.e-small:focus { border-width: 1px; padding-bottom: 4px; } .e-input-group input.e-input:focus, .e-input-group.e-control-wrapper input.e-input:focus, .e-input-group textarea.e-input:focus, .e-input-group.e-control-wrapper textarea.e-input:focus, .e-input-group.e-input-focus input.e-input, .e-input-group.e-control-wrapper.e-input-focus input.e-input { padding: 4px 12px 4px 12px; } .e-input-group textarea.e-input:focus, .e-input-group.e-control-wrapper textarea.e-input:focus { padding: 4px 8px 4px 12px; } .e-input-group .e-input-group-icon, .e-input-group.e-control-wrapper .e-input-group-icon { -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 0 solid; border-width: 0; -webkit-box-sizing: content-box; box-sizing: content-box; cursor: pointer; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-size: 18px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; line-height: 1; min-height: 18px; min-width: 20px; padding: 5px 8px 5px 4px; text-align: center; } /* stylelint-disable property-no-vendor-prefix */ .e-input-group .e-input-group-icon:first-child, .e-input-group.e-control-wrapper .e-input-group-icon:first-child { border-left-width: 0; } .e-input-group .e-input-group-icon:last-child, .e-input-group.e-control-wrapper .e-input-group-icon:last-child { border-bottom-right-radius: 3px; border-top-right-radius: 3px; } .e-input-group .e-input-group-icon:first-child, .e-input-group.e-control-wrapper .e-input-group-icon:first-child { border-bottom-left-radius: 3px; border-top-left-radius: 3px; } .e-input-group.e-rtl .e-input-group-icon:last-child, .e-input-group.e-control-wrapper.e-rtl .e-input-group-icon:last-child, .e-rtl .e-input-group .e-input-group-icon:last-child, .e-rtl .e-input-group.e-control-wrapper .e-input-group-icon:last-child { border-bottom-left-radius: 3px; border-bottom-right-radius: 0; border-top-left-radius: 3px; border-top-right-radius: 0; } .e-input[disabled], .e-input-group .e-input[disabled], .e-input-group.e-control-wrapper .e-input[disabled], .e-input-group.e-disabled, .e-input-group.e-disabled input, .e-input-group.e-disabled input.e-input, .e-input-group.e-disabled textarea, .e-input-group.e-disabled textarea.e-input, .e-input-group.e-control-wrapper.e-disabled, .e-input-group.e-control-wrapper.e-disabled input, .e-input-group.e-control-wrapper.e-disabled input.e-input, .e-input-group.e-control-wrapper.e-disabled textarea, .e-input-group.e-control-wrapper.e-disabled textarea.e-input, .e-float-input.e-disabled input, .e-float-input.e-disabled textarea, .e-float-input input[disabled], .e-float-input input.e-disabled, .e-float-input textarea[disabled], .e-float-input textarea.e-disabled, .e-float-input.e-control-wrapper.e-disabled input, .e-float-input.e-control-wrapper.e-disabled textarea, .e-float-input.e-control-wrapper input[disabled], .e-float-input.e-control-wrapper input.e-disabled, .e-float-input.e-control-wrapper textarea[disabled], .e-float-input.e-control-wrapper textarea.e-disabled, .e-input-group.e-disabled span, .e-input-group.e-control-wrapper.e-disabled span, .e-input-group.e-disabled input.e-input:not(:valid):first-child ~ .e-clear-icon, .e-input-group.e-control-wrapper.e-disabled input.e-input:not(:valid):first-child ~ .e-clear-icon, .e-float-input.e-disabled input:not(:valid):first-child ~ .e-clear-icon, .e-float-input.e-input-group.e-disabled input:not(:valid):first-child ~ .e-clear-icon, .e-float-input.e-input-group.e-control-wrapper.e-disabled input:not(:valid):first-child ~ .e-clear-icon, .e-float-input.e-control-wrapper.e-disabled input:not(:valid):first-child ~ .e-clear-icon, .e-input-group.e-disabled .e-clear-icon.e-clear-icon-hide, .e-input-group.e-control-wrapper.e-disabled .e-clear-icon.e-clear-icon-hide { cursor: not-allowed; } .e-input[disabled], .e-input-group.e-disabled, .e-input-group.e-control-wrapper.e-disabled, .e-float-input input[disabled], .e-float-input input.e-disabled, .e-float-input.e-control-wrapper input[disabled], .e-float-input.e-control-wrapper input.e-disabled { border-color: var(--color-sf-border-disabled); border-style: solid; } .e-input-group.e-disabled, .e-input-group.e-control-wrapper.e-disabled { border-bottom-style: solid; border-width: 1px; } .e-input[disabled], .e-input-group.e-disabled, .e-input-group.e-control-wrapper.e-disabled, .e-float-input.e-disabled, .e-float-input input[disabled], .e-float-input input.e-disabled, .e-float-input.e-disabled input, .e-float-input.e-control-wrapper.e-disabled, .e-float-input.e-control-wrapper input[disabled], .e-float-input.e-control-wrapper input.e-disabled, .e-float-input.e-control-wrapper.e-disabled input, .e-float-input textarea[disabled], .e-float-input textarea.e-disabled, .e-float-input.e-disabled textarea, .e-float-input.e-control-wrapper textarea[disabled], .e-float-input.e-control-wrapper textarea.e-disabled, .e-float-input.e-control-wrapper.e-disabled textarea { filter: alpha(opacity=100); opacity: 1; } .e-input.e-rtl, .e-input-group.e-rtl, .e-input-group.e-control-wrapper.e-rtl, .e-float-input.e-rtl, .e-float-input.e-control-wrapper.e-rtl { direction: rtl; } .e-input-group, .e-input-group.e-control-wrapper, .e-float-custom-tag.e-input-group, .e-float-custom-tag.e-input-group.e-control-wrapper, .e-input-custom-tag, .e-input-custom-tag.e-input-group, .e-input-custom-tag.e-input-group.e-control-wrapper { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; vertical-align: middle; } .e-float-input:not(.e-input-group), .e-float-input.e-control-wrapper:not(.e-input-group), .e-float-custom-tag, .e-float-custom-tag.e-control-wrapper { display: inline-block; } .e-input-group .e-input-group-icon, .e-input-group.e-control-wrapper .e-input-group-icon { display: -webkit-box; display: -ms-flexbox; display: flex; } .e-input-group .e-input-group-icon, .e-input-group.e-control-wrapper .e-input-group-icon { white-space: nowrap; } .e-input-group .e-input-group-icon:not(:last-child), .e-input-group.e-control-wrapper .e-input-group-icon:not(:last-child) { border-right-width: 0; } .e-input + .e-input-group-icon, .e-input-group .e-input + .e-input-group-icon, .e-input-group.e-control-wrapper .e-input + .e-input-group-icon { border-left-width: 0; } .e-input-group.e-corner .e-input:first-child, .e-input-group.e-corner .e-input-group-icon:first-child, .e-input-group.e-control-wrapper.e-corner .e-input:first-child, .e-input-group.e-control-wrapper.e-corner .e-input-group-icon:first-child { border-bottom-left-radius: 8px; border-top-left-radius: 8px; } .e-input-group.e-corner .e-input:last-child, .e-input-group.e-corner .e-input-group-icon:last-child, .e-input-group.e-control-wrapper.e-corner .e-input:last-child, .e-input-group.e-control-wrapper.e-corner .e-input-group-icon:last-child { border-bottom-right-radius: 8px; border-top-right-radius: 8px; } .e-input-group.e-rtl .e-input-group-icon:first-child, .e-input-group.e-control-wrapper.e-rtl .e-input-group-icon:first-child { border-left-width: 0; border-right-width: 1px; } .e-input-group.e-rtl .e-input-group-icon + .e-input, .e-input-group.e-control-wrapper.e-rtl .e-input-group-icon + .e-input { border-right-width: 0; } input.e-input.e-small, textarea.e-input.e-small, .e-small input.e-input, .e-small textarea.e-input, .e-input-group.e-small, .e-small .e-input-group, .e-input-group.e-control-wrapper.e-small, .e-small .e-input-group.e-control-wrapper, .e-input-group.e-small.e-disabled, .e-small .e-input-group.e-disabled, .e-input-group.e-control-wrapper.e-small.e-disabled, .e-small .e-input-group.e-control-wrapper.e-disabled { font-size: 12px; } .e-input.e-small, .e-input-group.e-small .e-input, .e-input-group.e-control-wrapper.e-small .e-input { line-height: inherit; padding: 4px 0 4px 8px; } .e-input-group.e-small .e-input:focus, .e-input-group.e-control-wrapper.e-small .e-input:focus, .e-input-group.e-small.e-input-focus .e-input, .e-input-group.e-control-wrapper.e-small.e-input-focus .e-input { padding: 4px 0 4px 8px; } .e-input-group.e-small .e-input-group-icon, .e-input-group.e-control-wrapper.e-small .e-input-group-icon, .e-small .e-input-group .e-input-group-icon, .e-small .e-input-group.e-control-wrapper .e-input-group-icon { font-size: 16px; min-height: 18px; min-width: 20px; padding: 3px 6px 3px 3px; } label.e-float-text, .e-float-input label.e-float-text, .e-float-input.e-control-wrapper label.e-float-text, .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom { font-size: 14px; font-style: normal; font-weight: normal; left: 0; overflow: hidden; padding-left: 10px; pointer-events: none; position: absolute; text-overflow: ellipsis; top: -11px; -webkit-transform: translate3d(0, 16px, 0) scale(1); transform: translate3d(0, 16px, 0) scale(1); -webkit-transform-origin: left top; transform-origin: left top; -webkit-transition: 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); transition: 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap; width: 100%; } label.e-float-text, .e-float-input label.e-float-text, .e-float-input.e-control-wrapper label.e-float-text, .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom { top: -11px; } label.e-float-text, .e-float-input label.e-float-text, .e-float-input.e-control-wrapper label.e-float-text, .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-float-input.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-small .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-float-input.e-control-wrapper.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-small .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom { -moz-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); -o-transform: translate(0%, -50%); -webkit-transform: translate(0%, -50%); -webkit-box-sizing: border-box; box-sizing: border-box; left: 0%; top: 42%; transform: translate(0%, -50%); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100%; font-style: normal; } .e-float-input.e-small label.e-float-text, .e-float-input.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-small .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-float-input.e-control-wrapper.e-small label.e-float-text, .e-float-input.e-control-wrapper.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-small .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom { font-size: 12px; } .e-float-input input:focus ~ label.e-float-text, .e-float-input input:valid ~ label.e-float-text, .e-float-input input ~ label.e-label-top.e-float-text, .e-float-input input[readonly] ~ label.e-label-top.e-float-text, .e-float-input input[disabled] ~ label.e-label-top.e-float-text, .e-float-input input label.e-float-text.e-label-top, .e-float-input.e-control-wrapper input:focus ~ label.e-float-text, .e-float-input.e-control-wrapper input:valid ~ label.e-float-text, .e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper input[readonly] ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper input label.e-float-text.e-label-top, .e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text, .e-float-input.e-input-focus input ~ label.e-float-text { font-size: 14px; font-weight: 500; padding-right: 0; -webkit-transform: translate3d(-10px, -35px, 0) scale(1); transform: translate3d(-10px, -35px, 0) scale(1); } .e-float-input.e-small input:focus ~ label.e-float-text, .e-float-input.e-small input:valid ~ label.e-float-text, .e-float-input.e-small input ~ label.e-label-top.e-float-text, .e-float-input.e-small input[readonly] ~ label.e-label-top.e-float-text, .e-float-input.e-small input[disabled] ~ label.e-label-top.e-float-text, .e-float-input.e-small input label.e-float-text.e-label-top, .e-small .e-float-input input:focus ~ label.e-float-text, .e-small .e-float-input input:valid ~ label.e-float-text, .e-small .e-float-input input ~ label.e-label-top.e-float-text, .e-small .e-float-input input[readonly] ~ label.e-label-top.e-float-text, .e-small .e-float-input input[disabled] ~ label.e-label-top.e-float-text, .e-small .e-float-input input label.e-float-text.e-label-top, .e-float-input.e-control-wrapper.e-small input:focus ~ label.e-float-text, .e-float-input.e-control-wrapper.e-small input:valid ~ label.e-float-text, .e-float-input.e-control-wrapper.e-small input ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper.e-small input[readonly] ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper.e-small input[disabled] ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper.e-small input label.e-float-text.e-label-top, .e-small .e-float-input.e-control-wrapper input:focus ~ label.e-float-text, .e-small .e-float-input.e-control-wrapper input:valid ~ label.e-float-text, .e-small .e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text, .e-small .e-float-input.e-control-wrapper input[readonly] ~ label.e-label-top.e-float-text, .e-small .e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text, .e-small .e-float-input.e-control-wrapper input label.e-float-text.e-label-top { font-size: 14px; font-weight: 500; padding-right: 0; -webkit-transform: translate3d(-10px, -34px, 0) scale(1); transform: translate3d(-10px, -34px, 0) scale(1); } .e-float-input.e-small input:focus ~ label.e-float-text, .e-float-input.e-small input:valid ~ label.e-float-text, .e-float-input.e-small input ~ label.e-label-top.e-float-text, .e-small .e-float-input input ~ label.e-label-top.e-float-text, .e-float-input.e-small input[readonly] ~ label.e-label-top.e-float-text, .e-float-input.e-small input[disabled] ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper.e-small input:focus ~ label.e-float-text, .e-float-input.e-control-wrapper.e-small input:valid ~ label.e-float-text, .e-float-input.e-control-wrapper.e-small input ~ label.e-label-top.e-float-text, .e-small .e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper.e-small input[readonly] ~ label.e-label-top.e-float-text, .e-float-input.e-control-wrapper.e-small input[disabled] ~ label.e-label-top.e-float-text, .e-float-input.e-small.e-input-focus input-group-animation ~ label.e-float-text, .e-float-input.e-control-wrapper.e-small.e-input-focus input ~ label.e-float-text { font-size: 12px; padding-right: 0; top: 17px; } .e-float-input, .e-float-input.e-control-wrapper { line-height: 1.4; margin-bottom: 0; margin-top: 24px; padding-top: 0; position: relative; width: 100%; } .e-float-input.e-small, .e-float-input.e-control-wrapper.e-small, .e-small .e-float-input.e-control-wrapper { line-height: 1.35; margin-bottom: 0; margin-top: 20px; padding-top: 0; } .e-input-group.e-small, .e-input-group.e-control-wrapper.e-small, .e-small .e-input-group, .e-small .e-input-group.e-control-wrapper { line-height: normal; } .e-float-input.e-no-float-label, .e-float-input.e-small.e-no-float-label, .e-small .e-float-input.e-no-float-label, .e-float-input.e-control-wrapper.e-no-float-label, .e-float-input.e-control-wrapper.e-small.e-no-float-label, .e-small .e-float-input.e-control-wrapper.e-no-float-label { margin-top: 0; } .e-float-input, .e-float-input.e-control-wrapper, .e-float-input.e-disabled, .e-float-input.e-control-wrapper.e-disabled, .e-float-input.e-input-group.e-disabled, .e-float-input.e-input-group.e-control-wrapper.e-disabled { font-family: "Inter"; font-size: 14px; font-weight: normal; } .e-float-input input, .e-float-input textarea, .e-float-input.e-control-wrapper input, .e-float-input.e-control-wrapper textarea { border: 0 solid; border-width: 1px; display: block; font: inherit; width: 100%; } .e-float-input input, .e-float-input.e-control-wrapper input { min-width: 0; padding: 0; } .e-float-input input, .e-input-group input, .e-float-input.e-control-wrapper input, .e-input-group.e-control-wrapper input, .e-float-input textarea, .e-input-group textarea, .e-float-input.e-control-wrapper textarea, .e-input-group.e-control-wrapper textarea { text-indent: 12px; } .e-float-input.e-small.e-disabled, .e-small .e-float-input.e-disabled, .e-float-input.e-control-wrapper.e-small.e-disabled, .e-small .e-float-input.e-control-wrapper.e-disabled, .e-float-input.e-input-group.e-small.e-disabled, .e-small .e-float-input.e-input-group.e-disabled, .e-float-input.e-input-group.e-control-wrapper.e-small.e-disabled, .e-small .e-float-input.e-input-group.e-control-wrapper.e-disabled, .e-float-input.e-small, .e-small .e-float-input, .e-float-input.e-control-wrapper.e-small, .e-small .e-float-input.e-control-wrapper { font-size: 12px; } .e-float-input.e-small input, .e-float-input.e-control-wrapper.e-small input { font: inherit; line-height: inherit; padding: 0; } .e-float-input input:focus, .e-float-input.e-control-wrapper input:focus, .e-float-input textarea:focus, .e-float-input.e-control-wrapper textarea:focus, .e-float-input.e-input-focus input, .e-float-input.e-control-wrapper.e-input-focus input, .e-input-group.e-control-container.valid.modified, .e-input-group.e-control-container.invalid, .e-float-input.e-control-container.valid.modified, .e-float-input.e-control-container.invalid { outline: none; } label.e-float-text, .e-float-input label.e-float-text, .e-float-input.e-control-wrapper label.e-float-text { font-family: inherit; } .e-float-input input:valid ~ label.e-float-text, .e-float-input input:focus ~ label.e-float-text, .e-float-input input:valid ~ label.e-float-text.e-label-top, .e-float-input input ~ label.e-float-text.e-label-top, .e-float-input .e-input-in-wrap input:valid ~ label.e-float-text, .e-float-input .e-input-in-wrap input:valid ~ label.e-float-text.e-label-top, .e-float-input .e-input-in-wrap input ~ label.e-float-text.e-label-top, .e-float-input.e-control-wrapper input:valid ~ label.e-float-text, .e-float-input.e-control-wrapper input:focus ~ label.e-float-text, .e-float-input.e-control-wrapper input:valid ~ label.e-float-text.e-label-top, .e-float-input.e-control-wrapper input ~ label.e-float-text.e-label-top, .e-float-input.e-control-wrapper .e-input-in-wrap input:valid ~ label.e-float-text, .e-float-input.e-control-wrapper .e-input-in-wrap input:valid ~ label.e-float-text.e-label-top, .e-float-input.e-control-wrapper .e-input-in-wrap input ~ label.e-float-text.e-label-top, .e-float-input.e-input-focus input ~ label.e-float-text, .e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text, .e-float-input textarea:valid ~ label.e-float-text, .e-float-input textarea:focus ~ label.e-float-text, .e-float-input textarea:valid ~ label.e-float-text.e-label-top, .e-float-input textarea ~ label.e-float-text.e-label-top, .e-float-input.e-control-wrapper textarea:valid ~ label.e-float-text, .e-float-input.e-control-wrapper textarea:focus ~ label.e-float-text, .e-float-input.e-control-wrapper textarea:valid ~ label.e-float-text.e-label-top, .e-float-input.e-control-wrapper textarea ~ label.e-float-text.e-label-top { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } label.e-float-text, .e-float-input label.e-float-text, .e-float-input.e-control-wrapper label.e-float-text, .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-float-input.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-small .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-small .e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-float-input:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-float-input.e-control-wrapper:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-float-input.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-small .e-float-input:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-float-input.e-control-wrapper:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-small .e-float-input.e-control-wrapper:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom { font-weight: normal; } .e-float-input:not(.e-input-group) .e-float-line::before, .e-float-input:not(.e-input-group) .e-float-line::after, .e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::before, .e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::after { bottom: 0; content: ""; height: 2px; position: absolute; -webkit-transition: 0.2s ease; transition: 0.2s ease; width: 0; } .e-float-input:not(.e-input-group) .e-float-line::before, .e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::before { left: 50%; } .e-float-input:not(.e-input-group) .e-float-line::after, .e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::after { right: 50%; } .e-float-input:not(.e-input-group) input:focus ~ .e-float-line::before, .e-float-input:not(.e-input-group) textarea:focus ~ .e-float-line::before, .e-float-input:not(.e-input-group) input:focus ~ .e-float-line::after, .e-float-input:not(.e-input-group) textarea:focus ~ .e-float-line::after, .e-float-input.e-control-wrapper:not(.e-input-group) input:focus ~ .e-float-line::before, .e-float-input.e-control-wrapper:not(.e-input-group) textarea:focus ~ .e-float-line::before, .e-float-input.e-control-wrapper:not(.e-input-group) input:focus ~ .e-float-line::after, .e-float-input.e-control-wrapper:not(.e-input-group) textarea:focus ~ .e-float-line::after, .e-float-input:not(.e-input-group).e-input-focus input ~ .e-float-line::before, .e-float-input:not(.e-input-group).e-input-focus input ~ .e-float-line::after, .e-float-input.e-control-wrapper:not(.e-input-group).e-input-focus input ~ .e-float-line::before, .e-float-input.e-control-wrapper:not(.e-input-group).e-input-focus input ~ .e-float-line::after { width: 50%; } .e-float-input .e-float-line, .e-float-input.e-control-wrapper .e-float-line { display: block; position: relative; width: 100%; } .e-float-input.e-rtl label.e-float-text, .e-float-input.e-control-wrapper.e-rtl label.e-float-text, .e-rtl .e-float-input label.e-float-text, .e-rtl .e-float-input.e-control-wrapper label.e-float-text, .e-rtl label.e-float-text, .e-rtl .e-float-input.e-control-wrapper label.e-float-text, .e-rtl.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-rtl .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-rtl.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-rtl .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-rtl.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-rtl.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-rtl .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom, .e-rtl .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom { right: 0; -webkit-transform-origin: right top; transform-origin: right top; } .e-float-input.e-rtl:not(.e-input-focus) label.e-float-text.e-label-bottom, .e-rtl .e-float-input:not(.e-input-focus) label.e-float-text.e-label-bottom, .e-float-input.e-rtl.e-control-wrapper:not(.e-input-focus) label.e-float-text.e-label-bottom, .e-rtl .e-float-input.e-control-wrapper:not(.e-input-focus) label.e-float-text.e-label-bottom, .e-float-input.e-rtl input:not(:focus):not(:valid) label.e-float-text, .e-float-input.e-rtl input:not(:focus):not(:valid) label.e-float-text.e-label-bottom, .e-rtl .e-float-input input:not(:focus):not(:valid) label.e-float-text, .e-rtl .e-float-input input:not(:focus):not(:valid) label.e-float-text.e-label-bottom, .e-float-input.e-control-wrapper.e-rtl input:not(:focus):not(:valid) label.e-float-text, .e-rtl .e-float-input.e-control-wrapper input:not(:focus):not(:valid) label.e-float-text, .e-float-input.e-rtl.e-control-wrapper input:not(:focus):not(:valid) label.e-float-text.e-label-bottom, .e-rtl .e-float-input.e-control-wrapper input:not(:focus):not(:valid) label.e-float-text.e-label-bottom, .e-float-input.e-rtl.e-small:not(.e-input-focus) label.e-float-text.e-label-bottom, .e-float-input.e-rtl.e-control-wrapper.e-small:not(.e-input-focus) label.e-float-text.e-label-bottom, .e-rtl .e-float-input.e-small:not(.e-input-focus) label.e-float-text.e-label-bottom, .e-rtl .e-float-input.e-control-wrapper.e-small:not(.e-input-focus) label.e-float-text.e-label-bottom, .e-small .e-float-input.e-rtl:not(.e-input-focus) label.e-float-text.e-label-bottom, .e-small .e-float-input.e-rtl.e-control-wrapper:not(.e-input-focus) label.e-float-text.e-label-bottom, .e-small.e-rtl .e-float-input:not(.e-input-focus) label.e-float-text.e-label-bottom, .e-small.e-rtl .e-float-input.e-control-wrapper:not(.e-input-focus) label.e-float-text.e-label-bottom, .e-float-input.e-small.e-rtl input:not(:focus):not(:valid) label.e-float-text, .e-float-input.e-rtl.e-small input:not(:focus):not(:valid) label.e-float-text.e-label-bottom, .e-rtl .e-float-input.e-small input:not(:focus):not(:valid) label.e-float-text, .e-rtl .e-float-input.e-small input:not(:focus):not(:valid) label.e-float-text.e-label-bottom, .e-small .e-float-input.e-rtl input:not(:focus):not(:valid) label.e-float-text, .e-small .e-float-input.e-rtl input:not(:focus):not(:valid) label.e-float-text.e-label-bottom, .e-small.e-rtl .e-float-input input:not(:focus):not(:valid) label.e-float-text, .e-small.e-rtl .e-float-input input:not(:focus):not(:valid) label.e-float-text.e-label-bottom, .e-float-input.e-control-wrapper.e-small.e-rtl input:not(:focus):not(:valid) label.e-float-text, .e-float-input.e-control-wrapper.e-rtl.e-small input:not(:focus):not(:valid) label.e-float-text.e-label-bottom, .e-rtl .e-float-input.e-control-wrapper.e-small input:not(:focus):not(:valid) label.e-float-text, .e-rtl .e-float-input.e-control-wrapper.e-small input:not(:focus):not(:valid) label.e-float-text.e-label-bottom, .e-small .e-float-input.e-control-wrapper.e-rtl input:not(:focus):not(:valid) label.e-float-text, .e-small .e-float-input.e-control-wrapper.e-rtl input:not(:focus):not(:valid) label.e-float-text.e-label-bottom, .e-small.e-rtl .e-float-input.e-control-wrapper input:not(:focus):not(:valid) label.e-float-text, .e-small.e-rtl .e-float-input.e-control-wrapper input:not(:focus):not(:valid) label.e-float-text.e-label-bottom { padding-right: 10px; } .e-input-group.e-corner.e-rtl .e-input:first-child, .e-input-group.e-corner.e-rtl .e-input-group-icon:first-child, .e-input-group.e-control-wrapper.e-corner.e-rtl .e-input:first-child, .e-input-group.e-control-wrapper.e-corner.e-rtl .e-input-group-icon:first-child { border-bottom-left-radius: 0; border-bottom-right-radius: 8px; border-top-left-radius: 0; border-top-right-radius: 8px; } .e-input-group.e-corner.e-rtl .e-input:last-child, .e-input-group.e-corner.e-rtl .e-input-group-icon:last-child, .e-input-group.e-control-wrapper.e-corner.e-rtl .e-input:last-child, .e-input-group.e-control-wrapper.e-corner.e-rtl .e-input-group-icon:last-child { border-bottom-left-radius: 8px; border-bottom-right-radius: 0; border-top-left-radius: 8px; border-top-right-radius: 0; } .e-input-group.e-warning::before, .e-input-group.e-control-wrapper.e-warning::before { content: ""; } .e-float-input input[disabled], .e-float-input input.e-disabled, .e-float-input.e-control-wrapper input[disabled], .e-float-input.e-control-wrapper input.e-disabled { background: transparent; background-image: none; cursor: not-allowed; } .e-input-group.e-rtl .e-input:not(:first-child):focus, .e-input-group.e-control-wrapper.e-rtl .e-input:not(:first-child):focus { border-right-width: 0; } .e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input { min-width: 0; width: 100%; } .e-input-group input.e-input, .e-input-group textarea.e-input, .e-input-group input.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabled]):not(:focus), .e-input-group textarea.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabled]), .e-input-group.e-control-wrapper input.e-input, .e-input-group.e-control-wrapper textarea.e-input, .e-input-group.e-control-wrapper input.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabled]):not(:focus), .e-input-group.e-control-wrapper textarea.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabled]) { border: 0 solid; border-width: 0; } .e-input-group input.e-input, .e-input-group textarea.e-input, .e-input-group.e-control-wrapper input.e-input, .e-input-group.e-control-wrapper textarea.e-input, .e-float-input input.e-input, .e-float-input.e-control-wrapper input.e-input { margin-bottom: 0; } .e-input-group::before, .e-input-group::after, .e-input-group.e-control-wrapper::before, .e-input-group.e-control-wrapper::after { content: ""; } .e-input-group::before, .e-input-group.e-control-wrapper::before { content: ""; } .e-input-group.e-input-focus::before, .e-input-group.e-input-focus::after, .e-input-group.e-control-wrapper.e-input-focus::before, .e-input-group.e-control-wrapper.e-input-focus::after { content: ""; } .e-input-group::after, .e-input-group.e-control-wrapper::after { content: ""; } .e-input-group, .e-input-group.e-control-wrapper { position: relative; width: 100%; } .e-input-group .e-input-group-icon:hover, .e-input-group.e-rtl.e-corner .e-input-group-icon:hover, .e-input-group.e-control-wrapper .e-input-group-icon:hover, .e-input-group.e-control-wrapper.e-rtl.e-corner .e-input-group-icon:hover { border-radius: 0; } .e-input.e-small, .e-input-group.e-small, .e-input-group.e-control-wrapper.e-small { margin-bottom: 0; } .e-input-group .e-input-group-icon, .e-input-group.e-control-wrapper .e-input-group-icon { margin-bottom: 0; margin-right: 0; margin-top: 0; } .e-float-input.e-input-group .e-input-group-icon, .e-float-input.e-control-wrapper.e-input-group .e-input-group-icon { margin-top: 0; } .e-input-group.e-small .e-input-group-icon, .e-input-group.e-control-wrapper.e-small .e-input-group-icon, .e-small .e-input-group .e-input-group-icon, .e-small .e-input-group.e-control-wrapper .e-input-group-icon { margin-bottom: 0; margin-right: 0; margin-top: 0; } .e-float-input.e-input-group.e-small .e-input-group-icon, .e-small .e-float-input.e-input-group .e-input-group-icon, .e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon, .e-small .e-float-input.e-control-wrapper.e-input-group .e-input-group-icon { margin-top: 0; } .e-input-group .e-input-group-icon:last-child, .e-input-group.e-control-wrapper .e-input-group-icon:last-child, .e-input-group.e-small .e-input-group-icon:last-child, .e-input-group.e-control-wrapper.e-small .e-input-group-icon:last-child { margin-right: 0; } .e-input-group, .e-input-group.e-control-wrapper { border-bottom: 1px solid; } .e-input-group, .e-input-group.e-success, .e-input-group.e-warning, .e-input-group.e-error, .e-input-group.e-control-wrapper, .e-input-group.e-control-wrapper.e-success, .e-input-group.e-control-wrapper.e-warning, .e-input-group.e-control-wrapper.e-error { border: 1px solid; border-width: 1px; } .e-input-group.e-rtl.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:not(:first-child):focus, .e-input-group.e-control-wrapper.e-rtl.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:not(:first-child):focus { border-right-width: 0; } .e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left).e-disabled, .e-input-group.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error).e-disabled .e-input-in-wrap, .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left).e-disabled, .e-input-g