.table-up-input__item {
    --input-height: 2rem;
    --input-inner-height: calc(var(--input-height) - 0.125rem);
    --input-color-text: #606266;
    --input-color-boxshaow: #dcdfe6;
    --input-color-focus: #409eff;
    --input-color-error: #f56c6c;
    --input-boxshaow: 0 0 0 0.0625rem var(--input-color-boxshaow) inset;
    --input-boxshaow-focus: 0 0 0 0.0625rem var(--input-color-focus) inset;
    --input-boxshaow-error: 0 0 0 0.0625rem var(--input-color-error) inset;
    display: flex;
    align-items: center;
  }
  .table-up-input__item + .table-up-input__item {
    margin-top: 1.125rem;
  }
  .table-up-input__label {
    width: 5rem;
    flex-shrink: 0;
  }
  .table-up-input__input {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: var(--input-height);
    line-height: var(--input-height);
    padding: 0.0625rem 0.5rem;
    border-radius: 0.25rem;
    box-shadow: var(--input-boxshaow);
    transition: box-shadow 0.2s linear;
  }
  .table-up-input__input.focus {
    box-shadow: var(--input-boxshaow-focus);
  }
  .table-up-input__input input {
    width: 100%;
    height: var(--input-inner-height);
    line-height: var(--input-inner-height);
    flex-grow: 1;
    font-size: 0.875rem;
    color: var(--input-color-text);
    outline: none;
    border: 0;
    padding: 0;
  }
  .table-up-input__input.error {
    box-shadow: var(--input-boxshaow-error);
  }
  .table-up-input__error-tip {
    position: absolute;
    top: 100%;
    left: 0;
    font-size: 0.75rem;
    color: var(--input-color-error);
    line-height: 1rem;
  }
  .ql-snow .table-up-select-box {
    --select-box-color-bg-hover: #f5f5f5;
    --select-box-color-bg-active: #e0f2fe;
    --select-box-custom-color-text: #0d0d0d;
    --select-box-custom-color-bg: transparent;
    --select-box-custom-color-bg-hover: #ebebeb;
  }
  .table-up-select-box {
    --select-box-color-border: #e5e7eb;
    --select-box-border: 0.0625rem solid var(--select-box-color-border);
    --select-box-color-active: #0ea5e9;
    --select-box-color-bg-hover: #f5f5f5;
    --select-box-color-bg-active: transparent;
    --select-box-custom-color-text: #f5f5f5;
    --select-box-custom-color-bg: transparent;
    --select-box-custom-color-bg-hover: #2c2c2c;
  }
  .table-up-select-box__block {
    display: flex;
    width: 10rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
  .table-up-select-box__item {
    margin: 0.125rem;
    height: 1rem;
    width: 1rem;
    border: var(--select-box-border);
  }
  .table-up-select-box__item.active {
    border-color: var(--select-box-color-active);
    background-color: var(--select-box-color-bg-active);
  }
  .table-up-select-box__custom {
    padding: 0.5rem;
    color: var(--select-box-custom-color-text);
    background-color: var(--select-box-custom-color-bg);
    font-size: 1rem;
    text-align: center;
    cursor: pointer;
  }
  .table-up-select-box__custom:hover {
    background-color: var(--select-box-custom-color-bg-hover);
  }
  .table-up-creator {
    padding: 1.5rem;
  }
  .table-up-creator__input {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .table-up-creator__control {
    margin-top: 1rem;
    text-align: right;
  }
  .table-up-creator__checkbox {
    --check-color: #212121;
    --checked-color: #506eec;
    display: flex;
    align-items: center;
    margin-top: 0.25rem;
    cursor: pointer;
    font-size: 0.75rem;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
  .table-up-creator__checkbox input {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    border: 0.0625rem solid var(--check-color);
    border-radius: 0.3125rem;
    background-color: transparent;
    display: inline-block;
    position: relative;
    margin-right: 0.625rem;
    cursor: pointer;
  }
  .table-up-creator__checkbox input:before {
    content: '';
    background-color: var(--checked-color);
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 0.1875rem;
    transition: all 0.2s ease-in-out;
  }
  .table-up-creator__checkbox input:checked:before {
    transform: translate(-50%, -50%) scale(1);
  }
  
  .ql-toolbar .ql-picker:not(.ql-color-picker):not(.ql-icon-picker).ql-table-up {
    width: 28px;
  }
  .ql-toolbar .ql-picker:not(.ql-color-picker):not(.ql-icon-picker).ql-table-up .ql-picker-label {
    padding: 2px 4px;
  }
  .ql-toolbar .ql-picker:not(.ql-color-picker):not(.ql-icon-picker).ql-table-up .ql-picker-label svg {
    position: static;
    margin-top: 0;
  }
  .ql-toolbar .ql-picker.ql-expanded .ql-picker-options {
    z-index: 1;
  }
  .ql-editor .ql-table {
    display: table;
    border-collapse: collapse;
    table-layout: fixed;
    width: auto;
  }
  .ql-editor .ql-table[data-full] {
    width: 100%;
  }
  .ql-editor .ql-table-wrapper {
    width: 100%;
    overflow: auto;
    scrollbar-width: none;
  }
  .ql-editor .ql-table-cell {
    padding: 8px 12px;
    border-color: transparent;
    font-size: 14px;
    outline: none;
    overflow: auto;
  }
  .ql-editor .ql-table-cell-inner {
    display: inline-block;
    min-width: 100%;
    word-break: break-word;
    outline: none;
  }
  .ql-editor .ql-table col {
    border-collapse: separate;
    text-indent: initial;
    display: table-column;
    table-layout: fixed;
  }
  .ql-editor .ql-table tr + tr td {
    border-top: none;
  }
  .ql-editor .ql-table td {
    border: 1px solid #a1a1aa;
  }
  .ql-editor .ql-table td + td {
    border-left: none;
  }
  .table-up-toolbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
  }
  .table-up-toolbox * {
    pointer-events: all;
  }
  .table-up-tooltip {
    position: absolute;
    z-index: 20;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    color: #ffffff;
    white-space: nowrap;
    background-color: #303133;
    transition: opacity 0.15s linear;
  }
  .table-up-tooltip.transparent {
    opacity: 0;
  }
  .table-up-tooltip.hidden {
    display: none;
  }
  .table-up-button {
    --table-btn-color: #606266;
    --table-btn-bg-hover: #f3f4f6;
    --table-btn-color-border: #dcdfe6;
    --table-btn-border: 0.0625rem solid var(--table-btn-color-border);
    --table-btn-confirm-color-border: #409eff;
    --table-btn-confirm-bg: #409eff;
    --table-btn-confirm-hover: #79bbff;
    --table-btn-confirm-outline-focus-visible: 0.125rem solid #a0cfff;
    box-sizing: border-box;
    display: inline-flex;
    height: 2rem;
    line-height: 1;
    margin: 0;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    border: var(--table-btn-border);
    color: var(--table-btn-color);
    background-color: transparent;
    font-size: 0.875rem;
    cursor: pointer;
  }
  .table-up-button + .table-up-button {
    margin-left: 0.375rem;
  }
  .table-up-button:hover {
    background-color: var(--table-btn-bg-hover);
  }
  .table-up-button.confirm {
    border-color: var(--table-btn-confirm-color-border);
    background-color: var(--table-btn-confirm-bg);
    color: #fff;
  }
  .table-up-button.confirm:hover {
    border-color: var(--table-btn-confirm-hover);
    background-color: var(--table-btn-confirm-hover);
  }
  .table-up-button.confirm:focus-visible {
    outline: var(--table-btn-confirm-outline-focus-visible);
    outline-offset: 0.0625rem;
  }
  .table-up-dialog {
    --dialog-bg: rgba(0, 0, 0, 0.5);
    --dialog-color-border: #ebeef5;
    --dialog-color-boxshadow: rgba(0, 0, 0, 0.12);
    --dialog-border: 0.0625rem solid var(--dialog-color-border);
    --dialog-boxshadow: 0 0 0.75rem var(--dialog-color-boxshadow);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2000;
    height: 100%;
    background-color: var(--dialog-bg);
    overflow: auto;
  }
  .table-up-dialog__overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    overflow: auto;
    text-align: center;
  }
  .table-up-dialog__overlay::after {
    content: '';
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
  }
  .table-up-dialog__content {
    display: inline-block;
    max-width: 50vw;
    width: 100%;
    vertical-align: middle;
    background-color: #fff;
    border-radius: 0.25rem;
    border: var(--dialog-border);
    font-size: 1.125rem;
    box-shadow: var(--dialog-boxshadow);
    text-align: left;
    overflow: hidden;
    box-sizing: border-box;
  }
  .table-up-color-picker {
    --color-picker-bg-color: #ffffff;
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: column;
    width: 16.75rem;
    padding: 0.5rem;
    border-radius: 0.375rem;
    background: var(--color-picker-bg-color);
    box-shadow: 0 0 0.375rem #b2b5b8;
  }
  .table-up-color-picker__content {
    box-sizing: border-box;
    width: 100%;
    height: 11.75rem;
    padding-top: 0.5rem;
  }
  .table-up-color-picker__selector {
    width: 14.375rem;
    height: 9.375rem;
    position: absolute;
  }
  .table-up-color-picker__background {
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
  }
  .table-up-color-picker__background-handle {
    box-sizing: border-box;
    position: absolute;
    border: 0.0625rem solid #ffffff;
    cursor: pointer;
    top: 0;
    left: 14.375rem;
    border-radius: 100%;
    width: 0.625rem;
    height: 0.625rem;
    transform: translate(-0.3125rem, -0.3125rem);
  }
  .table-up-color-picker__hue {
    width: 0.75rem;
    height: 9.375rem;
    margin-left: 15rem;
    position: absolute;
    background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);
  }
  .table-up-color-picker__hue-handle {
    box-sizing: border-box;
    position: absolute;
    border: 0.0625rem solid #ffffff;
    cursor: pointer;
    background-color: #ffffff;
    box-shadow: 0 0 0.125rem #0009;
    left: 0;
    width: 1rem;
    height: 0.625rem;
    transform: translate(-0.125rem, -0.3125rem);
  }
  .table-up-color-picker__alpha {
    width: 14.375rem;
    height: 0.75rem;
    position: absolute;
    margin-top: 10rem;
    background: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%);
    background-size: 0.75rem 0.75rem;
    background-position: 0 0, 0.375rem 0, 0.375rem -0.375rem, 0 0.375rem;
  }
  .table-up-color-picker__alpha-bg {
    position: relative;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  }
  .table-up-color-picker__alpha-handle {
    box-sizing: border-box;
    position: absolute;
    border: 0.0625rem solid #ffffff;
    cursor: pointer;
    background-color: #ffffff;
    box-shadow: 0 0 0.125rem #0009;
    top: 0;
    width: 0.625rem;
    height: 1rem;
    transform: translate(-0.3125rem, -0.125rem);
  }
  .table-up-color-picker__action {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
    padding-top: 0.5rem;
    border-top: 0.0625rem solid #e9ecef;
  }
  .table-up-color-picker__action-item {
    flex: 1;
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
  }
  .table-up-color-picker__input {
    box-sizing: border-box;
    width: 100%;
    height: 1.375rem;
    margin-left: 0.125rem;
    padding: 0.125rem 0 0.125rem 0.25rem;
    background-color: #ffffff;
    border: 0.0625rem solid #ced4da;
    border-radius: 0.25rem;
    outline: none;
    color: #405057;
  }
  .table-up-tooltip .table-up-color-picker {
    --color-picker-bg-color: transparent;
    box-shadow: none;
    width: 15.75rem;
    padding: 0.5rem 0;
  }
  .ql-container .table-up-selection {
    --select-color: #0589f340;
    display: none;
    position: absolute;
    overflow: hidden;
    pointer-events: none;
  }
  .ql-container .table-up-selection__line {
    position: absolute;
    background-color: var(--select-color);
    pointer-events: none;
  }
  .table-up-resize-line__row,
  .table-up-resize-line__col {
    position: absolute;
    z-index: 0;
  }
  .table-up-resize-line__row.is-hidden,
  .table-up-resize-line__col.is-hidden {
    display: none;
  }
  .table-up-resize-line__row::before,
  .table-up-resize-line__col::before,
  .table-up-resize-line__row::after,
  .table-up-resize-line__col::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    z-index: 1;
  }
  .table-up-resize-line__row {
    height: 0.0625rem;
    cursor: ns-resize;
  }
  .table-up-resize-line__row::before,
  .table-up-resize-line__row::after {
    width: 100%;
    height: 0.5rem;
  }
  .table-up-resize-line__row::before {
    transform: translateY(-0.5rem);
  }
  .table-up-resize-line__col {
    width: 0.0625rem;
    cursor: ew-resize;
  }
  .table-up-resize-line__col::before,
  .table-up-resize-line__col::after {
    height: 100%;
    width: 0.5rem;
  }
  .table-up-resize-line__col::before {
    transform: translateX(-0.5rem);
  }
  .table-up-resize-box {
    position: absolute;
    z-index: 0;
  }
  .table-up-resize-box.is-hidden {
    display: none;
  }
  .table-up-resize-box.is-align-right .table-up-resize-box__col-separator {
    left: -0.125rem;
  }
  .table-up-resize-box.is-align-right .table-up-resize-box__corner {
    border-left-width: 0.0625rem;
    border-right-width: 0.0625rem;
    border-top-left-radius: 0;
    border-top-right-radius: 50%;
  }
  .table-up-resize-box__row,
  .table-up-resize-box__col {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
  }
  .table-up-resize-box__col-wrapper,
  .table-up-resize-box__row-wrapper {
    display: flex;
  }
  .table-up-resize-box__col-header,
  .table-up-resize-box__row-header {
    position: relative;
    flex-shrink: 0;
    background-color: #f3f4f5;
    border: 0.0625rem solid #ccc;
  }
  .table-up-resize-box__col-wrapper {
    height: 100%;
  }
  .table-up-resize-box__col-header {
    height: 100%;
    cursor: pointer;
    border-right-color: transparent;
  }
  .table-up-resize-box__col-header:last-child {
    border-right-color: #ccc;
  }
  .table-up-resize-box__col-separator {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -0.125rem;
    width: 0.125rem;
    cursor: ew-resize;
    z-index: 0;
  }
  .table-up-resize-box__col-separator::after {
    right: -0.375rem;
  }
  .table-up-resize-box__col-separator::before {
    left: -0.375rem;
  }
  .table-up-resize-box__col-separator::after,
  .table-up-resize-box__col-separator::before {
    content: '';
    position: absolute;
    top: 0;
    display: block;
    width: 0.5rem;
    height: 100%;
    z-index: 1;
  }
  .table-up-resize-box__row-wrapper {
    flex-direction: column;
    width: 100%;
  }
  .table-up-resize-box__row-header {
    width: 100%;
    cursor: pointer;
    border-bottom-color: transparent;
  }
  .table-up-resize-box__row-header:last-child {
    border-bottom-color: #ccc;
  }
  .table-up-resize-box__row-separator {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.125rem;
    height: 0.125rem;
    cursor: ns-resize;
    z-index: 0;
  }
  .table-up-resize-box__row-separator::after {
    bottom: -0.375rem;
  }
  .table-up-resize-box__row-separator::before {
    top: -0.375rem;
  }
  .table-up-resize-box__row-separator::after,
  .table-up-resize-box__row-separator::before {
    content: '';
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    height: 0.5rem;
    z-index: 1;
  }
  .table-up-resize-box__corner {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f3f4f5;
    border: 0.0625rem solid #ccc;
    border-right-width: 0;
    border-bottom-width: 0;
    border-top-left-radius: 50%;
    cursor: pointer;
  }
  .table-up-drag-line {
    position: fixed;
    z-index: 0;
    background-color: #409eff;
  }
  .table-up-drag-line.is-col {
    width: 0.125rem;
    cursor: ew-resize;
  }
  .table-up-drag-line.is-row {
    height: 0.125rem;
    cursor: ns-resize;
  }
  .table-up-scale {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    pointer-events: none;
  }
  .table-up-scale__block {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-100%, -100%);
    width: 0.75rem;
    height: 0.75rem;
    background-color: #f1f5f9;
    border: 0.0625rem solid #808080;
    cursor: nwse-resize;
    pointer-events: all;
  }
  .table-up-scale.is-align-right .table-up-scale__block {
    cursor: nesw-resize;
  }
  .table-up-scale.is-hidden {
    display: none;
  }
  .table-up-scrollbar {
    position: absolute;
    z-index: 1;
    transition: opacity 0.15s linear;
  }
  .table-up-scrollbar__container {
    position: relative;
  }
  .table-up-scrollbar.is-transparent {
    opacity: 0;
  }
  .table-up-scrollbar.is-vertical {
    top: 0.125rem;
    bottom: 0.125rem;
    left: -0.5rem;
    width: 0.375rem;
  }
  .table-up-scrollbar.is-vertical .table-up-scrollbar__thumb {
    width: 100%;
  }
  .table-up-scrollbar.is-horizontal {
    bottom: 0.125rem;
    left: 0.125rem;
    right: 0.125rem;
    height: 0.375rem;
  }
  .table-up-scrollbar.is-horizontal .table-up-scrollbar__thumb {
    height: 100%;
  }
  .table-up-scrollbar__thumb {
    border-radius: 0.3125rem;
    background-color: #d2d2d2;
    cursor: pointer;
  }
  .table-up-scrollbar__thumb:hover {
    background-color: #a1a1aa;
  }
  .table-up-scrollbar--origin.ql-container .ql-table-wrapper {
    scrollbar-width: inherit;
  }
  .table-up-menu,
  .table-up-align {
    position: absolute;
    z-index: 1;
    display: none;
    align-items: center;
    padding: 0.25rem;
    border-radius: 0.375rem;
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
    background-color: #ffffff;
    font-size: 0.875rem;
  }
  .table-up-menu__item,
  .table-up-align__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border-radius: 0.25rem;
    cursor: pointer;
  }
  .table-up-menu__item:hover,
  .table-up-align__item:hover {
    background-color: #eeeeee;
  }
  .table-up-menu__item.is-break,
  .table-up-align__item.is-break {
    align-self: stretch;
    width: 0.0625rem;
    padding: 0;
    margin: 0.125rem 0.25rem;
    background-color: #a3a3a3;
    cursor: default;
  }
  .table-up-menu .icon,
  .table-up-align .icon {
    display: flex;
    flex-shrink: 0;
    font-size: 1.25rem;
  }
  .table-up-menu span,
  .table-up-align span {
    text-wrap: nowrap;
  }
  .table-up-menu.is-contextmenu {
    flex-direction: column;
    padding: 0.25rem 0.5rem;
    max-height: 21.875rem;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .table-up-menu.is-contextmenu .table-up-menu__item {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    gap: 0.25rem;
    cursor: pointer;
  }
  .table-up-menu.is-contextmenu .is-break {
    width: 100%;
    height: 0.0625rem;
    flex-shrink: 0;
    margin: 0.25rem 0;
    background-color: #a3a3a3;
  }
  .table-up-align--active {
    display: flex;
  }
  .table-up-align .icon {
    width: 1.25rem;
    height: 1.25rem;
  }
  .table-up-color-map {
    display: flex;
    flex-direction: column;
  }
  .table-up-color-map--used {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row-reverse;
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    border-top: 0.0625rem solid #ccc;
  }
  .table-up-color-map__content {
    display: flex;
    flex-direction: column;
  }
  .table-up-color-map__content-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
  }
  .table-up-color-map__item {
    width: 0.875rem;
    height: 0.875rem;
    margin: 0.125rem;
    border: 0.0625rem solid #a3a3a3;
    cursor: pointer;
  }
  .table-up-color-map__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 1.25rem;
    padding: 0 0.375rem;
    color: #303133;
    background-color: #fff;
    cursor: pointer;
  }
  .table-up-color-map__btn:hover {
    background-color: #edeeef;
  }
  
  .table-up-menu__item .icon {
    width: 24px;
    height: 36px
  }