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

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

.theme-light,
:root {
    --login-okd-input-default-text-color: var(--login-okd-color-content-primary);
    --login-okd-input-default-placeholder-color: var(--login-okd-color-content-disabled);
    --login-okd-input-default-border-color: var(--login-okd-color-transparent-base-white);
    --login-okd-input-default-caret-color: var(--login-okd-color-content-primary);
    --login-okd-input-default-shadow: 0px 0px 0px 0px transparent;
    --login-okd-input-default-background: var(--login-okd-color-neutral-20);
    --login-okd-input-hover-text-color: var(--login-okd-color-content-primary);
    --login-okd-input-hover-placeholder-color: var(--login-okd-color-content-disabled);
    --login-okd-input-hover-border-color: var(--login-okd-color-transparent-base-white);
    --login-okd-input-hover-caret-color: var(--login-okd-color-content-primary);
    --login-okd-input-hover-shadow: 0 0 0 0 transparent;
    --login-okd-input-hover-background: var(--login-okd-color-neutral-20);
    --login-okd-input-focus-text-color: var(--login-okd-color-content-primary);
    --login-okd-input-focus-placeholder-color: var(--login-okd-color-content-disabled);
    --login-okd-input-focus-border-color: var(--login-okd-color-border-selected);
    --login-okd-input-focus-caret-color: var(--login-okd-color-content-primary);
    --login-okd-input-focus-shadow: 0px 0px 0px 0px #00000000;
    --login-okd-input-focus-background: var(--login-okd-color-neutral-20);
    --login-okd-input-disabled-text-color: var(--login-okd-color-content-disabled);
    --login-okd-input-disabled-placeholder-color: var(--login-okd-color-content-disabled);
    --login-okd-input-disabled-border-color: var(--login-okd-color-neutral-40);
    --login-okd-input-disabled-caret-color: var(--login-okd-color-content-disabled);
    --login-okd-input-disabled-shadow: 0 0 0 0 transparent;
    --login-okd-input-disabled-background: var(--login-okd-color-neutral-15);
    --login-okd-input-error-text-color: var(--login-okd-color-content-primary);
    --login-okd-input-error-placeholder-color: var(--login-okd-color-content-disabled);
    --login-okd-input-error-border-color: var(--login-okd-color-semantic-negative);
    --login-okd-input-error-caret-color: var(--login-okd-color-content-primary);
    --login-okd-input-error-shadow: var(--login-okd-shadow-sm);
    --login-okd-input-error-background: var(--login-okd-color-neutral-20);
    --login-okd-input-error-tips-color: var(--login-okd-color-semantic-negative);
    --login-okd-input-tips-text-color: var(--login-okd-color-content-contrast);
    --login-okd-input-icon-color: var(--login-okd-color-content-contrast);
    --login-okd-input-label-color: var(--login-okd-color-content-primary);
    --login-okd-input-action-color: var(--login-okd-color-content-primary);
    --login-okd-input-md-label-font-size: var(--login-okd-font-size-md);
    --login-okd-input-sm-label-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-xs-label-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-md-label-line-height: var(--login-okd-line-height-md);
    --login-okd-input-sm-label-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-xs-label-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-md-action-font-size: var(--login-okd-font-size-md);
    --login-okd-input-sm-action-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-xs-action-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-md-action-line-height: var(--login-okd-line-height-md);
    --login-okd-input-sm-action-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-xs-action-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-md-height: 40px;
    --login-okd-input-md-text-font-size: var(--login-okd-font-size-md);
    --login-okd-input-md-border-radius: 8px;
    --login-okd-input-md-error-font-size: 14px;
    --login-okd-input-md-error-line-height: 16px;
    --login-okd-input-md-tip-font-size: 14px;
    --login-okd-input-md-tip-line-height: 16px;
    --login-okd-input-md-icon-size: 20px;
    --login-okd-input-md-icon-margin: 6px;
    --login-okd-input-sm-height: 32px;
    --login-okd-input-sm-text-font-size: 12px;
    --login-okd-input-sm-border-radius: 8px;
    --login-okd-input-sm-error-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-sm-error-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-sm-tip-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-sm-tip-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-sm-icon-size: 16px;
    --login-okd-input-sm-icon-margin: 4px;
    --login-okd-input-xs-height: 28px;
    --login-okd-input-xs-text-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-xs-border-radius: 8px;
    --login-okd-input-xs-error-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-xs-error-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-xs-tip-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-xs-tip-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-xs-icon-size: 16px;
    --login-okd-input-xs-icon-margin: 4px;
    --login-okd-input-number-default-add-icon-color: var(--login-okd-color-content-disabled);
    --login-okd-input-number-default-add-icon-background: var(--login-okd-color-transparent-base-white);
    --login-okd-input-number-hover-add-icon-color: var(--login-okd-color-content-primary);
    --login-okd-input-number-hover-add-icon-background: var(--login-okd-color-background-surface-pressed);
    --login-okd-input-number-active-add-icon-color: var(--login-okd-color-gray-300);
    --login-okd-input-number-active-add-icon-background: var(--login-okd-color-gray-100);
    --login-okd-input-number-disabled-add-icon-color: var(--login-okd-color-content-disabled);
    --login-okd-input-number-disabled-add-icon-background: var(--login-okd-color-content-disabled);
    --login-okd-input-code-common-btn-color: var(--login-okd-color-blue-700);
    --login-okd-input-code-common-btn-disabled-color: var(--login-okd-color-gray-300);
    --login-okd-input-code-common-count-color: var(--login-okd-color-content-disabled);
    --login-okd-input-code-md-btn-font-size: var(--login-okd-font-size-md);
    --login-okd-input-code-md-btn-line-height: var(--login-okd-line-height-md);
    --login-okd-input-code-md-count-font-size: var(--login-okd-font-size-md);
    --login-okd-input-code-md-count-line-height: var(--login-okd-line-height-md);
    --login-okd-input-code-sm-btn-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-code-sm-btn-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-code-sm-count-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-code-sm-count-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-code-xs-btn-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-code-xs-btn-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-code-xs-count-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-code-xs-count-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-search-default-text-color: var(--login-okd-color-content-primary);
    --login-okd-input-search-default-placeholder-color: var(--login-okd-color-content-disabled);
    --login-okd-input-search-default-border-color: var(--login-okd-color-transparent);
    --login-okd-input-search-default-caret-color: var(--login-okd-color-content-primary);
    --login-okd-input-search-default-shadow: 0px 0px 0px 0px transparent;
    --login-okd-input-search-default-background: var(--login-okd-color-neutral-20);
    --login-okd-input-search-hover-text-color: var(--login-okd-color-content-primary);
    --login-okd-input-search-hover-placeholder-color: var(--login-okd-color-content-disabled);
    --login-okd-input-search-hover-border-color: var(--login-okd-color-transparent-base-white);
    --login-okd-input-search-hover-caret-color: var(--login-okd-color-content-primary);
    --login-okd-input-search-hover-shadow: 0px 0px 0px 0px #0000001a;
    --login-okd-input-search-hover-background: var(--login-okd-color-neutral-20);
    --login-okd-input-search-focus-text-color: var(--login-okd-color-content-primary);
    --login-okd-input-search-focus-placeholder-color: var(--login-okd-color-content-disabled);
    --login-okd-input-search-focus-border-color: var(--login-okd-color-border-selected);
    --login-okd-input-search-focus-caret-color: var(--login-okd-color-content-primary);
    --login-okd-input-search-focus-shadow: 0px 0px 0px 0px #00000000;
    --login-okd-input-search-focus-background: var(--login-okd-color-neutral-20);
    --login-okd-input-search-error-text-color: var(--login-okd-color-content-primary);
    --login-okd-input-search-error-placeholder-color: var(--login-okd-color-content-disabled);
    --login-okd-input-search-error-border-color: var(--login-okd-color-semantic-negative);
    --login-okd-input-search-error-caret-color: var(--login-okd-color-content-primary);
    --login-okd-input-search-error-shadow: 0 1px 2px 0 #0000000d;
    --login-okd-input-search-error-background: var(--login-okd-color-neutral-20);
    --login-okd-input-search-disabled-text-color: var(--login-okd-color-content-disabled);
    --login-okd-input-search-disabled-placeholder-color: var(--login-okd-color-content-disabled);
    --login-okd-input-search-disabled-border-color: var(--login-okd-color-transparent);
    --login-okd-input-search-disabled-caret-color: var(--login-okd-color-content-disabled);
    --login-okd-input-search-disabled-shadow: 0px 0px 0px 0px transparent;
    --login-okd-input-search-disabled-background: var(--login-okd-color-neutral-20);
    --login-okd-input-search-prefix-icon-color: var(--login-okd-color-content-contrast);
    --login-okd-input-search-prefix-icon-size: 16px;
    --login-okd-input-search-suffix-icon-color: var(--login-okd-color-content-contrast);
    --login-okd-input-search-suffix-icon-size: 13px;
    --login-okd-input-search-error-tips-color: var(--login-okd-color-semantic-negative);
    --login-okd-input-verify-md-width: 44px;
    --login-okd-input-verify-md-height: 48px;
    --login-okd-input-lg-height: 44px;
    --login-okd-input-lg-border-radius: 8px;
    --login-okd-input-lg-label-font-size: 14px;
    --login-okd-input-lg-label-line-height: 20px;
    --login-okd-input-lg-label-margin: 6px;
    --login-okd-input-lg-action-font-size: 14px;
    --login-okd-input-lg-action-line-height: 20px;
    --login-okd-input-lg-text-font-size: 14px;
    --login-okd-input-lg-error-font-size: 14px;
    --login-okd-input-lg-error-line-height: 16px;
    --login-okd-input-lg-tip-margin: 4px;
    --login-okd-input-lg-tip-font-size: 14px;
    --login-okd-input-lg-tip-line-height: 16px;
    --login-okd-input-md-label-margin: 4px;
    --login-okd-input-md-tip-margin: 4px;
    --login-okd-input-sm-label-margin: 4px;
    --login-okd-input-sm-tip-margin: 4px;
    --login-okd-input-xs-label-margin: 4px;
    --login-okd-input-xs-tip-margin: 4px;
    --login-okd-input-xl-height: 48px;
    --login-okd-input-xl-text-font-size: 14px;
    --login-okd-input-xl-border-radius: 8px;
    --login-okd-input-lg-icon-size: 20px;
    --login-okd-input-lg-icon-margin: 8px;
    --login-okd-input-xl-label-line-height: 20px;
    --login-okd-input-xl-icon-size: 20px;
    --login-okd-input-xl-icon-margin: 12px;
    --login-okd-input-xl-error-font-size: 14px;
    --login-okd-input-xl-error-line-height: 16px;
    --login-okd-input-xl-action-font-size: 14px;
    --login-okd-input-xl-action-line-height: 20px;
    --login-okd-input-xl-label-margin: 6px;
    --login-okd-input-xl-label-font-size: 14px;
    --login-okd-input-xl-tip-font-size: 14px;
    --login-okd-input-xl-tip-margin: 6px;
    --login-okd-input-xl-tip-line-height: 16px;
    --login-okd-input-verify-xl-height: px;
    --login-okd-input-verify-xl-width: px;
    --login-okd-input-xs-padding-horizontal: 8px;
    --login-okd-input-sm-padding-horizontal: 8px;
    --login-okd-input-md-padding-horizontal: 8px;
    --login-okd-input-lg-padding-horizontal: 8px;
    --login-okd-input-xl-padding-horizontal: 16px;
    --login-okd-input-reversed-default-text-color: var(--login-okd-color-content-inverse);
    --login-okd-input-reversed-default-placeholder-color: hsla(0, 0%, 100%, .36);
    --login-okd-input-reversed-default-border-color: var(--login-okd-color-transparent-base-black);
    --login-okd-input-reversed-default-caret-color: var(--login-okd-color-content-inverse);
    --login-okd-input-reversed-default-shadow: 0 0 0 0 transparent;
    --login-okd-input-reversed-default-background: var(--login-okd-color-neutral-180);
    --login-okd-input-reversed-hover-text-color: var(--login-okd-color-content-inverse);
    --login-okd-input-reversed-hover-placeholder-color: hsla(0, 0%, 100%, .36);
    --login-okd-input-reversed-hover-border-color: var(--login-okd-color-transparent-black);
    --login-okd-input-reversed-hover-caret-color: var(--login-okd-color-content-contrast);
    --login-okd-input-reversed-hover-shadow: 0px 0px 0px 0px transparent;
    --login-okd-input-reversed-hover-background: var(--login-okd-color-neutral-180);
    --login-okd-input-reversed-focus-text-color: var(--login-okd-color-content-inverse);
    --login-okd-input-reversed-focus-placeholder-color: hsla(0, 0%, 100%, .36);
    --login-okd-input-reversed-focus-border-color: var(--login-okd-color-neutral-5);
    --login-okd-input-reversed-focus-caret-color: var(--login-okd-color-content-inverse);
    --login-okd-input-reversed-focus-shadow: 0px 0px 0px 0px #ffffff00;
    --login-okd-input-reversed-focus-background: var(--login-okd-color-neutral-180);
    --login-okd-input-reversed-disabled-text-color: var(--login-okd-color-gray-600);
    --login-okd-input-reversed-disabled-placeholder-color: var(--login-okd-color-gray-600);
    --login-okd-input-reversed-disabled-border-color: var(--login-okd-color-neutral-160);
    --login-okd-input-reversed-disabled-caret-color: var(--login-okd-color-fq-accent);
    --login-okd-input-reversed-disabled-shadow: 0 0 0 0 transparent;
    --login-okd-input-reversed-disabled-background: var(--login-okd-color-neutral-180);
    --login-okd-input-reversed-error-text-color: var(--login-okd-color-content-inverse);
    --login-okd-input-reversed-error-placeholder-color: hsla(0, 0%, 100%, .36);
    --login-okd-input-reversed-error-border-color: var(--login-okd-color-semantic-negative);
    --login-okd-input-reversed-error-caret-color: var(--login-okd-color-content-contrast);
    --login-okd-input-reversed-error-shadow: 0 0 0 0 transparent;
    --login-okd-input-reversed-error-background: var(--login-okd-color-neutral-180);
    --login-okd-input-reversed-error-tips-color: var(--login-okd-color-semantic-negative);
    --login-okd-input-reversed-tips-text-color: var(--login-okd-color-content-contrast);
    --login-okd-input-reversed-icon-color: var(--login-okd-color-gray-400);
    --login-okd-input-reversed-label-color: var(--login-okd-color-gray-200);
    --login-okd-input-reversed-action-color: var(--login-okd-color-content-inverse);
    --login-okd-input-number-reversed-default-add-icon-color: var(--login-okd-color-gray-500);
    --login-okd-input-number-reversed-default-add-icon-background: var(--login-okd-color-transparent);
    --login-okd-input-number-reversed-hover-add-icon-color: var(--login-okd-color-neutral-5);
    --login-okd-input-number-reversed-hover-add-icon-background: var(--login-okd-color-neutral-170);
    --login-okd-input-number-reversed-active-add-icon-color: var(--login-okd-color-gray-500);
    --login-okd-input-number-reversed-active-add-icon-background: var(--login-okd-color-transparent);
    --login-okd-input-number-reversed-disabled-add-icon-color: var(--login-okd-color-gray-500);
    --login-okd-input-number-reversed-disabled-add-icon-background: var(--login-okd-color-transparent);
    --login-okd-input-code-reversed-common-btn-color: var(--login-okd-color-content-inverse);
    --login-okd-input-code-reversed-common-btn-disabled-color: var(--login-okd-color-gray-600);
    --login-okd-input-code-reversed-common-count-color: var(--login-okd-color-gray-600);
    --login-okd-input-search-reversed-default-text-color: var(--login-okd-color-white);
    --login-okd-input-search-reversed-default-placeholder-color: var(--login-okd-color-neutral-120);
    --login-okd-input-search-reversed-default-border-color: var(--login-okd-color-transparent);
    --login-okd-input-search-reversed-default-caret-color: var(--login-okd-color-white);
    --login-okd-input-search-reversed-default-shadow: 0px 0px 0px 0px #f9f9f91a;
    --login-okd-input-search-reversed-default-background: var(--login-okd-color-neutral-180);
    --login-okd-input-search-reversed-hover-text-color: var(--login-okd-color-white);
    --login-okd-input-search-reversed-hover-placeholder-color: var(--login-okd-color-gray-700);
    --login-okd-input-search-reversed-hover-border-color: var(--login-okd-color-transparent-base-black);
    --login-okd-input-search-reversed-hover-caret-color: var(--login-okd-color-white);
    --login-okd-input-search-reversed-hover-shadow: 0px 0px 0px 2px #f9f9f91a;
    --login-okd-input-search-reversed-hover-background: var(--login-okd-color-neutral-180);
    --login-okd-input-search-reversed-focus-text-color: var(--login-okd-color-white);
    --login-okd-input-search-reversed-focus-placeholder-color: var(--login-okd-color-gray-700);
    --login-okd-input-search-reversed-focus-border-color: var(--login-okd-color-white);
    --login-okd-input-search-reversed-focus-caret-color: var(--login-okd-color-white);
    --login-okd-input-search-reversed-focus-shadow: 0 0 0 0 transparent;
    --login-okd-input-search-reversed-focus-background: var(--login-okd-color-neutral-180);
    --login-okd-input-search-reversed-error-text-color: var(--login-okd-color-white);
    --login-okd-input-search-reversed-error-placeholder-color: var(--login-okd-color-gray-700);
    --login-okd-input-search-reversed-error-border-color: var(--login-okd-color-fq-critical);
    --login-okd-input-search-reversed-error-caret-color: var(--login-okd-color-transparent);
    --login-okd-input-search-reversed-error-shadow: 0 0 0 0 transparent;
    --login-okd-input-search-reversed-error-background: var(--login-okd-color-black);
    --login-okd-input-search-reversed-disabled-text-color: var(--login-okd-color-gray-500);
    --login-okd-input-search-reversed-disabled-placeholder-color: var(--login-okd-color-gray-700);
    --login-okd-input-search-reversed-disabled-border-color: var(--login-okd-color-transparent);
    --login-okd-input-search-reversed-disabled-caret-color: var(--login-okd-color-transparent);
    --login-okd-input-search-reversed-disabled-shadow: 0 0 0 0 transparent;
    --login-okd-input-search-reversed-disabled-background: var(--login-okd-color-gray-800);
    --login-okd-input-search-reversed-prefix-icon-color: var(--login-okd-color-gray-300);
    --login-okd-input-search-reversed-error-tips-color: var(--login-okd-color-fq-critical);
    --login-okd-input-search-suffix-icon-hover-color: #000;
    --login-okd-input-verify-xl-border-radius: 8pxpx;
    --login-okd-input-code-xl-btn-font-size: 12px;
    --login-okd-input-number-suffix-border-color: var(--login-okd-color-border-primary)
}

.theme-dark {
    --login-okd-input-default-text-color: var(--login-okd-color-content-primary);
    --login-okd-input-default-placeholder-color: var(--login-okd-color-content-disabled);
    --login-okd-input-default-border-color: var(--login-okd-color-transparent-base-white);
    --login-okd-input-default-caret-color: var(--login-okd-color-content-primary);
    --login-okd-input-default-shadow: 0px 0px 0px 0px transparent;
    --login-okd-input-default-background: var(--login-okd-color-neutral-180);
    --login-okd-input-hover-text-color: var(--login-okd-color-content-primary);
    --login-okd-input-hover-placeholder-color: var(--login-okd-color-content-disabled);
    --login-okd-input-hover-border-color: var(--login-okd-color-transparent-base-white);
    --login-okd-input-hover-caret-color: var(--login-okd-color-content-primary);
    --login-okd-input-hover-shadow: 0px 0px 0px 0px #fafafa33;
    --login-okd-input-hover-background: var(--login-okd-color-neutral-180);
    --login-okd-input-focus-text-color: var(--login-okd-color-content-primary);
    --login-okd-input-focus-placeholder-color: var(--login-okd-color-content-disabled);
    --login-okd-input-focus-border-color: var(--login-okd-color-border-selected);
    --login-okd-input-focus-caret-color: var(--login-okd-color-content-primary);
    --login-okd-input-focus-shadow: 0px 0px 0px 0px #00000000;
    --login-okd-input-focus-background: var(--login-okd-color-neutral-180);
    --login-okd-input-disabled-text-color: var(--login-okd-color-content-disabled);
    --login-okd-input-disabled-placeholder-color: var(--login-okd-color-content-disabled);
    --login-okd-input-disabled-border-color: var(--login-okd-color-border-primary);
    --login-okd-input-disabled-caret-color: var(--login-okd-color-content-disabled);
    --login-okd-input-disabled-shadow: var(--login-okd-shadow-sm);
    --login-okd-input-disabled-background: var(--login-okd-color-neutral-185);
    --login-okd-input-error-text-color: var(--login-okd-color-content-primary);
    --login-okd-input-error-placeholder-color: var(--login-okd-color-content-disabled);
    --login-okd-input-error-border-color: var(--login-okd-color-semantic-negative);
    --login-okd-input-error-caret-color: var(--login-okd-color-content-primary);
    --login-okd-input-error-shadow: var(--login-okd-shadow-sm);
    --login-okd-input-error-background: var(--login-okd-color-neutral-180);
    --login-okd-input-error-tips-color: var(--login-okd-color-semantic-negative);
    --login-okd-input-tips-text-color: var(--login-okd-color-content-contrast);
    --login-okd-input-icon-color: var(--login-okd-color-content-contrast);
    --login-okd-input-label-color: var(--login-okd-color-content-primary);
    --login-okd-input-action-color: var(--login-okd-color-content-primary);
    --login-okd-input-md-label-font-size: var(--login-okd-font-size-md);
    --login-okd-input-sm-label-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-xs-label-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-md-label-line-height: 20px;
    --login-okd-input-sm-label-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-xs-label-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-md-action-font-size: var(--login-okd-font-size-md);
    --login-okd-input-sm-action-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-xs-action-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-md-action-line-height: 20px;
    --login-okd-input-sm-action-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-xs-action-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-md-height: 40px;
    --login-okd-input-md-text-font-size: var(--login-okd-font-size-md);
    --login-okd-input-md-border-radius: 8px;
    --login-okd-input-md-error-font-size: 14px;
    --login-okd-input-md-error-line-height: 16px;
    --login-okd-input-md-tip-font-size: 14px;
    --login-okd-input-md-tip-line-height: 16px;
    --login-okd-input-md-icon-size: 20px;
    --login-okd-input-md-icon-margin: 6px;
    --login-okd-input-sm-height: 32px;
    --login-okd-input-sm-text-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-sm-border-radius: 8px;
    --login-okd-input-sm-error-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-sm-error-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-sm-tip-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-sm-tip-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-sm-icon-size: 16px;
    --login-okd-input-sm-icon-margin: 4px;
    --login-okd-input-xs-height: 28px;
    --login-okd-input-xs-text-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-xs-border-radius: 8px;
    --login-okd-input-xs-error-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-xs-error-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-xs-tip-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-xs-tip-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-xs-icon-size: 16px;
    --login-okd-input-xs-icon-margin: 4px;
    --login-okd-input-number-default-add-icon-color: var(--login-okd-color-content-disabled);
    --login-okd-input-number-default-add-icon-background: var(--login-okd-color-transparent-base-white);
    --login-okd-input-number-hover-add-icon-color: var(--login-okd-color-content-primary);
    --login-okd-input-number-hover-add-icon-background: var(--login-okd-color-background-surface-pressed);
    --login-okd-input-number-active-add-icon-color: var(--login-okd-color-gray-700);
    --login-okd-input-number-active-add-icon-background: var(--login-okd-color-gray-200);
    --login-okd-input-number-disabled-add-icon-color: var(--login-okd-color-content-disabled);
    --login-okd-input-number-disabled-add-icon-background: var(--login-okd-color-content-disabled);
    --login-okd-input-code-common-btn-color: var(--login-okd-color-blue-900);
    --login-okd-input-code-common-btn-disabled-color: var(--login-okd-color-gray-300);
    --login-okd-input-code-common-count-color: var(--login-okd-color-content-disabled);
    --login-okd-input-code-md-btn-font-size: var(--login-okd-font-size-md);
    --login-okd-input-code-md-btn-line-height: var(--login-okd-line-height-md);
    --login-okd-input-code-md-count-font-size: var(--login-okd-font-size-md);
    --login-okd-input-code-md-count-line-height: var(--login-okd-line-height-md);
    --login-okd-input-code-sm-btn-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-code-sm-btn-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-code-sm-count-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-code-sm-count-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-code-xs-btn-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-code-xs-btn-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-code-xs-count-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-code-xs-count-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-search-default-text-color: var(--login-okd-color-content-primary);
    --login-okd-input-search-default-placeholder-color: var(--login-okd-color-content-disabled);
    --login-okd-input-search-default-border-color: var(--login-okd-color-transparent);
    --login-okd-input-search-default-caret-color: var(--login-okd-color-content-primary);
    --login-okd-input-search-default-shadow: 0px 0px 0px 0px transparent;
    --login-okd-input-search-default-background: var(--login-okd-color-neutral-180);
    --login-okd-input-search-hover-text-color: var(--login-okd-color-content-primary);
    --login-okd-input-search-hover-placeholder-color: var(--login-okd-color-content-disabled);
    --login-okd-input-search-hover-border-color: var(--login-okd-color-transparent-base-white);
    --login-okd-input-search-hover-caret-color: var(--login-okd-color-content-primary);
    --login-okd-input-search-hover-shadow: 0px 0px 0px 0px #0000001a;
    --login-okd-input-search-hover-background: var(--login-okd-color-neutral-180);
    --login-okd-input-search-focus-text-color: var(--login-okd-color-content-primary);
    --login-okd-input-search-focus-placeholder-color: var(--login-okd-color-content-disabled);
    --login-okd-input-search-focus-border-color: var(--login-okd-color-border-selected);
    --login-okd-input-search-focus-caret-color: var(--login-okd-color-content-primary);
    --login-okd-input-search-focus-shadow: 0px 0px 0px 0px #00000000;
    --login-okd-input-search-focus-background: var(--login-okd-color-neutral-180);
    --login-okd-input-search-error-text-color: var(--login-okd-color-content-primary);
    --login-okd-input-search-error-placeholder-color: var(--login-okd-color-content-disabled);
    --login-okd-input-search-error-border-color: var(--login-okd-color-semantic-negative);
    --login-okd-input-search-error-caret-color: var(--login-okd-color-content-primary);
    --login-okd-input-search-error-shadow: 0 1px 2px 0 #0000000d;
    --login-okd-input-search-error-background: var(--login-okd-color-neutral-180);
    --login-okd-input-search-disabled-text-color: var(--login-okd-color-content-disabled);
    --login-okd-input-search-disabled-placeholder-color: var(--login-okd-color-content-disabled);
    --login-okd-input-search-disabled-border-color: var(--login-okd-color-transparent-base-black);
    --login-okd-input-search-disabled-caret-color: var(--login-okd-color-content-disabled);
    --login-okd-input-search-disabled-shadow: 0px 0px 0px 0px #0000000d;
    --login-okd-input-search-disabled-background: var(--login-okd-color-neutral-180);
    --login-okd-input-search-error-tips-color: var(--login-okd-color-semantic-negative);
    --login-okd-input-search-suffix-icon-size: 13px;
    --login-okd-input-search-suffix-icon-color: var(--login-okd-color-content-contrast);
    --login-okd-input-search-prefix-icon-color: var(--login-okd-color-content-contrast);
    --login-okd-input-search-prefix-icon-size: 20px;
    --login-okd-input-verify-md-width: 44px;
    --login-okd-input-verify-md-height: 48px;
    --login-okd-input-lg-label-font-size: 14px;
    --login-okd-input-lg-label-line-height: 20px;
    --login-okd-input-lg-label-margin: 6px;
    --login-okd-input-lg-action-font-size: 14px;
    --login-okd-input-lg-action-line-height: 20px;
    --login-okd-input-lg-tip-font-size: 14px;
    --login-okd-input-lg-tip-line-height: 16px;
    --login-okd-input-lg-tip-margin: 6px;
    --login-okd-input-lg-error-font-size: 14px;
    --login-okd-input-lg-error-line-height: 16px;
    --login-okd-input-lg-height: 44px;
    --login-okd-input-lg-text-font-size: 14px;
    --login-okd-input-lg-border-radius: 8px;
    --login-okd-input-md-label-margin: 4px;
    --login-okd-input-md-tip-margin: 4px;
    --login-okd-input-sm-label-margin: 4px;
    --login-okd-input-sm-tip-margin: 4px;
    --login-okd-input-xs-label-margin: 4px;
    --login-okd-input-xs-tip-margin: 4px;
    --login-okd-input-lg-icon-size: 20px;
    --login-okd-input-lg-icon-margin: 8px;
    --login-okd-input-xl-label-line-height: 20px;
    --login-okd-input-xl-label-font-size: 14px;
    --login-okd-input-xl-label-margin: 6px;
    --login-okd-input-xl-action-line-height: 20px;
    --login-okd-input-xl-action-font-size: 14px;
    --login-okd-input-xl-tip-font-size: 14px;
    --login-okd-input-xl-tip-line-height: 16px;
    --login-okd-input-xl-tip-margin: 6px;
    --login-okd-input-xl-error-font-size: 14px;
    --login-okd-input-xl-error-line-height: 16px;
    --login-okd-input-xl-icon-size: 20px;
    --login-okd-input-xl-icon-margin: 8px;
    --login-okd-input-xl-height: 48px;
    --login-okd-input-xl-text-font-size: 14px;
    --login-okd-input-xl-border-radius: 8px;
    --login-okd-input-verify-xl-height: px;
    --login-okd-input-verify-xl-width: px;
    --login-okd-input-xs-padding-horizontal: 8px;
    --login-okd-input-sm-padding-horizontal: 8px;
    --login-okd-input-md-padding-horizontal: 8px;
    --login-okd-input-lg-padding-horizontal: 8px;
    --login-okd-input-xl-padding-horizontal: 16px;
    --login-okd-input-reversed-default-text-color: var(--login-okd-color-content-inverse);
    --login-okd-input-reversed-default-placeholder-color: rgba(0, 0, 0, .36);
    --login-okd-input-reversed-default-border-color: var(--login-okd-color-transparent-base-black);
    --login-okd-input-reversed-default-caret-color: var(--login-okd-color-content-inverse);
    --login-okd-input-reversed-default-shadow: 0 0 0 0 transparent;
    --login-okd-input-reversed-default-background: var(--login-okd-color-neutral-20);
    --login-okd-input-reversed-hover-text-color: var(--login-okd-color-content-inverse);
    --login-okd-input-reversed-hover-placeholder-color: rgba(0, 0, 0, .36);
    --login-okd-input-reversed-hover-border-color: var(--login-okd-color-transparent-black);
    --login-okd-input-reversed-hover-caret-color: var(--login-okd-color-content-contrast);
    --login-okd-input-reversed-hover-shadow: 0 0 0 0 transparent;
    --login-okd-input-reversed-hover-background: var(--login-okd-color-neutral-20);
    --login-okd-input-reversed-focus-text-color: var(--login-okd-color-content-inverse);
    --login-okd-input-reversed-focus-placeholder-color: rgba(0, 0, 0, .36);
    --login-okd-input-reversed-focus-border-color: var(--login-okd-color-neutral-200);
    --login-okd-input-reversed-focus-caret-color: var(--login-okd-color-content-inverse);
    --login-okd-input-reversed-focus-shadow: 0px 0px 0px 0px #ffffff00;
    --login-okd-input-reversed-focus-background: var(--login-okd-color-neutral-20);
    --login-okd-input-reversed-disabled-text-color: var(--login-okd-color-gray-600);
    --login-okd-input-reversed-disabled-placeholder-color: var(--login-okd-color-gray-600);
    --login-okd-input-reversed-disabled-border-color: var(--login-okd-color-neutral-30);
    --login-okd-input-reversed-disabled-caret-color: var(--login-okd-color-black);
    --login-okd-input-reversed-disabled-shadow: 0 0 0 0 transparent;
    --login-okd-input-reversed-disabled-background: var(--login-okd-color-neutral-15);
    --login-okd-input-reversed-error-text-color: var(--login-okd-color-content-inverse);
    --login-okd-input-reversed-error-placeholder-color: rgba(0, 0, 0, .36);
    --login-okd-input-reversed-error-border-color: var(--login-okd-color-semantic-negative);
    --login-okd-input-reversed-error-caret-color: var(--login-okd-color-content-contrast);
    --login-okd-input-reversed-error-shadow: 0 0 0 0 transparent;
    --login-okd-input-reversed-error-background: var(--login-okd-color-neutral-20);
    --login-okd-input-reversed-error-tips-color: var(--login-okd-color-semantic-negative);
    --login-okd-input-reversed-tips-text-color: var(--login-okd-color-content-contrast);
    --login-okd-input-reversed-icon-color: var(--login-okd-color-gray-300);
    --login-okd-input-reversed-label-color: var(--login-okd-color-gray-050);
    --login-okd-input-reversed-action-color: var(--login-okd-color-content-inverse);
    --login-okd-input-number-reversed-default-add-icon-color: var(--login-okd-color-gray-400);
    --login-okd-input-number-reversed-default-add-icon-background: var(--login-okd-color-transparent);
    --login-okd-input-number-reversed-hover-add-icon-color: var(--login-okd-color-neutral-200);
    --login-okd-input-number-reversed-hover-add-icon-background: var(--login-okd-color-neutral-170);
    --login-okd-input-number-reversed-active-add-icon-color: var(--login-okd-color-gray-400);
    --login-okd-input-number-reversed-active-add-icon-background: var(--login-okd-color-transparent);
    --login-okd-input-number-reversed-disabled-add-icon-color: var(--login-okd-color-gray-500);
    --login-okd-input-number-reversed-disabled-add-icon-background: var(--login-okd-color-transparent);
    --login-okd-input-code-reversed-common-btn-color: var(--login-okd-color-content-inverse);
    --login-okd-input-code-reversed-common-btn-disabled-color: var(--login-okd-color-gray-300);
    --login-okd-input-code-reversed-common-count-color: var(--login-okd-color-content-tertiary);
    --login-okd-input-search-reversed-default-text-color: var(--login-okd-color-gray-050);
    --login-okd-input-search-reversed-default-placeholder-color: var(--login-okd-color-neutral-120);
    --login-okd-input-search-reversed-default-border-color: var(--login-okd-color-transparent);
    --login-okd-input-search-reversed-default-caret-color: var(--login-okd-color-gray-050);
    --login-okd-input-search-reversed-default-shadow: 0 0 0 0 transparent;
    --login-okd-input-search-reversed-default-background: var(--login-okd-color-neutral-20);
    --login-okd-input-search-reversed-hover-text-color: var(--login-okd-color-gray-050);
    --login-okd-input-search-reversed-hover-placeholder-color: var(--login-okd-color-gray-600);
    --login-okd-input-search-reversed-hover-border-color: var(--login-okd-color-transparent-white);
    --login-okd-input-search-reversed-hover-caret-color: var(--login-okd-color-black);
    --login-okd-input-search-reversed-hover-shadow: 0px 0px 0px 0px #1212121a;
    --login-okd-input-search-reversed-hover-background: var(--login-okd-color-neutral-20);
    --login-okd-input-search-reversed-focus-text-color: var(--login-okd-color-gray-050);
    --login-okd-input-search-reversed-focus-placeholder-color: var(--login-okd-color-gray-600);
    --login-okd-input-search-reversed-focus-border-color: var(--login-okd-color-transparent-base-black);
    --login-okd-input-search-reversed-focus-caret-color: var(--login-okd-color-black);
    --login-okd-input-search-reversed-focus-shadow: 0px 0px 0px 0px #1212121a;
    --login-okd-input-search-reversed-focus-background: var(--login-okd-color-neutral-20);
    --login-okd-input-search-reversed-error-text-color: var(--login-okd-color-gray-050);
    --login-okd-input-search-reversed-error-placeholder-color: var(--login-okd-color-gray-600);
    --login-okd-input-search-reversed-error-border-color: var(--login-okd-color-fq-critical);
    --login-okd-input-search-reversed-error-caret-color: var(--login-okd-color-black);
    --login-okd-input-search-reversed-error-shadow: 0 0 0 0 transparent;
    --login-okd-input-search-reversed-error-background: var(--login-okd-color-transparent);
    --login-okd-input-search-reversed-disabled-text-color: var(--login-okd-color-gray-050);
    --login-okd-input-search-reversed-disabled-placeholder-color: var(--login-okd-color-gray-600);
    --login-okd-input-search-reversed-disabled-border-color: var(--login-okd-color-transparent);
    --login-okd-input-search-reversed-disabled-caret-color: var(--login-okd-color-transparent);
    --login-okd-input-search-reversed-disabled-shadow: 0 0 0 0 transparent;
    --login-okd-input-search-reversed-disabled-background: var(--login-okd-color-gray-800);
    --login-okd-input-search-reversed-prefix-icon-color: var(--login-okd-color-gray-300);
    --login-okd-input-search-reversed-error-tips-color: var(--login-okd-color-fq-critical);
    --login-okd-input-search-suffix-icon-hover-color: var(--login-okd-color-content-contrast);
    --login-okd-input-verify-xl-border-radius: 8px;
    --login-okd-input-code-xl-btn-font-size: 12px;
    --login-okd-input-number-suffix-border-color: var(--login-okd-color-border-primary)
}

.theme-okcoin {
    --login-okd-input-default-text-color: var(--login-okd-color-text-black);
    --login-okd-input-default-placeholder-color: var(--login-okd-color-gray-600);
    --login-okd-input-default-border-color: var(--login-okd-color-gray-200);
    --login-okd-input-default-caret-color: var(--login-okd-color-gray-900);
    --login-okd-input-default-shadow: var(--login-okd-shadow-none);
    --login-okd-input-default-background: var(--login-okd-color-white);
    --login-okd-input-hover-text-color: var(--login-okd-input-default-text-color);
    --login-okd-input-hover-placeholder-color: var(--login-okd-input-default-placeholder-color);
    --login-okd-input-hover-border-color: var(--login-okd-input-default-border-color);
    --login-okd-input-hover-caret-color: var(--login-okd-input-default-caret-color);
    --login-okd-input-hover-shadow: 0 0 0 0 transparent;
    --login-okd-input-hover-background: var(--login-okd-color-gray-050);
    --login-okd-input-focus-text-color: var(--login-okd-input-default-text-color);
    --login-okd-input-focus-placeholder-color: var(--login-okd-input-default-placeholder-color);
    --login-okd-input-focus-border-color: var(--login-okd-color-purple-300);
    --login-okd-input-focus-caret-color: var(--login-okd-input-default-caret-color);
    --login-okd-input-focus-shadow: 0px 0px 0px 2px #e2dafa;
    --login-okd-input-focus-background: var(--login-okd-color-white);
    --login-okd-input-disabled-text-color: var(--login-okd-color-gray-500);
    --login-okd-input-disabled-placeholder-color: var(--login-okd-color-gray-300);
    --login-okd-input-disabled-border-color: var(--login-okd-color-gray-300);
    --login-okd-input-disabled-caret-color: var(--login-okd-input-default-caret-color);
    --login-okd-input-disabled-shadow: var(--login-okd-shadow-sm);
    --login-okd-input-disabled-background: var(--login-okd-color-gray-100);
    --login-okd-input-error-text-color: var(--login-okd-input-default-text-color);
    --login-okd-input-error-placeholder-color: var(--login-okd-input-default-placeholder-color);
    --login-okd-input-error-border-color: var(--login-okd-color-red-500);
    --login-okd-input-error-caret-color: var(--login-okd-input-default-caret-color);
    --login-okd-input-error-shadow: var(--login-okd-shadow-sm);
    --login-okd-input-error-background: var(--login-okd-color-background-1);
    --login-okd-input-error-tips-color: var(--login-okd-color-red-600);
    --login-okd-input-tips-text-color: var(--login-okd-color-gray-700);
    --login-okd-input-icon-color: var(--login-okd-color-gray-500);
    --login-okd-input-label-color: var(--login-okd-color-gray-800);
    --login-okd-input-action-color: var(--login-okd-color-blue-900);
    --login-okd-input-md-label-font-size: var(--login-okd-font-size-md);
    --login-okd-input-sm-label-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-xs-label-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-md-label-line-height: var(--login-okd-line-height-md);
    --login-okd-input-sm-label-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-xs-label-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-md-action-font-size: var(--login-okd-font-size-md);
    --login-okd-input-sm-action-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-xs-action-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-md-action-line-height: var(--login-okd-line-height-md);
    --login-okd-input-sm-action-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-xs-action-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-md-height: 40px;
    --login-okd-input-md-text-font-size: var(--login-okd-font-size-md);
    --login-okd-input-md-border-radius: var(--login-okd-border-radius-sm);
    --login-okd-input-md-error-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-md-error-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-md-tip-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-md-tip-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-md-icon-size: 20px;
    --login-okd-input-md-icon-margin: 6px;
    --login-okd-input-sm-height: 32px;
    --login-okd-input-sm-text-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-sm-border-radius: var(--login-okd-border-radius-sm);
    --login-okd-input-sm-error-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-sm-error-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-sm-tip-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-sm-tip-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-sm-icon-size: 16px;
    --login-okd-input-sm-icon-margin: 4px;
    --login-okd-input-xs-height: 28px;
    --login-okd-input-xs-text-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-xs-border-radius: var(--login-okd-border-radius-sm);
    --login-okd-input-xs-error-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-xs-error-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-xs-tip-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-xs-tip-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-xs-icon-size: 16px;
    --login-okd-input-xs-icon-margin: 4px;
    --login-okd-input-number-default-add-icon-color: var(--login-okd-color-gray-500);
    --login-okd-input-number-default-add-icon-background: var(--login-okd-color-transparent);
    --login-okd-input-number-hover-add-icon-color: var(--login-okd-color-gray-700);
    --login-okd-input-number-hover-add-icon-background: var(--login-okd-color-transparent);
    --login-okd-input-number-active-add-icon-color: var(--login-okd-color-gray-700);
    --login-okd-input-number-active-add-icon-background: var(--login-okd-color-gray-200);
    --login-okd-input-number-disabled-add-icon-color: var(--login-okd-color-gray-300);
    --login-okd-input-number-disabled-add-icon-background: var(--login-okd-color-transparent);
    --login-okd-input-code-common-btn-color: var(--login-okd-color-purple-1000);
    --login-okd-input-code-common-btn-disabled-color: var(--login-okd-color-gray-300);
    --login-okd-input-code-common-count-color: var(--login-okd-color-gray-300);
    --login-okd-input-code-md-btn-font-size: var(--login-okd-font-size-md);
    --login-okd-input-code-md-btn-line-height: var(--login-okd-line-height-md);
    --login-okd-input-code-md-count-font-size: var(--login-okd-font-size-md);
    --login-okd-input-code-md-count-line-height: var(--login-okd-line-height-md);
    --login-okd-input-code-sm-btn-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-code-sm-btn-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-code-sm-count-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-code-sm-count-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-code-xs-btn-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-code-xs-btn-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-code-xs-count-font-size: var(--login-okd-font-size-xs);
    --login-okd-input-code-xs-count-line-height: var(--login-okd-line-height-xs);
    --login-okd-input-search-default-text-color: var(--login-okd-color-gray-900);
    --login-okd-input-search-default-placeholder-color: var(--login-okd-color-gray-600);
    --login-okd-input-search-default-border-color: var(--login-okd-color-gray-200);
    --login-okd-input-search-default-caret-color: var(--login-okd-color-gray-900);
    --login-okd-input-search-default-shadow: 0 0 0 0 transparent;
    --login-okd-input-search-default-background: var(--login-okd-color-white);
    --login-okd-input-search-hover-text-color: var(--login-okd-color-gray-900);
    --login-okd-input-search-hover-placeholder-color: var(--login-okd-color-gray-600);
    --login-okd-input-search-hover-border-color: var(--login-okd-color-purple-300);
    --login-okd-input-search-hover-caret-color: var(--login-okd-color-gray-900);
    --login-okd-input-search-hover-shadow: 0px 0px 0px 2px #e2dafa;
    --login-okd-input-search-hover-background: var(--login-okd-color-white);
    --login-okd-input-search-focus-text-color: var(--login-okd-color-gray-900);
    --login-okd-input-search-focus-placeholder-color: var(--login-okd-color-gray-600);
    --login-okd-input-search-focus-border-color: var(--login-okd-color-purple-300);
    --login-okd-input-search-focus-caret-color: var(--login-okd-color-gray-900);
    --login-okd-input-search-focus-shadow: 0px 0px 0px 2px #e2dafa;
    --login-okd-input-search-focus-background: var(--login-okd-color-white);
    --login-okd-input-search-error-text-color: var(--login-okd-color-gray-900);
    --login-okd-input-search-error-placeholder-color: var(--login-okd-color-gray-600);
    --login-okd-input-search-error-border-color: var(--login-okd-color-red-500);
    --login-okd-input-search-error-caret-color: var(--login-okd-color-gray-900);
    --login-okd-input-search-error-shadow: 0 1px 2px 0 #0000000d;
    --login-okd-input-search-error-background: var(--login-okd-color-background-1);
    --login-okd-input-search-error-tips-color: var(--login-okd-color-red-600);
    --login-okd-input-search-disabled-text-color: var(--login-okd-color-gray-500);
    --login-okd-input-search-disabled-placeholder-color: var(--login-okd-color-gray-300);
    --login-okd-input-search-disabled-border-color: var(--login-okd-color-gray-300);
    --login-okd-input-search-disabled-caret-color: var(--login-okd-color-gray-900);
    --login-okd-input-search-disabled-shadow: 0 1px 2px 0 #0000000d;
    --login-okd-input-search-disabled-background: var(--login-okd-color-gray-100);
    --login-okd-input-search-suffix-icon-color: var(--login-okd-color-black);
    --login-okd-input-search-suffix-icon-size: 13px;
    --login-okd-input-search-prefix-icon-color: var(--login-okd-color-black);
    --login-okd-input-search-prefix-icon-size: 13px;
    --login-okd-input-verify-md-width: 44px;
    --login-okd-input-verify-md-height: 48px;
    --login-okd-input-xs-padding-horizontal: 8px;
    --login-okd-input-sm-padding-horizontal: 8px;
    --login-okd-input-md-padding-horizontal: 8px;
    --login-okd-input-lg-padding-horizontal: 8px;
    --login-okd-input-xl-padding-horizontal: 8px;
    --login-okd-input-search-suffix-icon-hover-color: #000
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.login-btn .btn-content {
    align-items: center;
    display: flex
}

.login-btn .login-btn-ellipsis {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.login-btn.loading .btn-content {
    opacity: 0
}

.login-btn.loading .btn-content-position {
    display: none
}

.login-btn.loading .login-btn-loader {
    line-height: 0;
    position: absolute
}

.login-btn.loading .btn-loader-position-absolute {
    position: relative
}

.login-btn-loader-container {
    height: 100%;
    position: relative
}

.login-btn .btn-icon+.btn-content {
    margin-left: 4px
}

.login-btn.btn-xxs .btn-icon {
    font-size: var(--login-okd-button-xxs-icon-size)
}

.login-btn.btn-xxs .btn-icon-leading {
    margin-right: var(--login-okd-button-xxs-icon-margin)
}

.login-btn.btn-xxs .btn-icon-tailing {
    margin-left: var(--login-okd-button-xxs-icon-margin)
}

.login-btn.btn-xxs .login-btn-loader-size {
    border-radius: var(--login-okd-button-xxs-loader-size);
    height: var(--login-okd-button-xxs-loader-size);
    width: var(--login-okd-button-xxs-loader-size)
}

.login-btn.btn-xs .btn-icon {
    font-size: var(--login-okd-button-xs-icon-size)
}

.login-btn.btn-xs .btn-icon-leading {
    margin-right: var(--login-okd-button-xs-icon-margin)
}

.login-btn.btn-xs .btn-icon-tailing {
    margin-left: var(--login-okd-button-xs-icon-margin)
}

.login-btn.btn-xs .login-btn-loader-size {
    border-radius: var(--login-okd-button-xs-loader-size);
    height: var(--login-okd-button-xs-loader-size);
    width: var(--login-okd-button-xs-loader-size)
}

.login-btn.btn-s .btn-icon {
    font-size: var(--login-okd-button-s-icon-size)
}

.login-btn.btn-s .btn-icon-leading {
    margin-right: var(--login-okd-button-s-icon-margin)
}

.login-btn.btn-s .btn-icon-tailing {
    margin-left: var(--login-okd-button-s-icon-margin)
}

.login-btn.btn-s .login-btn-loader-size {
    border-radius: var(--login-okd-button-s-loader-size);
    height: var(--login-okd-button-s-loader-size);
    width: var(--login-okd-button-s-loader-size)
}

.login-btn.btn-sm .btn-icon {
    font-size: var(--login-okd-button-sm-icon-size)
}

.login-btn.btn-sm .btn-icon-leading {
    margin-right: var(--login-okd-button-sm-icon-margin)
}

.login-btn.btn-sm .btn-icon-tailing {
    margin-left: var(--login-okd-button-sm-icon-margin)
}

.login-btn.btn-sm .login-btn-loader-size {
    border-radius: var(--login-okd-button-sm-loader-size);
    height: var(--login-okd-button-sm-loader-size);
    width: var(--login-okd-button-sm-loader-size)
}

.login-btn.btn-md .btn-icon {
    font-size: var(--login-okd-button-md-icon-size)
}

.login-btn.btn-md .btn-icon-leading {
    margin-right: var(--login-okd-button-md-icon-margin)
}

.login-btn.btn-md .btn-icon-tailing {
    margin-left: var(--login-okd-button-md-icon-margin)
}

.login-btn.btn-md .login-btn-loader-size {
    border-radius: var(--login-okd-button-md-loader-size);
    height: var(--login-okd-button-md-loader-size);
    width: var(--login-okd-button-md-loader-size)
}

.login-btn.btn-lg .btn-icon {
    font-size: var(--login-okd-button-lg-icon-size)
}

.login-btn.btn-lg .btn-icon-leading {
    margin-right: var(--login-okd-button-lg-icon-margin)
}

.login-btn.btn-lg .btn-icon-tailing {
    margin-left: var(--login-okd-button-lg-icon-margin)
}

.login-btn.btn-lg .login-btn-loader-size {
    border-radius: var(--login-okd-button-lg-loader-size);
    height: var(--login-okd-button-lg-loader-size);
    width: var(--login-okd-button-lg-loader-size)
}

.login-btn.btn-xl .btn-icon {
    font-size: var(--login-okd-button-xl-icon-size)
}

.login-btn.btn-xl .btn-icon-leading {
    margin-right: var(--login-okd-button-xl-icon-margin)
}

.login-btn.btn-xl .btn-icon-tailing {
    margin-left: var(--login-okd-button-xl-icon-margin)
}

.login-btn.btn-xl .login-btn-loader-size {
    border-radius: var(--login-okd-button-xl-loader-size);
    height: var(--login-okd-button-xl-loader-size);
    width: var(--login-okd-button-xl-loader-size)
}

.login-btn .login-btn-outline-primary-loader {
    border-color: var(--login-okd-button-outline-primary-loader-track-color);
    border-top-color: var(--login-okd-button-outline-primary-loader-mark-color)
}

.login-btn {
    -webkit-tap-highlight-color: transparent;
    align-items: center;
    -webkit-appearance: none;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-weight: 500;
    justify-content: center;
    outline: none;
    position: relative;
    text-decoration: none;
    touch-action: manipulation;
    transition: background-color .3s cubic-bezier(.165, .84, .44, 1), border-color .3s cubic-bezier(.165, .84, .44, 1);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.login-btn:focus-visible {
    outline: 2px solid var(--login-okd-color-border-focus);
    outline-color: var(--login-okd-color-border-focus);
    outline-offset: 2px;
    outline-style: solid;
    outline-width: 2px
}

.login-btn.btn-outline-primary {
    background: hsl(0deg 0% 0%);
    border-color: #ffffff;
    border-style: solid;
    border-width: var(--login-okd-button-outline-primary-border-size);
    box-shadow: var(--login-okd-button-outline-primary-default-shadow);
    color: #ffffff;
}

.login-btn.btn-outline-primary.hover,
.login-btn.btn-outline-primary:not(:disabled):not(.btn-disabled):not(.mobile):hover {
    background: var(--login-okd-button-outline-primary-hover-background);
    border-color: var(--login-okd-button-outline-primary-hover-border-color);
    box-shadow: var(--login-okd-button-outline-primary-hover-shadow);
    color: var(--login-okd-button-outline-primary-hover-font-color)
}

.login-btn.btn-outline-primary.hover .btn-icon,
.login-btn.btn-outline-primary:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
    color: var(--login-okd-button-outline-primary-hover-icon-color)
}

.login-btn.btn-outline-primary.active,
.login-btn.btn-outline-primary:not(:disabled):active {
    background: var(--login-okd-button-outline-primary-active-background);
    border-color: var(--login-okd-button-outline-primary-active-border-color);
    box-shadow: var(--login-okd-button-outline-primary-active-shadow);
    color: var(--login-okd-button-outline-primary-active-font-color)
}

.login-btn.btn-outline-primary.active .btn-icon,
.login-btn.btn-outline-primary:not(:disabled):active .btn-icon {
    color: var(--login-okd-button-outline-primary-active-icon-color)
}

.login-btn.btn-outline-primary:not(.loading).btn-disabled,
.login-btn.btn-outline-primary:not(.loading):disabled {
    background: var(--login-okd-button-outline-primary-disabled-background);
    border-color: var(--login-okd-button-outline-primary-disabled-border-color);
    box-shadow: var(--login-okd-button-outline-primary-disabled-shadow);
    color: var(--login-okd-button-outline-primary-disabled-font-color)
}

.login-btn.btn-outline-primary:not(.loading).btn-disabled .btn-icon,
.login-btn.btn-outline-primary:not(.loading):disabled .btn-icon {
    color: var(--login-okd-button-outline-primary-disabled-icon-color)
}

.login-btn.btn-outline-primary.loading {
    cursor: pointer
}

.login-btn.btn-outline-primary .btn-icon {
    color: var(--login-okd-button-outline-primary-default-icon-color)
}

.login-btn.btn-outline-primary .login-btn-loader-text {
    color: var(--login-okd-button-outline-primary-default-font-color)
}

.login-btn.btn-outline-primary.btn-xxs {
    padding: calc(var(--login-okd-button-xxs-padding-vertical) + 1px - var(--login-okd-button-outline-primary-border-size)) var(--login-okd-button-xxs-padding-horizontal)
}

.login-btn.btn-outline-primary.btn-xxs.login-btn-strict-circle {
    height: calc(var(--login-okd-button-xxs-padding-vertical)*2 + 2px - var(--login-okd-button-outline-primary-border-size)*2 + var(--login-okd-button-xxs-line-height) + var(--login-okd-button-outline-primary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--login-okd-button-xxs-padding-vertical)*2 + 2px - var(--login-okd-button-outline-primary-border-size)*2 + var(--login-okd-button-xxs-line-height) + var(--login-okd-button-outline-primary-border-size)*2)
}

.login-btn.btn-outline-primary.btn-xxs.login-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.login-btn.btn-outline-primary.btn-xs {
    padding: calc(var(--login-okd-button-xs-padding-vertical) + 1px - var(--login-okd-button-outline-primary-border-size)) var(--login-okd-button-xs-padding-horizontal)
}

.login-btn.btn-outline-primary.btn-xs.login-btn-strict-circle {
    height: calc(var(--login-okd-button-xs-padding-vertical)*2 + 2px - var(--login-okd-button-outline-primary-border-size)*2 + var(--login-okd-button-xs-line-height) + var(--login-okd-button-outline-primary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--login-okd-button-xs-padding-vertical)*2 + 2px - var(--login-okd-button-outline-primary-border-size)*2 + var(--login-okd-button-xs-line-height) + var(--login-okd-button-outline-primary-border-size)*2)
}

.login-btn.btn-outline-primary.btn-xs.login-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.login-btn.btn-outline-primary.btn-s {
    padding: calc(var(--login-okd-button-s-padding-vertical) + 1px - var(--login-okd-button-outline-primary-border-size)) var(--login-okd-button-s-padding-horizontal)
}

.login-btn.btn-outline-primary.btn-s.login-btn-strict-circle {
    height: calc(var(--login-okd-button-s-padding-vertical)*2 + 2px - var(--login-okd-button-outline-primary-border-size)*2 + var(--login-okd-button-s-line-height) + var(--login-okd-button-outline-primary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--login-okd-button-s-padding-vertical)*2 + 2px - var(--login-okd-button-outline-primary-border-size)*2 + var(--login-okd-button-s-line-height) + var(--login-okd-button-outline-primary-border-size)*2)
}

.login-btn.btn-outline-primary.btn-s.login-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.login-btn.btn-outline-primary.btn-sm {
    padding: calc(var(--login-okd-button-sm-padding-vertical) + 1px - var(--login-okd-button-outline-primary-border-size)) var(--login-okd-button-sm-padding-horizontal)
}

.login-btn.btn-outline-primary.btn-sm.login-btn-strict-circle {
    height: calc(var(--login-okd-button-sm-padding-vertical)*2 + 2px - var(--login-okd-button-outline-primary-border-size)*2 + var(--login-okd-button-sm-line-height) + var(--login-okd-button-outline-primary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--login-okd-button-sm-padding-vertical)*2 + 2px - var(--login-okd-button-outline-primary-border-size)*2 + var(--login-okd-button-sm-line-height) + var(--login-okd-button-outline-primary-border-size)*2)
}

.login-btn.btn-outline-primary.btn-sm.login-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.login-btn.btn-outline-primary.btn-md {
    padding: calc(var(--login-okd-button-md-padding-vertical) + 1px - var(--login-okd-button-outline-primary-border-size)) var(--login-okd-button-md-padding-horizontal)
}

.login-btn.btn-outline-primary.btn-md.login-btn-strict-circle {
    height: calc(var(--login-okd-button-md-padding-vertical)*2 + 2px - var(--login-okd-button-outline-primary-border-size)*2 + var(--login-okd-button-md-line-height) + var(--login-okd-button-outline-primary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--login-okd-button-md-padding-vertical)*2 + 2px - var(--login-okd-button-outline-primary-border-size)*2 + var(--login-okd-button-md-line-height) + var(--login-okd-button-outline-primary-border-size)*2)
}

.login-btn.btn-outline-primary.btn-md.login-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.login-btn.btn-outline-primary.btn-lg {
    padding: calc(var(--login-okd-button-lg-padding-vertical) + 1px - var(--login-okd-button-outline-primary-border-size)) var(--login-okd-button-lg-padding-horizontal)
}

.login-btn.btn-outline-primary.btn-lg.login-btn-strict-circle {
    height: calc(var(--login-okd-button-lg-padding-vertical)*2 + 2px - var(--login-okd-button-outline-primary-border-size)*2 + var(--login-okd-button-lg-line-height) + var(--login-okd-button-outline-primary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--login-okd-button-lg-padding-vertical)*2 + 2px - var(--login-okd-button-outline-primary-border-size)*2 + var(--login-okd-button-lg-line-height) + var(--login-okd-button-outline-primary-border-size)*2)
}

.login-btn.btn-outline-primary.btn-lg.login-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.login-btn.btn-outline-primary.btn-xl {
    padding: calc(var(--login-okd-button-xl-padding-vertical) + 1px - var(--login-okd-button-outline-primary-border-size)) var(--login-okd-button-xl-padding-horizontal)
}

.login-btn.btn-outline-primary.btn-xl.login-btn-strict-circle {
    height: calc(var(--login-okd-button-xl-padding-vertical)*2 + 2px - var(--login-okd-button-outline-primary-border-size)*2 + var(--login-okd-button-xl-line-height) + var(--login-okd-button-outline-primary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--login-okd-button-xl-padding-vertical)*2 + 2px - var(--login-okd-button-outline-primary-border-size)*2 + var(--login-okd-button-xl-line-height) + var(--login-okd-button-outline-primary-border-size)*2)
}

.login-btn.btn-outline-primary.btn-xl.login-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.login-btn.btn-xxs {
    border-radius: var(--login-okd-button-xxs-border-radius);
    font-weight: 500;
    font-weight: var(--login-okd-button-xxs-font-weight, 500);
    min-width: var(--login-okd-button-xxs-min-width)
}

.login-btn.btn-xxs,
.login-btn.btn-xxs .login-btn-loader-text {
    font-size: var(--login-okd-button-xxs-font-size);
    line-height: var(--login-okd-button-xxs-line-height)
}

.login-btn.btn-xxs .login-btn-loader-text {
    margin-left: var(--login-okd-button-xxs-loader-text-margin-left)
}

.login-btn.btn-xxs.btn-rect {
    border-radius: 4px;
    border-radius: var(--login-okd-button-rect-xxs-border-radius, 4px)
}

.login-btn.btn-xs {
    border-radius: var(--login-okd-button-xs-border-radius);
    font-weight: 500;
    font-weight: var(--login-okd-button-xs-font-weight, 500);
    min-width: var(--login-okd-button-xs-min-width)
}

.login-btn.btn-xs,
.login-btn.btn-xs .login-btn-loader-text {
    font-size: var(--login-okd-button-xs-font-size);
    line-height: var(--login-okd-button-xs-line-height)
}

.login-btn.btn-xs .login-btn-loader-text {
    margin-left: var(--login-okd-button-xs-loader-text-margin-left)
}

.login-btn.btn-xs.btn-rect {
    border-radius: 4px;
    border-radius: var(--login-okd-button-rect-xs-border-radius, 4px)
}

.login-btn.btn-s {
    border-radius: var(--login-okd-button-s-border-radius);
    font-weight: 500;
    font-weight: var(--login-okd-button-s-font-weight, 500);
    min-width: var(--login-okd-button-s-min-width)
}

.login-btn.btn-s,
.login-btn.btn-s .login-btn-loader-text {
    font-size: var(--login-okd-button-s-font-size);
    line-height: var(--login-okd-button-s-line-height)
}

.login-btn.btn-s .login-btn-loader-text {
    margin-left: var(--login-okd-button-s-loader-text-margin-left)
}

.login-btn.btn-s.btn-rect {
    border-radius: 4px;
    border-radius: var(--login-okd-button-rect-s-border-radius, 4px)
}

.login-btn.btn-sm {
    border-radius: var(--login-okd-button-sm-border-radius);
    font-weight: 500;
    font-weight: var(--login-okd-button-sm-font-weight, 500);
    min-width: var(--login-okd-button-sm-min-width)
}

.login-btn.btn-sm,
.login-btn.btn-sm .login-btn-loader-text {
    font-size: var(--login-okd-button-sm-font-size);
    line-height: var(--login-okd-button-sm-line-height)
}

.login-btn.btn-sm .login-btn-loader-text {
    margin-left: var(--login-okd-button-sm-loader-text-margin-left)
}

.login-btn.btn-sm.btn-rect {
    border-radius: 4px;
    border-radius: var(--login-okd-button-rect-sm-border-radius, 4px)
}

.login-btn.btn-md {
    border-radius: var(--login-okd-button-md-border-radius);
    font-weight: 500;
    font-weight: var(--login-okd-button-md-font-weight, 500);
    min-width: var(--login-okd-button-md-min-width)
}

.login-btn.btn-md,
.login-btn.btn-md .login-btn-loader-text {
    font-size: var(--login-okd-button-md-font-size);
    line-height: var(--login-okd-button-md-line-height)
}

.login-btn.btn-md .login-btn-loader-text {
    margin-left: var(--login-okd-button-md-loader-text-margin-left)
}

.login-btn.btn-md.btn-rect {
    border-radius: 4px;
    border-radius: var(--login-okd-button-rect-md-border-radius, 4px)
}

.login-btn.btn-lg {
    border-radius: var(--login-okd-button-lg-border-radius);
    font-weight: 500;
    font-weight: var(--login-okd-button-lg-font-weight, 500);
    min-width: var(--login-okd-button-lg-min-width)
}

.login-btn.btn-lg,
.login-btn.btn-lg .login-btn-loader-text {
    font-size: var(--login-okd-button-lg-font-size);
    line-height: var(--login-okd-button-lg-line-height)
}

.login-btn.btn-lg .login-btn-loader-text {
    margin-left: var(--login-okd-button-lg-loader-text-margin-left)
}

.login-btn.btn-lg.btn-rect {
    border-radius: 8px;
    border-radius: var(--login-okd-button-rect-lg-border-radius, 8px)
}

.login-btn.btn-xl {
    border-radius: var(--login-okd-button-xl-border-radius);
    font-weight: 500;
    font-weight: var(--login-okd-button-xl-font-weight, 500);
    min-width: var(--login-okd-button-xl-min-width)
}

.login-btn.btn-xl,
.login-btn.btn-xl .login-btn-loader-text {
    font-size: var(--login-okd-button-xl-font-size);
    line-height: var(--login-okd-button-xl-line-height)
}

.login-btn.btn-xl .login-btn-loader-text {
    margin-left: var(--login-okd-button-xl-loader-text-margin-left)
}

.login-btn.btn-xl.btn-rect {
    border-radius: 8px;
    border-radius: var(--login-okd-button-rect-xl-border-radius, 8px)
}

.login-btn.btn-disabled,
.login-btn:disabled {
    cursor: not-allowed
}

.login-btn.block {
    display: flex;
    width: 100%
}

.login-btn.btn-circle {
    border-radius: 100px !important
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.grecaptcha-badge {
    visibility: hidden
}

.login-picture {
    display: inline-block
}

.login-picture-font {
    font-size: 0;
    line-height: 1
}

.login-picture-cover {
    object-fit: cover
}

.login-picture-contain {
    object-fit: contain
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.login-input-tips {
    display: inline-block
}

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

.login-input-help-text {
    flex-grow: 1;
    flex-shrink: 0;
    text-align: right
}

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

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

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

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

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

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

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

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

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

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

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

.login-input.disabled,
.login-input.readonly .login-input-input {
    cursor: not-allowed
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.login-input-number-suffix {
    align-items: center;
    border-left: 1px solid var(--login-okd-input-number-suffix-border-color, var(--login-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
}

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

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

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

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

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

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

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

.login-input-number-suffix-part .disabled,
.login-input-number-suffix-part-disabled {
    background: var(--login-okd-input-number-disabled-add-icon-background);
    cursor: not-allowed
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.login-input-verify .login-input-verify-input.input-xl:last-child {
    margin-right: unset
}

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

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

.login-input-verify .login-input-verify-input.input-lg:last-child {
    margin-right: unset
}

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

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

.login-input-verify .login-input-verify-input.input-xs:last-child {
    margin-right: unset
}

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

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

.login-input-verify .login-input-verify-input.input-sm:last-child {
    margin-right: unset
}

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

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

.login-input-verify .login-input-verify-input.input-md:last-child {
    margin-right: unset
}

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