@syncfusion/ej2-fabric-theme 34.2.8 → 35.1.37

package/styles/form-builder/_layout.scss

@@ -0,0 +1,2550 @@
+@use 'variables' as *;
+@use 'mixin' as *;
+
+@include export-module('form-builder-layout') {
+  .e-form-builder {
+    .left-pane {
+      width: $fb-sidebar-width;
+      transition: transform .5s ease-in-out, width .5s ease-in-out;
+      margin-top: 48px;
+      flex-shrink: 0;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .left-pane.mobile-screen {
+      position: absolute;
+      z-index: 1000;
+    }
+
+    .left-pane .e-tab.e-template .e-content > .e-item.e-active {
+      overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
+      height: 100% !important; /* stylelint-disable-line declaration-no-important */
+    }
+
+    .builder-container.e-component .left-pane {
+      height: calc(100% - $fb-topbar-height);
+    }
+
+    .left-pane.collapsed {
+      transform: translateX(-100%);
+      width: 0;
+      visibility: hidden;
+    }
+
+    .left-pane .e-accordion {
+      border: none;
+    }
+
+    .left-pane .e-accordion .e-acrdn-item {
+      margin-bottom: 12px;
+    }
+
+    .left-pane .e-accordion .e-acrdn-item .e-acrdn-panel .e-acrdn-content {
+      padding: 12px 0 0;
+    }
+
+    .left-pane-tabs {
+      height: 100% !important; /* stylelint-disable-line declaration-no-important */
+    }
+      
+    .left-pane-tabs .e-content {
+      height: calc(100% - 3rem) !important; /* stylelint-disable-line declaration-no-important */
+    }
+
+    .e-tooltip.e-msg-icon::before {
+      font-family: 'e-icons';
+      font-size: 16px;
+      height: 16px;
+      margin: 3px 4px;
+      display: flex;
+      line-height: 16px;
+    }
+
+    .palette-container {
+      padding: .75rem;
+      height: 100%;
+      flex: 1;
+      overflow-y: auto;
+    }
+
+    .palette-items {
+      display: flex;
+      flex-direction: row;
+      gap: .8rem;
+      flex-wrap: wrap;
+    }
+
+    .palette-item {
+      display: flex;
+      flex-direction: column;
+      width: 7.625rem;
+      min-height: 4.5rem;
+      height: auto;
+      align-items: center;
+      gap: .75rem;
+      padding: .85rem .45rem;
+      border-radius: .375rem;
+      cursor: pointer;
+      transition: all .2s ease;
+    }
+
+    .palette-items > * {
+      flex: 0 0 calc(50% - .45rem);
+    }
+
+    .palette-item-icon {
+      font-size: 1.25rem;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .palette-item-icon-svg {
+      opacity: .8;
+      transition: all .2s ease;
+    }
+
+    .palette-item-label {
+      font-size: .75rem;
+      font-weight: $fb-palette-label-weight;
+      line-height: 16px;
+      letter-spacing: 0;
+      text-align: center;
+    }
+
+    .no-scroll .e-content {
+      overflow-y: hidden !important; /* stylelint-disable-line declaration-no-important */
+    }
+
+    .listbox-pane-wrapper {
+      z-index: 1099;
+    }
+
+    .listbox-pane-popup {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      z-index: 1100;
+      width: 253px;
+      height: 360px;
+      border-radius: 8px;
+      overflow: hidden;
+    }
+
+    .listbox-pane-popup .e-listbox-container {
+      border: none;
+    }
+
+    .listbox-pane-popup .e-filter-input {
+      margin: 12px;
+      margin-bottom: 0;
+    }
+
+    .listbox-pane-popup .e-list-item {
+      padding: 10px 16px;
+    }
+
+    .listbox-pane-popup .e-list-group-item {
+      padding: 8px 16px;
+      font-weight: 600;
+      font-size: 12px;
+      text-transform: uppercase;
+      letter-spacing: .5px;
+    }
+
+    .listbox-pane-popup .e-listbox-wrapper.e-filter-list:not(.e-listbox-container) .e-list-parent {
+      height: calc(100% - 103.6px) !important; /* stylelint-disable-line declaration-no-important */
+      scrollbar-width: thin;
+    }
+
+    .listbox-item-with-icon {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      width: 100%;
+    }
+
+    .listbox-item-icon {
+      flex-shrink: 0;
+      width: 18px;
+      height: 18px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: .7;
+      transition: all .2s ease;
+    }
+
+    .listbox-item-label {
+      font-size: 13px;
+    }
+
+    .contentSection {
+      margin-top: $fb-topbar-height;
+      display: flex;
+      flex: 1;
+      overflow: hidden;
+      transition: all .3s ease-in-out;
+    }
+
+    .left-pane-toggle.e-btn {
+      position: absolute;
+      top: calc(2.6 * $fb-topbar-height);
+      z-index: 999;
+    }
+
+    .left-pane-toggle.e-btn.expanded {
+      border-radius: 50%;
+      left: calc($fb-sidebar-width - 18px);
+      transition: left .5s ease-in-out;
+    }
+
+    .e-rtl .left-pane-toggle.e-btn.expanded {
+      right: calc($fb-sidebar-width - 18px);
+      left: unset;
+    }
+
+    .left-pane-toggle.e-btn.collapsed {
+      border-top-right-radius: 32px;
+      border-bottom-right-radius: 32px;
+      left: 1px;
+      transition: left .5s ease-in-out;
+    }
+
+    .e-rtl .left-pane-toggle.e-btn.collapsed {
+      border-top-left-radius: 32px;
+      border-bottom-left-radius: 32px;
+      border-top-right-radius: unset;
+      border-bottom-right-radius: unset;
+      right: 1px;
+      left: unset;
+    }
+
+    .right-pane-toggle.e-btn {
+      position: absolute;
+      top: calc(2.6 * $fb-topbar-height);
+      z-index: 1001;
+    }
+
+    .builder-container:has(.conditions-editor-dialog.e-popup-open) .right-pane-toggle {
+      display: none;
+    }
+
+    .right-pane-toggle.e-btn.expanded {
+      right: calc($fb-ridesidebar-width - 18px);
+      border-radius: 50%;
+      transition: right .38s ease-in-out;
+    }
+
+    .e-rtl .right-pane-toggle.e-btn.expanded {
+      left: calc($fb-ridesidebar-width - 18px);
+      right: unset;
+    }
+
+    .right-pane-toggle.e-btn.collapsed {
+      border-top-left-radius: 32px;
+      border-bottom-left-radius: 32px;
+      right: 1px;
+      transition: right .5s ease-in-out;
+    }
+
+    .e-rtl .right-pane-toggle.e-btn.collapsed {
+      border-top-right-radius: 32px;
+      border-bottom-right-radius: 32px;
+      border-top-left-radius: unset;
+      border-bottom-left-radius: unset;
+      left: 1px;
+      right: unset;
+    }
+
+    .right-sidebar {
+      margin-top: 48px;
+      transition: transform .5s;
+      z-index: 999;
+      position: absolute;
+      overflow: hidden;
+      width: $fb-ridesidebar-width;
+      min-width: $fb-ridesidebar-width;
+      border-left: 1px solid;
+      height: calc(100vh - $fb-topbar-height - 3rem);
+      padding: 0;
+      right: 0;
+    }
+
+    .e-rtl .right-sidebar {
+      left: 0;
+      border-right: 1px solid;
+      border-left: none;
+      right: unset;
+    }
+
+    .small-screen .right-sidebar {
+      z-index: 1000;
+    }
+
+    .right-sidebar.sidebar-closed {
+      transform: translateX(100%);
+      border-left: none;
+      width: 0;
+    }
+
+    .e-rtl .right-sidebar.sidebar-closed {
+      transform: translateX(-100%);
+      border-right: none;
+      border-left: initial;
+      width: 0;
+    }
+
+    .small-screen .right-sidebar.sidebar-closed {
+      display: none;
+    }
+
+    .builder-container.e-component {
+      border: 1px solid;
+    }
+
+    .builder-container.e-component .right-sidebar {
+      height: 100%;
+    }
+
+    .builder-container.e-component .contentSection {
+      margin-top: unset;
+    }
+
+    .builder-container.e-component .main-header {
+      box-shadow: unset;
+      border-bottom: 1px solid;
+    }
+
+    .builder-container.e-component .main-section {
+      height: 100%;
+    }
+
+    .builder-container.e-component .preview-main-section {
+      top: unset;
+    }
+
+    .builder-container.e-component .left-pane-toggle.e-btn {
+      top: calc(1.6 * $fb-topbar-height);
+    }
+
+    .builder-container.e-component .right-pane-toggle.e-btn {
+      top: calc(1.6 * $fb-topbar-height);
+    }
+
+    .main-section {
+      padding-right: calc($fb-ridesidebar-width);
+      display: flex;
+      flex: 1;
+      overflow: hidden;
+      transition: padding-right .5s ease-in-out;
+    }
+
+    .e-rtl .main-section {
+      padding-left: calc($fb-ridesidebar-width);
+      padding-right: unset;
+    }
+
+    .small-screen .main-section {
+      padding-right: 0;
+    }
+
+    .e-rtl.small-screen .main-section {
+      padding-left: 0;
+    }
+
+    .main-section.right-collapsed {
+      padding-right: 0;
+      transition: padding-right .5s ease-in-out;
+    }
+
+    .e-rtl .main-section.right-collapsed {
+      padding-left: 0;
+      transition: padding-left .5s ease-in-out;
+    }
+
+    .form-dropzone {
+      width: 100%;
+      height: calc(90vh - $fb-topbar-height - 6.7rem);
+      border-radius: 12px;
+      border: 1px dashed $fb-drop-zone-border-color;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .builder-container.e-component .form-dropzone {
+      height: 100%;
+    }
+
+    .form-dropzone-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+      max-width: 274px;
+      text-align: center;
+    }
+
+    .dropzone-title {
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 20px;
+    }
+
+    .dropzone-hint {
+      font-size: 14px;
+      font-weight: normal;
+      line-height: 20px;
+      margin: 0;
+    }
+
+    .main-header {
+      position: absolute;
+      z-index: 1000;
+      left: 0;
+      width: 100%;
+      display: flex;
+      padding: 0 1.5rem;
+      min-height: $fb-main-header-height;
+      box-shadow: 0 8px 11px -6px rgba(0, 0, 0, .12);
+    }
+
+    .builder-container:not(.e-component):not(:has(.preview-main-section)) .main-header {
+      margin-top: $fb-topbar-height;
+    }
+
+    .small-screen .main-header {
+      padding: 0 .5rem;
+    }
+
+    .main-header .left-section {
+      flex: 1;
+      display: flex;
+      align-items: center;
+    }
+
+    .small-screen .main-header .left-section {
+      flex: 0;
+    }
+
+    .small-screen .preview-main-section .main-header .left-section {
+      flex: 1;
+    }
+
+    .sidebar-header .tab.active {
+      border-bottom: 2px solid;
+    }
+
+    .editor-handle {
+      position: absolute;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 48px;
+      opacity: 1;
+      bottom: 10px;
+      padding-right: calc($fb-ridesidebar-width + $fb-ridesidebar-width);
+      border-radius: 6px;
+      transition: padding-right .5s ease-in-out;
+    }
+
+    .e-rtl .editor-handle {
+      padding-left: calc($fb-ridesidebar-width + $fb-ridesidebar-width);
+      padding-right: unset;
+    }
+
+    .e-rtl .conditions-editor-dialog.e-control {
+      top: unset;
+      left: unset;
+    }
+
+    .editor-handle.right-collapsed,
+    .editor-handle.left-collapsed {
+      padding-right: calc($fb-ridesidebar-width);
+      transition: padding-right .5s ease-in-out;
+    }
+
+    .e-rtl .editor-handle.right-collapsed,
+    .e-rtl .editor-handle.left-collapsed {
+      padding-left: calc($fb-ridesidebar-width);
+      padding-right: unset;
+      transition: padding-left .5s ease-in-out;
+    }
+
+    .main-section:has(.preview-main-section) .editor-handle.right-collapsed:not(.left-collapsed),
+    .main-section:has(.preview-main-section) .editor-handle.left-collapsed:not(.right-collapsed) {
+      padding-right: calc($fb-ridesidebar-width + $fb-ridesidebar-width);
+      transition: padding-right .5s ease-in-out;
+    }
+
+    .e-rtl .main-section:has(.preview-main-section) .editor-handle.right-collapsed:not(.left-collapsed),
+    .e-rtl .main-section:has(.preview-main-section) .editor-handle.left-collapsed:not(.right-collapsed) {
+      padding-left: calc($fb-ridesidebar-width + $fb-ridesidebar-width);
+      transition: padding-left .5s ease-in-out;
+    }
+
+    .e-rtl .main-section:has(.preview-main-section) .editor-handle.right-collapsed:not(.left-collapsed) {
+      padding-right: unset;
+    }
+
+    .editor-handle.left-collapsed.right-collapsed {
+      padding-right: calc($fb-ridesidebar-width - $fb-ridesidebar-width);
+      transition: padding-right .5s ease-in-out;
+    }
+
+    .e-rtl .editor-handle.left-collapsed.right-collapsed {
+      padding-left: calc($fb-ridesidebar-width - $fb-ridesidebar-width);
+      transition: padding-left .5s ease-in-out;
+    }
+
+    .left-collapsed.editor-handle-center {
+      padding-right: 0 !important; /* stylelint-disable-line declaration-no-important */
+    }
+
+    .e-rtl .left-collapsed.editor-handle-center {
+      padding-left: 0 !important; /* stylelint-disable-line declaration-no-important */
+      padding-right: unset !important; /* stylelint-disable-line declaration-no-important */
+    }
+      
+    .right-collapsed.editor-handle-center {
+      padding-right: calc($fb-ridesidebar-width + $fb-ridesidebar-width) !important; /* stylelint-disable-line declaration-no-important */
+    }
+
+    .e-rtl .right-collapsed.editor-handle-center {
+      padding-left: calc($fb-ridesidebar-width + $fb-ridesidebar-width) !important; /* stylelint-disable-line declaration-no-important */
+      padding-right: unset !important; /* stylelint-disable-line declaration-no-important */
+    }
+      
+    .left-collapsed.right-collapsed.editor-handle-center {
+      padding-right: 0 !important; /* stylelint-disable-line declaration-no-important */
+    }
+      
+    .e-rtl .left-collapsed.right-collapsed.editor-handle-center {
+      padding-left: 0 !important; /* stylelint-disable-line declaration-no-important */
+      padding-right: unset !important; /* stylelint-disable-line declaration-no-important */
+    }
+
+    .small-screen .editor-handle {
+      padding-right: unset;
+      transition: padding-right .5s ease-in-out;
+    }
+
+    .add-field-message .e-msg-content {
+      font-size: 12px;
+      line-height: 16px;
+    }
+    
+    .e-toolbar-active .e-btn,
+    .e-toolbar-active .e-btn:hover {
+      background: $fb-toolbar-active-bg-color !important; /* stylelint-disable-line declaration-no-important */
+      border-color: $fb-toolbar-active-border-color !important; /* stylelint-disable-line declaration-no-important */
+      color: $fb-toolbar-content-color !important; /* stylelint-disable-line declaration-no-important */
+    }
+
+    .e-toolbar-active .e-btn-icon.e-icons,
+    .e-toolbar-active .e-tbar-btn-text {
+      color: $fb-toolbar-content-color !important; /* stylelint-disable-line declaration-no-important */
+    }
+
+    @if ($theme-name == 'Material3' or $theme-name == 'Material3-dark') {
+      .e-toolbar .e-toolbar-items,
+      .e-toolbar .e-toolbar-items .e-toolbar-item {
+        background: $fb-color-background;
+      }
+    }
+
+    @if ($theme-name == 'bootstrap4') {
+      .action-btn {
+        border: none;
+        color: $fb-palette-icon-color;
+        background: $fb-color-background;
+      }
+    }
+
+    .main-header .right-section {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: 6px;
+    }
+
+    .main-header .separator {
+      width: 1px;
+      height: 22px;
+      margin: 0 4px;
+    }
+
+    .builder-container {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      position: relative;
+      font-family: $fb-font-family;
+      letter-spacing: $fb-letter-spacing;
+      font-size: $fb-font-size;
+      margin: 0;
+      padding: 0;
+      font-weight: normal;
+      line-height: 1.5;
+      text-size-adjust: 100%;
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    }
+
+    .builder-container hr {
+      border: none;
+      height: .5px;
+      margin: 0;
+    }
+
+    .form-title h1 {
+      margin-top: 0;
+    }
+
+    .form-title {
+      text-align: center;
+    }
+
+    .small-screen * {
+      transition: none;
+    }
+
+    @media (max-width: 820px) {
+      .sidebar-overlay {
+        top: calc($fb-topbar-height + $fb-topbar-height);
+        background-color: $fb-color-scrim;
+        z-index: 1000;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+      }
+
+      .builder-container.e-component .sidebar-overlay {
+        top: $fb-topbar-height;
+        position: absolute;
+      }
+    }
+
+    .action-btn {
+      padding: .5rem 1rem;
+      border-radius: $fb-border-radius;
+      font-size: $fb-font-size;
+      cursor: pointer;
+      transition: all .2s ease;
+    }
+
+    .main-content {
+      flex: 1;
+      overflow-y: auto;
+      margin-top: 48px;
+      scrollbar-width: thin;
+    }
+
+    .form-preview-area {
+      min-width: 100%;
+      width: fit-content;
+      min-height: 100%;
+      padding: 1.5rem 2.5rem;
+      transition: background-color .2s ease;
+    }
+
+    .builder-container.e-component .form-preview-area:has(.empty-state) {
+      height: 100%;
+    }
+
+    .preview-main-content .form-preview-area {
+      height: calc(100vh - 96px);
+      overflow-y: auto;
+    }
+
+    .builder-container.e-component .preview-main-content .form-preview-area {
+      height: 100%;
+      overflow-y: auto;
+    }
+
+    .form-renderer-container {
+      margin: 0 auto;
+      overflow-x: auto;
+      overflow-y: hidden;
+      min-height: calc(100vh - $fb-topbar-height - 6rem);
+    }
+
+    .form-preview-area.empty {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .empty-state {
+      padding: 30px;
+      min-height: calc(100vh - $fb-topbar-height - 6rem);
+      margin: 0 auto;
+      text-align: center;
+      align-content: center;
+      overflow-x: auto;
+      overflow-y: hidden;
+    }
+
+    .builder-container.e-component .empty-state {
+      min-height: unset;
+      height: 100%;
+    }
+
+    .empty-state p {
+      margin: 0;
+    }
+
+    .form-components {
+      padding: 30px;
+      padding-bottom: 40px;
+      min-height: calc(100% - $fb-topbar-height - 6rem);
+      margin: 0 auto;
+      overflow-x: auto;
+      overflow-y: hidden;
+      display: flex;
+      max-width: $fb-form-width;
+      flex-direction: column;
+      gap: 1.5rem;
+    }
+
+    .builder-container.e-component .form-components {
+      min-height: unset;
+      height: 100%;
+    }
+
+    .form-field {
+      display: flex;
+      flex-direction: column;
+      gap: .5rem;
+    }
+
+    .field-content {
+      display: flex;
+      width: 100%;
+    }
+
+    .field-content.label-top {
+      flex-direction: column;
+      gap: .5rem;
+    }
+
+    .field-content.label-bottom {
+      flex-direction: column-reverse;
+      gap: .5rem;
+    }
+
+    .field-content.label-left {
+      flex-direction: row;
+      align-items: center;
+      gap: 1rem;
+    }
+
+    .field-content.label-right {
+      flex-direction: row-reverse;
+      align-items: center;
+      gap: 1rem;
+      justify-content: flex-end;
+    }
+
+    .field-content.label-left .field-input,
+    .field-content.label-right .field-input {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .field-label {
+      font-size: $fb-font-size;
+      font-weight: 500;
+      margin: 0;
+      cursor: pointer;
+      flex-shrink: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .field-description {
+      font-size: $fb-font-size-sm;
+    }
+
+    .field-content:not(.layout-component):has(.e-small:not(.e-btn)) .field-label {
+      font-size: $fb-font-size-sm;
+    }
+
+    .field-content:not(.layout-component):has(.e-small:not(.e-btn)) .field-description {
+      font-size: $fb-font-size-xs;
+    }
+
+    .field-content:not(.layout-component):has(.e-bigger:not(.e-btn)) .field-label {
+      font-size: $fb-font-size-lg;
+    }
+
+    .field-content:not(.layout-component):has(.e-bigger:not(.e-btn)) .field-description {
+      font-size: $fb-font-size;
+    }
+
+    .field-label .required {
+      margin-left: .25rem;
+    }
+
+    .field-input {
+      width: 100%;
+    }
+
+    .field-input .e-switch-wrapper,
+    .field-input .e-checkbox-wrapper {
+      margin: 5px;
+      margin-left: 0;
+    }
+
+    .split-view-container {
+      padding: 30px 60px;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .builder-container.e-component .split-view-container {
+      position: absolute;
+      height: calc(100% - 3rem);
+      left: 0;
+      width: 100%;
+      z-index: 10001;
+      align-items: center;
+    }
+
+    .split-header {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: .75rem 1.25rem;
+      border-bottom: 1px solid;
+    }
+
+    .download-btn {
+      padding: .5rem 1.25rem;
+      font-size: .875rem;
+      border: 1px solid;
+      border-radius: .375rem;
+      cursor: pointer;
+      transition: all .2s ease;
+      font-weight: 500;
+    }
+
+    .split-panels {
+      width: 70%;
+      flex: 1;
+      display: grid;
+      border-radius: 12px;
+      grid-template-columns: 1fr;
+      gap: 0;
+      overflow: hidden;
+    }
+
+    .split-panel {
+      display: flex;
+      flex-direction: column;
+      border-right: 1px solid;
+      overflow: hidden;
+    }
+
+    .split-panel:last-child {
+      border-right: none;
+    }
+
+    .split-panel .json-header {
+      height: 48px;
+      padding: .875rem 1rem;
+    }
+
+    .split-panel .json-title {
+      font-size: .875rem;
+    }
+
+    .split-panel .json-title::before {
+      font-size: 1rem;
+    }
+
+    .split-panel .json-content {
+      flex: 1;
+      font-size: 12px;
+      padding: 1rem;
+    }
+
+    .json-viewer {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .json-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 1rem 1.25rem;
+      border-bottom: 1px solid;
+    }
+
+    .json-title {
+      font-size: 1rem;
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      gap: .5rem;
+    }
+
+    .json-title::before {
+      content: '{ }';
+      font-size: 1.125rem;
+    }
+
+    .json-content {
+      flex: 1;
+      margin: 0;
+      padding: 1.25rem;
+      font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+      font-size: 13px;
+      line-height: 1.6;
+      overflow: auto;
+      white-space: pre;
+      word-wrap: normal;
+    }
+
+    .field-input .e-input-group,
+    .field-input .e-control-wrapper {
+      width: 100%;
+    }
+
+    .field-input .e-float-input {
+      width: 100%;
+    }
+
+    .form-field .field-input > .e-radio {
+      display: flex;
+      flex-direction: column;
+      gap: .75rem;
+    }
+
+    .form-field .e-radio + label {
+      margin-left: .5rem;
+    }
+
+    .form-panel {
+      border-radius: $fb-border-radius;
+      margin: 0;
+    }
+
+    .panel-legend {
+      font-size: 1.5rem;
+      font-weight: 600;
+      padding: 0 .5rem;
+      margin-left: .5rem;
+    }
+
+    .panel-drop-zone,
+    .tab-drop-zone {
+      padding: .8rem;
+      border: 2px dashed;
+      border-radius: $fb-border-radius;
+      margin: .5rem;
+      transition: all .2s ease;
+    }
+
+    .panel-drop-zone.empty,
+    .tab-drop-zone.empty {
+      min-height: 150px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .table-cell.drop-zone:has(> .drop-zone-text) {
+      align-content: center;
+      text-align: center;
+      height: 100px;
+      padding: 1rem;
+    }
+
+    .panel-children {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      width: 100%;
+    }
+
+    .panel-child-field {
+      display: flex;
+      flex-direction: column;
+      gap: .5rem;
+    }
+
+    .drop-zone-text {
+      opacity: .5;
+      font-size: .875rem;
+      margin: 0;
+    }
+
+    .form-table {
+      width: 100%;
+      border: 1px solid;
+      border-radius: $fb-border-radius;
+      overflow-x: auto;
+    }
+
+    .table-grid {
+      display: table;
+      width: 100%;
+      border-collapse: separate;
+      border-spacing: 0;
+      overflow-x: auto;
+      overflow-y: hidden;
+    }
+
+    .row {
+      display: table-row;
+      background: transparent;
+    }
+
+    .col,
+    [class ^= 'col-'] {
+      display: table-cell;
+      vertical-align: top;
+      min-height: 100%;
+    }
+
+    .col {
+      width: auto;
+    }
+
+    .col-1{ width: 8.33333333%; }
+    .col-2{ width: 16.66666667%; }
+    .col-3{ width: 25%; }
+    .col-4{ width: 33.33333333%; }
+    .col-5{ width: 41.66666667%; }
+    .col-6{ width: 50%; }
+    .col-7{ width: 58.33333333%; }
+    .col-8{ width: 66.66666667%; }
+    .col-9{ width: 75%; }
+    .col-10{ width: 83.33333333%; }
+    .col-11{ width: 91.66666667%; }
+    .col-12{ width: auto; }
+
+    .table-row {
+      border-bottom: 1px solid;
+    }
+
+    .table-row:last-child {
+      border-bottom: none;
+    }
+
+    .table-cell {
+      padding: .8rem;
+      border-right: 1px solid;
+      align-items: center;
+    }
+
+    .table-cell:last-child {
+      border-right: none;
+    }
+
+    .table-cell.drop-zone {
+      border: 2px dashed;
+      transition: all .2s ease;
+    }
+
+    .table-cell.drop-zone.dragging-over:has(.drop-zone-text) {
+      border-width: 2px;
+    }
+
+    .table-row:last-child .table-cell.drop-zone {
+      border-bottom: 2px dashed;
+    }
+
+    .table-row:last-child .table-cell.drop-zone.dragging-over:has(.drop-zone-text) {
+      border-bottom: 2px dashed;
+    }
+
+    .table-cell .nested-components {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    }
+
+    .table-cell .nested-field {
+      display: flex;
+      flex-direction: column;
+      gap: .25rem;
+    }
+
+    .table-cell .nested-field-label {
+      font-size: .875rem;
+      font-weight: 500;
+      cursor: pointer;
+      margin: 0;
+    }
+
+    .table-cell .nested-field-label .required {
+      margin-left: .25rem;
+    }
+
+    .table-cell .nested-field-input {
+      width: 100%;
+    }
+
+    .form-tabs {
+      width: 100%;
+    }
+
+    .form-tabs .e-content {
+      padding: 0;
+    }
+
+    .form-tabs .e-content .e-item {
+      padding: 0;
+    }
+
+    .tab-drop-zone {
+      padding: .8rem;
+      border: 2px dashed;
+      border-radius: $fb-border-radius;
+      display: flex;
+      flex-direction: column;
+      transition: all .2s ease;
+    }
+
+    .tab-drop-zone.empty {
+      align-items: center;
+      justify-content: center;
+    }
+
+    .tab-children {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    }
+
+    .tab-child-field {
+      display: flex;
+      flex-direction: column;
+      gap: .5rem;
+    }
+
+    .panel-child-field .field-input > .form-panel,
+    .panel-child-field .field-input > .form-table,
+    .panel-child-field .field-input > .form-tabs-container,
+    .tab-child-field .field-input > .form-panel,
+    .tab-child-field .field-input > .form-table,
+    .tab-child-field .field-input > .form-tabs-container,
+    .nested-field-input > .form-panel,
+    .nested-field-input > .form-table,
+    .nested-field-input > .form-tabs-container {
+      margin-top: 0;
+    }
+
+    .form-field-draggable.is-being-dragged .panel-drop-zone:hover,
+    .form-field-draggable.is-being-dragged .tab-drop-zone:hover,
+    .form-field-draggable.is-being-dragged .table-cell:hover {
+      border-color: $fb-color-on-surface-variant;
+      background-color: transparent;
+    }
+
+    .e-tooltip .e-msg-icon::before {
+      content: '\e800';
+      font-family: 'e-icons';
+      font-size: 16px;
+      height: 16px;
+      margin: 3px 4px;
+      display: flex;
+      line-height: 16px;
+    }
+
+    .draggable-fields-container {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      width: 100%;
+    }
+
+    .form-field-draggable {
+      user-select: none;
+      position: relative;
+      cursor: pointer;
+      transition: all .2s ease;
+    }
+
+    .form-preview-area:not(.dragging-over):not(.is-reordering):not(.is-nesteditemreordering):not(:has(.dragging-over)) .form-field-wrapper:hover:not(:has(.form-field-wrapper:hover)) {
+      border: 1px solid;
+      border-radius: 6px;
+      transition: none;
+    }
+
+    .form-preview-area:not(.dragging-over):not(.is-reordering):not(.is-nesteditemreordering):not(:has(.dragging-over)) .form-field-wrapper:focus-visible:not(:has(.form-field-wrapper:focus-visible)) {
+      border: 1px solid;
+      border-radius: 6px;
+      transition: none;
+      outline: none;
+    }
+
+    .form-preview-area.is-reordering.dragging-over:not(.drag-moving-up):not(:has(.touch-hovered)):not(:has(.dragging-over)) .form-field-wrapper:hover:not(:has(.form-field-wrapper:hover)) {
+      padding-bottom: 8px;
+      padding-top: 0;
+      border-bottom: 2px solid $fb-dragover-border-color;
+      border-top: none;
+    }
+
+    .form-preview-area.is-reordering.drag-moving-up.dragging-over:not(:has(.touch-hovered)):not(:has(.dragging-over)) .form-field-wrapper:hover:not(:has(.form-field-wrapper:hover)) {
+      padding-top: 8px;
+      padding-bottom: 0;
+      border-top: 2px solid $fb-dragover-border-color;
+      border-bottom: none;
+    }
+
+    .form-preview-area.is-nesteditemreordering:not(.drag-moving-up):not(.dragging-over):not(:has(.touch-hovered)):not(:has(.dragging-over)) .form-field-wrapper:hover:not(:has(.form-field-wrapper:hover)):not(:has(.panel-children, .tab-children, .nested-components)) {
+      padding-bottom: 8px;
+      padding-top: 0;
+      border-bottom: 2px solid $fb-dragover-border-color;
+      border-top: none;
+    }
+
+    .form-preview-area.is-nesteditemreordering.drag-moving-up:not(.dragging-over):not(:has(.touch-hovered)):not(:has(.dragging-over)) .form-field-wrapper:hover:not(:has(.form-field-wrapper:hover)):not(:has(.panel-children, .tab-children, .nested-components)) {
+      padding-top: 8px;
+      padding-bottom: 0;
+      border-top: 2px solid $fb-dragover-border-color;
+      border-bottom: none;
+    }
+
+    .form-preview-area:not(.dragging-over):not(.is-reordering):not(.is-nesteditemreordering):not(:has(.dragging-over)) .form-field-wrapper.is-active {
+      border: 1px solid;
+      border-radius: 6px;
+      background-color: transparent;
+    }
+
+    .form-preview-area.is-reordering.dragging-over:not(.drag-moving-up):not(:has(.dragging-over)) .form-field-wrapper.touch-hovered:not(:has(.form-field-wrapper.touch-hovered)) {
+      padding-bottom: 8px;
+      padding-top: 0;
+      border-bottom: 2px solid $fb-dragover-border-color;
+      border-top: none;
+    }
+
+    .form-preview-area.is-reordering.dragging-over.drag-moving-up:not(:has(.dragging-over)) .form-field-wrapper.touch-hovered:not(:has(.form-field-wrapper.touch-hovered)) {
+      padding-top: 8px;
+      padding-bottom: 0;
+      border-top: 2px solid $fb-dragover-border-color;
+      border-bottom: none;
+    }
+
+    .form-preview-area.is-nesteditemreordering:not(.drag-moving-up):not(.dragging-over):not(:has(.dragging-over)) .form-field-wrapper.touch-hovered:not(:has(.form-field-wrapper.touch-hovered)):not(:has(.panel-children, .tab-children, .nested-components)) {
+      padding-bottom: 8px;
+      padding-top: 0;
+      border-bottom: 2px solid $fb-dragover-border-color;
+      border-top: none;
+    }
+
+    .form-preview-area.is-nesteditemreordering.drag-moving-up:not(.dragging-over):not(:has(.dragging-over)) .form-field-wrapper.touch-hovered:not(:has(.form-field-wrapper.touch-hovered)):not(:has(.panel-children, .tab-children, .nested-components)) {
+      padding-top: 8px;
+      padding-bottom: 0;
+      border-top: 2px solid $fb-dragover-border-color;
+      border-bottom: none;
+    }
+
+    .form-field-draggable:active {
+      cursor: grabbing;
+    }
+
+    .form-field-clone {
+      display: flex;
+      align-items: center;
+      position: fixed;
+      pointer-events: none;
+    }
+
+    .clone-content {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 250px;
+    }
+
+    .e-dragging {
+      opacity: .5;
+    }
+
+    .panel-child-field-draggable {
+      cursor: pointer;
+      transition: all .2s ease;
+      user-select: none;
+    }
+
+    .panel-children.is-nested-reordering .panel-child-field-draggable:hover {
+      background-color: transparent;
+    }
+
+    .tab-child-field-draggable {
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .tab-children.is-nested-reordering .tab-child-field-draggable:hover {
+      background-color: transparent;
+    }
+
+    .table-cell-child-draggable {
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .nested-components.is-nested-reordering .table-cell-child-draggable:hover {
+      background-color: transparent;
+    }
+
+    .nested-field-clone {
+      display: flex;
+      align-items: center;
+      position: fixed;
+      pointer-events: none;
+    }
+
+    .form-preview-area.dragging-over:not(.is-reordering) .form-field-wrapper .form-field-draggable.drop-target-before {
+      border-top: 2px solid $fb-dragover-border-color;
+      padding-top: 10px;
+      transition: none;
+    }
+
+    .form-preview-area.dragging-over:not(.is-reordering) .form-field-wrapper .form-field-draggable.drop-target-after {
+      border-bottom: 2px solid $fb-dragover-border-color;
+      padding-bottom: 10px;
+      transition: none;
+    }
+
+    .form-preview-area:not(.is-nested-reordering) .panel-drop-zone.dragging-over .form-field-wrapper .panel-child-field-draggable.drop-target-before {
+      border-top: 2px solid $fb-dragover-border-color;
+      padding-top: 8px;
+      transition: none;
+    }
+
+    .form-preview-area:not(.is-nested-reordering) .panel-drop-zone.dragging-over .form-field-wrapper .panel-child-field-draggable.drop-target-after {
+      border-bottom: 2px solid $fb-dragover-border-color;
+      padding-bottom: 8px;
+      transition: none;
+    }
+
+    .form-preview-area:not(.is-nested-reordering) .tab-drop-zone.dragging-over .form-field-wrapper .tab-child-field-draggable.drop-target-before {
+      border-top: 2px solid $fb-dragover-border-color;
+      padding-top: 8px;
+    }
+
+    .form-preview-area:not(.is-nested-reordering) .tab-drop-zone.dragging-over .form-field-wrapper .tab-child-field-draggable.drop-target-after {
+      border-bottom: 2px solid $fb-dragover-border-color;
+      padding-bottom: 8px;
+    }
+
+    .form-preview-area:not(.is-nested-reordering) .table-cell.drop-zone.dragging-over .form-field-wrapper .table-cell-child-draggable.drop-target-before {
+      border-top: 2px solid $fb-dragover-border-color;
+      padding-top: 8px;
+    }
+
+    .form-preview-area:not(.is-nested-reordering) .table-cell.drop-zone.dragging-over .form-field-wrapper .table-cell-child-draggable.drop-target-after {
+      border-bottom: 2px solid $fb-dragover-border-color;
+      padding-bottom: 8px;
+    }
+
+    .form-field-draggable.drag-over-top {
+      border-top: 2px solid;
+    }
+
+    .form-field-draggable.drag-over-bottom {
+      border-bottom: 2px solid;
+    }
+
+    .form-components {
+      position: relative;
+    }
+
+    .import-dialog .e-dlg-content {
+      padding: 0;
+      overflow: visible;
+    }
+
+    .import-dialog-content {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      padding: 20px;
+      height: 100%;
+    }
+
+    .dialog-instruction {
+      margin: 0;
+      padding: 12px 16px;
+      border-radius: 8px;
+      border-left: 3px solid;
+    }
+
+    .dialog-instruction p {
+      margin: 0;
+      font-size: 14px;
+      line-height: 1.5;
+    }
+
+    .json-input-container {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .json-input {
+      width: 100%;
+      height: 100%;
+      min-height: 300px;
+      padding: 16px;
+      border: 2px solid;
+      border-radius: 8px;
+      font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+      font-size: 13px;
+      line-height: 1.6;
+      resize: vertical;
+      transition: border-color .2s;
+    }
+
+    .json-input:focus {
+      outline: none;
+      border-color: $fb-jsonview-border-color;
+      box-shadow: 0 0 0 3px $fb-json-input-shadow-color;
+    }
+
+    .json-input::placeholder {
+      opacity: .6;
+    }
+
+    .validation-result {
+      padding: 16px;
+      border-radius: 8px;
+      animation: slideIn .3s ease-out;
+    }
+
+    @keyframes slideUp {
+      from {
+        opacity: 0;
+        transform: translateY(10px);
+      }
+
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    @keyframes slideIn {
+      from {
+        opacity: 0;
+        transform: translateY(-10px);
+      }
+
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .validation-result.success {
+      border: 1px solid;
+    }
+
+    .validation-result.error {
+      border: 1px solid;
+    }
+
+    .validation-success {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-weight: 500;
+    }
+
+    .validation-success svg {
+      flex-shrink: 0;
+    }
+
+    .validation-errors,
+    .validation-warnings {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .error-header,
+    .warning-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-weight: 600;
+      margin-bottom: 4px;
+    }
+
+    .error-list,
+    .warning-list {
+      margin: 0;
+      padding-left: 28px;
+      list-style: disc;
+    }
+
+    .error-list li,
+    .warning-list li {
+      margin: 4px 0;
+      font-size: 13px;
+      line-height: 1.5;
+    }
+
+    .import-dialog-footer {
+      display: flex;
+      gap: 12px;
+      justify-content: flex-end;
+      align-items: center;
+    }
+
+    .import-dialog-footer .validate-btn {
+      margin-right: auto;
+    }
+
+    .import-dialog-footer .import-btn:disabled {
+      opacity: .5;
+      cursor: not-allowed;
+    }
+
+    .conditions-editor-dialog .e-listbox-wrapper {
+      border: none;
+      border-radius: 0;
+    }
+
+    .conditions-editor-dialog .e-listbox-wrapper .e-list-item {
+      border-radius: 6px;
+    }
+
+    .split-schema-container {
+      display: flex;
+      gap: 16px;
+      height: 100%;
+    }
+
+    .split-schema-container > div {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+    }
+
+    .split-schema-container label {
+      font-weight: 600;
+      margin-bottom: 8px;
+      display: flex;
+      align-items: baseline;
+      gap: 8px;
+    }
+
+    .split-schema-container label span {
+      font-weight: normal;
+      font-size: .85em;
+    }
+
+    @media (max-width: 768px) {
+      .split-panels {
+        width: 100%;
+      }
+      .import-dialog {
+        width: 95%;
+        height: 90%;
+      }
+
+      .json-input {
+        min-height: 200px;
+      }
+
+      .split-schema-container {
+        flex-direction: column;
+        gap: 12px;
+      }
+
+      .split-schema-container .json-input {
+        min-height: 150px;
+      }
+    }
+
+    .options-editor {
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    .options-grid {
+      max-height: 300px;
+    }
+
+    .options-grid.table-col .e-content {
+      height: 260px;
+    }
+
+    .options-grid .e-rowcell {
+      padding: 12px;
+      font-size: 13px;
+    }
+
+    .options-editor .e-rowcell.e-templatecell {
+      box-shadow: unset;
+    }
+
+    .options-actions {
+      display: flex;
+      gap: 8px;
+    }
+
+    .options-actions .e-primary {
+      padding: 8px 16px;
+      font-size: 13px;
+    }
+
+    .sidebar-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      min-height: 48px;
+      padding: 0 1.5rem;
+      flex-shrink: 0;
+    }
+
+    .sidebar-header .tab {
+      display: flex;
+      height: 48px;
+      align-items: center;
+      text-align: center;
+    }
+
+    .sidebar-header .tab p {
+      font-weight: $fb-nav-weight;
+    }
+
+    .sidebar-header .tab.active p {
+      font-weight: $fb-nav-active-weight;
+    }
+
+    .sidebar-header h3 {
+      margin: 0;
+      font-size: .875rem;
+      line-height: 20px;
+      font-weight: 600;
+      font-style: semi-bold;
+      letter-spacing: 0;
+    }
+
+    .close-btn {
+      background: none;
+      border: none;
+      font-size: 1rem;
+      cursor: pointer;
+    }
+
+    .rightpane-property-content.single-view {
+      height: 100%;
+      overflow-y: hidden;
+    }
+
+    .form-settings.property-content {
+      display: flex;
+      flex-direction: column;
+      height: calc(100vh - $fb-topbar-height - $fb-topbar-height - 3rem);
+    }
+
+    .builder-container.e-component .form-settings.property-content {
+      height: calc(100% - $fb-topbar-height - $fb-topbar-height);
+    }
+
+    .property-tabs-wrapper {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .property-tabs {
+      width: 100%;
+      overflow: auto;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .property-tabs.e-tab {
+      display: flex;
+    }
+
+    .property-tabs .e-tab-header {
+      flex-shrink: 0;
+    }
+
+    .property-tabs .e-content {
+      padding: 0;
+      overflow-y: hidden;
+      flex: 1;
+    }
+
+    .property-tabs .e-content .e-item {
+      padding: 0;
+      height: 100%;
+      overflow-y: auto;
+    }
+
+    .property-tabs .e-content .e-item.e-active {
+      display: block;
+    }
+
+    .property-group {
+      padding: .75rem 1rem;
+    }
+
+    .property-group-content {
+      display: flex;
+      flex-direction: column;
+      gap: 1.25rem;
+    }
+
+    .property-group-content:has(.custom-accordion) {
+      gap: 0;
+    }
+
+    .property-group:has(.custom-accordion) {
+      padding: .75rem 0;
+    }
+
+    .property-field {
+      display: flex;
+      flex-direction: column;
+      gap: .5rem;
+    }
+
+    .property-field-checkbox {
+      align-items: flex-start;
+      gap: .75rem;
+    }
+
+    .property-label {
+      font-size: .875rem;
+      font-weight: 600;
+      margin: 0;
+      line-height: 20px;
+      display: flex;
+      align-items: center;
+      gap: .25rem;
+      font-family: inherit;
+      letter-spacing: 0;
+    }
+
+    .property-label .required {
+      font-weight: 600;
+    }
+
+    .property-description {
+      font-size: .75rem;
+      margin: 0;
+      line-height: 1.4;
+    }
+
+    .property-field .e-input-group,
+    .property-field .e-control-wrapper,
+    .property-field .e-float-input {
+      width: 100%;
+    }
+
+    .property-field .e-textbox,
+    .property-field .e-numerictextbox,
+    .property-field .e-dropdownlist {
+      width: 100%;
+    }
+
+    .condition-builder-placeholder {
+      padding: 2rem;
+      border: 2px dashed;
+      border-radius: $fb-border-radius;
+      text-align: center;
+      background-color: transparent;
+    }
+
+    .rightpane-property-content::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    .rightpane-property-content::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    .rightpane-property-content::-webkit-scrollbar-thumb {
+      border-radius: 4px;
+    }
+
+    .properties-section {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      width: 100%;
+      height: calc(100vh - $fb-topbar-height - $fb-topbar-height);
+      background: transparent;
+    }
+
+    .preview-section {
+      background: transparent;
+    }
+
+    .preview-main-section .main-header {
+      position: absolute;
+      z-index: 10001;
+    }
+
+    .builder-container.e-component .properties-section {
+      height: calc(100% - $fb-topbar-height - $fb-topbar-height);
+    }
+
+    .builder-container.e-component .properties-section:has(.column-details) {
+      height: calc(100% - $fb-topbar-height);
+    }
+
+    .section-header {
+      min-height: 3.7rem;
+      padding: 16px 20px;
+      font-weight: 600;
+      font-size: 14px;
+      flex-shrink: 0;
+    }
+
+    .properties-section .property-tabs-wrapper {
+      flex: 1;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .properties-section .property-group {
+      flex: 1;
+      overflow-y: auto;
+    }
+
+    .custom-tabs {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .custom-tab-headers {
+      display: flex;
+      flex-shrink: 0;
+    }
+
+    .custom-tab-header {
+      padding: 12px 24px;
+      border: none;
+      background: transparent;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      position: relative;
+      transition: all .3s ease;
+      border-bottom: 2px solid transparent;
+    }
+
+    .custom-tab-content {
+      flex: 1;
+      overflow-y: auto;
+    }
+
+    .custom-validation-editor .e-rule-field {
+      display: flex;
+      height: 28px;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+    }
+
+    .custom-validation-editor .e-rule-value {
+      flex: 1;
+    }
+
+    .custom-validation-editor .e-removerule {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      min-width: 32px;
+      min-height: 32px;
+    }
+
+    .custom-validation-editor .e-group-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 20px;
+    }
+
+    .custom-validation-editor .e-rule-list {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .property-tabs .e-content {
+      background: unset;
+    }
+
+    .minmax-toggle-section {
+      padding-bottom: 12px;
+    }
+
+    .minmax-toggle-section .e-checkbox-wrapper {
+      margin-bottom: 0;
+    }
+
+    .minmax-inputs-row {
+      display: flex;
+      gap: 4px;
+      align-items: flex-end;
+    }
+
+    .minmax-input-group {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 3px;
+    }
+
+    @media (max-width: 768px) {
+      .rightpane-property-content.split-view {
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr 1fr;
+      }
+
+      .properties-section {
+        border-right: none;
+        border-bottom: 1px solid;
+      }
+    }
+
+    .column-builder {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    .column-list {
+      min-height: 35px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      max-height: 800px;
+      scrollbar-width: thin;
+      overflow-y: auto;
+    }
+
+    .column-item {
+      border: 1px solid;
+      border-radius: 4px;
+      overflow: visible;
+      flex-shrink: 0;
+    }
+
+    .right-sidebar:has(.right-sidebar-column) .sidebar-header,
+    .right-sidebar:has(.right-sidebar-column) .e-tab .e-tab-header {
+      display: none;
+    }
+
+    .right-sidebar-column {
+      top: 0;
+      margin-top: 0;
+      transition: transform .5s;
+      z-index: 999;
+      position: absolute;
+      overflow: hidden;
+      width: $fb-ridesidebar-width;
+      min-width: $fb-ridesidebar-width;
+      border-left: 1px solid;
+      height: calc(100vh - $fb-topbar-height - 3rem);
+      padding: 0;
+      right: 0;
+    }
+
+    .builder-container.e-component .right-sidebar-column {
+      height: 100%;
+    }
+
+    .column-details {
+      display: flex;
+      flex-direction: column;
+      height: calc(100vh - $fb-topbar-height - $fb-topbar-height - 3rem);
+      overflow-y: auto;
+    }
+
+    .builder-container.e-component .column-details {
+      height: calc(100% - $fb-topbar-height);
+    }
+
+    .builder-container.e-component .conditions-editor-wrapper .e-dlg-container .e-dlg-overlay {
+      background-color: transparent;
+    }
+
+    .column-sidebar-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      min-height: 48px;
+      padding: 0 1.5rem;
+      flex-shrink: 0;
+    }
+
+    .column-sidebar-header h3 {
+      margin: 0;
+      font-size: .875rem;
+      line-height: 20px;
+      font-weight: 600;
+      font-style: Semi Bold;
+      letter-spacing: 0;
+    }
+
+    .column-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-radius: 6px;
+      padding: 4px 4px 4px 8px;
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .column-field {
+      font-weight: 600;
+      font-size: 14px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .column-header-text {
+      font-size: 13px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .column-header .delete-btn {
+      padding: 4px 8px;
+      font-size: 12px;
+      border: none;
+      border-radius: 3px;
+      cursor: pointer;
+      flex-shrink: 0;
+      transition: background .2s;
+    }
+
+    .conditional-column .column-details {
+      height: 500px;
+    }
+
+    .no-border-radius {
+      border: none;
+      border-top-left-radius: 6px;
+      border-top-right-radius: 6px;
+    }
+
+    .column-builder .e-fb-form-group {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .condition-data-editor {
+      padding-top: 8px;
+    }
+
+    .rule-details {
+      padding: 0;
+    }
+
+    .column-list {
+      overflow-y: hidden;
+    }
+
+    .rule-item {
+      margin-bottom: 12px;
+      border: 1px solid;
+      border-radius: 4px;
+      overflow: hidden;
+    }
+
+    .rule-header {
+      padding: 12px;
+      cursor: pointer;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      user-select: none;
+    }
+
+    .rule-title {
+      font-weight: 500;
+      margin: 0;
+      flex: 1;
+    }
+
+    .rule-details .e-fb-form-group:last-child {
+      margin-bottom: 0;
+    }
+
+    .rule-actions .e-btn {
+      padding: 8px 16px;
+      font-size: 13px;
+    }
+
+    .condition-data-editor .e-rule-value.e-template-value.e-value.e-show {
+      width: 100%;
+    }
+
+    .condition-data-editor .e-query-builder .e-group-body .e-rule-container .e-rule-value.e-custom-value {
+      width: 100%;
+    }
+
+    .checkbox-group {
+      flex-direction: row;
+    }
+
+    .checkbox-group label {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-weight: normal;
+      margin: 0;
+    }
+
+    .checkbox-group input[type = 'checkbox'] {
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+    }
+
+    .datagrid-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      width: 100%;
+    }
+
+    .datagrid-label {
+      font-weight: 600;
+      font-size: 14px;
+      display: block;
+      margin-bottom: 8px;
+    }
+
+    .validation-error {
+      font-size: 12px;
+      margin-top: 4px;
+    }
+
+    .query-section {
+      padding-top: .75rem;
+      padding-bottom: .5rem;
+    }
+
+    .form-field-wrapper {
+      position: relative;
+      transition: box-shadow .15s ease;
+      z-index: 1;
+    }
+
+    .form-field-wrapper .form-field-wrapper {
+      z-index: 2;
+    }
+
+    .action-button-wrapper {
+      position: absolute;
+      top: -2.9rem;
+      right: .5rem;
+      height: 48px;
+      display: flex;
+      align-items: center;
+      visibility: hidden;
+      pointer-events: none;
+      transition: visibility .15s ease;
+      z-index: 1000;
+    }
+
+    .draggable-fields-container > .form-field-wrapper:first-child > .action-button-wrapper,
+    .panel-children > .form-field-wrapper:first-child > .action-button-wrapper,
+    .nested-components > .form-field-wrapper:first-child > .action-button-wrapper,
+    .tab-children > .form-field-wrapper:first-child > .action-button-wrapper {
+      top: -1.5rem;
+    }
+
+    .action-buttons {
+      display: flex;
+      gap: .25rem;
+      opacity: 1;
+      pointer-events: auto;
+      padding: .25rem;
+      border-radius: 4px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
+    }
+
+    .form-preview-area:not(.dragging-over):not(.is-reordering):not(.is-nesteditemreordering):not(:has(.dragging-over)) .form-field-wrapper:hover > .action-button-wrapper {
+      visibility: visible;
+      pointer-events: auto;
+    }
+
+    .small-screen .form-preview-area:not(.dragging-over):not(.is-reordering):not(.is-nesteditemreordering):not(:has(.dragging-over)) .form-field-wrapper.is-active > .action-button-wrapper {
+      visibility: visible;
+      pointer-events: auto;
+    }
+
+    .form-preview-area:not(.dragging-over):not(.is-reordering):not(.is-nesteditemreordering):not(:has(.dragging-over)) .form-field-wrapper:has(.form-field-wrapper:hover) > .action-button-wrapper {
+      visibility: hidden;
+      pointer-events: none;
+    }
+
+    .form-field-wrapper.is-active .change-component {
+      display: block;
+      overflow: hidden;
+    }
+
+    .action-btn {
+      min-width: 28px;
+      height: $fb-mode-button-height;
+      padding: 4px;
+    }
+
+    .mode-button {
+      height: $fb-mode-button-height;
+      padding-top: 4px;
+      padding-bottom: 4px;
+    }
+
+    .field-inserted {
+      animation: field-inserted 2s ease-out forwards;
+    }
+
+    @keyframes field-inserted {
+      0% {
+        border: 2px solid;
+        background-color: transparent;
+      }
+      100% {
+        border: 1px solid transparent;
+        background-color: transparent;
+      }
+    }
+
+    .e-dropdown-popup {
+      background: transparent;
+      z-index: 9999;
+    }
+
+    .e-control.e-dialog {
+      overflow: auto;
+    }
+
+    .e-dlg-header .db-dialog * {
+      font-size: 14px;
+    }
+
+    .e-dlg-header .db-dialog {
+      padding: 0 18px;
+    }
+
+    .e-card .e-card-content {
+      padding: 10px;
+    }
+
+    .e-card > .e-card-content > .panel-drop-zone {
+      margin: 0;
+    }
+
+    #radiogroup {
+      display: flex;
+      flex-direction: column;
+      gap: .75rem;
+    }
+
+    .add-field-message-wrapper {
+      margin-top: 1rem;
+    }
+
+    .add-field-message {
+      justify-content: center;
+      cursor: pointer;
+      font-size: 12px;
+      line-height: 16px;
+    }
+
+    .add-field-message .e-msg-content .e-icons {
+      position: relative;
+      top: 2px;
+      margin-right: 10px;
+    }
+
+    .listbox-item-with-icon.e-btn {
+      display: flex;
+      justify-content: flex-start;
+      padding: 0;
+      font-weight: 500;
+      background-color: transparent;
+      border: medium none currentcolor;
+    }
+
+    .custom-accordion-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      height: 45px;
+      cursor: pointer;
+      user-select: none;
+      border-bottom: 1px solid $fb-color-line-color;
+    }
+
+    .custom-accordion-header--open {
+      border-bottom: none;
+    }
+
+    .custom-accordion-header--closed {
+      border-bottom: 1px solid $fb-color-line-color;
+    }
+
+    .column-builder .e-fb-form-group label {
+      font-weight: 500;
+      font-size: 13px;
+      color: $fb-jsonview-text-color;
+    }
+  
+    .custom-accordion-header-hover {
+      background-color: rgba(0, 0, 0, .04);
+    }
+
+    .custom-accordion-icon {
+      margin-left: 10px;
+    }
+
+    .custom-accordion-title {
+      font-weight: 500;
+      font-size: 14px;
+      color: $fb-jsonview-text-color;
+    }
+
+    .custom-accordion-content {
+      padding: .5rem 1rem 1rem;
+    }
+
+    .e-rating-container {
+      min-width: unset !important; /* stylelint-disable-line declaration-no-important */
+    }
+
+    .e-rating-container .e-rating-item-list {
+      flex-wrap: wrap;
+    }
+    
+    .e-button-icon {
+      font-family: 'e-icons';
+      line-height: 1;
+    }
+    
+    .e-fb-form-group label {
+      font-weight: 500;
+      font-size: 13px;
+    }
+    
+    .e-fb-form-group {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .data-source-divider {
+      height: 1px;
+      background: $fb-color-line-color;
+    }
+
+    .data-source-adaptor-divider {
+      height: .5px;
+      background: $fb-color-line-color;
+      margin-top: 1rem;
+    }
+
+    .data-source-bottom-divider {
+      height: .5px;
+      background: $fb-color-line-color;
+      margin-top: 1rem;
+    }
+
+    .filter-row {
+      border: 1px solid $fb-color-line-color;
+    }
+
+    .palette-item-clone {
+      background: $fb-color-background;
+    }
+
+    label {
+      font-size: $fb-font-size-sm;
+    }
+
+    .e-menu-icon.e-icons.e-repeat {
+      margin-top: $fb-menu-margin;
+    }
+
+    .e-menu-item:has(.e-menu-icon.e-icons.e-repeat) {
+      padding-left: 0;
+      height: $fb-reset-btn-height;
+    }
+
+    .e-menu-item:has(.e-menu-icon.e-icons.e-repeat) .e-icons.e-caret {
+      display: none;
+    }
+
+    .e-menu-item:has(.e-menu-icon.e-icons.e-repeat) .e-icons.e-repeat {
+      @if ($theme-name == 'Material3' or $theme-name == 'Material3-dark') {
+        margin-left: 7px;
+        margin-top: 1px;
+      }
+      @else {
+        margin-left: 8px;
+      }
+    }
+
+    .conditions-saved-row span:not(.e-btn-icon) {
+      gap: 8px;
+    }
+        
+    @if ($theme-name == 'material' or $theme-name == 'material-dark') {
+      .e-menu-item:has(.e-menu-icon.e-icons.e-repeat) .e-icons.e-repeat {
+        margin-left: 3px;
+      }
+    }
+
+    .e-menu-wrapper ul {
+      width: 28px;
+      height: 100%;
+    }
+
+    .e-menu-wrapper ul.e-menu:not(.e-vertical),
+    .e-menu-container ul.e-menu:not(.e-vertical) {
+      padding: 0;
+    }
+
+    .e-menu-parent.e-ul {
+      min-width: 130px;
+    }
+
+    @media (max-width: 820px) {
+      .form-preview-area {
+        padding-left: 10px;
+        padding-right: 10px;
+      }
+
+      .split-view-container {
+        padding: 30px 20px;
+      }
+    }
+
+    &.e-rtl {
+      .left-pane.collapsed {
+        transform: translateX(100%);
+        border-left: none;
+        border-right: initial;
+        width: 0;
+      }
+    }
+  }
+
+  .e-bigger .e-form-builder .conditions-saved-row .e-btn,
+  .e-bigger .e-form-builder .action-buttons .e-btn {
+    font-size: 14px;
+    line-height: 1.223em;
+    padding: 6.45px 8px;
+  }
+
+  .e-bigger .e-form-builder .left-pane-toggle.e-btn,
+  .e-bigger .e-form-builder .right-pane-toggle.e-btn {
+    line-height: 1.223em;
+    padding: 6.45px 8px;
+  }
+    
+  .e-bigger .e-form-builder .left-pane,
+  .e-bigger .e-form-builder .right-sidebar  {
+    margin-top: 56px;
+  }
+    
+  .e-bigger .e-form-builder .builder-container.e-component .right-pane-toggle.e-btn,
+  .e-bigger .e-form-builder .builder-container.e-component .left-pane-toggle.e-btn {
+    top: 5.4rem;
+  }
+
+  .e-bigger .e-form-builder .sidebar-header h3 {
+    font-size: 1rem;
+  }
+
+  .e-bigger .e-form-builder .close-btn {
+    font-size: 1.2rem;
+  }
+}
+
+.e-bigger {
+  .e-form-builder{
+    .field-content:not(.layout-component) .field-label {
+      font-size: $fb-font-size-lg;
+    }
+
+    .main-header {
+      min-height: 56px !important; /* stylelint-disable-line declaration-no-important */
+    }
+
+    .action-btn {
+      height: $fb-mode-button-height-bigger;
+    }
+
+    .mode-button {
+      height: $fb-mode-button-height-bigger;
+    }
+
+    .left-pane-toggle.e-btn .e-btn-icon,
+    .right-pane-toggle.e-btn .e-btn-icon {
+      @if ($theme-name == 'Material3' or $theme-name == 'Material3-dark') {
+        font-size: 18px;
+      }
+      @else {
+        font-size: 14px;
+      }
+    }
+
+    .e-menu-wrapper ul {
+      width: 36px;
+      height: 100%;
+    }
+
+    .e-menu-item:has(.e-menu-icon.e-icons.e-repeat) {
+      height: $fb-reset-btn-height-bigger;
+    }
+
+    .e-menu-item:has(.e-menu-icon.e-icons.e-repeat) .e-icons.e-repeat {
+      @if ($theme-name == 'Material3' or $theme-name == 'Material3-dark') {
+        margin-left: 9px;
+      }
+      @if ($theme-name == 'tailwind3-dark' or $theme-name == 'tailwind3') {
+        font-size: 16px;
+        margin-left: 10px;
+      }
+    }
+  }
+}