*,
:before,
:after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(63, 131, 248, .5);
  --tw-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0);
  --tw-ring-shadow: 0 0 rgba(0, 0, 0, 0);
  --tw-shadow: 0 0 rgba(0, 0, 0, 0);
  --tw-shadow-colored: 0 0 rgba(0, 0, 0, 0);
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style:
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(63, 131, 248, .5);
  --tw-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0);
  --tw-ring-shadow: 0 0 rgba(0, 0, 0, 0);
  --tw-shadow: 0 0 rgba(0, 0, 0, 0);
  --tw-shadow-colored: 0 0 rgba(0, 0, 0, 0);
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style:
}

* {
  scrollbar-color: initial;
  scrollbar-width: initial
}

.univer-left-1\.5 {
  left: .375rem
}

.univer-left-2 {
  left: .5rem
}

.univer-left-5 {
  left: 1.25rem
}

.univer-right-1\.5 {
  right: .375rem
}

.univer-right-px {
  right: 1px
}

.univer-top-4 {
  top: 1rem
}

.univer-top-px {
  top: 1px
}

.univer-z-50 {
  z-index: 50
}

.univer-z-\[1080\] {
  z-index: 1080
}

.-univer-mx-1 {
  margin-left: -.25rem;
  margin-right: -.25rem
}

.univer-mx-1 {
  margin-left: .25rem;
  margin-right: .25rem
}

.univer-my-1 {
  margin-top: .25rem;
  margin-bottom: .25rem
}

.univer-ml-auto {
  margin-left: auto
}

.univer-inline-block {
  display: inline-block
}

.univer-size-2 {
  width: .5rem;
  height: .5rem
}

.univer-size-2\.5 {
  width: .625rem;
  height: .625rem
}

.univer-size-5 {
  width: 1.25rem;
  height: 1.25rem
}

.univer-size-7 {
  width: 1.75rem;
  height: 1.75rem
}

.univer-size-9 {
  width: 2.25rem;
  height: 2.25rem
}

.\!univer-h-1\/2 {
  height: 50% !important
}

.univer-h-12 {
  height: 3rem
}

.univer-h-2 {
  height: .5rem
}

.univer-h-3\.5 {
  height: .875rem
}

.univer-h-48 {
  height: 12rem
}

.univer-h-5 {
  height: 1.25rem
}

.univer-h-\[148px\] {
  height: 148px
}

.univer-h-\[24px\] {
  height: 24px
}

.univer-h-\[calc\(100\%-2px\)\] {
  height: calc(100% - 2px)
}

.univer-h-px {
  height: 1px
}

.univer-max-h-\[var\(--radix-popper-available-height\)\] {
  max-height: var(--radix-popper-available-height)
}

.univer-w-14 {
  width: 3.5rem
}

.univer-w-3\.5 {
  width: .875rem
}

.univer-w-6 {
  width: 1.5rem
}

.univer-w-72 {
  width: 18rem
}

.univer-w-8 {
  width: 2rem
}

.univer-w-\[292px\] {
  width: 292px
}

.univer-w-fit {
  width: -moz-fit-content;
  width: fit-content
}

.univer-min-w-\[180px\] {
  min-width: 180px
}

.univer-min-w-\[260px\] {
  min-width: 260px
}

.univer-min-w-\[320px\] {
  min-width: 320px
}

.univer-max-w-\[480px\] {
  max-width: 480px
}

.univer-flex-shrink-0,
.univer-shrink-0 {
  flex-shrink: 0
}

.univer-translate-y-\[calc\(-50\%_-_2px\)\] {
  --tw-translate-y: calc(-50% - 2px);
  transform: translate(var(--tw-translate-x), calc(-50% - 2px)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.univer-rotate-45 {
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(45deg) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

@keyframes univer-spin {
  to {
    transform: rotate(360deg)
  }
}

.univer-animate-spin {
  animation: univer-spin 1s linear infinite
}

.univer-cursor-crosshair {
  cursor: crosshair
}

.univer-cursor-default {
  cursor: default
}

.univer-grid-flow-col {
  grid-auto-flow: column
}

.univer-content-center {
  align-content: center
}

.univer-items-start {
  align-items: flex-start
}

.univer-gap-2\.5 {
  gap: .625rem
}

.univer-space-x-2>:not([hidden])~:not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: 0rem;
  margin-right: calc(.5rem * var(--tw-space-x-reverse));
  margin-left: calc(.5rem * (1 - var(--tw-space-x-reverse)));
  margin-left: .5rem;
  margin-left: calc(.5rem * calc(1 - var(--tw-space-x-reverse)))
}

.univer-space-y-4>:not([hidden])~:not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * (1 - var(--tw-space-y-reverse)));
  margin-top: 1rem;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: 0rem;
  margin-bottom: calc(1rem * var(--tw-space-y-reverse))
}

.univer-overflow-x-hidden {
  overflow-x: hidden
}

.univer-text-balance {
  text-wrap: balance
}

.univer-rounded-\[2px\] {
  border-radius: 2px
}

.univer-rounded-none {
  border-radius: 0
}

.univer-rounded-xl {
  border-radius: .75rem
}

.univer-rounded-r-2xl {
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem
}

.univer-rounded-br-md {
  border-bottom-right-radius: .375rem
}

.univer-rounded-tr-md {
  border-top-right-radius: .375rem
}

.univer-border-2 {
  border-width: 2px
}

.univer-border-y-0 {
  border-top-width: 0px;
  border-bottom-width: 0px
}

.\!univer-border-gray-200 {
  --tw-border-opacity: 1 !important;
  border-color: #e3e5ea !important;
  border-color: rgba(227, 229, 234, var(--tw-border-opacity, 1)) !important
}

.univer-border-primary-600 {
  --tw-border-opacity: 1;
  border-color: #2c53f1;
  border-color: rgba(44, 83, 241, var(--tw-border-opacity, 1))
}

.univer-border-transparent {
  border-color: transparent
}

.univer-border-white {
  --tw-border-opacity: 1;
  border-color: #fff;
  border-color: rgba(255, 255, 255, var(--tw-border-opacity, 1))
}

.univer-border-l-gray-200 {
  --tw-border-opacity: 1;
  border-left-color: #e3e5ea;
  border-left-color: rgba(227, 229, 234, var(--tw-border-opacity, 1))
}

.\!univer-bg-transparent {
  background-color: transparent !important
}

.univer-bg-\[\#EEEFF1\],
.univer-bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: #eeeff1;
  background-color: rgba(238, 239, 241, var(--tw-bg-opacity, 1))
}

.univer-bg-gray-300 {
  --tw-bg-opacity: 1;
  background-color: #cdd0d8;
  background-color: rgba(205, 208, 216, var(--tw-bg-opacity, 1))
}

.univer-bg-gray-700 {
  --tw-bg-opacity: 1;
  background-color: #2c3040;
  background-color: rgba(44, 48, 64, var(--tw-bg-opacity, 1))
}

.univer-bg-primary-600 {
  --tw-bg-opacity: 1;
  background-color: #2c53f1;
  background-color: rgba(44, 83, 241, var(--tw-bg-opacity, 1))
}

.univer-fill-current {
  fill: currentColor
}

.univer-fill-gray-700 {
  fill: #2c3040
}

.univer-py-2\.5 {
  padding-top: .625rem;
  padding-bottom: .625rem
}

.\!univer-pl-4 {
  padding-left: 1rem !important
}

.\!univer-pr-5 {
  padding-right: 1.25rem !important
}

.univer-pb-4 {
  padding-bottom: 1rem
}

.univer-pl-0 {
  padding-left: 0
}

.univer-pl-5 {
  padding-left: 1.25rem
}

.univer-pl-8 {
  padding-left: 2rem
}

.univer-pr-0 {
  padding-right: 0
}

.univer-pr-8 {
  padding-right: 2rem
}

.univer-pt-14 {
  padding-top: 3.5rem
}

.univer-text-center {
  text-align: center
}

.univer-text-right {
  text-align: right
}

.univer-align-middle {
  vertical-align: middle
}

.univer-font-sans {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji"
}

.univer-text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem
}

.univer-font-\[500\],
.univer-font-medium {
  font-weight: 500
}

.univer-uppercase {
  text-transform: uppercase
}

.univer-leading-7 {
  line-height: 1.75rem
}

.univer-leading-9 {
  line-height: 2.25rem
}

.univer-leading-\[24px\] {
  line-height: 24px
}

.univer-tracking-widest {
  letter-spacing: .1em
}

.univer-text-blue-500 {
  --tw-text-opacity: 1;
  color: #3f83f8;
  color: rgba(63, 131, 248, var(--tw-text-opacity, 1))
}

.univer-text-cyan-700 {
  --tw-text-opacity: 1;
  color: #0e7490;
  color: rgba(14, 116, 144, var(--tw-text-opacity, 1))
}

.univer-text-green-500 {
  --tw-text-opacity: 1;
  color: #0da471;
  color: rgba(13, 164, 113, var(--tw-text-opacity, 1))
}

.univer-text-indigo-600,
.univer-text-primary-600 {
  --tw-text-opacity: 1;
  color: #2c53f1;
  color: rgba(44, 83, 241, var(--tw-text-opacity, 1))
}

.univer-text-red-500 {
  --tw-text-opacity: 1;
  color: #f05252;
  color: rgba(240, 82, 82, var(--tw-text-opacity, 1))
}

.univer-text-yellow-400 {
  --tw-text-opacity: 1;
  color: #f1b312;
  color: rgba(241, 179, 18, var(--tw-text-opacity, 1))
}

.univer-underline-offset-4 {
  text-underline-offset: 4px
}

.univer-opacity-50 {
  opacity: .5
}

.univer-opacity-60 {
  opacity: .6
}

.univer-opacity-90 {
  opacity: .9
}

.univer-shadow-\[0px_1px_3px_-1px_rgba\(30\,40\,77\,0\.10\)\,0px_1px_4px_0px_rgba\(30\,40\,77\,0\.12\)\] {
  --tw-shadow: 0px 1px 3px -1px rgba(30, 40, 77, .1), 0px 1px 4px 0px rgba(30, 40, 77, .12);
  --tw-shadow-colored: 0px 1px 3px -1px var(--tw-shadow-color), 0px 1px 4px 0px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 3px -1px #1e284d1a, 0 1px 4px #1e284d1f;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow)
}

.univer-shadow-\[0px_1px_6px_-2px_rgba\(30\,40\,77\,0\.08\)\,0px_2px_6px_-1px_rgba\(30\,40\,77\,0\.10\)\] {
  --tw-shadow: 0px 1px 6px -2px rgba(30, 40, 77, .08), 0px 2px 6px -1px rgba(30, 40, 77, .1);
  --tw-shadow-colored: 0px 1px 6px -2px var(--tw-shadow-color), 0px 2px 6px -1px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 6px -2px #1e284d14, 0 2px 6px -1px #1e284d1a;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow)
}

.univer-shadow-inner {
  --tw-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .05);
  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, inset 0 2px 4px #0000000d;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow)
}

.univer-shadow-md {
  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow)
}

.univer-shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px #0000000d;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow)
}

.univer-ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0))
}

.univer-ring-white {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(255, 255, 255, var(--tw-ring-opacity, 1))
}

.univer-ring-offset-2 {
  --tw-ring-offset-width: 2px
}

.univer-ring-offset-gray-600 {
  --tw-ring-offset-color: #414657
}

.univer-ring-offset-white {
  --tw-ring-offset-color: #fff
}

.univer-backdrop-blur-\[10px\] {
  --tw-backdrop-blur: blur(10px);
  -webkit-backdrop-filter: blur(10px) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: blur(10px) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.univer-transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .15s
}

.univer-transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .15s
}

.univer-duration-75 {
  transition-duration: 75ms
}

.univer-will-change-transform {
  will-change: transform
}

.univer-scrollbar-none {
  scrollbar-width: none
}

.univer-scrollbar-none::-webkit-scrollbar {
  display: none
}

.univer-animate-in {
  animation-name: enter;
  animation-duration: .15s;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial
}

.univer-fade-in,
.univer-fade-in-0 {
  --tw-enter-opacity: 0
}

.univer-zoom-in-95 {
  --tw-enter-scale: .95
}

.univer-slide-in-from-top-4 {
  --tw-enter-translate-y: -1rem
}

.univer-duration-200 {
  animation-duration: .2s
}

.univer-duration-75 {
  animation-duration: 75ms
}

.placeholder\:univer-text-gray-400::-moz-placeholder {
  --tw-text-opacity: 1;
  color: #979dac;
  color: rgba(151, 157, 172, var(--tw-text-opacity, 1))
}

.placeholder\:univer-text-gray-400::placeholder {
  --tw-text-opacity: 1;
  color: #979dac;
  color: rgba(151, 157, 172, var(--tw-text-opacity, 1))
}

.after\:univer-absolute:after {
  content: var(--tw-content);
  position: absolute
}

.after\:-univer-bottom-px:after {
  content: var(--tw-content);
  bottom: -1px
}

.after\:univer-block:after {
  content: var(--tw-content);
  display: block
}

.after\:univer-h-px:after {
  content: var(--tw-content);
  height: 1px
}

.after\:univer-w-full:after {
  content: var(--tw-content);
  width: 100%
}

.after\:univer-bg-gray-200:after {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: #e3e5ea;
  background-color: rgba(227, 229, 234, var(--tw-bg-opacity, 1))
}

.after\:univer-content-\[\'\'\]:after {
  --tw-content: "";
  content: "";
  content: var(--tw-content)
}

.data-\[disabled\]\:univer-pointer-events-none[data-disabled] {
  pointer-events: none
}

.data-\[orientation\=horizontal\]\:univer-h-px[data-orientation=horizontal] {
  height: 1px
}

.data-\[orientation\=vertical\]\:univer-h-full[data-orientation=vertical] {
  height: 100%
}

.data-\[orientation\=horizontal\]\:univer-w-full[data-orientation=horizontal] {
  width: 100%
}

.data-\[orientation\=vertical\]\:univer-w-px[data-orientation=vertical] {
  width: 1px
}

.data-\[state\=open\]\:univer-bg-gray-100[data-state=open] {
  --tw-bg-opacity: 1;
  background-color: #eeeff1;
  background-color: rgba(238, 239, 241, var(--tw-bg-opacity, 1))
}

.data-\[disabled\]\:univer-opacity-50[data-disabled] {
  opacity: .5
}

.data-\[state\=open\]\:univer-animate-in[data-state=open] {
  animation-name: enter;
  animation-duration: .15s;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial
}

.data-\[state\=closed\]\:univer-animate-out[data-state=closed] {
  animation-name: exit;
  animation-duration: .15s;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial
}

.data-\[state\=closed\]\:univer-fade-out-0[data-state=closed] {
  --tw-exit-opacity: 0
}

.data-\[state\=open\]\:univer-fade-in-0[data-state=open] {
  --tw-enter-opacity: 0
}

.data-\[state\=closed\]\:univer-zoom-out-95[data-state=closed] {
  --tw-exit-scale: .95
}

.data-\[state\=open\]\:univer-zoom-in-95[data-state=open] {
  --tw-enter-scale: .95
}

.data-\[side\=bottom\]\:univer-slide-in-from-top-2[data-side=bottom] {
  --tw-enter-translate-y: -.5rem
}

.data-\[side\=left\]\:univer-slide-in-from-right-2[data-side=left] {
  --tw-enter-translate-x: .5rem
}

.data-\[side\=right\]\:univer-slide-in-from-left-2[data-side=right] {
  --tw-enter-translate-x: -.5rem
}

.data-\[side\=top\]\:univer-slide-in-from-bottom-2[data-side=top] {
  --tw-enter-translate-y: .5rem
}

.hover\:univer-bg-\[\#EEEFF1\]:hover,
.hover\:univer-bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: #eeeff1;
  background-color: rgba(238, 239, 241, var(--tw-bg-opacity, 1))
}

.hover\:univer-bg-gray-50:hover {
  --tw-bg-opacity: 1;
  background-color: #f9fafb;
  background-color: rgba(249, 250, 251, var(--tw-bg-opacity, 1))
}

.hover\:univer-bg-primary-500:hover {
  --tw-bg-opacity: 1;
  background-color: #466af7;
  background-color: rgba(70, 106, 247, var(--tw-bg-opacity, 1))
}

.hover\:univer-text-gray-500:hover {
  --tw-text-opacity: 1;
  color: #5f6574;
  color: rgba(95, 101, 116, var(--tw-text-opacity, 1))
}

.hover\:univer-text-gray-900:hover {
  --tw-text-opacity: 1;
  color: #0e111e;
  color: rgba(14, 17, 30, var(--tw-text-opacity, 1))
}

.hover\:univer-text-primary-500:hover {
  --tw-text-opacity: 1;
  color: #466af7;
  color: rgba(70, 106, 247, var(--tw-text-opacity, 1))
}

.hover\:univer-underline:hover {
  text-decoration-line: underline
}

.focus\:univer-border-blue-500:focus {
  --tw-border-opacity: 1;
  border-color: #3f83f8;
  border-color: rgba(63, 131, 248, var(--tw-border-opacity, 1))
}

.focus\:univer-border-primary-500:focus {
  --tw-border-opacity: 1;
  border-color: #466af7;
  border-color: rgba(70, 106, 247, var(--tw-border-opacity, 1))
}

.focus\:univer-bg-gray-100:focus {
  --tw-bg-opacity: 1;
  background-color: #eeeff1;
  background-color: rgba(238, 239, 241, var(--tw-bg-opacity, 1))
}

.focus\:univer-ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0))
}

.focus\:univer-ring-primary-500\/20:focus {
  --tw-ring-color: rgba(70, 106, 247, .2)
}

.focus-visible\:univer-outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px
}

.active\:univer-bg-gray-200:active {
  --tw-bg-opacity: 1;
  background-color: #e3e5ea;
  background-color: rgba(227, 229, 234, var(--tw-bg-opacity, 1))
}

.active\:univer-bg-primary-700:active {
  --tw-bg-opacity: 1;
  background-color: #143ee3;
  background-color: rgba(20, 62, 227, var(--tw-bg-opacity, 1))
}

.active\:univer-text-primary-700:active {
  --tw-text-opacity: 1;
  color: #143ee3;
  color: rgba(20, 62, 227, var(--tw-text-opacity, 1))
}

.disabled\:univer-pointer-events-none:disabled {
  pointer-events: none
}

.disabled\:univer-opacity-50:disabled {
  opacity: .5
}

.dark\:univer-border-gray-600:where(.univer-dark, .univer-dark *) {
  --tw-border-opacity: 1;
  border-color: #414657;
  border-color: rgba(65, 70, 87, var(--tw-border-opacity, 1))
}

.dark\:univer-border-gray-700:where(.univer-dark, .univer-dark *) {
  --tw-border-opacity: 1;
  border-color: #2c3040;
  border-color: rgba(44, 48, 64, var(--tw-border-opacity, 1))
}

.dark\:univer-bg-gray-700:where(.univer-dark, .univer-dark *) {
  --tw-bg-opacity: 1;
  background-color: #2c3040;
  background-color: rgba(44, 48, 64, var(--tw-bg-opacity, 1))
}

.dark\:univer-text-gray-400:where(.univer-dark, .univer-dark *) {
  --tw-text-opacity: 1;
  color: #979dac;
  color: rgba(151, 157, 172, var(--tw-text-opacity, 1))
}

.dark\:univer-text-primary-500:where(.univer-dark, .univer-dark *) {
  --tw-text-opacity: 1;
  color: #466af7;
  color: rgba(70, 106, 247, var(--tw-text-opacity, 1))
}

.dark\:univer-text-white:where(.univer-dark, .univer-dark *) {
  --tw-text-opacity: 1;
  color: #fff;
  color: rgba(255, 255, 255, var(--tw-text-opacity, 1))
}

.dark\:univer-ring-primary-600:where(.univer-dark, .univer-dark *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(44, 83, 241, var(--tw-ring-opacity, 1))
}

.dark\:univer-ring-offset-gray-600:where(.univer-dark, .univer-dark *) {
  --tw-ring-offset-color: #414657
}

.dark\:hover\:univer-bg-gray-700:hover:where(.univer-dark, .univer-dark *) {
  --tw-bg-opacity: 1;
  background-color: #2c3040;
  background-color: rgba(44, 48, 64, var(--tw-bg-opacity, 1))
}

.dark\:focus\:univer-bg-gray-600:focus:where(.univer-dark, .univer-dark *) {
  --tw-bg-opacity: 1;
  background-color: #414657;
  background-color: rgba(65, 70, 87, var(--tw-bg-opacity, 1))
}

.dark\:active\:univer-bg-gray-500:active:where(.univer-dark, .univer-dark *) {
  --tw-bg-opacity: 1;
  background-color: #5f6574;
  background-color: rgba(95, 101, 116, var(--tw-bg-opacity, 1))
}

.dark\:active\:univer-bg-gray-600:active:where(.univer-dark, .univer-dark *) {
  --tw-bg-opacity: 1;
  background-color: #414657;
  background-color: rgba(65, 70, 87, var(--tw-bg-opacity, 1))
}

.\[\&\:\:-webkit-scrollbar\]\:univer-hidden::-webkit-scrollbar {
  display: none
}

.\[\&\>a\]\:univer-cursor-pointer>a {
  cursor: pointer
}

.\[\&\>a\]\:univer-px-2>a {
  padding-left: .5rem;
  padding-right: .5rem
}

.\[\&\>a\]\:univer-py-1>a {
  padding-top: .25rem;
  padding-bottom: .25rem
}

.\[\&\>a\]\:univer-text-sm>a {
  font-size: .875rem;
  line-height: 1.25rem
}

.\[\&\>input\]\:univer-w-11>input {
  width: 2.75rem
}

.\[\&\>svg\]\:univer-relative>svg {
  position: relative
}

.\[\&\>svg\]\:univer-top-0\.5>svg {
  top: .125rem
}

.\[\&\>svg\]\:univer-block>svg {
  display: block
}

.\[\&\>svg\]\:univer-size-4>svg {
  width: 1rem;
  height: 1rem
}

.\[\&\>svg\]\:univer-shrink-0>svg {
  flex-shrink: 0
}

.\[\&_input\]\:univer-box-border input {
  box-sizing: border-box
}

.\[\&_input\]\:univer-flex input {
  display: flex
}

.\[\&_input\]\:univer-h-8 input {
  height: 2rem
}

.\[\&_input\]\:univer-items-center input {
  align-items: center
}

.\[\&_input\]\:univer-rounded input {
  border-radius: .25rem
}

.\[\&_input\]\:univer-border input {
  border-width: 1px
}

.\[\&_input\]\:univer-border-solid input {
  border-style: solid
}

.\[\&_input\]\:univer-border-gray-200 input {
  --tw-border-opacity: 1;
  border-color: #e3e5ea;
  border-color: rgba(227, 229, 234, var(--tw-border-opacity, 1))
}

.\[\&_input\]\:univer-px-1\.5 input {
  padding-left: .375rem;
  padding-right: .375rem
}

.\[\&_input\]\:univer-text-sm input {
  font-size: .875rem;
  line-height: 1.25rem
}

.\[\&_input\]\:univer-text-gray-700 input {
  --tw-text-opacity: 1;
  color: #2c3040;
  color: rgba(44, 48, 64, var(--tw-text-opacity, 1))
}

.\[\&_input\]\:univer-outline-none input {
  outline: 2px solid transparent;
  outline-offset: 2px
}

.dark\:\[\&_input\]\:univer-border-gray-600 input:where(.univer-dark, .univer-dark *) {
  --tw-border-opacity: 1;
  border-color: #414657;
  border-color: rgba(65, 70, 87, var(--tw-border-opacity, 1))
}

.dark\:\[\&_input\]\:univer-text-white input:where(.univer-dark, .univer-dark *) {
  --tw-text-opacity: 1;
  color: #fff;
  color: rgba(255, 255, 255, var(--tw-text-opacity, 1))
}

.\[\&_svg\]\:univer-pointer-events-none svg {
  pointer-events: none
}

.\[\&_svg\]\:univer-size-4 svg {
  width: 1rem;
  height: 1rem
}

.\[\&_svg\]\:univer-shrink-0 svg {
  flex-shrink: 0
}

.univer-cascader-list {
  overflow-y: auto;
  display: flex;
  height: 100%;
  max-height: 348px;
  padding: var(--padding-sm);
  color: rgb(var(--text-color));
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--border-radius-base)
}

.univer-cascader-list-board {
  overflow: auto;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none
}

.univer-cascader-list-board:not(:last-child) {
  margin-right: var(--margin-xs);
  padding-right: var(--padding-sm);
  border-right: 1px solid rgb(var(--border-color))
}

.univer-cascader-list-board:first-child .univer-cascader-list-item-active {
  color: rgb(var(--primary-color))
}

.univer-cascader-list-board:first-child .univer-cascader-list-option {
  padding: var(--padding-xs) 0
}

.univer-cascader-list-board:first-child .univer-cascader-list-check-mark {
  display: none
}

.univer-cascader-list-board:not(:first-child) .univer-cascader-list-item-active {
  background-color: rgb(var(--bg-color-hover))
}

.univer-cascader-list-board:not(:first-child) .univer-cascader-list-option {
  padding: var(--padding-xs) 28px
}

.univer-cascader-list-item {
  border-radius: var(--border-radius-base)
}

.univer-cascader-list-option {
  cursor: pointer;
  position: relative;
  display: block;
  font-size: var(--font-size-xs)
}

.univer-cascader-list-check-mark {
  position: absolute;
  top: 50%;
  left: var(--margin-xs);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  font-size: var(--font-size-lg);
  color: rgb(var(--primary-color))
}

.univer-cascader-list-empty {
  padding-right: 120px;
  font-size: var(--font-size-xs);
  color: rgb(var(--text-color-secondary))
}

.univer-checkbox {
  cursor: pointer;
  display: inline-flex;
  gap: var(--margin-xs);
  align-items: center;
  box-sizing: border-box;
  font-size: var(--font-size-sm);
  color: var(--text-color)
}

.univer-checkbox:hover .univer-checkbox-target-input:checked+.univer-checkbox-target-inner {
  background-color: rgb(var(--primary-color-hover))
}

.univer-checkbox:hover .univer-checkbox-target-inner {
  border-color: rgb(var(--primary-color-hover))
}

.univer-checkbox-disabled {
  cursor: not-allowed;
  color: rgb(var(--grey-300))
}

.univer-checkbox-disabled .univer-checkbox-target-input:checked+.univer-checkbox-target-inner {
  background-color: rgb(var(--grey-300))
}

.univer-checkbox-disabled .univer-checkbox-target-inner {
  border-color: rgb(var(--grey-300))
}

.univer-checkbox-disabled:hover .univer-checkbox-target-input:checked+.univer-checkbox-target-inner {
  background-color: rgb(var(--grey-300))
}

.univer-checkbox-disabled:hover .univer-checkbox-target-inner {
  border-color: rgb(var(--grey-300))
}

.univer-checkbox-disabled.univer-checkbox-indeterminate .univer-checkbox-target-inner {
  background-color: rgb(var(--grey-300))
}

.univer-checkbox-indeterminate .univer-checkbox-target-inner {
  background-color: rgb(var(--primary-color))
}

.univer-checkbox-indeterminate .univer-checkbox-target-inner:after {
  top: 50%;
  left: 50%;
  width: calc(100% - 2px);
  height: 2px;
  background-color: rgb(var(--bg-color-secondary));
  border: none;
  border-radius: var(--border-radius-base);
  opacity: 1;
  transform: translate(-50%, -50%)
}

.univer-checkbox-target {
  position: relative
}

.univer-checkbox-target-input {
  position: absolute;
  opacity: 0
}

.univer-checkbox-target-input:checked+.univer-checkbox-target-inner {
  background-color: rgb(var(--primary-color))
}

.univer-checkbox-target-input:checked+.univer-checkbox-target-inner:after {
  transform: rotate(45deg) scale(1);
  opacity: 1;
  border-color: rgb(var(--bg-color-secondary))
}

.univer-checkbox-target-inner {
  position: relative;
  overflow: hidden;
  display: block;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 1px solid rgb(var(--primary-color));
  border-radius: var(--border-radius-base);
  transition: all .15s
}

.univer-checkbox-target-inner:after {
  content: "";
  position: absolute;
  top: calc(50% - 5.5px);
  left: calc(50% - 2.5px);
  transform-origin: center center;
  transform: rotate(45deg) scale(0);
  display: block;
  box-sizing: border-box;
  width: calc(14px / 2.6);
  height: calc(14px / 1.5);
  opacity: 0;
  border: 2px solid transparent;
  border-top: 0;
  border-left: 0;
  transition: all .15s
}

.univer-checkbox-group {
  display: flex;
  gap: var(--margin-sm)
}

.univer-checkbox-group-direction-vertical {
  flex-direction: column
}

.univer-dialog {
  position: relative;
  width: 640px;
  margin: 10% auto
}

.univer-dialog-wrap {
  position: fixed;
  z-index: 1050;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  outline: 0;
  -webkit-overflow-scrolling: touch
}

.univer-dialog-title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 500
}

.univer-dialog-title-content {
  padding: 24px 28px 20px;
  box-sizing: border-box
}

.univer-dialog-content {
  pointer-events: all;
  position: relative;
  color: rgb(var(--text-color));
  background-color: rgb(var(--bg-color-secondary));
  background-clip: padding-box;
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--border-radius-lg);
  box-shadow: var(--box-shadow-base)
}

.univer-dialog-close {
  cursor: pointer;
  position: absolute;
  top: 24px;
  right: 28px;
  padding: 0;
  font-size: var(--font-size-lg);
  font-weight: 500;
  line-height: 1;
  color: rgb(var(--grey-500));
  -webkit-text-decoration: none;
  text-decoration: none;
  opacity: .2;
  background: transparent;
  border: 0
}

.univer-dialog-close:hover {
  -webkit-text-decoration: none;
  text-decoration: none;
  opacity: 1
}

.univer-dialog-header {
  box-sizing: border-box;
  color: rgb(var(--text-color));
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0
}

.univer-dialog-body {
  padding: 0 28px 20px
}

.univer-dialog-footer {
  padding: 0 28px 24px;
  text-align: right;
  border-radius: 0 0 5px 5px
}

.univer-dialog-zoom-enter,
.univer-dialog-zoom-appear {
  opacity: 0;
  animation-play-state: paused;
  animation-timing-function: cubic-bezier(.08, .82, .17, 1);
  animation-duration: .3s;
  animation-fill-mode: both
}

.univer-dialog-zoom-leave {
  animation-duration: .3s;
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-timing-function: cubic-bezier(.6, .04, .98, .34)
}

.univer-dialog-zoom-enter.univer-dialog-zoom-enter-active,
.univer-dialog-zoom-appear.univer-dialog-zoom-appear-active {
  animation-name: univer-dialog-zoom-in;
  animation-play-state: running
}

.univer-dialog-zoom-leave.univer-dialog-zoom-leave-active {
  animation-name: univer-dialog-zoom-out;
  animation-play-state: running
}

@keyframes univer-dialog-zoom-in {
  0% {
    transform: scale(0);
    opacity: 0
  }

  to {
    transform: scale(1);
    opacity: 1
  }
}

@keyframes univer-dialog-zoom-out {
  0% {
    transform: scale(1)
  }

  to {
    transform: scale(0);
    opacity: 0
  }
}

.univer-dialog-mask {
  position: fixed;
  z-index: 1050;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  background-color: #00000080
}

.univer-dialog-mask-hidden {
  display: none
}

.univer-dialog-fade-enter,
.univer-dialog-fade-appear {
  opacity: 0;
  animation-duration: .3s;
  animation-timing-function: cubic-bezier(.55, 0, .55, .2);
  animation-fill-mode: both;
  animation-play-state: paused
}

.univer-dialog-fade-leave {
  animation-duration: .3s;
  animation-timing-function: cubic-bezier(.55, 0, .55, .2);
  animation-fill-mode: both;
  animation-play-state: paused
}

.univer-dialog-fade-enter.univer-dialog-fade-enter-active,
.univer-dialog-fade-appear.univer-dialog-fade-appear-active {
  animation-name: univer-dialog-fade-in;
  animation-play-state: running
}

.univer-dialog-fade-leave.univer-dialog-fade-leave-active {
  animation-name: univer-dialog-fade-out;
  animation-play-state: running
}

@keyframes univer-dialog-fade-in {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes univer-dialog-fade-out {
  0% {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

.univer-dialog-root-draggable {
  pointer-events: none
}

.univer-confirm-footer {
  display: flex;
  gap: var(--margin-sm);
  justify-content: flex-end
}

.univer-date-picker {
  position: relative;
  width: 200px;
  height: 32px;
  border: 1px solid rgb(var(--border-color));
  border-radius: 4px;
  box-sizing: border-box;
  display: inline-flex
}

.univer-date-picker-rtl {
  direction: rtl
}

.univer-date-picker-invalid {
  box-shadow: 0 0 2px red
}

.univer-date-picker-panel {
  display: inline-block;
  vertical-align: top
}

.univer-date-picker-panel-focused {
  border-color: #00f
}

.univer-date-picker-panel-rtl {
  direction: rtl
}

.univer-date-picker-suffix-icon {
  position: absolute;
  top: 50%;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 8px;
  color: rgb(var(--text-color-secondary));
  transform: translateY(-50%);
  cursor: pointer
}

.univer-date-picker-decade-panel,
.univer-date-picker-year-panel,
.univer-date-picker-month-panel,
.univer-date-picker-week-panel,
.univer-date-picker-date-panel,
.univer-date-picker-time-panel {
  display: flex;
  flex-direction: column
}

.univer-date-picker-decade-panel table,
.univer-date-picker-year-panel table,
.univer-date-picker-month-panel table,
.univer-date-picker-week-panel table,
.univer-date-picker-date-panel table,
.univer-date-picker-time-panel table {
  text-align: center;
  border-collapse: collapse
}

.univer-date-picker-header {
  margin-bottom: var(--margin-base);
  display: flex;
  align-items: center
}

.univer-date-picker-header>* {
  flex: none
}

.univer-date-picker-header-view {
  height: 16px;
  flex: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--margin-xs)
}

.univer-date-picker-header-view>button {
  padding: 0;
  border: 0;
  background-color: transparent;
  cursor: pointer
}

.univer-date-picker-header-super-prev-btn,
.univer-date-picker-header-super-next-btn,
.univer-date-picker-header-prev-btn,
.univer-date-picker-header-next-btn {
  width: 16px;
  height: 16px;
  padding: 0;
  line-height: 16px;
  font-size: var(--font-size-lg);
  border: none;
  background-color: transparent;
  cursor: pointer
}

.univer-date-picker-cell {
  color: #aaa
}

.univer-date-picker-cell-disabled {
  opacity: .2
}

.univer-date-picker-cell-inner {
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  height: 24px;
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 24px;
  background: transparent;
  border: 0;
  border-radius: var(--border-radius-base);
  outline: none;
  cursor: pointer;
  transition: background .3s
}

.univer-date-picker-cell-in-view {
  color: #333
}

.univer-date-picker-cell-in-range>.univer-date-picker-cell-inner {
  background: #0000ff0d
}

.univer-date-picker-cell-hover>.univer-date-picker-cell-inner {
  background: rgb(var(--bg-color))
}

.univer-date-picker-cell-range-hover-start,
.univer-date-picker-cell-range-hover-end,
.univer-date-picker-cell-range-hover {
  position: relative
}

.univer-date-picker-cell-range-hover-start:after,
.univer-date-picker-cell-range-hover-end:after,
.univer-date-picker-cell-range-hover:after {
  position: absolute;
  top: 3px;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid green;
  border-right: 0;
  border-left: 0;
  content: "";
  pointer-events: none
}

.univer-date-picker-cell-range-hover-start:after {
  border-left: 1px solid green !important
}

.univer-date-picker-cell-range-hover-end:after {
  border-right: 1px solid green !important
}

.univer-date-picker-cell-today>.univer-date-picker-cell-inner {
  border: 1px solid rgb(var(--primary-color))
}

.univer-date-picker-cell-range-start>.univer-date-picker-cell-inner,
.univer-date-picker-cell-range-end>.univer-date-picker-cell-inner,
.univer-date-picker-cell-selected>.univer-date-picker-cell-inner {
  color: #fff;
  background: rgb(var(--primary-color))
}

.univer-date-picker-presets {
  background: #ccf
}

.univer-date-picker-presets ul {
  margin: 0;
  padding: 0;
  list-style: none
}

.univer-date-picker-now {
  padding-top: var(--padding-base)
}

.univer-date-picker-now-btn {
  font-size: var(--font-size-xs);
  color: rgb(var(--primary-color));
  cursor: pointer
}

.univer-date-picker-footer,
.univer-date-picker-picker-footer {
  margin-top: var(--margin-sm);
  border-top: 1px solid rgb(var(--border-color))
}

.univer-date-picker-ranges {
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none
}

.univer-date-picker-ranges>li {
  text-align: center;
  display: block
}

.univer-date-picker-ok {
  float: right
}

.univer-date-picker-decade-panel .univer-date-picker-content tbody {
  display: grid;
  grid-gap: 20px;
  gap: 20px
}

.univer-date-picker-decade-panel .univer-date-picker-cell-inner {
  width: 78px;
  height: 24px
}

.univer-date-picker-year-panel .univer-date-picker-content tbody,
.univer-date-picker-month-panel .univer-date-picker-content tbody {
  display: grid;
  grid-gap: 20px;
  gap: 20px
}

.univer-date-picker-year-panel .univer-date-picker-cell-inner,
.univer-date-picker-month-panel .univer-date-picker-cell-inner {
  width: 48px;
  height: 24px
}

.univer-date-picker-week-panel-row:hover .univer-date-picker-cell {
  background: red
}

.univer-date-picker-week-panel-row-selected .univer-date-picker-cell {
  background: #0000ff4d
}

.univer-date-picker-week-panel-row-range-hover .univer-date-picker-cell {
  background: #00ff001a
}

.univer-date-picker-week-panel-row-range-start .univer-date-picker-cell,
.univer-date-picker-week-panel-row-range-end .univer-date-picker-cell {
  background: #00ff004d
}

.univer-date-picker-week-panel .univer-date-picker-cell,
.univer-date-picker-week-panel .univer-date-picker-cell-inner {
  width: 24px
}

.univer-date-picker-week-panel .univer-date-picker-cell-week {
  color: #999;
  font-weight: 700;
  font-size: 12px
}

.univer-date-picker-week-panel .univer-date-picker-cell:hover>.univer-date-picker-cell-inner,
.univer-date-picker-week-panel .univer-date-picker-cell-selected>.univer-date-picker-cell-inner {
  background: transparent
}

.univer-date-picker-date-panel .univer-date-picker-cell-inner {
  width: 24px;
  height: 24px;
  font-size: var(--font-size-xs)
}

.univer-date-picker-time-panel {
  width: auto
}

.univer-date-picker-time-panel .univer-date-picker-content {
  position: relative;
  display: flex;
  max-height: 200px
}

.univer-date-picker-time-panel-column-title {
  font-size: 14px;
  line-height: 24px
}

.univer-date-picker-time-panel-column {
  flex: auto;
  width: 50px;
  margin: 0;
  padding: 0 0 180px;
  overflow-x: hidden;
  overflow-y: hidden;
  font-size: 12px;
  text-align: left;
  list-style: none;
  transition: background .3s
}

.univer-date-picker-time-panel-column-active {
  background: #0000ff1a
}

.univer-date-picker-time-panel-column:hover {
  overflow-y: auto
}

.univer-date-picker-time-panel-column>li {
  width: 50px;
  margin: 0;
  padding: 0;
  cursor: pointer
}

.univer-date-picker-time-panel-column>li.univer-date-picker-time-panel-cell-disabled {
  opacity: .5
}

.univer-date-picker-time-panel-column>li.univer-date-picker-time-panel-cell-selected {
  background: #0000ff80
}

.univer-date-picker-time-panel-column>li .univer-date-picker-time-panel-cell-inner {
  display: block;
  width: 100%;
  height: 24px;
  margin: 0;
  color: #333;
  line-height: 24px;
  text-align: center
}

.univer-date-picker-panel-rtl .univer-date-picker-time-panel-column>li .univer-date-picker-time-panel-cell-inner {
  padding: 0 12px 0 0;
  text-align: right
}

.univer-date-picker-datetime-panel {
  display: flex
}

.univer-date-picker-datetime-panel .univer-date-picker-time-panel {
  border-left: 1px solid #999
}

.univer-date-picker-datetime-panel .univer-date-picker-date-panel,
.univer-date-picker-datetime-panel .univer-date-picker-time-panel {
  transition: opacity .3s
}

.univer-date-picker-datetime-panel-active .univer-date-picker-date-panel,
.univer-date-picker-datetime-panel-active .univer-date-picker-time-panel {
  opacity: .3
}

.univer-date-picker-datetime-panel-active .univer-date-picker-date-panel-active,
.univer-date-picker-datetime-panel-active .univer-date-picker-time-panel-active {
  opacity: 1
}

.univer-date-picker-input {
  position: relative;
  display: inline-flex;
  width: 100%
}

.univer-date-picker-rtl .univer-date-picker-input {
  text-align: right
}

.univer-date-picker-input-active>input {
  background: #0000ff0d
}

.univer-date-picker-input>input {
  width: 100%;
  padding-left: 12px;
  border: none;
  border-radius: var(--border-radius-base);
  box-sizing: border-box
}

.univer-date-picker-input>input::-moz-placeholder {
  opacity: 1
}

.univer-date-picker-input>input::placeholder {
  color: #bfbfbf
}

.univer-date-picker-input>input:-moz-placeholder {
  text-overflow: ellipsis
}

.univer-date-picker-input>input:placeholder-shown {
  text-overflow: ellipsis
}

.univer-date-picker-input>input:focus {
  outline: none
}

.univer-date-picker-input-placeholder>input {
  color: #bfbfbf
}

.univer-date-picker-clear {
  position: absolute;
  top: 7px;
  right: 8px;
  cursor: pointer
}

.univer-date-picker-rtl .univer-date-picker-clear {
  right: auto;
  left: 4px
}

.univer-date-picker-clear-btn {
  width: 16px;
  height: 16px;
  text-align: center;
  line-height: 16px;
  background-color: rgb(var(--grey-500));
  border-radius: 50%;
  display: block
}

.univer-date-picker-clear-btn:before {
  content: "脳";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  bottom: 0;
  color: #fff;
  font-size: 16px;
  line-height: 16px
}

.univer-date-picker-dropdown {
  position: absolute;
  pointer-events: none
}

.univer-date-picker-dropdown-range {
  padding: 10px 0
}

.univer-date-picker-dropdown-hidden {
  display: none
}

.univer-date-picker-dropdown-placement-topLeft .univer-date-picker-range-arrow,
.univer-date-picker-dropdown-placement-topRight .univer-date-picker-range-arrow {
  bottom: 6px;
  transform: rotate(135deg)
}

.univer-date-picker-dropdown-placement-bottomLeft .univer-date-picker-range-arrow,
.univer-date-picker-dropdown-placement-bottomright .univer-date-picker-range-arrow {
  top: 6px;
  transform: rotate(-45deg)
}

.univer-date-picker-dropdown .univer-date-picker-range-arrow {
  position: absolute;
  left: 10px;
  z-index: 1;
  width: 10px;
  height: 10px;
  margin-left: 10px;
  transition: all .3s
}

.univer-date-picker-dropdown-rtl.univer-date-picker-dropdown .univer-date-picker-range-arrow {
  right: 10px;
  left: auto;
  margin-right: 10px;
  margin-left: 0
}

.univer-date-picker-dropdown .univer-date-picker-range-arrow:before,
.univer-date-picker-dropdown .univer-date-picker-range-arrow:after {
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  content: ""
}

.univer-date-picker-dropdown-rtl.univer-date-picker-dropdown .univer-date-picker-range-arrow:before,
.univer-date-picker-dropdown-rtl.univer-date-picker-dropdown .univer-date-picker-range-arrow:after {
  right: 50%;
  left: auto;
  transform: translate(50%, -50%)
}

.univer-date-picker-dropdown .univer-date-picker-range-arrow:before {
  width: 10px;
  height: 10px;
  border: 5px solid blue;
  border-color: blue blue transparent transparent
}

.univer-date-picker-dropdown .univer-date-picker-range-arrow:after {
  width: 8px;
  height: 8px;
  border: 8px / 2 solid blue;
  border-color: rgb(var(--bg-color-secondary)) rgb(var(--bg-color-secondary)) transparent transparent
}

.univer-date-picker-range {
  position: relative;
  display: inline-flex
}

.univer-date-picker-range-wrapper {
  display: flex
}

.univer-date-picker-range .univer-date-picker-active-bar {
  bottom: 0;
  height: 3px;
  background: green;
  opacity: 0;
  transition: all .3s;
  pointer-events: none
}

.univer-date-picker-range.univer-date-picker-focused .univer-date-picker-active-bar {
  opacity: 1
}

.univer-date-picker-panel-container {
  display: inline-block;
  vertical-align: top;
  transition: margin .3s;
  pointer-events: all
}

.univer-date-picker-panel-layout {
  padding: var(--padding-lg);
  background: rgb(var(--bg-color-secondary));
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--border-radius-lg);
  box-shadow: var(--box-shadow-base);
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  overflow: hidden
}

.univer-date-picker-selector {
  width: 100%
}

.univer-date-picker-selection-overflow {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid green
}

.univer-date-picker-selection-overflow-item {
  flex: none;
  max-width: 100%
}

.univer-date-picker-selection-item {
  border: 1px solid blue
}

.univer-date-picker-multiple-input {
  width: 10px;
  opacity: .1
}

.univer-dropdown {
  position: absolute;
  z-index: 1070;
  top: -9999px;
  left: -9999px;
  display: block
}

.univer-dropdown-hidden {
  display: none
}

.univer-dropdown-slide-up-enter,
.univer-dropdown-slide-up-appear {
  transform-origin: 0 0;
  display: block !important;
  animation-duration: .15s;
  animation-fill-mode: both;
  opacity: 0;
  animation-play-state: paused;
  animation-timing-function: cubic-bezier(.08, .82, .17, 1)
}

.univer-dropdown-slide-up-leave {
  transform-origin: 0 0;
  display: block !important;
  animation-duration: .15s;
  animation-fill-mode: both;
  opacity: 1;
  animation-play-state: paused;
  animation-timing-function: cubic-bezier(.6, .04, .98, .34)
}

.univer-dropdown-slide-up-enter.univer-dropdown-slide-up-enter-active.univer-dropdown-placement-bottomLeft,
.univer-dropdown-slide-up-appear.univer-dropdown-slide-up-appear-active.univer-dropdown-placement-bottomLeft,
.univer-dropdown-slide-up-enter.univer-dropdown-slide-up-enter-active.univer-dropdown-placement-bottomCenter,
.univer-dropdown-slide-up-appear.univer-dropdown-slide-up-appear-active.univer-dropdown-placement-bottomCenter,
.univer-dropdown-slide-up-enter.univer-dropdown-slide-up-enter-active.univer-dropdown-placement-bottomRight,
.univer-dropdown-slide-up-appear.univer-dropdown-slide-up-appear-active.univer-dropdown-placement-bottomRight {
  animation-name: univer-dropdown-slide-up-in;
  animation-play-state: running
}

.univer-dropdown-slide-up-enter.univer-dropdown-slide-up-enter-active.univer-dropdown-placement-topLeft,
.univer-dropdown-slide-up-appear.univer-dropdown-slide-up-appear-active.univer-dropdown-placement-topLeft,
.univer-dropdown-slide-up-enter.univer-dropdown-slide-up-enter-active.univer-dropdown-placement-topCenter,
.univer-dropdown-slide-up-appear.univer-dropdown-slide-up-appear-active.univer-dropdown-placement-topCenter,
.univer-dropdown-slide-up-enter.univer-dropdown-slide-up-enter-active.univer-dropdown-placement-topRight,
.univer-dropdown-slide-up-appear.univer-dropdown-slide-up-appear-active.univer-dropdown-placement-topRight {
  animation-name: univer-dropdown-slide-down-in;
  animation-play-state: running
}

.univer-dropdown-slide-up-leave.univer-dropdown-slide-up-leave-active.univer-dropdown-placement-bottomLeft,
.univer-dropdown-slide-up-leave.univer-dropdown-slide-up-leave-active.univer-dropdown-placement-bottomCenter,
.univer-dropdown-slide-up-leave.univer-dropdown-slide-up-leave-active.univer-dropdown-placement-bottomRight {
  animation-name: univer-dropdown-slide-up-out;
  animation-play-state: running
}

.univer-dropdown-slide-up-leave.univer-dropdown-slide-up-leave-active.univer-dropdown-placement-topLeft,
.univer-dropdown-slide-up-leave.univer-dropdown-slide-up-leave-active.univer-dropdown-placement-topCenter,
.univer-dropdown-slide-up-leave.univer-dropdown-slide-up-leave-active.univer-dropdown-placement-topRight {
  animation-name: univer-dropdown-slide-down-out;
  animation-play-state: running
}

@keyframes univer-dropdown-slide-up-in {
  0% {
    transform-origin: 0% 0%;
    transform: scaleY(0);
    opacity: 0
  }

  to {
    transform-origin: 0% 0%;
    transform: scaleY(1);
    opacity: 1
  }
}

@keyframes univer-dropdown-slide-up-out {
  0% {
    transform-origin: 0% 0%;
    transform: scaleY(1);
    opacity: 1
  }

  to {
    transform-origin: 0% 0%;
    transform: scaleY(0);
    opacity: 0
  }
}

@keyframes univer-dropdown-slide-down-in {
  0% {
    transform-origin: 0% 100%;
    transform: scaleY(0);
    opacity: 0
  }

  to {
    transform-origin: 0% 100%;
    transform: scaleY(1);
    opacity: 1
  }
}

@keyframes univer-dropdown-slide-down-out {
  0% {
    transform-origin: 0% 100%;
    transform: scaleY(1);
    opacity: 1
  }

  to {
    transform-origin: 0% 100%;
    transform: scaleY(0);
    opacity: 0
  }
}

.univer-form-layout {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--margin-sm)
}

.univer-form-layout-label {
  font-size: var(--font-size-sm);
  min-height: var(--font-size-sm);
  color: rgba(var(--color-black));
  margin-bottom: var(--margin-xs);
  display: flex;
  align-items: center
}

.univer-form-layout-desc {
  margin-top: var(--margin-xxs);
  font-size: var(--font-size-xs);
  color: rgba(var(--grey-500))
}

.univer-form-layout-content .univer-input-affix-wrapper,
.univer-form-layout-content .univer-select {
  width: 100%
}

.univer-form-layout-content .univer-range-selector {
  width: 100% !important
}

.univer-form-layout-content :last-child {
  margin-bottom: 0
}

.univer-form-layout-content-error .univer-input-affix-wrapper {
  border: 1px solid rgba(var(--red-400))
}

.univer-form-layout-content-error .univer-select-single:not(.univer-select-customize-input) .univer-select-selector {
  border: 1px solid rgba(var(--red-400))
}

.univer-form-layout-error {
  color: rgba(var(--red-400));
  font-size: var(--font-size-xxs);
  margin-top: var(--margin-xxs)
}

.univer-form-dual-column-layout {
  display: flex;
  justify-content: space-between
}

.univer-form-dual-column-layout .univer-form-layout {
  flex-grow: 1;
  flex-shrink: 1;
  max-width: calc(50% - 8px)
}

.univer-menu {
  box-sizing: border-box;
  margin: 0;
  padding: var(--padding-xs) var(--padding-sm);
  font-size: var(--font-size-xs);
  list-style: none;
  background-color: rgb(var(--bg-color-secondary));
  border-radius: var(--border-radius-xl);
  outline: none;
  box-shadow: var(--box-shadow-lg);
  border: 1px solid rgb(var(--border-color));
  min-width: 212px
}

.univer-menu-vertical {
  display: grid
}

.univer-menu-hidden,
.univer-menu-submenu-hidden {
  display: none
}

.univer-menu-item-group {
  padding: var(--padding-xs) 0
}

.univer-menu-item-group:not(:last-child) {
  border-bottom: 1px solid rgb(var(--border-color))
}

.univer-menu-item-group-list {
  display: grid;
  grid-gap: var(--margin-xxs);
  gap: var(--margin-xxs);
  margin: 0;
  padding: 0
}

.univer-menu-item-group-title {
  padding: 0 var(--padding-sm);
  color: rgb(var(--grey-500));
  font-size: var(--font-size-xxs);
  font-weight: 600;
  line-height: 1.5em;
  padding: 6px 4px 4px
}

.univer-menu-item-group-title:empty {
  display: none
}

.univer-menu-item-active,
.univer-menu-submenu-active {
  background-color: rgb(var(--bg-color-hover-light));
  border-radius: var(--border-radius-lg)
}

.univer-menu-item-selected {
  transform: translateZ(0);
  background-color: rgb(var(--bg-color-hover-light));
  border-radius: var(--border-radius-lg)
}

.univer-menu-submenu-selected {
  background-color: rgb(var(--bg-color-hover-light));
  border-radius: var(--border-radius-lg)
}

.univer-menu>li.univer-menu-submenu {
  padding: 0
}

.univer-menu-horizontal.univer-menu-sub,
.univer-menu-vertical.univer-menu-sub,
.univer-menu-vertical-left.univer-menu-sub,
.univer-menu-vertical-right.univer-menu-sub {
  min-width: 160px;
  margin-top: 0
}

.univer-menu-item {
  display: flex;
  gap: var(--margin-sm);
  align-items: center;
  padding: 0 var(--padding-sm);
  min-height: 32px;
  color: rgb(var(--text-color));
  font-size: var(--font-size-sm);
  line-height: 1.5em;
  border-radius: var(--border-radius-lg)
}

.univer-menu-item:hover {
  background-color: rgb(var(--bg-color-hover-light))
}

.univer-menu-item .univer-icon {
  color: rgb(var(--text-color-secondary))
}

.univer-menu-item,
.univer-menu-submenu {
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
  margin: 0;
  white-space: nowrap;
  list-style: none
}

.univer-menu-item.univer-menu-item-disabled,
.univer-menu-submenu.univer-menu-item-disabled,
.univer-menu-item.univer-menu-submenu-disabled,
.univer-menu-submenu.univer-menu-submenu-disabled {
  color: rgb(var(--text-color-tertiary)) !important;
  cursor: not-allowed
}

.univer-menu-submenu-popup {
  position: absolute;
  z-index: 1070
}

.univer-menu-submenu-popup .univer-submenu-title-wrapper {
  padding-right: var(--padding-xl)
}

.univer-menu-submenu-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 var(--padding-sm);
  min-height: 32px;
  color: rgb(var(--text-color));
  font-size: var(--font-size-sm);
  line-height: 1.5em
}

.univer-menu .univer-menu-submenu-title-more-icon,
.univer-menu .univer-menu-item-more-icon {
  margin-left: var(--margin-xs);
  font-size: var(--font-size-sm);
  color: rgb(var(--text-color-secondary))
}

.univer-menu-horizontal {
  overflow: hidden;
  white-space: nowrap;
  border: none;
  border-bottom: 1px solid rgb(var(--border-color));
  box-shadow: none
}

.univer-menu-horizontal>.univer-menu-item,
.univer-menu-horizontal>.univer-menu-submenu>.univer-menu-submenu-title {
  padding: 15px 20px
}

.univer-menu-horizontal>.univer-menu-submenu,
.univer-menu-horizontal>.univer-menu-item {
  display: inline-block;
  vertical-align: bottom;
  border-bottom: 2px solid transparent
}

.univer-menu-vertical>.univer-menu-item,
.univer-menu-vertical-left>.univer-menu-item,
.univer-menu-vertical-right>.univer-menu-item,
.univer-menu-inline>.univer-menu-item,
.univer-menu-vertical>.univer-menu-submenu>.univer-menu-submenu-title,
.univer-menu-vertical-left>.univer-menu-submenu>.univer-menu-submenu-title,
.univer-menu-vertical-right>.univer-menu-submenu>.univer-menu-submenu-title,
.univer-menu-inline>.univer-menu-submenu>.univer-menu-submenu-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  min-height: 28px;
  padding: var(--padding-xs)
}

.univer-menu-vertical .univer-menu-submenu-arrow,
.univer-menu-vertical-left .univer-menu-submenu-arrow,
.univer-menu-vertical-right .univer-menu-submenu-arrow,
.univer-menu-inline .univer-menu-submenu-arrow {
  position: absolute;
  right: 16px;
  display: inline-block;
  font-size: inherit;
  line-height: 1.5em;
  text-align: center;
  text-transform: none;
  text-rendering: auto;
  vertical-align: baseline
}

.univer-menu-sub.univer-menu-inline {
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none
}

.univer-menu-sub.univer-menu-inline>.univer-menu-item,
.univer-menu-sub.univer-menu-inline>.univer-menu-submenu>.univer-menu-submenu-title {
  padding-top: 8px;
  padding-right: 0;
  padding-bottom: 8px
}

.univer-menu-open-slide-up-enter,
.univer-menu-open-slide-up-appear {
  transform-origin: 0 0;
  animation-duration: .3s;
  animation-fill-mode: both;
  opacity: 0;
  animation-play-state: paused;
  animation-timing-function: cubic-bezier(.08, .82, .17, 1)
}

.univer-menu-open-slide-up-leave {
  transform-origin: 0 0;
  animation-duration: .3s;
  animation-fill-mode: both;
  opacity: 1;
  animation-play-state: paused;
  animation-timing-function: cubic-bezier(.6, .04, .98, .34)
}

.univer-menu-open-slide-up-enter.univer-menu-open-slide-up-enter-active,
.univer-menu-open-slide-up-appear.univer-menu-open-slide-up-appear-active {
  animation-name: univer-menu-open-slide-up-in;
  animation-play-state: running
}

.univer-menu-open-slide-up-leave.univer-menu-open-slide-up-leave-active {
  animation-name: univer-menu-open-slide-up-out;
  animation-play-state: running
}

@keyframes univer-menu-open-slide-up-in {
  0% {
    transform-origin: 0% 0%;
    transform: scaleY(0);
    opacity: 0
  }

  to {
    transform-origin: 0% 0%;
    transform: scaleY(1);
    opacity: 1
  }
}

@keyframes univer-menu-open-slide-up-out {
  0% {
    transform-origin: 0% 0%;
    transform: scaleY(1);
    opacity: 1
  }

  to {
    transform-origin: 0% 0%;
    transform: scaleY(0);
    opacity: 0
  }
}

.univer-menu-open-zoom-enter,
.univer-menu-open-zoom-appear {
  opacity: 0;
  animation-play-state: paused;
  animation-timing-function: cubic-bezier(.08, .82, .17, 1);
  transform-origin: 0 0;
  animation-duration: .3s;
  animation-fill-mode: both
}

.univer-menu-open-zoom-leave {
  transform-origin: 0 0;
  animation-duration: .3s;
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-timing-function: cubic-bezier(.6, .04, .98, .34)
}

.univer-menu-open-zoom-enter.univer-menu-open-zoom-enter-active,
.univer-menu-open-zoom-appear.univer-menu-open-zoom-appear-active {
  animation-name: univer-menu-open-zoom-in;
  animation-play-state: running
}

.univer-menu-open-zoom-leave.univer-menu-open-zoom-leave-active {
  animation-name: univer-menu-open-zoom-out;
  animation-play-state: running
}

@keyframes univer-menu-open-zoom-in {
  0% {
    transform: scale(0);
    opacity: 0
  }

  to {
    transform: scale(1);
    opacity: 1
  }
}

@keyframes univer-menu-open-zoom-out {
  0% {
    transform: scale(1)
  }

  to {
    transform: scale(0);
    opacity: 0
  }
}

.univer-popup {
  position: fixed;
  z-index: 1070;
  top: -9999px;
  left: -9999px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--box-shadow-base)
}

.univer-popup-enter {
  transform-origin: 0 0;
  animation-duration: .15s;
  animation-fill-mode: both;
  opacity: 0;
  animation-play-state: paused;
  animation-timing-function: cubic-bezier(.08, .82, .17, 1)
}

.univer-popup-enter-active {
  animation-name: univer-popup-slide-up-in;
  animation-play-state: running
}

.univer-popup-exit {
  transform-origin: 0 0;
  animation-duration: .15s;
  animation-fill-mode: both;
  opacity: 1;
  animation-name: univer-popup-slide-up-out;
  animation-play-state: running;
  animation-timing-function: cubic-bezier(.6, .04, .98, .34)
}

.univer-popup-exit-active {
  display: none
}

@keyframes univer-popup-slide-up-in {
  0% {
    transform-origin: 0 0;
    transform: scaleY(0);
    opacity: 0
  }

  to {
    transform-origin: 0 0;
    transform: scaleY(1);
    opacity: 1
  }
}

@keyframes univer-popup-slide-up-out {
  0% {
    transform-origin: 0 0;
    transform: scaleY(1);
    opacity: 1
  }

  to {
    transform-origin: 0 0;
    transform: scaleY(0);
    opacity: 0
  }
}

.univer-popup-mask {
  position: fixed;
  z-index: 1060;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0
}

.univer-radio {
  cursor: pointer;
  display: inline-flex;
  gap: var(--margin-xs);
  align-items: center;
  box-sizing: border-box;
  font-size: var(--font-size-sm);
  color: var(--text-color)
}

.univer-radio:hover .univer-radio-target-input:checked+.univer-radio-target-inner:after {
  background-color: rgb(var(--primary-color-hover))
}

.univer-radio:hover .univer-radio-target-inner {
  border-color: rgb(var(--primary-color-hover))
}

.univer-radio-disabled {
  cursor: not-allowed;
  color: rgb(var(--grey-300))
}

.univer-radio-disabled .univer-radio-target-input:checked+.univer-radio-target-inner:after {
  background-color: rgb(var(--grey-300))
}

.univer-radio-disabled .univer-radio-target-inner {
  border-color: rgb(var(--grey-300))
}

.univer-radio-disabled:hover .univer-radio-target-input:checked+.univer-radio-target-inner:after {
  background-color: rgb(var(--grey-300))
}

.univer-radio-disabled:hover .univer-radio-target-inner {
  border-color: rgb(var(--grey-300))
}

.univer-radio-target {
  position: relative
}

.univer-radio-target-input {
  position: absolute;
  opacity: 0
}

.univer-radio-target-input:checked+.univer-radio-target-inner:after {
  transform: scale(1);
  box-sizing: border-box;
  opacity: 1;
  background-color: rgb(var(--primary-color))
}

.univer-radio-target-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border: 1px solid rgb(var(--primary-color));
  border-radius: 50%;
  transition: all .15s
}

.univer-radio-target-inner:after {
  content: "";
  transform-origin: center center;
  transform: scale(0);
  display: block;
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  opacity: 0;
  background-color: rgb(var(--bg-color-secondary));
  border-radius: 50%;
  transition: all .15s
}

.univer-radio-group {
  display: flex;
  gap: var(--margin-sm)
}

.univer-radio-group-direction-vertical {
  flex-direction: column
}

.univer-scrollbar-container {
  position: relative;
  overflow: hidden;
  height: 100%
}

.univer-scrollbar-bar {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 100%
}

.univer-scrollbar-bar:hover .univer-scrollbar-bar-thumb:not(:active) {
  background-color: rgb(var(--scrollbar-color-hover))
}

.univer-scrollbar-bar-thumb {
  position: absolute;
  width: calc(100% - 2px);
  background-color: rgb(var(--scrollbar-color));
  border-radius: var(--border-radius-lg)
}

.univer-scrollbar-bar-thumb:active {
  background-color: rgb(var(--scrollbar-color-active))
}

.univer-scrollbar-content {
  scrollbar-width: none;
  overflow: auto;
  box-sizing: border-box;
  height: 100%;
  padding-right: 8px
}

.univer-scrollbar-content::-webkit-scrollbar {
  display: none
}

.univer-select {
  position: relative;
  display: inline-block
}

.univer-select-disabled,
.univer-select-disabled input {
  cursor: not-allowed
}

.univer-select-disabled .univer-select-selector {
  opacity: .3
}

.univer-select-show-arrow.univer-select-loading .univer-select-arrow-icon:after {
  transform: none;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  margin-top: 4px;
  border: 2px solid rgb(var(--border-color));
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-radius: 100%;
  animation: univer-select-loading-icon .5s infinite
}

.univer-select .univer-select-selection-placeholder {
  pointer-events: none;
  opacity: .4
}

.univer-select .univer-select-selection-search-input {
  font-size: var(--font-size-sm);
  color: rgb(var(--text-color));
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none
}

.univer-select .univer-select-selection-search-input::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
  appearance: none
}

.univer-select-single .univer-select-selector {
  position: relative;
  display: flex;
  box-sizing: border-box;
  height: 28px;
  padding: 0 10px;
  transition: all .15s
}

.univer-select-single .univer-select-selector .univer-select-selection-search {
  width: 100%;
  line-height: 0
}

.univer-select-single .univer-select-selector .univer-select-selection-search-input {
  width: 100%;
  height: 100%
}

.univer-select-single .univer-select-selector .univer-select-selection-item,
.univer-select-single .univer-select-selector .univer-select-selection-placeholder {
  pointer-events: none;
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
  padding: 0 18px 0 10px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--font-size-sm);
  line-height: 28px;
  display: inline-block;
  align-items: center
}

.univer-select-single:not(.univer-select-customize-input) .univer-select-selector {
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--border-radius-base)
}

.univer-select-single:not(.univer-select-customize-input) .univer-select-selector .univer-select-selection-search-input {
  width: 100%;
  padding: 0;
  border: none;
  outline: none
}

.univer-select-multiple .univer-select-selector {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--border-radius-base)
}

.univer-select-multiple .univer-select-selector .univer-select-selection-item {
  flex: none;
  margin-right: 2px;
  padding: 0 8px;
  background: #bbb;
  border-radius: 4px
}

.univer-select-multiple .univer-select-selector .univer-select-selection-item-disabled {
  cursor: not-allowed;
  opacity: .5
}

.univer-select-multiple .univer-select-selector .univer-select-selection-overflow {
  display: flex;
  flex-wrap: wrap;
  width: 100%
}

.univer-select-multiple .univer-select-selector .univer-select-selection-overflow-item {
  flex: none;
  max-width: 100%
}

.univer-select-multiple .univer-select-selector .univer-select-selection-search {
  position: relative;
  max-width: 100%
}

.univer-select-multiple .univer-select-selector .univer-select-selection-search-input,
.univer-select-multiple .univer-select-selector .univer-select-selection-search-mirror {
  box-sizing: border-box;
  padding: var(--padding-xs) var(--padding-sm)
}

.univer-select-multiple .univer-select-selector .univer-select-selection-search-mirror {
  position: none;
  z-index: 999;
  top: 0;
  left: 0;
  white-space: nowrap;
  visibility: hidden
}

.univer-select-multiple .univer-select-selector .univer-select-selection-search-input {
  width: 100%;
  padding: 0;
  border: none;
  outline: none
}

.univer-select-borderless:not(.univer-select-customize-input) .univer-select-selector {
  border-color: transparent
}

.univer-select-borderless.univer-select-focused .univer-select-selector,
.univer-select-borderless.univer-select:hover .univer-select-selector {
  border-color: transparent !important
}

.univer-select-allow-clear.univer-select-multiple .univer-select-selector {
  padding-right: 20px
}

.univer-select-allow-clear .univer-select-clear {
  position: absolute;
  top: 0;
  right: 20px
}

.univer-select-show-arrow.univer-select-multiple .univer-select-selector {
  padding-right: 20px
}

.univer-select-show-arrow .univer-select-arrow {
  pointer-events: none;
  position: absolute;
  top: 0;
  right: var(--margin-sm);
  display: flex;
  align-items: center;
  height: 100%;
  font-size: var(--font-size-xxs);
  color: rgb(var(--text-color-secondary))
}

.univer-select-show-arrow .univer-select-arrow-icon:after {
  content: "";
  transform: translateY(5px);
  display: inline-block;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: rgb(var(--border-color))
}

.univer-select-focused .univer-select-selector,
.univer-select:hover .univer-select-selector {
  border-color: rgb(var(--primary-color)) !important
}

.univer-select-dropdown {
  position: absolute;
  z-index: 1070;
  background: rgb(var(--bg-color-secondary));
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--border-radius-base);
  box-shadow: var(--box-shadow-base)
}

.univer-select-dropdown-hidden {
  display: none
}

.univer-select-item {
  cursor: pointer;
  padding: var(--padding-sm) var(--padding-base);
  font-size: var(--font-size-sm)
}

.univer-select-item-group {
  padding: 0
}

.univer-select-item-group:not(:first-child) {
  border-top: 1px solid rgb(var(--border-color))
}

.univer-select-item-option {
  position: relative;
  transition: all .15s
}

.univer-select-item-option .univer-select-item-option-state {
  pointer-events: none;
  position: absolute;
  top: 4px;
  right: 0
}

.univer-select-item-option-active {
  background: #ddd
}

.univer-select-item-option-disabled {
  color: rgb(var(--text-color-tertiary))
}

.univer-select-item-empty {
  padding: var(--padding-xs) 0;
  color: rgb(var(--text-color-tertiary));
  font-size: var(--font-size-sm);
  text-align: center
}

.univer-select-selection__choice-zoom {
  transition: all .3s
}

.univer-select-selection__choice-zoom-appear {
  transform: scale(.5);
  opacity: 0
}

.univer-select-selection__choice-zoom-appear.univer-select-selection__choice-zoom-appear-active,
.univer-select-selection__choice-zoom-leave {
  transform: scale(1);
  opacity: 1
}

.univer-select-selection__choice-zoom-leave.univer-select-selection__choice-zoom-leave-active {
  transform: scale(.5);
  opacity: 0
}

.univer-select-dropdown-slide-up-enter,
.univer-select-dropdown-slide-up-appear {
  transform-origin: 0 0;
  animation-duration: .3s;
  animation-fill-mode: both;
  opacity: 0;
  animation-play-state: paused;
  animation-timing-function: cubic-bezier(.08, .82, .17, 1)
}

.univer-select-dropdown-slide-up-leave {
  transform-origin: 0 0;
  animation-duration: .3s;
  animation-fill-mode: both;
  opacity: 1;
  animation-play-state: paused;
  animation-timing-function: cubic-bezier(.6, .04, .98, .34)
}

.univer-select-dropdown-slide-up-enter.univer-select-dropdown-slide-up-enter-active.univer-select-dropdown-placement-bottomLeft,
.univer-select-dropdown-slide-up-appear.univer-select-dropdown-slide-up-appear-active.univer-select-dropdown-placement-bottomLeft,
.univer-select-dropdown-slide-up-enter.univer-select-dropdown-slide-up-enter-active.univer-select-dropdown-placement-bottomRight,
.univer-select-dropdown-slide-up-appear.univer-select-dropdown-slide-up-appear-active.univer-select-dropdown-placement-bottomRight {
  animation-name: univer-select-dropdown-slide-up-in;
  animation-play-state: running
}

.univer-select-dropdown-slide-up-leave.univer-select-dropdown-slide-up-leave-active.univer-select-dropdown-placement-bottomLeft,
.univer-select-dropdown-slide-up-leave.univer-select-dropdown-slide-up-leave-active.univer-select-dropdown-placement-bottomRight {
  animation-name: univer-select-dropdown-slide-up-out;
  animation-play-state: running
}

.univer-select-dropdown-slide-up-enter.univer-select-dropdown-slide-up-enter-active.univer-select-dropdown-placement-topLeft,
.univer-select-dropdown-slide-up-appear.univer-select-dropdown-slide-up-appear-active.univer-select-dropdown-placement-topLeft,
.univer-select-dropdown-slide-up-enter.univer-select-dropdown-slide-up-enter-active.univer-select-dropdown-placement-topRight,
.univer-select-dropdown-slide-up-appear.univer-select-dropdown-slide-up-appear-active.univer-select-dropdown-placement-topRight {
  animation-name: univer-select-dropdown-slide-down-in;
  animation-play-state: running
}

.univer-select-dropdown-slide-up-leave.univer-select-dropdown-slide-up-leave-active.univer-select-dropdown-placement-topLeft,
.univer-select-dropdown-slide-up-leave.univer-select-dropdown-slide-up-leave-active.univer-select-dropdown-placement-topRight {
  animation-name: univer-select-dropdown-slide-down-out;
  animation-play-state: running
}

@keyframes univer-select-dropdown-slide-up-in {
  0% {
    transform-origin: 0% 0%;
    transform: scaleY(0);
    opacity: 0
  }

  to {
    transform-origin: 0% 0%;
    transform: scaleY(1);
    opacity: 1
  }
}

@keyframes univer-select-dropdown-slide-up-out {
  0% {
    transform-origin: 0% 0%;
    transform: scaleY(1);
    opacity: 1
  }

  to {
    transform-origin: 0% 0%;
    transform: scaleY(0);
    opacity: 0
  }
}

@keyframes univer-select-dropdown-slide-down-in {
  0% {
    transform-origin: 100% 100%;
    transform: scaleY(0);
    opacity: 0
  }

  to {
    transform-origin: 100% 100%;
    transform: scaleY(1);
    opacity: 1
  }
}

@keyframes univer-select-dropdown-slide-down-out {
  0% {
    transform-origin: 100% 100%;
    transform: scaleY(1);
    opacity: 1
  }

  to {
    transform-origin: 100% 100%;
    transform: scaleY(0);
    opacity: 0
  }
}

@keyframes univer-select-loading-icon {
  0% {
    transform: rotate(0)
  }

  to {
    transform: rotate(360deg)
  }
}

.univer-select-list {
  overflow-y: auto;
  display: grid;
  grid-gap: var(--margin-xs);
  gap: var(--margin-xs);
  max-height: 348px;
  margin: 0;
  padding: var(--padding-lg) var(--padding-base);
  list-style: none;
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--border-radius-base)
}

.univer-select-list-item {
  font-size: var(--font-size-sm)
}

.univer-select-list-item>a {
  cursor: pointer;
  position: relative;
  display: block;
  padding: var(--padding-xs) 28px;
  border-radius: var(--border-radius-base);
  transition: all .15s
}

.univer-select-list-item>a:hover {
  background-color: rgb(var(--bg-color-hover))
}

.univer-select-list-item-icon {
  position: absolute;
  top: 50%;
  left: var(--margin-xxs);
  transform: translateY(-50%);
  display: inline-flex;
  font-size: var(--font-size-lg);
  color: rgb(var(--success-color))
}

.univer-select-list-item-select>a {
  background-color: rgb(var(--bg-color))
}

.univer-tree {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  position: relative;
  color: rgb(var(--text-color))
}

.univer-tree-icon {
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--padding-lg));
  transform: translateY(-50%) rotate(-90deg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px
}

.univer-tree-icon-expand {
  transform: translateY(-50%)
}

.univer-tree-list {
  margin: 0;
  padding: 0;
  list-style: none;
  height: 100%
}

.univer-tree-list .univer-tree-list {
  overflow: hidden;
  height: 0
}

.univer-tree-list .univer-tree-list-expand {
  height: inherit
}

.univer-tree-list-item {
  position: relative;
  padding-left: var(--padding-xl);
  font-size: 13px
}

.univer-tree-list-item>a {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer
}

.univer-tree-list-item-title {
  display: inline-block;
  height: 100%;
  margin: 0 4px;
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.univer-tree-list-item-content {
  margin: 4px 0;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center
}

.univer-tree-list-item-content-selected-icon {
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--padding-xl));
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg)
}

.univer-switch-wrapper {
  height: 16px
}

.univer-switch-wrapper .univer-switch {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 16px
}

.univer-switch-wrapper .univer-switch input {
  opacity: 0
}

.univer-switch-wrapper .univer-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(var(--bg-color-hover));
  transition: background-color .2s;
  border-radius: 16px
}

.univer-switch-wrapper .univer-slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 2px;
  bottom: 2px;
  background-color: rgb(var(--color-white));
  transition: transform .2s;
  border-radius: 50%
}

.univer-switch-wrapper input:checked+.univer-slider {
  background-color: rgb(var(--primary-color))
}

.univer-switch-wrapper input:checked+.univer-slider:before {
  transform: translate(12px)
}

.univer-theme {
  color: rgb(var(--text-color));
  font-family: Inter, -apple-system, BlinkMacSystemFont, PingFang SC, Hiragino Sans GB, noto sans, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased
}

.univer-render-canvas::-moz-selection {
  pointer-events: none
}

.univer-render-canvas::selection {
  pointer-events: none
}

.react-grid-layout {
  position: relative;
  transition: height .2s ease
}

.react-grid-item {
  transition: all .2s ease;
  transition-property: left, top, width, height
}

.react-grid-item img {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none
}

.react-grid-item.cssTransforms {
  transition-property: transform, width, height
}

.react-grid-item.resizing {
  transition: none;
  z-index: 1;
  will-change: width, height
}

.react-grid-item.react-draggable-dragging {
  transition: none;
  z-index: 3;
  will-change: transform
}

.react-grid-item.dropping {
  visibility: hidden
}

.react-grid-item.react-grid-placeholder {
  background: red;
  opacity: .2;
  transition-duration: .1s;
  z-index: 2;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none
}

.react-grid-item.react-grid-placeholder.placeholder-resizing {
  transition: none
}

.react-grid-item>.react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px
}

.react-grid-item>.react-resizable-handle:after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 5px;
  height: 5px;
  border-right: 2px solid rgba(0, 0, 0, .4);
  border-bottom: 2px solid rgba(0, 0, 0, .4)
}

.react-resizable-hide>.react-resizable-handle {
  display: none
}

.react-grid-item>.react-resizable-handle.react-resizable-handle-sw {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
  transform: rotate(90deg)
}

.react-grid-item>.react-resizable-handle.react-resizable-handle-se {
  bottom: 0;
  right: 0;
  cursor: se-resize
}

.react-grid-item>.react-resizable-handle.react-resizable-handle-nw {
  top: 0;
  left: 0;
  cursor: nw-resize;
  transform: rotate(180deg)
}

.react-grid-item>.react-resizable-handle.react-resizable-handle-ne {
  top: 0;
  right: 0;
  cursor: ne-resize;
  transform: rotate(270deg)
}

.react-grid-item>.react-resizable-handle.react-resizable-handle-w,
.react-grid-item>.react-resizable-handle.react-resizable-handle-e {
  top: 50%;
  margin-top: -10px;
  cursor: ew-resize
}

.react-grid-item>.react-resizable-handle.react-resizable-handle-w {
  left: 0;
  transform: rotate(135deg)
}

.react-grid-item>.react-resizable-handle.react-resizable-handle-e {
  right: 0;
  transform: rotate(315deg)
}

.react-grid-item>.react-resizable-handle.react-resizable-handle-n,
.react-grid-item>.react-resizable-handle.react-resizable-handle-s {
  left: 50%;
  margin-left: -10px;
  cursor: ns-resize
}

.react-grid-item>.react-resizable-handle.react-resizable-handle-n {
  top: 0;
  transform: rotate(225deg)
}

.react-grid-item>.react-resizable-handle.react-resizable-handle-s {
  bottom: 0;
  transform: rotate(45deg)
}

.univer-date-range-picker {
  position: relative;
  width: 280px;
  height: 32px;
  border: 1px solid rgb(var(--border-color));
  border-radius: 4px;
  box-sizing: border-box;
  display: inline-flex
}

.univer-date-range-picker-rtl {
  direction: rtl
}

.univer-date-range-picker-invalid {
  box-shadow: 0 0 2px red
}

.univer-date-range-picker-panel {
  display: inline-block;
  vertical-align: top
}

.univer-date-range-picker-panel-focused {
  border-color: #00f
}

.univer-date-range-picker-panel-rtl {
  direction: rtl
}

.univer-date-range-picker-suffix-icon {
  position: absolute;
  top: 50%;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 8px;
  color: rgb(var(--text-color-secondary));
  transform: translateY(-50%);
  cursor: pointer
}

.univer-date-range-picker-decade-panel,
.univer-date-range-picker-year-panel,
.univer-date-range-picker-month-panel,
.univer-date-range-picker-week-panel,
.univer-date-range-picker-date-panel,
.univer-date-range-picker-time-panel {
  display: flex;
  flex-direction: column
}

.univer-date-range-picker-decade-panel table,
.univer-date-range-picker-year-panel table,
.univer-date-range-picker-month-panel table,
.univer-date-range-picker-week-panel table,
.univer-date-range-picker-date-panel table,
.univer-date-range-picker-time-panel table {
  text-align: center;
  border-collapse: collapse
}

.univer-date-range-picker-header {
  margin-bottom: var(--margin-base);
  display: flex;
  align-items: center
}

.univer-date-range-picker-header>* {
  flex: none
}

.univer-date-range-picker-header-view {
  height: 16px;
  flex: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--margin-xs)
}

.univer-date-range-picker-header-view>button {
  padding: 0;
  border: 0;
  background-color: transparent;
  cursor: pointer
}

.univer-date-range-picker-header-super-prev-btn,
.univer-date-range-picker-header-super-next-btn,
.univer-date-range-picker-header-prev-btn,
.univer-date-range-picker-header-next-btn {
  width: 16px;
  height: 16px;
  padding: 0;
  line-height: 16px;
  font-size: var(--font-size-lg);
  border: none;
  background-color: transparent;
  cursor: pointer
}

.univer-date-range-picker-cell {
  color: #aaa
}

.univer-date-range-picker-cell-disabled {
  opacity: .2
}

.univer-date-range-picker-cell-inner {
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  height: 24px;
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 24px;
  background: transparent;
  border: 0;
  border-radius: var(--border-radius-base);
  outline: none;
  cursor: pointer;
  transition: background .3s
}

.univer-date-range-picker-cell-in-view {
  color: #333
}

.univer-date-range-picker-cell-in-range>.univer-date-range-picker-cell-inner {
  background: #0000ff0d
}

.univer-date-range-picker-cell-hover>.univer-date-range-picker-cell-inner {
  background: rgb(var(--bg-color))
}

.univer-date-range-picker-cell-range-hover-start,
.univer-date-range-picker-cell-range-hover-end,
.univer-date-range-picker-cell-range-hover {
  position: relative
}

.univer-date-range-picker-cell-range-hover-start:after,
.univer-date-range-picker-cell-range-hover-end:after,
.univer-date-range-picker-cell-range-hover:after {
  position: absolute;
  top: 3px;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid green;
  border-right: 0;
  border-left: 0;
  content: "";
  pointer-events: none
}

.univer-date-range-picker-cell-range-hover-start:after {
  border-left: 1px solid green !important
}

.univer-date-range-picker-cell-range-hover-end:after {
  border-right: 1px solid green !important
}

.univer-date-range-picker-cell-today>.univer-date-range-picker-cell-inner {
  border: 1px solid rgb(var(--primary-color))
}

.univer-date-range-picker-cell-range-start>.univer-date-range-picker-cell-inner,
.univer-date-range-picker-cell-range-end>.univer-date-range-picker-cell-inner,
.univer-date-range-picker-cell-selected>.univer-date-range-picker-cell-inner {
  color: #fff;
  background: rgb(var(--primary-color))
}

.univer-date-range-picker-presets {
  background: #ccf
}

.univer-date-range-picker-presets ul {
  margin: 0;
  padding: 0;
  list-style: none
}

.univer-date-range-picker-now {
  padding-top: var(--padding-base)
}

.univer-date-range-picker-now-btn {
  font-size: var(--font-size-xs);
  color: rgb(var(--primary-color));
  cursor: pointer
}

.univer-date-range-picker-footer,
.univer-date-range-picker-picker-footer {
  margin-top: var(--margin-sm);
  border-top: 1px solid rgb(var(--border-color))
}

.univer-date-range-picker-ranges {
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none
}

.univer-date-range-picker-ranges>li {
  text-align: center;
  display: block
}

.univer-date-range-picker-ok {
  float: right
}

.univer-date-range-picker-decade-panel .univer-date-range-picker-content tbody {
  display: grid;
  grid-gap: 20px;
  gap: 20px
}

.univer-date-range-picker-decade-panel .univer-date-range-picker-cell-inner {
  width: 78px;
  height: 24px
}

.univer-date-range-picker-year-panel .univer-date-range-picker-content tbody,
.univer-date-range-picker-month-panel .univer-date-range-picker-content tbody {
  display: grid;
  grid-gap: 20px;
  gap: 20px
}

.univer-date-range-picker-year-panel .univer-date-range-picker-cell-inner,
.univer-date-range-picker-month-panel .univer-date-range-picker-cell-inner {
  width: 48px;
  height: 24px
}

.univer-date-range-picker-week-panel-row:hover .univer-date-range-picker-cell {
  background: red
}

.univer-date-range-picker-week-panel-row-selected .univer-date-range-picker-cell {
  background: #0000ff4d
}

.univer-date-range-picker-week-panel-row-range-hover .univer-date-range-picker-cell {
  background: #00ff001a
}

.univer-date-range-picker-week-panel-row-range-start .univer-date-range-picker-cell,
.univer-date-range-picker-week-panel-row-range-end .univer-date-range-picker-cell {
  background: #00ff004d
}

.univer-date-range-picker-week-panel .univer-date-range-picker-cell,
.univer-date-range-picker-week-panel .univer-date-range-picker-cell-inner {
  width: 24px
}

.univer-date-range-picker-week-panel .univer-date-range-picker-cell-week {
  color: #999;
  font-weight: 700;
  font-size: 12px
}

.univer-date-range-picker-week-panel .univer-date-range-picker-cell:hover>.univer-date-range-picker-cell-inner,
.univer-date-range-picker-week-panel .univer-date-range-picker-cell-selected>.univer-date-range-picker-cell-inner {
  background: transparent
}

.univer-date-range-picker-date-panel .univer-date-range-picker-cell-inner {
  width: 24px;
  height: 24px;
  font-size: var(--font-size-xs)
}

.univer-date-range-picker-time-panel {
  width: auto
}

.univer-date-range-picker-time-panel .univer-date-range-picker-content {
  position: relative;
  display: flex;
  max-height: 200px
}

.univer-date-range-picker-time-panel-column-title {
  font-size: 14px;
  line-height: 24px
}

.univer-date-range-picker-time-panel-column {
  flex: auto;
  width: 50px;
  margin: 0;
  padding: 0 0 180px;
  overflow-x: hidden;
  overflow-y: hidden;
  font-size: 12px;
  text-align: left;
  list-style: none;
  transition: background .3s
}

.univer-date-range-picker-time-panel-column-active {
  background: #0000ff1a
}

.univer-date-range-picker-time-panel-column:hover {
  overflow-y: auto
}

.univer-date-range-picker-time-panel-column>li {
  width: 50px;
  margin: 0;
  padding: 0;
  cursor: pointer
}

.univer-date-range-picker-time-panel-column>li.univer-date-range-picker-time-panel-cell-disabled {
  opacity: .5
}

.univer-date-range-picker-time-panel-column>li.univer-date-range-picker-time-panel-cell-selected {
  background: #0000ff80
}

.univer-date-range-picker-time-panel-column>li .univer-date-range-picker-time-panel-cell-inner {
  display: block;
  width: 100%;
  height: 24px;
  margin: 0;
  color: #333;
  line-height: 24px;
  text-align: center
}

.univer-date-range-picker-panel-rtl .univer-date-range-picker-time-panel-column>li .univer-date-range-picker-time-panel-cell-inner {
  padding: 0 12px 0 0;
  text-align: right
}

.univer-date-range-picker-datetime-panel {
  display: flex
}

.univer-date-range-picker-datetime-panel .univer-date-range-picker-time-panel {
  border-left: 1px solid #999
}

.univer-date-range-picker-datetime-panel .univer-date-range-picker-date-panel,
.univer-date-range-picker-datetime-panel .univer-date-range-picker-time-panel {
  transition: opacity .3s
}

.univer-date-range-picker-datetime-panel-active .univer-date-range-picker-date-panel,
.univer-date-range-picker-datetime-panel-active .univer-date-range-picker-time-panel {
  opacity: .3
}

.univer-date-range-picker-datetime-panel-active .univer-date-range-picker-date-panel-active,
.univer-date-range-picker-datetime-panel-active .univer-date-range-picker-time-panel-active {
  opacity: 1
}

.univer-date-range-picker-input {
  position: relative;
  display: inline-flex;
  width: 100%
}

.univer-date-range-picker-rtl .univer-date-range-picker-input {
  text-align: right
}

.univer-date-range-picker-input-active>input {
  background: #0000ff0d
}

.univer-date-range-picker-input>input {
  width: 100%;
  padding-left: 12px;
  border: none;
  border-radius: var(--border-radius-base);
  box-sizing: border-box
}

.univer-date-range-picker-input>input::-moz-placeholder {
  opacity: 1
}

.univer-date-range-picker-input>input::placeholder {
  color: #bfbfbf
}

.univer-date-range-picker-input>input:-moz-placeholder {
  text-overflow: ellipsis
}

.univer-date-range-picker-input>input:placeholder-shown {
  text-overflow: ellipsis
}

.univer-date-range-picker-input>input:focus {
  outline: none
}

.univer-date-range-picker-input-placeholder>input {
  color: #bfbfbf
}

.univer-date-range-picker-clear {
  position: absolute;
  top: 7px;
  right: 8px;
  cursor: pointer
}

.univer-date-range-picker-rtl .univer-date-range-picker-clear {
  right: auto;
  left: 4px
}

.univer-date-range-picker-clear-btn {
  width: 16px;
  height: 16px;
  text-align: center;
  line-height: 16px;
  background-color: rgb(var(--grey-500));
  border-radius: 50%;
  display: block
}

.univer-date-range-picker-clear-btn:before {
  content: "脳";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  bottom: 0;
  color: #fff;
  font-size: 16px;
  line-height: 16px
}

.univer-date-range-picker-dropdown {
  position: absolute;
  pointer-events: none
}

.univer-date-range-picker-dropdown-range {
  padding: 10px 0
}

.univer-date-range-picker-dropdown-hidden {
  display: none
}

.univer-date-range-picker-dropdown-placement-topLeft .univer-date-range-picker-range-arrow,
.univer-date-range-picker-dropdown-placement-topRight .univer-date-range-picker-range-arrow {
  bottom: 6px;
  transform: rotate(135deg)
}

.univer-date-range-picker-dropdown-placement-bottomLeft .univer-date-range-picker-range-arrow,
.univer-date-range-picker-dropdown-placement-bottomright .univer-date-range-picker-range-arrow {
  top: 6px;
  transform: rotate(-45deg)
}

.univer-date-range-picker-dropdown .univer-date-range-picker-range-arrow {
  position: absolute;
  left: 10px;
  z-index: 1;
  width: 10px;
  height: 10px;
  margin-left: 10px;
  transition: all .3s
}

.univer-date-range-picker-dropdown-rtl.univer-date-range-picker-dropdown .univer-date-range-picker-range-arrow {
  right: 10px;
  left: auto;
  margin-right: 10px;
  margin-left: 0
}

.univer-date-range-picker-dropdown .univer-date-range-picker-range-arrow:before,
.univer-date-range-picker-dropdown .univer-date-range-picker-range-arrow:after {
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  content: ""
}

.univer-date-range-picker-dropdown-rtl.univer-date-range-picker-dropdown .univer-date-range-picker-range-arrow:before,
.univer-date-range-picker-dropdown-rtl.univer-date-range-picker-dropdown .univer-date-range-picker-range-arrow:after {
  right: 50%;
  left: auto;
  transform: translate(50%, -50%)
}

.univer-date-range-picker-dropdown .univer-date-range-picker-range-arrow:before {
  width: 10px;
  height: 10px;
  border: 5px solid blue;
  border-color: blue blue transparent transparent
}

.univer-date-range-picker-dropdown .univer-date-range-picker-range-arrow:after {
  width: 8px;
  height: 8px;
  border: 8px / 2 solid blue;
  border-color: rgb(var(--bg-color-secondary)) rgb(var(--bg-color-secondary)) transparent transparent
}

.univer-date-range-picker-range {
  position: relative;
  display: inline-flex
}

.univer-date-range-picker-range-wrapper {
  display: flex
}

.univer-date-range-picker-range .univer-date-range-picker-active-bar {
  bottom: 0;
  height: 3px;
  background: rgb(var(--primary-color));
  opacity: 0;
  transition: all .3s;
  pointer-events: none
}

.univer-date-range-picker-range.univer-date-range-picker-focused .univer-date-range-picker-active-bar {
  opacity: 1
}

.univer-date-range-picker-range-separator {
  height: 100%;
  color: rgb(var(--text-color-tertiary));
  display: inline-flex;
  align-items: center
}

.univer-date-range-picker-panel-container {
  display: inline-block;
  vertical-align: top;
  transition: margin .3s;
  pointer-events: all
}

.univer-date-range-picker-panel-layout {
  padding: var(--padding-lg);
  background: rgb(var(--bg-color-secondary));
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--border-radius-lg);
  box-shadow: var(--box-shadow-base);
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  overflow: hidden
}

.univer-date-range-picker-selector {
  width: 100%
}

.univer-date-range-picker-selection-overflow {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid green
}

.univer-date-range-picker-selection-overflow-item {
  flex: none;
  max-width: 100%
}

.univer-date-range-picker-selection-item {
  border: 1px solid blue
}

.univer-date-range-picker-multiple-input {
  width: 10px;
  opacity: .1
}

.univer-pointer-events-none {
  pointer-events: none
}

.univer-pointer-events-auto {
  pointer-events: auto
}

.univer-invisible {
  visibility: hidden
}

.univer-fixed {
  position: fixed
}

.univer-sticky {
  position: sticky
}

.univer-left-1\/2 {
  left: 50%
}

.univer-left-\[-9999px\] {
  left: -9999px
}

.univer-right-2 {
  right: .5rem
}

.univer-top-1\/2 {
  top: 50%
}

.univer-top-\[-99999px\] {
  top: -99999px
}

.univer-top-\[-9999px\] {
  top: -9999px
}

.univer-z-\[-1\] {
  z-index: -1
}

.univer-z-\[1020\] {
  z-index: 1020
}

.univer-z-\[1\] {
  z-index: 1
}

.univer-mx-auto {
  margin-left: auto;
  margin-right: auto
}

.univer-line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1
}

.univer-hidden {
  display: none
}

.univer-h-0 {
  height: 0px
}

.univer-h-0\.5 {
  height: .125rem
}

.univer-h-10 {
  height: 2.5rem
}

.univer-h-6 {
  height: 1.5rem
}

.univer-min-h-full {
  min-height: 100%
}

.univer-w-0 {
  width: 0px
}

.univer-w-0\.5 {
  width: .125rem
}

.univer-w-32 {
  width: 8rem
}

.univer-w-5 {
  width: 1.25rem
}

.univer-w-7 {
  width: 1.75rem
}

.univer-w-96 {
  width: 24rem
}

.univer-w-\[55px\] {
  width: 55px
}

.univer-min-w-6 {
  min-width: 1.5rem
}

.univer-max-w-\[var\(--radix-popper-available-width\)\] {
  max-width: var(--radix-popper-available-width)
}

.-univer-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(-50%, var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.-univer-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), -50%) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.univer-translate-x-0 {
  --tw-translate-x: 0px;
  transform: translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.univer-translate-x-full {
  --tw-translate-x: 100%;
  transform: translate(100%, var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.univer-select-none {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.univer-grid-rows-\[auto_1fr_auto\] {
  grid-template-rows: auto 1fr auto
}

.univer-flex-wrap {
  flex-wrap: wrap
}

.univer-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.univer-rounded-r {
  border-top-right-radius: .25rem;
  border-bottom-right-radius: .25rem
}

.univer-border-l {
  border-left-width: 1px
}

.univer-border-b-gray-200 {
  --tw-border-opacity: 1;
  border-bottom-color: #e3e5ea;
  border-bottom-color: rgba(227, 229, 234, var(--tw-border-opacity, 1))
}

.\!univer-bg-gray-200 {
  --tw-bg-opacity: 1 !important;
  background-color: #e3e5ea !important;
  background-color: rgba(227, 229, 234, var(--tw-bg-opacity, 1)) !important
}

.\!univer-bg-primary-500 {
  --tw-bg-opacity: 1 !important;
  background-color: #466af7 !important;
  background-color: rgba(70, 106, 247, var(--tw-bg-opacity, 1)) !important
}

.univer-bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: #f9fafb;
  background-color: rgba(249, 250, 251, var(--tw-bg-opacity, 1))
}

.univer-bg-primary-500 {
  --tw-bg-opacity: 1;
  background-color: #466af7;
  background-color: rgba(70, 106, 247, var(--tw-bg-opacity, 1))
}

.univer-px-4 {
  padding-left: 1rem;
  padding-right: 1rem
}

.univer-py-0\.5 {
  padding-top: .125rem;
  padding-bottom: .125rem
}

.univer-pb-2 {
  padding-bottom: .5rem
}

.univer-pr-5 {
  padding-right: 1.25rem
}

.univer-text-base {
  font-size: 1rem;
  line-height: 1.5rem
}

.univer-leading-6 {
  line-height: 1.5rem
}

.univer-text-gray-100 {
  --tw-text-opacity: 1;
  color: #eeeff1;
  color: rgba(238, 239, 241, var(--tw-text-opacity, 1))
}

.univer-text-gray-200 {
  --tw-text-opacity: 1;
  color: #e3e5ea;
  color: rgba(227, 229, 234, var(--tw-text-opacity, 1))
}

.univer-text-gray-800 {
  --tw-text-opacity: 1;
  color: #181c2a;
  color: rgba(24, 28, 42, var(--tw-text-opacity, 1))
}

.univer-underline {
  text-decoration-line: underline
}

.univer-outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px
}

.univer-transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .15s
}

.univer-duration-300 {
  transition-duration: .3s
}

.univer-scrollbar-track-gray-50 {
  --scrollbar-track: #F9FAFB !important
}

@keyframes enter {
  0% {
    opacity: 1;
    opacity: var(--tw-enter-opacity, 1);
    transform: translateZ(0) scaleZ(1) rotate(0);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))
  }
}

@keyframes exit {
  to {
    opacity: 1;
    opacity: var(--tw-exit-opacity, 1);
    transform: translateZ(0) scaleZ(1) rotate(0);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))
  }
}

.univer-animate-in {
  animation-name: enter;
  animation-duration: .15s;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial
}

.univer-fade-in {
  --tw-enter-opacity: 0
}

.univer-slide-in-from-top-full {
  --tw-enter-translate-y: -100%
}

.univer-duration-300 {
  animation-duration: .3s
}

.last\:univer-border-b-0:last-child {
  border-bottom-width: 0px
}

.hover\:\!univer-bg-primary-500:hover {
  --tw-bg-opacity: 1 !important;
  background-color: #466af7 !important;
  background-color: rgba(70, 106, 247, var(--tw-bg-opacity, 1)) !important
}

.hover\:univer-bg-gray-200:hover {
  --tw-bg-opacity: 1;
  background-color: #e3e5ea;
  background-color: rgba(227, 229, 234, var(--tw-bg-opacity, 1))
}

.hover\:univer-bg-gray-300:hover {
  --tw-bg-opacity: 1;
  background-color: #cdd0d8;
  background-color: rgba(205, 208, 216, var(--tw-bg-opacity, 1))
}

.focus\:univer-bg-white:focus {
  --tw-bg-opacity: 1;
  background-color: #fff;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity, 1))
}

.\[\&\:disabled\]\:univer-cursor-not-allowed:disabled {
  cursor: not-allowed
}

.\[\&\:disabled\]\:univer-text-gray-200:disabled {
  --tw-text-opacity: 1;
  color: #e3e5ea;
  color: rgba(227, 229, 234, var(--tw-text-opacity, 1))
}

.\[\&\:disabled\]\:hover\:univer-bg-transparent:hover:disabled {
  background-color: transparent
}

.\[\&\>\*\:last-child\:after\]\:univer-absolute>*:last-child:after {
  position: absolute
}

.\[\&\>\*\:last-child\:after\]\:-univer-right-2>*:last-child:after {
  right: -.5rem
}

.\[\&\>\*\:last-child\:after\]\:univer-top-1\/2>*:last-child:after {
  top: 50%
}

.\[\&\>\*\:last-child\:after\]\:univer-h-5>*:last-child:after {
  height: 1.25rem
}

.\[\&\>\*\:last-child\:after\]\:univer-w-px>*:last-child:after {
  width: 1px
}

.\[\&\>\*\:last-child\:after\]\:-univer-translate-y-1\/2>*:last-child:after {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), -50%) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.\[\&\>\*\:last-child\:after\]\:univer-translate-x-\[3px\]>*:last-child:after {
  --tw-translate-x: 3px;
  transform: translate(3px, var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.\[\&\>\*\:last-child\:after\]\:univer-bg-gray-200>*:last-child:after {
  --tw-bg-opacity: 1;
  background-color: #e3e5ea;
  background-color: rgba(227, 229, 234, var(--tw-bg-opacity, 1))
}

.\[\&\>\*\:last-child\:after\]\:univer-content-\[\'\'\]>*:last-child:after {
  --tw-content: "";
  content: "";
  content: var(--tw-content)
}

.\[\&\>\*\:last-child\]\:univer-relative>*:last-child {
  position: relative
}

.\[\&\>\*\]\:univer-inline-flex>* {
  display: inline-flex
}

.\[\&\>\*\]\:univer-h-6>* {
  height: 1.5rem
}

.\[\&\>\*\]\:univer-items-center>* {
  align-items: center
}

.\[\&\>\*\]\:univer-rounded>* {
  border-radius: .25rem
}

.\[\&\>\*\]\:univer-px-1>* {
  padding-left: .25rem;
  padding-right: .25rem
}

.\[\&\>\*\]\:univer-transition-colors>* {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .15s
}

.hover\:\[\&\>\*\]\:univer-bg-gray-300>*:hover {
  --tw-bg-opacity: 1;
  background-color: #cdd0d8;
  background-color: rgba(205, 208, 216, var(--tw-bg-opacity, 1))
}

.\[\&\>li\]\:univer-border-0>li {
  border-width: 0px
}

.\[\&\>li\]\:univer-border-b>li {
  border-bottom-width: 1px
}

.\[\&\>li\]\:univer-border-solid>li {
  border-style: solid
}

.\[\&\>li\]\:univer-border-b-gray-200>li {
  --tw-border-opacity: 1;
  border-bottom-color: #e3e5ea;
  border-bottom-color: rgba(227, 229, 234, var(--tw-border-opacity, 1))
}

.\[\&_input\:focus\]\:\!univer-ring-0 input:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0)) !important
}

.\[\&_input\]\:univer-h-6 input {
  height: 1.5rem
}

.\[\&_input\]\:univer-w-7 input {
  width: 1.75rem
}

.\[\&_input\]\:univer-border-none input {
  border-style: none
}

.\[\&_input\]\:univer-bg-transparent input {
  background-color: transparent
}

.\[\&_input\]\:univer-p-0 input {
  padding: 0
}

.\[\&_input\]\:univer-text-\[13px\] input {
  font-size: 13px
}

.univer-slider {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  display: flex;
  gap: var(--margin-xxs);
  align-items: center
}

.univer-slider-disabled {
  cursor: not-allowed
}

.univer-slider-disabled .univer-slider-rail {
  background-color: rgb(var(--grey-300))
}

.univer-slider-disabled .univer-slider-handle {
  background-color: rgb(var(--grey-300));
  box-shadow: none
}

.univer-slider-disabled .univer-slider-handle:hover {
  cursor: not-allowed;
  background-color: rgb(var(--grey-300))
}

.univer-slider-disabled .univer-slider-reset-point {
  cursor: not-allowed
}

.univer-slider-disabled .univer-slider-value:hover {
  cursor: not-allowed;
  background-color: rgb(var(--grey-300))
}

.univer-slider-disabled .univer-slider-value {
  pointer-events: none;
  color: rgb(var(--grey-300))
}

.univer-slider-disabled .univer-slider-value:hover {
  background-color: transparent
}

.univer-slider-rail {
  position: relative;
  width: 116px;
  height: 2px;
  padding: 0 6px;
  background-color: rgb(var(--text-color-secondary));
  border-radius: 15px
}

.univer-slider-inner-rail {
  position: relative;
  height: 2px
}

.univer-slider-handle {
  cursor: pointer;
  position: absolute;
  top: calc(50% - 6px);
  transform: translate(-50%);
  width: 12px;
  height: 12px;
  background-color: rgb(var(--color-white));
  border-radius: 50%;
  box-shadow: 0 0 6px #0000001a;
  transition: background .2s
}

.univer-slider-handle:hover {
  background-color: rgb(var(--border-color));
  box-shadow: none
}

.univer-menu-item-no-hover,
.univer-menu-item-no-hover.univer-menu-item-active {
  background: none
}

.univer-menu-item-activated {
  background-color: rgb(var(--bg-color-hover))
}

.univer-menu-item-content {
  display: inline-flex;
  gap: var(--margin-xs);
  align-items: center
}

.univer-menu-item-selectable {
  position: relative;
  padding-left: var(--padding-xl)
}

.univer-menu-item-selectable-icon {
  position: absolute;
  left: 0;
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-lg)
}

.univer-menu-item-more-icon {
  font-size: var(--font-size-sm);
  color: rgb(var(--text-color))
}

.univer-progress-bar {
  width: 160px;
  height: 4px;
  background-color: rgb(var(--border-color));
  border-radius: var(--border-radius-lg);
  margin-right: var(--margin-xs)
}

.univer-progress-bar-container {
  display: flex;
  align-items: center;
  margin: 0 var(--margin-xs) 0 var(--margin-xs)
}

.univer-progress-bar-label {
  font-size: var(--font-size-xxs);
  color: rgb(var(--text-color-secondary));
  width: 98px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: var(--margin-xs);
  line-height: 17px
}

.univer-progress-bar-inner {
  height: 4px;
  border-radius: var(--border-radius-lg);
  transition: width .5s
}

.univer-progress-bar-close-button {
  background: none;
  border: none;
  font-size: var(--font-size-xxs);
  color: rgb(var(--text-color));
  cursor: pointer;
  padding: 0;
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center
}

.univer-progress-bar-close-button:hover {
  color: rgb(var(--text-color-secondary))
}

.univer-workbench-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: rgb(var(--bg-color));
  min-height: 0;
  position: relative
}

.univer-workbench-custom-header {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background-color: rgb(var(--color-white))
}

.univer-workbench-container {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0
}

.univer-workbench-container-header {
  position: relative;
  z-index: 10;
  width: 100%
}

.univer-workbench-container-wrapper {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: 100%;
  height: 100%;
  overflow: hidden
}

.univer-workbench-container-content {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  flex: 1;
  background-color: rgb(var(--bg-color-secondary));
  border-bottom: 1px solid rgb(var(--border-color))
}

.univer-workbench-container-doc-content {
  background: rgb(var(--bg-color-secondary))
}

.univer-workbench-container-canvas {
  position: relative;
  overflow: hidden
}

.univer-workbench-container-left-sidebar,
.univer-workbench-container-sidebar {
  height: 100%
}

.univer-mobile-menu-container {
  min-width: 32px;
  max-width: 200px;
  display: grid;
  grid-gap: 4px;
  background-color: #000;
  border-radius: 4px;
  padding: 4px 8px
}

.univer-mobile-menu-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: none;
  background: none;
  color: #fff;
  width: 48px
}

.univer-mobile-menu-item>svg {
  font-size: 18px;
  height: 18px;
  width: 18px
}

.univer-mobile-menu-item>span {
  width: 100%;
  margin-top: 2px;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.univer-app-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: rgb(var(--bg-color));
  min-height: 0;
  position: relative
}

.univer-app-custom-header {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background-color: rgb(var(--color-white))
}

.univer-app-header {
  width: 100vw
}

.univer-app-container {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0
}

.univer-app-container-header {
  position: relative;
  z-index: 10;
  width: 100%
}

.univer-app-container-wrapper {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: 100%;
  height: 100%;
  overflow: hidden
}

.univer-app-container-content {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  flex: 1;
  background-color: rgb(var(--bg-color-secondary));
  border-bottom: 1px solid rgb(var(--border-color))
}

.univer-app-container-canvas {
  position: relative;
  overflow: hidden
}

.univer-app-container-left-sidebar,
.univer-app-container-sidebar {
  height: 100%
}

.univer-notification {
  position: fixed;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  box-sizing: border-box;
  margin: var(--margin-xs) 0
}

.univer-notification-notice {
  display: flex;
  gap: var(--margin-xs);
  justify-content: space-between;
  width: 280px;
  padding: var(--padding-lg);
  font-size: var(--font-size-lg);
  background-color: rgb(var(--color-white));
  border-radius: var(--border-radius-base);
  box-shadow: var(--box-shadow-lg)
}

.univer-notification-notice-wrapper {
  margin: var(--margin-xs) var(--margin-base)
}

.univer-notification-notice-content {
  display: inline-flex;
  gap: var(--margin-xs);
  align-items: center;
  align-items: flex-start
}

.univer-notification-notice-close {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding: var(--padding-xs);
  color: rgb(var(--text-color-secondary));
  border-radius: var(--border-radius-base);
  outline: none;
  transition: background-color .2s
}

.univer-notification-notice-close:hover {
  background-color: rgb(var(--bg-color-hover))
}

.univer-notification-icon {
  padding: var(--padding-xs)
}

.univer-notification-icon-success {
  color: rgb(var(--success-color))
}

.univer-notification-icon-info {
  color: rgb(var(--info-color))
}

.univer-notification-icon-warning {
  color: rgb(var(--warning-color))
}

.univer-notification-icon-error {
  color: rgb(var(--error-color))
}

.univer-notification-content-container {
  display: inline-flex;
  flex-direction: column;
  gap: var(--margin-xs);
  align-items: flex-start;
  padding-top: var(--padding-xs)
}

.univer-notification-title {
  color: rgb(var(--text-color))
}

.univer-notification-content {
  color: rgb(var(--text-color-secondary))
}

.univer-notification-content-ellipsis {
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical
}

.univer-notification-top,
.univer-notification-topLeft,
.univer-notification-topRight {
  top: 0
}

.univer-notification-bottom,
.univer-notification-bottomRight,
.univer-notification-bottomLeft {
  bottom: 0
}

.univer-notification-bottomRight,
.univer-notification-topRight {
  right: 0
}

.univer-notification-fade {
  overflow: hidden;
  transition: all .3s
}

.univer-notification-fade-appear-prepare {
  opacity: 0
}

.univer-notification-fade-appear-start {
  transform: translate(100%);
  opacity: 0
}

.univer-notification-fade-appear-active {
  transform: translate(0);
  opacity: 1
}

.univer-notification-fade-appear,
.univer-notification-fade-enter {
  opacity: 0;
  animation-play-state: paused;
  animation-duration: .3s;
  animation-timing-function: cubic-bezier(.55, 0, .55, .2);
  animation-fill-mode: both
}

.univer-notification-fade-leave {
  animation-duration: .3s;
  animation-timing-function: cubic-bezier(.55, 0, .55, .2);
  animation-fill-mode: both;
  animation-play-state: paused
}

.univer-notification-fade-appear.univer-notification-fade-appear-active,
.univer-notification-fade-enter.univer-notification-fade-enter-active {
  animation-name: univer-notification-fade-in;
  animation-play-state: running
}

.univer-notification-fade-leave.univer-notification-fade-leave-active {
  animation-name: univer-notification-fade-out;
  animation-play-state: running
}

@keyframes univer-notification-fade-in {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes univer-notification-fade-out {
  0% {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

.univer-bottom-0 {
  bottom: 0
}

.univer-left-0 {
  left: 0
}

.univer-left-\[5px\] {
  left: 5px
}

.univer-top-\[5px\] {
  top: 5px
}

.univer-z-\[100\] {
  z-index: 100
}

.univer-mb-1 {
  margin-bottom: .25rem
}

.univer-mr-1 {
  margin-right: .25rem
}

.univer-mt-1\.5 {
  margin-top: .375rem
}

.univer-mt-12 {
  margin-top: 3rem
}

.univer-mt-3 {
  margin-top: .75rem
}

.univer-mt-4 {
  margin-top: 1rem
}

.univer-block {
  display: block
}

.univer-inline-flex {
  display: inline-flex
}

.univer-size-full {
  width: 100%;
  height: 100%
}

.univer-h-20 {
  height: 5rem
}

.univer-h-3 {
  height: .75rem
}

.univer-h-4 {
  height: 1rem
}

.univer-h-8 {
  height: 2rem
}

.univer-w-28 {
  width: 7rem
}

.univer-w-3 {
  width: .75rem
}

.univer-w-4 {
  width: 1rem
}

.univer-w-4\/5 {
  width: 80%
}

.univer-w-\[0px\] {
  width: 0px
}

.univer-w-\[72px\] {
  width: 72px
}

.univer-flex-grow-0 {
  flex-grow: 0
}

.univer-basis-\[260px\] {
  flex-basis: 260px
}

.univer-grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr))
}

.univer-flex-col {
  flex-direction: column
}

.univer-flex-nowrap {
  flex-wrap: nowrap
}

.univer-justify-end {
  justify-content: flex-end
}

.univer-justify-around {
  justify-content: space-around
}

.univer-gap-1\.5 {
  gap: .375rem
}

.univer-gap-4 {
  gap: 1rem
}

.univer-rounded-full {
  border-radius: 9999px
}

.univer-rounded-md {
  border-radius: .375rem
}

.univer-border-primary-500 {
  --tw-border-opacity: 1;
  border-color: #466af7;
  border-color: rgba(70, 106, 247, var(--tw-border-opacity, 1))
}

.univer-bg-none {
  background-image: none
}

.univer-px-2\.5 {
  padding-left: .625rem;
  padding-right: .625rem
}

.univer-px-3 {
  padding-left: .75rem;
  padding-right: .75rem
}

.univer-py-0 {
  padding-top: 0;
  padding-bottom: 0
}

.univer-pb-0\.5 {
  padding-bottom: .125rem
}

.univer-pl-1\.5 {
  padding-left: .375rem
}

.univer-pr-2 {
  padding-right: .5rem
}

.univer-pt-1\.5 {
  padding-top: .375rem
}

.univer-font-medium {
  font-weight: 500
}

.univer-text-\[\#181C2A\] {
  --tw-text-opacity: 1;
  color: #181c2a;
  color: rgba(24, 28, 42, var(--tw-text-opacity, 1))
}

.univer-text-\[\#979DAC\],
.univer-text-gray-400 {
  --tw-text-opacity: 1;
  color: #979dac;
  color: rgba(151, 157, 172, var(--tw-text-opacity, 1))
}

.univer-shadow-\[0_1px_6px_-2px_rgba\(30\,40\,77\,0\.08\)\,0_2px_6px_-1px_rgba\(30\,40\,77\,0\.10\)\] {
  --tw-shadow: 0 1px 6px -2px rgba(30, 40, 77, .08), 0 2px 6px -1px rgba(30, 40, 77, .1);
  --tw-shadow-colored: 0 1px 6px -2px var(--tw-shadow-color), 0 2px 6px -1px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 6px -2px #1e284d14, 0 2px 6px -1px #1e284d1a;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow)
}

.hover\:univer-border-primary-500:hover {
  --tw-border-opacity: 1;
  border-color: #466af7;
  border-color: rgba(70, 106, 247, var(--tw-border-opacity, 1))
}

.hover\:univer-bg-black\/60:hover {
  background-color: #0009
}

.univer-absolute {
  position: absolute
}

.univer-relative {
  position: relative
}

.univer-inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0
}

.univer-left-1 {
  left: .25rem
}

.univer-right-0 {
  right: 0
}

.univer-top-0 {
  top: 0
}

.univer-top-0\.5 {
  top: .125rem
}

.univer-z-10 {
  z-index: 10
}

.univer-z-\[1001\] {
  z-index: 1001
}

.univer-m-0 {
  margin: 0
}

.univer-mb-2 {
  margin-bottom: .5rem
}

.univer-mr-2 {
  margin-right: .5rem
}

.univer-size-0 {
  width: 0px;
  height: 0px
}

.univer-size-4 {
  width: 1rem;
  height: 1rem
}

.univer-size-6 {
  width: 1.5rem;
  height: 1.5rem
}

.univer-h-full {
  height: 100%
}

.univer-max-h-\[360px\] {
  max-height: 360px
}

.univer-w-24 {
  width: 6rem
}

.univer-w-\[300px\] {
  width: 300px
}

.univer-w-\[50\%\] {
  width: 50%
}

.univer-flex-1 {
  flex: 1 1 0%
}

.univer-flex-shrink-0 {
  flex-shrink: 0
}

.univer-cursor-not-allowed {
  cursor: not-allowed
}

.univer-list-none {
  list-style-type: none
}

.univer-appearance-none {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none
}

.univer-grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr))
}

.univer-justify-center {
  justify-content: center
}

.univer-gap-2 {
  gap: .5rem
}

.univer-justify-self-center {
  justify-self: center
}

.univer-overflow-hidden {
  overflow: hidden
}

.univer-overflow-y-auto {
  overflow-y: auto
}

.univer-text-ellipsis {
  text-overflow: ellipsis
}

.univer-rounded-lg {
  border-radius: .5rem
}

.univer-border-0 {
  border-width: 0px
}

.univer-border-b {
  border-bottom-width: 1px
}

.univer-border-r {
  border-right-width: 1px
}

.univer-border-solid {
  border-style: solid
}

.univer-border-none {
  border-style: none
}

.univer-border-gray-200 {
  --tw-border-opacity: 1;
  border-color: #e3e5ea;
  border-color: rgba(227, 229, 234, var(--tw-border-opacity, 1))
}

.univer-border-r-gray-200 {
  --tw-border-opacity: 1;
  border-right-color: #e3e5ea;
  border-right-color: rgba(227, 229, 234, var(--tw-border-opacity, 1))
}

.univer-bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: #eeeff1;
  background-color: rgba(238, 239, 241, var(--tw-bg-opacity, 1))
}

.univer-bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: #e3e5ea;
  background-color: rgba(227, 229, 234, var(--tw-bg-opacity, 1))
}

.univer-bg-transparent {
  background-color: transparent
}

.univer-bg-white {
  --tw-bg-opacity: 1;
  background-color: #fff;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity, 1))
}

.univer-p-0 {
  padding: 0
}

.univer-p-1 {
  padding: .25rem
}

.univer-p-2 {
  padding: .5rem
}

.univer-p-4 {
  padding: 1rem
}

.univer-px-1 {
  padding-left: .25rem;
  padding-right: .25rem
}

.univer-px-1\.5 {
  padding-left: .375rem;
  padding-right: .375rem
}

.univer-px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem
}

.univer-py-1 {
  padding-top: .25rem;
  padding-bottom: .25rem
}

.univer-py-1\.5 {
  padding-top: .375rem;
  padding-bottom: .375rem
}

.univer-py-2 {
  padding-top: .5rem;
  padding-bottom: .5rem
}

.univer-pl-6 {
  padding-left: 1.5rem
}

.univer-text-\[10px\] {
  font-size: 10px
}

.univer-font-semibold {
  font-weight: 600
}

.univer-text-gray-300 {
  --tw-text-opacity: 1;
  color: #cdd0d8;
  color: rgba(205, 208, 216, var(--tw-text-opacity, 1))
}

.univer-text-gray-400 {
  --tw-text-opacity: 1;
  color: #979dac;
  color: rgba(151, 157, 172, var(--tw-text-opacity, 1))
}

.univer-text-gray-600 {
  --tw-text-opacity: 1;
  color: #414657;
  color: rgba(65, 70, 87, var(--tw-text-opacity, 1))
}

.univer-text-gray-700 {
  --tw-text-opacity: 1;
  color: #2c3040;
  color: rgba(44, 48, 64, var(--tw-text-opacity, 1))
}

.univer-text-gray-900 {
  --tw-text-opacity: 1;
  color: #0e111e;
  color: rgba(14, 17, 30, var(--tw-text-opacity, 1))
}

.univer-text-primary-600 {
  --tw-text-opacity: 1;
  color: #2c53f1;
  color: rgba(44, 83, 241, var(--tw-text-opacity, 1))
}

.univer-opacity-100 {
  opacity: 1
}

.univer-transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .15s
}

.univer-transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .15s
}

.univer-duration-200 {
  transition-duration: .2s
}

.univer-scrollbar-thin::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track);
  border-radius: var(--scrollbar-track-radius)
}

.univer-scrollbar-thin::-webkit-scrollbar-track:hover {
  background-color: var(--scrollbar-track-hover, var(--scrollbar-track))
}

.univer-scrollbar-thin::-webkit-scrollbar-track:active {
  background-color: var(--scrollbar-track-active, var(--scrollbar-track-hover, var(--scrollbar-track)))
}

.univer-scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: var(--scrollbar-thumb-radius)
}

.univer-scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover, var(--scrollbar-thumb))
}

.univer-scrollbar-thin::-webkit-scrollbar-thumb:active {
  background-color: var(--scrollbar-thumb-active, var(--scrollbar-thumb-hover, var(--scrollbar-thumb)))
}

.univer-scrollbar-thin::-webkit-scrollbar-corner {
  background-color: var(--scrollbar-corner);
  border-radius: var(--scrollbar-corner-radius)
}

.univer-scrollbar-thin::-webkit-scrollbar-corner:hover {
  background-color: var(--scrollbar-corner-hover, var(--scrollbar-corner))
}

.univer-scrollbar-thin::-webkit-scrollbar-corner:active {
  background-color: var(--scrollbar-corner-active, var(--scrollbar-corner-hover, var(--scrollbar-corner)))
}

.univer-scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: initial initial;
  scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial)
}

.univer-scrollbar-thin::-webkit-scrollbar {
  display: block;
  width: 8px;
  height: 8px
}

.univer-scrollbar-track-transparent {
  --scrollbar-track: transparent !important
}

.univer-scrollbar-thumb-gray-300 {
  --scrollbar-thumb: #CDD0D8 !important
}

.hover\:univer-bg-neutral-100:hover {
  --tw-bg-opacity: 1;
  background-color: #f5f5f5;
  background-color: rgba(245, 245, 245, var(--tw-bg-opacity, 1))
}

.hover\:univer-bg-transparent:hover {
  background-color: transparent
}

.focus\:univer-outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px
}

.dark\:univer-bg-gray-900:where(.univer-dark, .univer-dark *) {
  --tw-bg-opacity: 1;
  background-color: #0e111e;
  background-color: rgba(14, 17, 30, var(--tw-bg-opacity, 1))
}

.dark\:univer-text-gray-200:where(.univer-dark, .univer-dark *) {
  --tw-text-opacity: 1;
  color: #e3e5ea;
  color: rgba(227, 229, 234, var(--tw-text-opacity, 1))
}

.dark\:hover\:univer-bg-gray-600:hover:where(.univer-dark, .univer-dark *) {
  --tw-bg-opacity: 1;
  background-color: #414657;
  background-color: rgba(65, 70, 87, var(--tw-bg-opacity, 1))
}

.univer-count-bar {
  display: flex;
  flex: 0 0 260px;
  justify-content: flex-end
}

.univer-editor-container {
  position: absolute;
  z-index: 10;
  top: 200px;
  left: 100px;
  display: flex;
  width: 100px;
  height: 50px;
  border: 1px solid rgb(var(--primary-color));
  box-shadow: none;
  box-sizing: content-box
}

.univer-editor-container .univer-editor-input {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%
}

.univer-editor-container .univer-editor-input canvas {
  position: absolute
}

.univer-editor-container .univer-editor-input .univer-sheet-embedding-formula-editor-wrap {
  height: auto;
  border: none;
  padding: 0;
  border-radius: 0
}

.univer-defined-name-overlay {
  position: relative;
  width: 300px;
  background-color: rgb(var(--color-white))
}

.univer-defined-name-overlay-container {
  position: relative;
  height: 100%;
  max-height: 400px;
  width: 100%;
  overflow: hidden;
  overflow-y: auto;
  scrollbar-color: rgba(var(--scrollbar-color), .7) transparent;
  scrollbar-gutter: auto;
  scrollbar-width: thin
}

.univer-defined-name-overlay-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--padding-xs);
  border-bottom: 1px solid rgb(var(--border-color));
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: pointer
}

.univer-defined-name-overlay-item:hover {
  background-color: rgb(var(--grey-50))
}

.univer-defined-name-overlay-item-name {
  font-size: var(--font-size-md);
  color: rgb(var(--grey-900));
  margin: 5px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1
}

.univer-defined-name-overlay-item-name-for-sheet {
  font-size: var(--font-size-xxs);
  color: rgb(var(--grey-400));
  margin-left: 5px;
  font-weight: 400
}

.univer-defined-name-overlay-item-formula {
  font-size: var(--font-size-xs);
  color: rgb(var(--grey-800));
  margin: 5px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1
}

.univer-defined-name-overlay-manager {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  width: 100%;
  cursor: pointer;
  overflow: hidden;
  background-color: rgb(var(--color-white))
}

.univer-defined-name-overlay-manager:hover {
  background-color: rgb(var(--grey-50))
}

.univer-defined-name-overlay-manager-title {
  font-size: var(--font-size-xs);
  font-weight: 700;
  margin: var(--margin-xs);
  margin-bottom: 0;
  color: rgb(var(--grey-800))
}

.univer-defined-name-overlay-manager-content {
  font-size: var(--font-size-xxs);
  margin: var(--margin-xs);
  color: rgb(var(--grey-500))
}

.univer-defined-name-container {
  width: 100%;
  position: relative
}

.univer-defined-name-container-scroll {
  width: 100%;
  overflow: hidden;
  overflow-y: auto;
  position: absolute
}

.univer-defined-name-container-addButton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  border-top: 1px solid rgb(var(--border-color));
  border-bottom: 1px solid rgb(var(--border-color));
  font-size: var(--font-size-md);
  color: rgb(var(--primary-color))
}

.univer-defined-name-container-addButton:hover {
  background-color: rgb(var(--grey-50));
  cursor: pointer
}

.univer-defined-name-container-addButton-text {
  margin-left: 5px
}

.univer-defined-name-container-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--padding-xs);
  border-bottom: 1px solid rgb(var(--border-color));
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: default
}

.univer-defined-name-container-item-name {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: rgb(var(--color-black));
  margin: 5px 0;
  max-width: 190px;
  max-height: 100px;
  overflow: hidden
}

.univer-defined-name-container-item-name-for-sheet {
  font-size: var(--font-size-xxs);
  color: rgb(var(--grey-400));
  margin-left: 5px;
  font-weight: 400
}

.univer-defined-name-container-item-formula-or-refString {
  font-size: var(--font-size-xs);
  color: rgb(var(--grey-500));
  font-weight: 400;
  margin: 5px 0;
  max-height: 100px;
  text-overflow: ellipsis;
  overflow: hidden
}

.univer-defined-name-container-item-update {
  position: absolute;
  font-size: var(--font-size-xs);
  color: rgb(var(--primary-color));
  cursor: pointer;
  padding: 4px;
  transform: translateY(-50%);
  border-radius: var(--border-radius-base);
  right: 60px;
  top: 20px
}

.univer-defined-name-container-item-update:hover {
  background-color: rgb(var(--hyacinth-50))
}

.univer-defined-name-container-item-delete {
  position: absolute;
  font-size: var(--font-size-xs);
  color: rgb(var(--error-color));
  cursor: pointer;
  padding: 4px;
  right: 20px;
  top: 20px;
  transform: translateY(-50%);
  border-radius: var(--border-radius-base)
}

.univer-defined-name-container-item-delete:hover {
  background-color: rgb(var(--hyacinth-50))
}

.univer-defined-name-container-item-show {
  display: none
}

.univer-defined-name-container-item:hover {
  background-color: rgb(var(--grey-50))
}

.univer-defined-name-container-item:hover .univer-defined-name-container-item-show {
  display: block
}

.univer-defined-name-input {
  display: flex;
  align-items: center;
  justify-content: left;
  border-bottom: 1px solid rgb(var(--border-color));
  padding-bottom: 5px
}

.univer-defined-name-input>div {
  margin-top: 16px
}

.univer-defined-name-input-formula-selector-text-wrap {
  margin-top: 16px;
  height: 100%;
  position: relative;
  padding: 0 0 0 6px;
  border: 1px solid rgb(var(--border-color));
  transition: all .15s;
  border-radius: var(--border-radius-base)
}

.univer-defined-name-input-text-editor-container {
  position: relative;
  width: 95%;
  height: 30px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.univer-defined-name-input-validation {
  display: flex;
  align-items: center;
  justify-content: left;
  color: rgb(var(--error-color));
  font-size: var(--font-size-xs)
}

.univer-defined-name-input-validation>span {
  margin-right: 2px
}

.univer-defined-name-input-disable {
  color: rgb(var(--grey-200));
  cursor: not-allowed
}

.univer-formula-box {
  display: flex;
  box-sizing: border-box;
  height: 28px;
  background: rgb(var(--bg-color-secondary));
  border-bottom: 1px solid rgb(var(--border-color));
  transition: height .15s
}

.univer-formula-box .univer-name-ranges {
  box-sizing: border-box;
  width: 100px;
  height: 100%;
  position: relative
}

.univer-formula-box .univer-formula-bar {
  display: flex;
  width: 100%;
  height: 100%
}

.univer-formula-box .univer-formula-bar .univer-formula-icon {
  padding: 6px 0
}

.univer-formula-box .univer-formula-bar .univer-formula-icon-disable {
  color: rgb(var(--grey-200));
  cursor: not-allowed
}

.univer-formula-box .univer-formula-bar .univer-formula-icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 80px;
  height: 100%;
  font-size: var(--font-size-xs);
  border-right: 1px solid rgb(var(--border-color))
}

.univer-formula-box .univer-formula-bar .univer-formula-icon-wrapper .univer-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-xs);
  font-size: var(--font-size-lg);
  border-radius: var(--border-radius-base)
}

.univer-formula-box .univer-formula-bar .univer-formula-icon-wrapper .univer-icon-container-success.univer-formula-active {
  cursor: pointer;
  color: rgb(var(--success-color))
}

.univer-formula-box .univer-formula-bar .univer-formula-icon-wrapper .univer-icon-container-success.univer-formula-active:hover {
  background-color: rgb(var(--grey-50))
}

.univer-formula-box .univer-formula-bar .univer-formula-icon-wrapper .univer-icon-container-error.univer-formula-active {
  cursor: pointer;
  color: rgb(var(--error-color))
}

.univer-formula-box .univer-formula-bar .univer-formula-icon-wrapper .univer-icon-container-error.univer-formula-active:hover {
  background-color: rgb(var(--grey-50))
}

.univer-formula-box .univer-formula-bar .univer-formula-icon-wrapper .univer-icon-container-fx {
  cursor: pointer
}

.univer-formula-box .univer-formula-bar .univer-formula-icon-wrapper .univer-icon-container-fx:hover {
  background-color: rgb(var(--grey-50))
}

.univer-formula-box .univer-formula-bar .univer-formula-input {
  flex: 1;
  position: relative
}

.univer-formula-box .univer-formula-bar .univer-formula-input-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
  background: rgb(var(--color-white));
  cursor: not-allowed
}

.univer-formula-box .univer-formula-bar .univer-formula-container {
  overflow: hidden;
  display: flex;
  flex: 1;
  width: 100%;
  padding: 0 0 0 10px
}

.univer-formula-box .univer-formula-bar .univer-formula-container .univer-sheet-embedding-formula-editor-wrap {
  height: auto;
  border: none;
  padding: 0;
  border-radius: 0;
  height: 100%
}

.univer-formula-box .univer-formula-bar .univer-formula-container .univer-formula-content {
  position: relative;
  width: 100%;
  height: 100%;
  word-wrap: break-word;
  outline: none
}

.univer-formula-box .univer-formula-bar .univer-formula-container .univer-arrow-container {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 100%;
  font-size: var(--font-size-xs);
  color: rgb(var(--text-color-secondary))
}

.univer-formula-box .univer-formula-bar .univer-formula-container .univer-arrow-container-disable {
  color: rgb(var(--grey-200));
  cursor: not-allowed
}

.univer-sheet-bar {
  min-width: calc(100% - 592px);
  max-width: calc(100% - 260px)
}

.univer-sheet-bar-options {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: var(--margin-xxs);
  transition: display .2s
}

.univer-sheet-bar-options-divider:after {
  content: "";
  display: block;
  width: 1px;
  height: 16px;
  margin: 0 var(--margin-xs);
  background-color: rgb(var(--grey-400))
}

.univer-sheet-bar-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: var(--font-size-lg);
  color: rgb(var(--text-color-secondary-darker));
  background-color: transparent;
  border: none;
  border-radius: var(--border-radius-base);
  outline: none
}

.univer-sheet-bar-btn:not([disabled]):hover {
  background-color: rgb(var(--bg-color-hover))
}

.univer-sheet-bar-btn[disabled] {
  cursor: not-allowed;
  color: rgb(var(--grey-200))
}

.univer-slide-tab-bar-container {
  overflow: hidden;
  max-width: calc(100% - 112px)
}

.univer-slide-tab-bar-container .univer-slide-tab-bar {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: var(--padding-xs) 6px;
  transition: box-shadow .2s
}

.univer-slide-tab-item {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  align-items: center;
  box-sizing: border-box;
  margin: 0 var(--margin-xxs);
  font-size: var(--font-size-xs);
  line-height: 16px;
  color: rgb(var(--grey-1000));
  border-radius: var(--border-radius-base)
}

.univer-slide-tab-item:not(.univer-slide-tab-active):hover {
  background-color: rgb(var(--bg-color-hover))
}

.univer-slide-tab-item .univer-slide-tab-div {
  box-sizing: border-box;
  padding: var(--padding-xs) var(--padding-sm);
  white-space: nowrap;
  border: 2px solid transparent;
  border-radius: var(--border-radius-base);
  display: flex;
  align-items: center
}

.univer-slide-tab-item .univer-slide-tab-div-edit {
  cursor: text;
  outline: none
}

.univer-slide-tab-item .univer-slide-tab-div-edit::-moz-selection {
  color: rgb(var(--color-white));
  background-color: rgb(var(--primary-color))
}

.univer-slide-tab-item .univer-slide-tab-div-edit::selection {
  color: rgb(var(--color-white));
  background-color: rgb(var(--primary-color))
}

.univer-slide-tab-active {
  font-weight: 700;
  color: rgb(var(--primary-color));
  background-color: rgb(var(--bg-color-secondary));
  box-shadow: 0 0 8px #00000014;
  transition: box-shadow .2s;
  display: flex;
  justify-content: center
}

.univer-slide-tab-item-dropdown {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  min-width: auto !important
}

.univer-status-bar {
  display: flex;
  align-items: center;
  max-width: 332px
}

.univer-status-bar.univer-single-mode {
  max-width: 136px
}

.univer-status-bar-div {
  width: 1px;
  height: 16px;
  margin-left: 10px;
  background: rgb(#ccc);
  background: rgb(var(--grey-400, #ccc))
}

.univer-statistic-list-column .univer-statistic-item {
  font-size: 12px;
  line-height: 140%;
  color: rgb(var(--grey-500))
}

.univer-statistic-item {
  cursor: default;
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  max-width: 106px;
  margin-right: 8px;
  font-size: var(--font-size-xxs);
  font-weight: 400;
  font-style: normal;
  line-height: 20px;
  color: rgb(var(--grey-900));
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap
}

.univer-statistic-item:hover {
  color: rgb(var(--color-black))
}

.univer-statistic-picker {
  display: grid;
  grid-gap: var(--margin-sm);
  gap: var(--margin-sm);
  align-items: center;
  box-sizing: border-box;
  width: 196px;
  padding: var(--padding-base);
  font-size: var(--font-size-xs);
  background-color: rgb(var(--color-white));
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--border-radius-lg);
  box-shadow: var(--box-shadow-lg)
}

.univer-statistic-picker-item {
  display: flex;
  align-items: center;
  justify-content: flex-start
}

.univer-statistic-more {
  transform: rotate(90deg);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 12px;
  color: rgb(#e8e8e8);
  color: rgb(var(--grey-600, #e8e8e8));
  border-radius: 4px
}

.univer-statistic-more:hover {
  background: rgb(#e8e8e8);
  background: rgb(var(--grey-300, #e8e8e8))
}

.univer-sheets-ui-context-menu-input {
  display: flex;
  gap: var(--margin-sm);
  align-items: center
}

.univer-sheets-ui-context-menu-input-container {
  width: 72px
}

.univer-sheets-ui-context-menu-input-number {
  height: 24px
}

.univer-cell-alert {
  box-sizing: border-box;
  box-shadow: var(--box-shadow-base);
  padding: var(--padding-sm) var(--padding-base);
  border-radius: var(--border-radius-lg);
  color: rgba(var(--color-black));
  background: rgba(var(--color-white));
  z-index: 100;
  width: 156px
}

.univer-cell-alert-title {
  height: 20px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 6px;
  line-height: 20px
}

.univer-cell-alert-icon {
  margin-right: 6px
}

.univer-cell-alert-icon-error {
  color: rgba(var(--red-400))
}

.univer-cell-alert-icon-info {
  color: rgba(var(--blue-500))
}

.univer-cell-alert-icon-warning {
  color: rgba(var(--gold-400))
}

.univer-cell-alert-content {
  font-size: var(--font-size-sm)
}

.univer-sheet-paste-options-wrapper {
  position: absolute;
  display: flex;
  background-color: #fff;
  z-index: 10;
  border-radius: 4px
}

.univer-sheet-paste-options-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid rgb(#e5e5e5);
  border: 1px solid rgb(var(--grey-200, #e5e5e5));
  border-radius: 4px;
  padding: 3px
}

.univer-sheet-paste-options-menu {
  border: 1px solid rgb(#e5e5e5);
  border: 1px solid rgb(var(--grey-200, #e5e5e5));
  box-shadow: var(--box-shadow-base);
  border-radius: 4px
}

.univer-sheet-paste-options-menu ul {
  list-style-type: none;
  padding: 0;
  margin: 8px
}

.univer-sheet-paste-options-menu-item {
  padding: 8px 4px;
  cursor: pointer;
  position: relative
}

.univer-sheet-paste-options-menu-item:hover {
  background-color: rgb(#f5f5f5);
  background-color: rgb(var(--grey-100, #f5f5f5))
}

.univer-sheet-paste-options-menu-item-title {
  font-size: 13px;
  color: rgb(#35322b);
  color: rgb(var(--black, #35322b));
  margin-left: 20px
}

.univer-sheet-paste-options-menu-item-icon {
  position: absolute
}

.univer-mobile-sheet-bar-container {
  width: 100%;
  overflow-x: scroll;
  height: 32px;
  background-color: rgb(var(--bg-color))
}

.univer-mobile-sheet-bar-slider {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  height: 32px
}

.univer-mobile-sheet-bar-item {
  align-items: center;
  box-sizing: border-box;
  flex-grow: 1;
  flex-shrink: 0;
  flex-wrap: nowrap;
  font-size: 12px;
  height: 100%;
  line-height: 28px;
  min-width: 48px;
  overflow: hidden;
  padding: 2px 4px;
  text-align: center;
  white-space: nowrap;
  border-right: 1px solid rgb(var(--border-color));
  background-color: rgb(var(--bg-color));
  text-overflow: ellipsis;
  max-width: 120px
}

.univer-mobile-sheet-bar-item.univer-mobile-sheet-bar-item-activated {
  color: rgb(var(--primary-color));
  background-color: rgb(var(--bg-color-secondary))
}

.univer-permission-panel-detail-wrapper {
  margin-top: 16px;
  height: calc(100% - 16px);
  display: flex;
  flex-direction: column
}

.univer-radio-group-vertical {
  display: flex;
  flex-direction: column;
  font-weight: 400
}

.univer-sheet-permission-design-person-panel {
  height: 270px;
  border: 1px solid rgb(var(--grey-200));
  border-radius: var(--border-radius-lg);
  padding: var(--padding-base);
  margin-bottom: var(--margin-xs);
  display: flex;
  flex-direction: column
}

.univer-sheet-permission-design-person-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.univer-sheet-permission-design-person-panel-header-add {
  cursor: pointer;
  color: rgb(var(--blue-500))
}

.univer-sheet-permission-design-person-panel-split {
  height: 1px;
  background-color: rgb(var(--grey-200));
  margin: var(--margin-xs) 0
}

.univer-sheet-permission-design-person-panel-content-item {
  height: 28px;
  line-height: 28px;
  margin-bottom: var(--margin-sm);
  display: flex;
  align-items: center
}

.univer-sheet-permission-design-person-panel-content-item:last-child {
  margin-bottom: 0
}

.univer-sheet-permission-design-person-panel-content-item-name {
  width: 130px;
  color: rgb(var(--color-black));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 6px
}

.univer-sheet-permission-design-person-panel-content-item-select {
  width: 90px;
  cursor: pointer
}

.univer-sheet-permission-design-person-panel .univer-sheet-permission-design-person-panel-content-item-select.univer-select-single:not(.univer-select-customize-input) .univer-select-selector {
  border: none;
  padding: 0;
  color: rgb(var(--grey-900))
}

.univer-sheet-permission-design-person-panel .univer-sheet-permission-design-person-panel-content-item-select.univer-select-show-arrow .univer-select-arrow {
  right: 0
}

.univer-sheet-permission-design-person-panel-content {
  flex: 1
}

.univer-sheet-permission-panel-title {
  font-weight: 500
}

.univer-sheet-permission-panel-footer {
  display: flex;
  flex-direction: row-reverse;
  padding: 20px 0;
  margin-top: auto
}

.univer-sheet-permission-panel-footer button:first-child {
  margin-left: 8px
}

.univer-permission-range-selector {
  font-weight: 400
}

.univer-permission-range-selector-error,
.univer-sheet-permission-panel-name-input-error,
.univer-permission-range-selector-error:hover,
.univer-sheet-permission-panel-name-input-error:hover {
  border: 1px solid rgb(var(--red-400))
}

.univer-permission-range-selector-error-text,
.univer-sheet-permission-panel-name-input-error-text {
  height: 20px;
  line-height: 20px;
  color: rgb(var(--red-400));
  font-size: var(--font-size-xs);
  font-weight: 400
}

.univer-sheet-permission-list-panel-wrapper {
  margin-top: var(--margin-xs);
  height: calc(100% - 8px);
  display: flex;
  flex-direction: column
}

.univer-sheet-permission-list-panel-header {
  display: flex;
  padding: var(--padding-sm) 0;
  height: 30px
}

.univer-sheet-permission-list-panel-header-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: var(--margin-lg);
  cursor: pointer
}

.univer-sheet-permission-list-panel-header-type div {
  height: 24px;
  line-height: 24px
}

.univer-sheet-permission-list-panel-header-type-bottom {
  height: 2px;
  width: 24px;
  background-color: rgb(var(--blue-500));
  margin-top: var(--margin-xxs)
}

.univer-sheet-permission-list-panel-header-select {
  color: rgb(var(--blue-500));
  height: 24px;
  line-height: 24px;
  font-size: var(--font-size-lg);
  font-weight: 500
}

.univer-sheet-permission-list-item-header-icon {
  border-radius: var(--border-radius-base);
  height: 24px;
  padding: 4px;
  box-sizing: border-box
}

.univer-sheet-permission-list-item-header-icon:hover {
  background-color: rgb(var(--grey-200))
}

.univer-sheet-permission-list-item {
  margin-top: var(--margin-sm);
  border-radius: var(--border-radius-lg);
  border: 1px solid rgb(var(--grey-200));
  padding: var(--padding-base)
}

.univer-sheet-permission-list-item:hover {
  background-color: rgb(var(--grey-50))
}

.univer-sheet-permission-list-item-header {
  height: 20px;
  line-height: 20px;
  display: flex;
  justify-content: space-between
}

.univer-sheet-permission-list-item-header-name {
  font-weight: 500;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.univer-sheet-permission-list-item-header-operator {
  display: flex;
  align-items: center
}

.univer-sheet-permission-list-item-header-operator div {
  margin-left: var(--margin-xs)
}

.univer-sheet-permission-list-item-split {
  height: 1px;
  background-color: rgb(var(--grey-200));
  margin: var(--margin-xs) 0
}

.univer-sheet-permission-list-item-content-edit {
  display: flex;
  align-items: center
}

.univer-sheet-permission-list-item-content-view {
  display: flex;
  align-items: center;
  margin-top: var(--margin-xs)
}

.univer-sheet-permission-list-item-content-desc {
  font-size: 12px;
  color: rgb(var(--grey-400));
  max-width: 256px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: var(--margin-xs)
}

.univer-sheet-permission-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1
}

.univer-sheet-permission-list-empty-text {
  width: 240px;
  word-wrap: break-word;
  color: rgb(var(--grey-400));
  font-size: 13px
}

.univer-sheet-permission-list-item-content-title {
  font-size: 12px;
  height: 16px;
  line-height: 16px;
  flex-grow: 1;
  color: rgb(var(--color-black))
}

.univer-sheet-permission-list-item-content-sub {
  font-size: 12px;
  height: 16px;
  line-height: 16px;
  color: rgb(var(--grey-600))
}

.univer-sheet-permission-panel-add-wrapper {
  padding: 20px 0;
  margin-top: auto
}

.univer-sheet-permission-panel-add-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center
}

.univer-sheet-permission-panel-add-button div {
  margin-right: 4px
}

.univer-spin-container {
  position: relative;
  width: 100%;
  height: 100%
}

.univer-spin-overlay {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: #ffffff80;
  z-index: 10
}

.univer-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: univer-spin 2s linear infinite
}

.univer-content-blur {
  filter: blur(2px);
  pointer-events: none
}

@keyframes univer-spin {
  0% {
    transform: rotate(0)
  }

  to {
    transform: rotate(360deg)
  }
}

.univer-sheet-permission-dialog-wrapper {
  display: flex;
  flex-direction: column;
  padding: 2px
}

.univer-sheet-permission-dialog-split {
  height: 1px;
  background-color: rgb(var(--grey-200))
}

.univer-sheet-permission-dialog-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 20px;
  line-height: 20px;
  margin: 6px 0
}

.univer-sheet-permission-user-dialog-footer {
  height: 36px;
  padding: var(--padding-xs) 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: var(--margin-xs)
}

.univer-sheet-permission-user-dialog-button {
  height: 32px;
  line-height: 32px;
  padding: 0px var(--padding-base)
}

.univer-sheet-permission-user-dialog-wrapper {
  height: 329px;
  padding: var(--padding-base);
  box-sizing: content-box
}

.univer-sheet-permission-user-dialog-search-input {
  width: 256px;
  height: 32px
}

.univer-sheet-permission-user-list {
  height: 240px;
  overflow-y: auto
}

.univer-sheet-permission-user-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%
}

.univer-sheet-permission-user-list-empty-text {
  width: 240px;
  word-wrap: break-word;
  color: rgb(var(--grey-400));
  font-size: 13px
}

.univer-sheet-permission-user-item {
  display: flex;
  align-items: center;
  margin: var(--margin-xs) 0;
  border-radius: 6px;
  padding: var(--padding-xs) var(--padding-sm)
}

.univer-sheet-permission-user-item:hover {
  background-color: rgb(var(--grey-50))
}

.univer-sheet-permission-user-item div {
  margin-left: 6px
}

.univer-sheet-permission-user-item-name {
  width: 186px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.univer-sheet-permission-split {
  height: 1px;
  background-color: rgb(var(--grey-200))
}

.univer-sheet-permission-user-dialog-footer {
  padding: var(--padding-xs) 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: var(--margin-xs);
  height: 28px
}

.univer-sheet-permission-user-dialog-footer-confirm {
  margin-left: var(--margin-sm)
}

.univer-sheet-permission-user-dialog-button {
  height: 28px;
  line-height: 28px;
  padding: 0px var(--padding-base)
}

.univer-sheet-permission-alert-dialog {
  padding: var(--padding-xl) 24px
}

.univer-sheet-permission-alert-dialog-title {
  font-size: var(--font-size-lg);
  font-weight: 500;
  margin-bottom: var(--margin-base)
}

.univer-sheet-permission-alert-dialog-button {
  margin-top: var(--margin-lg);
  display: flex;
  justify-content: flex-end
}

.sheet-permission-user-dialog .univer-dialog-close,
.sheet-permission-user-dialog .univer-dialog-header {
  display: none
}

.sheet-permission-user-dialog .univer-dialog-body {
  padding: 0
}

.univer-dv-date-dropdown {
  background: #fff;
  border-radius: var(--border-radius-base);
  box-shadow: var(--box-shadow-lg);
  padding: var(--padding-sm)
}

.univer-dv-date-dropdown-btns {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid rgb(var(--border-color));
  padding-top: var(--padding-sm)
}

.univer-dv-list-dropdown {
  border-radius: var(--border-radius-lg);
  border: 1px solid rgb(var(--border-color));
  background: rgba(var(--color-white));
  box-shadow: var(--box-shadow-base);
  box-sizing: border-box;
  padding-bottom: var(--padding-xs)
}

.univer-dv-list-dropdown-title {
  padding: var(--padding-sm) 14px;
  color: rgb(var(--text-color));
  font-size: 12px;
  line-height: 1.5;
  flex-shrink: 0;
  flex-grow: 0
}

.univer-dv-list-dropdown-list {
  max-height: 200px
}

.univer-dv-list-dropdown-list-container {
  padding: 0 var(--padding-sm)
}

.univer-dv-list-dropdown-selected-icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
  color: rgba(var(--blue-500));
  flex-shrink: 0;
  flex-grow: 0;
  margin-left: 12px
}

.univer-dv-list-dropdown-item-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: var(--padding-xs) 6px;
  border-radius: 6px;
  margin-top: 4px;
  cursor: pointer
}

.univer-dv-list-dropdown-item-container:hover {
  background-color: rgba(var(--grey-50))
}

.univer-dv-list-dropdown-item {
  padding: 0 4px;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  border-radius: 8px;
  height: 16px;
  width: -moz-fit-content;
  width: fit-content;
  flex: 0 1 auto;
  text-overflow: ellipsis;
  overflow: hidden;
  color: rgba(var(--color-black));
  white-space: nowrap
}

.univer-dv-list-dropdown-split {
  height: 1px;
  margin: 4px 0;
  background: rgba(var(--grey-200));
  flex-shrink: 0;
  flex-grow: 0
}

.univer-dv-list-dropdown-edit {
  padding: 0 var(--padding-xs);
  flex-shrink: 0;
  flex-grow: 0
}

.univer-dv-list-dropdown-edit a {
  padding: 3px 6px;
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
  border-radius: 6px;
  display: block
}

.univer-dv-list-dropdown-edit a:hover {
  background: #f5f5f5
}

.univer-z-\[15\] {
  z-index: 15
}

.univer-box-border {
  box-sizing: border-box
}

.univer-h-\[18px\] {
  height: 18px
}

.univer-w-full {
  width: 100%
}

.univer-cursor-pointer {
  cursor: pointer
}

.univer-overflow-visible {
  overflow: visible
}

.univer-whitespace-nowrap {
  white-space: nowrap
}

.univer-rounded-l {
  border-top-left-radius: .25rem;
  border-bottom-left-radius: .25rem
}

.univer-border {
  border-width: 1px
}

.univer-border-r-0 {
  border-right-width: 0px
}

.univer-border-\[\#5790f6\] {
  --tw-border-opacity: 1;
  border-color: #5790f6;
  border-color: rgba(87, 144, 246, var(--tw-border-opacity, 1))
}

.univer-bg-\[\#1a73e8\] {
  --tw-bg-opacity: 1;
  background-color: #1a73e8;
  background-color: rgba(26, 115, 232, var(--tw-bg-opacity, 1))
}

.univer-p-0\.5 {
  padding: .125rem
}

.univer-text-\[11px\] {
  font-size: 11px
}

.univer-font-bold {
  font-weight: 700
}

.univer-leading-\[13px\] {
  line-height: 13px
}

.univer-text-white {
  --tw-text-opacity: 1;
  color: #fff;
  color: rgba(255, 255, 255, var(--tw-text-opacity, 1))
}

.univer-sheet-embedding-formula-editor-active {
  border-color: rgb(var(--hyacinth-500)) !important
}

.univer-sheet-embedding-formula-editor-wrap {
  height: 32px;
  padding: 6px 8px 2px 6px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 8px;
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--border-radius-base);
  box-sizing: border-box;
  position: relative
}

.univer-sheet-embedding-formula-editor-wrap .univer-sheet-embedding-formula-editor-text {
  width: 100%;
  height: 100%;
  position: relative
}

.univer-sheet-embedding-formula-editor-error {
  border: 1px solid rgb(var(--red-500)) !important
}

.univer-sheet-embedding-formula-editor .univer-sheet-embedding-formula-editor-error-wrap {
  font-size: 12px;
  color: rgb(var(--red-500));
  margin: var(--margin-xxs) 0
}

.univer-sheet-range-selector-text-wrap {
  height: 32px;
  padding: 6px 8px 2px 6px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 8px;
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--border-radius-base);
  box-sizing: border-box;
  position: relative
}

.univer-sheet-range-selector-placeholder {
  font-size: 14px;
  color: rgb(var(--grey-500));
  position: absolute;
  left: 5px;
  bottom: 8px
}

.univer-sheet-range-selector-error {
  border: 1px solid rgb(var(--red-500)) !important
}

.univer-sheet-range-selector-error-wrap {
  font-size: 12px;
  color: rgb(var(--red-500));
  position: absolute;
  bottom: -18px;
  left: 0
}

.univer-sheet-range-selector-text {
  position: relative;
  height: 22px;
  width: 100%
}

.univer-sheet-range-selector-active {
  border-color: rgb(var(--hyacinth-500))
}

.univer-sheet-range-selector-icon {
  cursor: pointer
}

.univer-sheet-range-selector-dialog {
  max-height: 240px;
  overflow-y: scroll;
  scrollbar-color: rgba(115, 115, 115, .4) transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin
}

.univer-sheet-range-selector-dialog-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  margin-bottom: 8px
}

.univer-sheet-range-selector-dialog-item-delete {
  cursor: pointer
}

.univer-formula-help-function {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  box-sizing: border-box;
  width: 250px;
  margin: 0;
  line-height: 20px;
  list-style: none;
  background-color: rgb(var(--bg-color-secondary));
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--border-radius-lg);
  outline: none;
  box-shadow: var(--box-shadow-base)
}

.univer-formula-help-function-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: var(--padding-base) var(--padding-lg);
  font-size: var(--font-size-xxs);
  font-weight: 500;
  color: rgb(var(--text-color));
  word-wrap: anywhere;
  border-bottom: 1px solid rgb(var(--border-color))
}

.univer-formula-help-function-title-icons {
  display: flex
}

.univer-formula-help-function-title-icon {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: var(--margin-xs);
  padding: 0;
  font-size: var(--font-size-xs);
  color: rgb(var(--text-color-secondary));
  background-color: transparent;
  border: none;
  border-radius: var(--border-radius-base);
  outline: none;
  transition: background-color .2s
}

.univer-formula-help-function-title-icon:hover {
  background-color: rgb(var(--bg-color-hover))
}

.univer-formula-help-function-content {
  overflow-y: auto;
  box-sizing: border-box;
  max-height: 350px;
  padding: 0 var(--padding-lg) var(--padding-base) var(--padding-lg)
}

.univer-formula-help-function-content-inner {
  margin-top: var(--margin-sm)
}

.univer-formula-help-function-content-params {
  margin: var(--margin-xs) 0
}

.univer-formula-help-function-content-params-title {
  margin-bottom: var(--margin-xs);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: rgb(var(--text-color))
}

.univer-formula-help-function-content-params-detail {
  font-size: var(--font-size-xxs);
  font-weight: 400;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: rgb(var(--text-color-secondary))
}

.univer-formula-help-function-active {
  color: rgb(var(--primary-color))
}

.univer-formula-help-decorator {
  cursor: pointer;
  position: fixed;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-xs)
}

.univer-formula-help-param,
.univer-formula-help-param-prefix,
.univer-formula-help-param-item,
.univer-formula-help-param-active {
  z-index: 1
}

.univer-formula-search-function {
  box-sizing: border-box;
  width: 250px;
  max-height: 400px;
  margin: 0;
  padding: var(--padding-sm);
  line-height: 20px;
  list-style: none;
  background-color: rgb(var(--bg-color-secondary));
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--border-radius-lg);
  outline: none;
  box-shadow: var(--box-shadow-base);
  overflow: hidden;
  overflow-y: auto
}

.univer-formula-search-function-item {
  cursor: pointer;
  box-sizing: border-box;
  padding: var(--padding-xs) var(--padding-sm);
  color: rgb(var(--text-color));
  border-radius: var(--border-radius-base);
  transition: background .2s
}

.univer-formula-search-function-item-name {
  font-size: var(--font-size-xxs)
}

.univer-formula-search-function-item-name-light {
  color: rgb(var(--error-color))
}

.univer-formula-search-function-item-desc {
  display: block;
  font-size: var(--font-size-xxs);
  color: rgb(var(--grey-500))
}

.univer-formula-search-function-item-active {
  background-color: rgb(var(--bg-color-hover))
}

.univer-formula-more-functions {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  line-height: 20px
}

.univer-formula-more-functions-operation {
  display: flex;
  justify-content: flex-end
}

.univer-formula-more-functions-operation>button {
  margin: 0 0 var(--margin-lg) var(--margin-base)
}

.univer-formula-function-params {
  margin-bottom: var(--margin-xs);
  font-size: var(--font-size-xxs)
}

.univer-formula-function-params-title {
  font-weight: 500;
  color: rgb(var(--text-color-secondary))
}

.univer-formula-function-params-detail {
  font-weight: 400;
  color: rgb(var(--text-color))
}

.univer-formula-input-params-list {
  overflow-y: auto;
  height: 364px
}

.univer-formula-input-params-list-item-name {
  font-size: var(--font-size-sm)
}

.univer-formula-input-params-list-item-selector {
  margin: var(--margin-xxs) 0 var(--margin-xs) 0
}

.univer-formula-select-function-select {
  display: flex;
  gap: 10%;
  align-items: center;
  justify-content: space-between
}

.univer-formula-select-function-result {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  overflow-y: auto;
  box-sizing: border-box;
  width: 100%;
  max-height: 364px;
  margin: 0;
  margin-top: var(--margin-xs);
  padding: var(--padding-base);
  list-style: none;
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--border-radius-base);
  outline: none
}

.univer-formula-select-function-result-item {
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
  padding: var(--padding-xs) 28px;
  font-size: var(--font-size-xs);
  color: rgb(var(--text-color));
  border-radius: var(--border-radius-base);
  transition: background .2s
}

.univer-formula-select-function-result-item>span {
  display: block
}

.univer-formula-select-function-result-item-name-light {
  color: rgb(var(--error-color))
}

.univer-formula-select-function-result-item-selected {
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  font-size: var(--font-size-lg);
  color: rgb(var(--success-color))
}

.univer-formula-select-function-result-item-active {
  background-color: rgb(var(--bg-color-hover))
}

.univer-formula-select-function-content {
  overflow-y: auto;
  max-height: 307px;
  margin: var(--margin-xs) 0
}

.univer-flex {
  display: flex
}

.univer-grid {
  display: grid
}

.univer-h-7 {
  height: 1.75rem
}

.univer-items-center {
  align-items: center
}

.univer-justify-between {
  justify-content: space-between
}

.univer-gap-1 {
  gap: .25rem
}

.univer-gap-6 {
  gap: 1.5rem
}

.univer-rounded {
  border-radius: .25rem
}

.univer-p-1\.5 {
  padding: .375rem
}

.univer-px-2 {
  padding-left: .5rem;
  padding-right: .5rem
}

.univer-text-\[13px\] {
  font-size: 13px
}

.univer-text-sm {
  font-size: .875rem;
  line-height: 1.25rem
}

.univer-text-xs {
  font-size: .75rem;
  line-height: 1rem
}

.univer-text-gray-500 {
  --tw-text-opacity: 1;
  color: #5f6574;
  color: rgba(95, 101, 116, var(--tw-text-opacity, 1))
}

.hover\:univer-bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: #eeeff1;
  background-color: rgba(238, 239, 241, var(--tw-bg-opacity, 1))
}

.options {
  display: flex;
  justify-content: space-between
}

.options .w-140 {
  width: 140px
}

.options .w-120 {
  width: 120px
}

.univer-custom-format-title {
  margin-top: 16px
}

.univer-custom-format-input {
  margin-top: 8px;
  width: 100%
}

.univer-custom-format-history-list {
  margin-top: 8px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #e5e5e5;
  border: 1px solid var(---Grey-200, #e5e5e5);
  max-height: 400px;
  overflow: scroll
}

.univer-custom-format-history-list-item {
  padding: 6px 0;
  display: flex;
  gap: 6px;
  align-items: center;
  cursor: pointer
}

.univer-custom-format-history-list-item-icon-wrap {
  width: 16px;
  display: flex;
  align-items: center;
  color: #274fee
}

.univer-custom-format-des {
  margin-top: 8px;
  color: #7a7a7a;
  color: var(---Grey-600, #7a7a7a);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px
}

.numfmt-panel {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%
}

.numfmt-panel .group-title {
  font-size: 16px;
  color: rgba(var(--color-black))
}

.numfmt-panel .label {
  font-size: 15px;
  color: rgba(var(--grey-400))
}

.numfmt-panel .describe {
  font-size: 13px;
  line-height: 20px;
  color: rgba(var(--grey-600))
}

.numfmt-panel .preview {
  height: 36px;
  padding: 0 16px;
  font-size: 14px;
  line-height: 36px;
  color: var(--color-black);
  border: 1px solid rgb(var(--grey-200));
  border-radius: 4px
}

.numfmt-panel .btn-list {
  display: flex;
  justify-content: flex-end
}

.numfmt-panel .m-r-12 {
  margin-right: 12px
}

.numfmt-panel .m-t-16 {
  margin-top: 16px
}

.numfmt-panel .m-t-14 {
  margin-top: 14px
}

.numfmt-panel .m-t-8 {
  margin-top: 8px
}

.numfmt-panel .m-b-20 {
  margin-bottom: 20px
}