@mescius/spread-sheets 19.0.5 → 19.1.0

package/styles/gc.spread.sheets.css

@@ -1181,6 +1181,37 @@ div.gc-search-outer-div input::-ms-clear {
   box-shadow: none;
 }
 
+.gc-hscrollbar-splitter {
+  position: relative;
+  float: left;
+  cursor: col-resize;
+  background-color: transparent;
+  display: none;
+  box-sizing: border-box;
+  -ms-touch-action: none;
+  touch-action: none;
+}
+
+.gc-hscrollbar-splitter-indicator {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 2px;
+  height: 12px;
+  --splitter-color: var(--splitter-grip-color, #a7abb0);
+  background: repeating-linear-gradient(to bottom, var(--splitter-color) 0px, var(--splitter-color) 2px, transparent 2px, transparent 4px);
+  background-position: 0 1px;
+}
+
+.gc-hscrollbar-splitter:hover .gc-hscrollbar-splitter-indicator {
+  --splitter-color: var(--splitter-hover-color, var(--splitter-grip-color, #a7abb0));
+}
+
+.gc-hscrollbar-splitter-indicator-active {
+  --splitter-color: var(--splitter-active-color, var(--splitter-hover-color, var(--splitter-grip-color, #a7abb0)));
+}
+
 .gc-scroll-mobile-container {
   padding: 2px;
   opacity: 1;
@@ -3097,6 +3128,7 @@ div[gcUIElement=gcSpread] .gc-list-control .gc-list-control-container .gc-list-c
   display: block;
   justify-self: flex-end;
   margin-left: auto;
+  transform: rotate(0);
 }
 div[gcUIElement=gcSpread] .gc-list-control .gc-list-control-container .gc-list-control-item .gc-list-control-item-text {
   letter-spacing: 0;
@@ -3148,7 +3180,7 @@ div[gcUIElement=gcSpread] .gc-list-control .gc-list-control-container .gc-list-c
   font-weight: bold;
   color: #444;
   padding: 3px 4px;
-  cursor: pointer;
+  cursor: default;
 }
 div[gcUIElement=gcSpread] .gc-list-control .gc-list-control-container .gc-list-control-tree .gc-list-control-tree-content {
   margin-left: 0.4em;
@@ -3181,7 +3213,7 @@ div[gcUIElement=gcSpread] .gc-list-control .gc-list-control-container .gc-list-c
   text-overflow: ellipsis;
 }
 
-.gc-slider {
+div[gcUIElement=gcSpread] .gc-slider {
   font-family: "Segoe UI", Calibri, Thonburi, Arial, Verdana, sans-serif, "Mongolian Baiti", "Microsoft Yi Baiti", "Javanese Text";
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
@@ -3200,59 +3232,59 @@ div[gcUIElement=gcSpread] .gc-list-control .gc-list-control-container .gc-list-c
   -ms-touch-action: none;
   touch-action: none;
 }
-.gc-slider.gc-slider-vertical {
+div[gcUIElement=gcSpread] .gc-slider.gc-slider-vertical {
   width: 12px;
   height: 100%;
   padding: 0 4px;
 }
-.gc-slider.gc-slider-vertical .gc-slider-rail {
+div[gcUIElement=gcSpread] .gc-slider.gc-slider-vertical .gc-slider-rail {
   width: 4px;
   height: 100%;
 }
-.gc-slider.gc-slider-vertical .gc-slider-track {
+div[gcUIElement=gcSpread] .gc-slider.gc-slider-vertical .gc-slider-track {
   width: 4px;
 }
-.gc-slider.gc-slider-vertical .gc-slider-step {
+div[gcUIElement=gcSpread] .gc-slider.gc-slider-vertical .gc-slider-step {
   width: 4px;
   height: 100%;
 }
-.gc-slider.gc-slider-vertical .gc-slider-step .gc-slider-dot {
+div[gcUIElement=gcSpread] .gc-slider.gc-slider-vertical .gc-slider-step .gc-slider-dot {
   top: auto;
   left: 0px;
   margin-bottom: -4px;
   box-sizing: content-box;
 }
-.gc-slider.gc-slider-vertical .gc-slider-handle {
+div[gcUIElement=gcSpread] .gc-slider.gc-slider-vertical .gc-slider-handle {
   margin-bottom: -7px;
   margin-left: -7px;
 }
-.gc-slider.gc-slider-vertical .gc-slider-mark {
+div[gcUIElement=gcSpread] .gc-slider.gc-slider-vertical .gc-slider-mark {
   top: 0;
   left: 12px;
   width: 18px;
   height: 100%;
 }
-.gc-slider.gc-slider-vertical .gc-slider-mark .gc-slider-mark-text {
+div[gcUIElement=gcSpread] .gc-slider.gc-slider-vertical .gc-slider-mark .gc-slider-mark-text {
   left: 4px;
   white-space: nowrap;
 }
-.gc-slider.gc-slider-with-marks {
+div[gcUIElement=gcSpread] .gc-slider.gc-slider-with-marks {
   padding-bottom: 32px;
 }
-.gc-slider.gc-slider-disabled {
+div[gcUIElement=gcSpread] .gc-slider.gc-slider-disabled {
   cursor: not-allowed;
 }
-.gc-slider.gc-slider-disabled .gc-slider-track {
+div[gcUIElement=gcSpread] .gc-slider.gc-slider-disabled .gc-slider-track {
   background-color: rgba(0, 0, 0, 0.25);
 }
-.gc-slider.gc-slider-disabled .gc-slider-handle {
+div[gcUIElement=gcSpread] .gc-slider.gc-slider-disabled .gc-slider-handle {
   background-color: #fff;
   border-color: rgba(0, 0, 0, 0.25);
   -webkit-box-shadow: none;
   box-shadow: none;
   cursor: not-allowed;
 }
-.gc-slider.gc-slider-disabled .gc-slider-step .gc-slider-dot {
+div[gcUIElement=gcSpread] .gc-slider.gc-slider-disabled .gc-slider-step .gc-slider-dot {
   background-color: #fff;
   border-color: rgba(0, 0, 0, 0.25);
   -webkit-box-shadow: none;
@@ -3260,10 +3292,10 @@ div[gcUIElement=gcSpread] .gc-list-control .gc-list-control-container .gc-list-c
   cursor: not-allowed;
   cursor: not-allowed;
 }
-.gc-slider.gc-slider-disabled .gc-slider-mark .gc-slider-mark-text {
+div[gcUIElement=gcSpread] .gc-slider.gc-slider-disabled .gc-slider-mark .gc-slider-mark-text {
   cursor: not-allowed;
 }
-.gc-slider .gc-slider-rail {
+div[gcUIElement=gcSpread] .gc-slider .gc-slider-rail {
   position: absolute;
   width: 100%;
   height: 4px;
@@ -3272,7 +3304,7 @@ div[gcUIElement=gcSpread] .gc-list-control .gc-list-control-container .gc-list-c
   -webkit-transition: background-color 0.3s;
   transition: background-color 0.3s;
 }
-.gc-slider .gc-slider-track {
+div[gcUIElement=gcSpread] .gc-slider .gc-slider-track {
   position: absolute;
   height: 4px;
   background-color: #91d5ff;
@@ -3280,13 +3312,13 @@ div[gcUIElement=gcSpread] .gc-list-control .gc-list-control-container .gc-list-c
   -webkit-transition: background-color 0.3s ease;
   transition: background-color 0.3s ease;
 }
-.gc-slider .gc-slider-step {
+div[gcUIElement=gcSpread] .gc-slider .gc-slider-step {
   position: absolute;
   width: 100%;
   height: 4px;
   background: transparent;
 }
-.gc-slider .gc-slider-step .gc-slider-dot {
+div[gcUIElement=gcSpread] .gc-slider .gc-slider-step .gc-slider-dot {
   position: absolute;
   top: -4px;
   width: 8px;
@@ -3297,13 +3329,13 @@ div[gcUIElement=gcSpread] .gc-list-control .gc-list-control-container .gc-list-c
   border-radius: 50%;
   cursor: pointer;
 }
-.gc-slider .gc-slider-step .gc-slider-dot:first-child {
+div[gcUIElement=gcSpread] .gc-slider .gc-slider-step .gc-slider-dot:first-child {
   margin-left: -4px;
 }
-.gc-slider .gc-slider-step .gc-slider-dot-active {
+div[gcUIElement=gcSpread] .gc-slider .gc-slider-step .gc-slider-dot-active {
   border-color: #91d5ff;
 }
-.gc-slider .gc-slider-handle {
+div[gcUIElement=gcSpread] .gc-slider .gc-slider-handle {
   position: absolute;
   width: 14px;
   height: 14px;
@@ -3322,30 +3354,30 @@ div[gcUIElement=gcSpread] .gc-list-control .gc-list-control-container .gc-list-c
   transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
   transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28), -webkit-box-shadow 0.6s, -webkit-transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
 }
-.gc-slider .gc-slider-handle:focus {
+div[gcUIElement=gcSpread] .gc-slider .gc-slider-handle:focus {
   border-color: #3498db;
   outline: none;
   -webkit-box-shadow: 0 0 0 5px rgba(24, 144, 255, 0.2);
   box-shadow: 0 0 0 5px rgba(24, 144, 255, 0.2);
 }
-.gc-slider .gc-slider-mark {
+div[gcUIElement=gcSpread] .gc-slider .gc-slider-mark {
   position: absolute;
   top: 30px;
   left: 0;
   width: 100%;
   font-size: 14px;
 }
-.gc-slider .gc-slider-mark .gc-slider-mark-text {
+div[gcUIElement=gcSpread] .gc-slider .gc-slider-mark .gc-slider-mark-text {
   position: absolute;
   display: inline-block;
   color: rgba(0, 0, 0, 0.45);
   text-align: center;
   cursor: pointer;
 }
-.gc-slider .gc-slider-mark .gc-slider-mark-text-active {
+div[gcUIElement=gcSpread] .gc-slider .gc-slider-mark .gc-slider-mark-text-active {
   color: rgba(0, 0, 0, 0.65);
 }
-.gc-slider .gc-slider-tooltip {
+div[gcUIElement=gcSpread] .gc-slider .gc-slider-tooltip {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   margin: 0;
@@ -3363,10 +3395,10 @@ div[gcUIElement=gcSpread] .gc-list-control .gc-list-control-container .gc-list-c
   max-width: 250px;
   visibility: visible;
 }
-.gc-slider .gc-slider-tooltip.gc-slider-tooltip-placement-top {
+div[gcUIElement=gcSpread] .gc-slider .gc-slider-tooltip.gc-slider-tooltip-placement-top {
   padding-bottom: 8px;
 }
-.gc-slider .gc-slider-tooltip .gc-slider-tooltip-arrow {
+div[gcUIElement=gcSpread] .gc-slider .gc-slider-tooltip .gc-slider-tooltip-arrow {
   left: 50%;
   margin-left: -5px;
   position: absolute;
@@ -3378,7 +3410,7 @@ div[gcUIElement=gcSpread] .gc-list-control .gc-list-control-container .gc-list-c
   border-width: 5px 5px 0;
   border-top-color: rgba(0, 0, 0, 0.75);
 }
-.gc-slider .gc-slider-tooltip .gc-slider-tooltip-inner {
+div[gcUIElement=gcSpread] .gc-slider .gc-slider-tooltip .gc-slider-tooltip-inner {
   min-width: 10px;
   min-height: 12px;
   padding: 6px 8px;
@@ -3391,12 +3423,11 @@ div[gcUIElement=gcSpread] .gc-list-control .gc-list-control-container .gc-list-c
   -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }
-
-.gc-slider-container {
+div[gcUIElement=gcSpread] .gc-slider-container {
   background-color: white;
   box-sizing: content-box;
 }
-.gc-slider-container.gc-slider-vertical {
+div[gcUIElement=gcSpread] .gc-slider-container.gc-slider-vertical {
   padding: 20px 0;
   padding-right: 10px;
 }
@@ -3528,6 +3559,11 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   overflow: auto;
 }
 
+/* Base Style */
+/* Tools */
+/* Component */
+/* Layout */
+/* SVG Checkbox */
 .gc-panel-all {
   width: 100%;
   height: 100%;
@@ -3616,17 +3652,30 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
 }
 
 .gc-panel-checkbox {
+  margin: 0px;
   appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
   outline: none;
   display: inline-block;
-  line-height: 22px;
-  width: 14px;
-  height: 14px;
-  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTRweCIgaGVpZ2h0PSIxNHB4IiB2aWV3Qm94PSIwIDAgMTQgMTQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+Y2hlY2tfZGFyazwvdGl0bGU+CiAgICA8ZyBpZD0iY2hlY2tfZGFyayIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTEzLDEgTDEzLDEzIEwxLDEzIEwxLDEgTDEzLDEgWiBNMTIsMiBMMiwyIEwyLDEyIEwxMiwxMiBMMTIsMiBaIiBpZD0i5b2i54q257uT5ZCIIiBmaWxsPSIjNjk2OTY5Ij48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==);
+  width: 13px;
+  height: 13px;
+  background-color: transparent;
+  background-size: contain;
+  background-repeat: no-repeat;
   cursor: default;
+  vertical-align: middle;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjEgMSAxNCAxNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGU+Q2hlY2tib3gtVW5jaGVja2VkPC90aXRsZT48ZyBpZD0iQ2hlY2tib3gtVW5jaGVja2VkIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTMsMSBDMTQuMTA0NTY5NSwxIDE1LDEuODk1NDMwNSAxNSwzIEwxNSwxMyBDMTUsMTQuMTA0NTY5NSAxNC4xMDQ1Njk1LDE1IDEzLDE1IEwzLDE1IEMxLjg5NTQzMDUsMTUgMSwxNC4xMDQ1Njk1IDEsMTMgTDEsMyBDMSwxLjg5NTQzMDUgMS44OTU0MzA1LDEgMywxIEwxMywxIFogTTEzLDIuNSBMMywyLjUgQzIuNzIzODU3NjMsMi41IDIuNSwyLjcyMzg1NzYzIDIuNSwzIEwyLjUsMTMgQzIuNSwxMy4yNzYxNDI0IDIuNzIzODU3NjMsMTMuNSAzLDEzLjUgTDEzLDEzLjUgQzEzLjI3NjE0MjQsMTMuNSAxMy41LDEzLjI3NjE0MjQgMTMuNSwxMyBMMTMuNSwzIEMxMy41LDIuNzIzODU3NjMgMTMuMjc2MTQyNCwyLjUgMTMsMi41IFoiIGlkPSJjYiIgZmlsbD0iYmxhY2siPjwvcGF0aD48L2c+PC9zdmc+);
+  line-height: 22px;
+  width: 12px;
+  height: 12px;
+  position: relative;
+  top: -1px;
+  margin-left: 13px;
+  margin-right: 1px;
 }
 .gc-panel-checkbox:checked {
-  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTRweCIgaGVpZ2h0PSIxNHB4IiB2aWV3Qm94PSIwIDAgMTQgMTQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+Y2hlY2tfZGFyazwvdGl0bGU+CiAgICA8ZyBpZD0iY2hlY2tfZGFyayIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBvbHlnb24gaWQ9IlBhdGgtNCIgZmlsbD0iIzY5Njk2OSIgZmlsbC1ydWxlPSJub256ZXJvIiBwb2ludHM9IjExLjA2MDIyNjkgMyAxMiAzLjc1MDMxMDI5IDUuODIxNDMxODEgMTEgMiA3LjE0MDcwNzQzIDIuOTM5NzczMTQgNi4zOTAzOTcxMyA1LjgyMTQzMTgxIDkuMzAwNjA1OCI+PC9wb2x5Z29uPgogICAgICAgIDxwYXRoIGQ9Ik0xMywxIEwxMywxMyBMMSwxMyBMMSwxIEwxMywxIFogTTEyLDIgTDIsMiBMMiwxMiBMMTIsMTIgTDEyLDIgWiIgaWQ9IuW9oueKtue7k+WQiCIgZmlsbD0iIzY5Njk2OSI+PC9wYXRoPgogICAgPC9nPgo8L3N2Zz4=);
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjEgMSAxNCAxNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGU+Q2hlY2tib3gtQ2hlY2tlZDwvdGl0bGU+PGcgaWQ9IkNoZWNrYm94LUNoZWNrZWQiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xMywxIEMxNC4xMDQ1Njk1LDEgMTUsMS44OTU0MzA1IDE1LDMgTDE1LDEzIEMxNSwxNC4xMDQ1Njk1IDE0LjEwNDU2OTUsMTUgMTMsMTUgTDMsMTUgQzEuODk1NDMwNSwxNSAxLDE0LjEwNDU2OTUgMSwxMyBMMSwzIEMxLDEuODk1NDMwNSAxLjg5NTQzMDUsMSAzLDEgTDEzLDEgWiBNMTIuNTU0MzcwNiw0LjcxOTY2OTkxIEMxMi4yNjE0Nzc0LDQuNDI2Nzc2NyAxMS43ODY2MDM3LDQuNDI2Nzc2NyAxMS40OTM3MTA1LDQuNzE5NjY5OTEgTDYuNjg3NjYxMzcsOS41MjUgTDQuNDQwOTkxNDUsNy4yNzgzNDQ3OSBDNC4xNDgwOTgyMyw2Ljk4NTQ1MTU4IDMuNjczMjI0NSw2Ljk4NTQ1MTU4IDMuMzgwMzMxMjgsNy4yNzgzNDQ3OSBDMy4wODc0MzgwNiw3LjU3MTIzODAxIDMuMDg3NDM4MDYsOC4wNDYxMTE3NSAzLjM4MDMzMTI4LDguMzM5MDA0OTcgTDYuMTU3NjgzNDMsMTEuMTE2MzU3MSBDNi4yOTA4MTY3MSwxMS4yNDk0OTA0IDYuNDYxNTQ5MjcsMTEuMzIyMTA4NSA2LjYzNTY5OTk1LDExLjMzNDIxMTYgTDYuNzQwMzI3MDgsMTEuMzM0MjExNiBMNi44NDQxMzM4NiwxMS4zMTk2ODc5IEM2Ljk4MTI2NjgxLDExLjI5MDY0MDcgNy4xMTE4MzY5OCwxMS4yMjI4NjM3IDcuMjE4MzQzNiwxMS4xMTYzNTcxIEwxMi41NTQzNzA2LDUuNzgwMzMwMDkgQzEyLjg0NzI2MzgsNS40ODc0MzY4NyAxMi44NDcyNjM4LDUuMDEyNTYzMTMgMTIuNTU0MzcwNiw0LjcxOTY2OTkxIFoiIGlkPSJjYiIgZmlsbD0iYmxhY2siPjwvcGF0aD48L2c+PC9zdmc+);
 }
 
 .gc-panel-collapse {
@@ -3725,6 +3774,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   width: 100%;
   height: calc(52% - 60px);
   color: black;
+  overflow: hidden;
 }
 .gc-panel-stack .gc-panel-fields-section[containArea=false] {
   height: calc(100% - 30px);
@@ -3812,15 +3862,22 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   height: calc(100% - 50px);
   color: black;
   float: left;
-  overflow-y: scroll;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.gc-panel-flow .gc-panel-fields-section > span {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .gc-panel-flow .gc-panel-fields-section[containArea=false] {
   width: 100%;
   height: calc(100% - 30px);
 }
-.gc-panel-flow .gc-panel-fields-section span {
-  white-space: nowrap;
-  text-overflow: ellipsis;
+.gc-panel-flow .gc-panel-all-field {
+  height: calc(100% - 52px);
 }
 .gc-panel-flow > span {
   color: black;
@@ -3829,15 +3886,26 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   width: 49%;
   height: calc(100% - 50px);
   float: right;
-  overflow-y: scroll;
+  overflow-x: hidden;
+  overflow-y: auto;
   color: black;
 }
+.gc-panel-flow .gc-panel-areas-section > span:first-child {
+  display: block;
+  height: 20px;
+  line-height: 20px;
+  margin-bottom: 5px;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .gc-panel-flow .gc-panel-areas-section[containFields=false] {
   width: 100%;
   height: calc(100% - 40px);
 }
 .gc-panel-flow .gc-panel-field-area {
-  height: calc(100% - 40px);
+  height: calc(100% - 55px);
 }
 .gc-panel-flow .gc-panel-area-section {
   width: 100%;
@@ -3853,11 +3921,15 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
 .gc-panel-flow .gc-panel-area-section-Rows {
   border-right-color: transparent;
 }
+.gc-panel-flow .gc-panel-area-item-title,
+.gc-panel-flow .gc-panel-area-item-content {
+  width: 100%;
+}
 .gc-panel-flow .gc-panel-defer-layout-update {
   width: 100%;
   height: 20px;
   line-height: 20px;
-  display: inline-block;
+  display: block;
   margin: 5px 0;
 }
 .gc-panel-flow .gc-panel-field-area-text {
@@ -3868,8 +3940,9 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
 }
 
 .gc-panel-all-field {
+  position: relative;
   background-color: #FDFDFD;
-  height: calc(100% - 30px);
+  height: calc(100% - 66px);
   overflow-y: auto;
   border-bottom: 1px solid transparent;
   border-top: 1px solid transparent;
@@ -3906,13 +3979,13 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
 .gc-panel-all-field-checked {
   vertical-align: top;
   display: inline-block;
-  width: calc(100% - 45px);
+  width: calc(100% - 59px);
   overflow: hidden;
 }
 
 .gc-panel-all-field-item-filtered .gc-panel-all-field-unchecked,
 .gc-panel-all-field-item-filtered .gc-panel-all-field-checked {
-  width: calc(100% - 64px);
+  width: calc(100% - 78px);
 }
 
 .gc-panel-area-item-title {
@@ -3998,11 +4071,11 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
 }
 
 .gc-panel-bottomBorderStyle {
-  border-bottom: 2px solid green;
+  box-shadow: inset 0 -2px 0 #2f9e44;
 }
 
 .gc-panel-topBorderStyle {
-  border-top: 2px solid green;
+  box-shadow: inset 0 2px 0 #2f9e44;
 }
 
 .gc-panel-all-field-filter {
@@ -4055,6 +4128,100 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   background-color: #FDFDFD;
 }
 
+.gc-panel-search-box {
+  position: relative;
+  margin: 6px 0;
+  width: 100%;
+}
+
+.gc-panel-search-input {
+  width: 100%;
+  height: 24px;
+  padding: 4px 24px 4px 8px;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: 2px;
+  font-size: 12px;
+  font-family: inherit;
+  outline: none;
+  background-color: #FDFDFD;
+  color: black;
+}
+.gc-panel-search-input:focus {
+  border-color: #2c7a50;
+}
+.gc-panel-search-input::placeholder {
+  color: black;
+  opacity: 0.6;
+}
+
+.gc-panel-search-icon,
+.gc-panel-search-clear {
+  position: absolute;
+  right: 2px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.gc-panel-search-icon {
+  width: 20px;
+  height: 20px;
+  cursor: default;
+  pointer-events: auto;
+  z-index: 1;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath fill=%27%23666%27 d=%27M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z%27/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 14px 14px;
+}
+.gc-panel-search-icon.gc-panel-search-icon-hidden {
+  display: none;
+}
+
+.gc-panel-search-clear {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  pointer-events: auto;
+  z-index: 1;
+  border-radius: 2px;
+  display: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath fill=%27%23666%27 d=%27M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z%27/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 16px 16px;
+  transition: background-color 0.2s;
+}
+.gc-panel-search-clear.gc-panel-search-clear-visible {
+  display: flex;
+}
+.gc-panel-search-clear:hover {
+  background-color: #217346;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath fill=%27%23fff%27 d=%27M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z%27/%3E%3C/svg%3E");
+}
+
+.gc-panel-all-field-item-hidden {
+  display: none !important;
+}
+
+.gc-panel-all-field-no-matches {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: black;
+  opacity: 0.7;
+  font-size: 12px;
+  white-space: nowrap;
+  display: none;
+}
+.gc-panel-all-field-no-matches.gc-panel-all-field-no-matches-visible {
+  display: block;
+}
+
 .gc-ai-icon {
   width: 16px;
   height: 16px;
@@ -4688,6 +4855,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
 /* Tools */
 /* Component */
 /* Layout */
+/* SVG Checkbox */
 .gc-drop-down-list {
   box-shadow: rgba(0, 0, 0, 0.4) 1px 2px 5px;
   background: #fcfdfd;
@@ -5240,6 +5408,8 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   display: inline-block;
   padding-top: 10px;
   height: 100%;
+  width: calc(100% - 50px);
+  cursor: move;
 }
 
 .date-group-dialog-content-header,
@@ -5397,6 +5567,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   padding-top: 10px;
   height: 100%;
   width: calc(100% - 50px);
+  cursor: move;
 }
 
 .sjs-cancel-icon {
@@ -5542,6 +5713,8 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   display: inline-block;
   padding-top: 10px;
   height: 100%;
+  width: calc(100% - 50px);
+  cursor: move;
 }
 
 .value-filter-body {
@@ -5618,6 +5791,8 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   display: inline-block;
   padding-top: 10px;
   height: 100%;
+  width: calc(100% - 50px);
+  cursor: move;
 }
 
 .top-ten-filter-body {
@@ -6085,15 +6260,53 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
 .gc-sjs-field-settings-layout-showNoData-container .gc-sjs-field-settings-layout-showNoData, .gc-sjs-field-settings-layout-showNoData-container .gc-sjs-field-settings-layout-showSubtotalTop {
   margin: 0px;
   appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
   outline: none;
   display: inline-block;
   width: 13px;
   height: 13px;
-  background-color: white;
-  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTRweCIgaGVpZ2h0PSIxNHB4IiB2aWV3Qm94PSIwIDAgMTQgMTQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+Y2hlY2tfZGFyazwvdGl0bGU+CiAgICA8ZyBpZD0iY2hlY2tfZGFyayIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTEzLDEgTDEzLDEzIEwxLDEzIEwxLDEgTDEzLDEgWiBNMTIsMiBMMiwyIEwyLDEyIEwxMiwxMiBMMTIsMiBaIiBpZD0i5b2i54q257uT5ZCIIiBmaWxsPSIjNjk2OTY5Ij48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==);
+  background-color: transparent;
+  background-size: contain;
+  background-repeat: no-repeat;
+  cursor: default;
+  vertical-align: middle;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjEgMSAxNCAxNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGU+Q2hlY2tib3gtVW5jaGVja2VkPC90aXRsZT48ZyBpZD0iQ2hlY2tib3gtVW5jaGVja2VkIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTMsMSBDMTQuMTA0NTY5NSwxIDE1LDEuODk1NDMwNSAxNSwzIEwxNSwxMyBDMTUsMTQuMTA0NTY5NSAxNC4xMDQ1Njk1LDE1IDEzLDE1IEwzLDE1IEMxLjg5NTQzMDUsMTUgMSwxNC4xMDQ1Njk1IDEsMTMgTDEsMyBDMSwxLjg5NTQzMDUgMS44OTU0MzA1LDEgMywxIEwxMywxIFogTTEzLDIuNSBMMywyLjUgQzIuNzIzODU3NjMsMi41IDIuNSwyLjcyMzg1NzYzIDIuNSwzIEwyLjUsMTMgQzIuNSwxMy4yNzYxNDI0IDIuNzIzODU3NjMsMTMuNSAzLDEzLjUgTDEzLDEzLjUgQzEzLjI3NjE0MjQsMTMuNSAxMy41LDEzLjI3NjE0MjQgMTMuNSwxMyBMMTMuNSwzIEMxMy41LDIuNzIzODU3NjMgMTMuMjc2MTQyNCwyLjUgMTMsMi41IFoiIGlkPSJjYiIgZmlsbD0iYmxhY2siPjwvcGF0aD48L2c+PC9zdmc+);
+  vertical-align: text-bottom;
 }
 .gc-sjs-field-settings-layout-showNoData-container .gc-sjs-field-settings-layout-showNoData:checked, .gc-sjs-field-settings-layout-showNoData-container .gc-sjs-field-settings-layout-showSubtotalTop:checked {
-  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTRweCIgaGVpZ2h0PSIxNHB4IiB2aWV3Qm94PSIwIDAgMTQgMTQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+Y2hlY2tfZGFyazwvdGl0bGU+CiAgICA8ZyBpZD0iY2hlY2tfZGFyayIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBvbHlnb24gaWQ9IlBhdGgtNCIgZmlsbD0iIzY5Njk2OSIgZmlsbC1ydWxlPSJub256ZXJvIiBwb2ludHM9IjExLjA2MDIyNjkgMyAxMiAzLjc1MDMxMDI5IDUuODIxNDMxODEgMTEgMiA3LjE0MDcwNzQzIDIuOTM5NzczMTQgNi4zOTAzOTcxMyA1LjgyMTQzMTgxIDkuMzAwNjA1OCI+PC9wb2x5Z29uPgogICAgICAgIDxwYXRoIGQ9Ik0xMywxIEwxMywxMyBMMSwxMyBMMSwxIEwxMywxIFogTTEyLDIgTDIsMiBMMiwxMiBMMTIsMTIgTDEyLDIgWiIgaWQ9IuW9oueKtue7k+WQiCIgZmlsbD0iIzY5Njk2OSI+PC9wYXRoPgogICAgPC9nPgo8L3N2Zz4=);
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjEgMSAxNCAxNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGU+Q2hlY2tib3gtQ2hlY2tlZDwvdGl0bGU+PGcgaWQ9IkNoZWNrYm94LUNoZWNrZWQiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xMywxIEMxNC4xMDQ1Njk1LDEgMTUsMS44OTU0MzA1IDE1LDMgTDE1LDEzIEMxNSwxNC4xMDQ1Njk1IDE0LjEwNDU2OTUsMTUgMTMsMTUgTDMsMTUgQzEuODk1NDMwNSwxNSAxLDE0LjEwNDU2OTUgMSwxMyBMMSwzIEMxLDEuODk1NDMwNSAxLjg5NTQzMDUsMSAzLDEgTDEzLDEgWiBNMTIuNTU0MzcwNiw0LjcxOTY2OTkxIEMxMi4yNjE0Nzc0LDQuNDI2Nzc2NyAxMS43ODY2MDM3LDQuNDI2Nzc2NyAxMS40OTM3MTA1LDQuNzE5NjY5OTEgTDYuNjg3NjYxMzcsOS41MjUgTDQuNDQwOTkxNDUsNy4yNzgzNDQ3OSBDNC4xNDgwOTgyMyw2Ljk4NTQ1MTU4IDMuNjczMjI0NSw2Ljk4NTQ1MTU4IDMuMzgwMzMxMjgsNy4yNzgzNDQ3OSBDMy4wODc0MzgwNiw3LjU3MTIzODAxIDMuMDg3NDM4MDYsOC4wNDYxMTE3NSAzLjM4MDMzMTI4LDguMzM5MDA0OTcgTDYuMTU3NjgzNDMsMTEuMTE2MzU3MSBDNi4yOTA4MTY3MSwxMS4yNDk0OTA0IDYuNDYxNTQ5MjcsMTEuMzIyMTA4NSA2LjYzNTY5OTk1LDExLjMzNDIxMTYgTDYuNzQwMzI3MDgsMTEuMzM0MjExNiBMNi44NDQxMzM4NiwxMS4zMTk2ODc5IEM2Ljk4MTI2NjgxLDExLjI5MDY0MDcgNy4xMTE4MzY5OCwxMS4yMjI4NjM3IDcuMjE4MzQzNiwxMS4xMTYzNTcxIEwxMi41NTQzNzA2LDUuNzgwMzMwMDkgQzEyLjg0NzI2MzgsNS40ODc0MzY4NyAxMi44NDcyNjM4LDUuMDEyNTYzMTMgMTIuNTU0MzcwNiw0LjcxOTY2OTkxIFoiIGlkPSJjYiIgZmlsbD0iYmxhY2siPjwvcGF0aD48L2c+PC9zdmc+);
+}
+.gc-sjs-field-settings-layout-showNoData-container .gc-sjs-field-settings-layout-showNoData-label {
+  vertical-align: middle;
+}
+
+.filter-dialog-container input[type=checkbox],
+.date-group-dialog-container input[type=checkbox],
+.number-group-dialog-container input[type=checkbox],
+.gc-pivot-sort-dialog-container input[type=checkbox],
+.gc-pivot-sort-value-dialog-container input[type=checkbox] {
+  margin: 0px;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  outline: none;
+  display: inline-block;
+  width: 13px;
+  height: 13px;
+  background-color: transparent;
+  background-size: contain;
+  background-repeat: no-repeat;
+  cursor: default;
+  vertical-align: middle;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjEgMSAxNCAxNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGU+Q2hlY2tib3gtVW5jaGVja2VkPC90aXRsZT48ZyBpZD0iQ2hlY2tib3gtVW5jaGVja2VkIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTMsMSBDMTQuMTA0NTY5NSwxIDE1LDEuODk1NDMwNSAxNSwzIEwxNSwxMyBDMTUsMTQuMTA0NTY5NSAxNC4xMDQ1Njk1LDE1IDEzLDE1IEwzLDE1IEMxLjg5NTQzMDUsMTUgMSwxNC4xMDQ1Njk1IDEsMTMgTDEsMyBDMSwxLjg5NTQzMDUgMS44OTU0MzA1LDEgMywxIEwxMywxIFogTTEzLDIuNSBMMywyLjUgQzIuNzIzODU3NjMsMi41IDIuNSwyLjcyMzg1NzYzIDIuNSwzIEwyLjUsMTMgQzIuNSwxMy4yNzYxNDI0IDIuNzIzODU3NjMsMTMuNSAzLDEzLjUgTDEzLDEzLjUgQzEzLjI3NjE0MjQsMTMuNSAxMy41LDEzLjI3NjE0MjQgMTMuNSwxMyBMMTMuNSwzIEMxMy41LDIuNzIzODU3NjMgMTMuMjc2MTQyNCwyLjUgMTMsMi41IFoiIGlkPSJjYiIgZmlsbD0iYmxhY2siPjwvcGF0aD48L2c+PC9zdmc+);
+}
+.filter-dialog-container input[type=checkbox]:checked,
+.date-group-dialog-container input[type=checkbox]:checked,
+.number-group-dialog-container input[type=checkbox]:checked,
+.gc-pivot-sort-dialog-container input[type=checkbox]:checked,
+.gc-pivot-sort-value-dialog-container input[type=checkbox]:checked {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjEgMSAxNCAxNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGU+Q2hlY2tib3gtQ2hlY2tlZDwvdGl0bGU+PGcgaWQ9IkNoZWNrYm94LUNoZWNrZWQiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xMywxIEMxNC4xMDQ1Njk1LDEgMTUsMS44OTU0MzA1IDE1LDMgTDE1LDEzIEMxNSwxNC4xMDQ1Njk1IDE0LjEwNDU2OTUsMTUgMTMsMTUgTDMsMTUgQzEuODk1NDMwNSwxNSAxLDE0LjEwNDU2OTUgMSwxMyBMMSwzIEMxLDEuODk1NDMwNSAxLjg5NTQzMDUsMSAzLDEgTDEzLDEgWiBNMTIuNTU0MzcwNiw0LjcxOTY2OTkxIEMxMi4yNjE0Nzc0LDQuNDI2Nzc2NyAxMS43ODY2MDM3LDQuNDI2Nzc2NyAxMS40OTM3MTA1LDQuNzE5NjY5OTEgTDYuNjg3NjYxMzcsOS41MjUgTDQuNDQwOTkxNDUsNy4yNzgzNDQ3OSBDNC4xNDgwOTgyMyw2Ljk4NTQ1MTU4IDMuNjczMjI0NSw2Ljk4NTQ1MTU4IDMuMzgwMzMxMjgsNy4yNzgzNDQ3OSBDMy4wODc0MzgwNiw3LjU3MTIzODAxIDMuMDg3NDM4MDYsOC4wNDYxMTE3NSAzLjM4MDMzMTI4LDguMzM5MDA0OTcgTDYuMTU3NjgzNDMsMTEuMTE2MzU3MSBDNi4yOTA4MTY3MSwxMS4yNDk0OTA0IDYuNDYxNTQ5MjcsMTEuMzIyMTA4NSA2LjYzNTY5OTk1LDExLjMzNDIxMTYgTDYuNzQwMzI3MDgsMTEuMzM0MjExNiBMNi44NDQxMzM4NiwxMS4zMTk2ODc5IEM2Ljk4MTI2NjgxLDExLjI5MDY0MDcgNy4xMTE4MzY5OCwxMS4yMjI4NjM3IDcuMjE4MzQzNiwxMS4xMTYzNTcxIEwxMi41NTQzNzA2LDUuNzgwMzMwMDkgQzEyLjg0NzI2MzgsNS40ODc0MzY4NyAxMi44NDcyNjM4LDUuMDEyNTYzMTMgMTIuNTU0MzcwNiw0LjcxOTY2OTkxIFoiIGlkPSJjYiIgZmlsbD0iYmxhY2siPjwvcGF0aD48L2c+PC9zdmc+);
 }
 
 .pivot-field-summarize-header {
@@ -6363,6 +6576,11 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   text-align: center;
 }
 
+.gc-pivot-field-setting-title {
+  width: calc(100% - 54px);
+  cursor: move;
+}
+
 .gcSpread.shape-editor-container {
   font: 14.6667px Calibri, Helvetica Neue, Arial, sans-serif;
   outline: none;
@@ -7288,7 +7506,7 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   border: solid 1px var(--sjs-theme-border-color);
 }
 .gc-table-sheet-panel .gc-table-sheet-field-panel .gcsj-func-ac-popup, .gc-table-sheet-panel .gc-table-sheet-cross-column-field .gcsj-func-ac-popup, .gc-table-sheet-cross-column .gc-table-sheet-field-panel .gcsj-func-ac-popup, .gc-table-sheet-cross-column .gc-table-sheet-cross-column-field .gcsj-func-ac-popup {
-  width: 80%;
+  width: auto;
 }
 .gc-table-sheet-panel .gc-table-sheet-field-panel .gcsj-func-help-popup, .gc-table-sheet-panel .gc-table-sheet-cross-column-field .gcsj-func-help-popup, .gc-table-sheet-cross-column .gc-table-sheet-field-panel .gcsj-func-help-popup, .gc-table-sheet-cross-column .gc-table-sheet-cross-column-field .gcsj-func-help-popup {
   white-space: normal;
@@ -7798,6 +8016,27 @@ div[gcUIElement=gcSpread] .gc-base-spread-div {
   display: none;
 }
 
+.gc-table-sheet-sorts-btn-add,
+.gc-table-sheet-sorts-btn-remove {
+  display: inline-block;
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+  margin: 2px 2px 2px 0;
+  user-select: none;
+  box-sizing: border-box;
+  position: relative;
+  right: 4px;
+}
+
+.gc-table-sheet-sorts-btn-add {
+  background: url("data:image/svg+xml,%3Csvg width=%2716px%27 height=%2716px%27 viewBox=%270 0 16 16%27 version=%271.1%27 xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27%3E%3Cg stroke=%27none%27 stroke-width=%271%27 fill=%27%23666666%27 fill-rule=%27evenodd%27%3E%3Cpath d=%27M13,1 C14.6568542,1 16,2.34314575 16,4 L16,13 C16,14.6568542 14.6568542,16 13,16 L4,16 C2.34314575,16 1,14.6568542 1,13 L1,4 C1,2.34314575 2.34314575,1 4,1 L13,1 Z M13,2 L4,2 C2.8954305,2 2,2.8954305 2,4 L2,13 C2,14.1045695 2.8954305,15 4,15 L13,15 C14.1045695,15 15,14.1045695 15,13 L15,4 C15,2.8954305 14.1045695,2 13,2 Z M9,4 L9,8 L13,8 L13,9 L9,9 L9,13 L8,13 L8,9 L4,9 L4,8 L8,8 L8,4 L9,4 Z%27%3E%3C/path%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
+}
+
+.gc-table-sheet-sorts-btn-remove {
+  background: url("data:image/svg+xml,%3Csvg width=%2716px%27 height=%2716px%27 viewBox=%270 0 16 16%27 version=%271.1%27 xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27%3E%3Cg stroke=%27none%27 stroke-width=%271%27 fill=%27%23666666%27 fill-rule=%27evenodd%27%3E%3Cpath d=%27M13,1 C14.6568542,1 16,2.34314575 16,4 L16,13 C16,14.6568542 14.6568542,16 13,16 L4,16 C2.34314575,16 1,14.6568542 1,13 L1,4 C1,2.34314575 2.34314575,1 4,1 L13,1 Z M13,2 L4,2 C2.8954305,2 2,2.8954305 2,4 L2,13 C2,14.1045695 2.8954305,15 4,15 L13,15 C14.1045695,15 15,14.1045695 15,13 L15,4 C15,2.8954305 14.1045695,2 13,2 Z M13,8 L13,9 L4,9 L4,8 L13,8 Z%27%3E%3C/path%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
+}
+
 .gc-name-box-container {
   background-color: #ffffff;
   color: #000000;