.okui-icon.icon {
    font-family: var(--ok-icon-font-family) !important
}

.okui-input-reversed .okui-input-box {
    background: var(--okd-input-reversed-default-background);
    border: thin solid var(--okd-input-reversed-default-border-color);
    box-shadow: var(--okd-input-reversed-default-shadow);
    transition: border-color .3s, box-shadow .3s
}

.okui-input-reversed .okui-input-input {
    color: var(--okd-input-reversed-default-text-color)
}

.okui-input-reversed .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-reversed-default-placeholder-color);
    color: var(--okd-input-reversed-default-placeholder-color)
}

.okui-input-reversed .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-reversed-default-placeholder-color);
    color: var(--okd-input-reversed-default-placeholder-color);
    opacity: 1
}

.okui-input-reversed .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-reversed-default-placeholder-color);
    color: var(--okd-input-reversed-default-placeholder-color)
}

.okui-input-reversed .okui-input-input:-webkit-autofill {
    -webkit-text-fill-color: var(--okd-input-reversed-default-text-color) !important;
    border: none;
    -webkit-box-shadow: 0 0 0 30px var(--okd-input-reversed-default-background) inset
}

.okui-input-reversed .okui-input-error {
    color: var(--okd-input-reversed-error-tips-color)
}

.okui-input-reversed .okui-input-help-text,
.okui-input-reversed .okui-input-tips {
    color: var(--okd-input-reversed-tips-text-color)
}

.okui-input.okui-input-reversed.hover .okui-input-box,
.okui-input.okui-input-reversed:hover .okui-input-box {
    background: var(--okd-input-reversed-hover-background);
    border: thin solid var(--okd-input-reversed-hover-border-color);
    box-shadow: var(--okd-input-reversed-hover-shadow)
}

.okui-input.okui-input-reversed.hover .okui-input-box .okui-input-input,
.okui-input.okui-input-reversed:hover .okui-input-box .okui-input-input {
    -webkit-text-fill-color: var(--okd-input-reversed-hover-text-color);
    caret-color: var(--okd-input-reversed-hover-caret-color);
    color: var(--okd-input-reversed-hover-text-color)
}

.okui-input.okui-input-reversed.hover .okui-input-box .okui-input-input::-webkit-input-placeholder,
.okui-input.okui-input-reversed:hover .okui-input-box .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-reversed-hover-placeholder-color);
    color: var(--okd-input-reversed-hover-placeholder-color)
}

.okui-input.okui-input-reversed.hover .okui-input-box .okui-input-input:-moz-placeholder,
.okui-input.okui-input-reversed:hover .okui-input-box .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-reversed-hover-placeholder-color);
    color: var(--okd-input-reversed-hover-placeholder-color);
    opacity: 1
}

.okui-input.okui-input-reversed.hover .okui-input-box .okui-input-input::-ms-input-placeholder,
.okui-input.okui-input-reversed:hover .okui-input-box .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-reversed-hover-placeholder-color);
    color: var(--okd-input-reversed-hover-placeholder-color)
}

.okui-input.okui-input-reversed.focus .okui-input-box {
    background: var(--okd-input-reversed-focus-background);
    border: thin solid var(--okd-input-reversed-focus-border-color);
    box-shadow: var(--okd-input-reversed-focus-shadow)
}

.okui-input.okui-input-reversed.focus .okui-input-box .okui-input-input {
    -webkit-text-fill-color: var(--okd-input-reversed-focus-text-color);
    caret-color: var(--okd-input-reversed-focus-caret-color);
    color: var(--okd-input-reversed-focus-text-color)
}

.okui-input.okui-input-reversed.focus .okui-input-box .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-reversed-focus-placeholder-color);
    color: var(--okd-input-reversed-focus-placeholder-color)
}

.okui-input.okui-input-reversed.focus .okui-input-box .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-reversed-focus-placeholder-color);
    color: var(--okd-input-reversed-focus-placeholder-color);
    opacity: 1
}

.okui-input.okui-input-reversed.focus .okui-input-box .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-reversed-focus-placeholder-color);
    color: var(--okd-input-reversed-focus-placeholder-color)
}

.okui-input.okui-input-reversed.disabled .okui-input-box {
    background: var(--okd-input-reversed-disabled-background);
    border: thin solid var(--okd-input-reversed-disabled-border-color);
    box-shadow: var(--okd-input-reversed-disabled-shadow)
}

.okui-input.okui-input-reversed.disabled .okui-input-box .okui-input-input {
    -webkit-text-fill-color: var(--okd-input-reversed-disabled-text-color);
    caret-color: var(--okd-input-reversed-disabled-caret-color);
    color: var(--okd-input-reversed-disabled-text-color)
}

.okui-input.okui-input-reversed.disabled .okui-input-box .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-reversed-disabled-placeholder-color);
    color: var(--okd-input-reversed-disabled-placeholder-color)
}

.okui-input.okui-input-reversed.disabled .okui-input-box .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-reversed-disabled-placeholder-color);
    color: var(--okd-input-reversed-disabled-placeholder-color);
    opacity: 1
}

.okui-input.okui-input-reversed.disabled .okui-input-box .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-reversed-disabled-placeholder-color);
    color: var(--okd-input-reversed-disabled-placeholder-color)
}

.okui-input.okui-input-reversed.disabled .okui-input-input:-webkit-autofill {
    -webkit-text-fill-color: var(--okd-input-reversed-disabled-text-color) !important;
    -webkit-box-shadow: 0 0 0 30px var(--okd-input-reversed-disabled-background) inset
}

.okui-input.okui-input-reversed.error .okui-input-box {
    background: var(--okd-input-reversed-error-background);
    border: thin solid var(--okd-input-reversed-error-border-color);
    box-shadow: var(--okd-input-reversed-error-shadow)
}

.okui-input.okui-input-reversed.error .okui-input-box .okui-input-input {
    -webkit-text-fill-color: var(--okd-input-reversed-error-text-color);
    caret-color: var(--okd-input-reversed-error-caret-color);
    color: var(--okd-input-reversed-error-text-color)
}

.okui-input.okui-input-reversed.error .okui-input-box .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-reversed-error-placeholder-color);
    color: var(--okd-input-reversed-error-placeholder-color)
}

.okui-input.okui-input-reversed.error .okui-input-box .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-reversed-error-placeholder-color);
    color: var(--okd-input-reversed-error-placeholder-color);
    opacity: 1
}

.okui-input.okui-input-reversed.error .okui-input-box .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-reversed-error-placeholder-color);
    color: var(--okd-input-reversed-error-placeholder-color)
}

.okui-label-reversed .okui-label-text {
    color: var(--okd-input-reversed-label-color)
}

.okui-label-reversed .okui-label-action {
    color: var(--okd-input-reversed-action-color)
}

.okui-input-reversed .okui-input-prefix .prefix-icon,
.okui-input-reversed .okui-input-suffix .suffix-icon,
.okui-input-reversed .okui-input-suffix .suffix-icon:hover {
    color: var(--okd-input-reversed-icon-color)
}

.okui-input-reversed .okui-input-suffix .error-icon {
    color: var(--okd-input-reversed-error-tips-color)
}

.okui-input-reversed .okui-input-number-suffix {
    border-left: 1px solid var(--okd-input-reversed-default-border-color)
}

.okui-input-reversed .okui-input-number-suffix-part {
    background: var(--okd-input-number-reversed-default-add-icon-background)
}

.okui-input-reversed .okui-input-number-suffix-part .icon {
    color: var(--okd-input-number-reversed-default-add-icon-color)
}

.okui-input-reversed .okui-input-number-suffix-part .hover,
.okui-input-reversed .okui-input-number-suffix-part:hover {
    background: var(--okd-input-number-reversed-hover-add-icon-background)
}

.okui-input-reversed .okui-input-number-suffix-part .hover .icon,
.okui-input-reversed .okui-input-number-suffix-part:hover .icon {
    color: var(--okd-input-number-reversed-hover-add-icon-color)
}

.okui-input-reversed .okui-input-number-suffix-part .active,
.okui-input-reversed .okui-input-number-suffix-part:active {
    background: var(--okd-input-number-reversed-active-add-icon-background)
}

.okui-input-reversed .okui-input-number-suffix-part .active .icon,
.okui-input-reversed .okui-input-number-suffix-part:active .icon {
    color: var(--okd-input-number-reversed-active-add-icon-color)
}

.okui-input-reversed .okui-input-number-suffix-part .disabled,
.okui-input-reversed .okui-input-number-suffix-part-disabled {
    background: var(--okd-input-number-reversed-disabled-add-icon-background)
}

.okui-input-reversed .okui-input-number-suffix-part .disabled .icon,
.okui-input-reversed .okui-input-number-suffix-part .disabled:hover .icon,
.okui-input-reversed .okui-input-number-suffix-part-disabled .icon,
.okui-input-reversed .okui-input-number-suffix-part-disabled:hover .icon {
    color: var(--okd-input-number-reversed-disabled-add-icon-color)
}

.okui-input-reversed .okui-input-number-suffix-line {
    background: var(--okd-input-reversed-default-border-color)
}

.okui-input-reversed.okui-input .okui-input-code-btn {
    color: var(--okd-input-code-reversed-common-btn-color)
}

.okui-input-reversed.okui-input .okui-input-code-btn.disabled {
    color: var(--okd-input-code-reversed-common-btn-disabled-color)
}

.okui-input-reversed.okui-input .okui-input-count-down {
    color: var(--okd-input-code-reversed-common-count-color)
}

.okui-input-reversed.okui-input-search .okui-input-prefix .okui-input-search-prefix-icon {
    color: var(--okd-input-search-reversed-prefix-icon-color)
}

.okui-input-reversed.okui-input-search .okui-input-error {
    color: var(--okd-input-search-reversed-error-tips-color)
}

.okui-input-reversed.okui-input-search .okui-input-box {
    background-color: var(--okd-input-search-reversed-default-background);
    border-color: var(--okd-input-search-reversed-default-border-color);
    box-shadow: var(--okd-input-search-reversed-default-shadow)
}

.okui-input-reversed.okui-input-search .okui-input-input {
    color: var(--okd-input-search-reversed-default-text-color)
}

.okui-input-reversed.okui-input-search .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-reversed-default-placeholder-color);
    color: var(--okd-input-search-reversed-default-placeholder-color)
}

.okui-input-reversed.okui-input-search .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-reversed-default-placeholder-color);
    color: var(--okd-input-search-reversed-default-placeholder-color);
    opacity: 1
}

.okui-input-reversed.okui-input-search .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-reversed-default-placeholder-color);
    color: var(--okd-input-search-reversed-default-placeholder-color)
}

.okui-input-reversed.okui-input-search.hover .okui-input-box,
.okui-input-reversed.okui-input-search:hover .okui-input-box {
    background: var(--okd-input-search-reversed-hover-background);
    border: thin solid var(--okd-input-search-reversed-hover-border-color);
    box-shadow: var(--okd-input-search-reversed-hover-shadow)
}

.okui-input-reversed.okui-input-search.hover .okui-input-box .okui-input-input,
.okui-input-reversed.okui-input-search:hover .okui-input-box .okui-input-input {
    -webkit-text-fill-color: var(--okd-input-search-reversed-hover-text-color);
    caret-color: var(--okd-input-search-reversed-hover-caret-color);
    color: var(--okd-input-search-reversed-hover-text-color)
}

.okui-input-reversed.okui-input-search.hover .okui-input-box .okui-input-input::-webkit-input-placeholder,
.okui-input-reversed.okui-input-search:hover .okui-input-box .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-reversed-hover-placeholder-color);
    color: var(--okd-input-search-reversed-hover-placeholder-color)
}

.okui-input-reversed.okui-input-search.hover .okui-input-box .okui-input-input:-moz-placeholder,
.okui-input-reversed.okui-input-search:hover .okui-input-box .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-reversed-hover-placeholder-color);
    color: var(--okd-input-search-reversed-hover-placeholder-color);
    opacity: 1
}

.okui-input-reversed.okui-input-search.hover .okui-input-box .okui-input-input::-ms-input-placeholder,
.okui-input-reversed.okui-input-search:hover .okui-input-box .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-reversed-hover-placeholder-color);
    color: var(--okd-input-search-reversed-hover-placeholder-color)
}

.okui-input-reversed.okui-input-search.focus .okui-input-box {
    background: var(--okd-input-search-reversed-focus-background);
    border: thin solid var(--okd-input-search-reversed-focus-border-color);
    box-shadow: var(--okd-input-search-reversed-focus-shadow)
}

.okui-input-reversed.okui-input-search.focus .okui-input-box .okui-input-input {
    -webkit-text-fill-color: var(--okd-input-search-reversed-focus-text-color);
    caret-color: var(--okd-input-search-reversed-focus-caret-color);
    color: var(--okd-input-search-reversed-focus-text-color)
}

.okui-input-reversed.okui-input-search.focus .okui-input-box .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-reversed-focus-placeholder-color);
    color: var(--okd-input-search-reversed-focus-placeholder-color)
}

.okui-input-reversed.okui-input-search.focus .okui-input-box .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-reversed-focus-placeholder-color);
    color: var(--okd-input-search-reversed-focus-placeholder-color);
    opacity: 1
}

.okui-input-reversed.okui-input-search.focus .okui-input-box .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-reversed-focus-placeholder-color);
    color: var(--okd-input-search-reversed-focus-placeholder-color)
}

.okui-input-reversed.okui-input-search.disabled .okui-input-box {
    background: var(--okd-input-search-reversed-disabled-background);
    border: thin solid var(--okd-input-search-reversed-disabled-border-color);
    box-shadow: var(--okd-input-search-reversed-disabled-shadow)
}

.okui-input-reversed.okui-input-search.disabled .okui-input-box .okui-input-input {
    -webkit-text-fill-color: var(--okd-input-search-reversed-disabled-text-color);
    caret-color: var(--okd-input-search-reversed-disabled-caret-color);
    color: var(--okd-input-search-reversed-disabled-text-color)
}

.okui-input-reversed.okui-input-search.disabled .okui-input-box .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-reversed-disabled-placeholder-color);
    color: var(--okd-input-search-reversed-disabled-placeholder-color)
}

.okui-input-reversed.okui-input-search.disabled .okui-input-box .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-reversed-disabled-placeholder-color);
    color: var(--okd-input-search-reversed-disabled-placeholder-color);
    opacity: 1
}

.okui-input-reversed.okui-input-search.disabled .okui-input-box .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-reversed-disabled-placeholder-color);
    color: var(--okd-input-search-reversed-disabled-placeholder-color)
}

.okui-input-reversed.okui-input-search.error .okui-input-box {
    background: var(--okd-input-search-reversed-error-background);
    border: thin solid var(--okd-input-search-reversed-error-border-color);
    box-shadow: var(--okd-input-search-reversed-error-shadow)
}

.okui-input-reversed.okui-input-search.error .okui-input-box .okui-input-input {
    -webkit-text-fill-color: var(--okd-input-search-reversed-error-text-color);
    caret-color: var(--okd-input-search-reversed-error-caret-color);
    color: var(--okd-input-search-reversed-error-text-color)
}

.okui-input-reversed.okui-input-search.error .okui-input-box .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-reversed-error-placeholder-color);
    color: var(--okd-input-search-reversed-error-placeholder-color)
}

.okui-input-reversed.okui-input-search.error .okui-input-box .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-reversed-error-placeholder-color);
    color: var(--okd-input-search-reversed-error-placeholder-color);
    opacity: 1
}

.okui-input-reversed.okui-input-search.error .okui-input-box .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-reversed-error-placeholder-color);
    color: var(--okd-input-search-reversed-error-placeholder-color)
}

.okui-label {
    display: flex;
    width: 100%
}

.okui-label.top-right {
    justify-content: flex-end
}

.okui-label.top-between {
    justify-content: space-between
}

.okui-label-text {
    color: var(--okd-input-label-color);
    font-weight: 500
}

.okui-label-action {
    color: var(--okd-input-action-color);
    cursor: pointer;
    font-weight: 500
}

.okui-label.label-xl .okui-label-text {
    font-size: var(--okd-input-xl-label-font-size);
    line-height: var(--okd-input-xl-label-line-height);
    margin-bottom: 6px;
    margin-bottom: var(--okd-input-xl-label-margin, 6px)
}

.okui-label.label-xl .okui-label-action {
    font-size: var(--okd-input-xl-action-font-size);
    line-height: var(--okd-input-xl-action-line-height);
    margin-bottom: 6px;
    margin-bottom: var(--okd-input-xl-label-margin, 6px)
}

.okui-label.label-xl .okui-label-place {
    min-height: var(--okd-input-xl-label-line-height)
}

.okui-label.label-lg .okui-label-text {
    font-size: var(--okd-input-lg-label-font-size);
    line-height: var(--okd-input-lg-label-line-height);
    margin-bottom: 6px;
    margin-bottom: var(--okd-input-lg-label-margin, 6px)
}

.okui-label.label-lg .okui-label-action {
    font-size: var(--okd-input-lg-action-font-size);
    line-height: var(--okd-input-lg-action-line-height);
    margin-bottom: 6px;
    margin-bottom: var(--okd-input-lg-label-margin, 6px)
}

.okui-label.label-lg .okui-label-place {
    min-height: var(--okd-input-lg-label-line-height)
}

.okui-label.label-xs .okui-label-text {
    font-size: var(--okd-input-xs-label-font-size);
    line-height: var(--okd-input-xs-label-line-height);
    margin-bottom: 4px;
    margin-bottom: var(--okd-input-xs-label-margin, 4px)
}

.okui-label.label-xs .okui-label-action {
    font-size: var(--okd-input-xs-action-font-size);
    line-height: var(--okd-input-xs-action-line-height);
    margin-bottom: 4px;
    margin-bottom: var(--okd-input-xs-label-margin, 4px)
}

.okui-label.label-xs .okui-label-place {
    min-height: var(--okd-input-xs-label-line-height)
}

.okui-label.label-sm .okui-label-text {
    font-size: var(--okd-input-sm-label-font-size);
    line-height: var(--okd-input-sm-label-line-height);
    margin-bottom: 4px;
    margin-bottom: var(--okd-input-sm-label-margin, 4px)
}

.okui-label.label-sm .okui-label-action {
    font-size: var(--okd-input-sm-action-font-size);
    line-height: var(--okd-input-sm-action-line-height);
    margin-bottom: 4px;
    margin-bottom: var(--okd-input-sm-label-margin, 4px)
}

.okui-label.label-sm .okui-label-place {
    min-height: var(--okd-input-sm-label-line-height)
}

.okui-label.label-md .okui-label-text {
    font-size: var(--okd-input-md-label-font-size);
    line-height: var(--okd-input-md-label-line-height);
    margin-bottom: 4px;
    margin-bottom: var(--okd-input-md-label-margin, 4px)
}

.okui-label.label-md .okui-label-action {
    font-size: var(--okd-input-md-action-font-size);
    line-height: var(--okd-input-md-action-line-height);
    margin-bottom: 4px;
    margin-bottom: var(--okd-input-md-label-margin, 4px)
}

.okui-label.label-md .okui-label-place {
    min-height: var(--okd-input-md-label-line-height)
}

.okui-input-caret-color {
    caret-color: var(--okd-input-focus-caret-color)
}

.okui-input-caret-color input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none
}

.okui-input-caret-color input[type=search]::-moz-search-cancel-button {
    -moz-appearance: none;
    appearance: none
}

.okui-input-caret-color input::-ms-clear,
.okui-input-caret-color input::-ms-reveal {
    display: none
}

.okui-input-caret-color input::-o-clear {
    display: none
}

.okui-input {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    position: relative
}

.okui-input input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none
}

.okui-input input[type=search]::-moz-search-cancel-button {
    -moz-appearance: none;
    appearance: none
}

.okui-input input::-ms-clear,
.okui-input input::-ms-reveal {
    display: none
}

.okui-input input::-o-clear {
    display: none
}

.okui-input * {
    box-sizing: border-box
}

.okui-input-prefix,
.okui-input-suffix {
    align-items: center;
    display: flex;
    flex-shrink: 1;
    white-space: nowrap
}

.okui-input-input {
    background: transparent;
    border: none;
    color: var(--okd-input-default-text-color);
    flex-grow: 1;
    font-family: inherit;
    height: 100%;
    outline: none;
    width: 100%
}

.okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-default-placeholder-color);
    color: var(--okd-input-default-placeholder-color)
}

.okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-default-placeholder-color);
    color: var(--okd-input-default-placeholder-color);
    opacity: 1
}

.okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-default-placeholder-color);
    color: var(--okd-input-default-placeholder-color)
}

.okui-input-input:-webkit-autofill {
    -webkit-text-fill-color: var(--okd-input-default-text-color) !important;
    border: none;
    -webkit-box-shadow: 0 0 0 30px var(--okd-input-default-background) inset
}

.okui-input-input.input-textarea {
    box-shadow: none;
    outline: none;
    resize: none
}

.okui-input-custom-placeholder {
    position: relative;
    width: 100%
}

.okui-input-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.okui-input-placeholder {
    bottom: 0;
    color: var(--okd-input-default-placeholder-color);
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%)
}

.okui-input-tips-box {
    display: flex;
    width: 100%
}

.okui-input-error {
    color: var(--okd-input-error-tips-color)
}

.okui-input-tips {
    color: var(--okd-input-tips-text-color);
    display: inline-block
}

.okui-input-help-text {
    color: var(--okd-input-tips-text-color);
    flex-grow: 1;
    flex-shrink: 0;
    text-align: right
}

.okui-input.hover,
.okui-input:hover {
    cursor: text
}

.okui-input.hover .okui-input-box,
.okui-input:hover .okui-input-box {
    background: var(--okd-input-hover-background);
    border: thin solid var(--okd-input-hover-border-color);
    box-shadow: var(--okd-input-hover-shadow)
}

.okui-input.hover .okui-input-box .okui-input-input,
.okui-input:hover .okui-input-box .okui-input-input {
    -webkit-text-fill-color: var(--okd-input-hover-text-color);
    caret-color: var(--okd-input-hover-caret-color);
    color: var(--okd-input-hover-text-color)
}

.okui-input.hover .okui-input-box .okui-input-input::-webkit-input-placeholder,
.okui-input:hover .okui-input-box .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-hover-placeholder-color);
    color: var(--okd-input-hover-placeholder-color)
}

.okui-input.hover .okui-input-box .okui-input-input:-moz-placeholder,
.okui-input:hover .okui-input-box .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-hover-placeholder-color);
    color: var(--okd-input-hover-placeholder-color);
    opacity: 1
}

.okui-input.hover .okui-input-box .okui-input-input::-ms-input-placeholder,
.okui-input:hover .okui-input-box .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-hover-placeholder-color);
    color: var(--okd-input-hover-placeholder-color)
}

.okui-input.focus .okui-input-box {
    background: var(--okd-input-focus-background);
    border: thin solid var(--okd-input-focus-border-color);
    box-shadow: var(--okd-input-focus-shadow)
}

.okui-input.focus .okui-input-box .okui-input-input {
    -webkit-text-fill-color: var(--okd-input-focus-text-color);
    caret-color: var(--okd-input-focus-caret-color);
    color: var(--okd-input-focus-text-color)
}

.okui-input.focus .okui-input-box .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-focus-placeholder-color);
    color: var(--okd-input-focus-placeholder-color)
}

.okui-input.focus .okui-input-box .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-focus-placeholder-color);
    color: var(--okd-input-focus-placeholder-color);
    opacity: 1
}

.okui-input.focus .okui-input-box .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-focus-placeholder-color);
    color: var(--okd-input-focus-placeholder-color)
}

.okui-input.readonly .okui-input-box {
    background: var(--okd-input-default-background);
    background: var(--okd-input-readonly-background, var(--okd-input-default-background));
    border: thin solid var(--okd-input-readonly-border-color, var(--okd-input-default-border-color));
    box-shadow: var(--okd-input-default-shadow);
    box-shadow: var(--okd-input-readonly-shadow, var(--okd-input-default-shadow))
}

.okui-input.readonly .okui-input-box .okui-input-input {
    -webkit-text-fill-color: var(--okd-input-default-text-color);
    -webkit-text-fill-color: var(--okd-input-readonly-text-color, var(--okd-input-default-text-color));
    caret-color: var(--okd-input-default-caret-color);
    caret-color: var(--okd-input-readonly-caret-color, var(--okd-input-default-caret-color));
    color: var(--okd-input-default-text-color);
    color: var(--okd-input-readonly-text-color, var(--okd-input-default-text-color))
}

.okui-input.readonly .okui-input-box .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-default-placeholder-color);
    -webkit-text-fill-color: var(--okd-input-readonly-placeholder-color, var(--okd-input-default-placeholder-color));
    color: var(--okd-input-default-placeholder-color);
    color: var(--okd-input-readonly-placeholder-color, var(--okd-input-default-placeholder-color))
}

.okui-input.readonly .okui-input-box .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-default-placeholder-color);
    -webkit-text-fill-color: var(--okd-input-readonly-placeholder-color, var(--okd-input-default-placeholder-color));
    color: var(--okd-input-default-placeholder-color);
    color: var(--okd-input-readonly-placeholder-color, var(--okd-input-default-placeholder-color));
    opacity: 1
}

.okui-input.readonly .okui-input-box .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-default-placeholder-color);
    -webkit-text-fill-color: var(--okd-input-readonly-placeholder-color, var(--okd-input-default-placeholder-color));
    color: var(--okd-input-default-placeholder-color);
    color: var(--okd-input-readonly-placeholder-color, var(--okd-input-default-placeholder-color))
}

.okui-input.readonly.focus .okui-input-box {
    border-color: var(--okd-input-focus-border-color)
}

.okui-input.disabled {
    cursor: not-allowed
}

.okui-input.disabled .okui-input-box {
    background: var(--okd-input-disabled-background);
    border: thin solid var(--okd-input-disabled-border-color);
    box-shadow: var(--okd-input-disabled-shadow)
}

.okui-input.disabled .okui-input-box .okui-input-input {
    -webkit-text-fill-color: var(--okd-input-disabled-text-color);
    caret-color: var(--okd-input-disabled-caret-color);
    color: var(--okd-input-disabled-text-color)
}

.okui-input.disabled .okui-input-box .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-disabled-placeholder-color);
    color: var(--okd-input-disabled-placeholder-color)
}

.okui-input.disabled .okui-input-box .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-disabled-placeholder-color);
    color: var(--okd-input-disabled-placeholder-color);
    opacity: 1
}

.okui-input.disabled .okui-input-box .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-disabled-placeholder-color);
    color: var(--okd-input-disabled-placeholder-color)
}

.okui-input.disabled .okui-input-input {
    cursor: not-allowed;
    opacity: 1
}

.okui-input.disabled .okui-input-input:-webkit-autofill {
    -webkit-text-fill-color: var(--okd-input-disabled-text-color) !important;
    -webkit-box-shadow: 0 0 0 30px var(--okd-input-disabled-background) inset
}

.okui-input.error .okui-input-box {
    background: var(--okd-input-error-background);
    border: thin solid var(--okd-input-error-border-color);
    box-shadow: var(--okd-input-error-shadow)
}

.okui-input.error .okui-input-box .okui-input-input {
    -webkit-text-fill-color: var(--okd-input-error-text-color);
    caret-color: var(--okd-input-error-caret-color);
    color: var(--okd-input-error-text-color)
}

.okui-input.error .okui-input-box .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-error-placeholder-color);
    color: var(--okd-input-error-placeholder-color)
}

.okui-input.error .okui-input-box .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-error-placeholder-color);
    color: var(--okd-input-error-placeholder-color);
    opacity: 1
}

.okui-input.error .okui-input-box .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-error-placeholder-color);
    color: var(--okd-input-error-placeholder-color)
}

.okui-input.error .okui-input-error {
    display: inline-block
}

.okui-input.no-border .okui-input-box {
    background: transparent;
    border: thin solid transparent;
    box-shadow: none
}

.okui-input-textarea-resize-virtual-dom::-webkit-scrollbar {
    display: none;
    height: 0;
    width: 0
}

.okui-input-box {
    align-items: center;
    background: var(--okd-input-default-background);
    border: thin solid var(--okd-input-default-border-color);
    box-shadow: var(--okd-input-default-shadow);
    display: flex;
    transition: border-color .3s, box-shadow .3s;
    width: 100%
}

.okui-input-xl>.okui-input-box {
    border-radius: var(--okd-input-xl-border-radius);
    height: var(--okd-input-xl-height);
    padding: 0 8px;
    padding: 0 var(--okd-input-xl-padding-horizontal, 8px)
}

.okui-input-xl>.okui-input-box.auto-size {
    height: -moz-fit-content;
    height: fit-content;
    min-height: var(--okd-input-xl-height)
}

.okui-input-xl>.okui-input-box.no-padding-left {
    padding-left: 0
}

.okui-input-xl>.okui-input-box.no-padding-right {
    padding-right: 0
}

.okui-input-xl>.okui-input-box.ta {
    height: 100%;
    padding: 8px
}

.okui-input-xl>.okui-input-box.auto-resize-auto-height {
    height: -moz-fit-content;
    height: fit-content;
    min-height: var(--okd-input-xl-height)
}

.okui-input-xl>.okui-input-box.input-circle {
    border-radius: 100px
}

.okui-input-xl .okui-input-input {
    font-size: var(--okd-input-xl-text-font-size);
    padding: calc(var(--okd-input-xl-height)/2 - var(--okd-input-xl-text-font-size)/2 - 2px) 0
}

.okui-input-xl .okui-input-input::-webkit-input-placeholder {
    font-size: var(--okd-input-xl-text-font-size);
    font-weight: 400;
    text-overflow: ellipsis
}

.okui-input-xl .okui-input-input:-moz-placeholder {
    font-size: var(--okd-input-xl-text-font-size);
    font-weight: 400;
    text-overflow: ellipsis
}

.okui-input-xl .okui-input-input::-ms-input-placeholder {
    font-size: var(--okd-input-xl-text-font-size);
    font-weight: 400;
    text-overflow: ellipsis
}

.okui-input-xl .okui-input-input.ta {
    padding: 0
}

.okui-input-xl .okui-input-input.textarea-auto-resize {
    line-height: var(--okd-input-xl-text-font-size)
}

.okui-input-xl .okui-input-placeholder {
    font-size: var(--okd-input-xl-text-font-size);
    height: calc(var(--okd-input-xl-text-font-size) + 2px);
    line-height: calc(var(--okd-input-xl-text-font-size) + 2px)
}

.okui-input-xl .okui-input.okui-input-place-mode .okui-input-tips-box {
    min-height: calc(var(--okd-input-xl-tip-line-height) + 6px);
    min-height: calc(var(--okd-input-xl-tip-line-height) + var(--okd-input-xl-tip-margin, 6px))
}

.okui-input-xl .okui-input-error {
    font-size: var(--okd-input-xl-error-font-size);
    line-height: var(--okd-input-xl-error-line-height);
    margin-top: 6px;
    margin-top: var(--okd-input-xl-tip-margin, 6px)
}

.okui-input-xl .okui-input-help-text,
.okui-input-xl .okui-input-tips {
    font-size: var(--okd-input-xl-tip-font-size);
    line-height: var(--okd-input-xl-tip-line-height);
    margin-top: 6px;
    margin-top: var(--okd-input-xl-tip-margin, 6px)
}

.okui-input-lg>.okui-input-box {
    border-radius: var(--okd-input-lg-border-radius);
    height: var(--okd-input-lg-height);
    padding: 0 8px;
    padding: 0 var(--okd-input-lg-padding-horizontal, 8px)
}

.okui-input-lg>.okui-input-box.auto-size {
    height: -moz-fit-content;
    height: fit-content;
    min-height: var(--okd-input-lg-height)
}

.okui-input-lg>.okui-input-box.no-padding-left {
    padding-left: 0
}

.okui-input-lg>.okui-input-box.no-padding-right {
    padding-right: 0
}

.okui-input-lg>.okui-input-box.ta {
    height: 100%;
    padding: 8px
}

.okui-input-lg>.okui-input-box.auto-resize-auto-height {
    height: -moz-fit-content;
    height: fit-content;
    min-height: var(--okd-input-lg-height)
}

.okui-input-lg>.okui-input-box.input-circle {
    border-radius: 100px
}

.okui-input-lg .okui-input-input {
    font-size: var(--okd-input-lg-text-font-size);
    padding: calc(var(--okd-input-lg-height)/2 - var(--okd-input-lg-text-font-size)/2 - 2px) 0
}

.okui-input-lg .okui-input-input::-webkit-input-placeholder {
    font-size: var(--okd-input-lg-text-font-size);
    font-weight: 400;
    text-overflow: ellipsis
}

.okui-input-lg .okui-input-input:-moz-placeholder {
    font-size: var(--okd-input-lg-text-font-size);
    font-weight: 400;
    text-overflow: ellipsis
}

.okui-input-lg .okui-input-input::-ms-input-placeholder {
    font-size: var(--okd-input-lg-text-font-size);
    font-weight: 400;
    text-overflow: ellipsis
}

.okui-input-lg .okui-input-input.ta {
    padding: 0
}

.okui-input-lg .okui-input-input.textarea-auto-resize {
    line-height: var(--okd-input-lg-text-font-size)
}

.okui-input-lg .okui-input-placeholder {
    font-size: var(--okd-input-lg-text-font-size);
    height: calc(var(--okd-input-lg-text-font-size) + 2px);
    line-height: calc(var(--okd-input-lg-text-font-size) + 2px)
}

.okui-input-lg .okui-input.okui-input-place-mode .okui-input-tips-box {
    min-height: calc(var(--okd-input-lg-tip-line-height) + 6px);
    min-height: calc(var(--okd-input-lg-tip-line-height) + var(--okd-input-lg-tip-margin, 6px))
}

.okui-input-lg .okui-input-error {
    font-size: var(--okd-input-lg-error-font-size);
    line-height: var(--okd-input-lg-error-line-height);
    margin-top: 6px;
    margin-top: var(--okd-input-lg-tip-margin, 6px)
}

.okui-input-lg .okui-input-help-text,
.okui-input-lg .okui-input-tips {
    font-size: var(--okd-input-lg-tip-font-size);
    line-height: var(--okd-input-lg-tip-line-height);
    margin-top: 6px;
    margin-top: var(--okd-input-lg-tip-margin, 6px)
}

.okui-input-xs>.okui-input-box {
    border-radius: var(--okd-input-xs-border-radius);
    height: var(--okd-input-xs-height);
    padding: 0 8px;
    padding: 0 var(--okd-input-xs-padding-horizontal, 8px)
}

.okui-input-xs>.okui-input-box.auto-size {
    height: -moz-fit-content;
    height: fit-content;
    min-height: var(--okd-input-xs-height)
}

.okui-input-xs>.okui-input-box.no-padding-left {
    padding-left: 0
}

.okui-input-xs>.okui-input-box.no-padding-right {
    padding-right: 0
}

.okui-input-xs>.okui-input-box.ta {
    height: 100%;
    padding: 8px
}

.okui-input-xs>.okui-input-box.auto-resize-auto-height {
    height: -moz-fit-content;
    height: fit-content;
    min-height: var(--okd-input-xs-height)
}

.okui-input-xs>.okui-input-box.input-circle {
    border-radius: 100px
}

.okui-input-xs .okui-input-input {
    font-size: var(--okd-input-xs-text-font-size);
    padding: calc(var(--okd-input-xs-height)/2 - var(--okd-input-xs-text-font-size)/2 - 2px) 0
}

.okui-input-xs .okui-input-input::-webkit-input-placeholder {
    font-size: var(--okd-input-xs-text-font-size);
    font-weight: 400;
    text-overflow: ellipsis
}

.okui-input-xs .okui-input-input:-moz-placeholder {
    font-size: var(--okd-input-xs-text-font-size);
    font-weight: 400;
    text-overflow: ellipsis
}

.okui-input-xs .okui-input-input::-ms-input-placeholder {
    font-size: var(--okd-input-xs-text-font-size);
    font-weight: 400;
    text-overflow: ellipsis
}

.okui-input-xs .okui-input-input.ta {
    padding: 0
}

.okui-input-xs .okui-input-input.textarea-auto-resize {
    line-height: var(--okd-input-xs-text-font-size)
}

.okui-input-xs .okui-input-placeholder {
    font-size: var(--okd-input-xs-text-font-size);
    height: calc(var(--okd-input-xs-text-font-size) + 2px);
    line-height: calc(var(--okd-input-xs-text-font-size) + 2px)
}

.okui-input-xs .okui-input.okui-input-place-mode .okui-input-tips-box {
    min-height: calc(var(--okd-input-xs-tip-line-height) + 4px);
    min-height: calc(var(--okd-input-xs-tip-line-height) + var(--okd-input-xs-tip-margin, 4px))
}

.okui-input-xs .okui-input-error {
    font-size: var(--okd-input-xs-error-font-size);
    line-height: var(--okd-input-xs-error-line-height);
    margin-top: 4px;
    margin-top: var(--okd-input-xs-tip-margin, 4px)
}

.okui-input-xs .okui-input-help-text,
.okui-input-xs .okui-input-tips {
    font-size: var(--okd-input-xs-tip-font-size);
    line-height: var(--okd-input-xs-tip-line-height);
    margin-top: 4px;
    margin-top: var(--okd-input-xs-tip-margin, 4px)
}

.okui-input-sm>.okui-input-box {
    border-radius: var(--okd-input-sm-border-radius);
    height: var(--okd-input-sm-height);
    padding: 0 8px;
    padding: 0 var(--okd-input-sm-padding-horizontal, 8px)
}

.okui-input-sm>.okui-input-box.auto-size {
    height: -moz-fit-content;
    height: fit-content;
    min-height: var(--okd-input-sm-height)
}

.okui-input-sm>.okui-input-box.no-padding-left {
    padding-left: 0
}

.okui-input-sm>.okui-input-box.no-padding-right {
    padding-right: 0
}

.okui-input-sm>.okui-input-box.ta {
    height: 100%;
    padding: 8px
}

.okui-input-sm>.okui-input-box.auto-resize-auto-height {
    height: -moz-fit-content;
    height: fit-content;
    min-height: var(--okd-input-sm-height)
}

.okui-input-sm>.okui-input-box.input-circle {
    border-radius: 100px
}

.okui-input-sm .okui-input-input {
    font-size: var(--okd-input-sm-text-font-size);
    padding: calc(var(--okd-input-sm-height)/2 - var(--okd-input-sm-text-font-size)/2 - 2px) 0
}

.okui-input-sm .okui-input-input::-webkit-input-placeholder {
    font-size: var(--okd-input-sm-text-font-size);
    font-weight: 400;
    text-overflow: ellipsis
}

.okui-input-sm .okui-input-input:-moz-placeholder {
    font-size: var(--okd-input-sm-text-font-size);
    font-weight: 400;
    text-overflow: ellipsis
}

.okui-input-sm .okui-input-input::-ms-input-placeholder {
    font-size: var(--okd-input-sm-text-font-size);
    font-weight: 400;
    text-overflow: ellipsis
}

.okui-input-sm .okui-input-input.ta {
    padding: 0
}

.okui-input-sm .okui-input-input.textarea-auto-resize {
    line-height: var(--okd-input-sm-text-font-size)
}

.okui-input-sm .okui-input-placeholder {
    font-size: var(--okd-input-sm-text-font-size);
    height: calc(var(--okd-input-sm-text-font-size) + 2px);
    line-height: calc(var(--okd-input-sm-text-font-size) + 2px)
}

.okui-input-sm .okui-input.okui-input-place-mode .okui-input-tips-box {
    min-height: calc(var(--okd-input-sm-tip-line-height) + 4px);
    min-height: calc(var(--okd-input-sm-tip-line-height) + var(--okd-input-sm-tip-margin, 4px))
}

.okui-input-sm .okui-input-error {
    font-size: var(--okd-input-sm-error-font-size);
    line-height: var(--okd-input-sm-error-line-height);
    margin-top: 4px;
    margin-top: var(--okd-input-sm-tip-margin, 4px)
}

.okui-input-sm .okui-input-help-text,
.okui-input-sm .okui-input-tips {
    font-size: var(--okd-input-sm-tip-font-size);
    line-height: var(--okd-input-sm-tip-line-height);
    margin-top: 4px;
    margin-top: var(--okd-input-sm-tip-margin, 4px)
}

.okui-input-md>.okui-input-box {
    border-radius: var(--okd-input-md-border-radius);
    height: var(--okd-input-md-height);
    padding: 0 8px;
    padding: 0 var(--okd-input-md-padding-horizontal, 8px)
}

.okui-input-md>.okui-input-box.auto-size {
    height: -moz-fit-content;
    height: fit-content;
    min-height: var(--okd-input-md-height)
}

.okui-input-md>.okui-input-box.no-padding-left {
    padding-left: 0
}

.okui-input-md>.okui-input-box.no-padding-right {
    padding-right: 0
}

.okui-input-md>.okui-input-box.ta {
    height: 100%;
    padding: 8px
}

.okui-input-md>.okui-input-box.auto-resize-auto-height {
    height: -moz-fit-content;
    height: fit-content;
    min-height: var(--okd-input-md-height)
}

.okui-input-md>.okui-input-box.input-circle {
    border-radius: 100px
}

.okui-input-md .okui-input-input {
    font-size: var(--okd-input-md-text-font-size);
    padding: calc(var(--okd-input-md-height)/2 - var(--okd-input-md-text-font-size)/2 - 2px) 0
}

.okui-input-md .okui-input-input::-webkit-input-placeholder {
    font-size: var(--okd-input-md-text-font-size);
    font-weight: 400;
    text-overflow: ellipsis
}

.okui-input-md .okui-input-input:-moz-placeholder {
    font-size: var(--okd-input-md-text-font-size);
    font-weight: 400;
    text-overflow: ellipsis
}

.okui-input-md .okui-input-input::-ms-input-placeholder {
    font-size: var(--okd-input-md-text-font-size);
    font-weight: 400;
    text-overflow: ellipsis
}

.okui-input-md .okui-input-input.ta {
    padding: 0
}

.okui-input-md .okui-input-input.textarea-auto-resize {
    line-height: var(--okd-input-md-text-font-size)
}

.okui-input-md .okui-input-placeholder {
    font-size: var(--okd-input-md-text-font-size);
    height: calc(var(--okd-input-md-text-font-size) + 2px);
    line-height: calc(var(--okd-input-md-text-font-size) + 2px)
}

.okui-input-md .okui-input.okui-input-place-mode .okui-input-tips-box {
    min-height: calc(var(--okd-input-md-tip-line-height) + 4px);
    min-height: calc(var(--okd-input-md-tip-line-height) + var(--okd-input-md-tip-margin, 4px))
}

.okui-input-md .okui-input-error {
    font-size: var(--okd-input-md-error-font-size);
    line-height: var(--okd-input-md-error-line-height);
    margin-top: 4px;
    margin-top: var(--okd-input-md-tip-margin, 4px)
}

.okui-input-md .okui-input-help-text,
.okui-input-md .okui-input-tips {
    font-size: var(--okd-input-md-tip-font-size);
    line-height: var(--okd-input-md-tip-line-height);
    margin-top: 4px;
    margin-top: var(--okd-input-md-tip-margin, 4px)
}

.okui-input-prefix {
    height: 100%
}

.okui-input-prefix .prefix-icon {
    color: var(--okd-input-icon-color)
}

.okui-input-prefix .select {
    padding-right: 8px
}

.okui-input-suffix {
    height: 100%
}

.okui-input-suffix .suffix-icon {
    color: var(--okd-input-icon-color)
}

.okui-input-suffix .clean-icon:hover {
    color: #000;
    color: var(--okd-input-search-suffix-icon-hover-color, #000)
}

.okui-input-suffix .error-icon {
    color: var(--okd-input-error-tips-color)
}

.okui-input-xl .okui-input-prefix .prefix-icon {
    font-size: var(--okd-input-xl-icon-size);
    margin-left: 0;
    margin-right: var(--okd-input-xl-icon-margin)
}

.okui-input-xl .okui-input-suffix .suffix-icon {
    font-size: var(--okd-input-xl-icon-size);
    margin-left: var(--okd-input-xl-icon-margin);
    margin-right: 0
}

.okui-input-lg .okui-input-prefix .prefix-icon {
    font-size: var(--okd-input-lg-icon-size);
    margin-left: 0;
    margin-right: var(--okd-input-lg-icon-margin)
}

.okui-input-lg .okui-input-suffix .suffix-icon {
    font-size: var(--okd-input-lg-icon-size);
    margin-left: var(--okd-input-lg-icon-margin);
    margin-right: 0
}

.okui-input-xs .okui-input-prefix .prefix-icon {
    font-size: var(--okd-input-xs-icon-size);
    margin-left: 0;
    margin-right: var(--okd-input-xs-icon-margin)
}

.okui-input-xs .okui-input-suffix .suffix-icon {
    font-size: var(--okd-input-xs-icon-size);
    margin-left: var(--okd-input-xs-icon-margin);
    margin-right: 0
}

.okui-input-sm .okui-input-prefix .prefix-icon {
    font-size: var(--okd-input-sm-icon-size);
    margin-left: 0;
    margin-right: var(--okd-input-sm-icon-margin)
}

.okui-input-sm .okui-input-suffix .suffix-icon {
    font-size: var(--okd-input-sm-icon-size);
    margin-left: var(--okd-input-sm-icon-margin);
    margin-right: 0
}

.okui-input-md .okui-input-prefix .prefix-icon {
    font-size: var(--okd-input-md-icon-size);
    margin-left: 0;
    margin-right: var(--okd-input-md-icon-margin)
}

.okui-input-md .okui-input-suffix .suffix-icon {
    font-size: var(--okd-input-md-icon-size);
    margin-left: var(--okd-input-md-icon-margin);
    margin-right: 0
}

.okui-input:hover .okui-input-number-suffix:not(.operation-always) {
    opacity: 1
}

.okui-input-number-inner {
    overflow: hidden
}

.okui-input-number-suffix {
    align-items: center;
    border-left: 1px solid var(--okd-input-number-suffix-border-color, var(--okd-input-default-border-color));
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    line-height: 0;
    margin-left: 6px;
    overflow: hidden;
    text-align: center;
    transition: opacity .5s;
    width: 24px
}

.okui-input-number-suffix:not(.operation-always) {
    opacity: 0
}

.okui-input-number-suffix-part {
    align-items: center;
    background: var(--okd-input-number-default-add-icon-background);
    box-sizing: border-box;
    display: flex;
    flex: 1 1;
    justify-content: center;
    width: 100%
}

.okui-input-number-suffix-part .icon {
    color: var(--okd-input-number-default-add-icon-color);
    font-size: 13px
}

.okui-input-number-suffix-part .hover,
.okui-input-number-suffix-part:not(.okui-input-number-suffix-part-disabled):hover {
    background: var(--okd-input-number-hover-add-icon-background)
}

.okui-input-number-suffix-part .hover .icon,
.okui-input-number-suffix-part:not(.okui-input-number-suffix-part-disabled):hover .icon {
    color: var(--okd-input-number-hover-add-icon-color)
}

.okui-input-number-suffix-part .active,
.okui-input-number-suffix-part:not(.okui-input-number-suffix-part-disabled):active {
    background: var(--okd-input-number-active-add-icon-background)
}

.okui-input-number-suffix-part .active .icon,
.okui-input-number-suffix-part:not(.okui-input-number-suffix-part-disabled):active .icon {
    color: var(--okd-input-number-active-add-icon-color)
}

.okui-input-number-suffix-part-disabled {
    cursor: not-allowed
}

.okui-input-number-suffix-line {
    background: var(--okd-input-default-border-color);
    background: var(--okd-input-number-suffix-border-color, var(--okd-input-default-border-color));
    height: 1px;
    width: 100%
}

.okui-input-number-suffix .up {
    transform: rotate(180deg)
}

.okui-input-number-localization {
    text-align: right
}

.okui-input-number-localization-percent {
    color: var(--okd-input-default-text-color);
    display: inline-block
}

.okui-input-xl .okui-input-number-suffix.xl {
    border-bottom-right-radius: calc(var(--okd-input-xl-border-radius) - 1px);
    border-top-right-radius: calc(var(--okd-input-xl-border-radius) - 1px)
}

.okui-input-lg .okui-input-number-suffix.lg {
    border-bottom-right-radius: calc(var(--okd-input-lg-border-radius) - 1px);
    border-top-right-radius: calc(var(--okd-input-lg-border-radius) - 1px)
}

.okui-input-xs .okui-input-number-suffix.xs {
    border-bottom-right-radius: calc(var(--okd-input-xs-border-radius) - 1px);
    border-top-right-radius: calc(var(--okd-input-xs-border-radius) - 1px)
}

.okui-input-sm .okui-input-number-suffix.sm {
    border-bottom-right-radius: calc(var(--okd-input-sm-border-radius) - 1px);
    border-top-right-radius: calc(var(--okd-input-sm-border-radius) - 1px)
}

.okui-input-md .okui-input-number-suffix.md {
    border-bottom-right-radius: calc(var(--okd-input-md-border-radius) - 1px);
    border-top-right-radius: calc(var(--okd-input-md-border-radius) - 1px)
}

.okui-input-suffix .suffix-icon+.okui-input-code-btn,
.okui-input-suffix .suffix-icon+.okui-input-count-down {
    margin-left: var(--okd-input-md-icon-margin)
}

.okui-input-count-down {
    color: var(--okd-input-code-common-count-color)
}

.okui-input input::-webkit-inner-spin-button,
.okui-input input::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0
}

.okui-input input[type=number] {
    -moz-appearance: textfield
}

.okui-input-xl .okui-input-count-down {
    font-size: var(--okd-input-code-xl-count-font-size);
    line-height: var(--okd-input-code-xl-count-line-height)
}

.okui-input-lg .okui-input-count-down {
    font-size: var(--okd-input-code-lg-count-font-size);
    line-height: var(--okd-input-code-lg-count-line-height)
}

.okui-input-xs .okui-input-count-down {
    font-size: var(--okd-input-code-xs-count-font-size);
    line-height: var(--okd-input-code-xs-count-line-height)
}

.okui-input-sm .okui-input-count-down {
    font-size: var(--okd-input-code-sm-count-font-size);
    line-height: var(--okd-input-code-sm-count-line-height)
}

.okui-input-md .okui-input-count-down {
    font-size: var(--okd-input-code-md-count-font-size);
    line-height: var(--okd-input-code-md-count-line-height)
}

.okui-input-switch-icon.icon {
    cursor: pointer
}

.okui-input-prefix .okui-input-search-prefix-icon {
    color: var(--okd-input-search-prefix-icon-color);
    cursor: pointer;
    font-size: var(--okd-input-search-prefix-icon-size);
    margin-right: 8px
}

.okui-input-suffix .clean-icon {
    color: var(--okd-input-search-suffix-icon-color);
    cursor: pointer;
    font-size: var(--okd-input-search-suffix-icon-size)
}

.okui-input-search .okui-input-error {
    color: var(--okd-input-search-error-tips-color)
}

.okui-input-search .okui-input-box {
    background-color: var(--okd-input-search-default-background);
    border-color: var(--okd-input-search-default-border-color);
    box-shadow: var(--okd-input-search-default-shadow)
}

.okui-input-search .okui-input-input {
    color: var(--okd-input-search-default-text-color)
}

.okui-input-search .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-default-placeholder-color);
    color: var(--okd-input-search-default-placeholder-color)
}

.okui-input-search .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-default-placeholder-color);
    color: var(--okd-input-search-default-placeholder-color);
    opacity: 1
}

.okui-input-search .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-default-placeholder-color);
    color: var(--okd-input-search-default-placeholder-color)
}

.okui-input-search.hover .okui-input-box,
.okui-input-search:hover .okui-input-box {
    background: var(--okd-input-search-hover-background);
    border: thin solid var(--okd-input-search-hover-border-color);
    box-shadow: var(--okd-input-search-hover-shadow)
}

.okui-input-search.hover .okui-input-box .okui-input-input,
.okui-input-search:hover .okui-input-box .okui-input-input {
    -webkit-text-fill-color: var(--okd-input-search-hover-text-color);
    caret-color: var(--okd-input-search-hover-caret-color);
    color: var(--okd-input-search-hover-text-color)
}

.okui-input-search.hover .okui-input-box .okui-input-input::-webkit-input-placeholder,
.okui-input-search:hover .okui-input-box .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-hover-placeholder-color);
    color: var(--okd-input-search-hover-placeholder-color)
}

.okui-input-search.hover .okui-input-box .okui-input-input:-moz-placeholder,
.okui-input-search:hover .okui-input-box .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-hover-placeholder-color);
    color: var(--okd-input-search-hover-placeholder-color);
    opacity: 1
}

.okui-input-search.hover .okui-input-box .okui-input-input::-ms-input-placeholder,
.okui-input-search:hover .okui-input-box .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-hover-placeholder-color);
    color: var(--okd-input-search-hover-placeholder-color)
}

.okui-input-search.focus .okui-input-box {
    background: var(--okd-input-search-focus-background);
    border: thin solid var(--okd-input-search-focus-border-color);
    box-shadow: var(--okd-input-search-focus-shadow)
}

.okui-input-search.focus .okui-input-box .okui-input-input {
    -webkit-text-fill-color: var(--okd-input-search-focus-text-color);
    caret-color: var(--okd-input-search-focus-caret-color);
    color: var(--okd-input-search-focus-text-color)
}

.okui-input-search.focus .okui-input-box .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-focus-placeholder-color);
    color: var(--okd-input-search-focus-placeholder-color)
}

.okui-input-search.focus .okui-input-box .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-focus-placeholder-color);
    color: var(--okd-input-search-focus-placeholder-color);
    opacity: 1
}

.okui-input-search.focus .okui-input-box .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-focus-placeholder-color);
    color: var(--okd-input-search-focus-placeholder-color)
}

.okui-input-search.disabled .okui-input-box {
    background: var(--okd-input-search-disabled-background);
    border: thin solid var(--okd-input-search-disabled-border-color);
    box-shadow: var(--okd-input-search-disabled-shadow)
}

.okui-input-search.disabled .okui-input-box .okui-input-input {
    -webkit-text-fill-color: var(--okd-input-search-disabled-text-color);
    caret-color: var(--okd-input-search-disabled-caret-color);
    color: var(--okd-input-search-disabled-text-color)
}

.okui-input-search.disabled .okui-input-box .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-disabled-placeholder-color);
    color: var(--okd-input-search-disabled-placeholder-color)
}

.okui-input-search.disabled .okui-input-box .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-disabled-placeholder-color);
    color: var(--okd-input-search-disabled-placeholder-color);
    opacity: 1
}

.okui-input-search.disabled .okui-input-box .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-disabled-placeholder-color);
    color: var(--okd-input-search-disabled-placeholder-color)
}

.okui-input-search.error .okui-input-box {
    background: var(--okd-input-search-error-background);
    border: thin solid var(--okd-input-search-error-border-color);
    box-shadow: var(--okd-input-search-error-shadow)
}

.okui-input-search.error .okui-input-box .okui-input-input {
    -webkit-text-fill-color: var(--okd-input-search-error-text-color);
    caret-color: var(--okd-input-search-error-caret-color);
    color: var(--okd-input-search-error-text-color)
}

.okui-input-search.error .okui-input-box .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-error-placeholder-color);
    color: var(--okd-input-search-error-placeholder-color)
}

.okui-input-search.error .okui-input-box .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-error-placeholder-color);
    color: var(--okd-input-search-error-placeholder-color);
    opacity: 1
}

.okui-input-search.error .okui-input-box .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-error-placeholder-color);
    color: var(--okd-input-search-error-placeholder-color)
}

.okui-input-verify {
    display: flex;
    flex-direction: row;
    position: relative
}

.okui-input-verify * {
    box-sizing: border-box
}

.okui-input-verify .okui-input-verify-input:focus {
    border: 1px solid var(--okd-input-focus-border-color);
    box-shadow: var(--okd-input-focus-shadow)
}

.okui-input-verify .okui-input-verify-input {
    align-items: center;
    background: transparent;
    background: var(--okd-input-default-background);
    border: thin solid var(--okd-input-default-border-color);
    box-shadow: var(--okd-input-default-shadow);
    caret-color: var(--okd-input-focus-caret-color);
    color: var(--okd-input-default-text-color);
    display: flex;
    font-family: inherit;
    outline: none;
    text-align: center;
    transition: border-color .3s, box-shadow .3s
}

.okui-input-verify .okui-input-verify-input:-webkit-autofill {
    -webkit-text-fill-color: var(--okd-input-default-text-color) !important;
    border: none;
    -webkit-box-shadow: 0 0 0 30px var(--okd-input-default-background) inset
}

.okui-input-verify .okui-input-verify-input.input-xl {
    border-radius: 6px;
    font-size: 26px;
    height: 44px;
    margin-right: 8px;
    width: 40px
}

.okui-input-verify .okui-input-verify-input.input-xl.auto-size {
    height: -moz-fit-content;
    height: fit-content;
    min-height: 44px
}

.okui-input-verify .okui-input-verify-input.input-xl:last-child {
    margin-right: 0
}

.okui-input-verify .okui-input-verify-input.input-lg {
    border-radius: 6px;
    font-size: 26px;
    height: 44px;
    margin-right: 8px;
    width: 40px
}

.okui-input-verify .okui-input-verify-input.input-lg.auto-size {
    height: -moz-fit-content;
    height: fit-content;
    min-height: 44px
}

.okui-input-verify .okui-input-verify-input.input-lg:last-child {
    margin-right: 0
}

.okui-input-verify .okui-input-verify-input.input-xs {
    border-radius: 6px;
    font-size: 26px;
    height: 44px;
    margin-right: 8px;
    width: 40px
}

.okui-input-verify .okui-input-verify-input.input-xs.auto-size {
    height: -moz-fit-content;
    height: fit-content;
    min-height: 44px
}

.okui-input-verify .okui-input-verify-input.input-xs:last-child {
    margin-right: 0
}

.okui-input-verify .okui-input-verify-input.input-sm {
    border-radius: 6px;
    font-size: 20px;
    height: 40px;
    margin-right: 10px;
    width: 40px
}

.okui-input-verify .okui-input-verify-input.input-sm.auto-size {
    height: -moz-fit-content;
    height: fit-content;
    min-height: 40px
}

.okui-input-verify .okui-input-verify-input.input-sm:last-child {
    margin-right: 0
}

.okui-input-verify .okui-input-verify-input.input-md {
    border-radius: 6px;
    font-size: 26px;
    height: 44px;
    margin-right: 8px;
    width: 40px
}

.okui-input-verify .okui-input-verify-input.input-md.auto-size {
    height: -moz-fit-content;
    height: fit-content;
    min-height: 44px
}

.okui-input-verify .okui-input-verify-input.input-md:last-child {
    margin-right: 0
}

.okui-input-verify .okui-input-verify-input.error {
    border-color: var(--okd-input-verify-error-border-color, var(--okd-input-error-border-color))
}

.okui-input-verify .okui-input-verify-input.disabled {
    -webkit-text-fill-color: var(--okd-input-disabled-text-color);
    background: var(--okd-input-disabled-background);
    border: thin solid var(--okd-input-disabled-border-color);
    box-shadow: var(--okd-input-disabled-shadow);
    caret-color: var(--okd-input-disabled-caret-color);
    color: var(--okd-input-disabled-text-color);
    cursor: not-allowed
}