@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;
      }
    }
  }
}