amis-ui 3.1.0 → 3.2.0

package/lib/themes/default.css

@@ -202,6 +202,7 @@
   --ColorPicker-fontSize: var(--Form-input-fontSize);
   --ColorPicker-height: var(--Form-input-height);
   --ColorPicker-lineHeight: var(--Form-input-lineHeight);
+  --ColorPicker-height: var(--sizes-base-16);
   --ColorPicker-onDisabled-bg: var(--colors-neutral-fill-8);
   --ColorPicker-onDisabled-color: var(--text--muted-color);
   --ColorPicker-onFocused-borderColor: var(--Form-input-onFocused-borderColor);
@@ -463,6 +464,10 @@
   --ListMenu-item-bg: var(--colors-neutral-fill-11);
   --ListMenu-item-color: var(--colors-neutral-text-2);
   --ListMenu-item-height: var(--sizes-base-15);
+  --ListMenu-item-mobile-margin: 0.3125rem;
+  --ListMenu-item-mobile-width: 5.625rem;
+  --ListMenu-item-mobile-bg: #f5f5f5;
+  --ListMenu-item-mobile-active-bg: #e7f1ff;
   --Log-bg: #222;
   --Log-padding: var(--gap-sm) 0;
   --Log-line-padding: 0 var(--gap-sm);
@@ -559,6 +564,7 @@
   --PopOverAble-iconColor: inherit;
   --PopOverAble-onHover-iconColor: inherit;
   --PopUp-cancelAction-color: #666;
+  --PopUp-confirmAction-color: var(--primary);
   --Property-title-bg: #f2f2f2;
   --Property-label-bg: #f7f7f7;
   --Portlet-borderColor: var(--borderColor);
@@ -678,6 +684,20 @@
   --UserSelect--border-color: #f7f7f9;
   --UserSelect--content-bg: #f5f7f8;
   --UserSelect--bread-color: #5e626a;
+  --Cascader-border-color: #f7f7f9;
+  --Cascader-border-active-bg-color: #f7f7f9;
+  --Cascader-option-disable-color: #b8babf;
+  --Tag-content-fontSize: var(--fontSizeSm);
+  --Tag-height: 1.5rem;
+  --Tag-borderRadius: 0.125rem;
+  --Tag-fontColor: #151a26;
+  --Tag-default-color: #f2f2f4;
+  --Tag-inactive-color: #b8babf;
+  --Tag-active-color: var(--colors-brand-5);
+  --Tag-processing-color: var(--colors-brand-6);
+  --Tag-success-color: var(--colors-success-5);
+  --Tag-error-color: var(--colors-error-5);
+  --Tag-warning-color: var(--colors-warning-5);
   --Tag-checkable-bgColor: #f2f2f4;
   --Tag-checkable-bgColor-onDisable: #e6e6e8;
   --Tag-checkable-bgColor-onHover: #e6e6e8;
@@ -1895,8 +1915,8 @@
   );
   --inputNumber-enhance-default-paddingTop: var(--sizes-size-3);
   --inputNumber-enhance-default-paddingBottom: var(--sizes-size-3);
-  --inputNumber-enhance-default-paddingLeft: var(--sizes-size-7);
-  --inputNumber-enhance-default-paddingRight: var(--sizes-size-7);
+  --inputNumber-enhance-default-paddingLeft: var(--sizes-size-5);
+  --inputNumber-enhance-default-paddingRight: var(--sizes-size-5);
   --inputNumber-enhance-default-bg-color: var(--colors-neutral-fill-11);
   --inputNumber-enhance-hover-top-border-color: var(--colors-brand-5);
   --inputNumber-enhance-hover-top-border-width: var(--borders-width-2);
@@ -2009,6 +2029,11 @@
   );
   --inputNumber-enhance-leftIcon-default-icon: '<svg viewBox="0 0 12 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon icon-minus"><g id="minus" fill="currentColor" fill-rule="nonzero"><polygon id="path-1" points="0 1.6 0 0.4 12 0.4 12 1.6"></polygon></g></svg>';
   --inputNumber-enhance-rightIcon-default-icon: '<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" class="icon  icon-plus"><path d="M6.6 6.6V12H5.4V6.6H0V5.4h5.4V0h1.2v5.4H12v1.2z" fill="currentColor" fill-rule="nonzero"></path></svg>';
+  --inputNumber-enhance-mobile-input-width: 3.5rem;
+  --inputNumber-enhance-mobile-icon-width: 1.75rem;
+  --inputNumber-enhance-mobile-icon-height: 1.75rem;
+  --inputNumber-enhance-mobile-icon-inner-width: 1.6875rem;
+  --inputNumber-enhance-mobile-icon-inner-height: 1.6875rem;
   --Form-input-onHover-borderColor: var(--colors-brand-5);
   --Form-input-onFocused-borderColor: var(--colors-brand-5);
   --checkbox-checkbox-default-height: var(--sizes-size-9);
@@ -2351,6 +2376,7 @@
   --link-decoration: var(--link-text-decoration);
   --link-onHover-decoration: var(--link-onClick-text-decoration);
   --Form-item-gap: var(--sizes-base-12);
+  --Form-item-mobile-gap: var(--sizes-base-4);
   --Form-item-color: var(--colors-neutral-text-4);
   --Form-item-fontColor: var(--Form-item-color);
   --Form-item-fontSize: var(--fonts-size-7);
@@ -2394,6 +2420,8 @@
   --InputRange-track-onActive-bg: var(--colors-brand-5);
   --InputRange-handle-height: var(--sizes-size-9);
   --InputRange-handle-width: var(--sizes-size-9);
+  --InputRange-handle-mobile-height: var(--sizes-base-10);
+  --InputRange-handle-mobile-width: var(--sizes-base-10);
   --InputRange-handle-bg: var(--colors-neutral-fill-11);
   --InputRange-handle-top-border-color: var(--colors-brand-5);
   --InputRange-handle-top-border-width: 0.0625rem;
@@ -2410,7 +2438,7 @@
   --InputRange-handle-onFocus-borderRadius: var(
     --InputRange-handle-border-radius
   );
-  --InputRange-padding: 1.25rem;
+  --InputRange-padding: 1rem;
   --InputRange-handle-icon-width: var(--sizes-size-5);
   --InputRange-handle-icon-height: var(--sizes-size-5);
   --InputRange-handle-icon-color: var(--colors-brand-9);
@@ -2448,6 +2476,7 @@
   );
   --InputRange-label-position-bottom: calc(100% + 8px);
   --InputRange-input-width: var(--sizes-base-40);
+  --InputRange-input-mobile-width: var(--sizes-base-20);
   --InputRange-input-marginTop: var(--sizes-size-0);
   --InputRange-input-marginBottom: var(--sizes-size-0);
   --InputRange-input-marginLeft: var(--sizes-size-5);
@@ -3508,6 +3537,7 @@
   --select-tree-hover-bg-color: var(--colors-neutral-fill-10);
   --select-tree-active-bg-color: var(--colors-brand-10);
   --Form-select-bg: var(--select-base-default-bg-color);
+  --Form-select-mobile-icon-check-color: var(--colors-brand-5);
   --Form-select-height: var(--Form-select-outer-top);
   --Form-select-borderColor: var(--select-base-default-top-border-color)
     var(--select-base-default-right-border-color)
@@ -5085,14 +5115,17 @@
 }
 /* PADDING */
 .CodeMirror-lines {
-  padding: 4px 0; /* Vertical padding around content */
+  padding: 4px 0;
+  /* Vertical padding around content */
 }
 .CodeMirror pre.CodeMirror-line,
 .CodeMirror pre.CodeMirror-line-like {
-  padding: 0 4px; /* Horizontal padding of content */
+  padding: 0 4px;
+  /* Horizontal padding of content */
 }
 .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
-  background-color: white; /* The little square between H and V scrollbars */
+  background-color: white;
+  /* The little square between H and V scrollbars */
 }
 /* GUTTER */
 .CodeMirror-gutters {
@@ -5278,14 +5311,16 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
   background: white;
 }
 .CodeMirror-scroll {
-  overflow: scroll !important; /* Things will break if this is overridden */
+  overflow: scroll !important;
+  /* Things will break if this is overridden */
   /* 50px is the magic margin used to hide the element's real scrollbars */
   /* See overflow: hidden in .CodeMirror */
   margin-bottom: -50px;
   margin-right: -50px;
   padding-bottom: 50px;
   height: 100%;
-  outline: none; /* Prevent dragging from highlighting the element */
+  outline: none;
+  /* Prevent dragging from highlighting the element */
   position: relative;
   z-index: 0;
 }
@@ -5364,7 +5399,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
 }
 .CodeMirror-lines {
   cursor: text;
-  min-height: 1px; /* prevents collapsing before first draw */
+  min-height: 1px;
+  /* prevents collapsing before first draw */
 }
 .CodeMirror pre.CodeMirror-line,
 .CodeMirror pre.CodeMirror-line-like {
@@ -5402,7 +5438,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
 .CodeMirror-linewidget {
   position: relative;
   z-index: 2;
-  padding: 0.1px; /* Force widget margins to stay inside of the container */
+  padding: 0.1px;
+  /* Force widget margins to stay inside of the container */
 }
 .CodeMirror-rtl pre {
   direction: rtl;
@@ -5686,7 +5723,7 @@ img.fr-bordered {
   vertical-align: bottom;
   margin-left: 5px;
   margin-right: 5px;
-  max-width: calc(100% - 10px);
+  max-width: calc(100% - (2 * 5px));
 }
 .fr-view img.fr-dii.fr-fil {
   float: left;
@@ -5722,7 +5759,7 @@ img.fr-bordered {
   vertical-align: bottom;
   margin-left: 5px;
   margin-right: 5px;
-  max-width: calc(100% - 10px);
+  max-width: calc(100% - (2 * 5px));
 }
 .fr-view span.fr-img-caption.fr-dii.fr-fil {
   float: left;
@@ -5850,7 +5887,7 @@ img.fr-view.fr-dii {
   vertical-align: bottom;
   margin-left: 5px;
   margin-right: 5px;
-  max-width: calc(100% - 10px);
+  max-width: calc(100% - (2 * 5px));
 }
 img.fr-view.fr-dii.fr-fil {
   float: left;
@@ -5886,7 +5923,7 @@ span.fr-img-caption.fr-view.fr-dii {
   vertical-align: bottom;
   margin-left: 5px;
   margin-right: 5px;
-  max-width: calc(100% - 10px);
+  max-width: calc(100% - (2 * 5px));
 }
 span.fr-img-caption.fr-view.fr-dii.fr-fil {
   float: left;
@@ -6092,12 +6129,14 @@ iframe.fr-iframe {
   .fr-box.fr-document {
     min-width: 21cm;
   }
+
   .fr-box.fr-document .fr-wrapper {
     text-align: left;
     padding: 30px;
     min-width: 21cm;
     background: #efefef;
   }
+
   .fr-box.fr-document .fr-wrapper .fr-element {
     text-align: left;
     background: #FFF;
@@ -6108,6 +6147,7 @@ iframe.fr-iframe {
     overflow: visible;
     z-index: auto;
   }
+
   .fr-box.fr-document .fr-wrapper .fr-element hr {
     margin-left: -2cm;
     margin-right: -2cm;
@@ -6116,6 +6156,7 @@ iframe.fr-iframe {
     outline: none;
     border: none;
   }
+
   .fr-box.fr-document .fr-wrapper .fr-element img {
     z-index: 1;
   }
@@ -7286,7 +7327,7 @@ ol.decimal_type > li:before {
 }
 .fr-separator.fr-hs {
   clear: both;
-  width: calc(100% - 8px);
+  width: calc(100% - (2 * 4px));
   margin: 0 4px;
   height: 1px;
 }
@@ -8061,18 +8102,22 @@ body.fr-fullscreen {
     width: 10px;
     height: 10px;
   }
+
   .fr-image-resizer .fr-handler.fr-hnw {
     left: -5px;
     top: -5px;
   }
+
   .fr-image-resizer .fr-handler.fr-hne {
     right: -5px;
     top: -5px;
   }
+
   .fr-image-resizer .fr-handler.fr-hsw {
     left: -5px;
     bottom: -5px;
   }
+
   .fr-image-resizer .fr-handler.fr-hse {
     right: -5px;
     bottom: -5px;
@@ -8482,7 +8527,7 @@ div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img {
 }
 .fr-line-breaker a.fr-floating-btn {
   position: absolute;
-  left: calc(50% - 20px);
+  left: calc(50% - (40px / 2));
   top: -20px;
 }
 .fr-line-breaker a.fr-floating-btn svg {
@@ -8817,18 +8862,22 @@ div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img {
     width: 10px;
     height: 10px;
   }
+
   .fr-box .fr-video-resizer .fr-handler.fr-hnw {
     left: -5px;
     top: -5px;
   }
+
   .fr-box .fr-video-resizer .fr-handler.fr-hne {
     right: -5px;
     top: -5px;
   }
+
   .fr-box .fr-video-resizer .fr-handler.fr-hsw {
     left: -5px;
     bottom: -5px;
   }
+
   .fr-box .fr-video-resizer .fr-handler.fr-hse {
     right: -5px;
     bottom: -5px;
@@ -9130,7 +9179,7 @@ img.fr-bordered {
   vertical-align: bottom;
   margin-left: 5px;
   margin-right: 5px;
-  max-width: calc(100% - 10px);
+  max-width: calc(100% - (2 * 5px));
 }
 .fr-view img.fr-dii.fr-fil {
   float: left;
@@ -9166,7 +9215,7 @@ img.fr-bordered {
   vertical-align: bottom;
   margin-left: 5px;
   margin-right: 5px;
-  max-width: calc(100% - 10px);
+  max-width: calc(100% - (2 * 5px));
 }
 .fr-view span.fr-img-caption.fr-dii.fr-fil {
   float: left;
@@ -9294,7 +9343,7 @@ img.fr-view.fr-dii {
   vertical-align: bottom;
   margin-left: 5px;
   margin-right: 5px;
-  max-width: calc(100% - 10px);
+  max-width: calc(100% - (2 * 5px));
 }
 img.fr-view.fr-dii.fr-fil {
   float: left;
@@ -9330,7 +9379,7 @@ span.fr-img-caption.fr-view.fr-dii {
   vertical-align: bottom;
   margin-left: 5px;
   margin-right: 5px;
-  max-width: calc(100% - 10px);
+  max-width: calc(100% - (2 * 5px));
 }
 span.fr-img-caption.fr-view.fr-dii.fr-fil {
   float: left;
@@ -9899,7 +9948,7 @@ button::-moz-focus-inner {
   display: flex;
   height: 24px;
   justify-content: center;
-  padding: 3px;
+  padding: calc(4px - 1px);
   width: 24px;
 }
 .tox .tox-checkbox__icons .tox-checkbox-icon__unchecked svg {
@@ -9942,7 +9991,7 @@ button::-moz-focus-inner {
 .tox input.tox-checkbox__input:focus + .tox-checkbox__icons {
   border-radius: 6px;
   box-shadow: inset 0 0 0 1px #006ce7;
-  padding: 3px;
+  padding: calc(4px - 1px);
 }
 .tox:not([dir=rtl]) .tox-checkbox__label {
   margin-left: 4px;
@@ -10386,7 +10435,7 @@ button::-moz-focus-inner {
   display: none;
   fill: #222f3e;
   height: 24px;
-  margin: 3px 3px;
+  margin: calc((30px - 24px) / 2) calc((30px - 24px) / 2);
   width: 24px;
 }
 .tox div.tox-swatch:not(.tox-swatch--remove) svg path {
@@ -10660,7 +10709,7 @@ button::-moz-focus-inner {
   body:not(.tox-force-desktop) .tox .tox-dialog {
     align-self: flex-start;
     margin: 8px auto;
-    max-height: calc(100vh - 16px);
+    max-height: calc(100vh - 8px * 2);
     width: calc(100vw - 16px);
   }
 }
@@ -10725,8 +10774,14 @@ button::-moz-focus-inner {
   align-items: flex-start;
   display: flex;
   flex-direction: column;
+  flex-shrink: 0;
   padding: 16px 16px;
 }
+@media only screen and (min-width: 768px) {
+  .tox .tox-dialog__body-nav {
+    max-width: 11em;
+  }
+}
 @media only screen and (max-width: 767px) {
   body:not(.tox-force-desktop) .tox .tox-dialog__body-nav {
     flex-direction: row;
@@ -10739,11 +10794,12 @@ button::-moz-focus-inner {
   border-bottom: 2px solid transparent;
   color: rgba(34, 47, 62, 0.7);
   display: inline-block;
+  flex-shrink: 0;
   font-size: 14px;
   line-height: 1.3;
   margin-bottom: 8px;
+  max-width: 13em;
   text-decoration: none;
-  white-space: nowrap;
 }
 .tox .tox-dialog__body-nav-item:focus {
   background-color: rgba(0, 108, 231, 0.1);
@@ -10757,7 +10813,7 @@ button::-moz-focus-inner {
   display: flex;
   flex: 1;
   flex-direction: column;
-  max-height: 650px;
+  max-height: min(650px, calc(100vh - 110px));
   overflow: auto;
   -webkit-overflow-scrolling: touch;
   padding: 16px 16px;
@@ -10793,16 +10849,33 @@ button::-moz-focus-inner {
 .tox .tox-dialog__body-content svg {
   fill: #222f3e;
 }
+.tox .tox-dialog__body-content strong {
+  font-weight: bold;
+}
 .tox .tox-dialog__body-content ul {
-  display: block;
   list-style-type: disc;
+}
+.tox .tox-dialog__body-content ul,
+.tox .tox-dialog__body-content ol,
+.tox .tox-dialog__body-content dd {
+  -webkit-padding-start: 2.5rem;
+          padding-inline-start: 2.5rem;
+}
+.tox .tox-dialog__body-content ul,
+.tox .tox-dialog__body-content ol,
+.tox .tox-dialog__body-content dl {
   margin-bottom: 16px;
+}
+.tox .tox-dialog__body-content ul,
+.tox .tox-dialog__body-content ol,
+.tox .tox-dialog__body-content dl,
+.tox .tox-dialog__body-content dd,
+.tox .tox-dialog__body-content dt {
+  display: block;
   -webkit-margin-end: 0;
           margin-inline-end: 0;
   -webkit-margin-start: 0;
           margin-inline-start: 0;
-  -webkit-padding-start: 2.5rem;
-          padding-inline-start: 2.5rem;
 }
 .tox .tox-dialog__body-content .tox-form__group h1 {
   color: #222f3e;
@@ -11240,13 +11313,13 @@ body.tox-dialog__disable-scroll {
   justify-content: space-between;
 }
 .tox .tox-form__grid--2col > .tox-form__group {
-  width: calc(50% - 4px);
+  width: calc(50% - (8px / 2));
 }
 .tox .tox-form__grid--3col > .tox-form__group {
-  width: calc(33.3333333333% - 4px);
+  width: calc(100% / 3 - (8px / 2));
 }
 .tox .tox-form__grid--4col > .tox-form__group {
-  width: calc(25% - 4px);
+  width: calc(25% - (8px / 2));
 }
 .tox .tox-form__controls-h-stack {
   align-items: center;
@@ -12297,6 +12370,9 @@ body.tox-dialog__disable-scroll {
 .tox .tox-tbtn:active svg {
   fill: #222f3e;
 }
+.tox .tox-tbtn--disabled .tox-tbtn--enabled svg {
+  fill: rgba(34, 47, 62, 0.5);
+}
 .tox .tox-tbtn--disabled,
 .tox .tox-tbtn--disabled:hover,
 .tox .tox-tbtn:disabled,
@@ -12330,6 +12406,10 @@ body.tox-dialog__disable-scroll {
   /* stylelint-disable-line no-descending-specificity */
   fill: #222f3e;
 }
+.tox .tox-tbtn--enabled.tox-tbtn--disabled svg,
+.tox .tox-tbtn--enabled:hover.tox-tbtn--disabled svg {
+  fill: rgba(34, 47, 62, 0.5);
+}
 .tox .tox-tbtn:focus:not(.tox-tbtn--disabled) {
   color: #222f3e;
 }
@@ -12397,6 +12477,13 @@ body.tox-dialog__disable-scroll {
   background: #fff;
   color: #222f3e;
 }
+.tox .tox-number-input input:disabled {
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  color: rgba(34, 47, 62, 0.5);
+  cursor: not-allowed;
+}
 .tox .tox-number-input button {
   background: #f7f7f7;
   color: #222f3e;
@@ -12431,6 +12518,16 @@ body.tox-dialog__disable-scroll {
 .tox .tox-number-input button:active svg {
   fill: #222f3e;
 }
+.tox .tox-number-input button:disabled {
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  color: rgba(34, 47, 62, 0.5);
+  cursor: not-allowed;
+}
+.tox .tox-number-input button:disabled svg {
+  fill: rgba(34, 47, 62, 0.5);
+}
 .tox .tox-number-input button.minus {
   border-radius: 3px 0 0 3px;
 }
@@ -12477,6 +12574,10 @@ body.tox-dialog__disable-scroll {
   white-space: nowrap;
   width: 7em;
 }
+.tox .tox-tbtn--disabled .tox-tbtn__select-label,
+.tox .tox-tbtn--select:disabled .tox-tbtn__select-label {
+  cursor: not-allowed;
+}
 .tox .tox-split-button {
   border: 0;
   border-radius: 3px;
@@ -12522,6 +12623,10 @@ body.tox-dialog__disable-scroll {
 .tox.tox-platform-touch .tox-split-button__chevron {
   width: 20px;
 }
+.tox .tox-split-button.tox-tbtn--disabled svg #tox-icon-text-color__color,
+.tox .tox-split-button.tox-tbtn--disabled svg #tox-icon-highlight-bg-color__color {
+  opacity: 0.6;
+}
 .tox .tox-toolbar-overlord {
   background-color: #fff;
 }
@@ -12533,7 +12638,7 @@ body.tox-dialog__disable-scroll {
   background-image: repeating-linear-gradient(#e3e3e3 0px 1px, transparent 1px 39px);
   background-position: center top 40px;
   background-repeat: no-repeat;
-  background-size: calc(100% - 22px) calc(100% - 41px);
+  background-size: calc(100% - 11px * 2) calc(100% - 41px);
   display: flex;
   flex: 0 0 auto;
   flex-shrink: 0;
@@ -12545,7 +12650,7 @@ body.tox-dialog__disable-scroll {
 .tox .tox-toolbar-overlord > .tox-toolbar__primary,
 .tox .tox-toolbar-overlord > .tox-toolbar__overflow {
   background-position: center top 0px;
-  background-size: calc(100% - 22px) calc(100% - 0px);
+  background-size: calc(100% - 11px * 2) calc(100% - 0px);
 }
 .tox .tox-toolbar__overflow.tox-toolbar__overflow--closed {
   height: 0;
@@ -12592,7 +12697,7 @@ body.tox-dialog__disable-scroll {
 .tox.tox-tinymce-aux .tox-toolbar__overflow {
   background-color: #fff;
   background-position: center top 43px;
-  background-size: calc(100% - 16px) calc(100% - 51px);
+  background-size: calc(100% - 8px * 2) calc(100% - 51px);
   border: none;
   border-radius: 6px;
   box-shadow: 0 0 2px 0 rgba(34, 47, 62, 0.2), 0 4px 8px 0 rgba(34, 47, 62, 0.15);
@@ -12604,7 +12709,7 @@ body.tox-dialog__disable-scroll {
 }
 .tox-pop .tox-pop__dialog .tox-toolbar {
   background-position: center top 43px;
-  background-size: calc(100% - 22px) calc(100% - 51px);
+  background-size: calc(100% - 11px * 2) calc(100% - 51px);
   padding: 4px 0;
 }
 .tox .tox-toolbar__group {
@@ -12804,9 +12909,6 @@ body.tox-dialog__disable-scroll {
   flex-direction: column;
   /* stylelint-disable no-descending-specificity */
 }
-.tox .tox-tree .tox-tree--directory.tox-tree--directory--expanded > .tox-tree--directory__label .tox-chevron {
-  transform: rotate(90deg);
-}
 .tox .tox-tree .tox-tree--directory .tox-tree--directory__label {
   font-weight: bold;
 }
@@ -12833,9 +12935,13 @@ body.tox-dialog__disable-scroll {
 }
 .tox .tox-tree .tox-tree--directory .tox-tree--directory__label .tox-chevron {
   margin-right: 6px;
+}
+.tox .tox-tree .tox-tree--directory .tox-tree--directory__label:has(+ .tox-tree--directory__children--growing) .tox-chevron,
+.tox .tox-tree .tox-tree--directory .tox-tree--directory__label:has(+ .tox-tree--directory__children--shrinking) .tox-chevron {
   transition: transform 0.5s ease-in-out;
 }
-.tox .tox-tree .tox-tree--directory .tox-tree--directory__label.tox-tree--directory__label--active .tox-chevron {
+.tox .tox-tree .tox-tree--directory .tox-tree--directory__label:has(+ .tox-tree--directory__children--growing) .tox-chevron,
+.tox .tox-tree .tox-tree--directory .tox-tree--directory__label:has(+ .tox-tree--directory__children--open) .tox-chevron {
   transform: rotate(90deg);
 }
 .tox .tox-tree .tox-tree--leaf__label {
@@ -13897,18 +14003,18 @@ body.video-react-full-window .video-react-fullscreen {
 .cropper-dashed.dashed-h {
   border-bottom-width: 1px;
   border-top-width: 1px;
-  height: 33.3333333333%;
+  height: calc(100% / 3);
   left: 0;
-  top: 33.3333333333%;
+  top: calc(100% / 3);
   width: 100%;
 }
 .cropper-dashed.dashed-v {
   border-left-width: 1px;
   border-right-width: 1px;
   height: 100%;
-  left: 33.3333333333%;
+  left: calc(100% / 3);
   top: 0;
-  width: 33.3333333333%;
+  width: calc(100% / 3);
 }
 .cropper-center {
   display: block;
@@ -14106,6 +14212,12 @@ body.video-react-full-window .video-react-fullscreen {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   border: 1px solid #f9f9f9;
 }
+.rdtPicker.is-mobile-year {
+  width: 11.5rem;
+}
+.rdtPicker.is-mobile-embed {
+  width: 15rem;
+}
 .rdtPickerNotDays {
   width: 192px;
 }
@@ -14224,9 +14336,14 @@ body.video-react-full-window .video-react-fullscreen {
 .rdtPrev span,
 .rdtNext span {
   display: block;
-  -webkit-touch-callout: none; /* iOS Safari */
-  -webkit-user-select: none; /* Chrome/Safari/Opera */ /* Konqueror */
-  -moz-user-select: none; /* Firefox */ /* Internet Explorer/Edge */
+  -webkit-touch-callout: none;
+  /* iOS Safari */
+  -webkit-user-select: none;
+  /* Chrome/Safari/Opera */
+  /* Konqueror */
+  -moz-user-select: none;
+  /* Firefox */
+  /* Internet Explorer/Edge */
   user-select: none;
 }
 .rdtPicker th.rdtDisabled,
@@ -14295,9 +14412,14 @@ td.rdtQuarter:hover {
   line-height: 40px;
   cursor: pointer;
   display: block;
-  -webkit-touch-callout: none; /* iOS Safari */
-  -webkit-user-select: none; /* Chrome/Safari/Opera */ /* Konqueror */
-  -moz-user-select: none; /* Firefox */ /* Internet Explorer/Edge */
+  -webkit-touch-callout: none;
+  /* iOS Safari */
+  -webkit-user-select: none;
+  /* Chrome/Safari/Opera */
+  /* Konqueror */
+  -moz-user-select: none;
+  /* Firefox */
+  /* Internet Explorer/Edge */
   user-select: none;
 }
 .rdtCounter .rdtBtn:hover {
@@ -14852,6 +14974,7 @@ body {
   .cxd-Layout-content {
     transition: transform var(--animation-duration) ease;
   }
+
   .cxd-Layout-aside {
     display: none;
   }
@@ -14867,11 +14990,13 @@ body {
     -webkit-overflow-scrolling: touch;
     z-index: 1010;
   }
+
   .cxd-Layout-headerBar {
     display: none;
   }
+
   .cxd-Layout--offScreen .cxd-Layout-body,
-  .cxd-Layout--offScreen .cxd-Layout-footer {
+.cxd-Layout--offScreen .cxd-Layout-footer {
     background: var(--body-bg);
     transition: transform var(--animation-duration) ease;
     backface-visibility: hidden;
@@ -14886,6 +15011,7 @@ body {
     z-index: 1015;
     padding-top: 3.125rem;
   }
+
   .cxd-Layout-offScreenBtn {
     display: block;
   }
@@ -14940,7 +15066,7 @@ body {
     float: left;
   }
   .cxd-Layout--withAside .cxd-Layout-headerBar,
-  .cxd-Layout--withAside .cxd-Layout-footer {
+.cxd-Layout--withAside .cxd-Layout-footer {
     margin-left: var(--Layout-aside-width);
     transition: margin var(--animation-duration) ease;
   }
@@ -14963,11 +15089,11 @@ body {
     width: auto;
   }
   .cxd-Layout--folded .cxd-Layout-aside,
-  .cxd-Layout--folded .cxd-Layout-brandBar {
+.cxd-Layout--folded .cxd-Layout-brandBar {
     width: var(--Layout-aside--folded-width);
   }
   .cxd-Layout--folded.cxd-Layout--withAside .cxd-Layout-headerBar,
-  .cxd-Layout--folded.cxd-Layout--withAside .cxd-Layout-footer {
+.cxd-Layout--folded.cxd-Layout--withAside .cxd-Layout-footer {
     margin-left: var(--Layout-aside--folded-width);
   }
   .cxd-Layout--folded .cxd-Layout-brand {
@@ -15027,18 +15153,18 @@ body {
     padding-right: 17px;
   }
   .cxd-Layout--sm:not(.cxd-Layout--folded) .cxd-Layout-brand,
-  .cxd-Layout--sm:not(.cxd-Layout--folded) .cxd-Layout-brandBar,
-  .cxd-Layout--sm:not(.cxd-Layout--folded) .cxd-Layout-aside {
+.cxd-Layout--sm:not(.cxd-Layout--folded) .cxd-Layout-brandBar,
+.cxd-Layout--sm:not(.cxd-Layout--folded) .cxd-Layout-aside {
     width: var(--Layout-aside--sm-width);
   }
   .cxd-Layout--md:not(.cxd-Layout--folded) .cxd-Layout-brand,
-  .cxd-Layout--md:not(.cxd-Layout--folded) .cxd-Layout-brandBar,
-  .cxd-Layout--md:not(.cxd-Layout--folded) .cxd-Layout-aside {
+.cxd-Layout--md:not(.cxd-Layout--folded) .cxd-Layout-brandBar,
+.cxd-Layout--md:not(.cxd-Layout--folded) .cxd-Layout-aside {
     width: var(--Layout-aside--md-width);
   }
   .cxd-Layout--lg:not(.cxd-Layout--folded) .cxd-Layout-brand,
-  .cxd-Layout--lg:not(.cxd-Layout--folded) .cxd-Layout-brandBar,
-  .cxd-Layout--lg:not(.cxd-Layout--folded) .cxd-Layout-aside {
+.cxd-Layout--lg:not(.cxd-Layout--folded) .cxd-Layout-brandBar,
+.cxd-Layout--lg:not(.cxd-Layout--folded) .cxd-Layout-aside {
     width: var(--Layout-aside--lg-width);
   }
 }
@@ -15210,6 +15336,7 @@ body {
     flex-direction: column;
     justify-content: space-between;
   }
+
   .cxd-Grid-col--sm1 {
     flex: 0 0 8.3333333333%;
     max-width: 8.3333333333%;
@@ -15217,6 +15344,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--sm2 {
     flex: 0 0 16.6666666667%;
     max-width: 16.6666666667%;
@@ -15224,6 +15352,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--sm3 {
     flex: 0 0 25%;
     max-width: 25%;
@@ -15231,6 +15360,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--sm4 {
     flex: 0 0 33.3333333333%;
     max-width: 33.3333333333%;
@@ -15238,6 +15368,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--sm5 {
     flex: 0 0 41.6666666667%;
     max-width: 41.6666666667%;
@@ -15245,6 +15376,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--sm6 {
     flex: 0 0 50%;
     max-width: 50%;
@@ -15252,6 +15384,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--sm7 {
     flex: 0 0 58.3333333333%;
     max-width: 58.3333333333%;
@@ -15259,6 +15392,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--sm8 {
     flex: 0 0 66.6666666667%;
     max-width: 66.6666666667%;
@@ -15266,6 +15400,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--sm9 {
     flex: 0 0 75%;
     max-width: 75%;
@@ -15273,6 +15408,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--sm10 {
     flex: 0 0 83.3333333333%;
     max-width: 83.3333333333%;
@@ -15280,6 +15416,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--sm11 {
     flex: 0 0 91.6666666667%;
     max-width: 91.6666666667%;
@@ -15287,6 +15424,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--sm12 {
     flex: 0 0 100%;
     max-width: 100%;
@@ -15294,6 +15432,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--sm {
     flex-basis: 0;
     flex-grow: 1;
@@ -15303,6 +15442,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--smAuto {
     flex: 0 0 auto;
     width: auto;
@@ -15319,6 +15459,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--md2 {
     flex: 0 0 16.6666666667%;
     max-width: 16.6666666667%;
@@ -15326,6 +15467,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--md3 {
     flex: 0 0 25%;
     max-width: 25%;
@@ -15333,6 +15475,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--md4 {
     flex: 0 0 33.3333333333%;
     max-width: 33.3333333333%;
@@ -15340,6 +15483,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--md5 {
     flex: 0 0 41.6666666667%;
     max-width: 41.6666666667%;
@@ -15347,6 +15491,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--md6 {
     flex: 0 0 50%;
     max-width: 50%;
@@ -15354,6 +15499,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--md7 {
     flex: 0 0 58.3333333333%;
     max-width: 58.3333333333%;
@@ -15361,6 +15507,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--md8 {
     flex: 0 0 66.6666666667%;
     max-width: 66.6666666667%;
@@ -15368,6 +15515,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--md9 {
     flex: 0 0 75%;
     max-width: 75%;
@@ -15375,6 +15523,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--md10 {
     flex: 0 0 83.3333333333%;
     max-width: 83.3333333333%;
@@ -15382,6 +15531,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--md11 {
     flex: 0 0 91.6666666667%;
     max-width: 91.6666666667%;
@@ -15389,6 +15539,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--md12 {
     flex: 0 0 100%;
     max-width: 100%;
@@ -15396,6 +15547,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--md {
     flex-basis: 0;
     flex-grow: 1;
@@ -15405,6 +15557,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--mdAuto {
     flex: 0 0 auto;
     width: auto;
@@ -15421,6 +15574,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--lg2 {
     flex: 0 0 16.6666666667%;
     max-width: 16.6666666667%;
@@ -15428,6 +15582,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--lg3 {
     flex: 0 0 25%;
     max-width: 25%;
@@ -15435,6 +15590,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--lg4 {
     flex: 0 0 33.3333333333%;
     max-width: 33.3333333333%;
@@ -15442,6 +15598,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--lg5 {
     flex: 0 0 41.6666666667%;
     max-width: 41.6666666667%;
@@ -15449,6 +15606,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--lg6 {
     flex: 0 0 50%;
     max-width: 50%;
@@ -15456,6 +15614,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--lg7 {
     flex: 0 0 58.3333333333%;
     max-width: 58.3333333333%;
@@ -15463,6 +15622,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--lg8 {
     flex: 0 0 66.6666666667%;
     max-width: 66.6666666667%;
@@ -15470,6 +15630,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--lg9 {
     flex: 0 0 75%;
     max-width: 75%;
@@ -15477,6 +15638,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--lg10 {
     flex: 0 0 83.3333333333%;
     max-width: 83.3333333333%;
@@ -15484,6 +15646,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--lg11 {
     flex: 0 0 91.6666666667%;
     max-width: 91.6666666667%;
@@ -15491,6 +15654,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--lg12 {
     flex: 0 0 100%;
     max-width: 100%;
@@ -15498,6 +15662,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--lg {
     flex-basis: 0;
     flex-grow: 1;
@@ -15507,6 +15672,7 @@ body {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
+
   .cxd-Grid-col--lgAuto {
     flex: 0 0 auto;
     width: auto;
@@ -15631,7 +15797,7 @@ body {
   border-radius: 0.625rem;
 }
 .cxd-AsideNav-itemIcon {
-  margin: calc((var(--Layout-nav-height) - var(--lineHeightBase) * var(--Layout-asideLink-fontSize)) / -2) -0.625rem;
+  margin: calc( ( var(--Layout-nav-height) - var(--lineHeightBase) * var(--Layout-asideLink-fontSize) ) / -2 ) -0.625rem;
   line-height: var(--Layout-nav-height);
   width: var(--Layout-nav-height);
   vertical-align: middle;
@@ -15677,7 +15843,7 @@ body {
   text-transform: none;
   display: block;
   font-size: var(--Layout-asideLink-fontSize);
-  padding: calc((var(--Layout-nav-height) - var(--lineHeightBase) * var(--Layout-asideLink-fontSize)) / 2) var(--gap-base);
+  padding: calc( ( var(--Layout-nav-height) - var(--lineHeightBase) * var(--Layout-asideLink-fontSize) ) / 2 ) var(--gap-base);
   position: relative;
   transition: background-color var(--animation-duration) ease-in-out 0s;
   color: var(--Layout-asideLink-color);
@@ -15702,7 +15868,7 @@ body {
   background: var(--Layout-aside-onAcitve-onHover-bg);
 }
 .cxd-AsideNav-item.is-lg > a {
-  padding: calc((var(--Layout-nav-lgHeight) - var(--lineHeightBase) * var(--Layout-asideLink-fontSize)) / 2) var(--gap-md);
+  padding: calc( ( var(--Layout-nav-lgHeight) - var(--lineHeightBase) * var(--Layout-asideLink-fontSize) ) / 2 ) var(--gap-md);
 }
 .cxd-AsideNav-item .cxd-AsideNav-item a {
   padding-left: calc(var(--Layout-nav-height) + 0.3125rem);
@@ -15729,7 +15895,7 @@ body {
   cursor: default;
   background: transparent;
   color: var(--Layout-asideLink-color);
-  padding: calc((var(--Layout-nav--folded-height) - var(--lineHeightBase) * var(--Layout-asideLink-fontSize)) / 2) var(--gap-md);
+  padding: calc( ( var(--Layout-nav--folded-height) - var(--lineHeightBase) * var(--Layout-asideLink-fontSize) ) / 2 ) var(--gap-md);
 }
 .cxd-AsideNav-subHeader a:hover {
   color: var(--Layout-asideLink-onHover-color);
@@ -15792,7 +15958,7 @@ img.cxd-AsideNav-itemIcon {
     border: none;
   }
   .cxd-Layout--folded .cxd-AsideNav-list > .cxd-AsideNav-item > a .cxd-AsideNav-itemArrow,
-  .cxd-Layout--folded .cxd-AsideNav-list > .cxd-AsideNav-item > a .cxd-AsideNav-itemLabel {
+.cxd-Layout--folded .cxd-AsideNav-list > .cxd-AsideNav-item > a .cxd-AsideNav-itemLabel {
     display: none;
   }
   .cxd-Layout--folded .cxd-AsideNav-list > .cxd-AsideNav-item > a .cxd-AsideNav-itemIcon {
@@ -17309,85 +17475,54 @@ input[type=button].cxd-Button--block {
   margin-left: var(--dialog-footer-margin-left);
 }
 .cxd-Modal--2th .cxd-Modal-content {
-  margin-top: calc(
-        var(--Modal-content-startMarginTop) +
-          1 *
-          var(--Modal-content-stepMarginTop)
-      );
+  margin-top: calc( var(--Modal-content-startMarginTop) + 1 * var(--Modal-content-stepMarginTop) );
 }
 .cxd-Modal--3th .cxd-Modal-content {
-  margin-top: calc(
-        var(--Modal-content-startMarginTop) +
-          2 *
-          var(--Modal-content-stepMarginTop)
-      );
+  margin-top: calc( var(--Modal-content-startMarginTop) + 2 * var(--Modal-content-stepMarginTop) );
 }
 .cxd-Modal--4th .cxd-Modal-content {
-  margin-top: calc(
-        var(--Modal-content-startMarginTop) +
-          3 *
-          var(--Modal-content-stepMarginTop)
-      );
+  margin-top: calc( var(--Modal-content-startMarginTop) + 3 * var(--Modal-content-stepMarginTop) );
 }
 .cxd-Modal--5th .cxd-Modal-content {
-  margin-top: calc(
-        var(--Modal-content-startMarginTop) +
-          4 *
-          var(--Modal-content-stepMarginTop)
-      );
+  margin-top: calc( var(--Modal-content-startMarginTop) + 4 * var(--Modal-content-stepMarginTop) );
 }
 .cxd-Modal--6th .cxd-Modal-content {
-  margin-top: calc(
-        var(--Modal-content-startMarginTop) +
-          5 *
-          var(--Modal-content-stepMarginTop)
-      );
+  margin-top: calc( var(--Modal-content-startMarginTop) + 5 * var(--Modal-content-stepMarginTop) );
 }
 .cxd-Modal--7th .cxd-Modal-content {
-  margin-top: calc(
-        var(--Modal-content-startMarginTop) +
-          6 *
-          var(--Modal-content-stepMarginTop)
-      );
+  margin-top: calc( var(--Modal-content-startMarginTop) + 6 * var(--Modal-content-stepMarginTop) );
 }
 .cxd-Modal--8th .cxd-Modal-content {
-  margin-top: calc(
-        var(--Modal-content-startMarginTop) +
-          7 *
-          var(--Modal-content-stepMarginTop)
-      );
+  margin-top: calc( var(--Modal-content-startMarginTop) + 7 * var(--Modal-content-stepMarginTop) );
 }
 .cxd-Modal--9th .cxd-Modal-content {
-  margin-top: calc(
-        var(--Modal-content-startMarginTop) +
-          8 *
-          var(--Modal-content-stepMarginTop)
-      );
+  margin-top: calc( var(--Modal-content-startMarginTop) + 8 * var(--Modal-content-stepMarginTop) );
 }
 .cxd-Modal--10th .cxd-Modal-content {
-  margin-top: calc(
-        var(--Modal-content-startMarginTop) +
-          9 *
-          var(--Modal-content-stepMarginTop)
-      );
+  margin-top: calc( var(--Modal-content-startMarginTop) + 9 * var(--Modal-content-stepMarginTop) );
 }
 @media (min-width: 576px) {
   .cxd-Modal-content {
     max-width: var(--dialog-size-normal-width);
     border-width: var(--dialog-default-border-width);
   }
+
   .cxd-Modal--sm .cxd-Modal-content {
     max-width: var(--dialog-size-sm-width);
   }
+
   .cxd-Modal--base .cxd-Modal-content {
     max-width: var(--Modal-widthBase);
   }
+
   .cxd-Modal--md .cxd-Modal-content {
     max-width: var(--Modal-widthMd);
   }
+
   .cxd-Modal--lg .cxd-Modal-content {
     max-width: var(--dialog-size-lg-width);
   }
+
   .cxd-Modal--xl .cxd-Modal-content {
     max-width: var(--dialog-size-xl-width);
   }
@@ -17564,264 +17699,279 @@ input[type=button].cxd-Button--block {
     width: var(--Drawer-widthBase);
     height: var(--Drawer-widthBase);
   }
+
   .cxd-Drawer--xs .cxd-Drawer-content {
     width: var(--drawer-size-xs-width);
     height: var(--Drawer-widthXs);
   }
+
   .cxd-Drawer--sm .cxd-Drawer-content {
     width: var(--drawer-size-sm-width);
     height: var(--Drawer-widthSm);
   }
+
   .cxd-Drawer--md .cxd-Drawer-content {
     width: var(--drawer-size-md-width);
     height: var(--Drawer-widthMd);
   }
+
   .cxd-Drawer--lg .cxd-Drawer-content {
     width: var(--drawer-size-lg-width);
     height: var(--Drawer-widthLg);
   }
+
   .cxd-Drawer--xl .cxd-Drawer-content {
     width: var(--drawer-size-xl-width);
     height: var(--Drawer-widthXl);
   }
+
   .cxd-Drawer--right.cxd-Modal--2th.cxd-Drawer .cxd-Drawer-content,
-  .cxd-Drawer--left.cxd-Modal--2th.cxd-Drawer .cxd-Drawer-content {
+.cxd-Drawer--left.cxd-Modal--2th.cxd-Drawer .cxd-Drawer-content {
     width: calc(var(--Drawer-widthBase) - 20px);
   }
   .cxd-Drawer--right.cxd-Modal--2th.cxd-Drawer--xs .cxd-Drawer-content,
-  .cxd-Drawer--left.cxd-Modal--2th.cxd-Drawer--xs .cxd-Drawer-content {
+.cxd-Drawer--left.cxd-Modal--2th.cxd-Drawer--xs .cxd-Drawer-content {
     width: calc(var(--Drawer-widthXs) - 20px);
   }
   .cxd-Drawer--right.cxd-Modal--2th.cxd-Drawer--sm .cxd-Drawer-content,
-  .cxd-Drawer--left.cxd-Modal--2th.cxd-Drawer--sm .cxd-Drawer-content {
+.cxd-Drawer--left.cxd-Modal--2th.cxd-Drawer--sm .cxd-Drawer-content {
     width: calc(var(--Drawer-widthSm) - 20px);
   }
   .cxd-Drawer--right.cxd-Modal--2th.cxd-Drawer--md .cxd-Drawer-content,
-  .cxd-Drawer--left.cxd-Modal--2th.cxd-Drawer--md .cxd-Drawer-content {
+.cxd-Drawer--left.cxd-Modal--2th.cxd-Drawer--md .cxd-Drawer-content {
     width: calc(var(--Drawer-widthMd) - 20px);
   }
   .cxd-Drawer--right.cxd-Modal--2th.cxd-Drawer--lg .cxd-Drawer-content,
-  .cxd-Drawer--left.cxd-Modal--2th.cxd-Drawer--lg .cxd-Drawer-content {
+.cxd-Drawer--left.cxd-Modal--2th.cxd-Drawer--lg .cxd-Drawer-content {
     width: calc(var(--Drawer-widthLg) - 20px);
   }
   .cxd-Drawer--right.cxd-Modal--2th.cxd-Drawer--xl .cxd-Drawer-content,
-  .cxd-Drawer--left.cxd-Modal--2th.cxd-Drawer--xl .cxd-Drawer-content {
+.cxd-Drawer--left.cxd-Modal--2th.cxd-Drawer--xl .cxd-Drawer-content {
     width: calc(var(--Drawer-widthXl) - 20px);
   }
+
   .cxd-Drawer--top.cxd-Modal--2th.cxd-Drawer .cxd-Drawer-content,
-  .cxd-Drawer--bottom.cxd-Modal--2th.cxd-Drawer .cxd-Drawer-content {
+.cxd-Drawer--bottom.cxd-Modal--2th.cxd-Drawer .cxd-Drawer-content {
     height: calc(var(--Drawer-widthBase) - 20px);
   }
   .cxd-Drawer--top.cxd-Modal--2th.cxd-Drawer--xs .cxd-Drawer-content,
-  .cxd-Drawer--bottom.cxd-Modal--2th.cxd-Drawer--xs .cxd-Drawer-content {
+.cxd-Drawer--bottom.cxd-Modal--2th.cxd-Drawer--xs .cxd-Drawer-content {
     height: calc(var(--Drawer-widthXs) - 20px);
   }
   .cxd-Drawer--top.cxd-Modal--2th.cxd-Drawer--sm .cxd-Drawer-content,
-  .cxd-Drawer--bottom.cxd-Modal--2th.cxd-Drawer--sm .cxd-Drawer-content {
+.cxd-Drawer--bottom.cxd-Modal--2th.cxd-Drawer--sm .cxd-Drawer-content {
     height: calc(var(--Drawer-widthSm) - 20px);
   }
   .cxd-Drawer--top.cxd-Modal--2th.cxd-Drawer--md .cxd-Drawer-content,
-  .cxd-Drawer--bottom.cxd-Modal--2th.cxd-Drawer--md .cxd-Drawer-content {
+.cxd-Drawer--bottom.cxd-Modal--2th.cxd-Drawer--md .cxd-Drawer-content {
     height: calc(var(--Drawer-widthMd) - 20px);
   }
   .cxd-Drawer--top.cxd-Modal--2th.cxd-Drawer--lg .cxd-Drawer-content,
-  .cxd-Drawer--bottom.cxd-Modal--2th.cxd-Drawer--lg .cxd-Drawer-content {
+.cxd-Drawer--bottom.cxd-Modal--2th.cxd-Drawer--lg .cxd-Drawer-content {
     height: calc(var(--Drawer-widthLg) - 20px);
   }
   .cxd-Drawer--top.cxd-Modal--2th.cxd-Drawer--xl .cxd-Drawer-content,
-  .cxd-Drawer--bottom.cxd-Modal--2th.cxd-Drawer--xl .cxd-Drawer-content {
+.cxd-Drawer--bottom.cxd-Modal--2th.cxd-Drawer--xl .cxd-Drawer-content {
     height: calc(var(--Drawer-widthXl) - 20px);
   }
+
   .cxd-Drawer--right.cxd-Modal--3th.cxd-Drawer .cxd-Drawer-content,
-  .cxd-Drawer--left.cxd-Modal--3th.cxd-Drawer .cxd-Drawer-content {
+.cxd-Drawer--left.cxd-Modal--3th.cxd-Drawer .cxd-Drawer-content {
     width: calc(var(--Drawer-widthBase) - 40px);
   }
   .cxd-Drawer--right.cxd-Modal--3th.cxd-Drawer--xs .cxd-Drawer-content,
-  .cxd-Drawer--left.cxd-Modal--3th.cxd-Drawer--xs .cxd-Drawer-content {
+.cxd-Drawer--left.cxd-Modal--3th.cxd-Drawer--xs .cxd-Drawer-content {
     width: calc(var(--Drawer-widthXs) - 40px);
   }
   .cxd-Drawer--right.cxd-Modal--3th.cxd-Drawer--sm .cxd-Drawer-content,
-  .cxd-Drawer--left.cxd-Modal--3th.cxd-Drawer--sm .cxd-Drawer-content {
+.cxd-Drawer--left.cxd-Modal--3th.cxd-Drawer--sm .cxd-Drawer-content {
     width: calc(var(--Drawer-widthSm) - 40px);
   }
   .cxd-Drawer--right.cxd-Modal--3th.cxd-Drawer--md .cxd-Drawer-content,
-  .cxd-Drawer--left.cxd-Modal--3th.cxd-Drawer--md .cxd-Drawer-content {
+.cxd-Drawer--left.cxd-Modal--3th.cxd-Drawer--md .cxd-Drawer-content {
     width: calc(var(--Drawer-widthMd) - 40px);
   }
   .cxd-Drawer--right.cxd-Modal--3th.cxd-Drawer--lg .cxd-Drawer-content,
-  .cxd-Drawer--left.cxd-Modal--3th.cxd-Drawer--lg .cxd-Drawer-content {
+.cxd-Drawer--left.cxd-Modal--3th.cxd-Drawer--lg .cxd-Drawer-content {
     width: calc(var(--Drawer-widthLg) - 40px);
   }
   .cxd-Drawer--right.cxd-Modal--3th.cxd-Drawer--xl .cxd-Drawer-content,
-  .cxd-Drawer--left.cxd-Modal--3th.cxd-Drawer--xl .cxd-Drawer-content {
+.cxd-Drawer--left.cxd-Modal--3th.cxd-Drawer--xl .cxd-Drawer-content {
     width: calc(var(--Drawer-widthXl) - 40px);
   }
+
   .cxd-Drawer--top.cxd-Modal--3th.cxd-Drawer .cxd-Drawer-content,
-  .cxd-Drawer--bottom.cxd-Modal--3th.cxd-Drawer .cxd-Drawer-content {
+.cxd-Drawer--bottom.cxd-Modal--3th.cxd-Drawer .cxd-Drawer-content {
     height: calc(var(--Drawer-widthBase) - 40px);
   }
   .cxd-Drawer--top.cxd-Modal--3th.cxd-Drawer--xs .cxd-Drawer-content,
-  .cxd-Drawer--bottom.cxd-Modal--3th.cxd-Drawer--xs .cxd-Drawer-content {
+.cxd-Drawer--bottom.cxd-Modal--3th.cxd-Drawer--xs .cxd-Drawer-content {
     height: calc(var(--Drawer-widthXs) - 40px);
   }
   .cxd-Drawer--top.cxd-Modal--3th.cxd-Drawer--sm .cxd-Drawer-content,
-  .cxd-Drawer--bottom.cxd-Modal--3th.cxd-Drawer--sm .cxd-Drawer-content {
+.cxd-Drawer--bottom.cxd-Modal--3th.cxd-Drawer--sm .cxd-Drawer-content {
     height: calc(var(--Drawer-widthSm) - 40px);
   }
   .cxd-Drawer--top.cxd-Modal--3th.cxd-Drawer--md .cxd-Drawer-content,
-  .cxd-Drawer--bottom.cxd-Modal--3th.cxd-Drawer--md .cxd-Drawer-content {
+.cxd-Drawer--bottom.cxd-Modal--3th.cxd-Drawer--md .cxd-Drawer-content {
     height: calc(var(--Drawer-widthMd) - 40px);
   }
   .cxd-Drawer--top.cxd-Modal--3th.cxd-Drawer--lg .cxd-Drawer-content,
-  .cxd-Drawer--bottom.cxd-Modal--3th.cxd-Drawer--lg .cxd-Drawer-content {
+.cxd-Drawer--bottom.cxd-Modal--3th.cxd-Drawer--lg .cxd-Drawer-content {
     height: calc(var(--Drawer-widthLg) - 40px);
   }
   .cxd-Drawer--top.cxd-Modal--3th.cxd-Drawer--xl .cxd-Drawer-content,
-  .cxd-Drawer--bottom.cxd-Modal--3th.cxd-Drawer--xl .cxd-Drawer-content {
+.cxd-Drawer--bottom.cxd-Modal--3th.cxd-Drawer--xl .cxd-Drawer-content {
     height: calc(var(--Drawer-widthXl) - 40px);
   }
+
   .cxd-Drawer--right.cxd-Modal--4th.cxd-Drawer .cxd-Drawer-content,
-  .cxd-Drawer--left.cxd-Modal--4th.cxd-Drawer .cxd-Drawer-content {
+.cxd-Drawer--left.cxd-Modal--4th.cxd-Drawer .cxd-Drawer-content {
     width: calc(var(--Drawer-widthBase) - 60px);
   }
   .cxd-Drawer--right.cxd-Modal--4th.cxd-Drawer--xs .cxd-Drawer-content,
-  .cxd-Drawer--left.cxd-Modal--4th.cxd-Drawer--xs .cxd-Drawer-content {
+.cxd-Drawer--left.cxd-Modal--4th.cxd-Drawer--xs .cxd-Drawer-content {
     width: calc(var(--Drawer-widthXs) - 60px);
   }
   .cxd-Drawer--right.cxd-Modal--4th.cxd-Drawer--sm .cxd-Drawer-content,
-  .cxd-Drawer--left.cxd-Modal--4th.cxd-Drawer--sm .cxd-Drawer-content {
+.cxd-Drawer--left.cxd-Modal--4th.cxd-Drawer--sm .cxd-Drawer-content {
     width: calc(var(--Drawer-widthSm) - 60px);
   }
   .cxd-Drawer--right.cxd-Modal--4th.cxd-Drawer--md .cxd-Drawer-content,
-  .cxd-Drawer--left.cxd-Modal--4th.cxd-Drawer--md .cxd-Drawer-content {
+.cxd-Drawer--left.cxd-Modal--4th.cxd-Drawer--md .cxd-Drawer-content {
     width: calc(var(--Drawer-widthMd) - 60px);
   }
   .cxd-Drawer--right.cxd-Modal--4th.cxd-Drawer--lg .cxd-Drawer-content,
-  .cxd-Drawer--left.cxd-Modal--4th.cxd-Drawer--lg .cxd-Drawer-content {
+.cxd-Drawer--left.cxd-Modal--4th.cxd-Drawer--lg .cxd-Drawer-content {
     width: calc(var(--Drawer-widthLg) - 60px);
   }
   .cxd-Drawer--right.cxd-Modal--4th.cxd-Drawer--xl .cxd-Drawer-content,
-  .cxd-Drawer--left.cxd-Modal--4th.cxd-Drawer--xl .cxd-Drawer-content {
+.cxd-Drawer--left.cxd-Modal--4th.cxd-Drawer--xl .cxd-Drawer-content {
     width: calc(var(--Drawer-widthXl) - 60px);
   }
+
   .cxd-Drawer--top.cxd-Modal--4th.cxd-Drawer .cxd-Drawer-content,
-  .cxd-Drawer--bottom.cxd-Modal--4th.cxd-Drawer .cxd-Drawer-content {
+.cxd-Drawer--bottom.cxd-Modal--4th.cxd-Drawer .cxd-Drawer-content {
     height: calc(var(--Drawer-widthBase) - 60px);
   }
   .cxd-Drawer--top.cxd-Modal--4th.cxd-Drawer--xs .cxd-Drawer-content,
-  .cxd-Drawer--bottom.cxd-Modal--4th.cxd-Drawer--xs .cxd-Drawer-content {
+.cxd-Drawer--bottom.cxd-Modal--4th.cxd-Drawer--xs .cxd-Drawer-content {
     height: calc(var(--Drawer-widthXs) - 60px);
   }
   .cxd-Drawer--top.cxd-Modal--4th.cxd-Drawer--sm .cxd-Drawer-content,
-  .cxd-Drawer--bottom.cxd-Modal--4th.cxd-Drawer--sm .cxd-Drawer-content {
+.cxd-Drawer--bottom.cxd-Modal--4th.cxd-Drawer--sm .cxd-Drawer-content {
     height: calc(var(--Drawer-widthSm) - 60px);
   }
   .cxd-Drawer--top.cxd-Modal--4th.cxd-Drawer--md .cxd-Drawer-content,
-  .cxd-Drawer--bottom.cxd-Modal--4th.cxd-Drawer--md .cxd-Drawer-content {
+.cxd-Drawer--bottom.cxd-Modal--4th.cxd-Drawer--md .cxd-Drawer-content {
     height: calc(var(--Drawer-widthMd) - 60px);
   }
   .cxd-Drawer--top.cxd-Modal--4th.cxd-Drawer--lg .cxd-Drawer-content,
-  .cxd-Drawer--bottom.cxd-Modal--4th.cxd-Drawer--lg .cxd-Drawer-content {
+.cxd-Drawer--bottom.cxd-Modal--4th.cxd-Drawer--lg .cxd-Drawer-content {
     height: calc(var(--Drawer-widthLg) - 60px);
   }
   .cxd-Drawer--top.cxd-Modal--4th.cxd-Drawer--xl .cxd-Drawer-content,
-  .cxd-Drawer--bottom.cxd-Modal--4th.cxd-Drawer--xl .cxd-Drawer-content {
+.cxd-Drawer--bottom.cxd-Modal--4th.cxd-Drawer--xl .cxd-Drawer-content {
     height: calc(var(--Drawer-widthXl) - 60px);
   }
+
   .cxd-Drawer--right.cxd-Modal--5th.cxd-Drawer .cxd-Drawer-content,
-  .cxd-Drawer--left.cxd-Modal--5th.cxd-Drawer .cxd-Drawer-content {
+.cxd-Drawer--left.cxd-Modal--5th.cxd-Drawer .cxd-Drawer-content {
     width: calc(var(--Drawer-widthBase) - 80px);
   }
   .cxd-Drawer--right.cxd-Modal--5th.cxd-Drawer--xs .cxd-Drawer-content,
-  .cxd-Drawer--left.cxd-Modal--5th.cxd-Drawer--xs .cxd-Drawer-content {
+.cxd-Drawer--left.cxd-Modal--5th.cxd-Drawer--xs .cxd-Drawer-content {
     width: calc(var(--Drawer-widthXs) - 80px);
   }
   .cxd-Drawer--right.cxd-Modal--5th.cxd-Drawer--sm .cxd-Drawer-content,
-  .cxd-Drawer--left.cxd-Modal--5th.cxd-Drawer--sm .cxd-Drawer-content {
+.cxd-Drawer--left.cxd-Modal--5th.cxd-Drawer--sm .cxd-Drawer-content {
     width: calc(var(--Drawer-widthSm) - 80px);
   }
   .cxd-Drawer--right.cxd-Modal--5th.cxd-Drawer--md .cxd-Drawer-content,
-  .cxd-Drawer--left.cxd-Modal--5th.cxd-Drawer--md .cxd-Drawer-content {
+.cxd-Drawer--left.cxd-Modal--5th.cxd-Drawer--md .cxd-Drawer-content {
     width: calc(var(--Drawer-widthMd) - 80px);
   }
   .cxd-Drawer--right.cxd-Modal--5th.cxd-Drawer--lg .cxd-Drawer-content,
-  .cxd-Drawer--left.cxd-Modal--5th.cxd-Drawer--lg .cxd-Drawer-content {
+.cxd-Drawer--left.cxd-Modal--5th.cxd-Drawer--lg .cxd-Drawer-content {
     width: calc(var(--Drawer-widthLg) - 80px);
   }
   .cxd-Drawer--right.cxd-Modal--5th.cxd-Drawer--xl .cxd-Drawer-content,
-  .cxd-Drawer--left.cxd-Modal--5th.cxd-Drawer--xl .cxd-Drawer-content {
+.cxd-Drawer--left.cxd-Modal--5th.cxd-Drawer--xl .cxd-Drawer-content {
     width: calc(var(--Drawer-widthXl) - 80px);
   }
+
   .cxd-Drawer--top.cxd-Modal--5th.cxd-Drawer .cxd-Drawer-content,
-  .cxd-Drawer--bottom.cxd-Modal--5th.cxd-Drawer .cxd-Drawer-content {
+.cxd-Drawer--bottom.cxd-Modal--5th.cxd-Drawer .cxd-Drawer-content {
     height: calc(var(--Drawer-widthBase) - 80px);
   }
   .cxd-Drawer--top.cxd-Modal--5th.cxd-Drawer--xs .cxd-Drawer-content,
-  .cxd-Drawer--bottom.cxd-Modal--5th.cxd-Drawer--xs .cxd-Drawer-content {
+.cxd-Drawer--bottom.cxd-Modal--5th.cxd-Drawer--xs .cxd-Drawer-content {
     height: calc(var(--Drawer-widthXs) - 80px);
   }
   .cxd-Drawer--top.cxd-Modal--5th.cxd-Drawer--sm .cxd-Drawer-content,
-  .cxd-Drawer--bottom.cxd-Modal--5th.cxd-Drawer--sm .cxd-Drawer-content {
+.cxd-Drawer--bottom.cxd-Modal--5th.cxd-Drawer--sm .cxd-Drawer-content {
     height: calc(var(--Drawer-widthSm) - 80px);
   }
   .cxd-Drawer--top.cxd-Modal--5th.cxd-Drawer--md .cxd-Drawer-content,
-  .cxd-Drawer--bottom.cxd-Modal--5th.cxd-Drawer--md .cxd-Drawer-content {
+.cxd-Drawer--bottom.cxd-Modal--5th.cxd-Drawer--md .cxd-Drawer-content {
     height: calc(var(--Drawer-widthMd) - 80px);
   }
   .cxd-Drawer--top.cxd-Modal--5th.cxd-Drawer--lg .cxd-Drawer-content,
-  .cxd-Drawer--bottom.cxd-Modal--5th.cxd-Drawer--lg .cxd-Drawer-content {
+.cxd-Drawer--bottom.cxd-Modal--5th.cxd-Drawer--lg .cxd-Drawer-content {
     height: calc(var(--Drawer-widthLg) - 80px);
   }
   .cxd-Drawer--top.cxd-Modal--5th.cxd-Drawer--xl .cxd-Drawer-content,
-  .cxd-Drawer--bottom.cxd-Modal--5th.cxd-Drawer--xl .cxd-Drawer-content {
+.cxd-Drawer--bottom.cxd-Modal--5th.cxd-Drawer--xl .cxd-Drawer-content {
     height: calc(var(--Drawer-widthXl) - 80px);
   }
+
   .cxd-Drawer--right.cxd-Modal--6th.cxd-Drawer .cxd-Drawer-content,
-  .cxd-Drawer--left.cxd-Modal--6th.cxd-Drawer .cxd-Drawer-content {
+.cxd-Drawer--left.cxd-Modal--6th.cxd-Drawer .cxd-Drawer-content {
     width: calc(var(--Drawer-widthBase) - 100px);
   }
   .cxd-Drawer--right.cxd-Modal--6th.cxd-Drawer--xs .cxd-Drawer-content,
-  .cxd-Drawer--left.cxd-Modal--6th.cxd-Drawer--xs .cxd-Drawer-content {
+.cxd-Drawer--left.cxd-Modal--6th.cxd-Drawer--xs .cxd-Drawer-content {
     width: calc(var(--Drawer-widthXs) - 100px);
   }
   .cxd-Drawer--right.cxd-Modal--6th.cxd-Drawer--sm .cxd-Drawer-content,
-  .cxd-Drawer--left.cxd-Modal--6th.cxd-Drawer--sm .cxd-Drawer-content {
+.cxd-Drawer--left.cxd-Modal--6th.cxd-Drawer--sm .cxd-Drawer-content {
     width: calc(var(--Drawer-widthSm) - 100px);
   }
   .cxd-Drawer--right.cxd-Modal--6th.cxd-Drawer--md .cxd-Drawer-content,
-  .cxd-Drawer--left.cxd-Modal--6th.cxd-Drawer--md .cxd-Drawer-content {
+.cxd-Drawer--left.cxd-Modal--6th.cxd-Drawer--md .cxd-Drawer-content {
     width: calc(var(--Drawer-widthMd) - 100px);
   }
   .cxd-Drawer--right.cxd-Modal--6th.cxd-Drawer--lg .cxd-Drawer-content,
-  .cxd-Drawer--left.cxd-Modal--6th.cxd-Drawer--lg .cxd-Drawer-content {
+.cxd-Drawer--left.cxd-Modal--6th.cxd-Drawer--lg .cxd-Drawer-content {
     width: calc(var(--Drawer-widthLg) - 100px);
   }
   .cxd-Drawer--right.cxd-Modal--6th.cxd-Drawer--xl .cxd-Drawer-content,
-  .cxd-Drawer--left.cxd-Modal--6th.cxd-Drawer--xl .cxd-Drawer-content {
+.cxd-Drawer--left.cxd-Modal--6th.cxd-Drawer--xl .cxd-Drawer-content {
     width: calc(var(--Drawer-widthXl) - 100px);
   }
+
   .cxd-Drawer--top.cxd-Modal--6th.cxd-Drawer .cxd-Drawer-content,
-  .cxd-Drawer--bottom.cxd-Modal--6th.cxd-Drawer .cxd-Drawer-content {
+.cxd-Drawer--bottom.cxd-Modal--6th.cxd-Drawer .cxd-Drawer-content {
     height: calc(var(--Drawer-widthBase) - 100px);
   }
   .cxd-Drawer--top.cxd-Modal--6th.cxd-Drawer--xs .cxd-Drawer-content,
-  .cxd-Drawer--bottom.cxd-Modal--6th.cxd-Drawer--xs .cxd-Drawer-content {
+.cxd-Drawer--bottom.cxd-Modal--6th.cxd-Drawer--xs .cxd-Drawer-content {
     height: calc(var(--Drawer-widthXs) - 100px);
   }
   .cxd-Drawer--top.cxd-Modal--6th.cxd-Drawer--sm .cxd-Drawer-content,
-  .cxd-Drawer--bottom.cxd-Modal--6th.cxd-Drawer--sm .cxd-Drawer-content {
+.cxd-Drawer--bottom.cxd-Modal--6th.cxd-Drawer--sm .cxd-Drawer-content {
     height: calc(var(--Drawer-widthSm) - 100px);
   }
   .cxd-Drawer--top.cxd-Modal--6th.cxd-Drawer--md .cxd-Drawer-content,
-  .cxd-Drawer--bottom.cxd-Modal--6th.cxd-Drawer--md .cxd-Drawer-content {
+.cxd-Drawer--bottom.cxd-Modal--6th.cxd-Drawer--md .cxd-Drawer-content {
     height: calc(var(--Drawer-widthMd) - 100px);
   }
   .cxd-Drawer--top.cxd-Modal--6th.cxd-Drawer--lg .cxd-Drawer-content,
-  .cxd-Drawer--bottom.cxd-Modal--6th.cxd-Drawer--lg .cxd-Drawer-content {
+.cxd-Drawer--bottom.cxd-Modal--6th.cxd-Drawer--lg .cxd-Drawer-content {
     height: calc(var(--Drawer-widthLg) - 100px);
   }
   .cxd-Drawer--top.cxd-Modal--6th.cxd-Drawer--xl .cxd-Drawer-content,
-  .cxd-Drawer--bottom.cxd-Modal--6th.cxd-Drawer--xl .cxd-Drawer-content {
+.cxd-Drawer--bottom.cxd-Modal--6th.cxd-Drawer--xl .cxd-Drawer-content {
     height: calc(var(--Drawer-widthXl) - 100px);
   }
 }
@@ -17980,7 +18130,7 @@ input[type=button].cxd-Button--block {
   margin-top: calc(var(--Tooltip-arrow-height) * -1 - 0.125rem);
 }
 .cxd-Tooltip--top .cxd-Tooltip-arrow {
-  bottom: calc((var(--Tooltip-arrow-height) + var(--Tooltip-borderWidth)) * -1);
+  bottom: calc( (var(--Tooltip-arrow-height) + var(--Tooltip-borderWidth)) * -1 );
 }
 .cxd-Tooltip--top .cxd-Tooltip-arrow::before,
 .cxd-Tooltip--top .cxd-Tooltip-arrow::after {
@@ -18018,7 +18168,7 @@ input[type=button].cxd-Button--block {
   margin-top: calc(var(--Tooltip-arrow-height) + 0.125rem);
 }
 .cxd-Tooltip--bottom .cxd-Tooltip-arrow {
-  top: calc((var(--Tooltip-arrow-height) + var(--Tooltip-borderWidth)) * -1);
+  top: calc( (var(--Tooltip-arrow-height) + var(--Tooltip-borderWidth)) * -1 );
 }
 .cxd-Tooltip--bottom .cxd-Tooltip-arrow::before,
 .cxd-Tooltip--bottom .cxd-Tooltip-arrow::after {
@@ -18046,7 +18196,7 @@ input[type=button].cxd-Button--block {
 }
 .cxd-Tooltip--left .cxd-Tooltip-arrow {
   left: auto;
-  right: calc((var(--Tooltip-arrow-height) + var(--Tooltip-borderWidth)) * -1);
+  right: calc( (var(--Tooltip-arrow-height) + var(--Tooltip-borderWidth)) * -1 );
   width: var(--Tooltip-arrow-height);
   height: var(--Tooltip-arrow-width);
   margin-top: calc(var(--Tooltip-arrow-width) * -1 / 2);
@@ -18069,8 +18219,8 @@ input[type=button].cxd-Button--block {
   font-size: var(--fontSizeBase);
   color: var(--Tooltip-title-color);
   font-weight: var(--Tooltip-fontWeight);
-  border-top-left-radius: calc(var(--Tooltip-borderRadius) - var(--Tooltip-borderWidth));
-  border-top-right-radius: calc(var(--Tooltip-borderRadius) - var(--Tooltip-borderWidth));
+  border-top-left-radius: calc( var(--Tooltip-borderRadius) - var(--Tooltip-borderWidth) );
+  border-top-right-radius: calc( var(--Tooltip-borderRadius) - var(--Tooltip-borderWidth) );
   font-weight: var(--Tooltip-title-fontWeight);
 }
 .cxd-Tooltip-title:empty {
@@ -18365,7 +18515,9 @@ input[type=button].cxd-Button--block {
   margin-left: var(--gap-sm);
 }
 .cxd-PopUp-confirm {
+  color: var(--PopUp-confirmAction-color);
   margin-right: var(--gap-sm);
+  border: none;
 }
 .cxd-PopUp-content {
   overflow-y: auto;
@@ -18373,6 +18525,9 @@ input[type=button].cxd-Button--block {
   display: flex;
   flex: 1;
 }
+.cxd-PopUp-content > div {
+  flex: 1;
+}
 .cxd-PopUp > * {
   position: relative;
   z-index: 2;
@@ -18396,7 +18551,8 @@ input[type=button].cxd-Button--block {
   margin-top: -0.25rem;
 }
 .cxd-PopUp-safearea {
-  height: 1rem;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
 }
 .cxd-PickerColumns {
   position: relative;
@@ -18432,10 +18588,10 @@ input[type=button].cxd-Button--block {
   background-color: none !important;
 }
 .cxd-PickerColumns-confirm {
-  color: var(--PickerColumns-confirmAction-color) !important;
+  color: var(--PickerColumns-confirmAction-color);
 }
 .cxd-PickerColumns-cancel {
-  color: var(--PickerColumns-cancelAction-color) !important;
+  color: var(--PickerColumns-cancelAction-color);
 }
 .cxd-PickerColumns-title {
   max-width: 50%;
@@ -18491,7 +18647,7 @@ input[type=button].cxd-Button--block {
   z-index: 1;
   width: 100%;
   height: 100%;
-  background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4)), linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4));
+  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4)), linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4));
   background-repeat: no-repeat;
   background-position: top, bottom;
   transform: translateZ(0);
@@ -19138,6 +19294,16 @@ input[type=button].cxd-Button--block {
   height: 100%;
   overflow-x: hidden;
 }
+.cxd-Tabs-linksContainer-wrapper .cxd-Tabs-linksContainer-main .cxd-Tabs-links.is-mobile {
+  overflow-x: auto;
+  -ms-overflow-style: none;
+  overflow: -moz-scrollbars-none;
+}
+.cxd-Tabs-linksContainer-wrapper .cxd-Tabs-linksContainer-main .cxd-Tabs-links.is-mobile::-webkit-scrollbar {
+  display: none;
+  width: 0 !important;
+  height: 0 !important;
+}
 .cxd-Tabs-linksContainer-wrapper .cxd-Tabs-linksContainer-main .cxd-Tabs-links .cxd-Tabs-links-drag {
   position: absolute;
   height: 100%;
@@ -20078,6 +20244,7 @@ input[type=button].cxd-Button--block {
   background-color: var(--Layout-light-backgroundColor);
   font-size: var(--Nav-item-fontSize);
   line-height: var(--Nav-Item-height);
+  min-height: 10px;
 }
 .cxd-Nav-horizontal {
   line-height: var(--Nav-Item-height--horizontal);
@@ -20193,13 +20360,14 @@ input[type=button].cxd-Button--block {
     min-width: var(--Page-aside-width);
     max-width: var(--Page-aside-maxWidth);
   }
+
   .cxd-Page--withSidebar {
     display: flex;
     flex-direction: row;
     align-items: stretch;
   }
   .cxd-Page--withSidebar > .cxd-Page-content,
-  .cxd-Page--withSidebar > .cxd-PullRefresh {
+.cxd-Page--withSidebar > .cxd-PullRefresh {
     width: 0;
     flex-grow: 1;
   }
@@ -20615,9 +20783,6 @@ input[type=button].cxd-Button--block {
     box-shadow: none;
     margin: 0 calc(var(--Panel-body-paddingTop) * -1) calc(var(--Panel-marginBottom) / 2);
   }
-  .cxd-Panel--form .cxd-Panel-body {
-    padding: 0 var(--gap-md) var(--gap-md);
-  }
   .cxd-Panel--form > .cxd-Panel-heading {
     background: none;
     border: none;
@@ -20816,6 +20981,7 @@ input[type=button].cxd-Button--block {
   position: relative;
   display: inline-flex;
   vertical-align: middle;
+  flex-wrap: wrap;
 }
 .cxd-ButtonGroup > .cxd-Button {
   position: relative;
@@ -21011,10 +21177,6 @@ input[type=button].cxd-Button--block {
   -webkit-text-decoration: var(--link-decoration);
           text-decoration: var(--link-decoration);
 }
-.cxd-DropDown-menuItem:hover, .cxd-DropDown-menu > li:hover {
-  background: var(--DropDown-menuItem-onHover-bg);
-  color: var(--DropDown-menuItem-onHover-color);
-}
 .cxd-DropDown-menuItem.is-active, .cxd-DropDown-menu > li.is-active {
   background: var(--DropDown-menuItem-onHover-bg);
   color: var(--DropDown-menuItem-onActive-color);
@@ -21052,6 +21214,10 @@ input[type=button].cxd-Button--block {
 .cxd-DropDown-menuItem.cxd-DropDown-groupTitle ~ .cxd-DropDown-button, .cxd-DropDown-menu > li.cxd-DropDown-groupTitle ~ .cxd-DropDown-button {
   padding-left: var(--gap-lg);
 }
+.cxd-DropDown-menuItem:hover, .cxd-DropDown-menu:not(.is-mobile) > li:hover {
+  background: var(--DropDown-menuItem-onHover-bg);
+  color: var(--DropDown-menuItem-onHover-color);
+}
 .cxd-DropDown-menu > li a {
   color: inherit;
   display: block;
@@ -21169,7 +21335,8 @@ input[type=button].cxd-Button--block {
 .cxd-CalendarMobile {
   height: 100%;
   width: 100%;
-  overflow: scroll;
+  overflow-y: scroll;
+  overflow-x: hidden;
 }
 .cxd-CalendarMobile-pop {
   position: fixed;
@@ -21182,11 +21349,19 @@ input[type=button].cxd-Button--block {
   overflow: hidden;
   border-width: 0;
 }
+.cxd-CalendarMobile-pop--quarters, .cxd-CalendarMobile-pop--months {
+  height: 25rem;
+}
 .cxd-CalendarMobile-pop--time {
-  height: -moz-fit-content;
-  height: fit-content;
+  height: 22.5rem;
   max-height: 90vh;
 }
+.cxd-CalendarMobile-pop--time .cxd-PopUp-content {
+  overflow: hidden;
+}
+.cxd-CalendarMobile-pop--years {
+  height: 22.5rem;
+}
 .cxd-CalendarMobile-wrap {
   display: flex;
   flex-direction: column;
@@ -21252,6 +21427,7 @@ input[type=button].cxd-Button--block {
   overflow-y: scroll;
 }
 .cxd-CalendarMobile-body table {
+  padding: 0;
   border-spacing: 0 0.25rem;
 }
 .cxd-CalendarMobile-body .rdt .rdtPicker td.rdtActive,
@@ -21278,14 +21454,15 @@ input[type=button].cxd-Button--block {
   background: transparent;
 }
 .cxd-CalendarMobile-body .calendar-wrap {
-  position: relative;
   width: 3.125rem;
+  position: relative;
   height: 100%;
   text-align: center;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 0.25rem;
+  padding: 0 0.625rem;
 }
 .cxd-CalendarMobile-embed .cxd-CalendarMobile-body .calendar-wrap {
   width: auto;
@@ -21295,6 +21472,7 @@ input[type=button].cxd-Button--block {
   flex-shrink: 0;
 }
 .cxd-CalendarMobile-footer .date-range-confirm {
+  width: 100%;
   height: 2.25rem;
   margin: 0.4375rem 0;
   border-radius: var(--borderRadiusMd);
@@ -21302,13 +21480,6 @@ input[type=button].cxd-Button--block {
   justify-content: center;
   align-items: center;
 }
-.cxd-CalendarMobile-footer .is-disabled {
-  opacity: 0.5;
-  color: var(--Button--primary-color);
-  background: var(--Button--primary-bg);
-  border-color: var(--Button--primary-bg);
-  filter: none;
-}
 .cxd-CalendarMobile-footer-toolbar {
   padding: 0 1rem;
 }
@@ -21322,11 +21493,11 @@ input[type=button].cxd-Button--block {
   line-height: 3rem;
 }
 .cxd-CalendarMobile-footer .cxd-DateRangePicker-rangers {
-  position: absolute;
+  padding-left: revert;
   white-space: nowrap;
-}
-.cxd-CalendarMobile-footer .cxd-DateRangePicker-rangers .cxd-DateRangePicker-ranger {
-  margin: 0 1.5625rem;
+  line-height: inherit;
+  display: flex;
+  justify-content: space-between;
 }
 .cxd-CalendarMobile-footer .cxd-DatePicker-shortcuts {
   width: auto;
@@ -21464,6 +21635,15 @@ input[type=button].cxd-Button--block {
   background: var(--Collapse-header-onHover-bg);
   color: var(--collapse-default-header-hover-color);
 }
+.cxd-Collapse-header.is-mobile {
+  background: none;
+  border-radius: 0 !important;
+  position: relative;
+  padding-left: 0;
+}
+.cxd-Collapse-header.is-mobile:hover {
+  background: none;
+}
 .cxd-Collapse .Collapse-arrow {
   content: var(--collapse-icon-icon);
 }
@@ -21537,6 +21717,24 @@ input[type=button].cxd-Button--block {
   line-height: var(--collapse-default-content-lineHeight);
   background: var(--collapse-default-bg-color);
 }
+.cxd-Collapse.is-mobile {
+  border-top: none;
+  border-left: none;
+  border-right: none;
+}
+.cxd-Collapse.is-mobile:last-child {
+  border-bottom: none;
+}
+.cxd-Collapse.is-mobile .cxd-Collapse-icon-tranform,
+.cxd-Collapse.is-mobile .cxd-Collapse-arrow-wrap {
+  margin-right: -1.125rem;
+  float: right;
+  margin-top: 0.125rem;
+}
+.cxd-Collapse.is-mobile .cxd-Collapse-content {
+  padding-left: 0;
+  padding-right: 0;
+}
 .cxd-Form .cxd-Collapse {
   border: none;
 }
@@ -21571,7 +21769,7 @@ input[type=button].cxd-Button--block {
 .cxd-CollapseGroup .cxd-Collapse:first-child:nth-last-child(1) > .cxd-Collapse-header {
   border-radius: 4px;
 }
-.cxd-CollapseGroup .cxd-Collapse:not(:last-child) {
+.cxd-CollapseGroup .cxd-Collapse:not(:last-child):not(.is-mobile) {
   border-bottom: none;
 }
 .cxd-CollapseGroup.icon-position-right .cxd-Collapse-header .cxd-Collapse-arrow-wrap {
@@ -21581,6 +21779,9 @@ input[type=button].cxd-Button--block {
 .cxd-CollapseGroup.icon-position-right .cxd-Collapse-header .cxd-Collapse-icon-tranform {
   float: right;
 }
+.cxd-CollapseGroup.is-mobile.icon-position-right .cxd-Collapse-header .cxd-Collapse-arrow-wrap {
+  margin-right: -1.125rem;
+}
 .cxd-ColorField {
   display: inline-block;
 }
@@ -21597,6 +21798,9 @@ input[type=button].cxd-Button--block {
   margin-left: 10px;
   vertical-align: middle;
 }
+.cxd-ConditionBuilderControl.is-mobile {
+  overflow-x: auto;
+}
 .cxd-CBGroup {
   font-size: var(--fontSizeSm);
   position: relative;
@@ -21755,6 +21959,7 @@ input[type=button].cxd-Button--block {
   width: 0.625rem;
   height: 0.625rem;
   top: 0;
+  transform: rotate(90deg);
 }
 .cxd-CBGroup-fieldInput.is-active .cxd-CBGroup-fieldCaret, .cxd-CBGroup-operatorInput.is-active .cxd-CBGroup-operatorCaret {
   transform: rotate(180deg);
@@ -21857,7 +22062,12 @@ input[type=button].cxd-Button--block {
 .cxd-CBGroupOrItem > .cxd-CBGroupOrItem-body > .cxd-CBGroupOrItem-body-group > .cxd-CBGroupOrItem-dragbar, .cxd-CBGroupOrItem > .cxd-CBGroupOrItem-body > .cxd-CBGroupOrItem-body-item > .cxd-CBGroupOrItem-dragbar, .cxd-CBGroupOrItem > .cxd-CBGroupOrItem-body > .cxd-CBGroupOrItem-body-item > .cxd-CBDelete {
   opacity: 0;
 }
-.cxd-CBGroupOrItem:hover > .cxd-CBGroupOrItem-body > .cxd-CBGroupOrItem-body-item > .cxd-CBGroupOrItem-dragbar, .cxd-CBGroupOrItem:hover > .cxd-CBGroupOrItem-body > .cxd-CBGroupOrItem-body-item > .cxd-CBDelete {
+.cxd-CBGroupOrItem:is(.is-mobile) > .cxd-CBGroupOrItem-body > .cxd-CBGroupOrItem-body-group > .cxd-CBGroupOrItem-dragbar,
+.cxd-CBGroupOrItem:is(.is-mobile) > .cxd-CBGroupOrItem-body > .cxd-CBGroupOrItem-body-item > .cxd-CBGroupOrItem-dragbar,
+.cxd-CBGroupOrItem:is(.is-mobile) > .cxd-CBGroupOrItem-body > .cxd-CBGroupOrItem-body-item > .cxd-CBDelete {
+  opacity: 1;
+}
+.cxd-CBGroupOrItem:not(.is-mobile):hover > .cxd-CBGroupOrItem-body > .cxd-CBGroupOrItem-body-item > .cxd-CBGroupOrItem-dragbar, .cxd-CBGroupOrItem:not(.is-mobile):hover > .cxd-CBGroupOrItem-body > .cxd-CBGroupOrItem-body-item > .cxd-CBDelete {
   opacity: 1;
 }
 .cxd-CBGroupOrItem-simple {
@@ -22348,9 +22558,7 @@ input[type=button].cxd-Button--block {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  line-height: calc(
-      var(--Form-input-lineHeight) * var(--Form-input-fontSize) - 0.125rem
-    );
+  line-height: calc( var(--Form-input-lineHeight) * var(--Form-input-fontSize) - 0.125rem );
   display: inline-block;
   font-size: var(--Pick-base-value-fontSize);
   color: var(--Pick-base-value-color);
@@ -22400,6 +22608,9 @@ input[type=button].cxd-Button--block {
   display: inline-flex;
   align-items: center;
 }
+.cxd-Crud-toolbar-item.is-mobile {
+  margin-top: 0;
+}
 .cxd-Crud-toolbar-item--left:not(:first-child) {
   margin-left: var(--Crud-toolbar-gap);
 }
@@ -22435,6 +22646,9 @@ input[type=button].cxd-Button--block {
 .cxd-Crud-filter {
   margin-bottom: var(--gap-base);
 }
+.cxd-Crud.is-mobile .cxd-Crud-toolbar {
+  flex: 1;
+}
 @media (min-width: 576px) {
   .cxd-Crud-toolbar {
     margin-top: calc(var(--Crud-toolbar-gap) * -1);
@@ -22466,7 +22680,7 @@ input[type=button].cxd-Button--block {
     float: right;
   }
   .cxd-Crud-actions > * + .cxd-Button,
-  .cxd-Crud-actions > * + .cxd-Button--disabled-wrap {
+.cxd-Crud-actions > * + .cxd-Button--disabled-wrap {
     margin-left: var(--Crud-toolbar-gap);
   }
 }
@@ -22487,9 +22701,7 @@ input[type=button].cxd-Button--block {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  line-height: calc(
-      var(--Form-input-lineHeight) * var(--Form-input-fontSize) - 0.125rem
-    );
+  line-height: calc( var(--Form-input-lineHeight) * var(--Form-input-fontSize) - 0.125rem );
   display: inline-block;
   font-size: var(--Pick-base-value-fontSize);
   color: var(--Pick-base-value-color);
@@ -22600,7 +22812,7 @@ input[type=button].cxd-Button--block {
     float: right;
   }
   .cxd-Crud-actions > * + .cxd-Button,
-  .cxd-Crud-actions > * + .cxd-Button--disabled-wrap {
+.cxd-Crud-actions > * + .cxd-Button--disabled-wrap {
     margin-left: var(--Crud-toolbar-gap);
   }
 }
@@ -22682,7 +22894,7 @@ input[type=button].cxd-Button--block {
 }
 .cxd-Table-heading {
   background: var(--Table-heading-bg);
-  padding: calc((var(--Table-heading-height) - var(--Table-fontSize) * var(--lineHeightBase)) / 2) var(--gap-sm);
+  padding: calc( ( var(--Table-heading-height) - var(--Table-fontSize) * var(--lineHeightBase) ) / 2 ) var(--gap-sm);
 }
 .cxd-Table--unsaved .cxd-Table-heading {
   background: var(--Table--unsaved-heading-bg);
@@ -22751,6 +22963,9 @@ input[type=button].cxd-Button--block {
   display: flex;
   align-items: center;
 }
+.cxd-Table.is-mobile .cxd-Table-toolbar .cxd-Form-item {
+  padding: 0;
+}
 .cxd-Table-header + .cxd-Table-toolbar {
   padding-top: 0;
 }
@@ -23642,6 +23857,14 @@ input[type=button].cxd-Button--block {
 .cxd-Table-table > thead > tr > th.cxd-TableCell--filterable > .cxd-TableCell--title {
   display: inline-block;
 }
+.cxd-Table.is-mobile .cxd-Table-table > tbody > tr:hover, .cxd-Table.is-mobile .cxd-Table-table > tbody > tr.is-hovered {
+  background: var(--Table-bg);
+  border-color: var(--Table-borderColor);
+  color: var(--Table-color);
+}
+.cxd-Table.is-mobile .cxd-Table-table > tbody > tr:hover + tr, .cxd-Table.is-mobile .cxd-Table-table > tbody > tr.is-hovered + tr {
+  border-color: var(--Table-borderColor);
+}
 .cxd-TableCell-sortBtn, .cxd-TableCell-searchBtn, .cxd-TableCell-filterBtn {
   display: inline-block;
   vertical-align: top;
@@ -23996,7 +24219,7 @@ input[type=button].cxd-Button--block {
   padding: var(--table-size-large-paddingTop) var(--table-size-large-paddingRight) var(--table-size-large-paddingBottom) var(--table-size-large-paddingLeft);
 }
 .cxd-Table2.cxd-Table-large .cxd-TableCell-filterBtn {
-  right: calc(var(--table-size-large-paddingRight) - var(--TableCell-filterBtn-width) / 2);
+  right: calc( var(--table-size-large-paddingRight) - var(--TableCell-filterBtn-width) / 2 );
 }
 .cxd-Table2.cxd-Table-small .cxd-Table-table > thead > tr > th {
   padding: var(--table-size-small-paddingTop) var(--table-size-small-paddingRight) var(--table-size-small-paddingBottom) var(--table-size-small-paddingLeft);
@@ -24009,7 +24232,7 @@ input[type=button].cxd-Button--block {
   padding: var(--table-size-small-paddingTop) var(--table-size-small-paddingRight) var(--table-size-small-paddingBottom) var(--table-size-small-paddingLeft);
 }
 .cxd-Table2.cxd-Table-small .cxd-TableCell-filterBtn {
-  right: calc(var(--table-size-small-paddingRight) - var(--TableCell-filterBtn-width) / 2);
+  right: calc( var(--table-size-small-paddingRight) - var(--TableCell-filterBtn-width) / 2 );
 }
 .cxd-Table2 .cxd-Table-title,
 .cxd-Table2 .cxd-Table-footer {
@@ -24888,15 +25111,15 @@ input[type=button].cxd-Button--block {
   background: var(--Table-tree-borderColor);
 }
 .cxd-Table2 .cxd-Table-table > thead > tr > th.cxd-TableCell--sortable {
-  padding-right: calc(var(--TableCell-paddingX) + var(--TableCell-sortBtn-width));
+  padding-right: calc( var(--TableCell-paddingX) + var(--TableCell-sortBtn-width) );
   position: relative;
 }
 .cxd-Table2 .cxd-Table-table > thead > tr > th.cxd-TableCell--searchable {
-  padding-right: calc(var(--TableCell-paddingX) + var(--TableCell-searchBtn-width));
+  padding-right: calc( var(--TableCell-paddingX) + var(--TableCell-searchBtn-width) );
   position: relative;
 }
 .cxd-Table2 .cxd-Table-table > thead > tr > th.cxd-TableCell--filterable {
-  padding-right: calc(var(--TableCell-paddingX) + var(--TableCell-filterBtn-width));
+  padding-right: calc( var(--TableCell-paddingX) + var(--TableCell-filterBtn-width) );
   position: relative;
 }
 .cxd-Table2 .cxd-Table-table > tbody > tr.cxd-Table-row-disabled {
@@ -25279,10 +25502,6 @@ input[type=button].cxd-Button--block {
           text-decoration: var(--link-decoration);
   background: var(--table-togglable-bg-color);
 }
-.cxd-ColumnToggler-menuItem:hover, .cxd-ColumnToggler-menu > li:hover {
-  background: var(--table-togglable-hover-bg-color);
-  color: var(--DropDown-menuItem-onHover-color);
-}
 .cxd-ColumnToggler-menuItem.is-active, .cxd-ColumnToggler-menu > li.is-active {
   color: var(--DropDown-menuItem-onActive-color);
 }
@@ -25301,6 +25520,10 @@ input[type=button].cxd-Button--block {
   background: var(--DropDown-menu-borderColor);
   padding: 0;
 }
+.cxd-ColumnToggler-menu:not(.is-mobile) > li:hover {
+  background: var(--table-togglable-hover-bg-color);
+  color: var(--DropDown-menuItem-onHover-color);
+}
 .cxd-ColumnToggler-menu > li a {
   color: inherit;
   display: block;
@@ -25739,26 +25962,32 @@ input[type=button].cxd-Button--block {
     -moz-column-count: 12;
          column-count: 12;
   }
+
   .cxd-Cards--masonrySm2 {
     -moz-column-count: 6;
          column-count: 6;
   }
+
   .cxd-Cards--masonrySm3 {
     -moz-column-count: 4;
          column-count: 4;
   }
+
   .cxd-Cards--masonrySm4 {
     -moz-column-count: 3;
          column-count: 3;
   }
+
   .cxd-Cards--masonrySm6 {
     -moz-column-count: 2;
          column-count: 2;
   }
+
   .cxd-Cards--masonrySm12 {
     -moz-column-count: 1;
          column-count: 1;
   }
+
   .cxd-Cards-toolbar {
     display: flex;
     flex-wrap: wrap;
@@ -25769,22 +25998,27 @@ input[type=button].cxd-Button--block {
     -moz-column-count: 12;
          column-count: 12;
   }
+
   .cxd-Cards--masonryMd2 {
     -moz-column-count: 6;
          column-count: 6;
   }
+
   .cxd-Cards--masonryMd3 {
     -moz-column-count: 4;
          column-count: 4;
   }
+
   .cxd-Cards--masonryMd4 {
     -moz-column-count: 3;
          column-count: 3;
   }
+
   .cxd-Cards--masonryMd6 {
     -moz-column-count: 2;
          column-count: 2;
   }
+
   .cxd-Cards--masonryMd12 {
     -moz-column-count: 1;
          column-count: 1;
@@ -25795,22 +26029,27 @@ input[type=button].cxd-Button--block {
     -moz-column-count: 12;
          column-count: 12;
   }
+
   .cxd-Cards--masonryLg2 {
     -moz-column-count: 6;
          column-count: 6;
   }
+
   .cxd-Cards--masonryLg3 {
     -moz-column-count: 4;
          column-count: 4;
   }
+
   .cxd-Cards--masonryLg4 {
     -moz-column-count: 3;
          column-count: 3;
   }
+
   .cxd-Cards--masonryLg6 {
     -moz-column-count: 2;
          column-count: 2;
   }
+
   .cxd-Cards--masonryLg12 {
     -moz-column-count: 1;
          column-count: 1;
@@ -27006,7 +27245,7 @@ input[type=button].cxd-Button--block {
   pointer-events: none;
 }
 .cxd-ImageGallery-prevList:hover, .cxd-ImageGallery-nextList:hover {
-  background: rgb(0, 0, 0);
+  background: black;
   color: #fff;
 }
 .cxd-ImageGallery-itemsWrap {
@@ -27410,6 +27649,23 @@ input[type=button].cxd-Button--block {
 .cxd-InputBox.is-active .cxd-InputBox-caret {
   transform: rotate(180deg);
 }
+.cxd-InputBox.is-mobile {
+  border: none;
+  border-radius: 0;
+  border-bottom: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
+}
+.cxd-InputBox.is-mobile.is-error, .is-error > .cxd-InputBox.is-mobile {
+  border-bottom-color: var(--Form-input-onError-borderColor);
+}
+.cxd-InputBox.is-mobile.is-focused {
+  border-bottom-color: var(--Form-input-onFocused-borderColor);
+}
+.cxd-InputBox.is-mobile.is-error.is-focused {
+  border-bottom-color: var(--Form-input-onError-borderColor);
+}
+.cxd-InputBox.is-mobile.is-disabled {
+  border-bottom-color: var(--Form-input-onDisabled-borderColor);
+}
 .cxd-JSONSchemaMember {
   display: flex;
   flex-direction: row;
@@ -27434,6 +27690,18 @@ input[type=button].cxd-Button--block {
   align-items: center;
   color: var(--Form-input-color);
 }
+.cxd-JSONSchemaMember-key.is-mobile > span {
+  border-radius: 0;
+  border: none;
+  border-bottom: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
+}
+.cxd-JSONSchemaMember-key.is-mobile .cxd-InputBox {
+  height: 100%;
+  line-height: 1;
+}
+.cxd-JSONSchemaMember-key.is-mobile .cxd-InputBox > .cxd-InputBox-caret svg {
+  top: 0.125em;
+}
 .cxd-JSONSchemaMember-value {
   flex: 1;
   margin-left: auto;
@@ -27514,6 +27782,10 @@ input[type=button].cxd-Button--block {
   left: -33px;
   border-top: dashed 1px var(--icon-color);
 }
+.cxd-JSONSchemaObject.is-mobile .cxd-Number {
+  border-radius: 0;
+  border-bottom: var(--Number-borderWidth) solid var(--Form-input-borderColor);
+}
 .cxd-SchemaEditorProps {
   width: 100%;
 }
@@ -27877,7 +28149,7 @@ input[type=button].cxd-Button--block {
   align-items: center;
   overflow-x: hidden;
   overflow-y: auto;
-  max-height: calc((var(--ResultBox-tag-height) + var(--ResultBox-tag-marginBottom)) * 5);
+  max-height: calc( (var(--ResultBox-tag-height) + var(--ResultBox-tag-marginBottom)) * 5 );
 }
 .cxd-ResultBox-overflow.cxd-Tooltip--dark .cxd-ResultBox-overflow-wrapper .cxd-ResultBox-value {
   color: var(--white);
@@ -27897,6 +28169,9 @@ input[type=button].cxd-Button--block {
   border: none;
   justify-content: flex-end;
 }
+.cxd-ResultBox.is-mobile.is-focused, .cxd-ResultBox.is-mobile:hover {
+  border: none !important;
+}
 .cxd-ResultBox.is-mobile .cxd-ResultBox-clear {
   padding: var(--Form-input-clearBtn-padding);
   cursor: pointer;
@@ -28057,6 +28332,11 @@ input[type=button].cxd-Button--block {
   background: var(--SearchBox-enhonce-disabled-color);
   color: var(--SearchBox-enhonce-disabled-search-color);
 }
+.cxd-SearchBox.is-mobile {
+  border-radius: 0;
+  border: none;
+  border-bottom: var(--borderWidth) solid var(--borderColor);
+}
 .cxd-SearchBox-history > .is-history {
   width: 100%;
 }
@@ -28108,7 +28388,7 @@ input[type=button].cxd-Button--block {
   padding: 0 var(--gap-md);
   overflow-x: hidden;
   overflow-y: auto;
-  max-height: calc(var(--SearchBox-history-dropdown-maxHeight) - 38px - var(--gap-sm) * 2);
+  max-height: calc( var(--SearchBox-history-dropdown-maxHeight) - 38px - var(--gap-sm) * 2 );
 }
 .cxd-SearchBox-history .cxd-SearchBox-history-tag {
   display: inlin-flex;
@@ -28162,7 +28442,7 @@ input[type=button].cxd-Button--block {
 .cxd-ListMenu-groupLabel {
   font-size: var(--fontSizeXs);
   color: var(--text--muted-color);
-  padding: calc((var(--ListMenu-item-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize) - var(--gap-sm)) / 2) 0 0 calc(var(--Form-select-paddingX) - var(--gap-xs));
+  padding: calc( ( var(--ListMenu-item-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize) - var(--gap-sm) ) / 2 ) 0 0 calc(var(--Form-select-paddingX) - var(--gap-xs));
 }
 .cxd-ListMenu-group:not(:first-child) > .cxd-ListMenu-groupLabel {
   border-top: 0.0625rem solid var(--ListMenu-divider-color);
@@ -28174,7 +28454,7 @@ input[type=button].cxd-Button--block {
   line-height: var(--Form-input-lineHeight);
   font-size: var(--Form-input-fontSize);
   cursor: pointer;
-  padding: calc((var(--ListMenu-item-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize)) / 2) var(--Form-select-paddingX);
+  padding: calc( ( var(--ListMenu-item-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize) ) / 2 ) var(--Form-select-paddingX);
 }
 .cxd-ListMenu-item.is-active {
   color: var(--ListMenu-item--onActive-color);
@@ -28195,7 +28475,40 @@ input[type=button].cxd-Button--block {
   line-height: var(--Form-input-lineHeight);
   font-size: var(--Form-input-fontSize);
   cursor: pointer;
-  padding: calc((var(--ListMenu-item-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize)) / 2) var(--Form-select-paddingX);
+  padding: calc( ( var(--ListMenu-item-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize) ) / 2 ) var(--Form-select-paddingX);
+}
+.cxd-ListMenu.is-mobile {
+  display: flex;
+  flex-wrap: wrap;
+}
+.cxd-ListMenu.is-mobile .cxd-ListMenu-item {
+  width: calc((100vw - var(--ListMenu-item-mobile-margin) * 7) / 3);
+  display: inline-flex;
+  background: var(--ListMenu-item-mobile-bg);
+  margin: var(--ListMenu-item-mobile-margin);
+}
+.cxd-ListMenu.is-mobile .cxd-ListMenu-item.is-active {
+  background: var(--ListMenu-item-mobile-active-bg);
+}
+.cxd-ListMenu.is-mobile .cxd-ListMenu-item .cxd-ListMenu-itemLabel {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.cxd-ListMenu-add-wrap {
+  display: flex;
+  align-items: center;
+  margin: var(--ListMenu-item-mobile-margin);
+  text-align: left;
+}
+.cxd-ListMenu-add-wrap .cxd-ResultBox {
+  width: 100%;
+}
+.cxd-ListMenu-add-wrap input {
+  width: 100%;
+  padding: var(--Form-item-mobile-gap) 0;
+  border-bottom: 1px solid var(--borderColor);
+  border-radius: 0;
 }
 .cxd-PopOver > .cxd-ListMenu {
   border-color: var(--listMenu--onActive-borderColor);
@@ -28858,6 +29171,9 @@ fieldset.cxd-Collapse--lg > legend, fieldset.cxd-Collapse--md > legend, fieldset
   background: var(--Fieldset-legend-bgColor);
   border-left: 0 !important;
 }
+fieldset.cxd-Collapse--lg > legend.cxd-Collapse-header.is-mobile, fieldset.cxd-Collapse--md > legend.cxd-Collapse-header.is-mobile, fieldset.cxd-Collapse--base > legend.cxd-Collapse-header.is-mobile, fieldset.cxd-Collapse--sm > legend.cxd-Collapse-header.is-mobile, fieldset.cxd-Collapse--xs > legend.cxd-Collapse-header.is-mobile {
+  position: absolute;
+}
 fieldset.cxd-Collapse--lg .collapse, fieldset.cxd-Collapse--md .collapse, fieldset.cxd-Collapse--base .collapse, fieldset.cxd-Collapse--sm .collapse, fieldset.cxd-Collapse--xs .collapse {
   position: relative;
 }
@@ -28970,6 +29286,13 @@ fieldset.cxd-Collapse--lg > legend:hover {
 fieldset.cxd-Collapse--lg:after {
   top: calc(var(--fieldSet-size-lg-fontSize) / 2);
 }
+fieldset.cxd-Collapse .cxd-Collapse-header.is-mobile {
+  padding-left: var(--gap-xs) !important;
+  padding-right: 1.125rem;
+}
+fieldset.cxd-Collapse .cxd-Collapse-header.is-mobile:hover {
+  background: var(--white);
+}
 .cxd-Form-groupColumn {
   margin-bottom: var(--gap-sm);
 }
@@ -29004,7 +29327,7 @@ fieldset.cxd-Collapse--lg:after {
     margin-right: 0;
   }
   .cxd-Form-group--hor > .cxd-Form-item,
-  .cxd-Form-group--hor > div > .cxd-Form-item {
+.cxd-Form-group--hor > div > .cxd-Form-item {
     margin-bottom: 0;
   }
   .cxd-Form-group--hor .cxd-Form-input > .cxd-Form-group {
@@ -29042,6 +29365,7 @@ fieldset.cxd-Collapse--lg:after {
     padding-left: calc(var(--Form-group--xs-gutterWidth) / 2);
     padding-right: calc(var(--Form-group--xs-gutterWidth) / 2);
   }
+
   .cxd-Form-groupColumn {
     flex-basis: 0;
     flex-grow: 1;
@@ -29049,66 +29373,79 @@ fieldset.cxd-Collapse--lg:after {
     max-width: 100%;
     margin-bottom: 0;
   }
+
   .cxd-Form-groupColumn--1 {
     flex: 0 0 8.3333333333%;
     max-width: 8.3333333333%;
     min-height: 1px;
   }
+
   .cxd-Form-groupColumn--2 {
     flex: 0 0 16.6666666667%;
     max-width: 16.6666666667%;
     min-height: 1px;
   }
+
   .cxd-Form-groupColumn--3 {
     flex: 0 0 25%;
     max-width: 25%;
     min-height: 1px;
   }
+
   .cxd-Form-groupColumn--4 {
     flex: 0 0 33.3333333333%;
     max-width: 33.3333333333%;
     min-height: 1px;
   }
+
   .cxd-Form-groupColumn--5 {
     flex: 0 0 41.6666666667%;
     max-width: 41.6666666667%;
     min-height: 1px;
   }
+
   .cxd-Form-groupColumn--6 {
     flex: 0 0 50%;
     max-width: 50%;
     min-height: 1px;
   }
+
   .cxd-Form-groupColumn--7 {
     flex: 0 0 58.3333333333%;
     max-width: 58.3333333333%;
     min-height: 1px;
   }
+
   .cxd-Form-groupColumn--8 {
     flex: 0 0 66.6666666667%;
     max-width: 66.6666666667%;
     min-height: 1px;
   }
+
   .cxd-Form-groupColumn--9 {
     flex: 0 0 75%;
     max-width: 75%;
     min-height: 1px;
   }
+
   .cxd-Form-groupColumn--10 {
     flex: 0 0 83.3333333333%;
     max-width: 83.3333333333%;
     min-height: 1px;
   }
+
   .cxd-Form-groupColumn--11 {
     flex: 0 0 91.6666666667%;
     max-width: 91.6666666667%;
     min-height: 1px;
   }
+
   .cxd-Form-groupColumn--12 {
     flex: 0 0 100%;
     max-width: 100%;
     min-height: 1px;
   }
+
   .cxd-Form-groupColumn--auto {
     flex: 0 0 auto;
     width: auto;
@@ -29130,7 +29467,7 @@ fieldset.cxd-Collapse--lg:after {
 .cxd-InputGroup-addOn {
   background: var(--InputGroup-addOn-bg);
   border: var(--InputGroup-addOn-borderWidth) solid var(--InputGroup-addOn-borderColor);
-  line-height: calc(var(--InputGroup-height) - var(--InputGroup-paddingY) * 2 - var(--InputGroup-addOn-borderWidth) * 2);
+  line-height: calc( var(--InputGroup-height) - var(--InputGroup-paddingY) * 2 - var(--InputGroup-addOn-borderWidth) * 2 );
   height: var(--InputGroup-height);
   box-sizing: border-box;
   padding: var(--InputGroup-paddingY) var(--InputGroup-paddingX);
@@ -29228,6 +29565,9 @@ fieldset.cxd-Collapse--lg:after {
 .cxd-InputGroup .cxd-Form-static {
   margin-right: var(--gap-xs);
 }
+.cxd-InputGroup.is-mobile .cxd-Form-control {
+  display: inline-flex;
+}
 .cxd-InputGroup:not(.is-inline) {
   display: flex;
 }
@@ -29316,7 +29656,7 @@ fieldset.cxd-Collapse--lg:after {
   color: var(--text--muted-color);
 }
 .cxd-TextControl-spinner {
-  line-height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize));
+  line-height: calc( var(--Form-input-lineHeight) * var(--Form-input-fontSize) );
 }
 .cxd-TextControl-clear {
   padding: var(--Form-input-clearBtn-padding);
@@ -29525,24 +29865,19 @@ fieldset.cxd-Collapse--lg:after {
 .cxd-TextControl-input--withAC input {
   width: auto;
 }
-.cxd-TextControl-sugs {
-  position: absolute;
+.cxd-TextControl-popover {
+  margin-top: 0.25rem;
   background: var(--Form-select-menu-bg);
   color: var(--Form-select-menu-color);
   border-radius: 0.125rem;
   box-shadow: var(--menu-box-shadow);
-  left: -0.0625rem;
-  right: -0.0625rem;
-  top: calc(100% + 0.25rem);
-  z-index: 10;
+}
+.cxd-TextControl-sugs {
   max-height: 18.75rem;
   overflow: auto;
 }
 .cxd-TextControl-sugItem {
-  padding: calc((
-            var(--Form-selectOption-height) - var(--Form-input-lineHeight) *
-              var(--Form-input-fontSize) - 0.125rem
-          ) / 2) 0.75rem;
+  padding: calc( ( var(--Form-selectOption-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize) - 0.125rem ) / 2 ) 0.75rem;
 }
 .cxd-TextControl-sugItem svg {
   width: 1rem;
@@ -29564,7 +29899,7 @@ fieldset.cxd-Collapse--lg:after {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  line-height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize));
+  line-height: calc( var(--Form-input-lineHeight) * var(--Form-input-fontSize) );
   vertical-align: middle;
   display: inline-block;
 }
@@ -29588,9 +29923,7 @@ fieldset.cxd-Collapse--lg:after {
 }
 .cxd-TextControl-input--multiple .cxd-TextControl-value {
   white-space: nowrap;
-  line-height: calc(
-      var(--Form-input-lineHeight) * var(--Form-input-fontSize) - 0.125rem
-    );
+  line-height: calc( var(--Form-input-lineHeight) * var(--Form-input-fontSize) - 0.125rem );
   font-size: var(--Form-selectValue-fontSize);
   background: var(--Form-select-multiple-bgColor);
   border-radius: 0.125rem;
@@ -29755,7 +30088,7 @@ input.cxd-TextControl-input-password {
   color: var(--text--muted-color);
 }
 .cxd-TextareaControl-spinner {
-  line-height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize));
+  line-height: calc( var(--Form-input-lineHeight) * var(--Form-input-fontSize) );
 }
 .cxd-TextareaControl-clear {
   padding: var(--Form-input-clearBtn-padding);
@@ -29921,6 +30254,9 @@ input.cxd-TextControl-input-password {
   transform-origin: 50% 50%;
   transform: translate(-50%, -50%);
 }
+.cxd-Checkbox.is-mobile > i + span {
+  vertical-align: middle;
+}
 .cxd-Checkbox:hover > i + span > a {
   display: inline-block;
 }
@@ -30311,7 +30647,7 @@ input.cxd-TextControl-input-password {
 .cxd-CheckboxControl,
 .cxd-RadiosControl,
 .cxd-CheckboxesControl {
-  padding-top: calc((var(--Form-input-height) - var(--Checkbox-size)) / 2 - 3px);
+  padding-top: calc( (var(--Form-input-height) - var(--Checkbox-size)) / 2 - 3px );
 }
 .cxd-RadiosControl .cxd-Checkbox {
   display: block;
@@ -30377,7 +30713,7 @@ input.cxd-TextControl-input-password {
   display: block;
   line-height: var(--Form-input-lineHeight);
   font-size: var(--Form-input-fontSize);
-  padding: calc((var(--Form-input-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize)) / 2) var(--gap-sm) calc((var(--Form-input-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize)) / 2) calc(var(--gap-sm) + var(--Checkbox-size));
+  padding: calc( ( var(--Form-input-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize) ) / 2 ) var(--gap-sm) calc( ( var(--Form-input-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize) ) / 2 ) calc(var(--gap-sm) + var(--Checkbox-size));
 }
 .cxd-Selection--inline > .cxd-Checkbox {
   display: inline-block;
@@ -30460,7 +30796,7 @@ input.cxd-TextControl-input-password {
   height: var(--Form-input-height);
   line-height: var(--Form-input-lineHeight);
   font-size: var(--Form-input-fontSize);
-  padding: calc((var(--Form-input-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize)) / 2) var(--gap-sm);
+  padding: calc( ( var(--Form-input-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize) ) / 2 ) var(--gap-sm);
   color: var(--text--muted-color);
   height: 100%;
   display: flex;
@@ -30519,7 +30855,7 @@ input.cxd-TextControl-input-password {
 }
 .cxd-TreeSelection-sublist {
   position: relative;
-  margin: 0 0 0 2.1875rem;
+  margin: 0 0 0 1.875rem;
   display: none;
 }
 .cxd-TreeSelection-item {
@@ -30564,9 +30900,6 @@ input.cxd-TextControl-input-password {
   pointer-events: none;
   color: var(--text--muted-color);
 }
-.cxd-TreeSelection-itemInner .cxd-TreeSelection-itemLabel {
-  margin-left: var(--gap-xs);
-}
 .cxd-TreeSelection-itemLabel {
   flex-grow: 1;
 }
@@ -30577,7 +30910,7 @@ input.cxd-TextControl-input-password {
   height: var(--Form-input-height);
   line-height: var(--Form-input-lineHeight);
   font-size: var(--Form-input-fontSize);
-  padding: calc((var(--Form-input-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize)) / 2) var(--gap-sm);
+  padding: calc( ( var(--Form-input-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize) ) / 2 ) var(--gap-sm);
   color: var(--text--muted-color);
 }
 .cxd-ChainedSelection {
@@ -30650,7 +30983,7 @@ input.cxd-TextControl-input-password {
   height: var(--Form-input-height);
   line-height: var(--Form-input-lineHeight);
   font-size: var(--Form-input-fontSize);
-  padding: calc((var(--Form-input-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize)) / 2) var(--gap-sm);
+  padding: calc( ( var(--Form-input-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize) ) / 2 ) var(--gap-sm);
   color: var(--text--muted-color);
 }
 .cxd-AssociatedSelection {
@@ -30708,6 +31041,36 @@ input.cxd-TextControl-input-password {
   float: right;
   cursor: pointer;
 }
+.cxd-ChainedDropdownSelection {
+  display: inline-block;
+}
+.cxd-ChainedDropdownSelection-item {
+  display: inline-block;
+}
+.cxd-DropDownSelection {
+  position: relative;
+  display: inline-block;
+  margin: 0.1875rem;
+  vertical-align: middle;
+}
+.cxd-DropDownSelection-caret {
+  transition: transform var(--animation-duration) ease-out;
+  margin: 5px;
+  display: flex;
+  color: var(--Form-select-caret-iconColor);
+}
+.cxd-DropDownSelection-caret:hover {
+  color: var(--Form-select-caret-onHover-iconColor);
+}
+.cxd-DropDownSelection-caret > svg {
+  width: 0.625rem;
+  height: 0.625rem;
+  top: 0;
+  transform: rotate(90deg);
+}
+.cxd-DropDownSelection-input.is-active .cxd-DropDownSelection-caret {
+  transform: rotate(180deg);
+}
 .cxd-CityPicker .cxd-Select {
   margin-right: var(--gap-xs);
   margin-bottom: var(--gap-xs);
@@ -30741,6 +31104,7 @@ input.cxd-TextControl-input-password {
   display: inline-block;
 }
 .cxd-CityArea {
+  flex: 1;
   text-align: right;
 }
 .cxd-CityArea-popup {
@@ -30757,6 +31121,9 @@ input.cxd-TextControl-input-password {
   font-size: var(--Form-input-fontSize);
   display: inline-flex !important;
 }
+.cxd-CityArea-Input.is-focused, .cxd-CityArea-Input:hover {
+  border: none !important;
+}
 .cxd-CityArea-Input::-moz-placeholder {
   color: var(--Form-input-placeholderColor);
   -moz-user-select: none;
@@ -30806,7 +31173,7 @@ input.cxd-TextControl-input-password {
 .cxd-Switch .text > svg {
   width: var(--switch-text-off-fontSize);
   height: var(--switch-text-off-fontSize);
-  margin-top: calc((var(--Switch-height) - var(--switch-text-off-fontSize)) / 2);
+  margin-top: calc( (var(--Switch-height) - var(--switch-text-off-fontSize)) / 2 );
 }
 .cxd-Switch .slider:before {
   content: "";
@@ -30826,7 +31193,7 @@ input.cxd-TextControl-input-password {
   background: var(--Switch-checked-bgColor);
 }
 .cxd-Switch.is-checked .slider::before {
-  left: calc(100% - var(--Switch-slider-width) - var(--Switch-slider-margin));
+  left: calc( 100% - var(--Switch-slider-width) - var(--Switch-slider-margin) );
   right: var(--Switch-slider-margin);
   border-width: 0;
   background: var(--switch-default-on-slider-color);
@@ -30844,9 +31211,7 @@ input.cxd-TextControl-input-password {
   background: var(--Switch-checked-onActive-bgColor);
 }
 .cxd-Switch.is-checked:active .slider::before {
-  left: calc(
-          100% - (var(--Switch-height) + 0.125rem) - 0.125rem
-        );
+  left: calc( 100% - (var(--Switch-height) + 0.125rem) - 0.125rem );
 }
 .cxd-Switch.is-checked.is-disabled .slider:before {
   color: var(--Switch-onDisabled-color);
@@ -30878,7 +31243,7 @@ input.cxd-TextControl-input-password {
   right: auto;
 }
 .cxd-Switch--sm.is-checked .slider::before {
-  left: calc(100% - var(--Switch-slider-width--sm) - var(--switch-size-sm-slider-margin));
+  left: calc( 100% - var(--Switch-slider-width--sm) - var(--switch-size-sm-slider-margin) );
   right: var(--switch-size-sm-slider-margin);
 }
 .cxd-Switch:active .slider::before {
@@ -30944,6 +31309,12 @@ input.cxd-TextControl-input-password {
   background: var(--inputNumber-base-active-bg-color);
   box-shadow: var(--inputNumber-base-active-shadow);
 }
+.cxd-Number.is-mobile {
+  border: none;
+}
+.cxd-Number.is-mobile-focused {
+  border: none;
+}
 .cxd-Number-disabled {
   border-width: var(--inputNumber-base-disabled-top-border-width) var(--inputNumber-base-disabled-right-border-width) var(--inputNumber-base-disabled-bottom-border-width) var(--inputNumber-base-disabled-left-border-width);
   border-style: var(--inputNumber-base-disabled-top-border-style) var(--inputNumber-base-disabled-right-border-style) var(--inputNumber-base-disabled-bottom-border-style) var(--inputNumber-base-disabled-left-border-style);
@@ -31048,7 +31419,7 @@ input.cxd-TextControl-input-password {
 }
 .cxd-Number-handler {
   line-height: calc((var(--Form-input-height) - 0.375rem) / 2);
-  height: calc((var(--Form-input-height) - var(--Number-borderWidth) * 2) / 2);
+  height: calc( (var(--Form-input-height) - var(--Number-borderWidth) * 2) / 2 );
 }
 .cxd-Number-handler-up {
   border-bottom: var(--Number-handler-borderBottom);
@@ -31371,11 +31742,17 @@ input.cxd-TextControl-input-password {
 .cxd-Select .cxd-PopOver.cxd-Select-popover {
   margin-top: 0.25rem;
 }
+.cxd-Select .cxd-PopOver.cxd-Select-popover .cxd-Select-menu .cxd-Checkbox span {
+  line-height: var(--select-base-default-option-line-height);
+  height: var(--select-base-default-option-line-height);
+}
 .cxd-Select .cxd-PopOver.cxd-Select-popover .cxd-Select-menu .cxd-Select-option {
   line-height: var(--select-base-default-option-line-height);
+  height: var(--select-base-default-option-line-height);
 }
 .cxd-Select .cxd-PopOver.cxd-Select-popover .cxd-Select-menu .cxd-Select-addBtn {
   line-height: var(--select-base-default-option-line-height);
+  height: var(--select-base-default-option-line-height);
 }
 .cxd-Select--borderHalf {
   border-left-color: transparent !important;
@@ -31445,9 +31822,7 @@ input.cxd-TextControl-input-password {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  line-height: calc(
-        var(--Form-input-lineHeight) * var(--Form-input-fontSize) - 0.125rem
-      );
+  line-height: calc( var(--Form-input-lineHeight) * var(--Form-input-fontSize) - 0.125rem );
   display: inline-block;
   vertical-align: middle;
   font-size: var(--Form-selectValue-fontSize);
@@ -31509,7 +31884,7 @@ input.cxd-TextControl-input-password {
   transform: rotate(180deg);
 }
 .cxd-Select.is-mobile {
-  min-height: calc(var(--Form-input-lineHeight) * var(--fontSizeLg));
+  min-height: var(--Form-select-height);
   border: none;
   padding: 0;
   font-size: var(--fontSizeLg);
@@ -31651,6 +32026,29 @@ input.cxd-TextControl-input-password {
   text-overflow: ellipsis;
   max-width: 100%;
 }
+.cxd-Select-option.is-mobile {
+  position: relative;
+}
+.cxd-Select-option.is-mobile > a {
+  margin-right: calc( 20px + var(--select-base-default-option-paddingRight) );
+}
+.cxd-Select-option.is-mobile .cxd-Select-option-item-check {
+  flex: 1;
+  text-align: left;
+  border-bottom: 0.0625rem solid var(--borderColor);
+}
+.cxd-Select-option.is-mobile .cxd-Select-option-mcheck {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: var(--select-base-default-option-paddingRight);
+  flex: none;
+  width: 1rem;
+  color: var(--Form-select-mobile-icon-check-color);
+}
+.cxd-Select-option.is-mobile:last-child .cxd-Select-option-item-check {
+  border-bottom: none;
+}
 .cxd-Select-noResult {
   color: var(--Form-select-placeholderColor);
   line-height: var(--Form-input-lineHeight);
@@ -31658,7 +32056,7 @@ input.cxd-TextControl-input-password {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  padding: calc((var(--Form-select-menu-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize)) / 2) var(--Form-select-paddingX);
+  padding: calc( ( var(--Form-select-menu-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize) ) / 2 ) var(--Form-select-paddingX);
 }
 .cxd-Select-option-hl {
   color: var(--info);
@@ -31677,7 +32075,7 @@ input.cxd-TextControl-input-password {
   margin-right: var(--Checkbox-gap);
 }
 .cxd-Select-spinner {
-  line-height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize));
+  line-height: calc( var(--Form-input-lineHeight) * var(--Form-input-fontSize) );
 }
 .cxd-Select-clear {
   padding: 0.1875rem;
@@ -31708,9 +32106,7 @@ input.cxd-TextControl-input-password {
   align-items: center;
   overflow-x: hidden;
   overflow-y: auto;
-  max-height: calc((
-            var(--Form-input-lineHeight) * var(--Form-input-fontSize) - 0.125rem + var(--gap-xs)
-          ) * 5);
+  max-height: calc( ( var(--Form-input-lineHeight) * var(--Form-input-fontSize) - 0.125rem + var(--gap-xs) ) * 5 );
 }
 .cxd-Select-overflow-wrapper .cxd-Select-value {
   position: static;
@@ -31718,9 +32114,7 @@ input.cxd-TextControl-input-password {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  line-height: calc(
-        var(--Form-input-lineHeight) * var(--Form-input-fontSize) - 0.125rem
-      );
+  line-height: calc( var(--Form-input-lineHeight) * var(--Form-input-fontSize) - 0.125rem );
   display: inline-block;
   vertical-align: middle;
   font-size: var(--Form-selectValue-fontSize);
@@ -31763,7 +32157,7 @@ input.cxd-TextControl-input-password {
   border-top-right-radius: 0;
 }
 .cxd-Select-popover.cxd-PopOver--leftTopLeftBottom {
-  margin-top: calc((var(--Form-select-popoverGap) - var(--Form-select-outer-borderWidth)) * -1);
+  margin-top: calc( (var(--Form-select-popoverGap) - var(--Form-select-outer-borderWidth)) * -1 );
 }
 .cxd-SelectControl:not(.is-inline) > .cxd-Select {
   display: flex;
@@ -31801,17 +32195,17 @@ input.cxd-TextControl-input-password {
 }
 @media (min-width: 576px) {
   .cxd-Form-control--sizeXs > .cxd-Select,
-  .cxd-Form-control--sizeSm > .cxd-Select,
-  .cxd-Form-control--sizeMd > .cxd-Select,
-  .cxd-Form-control--sizeLg > .cxd-Select {
+.cxd-Form-control--sizeSm > .cxd-Select,
+.cxd-Form-control--sizeMd > .cxd-Select,
+.cxd-Form-control--sizeLg > .cxd-Select {
     min-width: 100%;
     max-width: 100%;
     display: inline-flex !important;
   }
   .cxd-Form-control--sizeXs > .cxd-Select .cxd-Select-valueWrap,
-  .cxd-Form-control--sizeSm > .cxd-Select .cxd-Select-valueWrap,
-  .cxd-Form-control--sizeMd > .cxd-Select .cxd-Select-valueWrap,
-  .cxd-Form-control--sizeLg > .cxd-Select .cxd-Select-valueWrap {
+.cxd-Form-control--sizeSm > .cxd-Select .cxd-Select-valueWrap,
+.cxd-Form-control--sizeMd > .cxd-Select .cxd-Select-valueWrap,
+.cxd-Form-control--sizeLg > .cxd-Select .cxd-Select-valueWrap {
     width: 0;
   }
 }
@@ -31826,7 +32220,7 @@ input.cxd-TextControl-input-password {
   height: var(--Form-input-height);
   background: var(--Table-thead-bg);
   font-size: var(--Form-input-fontSize);
-  padding: calc((var(--Form-input-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize)) / 2) var(--gap-sm);
+  padding: calc( ( var(--Form-input-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize) ) / 2 ) var(--gap-sm);
 }
 .cxd-Selections-placeholder {
   color: var(--Form-input-placeholderColor);
@@ -31850,7 +32244,7 @@ input.cxd-TextControl-input-password {
   line-height: var(--Form-input-lineHeight);
   font-size: var(--Form-input-fontSize);
   align-items: center;
-  padding: calc((var(--Form-input-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize)) / 2) var(--gap-sm);
+  padding: calc( ( var(--Form-input-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize) ) / 2 ) var(--gap-sm);
 }
 .cxd-Selections-item > label {
   flex-basis: 3.125rem;
@@ -32063,6 +32457,12 @@ input.cxd-TextControl-input-password {
 .cxd-LocationPicker.is-disabled > cxd-LocationPicker-input {
   color: var(--text--muted-color);
 }
+.cxd-LocationPicker.is-mobile {
+  border: none;
+}
+.cxd-LocationPicker.is-mobile .cxd-LocationPicker-toggler svg {
+  top: 0.125rem;
+}
 .cxd-LocationPicker-placeholder {
   color: var(--colors-neutral-text-6);
   -webkit-user-select: none;
@@ -32076,6 +32476,8 @@ input.cxd-TextControl-input-password {
   margin-right: var(--gap-base);
   flex-basis: 0;
   flex-grow: 1;
+  overflow-x: auto;
+  max-width: calc(100% - px2rem(20px));
 }
 .cxd-LocationPicker-toggler {
   cursor: pointer;
@@ -32112,6 +32514,23 @@ input.cxd-TextControl-input-password {
 .cxd-LocationPicker-clear svg {
   top: 0;
 }
+.cxd-LocationPicker-popup {
+  height: 28.75rem;
+}
+.cxd-LocationPicker-popup-inner {
+  flex: 1;
+  padding: 0 1rem;
+}
+.cxd-LocationPicker-popup-inner .cxd-MapPicker-search {
+  padding-top: 0;
+  margin-bottom: 1rem;
+}
+.cxd-LocationPicker-popup-inner .cxd-MapPicker-search .cxd-TextControl-input {
+  border-radius: 0;
+  border-top: none;
+  border-right: none;
+  border-left: none;
+}
 .cxd-LocationControl {
   position: relative;
   width: 100%;
@@ -32120,6 +32539,11 @@ input.cxd-TextControl-input-password {
   border: none;
   box-shadow: var(--boxShadow);
 }
+.cxd-LocationControl.is-mobile {
+  flex: 1;
+  text-align: right;
+  overflow: hidden;
+}
 .cxd-LocationControl:not(.is-inline) > .cxd-LocationPicker {
   display: flex;
 }
@@ -32157,7 +32581,7 @@ input.cxd-TextControl-input-password {
 }
 .cxd-MapPicker-sugItem {
   cursor: pointer;
-  padding: calc((var(--Form-select-menu-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize)) / 2) var(--Form-select-paddingX);
+  padding: calc( ( var(--Form-select-menu-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize) ) / 2 ) var(--Form-select-paddingX);
 }
 .cxd-MapPicker-sugItem:hover {
   color: var(--Form-select-menu-onActive-color);
@@ -32166,6 +32590,9 @@ input.cxd-TextControl-input-password {
 .tangram-suggestion-main {
   display: none !important;
 }
+.cxd-MatrixControl {
+  max-width: 100%;
+}
 .cxd-MatrixControl-error {
   margin-bottom: 0;
 }
@@ -32180,9 +32607,7 @@ input.cxd-TextControl-input-password {
   background: var(--ColorPicker-bg);
   color: var(--ColorPicker-color);
   border-radius: var(--borderRadius);
-}
-.cxd-ColorPicker-popup {
-  height: 25rem;
+  height: var(--ColorPicker-height);
 }
 .cxd-ColorPicker:not(.is-disabled) {
   cursor: pointer;
@@ -32262,6 +32687,9 @@ input.cxd-TextControl-input-password {
 .cxd-ColorPicker-clear:active svg {
   fill: var(--Form-input-clearBtn-color-onActive);
 }
+.cxd-ColorPicker-clear svg {
+  top: 0;
+}
 .cxd-ColorPicker-arrow {
   margin-right: var(--gap-xs);
   width: var(--gap-md);
@@ -32278,9 +32706,10 @@ input.cxd-TextControl-input-password {
   width: 10px;
   height: 10px;
   top: 0;
+  transform: rotate(90deg);
 }
 .cxd-ColorPicker.is-opened .cxd-ColorPicker-arrow > svg {
-  transform: rotate(180deg);
+  transform: rotate(270deg);
 }
 .cxd-ColorPicker-popover {
   border: none;
@@ -32294,6 +32723,21 @@ input.cxd-TextControl-input-password {
   border-radius: var(--borderRadius) !important;
   box-shadow: var(--ColorPicker-boxShadow) !important;
 }
+.cxd-ColorPicker-popup {
+  height: 31.25rem;
+}
+.cxd-ColorPicker-popup .sketch-picker {
+  width: 80% !important;
+  box-shadow: none !important;
+}
+.cxd-ColorPicker-popup .sketch-picker input:focus {
+  outline: none;
+}
+.cxd-ColorPicker-popup .sketch-picker .flexbox-fix:last-child > div {
+  width: 18px !important;
+  height: 18px !important;
+  margin: 0px 16px 10px 0px !important;
+}
 .cxd-DatePicker {
   position: relative;
   display: inline-flex;
@@ -32343,32 +32787,32 @@ input.cxd-TextControl-input-password {
 .cxd-DatePicker--borderNone {
   border-color: transparent !important;
 }
-.cxd-DatePicker:not(.is-disabled) {
+.cxd-DatePicker:not(.is-disabled):not(.is-mobile) {
   cursor: pointer;
 }
-.cxd-DatePicker:not(.is-disabled):hover {
+.cxd-DatePicker:not(.is-disabled):not(.is-mobile):hover {
   background: var(--DatePicker-onHover-bg);
   border-color: var(--DatePicker-onHover-borderColor);
   border-style: var(--inputDate-hover-top-border-style) var(--inputDate-hover-right-border-style) var(--inputDate-hover-bottom-border-style) var(--inputDate-hover-left-border-style);
   border-width: var(--inputDate-hover-top-border-width) var(--inputDate-hover-right-border-width) var(--inputDate-hover-bottom-border-width) var(--inputDate-hover-left-border-width);
 }
-.cxd-DatePicker:not(.is-disabled):hover .cxd-DatePicker-input {
+.cxd-DatePicker:not(.is-disabled):not(.is-mobile):hover .cxd-DatePicker-input {
   color: var(--inputDate-hover-color);
 }
-.cxd-DatePicker:not(.is-disabled):hover .cxd-DatePicker-clear {
+.cxd-DatePicker:not(.is-disabled):not(.is-mobile):hover .cxd-DatePicker-clear {
   display: flex;
 }
-.cxd-DatePicker:not(.is-disabled):hover .cxd-DatePicker-clear + .cxd-DatePicker-toggler {
+.cxd-DatePicker:not(.is-disabled):not(.is-mobile):hover .cxd-DatePicker-clear + .cxd-DatePicker-toggler {
   display: none;
 }
-.cxd-DatePicker:not(.is-disabled).is-focused {
+.cxd-DatePicker:not(.is-disabled):not(.is-mobile).is-focused {
   background: var(--inputDate-active-bg-color);
   border-color: var(--DatePicker-onFocused-borderColor);
   box-shadow: var(--inputDate-active-shadow);
   border-style: var(--inputDate-active-top-border-style) var(--inputDate-active-right-border-style) var(--inputDate-active-bottom-border-style) var(--inputDate-active-left-border-style);
   border-width: var(--inputDate-active-top-border-width) var(--inputDate-active-right-border-width) var(--inputDate-active-bottom-border-width) var(--inputDate-active-left-border-width);
 }
-.cxd-DatePicker:not(.is-disabled).is-focused .cxd-DatePicker-input {
+.cxd-DatePicker:not(.is-disabled):not(.is-mobile).is-focused .cxd-DatePicker-input {
   color: var(--inputDate-active-color);
 }
 .is-error > .cxd-DatePicker {
@@ -32490,13 +32934,13 @@ input.cxd-TextControl-input-password {
 .cxd-DatePicker-popover.cxd-PopOver--leftTopLeftBottom, .cxd-DatePicker-popover.cxd-PopOver--rightTopRightBottom {
   margin: -0.125rem 0 0;
 }
-.cxd-DatePicker-popup {
-  height: 18.75rem;
-}
 .cxd-DatePicker.is-mobile {
   border: 0;
   justify-content: flex-end;
 }
+.cxd-DatePicker.is-mobile.is-focused, .cxd-DatePicker.is-mobile:hover {
+  border: none;
+}
 .cxd-DatePicker.is-mobile span:focus,
 .cxd-DatePicker.is-mobile a:focus {
   outline: unset;
@@ -32514,10 +32958,8 @@ input.cxd-TextControl-input-password {
   flex-grow: unset;
   flex-basis: unset;
 }
-.cxd-DatePicker.is-mobile .cxd-DatePicker-toggler {
-  margin-top: -3px;
-}
 .cxd-DatePicker-popup.cxd-DatePicker-mobile {
+  height: 20rem;
   color: red;
 }
 .cxd-DatePicker-popup.cxd-DatePicker-mobile .rdt {
@@ -32693,18 +33135,20 @@ input.cxd-TextControl-input-password {
   color: var(--inputTime-active-color);
   background: var(--inputTime-active-bg-color);
 }
-.cxd-CalendarInputWrapper .cxd-CalendarInput-sugsItem:hover {
+.cxd-CalendarInputWrapper .cxd-CalendarInput-sugsItem:not(.is-mobile):hover {
   color: var(--inputTime-hover-color);
   background: var(--inputTime-hover-bg-color);
 }
 .cxd-TimeContentWrapper {
   display: flex;
+  justify-content: center;
 }
 .cxd-TimeRangeHeaderWrapper {
   height: 40px;
   padding-top: 10px;
   text-align: center;
   border-bottom: 1px solid var(--Calendar-input-borderColor);
+  margin: 0 0.25rem;
 }
 .cxd-TimeFooterWrapper {
   height: 40px;
@@ -33078,29 +33522,29 @@ td.rdtQuarter.rdtDisabled:hover > span {
 .cxd-DateRangePicker .cxd-DateRangePicker-clear {
   display: none;
 }
-.cxd-DateRangePicker:not(.is-disabled):hover {
+.cxd-DateRangePicker:not(.is-disabled):not(.is-mobile):hover {
   background: var(--DatePicker-onHover-bg);
   border-color: var(--DatePicker-onHover-borderColor);
   border-style: var(--inputDate-hover-top-border-style) var(--inputDate-hover-right-border-style) var(--inputDate-hover-bottom-border-style) var(--inputDate-hover-left-border-style);
   border-width: var(--inputDate-hover-top-border-width) var(--inputDate-hover-right-border-width) var(--inputDate-hover-bottom-border-width) var(--inputDate-hover-left-border-width);
 }
-.cxd-DateRangePicker:not(.is-disabled):hover .cxd-DateRangePicker-input {
+.cxd-DateRangePicker:not(.is-disabled):not(.is-mobile):hover .cxd-DateRangePicker-input {
   color: var(--inputDate-hover-color);
 }
-.cxd-DateRangePicker:not(.is-disabled):hover .cxd-DateRangePicker-clear {
+.cxd-DateRangePicker:not(.is-disabled):not(.is-mobile):hover .cxd-DateRangePicker-clear {
   display: flex;
 }
-.cxd-DateRangePicker:not(.is-disabled):hover .cxd-DateRangePicker-clear + .cxd-DateRangePicker-toggler {
+.cxd-DateRangePicker:not(.is-disabled):not(.is-mobile):hover .cxd-DateRangePicker-clear + .cxd-DateRangePicker-toggler {
   display: none;
 }
-.cxd-DateRangePicker:not(.is-disabled).is-focused {
+.cxd-DateRangePicker:not(.is-disabled):not(.is-mobile).is-focused {
   background: var(--inputDate-active-bg-color);
   border-color: var(--DatePicker-onFocused-borderColor);
   box-shadow: var(--inputDate-active-shadow);
   border-style: var(--inputDate-active-top-border-style) var(--inputDate-active-right-border-style) var(--inputDate-active-bottom-border-style) var(--inputDate-active-left-border-style);
   border-width: var(--inputDate-active-top-border-width) var(--inputDate-active-right-border-width) var(--inputDate-active-bottom-border-width) var(--inputDate-active-left-border-width);
 }
-.cxd-DateRangePicker:not(.is-disabled).is-focused .cxd-DateRangePicker-input {
+.cxd-DateRangePicker:not(.is-disabled):not(.is-mobile).is-focused .cxd-DateRangePicker-input {
   color: var(--inputDate-active-color);
 }
 .is-error > .cxd-DateRangePicker {
@@ -33119,6 +33563,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
   font-size: var(--DatePicker-fontSize);
   font-weight: var(--inputDate-default-fontWeight);
   color: var(--inputDate-default-color);
+  text-align: center;
 }
 .cxd-DateRangePicker .cxd-DateRangePicker-input::-moz-placeholder {
   color: var(--colors-neutral-text-6);
@@ -33235,9 +33680,18 @@ td.rdtQuarter.rdtDisabled:hover > span {
   width: auto;
   padding: 0;
 }
+.cxd-DateRangePicker-wrap.is-mobile {
+  flex: 1;
+}
+.cxd-DateRangePicker-wrap.is-mobile .cxd-DateRangePicker-end {
+  margin-top: 0;
+}
 .cxd-DateRangePicker-picker-wrap {
   display: flex;
 }
+.cxd-DateRangePicker-picker-wrap.is-vertical {
+  flex-direction: column;
+}
 .cxd-DateRangePicker-start,
 .cxd-DateRangePicker-end {
   display: flex;
@@ -33258,6 +33712,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
   list-style: none;
   background: #f7f7f9;
   line-height: 2rem;
+  overflow-x: auto;
 }
 .cxd-DateRangePicker-ranger {
   display: inline-block;
@@ -33292,6 +33747,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
   .cxd-DateRangePicker-wrap {
     white-space: nowrap;
   }
+
   .cxd-DateRangePicker-end {
     margin-top: 0;
     border-left: 1px solid var(--Calendar-input-borderColor);
@@ -33305,10 +33761,16 @@ td.rdtQuarter.rdtDisabled:hover > span {
   background: var(--DatePicker-bg);
   border-radius: var(--DatePicker-borderRadius);
 }
+.cxd-DateRangeCalendar.is-mobile {
+  display: block;
+}
 .cxd-DateRangePicker.is-mobile {
   border: 0;
   justify-content: flex-end;
 }
+.cxd-DateRangePicker.is-mobile.is-focused, .cxd-DateRangePicker.is-mobile:hover {
+  border: none;
+}
 .cxd-DateRangePicker.is-mobile span:focus,
 .cxd-DateRangePicker.is-mobile a:focus {
   outline: unset;
@@ -33326,9 +33788,6 @@ td.rdtQuarter.rdtDisabled:hover > span {
   flex-grow: unset;
   flex-basis: unset;
 }
-.cxd-DateRangePicker.is-mobile .cxd-DateRangePicker-toggler {
-  margin-top: -3px;
-}
 .cxd-ImageControl {
   position: relative;
 }
@@ -33967,6 +34426,9 @@ td.rdtQuarter.rdtDisabled:hover > span {
 .cxd-EditorControl--xxl > .cxd-MonacoEditor {
   min-height: 500px;
 }
+.cxd-EditorControl .monaco-editor .iPadShowKeyboard {
+  display: none;
+}
 .monaco-inputbox > .wrapper {
   padding: 0;
 }
@@ -34062,12 +34524,12 @@ td.rdtQuarter.rdtDisabled:hover > span {
 .cxd-InputRange {
   display: flex;
   justify-content: space-between;
-  padding: var(--InputRange-padding) 0;
   width: 100%;
 }
 .cxd-InputRange-wrap {
   position: relative;
   flex: auto;
+  padding: var(--InputRange-padding) 0;
 }
 .cxd-InputRange-input {
   width: var(--InputRange-input-width);
@@ -34086,6 +34548,16 @@ td.rdtQuarter.rdtDisabled:hover > span {
 .cxd-InputRange-input .cxd-Number-handler-up-inner:hover, .cxd-InputRange-input .cxd-Number-handler-down-inner:hover {
   color: var(--Number-handler-onHover-color);
 }
+.cxd-InputRange.is-mobile .cxd-InputRange-input {
+  width: var(--InputRange-input-mobile-width);
+}
+.cxd-InputRange.is-mobile .cxd-InputRange-input .cxd-Number-handler-wrap {
+  display: none !important;
+}
+.cxd-InputRange.is-mobile .cxd-InputRange-input input {
+  padding: 0 !important;
+  text-align: center;
+}
 .cxd-InputRange-clear {
   display: flex;
   align-items: center;
@@ -34134,6 +34606,10 @@ td.rdtQuarter.rdtDisabled:hover > span {
   width: var(--InputRange-handle-width);
   height: var(--InputRange-handle-height);
 }
+.cxd-InputRange-handle.is-mobile {
+  width: var(--InputRange-handle-mobile-width);
+  height: var(--InputRange-handle-mobile-height);
+}
 .cxd-InputRange-handle-icon, .cxd-InputRange-handle-drage {
   width: 100%;
   height: 100%;
@@ -34160,7 +34636,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
 .cxd-InputRange-handle-icon:focus, .cxd-InputRange-handle-drage:focus {
   box-shadow: var(--InputRange-handle-onFocus-boxShadow);
 }
-.cxd-InputRange-handle-drage {
+.cxd-InputRange-handle:not(.is-mobile) .cxd-InputRange-handle-drage {
   transform: var(--InputRange-handle-onActive-transform);
   box-shadow: var(--InputRange-handle-onFocus-boxShadow);
   border-width: var(--InputRange-handle-onDrage-border-width);
@@ -34287,6 +34763,10 @@ td.rdtQuarter.rdtDisabled:hover > span {
   border-style: solid;
   border-color: transparent var(--InputRange-label-bg) transparent transparent;
 }
+.cxd-InputRange.is-mobile .cxd-InputRange-label {
+  display: block;
+  white-space: nowrap;
+}
 .cxd-InputRange-marks {
   position: relative;
   top: 8px;
@@ -34310,6 +34790,12 @@ td.rdtQuarter.rdtDisabled:hover > span {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.cxd-InputRange.is-mobile .cxd-InputRange-marks div {
+  top: 0;
+}
+.cxd-InputRange.is-mobile .cxd-InputRange-marks div:nth-child(2n) {
+  top: -1.875rem;
+}
 .cxd-RepeatControl .repeat-btn {
   width: 5rem;
 }
@@ -34322,7 +34808,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
 }
 @media (min-width: 768px) {
   .repeat-control.form-contorl-inline,
-  .form-group-inline .repeat-control {
+.form-group-inline .repeat-control {
     display: inline-block;
     min-width: 280px;
     width: auto;
@@ -34409,7 +34895,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
 .cxd-Tree--outline .cxd-Tree-item--isLeaf.is-child:before {
   position: absolute;
   top: -8px;
-  left: calc((var(--Tree-icon-gap) + var(--Tree-itemArrowWidth) + var(--Tree-icon-margin-right)) / 2 - var(--Tree-indent));
+  left: calc( ( var(--Tree-icon-gap) + var(--Tree-itemArrowWidth) + var(--Tree-icon-margin-right) ) / 2 - var(--Tree-indent) );
   bottom: 0px;
   border-left: 1px solid var(--borderColor);
   content: "";
@@ -34447,15 +34933,15 @@ td.rdtQuarter.rdtDisabled:hover > span {
   overflow: hidden;
   height: 2rem;
 }
-.cxd-Tree-itemLabel:hover .cxd-Tree-itemLabel-item {
-  background-color: var(--Tree-item-onHover-bg-pure);
-}
 .cxd-Tree-itemLabel:hover .cxd-Tree-item-icons {
   visibility: visible;
 }
 .cxd-Tree-itemLabel .cxd-Checkbox {
   margin-right: var(--inputTree-checkboxes-size-marginRight);
 }
+.cxd-Tree-item:hover {
+  background-color: var(--Tree-item-onHover-bg-pure);
+}
 .cxd-Tree-item .is-checked {
   border-radius: var(--Tree-item-onChekced-bg-borderRadius);
 }
@@ -34496,7 +34982,6 @@ td.rdtQuarter.rdtDisabled:hover > span {
   top: 0;
 }
 .cxd-Tree-itemInput {
-  padding-left: var(--Tree-itemArrowWidth);
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
@@ -34519,10 +35004,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
   border: var(--Form-input-borderWidth) solid var(--inputTree-border-color);
   border-radius: var(--inputTree-border-radius);
   line-height: var(--inputTree-input-lineHeight);
-  padding: calc((
-              var(--Tree-inputHeight) - var(--inputTree-input-lineHeight) *
-                var(--inputTree-fontSize) - 0.125rem
-            ) / 2) var(--Form-input-paddingX);
+  padding: calc( ( var(--Tree-inputHeight) - var(--inputTree-input-lineHeight) * var(--inputTree-fontSize) - 0.125rem ) / 2 ) var(--Form-input-paddingX);
   font-size: var(--inputTree-fontSize);
 }
 .cxd-Tree-itemInput > input::-moz-placeholder {
@@ -34541,6 +35023,11 @@ td.rdtQuarter.rdtDisabled:hover > span {
   box-shadow: var(--Form-input-boxShadow);
   background: var(--Form-input-onFocused-bg);
 }
+.cxd-Tree-itemInput.is-mobile > input {
+  border-radius: 0;
+  border: none;
+  border-bottom: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
+}
 .cxd-Tree-addTopBtn {
   cursor: pointer;
   height: var(--Tree-itemHeight);
@@ -34651,6 +35138,12 @@ td.rdtQuarter.rdtDisabled:hover > span {
 .cxd-Tree-dropIndicator--hover::after {
   display: none;
 }
+.cxd-PopUp .cxd-Tree {
+  flex: 1;
+}
+.cxd-PopUp .cxd-Tree .cxd-Tree-itemLabel:hover .cxd-Tree-itemLabel-item {
+  background-color: none !important;
+}
 .cxd-TreeSelectControl {
   position: relative;
 }
@@ -34741,7 +35234,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
   color: var(--text--muted-color);
 }
 .cxd-TreeSelect-spinner {
-  line-height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize));
+  line-height: calc( var(--Form-input-lineHeight) * var(--Form-input-fontSize) );
 }
 .cxd-TreeSelect-clear {
   padding: var(--Form-input-clearBtn-padding);
@@ -34957,7 +35450,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
   display: none;
 }
 .cxd-Combo-items:empty + .cxd-Combo-toolbar {
-  padding-top: calc((var(--Form-input-height) - var(--Combo-addBtn-height)) / 2);
+  padding-top: calc( (var(--Form-input-height) - var(--Combo-addBtn-height)) / 2 );
 }
 .cxd-Combo-item {
   background: var(--combo-bg-color);
@@ -34999,6 +35492,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
   white-space: nowrap;
   align-items: flex-start;
   padding-top: var(--Form-label-paddingTop);
+  height: 1.875rem;
 }
 .cxd-Combo--hor .cxd-Combo-delBtn.is-disabled {
   pointer-events: none;
@@ -35098,6 +35592,22 @@ td.rdtQuarter.rdtDisabled:hover > span {
   height: 100%;
   background: rgba(0, 0, 0, 0.1);
 }
+.cxd-Combo.is-mobile .cxd-Form-item .cxd-Form-rowInner {
+  flex: 1;
+}
+.cxd-Combo.is-mobile .cxd-Combo-delBtn {
+  height: 1.25rem;
+  padding-top: 0;
+}
+.cxd-Combo.is-mobile .cxd-Combo-item {
+  align-items: center;
+  border-bottom: var(--Form-input-borderWidth) solid var(--borderColor);
+}
+.cxd-Combo.is-mobile:not(.cxd-Combo--ver) .cxd-TextareaControl > textarea,
+.cxd-Combo.is-mobile:not(.cxd-Combo--ver) .cxd-Form-control > .cxd-TextControl-input,
+.cxd-Combo.is-mobile:not(.cxd-Combo--ver) .cxd-TextControl.is-focused > .cxd-TextControl-input {
+  border-bottom: var(--Form-input-borderWidth) solid var(--borderColor);
+}
 .cxd-ComboTabs > .cxd-Tabs-links::before, .cxd-ComboTabs > .cxd-Tabs-links::after {
   display: table;
   content: "";
@@ -35322,7 +35832,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
   color: var(--text--muted-color);
 }
 .cxd-Picker-spinner {
-  line-height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize));
+  line-height: calc( var(--Form-input-lineHeight) * var(--Form-input-fontSize) );
 }
 .cxd-Picker-clear {
   padding: var(--Form-input-clearBtn-padding);
@@ -35429,9 +35939,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
           user-select: none;
   white-space: nowrap;
   vertical-align: middle;
-  line-height: calc(
-      var(--Form-input-lineHeight) * var(--Form-input-fontSize) - 0.125rem
-    );
+  line-height: calc( var(--Form-input-lineHeight) * var(--Form-input-fontSize) - 0.125rem );
   display: inline-block;
   font-size: var(--Pick-base-value-fontSize);
   color: var(--Pick-base-value-color);
@@ -35508,6 +36016,15 @@ td.rdtQuarter.rdtDisabled:hover > span {
   display: inline-block;
   min-width: 9.375rem;
 }
+.cxd-PickerControl.is-mobile {
+  width: 100%;
+}
+.cxd-PickerControl.is-mobile .cxd-Form-item {
+  padding: 0;
+}
+.cxd-PickerControl.is-mobile .cxd-Picker-input {
+  border: none;
+}
 .cxd-QrCode {
   min-height: var(--Form-input-height);
   padding: 0.4375rem 0;
@@ -35893,7 +36410,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
   padding: var(--transfer-search-paddingTop) var(--transfer-search-paddingRight) var(--transfer-search-paddingBottom) var(--transfer-search-paddingLeft);
   width: 100%;
 }
-.cxd-Transfer-search .cxd-InputBox {
+.cxd-Transfer-search .cxd-InputBox:not(.is-mobile) {
   font-size: var(--transfer-search-fontSize);
   font-weight: var(--transfer-search-fontWeight);
   line-height: var(--transfer-search-lineHeight);
@@ -35905,31 +36422,39 @@ td.rdtQuarter.rdtDisabled:hover > span {
   box-shadow: var(--transfer-search-shadow);
   padding: var(--transfer-search-input-paddingTop) var(--transfer-search-input-paddingRight) var(--transfer-search-input-paddingBottom) var(--transfer-search-input-paddingLeft);
 }
-.cxd-Transfer-search .cxd-InputBox:hover {
+.cxd-Transfer-search .cxd-InputBox:not(.is-mobile):hover {
   border-color: var(--transfer-search-border-hover-color);
 }
-.cxd-Transfer-search .cxd-InputBox.is-focused {
+.cxd-Transfer-search .cxd-InputBox:not(.is-mobile).is-focused {
   border-color: var(--transfer-search-border-active-color);
 }
-.cxd-Transfer-search .cxd-InputBox input {
+.cxd-Transfer-search .cxd-InputBox:not(.is-mobile) input {
   color: var(--transfer-search-color);
   font-size: var(--transfer-search-fontSize);
   font-weight: var(--transfer-search-fontWeight);
   line-height: var(--transfer-search-lineHeight);
   height: var(--transfer-search-lineHeight);
 }
-.cxd-Transfer-search .cxd-InputBox input::-moz-placeholder {
+.cxd-Transfer-search .cxd-InputBox:not(.is-mobile) input::-moz-placeholder {
   color: var(--transfer-search-placeholder-font-color);
 }
-.cxd-Transfer-search .cxd-InputBox input::placeholder {
+.cxd-Transfer-search .cxd-InputBox:not(.is-mobile) input::placeholder {
   color: var(--transfer-search-placeholder-font-color);
 }
+.cxd-Transfer-search.is-mobile .cxd-InputBox {
+  border: none;
+  border-bottom: var(--transfer-search-bottom-border-width) var(--transfer-search-bottom-border-style) var(--transfer-search-bottom-border-color);
+  border-radius: 0;
+}
 .cxd-Transfer-mid {
   min-width: 0.625rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
+.cxd-Transfer-mid.is-mobile {
+  display: none;
+}
 .cxd-Transfer-arrow {
   width: 40px;
   height: 30px;
@@ -36012,6 +36537,15 @@ td.rdtQuarter.rdtDisabled:hover > span {
 .cxd-Transfer .cxd-Selections .cxd-TableSelection .cxd-Table-table > tbody > tr {
   height: auto;
 }
+.cxd-Transfer .cxd-Transfer-result .cxd-Transfer-title {
+  height: 2.5rem;
+  line-height: 2.5rem;
+}
+.cxd-Transfer .cxd-Transfer-result.is-mobile .cxd-Transfer-search .cxd-InputBox {
+  border: none;
+  border-bottom: var(--transfer-search-bottom-border-width) var(--transfer-search-bottom-border-style) var(--transfer-search-bottom-border-color);
+  border-radius: 0;
+}
 .cxd-TabsTransfer .cxd-Transfer-title {
   height: 40px;
 }
@@ -36038,7 +36572,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
   height: var(--Form-input-height);
   line-height: var(--Form-input-lineHeight);
   font-size: var(--Form-input-fontSize);
-  padding: calc((var(--Form-input-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize)) / 2) var(--gap-sm);
+  padding: calc( ( var(--Form-input-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize) ) / 2 ) var(--gap-sm);
   color: var(--text--muted-color);
 }
 .cxd-TabsTransfer-tab {
@@ -36092,6 +36626,11 @@ td.rdtQuarter.rdtDisabled:hover > span {
   max-height: 100%;
   overflow: auto;
 }
+.cxd-TabsTransfer-tabs > .cxd-Tabs-content .cxd-TabsTransfer-search.is-mobile .cxd-InputBox {
+  border: none;
+  border-bottom: 1px solid var(--TabsTransfer-border-color);
+  border-radius: 0;
+}
 .cxd-TransferControl {
   position: relative;
   overflow: hidden;
@@ -36143,6 +36682,10 @@ td.rdtQuarter.rdtDisabled:hover > span {
 }
 .cxd-TransferDropDown-content.is-mobile {
   width: 100%;
+  min-width: auto;
+}
+.cxd-TransferDropDown-content.is-mobile .cxd-Table-table > thead > tr > th:first-child.cxd-Table-checkCell {
+  padding-left: var(--select-table-option-paddingLeft);
 }
 .cxd-TransferDropDown-content > .cxd-Transfer-selection {
   flex-grow: 1;
@@ -36170,6 +36713,9 @@ td.rdtQuarter.rdtDisabled:hover > span {
 .cxd-NestedSelect--borderNone {
   border-color: transparent !important;
 }
+.cxd-NestedSelect.is-mobile {
+  text-align: right;
+}
 .cxd-NestedSelect-optionArrowRight {
   display: inline-block;
   padding-right: var(--Form-select-icon-rigin);
@@ -36192,7 +36738,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  padding: calc((var(--Form-select-menu-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize)) / 2) var(--Form-select-paddingX);
+  padding: calc( ( var(--Form-select-menu-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize) ) / 2 ) var(--Form-select-paddingX);
 }
 .cxd-NestedSelect-menu {
   width: 10rem;
@@ -36256,7 +36802,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
   background: unset;
 }
 .cxd-NestedSelect-popup {
-  height: 28.75rem;
+  height: 21.25rem;
 }
 .cxd-Cascader-tabs {
   display: flex;
@@ -36272,9 +36818,11 @@ td.rdtQuarter.rdtDisabled:hover > span {
 .cxd-Cascader-tab {
   flex: 1;
   width: calc((100vw - 20px) / 3);
-  height: 23.125rem;
+  height: 16.25rem;
   overflow-y: auto;
   display: inline-block;
+  padding-left: 0.625rem;
+  border: 1px solid var(--Cascader-border-color);
 }
 .cxd-Cascader-tab::-webkit-scrollbar {
   display: none;
@@ -36315,19 +36863,23 @@ td.rdtQuarter.rdtDisabled:hover > span {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.375rem 0;
+  padding: 0.375rem 0 0.375rem 0.625rem;
   font-size: var(--fontSizeMd);
   line-height: var(--Cascader-option-lineHeight);
   cursor: pointer;
   position: relative;
 }
-.cxd-Cascader-option.selected span {
+.cxd-Cascader-option.is-active {
+  background-color: var(--Cascader-border-active-bg-color);
+}
+.cxd-Cascader-option.selected .cxd-Cascader-option--text {
   color: var(--primary);
 }
 .cxd-Cascader-option.disabled span {
   color: gray;
 }
 .cxd-Cascader-option--text {
+  flex: 1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -36335,6 +36887,17 @@ td.rdtQuarter.rdtDisabled:hover > span {
      -moz-user-select: none;
           user-select: none;
 }
+.cxd-Cascader-option--text.disabled {
+  color: var(--Cascader-option-disable-color);
+}
+.cxd-Cascader-option-arrow {
+  flex: 1;
+  text-align: right;
+  padding-right: 0.375rem;
+}
+.cxd-Cascader-option-arrow > svg {
+  transform: scale(0.8);
+}
 .cxd-Cascader-option-selectedNum {
   min-width: 1rem;
   height: 1rem;
@@ -36435,7 +36998,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
   color: var(--text--muted-color);
 }
 .cxd-IconPickerControl-spinner {
-  line-height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize));
+  line-height: calc( var(--Form-input-lineHeight) * var(--Form-input-fontSize) );
 }
 .cxd-IconPickerControl-clear {
   padding: var(--Form-input-clearBtn-padding);
@@ -36554,7 +37117,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  line-height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize));
+  line-height: calc( var(--Form-input-lineHeight) * var(--Form-input-fontSize) );
   vertical-align: middle;
   display: inline-block;
   overflow: hidden;
@@ -36641,7 +37204,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
   color: var(--text--muted-color);
 }
 .cxd-IconSelectControl-spinner {
-  line-height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize));
+  line-height: calc( var(--Form-input-lineHeight) * var(--Form-input-fontSize) );
 }
 .cxd-IconSelectControl-clear {
   padding: var(--Form-input-clearBtn-padding);
@@ -37015,6 +37578,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
     display: inline-block;
     max-width: 100%;
   }
+
   .cxd-Form-control--sizeXs {
     width: var(--Form-control-widthXs);
     max-width: 100%;
@@ -37024,6 +37588,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
   .cxd-Form-control--sizeXs.cxd-NumberControl {
     width: var(--Form-control-widthXs);
   }
+
   .cxd-Form-control--sizeSm {
     width: var(--Form-control-widthSm);
     max-width: 100%;
@@ -37033,12 +37598,14 @@ td.rdtQuarter.rdtDisabled:hover > span {
   .cxd-Form-control--sizeSm.cxd-NumberControl {
     width: var(--Form-control-widthSm);
   }
+
   .cxd-Form-control--sizeMd {
     width: var(--Form-control-widthMd);
     max-width: 100%;
     display: inline-block;
     vertical-align: top;
   }
+
   .cxd-Form-control--sizeLg {
     width: var(--Form-control-widthLg);
     max-width: 100%;
@@ -37048,6 +37615,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
   .cxd-Form-control--sizeLg.cxd-NumberControl {
     width: var(--Form-control-widthLg);
   }
+
   .cxd-Form-item--horizontal {
     display: flex;
     flex-wrap: nowrap;
@@ -37059,16 +37627,16 @@ td.rdtQuarter.rdtDisabled:hover > span {
     min-width: var(--Form--horizontal-value-minWidth);
   }
   .cxd-Form-item--horizontal .cxd-Form-itemColumn--xs,
-  .cxd-Form-item--horizontal .cxd-Form-itemColumn--sm,
-  .cxd-Form-item--horizontal .cxd-Form-itemColumn--normal,
-  .cxd-Form-item--horizontal .cxd-Form-itemColumn--auto,
-  .cxd-Form-item--horizontal .cxd-Form-itemColumn--md,
-  .cxd-Form-item--horizontal .cxd-Form-itemColumn--lg {
+.cxd-Form-item--horizontal .cxd-Form-itemColumn--sm,
+.cxd-Form-item--horizontal .cxd-Form-itemColumn--normal,
+.cxd-Form-item--horizontal .cxd-Form-itemColumn--auto,
+.cxd-Form-item--horizontal .cxd-Form-itemColumn--md,
+.cxd-Form-item--horizontal .cxd-Form-itemColumn--lg {
     flex-grow: unset;
     flex-basis: unset;
   }
   .cxd-Form-item--horizontal > .cxd-Form-label {
-    padding-top: calc((var(--Form-input-height) - var(--Form-item-lineHeight) * var(--Form-item-fontSize)) / 2);
+    padding-top: calc( ( var(--Form-input-height) - var(--Form-item-lineHeight) * var(--Form-item-fontSize) ) / 2 );
     word-break: break-word;
     line-height: var(--Form-item-lineHeight);
     margin: 0;
@@ -37169,7 +37737,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
     vertical-align: top;
   }
   .cxd-Form-item--inline > .cxd-Form-label {
-    padding-top: calc((var(--Form-input-height) - var(--Form-item-lineHeight) * var(--Form-item-fontSize)) / 2);
+    padding-top: calc( ( var(--Form-input-height) - var(--Form-item-lineHeight) * var(--Form-item-fontSize) ) / 2 );
     word-break: break-word;
     line-height: var(--Form-item-lineHeight);
     margin: 0;
@@ -37197,6 +37765,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
   .cxd-Form-item--inline > .cxd-Form-value > .cxd-TextControl--withAddOn {
     display: inline-flex;
   }
+
   .cxd-Form-row {
     display: flex;
     flex-wrap: wrap;
@@ -37208,11 +37777,13 @@ td.rdtQuarter.rdtDisabled:hover > span {
     padding-left: calc(var(--Form-row-gutterWidth) / 2);
     padding-right: calc(var(--Form-row-gutterWidth) / 2);
   }
+
   .cxd-Form-col {
     flex-basis: 0;
     flex-grow: 1;
     flex-shrink: 1;
   }
+
   .cxd-Form-rowInner {
     display: flex;
     flex-wrap: nowrap;
@@ -37231,9 +37802,11 @@ td.rdtQuarter.rdtDisabled:hover > span {
 .cxd-Form--debug {
   padding: var(--gap-sm);
   margin-bottom: var(--gap-sm);
-  background-color: rgb(250, 250, 250);
+  background-color: #fafafa;
   border-radius: var(--borderRadius);
   position: relative;
+  word-wrap: break-word;
+  word-break: break-all;
 }
 .cxd-Form--column {
   display: flex;
@@ -37288,24 +37861,17 @@ td.rdtQuarter.rdtDisabled:hover > span {
 }
 /* 移动端样式调整 */
 @media (max-width: 767px) {
-  .cxd-Form::before {
-    position: absolute;
-    box-sizing: border-box;
-    content: " ";
-    pointer-events: none;
-    right: 0;
-    top: 0;
-    left: 0;
-    border-bottom: var(--Form-input-borderWidth) solid var(--borderColor);
+  .cxd-Combo-form::before {
+    border-bottom: none;
   }
-  .cxd-Form .cxd-Form-item {
+
+  .cxd-Form-item {
     display: flex;
-    flex-wrap: wrap;
     margin-bottom: 0;
-    padding: var(--Form-item-gap) 0;
+    padding: var(--Form-item-mobile-gap) 0;
     position: relative;
   }
-  .cxd-Form .cxd-Form-item::after {
+  .cxd-Form-item::after {
     position: absolute;
     box-sizing: border-box;
     content: " ";
@@ -37315,11 +37881,11 @@ td.rdtQuarter.rdtDisabled:hover > span {
     left: 0;
     border-bottom: var(--Form-input-borderWidth) solid var(--borderColor);
   }
-  .cxd-Form .cxd-Form-item .cxd-InputGroup-addOn,
-  .cxd-Form .cxd-Form-item .cxd-TextControl-addOn {
+  .cxd-Form-item .cxd-InputGroup-addOn,
+.cxd-Form-item .cxd-TextControl-addOn {
     border: none;
   }
-  .cxd-Form .cxd-Form-item > .cxd-Form-label {
+  .cxd-Form-item .cxd-Form-label {
     flex: 0 0 28%;
     max-width: 28%;
     min-height: 1px;
@@ -37330,111 +37896,218 @@ td.rdtQuarter.rdtDisabled:hover > span {
     margin-bottom: 0;
     font-size: var(--fontSizeLg);
   }
-  .cxd-Form .cxd-Form-item .cxd-Form-description {
+  .cxd-Form-item .cxd-Form-label > span {
+    line-height: 2rem;
+    display: inline-block;
+  }
+  .cxd-Form-item .cxd-Form-description {
     font-size: var(--fontSizeBase);
   }
-  .cxd-Form .cxd-Form-item .cxd-TextControl-input {
+  .cxd-Form-item .cxd-TextControl-input {
     font-size: var(--fontSizeLg);
   }
-  .cxd-Form .cxd-Form-item .cxd-TextControl-input input {
+  .cxd-Form-item .cxd-TextControl-input input {
     height: calc(var(--Form-input-lineHeight) * var(--fontSizeLg));
   }
-  .cxd-Form .cxd-Form-item .cxd-Form-value,
-  .cxd-Form .cxd-Form-item .cxd-Form-control {
+  .cxd-Form-item .cxd-NumberControl .cxd-Number {
+    flex: 1;
+    border: none;
+  }
+  .cxd-Form-item .cxd-NumberControl .cxd-Number .cxd-Number-handler-wrap {
+    display: none;
+  }
+  .cxd-Form-item .cxd-NumberControl .cxd-Select {
+    flex: none;
+    border: none;
+  }
+  .cxd-Form-item .cxd-Number--enhance {
+    float: right;
+    border: none;
+  }
+  .cxd-Form-item .cxd-Number--enhance-left-icon, .cxd-Form-item .cxd-Number--enhance-right-icon {
+    width: var(--inputNumber-enhance-mobile-icon-width);
+    height: var(--inputNumber-enhance-mobile-icon-height);
+    border: var(--Form-input-borderWidth) solid var(--borderColor);
+    border-radius: var(--Form-input-borderRadius);
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+  }
+  .cxd-Form-item .cxd-Number--enhance-left-icon svg.icon, .cxd-Form-item .cxd-Number--enhance-right-icon svg.icon {
+    top: 0;
+  }
+  .cxd-Form-item .cxd-Number--enhance .cxd-Number-input {
+    text-align: center;
+  }
+  .cxd-Form-item .cxd-Number--enhance .cxd-Number--enhance-input {
+    width: var(--inputNumber-enhance-mobile-input-width);
+    text-align: center;
+  }
+  .cxd-Form-item .cxd-Number--enhance .cxd-InputNumber-enhance-minus,
+.cxd-Form-item .cxd-Number--enhance .cxd-InputNumber-enhance-plus {
+    width: var(--inputNumber-enhance-mobile-icon-inner-width);
+    height: var(--inputNumber-enhance-mobile-icon-inner-height);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .cxd-Form-item .cxd-Number--enhance:hover .cxd-Number-input {
+    padding-left: var(--inputNumber-enhance-default-paddingLeft);
+    padding-right: var(--inputNumber-enhance-default-paddingRight);
+  }
+  .cxd-Form-item .cxd-Form-value,
+.cxd-Form-item .cxd-Form-control {
     flex: 1;
     flex-wrap: wrap;
     font-size: var(--fontSizeLg);
   }
-  .cxd-Form .cxd-Form-item .cxd-Form-value.is-disabled > .cxd-TextControl-input,
-  .cxd-Form .cxd-Form-item .cxd-Form-control.is-disabled > .cxd-TextControl-input {
+  .cxd-Form-item .cxd-Form-value .cxd-ColorPicker > input,
+.cxd-Form-item .cxd-Form-control .cxd-ColorPicker > input {
+    height: 100%;
+  }
+  .cxd-Form-item .cxd-Form-value .cxd-ResultBox,
+.cxd-Form-item .cxd-Form-control .cxd-ResultBox {
+    height: 100%;
+  }
+  .cxd-Form-item .cxd-Form-value .cxd-ResultBox .cxd-ResultBox-value-wrap,
+.cxd-Form-item .cxd-Form-control .cxd-ResultBox .cxd-ResultBox-value-wrap {
+    justify-content: flex-end;
+    text-align: right;
+  }
+  .cxd-Form-item .cxd-Form-value.is-disabled > .cxd-TextControl-input,
+.cxd-Form-item .cxd-Form-control.is-disabled > .cxd-TextControl-input {
     background: transparent;
   }
-  .cxd-Form .cxd-Form-item .cxd-SelectControl.cxd-Form-control {
+  .cxd-Form-item .cxd-SelectControl.cxd-Form-control {
     overflow: hidden;
   }
-  .cxd-Form .cxd-Form-item .cxd-Form-hint,
-  .cxd-Form .cxd-Form-item .cxd-Form-remark,
-  .cxd-Form .cxd-Form-item .cxd-Form-static,
-  .cxd-Form .cxd-Form-item .cxd-Form-group--hor .cxd-Form-item,
-  .cxd-Form .cxd-Form-item .cxd-SwitchControl,
-  .cxd-Form .cxd-Form-item .cxd-CheckboxControl,
-  .cxd-Form .cxd-Form-item .cxd-RadiosControl,
-  .cxd-Form .cxd-Form-item .cxd-CheckboxesControl {
+  .cxd-Form-item .cxd-Form-hint,
+.cxd-Form-item .cxd-Form-remark,
+.cxd-Form-item .cxd-Form-group--hor .cxd-Form-item,
+.cxd-Form-item .cxd-SwitchControl,
+.cxd-Form-item .cxd-CheckboxControl,
+.cxd-Form-item .cxd-RadiosControl,
+.cxd-Form-item .cxd-CheckboxesControl {
     padding-top: 0;
     padding-bottom: 0;
   }
-  .cxd-Form .cxd-Form-item .cxd-Form-group--horizontal .cxd-TextControl-input input {
+  .cxd-Form-item .cxd-SwitchControl,
+.cxd-Form-item .cxd-TransferControl,
+.cxd-Form-item .cxd-TagControl,
+.cxd-Form-item .cxd-CheckboxControl,
+.cxd-Form-item .cxd-TreeSelectControl,
+.cxd-Form-item .cxd-NestedSelectControl,
+.cxd-Form-item .cxd-TabsTransferControl {
+    padding-top: 0.1875rem;
+  }
+  .cxd-Form-item--inline {
+    margin-right: 0;
+  }
+  .cxd-Form-item .cxd-Form-item-controlBox {
+    flex: 1;
+  }
+  .cxd-Form-item .cxd-Form-static .cxd-Progress {
+    margin-top: 0.1875rem;
+  }
+  .cxd-Form-item .cxd-Form-static .cxd-Field-quickEditBtn {
+    vertical-align: baseline;
+  }
+  .cxd-Form-item .cxd-Form-group--horizontal .cxd-TextControl-input input {
     height: var(--Form-input-height);
   }
-  .cxd-Form .cxd-Form-item .cxd-Form-hint {
+  .cxd-Form-item .cxd-Form-hint {
     font-size: var(--fontSizeBase);
     margin-left: 0;
     color: var(--text--muted-color);
   }
-  .cxd-Form .cxd-Form-item .cxd-TextControl-placeholder {
+  .cxd-Form-item .cxd-TextControl-placeholder {
     top: 0;
   }
-  .cxd-Form .cxd-Form-item .cxd-Form-static {
+  .cxd-Form-item .cxd-Form-static {
     min-height: 0;
   }
-  .cxd-Form .cxd-Form-item .cxd-Form-description,
-  .cxd-Form .cxd-Form-item .cxd-Form-feedback {
+  .cxd-Form-item .cxd-Form-description,
+.cxd-Form-item .cxd-Form-feedback {
     font-size: var(--fontSizeBase);
   }
-  .cxd-Form .cxd-Form-item .cxd-InputGroup .cxd-Select,
-  .cxd-Form .cxd-Form-item .cxd-InputGroup .cxd-InputGroup-btn .cxd-Button {
+  .cxd-Form-item .cxd-InputGroup .cxd-Select,
+.cxd-Form-item .cxd-InputGroup .cxd-InputGroup-btn .cxd-Button {
     border: none;
   }
-  .cxd-Form .cxd-Form-item .cxd-InputGroup > .cxd-TextControl-input input {
+  .cxd-Form-item .cxd-InputGroup > .cxd-TextControl-input input {
     height: var(--Form-input-height);
   }
-  .cxd-Form .cxd-Form-item .cxd-ColorPicker {
+  .cxd-Form-item .cxd-ColorPicker {
     padding: 0;
     border: none;
   }
-  .cxd-Form .cxd-Form-item .cxd-ColorPicker .cxd-ColorPicker-arrow {
+  .cxd-Form-item .cxd-ColorPicker .cxd-ColorPicker-arrow {
     display: none;
   }
-  .cxd-Form .cxd-Form-item .cxd-Form-group--hor .cxd-Form-item .cxd-Button {
+  .cxd-Form-item .cxd-Form-group--hor .cxd-Form-item .cxd-Button {
     margin-bottom: var(--gap-xs);
   }
-  .cxd-Form .cxd-Form-item .cxd-TextareaControl > textarea,
-  .cxd-Form .cxd-Form-item .cxd-Form-control > .cxd-TextControl-input,
-  .cxd-Form .cxd-Form-item .cxd-TextControl.is-focused > .cxd-TextControl-input {
+  .cxd-Form-item .cxd-TextareaControl > textarea,
+.cxd-Form-item .cxd-Form-control > .cxd-TextControl-input,
+.cxd-Form-item .cxd-TextControl.is-focused > .cxd-TextControl-input {
     border: none;
     padding: 0 var(--Form-input-paddingX) 0 0;
     box-shadow: none;
+    border-radius: 0;
   }
-  .cxd-Form .cxd-Form-item .cxd-TextareaControl > textarea:hover, .cxd-Form .cxd-Form-item .cxd-TextareaControl > textarea:focus, .cxd-Form .cxd-Form-item .cxd-TextareaControl > textarea.active,
-  .cxd-Form .cxd-Form-item .cxd-Form-control > .cxd-TextControl-input:hover,
-  .cxd-Form .cxd-Form-item .cxd-Form-control > .cxd-TextControl-input:focus,
-  .cxd-Form .cxd-Form-item .cxd-Form-control > .cxd-TextControl-input.active,
-  .cxd-Form .cxd-Form-item .cxd-TextControl.is-focused > .cxd-TextControl-input:hover,
-  .cxd-Form .cxd-Form-item .cxd-TextControl.is-focused > .cxd-TextControl-input:focus,
-  .cxd-Form .cxd-Form-item .cxd-TextControl.is-focused > .cxd-TextControl-input.active {
+  .cxd-Form-item .cxd-TextareaControl > textarea:hover, .cxd-Form-item .cxd-TextareaControl > textarea:focus, .cxd-Form-item .cxd-TextareaControl > textarea.active,
+.cxd-Form-item .cxd-Form-control > .cxd-TextControl-input:hover,
+.cxd-Form-item .cxd-Form-control > .cxd-TextControl-input:focus,
+.cxd-Form-item .cxd-Form-control > .cxd-TextControl-input.active,
+.cxd-Form-item .cxd-TextControl.is-focused > .cxd-TextControl-input:hover,
+.cxd-Form-item .cxd-TextControl.is-focused > .cxd-TextControl-input:focus,
+.cxd-Form-item .cxd-TextControl.is-focused > .cxd-TextControl-input.active {
     border: none;
     outline: none;
     outline-style: none;
   }
-  .cxd-Form .cxd-Form-item .cxd-Form-control > .cxd-TextControl-input--multiple {
+  .cxd-Form-item .cxd-Form-control > .cxd-TextControl-input--multiple {
     padding: 0;
     min-height: 0;
   }
-  .cxd-Form .cxd-Form-groupColumn {
+
+  .cxd-Form-groupColumn {
     margin-bottom: 0;
   }
-  .cxd-Form > .cxd-Form-item.is-placeholder::after {
+
+  .cxd-Form-item:nth-last-of-type(1)::after {
     display: none;
   }
-  .cxd-Form .cxd-Divider {
+
+  .cxd-Form-item.is-placeholder::after {
     display: none;
   }
-  .cxd-Form .cxd-Tabs-pane {
+
+  .cxd-Tabs-pane {
     padding: 0;
   }
-  .cxd-Form .cxd-Form-item .cxd-Form-groupColumn > .cxd-Form-item {
+
+  .cxd-Form-item .cxd-Form-groupColumn > .cxd-Form-item {
     padding-bottom: var(--Form-input-paddingX);
   }
+
+  .cxd-Form-groupColumn {
+    position: relative;
+  }
+  .cxd-Form-groupColumn::after {
+    position: absolute;
+    box-sizing: border-box;
+    content: " ";
+    pointer-events: none;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-bottom: var(--Form-input-borderWidth) solid var(--borderColor);
+  }
+
+  .cxd-Form-groupColumn:nth-last-of-type(1)::after {
+    display: none;
+  }
 }
 .cxd-UserSelect {
   position: relative;
@@ -38332,8 +39005,11 @@ td.rdtQuarter.rdtDisabled:hover > span {
   /* 函数列表 */
 }
 .cxd-FormulaEditor-content {
-  border-radius: var(--borderRadius);
-  border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
+  flex: 1;
+  height: 100%;
+  max-width: 33.125rem;
+  border-top: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
+  border-bottom: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
 }
 .cxd-FormulaEditor-header {
   width: 100%;
@@ -38346,6 +39022,13 @@ td.rdtQuarter.rdtDisabled:hover > span {
   border-bottom: none;
   font-weight: 500;
 }
+.cxd-FormulaEditor-header-toolbar {
+  font-size: 12px;
+  float: right;
+}
+.cxd-FormulaEditor-header-toolbar > span {
+  margin-right: 5px;
+}
 .cxd-FormulaEditor-editor {
   height: 12.5rem;
   padding: 0.3125rem;
@@ -38374,31 +39057,26 @@ td.rdtQuarter.rdtDisabled:hover > span {
   flex-flow: row nowrap;
   align-items: stretch;
   justify-content: space-between;
-  height: 15.625rem;
+  height: 28.125rem;
   margin-top: 0.625rem;
 }
-.cxd-FormulaEditor-settings > div {
-  width: 0;
+.cxd-FormulaEditor-settings.is-mobile {
+  width: 100%;
+  overflow-x: scroll;
+  overflow-y: hidden;
 }
 .cxd-FormulaEditor-settings.only-variable {
   height: 21.875rem;
 }
 .cxd-FormulaEditor-panel {
   display: flex;
-  flex: 1;
   flex-flow: column nowrap;
   justify-content: space-between;
   align-items: stretch;
   height: 100%;
-  border-radius: var(--borderRadius);
+  width: 11.75rem;
   border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
 }
-.cxd-FormulaEditor-panel:not(:last-child) {
-  margin-right: 0.625rem;
-}
-.cxd-FormulaEditor-panel:last-child {
-  flex: 1;
-}
 .cxd-FormulaEditor-panel-header {
   width: 100%;
   height: 1.875rem;
@@ -38420,6 +39098,17 @@ td.rdtQuarter.rdtDisabled:hover > span {
 .cxd-FormulaEditor-panel-body--tabs {
   max-height: 100%;
 }
+.cxd-FormulaEditor-panel.left {
+  justify-content: normal !important;
+  border-radius: var(--borderRadius) 0 0 var(--borderRadius);
+}
+.cxd-FormulaEditor-panel.right {
+  width: 20.625rem;
+  border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
+}
+.cxd-FormulaEditor-VariableList {
+  height: 100%;
+}
 .cxd-FormulaEditor-VariableList-root {
   max-height: 100%;
 }
@@ -38435,7 +39124,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
   max-height: 100%;
 }
 .cxd-FormulaEditor-VariableList-base.is-scrollable {
-  overflow-x: hidden;
+  overflow-x: auto;
   overflow-y: auto;
 }
 .cxd-FormulaEditor-VariableList-base.is-scrollable::-webkit-scrollbar {
@@ -38477,7 +39166,6 @@ td.rdtQuarter.rdtDisabled:hover > span {
   padding: 0;
 }
 .cxd-FormulaEditor-VariableList-tabs .cxd-Tabs-content .cxd-FormulaEditor-VariableList-sub .cxd-FormulaEditor-VariableList-body {
-  max-height: 13.75rem;
   overflow-y: hidden;
 }
 .cxd-FormulaEditor-VariableList-tabs .cxd-Tabs-content .cxd-FormulaEditor-VariableList-sub-FormulaEditor-VariableList-base {
@@ -38547,6 +39235,13 @@ td.rdtQuarter.rdtDisabled:hover > span {
   flex: 1;
   width: 0;
   display: inline-block;
+  min-width: 3.125rem;
+}
+.cxd-FormulaEditor-VariableList-item .fa-ellipsis-h {
+  margin-right: 0.3125rem;
+}
+.cxd-FormulaEditor-VariableList-item .fa-ellipsis-h:hover {
+  color: var(--primary);
 }
 .cxd-FormulaEditor-VariableList-item-tag {
   vertical-align: middle;
@@ -38559,21 +39254,35 @@ td.rdtQuarter.rdtDisabled:hover > span {
   line-height: 1.5rem;
   height: 1.5rem;
 }
+.cxd-FormulaEditor-VariableList-item-oper {
+  list-style: none;
+  max-width: 14.6875rem;
+  font-size: var(--fontSizeSm);
+  min-width: 100px;
+  padding: 0 5px;
+  margin: 5px;
+  text-align: center;
+}
+.cxd-FormulaEditor-VariableList-item-oper li {
+  line-height: 24px;
+}
+.cxd-FormulaEditor-VariableList-item-oper li:hover {
+  cursor: pointer;
+  background: var(--Form-select-menu-onHover-bg);
+}
+.cxd-FormulaEditor-VariableList .cxd-GroupedSelection {
+  max-height: 100%;
+}
 .cxd-FormulaEditor-VariableList .cxd-GroupedSelection-item-tag {
   line-height: 17px;
 }
+.cxd-FormulaEditor-VariableList .cxd-GroupedSelection-itemLabel {
+  font-size: var(--fontSizeSm);
+}
 .cxd-FormulaEditor-FuncList {
   display: flex;
-  flex-flow: row nowrap;
-  justify-content: space-between;
-  align-items: stretch;
-  flex: 1;
-}
-.cxd-FormulaEditor-FuncList .cxd-FormulaEditor-panel {
-  width: 11.75rem;
-}
-.cxd-FormulaEditor-FuncList:not(:last-child) {
-  margin-right: 0.625rem;
+  flex-flow: column nowrap;
+  height: 100%;
 }
 .cxd-FormulaEditor-FuncList-searchBox {
   display: flex;
@@ -38633,20 +39342,30 @@ td.rdtQuarter.rdtDisabled:hover > span {
 .cxd-FormulaEditor-FuncList-doc {
   display: flex;
   flex-flow: column nowrap;
-  padding: 0.625rem;
-  max-height: 12.5rem;
+  padding: 0 0.625rem;
+  font-size: 12px;
+  height: 100%;
+  overflow: hidden;
 }
 .cxd-FormulaEditor-FuncList-doc pre {
   white-space: pre-wrap;
   word-wrap: break-word;
-  background: var(--InputFormula-code-bgColor);
-  padding: 0.3125rem 0.625rem;
   border-radius: var(--borderRadius);
   margin-top: 0;
 }
 .cxd-FormulaEditor-FuncList-doc pre code {
   color: #2468f2;
 }
+.cxd-FormulaEditor-FuncList-doc-example {
+  font-size: var(--fontSizeSm) !important;
+}
+.cxd-FormulaEditor-FuncList-doc-example th {
+  padding: 0.3125rem !important;
+  font-size: var(--fontSizeSm) !important;
+}
+.cxd-FormulaEditor-FuncList-doc-example td {
+  padding: 0.3125rem !important;
+}
 .cxd-FormulaEditor-FuncList-doc-desc {
   color: var(--text--loud-color);
   overflow-x: hidden;
@@ -38661,6 +39380,14 @@ td.rdtQuarter.rdtDisabled:hover > span {
   border-radius: 3px;
   background: rgba(0, 0, 0, 0.3);
 }
+.cxd-FormulaEditor-FuncList.withDoc {
+  max-height: 50% !important;
+}
+.cxd-FormulaEditor-FuncDoc {
+  height: 300px;
+  overflow: hidden;
+  background: var(--InputFormula-code-bgColor);
+}
 .cxd-FormulaEditor .cm-field,
 .cxd-FormulaEditor .cm-func {
   border-radius: 3px;
@@ -38669,7 +39396,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
   padding: 0 2px;
 }
 .cxd-FormulaEditor .cm-field {
-  padding: 3px 5px;
+  padding: 2px 5px;
 }
 .cxd-FormulaEditor .cm-field {
   background: #007bff;
@@ -38685,6 +39412,14 @@ td.rdtQuarter.rdtDisabled:hover > span {
   justify-content: space-between;
   align-items: center;
 }
+.cxd-FormulaPicker-popup {
+  height: 36.25rem;
+}
+.cxd-FormulaPicker-popup-inner {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 1rem;
+}
 .cxd-FormulaPicker-input {
   flex: 1;
   margin-right: 0.625rem;