.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 0.3s, box-shadow 0.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 0.3s, box-shadow 0.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 0.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 0.3s, box-shadow 0.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;
}